@font-face {
  font-family: Abc Monument Grotesk;
  src: url('../fonts/ABC-Monument-Grotesk.woff2') format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

body {
  color: #333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Base utilities — extracted from webflow.css (de-Webflowed).
   Placed above the named classes so .cta-field / .submit-button /
   .hero_bg-video keep overriding these defaults exactly as before.
   ════════════════════════════════════════════════════════════════════ */
.is-inline-block {
  max-width: 100%;
  display: inline-block;
}

.is-list-unstyled {
  padding-left: 0;
  list-style: none;
}

.is-form {
  margin: 0 0 15px;
}

.form-field {
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-size: 14px;
  line-height: 1.42857143;
  display: block;
}

.form-field::placeholder {
  color: #999;
}

.form-field:focus {
  border-color: #3898ec;
  outline: 0;
}

.form-submit {
  padding: 9px 15px;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  color: #fff;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}

input.form-submit {
  -webkit-appearance: button;
}

.form-success {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #ddd;
}

.form-error {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}

.bg-video {
  height: 500px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.bg-video > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  inset: -100%;
  margin: auto;
  z-index: -100;
}

.heading_display-large {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-lh);
  font-weight: var(--brand-weight-regular);
  letter-spacing: -.05em;
}

.heading_display-small {
  font-family: ABC Monument Grotesk, Arial, sans-serif;
  font-size: var(--type-display-sm-size);
  line-height: var(--type-display-sm-lh);
  font-weight: 400;
}

.heading_h1 {
  color: var(--mapped-text-headings);
  font-family: ABC Monument Grotesk, Arial, sans-serif;
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: -.03em;
  font-weight: 400;
}

.heading_h2 {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  font-weight: var(--brand-weight-regular);
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
}

.heading_h3 {
  color: var(--mapped-text-headings);
  font-family: ABC Monument Grotesk, Arial, sans-serif;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: 400;
}

.heading_h4 {
  color: var(--mapped-text-headings);
  font-family: ABC Monument Grotesk, Arial, sans-serif;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-lh);
  font-weight: 400;
}

.heading_h5 {
  color: var(--mapped-text-headings);
  font-family: ABC Monument Grotesk, Arial, sans-serif;
  font-size: var(--type-h5-size);
  line-height: var(--type-h5-lh);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.heading_h6 {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-h6-size);
  line-height: var(--type-h6-lh);
  font-weight: var(--brand-weight-regular);
}

.heading_h6.is-inverse {
  color: var(--mapped-text-headings-inverse);
}

.text_size-large {
  color: var(--mapped-text-body);
  font-family: ABC Monument Grotesk, Arial, sans-serif;
  font-size: var(--type-paragraph-lg-size);
  line-height: var(--type-paragraph-lg-lh);
  font-weight: 400;
}

.text_size-medium {
  color: var(--mapped-text-body);
  font-family: ABC Monument Grotesk, Arial, sans-serif;
  font-size: var(--type-paragraph-md-size);
  line-height: var(--type-paragraph-md-lh);
  letter-spacing: .01em;
  font-weight: 400;
}

.text_size-medium.is-white {
  color: var(--mapped-text-headings);
}

.text_size-small {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-body);
  font-size: var(--type-paragraph-sm-size);
  line-height: var(--type-paragraph-sm-lh);
  margin-bottom: 0;
  font-weight: 400;
}

.text_size-small.is-color-light {
  color: var(--mapped-text-body-light);
}

.text_size-small.is-inverse {
  color: var(--mapped-text-headings-inverse);
}

.text_size-xsmall {
  color: var(--mapped-text-body-light);
  font-family: ABC Monument Grotesk, Arial, sans-serif;
  font-size: var(--type-paragraph-xsm-size);
  line-height: var(--type-paragraph-xsm-lh);
  font-weight: 400;
}

.text_size-xsmall.is-inverse {
  color: var(--mapped-text-headings-inverse);
}

.text_eyebrow {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-body);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  font-weight: var(--brand-weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.page {
  background-color: var(--mapped-surface-page);
}

.section_cases {
  background-color: var(--mapped-surface-default);
  color: var(--mapped-text-body);
}

.container {
  width: 100%;
  padding-right: var(--mapped-padding-md);
  padding-left: var(--mapped-padding-md);
}

.padding {
  padding-top: var(--mapped-padding-md);
  padding-bottom: var(--mapped-padding-md);
  border-right: 1px solid var(--mapped-border-default);
  border-bottom: 1px solid var(--mapped-border-default);
  border-left: 1px solid var(--mapped-border-default);
  color: var(--mapped-text-body);
}

.padding.is-none {
  padding-top: var(--mapped-padding-none);
  padding-bottom: var(--mapped-padding-none);
}

.padding.is-border-none {
  border: 1px #000;
}

.padding.is-small {
  padding-top: var(--mapped-padding-sm);
  padding-bottom: var(--mapped-padding-sm);
}

.padding.is-border-btn-none {
  border-bottom-style: none;
}

.heading_container {
  width: 100%;
  max-width: 60em;
  padding-right: var(--mapped-padding-sm);
  padding-left: var(--mapped-padding-sm);
  grid-column-gap: var(--mapped-padding-sm);
  grid-row-gap: var(--mapped-padding-sm);
  flex-flow: column;
  display: flex;
}

.heading_container.is-width-full {
  max-width: none;
}

.button-wrap {
  padding-top: var(--mapped-padding-xs);
  padding-right: var(--brand-scale-700);
  padding-bottom: var(--mapped-padding-xs);
  padding-left: var(--brand-scale-500);
  grid-column-gap: var(--brand-scale-200);
  grid-row-gap: var(--brand-scale-200);
  background-color: var(--mapped-surface-action);
  clip-path: polygon(.5em 0%, calc(100% - .5em) 0%, 100% .5em, 100% calc(100% - .5em), calc(100% - .5em) 100%, .5em 100%, 0% calc(100% - .5em), 0% .5em);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  transition-property: background-color;
  transition-duration: .2s;
  transition-timing-function: ease;
  display: inline-flex;
  position: relative;
}




.button-wrap:hover {
  background-color: var(--mapped-icon-action-hover);
}

.button-text {
  color: var(--mapped-text-on-action);
  letter-spacing: .03em;
  text-transform: uppercase;
  font-family: Abc Monument Grotesk, Arial, sans-serif;
  font-size: .75em;
  font-weight: 500;
  line-height: 1.3;
}

.button-text.is-absolute {
  position: absolute;
  top: 100%;
}

.icon-mask {
  height: .8em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.icon-arrow {
  width: 100%;
}

.icon-arrow.is-absolute {
  position: absolute;
  inset: 0% 0% 0% -100%;
}

.ede {
  grid-column-gap: var(--brand-scale-200);
  grid-row-gap: var(--brand-scale-200);
  justify-content: flex-start;
  align-items: center;
  height: 1.2em;
  display: flex;
}

.ede.is-right {
  transform: rotate(180deg);
}

.image {
  max-height: 1em;
}

/* ============================================================
   Grid system — one primitive for every section layout.
   .content-grid sets the column count via --cols; .grid-col
   cells span via --span / --row-span. The 1px section borders
   are drawn by the grid gap (the gap reveals the grid's
   background), so no per-cell border classes are needed.
   ============================================================ */
.content-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: 1px;
  width: 100%;
  background-color: var(--mapped-border-default);
}

.content-grid.is-border-btm {
  border-bottom: 1px solid var(--mapped-border-default);
}

/* Spaced variant — real gap, no gridline borders (e.g. logo grid). */
.content-grid.is-spaced {
  gap: var(--mapped-padding-xs);
  background-color: transparent;
}

/* Plain variant — columns flush, no gridline borders (e.g. footer legal bar). */
.content-grid.is-plain {
  gap: 0;
}

.content-grid > .grid-col {
  grid-column: span var(--span, 1);
  grid-row: span var(--row-span, 1);
  background-color: var(--mapped-surface-default);
}

.content-grid_3-col {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.content-grid_3-col.is-padding-btm {
  border-bottom: 1px solid var(--mapped-border-default);
}

.grid-col {
  width: 100%;
}

.grid-col.is-height-100 {
  max-height: 100%;
}

.card_wrap {
  width: 100%;
  height: 100%;
  padding: var(--mapped-padding-sm) var(--mapped-padding-sm) var(--mapped-padding-md);
  grid-column-gap: var(--mapped-padding-xs);
  grid-row-gap: var(--mapped-padding-xs);
  flex-flow: column;
  display: flex;
}

.card_wrap.border-none {
  border-right-style: none;
}

.card_info {
  grid-column-gap: var(--mapped-padding-xs);
  grid-row-gap: var(--mapped-padding-xs);
  flex-flow: column;
  display: flex;
}

.section_numbers {
  background-color: var(--mapped-surface-default);
}

.section_facts {
  background-color: var(--mapped-surface-default);
}

/* Секция-изображение во всю ширину (страница About). Высота — по картинке;
   верхний бордер во всю ширину экрана (секция вне контейнера) */
.section_close-up {
  border-top: 1px solid var(--mapped-border-default);
  border-bottom: 1px solid var(--mapped-border-default);
}

.section_close-up img {
  width: 100%;
  height: auto;
  display: block;
}

.eyebrow_bracket {
  width: .3em;
  display: flex;
}

.eyebrow_bracket.is-right {
  transform: rotate(180deg);
}

.card_illustration-wrap {
  justify-content: center;
  align-items: center;
  width: 12em;
  height: 12em;
  display: flex;
  position: relative;
}

.shape {
  position: absolute;
}

.shape.is-1 {
  z-index: 5;
}

.shape.is-2 {
  z-index: 4;
}

.shape.is-3 {
  z-index: 3;
}

.shape.is-4 {
  z-index: 2;
}

.shape.is-5 {
  z-index: 1;
}

.section_hero {
  min-height: 100svh;
  color: var(--mapped-text-body);
  background-color: #eff0f100;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero_heading_container {
  z-index: 3;
  width: 100%;
  max-width: 37.6em;
  padding-right: var(--mapped-padding-sm);
  padding-left: var(--mapped-padding-sm);
  grid-column-gap: var(--mapped-padding-sm);
  grid-row-gap: var(--mapped-padding-sm);
  flex-flow: column;
  display: flex;
  position: relative;
}

.hero_bg-video {
  z-index: 1;
  aspect-ratio: auto;
  transform-origin: 50%;
  object-fit: cover;
  width: 100%;
  height: 125%;
  position: absolute;
  inset: -10% 0% 0%;
}

.darken {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.2); /* readability scrim over the hero video */
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.hero_para-wrap {
  max-width: 28em;
}

.nav {
  z-index: 99;
  width: 100%;
  height: var(--layout-nav-height);
  border-bottom: 1px solid var(--brand-grey-600);
  position: fixed;
}

.nav_wrap {
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  display: flex;
}

.nav_items-wrap {
  align-items: center;
  display: flex;
}

.nav_logo-container {
  height: 100%;
  padding-right: var(--mapped-padding-sm);
  padding-left: var(--mapped-padding-sm);
  border-right: 1px solid var(--brand-grey-600);
  border-left: 1px solid var(--brand-grey-600);
  color: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav_item {
  height: 100%;
  padding-right: var(--mapped-padding-sm);
  padding-left: var(--mapped-padding-sm);
  color: var(--brand-grey-150);
  letter-spacing: .04em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-family: Abc Monument Grotesk, Arial, sans-serif;
  font-size: .75em;
  text-decoration: none;
  transition: background-color .2s;
  display: flex;
}

.nav_item:hover {
  background-color: var(--brand-grey-750);
}

.nav_item.is-border {
  border-right: 1px solid var(--mapped-border-default);
  transition: background-color .2s;
}

.nav_item-text {
  text-decoration: none;
}

.nav-container {
  z-index: 98;
  height: 100%;
  position: relative;
}

.nav_backdrop {
  z-index: 90;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  background-color: #00000003;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.nav_contact {
  height: 100%;
  padding-right: var(--mapped-padding-md);
  padding-left: var(--mapped-padding-md);
  border-right: 1px solid var(--brand-grey-600);
  border-left: 1px solid var(--brand-grey-600);
  color: var(--brand-grey-150);
  letter-spacing: .04em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-family: Abc Monument Grotesk, Arial, sans-serif;
  font-size: .75em;
  text-decoration: none;
  transition: background-color .2s;
  display: flex;
}

.nav_contact:hover {
  background-color: var(--mapped-surface-action-hover);
  color: var(--mapped-text-on-action);
}

.nav_contact.is-border {
  border-right: 1px solid var(--mapped-border-default);
}

/* ─── Mobile menu — тоггл (МЕНЮ/X) + выезжающая сверху панель + scrim ───
   Desktop: всё скрыто. Mobile (≤479): связаться скрыта, МЕНЮ на её месте,
   панель fixed под навбаром, выезжает через GSAP (initMobileMenu). */
.nav_menu-toggle { display: none; }
.nav_menu,
.nav_menu-scrim { display: none; }

@media screen and (max-width: 479px) {
  .nav_contact { display: none; }

  /* Тоггл — grid-stack: label + X в одной ячейке → ширина по МЕНЮ, при свапе
     на X размер кнопки НЕ меняется, X центрируется. Бордеры с обеих сторон
     (mapped-border). Цвет наследуется от nav-container (адаптируется к теме nav). */
  .nav_menu-toggle {
    height: 100%;
    display: inline-grid;
    place-items: center;
    padding-left: var(--mapped-padding-md);
    padding-right: var(--mapped-padding-md);
    border-left: 1px solid var(--mapped-border-default);
    border-right: 1px solid var(--mapped-border-default);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: Abc Monument Grotesk, Arial, sans-serif;
    font-size: .75em;
  }
  .nav_menu-toggle-label,
  .nav_menu-toggle-x {
    grid-area: 1 / 1;
  }
  .nav_menu-toggle-x { visibility: hidden; line-height: 0; }
  .nav_menu-toggle-x svg { width: 1.5em; height: 1.5em; }
  .nav[data-menu-open] .nav_menu-toggle-label { visibility: hidden; }
  .nav[data-menu-open] .nav_menu-toggle-x { visibility: visible; }

  /* Бар над панелью — панель выезжает из-за бара. z-index НЕ переопределяем:
     базовый .nav-container z-index:98 уже выше панели (1) И выше nav_blur (90).
     Раньше тут было z-index:2 → бар уходил ПОД nav_blur → логотип/меню
     блюрились на hero-мобилке. */

  /* Панель: full-width тёмная, скосы по низу. Боковые бордеры НЕ на панели
     (прижимались бы к краям экрана), а на .nav_menu-inner (внутренние). */
  .nav_menu {
    display: block;
    position: fixed;
    /* -1px: перекрываем стык с навбаром (sub-pixel зазор от em-высоты +
       border-bottom бара давал ~1px щель между баром и панелью). */
    top: calc(var(--layout-nav-height) - 1px);
    left: 0;
    right: 0;
    z-index: 1;
    background-color: var(--mapped-surface-default);
    /* Разделитель бар↔меню ЖИВЁТ на панели (едет вместе с ней → нет мигания
       статичного border-bottom навбара под движущимся слоем). Тот же токен,
       что у inner/items — единая рамка меню. border навбара прячется при
       открытии (base.css .nav[data-menu-open]). */
    border-top: 1px solid var(--mapped-border-default);
    padding: 0 var(--mapped-padding-sm);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1em), calc(100% - 1em) 100%, 1em 100%, 0 calc(100% - 1em));
  }
  /* Внутренняя рамка items — боковые бордеры (как у контейнера, внутренние) */
  .nav_menu-inner {
    border-left: 1px solid var(--mapped-border-default);
    border-right: 1px solid var(--mapped-border-default);
  }
  .nav_menu-item {
    display: block;
    padding: var(--mapped-padding-md) var(--mapped-padding-sm);
    border-bottom: 1px solid var(--mapped-border-default);
    text-decoration: none;
  }
  /* border-top только у первого айтема (разделитель от навбара); между
     остальными — border-bottom (без двойных линий). */
  /* border-top у первого пункта убран — раньше стакался с border-bottom
     навбара (2 линии между баром и меню). Разделитель = бордер навбара. */
  .nav_menu-item:last-child { border-bottom: none; }
  /* Активный пункт (текущая страница) — подсветка фоном, некликабельный.
     Light тема: grey-150; dark тема панели: инверсный grey-750. */
  .nav_menu-item.is-active {
    pointer-events: none;
    background-color: var(--mapped-surface-light-150);
  }
  [data-theme-section="dark"] .nav_menu-item.is-active {
    background-color: var(--alias-grey-750);
  }

  /* Scrim — затемняет контент под меню */
  .nav_menu-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: rgb(0 0 0 / 70%);
  }
}

.content-grid_2-col {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.content-grid_2-col.is-border-btm {
  border-bottom: 1px solid var(--mapped-border-default);
  height: 100%;
}

.card_content-big {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 41.875em;
  display: flex;
}

.card_content-big.is-border-right {
  border-right: 1px solid var(--mapped-border-default);
}

.card_info-block-big {
  grid-column-gap: var(--brand-scale-600);
  grid-row-gap: var(--brand-scale-600);
  flex-flow: column;
  max-width: 20em;
  display: flex;
}

/* Вариант для секции «Факты в цифрах» — выключка по центру */
.card_info-block-big.is-centered {
  text-align: center;
  align-items: center;
}

.hero_scroll-darken {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.nav-logo {
  max-width: 5.9375em;
}

.section_products {
  background-color: var(--mapped-surface-default);
  color: var(--mapped-text-body);
}

.pattern-container {
  border-right: 1px none var(--mapped-border-default);
  border-bottom: 1px solid var(--mapped-border-default);
  border-left: 1px none var(--mapped-border-default);
  width: 100%;
  height: 12em;
}

.pattern-container.is-border-l-r {
  border-left-style: solid;
  border-right-style: solid;
  border-left-color: var(--mapped-border-default);
}

.heading_h2-copy {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  font-weight: var(--brand-weight-regular);
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
}

.shape-engineering {
  position: absolute;
}

.shape-engineering.is-1 {
  z-index: 5;
}

.shape-engineering.is-2 {
  z-index: 4;
}

.shape-engineering.is-3 {
  z-index: 3;
}

.shape-engineering.is-4 {
  z-index: 2;
}

.shape-engineering.is-5 {
  z-index: 1;
}

.shape-vault {
  position: absolute;
}

.shape-vault.is-1 {
  z-index: 5;
}

.shape-vault.is-2 {
  z-index: 4;
}

.shape-vault.is-3 {
  z-index: 3;
}

.shape-vault.is-4 {
  z-index: 2;
}

.shape-stack {
  transform-origin: 50%;
  position: absolute;
}

.shape-stack.is-1 {
  z-index: 5;
}

.shape-stack.is-2 {
  z-index: 4;
}

.shape-stack.is-3 {
  z-index: 3;
}

.shape-bloom {
  transform-origin: 50%;
  position: absolute;
}

.shape-bloom.is-1 {
  z-index: 5;
}

.shape-bloom.is-2 {
  z-index: 4;
}

.shape-bloom.is-3 {
  z-index: 3;
}

.shape-bloom.is-4 {
  z-index: 2;
}

.shape-trace {
  transform-origin: 50%;
  position: absolute;
}

.shape-trace.is-1 {
  z-index: 5;
}

.shape-trace.is-2 {
  z-index: 4;
}

.shape-service {
  transform-origin: 50%;
  position: absolute;
}

.shape-service.is-1 {
  z-index: 5;
}

.shape-service.is-2 {
  z-index: 4;
}

.shape-service.is-3 {
  z-index: 3;
}

.shape-service.is-4 {
  z-index: 2;
}

.shape-service.is-5 {
  z-index: 1;
}

.product-card_title {
  padding: var(--mapped-padding-sm);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  display: grid;
}

.product-card_title.is-border-btm {
  border-bottom: 1px solid var(--mapped-border-default);
}

.product-card_preview {
  width: 100%;
  height: 25em;
  padding: var(--mapped-padding-sm);
  border-top: 1px solid var(--mapped-border-default);
  border-bottom: 1px solid var(--mapped-border-default);
  background-color: var(--mapped-surface-light-150);
}

.product-card_preview_background {
  width: 100%;
  height: 100%;
  padding-top: var(--mapped-padding-sm);
  padding-right: var(--mapped-padding-md);
  padding-bottom: var(--mapped-padding-sm);
  padding-left: var(--mapped-padding-md);
  background-color: var(--mapped-surface-light-200);
  clip-path: polygon(1em 0%, calc(100% - 1em) 0%, 100% 1em, 100% calc(100% - 1em), calc(100% - 1em) 100%, 1em 100%, 0% calc(100% - 1em), 0% 1em);
}

.product-card_img-holder {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.product-card_detail-img_wrap {
  width: 100%;
  height: 100%;
  padding: var(--mapped-padding-md);
}

.detail-img_container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 22em;
  display: flex;
  position: relative;
}

.tool-detail-img {
  height: 100%;
}

.feature-list {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}

.feature-list_item {
  width: 100%;
  padding: var(--mapped-padding-sm) var(--mapped-padding-xs);
  grid-column-gap: var(--brand-scale-400);
  grid-row-gap: var(--brand-scale-400);
  border-bottom: 1px solid var(--mapped-border-default);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.annotation_container {
  grid-column-gap: var(--brand-scale-200);
  grid-row-gap: var(--brand-scale-200);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.annotation_dot {
  background-color: var(--mapped-surface-action);
  width: .5em;
  height: .5em;
}

.annotation_dot:where(.is-disabled) {
  background-color: var(--mapped-icon-disabled);
}

.annotation_text {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-body-light);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  font-weight: var(--brand-weight-regular);
  letter-spacing: .1em;
  text-transform: uppercase;
}


.btn-big_container {
  width: 100%;
  padding: var(--mapped-padding-md) var(--mapped-padding-sm);
  grid-column-gap: var(--mapped-padding-sm);
  grid-row-gap: var(--mapped-padding-sm);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: block;
}

.btn-big_container.is-padding-btm {
  border-bottom: 1px none var(--mapped-border-default);
}

.btn-big_container.is-border-btm {
  border-bottom: 1px solid var(--mapped-border-default);
}

.product-card_main-img {
  aspect-ratio: auto;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.btn-text_mask {
  position: relative;
  overflow: hidden;
}

.product-tool-video {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.case-card_item {
  aspect-ratio: 3 / 2.5;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.case-card_item.is-border-r-b {
  border-right: 1px solid var(--mapped-border-default);
  border-bottom: 1px solid var(--mapped-border-default);
}

.case-card_item.is-border-btm {
  border-bottom: 1px solid var(--mapped-border-default);
}

.case-card_title {
  grid-column-gap: var(--mapped-padding-xxs);
  grid-row-gap: var(--mapped-padding-xxs);
  flex-flow: column;
  display: flex;
}

.case-cards_grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.case-cards_grid.is-border-btm {
  border-bottom: 1px solid var(--mapped-border-default);
}

.case-card_description {
  left: var(--mapped-padding-sm);
  top: var(--mapped-padding-sm);
  grid-column-gap: var(--mapped-padding-xxs);
  grid-row-gap: var(--mapped-padding-xxs);
  flex-flow: column;
  max-width: 14em;
  display: flex;
  position: absolute;
  bottom: auto;
  right: auto;
}

.case-card_date {
  left: var(--mapped-padding-sm);
  top: auto;
  right: auto;
  bottom: var(--mapped-padding-sm);
  color: var(--mapped-text-body-light);
  text-transform: uppercase;
  font-family: Abc Monument Grotesk, Arial, sans-serif;
  font-size: .75em;
  position: absolute;
}

.text-block {
  letter-spacing: .05em;
}

.case-card_img {
  left: auto;
  top: var(--mapped-padding-sm);
  right: var(--mapped-padding-sm);
  max-width: 8.125em;
  position: absolute;
  bottom: auto;
}

.section_proof {
  background-color: var(--mapped-surface-default);
}

.section_proof.is-padding-btm {
  border-bottom: 1px solid var(--mapped-border-default);
}

.logo-grid {
  padding: var(--mapped-padding-md) var(--mapped-padding-sm);
}

.logo-grid_item {
  aspect-ratio: 1;
  background-color: var(--brand-grey-750);
  clip-path: polygon(.4em 0%, calc(100% - .4em) 0%, 100% .4em, 100% calc(100% - .4em), calc(100% - .4em) 100%, .4em 100%, 0% calc(100% - .4em), 0% .4em);
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: background-color .3s;
  display: flex;
  position: relative;
}

.logo-grid_item:hover {
  background-color: var(--brand-grey-700);
}

.logo-item_icon {
  aspect-ratio: 1;
  width: 50%;
}

.logo-item_icon.is-wide {
  width: 70%;
}

.logo-item_partner-name {
  margin-bottom: var(--mapped-padding-xs);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
  overflow: hidden;
}

.logo-item-svg {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.globe-nav__counter {
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: .875em;
}

.globe-nav {
  z-index: 10;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: var(--mapped-surface-action);
  color: var(--mapped-text-on-action);
  bottom: 1em;
  right: calc(var(--globe-info-width)  + 2em);
  clip-path: polygon(.4em 0%, calc(100% - .4em) 0%, 100% .4em, 100% calc(100% - .4em), calc(100% - .4em) 100%, .4em 100%, 0% calc(100% - .4em), 0% .4em);
  border-radius: 0;
  justify-content: center;
  align-items: center;
  padding: .25em;
  font-family: Abc Monument Grotesk, Arial, sans-serif;
  display: flex;
  position: absolute;
}

.globe-marker {
  background-color: var(--mapped-surface-action);
  width: 2.5em;
  height: 2.5em;
  color: var(--mapped-icon-on-action);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  padding: .625em;
  display: flex;
  position: relative;
}

.globe-info__list-item-label {
  opacity: .6;
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: .75em;
}

.globe-container {
  background-color: var(--mapped-surface-default);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.globe-nav__button-icon {
  width: .75em;
}

.globe-nav__button {
  width: 2em;
  height: 2em;
  color: var(--mapped-icon-on-action);
  background-color: #0000;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.globe-info__list-item-h {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
}

.globe-info {
  z-index: 10;
  width: var(--globe-info-width);
  border: 1px solid var(--mapped-border-default);
  background-color: var(--brand-grey-700);
  color: var(--mapped-text-headings);
  clip-path: polygon(1em 0%, calc(100% - 1em) 0%, 100% 1em, 100% calc(100% - 1em), calc(100% - 1em) 100%, 1em 100%, 0% calc(100% - 1em), 0% 1em);
  border-radius: 0;
  position: absolute;
  top: 1em;
  bottom: 1em;
  right: 1em;
  box-shadow: 0 0 12px #0000001a;
}

.globe-close {
  z-index: 11;
  position: absolute;
  top: 1em;
  right: 1em;
}

.globe-info__list-item-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.globe-info__list-item-visual {
  aspect-ratio: 3 / 2;
  clip-path: polygon(.4em 0%, calc(100% - .4em) 0%, 100% .4em, 100% calc(100% - .4em), calc(100% - .4em) 100%, .4em 100%, 0% calc(100% - .4em), 0% .4em);
  border-radius: .75em;
  width: 100%;
  overflow: hidden;
}

.globe-info__list {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  position: absolute;
  inset: 0%;
  overflow: hidden auto;
}

.globe-info__collection {
  width: 100%;
  height: 100%;
}

.globe-info__list-item {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  scroll-snap-align: start;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 100%;
  padding: 2em;
  display: flex;
}

.globe-close__button {
  background-color: var(--brand-grey-100);
  width: 2.5em;
  height: 2.5em;
  color: var(--mapped-text-on-action);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.globe-info__list-item-text {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1em;
  display: flex;
}

.globe-reopen__icon {
  width: 1em;
}

.globe-reopen {
  z-index: 12;
  background-color: var(--brand-grey-700);
  height: 3em;
  color: var(--mapped-text-body);
  border: 1px solid #ffffff26;
  border-right-style: none;
  border-top-left-radius: .5em;
  border-bottom-left-radius: .5em;
  padding: 0 .5em;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

.globe-map {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.globe-close__icon {
  width: .625em;
}

.globe-info__list-item-link {
  color: inherit;
  text-decoration: none;
}

.globe-wrap {
  width: 100%;
  height: min(100vh, 100rem);
  position: relative;
  overflow: clip;
}

.globe-marker__icon {
  width: 100%;
}

.section_globe {
  border-bottom: 1px solid var(--mapped-border-default);
  background-color: var(--mapped-surface-default);
  color: var(--mapped-text-body);
}

.section_cta {
  background-color: var(--mapped-surface-default);
}

.section_cta.is-border-btm {
  z-index: 1;
  border-bottom: 1px solid var(--mapped-border-default);
  position: relative;
}

.cta-col_img {
  width: 100%;
  padding: var(--mapped-padding-xl) var(--mapped-padding-md);
  justify-content: center;
  align-items: center;
  display: flex;
}

.cta-col_img.is-height-100 {
  max-height: 100%;
}

.cta-img_container {
  object-fit: contain;
  clip-path: polygon(1em 0%, calc(100% - 1em) 0%, 100% 1em, 100% calc(100% - 1em), calc(100% - 1em) 100%, 1em 100%, 0% calc(100% - 1em), 0% 1em);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cta-col_form {
  width: 100%;
  padding: var(--mapped-padding-xl) var(--mapped-padding-md);
}

.cta-col_form.is-height-100 {
  max-height: 100%;
}

.cta-head {
  margin-bottom: var(--brand-scale-1100);
  grid-column-gap: var(--mapped-padding-sm);
  grid-row-gap: var(--mapped-padding-sm);
  flex-flow: column;
  display: flex;
}

.cta-field {
  border-style: none none solid;
  border-width: 1px;
  border-color: black black var(--mapped-border-default);
  background-color: #fff0;
}

.cta-field:active, .cta-field:focus {
  color: var(--mapped-text-headings);
  border-bottom-color: #fe5b2a66;
}

.cta-form {
  grid-column-gap: var(--mapped-padding-xs);
  grid-row-gap: var(--mapped-padding-xs);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.submit-button {
  display: none;
}

.cta-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.cta-btm {
  z-index: 1;
  background-color: var(--mapped-surface-dark);
  clip-path: polygon(0 0, 100% 0, 95.3% 100%, 4.7% 100%);
  height: 3.5em;
  position: relative;
}

.div-block {
  height: 50svh;
}

.footer-wrap {
  margin-top: -3.5em;
  position: relative;
  overflow: hidden;
}

.footer-wrap__dark {
  opacity: 0;
  pointer-events: none;
  background-color: #201d1d;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.footer-grid {
  padding-top: var(--mapped-padding-sm);
  border-right: 1px solid var(--mapped-border-default);
  border-left: 1px solid var(--mapped-border-default);
}

.footer-grid.is-padding-btm {
  border-bottom: 1px solid var(--mapped-border-default);
}

.footer-col {
  width: 100%;
  min-height: 22.5em;
  padding: var(--mapped-padding-lg) var(--mapped-padding-sm) var(--mapped-padding-sm);
  grid-column-gap: var(--mapped-padding-sm);
  grid-row-gap: var(--mapped-padding-sm);
  flex-flow: column;
  display: flex;
}

.footer-col.is-height-100 {
  max-height: 100%;
}

.footer-col.is-grid {
  grid-column-gap: var(--mapped-padding-sm);
  grid-row-gap: var(--mapped-padding-sm);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.footer-col.is-last {
  grid-column-gap: var(--mapped-padding-xs);
  grid-row-gap: var(--mapped-padding-xs);
  border-right-style: none;
  justify-content: space-between;
}

.footer-btm-col {
  width: 100%;
  padding: var(--mapped-padding-sm);
}

.footer-btm-col.is-height-100 {
  max-height: 100%;
}

.nav-logo_footer {
  max-width: 16em;
}

.footer-col_content {
  grid-column-gap: var(--mapped-padding-xs);
  grid-row-gap: var(--mapped-padding-xs);
  flex-flow: column;
  display: flex;
}

.footer-link-list {
  grid-column-gap: var(--mapped-padding-xxs);
  grid-row-gap: var(--mapped-padding-xxs);
  flex-flow: column;
  display: flex;
}

.footer-link {
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.footer-link.is-last {
  float: right;
}

.text_size-medium-m {
  color: var(--mapped-text-body);
  font-family: ABC Monument Grotesk, Arial, sans-serif;
  font-size: var(--type-paragraph-md-size);
  line-height: var(--type-paragraph-md-lh);
  letter-spacing: .01em;
  font-weight: 500;
}

.text_size-medium-m.is-white {
  color: var(--mapped-text-headings);
}

.text-field {
  border-style: none none solid;
  border-width: 1px;
  border-color: black black var(--mapped-border-default);
  color: var(--mapped-text-body);
  background-color: #fff0;
  padding: 0;
}

.submit-button-2 {
  display: none;
}

.footer-subscribe {
  grid-column-gap: var(--mapped-padding-xs);
  grid-row-gap: var(--mapped-padding-xs);
  flex-flow: column;
  display: flex;
}

.footer-form {
  margin-bottom: 0;
}

.footer-socials_wrap {
  grid-column-gap: var(--mapped-padding-xxs);
  grid-row-gap: var(--mapped-padding-xxs);
  display: flex;
}

.social-icon_wrap {
  position: relative;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  padding: .5em;
  display: flex;
  background-color: var(--mapped-border-default);
  color: var(--mapped-text-body);
  clip-path: polygon(.4em 0%, calc(100% - .4em) 0%, 100% .4em, 100% calc(100% - .4em), calc(100% - .4em) 100%, .4em 100%, 0% calc(100% - .4em), 0% .4em);
  transition: color 0.2s, background-color 0.2s;
}
.social-icon_wrap::before {
  content: '';
  position: absolute;
  inset: 1px;
  background-color: var(--mapped-surface-default);
  clip-path: polygon(.4em 0%, calc(100% - .4em) 0%, 100% .4em, 100% calc(100% - .4em), calc(100% - .4em) 100%, .4em 100%, 0% calc(100% - .4em), 0% .4em);
}
.social-icon_wrap > * {
  position: relative;
  z-index: 1;
}
.social-icon_wrap:hover {
  background-color: var(--mapped-surface-action);
  color: var(--mapped-surface-action);
}

.footer-logo {
  width: 12em;
}

.icon-embed-xsmall {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
}

.tools-colorer {
  mix-blend-mode: color;
  background-color: #18191b80;
  display: block;
  position: absolute;
  inset: 0%;
}

.chart-host {
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 20em;
  display: flex;
}

.button {
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
  outline-style: none;
  flex: 0 auto;
  align-self: flex-start;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  display: inline-grid;
  position: relative;
}

.button.is-big {
  align-self: auto;
  width: 100%;
}

.button__hover {
  pointer-events: none;
  color: var(--button-hover-color);
  z-index: 2;
  grid-area: 1 / 1;
  display: grid;
}

.button__text {
  text-align: center;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: var(--button-padding);
  z-index: 1;
  grid-area: 1 / 1;
  font-family: Abc Monument Grotesk, Arial, sans-serif;
  font-size: .75em;
  font-weight: 500;
}

.button__text.is-big {
  padding: var(--button-padding-big);
}

.button__bg {
  grid-area: 1 / 1;
  place-self: center;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  padding: 0;
}

.button__bg.is--hover {
  background-color: var(--button-hover-color-background);
}

.button__bg.is--default {
  background-color: var(--button-color-background);
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}

.button__default {
  pointer-events: none;
  color: var(--button-color);
  grid-area: 1 / 1;
  display: grid;
}

.case-card_link {
  z-index: 3;
  bottom: var(--mapped-padding-sm);
  right: var(--mapped-padding-sm);
  font-size: .7em;
  position: absolute;
}

.case-card_link-text {
  letter-spacing: .03em;
  text-transform: uppercase;
  font-family: Abc Monument Grotesk, Arial, sans-serif;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.1;
}

.logo-item_text-anim {
  will-change: transform;
  transition: transform .4s cubic-bezier(.625, .05, 0, 1);
  display: inline-block;
  transform: translateY(-100%);
}

.section_about {
  background-color: var(--mapped-surface-default);
  color: var(--mapped-text-body);
}

.product-card_description-wrap {
  grid-column-gap: var(--mapped-padding-xs);
  grid-row-gap: var(--mapped-padding-xs);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}


.red-dot {
  margin-top: var(--mapped-padding-xxs);
}

.div-block-2 {
  background-color: var(--mapped-surface-page);
}

.section_inner-hero {
  padding-top: var(--layout-nav-height);
  background-color: var(--mapped-surface-default);
  color: var(--mapped-text-body);
}

.inner-hero_heading-container {
  max-width: 60%;
  padding-right: var(--mapped-padding-sm);
  padding-left: var(--mapped-padding-sm);
  grid-column-gap: var(--mapped-padding-sm);
  grid-row-gap: var(--mapped-padding-sm);
  flex-flow: column;
  display: flex;
}

.section_about-kompozit {
  background-color: var(--mapped-surface-default);
  color: var(--mapped-text-body);
}

.about-kompozit_wraper {
  min-height: 100dvh;
  padding-top: var(--mapped-padding-md);
  padding-bottom: var(--mapped-padding-md);
  border-right: 1px solid var(--mapped-border-default);
  border-bottom: 1px solid var(--mapped-border-default);
  border-left: 1px solid var(--mapped-border-default);
  color: var(--mapped-text-body);
  background-image: url('../images/svr-closeup.webp');
  background-position: 50% 100%;
  background-size: cover;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.about-kompozit_wraper.is-none {
  padding-top: var(--mapped-padding-none);
  padding-bottom: var(--mapped-padding-none);
}

.about-kompozit_wraper.is-border-none {
  border: 1px #000;
}

.about-kompozit_wraper.is-small {
  padding-top: var(--mapped-padding-sm);
  padding-bottom: var(--mapped-padding-sm);
}

.about-kompozit_wraper.is-border-btn-none {
  border-bottom-style: none;
}

.kompozit-disclaimer-wrap {
  max-width: 16em;
  padding-left: var(--mapped-padding-sm);
  grid-column-gap: var(--mapped-padding-xs);
  grid-row-gap: var(--mapped-padding-xs);
  flex-flow: column;
  display: flex;
}

.fullscreen-scroller {
  background-color: var(--mapped-surface-default);
}

.section_story {
  background-color: var(--mapped-surface-default);
  color: var(--mapped-text-body);
}

.scroller_slides {
  height: var(--layout-section-viewport);
  border-right: 1px solid var(--mapped-border-default);
  border-bottom: 1px solid var(--mapped-border-default);
  border-left: 1px solid var(--mapped-border-default);
  color: var(--mapped-text-body);
}

.scroller_slides.is-none {
  padding-top: var(--mapped-padding-none);
  padding-bottom: var(--mapped-padding-none);
}

.scroller_slides.is-border-none {
  border: 1px #000;
}

.scroller_slides.is-small {
  padding-top: var(--mapped-padding-sm);
  padding-bottom: var(--mapped-padding-sm);
}

.scroller_slides.is-border-btn-none {
  border-bottom-style: none;
}

.scroller_text-content {
  grid-column-gap: var(--brand-scale-600);
  grid-row-gap: var(--brand-scale-600);
  flex-flow: column;
  max-width: 22em;
  display: flex;
}

.scroller_image-holder {
  width: 100%;
  height: 100%;
  padding: var(--mapped-padding-sm);
  position: absolute;
  inset: 0%;
}

.scroller_image-wrapper {
  border-right: 1px solid var(--mapped-border-default);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.scroller_image-wrapper.is-border-right {
  border-right: 1px solid var(--mapped-border-default);
}

.scroller_image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.scroller_text-content_wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.scroller_text-content_wrap.is-border-right {
  border-right: 1px solid var(--mapped-border-default);
}

/* ── Fullscreen scroller — много-слайдовая структура ────────────── */
/* .scroller_outer даёт бюджет скролла; сцена внутри пиннируется sticky */
.container.scroller_outer {
  height: calc(var(--layout-section-viewport) * 3);
}

/* Сцена пиннируется нативным sticky — плавно, ровно под навигацией */
.scroller_slides {
  position: sticky;
  top: var(--layout-nav-height);
}

.scroller_grid {
  grid-template-columns: 1fr 1fr;
  height: 100%;
  display: grid;
}

/* Правая колонка — маска. display:block обязателен: из старого каркаса
   на wrap висит display:flex, и он бы центрировал ленту по вертикали —
   тогда по центру оказывается средний слайд, а первый уезжает за маску.
   Высота — ровно в секцию, перелив ленты прячем. */
.scroller_text-content_wrap {
  display: block;
  height: var(--layout-section-viewport);
  position: relative;
  overflow: hidden;
}

/* Лента текстовых слайдов — высота = сумма слотов, сдвигается по вертикали */
.scroller_text-track {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Каждый слайд — слот высотой в секцию; текст по центру слота. Высота берётся
   из токена напрямую — без цепочки %-высот через absolute + flex. */
.scroller_slide-text {
  height: var(--layout-section-viewport);
  justify-content: center;
  align-items: center;
  display: flex;
}

/* Базовое состояние без JS — видна только первая картинка */
.scroller_image-holder:not(:first-child) {
  clip-path: inset(100% 0% 0% 0%);
}

/* Мобильный статичный скроллер — скрыт на desktop, показывается ≤479px */
.scroller_mobile { display: none; }

/* ── Section Technology (страница About) ─────────────────────────── */
.section_technology {
  background-color: var(--mapped-surface-default);
  border-bottom: 1px solid var(--mapped-border-default);
  color: var(--mapped-text-body);
}

/* Сцена — рамка (боковые бордеры) + контекст для absolute-карточек */
.tech_stage {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 6.25em;
  width: 100%;
  padding: 9.375em 1.875em 6.25em;
  border-left: 1px solid var(--mapped-border-default);
  border-right: 1px solid var(--mapped-border-default);
  display: flex;
}

/* Центральное изображение */
.tech_media {
  width: 26.75em;
  max-width: 100%;
}

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

/* Карточки-аннотации — спозиционированы по краям сцены */
.tech_card {
  flex-direction: column;
  gap: 1.8em;
  width: 22.375em;
  display: flex;
  position: absolute;
}

.tech_card.is-left {
  top: 9.375em;
  left: var(--mapped-padding-sm);
}

.tech_card.is-right {
  top: 50%;
  right: var(--mapped-padding-sm);
  width: 19.25em;
  transform: translateY(-50%);
}

.tech_card_text {
  color: var(--mapped-text-body-light);
  font-size: var(--type-paragraph-md-size);
  line-height: var(--type-paragraph-md-lh);
}

/* Указатель: оранжевый квадрат + линия к изображению */
.tech_card_pointer {
  height: 1px;
  background-color: var(--mapped-border-default);
  position: absolute;
  top: 0.7em;
}

/* квадраты на обоих концах линии */
.tech_card_pointer:before,
.tech_card_pointer:after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background-color: var(--mapped-surface-action);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.tech_card_pointer:before {
  left: 0;
}

.tech_card_pointer:after {
  right: 0;
}

/* левая карточка — линия от заголовка вправо к изображению */
.tech_card.is-left .tech_card_pointer {
  left: 9em;
  right: -6em;
}

/* правая карточка — линия слева от карточки, между заголовком и изображением */
.tech_card.is-right .tech_card_pointer {
  right: 105%;
  width: 6em;
}

/* Мини-таблица (левая карточка) */
.tech_table {
  grid-template-columns: auto auto auto;
  gap: 0.5em 1.5em;
  font-size: 0.625em;
  color: var(--mapped-text-body);
  display: grid;
}

.tech_table_cell.is-head {
  color: var(--mapped-text-headings);
  text-transform: uppercase;
  border-bottom: 1px solid var(--mapped-border-default);
  padding-bottom: 0.6em;
  font-weight: var(--brand-weight-medium);
}

/* Типоразмеры (правая карточка) */
.tech_specs {
  align-items: center;
  gap: 2em;
  font-size: 0.625em;
  color: var(--mapped-text-body);
  display: flex;
}

.tech_specs_values {
  gap: 1.5em;
  display: flex;
}

.div-block-3 {
  background-color: var(--mapped-icon-action);
  height: 100svh;
}

.heading {
  color: #fff;
}

.div-block-4 {
  padding-left: 151px;
  padding-right: 151px;
}

@media screen and (max-width: 991px) {
  .globe-nav {
    border-left-style: none;
    border-right-style: none;
    border-radius: 0;
    justify-content: space-between;
    align-items: center;
    padding: 1em 1.5em;
    position: relative;
    inset: auto;
  }

  .globe-info__list-item-h {
    font-size: 1.5em;
  }

  .globe-info {
    z-index: auto;
    width: 100%;
    box-shadow: none;
    border-style: solid none none;
    border-radius: 0;
    position: relative;
    inset: auto;
  }

  .globe-close {
    display: none;
  }

  .globe-info__list {
    scroll-snap-type: x mandatory;
    display: flex;
    position: relative;
    inset: auto;
    overflow: auto hidden;
  }

  .globe-info__list-item {
    scroll-snap-align: center;
    border-right: 1px solid #ffffff1a;
    flex: 0 0 80%;
    min-width: 80%;
    padding: 1.5em 1.5em 2em;
  }

  .globe-info__list-item-text {
    margin-bottom: 0;
  }

  .globe-reopen {
    display: none;
  }

  .globe-map {
    aspect-ratio: 1;
    flex: none;
    height: auto;
    position: relative;
    inset: auto;
  }

  .globe-wrap {
    flex-flow: column;
    height: auto;
    display: flex;
  }
}

@media screen and (max-width: 479px) {

  .container {
    padding-right: var(--mapped-padding-sm);
    padding-left: var(--mapped-padding-sm);
  }

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

  .content-grid > .grid-col {
    /* 1/-1 + auto + !important — форсируем 1 колонку даже для cells с inline
       grid-column (colStart/rowStart из Cell) — иначе они не сворачиваются. */
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    /* Generic row-gap для ВСЕХ content-grid cells на мобилке (case-card,
       product-cells, tech-feature и т.д.). mapped-padding-sm вместо 2em. */
    grid-row-gap: var(--mapped-padding-sm);
  }

  .content-grid_3-col {
    grid-template-columns: 1fr;
  }

  .card_wrap {
    border-bottom: 1px solid var(--mapped-border-default);
    border-right-style: none;
  }

  .nav_item, .nav_item.is-border {
    display: none;
  }

  .nav-container {
    padding-right: var(--mapped-padding-sm);
    padding-left: var(--mapped-padding-sm);
  }

  .content-grid_2-col, .content-grid_2-col.is-border-btm {
    grid-template-columns: 1fr;
  }

  .card_content-big, .card_content-big.is-border-right {
    height: 22em;
    padding: var(--mapped-padding-md) var(--mapped-padding-sm);
  }

  .product-card_title {
    padding-top: var(--mapped-padding-md);
    padding-bottom: var(--mapped-padding-md);
    grid-column-gap: var(--mapped-padding-md);
    grid-row-gap: var(--mapped-padding-md);
    grid-template-columns: 1fr;
  }

  .product-card_preview_background {
    aspect-ratio: auto;
    padding-right: var(--mapped-padding-sm);
    padding-left: var(--mapped-padding-sm);
  }

  .product-card_preview {
    height: 9em;
  }

  .card_info-block-big {
    grid-row-gap: var(--brand-scale-900);
  }

  .pattern-container {
    height: 6em;
  }

  .detail-img_container {
    height: 12em;
  }

  .tool-detail-img {
    object-fit: contain;
  }

  .product-tool-video {
    aspect-ratio: auto;
  }

  .case-card_item {
    padding: var(--mapped-padding-lg) var(--mapped-padding-sm);
    justify-content: left;
  }

  .case-card_item.is-border-r-b {
    padding: var(--mapped-padding-md) var(--mapped-padding-sm);
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }

  .case-card_item.is-border-btm {
    padding: var(--mapped-padding-md) var(--mapped-padding-sm);
    justify-content: flex-start;
    align-items: center;
  }

  .case-card_title {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .case-cards_grid {
    grid-template-columns: 1fr;
  }

  .case-card_description {
    position: static;
  }

  /* Дата скрыта на мобилке (per user) */
  .case-card_date {
    display: none;
  }

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

  .globe-info__list-item-visual {
    border-radius: .5em;
  }

  .globe-info__list-item {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
  }

  .cta-form {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .cta-btm {
    height: 1.5em;
  }

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

  .footer-col {
    min-height: 13em;
    padding-top: var(--mapped-padding-md);
    border-right-style: none;
  }

  .footer-col.is-grid, .footer-col.is-last {
    min-height: 13em;
  }

  /* Первый footer-col (логотип) — больше воздуха сверху */
  .footer-col:first-child {
    padding-top: 6em;
  }

  /* footer bottom columns: убрать нижний паддинг (стопка), вернуть у последней */
  .footer-btm-col {
    width: 100%;
    padding: var(--mapped-padding-sm) var(--mapped-padding-sm) 0;
  }
  .footer-btm-col.is-last {
    padding-bottom: var(--mapped-padding-sm);
  }

  .footer-socials_wrap {
    padding-bottom: var(--mapped-padding-sm);
  }

  .social-icon_wrap {
    width: 4em;
    height: 4em;
  }

  /* globe nav (единственная кнопка-навигация в globe) */
  .globe-nav {
    margin: 1em var(--mapped-padding-sm);
  }

  .footer {
    border-bottom: 1px solid var(--mapped-border-default);
  }

  .footer-link.is-last {
    float: left;
  }

  .cta-col_img,
  .cta-col_form {
    padding: var(--mapped-padding-md) var(--mapped-padding-sm);
  }


  .case-card_link {
    position: static;
  }

  .scroller_image-wrapper, .scroller_image-wrapper.is-border-right, .scroller_text-content_wrap, .scroller_text-content_wrap.is-border-right {
    height: 30em;
  }

  .inner-hero_heading-container {
    max-width: 100%;
  }

  .card_info {
    max-width: 90%;
  }

  .feature-list_item {
    padding: var(--mapped-padding-md) var(--mapped-padding-sm);
    flex-direction: column;
    /* base align-items:center в column центрировал бы содержимое по горизонтали —
       выравниваем влево (дизайн левовыровненный). На has-description (grid, спец.
       0,2,0) не влияет — там своё align-items. */
    align-items: flex-start;
    grid-row-gap: var(--brand-scale-800);
  }

  /* Fullscreen scroller → статичные блоки: прячем пинённую сцену, бюджет
     скролла (3 экрана) сжимаем, показываем .scroller_mobile (image+text ×3). */
  .container.scroller_outer { height: auto; }
  .scroller_slides { display: none; }
  .scroller_mobile {
    display: block;
    border-right: 1px solid var(--mapped-border-default);
    border-left: 1px solid var(--mapped-border-default);
  }
  .scroller_mobile-slide {
    border-bottom: 1px solid var(--mapped-border-default);
  }
  .scroller_mobile-image {
    width: 100%;
    height: 18em;
    border-bottom: 1px solid var(--mapped-border-default);
  }
  .scroller_mobile-text {
    padding: var(--mapped-padding-md) var(--mapped-padding-sm);
  }

  .about-kompozit_wraper {
    min-height: 18em;
  }

  .tech_stage {
    padding: var(--mapped-padding-md) var(--mapped-padding-sm);
    gap: 4em;
  }
  .tech_media {
    width: 100%;
  }
  .tech_card {
    position: static;
    width: 100%;
  }
  /* is-right на десктопе центрируется transform:translateY(-50%) — на static
     (мобилка) transform остаётся и сдвигает карточку вверх, перекрывая
     gap/margin родителя. Сбрасываем transform → gap 4em работает (margin у
     is-left больше не нужен). width компаунд (19.25em) тоже сбрасываем. */
  .tech_card.is-right {
    transform: none;
    width: 100%;
  }
  .tech_card_pointer { display: none; }
  /* btn-big только внутри tech_stage — без паддинга на мобилке */
  .tech_stage .btn-big_container { padding: 0; }
}








@font-face {
  font-family: 'Abc Monument Grotesk';
  src: url('../fonts/ABC-Monument-Grotesk.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ── Grid placement (converted from Webflow grid-node rules) ── */
.cta-field_full { grid-area: span 1 / span 2 / span 1 / span 2; }
.grid-col.is-stretch { place-self: stretch start; }
.footer-btm-col.is-last { justify-self: end; }

@media screen and (max-width: 479px) {
  .cta-field { grid-area: span 1 / span 2 / span 1 / span 2; }
  .is-mobile-first { order: -9999; }
  .footer-btm-col.is-last { justify-self: auto; }
}