@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

body {
  font-family: 'Google Sans', sans-serif;

  &.menu-open {
    overflow: hidden;
  }
}

:root {
  --bg: #F1F1F1;
  --white: #FFFFFF;
  --white-50: rgba(255, 255, 255, 0.5);
  --white-10: rgba(255, 255, 255, 0.1);
  --black: #000000;
  --black-50: rgba(0, 0, 0, 0.5);
  --black-10: rgba(0, 0, 0, 0.1);
  --gray: var(--black-10);

  --blue: #47A0FF;
  --blue-light: #E6F0FF;
  --blue-dark: #0056B3;
  --blue-hover: #0056B3;

  --red: #D74A4A;
  --red-light: #FFE6E6;
  --red-dark: #A30000;
  --red-hover: #A30000;

  /* Padding and margins */

  --p-4: 4px;
  --p-8: 8px;
  --p-10: 10px;
  --p-12: 12px;
  --p-16: 16px;
  --p-20: 20px;
  --p-24: 24px;
  --p-32: 32px;
  --p-40: 40px;
  --p-48: 48px;
  --p-56: 56px;
  --p-64: 64px;

  /* Font size */

  --f-12: 12px;
  --f-14: 14px;
  --f-16: 16px;
  --f-18: 18px;
  --f-20: 20px;
  --f-24: 24px;
  --f-28: 28px;
  --f-32: 32px;
  --f-36: 36px;
  --f-40: 40px;
  --f-48: 48px;
  --f-56: 56px;
  --f-64: 64px;

  /* Supportive variables */

  --r-4: 4px;
  --r-8: 8px;
  --r-16: 16px;
  --r-24: 24px;
  --r-32: 32px;
  --r-1000: 1000px;

  /* transitions */
  --trs: all 0.3s ease-in-out;

  @media (max-width: 1200px) {
    --p-4: 2px;
    --p-8: 6px;
    --p-10: 8px;
    --p-12: 10px;
    --p-16: 14px;
    --p-20: 16px;
    --p-24: 20px;
    --p-32: 24px;
    --p-40: 30px;
    --p-48: 32px;
    --p-56: 40px;
    --p-64: 48px;

    --f-12: 10px;
    --f-14: 12px;
    --f-16: 14px;
    --f-18: 16px;
    --f-20: 18px;
    --f-24: 20px;
    --f-28: 24px;
    --f-32: 28px;
    --f-36: 30px;
    --f-40: 32px;
    --f-48: 36px;
    --f-56: 40px;
    --f-64: 48px;

    --r-4: 2px;
    --r-8: 6px;
    --r-16: 14px;
    --r-24: 20px;
    --r-32: 0px;
  }

  @media (max-width: 767px) {
    --f-12: 10px;
    --f-14: 12px;
    --f-16: 14px;
    --f-18: 14px;
    --f-20: 16px;
    --f-24: 18px;
    --f-28: 20px;
    --f-32: 22px;
    --f-36: 24px;
    --f-40: 26px;
    --f-48: 28px;
    --f-56: 36px;
    --f-64: 40px;

    --p-12: 10px;
    --p-16: 12px;
    --p-20: 14px;
    --p-24: 16px;
    --p-32: 24px;
    --p-40: 32px;
    --p-48: 40px;
    --p-56: 40px;
    --p-64: 40px;
  }
}

/* reset */

@layer reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100%;
    margin: 0;
    text-rendering: optimizeSpeed;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  button {
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* settings */

@layer settings {


  ::-webkit-scrollbar {
    width: 10px;
    height: 7px;
    background-color: var(--white);
    border-radius: var(--r-1000);
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-track-piece {
    background-color: var(--white);
    box-shadow: inset 0 0 0 10px var(--white);
    border-radius: var(--r-1000);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--blue);
    border-radius: var(--r-1000);
  }

  ::-webkit-scrollbar-corner {
    background-color: var(--white);
  }

  body {
    background-color: var(--bg);
    font-size: var(--f-16);
    line-height: 1.5;
    color: var(--black);
  }

  p {
    margin: 0;
  }

  img {
    object-fit: cover;
    max-width: 100%;
    height: auto;
  }

  .main {
    margin: 0 auto;
    max-width: 1348px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 100px;
    overflow: clip;

    @media (max-width: 1200px) {
      gap: 40px;
    }
  }

  .wrap {
    width: 100%;
  }

  h2 {
    font-weight: normal;
    line-height: 1.1;
    font-size: var(--f-48);
    font-weight: 500;
    text-wrap: balance;
  }

  h3 {
    font-size: var(--f-20);
    text-wrap: balance;
    font-weight: normal;
    line-height: 1.4;
  }

  blockquote {
    background-color: var(--white);
    border-radius: var(--r-16);
    padding: var(--p-16);
    padding-left: calc(var(--p-16) * 5);
    background-image: url(../img/ic-info.svg);
    background-repeat: no-repeat;
    background-position: var(--p-16) var(--p-16);
    background-attachment: local;
    text-wrap: balance;
    font-size: var(--f-18);
    color: var(--black);

    @media (max-width: 767px) {
      background-size: 40px;
    }
  }

  .button {
    background-color: var(--blue);
    color: var(--white);
    padding: var(--p-16);
    border-radius: var(--r-8);
    display: flex;
    align-items: start;
    justify-content: space-between;
    transition: var(--trs);

    &:hover {
      background-color: var(--blue-hover);
    }
  }

  .link {
    color: var(--blue);
    text-decoration: underline;
    transition: var(--trs);

    &:hover {
      opacity: 0.7;
    }
  }

  .balance {
    text-wrap: balance;
  }

  .gray-text {
    color: var(--black-50);
  }

  .accent-text {
    color: var(--blue);
  }

  .large-text {
    font-size: var(--f-24);
    line-height: 1.30;
  }
}

/* header */

@layer header {
  .header {
    margin-bottom: var(--p-24);

    @media (max-width: 767px) {
      margin: var(--p-16) 0;
    }
  }

  .header__topline {
    padding: var(--p-8) 0;
    color: var(--white);
    background-image: url('../img/bg-pattern-blue.jpg');
    font-size: var(--f-14);
    margin-bottom: var(--p-16);

    & svg {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
    }
  }

  .header__topline--left {
    padding-left: var(--p-64);

    @media (max-width: 767.98px) {
      display: none;
    }
  }

  .header__desctiption {}

  .header__email {
    color: var(--white);
    text-decoration: underline;
    transition: var(--trs);

    &:hover {
      opacity: 0.7;
    }
  }

  .header__topline--right {}

  .justify-content-end {}

  .header__main {}

  .header__row {
    @media (max-width: 1199.98px) {
      gap: var(--p-16);
    }
  }

  .header__logo {
    height: 62px;
    width: 150px;
    position: relative;

    @media (max-width: 767px) {
      height: 50px;
      width: 120px;
    }

    & img {
      width: 150px;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  .header__menu {
    @media (max-width: 1199.98px) {
      display: none;
    }

    & ul {
      list-style: none;
      display: flex;
      gap: var(--p-32);

      & li {
        position: relative;
        transition: var(--trs);
        padding: var(--p-8) 0;
        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: calc(var(--p-16) * -1);
          width: 5px;
          height: 5px;
          background-color: var(--gray);
          border-radius: var(--r-1000);
          transform: translate(-50%, -50%);
          transition: var(--trs);
        }

        &:first-child::before {
          display: none;
        }

        & a {
          text-decoration: inherit;
          display: block;
          width: 100%;
          height: 100%;
          color: inherit;
        }

        &:hover {
          color: var(--blue);
          /* border-top-color: var(--blue); */
          border-bottom-color: var(--blue);
        }
      }
    }
  }

  .header__social {
    @media (max-width: 1199.98px) {
      flex: 1 0 auto;
      justify-content: flex-end;
    }

    @media (max-width: 767.98px) {
      display: none;
    }
  }

  .header__phone {
    position: relative;
    font-size: var(--f-20);
    font-weight: bold;
    line-height: 1.4;
  }

  .header__phone--descipt {
    display: block;
    position: absolute;
    top: 100%;
    font-size: var(--f-14);
    color: var(--black-50);
    font-weight: normal;
  }

  .header__max {
    width: 100px;
  }

  .header__users {
    @media (max-width: 1199.98px) {
      display: none;
    }
  }

  .header__users--item {
    width: 36px;
    height: 36px;
    border-radius: var(--r-1000);
    border: 2px solid var(--white);
    overflow: hidden;
    margin-left: -10px;

    & img {
      width: 100%;
      height: 100%;
    }

    &:nth-child(1) {
      margin-left: 0;
      z-index: 3;
    }

    &:nth-child(2) {
      z-index: 2;
    }

    &:nth-child(3) {
      z-index: 1;
      border-color: var(--gray);
    }

  }

  .header__burger {
    display: none;

    @media (max-width: 1199.98px) {
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      border: 0;
      border-radius: var(--r-16);
      background-color: var(--white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      color: var(--black);
      margin-left: auto;

      & span {
        width: 22px;
        height: 2px;
        border-radius: var(--r-1000);
        background-color: currentColor;
        display: block;
      }
    }
  }

  .mobile-menu {
    display: none;

    @media (max-width: 1199.98px) {
      position: fixed;
      inset: var(--p-8);
      z-index: 100;
      display: flex;
      flex-direction: column;
      gap: var(--p-24);
      padding: var(--p-20);
      border-radius: var(--r-24);
      background-color: var(--white);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-12px);
      transition: var(--trs);
      overflow-y: auto;

      &.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
      }
    }
  }

  .mobile-menu__head {
    @media (max-width: 1199.98px) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--p-16);
    }
  }

  .mobile-menu__logo {
    @media (max-width: 1199.98px) {
      width: 128px;
    }
  }

  .mobile-menu__close {
    display: none;

    @media (max-width: 1199.98px) {
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      border: 0;
      border-radius: var(--r-16);
      background-color: var(--bg);
      color: var(--black);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;

      & span {
        width: 22px;
        height: 2px;
        border-radius: var(--r-1000);
        background-color: currentColor;
        display: block;
        position: absolute;

        &:first-child {
          transform: rotate(45deg);
        }

        &:last-child {
          transform: rotate(-45deg);
        }
      }
    }
  }

  .mobile-menu__nav {
    @media (max-width: 1199.98px) {
      & ul {
        display: flex;
        flex-direction: column;
        gap: var(--p-8);
        list-style: none;
      }

      & a {
        display: block;
        padding: var(--p-16);
        border-radius: var(--r-16);
        background-color: var(--bg);
        font-size: var(--f-18);
        line-height: 1.2;
      }
    }
  }

  .mobile-menu__contacts {
    @media (max-width: 1199.98px) {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: var(--p-12);
    }
  }

  .mobile-menu__phone {
    @media (max-width: 1199.98px) {
      font-size: var(--f-20);
      font-weight: 700;
      line-height: 1.2;

      & span {
        display: block;
        margin-top: var(--p-4);
        color: var(--black-50);
        font-size: var(--f-14);
        font-weight: 400;
      }
    }
  }

  .mobile-menu__email {
    @media (max-width: 1199.98px) {
      color: var(--black-50);
      overflow-wrap: anywhere;
    }
  }

  .mobile-menu__button {
    @media (max-width: 1199.98px) {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 56px;
      padding: var(--p-16) var(--p-20);
      border-radius: var(--r-16);
      background-color: var(--blue);
      color: var(--white);
      font-weight: 600;
    }
  }
}

/* hero */

@layer hero {
  .hero {
    margin: 0 auto;
    padding-top: var(--p-56);
    border-radius: var(--r-32);
    background-image: linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.8)), url('../img/bg-hero.jpg');
    background-position: center;
    background-size: cover;
    color: var(--white);

    @media (max-width: 767px) {
      padding-top: var(--p-48);
      padding-bottom: var(--p-48);
    }
  }

  .hero__grid {
    display: grid;
    grid-template-columns: 370px 1fr;
    align-items: start;
    gap: var(--p-32);
    position: relative;

    @media (max-width: 1199.98px) {
      grid-template-columns: 1fr;
      gap: var(--p-24);
    }
  }

  .hero__shapes {
    display: flex;
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0;

    @media (max-width: 1200px) {}

  }

  .hero__shapes--item {
    padding: 10px var(--p-16);
    background-color: var(--white-10);
    border-radius: var(--r-1000);
    display: flex;
    align-items: start;
    gap: var(--p-8);
    border: 1px solid var(--white);

    @media (max-width: 1199.98px) {
      padding: var(--p-8) var(--p-12);
    }
  }

  .hero__content {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-wrap: balance;
    gap: var(--p-40);
    text-align: right;

    @media (max-width: 1199.98px) {
      margin-top: 0;
      align-items: start;
      text-align: left;
    }

    @media (max-width: 767px) {
      gap: var(--p-32);
    }
  }

  .hero__pretitle {
    max-width: 530px;
    font-size: var(--f-20);

    @media (max-width: 767px) {
      font-size: var(--f-16);
    }
  }

  .hero__title {
    font-size: 72px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: normal;

    @media (max-width: 767px) {
      font-size: clamp(36px, 8vw, 48px);
    }

    & strong {
      color: var(--blue);
      font-weight: bold;
      position: relative;

      @media (max-width: 1199.98px) {
        left: 80px;
      }

      @media (max-width: 767px) {
        left: clamp(0px, 8vw, 40px);
      }

      &::after {
        content: '';
        position: absolute;
        width: 64px;
        height: 64px;
        border-radius: var(--r-1000);
        background-image: url('../img/ic-arrow-circle.svg');
        background-size: cover;
        background-position: center;
        top: 50%;
        left: -85px;
        transform: translateY(-50%);

        @media (max-width: 767px) {
          width: clamp(32px, 8vw, 64px);
          height: clamp(32px, 8vw, 64px);
          left: clamp(-80px, -10vw, 80px);
          transform: translateY(-50%) translateX(-50%);
        }
      }
    }
  }

  .hero__quote {
    width: 100%;
    position: relative;
    border-radius: var(--r-16);
    background-color: var(--white);
    color: var(--black);
    padding: var(--p-16);
    display: flex;
    gap: var(--p-16);
    flex-direction: column;
    position: absolute;
    bottom: calc(var(--p-24) * 2 * -1);
    left: var(--p-16);
    max-width: 370px;

    @media (max-width: 1199.98px) {
      display: none;
    }

    & strong {
      color: var(--blue);
      font-weight: bold;
    }
  }

  .hero__quote--img {
    border-radius: var(--r-16);
    max-height: 260px;
  }

  .hero__quote--content {
    font-size: var(--p-16);
  }

  .hero__quote--footer {
    font-size: var(--f-12);
    color: var(--black-50);
    padding-top: var(--p-16);
    border-top: 1px solid var(--black-10);
  }

  .hero__desciption {
    max-width: 530px;
    padding: var(--p-24) var(--p-40) 0 var(--p-40);
    position: relative;
    background-color: var(--bg);
    color: var(--black);
    border-radius: var(--r-16) var(--r-16) 0 0;
    margin-left: 170px;
    margin-top: 100px;
    font-size: var(--f-18);

    @media (max-width: 1199.98px) {
      margin-top: 0;
      margin-left: 0;
    }

    @media (max-width: 767px) {
      border-radius: var(--r-16);
      padding: var(--p-24);
      font-size: var(--f-14);

      & img {
        width: 24px;
      }
    }

    &::after {
      position: absolute;
      content: '';
      width: 32px;
      height: 32px;
      background-image: url(../img/rad-left.svg);
      bottom: 0;
      left: 0;
      transform: translateX(-100%);

      @media (max-width: 767px) {
        display: none;
      }
    }

    &::before {
      position: absolute;
      content: '';
      width: 32px;
      height: 32px;
      background-image: url(../img/rad-right.svg);
      bottom: 0;
      right: 0;
      transform: translateX(100%);

      @media (max-width: 767px) {
        display: none;
      }
    }
  }

}

/* about */

@layer about {
  .about {
    font-size: var(--f-18);
    margin-top: var(--p-32);
  }

  .about__short {}

  .about__short--descript {
    text-wrap: balance;
    font-size: var(--f-20);
  }

  .about__short--percent {
    & strong {
      font-size: 80px;
      font-weight: bold;
      line-height: 1;
      color: var(--red);
    }

    & small {
      font-size: var(--f-16);
      color: var(--black-50);
    }
  }

  .about__short--list {
    list-style-type: none;

    @media (max-width: 1200px) {
      margin-top: -15px;
    }

    @media (max-width: 767px) {
      margin: 0;
    }
  }

  .about__short--item {
    padding-bottom: var(--p-24);
    border-bottom: 1px solid var(--black-10);

    @media (max-width: 1200px) {
      border: none;
    }
  }

  .about__short--list-icon {}

  .about__short--item-content {}

  .about__short--item-title {}

  .about__short--item-descript {
    font-size: var(--f-16);
    color: var(--black-50);
    text-wrap: balance;
  }

  .about__content {
    padding-left: var(--p-64);

    @media (max-width: 1200px) {
      padding-left: 0;
    }

    @media (max-width: 767px) {
      margin-top: var(--p-24);
    }

    & p {
      color: var(--black-50);
      text-wrap: balance;
      margin-bottom: calc(var(--p-10) * -1);

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }

  .about__shape {
    padding: var(--p-10) var(--p-16);
    font-size: var(--f-16);
    border-radius: var(--r-1000);
    background-color: var(--blue);
    color: var(--white);
    margin-bottom: calc(var(--p-16) * -1);

  }

  .about__slider {
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--r-16);
    gap: var(--p-24);
    width: 100%;
    padding-bottom: var(--p-24);
  }

  .about__slider--item {
    flex: 0 0 365px;
    border-radius: var(--r-16);
    background-color: var(--white);
    padding: var(--p-8);
    transition: var(--trs);

    @media (max-width: 1200px) {
      flex: 0 0 290px;
    }

    &:hover {
      background-color: var(--blue);
      color: var(--white);
    }
  }

  .about__slider--image {
    flex: 0 0 100px;
    height: 100px;
    border-radius: var(--r-16);

    @media (max-width: 1200px) {
      flex: 0 0 80px;
      height: 80px;
    }
  }

  .about__slider--content {
    small {
      font-size: var(--f-16);
      opacity: 0.5;
    }
  }
}

/* scrollbox */

@layer scrollbox {
  .scrollbox {
    --scrollbox-gap: var(--p-32);

    overflow: hidden;
    max-width: 100%;
    padding: var(--p-32);
    min-height: 120px;
    background-image: url(../img/bg-pattern-white.jpg);
    background-size: cover;
    background-position: center;
    border-radius: var(--r-1000);

    @media (max-width: 1200px) {
      /* padding: var(--p-16); */
      min-height: 1px;
    }

    @media (max-width: 767px) {
      border-radius: 0;
    }
  }

  .scrollbox__blue {
    background-image: url(../img/bg-pattern-blue.jpg);
    color: var(--white);
  }

  .scrollbox__track {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--scrollbox-gap);
    width: max-content;
    animation: scrollbox-marquee var(--scrollbox-duration, 10s) linear infinite;
    will-change: transform;
  }

  .scrollbox:hover .scrollbox__track,
  .scrollbox:focus-within .scrollbox__track {
    animation-play-state: paused;
  }

  .scrollbox__item {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: var(--f-24);
    transition: var(--trs);

    &:hover {
      color: var(--blue);
    }
  }

  .scrollbox__item svg {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  @keyframes scrollbox-marquee {
    to {
      transform: translate3d(calc(var(--scrollbox-distance, 0px) * -1), 0, 0);
    }
  }
}

/* step */

@layer step {
  .step {
    & h2 {
      text-wrap: auto;
      max-width: 1000px;
    }
  }

  .step__wrap {
    background-image: url(../img/bg-pattern-white.jpg);
    background-size: cover;
    background-position: center;
    border-radius: var(--r-32);
    padding: var(--p-64) 0;
    padding-bottom: calc(var(--p-64) + var(--p-24));
  }

  .step__small {
    font-size: var(--f-16);
    text-wrap: balance;
  }

  .step__head {
    margin-bottom: var(--p-24);
  }

  .step__number {
    font-size: var(--p-48);
    white-space: nowrap;

    & small {
      font-size: var(--f-20);
      color: var(--black-50);
    }
  }

  .step__line {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--black-10);
  }

  .step__sep {
    margin-top: var(--p-48);
    margin-bottom: var(--p-48);
    border: none;
    background-color: var(--black-10);
    height: 1px;
    width: 100%;
  }

  .step__name {
    text-wrap: nowrap;
    text-transform: uppercase;
    opacity: 0.3;
    letter-spacing: 2px;
    /* font-size: var(--f-20); */
  }

  .step__header {
    position: relative;
    margin-bottom: var(--p-32);

    &.small-padding {
      margin-bottom: 0;
    }

    & h2 {
      margin-bottom: var(--p-10);
      display: inline-flex;
      align-items: center;
      gap: var(--p-24);
      row-gap: var(--p-8);
      flex-wrap: wrap;
      text-wrap: balance;

      & a {
        display: inline-block;
      }
    }

    & p {
      color: var(--black-50);
      font-size: var(--f-18);
    }
  }

  .step__header--float {
    position: absolute;
    top: calc(100% - 30px);
    left: 43%;
    max-width: 355px;
    text-wrap: balance;
    color: var(--black-50);

    @media (max-width: 1200px) {
      position: static;
      max-width: 100%;
      margin-top: var(--p-24);
    }
  }

  .step__content {
    margin-top: var(--p-64);

    @media (max-width: 1200px) {
      margin-top: 0;
    }

    &.small-padding {
      margin-top: var(--p-24);
    }

    blockquote {
      font-size: var(--f-16);
      margin-bottom: var(--p-32);
    }

    ul {
      list-style-type: none;

      & svg {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        color: var(--blue);
      }
    }
  }

  .step__simple {
    text-wrap: balance;
    border-radius: var(--r-8);
    transition: var(--trs);
    background-color: transparent;
    box-shadow: -6px 0 0 16px transparent;

    & p {
      color: var(--black-50);
    }

    &:hover {
      background-color: var(--white);
      box-shadow: -6px 0 0 16px var(--white);
    }
  }

  .step__box {
    width: 100%;

    & img {
      border-radius: var(--r-16);
    }

    & p {
      color: var(--black-50);
    }

    .link {
      text-decoration: underline;
      color: var(--blue);
      text-align: center;
    }

    br {
      @media (max-width: 1200px) {
        display: none;
      }
    }
  }

  .step__box--title {}

  .step__shape {
    border-radius: var(--r-1000);
    font-size: var(--f-14);
    padding: var(--p-4) var(--p-8);
    margin-bottom: -10px;

    &.red {
      background-color: var(--red);
      color: var(--white);
    }

    &.white {
      background-color: var(--white);
      color: var(--blue);
    }
  }

  .step__accent {
    background-color: var(--blue);
    color: var(--white);
    border-radius: var(--r-16);
    padding: var(--p-32) var(--p-24);
    overflow: hidden;
    text-wrap: balance;
    margin-bottom: var(--p-24);

    &.gray {
      background-color: var(--bg);
      color: var(--black);

      & p {
        color: var(--black-50);
      }
    }

    & h3 {
      font-size: var(--f-28);
      line-height: 1.25;
    }

    & p {
      color: var(--white);
      font-size: var(--f-16);
    }
  }

  .step__icon-float {
    position: relative;
    rotate: -25deg;
    margin-top: -55px;
    margin-left: -55px;

    @media (max-width: 1200px) {
      width: 80px;
      height: 80px;
      margin-top: -25px;
      margin-left: -25px;
    }
  }

  .step__gray {
    background-color: var(--bg);
    border-radius: var(--r-16);
    text-wrap: balance;

    & img {
      width: 100%;
      height: 100%;
    }

    & p.step__p-accent {
      color: var(--black);
    }
  }

  .step__p-opacity {
    color: var(--black-50);
  }

  .step__gray--content {
    padding: var(--p-32) 0;

    @media (max-width: 1200px) {
      padding: var(--p-24) var(--p-32) !important;
    }
  }

  .step__max {
    @media (max-width: 767px) {
      max-width: 120px;
    }
  }
}

/* whywe */

@layer whywe {
  .whywe {
    font-size: var(--f-18);
  }

  .whywe__button {
    padding: var(--p-16) 0;
    width: 100%;
    border-bottom: 1px solid var(--blue);
    color: var(--blue);
    /* font-size: var(--f-18); */
    text-decoration: none;
    transition: var(--trs);

    &:hover {
      opacity: 0.7;
    }
  }
}

/* contacts */

@layer contacts {
  .contacts {
    /* padding: var(--p-64) 0; */
    text-wrap: balance;
  }

  .contacts__row {
    align-items: center;
  }

  .contacts__content {
    /* max-width: 570px; */
  }

  .contacts__content h1,
  .contacts__content h2 {
    font-size: var(--f-56);
    line-height: 1.05;
    margin-bottom: var(--p-24);
  }

  .contacts__lead {
    /* max-width: 520px; */
    font-size: var(--f-18);
    line-height: 1.45;
    margin-bottom: var(--p-16);
  }

  .contacts__list {
    /* max-width: 475px; */
  }

  .contacts__item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--p-20);
    padding: var(--p-24) 0;
    border-bottom: 1px solid var(--black-10);
  }

  .contacts__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .contacts__icon {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    color: var(--black);
  }

  .contacts__icon svg {
    width: 28px;
    height: 28px;
  }

  .contacts__item-content {
    display: flex;
    flex-direction: column;
    gap: var(--p-4);
  }

  .contacts__label,
  .contacts__note {
    color: var(--black-50);
    font-size: var(--f-14);
  }

  .contacts__value {
    color: var(--black);
    font-size: var(--f-28);
    line-height: 1.25;
  }

  .contacts__form {
    /* max-width: 520px; */
    margin-left: auto;
    padding: var(--p-32);
    background-color: var(--white);
    border-radius: var(--r-16);
  }

  .contacts__form h2,
  .contacts__form h3 {
    font-size: var(--f-24);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: var(--p-24);
  }

  .contacts__fields {
    display: flex;
    flex-direction: column;
    gap: var(--p-12);
    margin-bottom: var(--p-16);
  }

  .contacts__fields input,
  .contacts__fields select,
  .contacts__fields textarea {
    width: 100%;
    border: 0;
    outline: 0;
    border-radius: var(--r-8);
    background-color: var(--bg);
    padding: var(--p-16);
    color: var(--black);
    font-size: var(--f-16);
    transition: var(--trs);
  }

  .contacts__fields input {
    min-height: 64px;

    @media (max-width: 767px) {
      min-height: 42px;
    }
  }

  .contacts__fields select {
    min-height: 64px;
    appearance: none;
    cursor: pointer;

    @media (max-width: 767px) {
      min-height: 42px;
    }
  }

  .contacts__fields textarea {
    min-height: 148px;
    resize: vertical;
  }

  .contacts__fields input::placeholder,
  .contacts__fields textarea::placeholder {
    color: var(--black-50);
  }

  .contacts__fields input:focus,
  .contacts__fields select:focus,
  .contacts__fields textarea:focus {
    box-shadow: inset 0 0 0 1px var(--blue);
    background-color: var(--white);
  }

  .contacts__check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--p-16);
    align-items: start;
    margin-bottom: var(--p-16);
    cursor: pointer;
  }

  .contacts__check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .contacts__check span {
    width: 20px;
    height: 20px;
    border: 1px solid var(--black-50);
    border-radius: var(--r-8);
    background-color: var(--white);
    transition: var(--trs);
  }

  .contacts__check input:checked+span {
    border-color: var(--blue);
    background-color: var(--blue);
    box-shadow: inset 0 0 0 4px var(--white);
  }

  .contacts__check input:focus-visible+span {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  .contacts__check small {
    color: var(--black-50);
    font-size: var(--f-12);
    line-height: 1.45;
  }

  .contacts__check strong {
    display: block;
    color: var(--black);
    font-weight: 500;
  }

  .contacts__submit {
    width: 100%;
    min-height: 64px;
    border: 0;
    border-radius: var(--r-16);
    background-color: var(--blue);
    color: var(--white);
    padding: var(--p-16) var(--p-24);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--f-16);
    transition: var(--trs);
  }

  .contacts__submit:hover {
    background-color: var(--blue-hover);
  }

  .contacts__submit svg {
    width: 20px;
    height: 20px;
  }

}

@layer front-page-wp {
  .home .materials-catalog__list:empty {
    display: none;
  }

  .home .contacts {
    padding: var(--p-64) 0;
  }

  .home .contacts__content h2,
  .home .contacts__lead {
    color: var(--black);
  }

  .home .contacts__lead {
    max-width: 560px;
    margin-bottom: 0;
  }
}

/* about page */

@layer about-page {

  .about-page__lead,
  .about-page__purpose,
  .about-page__work,
  .about-page__principles,
  .about-page__final {
    font-size: var(--f-18);
  }

  .about-page__lead {
    padding-top: var(--p-40);

    @media (max-width: 1200px) {
      padding-top: var(--p-24);
    }
  }

  @media (max-width: 767px) {
    .about-page__lead-row {
      display: flex;
      flex-direction: column;
    }

    .about-page__lead-row>.col-lg-4 {
      order: -1;
    }
  }

  .about-page__lead .about__short {
    gap: var(--p-20);
    position: sticky;
    top: var(--p-24);

    @media (max-width: 767px) {
      position: static;
      margin-bottom: var(--p-32);
    }
  }

  .about-page__lead .about__short--percent {
    gap: var(--p-12);
    margin: calc(var(--p-8) * -1) 0;
  }

  .about-page__article {
    padding-right: var(--p-32);

    @media (max-width: 1200px) {
      padding-right: 0;
    }
  }

  .about-page__article h1 {
    max-width: 850px;
    font-size: var(--f-64);
    font-weight: 500;
    line-height: 1;
    text-wrap: balance;

    @media (max-width: 767px) {
      font-size: var(--f-40);
    }
  }

  .about-page__article p,
  .about-page__text-stack p {
    max-width: 790px;
    text-wrap: balance;
  }

  .about-page__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--p-16);

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: 0;
      border-top: 1px solid var(--black-10);
      border-bottom: 1px solid var(--black-10);
    }
  }

  .about-page__facts div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--p-24);
    min-height: 190px;
    padding: var(--p-24);
    border-radius: var(--r-16);
    background-color: var(--white);

    @media (max-width: 767px) {
      display: grid;
      grid-template-columns: 88px 1fr;
      align-items: center;
      gap: var(--p-12);
      min-height: 1px;
      padding: var(--p-16) 0;
      border-radius: 0;
      background-color: transparent;
      border-bottom: 1px solid var(--black-10);
    }
  }

  .about-page__facts div:last-child {
    @media (max-width: 767px) {
      border-bottom: 0;
    }
  }

  .about-page__facts strong {
    color: var(--blue);
    font-size: var(--f-48);
    line-height: 1;
    white-space: nowrap;

    @media (max-width: 767px) {
      font-size: var(--f-32);
    }
  }

  .about-page__facts span {
    color: var(--black-50);
    font-size: var(--f-16);
    text-wrap: balance;
  }

  .about-page__text-stack {
    display: flex;
    flex-direction: column;
    gap: var(--p-24);
  }

  @media (max-width: 1199.98px) {
    .about-page__purpose .row {
      row-gap: var(--p-16);
    }
  }

  @media (max-width: 767px) {
    .about-page__purpose .row {
      row-gap: var(--p-12);
    }
  }

  .about-page__purpose .step__accent {
    margin-bottom: 0;
  }

  .about-page__text-stack .step__p-accent {
    color: var(--black);
  }

  .about-page__work .step__box svg,
  .about-page__work .step__box>span {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
  }

  .about-page__image-card {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--r-16);
    background-color: var(--white);

    @media (max-width: 767px) {
      display: none;
    }
  }

  .about-page__principles .row {
    align-items: stretch;
  }

  .about-page__principles .row>[class*="col-"] {
    display: flex;

    @media (max-width: 1199.98px) {
      display: block;
    }
  }

  .about-page__principles-content {
    width: 100%;
  }

  .about-page__image-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    @media (max-width: 767px) {
      position: static;
      height: 280px;
      min-height: 280px;
    }
  }

  .about-page__principles blockquote {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 80px;
    background-color: var(--blue);
    background-image: none;
    color: var(--white);
    box-shadow: none;
    font-size: var(--f-16);
    line-height: 1.45;

    @media (max-width: 767px) {
      min-height: 56px;
      padding: 14px var(--p-16);
      padding-left: 56px;
      border-radius: var(--r-16);
      font-size: var(--f-14);
    }
  }

  .about-page__principles blockquote::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--p-16);
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: var(--white);
    mask-image: url(../img/ic-info.svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url(../img/ic-info.svg);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;

    @media (max-width: 767px) {
      width: 28px;
      height: 28px;
    }
  }

  .about-page__check-list {
    display: flex;
    flex-direction: column;
    gap: var(--p-12);
    list-style: none;
  }

  .about-page__check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--p-12);
    color: var(--black);
  }

  .about-page__check-list li svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: var(--blue);
  }

  .about-page__final-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--p-24);
    align-items: stretch;

    @media (max-width: 1199.98px) {
      grid-template-columns: 1fr;
    }
  }

  .about-page__final-panel {
    min-height: 430px;
    padding: var(--p-40);
    border-radius: var(--r-16);
    background-color: var(--blue);
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
    position: relative;

    @media (max-width: 1199.98px) {
      min-height: 1px;
      padding: var(--p-32);
      gap: var(--p-24);
      justify-content: flex-start;
    }

    @media (max-width: 767px) {
      min-height: 1px;
      padding: var(--p-24);
      gap: var(--p-20);
    }
  }

  .about-page__final-panel::after {
    content: "04";
    position: absolute;
    right: var(--p-24);
    bottom: -34px;
    color: rgba(255, 255, 255, 0.12);
    font-size: 220px;
    font-weight: 600;
    line-height: 1;

    @media (max-width: 1199.98px) {
      right: var(--p-20);
      bottom: -20px;
      font-size: 150px;
    }

    @media (max-width: 767px) {
      right: var(--p-16);
      bottom: -20px;
      font-size: 110px;
    }
  }

  .about-page__final-panel h2 {
    max-width: 620px;
    color: var(--white);
    position: relative;
    z-index: 1;
  }

  .about-page__final-panel p {
    max-width: 470px;
    color: var(--white);
    font-size: var(--f-20);
    text-wrap: balance;
    position: relative;
    z-index: 1;

    @media (max-width: 767px) {
      font-size: var(--f-16);
    }
  }

  .about-page__final-panel .button {
    min-width: 280px;
    background-color: var(--white);
    color: var(--blue);
    gap: var(--p-24);
    position: relative;
    z-index: 1;

    @media (max-width: 767px) {
      width: 100%;
      min-width: 0;
    }
  }

  .about-page__final-route {
    display: flex;
    width: 100%;
    max-width: 530px;
    align-items: center;
    gap: var(--p-8);
    position: relative;
    z-index: 1;

    @media (max-width: 1199.98px) {
      max-width: 100%;
    }

    @media (max-width: 767px) {
      align-items: stretch;
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

  .about-page__final-route span {
    flex: 1 1 0;
    padding: var(--p-12) var(--p-16);
    border: 1px solid var(--white-50);
    border-radius: var(--r-1000);
    color: var(--white);
    text-align: center;
    font-size: var(--f-14);

    @media (max-width: 767px) {
      min-width: calc(50% - var(--p-8));
      padding: var(--p-8) var(--p-10);
    }
  }

  .about-page__final-audience {
    display: flex;
    align-items: stretch;

    @media (max-width: 767px) {
      display: block;
    }
  }

  .about-page__audience-list {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;

    @media (max-width: 767px) {
      min-height: 0;
    }
  }

  .about-page__audience-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: var(--p-20);
    flex: 1 1 0;
    padding: var(--p-24) 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--black-10);

    @media (max-width: 767px) {
      grid-template-columns: 36px 1fr;
      padding: var(--p-20) 0;
    }
  }

  .about-page__audience-card:nth-child(2) {
    margin-bottom: 0;
    border-bottom: 0;
  }

  .about-page__audience-card img {
    width: 44px;
    height: 44px;

    @media (max-width: 767px) {
      width: 36px;
      height: 36px;
    }
  }

  .about-page__audience-card h3 {
    margin-bottom: var(--p-8);
    font-weight: 600;
  }

  .about-page__audience-card p {
    color: var(--black-50);
    text-wrap: balance;
  }

  .about-page__audience-quote {
    display: flex;
    align-items: center;
    gap: var(--p-16);
    margin-top: var(--p-12);
    padding: var(--p-20);
    border-radius: var(--r-16);
    background-color: var(--blue);
    color: var(--white);

    @media (max-width: 767px) {
      gap: var(--p-12);
      padding: var(--p-16);
    }
  }

  .about-page__audience-quote svg {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .about-page__audience-quote svg,
  .about-page__audience-quote path {
    color: var(--white);
    stroke: var(--white);
  }

  .about-page__audience-quote p {
    text-wrap: balance;
  }
}

/* events page */

@layer events-page {
  .events-page {
    --event-card-date: 112px;
  }

  .events-page__intro {
    padding-top: var(--p-40);
  }

  .events-page__intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--p-48);
    align-items: stretch;

    @media (max-width: 1199.98px) {
      grid-template-columns: 1fr;
      gap: var(--p-24);
    }
  }

  .events-page__intro-content {
    min-height: 420px;
    padding: var(--p-48);
    border-radius: var(--r-16);
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media (max-width: 767px) {
      min-height: 1px;
      padding: 0;
      background-color: transparent;
    }
  }

  .events-page__intro-content h1 {
    max-width: 760px;
    font-size: 88px;
    font-weight: 600;
    line-height: 0.95;
    text-transform: uppercase;
    text-wrap: balance;

    @media (max-width: 1199.98px) {
      font-size: var(--f-64);
    }

    @media (max-width: 767px) {
      font-size: var(--f-40);
      margin-bottom: var(--p-24);
    }
  }

  .events-page__intro-content p {
    max-width: 620px;
    color: var(--black-50);
    font-size: var(--f-20);
    text-wrap: balance;
  }

  .events-page__next {
    position: relative;
    overflow: hidden;
    padding: var(--p-32);
    border-radius: var(--r-16);
    background-color: var(--blue);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--p-40);
  }

  .events-page__next::after {
    content: "next";
    position: absolute;
    right: -18px;
    bottom: -30px;
    color: rgba(255, 255, 255, 0.12);
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
  }

  .events-page__date {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: flex-end;
    gap: var(--p-12);
  }

  .events-page__date span {
    font-size: 92px;
    font-weight: 600;
    line-height: 0.8;
  }

  .events-page__date small {
    margin-bottom: var(--p-8);
    font-size: var(--f-24);
  }

  .events-page__next-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--p-16);
  }

  .events-page__next-content h2 {
    color: var(--white);
    font-size: var(--f-32);
    line-height: 1.1;
  }

  .events-page__next-content p {
    color: var(--white);
    font-size: var(--f-16);
  }

  .events-page__next .button {
    width: 100%;
    margin-top: var(--p-8);
    background-color: var(--white);
    color: var(--blue);
    gap: var(--p-24);
  }

  .events-page__tag {
    width: max-content;
    max-width: 100%;
    padding: var(--p-4) var(--p-10);
    border-radius: var(--r-1000);
    background-color: var(--blue-light);
    color: var(--blue);
    font-size: var(--f-14);
    line-height: 1.25;
  }

  .events-page__next .events-page__tag {
    background-color: var(--white);
  }

  .events-page__filters {
    margin-top: calc(100px * -1);

    @media (max-width: 1200px) {
      margin-top: calc(40px * -1);
    }
  }

  .events-page__filter-row {
    display: flex;
    gap: var(--p-8);
    overflow-x: auto;
    padding-bottom: var(--p-8);
  }

  .events-page__filter {
    flex: 0 0 auto;
    padding: var(--p-12) var(--p-20);
    border: 1px solid var(--black-10);
    border-radius: var(--r-1000);
    color: var(--black);
    background-color: var(--white);
    transition: var(--trs);
  }

  .events-page__filter:hover,
  .events-page__filter.is-active {
    border-color: var(--blue);
    background-color: var(--blue);
    color: var(--white);
  }

  .events-page__loop {
    display: flex;
    flex-direction: column;
    gap: var(--p-24);
  }

  .events-page__card {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--p-24);
    padding: var(--p-16);
    border-radius: var(--r-16);
    background-color: var(--white);

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

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      padding: var(--p-12);
      gap: var(--p-16);
    }
  }

  .events-page__card-media {
    display: block;
    min-height: 240px;
    overflow: hidden;
    border-radius: var(--r-16);

    @media (max-width: 767px) {
      min-height: 190px;
    }
  }

  .events-page__card-media img {
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
  }

  .events-page__card:hover .events-page__card-media img {
    transform: scale(1.04);
  }

  .events-page__card-body {
    display: grid;
    grid-template-columns: var(--event-card-date) minmax(0, 1fr) 56px;
    gap: var(--p-24);
    align-items: stretch;

    @media (max-width: 1199.98px) {
      --event-card-date: 88px;
      gap: var(--p-16);
    }

    @media (max-width: 767px) {
      grid-template-columns: 1fr 48px;
    }
  }

  .events-page__card-date {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: var(--p-20);
    border-right: 1px solid var(--black-10);

    @media (max-width: 767px) {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: center;
      padding: 0 0 var(--p-12);
      border-right: 0;
      border-bottom: 1px solid var(--black-10);
    }
  }

  .events-page__card-date time {
    color: var(--blue);
    font-size: var(--f-40);
    font-weight: 600;
    line-height: 1;
  }

  .events-page__card-date span {
    color: var(--black-50);
    font-size: var(--f-14);
    text-transform: uppercase;
  }

  .events-page__card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--p-12);
  }

  .events-page__card-content h2 {
    font-size: var(--f-32);
    line-height: 1.1;

    @media (max-width: 767px) {
      font-size: var(--f-24);
    }
  }

  .events-page__card-content p {
    max-width: 650px;
    color: var(--black-50);
    text-wrap: balance;
  }

  .events-page__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-8);
    margin-top: auto;
  }

  .events-page__meta span {
    padding: var(--p-4) var(--p-8);
    border-radius: var(--r-1000);
    background-color: var(--bg);
    color: var(--black-50);
    font-size: var(--f-14);
  }

  .events-page__card-link {
    width: 56px;
    height: 56px;
    border-radius: var(--r-1000);
    background-color: var(--blue);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    transition: var(--trs);

    @media (max-width: 767px) {
      width: 48px;
      height: 48px;
    }
  }

  .events-page__card-link:hover {
    background-color: var(--blue-hover);
  }

  .events-page__card-link svg {
    width: 20px;
    height: 20px;
  }

  .events-page__format-list {
    display: flex;
    flex-direction: column;
  }

  .events-page__format-list div {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--p-24);
    padding: var(--p-24) 0;
    border-bottom: 1px solid var(--black-10);

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: var(--p-8);
    }
  }

  .events-page__format-list div:first-child {
    padding-top: 0;
  }

  .events-page__format-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .events-page__format-list strong {
    color: var(--blue);
    font-size: var(--f-28);
    line-height: 1.1;
  }

  .events-page__format-list span {
    color: var(--black);
    font-size: var(--f-18);
    text-wrap: balance;
  }

  .events-page__cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--p-32);
    padding: var(--p-40);
    border-radius: var(--r-16);
    background-color: var(--blue);
    color: var(--white);

    @media (max-width: 767px) {
      flex-direction: column;
      align-items: stretch;
      padding: var(--p-24);
    }
  }

  .events-page__cta-panel h2 {
    color: var(--white);
    margin-bottom: var(--p-12);
  }

  .events-page__cta-panel p {
    max-width: 620px;
    color: var(--white);
    font-size: var(--f-18);
  }

  .events-page__cta-panel .button {
    min-width: 260px;
    background-color: var(--white);
    color: var(--blue);
    gap: var(--p-24);
  }
}

@layer events-calendar {
  .events-calendar {
    gap: var(--p-64);
  }

  .events-calendar__stage {
    padding-top: var(--p-40);
    padding-bottom: var(--p-64);
  }

  .events-calendar__sheet {
    min-height: 760px;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 260px;
    gap: var(--p-32);
    align-items: start;

    @media (max-width: 1199.98px) {
      grid-template-columns: 120px minmax(0, 1fr);
      gap: var(--p-32);
    }

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: var(--p-32);
    }
  }

  .events-calendar__feature {
    padding: 0 var(--p-8);
    min-width: 0;

    @media (max-width: 767px) {
      padding: 0;
    }
  }

  .events-calendar__rail {
    position: sticky;
    top: var(--p-24);
    display: flex;
    flex-direction: column;
    gap: var(--p-40);
    min-height: 620px;

    @media (max-width: 1199.98px) {
      position: static;
      min-height: 1px;
    }

    @media (max-width: 767px) {
      gap: var(--p-16);
    }
  }

  .events-calendar__mini-logo {
    color: var(--blue);
    font-size: var(--f-18);
    font-weight: 800;
    letter-spacing: 0;
  }

  .events-calendar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--p-12);

    @media (max-width: 767px) {
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

  .events-calendar__nav a {
    width: fit-content;
    color: var(--black);
    font-size: var(--f-14);
    line-height: 1.15;

    &.is-active,
    &:hover {
      color: var(--blue);
    }
  }

  .events-calendar__view-tabs {
    margin-bottom: var(--p-56);
    display: flex;
    justify-content: flex-start;
    gap: var(--p-32);

    @media (max-width: 1199.98px) {
      margin-bottom: var(--p-32);
    }

    @media (max-width: 767px) {
      margin-bottom: var(--p-20);
    }
  }

  .events-calendar__view-tabs a {
    padding-bottom: var(--p-8);
    border-bottom: 2px solid transparent;
    color: var(--black);
    font-size: var(--f-14);
    font-weight: 700;

    &.is-active,
    &:hover {
      border-bottom-color: var(--black);
    }
  }

  .events-calendar__hero-event {
    max-width: 720px;
  }

  .events-calendar__detail-feed {
    margin-bottom: var(--p-64);

    @media (max-width: 767px) {
      margin-bottom: var(--p-32);
    }
  }

  .events-calendar[data-events-view="list"] .events-calendar__detail-feed,
  .events-calendar[data-events-view="detail"] .events-calendar__list-view {
    display: none;
  }

  .events-calendar[data-events-view="list"] .events-calendar__list-view {
    padding-top: 0;
    border-top: 0;
  }

  .events-calendar__kicker {
    margin-bottom: var(--p-12);
    color: var(--black);
    font-size: var(--f-14);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: var(--p-8);
  }

  .events-calendar__kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--red);
    display: inline-block;
  }

  .events-calendar__hero-event h1 {
    max-width: 560px;
    margin-bottom: var(--p-16);
    font-size: var(--f-48);
    font-weight: 700;
    line-height: 0.95;
    text-transform: uppercase;
    text-wrap: balance;

    @media (max-width: 767px) {
      font-size: var(--f-32);
    }
  }

  .events-calendar__hero-event h1 a {
    color: var(--black);
  }

  .events-calendar__hero-event time {
    margin-bottom: var(--p-24);
    color: var(--black-50);
    font-size: var(--f-14);
    font-weight: 700;
    display: block;
  }

  .events-calendar__hero-event p {
    max-width: 610px;
    margin-bottom: var(--p-32);
    color: var(--black-50);
    font-size: var(--f-16);
    line-height: 1.45;
  }

  .events-calendar__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--p-48);
    border-radius: var(--r-16);
    background-color: var(--white);
    overflow: hidden;
    display: block;

    @media (max-width: 767px) {
      margin-bottom: var(--p-20);
    }
  }

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

  .events-calendar__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .events-calendar__card {
    padding: var(--p-32) 0;
    border-top: 1px solid var(--black-10);
    color: var(--black);
    display: grid;
    grid-template-columns: 150px minmax(0, 0.9fr) minmax(220px, 0.7fr);
    align-items: center;
    gap: var(--p-24);

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      min-height: 1px;
      gap: var(--p-16);
      padding: var(--p-24) 0;
    }

    @media (min-width: 768px) and (max-width: 1199.98px) {
      grid-template-columns: 150px minmax(0, 1fr);
      gap: var(--p-24) var(--p-32);
      align-items: start;
    }
  }

  .events-calendar__card h2 {
    font-size: var(--f-24);
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;

    @media (max-width: 767px) {
      font-size: var(--f-20);
    }

    @media (min-width: 768px) and (max-width: 1199.98px) {
      font-size: var(--f-24);
    }
  }

  .events-calendar__card h2 a {
    color: var(--black);
  }

  .events-calendar__card p {
    color: var(--black-50);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;

    @media (min-width: 768px) and (max-width: 1199.98px) {
      grid-column: 2;
      max-width: 420px;
    }
  }

  .events-calendar__card-meta {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: var(--p-24);

    @media (max-width: 767px) {
      gap: var(--p-8);
      min-height: 1px;
    }

    @media (min-width: 768px) and (max-width: 1199.98px) {
      grid-row: 1 / span 2;
      align-content: start;
      min-height: 1px;
    }
  }

  .events-calendar__card-meta span {
    color: var(--blue);
    font-size: var(--f-12);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .events-calendar__card-meta time {
    color: var(--black-50);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
  }

  .events-calendar__card--video {
    padding: var(--p-32) 0;
    border-top: 1px solid var(--black-10);
  }

  .events-calendar__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-16);
    min-height: 0;
    overflow: hidden;
    display: block;

    @media (min-width: 768px) and (max-width: 1199.98px) {
      grid-column: 2;
      max-width: 420px;
    }
  }

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

  .events-calendar__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--white);
    transform: translate(-50%, -50%);
  }

  .events-calendar__play::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 18px;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 15px solid var(--blue);
  }

  .events-calendar__card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--p-12);
  }

  .events-calendar__card--text {
    background-color: transparent;
  }

  .events-calendar__card--accent {
    margin-bottom: var(--p-48);
    margin-top: var(--p-16);
    padding: var(--p-32) 0;
    border-radius: var(--r-8);
    background-color: var(--blue);
    box-shadow: 0 0 0 var(--p-16) var(--blue);
    color: var(--white);
    border: none;

    @media (max-width: 767px) {
      border-radius: 0;
      /* padding-top: 0; */
      margin-bottom: var(--p-16);
    }
  }

  .events-calendar__card--accent h2 a,
  .events-calendar__card--accent p,
  .events-calendar__card--accent .events-calendar__card-meta span,
  .events-calendar__card--accent .events-calendar__card-meta time {
    color: var(--white);

    @media (min-width: 768px) and (max-width: 1199.98px) {
      grid-template-columns: 150px minmax(0, 1fr);
    }
  }

  .events-calendar__card--accent p,
  .events-calendar__card--accent .events-calendar__card-meta time {
    opacity: 0.82;
  }

  .events-calendar__card--split {
    /* min-height: 212px; */
  }

  .events-calendar__list-view {
    padding-top: var(--p-40);
    border-top: 1px solid var(--black-10);
  }

  .events-calendar__list-head {
    margin-bottom: var(--p-24);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--p-24);

    @media (max-width: 767px) {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .events-calendar__list-head h2 {
    font-size: var(--f-40);
    font-weight: 700;
    line-height: 1;
  }

  .events-calendar__list-head span {
    max-width: 260px;
    color: var(--black-50);
    font-size: var(--f-12);
    font-weight: 400;
    line-height: 1.35;
    text-align: right;

    @media (max-width: 767px) {
      text-align: left;
    }
  }

  .events-calendar__list {
    border-top: 1px solid var(--black-10);
  }

  .events-calendar__list-item {
    min-height: 74px;
    border-bottom: 1px solid var(--black-10);
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--p-20);
    align-items: center;

    @media (max-width: 767px) {
      grid-template-columns: 72px minmax(0, 1fr);
      gap: var(--p-12);
      padding: var(--p-16) 0;
      align-items: start;
    }
  }

  .events-calendar__list-item time {
    color: var(--blue);
    font-size: var(--f-20);
    font-weight: 800;
  }

  .events-calendar__list-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px;
    gap: var(--p-4);
    min-width: 0;
    align-items: center;

    @media (max-width: 767px) {
      grid-column: 2;
      grid-template-columns: 1fr;
      align-items: start;
    }
  }

  .events-calendar__list-item a {
    color: var(--black);
    font-size: var(--f-18);
    font-weight: 400;
    line-height: 1.2;
  }

  .events-calendar__list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--p-16);

    @media (max-width: 767px) {
      justify-content: flex-start;
      gap: var(--p-12);
    }
  }

  .events-calendar__list-meta span,
  .events-calendar__list-meta strong {
    color: var(--black-50);
    font-size: var(--f-12);
    font-weight: 400;
    text-transform: none;
  }

  .events-calendar__list-meta span,
  .events-calendar__list-meta strong {
    opacity: 0.62;
    font-size: 12px;
  }

  .events-calendar__soon h2 {
    margin-bottom: var(--p-20);
    color: var(--black-50);
    font-size: var(--f-12);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .events-calendar__soon-item {
    border-top: 1px solid var(--black-10);
  }

  .events-calendar__soon-item a {
    padding: var(--p-16) 0;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 128px;
    gap: var(--p-20);
    color: var(--black);
    align-items: center;

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: var(--p-6);
    }
  }

  .events-calendar__soon-item time,
  .events-calendar__soon-item span {
    color: var(--black-50);
    font-size: var(--f-12);
    font-weight: 700;
  }

  .events-calendar__soon-item strong {
    font-size: var(--f-16);
    font-weight: 700;
    line-height: 1.25;
  }

  .events-calendar__side {
    /* padding-top: var(--p-48); */
    position: sticky;
    top: var(--p-24);
    min-width: 0;
    overflow: hidden;

    @media (max-width: 1199.98px) {
      display: none;
    }
  }

  .events-calendar__month-head {
    margin-bottom: var(--p-32);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--p-8);

    @media (min-width: 768px) and (max-width: 1199.98px) {
      margin-bottom: var(--p-40);
    }
  }

  .events-calendar__month-head a,
  .events-calendar__month-head strong {
    min-width: 0;
    color: var(--black);
    font-size: var(--f-12);
    font-weight: 700;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;

    @media (min-width: 768px) and (max-width: 1199.98px) {
      font-size: var(--f-18);
    }
  }

  .events-calendar__month-head a:last-child {
    text-align: right;
  }

  .events-calendar__month-grid {
    padding-bottom: var(--p-32);
    border-bottom: 1px solid var(--black-10);
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--p-6);

    @media (max-width: 1199.98px) {
      max-width: none;
    }

    @media (min-width: 768px) and (max-width: 1199.98px) {
      gap: var(--p-16) var(--p-24);
      padding-bottom: var(--p-40);
    }
  }

  .events-calendar__month-grid span,
  .events-calendar__month-grid .events-calendar__empty,
  .events-calendar__month-grid time {
    width: 28px;
    height: 28px;
    aspect-ratio: 1;
    color: var(--black);
    font-size: var(--f-12);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;

    @media (min-width: 768px) and (max-width: 1199.98px) {
      width: 44px;
      height: 44px;
      font-size: var(--f-18);
    }
  }

  .events-calendar__month-grid span {
    color: var(--black-50);
    text-transform: uppercase;
  }

  .events-calendar__month-grid .events-calendar__empty {
    display: block;
  }

  .events-calendar__month-grid .has-event {
    color: var(--blue);
  }

  .events-calendar__month-grid .is-active {
    border-radius: 50%;
    background-color: var(--blue);
    color: var(--white);
  }

  .events-calendar__show {
    padding: var(--p-24) 0;
    border-bottom: 1px solid var(--black-10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--p-16);

    @media (max-width: 767px) {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .events-calendar__show span {
    color: var(--black-50);
    font-size: var(--f-12);
    font-weight: 700;
  }

  .events-calendar__show a {
    color: var(--black);
    font-size: var(--f-12);
    font-weight: 800;
  }

  .events-calendar__legend {
    padding-top: var(--p-24);
    display: flex;
    flex-direction: column;
    gap: var(--p-12);
  }

  .events-calendar__legend span {
    color: var(--black-50);
    font-size: var(--f-12);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--p-8);
  }

  .events-calendar__legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--blue);
    display: inline-block;
  }

  .events-calendar__legend span:first-child i {
    background-color: var(--red);
  }
}

@layer materials-catalog {
  .materials-catalog {
    padding-top: var(--p-40);
    padding-bottom: var(--p-64);
  }

  .materials-catalog__layout {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--p-40);
    align-items: start;

    @media (max-width: 1199.98px) {
      grid-template-columns: 130px minmax(0, 1fr);
      gap: var(--p-32);
    }

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: var(--p-32);
    }
  }

  .materials-catalog__filters {
    position: sticky;
    top: var(--p-24);

    @media (max-width: 1199.98px) {
      position: static;
    }
  }

  .materials-catalog__brand {
    margin-bottom: var(--p-32);
    color: var(--blue);
    font-size: var(--f-18);
    font-weight: 800;
    display: block;
  }

  .materials-catalog__nav {
    display: flex;
    flex-direction: column;
    gap: var(--p-12);

    @media (max-width: 767px) {
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--p-8) var(--p-16);
    }
  }

  .materials-catalog__nav a,
  .materials-catalog__sort a {
    width: fit-content;
    color: var(--black);
    font-size: var(--f-14);
    line-height: 1.15;
  }

  .materials-catalog__nav a.is-active,
  .materials-catalog__nav a:hover,
  .materials-catalog__sort a.is-active,
  .materials-catalog__sort a:hover {
    color: var(--blue);
  }

  .materials-catalog__content {
    min-width: 0;
  }

  .materials-catalog__head {
    margin-bottom: var(--p-32);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--p-32);
    align-items: end;

    @media (max-width: 1199.98px) {
      grid-template-columns: 1fr;
      gap: var(--p-24);
    }
  }

  .materials-catalog__head h1 {
    max-width: 640px;
    margin-bottom: var(--p-20);
    font-size: var(--f-56);
    font-weight: 700;
    line-height: 0.95;
    text-wrap: balance;

    @media (max-width: 767px) {
      font-size: var(--f-40);
    }
  }

  .materials-catalog__head p {
    max-width: 500px;
    color: var(--black-50);
    font-size: var(--f-18);
    line-height: 1.42;
  }

  .materials-catalog__search {
    position: relative;
    min-height: 56px;
    padding: 0 var(--p-20);
    border: 1px solid var(--black-10);
    border-radius: 999px;
    background-color: var(--white);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--p-16);
    align-items: center;

    @media (max-width: 767px) {
      width: 100%;
      max-width: none;
    }
  }

  .materials-catalog__search label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .materials-catalog__search input,
  .materials-catalog__search button {
    border: 0;
    background: transparent;
    color: var(--black);
    font-size: var(--f-16);
    outline: 0;
  }

  .materials-catalog__search input::placeholder {
    color: var(--black-50);
  }

  .materials-catalog__search button {
    color: var(--blue);
    cursor: pointer;
  }

  .materials-catalog__showcase {
    margin-bottom: var(--p-32);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--p-32);
    align-items: stretch;

    @media (max-width: 1199.98px) {
      grid-template-columns: 1fr;
    }
  }

  .materials-catalog__featured {
    min-height: 340px;
    padding: var(--p-24);
    border-radius: var(--r-24);
    background-color: var(--white);
    display: grid;
    grid-template-columns: minmax(260px, 0.44fr) minmax(0, 1fr);
    gap: var(--p-32);
    align-items: stretch;

    @media (max-width: 767px) {
      min-height: 0;
      grid-template-columns: 1fr;
      gap: var(--p-24);
    }
  }

  .materials-catalog__featured-media {
    border-radius: var(--r-16);
    overflow: hidden;
    display: block;

    @media (max-width: 767px) {
      aspect-ratio: 4 / 3;
    }
  }

  .materials-catalog__featured-content {
    align-self: center;
  }

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

  .materials-catalog__featured-content span,
  .materials-catalog__meta span,
  .materials-catalog__meta time {
    color: var(--black-50);
    font-size: var(--f-12);
    font-weight: 400;
  }

  .materials-catalog__featured-content>span {
    margin-bottom: var(--p-16);
    color: var(--blue);
    display: block;
  }

  .materials-catalog__featured h2 {
    max-width: 640px;
    margin-bottom: var(--p-20);
    font-size: var(--f-36);
    font-weight: 700;
    line-height: 1.02;
    text-wrap: balance;

    @media (max-width: 767px) {
      font-size: var(--f-28);
    }
  }

  .materials-catalog__featured h2 a {
    color: var(--black);
  }

  .materials-catalog__featured p {
    max-width: 520px;
    margin-bottom: var(--p-24);
    color: var(--black-50);
    font-size: var(--f-16);
    line-height: 1.4;
  }

  .materials-catalog__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-12);
  }

  .materials-catalog__toolbar {
    margin-bottom: var(--p-24);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--p-24);

    @media (max-width: 767px) {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  .materials-catalog__toolbar h2 {
    font-size: var(--f-40);
    font-weight: 700;
    line-height: 1;
  }

  .materials-catalog__sort {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--p-16);

    @media (max-width: 767px) {
      justify-content: flex-start;
    }
  }

  .materials-catalog__shelves {
    margin-bottom: var(--p-40);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    overflow: hidden;
    border-radius: var(--r-16);
    background-color: var(--black-10);

    @media (max-width: 767px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .materials-catalog__shelves a {
    min-height: 132px;
    padding: var(--p-24);
    background-color: var(--white);
    color: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media (max-width: 767px) {
      min-height: 54px;
      padding: 16px;
    }
  }

  .materials-catalog__shelves strong {
    font-size: var(--f-20);
    font-weight: 700;
    line-height: 1.1;
  }

  .materials-catalog__shelves span {
    color: var(--black-50);
    font-size: 12px;
    line-height: 1.25;
  }

  .materials-catalog__list {
    border-top: 1px solid var(--black-10);
  }

  .materials-catalog__item {
    min-height: 132px;
    padding: var(--p-24) 0;
    border-bottom: 1px solid var(--black-10);
    display: grid;
    grid-template-columns: 96px minmax(0, 620px);
    gap: var(--p-24);
    align-items: center;

    @media (max-width: 1199.98px) {
      grid-template-columns: 1fr;
      min-height: 0;
      gap: 0;
      align-items: start;
    }
  }

  .materials-catalog__item-cover {
    width: 78px;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-8);
    background-color: var(--blue-light);
    color: var(--blue);
    display: flex;
    align-items: flex-end;
    overflow: hidden;

    @media (max-width: 1199.98px) {
      display: none;
    }
  }

  .materials-catalog__item-cover span {
    width: 100%;
    min-height: 28px;
    margin: 0;
    padding: 8px 4px;
    background-color: rgba(255, 255, 255, 0.72);
    color: currentColor;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .materials-catalog__item>div:last-child>span {
    @media (max-width: 1199.98px) {
      width: fit-content;
      margin: var(--p-8) 0 0;
      padding: 5px 10px;
      border-radius: 999px;
      background-color: var(--blue-light);
      color: var(--blue);
      font-size: 11px;
      line-height: 1;
      display: flex;
    }
  }

  .materials-catalog__item-cover--video {
    background-color: var(--black);
    color: var(--white);
  }

  .materials-catalog__item-cover--video span {
    background-color: rgba(255, 255, 255, 0.88);
    color: var(--black);
  }

  .materials-catalog__item-cover--doc {
    background-color: var(--white);
    box-shadow: inset 0 0 0 1px var(--black-10);
    color: var(--black);
  }

  .materials-catalog__item-cover--doc span {
    background-color: rgba(0, 0, 0, 0.04);
  }

  .materials-catalog__item-cover--nko {
    background-color: var(--blue);
    color: var(--blue);
  }

  .materials-catalog__item-cover--nko span {
    background-color: rgba(255, 255, 255, 0.82);
  }

  .materials-catalog__item-cover--note {
    background-color: var(--red-light);
    color: var(--red);
  }

  .materials-catalog__item-cover--note span {
    background-color: rgba(215, 74, 74, 0.12);
  }

  .materials-catalog__item a {
    color: var(--black);
    font-size: var(--f-24);
    font-weight: 400;
    line-height: 1.12;

    @media (max-width: 767px) {
      font-size: var(--f-18);
      line-height: 1.18;
    }
  }

  .materials-catalog__item span {
    margin-top: var(--p-8);
    color: var(--black-50);
    font-size: 12px;
    display: block;
  }

  .materials-catalog__item p {
    max-width: 480px;
    margin-top: var(--p-16);
    color: var(--black-50);
    font-size: 14px;
    line-height: 1.38;

    @media (max-width: 767px) {
      margin-top: var(--p-12);
      font-size: var(--f-14);
    }
  }

  .materials-catalog__route {
    margin-bottom: var(--p-48);
    display: block;

    @media (max-width: 1199.98px) {
      margin-bottom: var(--p-40);
    }

    @media (max-width: 767px) {
      margin-bottom: var(--p-32);
    }
  }

  .materials-catalog__route-block {
    padding-top: var(--p-24);
    border-top: 1px solid var(--black-10);
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--p-32);
    align-items: start;

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: var(--p-16);
    }
  }

  .materials-catalog__download {
    padding-top: var(--p-24);
    border-top: 1px solid var(--black-10);
  }

  .materials-catalog__showcase .materials-catalog__download {
    padding: var(--p-24);
    border-top: 0;
  }

  .materials-catalog__route h2 {
    font-size: var(--f-24);
    line-height: 1.05;
  }

  .materials-catalog__route ol {
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--p-16);
    counter-reset: material-route;

    @media (max-width: 767px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .materials-catalog__route li {
    min-height: 54px;
    padding-left: var(--p-12);
    border-left: 1px solid var(--black-10);
    color: var(--black-50);
    font-size: var(--f-14);
    line-height: 1.2;
    list-style: none;
    counter-increment: material-route;

    @media (max-width: 767px) {
      min-height: 0;
      padding: 0 0 var(--p-12);
      border-left: 0;
      border-bottom: 1px solid var(--black-10);
    }
  }

  .materials-catalog__route li::before {
    margin-bottom: var(--p-8);
    content: counter(material-route, decimal-leading-zero);
    color: var(--blue);
    font-size: var(--f-12);
    display: block;
  }

  .materials-catalog__route a {
    color: var(--black);
  }

  .materials-catalog__download {
    min-height: 220px;
    padding: var(--p-24);
    border-radius: 16px;
    background-color: var(--blue);
    box-shadow: none;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media (max-width: 767px) {
      min-height: 160px;
      padding: var(--p-20);
    }
  }

  .materials-catalog__download span,
  .materials-catalog__download strong,
  .materials-catalog__download a {
    color: var(--white);
  }

  .materials-catalog__download span {
    font-size: var(--f-12);
    opacity: 0.72;
  }

  .materials-catalog__download strong {
    font-size: var(--f-24);
    line-height: 1.05;
  }

  .materials-catalog__download a {
    width: fit-content;
    border-bottom: 1px solid var(--white-50);
    font-size: var(--f-14);
  }
}

@layer archive-universal {
  .archive-universal {
    padding-top: var(--p-40);
    padding-bottom: var(--p-64);
  }

  .archive-universal__hero {
    margin-bottom: var(--p-24);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--p-40);
    align-items: end;

    @media (max-width: 1199.98px) {
      grid-template-columns: 1fr;
      gap: var(--p-24);
    }
  }

  .archive-universal__headline>span {
    margin-bottom: var(--p-16);
    color: var(--blue);
    font-size: var(--f-14);
    display: block;
  }

  .archive-universal__headline h1 {
    max-width: 760px;
    margin-bottom: var(--p-20);
    font-size: var(--f-56);
    font-weight: 700;
    line-height: 0.95;
    text-wrap: balance;

    @media (max-width: 767px) {
      font-size: var(--f-36);
    }
  }

  .archive-universal__headline p {
    max-width: 640px;
    color: var(--black-50);
    font-size: var(--f-18);
    line-height: 1.42;
  }

  .archive-universal__search {
    position: relative;
    min-height: 56px;
    padding: 0 var(--p-20);
    border: 1px solid var(--black-10);
    border-radius: 999px;
    background-color: var(--white);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--p-16);
    align-items: center;

    @media (max-width: 1199.98px) {
      max-width: 520px;
    }

    @media (max-width: 767px) {
      width: 100%;
      max-width: none;
    }
  }

  .archive-universal__search label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .archive-universal__search input,
  .archive-universal__search button {
    border: 0;
    background: transparent;
    color: var(--black);
    font-size: var(--f-16);
    outline: 0;
  }

  .archive-universal__search button {
    color: var(--blue);
    cursor: pointer;
  }

  .archive-universal__chips {
    margin-bottom: var(--p-40);
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-8);
  }

  .archive-universal__chips a,
  .archive-universal__tags a {
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background-color: var(--white);
    color: var(--black);
    font-size: var(--f-14);
    line-height: 1;
    display: inline-flex;
  }

  .archive-universal__chips a.is-active,
  .archive-universal__chips a:hover,
  .archive-universal__tags a:hover {
    background-color: var(--blue);
    color: var(--white);
  }

  .archive-universal__layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--p-48);
    align-items: start;

    @media (max-width: 1199.98px) {
      grid-template-columns: 1fr;
      gap: var(--p-32);
    }
  }

  .archive-universal__aside {
    position: sticky;
    top: var(--p-24);
    display: grid;
    gap: var(--p-24);

    @media (max-width: 1199.98px) {
      position: static;
      order: 2;
      grid-template-columns: 1fr 1fr;
    }

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: var(--p-16);
    }
  }

  .archive-universal__results {
    @media (max-width: 1199.98px) {
      order: 1;
    }
  }

  .archive-universal__panel {
    padding-top: var(--p-20);
    border-top: 1px solid var(--black-10);
  }

  .archive-universal__panel h2 {
    margin-bottom: var(--p-16);
    font-size: var(--f-20);
    line-height: 1.1;
  }

  .archive-universal__panel nav {
    display: grid;
    gap: var(--p-12);
  }

  .archive-universal__panel nav a {
    color: var(--black-50);
    font-size: var(--f-14);
  }

  .archive-universal__panel nav a.is-active,
  .archive-universal__panel nav a:hover {
    color: var(--blue);
  }

  .archive-universal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-8);
  }

  .archive-universal__summary {
    margin-bottom: var(--p-16);
    padding-bottom: var(--p-20);
    border-bottom: 1px solid var(--black-10);
    display: flex;
    justify-content: space-between;
    gap: var(--p-24);

    @media (max-width: 767px) {
      flex-direction: column;
      gap: var(--p-8);
    }
  }

  .archive-universal__summary p {
    font-size: var(--f-18);
    font-weight: 700;
  }

  .archive-universal__summary span {
    color: var(--black-50);
    font-size: var(--f-14);
  }

  .archive-universal__list {
    display: grid;
    gap: var(--p-12);
  }

  .archive-universal__item {
    padding: var(--p-24);
    border-radius: 16px;
    background-color: var(--white);
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--p-24);
    align-items: start;

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: var(--p-16);
      padding: var(--p-20);
    }
  }

  .archive-universal__item--media {
    grid-template-columns: 120px 180px minmax(0, 1fr);

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

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
    }
  }

  .archive-universal__type {
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background-color: var(--blue-light);
    color: var(--blue);
    font-size: 11px;
    line-height: 1;
  }

  .archive-universal__thumb {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-8);
    overflow: hidden;
    display: block;

    @media (max-width: 1199.98px) {
      grid-column: 2;
      max-width: 260px;
    }

    @media (max-width: 767px) {
      grid-column: auto;
      max-width: none;
    }
  }

  .archive-universal__item--media .archive-universal__body {
    @media (max-width: 1199.98px) {
      grid-column: 2;
    }

    @media (max-width: 767px) {
      grid-column: auto;
    }
  }

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

  .archive-universal__body>a {
    max-width: 720px;
    color: var(--black);
    font-size: var(--f-28);
    line-height: 1.05;
    display: block;

    @media (max-width: 767px) {
      font-size: var(--f-20);
    }
  }

  .archive-universal__body p {
    max-width: 640px;
    margin-top: var(--p-16);
    color: var(--black-50);
    font-size: var(--f-16);
    line-height: 1.38;
  }

  .archive-universal__meta {
    margin-top: var(--p-20);
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-8);
  }

  .archive-universal__meta span {
    color: var(--black-50);
    font-size: 12px;
  }

  .archive-universal__pagination {
    margin-top: var(--p-32);
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-8);
  }

  .archive-universal__pagination a {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--p-12);
    border-radius: 999px;
    background-color: var(--white);
    color: var(--black);
    font-size: var(--f-14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .archive-universal__pagination a[aria-current="page"],
  .archive-universal__pagination a:hover {
    background-color: var(--blue);
    color: var(--white);
  }
}

@layer support-page {
  .support-page__contacts {
    padding-top: var(--p-40);
    padding-bottom: var(--p-64);
  }

  .support-page__contacts .contacts__row {
    align-items: start;
  }

  .support-page__contacts .contacts__content h2 {
    max-width: 760px;
  }

  .support-page__contacts .contacts__lead {
    max-width: 760px;
  }

  .support-page__contacts .contacts__form {
    width: 100%;
    margin-left: 0;
  }

  .support-page__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
    }
  }

  .support-page__fields select,
  .support-page__fields textarea {
    grid-column: 1 / -1;
  }
}

@layer single-universal {
  .single-universal {
    padding-top: var(--p-40);
    padding-bottom: var(--p-64);
  }

  .single-universal__hero {
    max-width: 940px;
    margin-bottom: var(--p-32);
  }

  .single-universal__back {
    width: fit-content;
    margin-bottom: var(--p-24);
    color: var(--blue);
    font-size: var(--f-14);
    display: inline-flex;
  }

  .single-universal__meta {
    margin-bottom: var(--p-20);
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-8);
  }

  .single-universal__meta span,
  .single-universal__meta time {
    padding: 7px 10px;
    border-radius: 999px;
    background-color: var(--white);
    color: var(--black-50);
    font-size: var(--f-12);
    line-height: 1;
  }

  .single-universal__hero h1 {
    max-width: 920px;
    margin-bottom: var(--p-24);
    font-size: var(--f-64);
    font-weight: 700;
    line-height: 0.95;
    text-wrap: balance;

    @media (max-width: 767px) {
      font-size: var(--f-40);
    }
  }

  .single-universal__hero p {
    max-width: 760px;
    color: var(--black-50);
    font-size: var(--f-20);
    line-height: 1.42;
  }

  .single-universal__cover {
    height: clamp(260px, 42vw, 520px);
    margin-bottom: var(--p-48);
    border-radius: 16px;
    overflow: hidden;
  }

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

  .single-universal__layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 760px);
    gap: var(--p-56);
    align-items: start;

    @media (max-width: 1199.98px) {
      grid-template-columns: 1fr;
      gap: var(--p-32);
    }
  }

  .single-universal__aside {
    position: sticky;
    top: var(--p-24);
    display: grid;
    gap: var(--p-16);

    @media (max-width: 1199.98px) {
      position: static;
      order: 2;
      grid-template-columns: 1fr 1fr;
    }

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
    }
  }

  .single-universal__card,
  .single-universal__nav {
    padding: var(--p-20);
    border-radius: 16px;
    background-color: var(--white);
  }

  .single-universal__card>span {
    margin-bottom: var(--p-12);
    color: var(--black-50);
    font-size: var(--f-12);
    display: block;
  }

  .single-universal__card strong {
    margin-bottom: var(--p-16);
    font-size: var(--f-20);
    line-height: 1.08;
    display: block;
  }

  .single-universal__card p {
    color: var(--black-50);
    font-size: var(--f-14);
    line-height: 1.35;
  }

  .single-universal__card--blue {
    background-color: var(--blue);
    color: var(--white);
  }

  .single-universal__card--blue span,
  .single-universal__card--blue strong,
  .single-universal__card--blue a {
    color: var(--white);
  }

  .single-universal__card--blue a {
    width: fit-content;
    border-bottom: 1px solid var(--white-50);
    font-size: var(--f-14);
  }

  .single-universal__nav {
    display: grid;
    gap: var(--p-12);

    @media (max-width: 1199.98px) {
      grid-column: 1 / -1;
      grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
    }
  }

  .single-universal__nav a {
    color: var(--black-50);
    font-size: var(--f-14);
  }

  .single-universal__nav a:hover {
    color: var(--blue);
  }

  .single-universal__content {
    min-width: 0;

    @media (max-width: 1199.98px) {
      order: 1;
    }
  }

  .single-universal__content section {
    margin-bottom: var(--p-40);
  }

  .single-universal__content h2 {
    margin-bottom: var(--p-20);
    font-size: var(--f-36);
    line-height: 1.05;
    text-wrap: balance;
  }

  .single-universal__content p,
  .single-universal__content li {
    color: var(--black);
    font-size: var(--f-18);
    line-height: 1.55;
  }

  .single-universal__content p+p {
    margin-top: var(--p-20);
  }

  .single-universal__content ul {
    padding-left: 1.2em;
  }

  .single-universal__content li {
    margin-bottom: var(--p-12);
  }

  .single-universal__content blockquote {
    margin: var(--p-40) 0;
    padding: var(--p-24);
    border-radius: 16px;
    background-color: var(--blue);
    background-image: none;
  }

  .single-universal__content blockquote p {
    color: var(--white);
    font-size: var(--f-20);
    line-height: 1.35;
  }

  .single-universal__download {
    margin-top: var(--p-48);
    padding: var(--p-24);
    border-radius: 16px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--p-24);

    @media (max-width: 767px) {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  .single-universal__download span {
    color: var(--blue);
    font-size: var(--f-12);
    display: block;
    margin-bottom: var(--p-8);
  }

  .single-universal__download strong {
    font-size: var(--f-24);
    line-height: 1.1;
  }

  .single-universal__download a {
    min-height: 44px;
    padding: 0 var(--p-20);
    border-radius: 999px;
    background-color: var(--blue);
    color: var(--white);
    display: inline-flex;
    align-items: center;
  }

  .single-universal__related {
    margin-top: var(--p-64);
    padding-top: var(--p-32);
    border-top: 1px solid var(--black-10);
  }

  .single-universal__related-head {
    margin-bottom: var(--p-24);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--p-24);

    @media (max-width: 767px) {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  .single-universal__related-head h2 {
    font-size: var(--f-40);
    line-height: 1;
  }

  .single-universal__related-head a {
    color: var(--blue);
    font-size: var(--f-14);
  }

  .single-universal__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--black-10);

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
    }
  }

  .single-universal__related-grid a {
    min-height: 150px;
    padding: var(--p-20);
    background-color: var(--white);
    color: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .single-universal__related-grid span {
    color: var(--blue);
    font-size: var(--f-12);
  }

  .single-universal__related-grid strong {
    font-size: var(--f-20);
    line-height: 1.12;
  }
}

@layer single-event {
  .single-event {
    padding-top: var(--p-40);
    padding-bottom: var(--p-64);
  }

  .single-event__hero {
    margin-bottom: var(--p-32);
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: var(--p-40);
    align-items: start;

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: var(--p-20);
    }
  }

  .single-event__date {
    position: sticky;
    top: var(--p-24);
    width: 150px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    @media (max-width: 767px) {
      position: static;
      width: 96px;
    }
  }

  .single-event__date span {
    color: var(--white);
    font-size: var(--f-56);
    font-weight: 700;
    line-height: 0.9;
  }

  .single-event__date small {
    color: var(--white);
    font-size: var(--f-14);
  }

  .single-event__back {
    width: fit-content;
    margin-bottom: var(--p-20);
    color: var(--blue);
    font-size: var(--f-14);
    display: inline-flex;
  }

  .single-event__meta {
    margin-bottom: var(--p-20);
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-8);
  }

  .single-event__meta span,
  .single-event__meta time {
    padding: 7px 10px;
    border-radius: 999px;
    background-color: var(--white);
    color: var(--black-50);
    font-size: var(--f-12);
    line-height: 1;
  }

  .single-event__headline h1 {
    max-width: 900px;
    margin-bottom: var(--p-24);
    font-size: var(--f-64);
    font-weight: 700;
    line-height: 0.95;
    text-wrap: balance;

    @media (max-width: 767px) {
      font-size: var(--f-40);
    }
  }

  .single-event__headline p {
    max-width: 760px;
    color: var(--black-50);
    font-size: var(--f-20);
    line-height: 1.42;
  }

  .single-event__media {
    position: relative;
    height: clamp(260px, 42vw, 520px);
    margin-bottom: var(--p-48);
    border-radius: 16px;
    overflow: hidden;
  }

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

  .single-event__play {
    position: absolute;
    right: var(--p-24);
    bottom: var(--p-24);
    min-height: 56px;
    padding: 0 var(--p-24);
    border-radius: 999px;
    background-color: var(--white);
    color: var(--blue);
    display: inline-flex;
    align-items: center;
  }

  .single-event__layout {
    display: grid;
    grid-template-columns: minmax(0, 760px) 320px;
    gap: var(--p-56);
    align-items: start;

    @media (max-width: 1199.98px) {
      grid-template-columns: 1fr;
      gap: var(--p-32);
    }
  }

  .single-event__content {
    min-width: 0;
  }

  .single-event__content section {
    margin-bottom: var(--p-40);
  }

  .single-event__lead {
    margin-bottom: var(--p-40);
    padding: var(--p-24);
    border-radius: 16px;
    background-color: var(--white);
  }

  .single-event__content h2 {
    margin-bottom: var(--p-20);
    font-size: var(--f-36);
    line-height: 1.05;
    text-wrap: balance;
  }

  .single-event__content p,
  .single-event__content li {
    color: var(--black);
    font-size: var(--f-18);
    line-height: 1.55;
  }

  .single-event__content ul {
    padding-left: 1.2em;
  }

  .single-event__content li {
    margin-bottom: var(--p-12);
  }

  .single-event__content blockquote {
    margin: var(--p-40) 0 0;
    padding: var(--p-24);
    border-radius: 16px;
    background-color: var(--blue);
    background-image: none;
  }

  .single-event__content blockquote p {
    color: var(--white);
    font-size: var(--f-20);
    line-height: 1.35;
  }

  .single-event__aside {
    position: sticky;
    top: var(--p-24);
    display: grid;
    gap: var(--p-16);

    @media (max-width: 1199.98px) {
      position: static;
      grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
    }
  }

  .single-event__card {
    padding: var(--p-20);
    border-radius: 16px;
    background-color: var(--white);
  }

  .single-event__card>span {
    margin-bottom: var(--p-12);
    color: var(--black-50);
    font-size: var(--f-12);
    display: block;
  }

  .single-event__card strong {
    margin-bottom: var(--p-16);
    font-size: var(--f-20);
    line-height: 1.08;
    display: block;
  }

  .single-event__card p {
    margin-bottom: var(--p-16);
    color: var(--black-50);
    font-size: var(--f-14);
    line-height: 1.35;
  }

  .single-event__card--blue {
    background-color: var(--blue);
    color: var(--white);
  }

  .single-event__card--blue span,
  .single-event__card--blue strong,
  .single-event__card--blue p,
  .single-event__card--blue a {
    color: var(--white);
  }

  .single-event__card--blue a {
    width: fit-content;
    border-bottom: 1px solid var(--white-50);
    font-size: var(--f-14);
  }

  .single-event__program,
  .single-event__related {
    margin-top: var(--p-64);
    padding-top: var(--p-32);
    border-top: 1px solid var(--black-10);
  }

  .single-event__program h2,
  .single-event__related-head h2 {
    font-size: var(--f-40);
    line-height: 1;
  }

  .single-event__timeline {
    margin-top: var(--p-24);
    display: grid;
    gap: 1px;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--black-10);
  }

  .single-event__timeline div {
    min-height: 86px;
    padding: var(--p-20);
    background-color: var(--white);
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--p-24);
    align-items: center;

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: var(--p-8);
    }
  }

  .single-event__timeline time {
    color: var(--blue);
    font-size: var(--f-20);
    font-weight: 700;
  }

  .single-event__timeline span {
    font-size: var(--f-18);
    line-height: 1.25;
  }

  .single-event__related-head {
    margin-bottom: var(--p-24);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--p-24);

    @media (max-width: 767px) {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  .single-event__related-head a {
    color: var(--blue);
    font-size: var(--f-14);
  }

  .single-event__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--black-10);

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
    }
  }

  .single-event__related-grid a {
    min-height: 150px;
    padding: var(--p-20);
    background-color: var(--white);
    color: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .single-event__related-grid span {
    color: var(--blue);
    font-size: var(--f-12);
  }

  .single-event__related-grid strong {
    font-size: var(--f-20);
    line-height: 1.12;
  }
}

/* footer */

@layer footer {
  .footer {
    padding-bottom: var(--p-32);
  }

  .footer__panel {
    min-height: 356px;
    padding: 38px 0;
    border-radius: var(--r-32);
    background-color: var(--blue-dark);
    background-image: url(../img/bg-pattern-blue.jpg);
    background-size: cover;
    background-position: center;
    color: var(--white);
  }

  .footer__panel .row {
    align-items: flex-start;
  }

  .footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 280px;
    padding-left: var(--p-16);

    @media (max-width: 1200px) {
      min-height: 1px;
    }
  }

  .footer__logo {
    display: inline-flex;
    margin-bottom: var(--p-20);
  }

  .footer__logo img {
    width: 160px;
    height: auto;
  }

  .footer__brand p {
    max-width: 255px;
    margin-bottom: auto;
    font-size: var(--f-12);
    line-height: 1.45;
    text-wrap: balance;
  }

  .footer__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--p-4);
    margin-top: var(--p-24);
  }

  .footer__contacts a:first-child {
    font-size: var(--f-20);
    font-weight: 600;
    line-height: 1.2;
  }

  .footer__contacts a:last-child {
    font-size: var(--f-12);
    opacity: 0.9;
  }

  .footer__nav {
    padding-top: 58px;

    @media (max-width: 767px) {
      padding-top: var(--p-24);
    }
  }

  .footer__nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--p-16);
  }

  .footer__nav a {
    font-size: var(--f-16);
    line-height: 1.25;
    transition: var(--trs);
  }

  .footer__nav a:hover,
  .footer__contacts a:hover,
  .footer__legal a:hover {
    opacity: 0.7;
  }

  .footer__action {
    display: flex;
    justify-content: flex-end;
    padding-top: 56px;
    padding-right: var(--p-16);

    @media (max-width: 1200px) {
      padding-top: var(--p-24);
      justify-content: start;
    }
  }

  .footer__button {
    width: 255px;
    max-width: 100%;
    min-height: 56px;
    border: 2px solid var(--white);
    border-radius: var(--r-16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--p-16) var(--p-20);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: var(--trs);
  }

  .footer__button:hover {
    background-color: var(--white);
    color: var(--blue-dark);
  }

  .footer__bottom {
    padding-top: var(--p-32);
    color: var(--black-50);
    font-size: var(--f-14);
  }

  .footer__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--p-32);
    row-gap: var(--p-8);
    padding: 0 var(--p-16);

    flex-wrap: wrap;
  }

  .footer__legal {
    display: flex;
    align-items: center;
    gap: var(--p-48);
  }

  .footer__legal a {
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: var(--trs);
  }

}

/* motion */

@layer motion {

  .hero-motion-ready .hero__shapes--item,
  .hero-motion-ready .hero__pretitle,
  .hero-motion-ready .hero__title,
  .hero-motion-ready .hero__quote,
  .hero-motion-ready .hero__desciption {
    opacity: 0;
    transform: translateY(16px);
  }

  .hero-motion-loaded .hero__shapes--item,
  .hero-motion-loaded .hero__pretitle,
  .hero-motion-loaded .hero__title,
  .hero-motion-loaded .hero__quote,
  .hero-motion-loaded .hero__desciption {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.65s ease,
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero-motion-loaded .hero__shapes--item:nth-child(1) {
    transition-delay: 80ms;
  }

  .hero-motion-loaded .hero__shapes--item:nth-child(2) {
    transition-delay: 150ms;
  }

  .hero-motion-loaded .hero__shapes--item:nth-child(3) {
    transition-delay: 220ms;
  }

  .hero-motion-loaded .hero__pretitle {
    transition-delay: 260ms;
  }

  .hero-motion-loaded .hero__title {
    transition-delay: 340ms;
  }

  .hero-motion-loaded .hero__quote {
    transition-delay: 420ms;
  }

  .hero-motion-loaded .hero__desciption {
    transition-delay: 500ms;
  }

  .hero-motion-loaded .hero__title strong::after {
    animation: hero-arrow-nudge 3.6s ease-in-out 0.9s infinite;
  }

  .hero-motion-loaded .hero__desciption img {
    animation: hero-scroll-cue 1.9s ease-in-out 1.2s infinite;
  }

  .hero-motion-loaded .hero__shapes--item {
    animation: hero-chip-breathe 4.5s ease-in-out 1.2s infinite;
  }

  .hero-motion-loaded .hero__shapes--item:nth-child(2) {
    animation-delay: 1.55s;
  }

  .hero-motion-loaded .hero__shapes--item:nth-child(3) {
    animation-delay: 1.9s;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }

  .reveal-on-scroll:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px);
  }

  .reveal-on-scroll {
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes hero-arrow-nudge {

    0%,
    100% {
      transform: translateY(-50%) translateX(0);
    }

    50% {
      transform: translateY(-50%) translateX(5px);
    }
  }

  @keyframes hero-scroll-cue {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(6px);
    }
  }

  @keyframes hero-chip-breathe {

    0%,
    100% {
      border-color: var(--white);
      background-color: var(--white-10);
    }

    50% {
      border-color: var(--white-50);
      background-color: rgba(255, 255, 255, 0.16);
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .hero-motion-ready .hero__shapes--item,
    .hero-motion-ready .hero__pretitle,
    .hero-motion-ready .hero__title,
    .hero-motion-ready .hero__quote,
    .hero-motion-ready .hero__desciption,
    .hero-motion-loaded .hero__shapes--item,
    .hero-motion-loaded .hero__pretitle,
    .hero-motion-loaded .hero__title,
    .hero-motion-loaded .hero__quote,
    .hero-motion-loaded .hero__desciption,
    .reveal-on-scroll,
    .reveal-on-scroll:not(.is-visible),
    .reveal-on-scroll.is-visible {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .hero-motion-loaded .hero__title strong::after,
    .hero-motion-loaded .hero__desciption img,
    .hero-motion-loaded .hero__shapes--item {
      animation: none;
    }
  }
}