/* Start:/local/templates/assimettric-avl_s3/components/bitrix/news.list/slider_index/style.css?179361469121079*/
/*
 * Block: hero
 */

/* Плавное появление текста слайда — привязано к классу .swiper-slide-active,
   который Swiper сам навешивает/снимает на каждом переключении слайда (в т.ч.
   на первом при инициализации) — доп. JS не нужен, чистый CSS-триггер. Не
   переиспользует общий [data-reveal]/scroll-reveal.js (тот — одноразовый
   скролл-триггер, здесь нужен повторяемый триггер смены слайда — разная
   логика, конфликтовали бы). */
.hero__content [data-slide-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.hero__content.swiper-slide-active [data-slide-reveal] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero__content [data-slide-reveal] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 49.11vw; /* 943 / 1920 */
  background: var(--color-panel);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* По макету низ фото плавно растворяется в фоне секции, а не обрезан
     чётко — тот же приём маски-градиента, что и на /portfolio/
     (.proekty-hero__media). Маска на контейнере, а не на самом
     .hero__media-track — тогда зона растворения считается от видимого
     окна hero, а не от вдвое более высокой "ленты" с двумя кадрами
     внутри неё. .hero__media-overlay ниже уже сам гаснет в var(--color-panel)
     к 100%, поэтому маска здесь только усиливает то же затухание. */
  /*mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 80%);*/
  mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
}

/* "Лента фотографий" — вертикальный push вместо кроссфейда: track вдвое выше
   контейнера и держит два кадра друг под другом (верхний — текущий, нижний —
   следующий). Смена слайда сдвигает track на -50% (текущий кадр уезжает
   вверх, следующий поднимается на его место), затем script.js мгновенно (без
   transition) возвращает track в 0 и копирует src нижнего кадра в верхний —
   лента снова готова к следующему циклу. Длительность transition должна
   совпадать с MEDIA_SLIDE_MS в script.js. */
.hero__media-track {
  position: absolute;
  inset: 0;
  height: 200%;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.hero__media-track.is-sliding {
  transform: translateY(-50%);
}

.hero__media-img {
  display: block;
  width: 100%;
  height: 50%;
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .hero__media-track {
    transition: none !important;
  }
}

.hero__media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 8, 11, 0.88) 0%, rgba(6, 8, 11, 0.6) 28%, rgba(6, 8, 11, 0.1) 52%, rgba(6, 8, 11, 0.25) 100%),
    linear-gradient(180deg, rgba(6, 8, 11, 0.25) 0%, rgba(6, 8, 11, 0) 30%, rgba(6, 8, 11, 0.3) 70%, var(--color-panel) 100%);
}

/* "Blackout to show" — прожекторы зажигаются один раз при первой загрузке
   страницы (класс .is-lit добавляет script.js), поверх фото, под текстом
   (z-index между .hero__media и .hero__inner, но раньше по DOM — тот же
   уровень стека всё равно рисуется позже и перекрывает лучи). Цвет — тот же
   акцентный синий, что и в hover-свечениях по сайту (rgba(111,179,255,*)),
   не бирюзовый из демо-макета, чтобы не выбиваться из общей палитры. */
.hero__stage-lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero__beam {
  --beam-rotate: 0deg;
  position: absolute;
  top: -15%;
  left: var(--beam-left, 60%);
  width: clamp(50px, 5.2vw, 100px);
  height: 145%;
  background: linear-gradient(180deg, rgba(111, 179, 255, 0.55) 0%, rgba(88, 166, 255, 0.16) 45%, transparent 100%);
  filter: blur(18px);
  opacity: 0;
  transform: rotate(var(--beam-rotate)) scaleY(0.6);
  transform-origin: top center;
  mix-blend-mode: screen;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.hero__beam--1 { --beam-left: 56%; --beam-rotate: 20deg; }
.hero__beam--2 { --beam-left: 67%; --beam-rotate: 7deg; }
.hero__beam--3 { --beam-left: 78%; --beam-rotate: -9deg; }
.hero__beam--4 { --beam-left: 89%; --beam-rotate: -22deg; }

/* Луч --5 — отдельный, из левого верхнего угла, следит направлением за
   курсором (см. script.js). transform не в общем 0.7s transition (только
   opacity) — иначе каждое обновление --beam-rotate от mousemove плавно
   "догоняло" бы курсор все 0.7s и ощущалось тормозящим; поворот должен быть
   мгновенным, 1:1 с мышью. Плавным (0.7s) остаётся только исходное
   появление/скрытие через opacity в .hero.is-lit. */
.hero__beam--5 {
  --beam-left: 8%;
  --beam-rotate: 0deg;
  transition: opacity 0.7s ease;
}

.hero.is-lit .hero__beam {
  opacity: 0.85;
  transform: rotate(var(--beam-rotate)) scaleY(1);
}

.hero.is-lit .hero__beam--1 { transition-delay: 0s; }
.hero.is-lit .hero__beam--2 { transition-delay: 0.12s; }
.hero.is-lit .hero__beam--3 { transition-delay: 0.24s; }
.hero.is-lit .hero__beam--4 { transition-delay: 0.36s; }
.hero.is-lit .hero__beam--5 { transition-delay: 0.48s; }

.hero__stage-glow {
  position: absolute;
  right: 8%;
  top: 28%;
  width: clamp(240px, 24vw, 480px);
  height: clamp(170px, 17vw, 340px);
  background: radial-gradient(ellipse at center, rgba(111, 179, 255, 0.4) 0%, rgba(88, 166, 255, 0.12) 55%, transparent 80%);
  filter: blur(30px);
  opacity: 0;
  transform: scale(0.85);
  mix-blend-mode: screen;
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition-delay: 0.25s;
}

.hero.is-lit .hero__stage-glow {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero__beam,
  .hero__stage-glow {
    transition: none !important;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4.9vw, 94px);
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(56px, 9.58vw, 184px) clamp(20px, 2.34vw, 45px) clamp(48px, 8.3vw, 160px);
}

/* Index / slide numbers */

.hero__index {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: clamp(20px, 6.8vw, 131px);
  font-size: clamp(13px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 26px;
  color: var(--color-white-60);
  flex-shrink: 0;
}

.hero__index-item {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

.hero__index-item.is-active {
  color: var(--color-white);
  font-weight: 600;
  transform: scale(1.2);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
}

.hero__index-item:hover,
.hero__index-item:focus-visible {
  color: var(--color-white);
}

/* Линия одна на весь список, без зарезервированного места у неактивных
   цифр: по умолчанию схлопнута (height/margin: 0), у активной цифры —
   раскрыта. script.js двигает этот же DOM-узел к нужной кнопке, поэтому
   схлопывание/раскрытие двигает соседние цифры — эффект барабана. Длительность
   .is-active (высота/margin) должна совпадать с LINE_MOVE_MS в script.js,
   длительность заливки (::after) — с autoplay.delay там же (7000ms). */
.hero__index-line {
  position: relative;
  width: 1px;
  height: 0;
  margin: 0;
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__index-line.is-active {
  height: clamp(40px, 13.5vw, 200px);
  margin: 12px 0;
  background: rgba(255, 255, 255, 0.15);
}

.hero__index-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: rgba(255, 255, 255, 0.9);
}

.hero__index-line.is-active::after {
  animation: heroIndexLineFill 7000ms linear forwards;
}

@keyframes heroIndexLineFill {
  from { height: 0%; }
  to { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__index-line {
    transition: none !important;
  }

  .hero__index-line::after {
    animation: none !important;
    height: 100% !important;
  }
}

/* Slider (Swiper управляет тем, какой слайд виден, через transform — не через display) */

.hero__slider {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.hero__slider .swiper-wrapper {
  align-items: flex-start;
}

/* Content */

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

.hero__content-inner {
  display: flex;
  flex-direction: column;
  /* Было 900px по Figma-макету, где заголовок — короткие слова в одно слово
     на строку. Реальный текст слайдов заметно длиннее и не помещался даже
     при обычном переносе по пробелу. .hero__desc задаёт себе ширину
     отдельно, так что расширение этого контейнера влияет только на
     перенос заголовка. */
  max-width: 1200px;
  min-width: 0;
}

.hero__label {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__label-line {
  width: clamp(40px, 3.65vw, 70px);
  height: 1px;
  background: var(--color-white);
  flex-shrink: 0;
}

.hero__label p {
  margin: 0;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero__title {
  max-width: 100%;
  margin: clamp(28px, 5.4vw, 104px) 0 0;
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 100px);
  line-height: 1.05;
  letter-spacing: -0.0277em;
  text-transform: uppercase;
  /* overflow-wrap: break-word — переносит слово целиком, если оно не влезает
     по ширине даже на отдельной строке. word-break: break-word (было тут же)
     работает агрессивнее — ломает слово посреди буквы даже когда перенос по
     пробелу решил бы задачу (эффект "ПРОФЕССИОНАЛ/ЬНЫЕ"), поэтому убран.
     На мобильных ширинах (сайдбар с "01/02.." + паддинги съедают заметную
     часть узкого экрана) даже перенос по пробелу не спасает — слово
     "ПРОФЕССИОНАЛЬНЫЕ" физически не влезает ни на одну строку целиком.
     hyphens: auto — если разрыв всё же неизбежен, браузер переносит слово по
     слогам с дефисом, а не произвольно посреди буквы; работает благодаря
     lang="ru" на <html>. overflow-wrap остаётся страховкой на случай, если
     браузер не поддерживает переносы для этого языка. */
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: break-word;
}

.hero__title-line {
  display: block;
}

.hero__title-line--muted {
  color: var(--color-muted);
}

.hero__desc {
  max-width: clamp(280px, 30.8vw, 591px);
  margin: clamp(20px, 1.7vw, 32px) 0 0;
  font-size: clamp(15px, 1.04vw, 20px);
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-white-60);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2.55vw, 49px);
  align-self: flex-start;
  margin-top: clamp(32px, 3.2vw, 62px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-white-40);
  color: var(--color-white);
  text-decoration: none;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: gap 0.25s ease, border-color 0.25s ease, text-shadow 0.3s ease;
}

.hero__cta-arrow {
  width: clamp(16px, 1.15vw, 22px);
  height: auto;
  color: var(--color-white);
  transition: transform 0.25s ease, filter 0.3s ease;
}

.hero__cta:hover {
  gap: clamp(22px, 3.4vw, 60px);
  border-color: rgba(111, 179, 255, 0.85);
  text-shadow: 0 0 20px rgba(111, 179, 255, 0.65);
}

.hero__cta:hover .hero__cta-arrow {
  transform: translateX(4px);
  filter: drop-shadow(0 0 10px rgba(111, 179, 255, 0.65));
}

/*
 * Tablet + Mobile
 * Figma (768): https://www.figma.com/design/o2pxpPyVyPKWw4xNWKOeBQ/asimetrik-avl--Copy-?node-id=1215-501
 * Figma (390): https://www.figma.com/design/o2pxpPyVyPKWw4xNWKOeBQ/asimetrik-avl--Copy-?node-id=1273-1223
 *
 * В отличие от десктопа, точные раскладки заданы только на двух конкретных
 * ширинах (768 и 390) — значения ниже взяты как есть с этих кадров, а не
 * интерполированы через vw. Структура (индекс-колонка слева, фото фоном на
 * всю секцию) остаётся той же, что на десктопе — меняются только отступы,
 * кегли и (на 768) видимость лейбла над заголовком.
 */

@media (max-width: 1024px) {
  /* Луч --5 следит направлением за курсором мыши (mousemove в script.js) —
     на тач-устройствах (мобилка/планшет) курсора нет, событие не стреляет,
     и луч просто застревает в исходном положении из левого верхнего угла,
     ничего не отслеживая. По фидбоку пользователя скрываем его здесь. */
  .hero__beam--5 {
    display: none;
  }

  /* Маска-градиент низа фото (.hero__media, см. базовое правило) задана в
     процентах от высоты блока — на десктопе .hero невысокий (широкий/
     короткий hero), поэтому 30%→80% выглядело как аккуратное растворение
     у самого низа. На мобильном/планшете .hero сильно выше (колонка с
     заголовком + описанием + CTA + вертикальным списком "01..05" под ней),
     и те же проценты гасят фото гораздо раньше по факту пикселей — под
     цифрами "03/04" и ниже уже сплошной чёрный фон вместо тонкого перехода,
     из-за чего кажется, что перед блоком "О компании" пустое место. Сдвигаем
     обе отметки заметно ближе к самому низу, чтобы фото оставалось видимым
     дольше и гасло только у истинного нижнего края. */
  .hero__media {
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 95%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 95%);
  }

  .hero__inner {
    gap: 41px;
    padding: 137px 51px 148px;
  }

  .hero__index {
    margin-top: 0;
    gap: 32px;
  }

  .hero__index-line.is-active {
    height: 373px;
    margin: 0;
  }

  /* На 768 лейбл над заголовком в макете отсутствует (см. node 1215-501) */
  .hero__label {
    display: none;
  }

  .hero__title {
    margin-top: 88px;
    /* Было фиксировано 62px. На узком краю этого брейкпоинта (~761-880px,
       сюда попадает частый iPad portrait 768px) длинное слово заголовка не
       помещалось на строку целиком при 62px — считали по замерам реального
       шрифта Golos Text (~11.3px ширины слова на 1px кегля) и реальному
       overhead (паддинги+индекс+gap ~174px на этой ширине). calc() держит
       62px там, где безопасно (~887px и выше), и плавно уменьшает кегль
       ближе к 761px, где места меньше. */
    font-size: clamp(40px, calc(8.85vw - 16.5px), 62px);
    line-height: 1.13;
    letter-spacing: -1px;
  }

  .hero__desc {
    margin-top: 25px;
    max-width: 589px;
    font-size: 20px;
    line-height: 26px;
  }

  .hero__cta {
    margin-top: 37px;
    gap: 35px;
    font-size: 15px;
  }
}

@media (max-width: 760px) {
  .hero__inner {
    gap: 20px;
    padding: 137px 21px 112px;
  }

  /* На 390 лейбл возвращается (в отличие от 768) */
  .hero__label {
    display: flex;
  }

  .hero__label-line {
    width: 30px;
  }

  .hero__label p {
    font-size: 15px;
  }

  .hero__title {
    margin-top: 62px;
    /* Было clamp(26px, 9.2vw, 36px) — на типичных ширинах телефона
       (~375-430px) кегль почти сразу упирался в потолок 36px, а длинное
       слово заголовка при 36px (реальный шрифт Golos Text) шире, чем
       остаётся места (паддинги+колонка "01/02.."+gap съедают ~78px даже на
       узком экране) — слово ломалось посреди буквы. Пересчитано по замерам
       реального шрифта (~11.3px ширины слова на 1px кегля): calc() держит
       кегль настолько крупным, насколько влезает самое длинное слово. */
    font-size: clamp(20px, calc(8.85vw - 8px), 36px);
    line-height: 1.05;
    letter-spacing: -1px;
  }

  .hero__desc {
    margin-top: 18px;
    max-width: 282px;
    font-size: 14px;
    line-height: 26px;
  }

  .hero__cta {
    margin-top: 32px;
    font-size: 15px;
  }
}

/* Телефоны/планшеты (сенсорный ввод): текст слайда появляется сразу, без
   плавного появления (как и [data-reveal], см. assets/css/scroll-reveal.css).
   Слайдер, его переключение и световые эффекты работают как обычно. */
@media (pointer: coarse) {
  .hero__content [data-slide-reveal] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* End */


/* Start:/local/templates/assimettric-avl_s3/assets/vendor/swiper/swiper-bundle.min.css?179361469018466*/
/**
 * Swiper 11.2.10
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 28, 2025
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
/* End */


/* Start:/local/templates/assimettric-avl_s3/components/bitrix/news.list/company_index/style.css?179361469014852*/
/*
 * Block: about (второй экран, «о компании»)
 */

.about {
  position: relative;
  overflow: hidden;
  background: var(--color-panel);
}

.about__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(60px, 6.2vw, 119px) clamp(20px, 7.6vw, 146px) clamp(70px, 8.2vw, 158px);
}

.about__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 58%;
  height: 82%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 45%, transparent 85%);
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 45%, transparent 85%);
}

.about__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 55%;
}

/* ---------- Row: интро + статистика ---------- */

.about__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 4.9vw, 94px);
}

.about__intro {
  max-width: clamp(280px, 34vw, 650px);
  min-width: 0;
}

.about__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}

.about__eyebrow-line {
  width: clamp(24px, 2.3vw, 44px);
  height: 1px;
  background: var(--color-white);
  flex-shrink: 0;
}

.about__title {
  margin: 30px 0 0;
  font-size: clamp(22px, 2.08vw, 40px);
  line-height: 1.35;
  color: var(--color-white);
  text-transform: uppercase;
}

.about__title-accent {
  font-weight: 600;
}

/* Приглушённая часть заголовка (после жирного "Компания ASIMETRIK KZ") —
   по макету тоньше и мельче основного текста, не просто другого цвета.
   text-transform: none — это обычный текст, не капс, как жирная часть. */
.about__title-plain {
  font-weight: 400;
  font-size: 0.75em;
  text-transform: none;
}

.about__divider {
  display: block;
  width: 46px;
  height: 2px;
  margin: 30px 0 20px;
  background: var(--color-line-muted);
}

.about__desc {
  margin: 0;
  max-width: 489px;
  font-size: clamp(14px, 0.78vw, 15px);
  line-height: 1.73;
  font-weight: 400;
  color: var(--color-white);
}

.about__link {
  /* Класс общий для <a> (на главной — ссылка на /kompaniya/) и <button>
     (на /kompaniya/ — открывает попап "обсудить проект", см. template.php):
     background/border/padding/font-family сброшены явно — у <button>,
     в отличие от <a>, они не наследуются браузером по умолчанию. */
  display: inline-flex;
  align-items: center;
  gap: clamp(24px, 3.28vw, 63px);
  margin-top: clamp(24px, 2.5vw, 48px);
  padding: 0 0 clamp(8px, 1.1vw, 22px);
  border: none;
  border-bottom: 2px solid var(--color-white-40);
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-white);
  text-decoration: none;
  font-size: clamp(12px, 0.73vw, 14px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: gap 0.25s ease, border-color 0.25s ease;
}

.about__link:hover {
  gap: clamp(30px, 4vw, 76px);
  border-color: rgba(255, 255, 255, 0.8);
}

.about__link-arrow {
  width: clamp(14px, 1.15vw, 22px);
  height: auto;
  color: var(--color-white);
}

/* ---------- Статистика ---------- */

.about__stats-col {
  flex: 0 0 auto;
  width: clamp(280px, 34.95vw, 671px);
}

.about__stats {
  display: grid;
  /* minmax(0,1fr), не просто 1fr — иначе колонка не сжимается меньше
     min-content самого длинного слова/цифры внутри (напр. "реализованных
     объектов"), и сетка вылезает за пределы контейнера на узких экранах,
     игнорируя max-width родителя (.about__stats-col). Без gap — 4 ячейки
     образуют один цельный блок, скруглённый только по внешним углам
     (см. --tl/--tr/--bl/--br ниже), а не отдельные карточки с зазором. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about__stat {
  /* Контент идёт естественным потоком сверху вниз (иконка → цифра →
     линия → текст), без justify-content:flex-end — раньше контент
     прижимался к низу ячейки, и при несовпадении высоты ячейки с
     фактической высотой контента наверху оставался пустой зазор
     (тем больше, чем сильнее ячейка отличалась от контента по высоте).
     height явным clamp'ом, не aspect-ratio — aspect-ratio считает высоту
     от ФАКТИЧЕСКОЙ ширины ячейки, а сабпиксельные округления ширины двух
     соседних колонок грида иногда чуть расходятся, из-за чего высота
     ячеек в одном ряду отличалась на 1-2px (виден "уступ" на стыке).
     Явная высота не зависит от вычисленной ширины — гарантированно
     одинаковая у всех 4 ячеек. Формула — та же ставка (34.95vw/2), что и
     у .about__stats-col, чтобы ячейка оставалась квадратной. */
  position: relative;
  height: clamp(140px, 17.475vw, 335px);
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.3vw, 44px);
  /* Тонкая линия между ячейками цветом фона страницы (не реальный gap —
     фон между ячейками не открывается) — border-box, чтобы 1px рамки не
     увеличивал высоту сверх заданной выше. */
  border: 1px solid var(--color-panel);
  box-sizing: border-box;
  background: var(--color-panel-alt);
  color: var(--color-white);
}

.about__stat--tl {
  border-top-left-radius: 18%;
}

.about__stat--tr {
  border-top-right-radius: 18%;
}

.about__stat--bl {
  border-bottom-left-radius: 18%;
}

.about__stat--br {
  border-bottom-right-radius: 18%;
}

/*
 * .about__stat--light — это демонстрация hover-эффекта в Figma (не
 * постоянная подсветка первой ячейки), сама подсветка навешивается через
 * :hover ниже. Класс --light в разметке оставлен для точечных ручных
 * правок из Hermitage, если понадобится, но сам по себе фон не красит.
 */
.about__stat:hover {
  background: var(--color-white);
  color: var(--color-panel-alt);
}

.about__stat:hover .about__stat-icon {
  background: var(--color-icon-circle-light);
  color: var(--color-panel-alt);
}

.about__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(28px, 2.8vw, 54px);
  height: clamp(28px, 2.8vw, 54px);
  border-radius: 50%;
  background: var(--color-icon-circle);
  color: var(--color-icon-muted);
}

.about__stat--light .about__stat-icon {
  background: var(--color-icon-circle-light);
  color: var(--color-panel-alt);
}

.about__stat-icon svg,
.about__stat-icon img {
  width: 55%;
  height: 55%;
}

.about__stat-number {
  margin-top: clamp(12px, 1.5vw, 29px);
  font-size: clamp(28px, 3.75vw, 72px);
  font-weight: 600;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

/*
 * Разделитель — svg-линия (не div), чтобы можно было "дорисовать" её
 * через stroke-dashoffset при попадании блока в вьюпорт (см. script.js).
 * Дефолтный вид (тонкая, currentColor, opacity .5) не отличается от
 * прежнего div-варианта, пока JS не отработал/если он отключён.
 */
.about__stat-line {
  display: block;
  width: clamp(20px, 2.6vw, 50px);
  height: 2px;
  margin: clamp(10px, 1.2vw, 23px) 0 clamp(6px, 0.9vw, 17px);
  overflow: visible;
}

.about__stat-line line {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.5;
}

.about__stat-line.is-counted line {
  stroke: #6fb3ff;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(111, 179, 255, 0.55));
  transition: stroke 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

.about__stat-label {
  font-size: clamp(12px, 0.83vw, 16px);
  line-height: 1.55;
  color: inherit;
}

/* ---------- Заметка под статистикой ---------- */

.about__note {
  display: flex;
  /* stretch, а не flex-start — линия должна быть высотой ровно с текст
     (сколько бы строк он ни занял), а не с отдельно заданным clamp()-ом,
     который на практике не совпадал с реальной высотой параграфа. */
  align-items: stretch;
  gap: clamp(16px, 1.6vw, 29px);
  margin-top: clamp(16px, 2.3vw, 44px);
}

.about__note-line {
  flex-shrink: 0;
  width: 1px;
  background: var(--color-white-50);
}

.about__note p {
  margin: 0;
  max-width: 520px;
  font-size: clamp(13px, 0.78vw, 15px);
  line-height: 1.6;
  color: var(--color-white);
}

/*
 * Tablet
 * Figma (768): https://www.figma.com/design/o2pxpPyVyPKWw4xNWKOeBQ/asimetrik-avl--Copy-?node-id=1215-630
 *
 * Точные значения с кадра 768 (не интерполяция из десктопного clamp()).
 * Диапазон ограничен снизу (min-width), чтобы не перетекать в мобильный
 * брейкпоинт — у него собственные, отдельно снятые с кадра 390 значения.
 */

@media (min-width: 761px) and (max-width: 1024px) {
  .about__inner {
    padding: 64px 51px 64px;
  }

  .about__photo {
    width: 100%;
    height: 460px;
    left: 0;
    top: 0;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 55%, transparent 100%);
  }

  .about__row {
    flex-direction: column;
    gap: 56px;
  }

  .about__intro {
    max-width: none;
  }

  .about__eyebrow {
    font-size: 15px;
  }

  .about__title {
    font-size: 40px;
    line-height: 53px;
  }

  .about__desc {
    max-width: 596px;
    font-size: 18px;
    line-height: 30px;
  }

  .about__link {
    margin-top: 90px;
    font-size: 14px;
  }

  .about__stats-col {
    /* width:100% на широком tablet-контейнере (.about__row переходит в
       column) растягивает квадратные .about__stat (aspect-ratio:1) до
       ~450px+, а иконка/цифра/лейбл остаются фиксированного размера —
       пустота сверху (justify-content:flex-end прижимает контент к низу
       квадрата). Ограничиваем ширину колонки и центрируем её. */
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }

  .about__stat {
    /* height (не min-height!) — min-height лишь задаёт пол: при более
       длинном лейбле ("реализованных объектов" против "лет интеграции
       сложных AVL-систем") ячейка всё равно могла вырасти выше соседней в
       том же ряду. Жёсткая высота гарантирует одинаковый размер всех 4
       ячеек независимо от длины текста внутри. */
    height: 300px;
  }

  .about__stat-icon {
    width: 59px;
    height: 59px;
  }

  .about__stat-number {
    margin-top: 24px;
    font-size: 72px;
  }

  .about__stat-label {
    font-size: 22px;
    line-height: 27px;
  }

  .about__note p {
    max-width: none;
    font-size: 18px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  .about__inner {
    padding: 64px 20px 56px;
  }

  .about__photo {
    width: 100%;
    height: 420px;
    left: 0;
    top: 0;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 55%, transparent 100%);
  }

  .about__row {
    flex-direction: column;
    gap: 40px;
  }

  .about__intro {
    max-width: none;
  }

  .about__title {
    font-size: 22px;
  }

  .about__desc {
    max-width: none;
  }

  .about__stats-col {
    /* width:100% на широком мобильном контейнере (.about__row в столбик)
       растягивает квадратные .about__stat (aspect-ratio:1), а иконка/
       цифра остаются мелкими — пустота сверху (justify-content:flex-end
       прижимает контент к низу). Ограничиваем ширину колонки и
       центрируем её. */
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .about__stat {
    /* height (не min-height) — та же причина, что на tablet: min-height
       не мешает конкретной ячейке вырасти выше соседей, если её текст
       длиннее. Жёсткая высота — все 4 ячейки гарантированно одинаковые. */
    height: 210px;
  }

  .about__stat-icon {
    width: 44px;
    height: 44px;
  }

  .about__stat-number {
    margin-top: 12px;
    font-size: 38px;
  }

  .about__stat-label {
    font-size: 12px;
  }
}

/* End */


/* Start:/local/templates/assimettric-avl_s3/components/bitrix/news.list/company_stages/style.css?17936146907468*/
/*
 * Block: services («что мы делаем», третий экран)
 */

.services {
  position: relative;
  background: var(--color-panel-alt);
}

.services__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(48px, 4.95vw, 95px) clamp(20px, 7.6vw, 146px) clamp(64px, 6.98vw, 134px);
}

/* ---------- Row: заголовок ---------- */

.services__row {
  position: relative;
  z-index: 2;
}

.services__intro {
  max-width: clamp(280px, 33.3vw, 640px);
  min-width: 0;
}

.services__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}

.services__eyebrow-line {
  width: clamp(24px, 2.3vw, 44px);
  height: 1px;
  background: var(--color-white);
  flex-shrink: 0;
}

.services__title {
  margin: 30px 0 0;
  font-weight: 600;
  font-size: clamp(30px, 3.02vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.017em;
  text-transform: uppercase;
}

.services__title span {
  display: block;
}

.services__title--muted {
  color: var(--color-muted);
}

.services__divider {
  display: block;
  width: 46px;
  height: 2px;
  margin: 30px 0 20px;
  background: var(--color-line-muted);
}

.services__desc {
  margin: 0;
  font-size: clamp(14px, 0.83vw, 16px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-white);
}

/* Картинка «протыкает» границу с блоком about — абсолютно позиционирована
   и приподнята над верхним краем секции (см. Figma: изображение начинается
   на 95px выше фона этого блока, то есть ещё в предыдущем, about). */
.services__media {
  position: absolute;
  z-index: 1;
  top: clamp(-95px, -4.95vw, 0px);
  right: clamp(20px, 5.36vw, 103px);
  width: clamp(260px, 51.46vw, 988px);
  pointer-events: none;
}

.services__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Grid: что мы делаем ---------- */

.services__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4.16vw, 80px);
  margin-top: clamp(48px, 7.9vw, 152px);
}

.services__card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 1.98vw, 38px) clamp(24px, 2.5vw, 48px);
  border-radius: clamp(28px, 2.1vw, 40px);
  background: transparent;
  border: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Spotlight-курсор: радиальное свечение следует за мышью внутри карточки
   (см. assets/js/spotlight.js). border-radius: inherit клипует градиент по
   форме карточки без overflow:hidden — иначе обрезался бы box-shadow выше. */
.services__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(111, 179, 255, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.services__card:hover::before {
  opacity: 1;
}

/* Лёгкая неоновая подсветка рамки — намного слабее исходного варианта
   (см. company-process__card:hover, тот же скорректированный по фидбеку
   рецепт: без большого offset-shadow и inset-кольца, только тонкий glow). */
.services__card:hover {
  background: rgba(74, 130, 196, 0.1);
  border-color: rgba(111, 179, 255, 0.55);
  box-shadow: 0 0 14px rgba(88, 166, 255, 0.22);
  transform: translateY(-6px);
}

.services__card-index {
  display: block;
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-white);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.services__card:hover .services__card-index {
  color: #6fb3ff;
  text-shadow: 0 0 6px rgba(111, 179, 255, 0.6);
}

.services__card-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.44;
  text-transform: uppercase;
  color: var(--color-white);
}

.services__card-desc {
  margin: 0 0 clamp(24px, 2vw, 32px);
  font-size: clamp(14px, 0.78vw, 15px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-white);
}

.services__card-arrow {
  display: block;
  width: 21px;
  height: auto;
  margin-top: auto;
  color: var(--color-white);
  transition: transform 0.25s ease;
}

.services__card:hover .services__card-arrow {
  transform: translateX(6px);
}

/*
 * Tablet
 * Figma (768): https://www.figma.com/design/o2pxpPyVyPKWw4xNWKOeBQ/asimetrik-avl--Copy-?node-id=1217-885
 *
 * Точные значения с кадра 768 (не интерполяция). Раскладка отличается от
 * десктопа и мобильного: сетка карточек здесь 2×2 (не 4 в ряд и не 1
 * колонка), а собственные кегли — местами даже мельче, чем на 390, так
 * задумано в макете. Диапазон снизу ограничен, чтобы не перетекать в
 * мобильный брейкпоинт.
 */

@media (min-width: 761px) and (max-width: 1024px) {
  .services__inner {
    padding: 62px 51px 49px;
  }

  .services__intro {
    max-width: none;
  }

  .services__eyebrow {
    font-size: 15px;
  }

  .services__eyebrow-line {
    width: 36px;
  }

  .services__title {
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -0.8px;
  }

  .services__desc {
    max-width: 631px;
    font-size: 16px;
    line-height: 26px;
  }

  .services__media {
    top: 452px;
    left: -9px;
    right: auto;
    width: 755px;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 43px 57px;
    margin-top: 479px;
  }

  .services__card-index {
    margin-bottom: 13px;
    font-size: 14.6px;
  }

  .services__card-title {
    margin-bottom: 11px;
    font-size: 14.6px;
    line-height: 21px;
  }

  .services__card-desc {
    margin-bottom: 37px;
    font-size: 12.2px;
    line-height: 19.5px;
  }

  .services__card-arrow {
    width: 18px;
  }

  .services__card {
    padding: 21px 39px;
    border-radius: 32.5px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  .services__inner {
    padding: 56px 20px 56px;
  }

  .services__eyebrow {
    font-size: 15px;
  }

  .services__eyebrow-line {
    width: 30px;
  }

  .services__intro {
    max-width: none;
  }

  .services__title {
    font-size: 30px;
    line-height: 1.27;
  }

  .services__media {
    position: static;
    z-index: auto;
    width: calc(100% + 40px);
    margin: 32px -20px -65px;
  }

  .services__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 0;
  }
}

/* End */


/* Start:/local/templates/assimettric-avl_s3/components/bitrix/news.list/portfolio_index/style.css?179361469113265*/
/*
 * Block: portfolio (слайдер «Портфолио проектов»)
 */

.portfolio {
  position: relative;
  background: var(--color-panel);
  padding: clamp(56px, 6.2vw, 119px) 0 clamp(56px, 6.7vw, 129px);
}

.portfolio__inner {
  max-width: 1920px;
  margin: 0 auto;
}

/* ---------- Header ---------- */

.portfolio__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 58px);
  padding: 0 clamp(20px, 7.6vw, 146px);
}

.portfolio__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}

.portfolio__eyebrow-line {
  width: clamp(24px, 2.3vw, 44px);
  height: 1px;
  background: var(--color-white);
  flex-shrink: 0;
}

.portfolio__title {
  margin: 30px 0 0;
  font-weight: 600;
  font-size: clamp(28px, 3.02vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.017em;
  text-transform: uppercase;
  color: var(--color-white);
}

.portfolio__title span {
  display: block;
}

.portfolio__title--muted {
  color: var(--color-muted);
}

.portfolio__divider {
  display: block;
  width: 46px;
  height: 2px;
  margin: 30px 0 20px;
  background: var(--color-white);
}

.portfolio__summary {
  max-width: 466px;
  min-width: 0;
  flex-shrink: 0;
  margin-top: clamp(40px, 3.7vw, 71px);
}

.portfolio__desc {
  margin: 0;
  font-size: clamp(13px, 0.78vw, 15px);
  line-height: 1.73;
  color: var(--color-white);
}

.portfolio__link {
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 2.7vw, 52px);
  margin-top: clamp(16px, 2.1vw, 40px);
  padding-bottom: clamp(6px, 0.83vw, 16px);
  border-bottom: 2px solid var(--color-white);
  color: var(--color-white);
  text-decoration: none;
  font-size: clamp(12px, 0.73vw, 14px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: gap 0.25s ease, border-color 0.25s ease;
}

.portfolio__link:hover {
  gap: clamp(26px, 3.4vw, 64px);
}

.portfolio__link-arrow {
  width: clamp(14px, 1.15vw, 22px);
  height: auto;
  color: var(--color-white);
}

/* ---------- Slider ---------- */

.portfolio__slider {
  --swiper-wrapper-transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  margin-top: clamp(40px, 4.5vw, 86px);
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px clamp(20px, 7.6vw, 146px) 4px;
  box-sizing: border-box;
}

.portfolio__track {
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Слот всегда занимает место "активного" (большего) размера — так Swiper
 * всегда позиционирует слайды по одному и тому же шагу, а карточка внутри
 * просто масштабируется в пределах уже зарезервированного места, не
 * наезжая на соседей.
 *
 * .swiper-slide в собственном CSS Swiper уже задаёт width:100% с той же
 * специфичностью (один класс) — какое правило победит, зависит от порядка
 * подключения файлов (component_epilog.php подключает swiper-bundle.min.css
 * через Asset::addCss, и порядок относительно этого style.css не
 * гарантирован Bitrix). Составной селектор .portfolio__slide.swiper-slide
 * гарантированно перебивает его вне зависимости от порядка (баг с
 * растягиванием карточки на всю ширину найден и исправлен в usluga_projects/
 * style.css — тот же приём уже был в company_trust/style.css).
 */
.portfolio__slide.swiper-slide {
  width: clamp(280px, 25.2vw, 484px);
}

.portfolio__card {
  display: block;
  position: relative;
  width: 100%;
  height: clamp(345px, 31.09vw, 597px);
  border-radius: clamp(24px, 2.08vw, 40px);
  overflow: hidden;
  background: #93949b;
  color: inherit;
  text-decoration: none;
  border: 2px solid transparent;
  transform: scale(0.929);
  transform-origin: center;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.35s ease;
}

.portfolio__slide.is-active .portfolio__card {
  transform: scale(1);
  border-color: #343537;
  z-index: 2;
}

/*
 * Неоновое свечение — на .portfolio__slide (li), а не на самой .portfolio__card:
 * у карточки overflow:hidden (нужен, чтобы обрезать фоновое фото по
 * скруглённым углам), и box-shadow на ней самой обрезался бы этим же
 * overflow. drop-shadow на родителе не подчиняется overflow дочернего
 * элемента и вдобавок повторяет силуэт со скруглёнными углами точнее,
 * чем прямоугольный box-shadow.
 */
.portfolio__slide {
  transition: filter 0.35s ease;
}

.portfolio__slide:hover {
  filter: drop-shadow(0 0 10px rgba(88, 166, 255, 0.25));
}

.portfolio__slide:hover .portfolio__card {
  border-color: rgba(111, 179, 255, 0.6);
}

/* Spotlight-курсор поверх фото — карточка уже с overflow:hidden, поэтому
   градиент клипуется по скруглению сам, без доп. усилий (в отличие от
   box-shadow, свечение внутри inset:0 не задевает эту границу вообще).
   z-index:1, как у .portfolio__card-category/-bottom — тот же слой, но
   раньше их в порядке отрисовки, поэтому остаётся под текстом. */
.portfolio__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(111, 179, 255, 0.2), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.portfolio__slide:hover .portfolio__card::before {
  opacity: 1;
}

.portfolio__card-media {
  position: absolute;
  inset: 0;
}

.portfolio__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.portfolio__slide:hover .portfolio__card-media img {
  transform: scale(1.06);
}

.portfolio__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to top, var(--color-panel) 0%, rgba(28, 31, 36, 0) 58%),
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

.portfolio__card-category {
  position: absolute;
  z-index: 1;
  top: clamp(16px, 1.8vw, 33px);
  left: clamp(20px, 2.24vw, 43px);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-white);
}

.portfolio__card-bottom {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 2.24vw, 43px);
  right: clamp(20px, 2.24vw, 43px);
  bottom: clamp(20px, 2.24vw, 43px);
}

.portfolio__card-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.08;
  color: var(--color-white);
}

.portfolio__card-location {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-white);
}

.portfolio__card-tags {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-white);
}

.portfolio__card-desc {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-white);
}

.portfolio__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.portfolio__card-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.portfolio__card-more svg {
  width: 18px;
  height: auto;
  color: var(--color-white);
  transition: transform 0.3s ease;
}

.portfolio__slide:hover .portfolio__card-more svg {
  transform: translateX(4px);
}

.portfolio__card-count {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-white-50);
}

/* ---------- Nav ---------- */

.portfolio__nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: clamp(24px, 2.7vw, 52px);
  padding: 0 clamp(20px, 7.6vw, 146px);
}

.portfolio__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 3.4vw, 66px);
  height: clamp(44px, 3.4vw, 66px);
  border: 1px solid var(--color-white-40);
  border-radius: 50%;
  background: none;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.portfolio__nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
}

.portfolio__nav-btn svg {
  width: 18px;
  height: auto;
}

.portfolio__nav-btn--prev svg {
  transform: rotate(180deg);
}

/*
 * Tablet
 * Figma (768): https://www.figma.com/design/o2pxpPyVyPKWw4xNWKOeBQ/asimetrik-avl--Copy-?node-id=1217-1074
 *
 * Точные значения с кадра 768 (не интерполяция). Диапазон снизу ограничен,
 * чтобы не перетекать в мобильный брейкпоинт — у него отдельные значения
 * с кадра 390.
 */

@media (min-width: 761px) and (max-width: 1024px) {
  .portfolio__header,
  .portfolio__track,
  .portfolio__nav {
    padding-left: 51px;
    padding-right: 51px;
  }

  /* Ширина summary-колонки (666px по макету) не оставляет места для
     заголовка при боковой раскладке в этом диапазоне — переносим её под
     заголовок, как на мобильном (тот же баг и то же решение, что и в
     блоке brands). gap:0 — у .portfolio__divider уже есть свой
     margin-bottom:20px; лишний gap контейнера складывался с ним (~44px) и
     визуально отрывал линию от заголовка к середине. */
  .portfolio__header {
    flex-direction: column;
    gap: 0;
  }

  .portfolio__eyebrow {
    font-size: 15px;
  }

  .portfolio__eyebrow-line {
    width: 44px;
  }

  .portfolio__title {
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -1px;
  }

  .portfolio__summary {
    margin-top: 0;
    max-width: 666px;
  }

  .portfolio__desc {
    font-size: 15px;
    line-height: 26px;
  }

  .portfolio__link {
    margin-top: 29px;
    font-size: 14px;
  }

  .portfolio__slide.swiper-slide {
    width: 440px;
  }

  .portfolio__card {
    height: 543px;
    border-radius: 36px;
  }

  .portfolio__card-category {
    top: 30px;
    left: 39px;
    font-size: 14px;
  }

  .portfolio__card-bottom {
    left: 39px;
    right: 39px;
    bottom: 40px;
  }

  .portfolio__card-title {
    font-size: 22px;
  }

  .portfolio__card-location {
    font-size: 14px;
  }

  .portfolio__card-tags {
    font-size: 14px;
  }

  .portfolio__card-desc {
    font-size: 14px;
  }

  .portfolio__card-more {
    font-size: 13px;
  }

  .portfolio__card-more svg {
    width: 21px;
  }

  .portfolio__card-count {
    font-size: 13px;
  }

  .portfolio__nav-btn {
    width: 66px;
    height: 66px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  .portfolio__header {
    flex-direction: column;
    gap: 0;
  }

  .portfolio__summary {
    margin-top: 0;
    max-width: none;
  }

  .portfolio__title {
    font-size: 30px;
  }

  .portfolio__slide.swiper-slide {
    width: 337px;
  }

  .portfolio__card {
    height: 416px;
    border-radius: 28px;
  }

  .portfolio__card-category {
    top: 23px;
    left: 30px;
    font-size: 12px;
  }

  .portfolio__card-bottom {
    left: 30px;
    right: 30px;
    bottom: 30px;
  }

  .portfolio__card-title {
    font-size: 18px;
  }

  .portfolio__card-location {
    font-size: 10px;
  }

  .portfolio__card-tags {
    font-size: 11px;
  }

  .portfolio__card-desc {
    font-size: 11px;
    line-height: 1.4;
  }

  .portfolio__card-more {
    font-size: 11px;
  }

  .portfolio__card-more svg {
    width: 16px;
  }

  .portfolio__card-count {
    font-size: 10px;
  }

  .portfolio__nav {
    justify-content: center;
  }

  .portfolio__nav-btn {
    width: 51px;
    height: 51px;
  }
}

/* End */


/* Start:/local/templates/assimettric-avl_s3/components/bitrix/news.list/brands_index/style.css?179361469013315*/
/*
 * Block: brands («Бренды»)
 */

.brands {
  position: relative;
  background: var(--color-panel-alt);
  padding: clamp(56px, 6.2vw, 119px) 0 clamp(56px, 6.7vw, 129px);
}

.brands__inner {
  max-width: 1920px;
  margin: 0 auto;
}

/* ---------- Header ---------- */

.brands__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 58px);
  padding: 0 clamp(20px, 7.6vw, 146px);
}

.brands__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}

.brands__eyebrow-line {
  width: clamp(24px, 2.3vw, 44px);
  height: 1px;
  background: var(--color-white);
  flex-shrink: 0;
}

.brands__title {
  margin: 30px 0 0;
  font-weight: 600;
  font-size: clamp(28px, 3.02vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.017em;
  text-transform: uppercase;
  color: var(--color-white);
}

.brands__title span {
  display: block;
}

.brands__title--muted {
  color: var(--color-muted);
}

/*
 * Разделитель под заголовком — тот же размер/отступ, что и у остальных
 * заголовков блоков на главной (about/services/trust/contacts/portfolio).
 * Отдельный класс, а не .brands__divider — этот класс уже занят пагинацией
 * слайдера брендов (.brands__dots).
 */
.brands__title-divider {
  display: block;
  width: 46px;
  height: 2px;
  margin: 30px 0 20px;
  background: var(--color-line-muted);
}

.brands__summary {
  max-width: 466px;
  min-width: 0;
  flex-shrink: 0;
  margin-top: clamp(40px, 3.7vw, 71px);
}

.brands__desc {
  margin: 0;
  font-size: clamp(13px, 0.78vw, 15px);
  line-height: 1.73;
  color: var(--color-white);
}

.brands__link {
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 2.7vw, 52px);
  margin-top: clamp(16px, 2.1vw, 40px);
  padding-bottom: clamp(6px, 0.83vw, 16px);
  border-bottom: 1px solid var(--color-white-40);
  color: var(--color-white);
  text-decoration: none;
  font-size: clamp(12px, 0.73vw, 14px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: gap 0.25s ease, border-color 0.25s ease;
}

.brands__link:hover {
  gap: clamp(26px, 3.4vw, 64px);
  border-color: rgba(255, 255, 255, 0.8);
}

.brands__link-arrow {
  width: clamp(14px, 1.15vw, 22px);
  height: auto;
  color: var(--color-white);
}

/*
 * ---------- Carousel (лента брендов, постранично) ----------
 * Раньше тут была бесконечная авто-прокрутка (CSS-анимация по кругу,
 * aria-hidden, без пауз и без понятия "текущая страница"). По фидбеку
 * пользователя лента должна стать дискретным слайдером с реальной
 * пагинацией — так же, как уже было сделано для мобильной версии
 * (.brands__pages/.brands__dots, script.js). Теперь этот же паттерн
 * работает на всех брейкпоинтах: разница только в раскладке карточек
 * внутри страницы (тут — один ряд, на мобильном — сетка 3×2 ниже).
 */

.brands__carousel {
  margin-top: clamp(40px, 4.5vw, 86px);
}

.brands__pages {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.brands__pages.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

/* На время JS-анимации перехода (script.js: smoothScrollTo) — snap иначе
   перебивает промежуточные scrollLeft на каждом кадре и мгновенно
   доскакивает до ближайшей страницы, из-за чего "плавный" скролл выглядел
   как мгновенный прыжок. Курсор/user-select тут не трогаем — это не драг. */
.brands__pages.is-animating {
  scroll-snap-type: none;
}

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

.brands__page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: clamp(48px, 5.6vw, 108px);
  row-gap: 32px;
  padding: 0 clamp(24px, 5.6vw, 108px);
}

/*
 * Раньше коробка задавалась только высотой (width:auto у img) — исходные
 * файлы логотипов разного формата (широкие wordmark-логотипы и квадратные
 * значки с большими полями внутри самого файла), поэтому при равной
 * высоте квадратные логотипы выглядели гораздо мельче широких — по
 * фидбеку пользователя. Единая по ширине И высоте рамка + object-fit:contain
 * приводит все логотипы к одному зрительному "футпринту" независимо от
 * пропорций исходного файла.
 */
.brands__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(90px, 8.5vw, 164px);
  height: clamp(40px, 3.4vw, 64px);
}

/*
 * Логотип теперь кликабелен (ведёт на /brands/#CODE#/, тот же приём, что и
 * в сетке страницы /brands/) — <img> обёрнут в <a class="brands__logo-link">,
 * которая просто повторяет flex-центрирование, которое раньше было у самого
 * <img> внутри .brands__logo. :hover ниже остаётся на .brands__logo (внешний
 * <span>) — срабатывает и от наведения на вложенную ссылку, менять не нужно.
 */
.brands__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.brands__logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter 0.3s ease;
}

.brands__logo:hover img {
  filter: grayscale(0);
}

/*
 * ---------- Пагинация ----------
 * .brands__divider — тот же класс, что раньше был у чисто декоративной
 * пунктирной линии под лентой; теперь на этом же месте реальная навигация
 * по страницам. По макету — короткие полоски, активная ярче и толще
 * (не иконки-кружки).
 */
.brands__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(24px, 3vw, 58px);
}

.brands__dot {
  position: relative;
  width: clamp(32px, 2.5vw, 48px);
  height: 2px;
  padding: 0;
  border: 0;
  background: var(--color-white-40);
  cursor: pointer;
  transition: background-color 0.25s ease, height 0.25s ease;
}

/* Кликабельная область шире видимой полоски (::before, вне box-model самой
   полоски — иначе с box-sizing:border-box padding раздувает саму высоту
   вместо того, чтобы просто увеличить хитбокс, это и была причина бага
   "полоска толстая и видна только одна"). */
.brands__dot::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  right: 0;
}

.brands__dot.is-active {
  height: 3px;
  background: var(--color-white);
}

/* ---------- Features ---------- */

.brands__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(32px, 3vw, 58px);
  max-width: 1232px;
  margin: clamp(40px, 4vw, 77px) auto 0;
  padding: 0 clamp(20px, 7.6vw, 146px);
}

.brands__feature {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.7vw, 24px);
  flex: 1 1 240px;
  min-width: 0;
}

.brands__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(48px, 3.4vw, 65px);
  height: clamp(48px, 3.4vw, 65px);
  border-radius: 50%;
  background: var(--color-icon-circle);
  color: var(--color-icon-muted);
}

.brands__feature-icon img {
  display: block;
  width: 49%;
  height: 49%;
  object-fit: contain;
}

.brands__feature-text h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-white);
}

.brands__feature-text p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-white-60);
}

/*
 * Tablet
 * Figma (768): https://www.figma.com/design/o2pxpPyVyPKWw4xNWKOeBQ/asimetrik-avl--Copy-?node-id=1217-979
 *
 * Точные значения с кадра 768 (не интерполяция). Раскладка структурно та
 * же, что на десктопе (постраничная лента, эйбрау/заголовок/саммари в ряд) —
 * меняются только кегли и отступы. Диапазон снизу ограничен, чтобы не
 * перетекать в мобильный брейкпоинт.
 */

@media (min-width: 761px) and (max-width: 1024px) {
  .brands__header,
  .brands__features {
    padding-left: 51px;
    padding-right: 51px;
  }

  /* Ширина summary-колонки по макету (519px) не оставляет места для
     заголовка при боковой раскладке на 768 — переносим её под заголовок,
     как на мобильном. gap:0 — у .brands__title-divider уже есть свой
     margin-bottom:20px; лишний gap контейнера складывался с ним (~44px) и
     визуально отрывал линию от заголовка к середине. */
  .brands__header {
    flex-direction: column;
    gap: 0;
  }

  .brands__eyebrow {
    font-size: 15px;
  }

  .brands__eyebrow-line {
    width: 36px;
  }

  .brands__title {
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -0.8px;
  }

  .brands__summary {
    margin-top: 0;
    max-width: 519px;
  }

  .brands__desc {
    font-size: 12px;
    line-height: 21px;
  }

  .brands__link {
    margin-top: 20px;
    font-size: 11px;
  }

  .brands__logo {
    width: 130px;
    height: 44px;
  }

  .brands__feature-icon {
    width: 40px;
    height: 40px;
  }

  .brands__feature-text h3 {
    font-size: 12px;
  }

  .brands__feature-text p {
    font-size: 10px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  .brands__header {
    flex-direction: column;
    gap: 0;
  }

  /*
   * На мобильном лента брендов заменяется страницами с точками-пагинацией
   * (.brands__dots) — decorативный штрих-разделитель под ними визуально
   * задваивает навигацию (по фидбеку пользователя), скрываем.
   */
  .brands__divider {
    display: none;
  }

  .brands__summary {
    margin-top: 0;
    max-width: none;
  }

  .brands__title {
    font-size: 30px;
  }

  /*
   * Один ряд (десктоп) заменяется статичной сеткой 3×2 — реальных брендов
   * из инфоблока обычно больше, чем помещается на один "экран", поэтому
   * вместо интерполяции лишних логотипов (как в исходном Figma-макете с 6
   * логотипами) раскладываем их по страницам (result_modifier.php:
   * BRAND_PAGES) и листаем свайпом/точками. Сама пагинация (.brands__dots/
   * .brands__dot) не переопределяется — везде одинаковые полоски.
   */
  .brands__carousel {
    margin-top: 40px;
  }

  .brands__page {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    column-gap: 24px;
    row-gap: 32px;
    padding: 0;
  }

  .brands__logo {
    width: 100px;
    height: 32px;
    justify-self: center;
  }

  .brands__features {
    flex-direction: column;
    gap: 24px;
  }

  .brands__feature {
    flex: 1 1 auto;
  }
}

/* End */


/* Start:/local/templates/assimettric-avl_s3/components/bitrix/news.list/trust_index/style.css?17936146919654*/
/*
 * Block: trust («Почему нам доверяют»)
 */

.trust {
  position: relative;
  background: var(--color-panel);
}

.trust__inner {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 4.6vw, 89px);
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(64px, 7vw, 134px) clamp(20px, 7.6vw, 146px);
}

/* ---------- Text column ---------- */

.trust__text {
  flex: 1 1 42%;
  min-width: 0;
  max-width: 806px;
}

.trust__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}

.trust__eyebrow-line {
  width: clamp(24px, 2.3vw, 44px);
  height: 1px;
  background: var(--color-white);
  flex-shrink: 0;
}

.trust__title {
  margin: 30px 0 0;
  font-weight: 600;
  font-size: clamp(28px, 3.02vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.017em;
  text-transform: uppercase;
  color: var(--color-white);
}

.trust__title span {
  display: block;
}

.trust__title--muted {
  color: var(--color-muted);
}

.trust__divider {
  display: block;
  width: 46px;
  height: 2px;
  margin: 30px 0 20px;
  background: var(--color-line-muted);
}

.trust__desc {
  margin: 0;
  max-width: 768px;
  font-size: clamp(14px, 0.83vw, 16px);
  line-height: 1.6;
  color: var(--color-white);
}

/* ---------- Features grid ---------- */

.trust__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 3vw, 57px);
  row-gap: clamp(24px, 2.4vw, 46px);
  margin-top: clamp(40px, 5.8vw, 111px);
}

.trust__feature {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.7vw, 32px);
}

.trust__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(28px, 2.34vw, 45px);
  height: clamp(28px, 2.34vw, 45px);
  color: var(--color-white);
}

.trust__feature-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.trust__feature-text h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-white);
}

.trust__feature-text p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.43;
  color: var(--color-white-60);
}

/* ---------- Media ---------- */

/*
 * По макету (node-id=1059-3408) фото — не вставленная карточка, а сплошной
 * блок на всю высоту секции, от самого верха (на уровне эйбрау "ПОЧЕМУ НАМ
 * ДОВЕРЯЮТ") и до истинного правого края экрана, без скругления и отступа
 * справа. Раньше .trust__media был обычным flex-элементом внутри
 * .trust__inner с боковым паддингом — отсюда вид "карточки" с отступом от
 * края и центрирование по высоте. Растягиваем на всю высоту ряда
 * (align-items:stretch у родителя) и "выбиваем" вправо/вверх/вниз
 * отрицательными полями на величину паддинга контейнера — без 100vw-приёма,
 * который уже давал горизонтальный скролл в другом блоке (см. фидбек).
 */
.trust__media {
  flex: 1 1 48%;
  min-width: 0;
  align-self: stretch;
  margin-right: calc(-1 * clamp(20px, 7.6vw, 146px));
  /* по фидбеку пользователя: скруглена только левая (внутренняя) сторона,
     правая грань бледит до края экрана — там скругление не нужно */
  border-radius: 15% 0 0 15%;
  overflow: hidden;
  /* Низ фото по макету плавно растворяется в фоне и должен быть полностью
     невидим у самого нижнего края (не обрезан чётко), но сама зона
     растворения не должна съедать половину фото — по фидбеку пользователя
     предыдущий вариант (солид только до 15%, transparent уже на 65%)
     скрывал слишком много. Solid-зона расширена (до 30%), а полностью
     прозрачным градиент становится позже (на 85%, не у самой границы). */
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 85%);
}

.trust__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Tablet / Mobile reorder ---------- */

/*
 * Figma (768): https://www.figma.com/design/o2pxpPyVyPKWw4xNWKOeBQ/asimetrik-avl--Copy-?node-id=1217-1075
 * Figma (390): https://www.figma.com/design/o2pxpPyVyPKWw4xNWKOeBQ/asimetrik-avl--Copy-?node-id=1212-874
 *
 * В обоих кадрах порядок другой, чем на desktop: эйбрау/заголовок/дивайдер/
 * описание, затем ФОТО, затем сетка преимуществ (на desktop сетка стоит
 * сразу под текстом в одной колонке, фото — отдельная колонка справа).
 * В разметке .trust__grid физически вложена внутрь .trust__text (как и
 * нужно для desktop-раскладки) — чтобы визуально переставить фото МЕЖДУ
 * текстом и сеткой без правки PHP-шаблона, здесь .trust__text переводится
 * в display:contents (её дети становятся прямыми flex-элементами
 * .trust__inner) и расставляется через order.
 */

@media (max-width: 1024px) {
  .trust__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Базовый gap (clamp 24-89px) — это зазор МЕЖДУ ДВУМЯ КОЛОНКАМИ
       десктоп-раскладки (текст/фото). На ≤1024px .trust__text превращается
       в display:contents, и её дети (эйбрау/заголовок/линия/описание/фото/
       грид) становятся ПРЯМЫМИ flex-элементами этого же контейнера — тот же
       gap начинает добавляться между КАЖДЫМ из них поверх их собственных
       margin, раздувая расстояния (например, до линии-разделителя вместо
       положенных ~30px получалось ~52px). Обнуляем — вся вертикальная
       раскладка тут и так задаётся margin-ами самих элементов. */
    gap: 0;
  }

  .trust__text {
    display: contents;
  }

  .trust__eyebrow {
    order: 1;
  }

  .trust__title {
    order: 2;
  }

  .trust__divider {
    order: 3;
  }

  .trust__desc {
    order: 4;
  }

  .trust__media {
    flex: none;
    order: 5;
    /* На ≤1024px фото — обычный блок в потоке, без десктопного "выбивания"
       за паддинг (см. базовое правило .trust__media выше). Раньше отступ
       сверху обеспечивал gap контейнера (см. .trust__inner выше) — после
       его обнуления возвращаем явным margin-top (тот же отступ "текст →
       фото", что и у .services__media на мобильном). */
    margin: 32px 0 0;
    border-radius: clamp(24px, 2.1vw, 40px);
  }

  .trust__grid {
    order: 6;
  }
}

/*
 * Tablet
 * Figma (768): node-id=1217-1075 — точные значения с кадра, не
 * интерполяция. Сетка преимуществ остаётся 2×2 (не в один столбец, как на
 * мобильном).
 */

@media (min-width: 761px) and (max-width: 1024px) {
  .trust__inner {
    padding-left: 51px;
    padding-right: 51px;
  }

  .trust__eyebrow {
    font-size: 15px;
  }

  .trust__eyebrow-line {
    width: 44px;
  }

  .trust__title {
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -1px;
  }

  .trust__desc {
    max-width: 666px;
    font-size: 16px;
    line-height: 26px;
  }

  .trust__media {
    width: 100%;
    max-width: 666px;
    height: 501px;
    margin-top: 40px;
  }

  .trust__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 46px;
    margin-top: 46px;
  }

  .trust__feature {
    gap: 32px;
  }

  .trust__feature-icon {
    width: 45px;
    height: 45px;
  }
}

/*
 * Mobile
 * Figma (390): node-id=1212-874
 */

@media (max-width: 760px) {
  .trust__inner {
    padding: 56px 20px;
  }

  .trust__title {
    font-size: 30px;
  }

  .trust__media {
    width: 100%;
    height: 60vw;
    margin-top: 24px;
  }

  .trust__grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
    margin-top: 24px;
  }
}

/* End */


/* Start:/local/templates/assimettric-avl_s3/components/bitrix/news.list/contacts_index/style.css?179361469112579*/
/*
 * Block: contacts («Контакты»)
 */

.contacts {
  position: relative;
  overflow: hidden;
  background: var(--color-panel);
}

.contacts__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contacts__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-panel) 0%, var(--color-panel) 28%, rgba(28, 31, 36, 0.55) 55%, rgba(28, 31, 36, 0.25) 100%);
}

.contacts__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.contacts__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 77px);
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(64px, 7vw, 134px) clamp(20px, 7.6vw, 146px);
}

/* ---------- Text column ---------- */

.contacts__text {
  flex: 1 1 500px;
  min-width: 0;
  max-width: 771px;
}

.contacts__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}

.contacts__eyebrow-line {
  width: clamp(24px, 2.3vw, 44px);
  height: 1px;
  background: var(--color-white);
  flex-shrink: 0;
}

.contacts__title {
  margin: 30px 0 0;
  font-weight: 600;
  font-size: clamp(28px, 3.02vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.017em;
  text-transform: uppercase;
  color: var(--color-white);
}

.contacts__title span {
  display: block;
}

.contacts__title--muted {
  color: var(--color-muted);
}

.contacts__divider {
  display: block;
  width: 46px;
  height: 2px;
  margin: 30px 0 20px;
  background: var(--color-line-muted);
}

.contacts__desc {
  margin: 0;
  max-width: 572px;
  font-size: clamp(14px, 0.83vw, 16px);
  line-height: 1.6;
  color: var(--color-white);
}

/* ---------- Info items ---------- */

/*
 * Раньше это был flex с двумя "колонками": слева — .contacts__info-col
 * (Телефон/E-mail/WhatsApp, 3 пункта в столбик), справа — одинокий Адрес.
 * Из-за разного количества пунктов раскладка выглядела неровной (адрес
 * висел один во второй колонке) — по фидбеку пользователя переводим на
 * сетку 2×2: .contacts__info-col становится "прозрачным" (display:contents),
 * его дети встают в общий грид наравне с Адресом, и авто-раскладка грида
 * в DOM-порядке сама даёт нужные 2 строки (Телефон/E-mail, WhatsApp/Адрес).
 */
.contacts__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 2.86vw, 55px);
  row-gap: clamp(24px, 2.3vw, 44px);
  margin-top: clamp(28px, 3vw, 58px);
}

.contacts__info-col {
  display: contents;
}

.contacts__info-item {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.55vw, 30px);
}

.contacts__info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(48px, 3.4vw, 65px);
  height: clamp(48px, 3.4vw, 65px);
  border-radius: 50%;
  background: rgba(48, 52, 60, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-icon-muted);
  transition: color 0.25s ease;
}

.contacts__info-item:hover .contacts__info-icon {
  color: var(--color-white);
}

.contacts__info-icon svg {
  width: 55%;
  height: 55%;
}

.contacts__info-text {
  display: flex;
  flex-direction: column;
}

.contacts__info-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-white);
}

.contacts__info-value {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-white-60);
  text-decoration: none;
  transition: color 0.25s ease;
}

a.contacts__info-value:hover {
  color: var(--color-white);
}

.contacts__info-value--static {
  font-size: 15px;
  line-height: 1.3;
  max-width: 170px;
}

.contacts__info-hint {
  margin-top: 2px;
  font-size: 15px;
  color: var(--color-white-60);
}

/* ---------- Form ---------- */

.contacts__form {
  flex: 0 0 auto;
  width: clamp(280px, 19.06vw, 366px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 1.9vw, 37px);
  background: rgba(48, 52, 60, 0.83);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: clamp(28px, 2.6vw, 50px);
}

.contacts__form-title {
  margin: 0 0 30px;
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-white);
}

.contacts__field {
  display: block;
}

.contacts__field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #ff6b6b;
}

.contacts__form-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-white);
}

.contacts__form-error {
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 107, 107, 0.4);
  border-radius: 11px;
  background: rgba(255, 107, 107, 0.1);
  font-size: 13px;
  line-height: 1.5;
  color: #ff6b6b;
}

/* ---------- Modal (успех/ошибка отправки формы) ---------- */

.contacts__modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.contacts__modal.is-open {
  opacity: 1;
  visibility: visible;
}

.contacts__modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 13, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.contacts__modal-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 380px;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);
  background: rgba(48, 52, 60, 0.97);
  border-radius: clamp(28px, 2.6vw, 50px);
  text-align: center;
  transform: translateY(12px) scale(0.96);
  transition: transform 0.25s ease;
}

.contacts__modal.is-open .contacts__modal-card {
  transform: translateY(0) scale(1);
}

.contacts__modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-white-60);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contacts__modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.contacts__modal-close svg {
  width: 16px;
  height: 16px;
}

.contacts__modal-icon svg {
  display: none;
  width: 60px;
  height: 60px;
}

.contacts__modal.is-success .contacts__modal-icon-success {
  display: block;
}

.contacts__modal.is-error .contacts__modal-icon-error {
  display: block;
}

.contacts__modal-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
}

.contacts__field input,
.contacts__field textarea {
  display: block;
  width: 100%;
  padding: 12px 19px;
  border: 1px solid var(--color-border-muted);
  border-radius: 11px;
  background: transparent;
  color: var(--color-white);
  font-family: inherit;
  font-size: 14px;
}

.contacts__field input::placeholder,
.contacts__field textarea::placeholder {
  color: var(--color-white-40);
}

.contacts__field textarea {
  min-height: 98px;
  resize: vertical;
}

.contacts__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
  cursor: pointer;
}

.contacts__checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.contacts__checkbox-box {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* см. комментарий в form.result.new/contacts_page/style.css — раньше
   коробка просто заливалась белым без самой галочки, непонятно было,
   отмечено согласие или нет */
.contacts__checkbox-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='%231C1F24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 9px 7px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.contacts__checkbox input:checked + .contacts__checkbox-box {
  background: var(--color-white);
  border-color: var(--color-white);
}

.contacts__checkbox input:checked + .contacts__checkbox-box::after {
  opacity: 1;
}

.contacts__checkbox-label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-white-50);
}

.contacts__checkbox-link {
  color: var(--color-white-60);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.25s ease;
}

.contacts__checkbox-link:hover {
  color: var(--color-white);
}

.contacts__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 16px 27px;
  border: 1px solid var(--color-white);
  border-radius: 11px;
  background: none;
  color: var(--color-white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contacts__submit:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.contacts__submit svg {
  width: 15px;
  height: auto;
  flex-shrink: 0;
}

/*
 * Tablet
 * Figma (768, текст): https://www.figma.com/design/o2pxpPyVyPKWw4xNWKOeBQ/asimetrik-avl--Copy-?node-id=1219-422
 *
 * В присланном кадре 768 есть только эйбрау/заголовок/описание — инфоблоки
 * (телефон/email/адрес) и форма в макете на этой ширине отдельно не
 * выделены. Раскладка (в колонку, форма на всю ширину) переиспользована с
 * мобильной версии — доп. сведений от дизайнера по ней нет.
 */

@media (min-width: 761px) and (max-width: 1024px) {
  .contacts__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 64px 51px;
  }

  .contacts__text {
    max-width: none;
  }

  .contacts__eyebrow {
    font-size: 15px;
  }

  .contacts__eyebrow-line {
    width: 44px;
  }

  .contacts__title {
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -1px;
  }

  .contacts__desc {
    max-width: 400px;
    font-size: 16px;
  }

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

  .contacts__info-icon {
    width: 65px;
    height: 65px;
  }

  .contacts__form {
    width: 100%;
    border-radius: 44px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  .contacts__media img {
    object-position: center;
  }

  .contacts__media::after {
    background: linear-gradient(180deg, var(--color-panel) 0%, var(--color-panel) 38%, rgba(28, 31, 36, 0.6) 60%, rgba(28, 31, 36, 0.3) 100%);
  }

  .contacts__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 56px 20px;
  }

  .contacts__text {
    max-width: none;
  }

  .contacts__eyebrow {
    font-size: 15px;
  }

  .contacts__eyebrow-line {
    width: 30px;
  }

  .contacts__title {
    font-size: 30px;
  }

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

  .contacts__info-icon {
    width: 65px;
    height: 65px;
  }

  .contacts__form {
    width: 100%;
    border-radius: 40px;
  }
}

/* End */


/* Start:/local/templates/assimettric-avl_s3/components/bitrix/form.result.new/contacts_index/style.css?1793614690405*/
/*
 * Кастомный шаблон формы обратной связи (bitrix:form.result.new) — верстка
 * полей полностью использует классы .contacts__* из компонента
 * news.list/contacts_index (auto-load, style.css лежит там же на странице).
 * Здесь ничего дополнительно не нужно.
 */

/* End */
/* /local/templates/assimettric-avl_s3/components/bitrix/news.list/slider_index/style.css?179361469121079 */
/* /local/templates/assimettric-avl_s3/assets/vendor/swiper/swiper-bundle.min.css?179361469018466 */
/* /local/templates/assimettric-avl_s3/components/bitrix/news.list/company_index/style.css?179361469014852 */
/* /local/templates/assimettric-avl_s3/components/bitrix/news.list/company_stages/style.css?17936146907468 */
/* /local/templates/assimettric-avl_s3/components/bitrix/news.list/portfolio_index/style.css?179361469113265 */
/* /local/templates/assimettric-avl_s3/components/bitrix/news.list/brands_index/style.css?179361469013315 */
/* /local/templates/assimettric-avl_s3/components/bitrix/news.list/trust_index/style.css?17936146919654 */
/* /local/templates/assimettric-avl_s3/components/bitrix/news.list/contacts_index/style.css?179361469112579 */
/* /local/templates/assimettric-avl_s3/components/bitrix/form.result.new/contacts_index/style.css?1793614690405 */