/* Scoped from tmp/team_module (9).html — класс корня .our-team */

  /* === About-us page overrides (этот CSS грузится только на about-us) === */
  .site-header__hero-white-wedge,
  .site-header__slant-teal-band {
    display: none !important;
  }
  .site-header__page-shell {
    clip-path: none !important;
  }
  .section-services-wrap {
    margin-top: -20px !important;
    position: relative;
    z-index: 2;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
  }
  .section-services-wrap .simple-text p {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: clamp(1.4rem, 3.5vw, 2rem) !important;
  }
  .section-services-wrap .hover-product-cards__title {
    line-height: 1.2 !important;
    padding-bottom: 0.2em;
  }
  .section-services-wrap .inner-header-low + .simple-text + .inner-header-low,
  .section-services-wrap .inner-header-low + .simple-text + .inner-header-low + .simple-text {
    text-align: center;
  }
  .section-services-wrap .inner-header-low + .simple-text + .inner-header-low + .simple-text p {
    text-align: center;
  }
  .cf-character {
    bottom: -30px !important;
  }

  /* ========== ДИАГОНАЛЬНЫЕ РАЗДЕЛИТЕЛИ ==========
     Каждый разделитель — это цветной треугольник, лежащий ПОВЕРХ соседнего
     блока через отрицательный margin. Прозрачная часть позволяет видеть
     картинку соседнего блока, продолжая её визуально. */
  .our-team .divider{
    width: 100%;
    line-height: 0;
    display: block;
    position: relative;
    z-index: 6;
    pointer-events: none;
  }
  .our-team .divider--top{
    display: none;
  }
  .our-team .divider--bottom{
    display: none;
  }

  /* Full-bleed на странице: без обёртки .wrap. Палитра дублируется здесь; inline на .our-team
     переопределяет из our_team_defaults.py — если подгрузка inline ломается, остаются эти hex. */
  .our-team{
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden;
    background: #0E0E0E;
    --c-teal: #3FA08C;
    --c-teal-2: #3FA08C;
    --c-black: #0E0E0E;
    --c-white: #FFFFFF;
    --c-orange: #FF7A1A;
    --c-red: #C9322C;
    /* Цепочки как в :root team_module — без inline всё равно оранжевые/белые заголовки и текст */
    --who-title-color: var(--c-orange);
    --who-text-color: var(--c-white);
    --why-title-color: var(--c-orange);
    --why-text-color: var(--c-white);
    --core-title-color: var(--c-white);
    --member-name-color: var(--c-white);
    --member-desc-color: var(--c-white);
    --shape2-bg: var(--c-black);
    --shape3-bg: var(--c-teal-2);
    --divider-top-color: var(--c-teal);
    --divider-bottom-color: var(--c-black);
    --art-title-color: #ffffff;
    --art-text-color: #ffffff;
  }

  /* Как * { margin:0 } в tmp/team_module (9).html — иначе site.css / UA дают h2/p лишние отступы. */
  .our-team :where(h1, h2, h3, h4, p) {
    margin: 0;
  }

  .our-team .row{ width:100%; position:relative; }
  .our-team .row-inner{
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--pad-y) var(--pad-x);
    position: relative;
  }

  /* Hero-stack — общая обёртка для hero-блока И row--teal,
     которая держит фоновую hero-картинку. Так картинка не разрывается. */
  .our-team .hero-stack{
    position: relative;
    background: #0E0E0E;
  }

  .our-team .row--hero{
    background: #ffffff;
  }
  .our-team .row--hero .row-inner{
    padding: calc(var(--hero-pad-y) + var(--divider-top-height) * var(--divider-top-enabled)) var(--pad-x) var(--hero-pad-y);
  }

  .our-team .block-title{
    font-family: var(--font-display);
    display: inline-flex; align-items: center; gap:10px; line-height:1;
    text-transform: uppercase; letter-spacing: 0.5px;
  }
  .our-team .block-title .slashes{ color: var(--c-orange, #FF7A1A); margin-right:4px; }
  /* Огоньки. Если задана картинка через --fire-*-image — она показывается фоном.
     Иначе показывается эмодзи 🔥 (содержимое .fire-emoji). */
  .our-team .block-title .fire{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }
  .our-team .block-title .fire-emoji{
    display: inline-block;
    transform: translateY(-2px);
    font-size: 0.85em;
  }
  /* Когда картинка задана — прячем эмодзи и показываем фон */
  .our-team .fire-who[data-img="1"] .fire-emoji,
  .our-team .fire-why[data-img="1"] .fire-emoji{ display: none; }

  .our-team .fire-who{
    width:  var(--fire-who-size);
    height: var(--fire-who-size);
    background-image: var(--fire-who-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(var(--fire-who-x), var(--fire-who-y));
  }
  .our-team .fire-why{
    width:  var(--fire-why-size);
    height: var(--fire-why-size);
    background-image: var(--fire-why-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(var(--fire-why-x), var(--fire-why-y));
  }
  /* Когда картинки нет (none) — отменяем фиксированные размеры, чтобы эмодзи нормально отображался */
  .our-team .fire-who[data-img="0"],
  .our-team .fire-why[data-img="0"]{
    width: auto;
    height: auto;
    background-image: none !important;
  }

  .our-team .who-we-are{
    text-align: var(--txt-who-title-align);
    transform: translate(var(--txt-who-title-x), var(--txt-who-title-y));
  }
  .our-team .who-we-are .block-title{
    font-size: var(--who-title-size);
    font-weight: var(--who-title-weight);
    color: var(--who-title-color);
  }
  .our-team .who-we-are p{
    font-family: var(--font-body);
    font-size: var(--who-text-size);
    font-weight: var(--who-text-weight);
    color: var(--who-text-color);
    line-height: 1.45;
    margin-top: 8px;
    margin-bottom: 0;
    text-align: var(--txt-who-text-align);
    transform: translate(var(--txt-who-text-x), var(--txt-who-text-y));
  }

  .our-team .why-outsourcing{
    margin-top: var(--hero-gap);
    text-align: var(--txt-why-title-align);
    transform: translate(var(--txt-why-title-x), var(--txt-why-title-y));
  }
  .our-team .why-outsourcing .block-title{
    font-size: var(--why-title-size);
    font-weight: var(--why-title-weight);
    color: var(--why-title-color);
  }
  .our-team .why-outsourcing .block-title .fire-left{ margin-right: 6px; }
  .our-team .why-outsourcing p{
    font-family: var(--font-body);
    font-size: var(--why-text-size);
    font-weight: var(--why-text-weight);
    color: var(--why-text-color);
    line-height: 1.45;
    margin-top: 8px;
    margin-bottom: 0;
    text-align: var(--txt-why-text-align);
    transform: translate(var(--txt-why-text-x), var(--txt-why-text-y));
  }

  /* Бирюзовая полоса с заголовком OUR CORE TEAM и Max-фигурой.
     Блок прозрачный — фоновую hero-картинку даёт обёртка .hero-stack.
     Псевдоэлемент рисует наклоняемый бирюзовый цвет поверх картинки. */
  .our-team .row--teal{
    position: relative;
    background: transparent;
    padding-top: var(--core-extra-h);
    padding-bottom: var(--core-extra-h);
  }
  .our-team .row--teal::before{
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-teal, #3FA08C);
    transform:
      rotate(var(--core-rotate))
      skew(var(--core-skew-x), var(--core-skew-y));
    transform-origin: center center;
    z-index: 0;
    pointer-events: none;
  }
  .our-team .row--teal .row-inner{
    padding: var(--row-teal-pad-y) var(--pad-x);
    position: relative;
  }

  .our-team .core-team-header{
    font-family: var(--font-display);
    font-size: var(--core-title-size);
    font-weight: var(--core-title-weight);
    color: var(--core-title-color);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: var(--core-title-mb);
    text-align: var(--txt-core-title-align);
    transform: translate(var(--txt-core-title-x), var(--txt-core-title-y));
  }
  .our-team .core-team-header .slashes{ color: var(--core-title-color); }

  .our-team .member{
    display: grid;
    grid-template-columns: var(--avatar-size) 1fr;
    gap: var(--member-gap);
    align-items: center;
  }
  .our-team .member.right{ grid-template-columns: 1fr var(--avatar-size); }

  .our-team .avatar{
    width: var(--avatar-size); height: var(--avatar-size);
    border-radius: var(--avatar-radius);
    background-size: cover; background-position: center;
    border: var(--avatar-border-width) solid var(--avatar-border-color);
  }
  .our-team .avatar--max{  background-image: var(--photo-max); }
  .our-team .avatar--lavr{ background-image: var(--photo-lavr); }
  .our-team .avatar--alex{ background-image: var(--photo-alex); }

  .our-team .avatar--tint-teal{
    background-color: var(--c-teal, #3FA08C);
    background-blend-mode: var(--avatar-tint-strength);
  }
  .our-team .avatar--tint-teal2{
    background-color: var(--c-teal-2, #3FA08C);
    background-blend-mode: var(--avatar-tint-strength);
  }

  .our-team .member-info h3{
    font-family: var(--font-names);
    font-size: var(--member-name-size);
    font-weight: var(--member-name-weight);
    color: var(--member-name-color);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: var(--member-name-mb);
  }
  .our-team .member-info p{
    font-family: var(--font-body);
    font-size: var(--member-desc-size);
    font-weight: var(--member-desc-weight);
    color: var(--member-desc-color);
    line-height: 1.45;
  }

  /* Индивидуальные позиции и выравнивание для текстов каждого участника */
  .our-team .shape-1 .member-info h3{
    text-align: var(--txt-max-name-align);
    transform: translate(var(--txt-max-name-x), var(--txt-max-name-y));
  }
  .our-team .shape-1 .member-info p{
    text-align: var(--txt-max-desc-align);
    transform: translate(var(--txt-max-desc-x), var(--txt-max-desc-y));
  }
  .our-team .shape-2 .member-info h3{
    text-align: var(--txt-lavr-name-align);
    transform: translate(var(--txt-lavr-name-x), var(--txt-lavr-name-y));
  }
  .our-team .shape-2 .member-info p{
    text-align: var(--txt-lavr-desc-align);
    transform: translate(var(--txt-lavr-desc-x), var(--txt-lavr-desc-y));
  }
  .our-team .shape-3 .member-info h3{
    text-align: var(--txt-alex-name-align);
    transform: translate(var(--txt-alex-name-x), var(--txt-alex-name-y));
  }
  .our-team .shape-3 .member-info p{
    text-align: var(--txt-alex-desc-align);
    transform: translate(var(--txt-alex-desc-x), var(--txt-alex-desc-y));
  }

  .our-team .text-left   .member-info{ text-align: left; }
  .our-team .text-center .member-info{ text-align: center; }
  .our-team .text-right  .member-info{ text-align: right; }

  .our-team .logo-badge{
    position: absolute;
    top: var(--logo-top);
    right: max(var(--logo-right-offset), calc((100% - var(--content-width)) / 2 + var(--logo-right-offset)));
    width: var(--logo-size); height: var(--logo-size);
    border-radius: 50%;
    background: var(--c-red, #C9322C);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--logo-shadow, none);
    border: var(--logo-border-width) solid var(--logo-border-color);
    z-index: 5;
    overflow: hidden;
  }
  .our-team .logo-badge svg, .our-team .logo-badge img{ width: 60%; height: 60%; object-fit: contain; }
  .our-team .logo-badge.logo-img-mode{ padding: 0; }
  .our-team .logo-badge.logo-img-mode img{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

  .our-team .row--black{ background: transparent; position: relative; overflow: visible; }
  .our-team .row--black .row-inner{ padding: 0 var(--pad-x); }

  .our-team .row--teal-2{ background: transparent; position: relative; }
  .our-team .row--teal-2 .row-inner{ padding: 0 var(--pad-x); }

  /* ========== ФИГУРЫ-ПАРАЛЛЕЛОГРАММЫ КАРТОЧЕК ==========
     Каждая фигура — позиционируемый блок с фоном и clip-path.
     Внутри — обычный layout с аватаром и текстом. */
  .our-team .member-shape{
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--shape-radius);
    box-sizing: border-box;
  }
  .our-team .member-shape .member-inner{
    position: relative;
    z-index: 2;
    width: 100%;
  }

  /* ========== СВОБОДНЫЕ АВАТАРЫ ==========
     Аватары больше не привязаны к фигурам. Они позиционируются абсолютно
     относительно row-inner — то есть НИКОГДА не выходят за пределы 1180px. */
  .our-team .row--teal .row-inner,
  .our-team .row--black .row-inner,
  .our-team .row--teal-2 .row-inner{
    position: relative;
  }
  .our-team .free-avatar{
    position: absolute;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: var(--avatar-radius);
    background-size: cover;
    background-position: center;
    border: var(--avatar-border-width) solid var(--avatar-border-color);
  }

  /* Max */
  .our-team .free-avatar--max{
    background-image: var(--photo-max);
    left:  var(--av-max-x);
    right: var(--av-max-right);
    top:   var(--av-max-y);
    z-index: var(--av-max-z);
    display: var(--av-max-display, block);
  }
  .our-team .free-avatar--max.tinted{
    background-color: #1a1a1a;
    background-blend-mode: var(--avatar-tint-strength);
  }

  /* Lavr */
  .our-team .free-avatar--lavr{
    background-image: var(--photo-lavr);
    background-color: #1a1a1a;
    background-blend-mode: var(--avatar-tint-strength);
    left:  var(--av-lavr-x);
    right: var(--av-lavr-right);
    top:   var(--av-lavr-y);
    z-index: var(--av-lavr-z);
    display: var(--av-lavr-display, block);
  }

  /* Alex */
  .our-team .free-avatar--alex{
    background-image: var(--photo-alex);
    left:  var(--av-alex-x);
    right: var(--av-alex-right);
    top:   var(--av-alex-y);
    z-index: var(--av-alex-z);
    display: var(--av-alex-display, block);
  }
  .our-team .free-avatar--alex.tinted{
    background-color: var(--c-teal-2, #3FA08C);
    background-blend-mode: var(--avatar-tint-strength);
  }

  /* ----- ОБЩАЯ БАЗА ВСЕХ ФИГУР ----- */
  .our-team .shape-1, .our-team .shape-2, .our-team .shape-3{
    /* Привязка по умолчанию задаётся отдельно через --shape-N-align (см. ниже),
       но классы .align-left/-center/-right имеют приоритет. */
  }

  /* ----- КАРТОЧКА 1 (MAX) — без фона, только контейнер для текста ----- */
  .our-team .shape-1{
    background: transparent;
    width: var(--shape1-width);
    min-height: var(--shape1-min-height);
    margin-top: var(--shape1-overlap);
    padding: var(--shape1-pad-y) var(--shape1-pad-r) var(--shape1-pad-y) var(--shape1-pad-l);
    /* По умолчанию слева */
    margin-left: var(--shape1-offset-x);
    margin-right: auto;
    /* Без clip-path — фон убран, срезать нечего */
  }
  .our-team .shape-1.align-right{
    margin-left: auto;
    margin-right: var(--shape1-offset-x);
  }
  .our-team .shape-1.align-center{
    margin-left: auto;
    margin-right: auto;
  }

  /* ----- КАРТОЧКА 2 (LAVR) ----- */
  .our-team .shape-2{
    background: var(--shape2-bg);
    width: calc(60% + var(--pad-x));
    min-height: var(--shape2-min-height);
    margin-top: var(--shape2-overlap);
    margin-left: calc(-1 * var(--pad-x));
    margin-right: auto;
    padding: var(--shape2-pad-y) var(--shape2-pad-r) var(--shape2-pad-y) calc(var(--pad-x) + var(--shape2-pad-l));
    /* Без скоса — ровные края */
    clip-path: none;
  }
  .our-team .shape-2.align-left{
    margin-left: var(--shape2-offset-x);
    margin-right: auto;
  }
  .our-team .shape-2.align-center{
    margin-left: auto;
    margin-right: auto;
  }

  /* ----- КАРТОЧКА 3 (ALEX) ----- */
  .our-team .shape-3{
    background: var(--shape3-bg);
    width: calc(75% + var(--pad-x));
    min-height: var(--shape3-min-height);
    margin-top: var(--shape3-overlap);
    padding: var(--shape3-pad-y) calc(var(--pad-x) + var(--shape3-pad-r)) var(--shape3-pad-y) var(--shape3-pad-l);
    margin-left: auto;
    margin-right: calc(-1 * var(--pad-x));
    /* Скос слева — только верхний левый угол */
    clip-path: polygon(
      var(--shape-skew) 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
  .our-team .shape-3.align-right{
    margin-left: auto;
    margin-right: calc(-1 * var(--pad-x));
  }
  .our-team .shape-3.align-center{
    margin-left: auto;
    margin-right: auto;
  }

  /* ========== АРТ-БЛОК (картинка + текст, между Alex и нижним разделителем) ========== */
  .our-team .row--art{
    background:
      linear-gradient(rgba(0,0,0,var(--art-bg-dim)), rgba(0,0,0,var(--art-bg-dim))),
      var(--art-bg-image);
    background-repeat: no-repeat;
    background-size: var(--art-bg-size, cover);
    background-position: var(--art-bg-pos-x, center) var(--art-bg-pos-y, center);
    min-height: var(--art-min-height);
    display: flex;
    align-items: center;
  }
  .our-team .row--art .row-inner{
    padding: var(--art-pad-y) var(--pad-x) calc(var(--art-pad-y) + var(--divider-bottom-height) * var(--divider-bottom-enabled));
    width: 100%;
  }
  .our-team .art-content{
    max-width: var(--art-text-max-width);
    text-align: var(--art-text-align);
    margin-left: 0;
  }
  .our-team .row--art h2{
    font-family: var(--font-display);
    font-size:   var(--art-title-size);
    font-weight: var(--art-title-weight);
    color:       var(--art-title-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: var(--art-title-mb);
    line-height: 1.1;
  }
  .our-team .row--art p{
    font-family: var(--font-body);
    font-size:   var(--art-text-size);
    font-weight: var(--art-text-weight);
    color:       var(--art-text-color);
    line-height: var(--art-text-line);
    margin: 0;
  }


  /* ========== МОБИЛЬНАЯ АДАПТАЦИЯ ========== */
  @media (max-width: 600px) {
    .our-team .free-avatar {
      display: none !important;
    }
  }