@layer tokens, reset, base, vendor, layout, components, sections, utilities, overrides;

@layer vendor {
  :root {
    --swiper-theme-color: #007aff
  }

  :host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
  }

  .swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
  }

  .swiper-vertical>.swiper-wrapper {
    flex-direction: column
  }
	.product-detail__description ul li{
		    list-style: disc;
	}
	.product-detail__description p:first-child{
		margin-top:0;
	}
	.product-detail__description p{
		margin:14px 0;
	}
	.product-detail__description ul, .product-detail__description ol {
    padding-left: 14px;
}

  .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
  }

  .swiper-android .swiper-slide,
  .swiper-ios .swiper-slide,
  .swiper-wrapper {
    transform: translateZ(0)
  }

  .swiper-horizontal {
    touch-action: pan-y
  }

  .swiper-vertical {
    touch-action: pan-x
  }

  .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
  }

  .swiper-slide-invisible-blank {
    visibility: hidden
  }

  .swiper-autoheight,
  .swiper-autoheight .swiper-slide {
    height: auto
  }

  .swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
  }

  .swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden
  }

  .swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
  }

  .swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
  }

  .swiper-3d {
    perspective: 1200px;

    .swiper-slide,
    .swiper-cube-shadow {
      transform-style: preserve-3d
    }
  }

  .swiper-css-mode {
    >.swiper-wrapper {
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none
      }
    }

    >.swiper-wrapper>.swiper-slide {
      scroll-snap-align: start start
    }

    &.swiper-horizontal {
      >.swiper-wrapper {
        scroll-snap-type: x mandatory
      }

      >.swiper-wrapper>.swiper-slide:first-child {
        margin-inline-start: var(--swiper-slides-offset-before);
        scroll-margin-inline-start: var(--swiper-slides-offset-before)
      }

      >.swiper-wrapper>.swiper-slide:last-child {
        margin-inline-end: var(--swiper-slides-offset-after)
      }
    }

    &.swiper-vertical {
      >.swiper-wrapper {
        scroll-snap-type: y mandatory
      }

      >.swiper-wrapper>.swiper-slide:first-child {
        margin-block-start: var(--swiper-slides-offset-before);
        scroll-margin-block-start: var(--swiper-slides-offset-before)
      }

      >.swiper-wrapper>.swiper-slide:last-child {
        margin-block-end: var(--swiper-slides-offset-after)
      }
    }

    &.swiper-free-mode {
      >.swiper-wrapper {
        scroll-snap-type: none
      }

      >.swiper-wrapper>.swiper-slide {
        scroll-snap-align: none
      }
    }

    &.swiper-centered {
      >.swiper-wrapper:before {
        content: "";
        flex-shrink: 0;
        order: 9999
      }

      >.swiper-wrapper>.swiper-slide {
        scroll-snap-align: center center;
        scroll-snap-stop: always
      }
    }

    &.swiper-centered.swiper-horizontal {
      >.swiper-wrapper>.swiper-slide:first-child {
        margin-inline-start: var(--swiper-centered-offset-before)
      }

      >.swiper-wrapper:before {
        height: 100%;
        min-height: 1px;
        width: var(--swiper-centered-offset-after)
      }
    }

    &.swiper-centered.swiper-vertical {
      >.swiper-wrapper>.swiper-slide:first-child {
        margin-block-start: var(--swiper-centered-offset-before)
      }

      >.swiper-wrapper:before {
        width: 100%;
        min-width: 1px;
        height: var(--swiper-centered-offset-after)
      }
    }
  }

  .swiper-3d {

    .swiper-slide-shadow,
    .swiper-slide-shadow-left,
    .swiper-slide-shadow-right,
    .swiper-slide-shadow-top,
    .swiper-slide-shadow-bottom {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10
    }

    .swiper-slide-shadow {
      background: #00000026
    }

    .swiper-slide-shadow-left {
      background-image: linear-gradient(to left, #00000080, #0000)
    }

    .swiper-slide-shadow-right {
      background-image: linear-gradient(to right, #00000080, #0000)
    }

    .swiper-slide-shadow-top {
      background-image: linear-gradient(to top, #00000080, #0000)
    }

    .swiper-slide-shadow-bottom {
      background-image: linear-gradient(to bottom, #00000080, #0000)
    }
  }

  .swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
  }

  .swiper:not(.swiper-watch-progress),
  .swiper-watch-progress .swiper-slide-visible {
    .swiper-lazy-preloader {
      animation: swiper-preloader-spin 1s infinite linear
    }
  }

  .swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
  }

  .swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
  }

  @keyframes swiper-preloader-spin {
    0% {
      transform: rotate(0)
    }

    to {
      transform: rotate(360deg)
    }
  }
}

@layer vendor {
  .swiper-fade {
    &.swiper-free-mode {
      .swiper-slide {
        transition-timing-function: ease-out
      }
    }

    .swiper-slide {
      pointer-events: none;
      transition-property: opacity;

      .swiper-slide {
        pointer-events: none
      }
    }

    .swiper-slide-active {
      pointer-events: auto;

      .swiper-slide-active {
        pointer-events: auto
      }
    }
  }
}

@layer vendor {
  :root {
    --f-button-width: 40px;
    --f-button-height: 40px;
    --f-button-border: 0;
    --f-button-border-radius: 0;
    --f-button-color: #374151;
    --f-button-bg: #f8f8f8;
    --f-button-shadow: none;
    --f-button-transition: all .15s ease;
    --f-button-transform: none;
    --f-button-outline-width: 1px;
    --f-button-outline-color: rgba(0, 0, 0, .7);
    --f-button-svg-width: 20px;
    --f-button-svg-height: 20px;
    --f-button-svg-stroke-width: 1.5;
    --f-button-svg-fill: none;
    --f-button-svg-filter: none;
    --f-button-svg-opacity: 1;
    --f-button-svg-disabled-opacity: .5;
    --f-button-svg-transition: opacity .15s ease;
    --f-button-svg-transform: none
  }

  .f-button {
    width: var(--f-button-width);
    height: var(--f-button-height);
    border: var(--f-button-border);
    border-radius: var(--f-button-border-radius);
    color: var(--f-button-color);
    background: var(--f-button-bg);
    box-shadow: var(--f-button-shadow);
    transform: var(--f-button-transform);
    transition: var(--f-button-transition);
    backdrop-filter: var(--f-button-backdrop-filter);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    position: relative;
    margin: 0;
    padding: 0;
    pointer-events: all;
    cursor: pointer;
    overflow: hidden
  }

  @media(hover:hover) {
    .f-button:hover:not([aria-disabled]) {
      color: var(--f-button-hover-color, var(--f-button-color));
      background-color: var(--f-button-hover-bg, var(--f-button-bg))
    }
  }

  .f-button:active:not([aria-disabled]) {
    color: var(--f-button-active-color, var(--f-button-hover-color, var(--f-button-color)));
    background-color: var(--f-button-active-bg, var(--f-button-hover-bg, var(--f-button-bg)))
  }

  .f-button:focus {
    outline: none
  }

  .f-button:focus-visible {
    outline: var(--f-button-outline-width) solid var(--f-button-outline-color);
    outline-offset: var(--f-button-outline-offset)
  }

  .f-button svg {
    width: var(--f-button-svg-width);
    height: var(--f-button-svg-height);
    transform: var(--f-button-svg-transform);
    fill: var(--f-button-svg-fill);
    filter: var(--f-button-svg-filter);
    opacity: var(--f-button-svg-opacity, 1);
    transition: var(--f-button-svg-transition);
    stroke: currentColor;
    stroke-width: var(--f-button-svg-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none
  }

  .f-button[aria-disabled] {
    cursor: default
  }

  .f-button[aria-disabled] svg {
    opacity: var(--f-button-svg-disabled-opacity)
  }

  [data-panzoom-action=toggleFS] g:first-child {
    display: flex
  }

  [data-panzoom-action=toggleFS] g:last-child {
    display: none
  }

  .in-fullscreen [data-panzoom-action=toggleFS] g:first-child {
    display: none
  }

  .in-fullscreen [data-panzoom-action=toggleFS] g:last-child {
    display: flex
  }

  [data-autoplay-action=toggle] svg g:first-child {
    display: flex
  }

  [data-autoplay-action=toggle] svg g:last-child {
    display: none
  }

  .has-autoplay [data-autoplay-action=toggle] svg g:first-child {
    display: none
  }

  .has-autoplay [data-autoplay-action=toggle] svg g:last-child {
    display: flex
  }

  :fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:first-child {
    display: none
  }

  :fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:last-child {
    display: flex
  }

  :root {
    --f-spinner-color-1: rgba(0, 0, 0, .1);
    --f-spinner-color-2: rgba(17, 24, 28, .8);
    --f-spinner-width: 50px;
    --f-spinner-height: 50px;
    --f-spinner-border-radius: 50%;
    --f-spinner-border-width: 4px
  }

  .f-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    width: var(--f-spinner-width);
    height: var(--f-spinner-height);
    translate: -50% -50%;
    border: var(--f-spinner-border-width) solid var(--f-spinner-color-1);
    border-top-color: var(--f-spinner-color-2);
    border-radius: var(--f-spinner-border-radius);
    animation: f-spinner .75s linear infinite, f-fadeIn .2s ease .2s both
  }

  @keyframes f-spinner {
    to {
      rotate: 360deg
    }
  }

  .f-panzoom,
  .f-zoomable {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column
  }

  .f-panzoom:before,
  .f-panzoom:after,
  .f-zoomable:before,
  .f-zoomable:after {
    display: block;
    content: ""
  }

  .f-panzoom:not(.has-controls):before,
  .f-zoomable:not(.has-controls):before {
    margin-bottom: auto
  }

  .f-panzoom:after,
  .f-zoomable:after {
    margin-top: auto
  }

  .f-panzoom.in-fullscreen,
  .f-zoomable.in-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    z-index: 9999
  }

  .f-panzoom__wrapper {
    position: relative;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%
  }

  .f-panzoom__wrapper.will-zoom-out {
    cursor: zoom-out
  }

  .f-panzoom__wrapper.can-drag {
    cursor: move;
    cursor: grab
  }

  .f-panzoom__wrapper.will-zoom-in {
    cursor: zoom-in
  }

  .f-panzoom__wrapper.is-dragging {
    cursor: move;
    cursor: grabbing
  }

  .f-panzoom__wrapper.has-error {
    display: none
  }

  .f-panzoom__content {
    display: block;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%
  }

  .f-panzoom__content.is-lazyloading,
  .f-panzoom__content.has-lazyerror {
    visibility: hidden
  }

  img.f-panzoom__content {
    width: auto;
    height: auto;
    vertical-align: top;
    object-fit: contain;
    transition: none;
    user-select: none
  }

  .f-panzoom__wrapper>.f-panzoom__content {
    visibility: hidden
  }

  .f-panzoom__viewport {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10
  }

  .f-panzoom__viewport>.f-panzoom__content {
    width: 100%;
    height: 100%;
    object-fit: fill
  }

  picture.f-panzoom__content img {
    vertical-align: top;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    transition: none;
    user-select: none
  }

  .f-panzoom__protected {
    position: absolute;
    inset: 0;
    z-index: 1;
    user-select: none
  }

  html.with-panzoom-in-fullscreen {
    overflow: hidden
  }

  .f-fadeIn {
    animation: var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;
    z-index: 2
  }

  .f-fadeOut {
    animation: var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;
    z-index: 1
  }

  @keyframes f-fadeIn {
    0% {
      opacity: 0
    }

    to {
      opacity: 1
    }
  }

  @keyframes f-fadeOut {
    to {
      opacity: 0
    }
  }

  .f-crossfadeIn {
    animation: var(--f-transition-duration, .2s) ease both f-crossfadeIn;
    z-index: 2
  }

  .f-crossfadeOut {
    animation: calc(var(--f-transition-duration, .2s) * .2) ease calc(var(--f-transition-duration, .2s) * .8) both f-crossfadeOut;
    z-index: 1
  }

  @keyframes f-crossfadeIn {
    0% {
      opacity: 0
    }

    to {
      opacity: 1
    }
  }

  @keyframes f-crossfadeOut {
    to {
      opacity: 0
    }
  }

  .is-horizontal .f-slideIn.from-next {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideInNextX
  }

  .is-horizontal .f-slideIn.from-prev {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideInPrevX
  }

  .is-horizontal .f-slideOut.to-next {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideOutNextX
  }

  .is-horizontal .f-slideOut.to-prev {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideOutPrevX
  }

  @keyframes f-slideInPrevX {
    0% {
      transform: translate(calc(100% + var(--f-carousel-gap, 0)))
    }

    to {
      transform: translateZ(0)
    }
  }

  @keyframes f-slideInNextX {
    0% {
      transform: translate(calc(-100% - var(--f-carousel-gap, 0)))
    }

    to {
      transform: translateZ(0)
    }
  }

  @keyframes f-slideOutNextX {
    to {
      transform: translate(calc(-100% - var(--f-carousel-gap, 0)))
    }
  }

  @keyframes f-slideOutPrevX {
    to {
      transform: translate(calc(100% + var(--f-carousel-gap, 0)))
    }
  }

  .is-vertical .f-slideIn.from-next {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideInNextY
  }

  .is-vertical .f-slideIn.from-prev {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideInPrevY
  }

  .is-vertical .f-slideOut.to-next {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideOutNextY
  }

  .is-vertical .f-slideOut.to-prev {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideOutPrevY
  }

  @keyframes f-slideInPrevY {
    0% {
      transform: translateY(calc(100% + var(--f-carousel-gap, 0)))
    }

    to {
      transform: translateZ(0)
    }
  }

  @keyframes f-slideInNextY {
    0% {
      transform: translateY(calc(-100% - var(--f-carousel-gap, 0)))
    }

    to {
      transform: translateZ(0)
    }
  }

  @keyframes f-slideOutNextY {
    to {
      transform: translateY(calc(-100% - var(--f-carousel-gap, 0)))
    }
  }

  @keyframes f-slideOutPrevY {
    to {
      transform: translateY(calc(100% + var(--f-carousel-gap, 0)))
    }
  }

  .f-zoomInUp {
    animation: var(--f-transition-duration, .3s) ease both f-zoomInUp
  }

  .f-zoomOutDown {
    animation: var(--f-transition-duration, .3s) ease both f-zoomOutDown
  }

  @keyframes f-zoomInUp {
    0% {
      transform: scale(var(--f-zoomInUp-scale, .975)) translate3d(var(--f-zoomInUp-x, 0), var(--f-zoomInUp-y, 16px), 0);
      opacity: var(--f-zoomInUp-opacity, 0)
    }

    to {
      transform: scale(1) translateZ(0);
      opacity: 1
    }
  }

  @keyframes f-zoomOutDown {
    to {
      transform: scale(var(--f-zoomOutDown-scale, .975)) translate3d(var(--f-zoomOutDown-x, 0), var(--f-zoomOutDown-y, 16px), 0);
      opacity: 0
    }
  }

  .f-throwOutUp {
    animation: var(--f-throwOutUp-duration, .2s) ease-out both f-throwOutUp
  }

  .f-throwOutDown {
    animation: var(--f-throwOutDown-duration, .2s) ease-out both f-throwOutDown
  }

  @keyframes f-throwOutUp {
    to {
      transform: translate3d(0, calc(var(--f-throwOutUp-y, 150px) * -1), 0);
      opacity: 0
    }
  }

  @keyframes f-throwOutDown {
    to {
      transform: translate3d(0, var(--f-throwOutDown-y, 150px), 0);
      opacity: 0
    }
  }

  .has-iframe .f-html,
  .has-pdf .f-html,
  .has-gmap .f-html {
    width: 100%;
    height: 100%;
    min-height: 1px;
    overflow: visible
  }

  .has-pdf .f-html,
  .has-gmap .f-html {
    padding: 0
  }

  .f-html {
    position: relative;
    box-sizing: border-box;
    margin: var(--f-html-margin, 0);
    padding: var(--f-html-padding, 2rem);
    color: var(--f-html-color, currentColor);
    background: var(--f-html-bg)
  }

  .is-loading>.f-html {
    opacity: 0
  }

  .f-html.is-error {
    text-align: center
  }

  .f-iframe {
    display: block;
    margin: 0;
    border: 0;
    height: 100%;
    width: 100%
  }

  .f-caption {
    align-self: center;
    flex-shrink: 0;
    margin: var(--f-caption-margin);
    padding: var(--f-caption-padding, 16px 8px);
    max-width: 100%;
    max-height: calc(80vh - 100px);
    overflow: auto;
    overflow-wrap: anywhere;
    line-height: var(--f-caption-line-height);
    color: var(--f-caption-color);
    background: var(--f-caption-bg);
    font: var(--f-caption-font);
    text-wrap: balance
  }

  .has-html5video .f-html,
  .has-youtube .f-html,
  .has-vimeo .f-html {
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 1px;
    overflow: visible;
    max-width: var(--f-video-width, 960px);
    max-height: var(--f-video-height, 540px);
    aspect-ratio: var(--f-video-aspect-ratio);
    background: var(--f-video-bg, rgba(0, 0, 0, .9))
  }

  .f-html5video {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
    background: transparent
  }

  .f-button.is-arrow {
    --f-button-width: var(--f-arrow-width, 46px);
    --f-button-height: var(--f-arrow-height, 46px);
    --f-button-svg-width: var(--f-arrow-svg-width, 24px);
    --f-button-svg-height: var(--f-arrow-svg-height, 24px);
    --f-button-svg-stroke-width: var(--f-arrow-svg-stroke-width, 1.75);
    --f-button-border-radius: var(--f-arrow-border-radius, unset);
    --f-button-bg: var(--f-arrow-bg, transparent);
    --f-button-hover-bg: var(--f-arrow-hover-bg, var(--f-arrow-bg));
    --f-button-active-bg: var(--f-arrow-active-bg, var(--f-arrow-hover-bg));
    --f-button-shadow: var(--f-arrow-shadow);
    --f-button-color: var(--f-arrow-color);
    --f-button-hover-color: var(--f-arrow-hover-color, var(--f-arrow-color));
    --f-button-active-color: var(--f-arrow-active-color, var(--f-arrow-hover-color));
    overflow: visible
  }

  .f-button.is-arrow.is-prev,
  .f-button.is-arrow.is-next {
    position: absolute;
    transform: translate(0);
    z-index: 20
  }

  .is-horizontal .f-button.is-arrow.is-prev,
  .is-horizontal .f-button.is-arrow.is-next {
    inset: 50% auto auto;
    transform: translateY(-50%)
  }

  .is-horizontal.is-ltr .f-button.is-arrow.is-prev {
    left: var(--f-arrow-pos, 0)
  }

  .is-horizontal.is-ltr .f-button.is-arrow.is-next {
    right: var(--f-arrow-pos, 0)
  }

  .is-horizontal.is-rtl .f-button.is-arrow.is-prev {
    right: var(--f-arrow-pos, 0);
    transform: translateY(-50%) rotateY(180deg)
  }

  .is-horizontal.is-rtl .f-button.is-arrow.is-next {
    left: var(--f-arrow-pos, 0);
    transform: translateY(-50%) rotateY(180deg)
  }

  .is-vertical.is-ltr .f-button.is-arrow.is-prev,
  .is-vertical.is-rtl .f-button.is-arrow.is-prev {
    top: var(--f-arrow-pos, 0);
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%)
  }

  .is-vertical.is-ltr .f-button.is-arrow.is-next,
  .is-vertical.is-rtl .f-button.is-arrow.is-next {
    top: auto;
    right: auto;
    bottom: var(--f-arrow-pos, 0);
    left: 50%;
    transform: translate(-50%)
  }

  .is-vertical .f-button.is-arrow.is-prev svg,
  .is-vertical .f-button.is-arrow.is-next svg {
    transform: rotate(90deg)
  }

  .f-carousel__toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin: var(--f-toolbar-margin, 0);
    padding: var(--f-toolbar-padding, 8px);
    line-height: var(--f-toolbar-line-height);
    background: var(--f-toolbar-bg, none);
    box-shadow: var(--f-toolbar-shadow, none);
    backdrop-filter: var(--f-toolbar-backdrop-filter);
    position: relative;
    z-index: 20;
    color: var(--f-toolbar-color, currentColor);
    font-size: var(--f-toolbar-font-size, 17px);
    font-weight: var(--f-toolbar-font-weight, inherit);
    font-family: var(--f-toolbar-font, -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif);
    text-shadow: var(--f-toolbar-text-shadow);
    text-align: center;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: subpixel-antialiased;
    white-space: nowrap;
    pointer-events: none
  }

  .f-carousel__toolbar.is-absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0
  }

  .f-carousel__toolbar .f-button:focus-visible {
    position: relative;
    z-index: 1
  }

  .f-carousel__toolbar__column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--f-toolbar-gap, 0)
  }

  .f-carousel__toolbar__column.is-left {
    display: flex;
    justify-self: flex-start;
    justify-content: flex-start
  }

  .f-carousel__toolbar__column.is-middle {
    display: flex;
    justify-content: center
  }

  .f-carousel__toolbar__column.is-right {
    display: flex;
    justify-self: flex-end;
    justify-content: flex-end;
    flex-flow: nowrap
  }

  .f-carousel__toolbar__column {
    pointer-events: none
  }

  .f-carousel__toolbar__column>* {
    pointer-events: all
  }

  .f-counter {
    position: relative;
    display: flex;
    flex-direction: row;
    cursor: default;
    user-select: none;
    margin: var(--f-counter-margin, 0);
    padding: var(--f-counter-padding, 4px);
    line-height: var(--f-counter-line-height);
    background: var(--f-counter-bg);
    border-radius: var(--f-counter-border-radius)
  }

  .f-counter span {
    padding: 0 var(--f-counter-gap, 4px)
  }

  :root {
    --f-thumbs-gap: 8px;
    --f-thumbs-margin: 0;
    --f-thumbs-padding-x: 8px;
    --f-thumbs-padding-y: 8px;
    --f-thumbs-bg: transparent;
    --f-thumbs-transition: max-height .3s ease, max-width .3s ease, padding .3s ease;
    --f-thumbs-z-index: 1;
    --f-thumbs-viewport-padding-x: 0px;
    --f-thumbs-viewport-padding-y: 0px;
    --f-thumb-width: 94px;
    --f-thumb-height: 76px;
    --f-thumb-clip-width: 46px;
    --f-thumb-extra-gap: 16px;
    --f-thumb-opacity: 1;
    --f-thumb-transition: opacity .3s ease, transform .15s ease;
    --f-thumb-border: none;
    --f-thumb-border-radius: 4px;
    --f-thumb-shadow: none;
    --f-thumb-bg: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .05));
    --f-thumb-focus-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;
    --f-thumb-selected-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;
    --f-thumb-border-transition: all .1s ease;
    --f-thumb-img-width: 100%;
    --f-thumb-img-height: 100%;
    --f-thumb-img-fit: cover;
    --f-thumb-img-position: 50% 20%
  }

  .f-thumbs {
    --f-carousel-slide-width: var(--f-thumb-width);
    --f-carousel-slide-height: var(--f-thumb-height);
    --f-carousel-gap: var(--f-thumbs-gap);
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    margin: var(--f-thumbs-margin);
    padding: var(--f-thumbs-padding-y) var(--f-thumbs-padding-x);
    overflow: hidden;
    background: var(--f-thumbs-bg);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: var(--f-thumbs-transition);
    z-index: var(--f-thumbs-z-index)
  }

  .f-thumbs.is-horizontal {
    max-height: calc(var(--f-carousel-slide-height) + var(--f-thumbs-padding-y) * 2)
  }

  .f-thumbs.is-horizontal.is-hidden {
    max-height: 0;
    --f-thumbs-padding-y: 0
  }

  .f-thumbs.is-vertical {
    max-width: calc(var(--f-carousel-slide-width) + var(--f-thumbs-padding-x) * 2)
  }

  .f-thumbs.is-vertical.is-hidden {
    max-width: 0;
    --f-thumbs-padding-x: 0
  }

  .f-thumbs.is-scrollable.is-hidden {
    max-height: 0;
    --f-thumbs-padding-y: 0
  }

  .f-thumbs.is-ltr {
    direction: ltr
  }

  .f-thumbs.is-rtl {
    direction: rtl
  }

  .f-thumbs img {
    display: block;
    width: var(--f-thumb-img-width);
    height: var(--f-thumb-img-height);
    object-fit: var(--f-thumb-img-fit);
    object-position: var(--f-thumb-img-position);
    pointer-events: none;
    border-radius: inherit;
    color: transparent
  }

  .f-thumbs img[data-lazy-src] {
    visibility: hidden
  }

  .f-thumbs img.has-lazyerror {
    display: none
  }

  .f-thumbs__viewport {
    box-sizing: border-box;
    height: 100%;
    padding: var(--f-thumbs-viewport-padding-y) var(--f-thumbs-viewport-padding-x);
    overflow: visible;
    display: grid
  }

  .f-thumbs__slide {
    position: relative;
    box-sizing: border-box;
    grid-area: 1/1;
    width: var(--f-carousel-slide-width);
    height: var(--f-carousel-slide-height);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    overflow: visible
  }

  .f-thumbs__slide:hover button {
    opacity: var(--f-thumb-hover-opacity, 1);
    transform: var(--f-thumb-hover-transform, none)
  }

  .f-thumbs__slide:hover button:after {
    border: var(--f-thumb-hover-border, none);
    box-shadow: var(--f-thumb-hover-shadow, var(--f-thumb-shadow))
  }

  .f-thumbs__slide button {
    all: unset;
    display: block;
    margin: auto;
    padding: 0;
    position: relative;
    overflow: visible;
    width: 100%;
    height: 100%;
    outline: none;
    transition: var(--f-thumb-transition);
    border-radius: var(--f-thumb-border-radius);
    opacity: var(--f-thumb-opacity);
    transform: var(--f-thumb-transform);
    background: var(--f-thumb-bg)
  }

  .f-thumbs__slide button:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: var(--f-thumb-border-transition);
    border-radius: inherit;
    border: var(--f-thumb-border);
    box-shadow: var(--f-thumb-shadow)
  }

  .f-thumbs__slide button:focus-within {
    opacity: var(--f-thumb-focus-opacity, 1);
    transform: var(--f-thumb-focus-transform, none)
  }

  .f-thumbs__slide button:focus-within:after {
    border: var(--f-thumb-focus-border, none);
    box-shadow: var(--f-thumb-focus-shadow, var(--f-thumb-shadow))
  }

  .f-thumbs__slide:active {
    opacity: var(--f-thumb-active-opacity, 1);
    transform: var(--f-thumb-active-transform, none)
  }

  .f-thumbs__slide:active:after {
    border: var(--f-thumb-active-border, none);
    box-shadow: var(--f-thumb-active-shadow, var(--f-thumb-shadow))
  }

  .f-thumbs__slide.is-selected {
    z-index: 2
  }

  .f-thumbs__slide.is-selected button {
    opacity: var(--f-thumb-selected-opacity, 1);
    transform: var(--f-thumb-selected-transform, none)
  }

  .f-thumbs__slide.is-selected button:after {
    border: var(--f-thumb-selected-border, none);
    box-shadow: var(--f-thumb-selected-shadow, var(--f-thumb-shadow))
  }

  .f-thumbs.is-modern {
    --f-carousel-slide-width: calc(var(--f-thumb-clip-width) + var(--f-thumbs-gap));
    --f-carousel-slide-height: var(--f-thumb-height);
    --f-carousel-gap: 0;
    --width-diff: calc((var(--f-thumb-width) - var(--f-thumb-clip-width)))
  }

  .f-thumbs.is-modern .f-thumbs__viewport {
    width: calc(100% + var(--f-carousel-slide-width) * 2 + var(--f-thumbs-padding-x));
    margin-inline: calc((var(--f-carousel-slide-width) + var(--f-thumbs-padding-x)) * -1)
  }

  .f-thumbs.is-modern .f-thumbs__slide {
    --clip-shift: calc((var(--width-diff) * .5) * var(--progress));
    --clip-path: inset(0 var(--clip-shift) round var(--f-thumb-border-radius, 0));
    padding: 0;
    overflow: visible;
    left: var(--shift, 0);
    will-change: left;
    transition: left var(--f-transition-duration) var(--f-transition-easing)
  }

  .f-thumbs.is-modern .f-thumbs__slide button {
    display: block;
    margin-inline: 50%;
    width: var(--f-thumb-width);
    clip-path: var(--clip-path);
    border: none;
    box-shadow: none;
    transition: clip-path var(--f-transition-duration) var(--f-transition-easing), opacity var(--f-thumb-transition-duration, .2s) var(--f-thumb-transition-easing, ease)
  }

  .f-thumbs.is-modern .f-thumbs__slide button:after {
    display: none
  }

  .f-thumbs.is-modern .f-thumbs__slide:focus:not(:focus-visible) {
    outline: none
  }

  .f-thumbs.is-modern .f-thumbs__slide:focus-within:not(.is-selected) button:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--clip-shift);
    bottom: 0;
    right: var(--clip-shift);
    transition: border var(--f-transition-duration) var(--f-transition-easing), box-shadow var(--f-transition-duration) var(--f-transition-easing);
    border-radius: inherit;
    border: var(--f-thumb-focus-border, none);
    box-shadow: var(--f-thumb-focus-shadow, none)
  }

  .f-thumbs.is-modern {
    --f-transition-duration: .25s;
    --f-transition-easing: ease-out
  }

  .f-thumbs.is-modern.is-syncing {
    --f-transition-duration: 0s
  }

  .f-thumbs.is-scrollable .f-thumbs__viewport {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--f-thumb-width), 1fr));
    grid-auto-rows: var(--f-thumb-height);
    gap: var(--f-thumbs-gap);
    overflow: auto;
    overscroll-behavior: contain;
    user-select: none
  }

  .f-thumbs.is-scrollable .f-thumbs__viewport .f-thumbs__slide {
    grid-area: auto;
    display: block;
    position: relative;
    max-width: 100%;
    width: var(--f-thumb-width);
    height: var(--f-thumb-height);
    cursor: pointer;
    outline: none
  }

  :root {
    --f-progressbar-height: 3px;
    --f-progressbar-color: var(--f-carousel-theme-color, #575ad6);
    --f-progressbar-opacity: 1;
    --f-progressbar-z-index: 30
  }

  .f-progressbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--f-progressbar-z-index);
    height: var(--f-progressbar-height);
    transform: scaleX(0);
    transform-origin: 0;
    opacity: var(--f-progressbar-opacity);
    background: var(--f-progressbar-color);
    user-select: none;
    pointer-events: none;
    animation-name: f-progressbar;
    animation-play-state: running;
    animation-timing-function: linear
  }

  .f-progressbar:empty {
    display: block
  }

  button>.f-progressbar {
    --f-progressbar-height: 100%;
    --f-progressbar-opacity: .2
  }

  @keyframes f-progressbar {
    0% {
      transform: scaleX(0)
    }

    to {
      transform: scaleX(1)
    }
  }

  [data-fullscreen-action=toggle] svg g:first-child {
    display: flex
  }

  [data-fullscreen-action=toggle] svg g:last-child {
    display: none
  }

  :fullscreen [data-fullscreen-action=toggle] svg g:first-child {
    display: none
  }

  :fullscreen [data-fullscreen-action=toggle] svg g:last-child {
    display: flex
  }

  .in-fullscreen-mode>.f-carousel {
    flex: 1;
    min-width: 0 !important;
    min-height: 0 !important
  }

  html.with-fancybox {
    width: auto;
    overflow: visible;
    scroll-behavior: auto
  }

  html.with-fancybox body.hide-scrollbar {
    width: auto;
    margin-right: calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px));
    overflow: hidden !important;
    overscroll-behavior-y: none
  }

  .fancybox__dialog {
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: 100%;
    height: 100vh;
    max-height: unset;
    max-width: unset;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
    touch-action: none;
    overscroll-behavior: contain
  }

  .fancybox__dialog:focus {
    outline: none
  }

  .fancybox__dialog::backdrop {
    opacity: 0
  }

  @supports (height: 100dvh) {
    .fancybox__dialog {
      height: 100dvh
    }
  }

  .fancybox__dialog *:empty {
    display: block
  }

  .fancybox__container {
    --fancybox-color: #dbdbdb;
    --fancybox-backdrop-bg: rgba(24, 24, 27, .95);
    --f-toolbar-margin: 0;
    --f-toolbar-padding: 8px;
    --f-toolbar-gap: 0;
    --f-toolbar-color: #ddd;
    --f-toolbar-font-size: 16px;
    --f-toolbar-font-weight: 500;
    --f-toolbar-font: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
    --f-toolbar-line-height: var(--f-button-height);
    --f-toolbar-text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
    --f-toolbar-shadow: none;
    --f-toolbar-bg: none;
    --f-counter-margin: 0;
    --f-counter-padding: 0px 10px;
    --f-counter-gap: 4px;
    --f-counter-line-height: var(--f-button-height);
    --f-carousel-gap: 17px;
    --f-carousel-slide-width: 100%;
    --f-carousel-slide-height: 100%;
    --f-carousel-slide-padding: 0;
    --f-carousel-slide-bg: unset;
    --f-html-color: #222;
    --f-html-bg: #fff;
    --f-error-color: #fff;
    --f-error-bg: #333;
    --f-caption-margin: 0;
    --f-caption-padding: 16px 8px;
    --f-caption-color: var(--fancybox-color, #dbdbdb);
    --f-caption-bg: transparent;
    --f-caption-font: inherit;
    --f-caption-line-height: 1.375;
    --f-spinner-color-1: rgba(255, 255, 255, .2);
    --f-spinner-color-2: rgba(255, 255, 255, .8);
    --f-spinner-width: 50px;
    --f-spinner-height: 50px;
    --f-spinner-border-radius: 50%;
    --f-spinner-border-width: 4px;
    --f-progressbar-color: rgba(255, 255, 255);
    --f-button-width: 46px;
    --f-button-height: 46px;
    --f-button-color: #ddd;
    --f-button-hover-color: #fff;
    --f-button-outline-width: 1px;
    --f-button-outline-color: rgba(255, 255, 255, .75);
    --f-button-outline-offset: 0px;
    --f-button-bg: rgba(54, 54, 54, .75);
    --f-button-border: 0;
    --f-button-border-radius: 0;
    --f-button-shadow: none;
    --f-button-transition: all .2s ease;
    --f-button-transform: none;
    --f-button-svg-width: 24px;
    --f-button-svg-height: 24px;
    --f-button-svg-stroke-width: 1.75;
    --f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .01)), drop-shadow(1px 2px 1px rgba(24, 24, 27, .05));
    --f-button-svg-fill: none;
    --f-button-svg-disabled-opacity: .5;
    --f-arrow-pos: 32px;
    --f-arrow-width: 50px;
    --f-arrow-height: 50px;
    --f-arrow-svg-width: 24px;
    --f-arrow-svg-height: 24px;
    --f-arrow-svg-stroke-width: 2.5;
    --f-arrow-border-radius: 50%;
    --f-arrow-bg: rgba(54, 54, 54, .65);
    --f-arrow-color: #ddd;
    --f-arrow-hover-color: #fff;
    --f-close-button-width: 30px;
    --f-close-button-height: 30px;
    --f-close-button-svg-width: 24px;
    --f-close-button-svg-height: 24px;
    --f-close-button-svg-stroke-width: 1.75;
    --f-close-border-radius: 4px;
    --f-close-button-color: #fff;
    --f-close-button-hover-color: #fff;
    --f-close-button-bg: transparent;
    --f-close-button-hover-bg: transparent;
    --f-close-button-active-bg: transparent;
    --f-thumbs-margin: 0px;
    --f-thumbs-padding-x: 8px;
    --f-thumbs-padding-y: 8px;
    --f-thumbs-bg: none;
    --f-thumb-transition: all .2s ease;
    --f-thumb-width: 94px;
    --f-thumb-height: 76px;
    --f-thumb-opacity: 1;
    --f-thumb-border: none;
    --f-thumb-shadow: none;
    --f-thumb-transform: none;
    --f-thumb-focus-opacity: 1;
    --f-thumb-focus-border: none;
    --f-thumb-focus-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);
    --f-thumb-focus-transform: none;
    --f-thumb-hover-opacity: 1;
    --f-thumb-hover-border: none;
    --f-thumb-hover-transform: none;
    --f-thumb-active-opacity: var(--f-thumb-hover-opacity);
    --f-thumb-active-border: var(--f-thumb-hover-border);
    --f-thumb-active-transform: var(--f-thumb-hover-transform);
    --f-thumb-selected-opacity: 1;
    --f-thumb-selected-border: none;
    --f-thumb-selected-shadow: inset 0 0 0 2px #fff;
    --f-thumb-selected-transform: none;
    --f-scrollbar-width: 7px;
    --f-scrollbar-track-bg: #444;
    --f-scrollbar-track-border-radius: 10px;
    --f-scrollbar-track-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
    --f-scrollbar-thumb-bg: #ddd;
    --f-scrollbar-thumb-border-radius: 10px
  }

  .fancybox__container[theme=light] {
    --fancybox-color: #222;
    --fancybox-backdrop-bg: rgba(255, 255, 255, .97);
    --f-toolbar-color: var(--fancybox-color, #222);
    --f-toolbar-text-shadow: none;
    --f-toolbar-font-weight: 400;
    --f-html-color: var(--fancybox-color, #222);
    --f-html-bg: #fff;
    --f-error-color: #555;
    --f-error-bg: #fff;
    --f-video-bg: #fff;
    --f-caption-color: #333;
    --f-spinner-color-1: rgba(0, 0, 0, .2);
    --f-spinner-color-2: rgba(0, 0, 0, .8);
    --f-spinner-border-width: 3.5px;
    --f-progressbar-color: rgba(111, 111, 116);
    --f-button-color: #333;
    --f-button-hover-color: #000;
    --f-button-outline-color: rgba(0, 0, 0, .85);
    --f-button-bg: rgba(255, 255, 255, .85);
    --f-button-svg-stroke-width: 1.3;
    --f-button-svg-filter: none;
    --f-arrow-bg: rgba(255, 255, 255, .85);
    --f-arrow-color: #333;
    --f-arrow-hover-color: #000;
    --f-arrow-svg-stroke-width: 1.3;
    --f-close-button-color: #555;
    --f-close-button-hover-color: #000;
    --f-thumb-bg: linear-gradient(#ebeff2, #e2e8f0);
    --f-thumb-focus-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #888;
    --f-thumb-selected-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #000;
    --f-scrollbar-track-bg: #ddd;
    --f-scrollbar-thumb-bg: #444
  }

  .fancybox__container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column
  }

  .fancybox__container:focus {
    outline: none
  }

  .fancybox__container.has-vertical-thumbs {
    flex-direction: row-reverse
  }

  .fancybox__container.has-vertical-thumbs:not(.is-closing) .fancybox__viewport {
    overflow-x: clip;
    overflow-y: visible
  }

  .fancybox__container>*:not(.fancybox__carousel),
  .fancybox__container .fancybox__carousel>*:not(.fancybox__grid, .fancybox__viewport),
  .fancybox__container .fancybox__column>*:not(.fancybox__viewport),
  .fancybox__container .fancybox__slide:not(.is-selected),
  .fancybox__container .fancybox__slide.is-selected>*:not(.f-html, .f-panzoom__wrapper, .f-spinner) {
    opacity: var(--f-drag-opacity, 1)
  }

  .fancybox__container:not(.is-ready, .is-hiding) {
    visibility: hidden
  }

  .fancybox__container.is-revealing>*:not(.fancybox__carousel),
  .fancybox__container.is-revealing .fancybox__carousel>*:not(.fancybox__grid, .fancybox__viewport),
  .fancybox__container.is-revealing .fancybox__column>*:not(.fancybox__viewport),
  .fancybox__container.is-revealing .fancybox__slide:not(.is-selected),
  .fancybox__container.is-revealing .fancybox__slide.is-selected>*:not(.f-html, .f-panzoom__wrapper) {
    animation: var(--f-interface-enter-duration, .35s) ease none f-fadeIn
  }

  .fancybox__container.is-hiding>*:not(.fancybox__carousel),
  .fancybox__container.is-hiding .fancybox__carousel>*:not(.fancybox__grid, .fancybox__viewport),
  .fancybox__container.is-hiding .fancybox__column>*:not(.fancybox__viewport),
  .fancybox__container.is-hiding .fancybox__slide.is-selected>*:not(.f-html, .f-panzoom__wrapper) {
    animation: var(--f-interface-exit-duration, .35s) ease forwards f-fadeOut
  }

  .fancybox__container.is-hiding .fancybox__carousel .fancybox__slide:not(.is-selected) {
    opacity: 0
  }

  .fancybox__container.is-hiding {
    pointer-events: none
  }

  .fancybox__container.is-idle .f-carousel__toolbar {
    pointer-events: none;
    opacity: 0
  }

  .fancybox__container.is-idle .f-button.is-arrow {
    opacity: 0
  }

  .fancybox__container.is-idle.is-ready .f-carousel__toolbar {
    pointer-events: none;
    animation: .15s ease-out both f-fadeOut
  }

  .fancybox__container.is-idle.is-ready .f-button.is-arrow {
    animation: .15s ease-out both f-fadeOut
  }

  .fancybox__backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--fancybox-backdrop-bg);
    filter: var(--fancybox-backdrop-filter)
  }

  .fancybox__carousel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    position: relative;
    z-index: 10;
    overflow-y: visible;
    overflow-x: clip
  }

  .fancybox__carousel.is-vertical {
    --f-carousel-slide-height: 100%
  }

  .fancybox__carousel.is-ltr {
    direction: ltr
  }

  .fancybox__carousel.is-rtl {
    direction: rtl
  }

  .fancybox__carousel>.f-button.is-arrow:before {
    position: absolute;
    content: "";
    inset: -30px;
    z-index: 1
  }

  .fancybox__viewport {
    display: grid;
    flex: 1;
    min-height: 0;
    min-width: 0;
    position: relative;
    overflow: visible;
    transform: translate3d(0, var(--f-drag-offset, 0), 0)
  }

  .fancybox__viewport.is-draggable {
    cursor: move;
    cursor: grab
  }

  .fancybox__viewport.is-dragging {
    cursor: move;
    cursor: grabbing
  }

  .fancybox__viewport [data-selectable],
  .fancybox__viewport [contenteditable] {
    cursor: auto
  }

  .fancybox__slide {
    box-sizing: border-box;
    position: relative;
    grid-area: 1/1;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: var(--f-carousel-slide-width);
    height: var(--f-carousel-slide-height);
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    margin: 0;
    padding: var(--f-carousel-slide-padding);
    background: var(--f-carousel-slide-bg);
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform
  }

  .fancybox__slide:before,
  .fancybox__slide:after {
    display: block;
    content: ""
  }

  .fancybox__slide:before {
    margin-bottom: auto
  }

  .fancybox__slide:after {
    margin-top: auto
  }

  .fancybox__slide.is-selected {
    z-index: 1
  }

  .fancybox__slide.f-zoomable {
    overflow: visible
  }

  .fancybox__slide.has-error {
    --f-html-color: var(--f-error-color, --f-html-color);
    --f-html-bg: var(--f-error-bg, --f-html-bg)
  }

  .fancybox__slide.has-html {
    overflow: auto;
    padding: 8px
  }

  .fancybox__slide.has-iframe {
    overflow: hidden;
    padding: 8px 0
  }

  .fancybox__slide.has-close-btn {
    padding-top: 34px
  }

  .fancybox__slide.has-controls:before {
    margin: 0
  }

  .fancybox__slide .f-spinner {
    cursor: pointer
  }

  .fancybox__container.is-closing .f-caption,
  .fancybox__slide.is-loading .f-caption {
    visibility: hidden
  }

  .fancybox__container.is-closing .fancybox__carousel,
  .fancybox__container.is-closing .fancybox__viewport,
  .fancybox__container.is-closing .fancybox__slide.is-selected {
    overflow: visible
  }

  .f-button.is-close-button {
    --f-button-width: var(--f-close-button-width);
    --f-button-height: var(--f-close-button-height);
    --f-button-border-radius: var(--f-close-border-radius);
    --f-button-color: var(--f-close-button-color);
    --f-button-hover-color: var(--f-close-button-hover-color);
    --f-button-bg: var(--f-close-button-bg);
    --f-button-hover-bg: var(--f-close-button-hover-bg);
    --f-button-active-bg: var(--f-close-button-active-bg);
    --f-button-svg-width: var(--f-close-button-svg-width);
    --f-button-svg-height: var(--f-close-button-svg-height);
    --f-button-svg-stroke-width: var(--f-close-button-svg-stroke-width);
    position: absolute;
    top: calc((var(--f-button-height) + 2px) * -1);
    right: 0;
    z-index: 10
  }

  .is-loading .f-button.is-close-button {
    visibility: hidden
  }

  .fancybox__thumbs {
    flex: 0 1 100%
  }

  .fancybox__thumbs.is-scrollable {
    --f-thumbs-cols: 1;
    --f-thumbs-gap: 8px;
    --f-thumbs-transition: none;
    --f-thumbs-padding-x: 4px;
    --f-thumbs-padding-y: 8px;
    --f-thumbs-viewport-padding-x: 4px;
    --f-thumbs-viewport-padding-y: 0px;
    max-width: calc(var(--f-thumb-width) * var(--f-thumbs-cols) + var(--f-thumbs-gap) * (var(--f-thumbs-cols) - 1) + var(--f-thumbs-padding-x) * 2 + var(--f-thumbs-viewport-padding-x) * 2)
  }

  .fancybox__thumbs.is-scrollable ::-webkit-scrollbar {
    width: var(--f-scrollbar-width)
  }

  .fancybox__thumbs.is-scrollable ::-webkit-scrollbar-track {
    background: var(--f-scrollbar-track-bg);
    border-radius: var(--f-scrollbar-track-border-radius);
    box-shadow: var(--f-scrollbar-track-shadow)
  }

  .fancybox__thumbs.is-scrollable ::-webkit-scrollbar-thumb {
    background: var(--f-scrollbar-thumb-bg);
    border-radius: var(--f-scrollbar-thumb-border-radius)
  }

  .fancybox__thumbs.is-scrollable.is-hidden {
    max-width: 0;
    --f-thumbs-padding-x: 0;
    max-height: unset;
    --f-thumbs-padding-y: unset
  }

  .fancybox__thumbs.is-scrollable .f-thumbs__viewport {
    overflow-x: hidden !important;
    grid-template-columns: repeat(auto-fill, calc((100% - var(--f-thumbs-gap) * (var(--f-thumbs-cols) - 1)) / var(--f-thumbs-cols))) !important
  }
}

@layer tokens {
  :root {
    --text-color: #222222;
    --primary-color: #006fdd
  }
}

@layer tokens {
  :root {
    --imb-plex-sans: "IBM Plex Sans", sans-serif;
    --inter: "Inter", sans-serif;
    --inter-tight: "Inter Tight", sans-serif;
    --ibm-plex-mono: "IBM Plex Mono", monospace;
    --imb-plex-mono: "IBM Plex Mono", monospace
  }
}

@layer tokens {
  :root {
    --container-padding: 4rem;
    --container-max-width: 184rem
  }

  @media(width<=576px) {
    :root {
      --container-padding: 1.6rem
    }
  }
}

@layer reset {

  *,
  *:after,
  *:before {
    box-sizing: inherit;
    margin: 0;
    padding: 0
  }

  html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
  }

  input,
  textarea {
    border: none;
    border-radius: 0;
    font: inherit;
    outline: none;
    box-shadow: none;
    width: 100%;
    background-color: transparent;
    display: block
  }

  textarea {
    resize: none;
    box-shadow: none;
    display: block;
    width: 100%;
    field-sizing: content;
    height: auto
  }

  button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    user-select: none;
    appearance: none;
    font: inherit;
    color: inherit;
    outline: none;
    display: block;
    text-align: left;
    flex-shrink: 0
  }

  :where(a) {
    color: inherit;
    text-decoration: none
  }

  :where(a):link,
  :where(a):visited {
    color: currentColor
  }

  ul,
  ol {
    list-style: none
  }

  table {
    border-collapse: collapse;
    border-spacing: 0
  }

  hr {
    border: 0
  }

  fieldset,
  legend {
    border: 0;
    padding: 0;
    min-inline-size: 0
  }

  svg {
    display: block
  }

  img {
    border-style: none;
    max-width: 100%;
    height: auto;
    display: block
  }

  picture {
    display: contents
  }
}

@layer base {
  html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    overscroll-behavior: none;
    font-size: clamp(4px, .52vw, 200px)
  }

  @media(width<=576px) {
    html {
      font-size: 10px
    }
  }

  body {
    font-size: 1.6rem;
    line-height: 1.2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overscroll-behavior: none;
    font-family: var(--inter);
    color: var(--text-color)
  }

  :where(a, button) {
    transition: background-color .2s, color .2s, border-color .2s
  }

  ::selection {
    color: #fff;
    background-color: var(--primary-color);
    -webkit-text-fill-color: white
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto;
    box-sizing: border-box
  }
}

@layer layout {
  .container {
    width: 100%;
    max-width: calc(var(--container-max-width) + var(--container-padding) * 2);
    margin-inline: auto;
    padding-inline: var(--container-padding)
  }
}

@layer layout {
  .page-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-x: clip
  }
}

@layer layout {
  .page-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 200;
    isolation: isolate;
    transition: background-color .2s, border-color .2s;
    border-bottom: 1px solid transparent
  }

  .page-header--compact {
    border-bottom: 1px solid rgba(0, 0, 0, .2)
  }

  @media(width<=576px) {
    .page-header--compact {
      border-bottom-color: transparent
    }
  }

  .page-header--compact,
  .page-header--compact-theme {
    background: #fff
  }

  @media(width<=576px) {

    .page-header--compact,
    .page-header--compact-theme {
      background: #fff
    }
  }

  .page-header__row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    padding: 3rem 0;
    color: #fff;
    transition: padding .2s
  }

  @media(width<=576px) {
    .page-header__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.7rem 0
    }
  }

  .page-header--compact .page-header__row,
  .page-header--compact-theme .page-header__row {
    color: var(--text-color)
  }

  .page-header--compact .page-header__row {
    padding: 1rem 0
  }

  @media(width<=576px) {
    .page-header--compact .page-header__row {
      padding: 1.7rem 0
    }
  }

  .page-header__logo {
    display: grid;
    justify-self: flex-start;
    grid-column: 1/3;
    grid-template-areas: "stack";
    align-items: center;
    justify-items: flex-start
  }

  @media(width<=576px) {
    .page-header__logo {
      grid-column: auto
    }
  }

  .page-header__logo-full {
    grid-area: stack;
    width: 28.9rem;
    height: auto;
    transition: opacity .2s, visibility .2s
  }

  @media(width<=576px) {
    .page-header__logo-full {
      width: 19.3rem
    }
  }

  .page-header__logo-full--blue {
    opacity: 0;
    visibility: hidden
  }

  @media(width<=576px) {
    .page-header--compact .page-header__logo-full--blue {
      opacity: 1;
      visibility: visible
    }
  }

  .page-header--compact .page-header__logo-full,
  .page-header--compact-theme .page-header__logo-full {
    opacity: 0;
    visibility: hidden
  }

  .page-header--compact-theme:not(.page-header--compact) .page-header__logo-full.page-header__logo-full--blue {
    opacity: 1;
    visibility: visible
  }

  @media(width<=576px) {
    .page-header--compact .page-header__logo-full.page-header__logo-full--blue {
      opacity: 1;
      visibility: visible
    }
  }

  .page-header__logo-compact {
    grid-area: stack;
    width: 22.1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s
  }

  @media(width<=576px) {
    .page-header__logo-compact {
      display: none
    }
  }

  .page-header--compact .page-header__logo-compact--blue {
    opacity: 1;
    visibility: visible
  }

  .page-header__middle-wrapper {
    grid-column: 3/5;
    justify-self: flex-start;
    display: flex;
    align-items: center;
    gap: 1rem
  }

  @media(width<=576px) {
    .page-header__middle-wrapper {
      display: none
    }
  }

  .page-header__mobile-actions {
    display: none
  }

  @media(width<=576px) {
    .page-header__mobile-actions {
      display: flex;
      align-items: center;
      gap: .5rem
    }
  }

  .page-header__mobile-btn {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color .2s, color .2s
  }

  .page-header__mobile-btn svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: currentColor
  }

  .page-header__mobile-btn--phone {
    background: #ffffff1a;
    color: #fff
  }

  .page-header__mobile-btn--phone:focus-visible {
    background: #fff;
    color: var(--primary-color)
  }

  @media(hover:hover)and (pointer:fine) {
    .page-header__mobile-btn--phone:hover {
      background: #fff;
      color: var(--primary-color)
    }
  }

  .page-header--compact .page-header__mobile-btn--phone,
  .page-header--compact-theme .page-header__mobile-btn--phone {
    background: #f2f2fa;
    color: var(--text-color)
  }

  .page-header--compact .page-header__mobile-btn--phone:focus-visible,
  .page-header--compact-theme .page-header__mobile-btn--phone:focus-visible {
    background: var(--primary-color);
    color: #fff
  }

  @media(hover:hover)and (pointer:fine) {

    .page-header--compact .page-header__mobile-btn--phone:hover,
    .page-header--compact-theme .page-header__mobile-btn--phone:hover {
      background: var(--primary-color);
      color: #fff
    }
  }

  .page-header__mobile-btn--menu {
    background: #fff;
    color: var(--text-color)
  }

  .page-header--compact .page-header__mobile-btn--menu,
  .page-header--compact-theme .page-header__mobile-btn--menu {
    background: var(--primary-color);
    color: #fff
  }

  .page-header__products {
    position: relative
  }

  .page-header__products-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 28rem;
    padding-inline: 3rem;
    padding-block: 3.16rem;
    text-align: left;
    gap: 2rem;
    border-radius: 5rem;
    background: #fff;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -.028rem;
    text-transform: uppercase;
    font-family: var(--imb-plex-sans);
    color: var(--text-color);
    transition: background-color .2s, color .2s, padding .2s
  }

  .page-header__products-btn svg {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    fill: currentColor
  }

  .page-header--compact .page-header__products-btn,
  .page-header--compact-theme .page-header__products-btn {
    background: var(--primary-color);
    color: #fff
  }

  .page-header--compact .page-header__products-btn {
    padding-block: 2.16rem
  }

  .page-header__products-btn:hover,
  .page-header__products-btn:focus-visible {
    background: #fff;
    color: var(--primary-color)
  }

  .page-header--compact .page-header__products-btn:hover,
  .page-header--compact .page-header__products-btn:focus-visible,
  .page-header--compact-theme .page-header__products-btn:hover,
  .page-header--compact-theme .page-header__products-btn:focus-visible {
    background: #005bb5;
    color: #fff
  }

  .page-header__products-btn-icon {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s ease, visibility .2s ease
  }

  .page-header__products-btn-icon--close,
  .page-header__products.is-open .page-header__products-btn-icon--menu {
    opacity: 0;
    visibility: hidden
  }

  .page-header__products.is-open .page-header__products-btn-icon--close {
    opacity: 1;
    visibility: visible
  }

  .page-header__products-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 3rem);
    z-index: 1;
    width: 28.7rem;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 7.4rem #00000026;
    color: var(--text-color);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear
  }

  .page-header__products-menu[aria-hidden=true] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-1rem);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s
  }

  .page-header__products-menu-list {
    display: flex;
    flex-direction: column
  }

  .page-header__products-menu-link {
    display: block;
    padding: 2rem;
    font-family: var(--imb-plex-sans);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    transition: background-color .2s, color .2s
  }

  .page-header__products-menu-link:hover,
  .page-header__products-menu-link:focus-visible {
    background: var(--primary-color);
    color: #fff
  }

  .page-header__search {
    position: relative;
    flex-shrink: 0
  }

  .page-header__search-btn {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    width: 8rem;
    height: 8rem;
    background: #ffffff1a;
    transition: background-color .2s, color .2s, height .2s, border-radius .2s
  }

  .page-header__search-btn:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: #ffffff1a;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .2s
  }

  .page-header__search-btn svg {
    position: relative;
    z-index: 1;
    width: 2.4rem;
    height: 2.4rem;
    fill: #fff
  }

  .page-header--compact .page-header__search-btn,
  .page-header--compact-theme .page-header__search-btn {
    background: #f2f2fa
  }

  .page-header--compact .page-header__search-btn svg,
  .page-header--compact-theme .page-header__search-btn svg {
    fill: var(--text-color)
  }

  .page-header--compact .page-header__search-btn {
    height: 6rem;
    border-radius: 5rem
  }

  .page-header--compact .page-header__search-btn:before {
    width: 4.4rem;
    height: 4.4rem
  }

  .page-header__search.is-open .page-header__search-btn:before {
    opacity: 1
  }

  .page-header__search-btn:hover,
  .page-header__search-btn:focus-visible {
    background: #ffffff2e
  }

  .page-header--compact .page-header__search.is-open .page-header__search-btn,
  .page-header--compact-theme .page-header__search.is-open .page-header__search-btn,
  .page-header--compact .page-header__search-btn:hover,
  .page-header--compact .page-header__search-btn:focus-visible,
  .page-header--compact-theme .page-header__search-btn:hover,
  .page-header--compact-theme .page-header__search-btn:focus-visible {
    background: var(--primary-color)
  }

  .page-header--compact .page-header__search.is-open .page-header__search-btn svg,
  .page-header--compact-theme .page-header__search.is-open .page-header__search-btn svg,
  .page-header--compact .page-header__search-btn:hover svg,
  .page-header--compact .page-header__search-btn:focus-visible svg,
  .page-header--compact-theme .page-header__search-btn:hover svg,
  .page-header--compact-theme .page-header__search-btn:focus-visible svg {
    fill: #fff
  }

  .page-header__search-dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 3rem);
    z-index: 2;
    width: 79.7rem;
    padding: 2rem;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 7.4rem #00000026;
    color: var(--text-color);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear
  }

  .page-header__search-dropdown[aria-hidden=true] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-1rem);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s
  }

  .page-header--compact .page-header__search-dropdown {
    top: calc(100% + 2rem)
  }

  @media(width<=576px) {
    .page-header__search-dropdown {
      position: fixed;
      left: 1.5rem;
      right: 1.5rem;
      top: 8.4rem;
      width: auto;
      padding: 1.6rem
    }
  }

  .page-header__search-label {
    display: block;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8;
    opacity: .5
  }

  @media(width<=576px) {
    .page-header__search-label {
      font-size: 1.3rem
    }
  }

  .page-header__search-form-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%
  }

  .page-header__search-input {
    flex: 1;
    min-width: 0;
    appearance: none;
    padding: 3rem 0;
    border-bottom: 1px solid rgba(34, 34, 34, .2);
    font-family: var(--inter);
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--text-color)
  }

  .page-header__search-input::placeholder {
    color: #2222224d;
    opacity: 1
  }

  .page-header__search-input::-webkit-search-cancel-button,
  .page-header__search-input::-webkit-search-decoration,
  .page-header__search-input::-webkit-search-results-button,
  .page-header__search-input::-webkit-search-results-decoration {
    appearance: none;
    display: none
  }

  .page-header__search-input::-ms-clear,
  .page-header__search-input::-ms-reveal {
    display: none
  }

  @media(width<=576px) {
    .page-header__search-input {
      padding: 1.9rem 0;
      font-size: 1.6rem
    }
  }

  .page-header__search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13.5rem;
    height: 8rem;
    padding: 1.7rem 3rem;
    border-radius: 4rem;
    background: var(--primary-color);
    color: #fff;
    font-family: var(--imb-plex-sans);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: uppercase;
    transition: background-color .2s, opacity .2s
  }

  .page-header__search-submit:hover,
  .page-header__search-submit:focus-visible {
    opacity: .85
  }

  @media(width<=576px) {
    .page-header__search-submit {
      width: 10.8rem;
      height: 5.8rem;
      padding: 1.4rem 2rem
    }
  }

  .page-header__right-wrapper {
    grid-column: 5/-1;
    justify-self: flex-end;
    display: flex;
    align-items: center;
    gap: 1rem
  }

  @media(width<=576px) {
    .page-header__right-wrapper {
      display: none
    }
  }

  .page-header__nav {
    width: 50rem;
    height: 8rem;
    padding: 1rem 4rem 1rem 1rem;
    flex-shrink: 0;
    border-radius: 5rem;
    background: #ffffff1a;
    display: flex;
    align-items: center;
    transition: height .2s, background-color .2s
  }

  .page-header--compact .page-header__nav,
  .page-header--compact-theme .page-header__nav {
    background: #f2f2fa
  }

  .page-header--compact .page-header__nav {
    height: 6rem
  }

  .page-header__nav-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%
  }

  .page-header__nav-list-item {
    flex-shrink: 0
  }

  .page-header__nav-list-item--dropdown {
    position: relative
  }

  .page-header__nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: 0;
    gap: 1rem;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 105%;
    text-transform: uppercase;
    font-family: var(--imb-plex-sans);
    transition: color .2s, min-height .2s
  }

  .page-header__nav-link svg {
    flex-shrink: 0;
    fill: currentColor
  }

  .page-header--compact .page-header__nav-link {
    min-height: 4rem
  }

  .page-header__nav-toggle {
    height: 6rem;
    padding: 2rem;
    border-radius: 4rem;
    background: #ffffff1a
  }

  .page-header--compact .page-header__nav-toggle,
  .page-header--compact-theme .page-header__nav-toggle {
    background: transparent
  }

  .page-header__nav-link-icon {
    width: 1.5rem;
    height: .9rem;
    transition: transform .2s ease
  }

  .page-header__nav-list-item.is-open .page-header__nav-link-icon {
    transform: rotate(180deg)
  }

  .page-header__nav-dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 3rem);
    z-index: 1;
    width: 28.7rem;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 7.4rem #00000026;
    color: var(--text-color);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear
  }

  .page-header__nav-dropdown[aria-hidden=true] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-1rem);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s
  }

  .page-header--compact .page-header__nav-dropdown {
    top: calc(100% + 2rem)
  }

  .page-header__nav-dropdown-list {
    display: flex;
    flex-direction: column
  }

  .page-header__nav-dropdown-link {
    display: block;
    padding: 2rem;
    font-family: var(--imb-plex-sans);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    transition: background-color .2s, color .2s
  }

  .page-header__nav-dropdown-link:hover,
  .page-header__nav-dropdown-link:focus-visible {
    background: var(--primary-color);
    color: #fff
  }

  .page-header__contacts {
    position: relative;
    flex-shrink: 0
  }

  .page-header__phone {
    display: grid;
    place-items: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: #ffffff1a;
    flex-shrink: 0;
    transition: background-color .2s, color .2s, height .2s, border-radius .2s
  }

  .page-header__phone svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: currentColor
  }

  .page-header--compact .page-header__phone,
  .page-header--compact-theme .page-header__phone {
    background: #f2f2fa;
    color: var(--text-color)
  }

  .page-header--compact .page-header__phone {
    height: 6rem;
    border-radius: 5rem
  }

  .page-header__phone:hover,
  .page-header__phone:focus-visible {
    background: #fff;
    color: var(--primary-color)
  }

  .page-header--compact .page-header__phone:hover,
  .page-header--compact .page-header__phone:focus-visible,
  .page-header--compact-theme .page-header__phone:hover,
  .page-header--compact-theme .page-header__phone:focus-visible {
    background: var(--primary-color);
    color: #fff
  }

  .page-header__contacts-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 3rem);
    z-index: 1;
    width: 28.7rem;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 7.4rem #00000026;
    color: var(--text-color);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear
  }

  .page-header__contacts-menu[aria-hidden=true] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-1rem);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s
  }

  .page-header--compact .page-header__contacts-menu {
    top: calc(100% + 2rem)
  }

  .page-header__contacts-list {
    display: flex;
    flex-direction: column
  }

  .page-header__contacts-link {
    display: block;
    padding: 2rem;
    font-family: var(--imb-plex-sans);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    transition: background-color .2s, color .2s
  }

  .page-header__contacts-link:hover,
  .page-header__contacts-link:focus-visible {
    background: var(--primary-color);
    color: #fff
  }

  .page-header__cta {
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 105%;
    letter-spacing: -.028rem;
    text-transform: uppercase;
    padding: 3.2rem 2.8rem;
    border-radius: 30rem;
    background: #fff;
    color: var(--text-color);
    flex-shrink: 0;
    transition: background-color .2s, color .2s, padding .2s
  }

  .page-header--compact .page-header__cta,
  .page-header--compact-theme .page-header__cta {
    background: var(--primary-color);
    color: #fff
  }

  .page-header--compact .page-header__cta {
    padding-block: 2.3rem
  }

  .page-header__cta:hover,
  .page-header__cta:focus-visible {
    background: #fff;
    color: var(--primary-color)
  }

  .page-header--compact .page-header__cta:hover,
  .page-header--compact .page-header__cta:focus-visible,
  .page-header--compact-theme .page-header__cta:hover,
  .page-header--compact-theme .page-header__cta:focus-visible {
    background: #005bb5;
    color: #fff
  }
}

@layer layout {
  .page-footer {
    position: relative;
    color: #fff;
    background-color: #001326;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stack"
  }

  .page-footer__bg {
    position: relative;
    grid-area: stack
  }

  .page-footer__bg:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0000, #00000080)
  }

  .page-footer__bg-image {
    display: block;
    width: 100%;
    height: auto
  }

  .page-footer__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    grid-area: stack
  }

  @media(width<=576px) {
    .page-footer__container {
      padding-inline: 2rem
    }
  }

  .page-footer__head {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    gap: 2rem;
    padding-top: 4rem;
    padding-bottom: 2.8rem
  }

  @media(width<=576px) {
    .page-footer__head {
      padding-top: 2rem;
      padding-bottom: 8rem
    }
  }

  .page-footer__map-pin {
    position: absolute;
    left: 50%;
    top: var(--map-pin-y-coord, 33%);
    transform: translate(-50%, -50%);
    width: 9rem;
    height: 9rem;
    object-fit: contain;
    z-index: 5
  }

  @media(width<=576px) {
    .page-footer__map-pin {
      top: var(--map-mobile-pin-y-coord, 14%)
    }
  }

  .page-footer__map-link {
    grid-column: 1/-1;
    grid-row: 2/3;
    justify-self: center;
    align-self: center;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: #fff;
    white-space: nowrap;
    text-underline-offset: .4rem
  }

  .page-footer__content {
    padding-top: 4rem;
    padding-bottom: 4rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    flex-direction: column;
    gap: 4rem
  }

  @media(width<=576px) {
    .page-footer__content {
      padding-top: 4.6rem;
      padding-bottom: 2rem
    }
  }

  .page-footer__top,
  .page-footer__bottom {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem
  }

  @media(width<=576px) {

    .page-footer__top,
    .page-footer__bottom {
      grid-template-columns: minmax(0, 1fr)
    }
  }

  @media(width<=576px) {
    .page-footer__top {
      gap: 4rem
    }
  }

  .page-footer__bottom {
    margin-top: auto;
    align-items: end
  }

  @media(width<=576px) {
    .page-footer__bottom {
      margin-top: 0;
      padding-top: 4rem;
      border-top: 1px solid rgba(255, 255, 255, .2);
      gap: 2rem;
      align-items: start
    }
  }

  .page-footer__company-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none
  }

  .page-footer__company-item,
  .page-footer__muted-text {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  .page-footer__company-item,
  .page-footer__muted-text {
    color: #ffffffb3
  }

  .page-footer__address {
    grid-column: 3/4;
    display: flex;
    flex-direction: column;
    align-items: flex-start
  }

  @media(width<=576px) {
    .page-footer__address {
      grid-column: auto
    }
  }

  .page-footer__contacts-wrap {
    grid-column: 4/5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem
  }

  @media(width<=576px) {
    .page-footer__contacts-wrap {
      grid-column: auto;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 4rem
    }
  }

  .page-footer__contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start
  }

  .page-footer__section-label {
    color: #fff;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.042rem
  }

  .page-footer__section-text {
    margin-top: 4rem;
    color: #fff;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .page-footer__section-text {
      margin-top: 1.4rem
    }
  }

  .page-footer__section-text--link {
    transition: color .2s
  }

  .page-footer__section-text--link:focus-visible {
    color: var(--primary-color)
  }

  @media(hover:hover)and (pointer:fine) {
    .page-footer__section-text--link:hover {
      color: var(--primary-color)
    }
  }

  .page-footer__section-text+.page-footer__section-text {
    margin-top: 2rem
  }

  @media(width<=576px) {
    .page-footer__section-text+.page-footer__section-text {
      margin-top: 1.4rem
    }
  }

  .page-footer__address .page-footer__muted-text {
    margin-top: 2rem;
    line-height: 1.2;
    letter-spacing: -.042rem
  }

  @media(width<=576px) {
    .page-footer__address .page-footer__muted-text {
      margin-top: 1.4rem
    }
  }

  .page-footer__social-list {
    margin: 0;
    padding: 0;
    list-style: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem
  }

  .page-footer__social-list--desktop {
    grid-column: 4/5;
    grid-row: 2/3;
    justify-self: end;
    align-self: end
  }

  @media(width<=576px) {
    .page-footer__social-list--desktop {
      display: none
    }
  }

  .page-footer__social-list--mobile {
    display: none
  }

  @media(width<=576px) {
    .page-footer__social-list--mobile {
      display: flex;
      flex-wrap: wrap
    }
  }

  .page-footer__social-link {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffffff1a;
    color: #fff;
    transition: background-color .2s
  }

  @media(hover:hover)and (pointer:fine) {
    .page-footer__social-link:hover {
      background-color: #fff
    }

    .page-footer__social-link:hover svg {
      fill: var(--primary-color)
    }
  }

  @media(width<=576px) {
    .page-footer__social-link {
      width: 5.2rem;
      height: 5.2rem
    }
  }

  .page-footer__social-link svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    transition: fill .2s
  }

  .page-footer__copyright {
    white-space: nowrap;
    color: #ffffffb3
  }

  @media(width<=576px) {
    .page-footer__copyright {
      white-space: normal;
      line-height: 1.4
    }
  }

  .page-footer__policy {
    grid-column: 3/4;
    justify-self: start;
    line-height: 1.2;
    letter-spacing: -.042rem;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    width: fit-content;
    color: #ffffffb3
  }

  @media(width<=576px) {
    .page-footer__policy {
      grid-column: auto;
      line-height: 1.4
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .page-footer__policy:hover {
      color: #fff
    }
  }

  .page-footer__developer {
    grid-column: 4/5;
    justify-self: end;
    display: flex;
    align-items: flex-end;
    gap: 1.8rem;
    color: #ffffffb3
  }

  @media(width<=576px) {
    .page-footer__developer {
      grid-column: auto;
      justify-self: start;
      flex-direction: row-reverse;
      align-items: center;
      gap: 2rem;
      color: #ffffff80
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .page-footer__developer:hover {
      color: #fff
    }
  }

  .page-footer__developer-text {
    max-width: 16.3rem;
    line-height: 1.2;
    letter-spacing: -.042rem
  }

  @media(width<=576px) {
    .page-footer__developer-text {
      font-size: 1.4rem;
      max-width: 17.6rem
    }
  }

  .page-footer__developer-logo {
    width: 3.8rem;
    height: 5.5rem;
    flex-shrink: 0
  }

  @media(width<=576px) {
    .page-footer__developer-logo {
      width: 3.5637rem;
      height: 4.8rem
    }
  }
}

@layer components {
  .btn {
    border-radius: 5rem;
    border: .3rem solid var(--primary-color);
    display: block;
    text-align: center;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 105%;
    letter-spacing: .14rem;
    text-transform: uppercase;
    font-family: var(--inter);
    padding-inline: 3rem;
    padding-block: 3rem;
    color: #fff;
    background-color: transparent;
    transition: background-color .2s, color .2s
  }

  .btn--dark-text {
    color: var(--text-color)
  }

  @media(width<=576px) {
    .btn {
      border-width: .2rem;
      padding-block: 2rem
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .btn:hover {
      background-color: var(--primary-color);
      color: #fff
    }
  }
}

@layer components {
  .breadcrumbs {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -.042rem;
    color: var(--text-color)
  }

  .breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem
  }

  @media(width<=576px) {
    .breadcrumbs__list {
      flex-wrap: nowrap;
      overflow: hidden
    }
  }

  .breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: .8rem
  }

  @media(width<=576px) {
    .breadcrumbs__item {
      flex: none
    }

    .breadcrumbs__item:last-child {
      flex: 1 1 auto;
      min-width: 0
    }
  }

  .breadcrumbs__item:not(:first-child):before {
    content: "/";
    flex: none;
    color: currentColor;
    opacity: .8
  }

  .breadcrumbs__link {
    transition: opacity .2s, color .2s
  }

  @media(hover:hover)and (pointer:fine) {
    .breadcrumbs__link:hover {
      color: var(--primary-color)
    }
  }

  .breadcrumbs__link,
  .breadcrumbs__current {
    color: currentColor
  }

  @media(width<=576px) {

    .breadcrumbs__link,
    .breadcrumbs__current {
      white-space: nowrap
    }
  }

  @media(width<=576px) {

    .breadcrumbs__item:last-child .breadcrumbs__link,
    .breadcrumbs__item:last-child .breadcrumbs__current {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis
    }
  }
}

@layer components {
  .vacancy-card {
    display: grid;
    grid-row: 1/-1;
    grid-template-rows: subgrid;
    align-content: start;
    min-height: 50.5rem;
    color: #fff
  }

  @media(width<=576px) {
    .vacancy-card {
      display: flex;
      flex-direction: column;
      grid-row: auto;
      grid-template-rows: none;
      align-content: normal;
      min-height: auto
    }
  }

  .vacancy-card__city {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 1rem 1.5rem;
    border-radius: 5rem;
    background: #ffffff26;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  .vacancy-card__title {
    max-width: 36.2rem;
    margin-top: 7.5rem;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .vacancy-card__title {
      max-width: 30rem;
      margin-top: 5rem;
      font-size: 2rem;
      line-height: 1.2;
      letter-spacing: -.04rem
    }
  }

  .vacancy-card__details {
    display: grid;
    gap: 2.5rem;
    width: fit-content;
    margin-top: 2.5rem
  }

  @media(width<=576px) {
    .vacancy-card__details {
      gap: 1.5rem;
      width: 100%;
      margin-top: 1.5rem
    }
  }

  .vacancy-card__detail {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%
  }

  .vacancy-card__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    color: #fff
  }

  .vacancy-card__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor
  }

  .vacancy-card__detail-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0
  }

  .vacancy-card__detail-label {
    color: #ffffff80;
    font-family: var(--inter);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4
  }

  .vacancy-card__detail-value {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4
  }

  .vacancy-card__salary {
    max-width: 38.4rem;
    margin-top: 7.5rem;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .vacancy-card__salary {
      max-width: 30rem;
      margin-top: 5rem;
      font-size: 2rem;
      line-height: 1.2;
      letter-spacing: -.04rem
    }
  }

  .vacancy-card__link {
    width: fit-content;
    margin-top: 7.5rem;
    color: var(--primary-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .vacancy-card__link {
      margin-top: 5rem
    }
  }
}

@layer components {
  .career-success-story-card {
    display: flex;
    flex-direction: column;
    gap: 3.2rem
  }

  .career-success-story-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: .5rem;
    overflow: hidden;
    background-color: #f7f7f7;
    color: #fff
  }

  .career-success-story-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .career-success-story-card__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #222233b3
  }

  @media(width<=576px) {
    .career-success-story-card__overlay {
      background: #22223380
    }
  }

  .career-success-story-card__play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 5rem;
    transform: translate(-50%, -50%)
  }

  @media(width<=576px) {
    .career-success-story-card__play {
      width: 2.4rem;
      height: 2.4rem
    }
  }

  .career-success-story-card__play svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1px
  }

  .career-success-story-card__duration {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.1rem;
    min-height: 3.4rem;
    padding: 1rem 1.5rem;
    border-radius: 5rem;
    background: #fff;
    color: #223;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  .career-success-story-card__content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem
  }

  .career-success-story-card__name {
    color: #223;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .career-success-story-card__name {
      font-size: 2rem;
      font-style: normal;
      font-weight: 500;
      line-height: 120%;
      letter-spacing: -.04rem
    }
  }

  .career-success-story-card__position {
    color: #223;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2
  }
}

@layer components {
  .company-leadership-card {
    display: flex;
    flex-direction: column;
    gap: 3.2rem
  }

  .company-leadership-card__media {
    width: 100%;
    aspect-ratio: 1;
    border-radius: .5rem;
    overflow: hidden;
    background-color: #f7f7f7
  }

  .company-leadership-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .company-leadership-card__content {
    display: flex;
    flex-direction: column;
    gap: 1.8rem
  }

  @media(width<=576px) {
    .company-leadership-card__content {
      gap: 1.4rem
    }
  }

  .company-leadership-card__name {
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .company-leadership-card__name {
      font-size: 2rem;
      letter-spacing: -.04rem
    }

    .company-leadership-card__name br {
      display: none
    }
  }

  .company-leadership-card__position {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2
  }
}

@layer components {
  .cookie-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 250;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: min(47.3rem, 100%);
    padding: 3rem;
    border-radius: 1rem 1rem 0 0;
    background-color: #fafdff;
    color: #223;
    opacity: 0;
    transform: translateY(1.6rem);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s, transform .2s, visibility .2s
  }

  .cookie-banner.is-shown {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto
  }

  @media(width<=576px) {
    .cookie-banner {
      left: 0;
      width: 100%;
      gap: 2rem;
      padding: 2.4rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom))
    }
  }

  .cookie-banner__close {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    color: #222
  }

  .cookie-banner__close svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: currentColor
  }

  @media(hover:hover)and (pointer:fine) {
    .cookie-banner__close:hover {
      color: var(--primary-color)
    }
  }

  .cookie-banner__text {
    max-width: 41.3rem;
    padding-right: 3rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 131%;
    color: #223
  }

  @media(width<=576px) {
    .cookie-banner__text {
      max-width: none
    }

    .cookie-banner__text br {
      display: none
    }
  }

  .cookie-banner__actions {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    width: 100%
  }

  @media(width<=576px) {
    .cookie-banner__actions {
      flex-direction: column;
      align-items: stretch
    }
  }

  .cookie-banner__button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: 1.7rem 3rem;
    border-radius: 4rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 105%;
    letter-spacing: .14rem;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap
  }

  .cookie-banner__button--secondary {
    border: 1px solid rgba(34, 34, 34, .2);
    color: #222
  }

  .cookie-banner__button--primary {
    flex: 1 1 auto;
    background-color: var(--primary-color);
    color: #fff
  }

  @media(width<=576px) {
    .cookie-banner__button {
      min-height: 5.2rem;
      padding-block: 1.4rem;
      white-space: normal
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .cookie-banner__button--secondary:hover {
      border-color: var(--primary-color);
      color: var(--primary-color)
    }

    .cookie-banner__button--primary:hover {
      background-color: #005bb5
    }
  }
}

@layer components {
  .harsh-conditions-card {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    color: #fff
  }

  @media(width<=576px) {
    .harsh-conditions-card {
      gap: 2rem
    }
  }

  .harsh-conditions-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1375/900;
    overflow: hidden
  }

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

  @media(width<=576px) {
    .harsh-conditions-card__media {
      aspect-ratio: 3/2
    }
  }
}

@layer components {
  .mobile-menu {
    display: none
  }

  @media(width<=576px) {
    .mobile-menu {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior-y: none;
      padding-top: 1.7rem;
      padding-bottom: 4.8rem;
      background: var(--primary-color);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 300;
      transition: opacity .2s, visibility .2s;
      display: flex;
      flex-direction: column
    }

    .mobile-menu .container {
      display: flex;
      flex-direction: column;
      flex-grow: 1
    }
  }

  @media(width<=576px) {
    .mobile-menu.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto
    }
  }

  @media(width<=576px) {
    .mobile-menu__content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      flex-grow: 1
    }
  }

  @media(width<=576px) {
    .mobile-menu__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem
    }
  }

  @media(width<=576px) {
    .mobile-menu__logo {
      width: 19.3rem;
      flex-shrink: 0
    }

    .mobile-menu__logo img {
      width: 100%;
      height: auto
    }
  }

  @media(width<=576px) {
    .mobile-menu__header-actions {
      display: flex;
      align-items: center;
      gap: .5rem
    }
  }

  @media(width<=576px) {
    .mobile-menu__top-btn {
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      color: #fff
    }

    .mobile-menu__top-btn svg {
      width: 2.4rem;
      height: 2.4rem;
      fill: currentColor
    }
  }

  @media(width<=576px) {
    .mobile-menu__top-btn--phone {
      background: #ffffff1a
    }
  }

  @media(width<=576px) {
    .mobile-menu__top-btn--close {
      border: 1px solid currentColor;
      background: transparent
    }

    .mobile-menu__top-btn--close svg {
      width: 1.5rem;
      height: 1.5rem
    }
  }

  @media(width<=576px) {
    .mobile-menu__search-form {
      width: 100%;
      min-width: 0;
      margin-top: 4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      border-radius: 50rem;
      padding: 1.8rem 2.4rem;
      background: #ffffff1a
    }
  }

  @media(width<=576px) {
    .mobile-menu__search-input {
      flex: 1;
      min-width: 0;
      width: auto;
      appearance: none;
      font-family: var(--inter);
      font-size: 1.4rem;
      font-style: normal;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: -.042rem;
      color: #fff
    }

    .mobile-menu__search-input::placeholder {
      color: #fff
    }

    .mobile-menu__search-input::-webkit-search-cancel-button,
    .mobile-menu__search-input::-webkit-search-decoration,
    .mobile-menu__search-input::-webkit-search-results-button,
    .mobile-menu__search-input::-webkit-search-results-decoration {
      appearance: none;
      display: none
    }

    .mobile-menu__search-input::-ms-clear,
    .mobile-menu__search-input::-ms-reveal {
      display: none
    }
  }

  @media(width<=576px) {
    .mobile-menu__search-btn {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      color: #fff
    }

    .mobile-menu__search-btn svg {
      width: 2.5rem;
      height: 2.5rem;
      fill: currentColor
    }
  }

  @media(width<=576px) {
    .mobile-menu__nav {
      margin-top: 8rem
    }
  }

  @media(width<=576px) {
    .mobile-menu__nav-list {
      display: flex;
      flex-direction: column;
      gap: 1rem
    }
  }

  @media(width<=576px) {
    .mobile-menu__nav-list>.mobile-menu__nav-item:first-child {
      margin-bottom: 1.4rem;
      border-radius: 1rem;
      background: #fff;
      overflow: hidden
    }
  }

  @media(width<=576px) {

    .mobile-menu__nav-link,
    .mobile-menu__subnav-link {
      font-family: var(--imb-plex-sans);
      font-style: normal;
      font-weight: 600;
      text-transform: uppercase;
      color: #fff
    }
  }

  @media(width<=576px) {
    .mobile-menu__nav-link {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.6rem;
      border-radius: 1rem;
      padding: 1.7rem 2.4rem;
      background: #ffffff1a;
      overflow: hidden;
      font-size: 1.6rem;
      line-height: 1.2;
      letter-spacing: -.032rem
    }
  }

  @media(width<=576px) {
    .mobile-menu__nav-list>.mobile-menu__nav-item:first-child .mobile-menu__nav-link {
      background: transparent;
      color: var(--text-color)
    }
  }

  @media(width<=576px) {
    .mobile-menu__nav-link-icon {
      width: 2.4rem;
      height: 2.4rem;
      flex-shrink: 0;
      fill: currentColor;
      transition: transform .2s
    }
  }

  @media(width<=576px) {
    .mobile-menu__nav-link[aria-expanded=true] .mobile-menu__nav-link-icon {
      transform: rotate(180deg)
    }
  }

  @media(width<=576px) {
    .mobile-menu__accordion {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .3s ease
    }
  }

  @media(width<=576px) {
    .mobile-menu__nav-link[aria-expanded=true]+.mobile-menu__accordion {
      grid-template-rows: 1fr
    }
  }

  @media(width<=576px) {
    .mobile-menu__accordion-inner {
      overflow: hidden
    }
  }

  @media(width<=576px) {
    .mobile-menu__subnav-list {
      display: flex;
      flex-direction: column;
      gap: 3.2rem;
      padding: 2.4rem 0 2.4rem 2.4rem
    }
  }

  @media(width<=576px) {
    .mobile-menu__subnav-link {
      display: block;
      font-size: 1.4rem;
      line-height: 1.46;
      letter-spacing: -.028rem;
      color: #fff
    }
  }

  @media(width<=576px) {
    .mobile-menu__nav-list>.mobile-menu__nav-item:first-child .mobile-menu__subnav-link {
      color: var(--text-color)
    }
  }

  @media(width<=576px) {
    .mobile-menu__bottom {
      margin-top: auto;
      padding-top: 3rem;
      display: flex;
      flex-direction: column;
      gap: 2rem
    }
  }

  @media(width<=576px) {
    .mobile-menu__socials {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap
    }
  }

  @media(width<=576px) {
    .mobile-menu__social-link {
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
      background: #ffffff1a;
      display: grid;
      place-items: center;
      color: #fff
    }

    .mobile-menu__social-link svg {
      width: 6rem;
      height: 6rem;
      fill: currentColor
    }
  }

  @media(width<=576px) {
    .mobile-menu__cta {
      width: 100%;
      min-width: 0;
      border-radius: 5rem;
      background: #fff;
      padding: 2.1rem 3rem;
      display: block;
      text-align: center;
      font-family: var(--inter);
      font-size: 1.4rem;
      font-style: normal;
      font-weight: 700;
      line-height: 105%;
      letter-spacing: .14rem;
      text-transform: uppercase;
      color: var(--text-color)
    }
  }

  .mobile-contact {
    display: none
  }

  @media(width<=576px) {
    .mobile-contact {
      display: block
    }
  }

  @media(width<=576px) {
    .mobile-contact__backdrop {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 320;
      width: 100%;
      height: 100%;
      background: #00172d59;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s, visibility .2s
    }
  }

  @media(width<=576px) {
    .mobile-contact.is-open .mobile-contact__backdrop {
      opacity: 1;
      visibility: visible;
      pointer-events: auto
    }
  }

  @media(width<=576px) {
    .mobile-contact__panel {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 321;
      width: 100%;
      border-radius: 1rem 1rem 0 0;
      background: #fff;
      box-shadow: 0 0 7.4rem #00000026;
      transform: translateY(100%);
      visibility: hidden;
      transition: transform .3s ease, visibility .3s
    }
  }

  @media(width<=576px) {
    .mobile-contact.is-open .mobile-contact__panel {
      transform: translateY(0);
      visibility: visible
    }
  }

  @media(width<=576px) {
    .mobile-contact__close {
      position: absolute;
      right: 1.2rem;
      top: 1.2rem;
      z-index: 1;
      width: 2.4rem;
      height: 2.4rem;
      display: grid;
      place-items: center;
      color: var(--text-color)
    }

    .mobile-contact__close svg {
      width: 2.4rem;
      height: 2.4rem;
      fill: currentColor
    }
  }

  @media(width<=576px) {
    .mobile-contact__list {
      display: grid;
      grid-auto-rows: 1fr
    }
  }

  @media(width<=576px) {
    .mobile-contact__item {
      display: flex
    }
  }

  @media(width<=576px) {
    .mobile-contact__link {
      width: 100%;
      display: flex;
      align-items: flex-end;
      padding: 3rem 2.4rem;
      font-family: var(--imb-plex-sans);
      font-size: 1.6rem;
      font-style: normal;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -.032rem;
      text-transform: uppercase;
      color: var(--text-color)
    }
  }

  @media(width<=576px) {
    .mobile-contact__item+.mobile-contact__item .mobile-contact__link {
      padding-top: 3rem;
      padding-bottom: 3rem;
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0
    }
  }
}

@layer components {
  .realised-project-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem
  }

  @media(width<=576px) {
    .realised-project-card {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto 1fr auto;
      grid-template-areas: "media media" "title title" "link link";
      gap: 2rem;
      flex-grow: 1
    }
  }

  .realised-project-card__left {
    display: grid;
    grid-template-columns: 44.5rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start
  }

  @media(width<=576px) {
    .realised-project-card__left {
      display: contents
    }
  }

  .realised-project-card__media {
    grid-column: 1/2;
    border-radius: .5rem;
    overflow: hidden;
    aspect-ratio: 445/260
  }

  .realised-project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  @media(width<=576px) {
    .realised-project-card__media {
      grid-area: media;
      aspect-ratio: 300/175;
      margin-bottom: 1.5rem
    }
  }

  .realised-project-card__right {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    grid-template-rows: 1fr auto
  }

  @media(width<=576px) {
    .realised-project-card__right {
      display: contents
    }
  }

  .realised-project-card__title {
    grid-column: 1/2;
    grid-row: 1/2;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.09rem
  }

  @media(width<=576px) {
    .realised-project-card__title {
      grid-area: title;
      font-size: 2rem;
      letter-spacing: -.06rem
    }
  }

  .realised-project-card__link {
    grid-column: 1/2;
    grid-row: 2/3;
    justify-self: start;
    color: var(--text-color);
    width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    border-radius: 4rem;
    border-width: 1px;
    border-color: #2223;
    padding: 2.2rem 3rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase;
    border-style: solid
  }

  @media(width<=576px) {
    .realised-project-card__link {
      grid-area: link;
      width: auto;
      justify-content: center;
      margin-top: .5rem;
      margin-inline: 0;
      padding: 2.1rem 3rem;
      justify-self: stretch
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .realised-project-card__link:hover {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      color: #fff
    }

    .realised-project-card__link:hover svg {
      color: #fff
    }
  }

  .realised-project-card__link svg {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--primary-color);
    fill: currentColor
  }
}

@layer components {
  .other-project-card {
    color: var(--text-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem
  }

  @media(width<=576px) {
    .other-project-card {
      gap: 1.4rem
    }
  }

  .other-project-card__logo {
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    border: 1px solid #c2c2c8;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex-shrink: 0
  }

  .other-project-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
  }

  @media(width<=576px) {
    .other-project-card__logo {
      width: 8.8rem;
      height: 8.8rem
    }
  }

  .other-project-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  @media(width<=576px) {
    .other-project-card__meta {
      align-items: flex-start;
      justify-content: flex-start;
      flex-direction: column;
      font-size: 1.2rem;
      gap: 1.2rem
    }
  }

  .other-project-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(100%, 26rem);
    border-radius: 5rem;
    background-color: #fff;
    padding: 1rem 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .other-project-card__year {
    flex-shrink: 0;
    font-family: var(--ibm-plex-mono);
    white-space: nowrap
  }

  .other-project-card__title {
    display: block;
    width: 100%;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .other-project-card__title {
      font-size: 1.5rem;
      line-height: 1.3
    }
  }

  .other-project-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: max-content;
    min-height: 6rem;
    border: 1px solid rgba(34, 34, 34, .2);
    border-radius: 4rem;
    padding: 1.7rem 3rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase;
    transition: background-color .2s, color .2s
  }

  .other-project-card__link svg {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--primary-color);
    fill: currentColor
  }

  @media(width<=576px) {
    .other-project-card__link {
      min-height: 4.4rem;
      padding: 1.2rem 2rem;
      font-size: 1.1rem;
      letter-spacing: .12rem
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .other-project-card__link:hover {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      color: #fff
    }

    .other-project-card__link:hover svg {
      color: #fff
    }
  }
}

@layer components {
  .industry-project-card {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(34, 34, 34, .2);
    color: var(--text-color)
  }

  @media(width<=576px) {
    .industry-project-card {
      grid-template-columns: 1fr;
      gap: 2.4rem;
      padding-top: 2.4rem
    }
  }

  .industry-project-card__media {
    display: block;
    grid-column: 1/span 3;
    overflow: hidden;
    aspect-ratio: 678/396;
    border-radius: .5rem;
    background-color: #f2f2fa
  }

  .industry-project-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s
  }

  @media(hover:hover)and (pointer:fine) {
    .industry-project-card__media:hover img {
      transform: scale(1.04)
    }
  }

  @media(width<=576px) {
    .industry-project-card__media {
      grid-column: auto
    }
  }

  .industry-project-card__content {
    display: flex;
    grid-column: 5/-1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem
  }

  @media(width<=576px) {
    .industry-project-card__content {
      grid-column: auto
    }
  }

  .industry-project-card__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem
  }

  @media(width<=576px) {
    .industry-project-card__body {
      gap: 2.4rem
    }
  }

  .industry-project-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2.4rem
  }

  @media(width<=576px) {
    .industry-project-card__tags {
      gap: 1rem
    }
  }

  .industry-project-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 100%;
    border-radius: 5rem;
    padding: 1rem 1.5rem;
    background-color: #f2f2fa;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  @media(width<=576px) {
    .industry-project-card__tag {
      font-size: 1.2rem;
      line-height: 1.2
    }
  }

  .industry-project-card__tag--marked:before {
    content: "";
    width: .6rem;
    height: .6rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--primary-color)
  }

  .industry-project-card__title {
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.09rem;
    text-wrap: balance
  }

  @media(width<=576px) {
    .industry-project-card__title {
      font-size: 2rem;
      line-height: 1.25;
      letter-spacing: -.04rem
    }
  }

  .industry-project-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 6rem;
    border: 1px solid rgba(34, 34, 34, .2);
    border-radius: 4rem;
    padding: 1.7rem 3rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color .2s, background-color .2s, color .2s
  }

  .industry-project-card__link svg {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    color: var(--primary-color);
    fill: currentColor
  }

  @media(width<=576px) {
    .industry-project-card__link {
      min-height: 4.8rem;
      padding: 1.4rem 2.2rem;
      font-size: 1.1rem;
      letter-spacing: .11rem
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .industry-project-card__link:hover {
      border-color: var(--primary-color);
      background-color: var(--primary-color);
      color: #fff
    }

    .industry-project-card__link:hover svg {
      color: #fff
    }
  }
}

@layer components {
  .pagination {
    display: flex;
    justify-content: center
  }

  .pagination__list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50rem;
    min-height: 6rem;
    padding: 1rem 4rem;
    border-radius: 50rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .pagination__list {
      width: 100%;
      max-width: 50rem;
      padding-inline: 2.4rem
    }
  }

  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.9rem;
    min-height: 3.9rem;
    border-radius: 50rem;
    color: var(--text-color);
    font-family: var(--imb-plex-sans);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.05;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s, color .2s
  }

  .pagination__link.active {
    background-color: var(--primary-color);
    color: #f2f2fa
  }

  @media(hover:hover)and (pointer:fine) {
    .pagination__link:not(.active):hover {
      color: var(--primary-color)
    }
  }
}

@layer components {
  .press-center-card {
    min-height: 59rem;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 3rem
  }

  @media(width<=576px) {
    .press-center-card {
      min-height: auto;
      gap: 0
    }
  }

  .press-center-card__media {
    display: block;
    border-radius: .5rem;
    overflow: hidden;
    aspect-ratio: 425/297
  }

  .press-center-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .4s
  }

  .press-center-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem
  }

  @media(width<=576px) {
    .press-center-card__meta {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 1.6rem;
      padding-top: 3rem;
      margin-bottom: 4rem
    }
  }

  .press-center-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem
  }

  .press-center-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5rem;
    background: #fff;
    padding: 1rem 1.5rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  @media(width<=576px) {
    .press-center-card__tag {
      font-size: 1.2rem
    }
  }

  .press-center-card__date {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  @media(width<=576px) {
    .press-center-card__date {
      font-size: 1.2rem
    }
  }

  .press-center-card__title {
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem;
    margin-bottom: 3rem;
    margin-top: auto
  }

  @media(width<=576px) {
    .press-center-card__title {
      font-size: 2rem;
      letter-spacing: -.06rem;
      margin-top: 0;
      margin-bottom: 0
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .press-center-card:hover .press-center-card__media img {
      transform: scale(1.04)
    }
  }
}

@layer components {
  .product-category-card {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    height: 100%;
    color: #223
  }

  @media(width<=576px) {
    .product-category-card {
      gap: 2rem
    }
  }

  .product-category-card__image-wrapper {
    display: block;
    height: 29.7rem;
    border-radius: .5rem;
    overflow: hidden;
    background-color: #d8dce4
  }

  @media(width<=576px) {
    .product-category-card__image-wrapper {
      height: 22rem
    }
  }

  .product-category-card__image {
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    object-fit: cover;
    transition: transform .4s
  }

  .product-category-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4rem
  }

  @media(width<=576px) {
    .product-category-card__content {
      gap: 2rem
    }
  }

  .product-category-card__title {
    margin: 0;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .product-category-card__title {
      font-size: 1.4rem;
      line-height: 1.2;
      letter-spacing: -.042rem
    }
  }

  .product-category-card__button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 6rem;
    margin-top: auto;
    border: 1px solid rgba(34, 34, 34, .2);
    border-radius: 4rem;
    padding: 1.7rem 3rem;
    color: #223;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase;
    transition: border-color .2s, background-color .2s, color .2s
  }

  @media(width<=576px) {
    .product-category-card__button {
      gap: 1rem;
      min-height: 4.4rem;
      padding: 1.2rem 2rem;
      font-size: 1.1rem;
      letter-spacing: .11rem
    }
  }

  .product-category-card__button-arrow {
    color: var(--primary-color);
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    fill: currentColor;
    transition: color .2s
  }

  .product-category-card:focus-visible {
    border-radius: .5rem;
    outline: .3rem solid var(--primary-color);
    outline-offset: .3rem
  }

  @media(hover:hover)and (pointer:fine) {
    .product-category-card:hover .product-category-card__image {
      transform: scale(1.04)
    }

    .product-category-card:hover .product-category-card__button {
      border-color: var(--primary-color);
      background-color: var(--primary-color);
      color: #fff
    }

    .product-category-card:hover .product-category-card__button-arrow {
      color: #fff
    }
  }
}

@layer components {
  .cooperation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    aspect-ratio: 91/26;
    padding: 2.4rem;
    overflow: hidden;
    border: 1px solid rgba(34, 34, 34, .2);
    background-color: #fff;
    color: #223;
    text-decoration: none;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease
  }

  @media(hover:hover)and (pointer:fine) {
    .cooperation-card:hover {
      border-color: var(--primary-color);
      border-radius: .5rem;
      background-color: var(--primary-color);
      color: #fff
    }

    .cooperation-card:hover .cooperation-card__link {
      border-color: #fff;
      background-color: #fff;
      color: var(--primary-color)
    }

    .cooperation-card:hover .cooperation-card__hover-image {
      opacity: 1;
      transform: translateY(0)
    }
  }

  @media(width<=576px) {
    .cooperation-card {
      aspect-ratio: 343/220;
      padding: 1.8rem;
      border-color: var(--primary-color);
      border-radius: .5rem;
      background-color: var(--primary-color);
      color: #fff
    }
  }

  .cooperation-card:focus-visible {
    outline: .3rem solid var(--primary-color);
    outline-offset: .3rem
  }

  .cooperation-card:focus-visible {
    border-color: var(--primary-color);
    border-radius: .5rem;
    background-color: var(--primary-color);
    color: #fff
  }

  .cooperation-card:focus-visible .cooperation-card__link {
    border-color: #fff;
    background-color: #fff;
    color: var(--primary-color)
  }

  .cooperation-card:focus-visible .cooperation-card__hover-image {
    opacity: 1;
    transform: translateY(0)
  }

  .cooperation-card__title {
    position: relative;
    z-index: 1;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    color: currentColor
  }

  @media(width<=576px) {
    .cooperation-card__title {
      max-width: 23.5rem;
      font-size: 2.2rem;
      line-height: 1.15
    }
  }

  .cooperation-card__link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: max-content;
    padding: 1.7rem 3rem;
    border: 1px solid rgba(34, 34, 34, .2);
    border-radius: 4rem;
    background-color: transparent;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: uppercase;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease
  }

  @media(hover:hover)and (pointer:fine) {
    .cooperation-card__link:hover {
      opacity: .85
    }
  }

  .cooperation-card__link svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: currentColor;
    color: var(--primary-color);
    transition: color .3s ease
  }

  @media(width<=576px) {
    .cooperation-card__link {
      padding: 1.5rem 2.4rem;
      border-color: #fff;
      background-color: #fff;
      color: var(--primary-color);
      font-size: 1.2rem
    }
  }

  .cooperation-card__hover-image {
    position: absolute;
    right: 1.6rem;
    bottom: 1.5rem;
    z-index: 0;
    display: block;
    width: auto;
    height: 13.4rem;
    opacity: 0;
    mix-blend-mode: lighten;
    pointer-events: none;
    transform: translateY(1.2rem);
    transition: opacity .3s ease, transform .3s ease
  }

  @media(width<=576px) {
    .cooperation-card__hover-image {
      right: 1.2rem;
      bottom: 1.2rem;
      height: 9.4rem;
      opacity: 1;
      transform: translateY(0)
    }
  }
}

@layer components {
  @scope(.article-content)to (.article-snippet) {
    :scope {
      max-width: 137.5rem;
      margin-inline: auto;
      color: #223
    }

    :scope>:first-child {
      margin-top: 0
    }

    :scope>:last-child {
      margin-bottom: 0
    }

    :scope>h2 {
      margin-top: 8rem;
      margin-bottom: 8rem
    }

    @media(width<=576px) {
      :scope>h2 {
        margin-top: 4rem;
        margin-bottom: 4rem
      }
    }

    :scope>p,
    :scope>ol,
    :scope>ul {
      margin-top: 3rem;
      margin-bottom: 3rem
    }

    @media(width<=576px) {

      :scope>p,
      :scope>ol,
      :scope>ul {
        margin-top: 2rem;
        margin-bottom: 2rem
      }
    }

    :scope>figure {
      margin-top: 8rem;
      margin-bottom: 8rem
    }

    @media(width<=576px) {
      :scope>figure {
        margin-top: 4rem;
        margin-bottom: 4rem
      }
    }

    :is(h2, h3) {
      font-family: var(--inter-tight);
      font-style: normal;
      font-weight: 500;
      line-height: 1;
      color: #223;
      text-wrap: balance
    }

    h2 {
      font-size: 4.2rem
    }

    @media(width<=576px) {
      h2 {
        font-size: 2.4rem;
        line-height: 1.04;
        overflow-wrap: anywhere
      }
    }

    :is(p, li) {
      font-family: var(--inter);
      font-size: 2.2rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -.066rem
    }

    @media(width<=576px) {
      :is(p, li) {
        font-size: 1.4rem;
        line-height: 1.2;
        letter-spacing: -.042rem
      }
    }

    :is(a) {
      color: var(--primary-color);
      font-weight: 600;
      text-decoration: underline;
      text-decoration-color: currentColor;
      text-decoration-skip-ink: none;
      text-underline-offset: .2rem;
      transition: text-decoration-color .25s ease
    }

    @media(hover:hover) {
      :is(a):hover {
        text-decoration-color: transparent
      }
    }

    :is(ol, ul) {
      display: flex;
      flex-direction: column;
      gap: .8rem
    }

    @media(width<=576px) {
      :is(ol, ul) {
        gap: .6rem
      }
    }

    ol {
      counter-reset: article-content-list
    }

    ol>li,
    ul>li {
      position: relative;
      padding-left: 3.3rem
    }

    @media(width<=576px) {

      ol>li,
      ul>li {
        padding-left: 2.1rem
      }
    }

    ol>li:before {
      counter-increment: article-content-list;
      content: counter(article-content-list) ".";
      position: absolute;
      left: 0;
      top: 0
    }

    ul>li:before {
      content: "";
      position: absolute;
      left: .9rem;
      top: 1.15rem;
      width: .6rem;
      height: .6rem;
      border-radius: 50%;
      background-color: currentColor
    }

    @media(width<=576px) {
      ul>li:before {
        left: .5rem;
        top: .55rem
      }
    }

    :scope>h2 {
      margin-bottom: 4rem
    }

    :scope>:is(h3, h4, h5, h6) {
      margin-top: 6rem;
      margin-bottom: 2.4rem
    }

    :scope>:is(h2, h3, h4, h5, h6)+* {
      margin-top: 0
    }

    @media(width<=576px) {
      :scope>h2 {
        margin-bottom: 2.4rem
      }

      :scope>:is(h3, h4, h5, h6) {
        margin-top: 3.2rem;
        margin-bottom: 1.6rem
      }
    }
  }

  @scope(.article-content) {
    :scope>figure {
      width: min(100vw - var(--container-padding) * 2, var(--container-max-width));
      margin-left: 50%;
      transform: translate(-50%)
    }

    :scope>figure>img {
      width: 100%;
      height: auto;
      border-radius: .5rem
    }

    :scope>:is(h2, h3, figure),
    :scope>.article-snippet {
      clear: both
    }

    :scope>.article-snippet {
      margin-top: 8rem;
      margin-bottom: 8rem
    }

    @media(width<=576px) {
      :scope>.article-snippet {
        margin-top: 4rem;
        margin-bottom: 4rem
      }
    }

    :scope>.article-snippet:first-child {
      margin-top: 0
    }

    :scope>.article-snippet:last-child {
      margin-bottom: 0
    }

    @media(width<=576px) {
      :scope>.article-snippet--media-right {
        margin-top: 2rem;
        margin-bottom: 4rem
      }
    }
  }

  @scope(.article-snippet--company) {
    :scope {
      display: flex;
      align-items: center;
      gap: 4rem;
      padding: 5rem 8.95rem;
      border-radius: .5rem;
      background-color: #f2f2fa;
      min-height: 50rem
    }

    @media(width<=576px) {
      :scope {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        padding: 2rem;
        text-align: left;
        min-height: auto
      }
    }

    .article-snippet__logo {
      width: 15rem;
      height: 15rem;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      border: 1px solid rgba(34, 34, 51, .2);
      border-radius: 50%
    }

    @media(width<=576px) {
      .article-snippet__logo {
        width: 5rem;
        height: 5rem;
        border: 1px solid rgba(34, 34, 51, .2)
      }
    }

    .article-snippet__logo svg {
      width: 8rem;
      height: 8rem
    }

    @media(width<=576px) {
      .article-snippet__logo svg {
        width: 3rem;
        height: 3rem
      }
    }

    p {
      flex: 1 1 auto;
      font-family: var(--inter);
      font-size: 3rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.4;
      color: #223
    }

    @media(width<=576px) {
      p {
        font-size: 1.4rem;
        line-height: 1.2
      }
    }
  }

  @scope(.article-snippet--quote) {
    :scope {
      position: relative;
      margin-inline: 0;
      padding: 13.6rem 13.3rem;
      border-radius: .5rem;
      background-color: #f2f2fa;
      color: #223
    }

    @media(width<=576px) {
      :scope {
        padding: 6rem
      }
    }

    :scope:before,
    :scope:after {
      content: "";
      position: absolute;
      width: 7.2rem;
      height: 7.2rem;
      pointer-events: none
    }

    @media(width<=576px) {

      :scope:before,
      :scope:after {
        width: 3rem;
        height: 3rem
      }
    }

    :scope:before {
      left: 6.4rem;
      top: 6.4rem;
      border-left: .2rem solid var(--primary-color);
      border-top: .2rem solid var(--primary-color)
    }

    @media(width<=576px) {
      :scope:before {
        left: 2rem;
        top: 2rem
      }
    }

    :scope:after {
      right: 6.4rem;
      bottom: 6.4rem;
      border-right: .2rem solid var(--primary-color);
      border-bottom: .2rem solid var(--primary-color)
    }

    @media(width<=576px) {
      :scope:after {
        right: 2rem;
        bottom: 2rem
      }
    }

    :scope>p {
      margin: 0;
      font-family: var(--inter);
      font-size: 3rem;
      font-weight: 500;
      line-height: 1.4
    }

    @media(width<=576px) {
      :scope>p {
        font-size: 1.4rem;
        line-height: 1.2
      }
    }

    .article-snippet__quote-author {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: .8rem;
      margin-top: 6.4rem
    }

    @media(width<=576px) {
      .article-snippet__quote-author {
        margin-top: 3rem
      }
    }

    .article-snippet__quote-author cite {
      font-family: var(--inter);
      font-size: 2.2rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1;
      color: var(--primary-color)
    }

    @media(width<=576px) {
      .article-snippet__quote-author cite {
        font-size: 1.4rem
      }
    }

    .article-snippet__quote-author span {
      font-family: var(--inter);
      font-size: 2rem;
      font-weight: 500;
      line-height: 1
    }

    @media(width<=576px) {
      .article-snippet__quote-author span {
        font-size: 1.2rem
      }
    }
  }

  @scope(.article-snippet--gallery) {
    :scope {
      width: min(100vw - var(--container-padding) * 2, var(--container-max-width));
      margin-left: 50%;
      transform: translate(-50%)
    }

    .article-snippet__gallery-main {
      position: relative;
      border-radius: .5rem;
      overflow: hidden;
      background-color: #c6cad3
    }

    .article-snippet__gallery-list,
    .article-snippet__gallery-thumbs-list {
      list-style: none
    }

    .article-snippet__gallery-item img {
      width: 100%;
      aspect-ratio: 1840/930;
      object-fit: cover
    }

    @media(width<=576px) {
      .article-snippet__gallery-item img {
        aspect-ratio: 343/250
      }
    }

    .article-snippet__gallery-navigation {
      position: absolute;
      z-index: 2;
      left: 50%;
      bottom: 8.5rem;
      transform: translate(-50%)
    }

    @media(width<=576px) {
      .article-snippet__gallery-navigation {
        left: 50%;
        right: auto;
        bottom: 2.7rem;
        transform: translate(-50%);
        gap: .5rem
      }
    }

    .article-snippet__gallery-navigation .slider-navigation__button {
      background-color: #fff;
      color: #223
    }

    @media(width<=576px) {
      .article-snippet__gallery-navigation .slider-navigation__button {
        opacity: 1
      }
    }

    @media(hover:hover)and (pointer:fine) {
      .article-snippet__gallery-navigation .slider-navigation__button:hover {
        background-color: #ffffffd9
      }
    }

    @media(width<=576px) {
      .article-snippet__gallery-navigation .slider-navigation__button.swiper-button-disabled {
        opacity: 1
      }
    }

    .article-snippet__gallery-thumbs {
      margin-top: 1rem
    }

    @media(width<=576px) {
      .article-snippet__gallery-thumbs {
        overflow: visible
      }
    }

    .article-snippet__gallery-thumb {
      width: calc((100% - 7rem)/8);
      margin-right: 1rem;
      aspect-ratio: 1;
      border-radius: .5rem;
      overflow: hidden;
      cursor: pointer;
      opacity: .65;
      transition: opacity .2s, outline-color .2s
    }

    @media(width<=576px) {
      .article-snippet__gallery-thumb {
        width: 12rem
      }
    }

    .article-snippet__gallery-thumb:last-child {
      margin-right: 0
    }

    .article-snippet__gallery-thumb.swiper-slide-thumb-active {
      opacity: 1;
      outline: .3rem solid var(--primary-color);
      outline-offset: -.3rem
    }

    .article-snippet__gallery-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }
  }

  @scope(.article-snippet--media-right) {
    :scope {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 40rem;
      gap: 4.5rem;
      align-items: start
    }

    @media(width<=576px) {
      :scope {
        grid-template-columns: 1fr;
        gap: 0
      }
    }

    .article-snippet__content {
      grid-column: 1/2;
      min-width: 0
    }

    .article-snippet__content>p {
      margin: 0;
      font-family: var(--inter);
      font-size: 2.2rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -.066rem;
      color: #223
    }

    @media(width<=576px) {
      .article-snippet__content>p {
        font-size: 1.4rem;
        line-height: 1.2;
        letter-spacing: -.042rem
      }
    }

    .article-snippet__content>p+p {
      margin-top: 3rem
    }

    @media(width<=576px) {
      .article-snippet__content>p+p {
        margin-top: 2rem
      }
    }

    :scope>img {
      display: block;
      grid-column: 2/3;
      grid-row: 1;
      width: 100%;
      height: auto;
      border-radius: .5rem
    }

    @media(width<=576px) {
      :scope>img {
        grid-column: 1/2;
        grid-row: auto;
        margin-top: 4rem
      }
    }
  }
}

@layer components {
  .award-card {
    color: inherit
  }

  .award-card__media {
    display: block;
    border-radius: .5rem;
    overflow: hidden
  }

  .award-card__media img {
    display: block;
    width: 100%;
    height: auto
  }

  .award-card--vertical .award-card__media {
    width: 60.9412%;
    margin-inline: auto;
    border-radius: 0;
    overflow: visible;
    aspect-ratio: auto
  }

  .award-card--vertical .award-card__title {
    margin-top: 4rem;
    text-align: center
  }

  @media(width<=576px) {
    .award-card--vertical .award-card__title {
      margin-top: 2rem
    }
  }

  .award-card__title {
    margin-top: 3rem;
    color: inherit;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .award-card__title {
      margin-top: 2rem;
      font-size: 1.8rem;
      letter-spacing: -.04rem
    }
  }
}

@layer components {
  .document-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem;
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 2rem;
    row-gap: 2rem;
    width: 100%;
    height: 100%;
    padding: 2rem;
    border: 1px solid #c2c2c8;
    border-radius: .5rem;
    color: var(--text-color);
    text-decoration: none;
    transition: border-color .2s, background-color .2s
  }

  @media(width<=576px) {
    .document-card {
      grid-template-columns: minmax(0, 1fr) 3.6rem;
      column-gap: 1.2rem;
      row-gap: 1.2rem;
      padding: 2rem
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .document-card:hover {
      border-color: var(--primary-color)
    }
  }

  .document-card__title {
    grid-column: 1/-1;
    font-family: var(--inter);
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    color: inherit
  }

  @media(width<=576px) {
    .document-card__title {
      font-size: 1.4rem;
      line-height: 1.2
    }
  }

  .document-card__meta {
    grid-column: 1/2;
    grid-row: 2/3;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: inherit;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    opacity: .7;
    white-space: nowrap;
    align-self: flex-start
  }

  @media(width<=576px) {
    .document-card__meta {
      gap: .8rem;
      font-size: 1.2rem
    }
  }

  .document-card__download {
    grid-column: 1/2;
    grid-row: 3/4;
    align-self: end;
    color: inherit;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  @media(width<=576px) {
    .document-card__download {
      font-size: 1.4rem
    }
  }

  .document-card__icon {
    grid-column: 2/3;
    grid-row: 2/4;
    align-self: end;
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background-color: #eb0037;
    color: #fff
  }

  @media(width<=576px) {
    .document-card__icon {
      width: 3.6rem;
      height: 3.6rem
    }
  }

  .document-card__icon--docx {
    background-color: #1b9963
  }

  .document-card__icon--jpeg {
    background-color: #1fadce
  }

  .document-card--format-neutral .document-card__icon {
    background-color: #f2f2fa;
    color: var(--text-color)
  }

  .document-card__icon-text {
    font-family: var(--inter);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02rem;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .document-card__icon-text {
      font-size: .8rem
    }
  }
}

@layer sections {
  .feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s
  }

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

  @media(width<=576px) {
    .feedback-modal {
      padding: 1.6rem;
      align-items: flex-start
    }
  }

  .feedback-modal__backdrop {
    position: absolute;
    inset: 0;
    background: #0009
  }

  .feedback-modal__dialog {
    position: relative;
    width: min(100%, 137.5rem);
    overflow: hidden;
    border-radius: .5rem;
    color: #fff
  }

  @media(width<=576px) {
    .feedback-modal__dialog {
      width: 100%
    }
  }

  .feedback-modal--success .feedback-modal__dialog {
    width: min(100%, 40.5rem);
    background-color: var(--primary-color)
  }

  .feedback-modal--success .feedback-modal__bg-picture {
    display: none
  }

  .feedback-modal__bg-picture {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%
  }

  .feedback-modal__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom
  }

  .feedback-modal__close {
    position: absolute;
    z-index: 2;
    top: 1.6rem;
    right: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    padding: .45rem;
    color: #fff
  }

  .feedback-modal__close svg {
    width: 1.5rem;
    fill: currentcolor
  }

  .feedback-modal__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
    padding: 4rem
  }

  @media(width<=576px) {
    .feedback-modal__content {
      display: flex;
      flex-direction: column;
      gap: 3.2rem;
      padding: 4rem 2.1rem
    }
  }

  .feedback-modal__head {
    display: flex;
    flex: 0 0 28rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem
  }

  @media(width<=576px) {
    .feedback-modal__head {
      flex: 0 1 auto;
      gap: 3rem;
      width: 100%
    }
  }

  .feedback-modal__title {
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .feedback-modal__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .feedback-modal__title br {
      display: none
    }
  }

  .feedback-modal--success .feedback-modal__title {
    font-weight: 400;
    letter-spacing: 0
  }

  .feedback-modal__description {
    width: 100%;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap
  }

  @media(width<=576px) {
    .feedback-modal__description {
      white-space: normal
    }
  }

  .feedback-modal--success .feedback-modal__content {
    justify-content: flex-start;
    padding: 4rem
  }

  .feedback-modal__head--success {
    flex: 0 1 auto;
    gap: 3rem;
    width: 100%
  }

  .feedback-modal--success .feedback-modal__description {
    text-align: center;
    white-space: normal
  }

  .feedback-modal .feedback-modal__form {
    flex: 0 0 77rem;
    gap: 4rem
  }

  @media(width<=576px) {
    .feedback-modal .feedback-modal__form {
      flex: 0 1 auto;
      gap: 0;
      margin-top: 0;
      width: 100%
    }
  }

  .feedback-modal .feedback-modal__form-row {
    grid-template-columns: 34.5rem minmax(0, 1fr);
    gap: 2rem;
    padding-block: 2.4rem
  }

  @media(width<=576px) {
    .feedback-modal .feedback-modal__form-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 2rem;
      padding-block: 2.4rem
    }
  }

  .feedback-modal .feedback-modal__form-footer {
    grid-template-columns: 34.5rem minmax(0, 1fr);
    gap: 4rem;
    margin-top: 0
  }

  @media(width<=576px) {
    .feedback-modal .feedback-modal__form-footer {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 2rem;
      margin-top: 2rem
    }
  }

  .feedback-modal .feedback-modal__form-submit {
    width: 100%;
    padding-block: 3rem;
    white-space: nowrap
  }

  @media(width<=576px) {
    .feedback-modal .feedback-modal__form-submit {
      order: 2;
      padding-block: 2.1rem
    }
  }

  .feedback-modal .feedback-modal__form-policy {
    font-size: 1.4rem;
    line-height: 1.4
  }

  @media(width<=576px) {
    .feedback-modal .feedback-modal__form-policy {
      order: 1;
      line-height: 1.5
    }
  }
}

@layer sections {
  .feedback-modal--product-cart {
    align-items: safe center;
    padding-block: 1rem;
    overscroll-behavior-y: contain;
    scroll-padding-block: 1rem
  }

  @media(width<=576px) {
    .feedback-modal--product-cart {
      align-items: flex-start;
      padding-block: 1.6rem;
      scroll-padding-block: 1.6rem
    }
  }

  .feedback-modal--product-cart .feedback-modal__backdrop {
    position: fixed
  }

  .feedback-modal--product-cart .product-cart-modal__dialog {
    flex: none;
    width: min(100%, 140rem);
    transform: translateY(1rem) scale(.99);
    transition: transform .2s ease
  }

  .feedback-modal--product-cart.is-open .product-cart-modal__dialog {
    transform: translateY(0) scale(1)
  }

  .product-cart-modal__bg {
    object-position: center bottom
  }

  .feedback-modal--product-cart .product-cart-modal__content {
    display: grid;
    grid-template-columns: minmax(0, 48.5rem) minmax(0, 77rem);
    gap: 4rem;
    justify-content: start;
    padding: 4rem
  }

  @media(width<=576px) {
    .feedback-modal--product-cart .product-cart-modal__content {
      display: flex;
      flex-direction: column;
      gap: 3.2rem;
      padding: 4rem 2.1rem
    }
  }

  .feedback-modal--product-cart .product-cart-modal__head {
    flex: none
  }

  @media(width<=576px) {
    .feedback-modal--product-cart .product-cart-modal__head {
      gap: 2rem
    }
  }

  .feedback-modal--product-cart .product-cart-modal__form {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    gap: 0;
    margin: 0
  }

  .product-cart-modal__products,
  .product-cart-modal__list {
    display: flex;
    flex-direction: column
  }

  .product-cart-modal__product {
    display: grid;
    grid-template-columns: minmax(0, 34.5rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding-block: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .2)
  }

  @media(width<=576px) {
    .product-cart-modal__product {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 1.6rem;
      padding-block: 2rem
    }
  }

  .product-cart-modal__product:first-child {
    padding-top: 0
  }

  .product-cart-modal__product-title {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2
  }

  .product-cart-modal__product-actions {
    display: grid;
    grid-template-columns: auto 7.8rem 4rem;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    min-width: 0
  }

  @media(width<=576px) {
    .product-cart-modal__product-actions {
      grid-template-columns: auto 5.8rem 3.6rem;
      gap: 1.2rem
    }
  }

  .product-cart-modal__quantity {
    display: grid;
    grid-template-columns: 4rem minmax(5.4rem, 1fr) 4rem;
    gap: .8rem;
    align-items: center;
    width: 15rem
  }

  @media(width<=576px) {
    .product-cart-modal__quantity {
      grid-template-columns: 3.6rem minmax(4.8rem, 1fr) 3.6rem;
      gap: .6rem;
      width: 13.2rem
    }
  }

  .product-cart-modal__round-button {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    border: 1px solid currentcolor;
    border-radius: 50%;
    color: #fff;
    font-family: var(--inter);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    transition: border-color .2s, background-color .2s, color .2s
  }

  @media(width<=576px) {
    .product-cart-modal__round-button {
      width: 3.6rem;
      height: 3.6rem;
      flex-basis: 3.6rem
    }
  }

  .product-cart-modal__round-button svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: currentcolor
  }

  .product-cart-modal__quantity-input {
    width: 100%;
    height: 4rem;
    padding-inline: .4rem;
    appearance: textfield;
    border: 1px solid #223;
    border-radius: 2rem;
    background-color: #223;
    color: #fff;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transition: border-color .2s, background-color .2s
  }

  @media(width<=576px) {
    .product-cart-modal__quantity-input {
      height: 3.6rem
    }
  }

  .product-cart-modal__quantity-input::-webkit-inner-spin-button,
  .product-cart-modal__quantity-input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none
  }

  .product-cart-modal__quantity-input:focus {
    border-color: #ffffff24;
    outline: none;
    background-color: #22223359
  }

  .product-cart-modal__product-image {
    display: block;
    width: 7.8rem;
    aspect-ratio: 78/67;
    border-radius: .5rem;
    object-fit: cover
  }

  @media(width<=576px) {
    .product-cart-modal__product-image {
      width: 5.8rem
    }
  }

  .product-cart-modal__delete-all {
    display: flex;
    align-items: center;
    align-self: flex-end;
    gap: 1.8rem;
    margin-top: 1.1rem;
    color: #fff;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2
  }

  @media(width<=576px) {
    .product-cart-modal__delete-all {
      margin-top: 2.4rem
    }
  }

  .feedback-modal--product-cart .product-cart-modal__form-rows {
    margin-top: 2rem
  }

  @media(width<=576px) {
    .feedback-modal--product-cart .product-cart-modal__form-rows {
      margin-top: 3.2rem
    }
  }

  .feedback-modal--product-cart .product-cart-modal__form-row {
    padding-block: 2.65rem
  }

  @media(width<=576px) {
    .feedback-modal--product-cart .product-cart-modal__form-row {
      padding-block: 2.4rem
    }
  }

  .feedback-modal--product-cart .product-cart-modal__form-footer {
    margin-top: 0
  }

  @media(width<=576px) {
    .feedback-modal--product-cart .product-cart-modal__form-footer {
      margin-top: 2.4rem
    }
  }

  @media(hover:hover)and (pointer:fine) {

    .product-cart-modal__round-button:hover,
    .product-cart-modal__round-button:focus-visible,
    .product-cart-modal__delete-all:hover .product-cart-modal__round-button,
    .product-cart-modal__delete-all:focus-visible .product-cart-modal__round-button {
      border-color: var(--primary-color);
      background-color: var(--primary-color)
    }
  }

  @media(prefers-reduced-motion:reduce) {
    .feedback-modal--product-cart .product-cart-modal__dialog {
      transition: none
    }
  }
}

@layer components {
  .select {
    position: relative;
    color: var(--text-color)
  }

  .select.active {
    z-index: 40
  }

  .select__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    min-height: 6rem;
    padding: 1.7rem 3rem;
    border: 1px solid #c2c2c8;
    border-radius: 4rem;
    color: inherit;
    background-color: transparent;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.05;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background-color .2s
  }

  .select__button-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .select:not(.choice-selected) .select__button-text {
    opacity: .5
  }

  .select__arrow {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    transition: transform .2s
  }

  @media(width<=576px) {
    .select__arrow {
      width: 1.5rem;
      height: 1.5rem
    }
  }

  .select__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor
  }

  .select.active .select__arrow {
    transform: rotate(180deg)
  }

  .select.active .select__button {
    border-color: var(--primary-color)
  }

  @media(hover:hover)and (pointer:fine) {
    .select:not(.active) .select__button:hover {
      border-color: var(--text-color)
    }
  }

  .select__reset {
    position: absolute;
    right: 3rem;
    top: 50%;
    z-index: 2;
    display: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-color);
    transform: translateY(-50%)
  }

  .select__reset svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor
  }

  .select--clearable.choice-selected .select__reset {
    display: block
  }

  .select--clearable.choice-selected .select__arrow {
    opacity: 0
  }

  .select__dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + .8rem);
    z-index: 30;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background-color: #fff;
    box-shadow: 0 1.6rem 4rem #22223314;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.6rem);
    transition: opacity .2s, visibility .2s, transform .2s
  }

  @media(width<=576px) {
    .select__dropdown {
      box-shadow: 0 1rem 2.4rem #22223314
    }
  }

  .select.active .select__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
  }

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

  .select__option {
    display: flex;
    width: 100%;
    padding: 0;
    border-radius: 0;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.05;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color .2s, color .2s
  }

  @media(width<=576px) {
    .select__option {
      font-size: 1.4rem;
      line-height: 1.05
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .select__option:hover {
      color: #fff;
      background-color: var(--primary-color)
    }
  }

  .select__option-content {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: 1.6rem 3rem;
    border-radius: inherit;
    overflow: hidden
  }

  @media(width<=576px) {
    .select__option-content {
      padding: 1.6rem 2rem
    }
  }

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

  .select__option-mark {
    position: relative;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid #c2c2c8;
    border-radius: .2rem;
    color: var(--text-color);
    transition: border-color .2s, color .2s
  }

  .select__option-mark svg {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    fill: currentColor;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .2s
  }

  @media(hover:hover)and (pointer:fine) {
    .select__option:hover .select__option-mark {
      border-color: #fff;
      color: #fff
    }
  }

  .select__input:checked+.select__option-content {
    color: inherit
  }

  .select__input:checked+.select__option-content .select__option-mark svg {
    opacity: 1
  }

  .select__item--apply {
    padding: 1.6rem 3rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .select__item--apply {
      padding: 1.6rem 2rem
    }
  }

  .select__apply {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 5.6rem;
    padding: 1.8rem 3rem;
    border: .3rem solid var(--primary-color);
    border-radius: 5rem;
    background-color: var(--primary-color);
    color: #fff;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s, background-color .2s
  }

  @media(hover:hover)and (pointer:fine) {
    .select__apply:hover {
      border-color: #005fbd;
      background-color: #005fbd
    }
  }

  .select__apply:focus-visible {
    outline: none;
    border-color: #005fbd;
    background-color: #005fbd
  }
}

@layer components {
  .slider-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem
  }

  .slider-navigation:has(.swiper-button-lock) {
    display: none !important
  }

  @media(width<=576px) {
    .slider-navigation {
      gap: .5rem
    }
  }

  .slider-navigation__button {
    display: grid;
    place-items: center;
    width: 6rem;
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: #2222331a;
    color: #223;
    cursor: pointer;
    transition: background-color .2s, opacity .2s
  }

  .slider-navigation__button svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: currentColor
  }

  @media(width<=576px) {
    .slider-navigation__button {
      width: 4rem
    }

    .slider-navigation__button svg {
      width: 1.2rem;
      height: 1.2rem
    }
  }

  .slider-navigation__button.swiper-button-disabled {
    opacity: .35;
    pointer-events: none
  }

  @media(hover:hover)and (pointer:fine) {
    .slider-navigation__button:hover {
      background: #22223329
    }
  }

  .slider-navigation--light .slider-navigation__button {
    background: #ffffff3b;
    color: #fff
  }

  @media(hover:hover)and (pointer:fine) {
    .slider-navigation--light .slider-navigation__button:hover {
      background: #ffffff4d
    }
  }
}

@layer components {
  .catalog-menu {
    --catalog-menu-grid-gap: 2rem;
    --catalog-menu-grid-column-width: calc((100vw - (var(--container-padding) * 2) - (var(--catalog-menu-grid-gap) * 7)) / 8);
    --catalog-menu-level-1-width: calc(var(--container-padding) + var(--catalog-menu-grid-column-width));
    --catalog-menu-remaining-width: calc(100vw - var(--catalog-menu-level-1-width));
    --catalog-menu-level-2-width: calc(var(--catalog-menu-remaining-width) / 46 * 10);
    --catalog-menu-level-3-width: calc(var(--catalog-menu-remaining-width) / 46 * 17);
    --catalog-menu-level-4-width: calc(var(--catalog-menu-remaining-width) / 46 * 19);
    position: relative;
    z-index: 4;
    flex: 0 0 var(--catalog-menu-level-1-width);
    pointer-events: none
  }

  @media(width<=576px) {
    .catalog-menu {
      position: relative;
      order: 2;
      z-index: auto;
      width: auto;
      height: auto;
      margin: 0 1.6rem 2.6rem;
      pointer-events: auto
    }
  }

  .catalog-menu__trigger {
    display: none
  }

  @media(width<=576px) {
    .catalog-menu__trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 6rem;
      padding: 2rem 3rem;
      border-radius: 4rem;
      background-color: #f2f2fa;
      color: var(--text-color);
      font-family: var(--inter);
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: .14rem;
      text-transform: uppercase
    }

    .catalog-menu__trigger svg {
      flex: none;
      width: 1.5rem;
      height: .9rem;
      fill: currentColor
    }
  }

  .catalog-menu__modal {
    display: contents
  }

  @media(width<=576px) {
    .catalog-menu__modal {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 250;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      pointer-events: none;
      scrollbar-width: none
    }

    .catalog-menu.is-open .catalog-menu__modal {
      pointer-events: auto
    }

    .catalog-menu__modal::-webkit-scrollbar {
      display: none
    }
  }

  .catalog-menu__backdrop {
    display: none
  }

  @media(width<=576px) {
    .catalog-menu__backdrop {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 398;
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      background-color: #00000073;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .25s, visibility .25s
    }

    .catalog-menu.is-open .catalog-menu__backdrop {
      opacity: 1;
      visibility: visible;
      pointer-events: auto
    }
  }

  .catalog-menu__surface {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100%;
    pointer-events: none
  }

  .catalog-menu__surface:before {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    content: "";
    pointer-events: auto
  }

  .catalog-menu[data-active-level="2"] .catalog-menu__surface:before {
    width: calc(var(--catalog-menu-level-1-width) + var(--catalog-menu-level-2-width))
  }

  .catalog-menu[data-active-level="3"] .catalog-menu__surface:before {
    width: calc(var(--catalog-menu-level-1-width) + var(--catalog-menu-level-2-width) + var(--catalog-menu-level-3-width))
  }

  .catalog-menu[data-active-level="4"] .catalog-menu__surface:before {
    width: 100vw
  }

  @media(width<=576px) {
    .catalog-menu__surface {
      position: relative;
      left: 0;
      top: auto;
      right: 0;
      z-index: 399;
      width: 100%;
      height: auto;
      margin-top: auto;
      min-height: 55.8rem;
      overflow: clip;
      border-radius: 1rem 1rem 0 0;
      background-color: #fff;
      box-shadow: 0 0 7.4rem #00000026;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(3rem);
      transition: opacity .25s, visibility .25s, transform .25s
    }

    [data-active-level] .catalog-menu__surface {
      width: 100%
    }

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

    .catalog-menu__surface:before {
      display: none
    }
  }

  .catalog-menu__panel {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid #ccc;
    background-color: #fff;
    color: var(--text-color);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    scrollbar-width: thin
  }

  .catalog-menu__panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
  }

  @media(width<=576px) {
    .catalog-menu__panel {
      left: 0;
      width: 100%;
      height: auto;
      overflow: visible;
      padding: 0 2.4rem;
      border-right: 0;
      animation: catalog-panel-in .2s ease both
    }

    .catalog-menu__panel.is-active {
      position: relative
    }
  }

  .catalog-menu__panel--level-1 {
    position: relative;
    left: 0;
    z-index: 1;
    width: 100%
  }

  .catalog-menu__panel--level-2,
  .catalog-menu__panel--level-3,
  .catalog-menu__panel--level-4 {
    left: 0;
    z-index: 1;
    width: 100%
  }

  .catalog-menu__track {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    background-color: #fff;
    box-shadow: -1px 0 #fff;
    pointer-events: none;
    transform: translateZ(0);
    will-change: transform;
    transition: transform .6s ease
  }

  .catalog-menu__track.is-open {
    transform: translate3d(100%, 0, 0)
  }

  @media(width<=576px) {
    .catalog-menu__track {
      display: contents
    }
  }

  .catalog-menu__track--level-2 {
    width: var(--catalog-menu-level-2-width)
  }

  .catalog-menu__track--level-3 {
    width: var(--catalog-menu-level-3-width)
  }

  .catalog-menu__track--level-4 {
    width: var(--catalog-menu-level-4-width)
  }

  @media(width>576px) {
    .catalog-menu__panel.is-swapping:not(.catalog-menu__panel--level-1) {
      opacity: 1;
      visibility: visible
    }

    .catalog-menu__panel:not(.catalog-menu__panel--level-1) .catalog-menu__list {
      opacity: 0;
      transition: opacity 1ms linear
    }

    .catalog-menu__panel.is-active:not(.catalog-menu__panel--level-1) .catalog-menu__list {
      opacity: 1;
      transition: opacity .6s ease
    }
  }

  @media(width<=576px) {

    .catalog-menu__panel--level-1,
    .catalog-menu__panel--level-2,
    .catalog-menu__panel--level-3,
    .catalog-menu__panel--level-4 {
      position: absolute;
      left: 0;
      width: 100%
    }
  }

  .catalog-menu__panel-header {
    display: none
  }

  @media(width<=576px) {
    .catalog-menu__panel-header {
      display: flex;
      flex: none;
      align-items: center;
      justify-content: space-between;
      gap: 2.4rem;
      min-height: 7.2rem;
      margin: 0 -2.4rem;
      padding: 1.6rem 2rem;
      border-bottom: 1px solid #dbdbdb;
      background-color: #fff
    }
  }

  .catalog-menu__panel-heading {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 1.6rem;
    min-width: 0
  }

  .catalog-menu__panel-title {
    overflow-wrap: anywhere;
    font-family: var(--imb-plex-sans);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.032rem;
    text-transform: none
  }

  .catalog-menu__panel--mobile-uppercase .catalog-menu__panel-title {
    text-transform: uppercase
  }

  .catalog-menu__back,
  .catalog-menu__close {
    display: grid;
    flex: none;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%
  }

  .catalog-menu__back {
    background-color: #f2f2fa;
    color: var(--text-color)
  }

  .catalog-menu__back svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor
  }

  .catalog-menu__close {
    background-color: var(--primary-color);
    color: #fff
  }

  .catalog-menu__close svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor
  }

  .catalog-menu__list {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    margin: 0;
    padding: 4.7rem 4rem;
    list-style: none
  }

  .catalog-menu__panel--level-3 .catalog-menu__list,
  .catalog-menu__panel--level-4 .catalog-menu__list {
    gap: 2.5rem
  }

  @media(width<=576px) {
    .catalog-menu__list {
      gap: .8rem;
      padding: 1rem 0 0
    }

    .catalog-menu__panel--level-3 .catalog-menu__list,
    .catalog-menu__panel--level-4 .catalog-menu__list {
      gap: .8rem
    }
  }

  .catalog-menu__item {
    min-width: 0
  }

  .catalog-menu__link {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    text-align: left
  }

  @media(width<=576px) {
    .catalog-menu__link {
      align-items: center;
      gap: 2.4rem;
      min-height: 5.2rem;
      padding: 1.6rem 0;
      font-family: var(--imb-plex-sans);
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -.03rem
    }

    .catalog-menu__panel--mobile-uppercase .catalog-menu__link {
      text-transform: uppercase
    }

    .catalog-menu__panel--level-3 .catalog-menu__link,
    .catalog-menu__panel--level-4 .catalog-menu__link {
      font-size: 1.6rem;
      letter-spacing: -.032rem;
      text-transform: none
    }
  }

  .catalog-menu__link-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start
  }

  .catalog-menu__link-label {
    text-decoration-thickness: 1px;
    text-underline-offset: .2rem
  }

  @media(width<=576px) {
    .catalog-menu__link-label {
      text-decoration: none
    }
  }

  .catalog-menu__link.is-active .catalog-menu__link-label,
  .catalog-menu__link:focus-visible .catalog-menu__link-label {
    text-decoration: underline
  }

  @media(hover:hover)and (pointer:fine) {
    .catalog-menu__link:hover .catalog-menu__link-label {
      text-decoration: underline
    }
  }

  .catalog-menu__arrow {
    flex: none;
    color: #ccc;
    transition: color .2s
  }

  .catalog-menu__arrow-desktop {
    display: block;
    width: .7rem;
    height: 1.2rem;
    fill: currentColor
  }

  @media(width<=576px) {
    .catalog-menu__arrow-desktop {
      display: none
    }
  }

  .catalog-menu__arrow-mobile {
    display: none
  }

  @media(width<=576px) {
    .catalog-menu__arrow-mobile {
      display: block;
      width: 2.4rem;
      height: 2.4rem;
      fill: var(--primary-color)
    }
  }

  .catalog-menu__link.is-active .catalog-menu__arrow,
  .catalog-menu__link:focus-visible .catalog-menu__arrow {
    color: var(--primary-color)
  }

  @media(hover:hover)and (pointer:fine) {
    .catalog-menu__link:hover .catalog-menu__arrow {
      color: var(--primary-color)
    }
  }

  .catalog-menu__product-image {
    width: 20rem;
    aspect-ratio: 1;
    margin-top: 2.5rem;
    border-radius: .3rem;
    object-fit: cover
  }

  @media(width<=576px) {
    .catalog-menu__product-image {
      width: 11.6rem;
      margin-top: 2rem;
      border-radius: .2rem
    }
  }

  @media(width<=576px) {

    .catalog-menu__link.is-active .catalog-menu__link-label,
    .catalog-menu__link:focus-visible .catalog-menu__link-label {
      text-decoration: none
    }

    .catalog-menu__panel--level-4 .catalog-menu__link {
      align-items: flex-start
    }
  }

  body.catalog-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none
  }

  @keyframes catalog-panel-in {
    0% {
      opacity: 0;
      transform: translate(1.5rem)
    }

    to {
      opacity: 1;
      transform: translate(0)
    }
  }

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

    .catalog-menu__surface,
    .catalog-menu__panel,
    .catalog-menu__list {
      transition: none;
      animation: none !important
    }
  }
}

@layer sections {
  .hero {
    position: relative;
    color: #fff;
    background-color: #001932;
    overflow: clip;
    isolation: isolate
  }

  .hero__bg {
    position: sticky;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100vh;
    margin-bottom: -100vh;
    overflow: clip;
    pointer-events: none
  }

  @media(width<=576px) {
    .hero__bg {
      height: 100svh;
      margin-bottom: -100svh
    }
  }

  .hero__bg:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0019321f, #00193273 48%, #001932c7)
  }

  .hero__bg img,
  .hero__bg video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .hero__bg picture {
    display: block;
    width: 100%;
    height: 100%
  }

  @media(width<=576px) {
    .hero__bg picture {
      height: 100%
    }
  }

  @media(width<=576px) {
    .hero__bg img {
      object-position: center top
    }
  }

  .hero__bg-video {
    opacity: .85
  }

  @media(prefers-reduced-motion:reduce) {
    .hero__bg-video {
      display: none
    }
  }

  .hero__intro {
    position: relative;
    z-index: 1;
    min-height: 100vh
  }

  @media(width<=576px) {
    .hero__intro {
      min-height: 100svh
    }
  }

  .hero__content {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    padding-top: 24rem;
    padding-bottom: 4rem;
    min-height: 70vh
  }

  @media(width<=576px) {
    .hero__content {
      grid-template-columns: 1fr;
      padding-top: 11.6rem;
      padding-bottom: 4rem;
      min-height: 75svh
    }
  }

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

  .hero__overlay:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100vw;
    margin-left: -50vw;
    background-color: #006fdd99;
    backdrop-filter: blur(6.5rem);
    -webkit-mask-image: linear-gradient(#fff 0 0), url(../i/hero/mask.svg);
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 100% 100%, 32.2rem 33.1rem;
    -webkit-mask-position: 0 0, left 4rem bottom 4rem;
    -webkit-mask-mode: alpha, alpha;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#fff 0 0), url(../i/hero/mask.svg);
    mask-repeat: no-repeat, no-repeat;
    mask-size: 100% 100%, 32.2rem 33.1rem;
    mask-position: 0 0, left 4rem bottom 4rem;
    mask-mode: alpha, alpha;
    mask-composite: exclude
  }

  @media(width<=576px) {
    .hero__overlay:before {
      background-color: #006fdd99;
      backdrop-filter: blur(3.5rem);
      -webkit-mask-size: 100% 100%, 10rem auto;
      -webkit-mask-position: 0 0, right 1.6rem bottom 4rem;
      mask-size: 100% 100%, 10rem auto;
      mask-position: 0 0, right 1.6rem bottom 4rem
    }
  }

  .hero__content-inner {
    grid-column: 5/-1;
    align-self: flex-end;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem
  }

  @media(width<=576px) {
    .hero__content-inner {
      grid-column: 1/-1;
      align-self: flex-end
    }
  }

  .hero__text-content {
    width: 30%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem
  }

  @media(width<=576px) {
    .hero__text-content {
      gap: 1rem;
      width: auto;
      flex-grow: 0;
      padding-right: 12rem
    }
  }

  .hero__title {
    font-family: var(--inter-tight);
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .hero__title {
      font-size: 3rem
    }
  }

  .hero__description {
    font-family: var(--inter-tight);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -.03rem
  }

  @media(width<=576px) {
    .hero__description {
      font-size: 1.4rem;
      letter-spacing: -.014rem
    }
  }

  .hero__caption {
    font-family: var(--inter);
    font-size: 1.4rem;
    line-height: 1.8;
    color: #ffffff80
  }

  @media(width<=576px) {
    .hero__caption {
      margin-top: 2rem;
      font-size: 1.2rem;
      line-height: 1.8
    }
  }

  .hero__social-list {
    display: flex;
    align-items: center;
    gap: 1rem
  }

  @media(width<=576px) {
    .hero__social-list {
      display: none
    }
  }

  .hero__social-link {
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: #000000b8;
    transition: background-color .2s
  }

  .hero__social-link svg {
    width: 6rem;
    height: 6rem;
    fill: #fff;
    transition: fill .2s
  }

  @media(hover:hover)and (pointer:fine) {
    .hero__social-link:hover {
      background-color: #fff
    }

    .hero__social-link:hover svg {
      fill: var(--primary-color)
    }
  }
}

@layer sections {
  .not-found {
    position: relative;
    min-height: 100vh;
    margin-bottom: 13.4rem;
    color: #fff;
    background-color: #001932;
    overflow: clip;
    isolation: isolate
  }

  @media(width<=576px) {
    .not-found {
      min-height: 100svh;
      margin-bottom: 3.8rem
    }
  }

  .not-found__bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    overflow: clip;
    pointer-events: none
  }

  .not-found__bg:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #00193224, #00193261 48%, #001932ad)
  }

  .not-found__bg img,
  .not-found__bg video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .not-found__bg picture {
    display: block;
    width: 100%;
    height: 100%
  }

  .not-found__bg-video {
    opacity: .85
  }

  @media(prefers-reduced-motion:reduce) {
    .not-found__bg-video {
      display: none
    }
  }

  .not-found__content {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    min-height: 70.84vh;
    padding-top: 14rem;
    padding-bottom: 4rem
  }

  @media(width<=576px) {
    .not-found__content {
      grid-template-columns: 1fr;
      min-height: 72svh;
      padding-top: 14rem;
      padding-bottom: 4rem
    }
  }

  .not-found__overlay {
    position: absolute;
    inset: 0;
    z-index: -1
  }

  .not-found__overlay:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100vw;
    margin-left: -50vw;
    background-color: #006fdd99;
    backdrop-filter: blur(6.5rem);
    -webkit-mask-image: linear-gradient(#fff 0 0), url(../i/404/mask.svg);
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 100% 100%, 77.1rem 31.1rem;
    -webkit-mask-position: 0 0, left 4rem bottom 8rem;
    -webkit-mask-mode: alpha, alpha;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#fff 0 0), url(../i/404/mask.svg);
    mask-repeat: no-repeat, no-repeat;
    mask-size: 100% 100%, 77.1rem 31.1rem;
    mask-position: 0 0, left 4rem bottom 8rem;
    mask-mode: alpha, alpha;
    mask-composite: exclude
  }

  @media(width<=576px) {
    .not-found__overlay:before {
      backdrop-filter: blur(3.5rem);
      -webkit-mask-size: 100% 100%, 30rem auto;
      -webkit-mask-position: 0 0, left var(--container-padding) bottom 3rem;
      mask-size: 100% 100%, 30rem auto;
      mask-position: 0 0, left var(--container-padding) bottom 3rem
    }
  }

  .not-found__text {
    grid-column: 5/-1;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    max-width: 76.4rem;
    padding-bottom: 4rem
  }

  @media(width<=576px) {
    .not-found__text {
      grid-column: 1/-1;
      gap: 2rem;
      max-width: none;
      padding-bottom: 15rem
    }
  }

  .not-found__title {
    font-family: var(--inter-tight);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .not-found__title {
      font-size: 2.6rem;
      line-height: 1.2
    }
  }

  .not-found__description {
    max-width: 76.4rem;
    font-family: var(--inter-tight);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .not-found__description {
      font-size: 1.4rem
    }
  }

  .not-found__link {
    min-width: 44.6rem;
    border-color: #fff;
    transition: background-color .2s, border-color .2s, color .2s
  }

  @media(width<=576px) {
    .not-found__link {
      min-width: 0;
      width: 100%
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .not-found__link:hover {
      border-color: #fff;
      background-color: #fff;
      color: var(--primary-color)
    }
  }
}

@layer sections {
  .career-hero {
    padding-top: 16rem;
    background: #fff;
    color: var(--text-color);
    overflow: hidden;
    margin-bottom: 15rem
  }

  @media(width<=576px) {
    .career-hero {
      padding-top: 10rem;
      margin-bottom: 8rem
    }
  }

  .career-hero__title {
    margin-top: 3.7rem;
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .career-hero__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  .career-hero__caption {
    display: none
  }

  @media(width<=576px) {
    .career-hero__caption {
      display: block;
      margin-top: 2.5rem;
      font-family: var(--inter);
      font-size: 1.2rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1
    }
  }

  .career-hero__media {
    position: relative;
    width: 100vw;
    aspect-ratio: 1920/890;
    margin-top: 9.2rem;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    color: #fff
  }

  @media(width<=576px) {
    .career-hero__media {
      width: 100%;
      aspect-ratio: 375/250;
      margin-top: 1.6rem;
      margin-left: 0
    }
  }

  .career-hero__picture {
    position: absolute;
    inset: 0
  }

  .career-hero__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    object-fit: cover
  }

  @media(width<=576px) {
    .career-hero__image {
      object-position: center
    }
  }

  .career-hero__overlay {
    position: absolute;
    inset: 0;
    background: #22223380;
    pointer-events: none
  }

  .career-hero__media-container {
    position: absolute;
    inset: 0;
    z-index: 1
  }

  .career-hero__description {
    position: absolute;
    left: var(--container-padding);
    top: 4rem;
    width: 67.8rem;
    max-width: calc(100% - var(--container-padding) * 2);
    font-family: var(--inter-tight);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .career-hero__description {
      top: 1.8rem;
      left: 1.8rem;
      width: 26rem;
      max-width: calc(100% - 3.6rem);
      font-size: 1.4rem;
      letter-spacing: -.028rem
    }
  }

  .career-hero__video-link {
    position: absolute;
    right: var(--container-padding);
    top: 4rem;
    display: flex;
    align-items: flex-start;
    gap: 2.7rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2rem;
    color: #fff
  }

  @media(width<=576px) {
    .career-hero__video-link {
      right: 1.5rem;
      top: auto;
      bottom: 1.6rem;
      gap: 1rem;
      align-items: center;
      font-size: 1.2rem;
      line-height: 1.4;
      text-underline-offset: .2rem
    }
  }

  .career-hero__video-link svg {
    width: 5.9rem;
    height: 9.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1px
  }

  @media(width<=576px) {
    .career-hero__video-link svg {
      width: 1.6rem;
      height: 2.4rem;
      stroke: #ffffff80
    }
  }

  .career-hero__video-text-mobile {
    display: none
  }

  @media(width<=576px) {
    .career-hero__video-text-mobile {
      display: inline
    }
  }

  @media(width<=576px) {
    .career-hero__video-text-desktop {
      display: none
    }
  }
}

@layer sections {
  .training-center-hero {
    padding-top: 16rem;
    background: #fff;
    color: var(--text-color);
    overflow: hidden
  }

  @media(width<=576px) {
    .training-center-hero {
      padding-top: 14rem
    }
  }

  .training-center-hero__title {
    margin-top: 3.7rem;
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .training-center-hero__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .training-center-hero__title {
      margin-top: 2.4rem;
      max-width: 27rem;
      font-size: 3rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.06rem;
      text-transform: uppercase
    }
  }

  .training-center-hero__video {
    position: relative;
    display: block;
    width: 100vw;
    aspect-ratio: 1920/890;
    margin-top: 9.2rem;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    color: #fff
  }

  @media(width<=576px) {
    .training-center-hero__video {
      aspect-ratio: auto;
      height: 30rem;
      margin-top: 7rem
    }
  }

  .training-center-hero__poster,
  .training-center-hero__video-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
  }

  .training-center-hero__poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .training-center-hero__video-overlay {
    background: #22223380;
    pointer-events: none
  }

  .training-center-hero__play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    transform: translate(-50%, -50%);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2rem
  }

  .training-center-hero__play svg {
    width: 5.9rem;
    height: 9.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1px
  }

  @media(width<=576px) {
    .training-center-hero__play svg {
      width: 2.6rem;
      height: 4rem
    }
  }

  @media(width<=576px) {
    .training-center-hero__play {
      gap: 0;
      font-size: 0
    }
  }

  .training-center-gallery {
    --simple-slider-space-between: 2rem;
    padding-top: 4rem;
    background: #fff
  }

  @media(width<=576px) {
    .training-center-gallery {
      --simple-slider-space-between: 1rem;
      padding-top: 2rem
    }
  }

  .training-center-gallery__slider {
    width: 100%;
    min-width: 0;
    overflow: hidden
  }

  @media(width<=576px) {
    .training-center-gallery__slider {
      overflow: visible
    }
  }

  .training-center-gallery__list {
    display: flex;
    list-style: none
  }

  .training-center-gallery__slide {
    flex: 0 0 auto;
    width: calc((100% - var(--simple-slider-space-between) * 3) / 4);
    aspect-ratio: 1
  }

  @media(width<=576px) {
    .training-center-gallery__slide {
      width: 12rem
    }
  }

  .training-center-gallery__item {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    overflow: hidden
  }

  .training-center-gallery__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .training-center-gallery__navigation {
    margin-top: 12rem
  }

  @media(width<=576px) {
    .training-center-gallery__navigation {
      margin-top: 2rem
    }
  }

  .training-center-about {
    padding-top: 15rem;
    padding-bottom: 15rem;
    background: #fff
  }

  @media(width<=576px) {
    .training-center-about {
      padding-top: 8rem;
      padding-bottom: 8rem
    }
  }

  .training-center-about__content {
    max-width: 134.1rem;
    margin-inline: auto;
    text-align: center
  }

  .training-center-about__lead {
    font-family: var(--inter-tight);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    color: #223
  }

  @media(width<=576px) {
    .training-center-about__lead {
      font-size: 2rem;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  .training-center-about__text {
    max-width: 122.6rem;
    margin: 4rem auto 0;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    color: #223
  }

  @media(width<=576px) {
    .training-center-about__text {
      margin-top: 2rem
    }
  }

  .training-center-courses {
    padding-top: 4rem;
    padding-bottom: 16rem;
    background: #f2f2fa;
    color: #223
  }

  @media(width<=576px) {
    .training-center-courses {
      padding-top: 4rem;
      padding-bottom: 8rem
    }
  }

  .training-center-courses__title,
  .training-center-partners__title,
  .training-center-videos__title {
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {

    .training-center-courses__title,
    .training-center-partners__title,
    .training-center-videos__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {

    .training-center-courses__title,
    .training-center-partners__title,
    .training-center-videos__title {
      font-size: 3rem;
      font-weight: 500;
      line-height: 1.2
    }
  }

  .training-center-courses__list {
    margin-top: 12rem
  }

  @media(width<=576px) {
    .training-center-courses__list {
      margin-top: 4rem
    }
  }

  .training-center-courses__item+.training-center-courses__item {
    margin-top: 8rem;
    padding-top: 8rem;
    border-top: 1px solid rgba(34, 34, 51, .2)
  }

  @media(width<=576px) {
    .training-center-courses__item+.training-center-courses__item {
      margin-top: 4rem;
      padding-top: 0;
      border-top: 0
    }
  }

  .training-course-card {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem
  }

  @media(width<=576px) {
    .training-course-card {
      display: flex;
      flex-direction: column;
      gap: 2rem
    }
  }

  .training-course-card__media {
    grid-column: 1/4;
    align-self: start;
    aspect-ratio: 677.5/350;
    border-radius: .5rem;
    overflow: hidden;
    background: #d8d8e4
  }

  @media(width<=576px) {
    .training-course-card__media {
      width: 100%;
      aspect-ratio: 343/180
    }
  }

  .training-course-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .training-course-card__content {
    grid-column: 5/-1;
    display: flex;
    min-height: 35rem;
    flex-direction: column;
    align-items: flex-start
  }

  @media(width<=576px) {
    .training-course-card__content {
      min-height: auto
    }
  }

  .training-course-card__duration {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    border-radius: 5rem;
    padding: 1rem 1.5rem;
    background: #fff;
    color: #223;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  .training-course-card__duration svg {
    width: 2rem;
    height: 2rem;
    fill: var(--primary-color)
  }

  /* Заголовок курса — как h2 текстовых страниц (.article-content) */
  .training-course-card__title {
    margin-top: 4rem;
    font-family: var(--inter-tight);
    font-size: 4.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .training-course-card__title {
      margin-top: 2rem;
      font-size: 2.4rem;
      line-height: 1.04
    }
  }

  /* Глобальное h3–h6 { margin-bottom: 8rem } из style.css отрывало текст от заголовков */
  .training-course-card :is(.training-course-card__title, .training-course-card__detail-title) {
    margin-bottom: 0
  }

  /* Абзацы — шрифтом текстовых страниц */
  .training-course-card__description,
  .training-course-card__detail-text {
    max-width: 80rem;
    margin-top: 2.4rem;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {

    .training-course-card__description,
    .training-course-card__detail-text {
      max-width: none;
      margin-top: 1.6rem;
      font-size: 1.4rem;
      line-height: 1.2;
      letter-spacing: -.042rem
    }
  }

  .training-course-card__details {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 4rem
  }

  @media(width<=576px) {
    .training-course-card__details {
      gap: 2rem;
      margin-top: 2rem
    }
  }

  /* Плавное раскрытие: скрытые детали не убираются из потока, а сжимаются до нуля */
  .training-course-card__details {
    overflow: hidden;
    max-height: var(--details-h, 300rem);
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1), margin-top .45s cubic-bezier(.4, 0, .2, 1), opacity .3s .1s, visibility 0s
  }

  .training-course-card__details[hidden] {
    display: flex;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1), margin-top .4s cubic-bezier(.4, 0, .2, 1), opacity .2s, visibility 0s .4s
  }

  @media(prefers-reduced-motion:reduce) {
    .training-course-card__details,
    .training-course-card__details[hidden] {
      transition: none
    }
  }

  /* Заголовок дня — как подзаголовки h3–h6 текстовых страниц */
  .training-course-card__detail-title {
    font-family: var(--inter-tight);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.03rem
  }

  .training-course-card__detail-text {
    margin-top: 1.6rem
  }

  @media(width<=576px) {
    .training-course-card__detail-title {
      font-size: 2rem;
      letter-spacing: -.02rem
    }

    .training-course-card__detail-text {
      margin-top: 1.2rem
    }
  }

  .training-course-card__actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    margin-top: auto;
    padding-top: 4rem
  }

  @media(width<=576px) {
    .training-course-card__actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.6rem;
      align-items: stretch;
      margin-top: 0;
      padding-top: 2rem
    }
  }

  .training-course-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    border-radius: 4rem;
    padding: 1.7rem 3rem;
    border: 1px solid rgba(34, 34, 51, .2);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase;
    color: #223;
    background: transparent;
    transition: border-color .2s, background-color .2s, color .2s;
    cursor: pointer
  }

  @media(width<=576px) {
    .training-course-card__button {
      width: 100%;
      min-width: 0;
      padding-inline: 2rem;
      font-size: 1.2rem;
      min-height: auto;
      padding-block: 1.8rem
    }
  }

  .training-course-card__button--primary {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff
  }

  @media(hover:hover)and (pointer:fine) {
    .training-course-card__button--primary:hover {
      border-color: #005fc0;
      background: #005fc0
    }
  }

  .training-course-card__button--outline {
    gap: 1.5rem
  }

  @media(hover:hover)and (pointer:fine) {
    .training-course-card__button--outline:hover {
      border-color: var(--primary-color);
      background: var(--primary-color);
      color: #fff
    }

    .training-course-card__button--outline:hover .training-course-card__button-icon {
      color: #fff
    }
  }

  @media(width<=576px) {
    .training-course-card__button--outline {
      padding-inline: 1.2rem;
      gap: .8rem
    }
  }

  .training-course-card__button--download {
    gap: 1.5rem;
    margin-left: auto
  }

  @media(hover:hover)and (pointer:fine) {
    .training-course-card__button--download:hover {
      border-color: var(--primary-color);
      background: var(--primary-color);
      color: #fff
    }

    .training-course-card__button--download:hover .training-course-card__pdf {
      color: #fff
    }
  }

  @media(width<=576px) {
    .training-course-card__button--download {
      grid-column: 1/-1;
      margin-left: 0
    }
  }

  .training-course-card__pdf {
    color: var(--primary-color);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
    transition: color .2s
  }

  .training-course-card__button-icon {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--primary-color);
    fill: currentColor;
    transform: rotate(0);
    transition: color .2s, transform .2s
  }

  .training-course-card.is-open .training-course-card__button-icon,
  .training-center-courses__item.is-open .training-course-card__button-icon {
    transform: rotate(180deg)
  }

  .training-center-partners {
    --simple-slider-space-between: 6rem;
    padding-top: 4rem;
    padding-bottom: 8rem;
    background: #223;
    color: #fff;
    overflow: hidden
  }

  @media(width<=576px) {
    .training-center-partners {
      --simple-slider-space-between: 2rem;
      padding-top: 4rem;
      padding-bottom: 8rem
    }
  }

  .training-center-partners__slider {
    width: 100%;
    min-width: 0;
    margin-top: 12rem;
    overflow: hidden
  }

  @media(width<=576px) {
    .training-center-partners__slider {
      margin-top: 4rem;
      overflow: visible
    }
  }

  .training-center-partners__list,
  .training-center-videos__list {
    display: flex
  }

  .training-center-partners__list {
    list-style: none
  }

  .training-center-partners__item {
    position: relative;
    width: calc((100% - 18rem)/4);
    height: auto;
    flex: 0 0 auto
  }

  @media(width<=576px) {
    .training-center-partners__item {
      width: min(30rem, 100vw - 4rem)
    }
  }

  .training-center-partners__item:first-child:before {
    content: none
  }

  .training-center-partners__item:before {
    content: "";
    position: absolute;
    top: 0;
    left: -3rem;
    width: 1px;
    height: 100%;
    background-color: #cccccc1a
  }

  @media(width<=576px) {
    .training-center-partners__item:before {
      content: none
    }
  }

  .training-partner-card {
    display: flex;
    flex-direction: column;
    gap: 4rem
  }

  @media(width<=576px) {
    .training-partner-card {
      gap: 0
    }
  }

  .training-partner-card__media,
  .training-video-card__media {
    position: relative;
    display: block;
    border-radius: .5rem;
    overflow: hidden;
    color: #fff
  }

  .training-partner-card__media {
    aspect-ratio: 407/275
  }

  @media(width<=576px) {
    .training-partner-card__media {
      aspect-ratio: 300/210
    }
  }

  .training-partner-card__image,
  .training-video-card__image,
  .training-partner-card__overlay,
  .training-video-card__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
  }

  .training-partner-card__image,
  .training-video-card__image {
    object-fit: cover
  }

  .training-partner-card__overlay,
  .training-video-card__overlay {
    background: #22223380;
    pointer-events: none
  }

  .training-partner-card__play,
  .training-video-card__play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%)
  }

  .training-partner-card__play svg,
  .training-video-card__play svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1px
  }

  .training-partner-card__play {
    width: 4.2rem;
    height: 6.5rem
  }

  @media(width<=576px) {
    .training-partner-card__play {
      width: 2.6rem;
      height: 4rem
    }
  }

  .training-video-card__play {
    width: 5.9rem;
    height: 9.1rem
  }

  @media(width<=576px) {
    .training-video-card__play {
      width: 2.6rem;
      height: 4rem
    }
  }

  .training-partner-card__title {
    max-width: 31rem;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .training-partner-card__title {
      max-width: 30rem;
      padding-top: 2rem;
      font-size: 2rem
    }
  }

  .training-center-partners__navigation {
    margin-top: 12rem
  }

  @media(width<=576px) {
    .training-center-partners__navigation {
      margin-top: 2rem
    }
  }

  .training-center-videos {
    --simple-slider-space-between: 2rem;
    position: relative;
    padding-top: 4rem;
    padding-bottom: 8rem;
    background: #fff;
    color: #223;
    overflow: hidden
  }

  .training-center-videos:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 36rem;
    background: var(--primary-color);
    pointer-events: none
  }

  @media(width<=576px) {
    .training-center-videos:before {
      height: 30.2rem
    }
  }

  @media(width<=576px) {
    .training-center-videos {
      padding-top: 4rem;
      padding-bottom: 7rem
    }
  }

  .training-center-videos .container {
    position: relative;
    z-index: 1
  }

  .training-center-videos__title {
    color: #fff;
    white-space: nowrap
  }

  @media(width<=576px) {
    .training-center-videos__title {
      max-width: 30.1rem;
      white-space: normal
    }
  }

  .training-center-videos__slider {
    width: 100%;
    min-width: 0;
    margin-top: 12rem;
    overflow: visible
  }

  @media(width<=576px) {
    .training-center-videos__slider {
      margin-top: 4rem
    }
  }

  .training-center-videos__item {
    width: 90.9rem;
    flex: 0 0 auto
  }

  @media(width<=576px) {
    .training-center-videos__item {
      width: 31rem
    }
  }

  .training-video-card {
    display: flex;
    flex-direction: column;
    gap: 3.2rem
  }

  @media(width<=576px) {
    .training-video-card {
      gap: 2rem
    }
  }

  .training-video-card__media {
    aspect-ratio: 909/445
  }

  @media(width<=576px) {
    .training-video-card__media {
      width: 30rem;
      aspect-ratio: 300/200
    }
  }

  .training-video-card__content {
    display: flex;
    max-width: 31rem;
    flex-direction: column;
    gap: 1.2rem
  }

  @media(width<=576px) {
    .training-video-card__content {
      gap: 1rem
    }
  }

  .training-video-card__title {
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .training-video-card__title {
      font-size: 2rem;
      letter-spacing: -.04rem
    }
  }

  .training-video-card__text {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2
  }

  .training-center-videos__navigation {
    margin-top: 8rem
  }

  @media(width<=576px) {
    .training-center-videos__navigation {
      margin-top: 2rem
    }
  }
}

@layer sections {
  .university-cooperation-page {
    --university-media-slider-space-between: 0rem
  }

  @media(width<=576px) {
    .university-cooperation-page .training-center-hero__video {
      height: 28rem
    }
  }

  @media(width<=576px) {
    .university-cooperation-page .training-center-hero__title {
      max-width: none;
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  .university-cooperation-page .training-center-gallery__navigation {
    margin-top: 6rem
  }

  @media(width<=576px) {
    .university-cooperation-page .training-center-gallery__navigation {
      margin-top: 2rem
    }
  }

  .university-cooperation-about {
    padding-top: 12rem;
    padding-bottom: 12rem;
    background: #fff;
    color: #223
  }

  @media(width<=576px) {
    .university-cooperation-about {
      padding-top: 7rem;
      padding-bottom: 7rem
    }
  }

  .university-cooperation-about__text {
    max-width: 134rem;
    margin-inline: auto;
    text-align: center
  }

  @media(width<=576px) {
    .university-cooperation-about__text {
      max-width: none;
      text-align: left
    }
  }

  .university-cooperation-institutions {
    padding-top: 4rem;
    padding-bottom: 15rem;
    background: #f2f2fa;
    color: #223;
    overflow: hidden
  }

  @media(width<=576px) {
    .university-cooperation-institutions {
      padding-bottom: 8rem
    }
  }

  .university-cooperation-institutions__title {
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .university-cooperation-institutions__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  .university-cooperation-institutions__list {
    margin-top: 12rem;
    list-style: none
  }

  @media(width<=576px) {
    .university-cooperation-institutions__list {
      margin-top: 4rem
    }
  }

  .university-cooperation-institutions__item+.university-cooperation-institutions__item {
    margin-top: 8rem;
    padding-top: 8rem;
    border-top: 1px solid rgba(34, 34, 51, .12)
  }

  @media(width<=576px) {
    .university-cooperation-institutions__item+.university-cooperation-institutions__item {
      margin-top: 5rem;
      padding-top: 5rem
    }
  }

  .university-cooperation-page .training-center-partners {
    padding-bottom: 19rem
  }

  @media(width<=576px) {
    .university-cooperation-page .training-center-partners {
      padding-bottom: 12.8rem
    }
  }

  .university-institution-card {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem
  }

  @media(width<=576px) {
    .university-institution-card {
      display: flex;
      flex-direction: column;
      gap: 3rem
    }
  }

  .university-institution-card__media-block {
    grid-column: 1/4;
    min-width: 0
  }

  @media(width<=576px) {
    .university-institution-card__media-block {
      order: 2
    }
  }

  .university-institution-card__slider {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: .5rem
  }

  .university-institution-card__slides {
    display: flex;
    list-style: none
  }

  .university-institution-card__slide {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 677/350
  }

  @media(width<=576px) {
    .university-institution-card__slide {
      width: 100%;
      aspect-ratio: 343/220
    }
  }

  .university-media-card {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    color: #fff
  }

  .university-media-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .university-media-card__image--logo {
    width: 72%;
    height: 58%;
    object-fit: contain
  }

  .university-media-card__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #22223380;
    pointer-events: none
  }

  .university-media-card__play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 5.9rem;
    height: 9.1rem;
    transform: translate(-50%, -50%)
  }

  .university-media-card__play svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1px
  }

  @media(width<=576px) {
    .university-media-card__play {
      width: 3rem;
      height: 4.6rem
    }
  }

  .university-institution-card__navigation {
    margin-top: 4rem
  }

  @media(width<=576px) {
    .university-institution-card__navigation {
      margin-top: 2rem
    }
  }

  .university-institution-card__content {
    grid-column: 5/-1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: .1rem
  }

  @media(width<=576px) {
    .university-institution-card__content {
      order: 1
    }
  }

  .university-institution-card__location {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    border-radius: 5rem;
    padding: 1rem 1.5rem;
    background: #fff;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1
  }

  .university-institution-card__location svg {
    width: 1.8rem;
    height: 1.8rem;
    color: var(--primary-color);
    fill: currentColor
  }

  .university-institution-card__title {
    margin-top: 4rem;
    font-family: var(--inter);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .university-institution-card__title {
      margin-top: 2rem;
      font-size: 2.2rem
    }
  }

  .university-institution-card__text {
    max-width: 80rem;
    margin-top: 4rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4
  }

  @media(width<=576px) {
    .university-institution-card__text {
      max-width: none;
      margin-top: 2rem
    }
  }
}

@layer sections {
  .career-students {
    --career-students-overlap: 24rem;
    position: relative;
    z-index: 1;
    margin-top: calc(var(--career-students-overlap) * -1);
    padding-top: 43rem;
    padding-bottom: 11rem;
    background: var(--primary-color);
    color: #fff;
    margin-bottom: 15rem
  }

  .career-students+.career-success-stories {
    padding-top: 0
  }

  @media(width<=576px) {
    .career-students {
      --career-students-overlap: 20rem;
      margin-top: calc((var(--career-students-overlap, 0) + 8rem) * -1);
      padding-top: 25rem;
      padding-bottom: 4rem;
      overflow: hidden;
      margin-bottom: 6rem
    }
  }

  .career-students__title {
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .career-students__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .career-students__title {
      margin-bottom: 3.2rem
    }
  }

  @media(width<=576px) {
    .career-students__slider {
      min-width: 0;
      width: 100%;
      overflow: visible
    }
  }

  .career-students__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8rem 2rem;
    margin-top: 5.6rem
  }

  @media(width<=576px) {
    .career-students__list {
      display: flex;
      gap: 0;
      margin-top: 0
    }
  }

  @media(width<=576px) {
    .career-students__item {
      width: 22.5rem;
      flex: 0 0 auto;
      box-sizing: border-box;
      height: auto;
      display: flex;
      flex-direction: column;
      margin-right: 2rem
    }

    .career-students__item:last-child {
      margin-right: 0
    }
  }

  .career-students-card {
    position: relative;
    min-height: 53.2rem;
    padding: 4rem;
    border-radius: .5rem;
    overflow: hidden;
    box-sizing: border-box
  }

  @media(width<=576px) {
    .career-students-card {
      display: flex;
      flex-direction: column;
      width: 22.5rem;
      flex-grow: 1;
      min-height: 30rem;
      padding: 2rem
    }
  }

  .career-students-card__title {
    position: relative;
    z-index: 2;
    max-width: 76.7rem;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.09rem;
    text-wrap: balance
  }

  @media(width<=576px) {
    .career-students-card__title {
      max-width: none;
      font-size: 2rem;
      letter-spacing: -.04rem;
      text-wrap: revert
    }
  }

  .career-students-card__media {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff14
  }

  .career-students-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .career-students-card__overlay {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(167.87deg, #222233d9 23.22%, #2230 105.18%);
    pointer-events: none
  }

  .career-students__btn.btn {
    width: 44.6rem;
    max-width: 100%;
    margin: 8rem auto 0;
    border-color: #fff;
    color: #fff
  }

  @media(width<=576px) {
    .career-students__btn.btn {
      width: auto;
      margin-top: 4rem;
      padding: 1.6rem 1rem;
      text-wrap: balance
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .career-students__btn.btn:hover {
      background-color: #fff;
      color: var(--primary-color)
    }
  }
}

@layer sections {
  .career-gallery {
    position: relative;
    z-index: 2;
    margin-bottom: 0
  }

  @media(width<=576px) {
    .career-gallery {
      margin-bottom: 8rem
    }
  }

  .career-gallery__inner {
    position: relative
  }

  .career-gallery__slider {
    width: 100%;
    min-width: 0;
    border-radius: .5rem;
    overflow: hidden
  }

  .career-gallery__list {
    display: flex
  }

  .career-gallery__item {
    width: 100%;
    flex: 0 0 auto
  }

  .career-gallery__media {
    position: relative;
    aspect-ratio: 184/93;
    overflow: hidden
  }

  @media(width<=576px) {
    .career-gallery__media {
      aspect-ratio: 343/300
    }

    .career-gallery__media:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, #6690 31%, #22223380 96.55%);
      pointer-events: none
    }
  }

  .career-gallery__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .career-gallery__navigation {
    position: absolute;
    left: 50%;
    bottom: 8.5rem;
    transform: translate(-50%);
    z-index: 1
  }

  @media(width<=576px) {
    .career-gallery__navigation {
      bottom: 2.3rem;
      gap: .5rem
    }
  }
}

@layer sections {
  .career-vacancies {
    padding-top: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #223;
    color: #fff;
    margin-bottom: 15rem
  }

  @media(width<=576px) {
    .career-vacancies {
      margin-bottom: 8rem
    }
  }

  .career-vacancies__title {
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .career-vacancies__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  .career-vacancies__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto;
    margin-top: 12rem
  }

  @media(width<=576px) {
    .career-vacancies__list {
      display: flex;
      flex-direction: column;
      margin-top: 5rem
    }
  }

  .career-vacancies__item {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    padding-right: 5.8rem
  }

  @media(width<=576px) {
    .career-vacancies__item {
      display: block;
      grid-row: auto;
      grid-template-rows: none;
      width: 100%;
      padding-right: 0
    }
  }

  .career-vacancies__item:not(:first-child) {
    padding-left: 3rem;
    border-left: 1px solid rgba(255, 255, 255, .08)
  }

  @media(width<=576px) {
    .career-vacancies__item:not(:first-child) {
      padding-top: 2rem;
      padding-left: 0;
      border-left: none
    }
  }

  @media(width<=576px) {
    .career-vacancies__item:not(:last-child) {
      padding-bottom: 2rem;
      border-bottom: 1px solid rgba(255, 255, 255, .1)
    }
  }

  .career-vacancies__footer {
    display: flex;
    align-items: end;
    justify-content: center;
    margin-top: 12rem
  }

  @media(width<=576px) {
    .career-vacancies__footer {
      margin-top: 4rem
    }
  }

  .career-vacancies__button.btn {
    width: 30rem
  }

  @media(width<=576px) {
    .career-vacancies__button.btn {
      width: 100%
    }
  }
}

@layer sections {
  .career-faq {
    margin-bottom: 15rem;
    color: #223
  }

  @media(width<=576px) {
    .career-faq {
      margin-bottom: 5rem
    }
  }

  .career-faq__title {
    max-width: 85.7rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .career-faq__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .career-faq__title {
      max-width: 21.3rem
    }
  }

  .career-faq__content {
    margin-top: 6rem
  }

  @media(width<=576px) {
    .career-faq__content {
      margin-top: 0
    }
  }

  .career-faq__counter {
    margin-bottom: 4rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
    color: #22223380
  }

  @media(width<=576px) {
    .career-faq__counter {
      margin-bottom: 0
    }
  }

  .career-faq__list {
    width: 100%
  }

  .career-faq__item {
    border-top: 1px solid #ccc
  }

  .career-faq__item:first-child {
    border-top: 0
  }

  .career-faq__item:last-child {
    border-bottom: 1px solid #ccc
  }

  .career-faq__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    padding-block: 2rem
  }

  @media(width<=576px) {
    .career-faq__button {
      gap: 0;
      padding-block: 2rem
    }
  }

  .career-faq__question {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .career-faq__question {
      font-size: 2rem;
      letter-spacing: -.04rem
    }
  }

  .career-faq__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--primary-color);
    transition: transform .2s ease
  }

  .career-faq__icon svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor
  }

  .career-faq__item.active .career-faq__icon {
    transform: rotate(-90deg);
    color: #223
  }

  .career-faq__dropdown {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .2s ease
  }

  .career-faq__item.active .career-faq__dropdown {
    grid-template-rows: 1fr;
    opacity: 1
  }

  .career-faq__dropdown-inner {
    min-height: 0;
    overflow: hidden
  }

  .career-faq__answer {
    max-width: 184rem;
    padding-bottom: 3rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4
  }

  @media(width<=576px) {
    .career-faq__answer {
      padding-bottom: 2.4rem
    }
  }
}

@layer sections {
  .harsh-conditions {
    position: relative;
    overflow: clip;
    padding-top: 4rem;
    margin-bottom: 15rem;
    background: linear-gradient(180deg, #0074e8 0 110rem, #fff 110rem 100%)
  }

  @media(width<=576px) {
    .harsh-conditions {
      background: linear-gradient(180deg, #006fdd 0 39rem, #fff 39rem 100%);
      margin-bottom: 8rem
    }
  }

  .harsh-conditions__pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 80.1rem;
    z-index: 0;
    pointer-events: none
  }

  .harsh-conditions__pattern img {
    display: block;
    width: 100%;
    height: auto
  }

  @media(width<=576px) {
    .harsh-conditions__pattern {
      display: none
    }
  }

  .harsh-conditions__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem
  }

  @media(width<=576px) {
    .harsh-conditions__grid {
      display: flex;
      flex-direction: column;
      gap: 0
    }
  }

  .harsh-conditions__title {
    grid-column: 1/7;
    max-width: 137.5rem;
    margin-bottom: 5rem;
    color: #fff;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .harsh-conditions__title {
      grid-column: auto;
      max-width: 34.4rem;
      margin-bottom: 4rem;
      font-size: 2rem;
      font-weight: 500;
      letter-spacing: 0
    }
  }

  .harsh-conditions__slider {
    grid-column: 1/-1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 12rem;
    overflow: visible
  }

  @media(width<=576px) {
    .harsh-conditions__slider {
      grid-column: auto;
      margin-bottom: 0
    }
  }

  .harsh-conditions__list {
    display: flex
  }

  .harsh-conditions__item {
    width: 137.5rem;
    flex: 0 0 auto
  }

  @media(width<=576px) {
    .harsh-conditions__item {
      width: 30rem
    }
  }

  .harsh-conditions__navigation {
    grid-column: 1/-1
  }

  @media(width<=576px) {
    .harsh-conditions__navigation {
      grid-column: auto;
      margin-top: 2rem
    }
  }
}

@layer sections {
  .company-hero {
    padding-top: 16rem;
    margin-bottom: 15rem;
    background: #fff;
    color: var(--text-color);
    overflow: clip
  }

  @media(width<=576px) {
    .company-hero {
      padding-top: 14rem;
      margin-bottom: 8rem
    }
  }

  @media(width<=576px) {
    .company-hero .breadcrumbs {
      display: none
    }
  }

  .company-hero__intro {
    margin-top: 3rem
  }

  @media(width<=576px) {
    .company-hero__intro {
      margin: 0
    }
  }

  .company-hero__title {
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .company-hero__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  .company-hero__caption {
    max-width: 44.5rem;
    margin-top: 11.1rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1
  }

  @media(width<=576px) {
    .company-hero__caption {
      max-width: none;
      margin-top: 6.1rem;
      font-size: 1.2rem
    }
  }

  .company-hero__media {
    position: relative;
    width: 100vw;
    margin-top: 2rem;
    margin-left: calc(50% - 50vw);
    aspect-ratio: 1920/1200;
    background: #000;
    color: #fff;
    overflow: hidden
  }

  @media(width<=576px) {
    .company-hero__media {
      margin-top: 2rem;
      min-height: 35rem;
      aspect-ratio: revert;
      display: flex;
      flex-direction: column
    }
  }

  .company-hero__picture {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
  }

  .company-hero__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  @media(width<=576px) {
    .company-hero__image {
      object-position: center
    }
  }

  .company-hero__media-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    align-content: start;
    padding-top: 4rem
  }

  @media(width<=576px) {
    .company-hero__media-content {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      flex-grow: 1;
      padding-top: 1.6rem;
      padding-bottom: 13rem
    }
  }

  .company-hero__description {
    grid-column: 1/4;
    font-family: var(--inter-tight);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .company-hero__description {
      width: 23.5rem;
      max-width: 100%;
      font-size: 1.4rem;
      letter-spacing: -.028rem
    }
  }

  .company-hero__video-link {
    grid-column: 7/-1;
    justify-self: end;
    display: flex;
    align-items: flex-start;
    gap: 2.7rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2rem
  }

  @media(width<=576px) {
    .company-hero__video-link {
      gap: 1rem;
      font-size: 1.2rem;
      line-height: 1.4;
      text-align: right;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
      white-space: nowrap;
      align-items: center;
      margin-left: auto;
      margin-top: auto
    }
  }

  .company-hero__video-link svg {
    width: 5.9rem;
    height: 9.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1px;
    flex-shrink: 0
  }

  @media(width<=576px) {
    .company-hero__video-link svg {
      width: 1.6rem;
      height: 2.4rem;
      stroke: #ffffff80
    }
  }

  .company-hero__video-text-mobile {
    display: none
  }

  @media(width<=576px) {
    .company-hero__video-text-mobile {
      display: inline
    }
  }

  @media(width<=576px) {
    .company-hero__video-text-desktop {
      display: none
    }
  }

  .company-hero__stats-block {
    position: relative;
    z-index: 1;
    margin-top: -26.9rem
  }

  .company-hero__stats-block:before {
    content: "";
    position: absolute;
    left: 0;
    top: -4rem;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .2);
    pointer-events: none
  }

  @media(width<=576px) {
    .company-hero__stats-block {
      margin-top: -11rem;
      padding-top: 2rem
    }

    .company-hero__stats-block:before {
      top: 0
    }
  }

  .company-hero__stats-caption {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: #fff
  }

  @media(width<=576px) {
    .company-hero__stats-caption {
      font-size: 1.2rem
    }
  }

  .company-hero__stats-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;
    margin-top: 4rem
  }

  @media(width<=576px) {
    .company-hero__stats-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 2rem
    }
  }

  .company-hero__stats-item {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 4rem;
    border-radius: 2rem;
    background: #223;
    color: #fff;
    min-height: 43rem
  }

  .company-hero__stats-item:first-child {
    grid-column: 1/5
  }

  @media(width<=576px) {
    .company-hero__stats-item {
      grid-column: span 1;
      gap: 3rem;
      padding: 2rem;
      min-height: auto
    }

    .company-hero__stats-item:first-child {
      grid-column: 1/-1
    }
  }

  .company-hero__stats-item--accent {
    background: var(--primary-color)
  }

  .company-hero__stats-value {
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 300;
    line-height: .8;
    letter-spacing: -.24rem
  }

  @media(width<=576px) {
    .company-hero__stats-value {
      font-size: 6rem;
      line-height: .8;
      letter-spacing: -.12rem
    }
  }

  .company-hero__stats-suffix {
    font-size: 7.74rem
  }

  @media(width<=576px) {
    .company-hero__stats-suffix {
      font-size: 3.87rem
    }
  }

  .company-hero__stats-text {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: auto
  }

  @media(width<=576px) {
    .company-hero__stats-text {
      gap: .8rem
    }
  }

  .company-hero__stats-title {
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.09rem
  }

  @media(width<=576px) {
    .company-hero__stats-title {
      font-size: 1.4rem;
      letter-spacing: -.042rem
    }
  }

  .company-hero__stats-description {
    max-width: 34.3rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
    opacity: .5
  }

  @media(width<=576px) {
    .company-hero__stats-description {
      max-width: 22.5rem;
      font-size: 1.2rem;
      line-height: 1.4
    }
  }
}

@layer sections {
  .company-features {
    background-color: #fff;
    color: #223;
    margin-bottom: 15rem;
    overflow: clip
  }

  @media(width<=576px) {
    .company-features {
      margin-bottom: 8rem
    }
  }

  .company-features__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    row-gap: 0
  }

  @media(width<=576px) {
    .company-features__grid {
      display: flex;
      flex-direction: column;
      gap: 0
    }
  }

  .company-features__intro {
    grid-column: 1/7;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-bottom: 8rem
  }

  @media(width<=576px) {
    .company-features__intro {
      grid-column: auto;
      gap: 1rem;
      margin-bottom: 2rem
    }
  }

  .company-features__caption {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1
  }

  @media(width<=576px) {
    .company-features__caption {
      font-size: 1.2rem
    }
  }

  .company-features__title {
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    max-width: 137.5rem
  }

  @media(width<=576px) {
    .company-features__title {
      max-width: none;
      font-size: 2.6rem;
      font-style: normal;
      font-weight: 500;
      line-height: 120%;
      letter-spacing: 0;
      text-wrap: balance
    }
  }

  .company-features__slider {
    grid-column: 1/-1;
    min-width: 0
  }

  @media(width<=576px) {
    .company-features__slider {
      grid-column: auto;
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      padding-inline: var(--container-padding);
      box-sizing: border-box;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      touch-action: pan-x;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--container-padding);
      -webkit-overflow-scrolling: touch
    }

    .company-features__slider::-webkit-scrollbar {
      display: none
    }
  }

  .company-features__list {
    counter-reset: company-features;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3rem 2rem
  }

  @media(width<=576px) {
    .company-features__list {
      width: max-content;
      display: flex;
      gap: 2rem
    }
  }

  .company-features__item {
    --company-feature-card-bg: #fff;
    --company-feature-card-color: #222233;
    --company-feature-card-number-color: var(--primary-color);
    counter-increment: company-features;
    display: flex;
    flex-direction: column;
    height: auto
  }

  @media(width<=576px) {
    .company-features__item {
      padding: 2rem;
      width: auto;
      gap: 4rem;
      width: 30rem;
      border-radius: .5rem;
      background-color: var(--company-feature-card-bg);
      color: var(--company-feature-card-color);
      box-sizing: border-box;
      scroll-snap-align: start;
      scroll-snap-stop: always
    }
  }

  .company-features__item:nth-child(8n+2),
  .company-features__item:nth-child(8n+7) {
    --company-feature-card-bg: #222233;
    --company-feature-card-color: #fff
  }

  .company-features__item:nth-child(8n+4),
  .company-features__item:nth-child(8n+5) {
    --company-feature-card-bg: #f2f2fa
  }

  .company-features__item:nth-child(8n+7) {
    --company-feature-card-number-color: #fff
  }

  .company-features__item--theme-dark {
    --company-feature-card-bg: #222233;
    --company-feature-card-color: #fff
  }

  .company-features__item--theme-soft {
    --company-feature-card-bg: #f2f2fa
  }

  .company-features__item--number-white {
    --company-feature-card-number-color: #fff
  }

  .company-features__item--number-blue {
    --company-feature-card-number-color: var(--primary-color)
  }

  .company-features--about-company .company-features__intro {
    margin-bottom: 9rem
  }

  @media(width<=576px) {
    .company-features--about-company .company-features__intro {
      margin-bottom: 4rem
    }
  }

  @media(width<=576px) {
    .company-features--about-company .company-features__title {
      font-size: 2rem;
      max-width: none;
      text-wrap: pretty
    }
  }

  .company-features--about-company .company-feature-card__main:before {
    content: none
  }

  .company-features--about-company .company-feature-card__title {
    max-width: 34.5rem
  }

  @media(width<=576px) {
    .company-features--about-company .company-feature-card__title {
      max-width: 20.8rem
    }
  }

  @media(width<=576px) {
    .company-features--about-company .company-feature-card__description {
      margin-top: 0;
      align-self: flex-start;
      max-width: 23.8rem
    }
  }

  .company-features--career .company-feature-card__main:before {
    content: none
  }

  .company-features--career .company-feature-card__title {
    max-width: 34.5rem
  }

  @media(width<=576px) {
    .company-features--career .company-feature-card__title {
      max-width: 20.8rem
    }
  }

  .company-feature-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem;
    border-radius: .5rem;
    background-color: var(--company-feature-card-bg);
    color: var(--company-feature-card-color);
    flex-grow: 1;
    min-height: 40rem;
    box-sizing: border-box
  }

  @media(width<=576px) {
    .company-feature-card {
      display: contents
    }
  }

  .company-feature-card__main {
    display: flex;
    flex-direction: column;
    gap: 2rem
  }

  @media(width<=576px) {
    .company-feature-card__main {
      gap: 1rem
    }
  }

  .company-feature-card__main:before {
    content: counter(company-features, decimal-leading-zero);
    font-family: var(--ibm-plex-mono);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.028rem;
    color: var(--company-feature-card-number-color)
  }

  .company-feature-card__title {
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem;
    text-wrap: balance
  }

  @media(width<=576px) {
    .company-feature-card__title {
      max-width: 20.8rem;
      font-size: 2rem;
      letter-spacing: -.04rem;
      text-wrap: initial
    }
  }

  @media(width<=576px) {
    .company-feature-card__desktop-break {
      display: none
    }
  }

  .company-feature-card__description {
    max-width: 32.5rem;
    margin-top: auto;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4
  }

  @media(width<=576px) {
    .company-feature-card__description {
      margin-top: auto;
      align-self: flex-end;
      max-width: none
    }
  }

  .company-features__emblem {
    grid-column: 1/-1;
    justify-self: center;
    display: grid;
    place-items: center;
    width: 15rem;
    aspect-ratio: 1;
    margin-top: 15rem;
    border: 1px solid rgba(34, 34, 51, .14);
    border-radius: 50%
  }

  @media(width<=576px) {
    .company-features__emblem {
      grid-column: auto;
      margin-top: 4rem;
      width: 10rem;
      align-self: center
    }
  }

  .company-features__emblem img {
    width: 8rem;
    height: 8rem;
    object-fit: contain
  }

  @media(width<=576px) {
    .company-features__emblem img {
      width: 5rem;
      height: 5rem
    }
  }
}

@layer sections {
  .company-history {
    padding-block: 4rem;
    background-color: #fff;
    color: #223;
    overflow: clip;
    margin-bottom: 15rem
  }

  @media(width<=576px) {
    .company-history {
      margin-bottom: 8rem;
      padding: 0
    }
  }

  .company-history__grid {
    display: flex;
    flex-direction: column;
    gap: 12rem
  }

  @media(width<=576px) {
    .company-history__grid {
      gap: 2.4rem
    }
  }

  .company-history__title {
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .company-history__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  .company-history__slider {
    width: 100%;
    min-width: 0;
    padding-top: 4rem;
    border-top: 1px solid #ccc;
    overflow: visible
  }

  @media(width<=576px) {
    .company-history__navigation {
      gap: .5rem;
      justify-content: center
    }
  }

  .company-history__list {
    display: flex
  }

  .company-history__item {
    width: 40rem;
    flex: 0 0 auto
  }

  @media(width<=576px) {
    .company-history__item {
      width: auto
    }
  }

  .company-history-card {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding: 0 3rem 3rem;
    border-left: 1px solid #ccc;
    box-sizing: border-box
  }

  @media(width<=576px) {
    .company-history-card {
      min-width: 19rem;
      gap: 4rem;
      padding: 0 2rem 2rem
    }
  }

  .company-history__item:first-child .company-history-card {
    padding-left: 0;
    border-left: none
  }

  .company-history-card__year {
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 300;
    line-height: 75%;
    letter-spacing: -.24rem;
    color: #006fdd
  }

  @media(width<=576px) {
    .company-history-card__year {
      width: 15rem;
      font-size: 6rem;
      line-height: 75%;
      letter-spacing: -.12rem
    }
  }

  .company-history-card__description {
    max-width: 100%;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem;
    overflow-wrap: anywhere
  }

  @media(width<=576px) {
    .company-history-card__description {
      width: 15rem;
      font-size: 1.4rem;
      letter-spacing: -.042rem
    }
  }
}

@layer sections {
  .awards {
    --awards-gap: 4.6667rem;
    padding-top: 4rem;
    padding-bottom: 8rem;
    background-color: #f2f2fa;
    color: #223;
    overflow: clip
  }

  @media(width<=576px) {
    .awards {
      --awards-gap: 2rem;
      padding-bottom: 4rem
    }
  }

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

  .awards__title {
    margin-bottom: 10.2rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .awards__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .awards__title {
      margin-bottom: 4rem
    }
  }

  .awards__slider {
    width: 100%;
    min-width: 0;
    margin-bottom: 21.8rem;
    overflow: hidden
  }

  @media(width<=576px) {
    .awards__slider {
      margin-bottom: 4rem;
      overflow: visible
    }
  }

  .awards__list {
    display: flex
  }

  .awards__item {
    position: relative;
    flex: 0 0 auto;
    margin-right: var(--awards-gap);
    width: calc(25% - 3.5rem)
  }

  .awards__item:last-child {
    margin-right: 0
  }

  .awards__item:not(:last-child):after {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--awards-gap) / -2 - .5px);
    width: 1px;
    bottom: 0;
    background-color: #2233
  }

  @media(width<=576px) {
    .awards__item {
      width: 30rem
    }

    .awards__item:after {
      display: none
    }
  }

  .awards__navigation {
    justify-content: center
  }

  @media(width<=576px) {
    .awards__navigation {
      gap: .5rem
    }
  }
}

@layer sections {
  .company-reviews {
    padding-block: 4rem;
    background-color: #223;
    color: #fff;
    overflow: clip
  }

  .company-reviews__grid {
    display: flex;
    flex-direction: column
  }

  .company-reviews__title {
    margin-bottom: 12rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .company-reviews__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .company-reviews__title {
      margin-bottom: 4rem
    }
  }

  .company-reviews__slider {
    width: 100%;
    min-width: 0;
    padding-top: 4rem;
    margin-bottom: 12rem;
    overflow: visible
  }

  @media(width<=576px) {
    .company-reviews__slider {
      padding-block: 1rem;
      margin-bottom: 2rem
    }
  }

  .company-reviews__list {
    display: flex
  }

  .company-reviews__item {
    width: 44.5rem;
    flex: 0 0 auto;
    margin-right: 2rem
  }

  @media(width<=576px) {
    .company-reviews__item {
      width: 27.5rem
    }
  }

  .company-reviews__item:last-child {
    margin-right: 0
  }

  .company-review-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    min-height: 54.5rem;
    padding-inline: 7rem;
    border-left: 1px solid rgba(255, 255, 255, .3);
    box-sizing: border-box;
    color: inherit;
    text-decoration: none
  }

  @media(width<=576px) {
    .company-review-card {
      gap: 2rem;
      min-height: 0;
      padding-inline: 1.25rem
    }
  }

  .company-review-card__company {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: 30.5rem
  }

  @media(width<=576px) {
    .company-review-card__company {
      justify-content: space-between;
      gap: 2rem;
      width: 25rem
    }
  }

  .company-review-card__company-name {
    width: 19rem;
    font-family: var(--inter);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.048rem;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .company-review-card__company-name {
      font-size: 1.4rem;
      letter-spacing: -.042rem
    }
  }

  .company-review-card__logo {
    display: grid;
    place-items: center;
    width: 7.5rem;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    flex-shrink: 0
  }

  @media(width<=576px) {
    .company-review-card__logo {
      width: 5rem;
      height: 5rem
    }
  }

  .company-review-card__logo-image {
    display: block;
    width: 7.5rem;
    height: 7.5rem;
    object-fit: contain
  }

  @media(width<=576px) {
    .company-review-card__logo-image {
      width: 100%;
      height: 100%
    }
  }

  .company-review-card__media {
    width: 30.5rem;
    height: 43rem;
    box-shadow: 0 0 5.4rem #00000026
  }

  @media(width<=576px) {
    .company-review-card__media {
      width: 25rem;
      height: auto;
      aspect-ratio: 250/353
    }
  }

  .company-review-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
  }

  .company-reviews__footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    column-gap: 2rem
  }

  @media(width<=576px) {
    .company-reviews__footer {
      display: flex;
      justify-content: center
    }
  }

  .company-reviews__navigation {
    grid-column: 2;
    justify-self: center
  }

  .company-reviews__navigation .slider-navigation__button {
    background: #ffffff1a;
    color: #fff
  }

  @media(hover:hover)and (pointer:fine) {
    .company-reviews__navigation .slider-navigation__button:hover {
      background: #ffffff29
    }
  }

  @media(width<=576px) {
    .company-reviews__navigation {
      gap: .5rem
    }
  }

  .company-reviews__footer-spacer {
    grid-column: 3;
    min-height: 1.4rem
  }

  @media(width<=576px) {
    .company-reviews__footer-spacer {
      display: none
    }
  }
}

@layer sections {
  .company-leadership {
    padding-top: 4rem;
    margin-bottom: 15rem;
    background: linear-gradient(180deg, #006fdd 0 36rem, #fff 36rem 100%);
    color: #223;
    overflow: clip
  }

  @media(width<=576px) {
    .company-leadership {
      margin-bottom: 8rem;
      background: linear-gradient(180deg, #006fdd 0 19.4rem, #fff 19.4rem 100%)
    }
  }

  .company-leadership__grid {
    display: flex;
    flex-direction: column
  }

  .company-leadership__title {
    margin-bottom: 10.2rem;
    color: #fff;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .company-leadership__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .company-leadership__title {
      margin-bottom: 2.5rem
    }
  }

  .company-leadership__slider {
    width: 100%;
    min-width: 0;
    overflow: visible
  }

  .company-leadership__list {
    display: flex
  }

  .company-leadership__item {
    width: 44.5rem;
    flex: 0 0 auto;
    margin-right: 2rem
  }

  @media(width<=576px) {
    .company-leadership__item {
      width: 30rem
    }
  }

  .company-leadership__item:last-child {
    margin-right: 0
  }

  .company-leadership__navigation {
    justify-content: center;
    margin-top: 12rem
  }

  @media(width<=576px) {
    .company-leadership__navigation {
      gap: .5rem;
      margin-top: 3rem
    }
  }

  .company-leadership__participation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    max-width: 92rem;
    margin: 15rem auto 0
  }

  @media(width<=576px) {
    .company-leadership__participation {
      max-width: 34.3rem;
      margin-top: 8rem
    }
  }

  .company-leadership__participation-icon {
    width: 7.3rem
  }

  .company-leadership__participation-icon img {
    display: block;
    width: 100%;
    height: auto
  }

  .company-leadership__participation-text {
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    text-align: center
  }

  @media(width<=576px) {
    .company-leadership__participation-text {
      font-size: 1.4rem
    }
  }
}

@layer sections {
  .company-departments {
    background-color: #fff;
    color: #fff;
    margin-bottom: 15rem
  }

  @media(width<=576px) {
    .company-departments {
      margin-bottom: 8rem
    }
  }

  .company-departments__stack {
    display: grid;
    width: 100%;
    aspect-ratio: 192/93;
    overflow: clip;
    background-color: #fff
  }

  @media(width<=576px) {
    .company-departments__stack {
      aspect-ratio: 375/600
    }
  }

  .company-departments__stack>* {
    grid-area: 1/1;
    min-width: 0
  }

  .company-departments__header {
    align-self: start;
    justify-self: start;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem
  }

  @media(width<=576px) {
    .company-departments__header {
      gap: 2rem;
      width: 100%;
      margin-top: 4rem
    }
  }

  .company-departments__tabs {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 37rem;
    max-width: calc(100% - 8rem);
    margin: 4rem
  }

  @media(width<=576px) {
    .company-departments__tabs {
      flex-direction: row;
      gap: 1rem;
      width: 100vw;
      max-width: none;
      position: relative;
      left: 50%;
      margin: 0 0 0 -50vw;
      padding-inline: var(--container-padding);
      box-sizing: border-box;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      touch-action: pan-x;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--container-padding);
      -webkit-overflow-scrolling: touch
    }

    .company-departments__tabs::-webkit-scrollbar {
      display: none
    }
  }

  .company-departments__tab {
    display: flex;
    align-items: center;
    min-height: 7rem;
    border: 0;
    border-radius: .5rem;
    padding: 2rem 3rem;
    background-color: #fff;
    color: #223;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.028rem;
    text-align: left;
    cursor: pointer;
    transition: background-color .2s, color .2s
  }

  .company-departments__tab span {
    display: block
  }

  @media(width<=576px) {
    .company-departments__tab {
      flex: none;
      width: fit-content;
      max-width: 30rem;
      min-height: auto;
      padding: 1rem 1.6rem;
      scroll-snap-align: start;
      scroll-snap-stop: always
    }
  }

  .company-departments__tab.active {
    background-color: #006fdd;
    color: #fff
  }

  @media(hover:hover)and (pointer:fine) {
    .company-departments__tab:hover {
      background-color: #f2f4f8
    }

    .company-departments__tab.active:hover {
      background-color: #07e
    }
  }

  .company-departments__panel {
    display: grid;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s
  }

  .company-departments__panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .35s ease, visibility 0s linear 0s
  }

  @media(width<=576px) {
    .company-departments__panel {
      height: 100%
    }
  }

  .company-departments__media {
    display: grid;
    min-width: 0;
    min-height: 0
  }

  @media(width<=576px) {
    .company-departments__media {
      height: 100%
    }
  }

  .company-departments__media>* {
    grid-area: 1/1;
    min-width: 0
  }

  .company-departments__slider,
  .company-departments__slides,
  .company-departments__slide {
    width: 100%;
    height: 100%
  }

  .company-departments__slide-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .company-departments__shade {
    pointer-events: none;
    background: linear-gradient(180deg, #2230 47.1%, #22223380 94.19%), linear-gradient(90deg, #22223330 0% 100%)
  }

  .company-departments__description {
    align-self: end;
    justify-self: start;
    z-index: 1;
    width: 44.5rem;
    max-width: calc(100% - 8rem);
    margin: 4rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.028rem
  }

  @media(width<=576px) {
    .company-departments__description {
      justify-self: center;
      width: 34.3rem;
      max-width: calc(100% - 3.2rem);
      margin: 0 1.6rem 10rem;
      text-align: center
    }
  }

  .company-departments__navigation {
    align-self: end;
    justify-self: center;
    z-index: 2;
    margin-bottom: 4rem
  }

  @media(width<=576px) {
    .company-departments__navigation {
      gap: .5rem;
      margin-bottom: 4rem
    }

    .company-departments__navigation .slider-navigation__button {
      background: #ffffff1a
    }
  }
}

@layer sections {
  .production-and-services {
    position: relative;
    z-index: 2;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(121.17deg, #17223c, #091021)
  }

  .production-and-services__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden
  }

  .production-and-services__bg img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
    filter: blur(12rem);
    transform: scale(1.12);
    transform-origin: center
  }

  @media(width<=576px) {
    .production-and-services__bg img {
      filter: blur(5rem);
      transform: scale(1.2)
    }
  }

  .production-and-services__bg:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #0000001a
  }

  .production-and-services__inner {
    position: relative;
    padding-top: 16rem;
    padding-bottom: 6rem
  }

  .production-and-services--about-company .production-and-services__inner {
    padding-top: 15rem;
    padding-bottom: 26rem
  }

  @media(width<=576px) {
    .production-and-services--about-company .production-and-services__inner {
      padding-top: 8rem;
      padding-bottom: 8rem
    }
  }

  @media(width<=576px) {
    .production-and-services__inner {
      padding-top: 6rem;
      padding-bottom: 3.6rem;
      display: flex;
      flex-direction: column
    }
  }

  .production-and-services__title {
    margin-bottom: 12rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .production-and-services__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  .production-and-services--about-company .production-and-services__title {
    margin-bottom: 8rem
  }

  @media(width<=576px) {
    .production-and-services--about-company .production-and-services__title {
      margin-bottom: 4rem
    }
  }

  @media(width<=576px) {
    .production-and-services__title {
      margin-bottom: 4rem
    }
  }

  .production-and-services__caption {
    margin-bottom: 4rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
    opacity: .5
  }

  @media(width<=576px) {
    .production-and-services__caption {
      display: none
    }
  }

  .production-and-services__list-wrapper {
    margin-bottom: 16rem
  }

  .production-and-services__list-wrapper:last-child {
    margin-bottom: 0
  }

  @media(width<=576px) {
    .production-and-services__list-wrapper {
      margin-bottom: 4rem
    }
  }

  .production-and-services__list {
    display: flex;
    flex-direction: column;
    position: relative
  }

  .production-and-services__item {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    transition: border-color .2s
  }

  .production-and-services__link {
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    padding: 1.4rem 0;
    transition: padding .2s, border-radius .2s, background-color .2s
  }

  @media(width<=576px) {
    .production-and-services__link {
      padding-block: 1.7rem
    }
  }

  .production-and-services__item-preview {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity
  }

  @media(width<=576px) {
    .production-and-services__item-preview {
      display: none
    }
  }

  .production-and-services__item-preview-image {
    height: 64.8rem;
    width: auto;
    max-width: none
  }

  .production-and-services__item-title {
    flex-grow: 1;
    min-width: 0;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .production-and-services__item-title {
      font-size: 1.4rem;
      letter-spacing: -.028rem
    }
  }

  .production-and-services__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color)
  }

  .production-and-services__icon svg {
    width: .9rem;
    height: 1.5rem;
    fill: currentColor;
    transition: color .2s
  }

  .production-and-services__description {
    margin-inline: auto;
    max-width: 44.5rem;
    text-align: center;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
    opacity: .5;
    margin-bottom: 4rem
  }

  @media(width<=576px) {
    .production-and-services__description {
      max-width: none;
      font-size: 1.1rem;
      line-height: 1.4;
      margin-bottom: 4rem
    }
  }

  .production-and-services__description:last-child {
    margin-bottom: 0
  }

  .production-and-services__btn {
    width: 44.6rem;
    max-width: 100%;
    margin-inline: auto
  }

  @media(width<=576px) {
    .production-and-services__btn {
      width: auto;
      margin: 0
    }
  }

  .production-and-services__item.is-active {
    border-bottom-color: transparent
  }

  .production-and-services__item.is-active .production-and-services__link {
    padding-inline: 2rem;
    border-radius: .5rem;
    background-color: var(--primary-color)
  }

  @media(width<=576px) {
    .production-and-services__item.is-active .production-and-services__link {
      padding-inline: 0;
      border-radius: 0;
      background-color: transparent
    }
  }

  .production-and-services__item.is-active .production-and-services__icon {
    color: #fff
  }

  @media(width<=576px) {
    .production-and-services__item.is-active .production-and-services__icon {
      color: var(--primary-color)
    }
  }
}

@layer sections {
  .production-and-services-page {
    padding-top: 16rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .production-and-services-page {
      padding-top: 10.8rem
    }
  }

  .production-and-services-page__title {
    margin-top: 3rem;
    margin-bottom: 12.8rem;
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .production-and-services-page__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .production-and-services-page__title {
      margin-top: 2rem;
      margin-bottom: 4rem
    }
  }

  .realised-projects-industries.realised-projects-industries--production-and-services {
    padding-top: 0;
    padding-bottom: 5.2rem
  }

  @media(width<=576px) {
    .realised-projects-industries.realised-projects-industries--production-and-services {
      padding-top: 0;
      padding-bottom: 0
    }
  }
}

@layer sections {
  .product-detail-hero {
    padding-top: 16rem;
    padding-bottom: 12rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-detail-hero {
      padding-top: 10rem;
      padding-bottom: 5rem;
      overflow: clip
    }
  }

  .product-detail-hero .breadcrumbs {
    margin-bottom: 7rem
  }

  @media(width<=576px) {
    .product-detail-hero .breadcrumbs {
      display: none
    }
  }

  .product-detail-hero__title {
    display: block;
    width: min(93rem, 100%);
    margin-left: calc((100% + 2rem)/8);
    color: #223;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .product-detail-hero__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .product-detail-hero__title {
      width: 100%;
      margin-left: 0
    }
  }

  .product-detail-page {
    background-color: #fff;
    padding-bottom: 11rem;
    overflow: hidden
  }

  @media(width<=576px) {
    .product-detail-page {
      padding-bottom: 7rem
    }
  }

  .product-detail-page__topics-list {
    list-style: none
  }

  .product-detail-page__topics-item {
    border-bottom: 1px solid #ccc
  }

  .product-detail-page__topics-button {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    min-height: 7rem;
    padding-block: 1.5rem;
    color: #223;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem;
    transition: color .2s
  }

  @media(width<=576px) {
    .product-detail-page__topics-button {
      gap: 1.5rem;
      min-height: 6rem;
      padding-block: 1.8rem;
      font-size: 2rem;
      letter-spacing: -.04rem
    }
  }

  .product-detail-page__topics-button>span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left
  }

  .product-detail-page__topics-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.169rem;
    height: 1.018rem;
    color: var(--primary-color);
    transition: color .2s, transform .2s
  }

  .product-detail-page__topics-icon svg {
    width: 1.169rem;
    height: 1.018rem;
    fill: var(--primary-color)
  }

  @media(width<=576px) {
    .product-detail-page__topics-icon svg {
      width: 1rem;
      height: 1rem
    }
  }

  .product-detail-page__topics-item.active .product-detail-page__topics-icon {
    color: #223;
    transform: rotate(-90deg)
  }

  .product-detail-page__topics-dropdown {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .2s ease
  }

  .product-detail-page__topics-item.active .product-detail-page__topics-dropdown {
    grid-template-rows: 1fr;
    opacity: 1
  }

  .product-detail-page__topics-dropdown-inner {
    min-height: 0;
    overflow: hidden
  }

  .product-detail-page__topics-content {
    max-width: 100rem;
    padding-bottom: 3rem;
    color: #223;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .product-detail-page__topics-content {
      max-width: none;
      padding-bottom: 2rem;
      font-size: 1.4rem;
      line-height: 1.2;
      letter-spacing: -.042rem
    }
  }

  .product-detail-page__topics-content>* {
    margin: 0
  }

  .product-detail-page__topics-content>*+* {
    margin-top: 2rem
  }

  .product-detail-gallery {
    width: min(100vw - var(--container-padding) * 2, var(--container-max-width));
    margin-left: 50%;
    transform: translate(-50%)
  }

  .product-detail-gallery__slider {
    overflow: hidden
  }

  @media(width<=576px) {
    .product-detail-gallery__slider {
      overflow: visible
    }
  }

  .product-detail-gallery__list {
    list-style: none
  }

  .product-detail-gallery__item {
    width: 35rem;
    height: 35rem;
    margin-right: 2.25rem;
    flex-shrink: 0
  }

  @media(width<=576px) {
    .product-detail-gallery__item {
      width: 16rem;
      height: 16rem;
      margin-right: 1rem
    }
  }

  .product-detail-gallery__item:last-child {
    margin-right: 0
  }

  .product-detail-gallery__image {
    width: 100%;
    height: 100%;
    border: 1px solid #c2c2c8;
    border-radius: .5rem;
    object-fit: cover
  }

  .product-detail-gallery__navigation {
    width: max-content;
    margin: 8rem auto 0
  }

  @media(width<=576px) {
    .product-detail-gallery__navigation {
      margin-top: 3rem
    }
  }

  .contact-us--product-detail .contact-us__head {
    grid-column: 1/5
  }
}

@layer sections {
  .product-detail {
    padding-top: 16rem;
    padding-bottom: 15rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-detail {
      padding-top: 12.9rem;
      padding-bottom: 7rem
    }
  }

  .product-detail__breadcrumbs {
    padding-bottom: 4rem
  }

  @media(width<=576px) {
    .product-detail__breadcrumbs {
      display: none
    }
  }

  .product-detail__layout {
    --product-detail-grid-gap: 2rem;
    --product-detail-grid-column-width: calc((100% - (var(--container-padding) * 2) - (var(--product-detail-grid-gap) * 7)) / 8);
    --product-detail-side-width: calc(var(--container-padding) + var(--product-detail-grid-column-width));
    display: grid;
    grid-template-columns: var(--product-detail-side-width) minmax(0, calc(100% - var(--product-detail-side-width) * 2 - var(--product-detail-grid-gap) * 2)) var(--product-detail-side-width);
    gap: var(--product-detail-grid-gap);
    width: 100%
  }

  @media(width<=576px) {
    .product-detail__layout {
      display: block;
      width: auto;
      margin-inline: var(--container-padding)
    }
  }

  .product-detail__mobile-navigation {
    display: contents
  }

  @media(width<=576px) {
    .product-detail__mobile-navigation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      margin-bottom: 1.4rem
    }
  }

  .product-detail__back {
    display: none
  }

  @media(width<=576px) {
    .product-detail__back {
      display: grid;
      flex: none;
      place-items: center;
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      background-color: #f2f2fa;
      color: var(--text-color)
    }
  }

  .product-detail__back svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor
  }

  .catalog-menu--product-detail {
    --product-detail-sticky-offset: calc(8.07rem + 1px);
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: var(--product-detail-sticky-offset);
    align-self: start;
    height: calc(100dvh - var(--product-detail-sticky-offset));
    flex-basis: auto
  }

  @media(width<=576px) {
    .catalog-menu--product-detail {
      position: relative;
      top: auto;
      width: auto;
      height: auto;
      margin: 0
    }
  }

  @media(width>576px) {
    .catalog-menu--product-detail .catalog-menu__surface {
      height: 100%
    }
  }

  @media(width<=576px) {
    .catalog-menu--product-detail .catalog-menu__trigger {
      gap: 1rem;
      width: auto;
      height: auto;
      padding: 1.4rem 2.4rem;
      font-size: 1.1rem;
      letter-spacing: .11rem
    }
  }

  @media(width<=576px) {
    .catalog-menu--product-detail .catalog-menu__trigger svg {
      width: 1.6rem;
      height: 1.6rem
    }
  }

  .product-detail__main {
    grid-column: 2;
    min-width: 0
  }

  .product-detail__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.464fr) minmax(0, 1fr);
    gap: 5.7rem;
    align-items: center;
  }

  @media(width<=576px) {
    .product-detail__intro {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
  }

  .product-detail__media {
    position: relative;
    aspect-ratio: 783/500;
    overflow: hidden;
    border-radius: .5rem;
    background-color: #fff;
  }

  @media(width<=576px) {
    .product-detail__media {
      order: 2;
      width: 100%;
      margin-top: 2.4rem;
      aspect-ratio: 343/220;
      border-radius: .2rem
    }
  }

  .product-detail__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .product-detail__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7rem
  }

  @media(width<=576px) {
    .product-detail__content {
      display: contents;
      gap: 0
    }
  }

  @media(width<=576px) {
    .product-detail__heading {
      order: 1
    }
  }

  .product-detail__title {
    max-width: 55rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.24rem
  }

  @media(width<=576px) {
    .product-detail__title {
      max-width: none;
      font-size: 3rem;
      line-height: 1.14;
      letter-spacing: -.12rem
    }
  }

  .product-detail__subtitle {
    margin-top: 2rem;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.2
  }

  @media(width<=576px) {
    .product-detail__subtitle {
      margin-top: 1.2rem;
      font-size: 1.8rem
    }
  }

  .product-detail__description {
    margin-top: 1rem !important;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.4
  }

  @media(width<=576px) {
    .product-detail__description {
      order: 3;
      margin-top: 2.4rem !important;
      font-size: 1.4rem
    }
  }

  .product-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5.1rem;
    margin-top: auto
  }

  @media(width<=576px) {
    .product-order {
      order: 4;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 1.6rem;
      width: 100%;
      margin-top: 4rem
    }
  }

  .product-order__quantity {
    display: flex;
    align-items: center;
    gap: 2rem
  }

  @media(width<=576px) {
    .product-order__quantity {
      gap: 1.2rem
    }
  }

  .product-order__quantity-button {
    display: grid;
    flex: none;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #f2f2fa;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.6rem;
    font-weight: 700;
    transition: background-color .2s, color .2s
  }

  .product-order__quantity-button:disabled {
    cursor: default
  }

  @media(width<=576px) {
    .product-order__quantity-button {
      width: 4rem;
      height: 4rem;
      font-size: 1.4rem
    }
  }

  .product-order__quantity-input {
    width: 1.6rem;
    padding: 0;
    appearance: textfield;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    text-align: center
  }

  .product-order__quantity-input::-webkit-inner-spin-button,
  .product-order__quantity-input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none
  }

  .product-order__submit {
    display: flex;
    flex: 0 0 36rem;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 3rem;
    border: 2px solid var(--primary-color);
    border-radius: 4rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .product-order__submit {
      width: auto;
      min-width: 0;
      white-space: nowrap
    }
  }

  .product-order__submit-arrow {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    fill: var(--primary-color)
  }

  @media(width<=576px) {
    .product-order__submit-arrow {
      display: none
    }
  }

  .product-detail__tabs {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 8rem
  }

  @media(width<=576px) {
    .product-detail__tabs {
      position: relative;
      left: 50%;
      width: 100vw;
      margin-top: 7rem;
      margin-left: -50vw;
      padding-inline: var(--container-padding);
      overflow-x: auto;
      scrollbar-width: none;
      gap: 0rem;
      scroll-padding-left: var(--container-padding)
    }

    .product-detail__tabs::-webkit-scrollbar {
      display: none
    }
  }

  .product-detail__tab {
    flex: none;
    padding: 2rem 3rem;
    border: 2px solid transparent;
    border-radius: 4rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-decoration: underline;
    text-underline-offset: .2rem;
    text-transform: uppercase;
    white-space: nowrap
  }

  @media(width<=576px) {
    .product-detail__tab {
      padding: 1.4rem 2rem;
      border-width: 2px;
      font-size: 1.1rem;
      letter-spacing: .11rem;
      scroll-snap-align: start
    }
  }

  .product-detail__tab.active {
    border-color: var(--primary-color);
    text-decoration: none
  }

  .product-detail__panels {
    margin-top: 8rem
  }

  @media(width<=576px) {
    .product-detail__panels {
      margin-top: 6rem
    }
  }

  .product-detail__panel {
    display: none
  }

  .product-detail__panel.active {
    display: block
  }

  .product-detail__panel-title {
    margin-bottom: 8rem;
    font-family: var(--inter-tight);
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.192rem
  }

  @media(width<=576px) {
    .product-detail__panel-title {
      margin-bottom: 4rem;
      font-size: 2.4rem;
      letter-spacing: -.024rem
    }
  }

  .product-specifications {
    display: flex;
    flex-direction: column;
    gap: 8rem
  }

  @media(width<=576px) {
    .product-specifications {
      gap: 2.4rem
    }
  }

  .product-specifications__scroll {
    overflow-x: auto
  }

  @media(width<=576px) {
    .product-specifications__scroll {
      position: relative;
      left: 50%;
      width: 100vw;
      margin-left: -50vw;
      padding-inline: var(--container-padding);
      padding-bottom: 2.4rem;
      overflow-x: scroll
    }

    .product-specifications__scroll::-webkit-scrollbar {
      display: block;
      height: .6rem;
      -webkit-appearance: none
    }

    .product-specifications__scroll::-webkit-scrollbar-track {
      margin-inline: var(--container-padding);
      border-radius: 1rem;
      background-color: #ddd
    }

    .product-specifications__scroll::-webkit-scrollbar-thumb {
      border-radius: 1rem;
      background-color: var(--primary-color)
    }
  }

  .product-specifications__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.088rem
  }

  @media(width<=576px) {
    .product-specifications__table {
      width: 83.8rem;
      font-size: 1.6rem;
      letter-spacing: -.064rem
    }
  }

  .product-specifications__table th,
  .product-specifications__table td {
    padding: 2.2rem 3.2rem;
    border: 1px solid #dfdfeb;
    text-align: left;
    white-space: pre-line
  }

  @media(width<=576px) {

    .product-specifications__table th,
    .product-specifications__table td {
      padding: 1.8rem 3.2rem
    }
  }

  .product-specifications__table th {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 500
  }

  .product-specifications__table thead:first-child th[colspan] {
    text-align: center
  }

  .product-specifications__table tbody tr:nth-child(2n) td,
  .product-specifications__table--three-columns tbody tr:nth-child(odd) td {
    background-color: #f2f2fa
  }

  .product-specifications__table--three-columns tbody tr:nth-child(2n) td {
    background-color: #fff
  }

  .product-detail__documents {
    list-style: none
  }

  .product-detail__documents>li {
    min-width: 0
  }

  .product-detail__contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 15rem
  }

  @media(width<=576px) {
    .product-detail__contacts {
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-top: 7rem
    }
  }

  .product-detail-contact {
    display: flex;
    flex-direction: column;
    gap: 6.4rem;
    padding: 4rem;
    overflow: hidden;
    border-radius: .5rem;
    background-color: #223;
    color: #fff
  }

  @media(width<=576px) {
    .product-detail-contact {
      gap: 4rem;
      padding: 2.4rem
    }
  }

  .product-detail-contact__title {
    color: #ffffffb3;
    font-family: var(--inter);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.048rem
  }

  @media(width<=576px) {
    .product-detail-contact__title {
      font-size: 1.4rem
    }
  }

  .product-detail-contact__links {
    display: flex;
    flex-direction: column;
    gap: 4rem
  }

  @media(width<=576px) {
    .product-detail-contact__links {
      gap: 2rem
    }
  }

  .product-detail-contact__link {
    width: max-content;
    max-width: 100%;
    color: #fff;
    font-family: var(--inter);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.09rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: .1rem;
    text-underline-offset: .4rem;
    transition: text-decoration-color .2s;
    overflow-wrap: anywhere
  }

  .product-detail-contact__link[href^="mailto:"] {
    color: #fffc
  }

  @media(width<=576px) {
    .product-detail-contact__link {
      font-size: 2rem;
      letter-spacing: -.06rem
    }
  }

  .product-cart {
    position: fixed;
    right: 4rem;
    bottom: 4rem;
    z-index: 190;
    display: grid;
    place-items: center;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #fff
  }

  @media(width<=576px) {
    .product-cart {
      right: 1.5rem;
      bottom: 1.5rem;
      width: 6rem;
      height: 6rem
    }
  }

  .product-cart__icon {
    width: 4rem;
    height: 4rem;
    fill: currentColor
  }

  @media(width<=576px) {
    .product-cart__icon {
      width: 2.4rem;
      height: 2.4rem
    }
  }

  .product-cart__count {
    position: absolute;
    right: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #eb0037;
    color: #fff;
    font-family: var(--inter);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1
  }

  @media(width<=576px) {
    .product-cart__count {
      width: 2.4rem;
      height: 2.4rem;
      font-size: 1.2rem
    }
  }

  @media(hover:hover)and (pointer:fine) {

    .product-order__quantity-button:not(:disabled):hover,
    .product-order__quantity-button:not(:disabled):focus-visible {
      background-color: var(--primary-color);
      color: #fff
    }

    .product-order__submit:hover,
    .product-order__submit:focus-visible {
      background-color: var(--primary-color);
      color: #fff
    }

    .product-order__submit:hover .product-order__submit-arrow,
    .product-order__submit:focus-visible .product-order__submit-arrow {
      fill: #fff
    }

    .product-detail-contact__link:hover,
    .product-detail-contact__link:focus-visible {
      text-decoration-color: currentColor
    }

    .product-cart:hover,
    .product-cart:focus-visible {
      background-color: #005db9
    }
  }
}

@layer sections {
  .product-text-page-hero {
    padding-top: 16rem;
    padding-bottom: 10.5rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-text-page-hero {
      padding-top: 10rem;
      padding-bottom: 5rem;
      overflow: clip
    }
  }

  .product-text-page-hero .breadcrumbs {
    margin-bottom: 7rem
  }

  @media(width<=576px) {
    .product-text-page-hero .breadcrumbs {
      margin-bottom: 3rem
    }
  }

  .product-text-page-hero__title {
    display: block;
    width: min(137.5rem, 100% - (100% + 2rem) / 8);
    margin-left: calc((100% + 2rem)/8);
    color: #223;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .product-text-page-hero__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .product-text-page-hero__title {
      width: 100%;
      margin-left: 0
    }
  }

  .product-text-page {
    background-color: #fff;
    padding-bottom: 11rem;
    overflow: hidden
  }

  @media(width<=576px) {
    .product-text-page {
      padding-bottom: 7rem
    }
  }

  .product-text-page__lead {
    padding: 4rem;
    background-color: #f2f2fa
  }

  @media(width<=576px) {
    .product-text-page__lead {
      padding: 2rem
    }
  }

  .product-text-page__lead p {
    margin: 0;
    color: #223;
    font-family: var(--inter-tight);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .03rem
  }

  @media(width<=576px) {
    .product-text-page__lead p {
      font-size: 2rem;
      letter-spacing: 0
    }
  }

  .product-text-page__intro-title {
    padding-bottom: 4rem;
    border-bottom: .3rem solid var(--primary-color)
  }

  @media(width<=576px) {
    .product-text-page__intro-title {
      border-bottom-width: 1px
    }
  }

  .product-text-page__content>.product-text-page__intro-title {
    margin-top: 8rem;
    margin-bottom: 4rem;
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: .03rem
  }

  @media(width<=576px) {
    .product-text-page__content>.product-text-page__intro-title {
      margin-top: 4rem;
      margin-bottom: 2.4rem;
      padding-bottom: 2rem;
      font-size: 2rem;
      letter-spacing: 0
    }
  }

  .product-text-page__content>.product-text-page__intro-title+* {
    margin-top: 0
  }

  .product-text-page__topics {
    width: min(100vw - var(--container-padding) * 2, var(--container-max-width));
    margin-left: 50%;
    transform: translate(-50%)
  }

  .product-text-page__topics-list {
    list-style: none
  }

  .product-text-page__topics-item {
    border-bottom: 1px solid #ccc
  }

  .product-text-page__topics-button {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding-block: 2rem;
    color: #223;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem;
    transition: color .2s
  }

  @media(width<=576px) {
    .product-text-page__topics-button {
      gap: 1.5rem;
      padding-block: 1.8rem;
      font-size: 2rem;
      letter-spacing: -.04rem
    }
  }

  .product-text-page__topics-button>span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left
  }

  .product-text-page__topics-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: .9rem;
    color: var(--primary-color);
    transition: color .2s, transform .2s
  }

  .product-text-page__topics-icon svg {
    width: 1.5rem;
    height: .9rem;
    fill: var(--primary-color)
  }

  .product-text-page__topics-item.active .product-text-page__topics-icon {
    color: #223;
    transform: rotate(180deg)
  }

  .product-text-page__topics-dropdown {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .2s ease
  }

  .product-text-page__topics-item.active .product-text-page__topics-dropdown {
    grid-template-rows: 1fr;
    opacity: 1
  }

  .product-text-page__topics-dropdown-inner {
    min-height: 0;
    overflow: hidden
  }

  .product-text-page__topics-content {
    max-width: 137.5rem;
    padding-bottom: 3rem;
    color: #223;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .product-text-page__topics-content {
      max-width: none;
      padding-bottom: 2rem;
      font-size: 1.4rem;
      line-height: 1.2;
      letter-spacing: -.042rem
    }
  }

  .product-text-page__topics-content>* {
    margin: 0
  }

  .product-text-page__topics-content>*+* {
    margin-top: 2rem
  }

  .product-text-page__topics-content :is(ol, ul) {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin: 0;
    list-style: none;
    counter-reset: product-text-page-topic-list
  }

  .product-text-page__topics-content p+:is(ol, ul) {
    margin-top: 3.2rem
  }

  .product-text-page__topics-content :is(ol, ul)+:is(ol, ul) {
    margin-top: 2rem
  }

  .product-text-page__topics-content li {
    position: relative;
    padding-left: 3.3rem
  }

  .product-text-page__topics-content ol>li:before {
    counter-increment: product-text-page-topic-list;
    content: counter(product-text-page-topic-list) ".";
    position: absolute;
    left: 0;
    top: 0
  }

  .product-text-page__topics-content ul>li:before {
    content: "";
    position: absolute;
    left: .9rem;
    top: 1.15rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: currentColor
  }

  .product-text-page-gallery {
    width: min(100vw - var(--container-padding) * 2, var(--container-max-width));
    margin-left: 50%;
    transform: translate(-50%)
  }

  .product-text-page-gallery__slider {
    overflow: hidden
  }

  @media(width<=576px) {
    .product-text-page-gallery__slider {
      overflow: visible
    }
  }

  .product-text-page-gallery__list {
    list-style: none
  }

  .product-text-page-gallery__item {
    width: 35rem;
    height: 35rem;
    margin-right: 2.25rem;
    flex-shrink: 0
  }

  @media(width<=576px) {
    .product-text-page-gallery__item {
      width: 16rem;
      height: 16rem;
      margin-right: 1rem
    }
  }

  .product-text-page-gallery__item:last-child {
    margin-right: 0
  }

  .product-text-page-gallery__image {
    width: 100%;
    height: 100%;
    border: 1px solid #c2c2c8;
    border-radius: .5rem;
    object-fit: cover
  }

  .product-text-page-gallery__navigation {
    width: max-content;
    margin: 8rem auto 0
  }

  @media(width<=576px) {
    .product-text-page-gallery__navigation {
      margin-top: 3rem
    }
  }

  .contact-us--product-text-page .contact-us__head {
    grid-column: 1/5
  }

  .other-articles.product-text-categories {
    position: relative;
    z-index: 1;
    margin-top: -29.2rem;
    padding-top: 48.2rem;
    padding-bottom: 15rem
  }

  @media(width<=576px) {
    .other-articles.product-text-categories {
      margin-top: -8rem;
      padding-top: 12rem;
      padding-bottom: 8rem
    }
  }

  .product-text-categories .other-articles__navigation {
    margin-top: 12.2rem
  }

  @media(width<=576px) {
    .product-text-categories .other-articles__navigation {
      margin-top: 4rem
    }
  }
}

@layer sections {
  .product-page-hero {
    padding-top: 16rem;
    padding-bottom: 12.8rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-page-hero {
      padding-top: 10rem;
      padding-bottom: 5rem;
      overflow: clip
    }
  }

  .product-page-hero .breadcrumbs {
    margin-bottom: 4rem
  }

  @media(width<=576px) {
    .product-page-hero .breadcrumbs {
      display: none
    }
  }

  .product-page-hero__title {
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .product-page-hero__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  .product-page-banner {
    position: relative;
    aspect-ratio: 1920/400;
    overflow: hidden;
    background-color: #223
  }

  @media(width<=576px) {
    .product-page-banner {
      aspect-ratio: 375/220
    }
  }

  .product-page-banner:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #0006;
    pointer-events: none
  }

  .product-page-banner__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .product-page-banner__text {
    position: relative;
    z-index: 2;
    max-width: 67.8rem;
    padding-top: 3.8rem;
    color: #fff;
    font-family: var(--inter-tight);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .product-page-banner__text {
      max-width: 26rem;
      padding-top: 2rem;
      font-size: 1.8rem;
      letter-spacing: 0
    }
  }

  .product-page-modules {
    padding-top: 15rem;
    padding-bottom: 15rem;
    background-color: #f2f2fa
  }

  @media(width<=576px) {
    .product-page-modules {
      padding-top: 7rem;
      padding-bottom: 7rem;
      overflow: hidden
    }
  }

  .product-page-modules__filters {
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 8rem
  }

  @media(width<=576px) {
    .product-page-modules__filters {
      display: none
    }
  }

  .product-page-modules__filter {
    width: calc((100% - 14rem)/4)
  }

  .product-page-modules__filter-label {
    margin-bottom: 1.5rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.05
  }

  .product-page-modules__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 6rem;
    row-gap: 8rem;
    list-style: none
  }

  @media(width<=576px) {
    .product-page-modules__list {
      position: relative;
      left: 50%;
      display: flex;
      gap: 0;
      width: 100vw;
      margin-left: -50vw;
      padding-inline: var(--container-padding);
      overflow-x: auto;
      scrollbar-width: none;
      scroll-padding-left: var(--container-padding)
    }

    .product-page-modules__list::-webkit-scrollbar {
      display: none
    }
  }

  .product-page-modules__item {
    position: relative;
    min-width: 0
  }

  @media(width<=576px) {
    .product-page-modules__item {
      flex: 0 0 min(30rem, 100vw - var(--container-padding) * 2);
      min-width: min(30rem, 100vw - var(--container-padding) * 2);
      margin-right: 2rem
    }

    .product-page-modules__item:last-child {
      margin-right: 0
    }
  }

  .product-page-modules__item:not(:nth-child(4n)):after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3rem;
    width: 1px;
    background-color: #2223
  }

  @media(width<=576px) {
    .product-page-modules__item:not(:nth-child(4n)):after {
      content: none
    }
  }

  .product-page-module-card {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    color: var(--text-color)
  }

  @media(width<=576px) {
    .product-page-module-card {
      gap: 2rem;
      min-height: auto
    }
  }

  .product-page-module-card__image-link {
    display: block;
    aspect-ratio: 405/297;
    overflow: hidden;
    border-radius: .5rem;
    background-color: #d8dce4
  }

  .product-page-module-card__image {
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    object-fit: cover;
    transition: transform .4s
  }

  .product-page-module-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4rem
  }

  @media(width<=576px) {
    .product-page-module-card__content {
      gap: 2rem
    }
  }

  .product-page-module-card__title {
    margin-bottom: 4rem;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .product-page-module-card__title {
      margin-bottom: 1.5rem;
      font-size: 1.6rem;
      letter-spacing: -.048rem
    }
  }

  .product-page-module-card__text {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.042rem
  }

  @media(width<=576px) {
    .product-page-module-card__text {
      font-size: 1.2rem;
      letter-spacing: -.036rem
    }
  }

  .product-page-module-card__button,
  .product-page-modules__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 6rem;
    border: 1px solid rgba(34, 34, 34, .2);
    border-radius: 4rem;
    padding: 1.7rem 3rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase;
    transition: border-color .2s, background-color .2s, color .2s
  }

  @media(width<=576px) {

    .product-page-module-card__button,
    .product-page-modules__more {
      gap: 1rem;
      min-height: 4.4rem;
      padding: 1.2rem 2rem;
      font-size: 1.1rem;
      letter-spacing: .11rem
    }
  }

  .product-page-module-card__button {
    align-self: flex-start
  }

  .product-page-module-card__button-arrow {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--primary-color);
    fill: currentColor;
    transition: color .2s
  }

  .product-page-modules__more {
    display: flex;
    width: 44.6rem;
    max-width: 100%;
    min-height: 8rem;
    margin: 12rem auto 0;
    border-color: var(--primary-color)
  }

  @media(width<=576px) {
    .product-page-modules__more {
      display: none
    }
  }

  .product-page-numbered {
    padding-top: 4rem;
    padding-bottom: 15rem;
    background-color: #fff;
    color: var(--text-color)
  }

  @media(width<=576px) {
    .product-page-numbered {
      padding-top: 3rem;
      padding-bottom: 7rem
    }
  }

  .product-page-numbered--dark {
    background-color: #223;
    color: #fff
  }

  .product-page-numbered__caption {
    margin-bottom: 4rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1
  }

  @media(width<=576px) {
    .product-page-numbered__caption {
      margin-bottom: 2rem;
      font-size: 1.2rem
    }
  }

  .product-page-numbered__title {
    margin-bottom: 8rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .product-page-numbered__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .product-page-numbered__title {
      margin-bottom: 4rem;
      line-height: 1.1
    }
  }

  .product-page-numbered--dark .product-page-numbered__title {
    color: #fff
  }

  .product-page-numbered__list {
    counter-reset: product-page-numbered;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 6rem;
    row-gap: 16rem;
    list-style: none
  }

  @media(width<=576px) {
    .product-page-numbered__list {
      display: block
    }
  }

  .product-page-numbered__item {
    counter-increment: product-page-numbered;
    position: relative;
    padding-right: 3rem;
    font-family: var(--inter);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .product-page-numbered__item {
      padding: 2.4rem 0;
      border-top: 1px solid rgba(34, 34, 51, .2);
      font-size: 2rem;
      letter-spacing: 0
    }

    .product-page-numbered__item:first-child {
      padding-top: 0;
      border-top: 0
    }
  }

  .product-page-numbered__item:before {
    content: none
  }

  .product-page-numbered__item:nth-child(n+5):nth-child(4n+1):before {
    content: "";
    position: absolute;
    top: -8rem;
    left: 0;
    width: calc(400% + 18rem);
    height: 1px;
    background-color: #2233;
    pointer-events: none
  }

  @media(width<=576px) {
    .product-page-numbered__item:nth-child(n+5):nth-child(4n+1):before {
      content: none
    }
  }

  .product-page-numbered__item:after {
    content: "";
    position: absolute;
    left: -3rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #2233;
    pointer-events: none
  }

  @media(width<=576px) {
    .product-page-numbered__item:after {
      content: none
    }
  }

  .product-page-numbered__item:nth-child(4n+1):after {
    content: none
  }

  .product-page-numbered__number {
    display: block;
    margin-bottom: 2rem;
    color: var(--primary-color);
    font-family: var(--ibm-plex-mono);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.028rem
  }

  @media(width<=576px) {
    .product-page-numbered__number {
      margin-bottom: 1.5rem;
      font-size: 1.2rem
    }
  }

  .product-page-numbered__number:before {
    content: counter(product-page-numbered, decimal-leading-zero)
  }

  .product-page-numbered--dark .product-page-numbered__title {
    margin-bottom: 14rem
  }

  .product-page-numbered--dark .product-page-numbered__item:nth-child(n+5):nth-child(4n+1):before,
  .product-page-numbered--dark .product-page-numbered__item:after {
    background-color: #fff3
  }

  .product-page-topics {
    padding-top: 15rem;
    padding-bottom: 15rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-page-topics {
      padding-top: 7rem;
      padding-bottom: 7rem
    }
  }

  .product-page-company {
    margin-top: 15rem;
    margin-bottom: 0;
    min-height: auto
  }

  @media(width<=576px) {
    .product-page-company {
      margin-top: 7rem
    }
  }

  .other-categories:has(+.contact-us) {
    margin-top: 0;
    padding-top: 4rem;
    margin-bottom: 15rem
  }

  .other-categories+.contact-us {
    padding-top: 0
  }

  @media(hover:hover)and (pointer:fine) {
    .product-page-module-card__image-link:hover .product-page-module-card__image {
      transform: scale(1.04)
    }

    .product-page-module-card__button:hover,
    .product-page-modules__more:hover {
      border-color: var(--primary-color);
      background-color: var(--primary-color);
      color: #fff
    }

    .product-page-module-card__button:hover .product-page-module-card__button-arrow {
      color: #fff
    }
  }
}

@layer sections {
  .product-catalog-hero {
    --product-catalog-hero-intro-max-height: 120rem;
    padding-top: 16rem;
    background-color: #fff
  }

  @media(width>576px) {
    .product-catalog-hero {
      display: flex;
      min-height: min(100svh, var(--product-catalog-hero-intro-max-height) + 20.6rem);
      flex-direction: column
    }
  }

  @media(width<=576px) {
    .product-catalog-hero {
      padding-top: 12.6rem
    }
  }

  .product-catalog-hero__breadcrumbs {
    padding-bottom: 2.6rem
  }

  @media(width<=576px) {
    .product-catalog-hero__breadcrumbs {
      display: none
    }
  }

  .product-catalog-hero__intro {
    position: relative;
    display: flex;
    overflow: hidden;
    background-color: #223
  }

  @media(width>576px) {
    .product-catalog-hero__intro {
      flex: 1 0 auto;
      max-height: var(--product-catalog-hero-intro-max-height)
    }
  }

  @media(width<=576px) {
    .product-catalog-hero__intro {
      flex-direction: column;
      overflow: visible;
      background-color: #fff
    }
  }

  .product-catalog-hero__media {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    min-width: 0
  }

  @media(width<=576px) {
    .product-catalog-hero__media {
      display: contents
    }
  }

  .product-catalog-hero__title {
    grid-area: 1/1;
    align-self: start;
    margin: 4.7rem 0 0 7.6rem;
    z-index: 3;
    color: #fff;
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.48rem
  }

  @media(width<=576px) {
    .product-catalog-hero__title {
      position: relative;
      order: 1;
      width: 22rem;
      margin: 0 1.6rem 2.6rem;
      color: var(--text-color);
      font-size: 3rem;
      line-height: 1.14;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  .product-catalog-hero__picture {
    position: relative;
    z-index: 1;
    display: block;
    grid-area: 1/1;
    width: 100%;
    aspect-ratio: 1668/765
  }

  @media(width>576px) {
    .product-catalog-hero__picture {
      height: 100%;
      aspect-ratio: auto
    }
  }

  @media(width<=576px) {
    .product-catalog-hero__picture {
      position: relative;
      order: 3;
      aspect-ratio: 15/16
    }
  }

  .product-catalog-hero__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  @media(width<=576px) {
    .product-catalog-page-body .page-header__mobile-btn--phone {
      display: none
    }
  }
}

@layer sections {
  .product-intro-gallery {
    padding-block: 12rem 8rem;
    overflow: hidden;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-intro-gallery {
      padding-block: 8rem
    }
  }

  .product-intro-gallery__title {
    max-width: 137.5rem;
    margin-bottom: 8rem;
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.12rem
  }

  @media(width<=576px) {
    .product-intro-gallery__title {
      margin-bottom: 4rem;
      font-size: 2.6rem;
      line-height: 1.15;
      letter-spacing: 0
    }
  }

  .product-intro-gallery__gallery {
    position: relative
  }

  @media(width<=576px) {
    .product-intro-gallery__gallery {
      left: 50%;
      width: 100vw;
      margin-left: -50vw
    }
  }

  .product-intro-gallery__slider {
    width: 100%;
    min-width: 0;
    overflow: hidden
  }

  .product-intro-gallery__list {
    display: flex
  }

  .product-intro-gallery__item {
    width: 100%;
    flex: 0 0 auto
  }

  .product-intro-gallery__media {
    position: relative;
    aspect-ratio: 1840/900;
    overflow: hidden;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-intro-gallery__media {
      aspect-ratio: 1/.7
    }
  }

  .product-intro-gallery__media:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0006;
    pointer-events: none
  }

  .product-intro-gallery__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .product-intro-gallery__navigation {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 4rem;
    transform: translate(-50%)
  }

  .product-intro-gallery__navigation .slider-navigation__button {
    background-color: #fff;
    color: #223
  }

  .product-intro-gallery__navigation .slider-navigation__button.swiper-button-disabled {
    opacity: .3
  }

  @media(hover:hover)and (pointer:fine) {
    .product-intro-gallery__navigation .slider-navigation__button:hover {
      background-color: #f2f2fa
    }
  }

  @media(width<=576px) {
    .product-intro-gallery__navigation {
      bottom: 2rem
    }
  }
}

@layer sections {
  .product-category-hero {
    padding-top: 16rem;
    padding-bottom: 15rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-category-hero {
      padding-top: 10rem;
      padding-bottom: 8rem;
      overflow: hidden
    }
  }

  .product-category-hero .breadcrumbs {
    margin-bottom: 4rem
  }

  .product-category-hero__title {
    max-width: 164rem;
    margin-bottom: 12.8rem;
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .product-category-hero__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .product-category-hero__title {
      margin-bottom: 4rem
    }
  }

  .product-category-hero--grouped .breadcrumbs {
    margin-bottom: 2rem
  }

  @media(width<=576px) {
    .product-category-hero--grouped .breadcrumbs {
      margin-bottom: 4rem
    }
  }

  .product-category-hero--grouped .product-category-hero__title {
    margin-bottom: 12rem
  }

  @media(width<=576px) {
    .product-category-hero--grouped .product-category-hero__title {
      margin-bottom: 6rem
    }
  }

  .product-category-hero__groups {
    display: flex;
    flex-direction: column;
    gap: 12rem
  }

  @media(width<=576px) {
    .product-category-hero__groups {
      gap: 8rem
    }
  }

  .product-category-hero__group-title {
    margin-bottom: 5rem;
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .product-category-hero__group-title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .product-category-hero__group-title {
      margin-bottom: 3rem
    }
  }

  .product-category-hero__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8rem 6rem;
    list-style: none
  }

  @media(width<=576px) {
    .product-category-hero__list {
      position: relative;
      left: 50%;
      display: flex;
      width: 100vw;
      margin-left: -50vw;
      padding-inline: var(--container-padding);
      gap: 2rem;
      overflow-x: auto;
      scroll-padding-inline: var(--container-padding);
      scroll-snap-type: x mandatory;
      scrollbar-width: none
    }

    .product-category-hero__list::-webkit-scrollbar {
      display: none
    }
  }

  .product-category-hero__item {
    position: relative;
    min-width: 0
  }

  @media(width<=576px) {
    .product-category-hero__item {
      flex: 0 0 min(30rem, 100vw - var(--container-padding) * 2);
      scroll-snap-align: start;
      scroll-snap-stop: always
    }
  }

  .product-category-hero__item:not(:nth-child(4n)):after {
    content: "";
    position: absolute;
    top: 0;
    right: -3rem;
    bottom: 0;
    width: 1px;
    background-color: #2223
  }

  @media(width<=576px) {
    .product-category-hero__item:not(:nth-child(4n)):after {
      content: none
    }
  }

  .product-category-media {
    position: relative;
    margin-bottom: 15rem;
    padding-top: 4rem;
    background: linear-gradient(180deg, #0074e8 0 110rem, #fff 110rem 100%)
  }

  @media(width<=576px) {
    .product-category-media {
      margin-bottom: 8rem;
      padding-top: 3rem;
      background: linear-gradient(180deg, #0074e8 0 82%, #fff 82% 100%)
    }
  }

  .product-category-media__pattern {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: min(80.1rem, 42vw);
    pointer-events: none
  }

  .product-category-media__pattern img {
    display: block;
    width: 100%;
    height: auto
  }

  @media(width<=576px) {
    .product-category-media__pattern {
      width: 25rem;
      opacity: .7
    }
  }

  .product-category-media__inner {
    position: relative;
    z-index: 1
  }

  .product-category-media__title {
    max-width: 137.5rem;
    margin-bottom: 4rem;
    color: #fff;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.12rem
  }

  @media(width<=576px) {
    .product-category-media__title {
      margin-bottom: 3rem;
      font-size: 2.6rem;
      line-height: 1.15;
      letter-spacing: 0
    }
  }

  .product-category-media__figure {
    position: relative;
    margin: 0;
    aspect-ratio: 1840/900
  }

  @media(width<=576px) {
    .product-category-media__figure {
      aspect-ratio: 343/230
    }
  }

  .product-category-media__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    object-fit: cover
  }

  .product-category-page>.home-projects-download .home-projects-download__content {
    padding-top: 3.6rem;
    padding-bottom: 6.1rem
  }

  @media(width<=576px) {
    .product-category-page>.home-projects-download .home-projects-download__content {
      padding-top: 3rem;
      padding-bottom: 3rem
    }
  }

  .product-category-page>.home-projects-download .engineering-doc-card__icon--image {
    width: 8rem;
    height: 9.6rem;
    margin-top: auto;
    border-radius: 0;
    background: transparent
  }

  .product-category-page>.home-projects-download .engineering-doc-card__icon--image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
  }

  @media(width<=576px) {
    .product-category-page>.home-projects-download .engineering-doc-card__icon--image {
      width: 6rem;
      height: 7.2rem
    }
  }

  .product-category-accordion {
    padding-top: 15rem;
    padding-bottom: 15rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-category-accordion {
      padding-top: 7rem;
      padding-bottom: 8rem
    }
  }

  .product-category-accordion__list {
    list-style: none
  }

  .product-category-accordion__item {
    border-bottom: 1px solid #ccc;
    transition: border-color .2s
  }

  .product-category-accordion__item.active {
    border-bottom: 2px solid var(--primary-color)
  }

  .product-category-accordion__button {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    padding-block: 2.4rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem;
    text-align: left
  }

  .product-category-accordion__button span {
    flex: 1 1 auto;
    min-width: 0
  }

  @media(width<=576px) {
    .product-category-accordion__button {
      gap: 1.5rem;
      padding-block: 2rem;
      font-size: 2rem;
      letter-spacing: -.04rem
    }
  }

  .product-category-accordion__icon {
    width: 1.5rem;
    height: .9rem;
    margin-top: .8rem;
    flex: 0 0 auto;
    color: var(--primary-color);
    fill: currentColor;
    transition: transform .25s ease
  }

  .product-category-accordion__item.active .product-category-accordion__icon {
    transform: rotate(180deg)
  }

  .product-category-accordion__dropdown {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .2s ease
  }

  .product-category-accordion__item.active .product-category-accordion__dropdown {
    grid-template-rows: 1fr;
    opacity: 1
  }

  .product-category-accordion__dropdown-inner {
    min-height: 0;
    overflow: hidden
  }

  .product-category-accordion__content {
    max-width: 137.5rem;
    padding-bottom: 3rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.04rem
  }

  .product-category-accordion__content>*+* {
    margin-top: 2rem
  }

  .product-category-accordion__content ol,
  .product-category-accordion__content ul {
    padding-left: 2.4rem
  }

  .product-category-accordion__content ol {
    list-style: decimal outside
  }

  .product-category-accordion__content ul {
    list-style: disc outside
  }

  .product-category-accordion__content li+li {
    margin-top: .4rem
  }

  @media(width<=576px) {
    .product-category-accordion__content {
      padding-bottom: 2rem;
      font-size: 1.4rem;
      line-height: 1.4;
      letter-spacing: -.02rem
    }

    .product-category-accordion__content ol,
    .product-category-accordion__content ul {
      padding-left: 2rem
    }
  }

  .product-category-cycle {
    padding-top: 4rem;
    padding-bottom: 15rem;
    overflow: hidden;
    background-color: #0074e8;
    color: #fff
  }

  @media(width<=576px) {
    .product-category-cycle {
      padding-top: 3rem;
      padding-bottom: 8rem
    }
  }

  .product-category-cycle__title {
    color: #fff;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .product-category-cycle__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  .product-category-cycle__marquee {
    margin-top: 15rem;
    padding-left: var(--container-padding);
    cursor: grab;
    touch-action: pan-y;
    user-select: none
  }

  .product-category-cycle__marquee.is-dragging {
    cursor: grabbing
  }

  @media(width<=576px) {
    .product-category-cycle__marquee {
      margin-top: 5rem
    }
  }

  .product-category-cycle__track {
    --cooperation-logos-duration: 72s;
    display: flex;
    width: max-content;
    will-change: transform
  }

  @media(width<=576px) {
    .product-category-cycle__track {
      --cooperation-logos-duration: 48s
    }
  }

  .product-category-cycle__group {
    position: relative;
    display: flex;
    gap: 1.9rem;
    padding-right: 1.9rem;
    list-style: none
  }

  .product-category-cycle__group:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 31rem;
    height: 1px;
    background-color: #ffffffa6
  }

  @media(width<=576px) {
    .product-category-cycle__group {
      gap: 1.2rem;
      padding-right: 1.2rem
    }

    .product-category-cycle__group:after {
      top: 23rem
    }
  }

  .product-category-cycle__item {
    position: relative;
    width: 52rem;
    padding-bottom: 9rem;
    flex: 0 0 auto
  }

  @media(width<=576px) {
    .product-category-cycle__item {
      width: 30rem;
      padding-bottom: 7rem
    }
  }

  .product-category-cycle__card {
    position: relative;
    padding: 2rem;
    aspect-ratio: 520/240;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: .5rem;
    background: linear-gradient(8deg, rgba(143, 199, 255, .55), transparent 48%), #0074e8
  }

  @media(width<=576px) {
    .product-category-cycle__card {
      padding: 1.6rem;
      aspect-ratio: 300/180
    }
  }

  .product-category-cycle__card-title {
    position: relative;
    z-index: 1;
    max-width: 42.6rem;
    color: #fff;
    font-family: var(--inter);
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.4
  }

  @media(width<=576px) {
    .product-category-cycle__card-title {
      max-width: 22rem;
      font-size: 2rem;
      line-height: 1.25
    }
  }

  .product-category-cycle__card-image {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    width: 13.2rem;
    height: 10.5rem;
    object-fit: contain;
    mix-blend-mode: lighten;
    pointer-events: none
  }

  @media(width<=576px) {
    .product-category-cycle__card-image {
      right: 1.2rem;
      bottom: 1.2rem;
      width: 9rem;
      height: 7rem
    }
  }

  .product-category-cycle__point {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 30.6rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-category-cycle__point {
      top: 22.6rem
    }
  }

  .product-category-projects {
    padding-top: 15rem;
    padding-bottom: 12rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .product-category-projects {
      padding-top: 8rem;
      padding-bottom: 8rem
    }
  }

  .product-category-projects__title {
    max-width: 85rem;
    margin-bottom: 15rem;
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .product-category-projects__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .product-category-projects__title {
      margin-bottom: 5rem
    }
  }

  .product-category-projects__list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    list-style: none
  }

  @media(width<=576px) {
    .product-category-projects__list {
      gap: 3.2rem
    }
  }

  .product-category-projects__button {
    width: min(44.6rem, 100%);
    margin: 12rem auto 0
  }

  @media(width<=576px) {
    .product-category-projects__button {
      margin-top: 5rem
    }
  }

  .product-category-page>.other-articles {
    padding-bottom: 15rem
  }

  @media(width<=576px) {
    .product-category-page>.other-articles {
      padding-bottom: 8rem
    }
  }

  .product-category-page>.other-articles .other-articles__button {
    width: min(44.6rem, 100%);
    margin: 12rem auto 0
  }

  @media(width<=576px) {
    .product-category-page>.other-articles .other-articles__button {
      margin-top: 5rem
    }
  }
}

@layer sections {
  .about-company {
    position: relative;
    z-index: 1;
    color: #fff
  }

  .about-company__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    padding-top: 16rem;
    padding-bottom: 6.1rem;
    min-height: 120rem
  }

  @media(width<=576px) {
    .about-company__grid {
      display: flex;
      flex-direction: column;
      gap: 3rem;
      min-height: auto;
      padding-top: 4rem;
      padding-bottom: 3.5rem
    }
  }

  .about-company__title {
    grid-column: 1/3;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .about-company__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .about-company__title {
      grid-column: 1/-1
    }
  }

  .about-company__content {
    grid-column: 5/-1;
    display: flex;
    flex-direction: column;
    gap: 8rem
  }

  @media(width<=576px) {
    .about-company__content {
      grid-column: 1/-1;
      gap: 4rem
    }
  }

  .about-company__description {
    width: 73.2rem;
    max-width: 100%;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -.09rem
  }

  @media(width<=576px) {
    .about-company__description {
      width: auto;
      font-family: var(--inter-tight);
      font-size: 1.4rem;
      letter-spacing: -.014rem
    }
  }

  .about-company__stats-list {
    width: 100%;
    display: flex;
    flex-direction: column
  }

  .about-company__stats-item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    border-top: .1rem solid rgba(255, 255, 255, .2);
    padding-block: 4rem;
    align-items: center;
    overflow: hidden
  }

  @media(width<=576px) {
    .about-company__stats-item {
      grid-template-columns: 12rem minmax(0, 1fr);
      gap: 1rem;
      padding-block: 1.2rem
    }
  }

  .about-company__stats-value {
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.24rem
  }

  @media(width<=576px) {
    .about-company__stats-value {
      font-size: 6rem;
      line-height: 1.2;
      letter-spacing: -.12rem
    }
  }

  .about-company__stats-value-inner {
    display: inline-flex;
    align-items: baseline;
    will-change: transform, opacity
  }

  .about-company__stats-suffix {
    font-size: 7.74rem;
    line-height: 1.2
  }

  @media(width<=576px) {
    .about-company__stats-suffix {
      font-size: 3.87rem
    }
  }

  .about-company__stats-text {
    display: flex;
    flex-direction: column;
    gap: 1.6rem
  }

  @media(width<=576px) {
    .about-company__stats-text {
      gap: 1rem
    }
  }

  .about-company__stats-title {
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.09rem
  }

  @media(width<=576px) {
    .about-company__stats-title {
      font-size: 1.4rem;
      letter-spacing: -.042rem
    }
  }

  .about-company__stats-description {
    max-width: 100%;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
    opacity: .5;
    max-width: 34rem
  }

  @media(width<=576px) {
    .about-company__stats-description {
      max-width: 21.3rem;
      font-size: 1.2rem;
      line-height: 1.4
    }
  }

  .about-company__btn {
    grid-column: 3/7;
    align-self: end;
    justify-self: center;
    width: 44.5rem;
    max-width: 100%
  }

  @media(width<=576px) {
    .about-company__btn {
      grid-column: auto;
      align-self: stretch
    }
  }
}

@layer sections {
  .realised-projects {
    background-color: #fff;
    padding-top: 12rem;
    padding-bottom: 8rem
  }

  @media(width<=576px) {
    .realised-projects {
      padding-top: 8rem;
      padding-bottom: 6rem
    }
  }

  .realised-projects__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    row-gap: 0
  }

  @media(width<=576px) {
    .realised-projects__grid {
      display: flex;
      flex-direction: column;
      gap: 0
    }
  }

  .realised-projects__title {
    grid-column: 1/4;
    margin-bottom: 9rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .realised-projects__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .realised-projects__title {
      grid-column: 1/-1;
      margin-bottom: 3rem
    }
  }

  .realised-projects__meta {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    align-items: end;
    border-bottom: .1rem solid rgba(34, 34, 34, .2);
    padding-bottom: 4rem
  }

  @media(width<=576px) {
    .realised-projects__meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 2rem
    }
  }

  .realised-projects__caption,
  .realised-projects__total {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1
  }

  @media(width<=576px) {

    .realised-projects__caption,
    .realised-projects__total {
      font-size: 1.2rem
    }
  }

  .realised-projects__caption {
    grid-column: 1/3
  }

  @media(width<=576px) {
    .realised-projects__caption {
      grid-column: 1/2
    }
  }

  .realised-projects__total {
    grid-column: 3/5;
    opacity: .5
  }

  @media(width<=576px) {
    .realised-projects__total {
      grid-column: 2/3;
      justify-self: end
    }
  }

  .realised-projects__all-link {
    grid-column: 8/9;
    justify-self: end;
    color: var(--primary-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .realised-projects__all-link {
      display: none
    }
  }

  .realised-projects__slider {
    grid-column: 1/-1
  }

  @media(width<=576px) {
    .realised-projects__slider {
      min-width: 0;
      width: 100%;
      overflow: visible
    }
  }

  .realised-projects__list {
    display: flex;
    flex-direction: column
  }

  @media(width<=576px) {
    .realised-projects__list {
      flex-direction: row
    }
  }

  .realised-projects__item {
    border-bottom: 1px solid rgba(34, 34, 34, .2);
    padding-block: 4rem;
    box-sizing: border-box;
    width: auto;
    height: auto
  }

  @media(width<=576px) {
    .realised-projects__item {
      border-bottom: none;
      padding-block: 0;
      width: 30rem;
      flex-shrink: 0;
      height: auto;
      margin-right: 2rem;
      display: flex;
      flex-direction: column
    }

    .realised-projects__item:last-child {
      margin-right: 0
    }
  }

  .realised-projects__btn {
    margin-top: 12rem;
    grid-column: 3/7;
    justify-self: center;
    width: 44.6rem;
    max-width: 100%
  }

  @media(width<=576px) {
    .realised-projects__btn {
      margin-top: 4rem;
      grid-column: auto;
      justify-self: stretch;
      width: auto
    }
  }
}

@layer sections {
  .realised-projects-industries {
    background-color: #fff;
    padding-top: 12rem;
    padding-bottom: 12rem
  }

  @media(width<=576px) {
    .realised-projects-industries {
      padding-top: 6rem;
      padding-bottom: 6rem
    }
  }

  .realised-projects-industries__title {
    max-width: 85rem;
    margin-bottom: 13.2rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .realised-projects-industries__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .realised-projects-industries__title {
      max-width: none;
      margin-bottom: 3rem
    }
  }

  .home-projects-download+.realised-projects-industries {
    padding-top: 14.9rem
  }

  @media(width<=576px) {
    .home-projects-download+.realised-projects-industries {
      padding-top: 4rem
    }
  }

  .realised-projects-industries__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8rem 2rem
  }

  @media(width<=576px) {
    .realised-projects-industries__list {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.6rem
    }
  }

  .realised-projects-industries+.contact-us--reference-request {
    padding-top: 3rem
  }

  @media(width<=576px) {
    .realised-projects-industries+.contact-us--reference-request {
      padding-top: 4rem
    }
  }

  .realised-projects-industries__card {
    position: relative;
    display: flex;
    overflow: hidden;
    aspect-ratio: 910/532;
    border-radius: .5rem;
    background-color: var(--text-color);
    color: #fff
  }

  .realised-projects-industries__card:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #222233a6;
    pointer-events: none
  }

  @media(width<=576px) {
    .realised-projects-industries__card {
      min-height: 22rem;
      aspect-ratio: 343/232
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .realised-projects-industries__card:hover .realised-projects-industries__image {
      transform: scale(1.04)
    }

    .realised-projects-industries__card:hover .realised-projects-industries__link {
      background-color: var(--primary-color);
      color: #fff
    }
  }

  .realised-projects-industries__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s
  }

  .realised-projects-industries__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 4rem
  }

  @media(width<=576px) {
    .realised-projects-industries__content {
      padding: 2rem
    }
  }

  .realised-projects-industries__name {
    max-width: 76.7rem;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .realised-projects-industries__name {
      max-width: none;
      font-size: 1.9rem
    }
  }

  .realised-projects-industries__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: max-content;
    max-width: 100%;
    border-radius: 4rem;
    padding: 2.2rem 3rem;
    background-color: #fff;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase;
    transition: background-color .2s, color .2s
  }

  .realised-projects-industries__link svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: currentColor;
    flex-shrink: 0
  }

  @media(width<=576px) {
    .realised-projects-industries__link {
      gap: 1rem;
      min-height: 5.2rem;
      padding: 1.6rem 2.2rem;
      font-size: 1.1rem;
      letter-spacing: .11rem
    }
  }
}

@layer sections {
  .realised-projects-industry {
    background-color: #fff;
    padding-top: 14.9rem;
    padding-bottom: 12rem
  }

  @media(width<=576px) {
    .realised-projects-industry {
      padding-top: 4rem;
      padding-bottom: 5rem
    }
  }

  .realised-projects-industry__list {
    display: flex;
    flex-direction: column;
    gap: 4rem
  }

  @media(width<=576px) {
    .realised-projects-industry__list {
      gap: 3.2rem
    }
  }

  .realised-projects-industry .pagination {
    margin-top: 12rem
  }

  @media(width<=576px) {
    .realised-projects-industry .pagination {
      margin-top: 5rem
    }
  }
}

@layer sections {
  .home-projects-download {
    background-color: var(--primary-color);
    color: #fff
  }

  .home-projects-download__content {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    padding-top: 3.8rem;
    padding-bottom: 6.1rem
  }

  @media(width<=576px) {
    .home-projects-download__content {
      grid-template-columns: 1fr;
      gap: 4rem;
      padding-top: 2rem;
      padding-bottom: 4rem
    }
  }

  @media(width<=576px) {
    .realised-projects-page+.home-projects-download .home-projects-download__content {
      gap: 2.8rem;
      padding-top: 3rem;
      padding-bottom: 3rem
    }
  }

  .home-projects-download__text {
    grid-column: 1/4;
    max-width: 67.8rem;
    font-family: var(--inter-tight);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.06rem;
    text-wrap: balance
  }

  @media(width<=576px) {
    .home-projects-download__text {
      grid-column: auto;
      max-width: none;
      font-family: var(--inter);
      font-size: 2rem;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0;
      text-wrap: initial
    }
  }

  @media(width<=576px) {
    .realised-projects-page+.home-projects-download .home-projects-download__text {
      font-size: 2rem;
      line-height: 1.2
    }
  }

  .home-projects-download__card {
    grid-column: 7/-1
  }

  @media(width<=576px) {
    .home-projects-download__card {
      grid-column: auto
    }
  }

  .home-projects-download+.contact-us--reference-request {
    padding-top: 12rem;
    padding-bottom: 15rem
  }

  @media(width<=576px) {
    .home-projects-download+.contact-us--reference-request {
      padding-top: 4rem;
      padding-bottom: 4rem
    }
  }

  @media(width<=576px) {
    .realised-projects-page+.home-projects-download .engineering-doc-card {
      min-height: 13.6rem;
      height: auto;
      aspect-ratio: auto
    }
  }
}

@layer sections {
  .realised-projects-page {
    padding-top: 16rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .realised-projects-page {
      padding-top: 10.8rem
    }
  }

  .realised-projects-page__title {
    margin-top: 3rem;
    margin-bottom: 4.4rem;
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .realised-projects-page__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .realised-projects-page__title {
      margin-top: 2rem;
      margin-bottom: 2.6rem
    }
  }

  @media(width<=576px) {
    .realised-projects-page--industry .breadcrumbs {
      display: none
    }

    .realised-projects-page--industry .realised-projects-page__title {
      margin-top: 0
    }
  }

  .realised-projects-page__intro {
    max-width: 117.6rem;
    margin-bottom: 8rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .realised-projects-page__intro {
      margin-bottom: 3.6rem;
      max-width: none;
      font-size: 1.6rem;
      letter-spacing: -.048rem
    }
  }
}

@layer sections {
  .project-detail-page {
    padding-top: 16rem;
    padding-bottom: 8rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .project-detail-page {
      padding-top: 10.8rem;
      padding-bottom: 4rem;
      overflow-x: clip
    }
  }

  .project-detail-page .breadcrumbs {
    margin-bottom: 9.8rem
  }

  @media(width<=576px) {
    .project-detail-page .breadcrumbs {
      display: none
    }
  }

  .project-detail-page__inner {
    max-width: 137.5rem;
    margin-inline: auto
  }

  .project-detail-page__title {
    margin-bottom: 9.6rem;
    color: #223;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .project-detail-page__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .project-detail-page__title {
      margin-bottom: 4rem
    }
  }

  .project-detail-article {
    color: #223
  }

  .project-detail-article>:first-child {
    margin-top: 0
  }

  .project-detail-article>:last-child {
    margin-bottom: 0
  }

  .project-detail-article>h2 {
    margin-top: 6rem;
    margin-bottom: 6rem;
    color: #223;
    font-family: var(--inter-tight);
    font-size: 4.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-wrap: balance
  }

  @media(width<=576px) {
    .project-detail-article>h2 {
      margin-top: 4rem;
      margin-bottom: 3rem;
      font-size: 2.8rem;
      letter-spacing: 0
    }
  }

  .project-detail-article>p,
  .project-detail-article>ol,
  .project-detail-article>ul {
    margin-top: 3rem;
    margin-bottom: 3rem;
    color: #223;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem;
    overflow-wrap: anywhere
  }

  @media(width<=576px) {

    .project-detail-article>p,
    .project-detail-article>ol,
    .project-detail-article>ul {
      margin-top: 2rem;
      margin-bottom: 2rem;
      font-size: 1.4rem;
      line-height: 1.3;
      letter-spacing: -.042rem
    }
  }

  .project-detail-article>:is(ol, ul) {
    display: flex;
    flex-direction: column;
    gap: .8rem
  }

  .project-detail-article>ol {
    counter-reset: project-detail-list
  }

  .project-detail-article>:is(ol, ul)>li {
    position: relative;
    padding-left: 3.3rem
  }

  @media(width<=576px) {
    .project-detail-article>:is(ol, ul)>li {
      padding-left: 2.2rem
    }
  }

  .project-detail-article>ol>li:before {
    counter-increment: project-detail-list;
    content: counter(project-detail-list) ".";
    position: absolute;
    left: 0;
    top: 0
  }

  .project-detail-article>ul>li:before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: currentColor
  }

  @media(width<=576px) {
    .project-detail-article>ul>li:before {
      left: .7rem;
      top: .6rem
    }
  }

  .project-detail-summary {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 8rem;
    margin-bottom: 8rem
  }

  @media(width<=576px) {
    .project-detail-summary {
      gap: 1rem;
      margin-top: 4rem;
      margin-bottom: 4rem
    }
  }

  .project-detail-summary__columns {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr);
    gap: 2rem
  }

  @media(width<=576px) {
    .project-detail-summary__columns {
      grid-template-columns: 1fr;
      gap: 1rem
    }
  }

  .project-detail-summary__block {
    border-radius: .5rem;
    padding: 6.4rem;
    overflow: hidden;
    color: #223
  }

  @media(width<=576px) {
    .project-detail-summary__block {
      padding: 2.4rem
    }
  }

  .project-detail-summary__block h3 {
    margin-bottom: 6.4rem;
    font-family: var(--inter-tight);
    font-size: 4.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-wrap: balance
  }

  @media(width<=576px) {
    .project-detail-summary__block h3 {
      margin-bottom: 2.4rem;
      font-size: 2.4rem;
      letter-spacing: 0
    }
  }

  .project-detail-summary__block :is(ol, ul) {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .project-detail-summary__block :is(ol, ul) {
      font-size: 1.4rem;
      line-height: 1.3;
      letter-spacing: -.042rem
    }
  }

  .project-detail-summary__block :is(ol, ul)>li {
    padding-left: 3.3rem;
    position: relative
  }

  @media(width<=576px) {
    .project-detail-summary__block :is(ol, ul)>li {
      padding-left: 2.2rem
    }
  }

  .project-detail-summary__block ol {
    counter-reset: project-summary-list
  }

  .project-detail-summary__block ol>li:before {
    counter-increment: project-summary-list;
    content: counter(project-summary-list) ".";
    position: absolute;
    left: 0;
    top: 0
  }

  .project-detail-summary__block ul>li:before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: currentColor
  }

  @media(width<=576px) {
    .project-detail-summary__block ul>li:before {
      left: .7rem;
      top: .6rem
    }
  }

  .project-detail-summary__block--completed {
    background-color: #f2f2fa
  }

  .project-detail-summary__block--problems {
    background-color: var(--primary-color);
    color: #fff
  }

  .project-detail-summary__block--problems li {
    display: flex;
    flex-direction: column
  }

  .project-detail-summary__block--problems strong {
    font-weight: 500
  }

  .project-detail-summary__block--results {
    position: relative;
    background: #070d19 url(../i/project-detail/result-bg.webp) right bottom/cover no-repeat;
    color: #fff
  }

  .project-detail-gallery {
    --simple-slider-space-between: 0rem;
    position: relative;
    width: min(100vw - var(--container-padding) * 2, var(--container-max-width));
    margin: 8rem 0 8rem 50%;
    transform: translate(-50%)
  }

  @media(width<=576px) {
    .project-detail-gallery {
      margin-top: 4rem;
      margin-bottom: 4rem
    }
  }

  .project-detail-gallery__slider {
    border: 1px solid #c2c2c8;
    border-radius: .5rem;
    overflow: hidden;
    background-color: #fff
  }

  .project-detail-gallery__list {
    list-style: none
  }

  .project-detail-gallery__item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff
  }

  .project-detail-gallery__image {
    display: block;
    width: 100%;
    aspect-ratio: 1840/930;
    object-fit: contain
  }

  @media(width<=576px) {
    .project-detail-gallery__image {
      aspect-ratio: 343/250
    }
  }

  .project-detail-gallery__navigation {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 8.5rem;
    transform: translate(-50%)
  }

  @media(width<=576px) {
    .project-detail-gallery__navigation {
      bottom: 2rem
    }
  }

  .project-detail-table {
    margin-top: 8rem;
    border: 1px solid #f2f2fa;
    border-radius: .5rem;
    overflow: hidden
  }

  @media(width<=576px) {
    .project-detail-table {
      margin-top: 3rem
    }
  }

  .project-detail-table__row {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    align-items: stretch;
    color: #223;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.088rem
  }

  .project-detail-table__row:nth-child(2n) {
    background-color: #f2f2fa
  }

  .project-detail-table__row+.project-detail-table__row {
    border-top: 1px solid #f2f2fa
  }

  @media(width<=576px) {
    .project-detail-table__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      font-size: 1.4rem;
      line-height: 1;
      letter-spacing: -.056rem
    }
  }

  .project-detail-table__row p {
    display: flex;
    align-items: center;
    min-height: 7.5rem;
    padding: 1.8rem 3.2rem;
    overflow-wrap: anywhere
  }

  @media(width<=576px) {
    .project-detail-table__row p {
      min-height: 6rem;
      padding: 1.8rem 2.4rem
    }
  }

  .project-detail-table__row p+p {
    border-left: 1px solid rgba(34, 34, 51, .14)
  }

  @media(width<=576px) {
    .project-detail-table__row p+p {
      border-left: 1px solid rgba(34, 34, 51, .14)
    }
  }

  .project-detail-page__back {
    width: max-content;
    max-width: 100%;
    margin: 8rem auto 0;
    padding-block: 2.9rem
  }

  @media(width<=576px) {
    .project-detail-page__back {
      width: 100%;
      margin-top: 4rem;
      padding-block: 2rem;
      padding-inline: 1rem
    }
  }
}

@layer sections {
  .other-projects {
    background-color: #f2f2fa;
    padding-top: 4rem;
    padding-bottom: 4rem;
    min-height: 96rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 15rem
  }

  @media(width<=576px) {
    .other-projects {
      min-height: auto;
      padding-top: 4rem;
      padding-bottom: 5rem;
      overflow: hidden;
      margin-bottom: 6rem
    }
  }

  .other-projects__top {
    margin-bottom: 11rem
  }

  @media(width<=576px) {
    .other-projects__top {
      margin-bottom: 3rem
    }
  }

  .other-projects__title {
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .other-projects__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  .other-projects__navigation {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 12rem;
    transform: translate(-50%)
  }

  @media(width<=576px) {
    .other-projects__navigation {
      position: static;
      transform: none;
      justify-content: center;
      margin-top: 3rem
    }
  }

  @media(width<=576px) {
    .other-projects__slider {
      overflow: visible
    }
  }

  .other-projects__list {
    list-style: none
  }

  .other-projects__item {
    position: relative;
    width: calc((100% - 18rem)/4);
    height: auto;
    margin-right: 6rem;
    flex-shrink: 0
  }

  .other-projects__item:not(:first-child):before {
    content: "";
    position: absolute;
    left: -3rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #2223
  }

  .other-projects__item:last-child {
    margin-right: 0
  }

  @media(width<=576px) {
    .other-projects__item {
      width: 26rem;
      margin-right: 4rem
    }

    .other-projects__item:not(:first-child):before {
      left: -2rem
    }
  }
}

@layer sections {
  .other-articles {
    background-color: #f2f2fa;
    padding-top: 4rem;
    padding-bottom: 10rem;
    overflow: hidden
  }

  @media(width<=576px) {
    .other-articles {
      padding-bottom: 6rem
    }
  }

  .other-articles__title {
    margin-bottom: 10.4rem;
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .other-articles__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .other-articles__title {
      margin-bottom: 3rem
    }
  }

  @media(width<=576px) {
    .other-articles__slider {
      overflow: visible
    }
  }

  .other-articles__list {
    list-style: none
  }

  .other-articles__item {
    position: relative;
    width: calc((100% - 18rem)/4);
    height: auto;
    margin-right: 6rem;
    flex-shrink: 0
  }

  .other-articles__item:first-child:before {
    content: none
  }

  .other-articles__item:before {
    content: "";
    position: absolute;
    left: -3rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #2223
  }

  .other-articles__item:last-child {
    margin-right: 0
  }

  @media(width<=576px) {
    .other-articles__item {
      width: min(30rem, 100vw - 4rem);
      margin-right: 2rem
    }

    .other-articles__item:before {
      content: none
    }
  }

  .other-articles__item .press-center-card {
    min-height: 58rem
  }

  @media(width<=576px) {
    .other-articles__item .press-center-card {
      min-height: auto
    }
  }

  .other-articles__item .press-center-card__title {
    margin-bottom: 0
  }

  .other-articles__navigation {
    width: max-content;
    margin: 13rem auto 0
  }

  @media(width<=576px) {
    .other-articles__navigation {
      margin-top: 4rem
    }
  }

  .other-articles__button {
    width: min(44.6rem, 100%);
    margin: 13rem auto 0
  }

  @media(width<=576px) {
    .other-articles__button {
      margin-top: 4rem
    }
  }
}

@layer sections {
  .other-categories {
    position: relative;
    z-index: 1;
    margin-top: -29.2rem;
    padding-top: 48.2rem;
    padding-bottom: 15rem;
    background-color: #f2f2fa;
    overflow: hidden
  }

  @media(width<=576px) {
    .other-categories {
      margin-top: -8rem;
      padding-top: 12rem;
      padding-bottom: 8rem
    }
  }

  .other-categories__title {
    margin-bottom: 11rem;
    color: #223;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .other-categories__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .other-categories__title {
      margin-bottom: 4rem
    }
  }

  .other-categories__slider {
    overflow: hidden
  }

  @media(width<=576px) {
    .other-categories__slider {
      overflow: visible
    }
  }

  .other-categories__list {
    list-style: none
  }

  .other-categories__item {
    position: relative;
    width: calc((100% - 18rem)/4);
    height: auto;
    margin-right: 6rem;
    flex-shrink: 0
  }

  @media(width<=576px) {
    .other-categories__item {
      width: min(30rem, 100vw - 4rem);
      margin-right: 2rem
    }
  }

  .other-categories__item:first-child:before {
    content: none
  }

  .other-categories__item:before {
    content: "";
    position: absolute;
    top: 0;
    left: -3rem;
    width: 1px;
    height: 100%;
    background-color: #2223
  }

  @media(width<=576px) {
    .other-categories__item:before {
      content: none
    }
  }

  .other-categories__item:last-child {
    margin-right: 0
  }

  .other-categories__navigation {
    width: max-content;
    margin: 13rem auto 0
  }

  @media(width<=576px) {
    .other-categories__navigation {
      margin-top: 4rem
    }
  }
}

@layer sections {
  .other-products {
    --simple-slider-space-between: 6rem;
    padding-top: 4rem;
    padding-bottom: 15rem;
    overflow: hidden;
    background-color: #f2f2fa
  }

  @media(width<=576px) {
    .other-products {
      --simple-slider-space-between: 2rem;
      padding-top: 4rem;
      padding-bottom: 7rem
    }
  }

  .other-products__title {
    margin-bottom: 11rem;
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .other-products__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .other-products__title {
      margin-bottom: 4rem
    }
  }

  .other-products__slider {
    overflow: hidden
  }

  @media(width<=576px) {
    .other-products__slider {
      overflow: visible
    }
  }

  .other-products__list {
    list-style: none
  }

  .other-products__item {
    position: relative;
    width: calc((100% - 18rem)/4);
    min-width: 0
  }

  @media(width<=576px) {
    .other-products__item {
      width: min(30rem, 100vw - var(--container-padding) * 2)
    }
  }

  .other-products__item:not(:first-child):before {
    position: absolute;
    left: -3rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #2223;
    content: ""
  }

  @media(width<=576px) {
    .other-products__item:not(:first-child):before {
      content: none
    }
  }

  .other-products .product-page-module-card {
    height: 100%
  }

  .other-products .product-page-module-card__content {
    flex: 1
  }

  .other-products .product-page-module-card__button {
    margin-top: auto
  }

  .other-products__navigation {
    width: max-content;
    margin: 13rem auto 0
  }

  @media(width<=576px) {
    .other-products__navigation {
      margin-top: 4rem
    }
  }
}

@layer sections {
  .press-center {
    background-color: #f2f2fa;
    padding-top: 4rem;
    padding-bottom: 8rem
  }

  @media(width<=576px) {
    .press-center {
      padding-top: 8rem;
      padding-bottom: 4rem
    }
  }

  .press-center--compact {
    padding-top: 4rem;
    padding-bottom: 8rem
  }

  .press-center--compact .press-center__title {
    grid-column: 1/-1;
    margin-bottom: 6rem
  }

  .press-center__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    row-gap: 0
  }

  @media(width<=576px) {
    .press-center__grid {
      display: flex;
      flex-direction: column;
      gap: 0
    }
  }

  .press-center__title {
    grid-column: 1/3;
    margin-bottom: 9rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .press-center__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  @media(width<=576px) {
    .press-center__title {
      grid-column: 1/-1;
      margin-bottom: 2.5rem;
      font-size: 3rem
    }
  }

  .press-center__controls {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    align-items: center;
    border-bottom: 1px solid rgba(34, 34, 34, .2);
    padding-bottom: 4rem;
    margin-bottom: 4rem
  }

  @media(width<=576px) {
    .press-center__controls {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 4rem
    }
  }

  .press-center__tabs {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0
  }

  @media(width<=576px) {
    .press-center__tabs {
      grid-column: auto;
      width: auto;
      flex-wrap: nowrap;
      align-items: center;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      touch-action: pan-x;
      scrollbar-width: none;
      -ms-overflow-style: none;
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      padding: 0 var(--container-padding);
      scroll-padding-left: var(--container-padding)
    }

    .press-center__tabs::-webkit-scrollbar {
      display: none
    }
  }

  .press-center__tabs-item {
    flex-shrink: 0
  }

  .press-center__tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 15rem;
    padding: 1.7rem 3rem;
    border-radius: 4rem;
    border: .4rem solid transparent;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase;
    text-decoration-line: underline;
    text-decoration-thickness: .05rem;
    text-underline-offset: .25rem
  }

  @media(width<=576px) {
    .press-center__tab-btn {
      height: 4rem;
      min-width: 10rem;
      padding: 1rem 3rem;
      border-width: .2rem;
      font-size: 1.2rem;
      letter-spacing: .12rem;
      text-underline-offset: .2rem
    }
  }

  .press-center__tab-btn.active {
    border-color: var(--primary-color);
    text-decoration: none
  }

  .press-center__tab-btn:not(.active):hover,
  .press-center__tab-btn:not(.active):focus-visible {
    color: var(--primary-color)
  }

  .press-center__panels {
    grid-column: 1/-1;
    margin-bottom: 12rem;
    position: relative
  }

  @media(width<=576px) {
    .press-center__panels {
      grid-column: auto;
      min-width: 0;
      width: 100%;
      margin-bottom: 0
    }
  }

  .press-center--compact .press-center__panels {
    margin-bottom: 0
  }

  .press-center__panel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 5;
    opacity: 0;
    visibility: hidden
  }

  .press-center__panel.active {
    position: relative;
    z-index: 10;
    opacity: 1;
    visibility: inherit
  }

  .press-center__slider {
    overflow: visible
  }

  @media(width<=576px) {
    .press-center__slider {
      min-width: 0;
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      padding: 0 var(--container-padding)
    }
  }

  .press-center__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 6rem
  }

  @media(width<=576px) {
    .press-center__list {
      display: flex;
      gap: 0
    }
  }

  .press-center__item {
    position: relative;
    height: auto
  }

  .press-center__item:not(:first-child):before {
    content: "";
    position: absolute;
    left: -3rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #2223
  }

  .press-center__item:nth-child(4n+1):before {
    content: none
  }

  @media(width<=576px) {
    .press-center__item {
      width: 30rem;
      flex-shrink: 0;
      margin-right: 2rem
    }

    .press-center__item:not(:first-child):before {
      content: none
    }

    .press-center__item:last-child {
      margin-right: 0
    }
  }

  .press-center__btn {
    grid-column: 3/7;
    justify-self: center;
    width: 44.6rem;
    max-width: 100%
  }

  @media(width<=576px) {
    .press-center__btn {
      height: 6rem;
      margin-top: 4.4rem;
      grid-column: auto;
      justify-self: stretch;
      width: 34.3rem;
      max-width: 100%
    }
  }
}

@layer sections {
  .home-videos {
    --home-videos-space-between: 2rem;
    padding-top: 4rem;
    padding-bottom: 15rem;
    overflow: hidden;
    background: linear-gradient(to bottom, #f2f2fa 0 90rem, #fff 90rem);
    color: var(--text-color)
  }

  @media(width<=576px) {
    .home-videos {
      --home-videos-space-between: 2rem;
      padding-top: 3.6rem;
      padding-bottom: 4rem;
      background: #f2f2fa
    }
  }

  .home-videos__title {
    max-width: 173rem;
    margin: 0 0 5.6rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .home-videos__title {
      width: 34.3rem;
      max-width: 100%;
      margin-bottom: 4rem;
      font-size: 2.4rem;
      line-height: 1.2
    }
  }

  .home-videos__slider {
    min-width: 0;
    overflow: visible
  }

  .home-videos__list {
    display: flex;
    list-style: none
  }

  .home-videos__item {
    flex: 0 0 auto;
    width: 137.5rem;
    height: auto
  }

  @media(width<=576px) {
    .home-videos__item {
      width: 30rem
    }
  }

  .home-videos__navigation {
    margin-top: 12rem
  }

  @media(width<=576px) {
    .home-videos__navigation {
      margin-top: 2rem
    }
  }

  .home-video-card {
    display: flex;
    flex-direction: column;
    gap: 4rem
  }

  @media(width<=576px) {
    .home-video-card {
      gap: 1.3rem
    }
  }

  .home-video-card__caption {
    margin: 0;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: #222
  }

  @media(width<=576px) {
    .home-video-card__caption {
      font-size: 1.2rem;
      font-weight: 500;
      white-space: nowrap
    }
  }

  .home-video-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1375/750;
    overflow: hidden;
    color: #fff
  }

  @media(width<=576px) {
    .home-video-card__media {
      aspect-ratio: 300/169
    }
  }

  .home-video-card__media picture {
    display: block;
    width: 100%;
    height: 100%
  }

  .home-video-card__image,
  .home-video-card__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
  }

  .home-video-card__image {
    display: block;
    object-fit: cover
  }

  .home-video-card__overlay {
    background: #0e1526bf;
    pointer-events: none
  }

  .home-video-card__play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 5.9rem;
    height: 9.1rem;
    transform: translate(-50%, -50%);
    transition: transform .2s
  }

  .home-video-card__play svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor
  }

  @media(width<=576px) {
    .home-video-card__play {
      width: 3.1rem;
      height: 4.8rem
    }
  }

  .home-video-card__media:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: .4rem
  }

  .home-videos+.contact-us {
    padding-top: 0
  }

  @media(width<=576px) {
    .home-videos+.contact-us {
      padding-top: 7.4rem
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .home-video-card__media:hover .home-video-card__play {
      transform: translate(-50%, -50%) scale(1.08)
    }
  }
}

@layer sections {
  .press-center-page {
    --press-center-hero-bottom-gap: 16.1rem;
    --press-center-hero-overlap: 33.5rem;
    padding-top: 16rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .press-center-page {
      --press-center-hero-bottom-gap: 5rem;
      --press-center-hero-overlap: 5rem;
      padding-top: 12rem
    }
  }

  .press-center-page__title {
    margin-top: 3rem;
    margin-bottom: 12.8rem;
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .press-center-page__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .press-center-page__title {
      margin-top: 2rem;
      margin-bottom: 5.6rem;
      font-size: 3.2rem;
      line-height: 1
    }
  }

  .press-center-page__hero-shell {
    position: relative;
    padding-top: 7.3rem;
    padding-bottom: var(--press-center-hero-bottom-gap);
    color: #fff
  }

  .press-center-page__hero-shell:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(124deg, #17223ceb, #091021eb), var(--primary-color)
  }

  .press-center-page__hero-shell .container {
    position: relative;
    z-index: 1
  }

  @media(width<=576px) {
    .press-center-page__hero-shell {
      padding-top: 4rem
    }
  }

  .press-center-page:has(.press-center-page__hero-image) .press-center-page__hero-shell {
    padding-bottom: calc(var(--press-center-hero-bottom-gap) + var(--press-center-hero-overlap))
  }

  .press-center-page:has(.press-center-page__hero-image) .press-center-page__hero-shell:before {
    height: calc(100% - var(--press-center-hero-bottom-gap) - var(--press-center-hero-overlap))
  }

  .press-center-page__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8rem
  }

  @media(width<=576px) {
    .press-center-page__hero {
      gap: 4rem
    }
  }

  .press-center-page__hero-image-link {
    display: block
  }

  .press-center-page__hero-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .5rem;
    margin-bottom: calc(-1 * var(--press-center-hero-overlap))
  }

  .press-center-page__hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem
  }

  @media(width<=576px) {
    .press-center-page__hero-content {
      gap: 4rem
    }
  }

  .press-center-page__hero-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4.8rem;
    width: 100%
  }

  @media(width<=576px) {
    .press-center-page__hero-top {
      align-items: center;
      justify-content: space-between;
      gap: 1.6rem
    }
  }

  .press-center-page__hero-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 96.8rem
  }

  @media(width<=576px) {
    .press-center-page__hero-tags {
      flex: 1 1 auto;
      max-width: none;
      gap: .8rem
    }
  }

  .press-center-page__hero-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6.4rem;
    width: 100%
  }

  @media(width<=576px) {
    .press-center-page__hero-main {
      gap: 3rem
    }
  }

  .press-center-page__hero-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border-radius: 5rem;
    background-color: #fff;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap
  }

  @media(width<=576px) {
    .press-center-page__hero-tag {
      padding: .8rem 1.2rem;
      font-size: 1.2rem
    }
  }

  .press-center-page__hero-date {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap
  }

  @media(width<=576px) {
    .press-center-page__hero-date {
      margin-left: auto;
      font-size: 1.2rem
    }
  }

  .press-center-page__hero-title {
    max-width: 125.5rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .press-center-page__hero-title {
      max-width: 100%;
      font-size: 2.4rem;
      line-height: 1.2
    }
  }

  .press-center-page__hero-text {
    max-width: 93rem;
    font-family: var(--inter-tight);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.044rem
  }

  @media(width<=576px) {
    .press-center-page__hero-text {
      max-width: 100%;
      font-size: 1.4rem;
      letter-spacing: -.028rem
    }
  }

  .press-center-page__hero-link {
    width: 30rem;
    border-color: #fff;
    color: #fff
  }

  @media(width<=576px) {
    .press-center-page__hero-link {
      width: 100%;
      max-width: none
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .press-center-page__hero-link:hover {
      background-color: #fff;
      color: var(--primary-color)
    }
  }

  .press-center-page-news {
    padding-top: 8rem;
    padding-bottom: 15rem;
    margin-bottom: 11rem;
    background-color: #f2f2fa
  }

  @media(width<=576px) {
    .press-center-page-news {
      padding-top: 5rem;
      padding-bottom: 7rem;
      margin-bottom: 4.8rem
    }
  }

  .press-center-page-news__filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    align-items: end
  }

  @media(width<=576px) {
    .press-center-page-news__filters {
      grid-template-columns: 1fr;
      gap: 1.6rem;
      align-items: stretch
    }
  }

  .press-center-page-news__search {
    position: relative;
    display: block
  }

  .press-center-page-news__search-input {
    width: 100%;
    min-height: 6rem;
    padding: 1.7rem 6.5rem 1.7rem 3rem;
    border: 1px solid #c2c2c8;
    border-radius: 4rem;
    background-color: transparent;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.05;
    outline: none;
    transition: border-color .2s
  }

  @media(width<=576px) {
    .press-center-page-news__search-input {
      padding-inline: 2rem 5.6rem
    }
  }

  .press-center-page-news__search-input::placeholder {
    color: #22223380;
    opacity: 1
  }

  @media(hover:hover)and (pointer:fine) {
    .press-center-page-news__search-input:hover {
      border-color: var(--text-color)
    }
  }

  .press-center-page-news__search-input:focus {
    border-color: var(--primary-color)
  }

  .press-center-page-news__search-icon {
    position: absolute;
    right: 3rem;
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-color);
    transform: translateY(-50%);
    pointer-events: none
  }

  @media(width<=576px) {
    .press-center-page-news__search-icon {
      right: 3rem;
      width: 1.5rem;
      height: 1.5rem
    }
  }

  .press-center-page-news__search-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor
  }

  .press-center-page-news__filter-field {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
  }

  @media(width<=576px) {
    .press-center-page-news__filter-field {
      gap: 1rem
    }
  }

  .press-center-page-news__filter-label {
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.05
  }

  @media(width<=576px) {
    .press-center-page-news__filter-label {
      font-size: 1.2rem
    }
  }

  .press-center-page-news__count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: 1.7rem 3rem;
    border-radius: 4rem;
    background-color: #223;
    color: #fff;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s, color .2s, opacity .2s
  }

  .press-center-page-news__count:not(:disabled):hover {
    background-color: var(--primary-color)
  }

  .press-center-page-news__count:disabled {
    visibility: hidden
  }

  @media(width<=576px) {
    .press-center-page-news__count:disabled {
      display: none
    }
  }

  .press-center-page-news__filters .select__list {
    padding-top: 1.6rem
  }

  @media(width<=576px) {
    .press-center-page-news__count {
      width: 100%
    }
  }

  .press-center-page-news__results {
    margin-top: 7.5rem
  }

  @media(width<=576px) {
    .press-center-page-news__results {
      margin-top: 3.6rem
    }
  }

  .press-center-page-news__found {
    margin-bottom: 4rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .press-center-page-news__found {
      font-size: 2rem;
      letter-spacing: -.04rem;
      margin-bottom: 2rem
    }
  }

  .press-center-page-news__empty {
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .press-center-page-news__empty {
      font-size: 2rem;
      letter-spacing: -.04rem
    }
  }

  .press-center-page-news__categories {
    margin-top: 4rem
  }

  @media(width<=576px) {
    .press-center-page-news__categories {
      margin-top: 3rem
    }
  }

  .press-center-page-news__categories-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap
  }

  @media(width<=576px) {
    .press-center-page-news__categories-list {
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      touch-action: pan-x;
      scrollbar-width: none;
      -ms-overflow-style: none;
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      padding: 0 var(--container-padding);
      scroll-padding-left: var(--container-padding)
    }

    .press-center-page-news__categories-list::-webkit-scrollbar {
      display: none
    }
  }

  .press-center-page-news__category-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 15rem;
    min-height: 6rem;
    padding: 1.7rem 3rem;
    border: .4rem solid transparent;
    border-radius: 4rem;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase;
    text-decoration-line: underline;
    text-decoration-thickness: .05rem;
    text-underline-offset: .25rem
  }

  @media(width<=576px) {
    .press-center-page-news__category-link {
      min-width: 10rem;
      min-height: 5rem;
      padding: 1.3rem 2rem;
      border-width: .2rem;
      font-size: 1.2rem;
      letter-spacing: .12rem;
      text-underline-offset: .2rem;
      flex-shrink: 0
    }
  }

  .press-center-page-news__category-link.active {
    border-color: var(--primary-color);
    text-decoration: none
  }

  .press-center-page-news__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 6rem;
    row-gap: 8rem
  }

  @media(width<=576px) {
    .press-center-page-news__list {
      grid-template-columns: 1fr;
      gap: 0
    }
  }

  .press-center-page-news__item {
    position: relative
  }

  .press-center-page-news__item:not(:nth-child(4n+1)):before {
    content: "";
    position: absolute;
    left: -3rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #2233
  }

  @media(width<=576px) {
    .press-center-page-news__item:before {
      content: none
    }

    .press-center-page-news__item:not(:last-child) {
      padding-bottom: 4rem;
      border-bottom: 1px solid rgba(34, 34, 51, .12)
    }

    .press-center-page-news__item:not(:first-child) {
      padding-top: 4rem
    }

    .press-center-page-news__item:first-child {
      padding-top: 0
    }
  }

  .press-center-page-news .pagination {
    margin-top: 13rem
  }

  @media(width<=576px) {
    .press-center-page-news .pagination {
      margin-top: 5rem
    }
  }
}

@layer sections {
  .search-page {
    padding-top: 21rem;
    padding-bottom: 6.4rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .search-page {
      padding-top: 12rem;
      padding-bottom: 4rem
    }
  }

  .search-page__title {
    margin-bottom: 9.2rem;
    color: #223;
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .search-page__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .search-page__title {
      margin-bottom: 4rem
    }
  }

  .search-page__results {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6.4rem
  }

  @media(width<=576px) {
    .search-page__results {
      gap: 3rem
    }
  }

  .search-page__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6.4rem;
    max-width: 71.5rem
  }

  @media(width<=576px) {
    .search-page__empty {
      gap: 2.4rem;
      max-width: none
    }
  }

  .search-page__empty-message {
    color: #223;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .search-page__empty-message {
      font-size: 1.4rem;
      line-height: 1.4;
      letter-spacing: -.042rem
    }
  }

  .search-page__empty-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13.5rem;
    min-height: 8rem;
    padding: 1.7rem 3rem;
    border-radius: 4rem;
    background-color: var(--primary-color);
    color: #fff;
    font-family: var(--imb-plex-sans);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.028rem;
    text-align: center;
    text-transform: uppercase;
    transition: background-color .2s, color .2s
  }

  @media(width<=576px) {
    .search-page__empty-link {
      min-width: 12.4rem;
      min-height: 5rem;
      padding: 1.6rem 2rem;
      font-size: 1.2rem;
      letter-spacing: -.024rem
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .search-page__empty-link:hover {
      background-color: #223
    }
  }

  .search-page__results-title {
    color: #223;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.12rem
  }

  @media(width<=576px) {
    .search-page__results-title {
      font-size: 2.6rem;
      font-weight: 700;
      letter-spacing: -.06rem;
      text-transform: uppercase
    }
  }

  .search-page__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem
  }

  @media(width<=576px) {
    .search-page__list {
      gap: 1.6rem;
      width: 100%
    }
  }

  .search-page__link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: #223;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.05;
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
    transition: color .2s
  }

  @media(width<=576px) {
    .search-page__link {
      align-items: flex-start;
      width: 100%;
      line-height: 1.25
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .search-page__link:hover {
      color: var(--primary-color)
    }
  }

  .search-page__link-text {
    min-width: 0
  }

  .search-page__link-icon {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    fill: currentColor
  }

  @media(width<=576px) {
    .search-page__link-icon {
      margin-top: .1rem
    }
  }
}

@layer sections {
  .documentation-page {
    padding-top: 16rem;
    padding-bottom: 4rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .documentation-page {
      padding-top: 10.4rem;
      padding-bottom: 3.2rem
    }
  }

  @media(width<=576px) {
    .documentation-page .breadcrumbs {
      display: none
    }
  }

  .documentation-page__title {
    margin-top: 3.2rem;
    color: #223;
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .documentation-page__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .documentation-page__title {
      margin-top: 0
    }
  }

  .documentation-page__sections {
    display: flex;
    flex-direction: column;
    gap: 15rem;
    margin-top: 7.4rem
  }

  @media(width<=576px) {
    .documentation-page__sections {
      gap: 6.4rem;
      margin-top: 4rem
    }
  }

  .documentation-page__section {
    display: flex;
    flex-direction: column;
    gap: 6.4rem
  }

  @media(width<=576px) {
    .documentation-page__section {
      gap: 2.4rem
    }
  }

  .documentation-page__section-title {
    color: #223;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .documentation-page__section-title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .documentation-page__section-title {
      max-width: 32rem;
      font-size: 2rem;
      line-height: 1.2
    }
  }

  .documentation-page__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem
  }

  @media(width<=576px) {
    .documentation-page__cards {
      grid-template-columns: 1fr;
      gap: 1.2rem
    }
  }

  .documentation-page__cards-item {
    min-width: 0
  }

  .documentation-page__card {
    position: relative;
    display: flex;
    min-height: 15rem;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 2rem;
    border-radius: .5rem;
    background-color: #f2f2fa;
    color: #223;
    transition: background-color .25s ease, color .25s ease
  }

  @media(width<=576px) {
    .documentation-page__card {
      min-height: 13.6rem;
      padding: 1.6rem
    }
  }

  .documentation-page__card-title {
    max-width: 40.4rem;
    padding-right: 8.8rem;
    font-family: var(--inter);
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4
  }

  @media(width<=576px) {
    .documentation-page__card-title {
      max-width: none;
      padding-right: 7.2rem;
      font-size: 1.6rem;
      line-height: 1.25
    }
  }

  .documentation-page__card-link {
    position: relative;
    z-index: 1;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  @media(width<=576px) {
    .documentation-page__card-link {
      font-size: 1.2rem
    }
  }

  .documentation-page__card-illustration {
    position: absolute;
    right: 2rem;
    bottom: 1.3rem;
    width: 5.6rem;
    height: 6.7rem;
    opacity: 0;
    transform: scale(.86);
    transform-origin: right bottom;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none
  }

  @media(width<=576px) {
    .documentation-page__card-illustration {
      right: 1.6rem;
      bottom: 1.2rem;
      width: 4.8rem;
      height: 5.8rem
    }
  }

  .documentation-page__card-illustration img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
  }

  .documentation-page__card:hover,
  .documentation-page__card:focus-visible {
    background-color: var(--primary-color);
    color: #fff
  }

  .documentation-page__card:hover .documentation-page__card-illustration,
  .documentation-page__card:focus-visible .documentation-page__card-illustration {
    opacity: 1;
    transform: scale(1)
  }
}

@layer sections {
  .system-integrators-page {
    padding-top: 16rem;
    padding-bottom: 11rem;
    background-color: #fff;
    color: #223
  }

  @media(width<=576px) {
    .system-integrators-page {
      padding-top: 10.4rem;
      padding-bottom: 3.8rem
    }
  }

  @media(width<=576px) {
    .system-integrators-page .breadcrumbs {
      font-size: 1.2rem
    }
  }

  .system-integrators-page__title {
    max-width: 164rem;
    margin-top: 3.2rem;
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .system-integrators-page__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .system-integrators-page__title {
      margin-top: 2.4rem
    }
  }

  .system-integrators-page__description {
    width: 90.5rem;
    max-width: 100%;
    margin-top: 8rem;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    color: #223
  }

  @media(width<=576px) {
    .system-integrators-page__description {
      margin-top: 2.4rem;
      font-size: 1.6rem;
      line-height: 1.25
    }
  }

  .system-integrators-page__list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 12.5rem
  }

  @media(width<=576px) {
    .system-integrators-page__list {
      gap: 3.2rem;
      margin-top: 4.8rem
    }
  }

  .system-integrators-page__item {
    border-top: 1px solid #ccc;
    padding-top: 4rem
  }

  @media(width<=576px) {
    .system-integrators-page__item {
      padding-top: 2rem
    }
  }

  .system-integrators-page__card {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    align-items: start
  }

  @media(width<=576px) {
    .system-integrators-page__card {
      display: flex;
      flex-direction: column;
      gap: 2.4rem
    }
  }

  .system-integrators-page__logo {
    display: grid;
    grid-column: 1/4;
    place-items: center;
    aspect-ratio: 678/399;
    min-width: 0;
    overflow: hidden;
    padding: 6.4rem;
    border: 1px solid #ccc;
    border-radius: .5rem
  }

  @media(width<=576px) {
    .system-integrators-page__logo {
      width: 100%;
      aspect-ratio: 16/9;
      padding: 3.2rem
    }
  }

  .system-integrators-page__logo img {
    display: block;
    width: 100%;
    max-height: 100%;
    object-fit: contain
  }

  .system-integrators-page__content {
    grid-column: 5/-1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4rem;
    align-items: flex-start
  }

  @media(width<=576px) {
    .system-integrators-page__content {
      width: 100%;
      gap: 2.4rem
    }
  }

  .system-integrators-page__text {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 4rem
  }

  @media(width<=576px) {
    .system-integrators-page__text {
      gap: 1.6rem
    }
  }

  .system-integrators-page__name {
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .system-integrators-page__name {
      font-size: 2rem;
      line-height: 1.2
    }
  }

  .system-integrators-page__copy {
    display: flex;
    width: 67.8rem;
    max-width: 100%;
    flex-direction: column;
    gap: 2rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4
  }

  @media(width<=576px) {
    .system-integrators-page__copy {
      width: 100%;
      gap: 1.4rem
    }
  }

  .system-integrators-page__link {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: .2rem
  }

  @media(hover:hover)and (pointer:fine) {
    .system-integrators-page__link:hover {
      color: #0059b3
    }
  }
}

@layer sections {
  .suppliers-page {
    background-color: #fff;
    color: #223
  }

  .suppliers-page__intro {
    padding-top: 16rem
  }

  @media(width<=576px) {
    .suppliers-page__intro {
      padding-top: 10.4rem
    }
  }

  @media(width<=576px) {
    .suppliers-page__intro .breadcrumbs {
      font-size: 1.2rem
    }
  }

  .suppliers-page__title {
    margin-top: 3.2rem;
    max-width: 164rem;
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .suppliers-page__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .suppliers-page__title {
      margin-top: 2.4rem
    }
  }

  .suppliers-page__hero {
    position: relative;
    width: 100%;
    aspect-ratio: 192/89;
    margin-top: 12rem;
    overflow: hidden;
    background-color: #223
  }

  @media(width<=576px) {
    .suppliers-page__hero {
      aspect-ratio: 4/5;
      margin-top: 4.8rem
    }
  }

  .suppliers-page__hero-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
  }

  @media(width<=576px) {
    .suppliers-page__hero-image {
      object-position: 63% center
    }
  }

  .suppliers-page__hero-shade {
    position: absolute;
    inset: 0;
    background: #22223380
  }

  .suppliers-page__hero-description {
    position: absolute;
    z-index: 1;
    top: 4rem;
    left: max(4rem, (100% - 192rem) / 2 + 4rem);
    width: 91rem;
    max-width: calc(100% - 8rem);
    font-family: var(--inter);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem;
    color: #fff
  }

  @media(width<=576px) {
    .suppliers-page__hero-description {
      top: 2rem;
      left: var(--container-padding);
      width: calc(100% - var(--container-padding) * 2);
      max-width: none;
      font-size: 1.6rem;
      line-height: 1.3;
      letter-spacing: -.02rem
    }
  }

  .suppliers-page__section-title {
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .suppliers-page__section-title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  .suppliers-documents {
    padding-block: 4rem 6.5rem;
    background-color: #f2f2fa
  }

  @media(width<=576px) {
    .suppliers-documents {
      padding-block: 4.8rem
    }
  }

  .suppliers-documents__list {
    margin-top: 11rem
  }

  @media(width<=576px) {
    .suppliers-documents__list {
      margin-top: 4rem
    }
  }

  .suppliers-documents__link {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 3.2rem;
    padding-block: 2.4rem;
    border-bottom: 1px solid #ccc;
    color: inherit
  }

  @media(width<=576px) {
    .suppliers-documents__link {
      align-items: center;
      gap: 1.6rem;
      padding-block: 2rem
    }
  }

  .suppliers-documents__link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: .4rem
  }

  @media(hover:hover)and (pointer:fine) {
    .suppliers-documents__link:hover .suppliers-page__action {
      border-color: var(--primary-color);
      background-color: var(--primary-color);
      color: #fff
    }

    .suppliers-documents__link:hover .suppliers-page__action-type {
      color: inherit
    }
  }

  .suppliers-documents__name {
    flex: 1;
    min-width: 0;
    font-family: var(--inter);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem
  }

  @media(width<=576px) {
    .suppliers-documents__name {
      font-size: 1.7rem;
      line-height: 1.25;
      letter-spacing: -.02rem
    }
  }

  .suppliers-page__action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 6rem;
    padding: 1.7rem 3rem;
    border: 1px solid rgba(34, 34, 34, .2);
    border-radius: 4rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .14rem;
    text-transform: uppercase;
    color: #222;
    transition: background-color .2s, border-color .2s, color .2s
  }

  @media(width<=576px) {
    .suppliers-page__action {
      min-height: 4.6rem;
      gap: 1rem;
      padding: 1.3rem 1.8rem;
      font-size: 1.1rem;
      letter-spacing: .08rem
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .suppliers-page__action:hover {
      border-color: var(--primary-color);
      background-color: var(--primary-color);
      color: #fff
    }
  }

  .suppliers-page__action-type {
    color: var(--primary-color);
    transition: color .2s
  }

  @media(hover:hover)and (pointer:fine) {
    .suppliers-page__action:hover .suppliers-page__action-type {
      color: inherit
    }
  }

  .suppliers-page__action-arrow {
    flex: 0 0 auto;
    fill: var(--primary-color);
    transition: fill .2s
  }

  @media(hover:hover)and (pointer:fine) {
    .suppliers-page__action:hover .suppliers-page__action-arrow {
      fill: currentcolor
    }
  }

  .suppliers-routes {
    padding-block: 15rem
  }

  @media(width<=576px) {
    .suppliers-routes {
      padding-block: 6rem
    }
  }

  .suppliers-routes__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4rem;
    margin-top: 12rem
  }

  @media(width<=576px) {
    .suppliers-routes__list {
      grid-template-columns: 1fr;
      gap: 4rem;
      margin-top: 4rem
    }
  }

  .suppliers-routes__item {
    position: relative;
    min-width: 0
  }

  .suppliers-routes__item:not(:first-child):before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2rem;
    width: 1px;
    background-color: #ccc
  }

  @media(width<=576px) {
    .suppliers-routes__item:not(:first-child):before {
      top: -2rem;
      right: 0;
      bottom: auto;
      left: 0;
      width: 100%;
      height: 1px
    }
  }

  .suppliers-route-card {
    display: flex;
    min-width: 0;
    min-height: 53.7rem;
    flex-direction: column
  }

  @media(width<=576px) {
    .suppliers-route-card {
      min-height: auto
    }
  }

  .suppliers-route-card__preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 546.667/297;
    overflow: hidden;
    border-radius: .5rem;
    background-color: #223
  }

  .suppliers-route-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease
  }

  @media(hover:hover)and (pointer:fine) {
    .suppliers-route-card__preview:hover .suppliers-route-card__image {
      transform: scale(1.025)
    }
  }

  .suppliers-route-card__title {
    margin-top: 4rem;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .suppliers-route-card__title {
      margin-top: 2rem;
      font-size: 1.8rem;
      line-height: 1.3;
      letter-spacing: -.02rem
    }
  }

  .suppliers-route-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2.4rem;
    margin-top: auto
  }

  @media(width<=576px) {
    .suppliers-route-card__actions {
      gap: 1.2rem;
      padding-top: 2.4rem
    }
  }

  @media(prefers-reduced-motion:reduce) {
    .suppliers-route-card__image {
      transition: none
    }
  }
}

@layer sections {
  .download-materials-page {
    padding-top: 16rem;
    padding-bottom: 14.5rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .download-materials-page {
      padding-top: 12rem;
      padding-bottom: 4rem
    }
  }

  @media(width<=576px) {
    .download-materials-page .breadcrumbs {
      display: none
    }
  }

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

  @media(width<=576px) {
    .download-materials-page__title {
      position: static;
      width: auto;
      height: auto;
      margin: 0 0 4rem;
      overflow: visible;
      clip: auto;
      color: var(--text-color);
      font-family: var(--inter-tight);
      font-size: 2.6rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-wrap: balance;
      text-transform: uppercase;
      white-space: normal
    }
  }

  .download-materials-page__filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    align-items: end;
    margin-top: 7.6rem
  }

  @media(width<=576px) {
    .download-materials-page__filters {
      grid-template-columns: 1fr;
      gap: 1.4rem;
      align-items: stretch;
      margin-top: 0
    }
  }

  .download-materials-page__search {
    position: relative;
    display: block
  }

  .download-materials-page__search-input {
    width: 100%;
    min-height: 6rem;
    padding: 1.7rem 6.5rem 1.7rem 3rem;
    border: 1px solid #c2c2c8;
    border-radius: 4rem;
    background-color: transparent;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.05
  }

  @media(width<=576px) {
    .download-materials-page__search-input {
      min-height: 5.6rem;
      padding-inline: 2rem 5.6rem
    }
  }

  .download-materials-page__search-input::placeholder {
    color: #22223380;
    opacity: 1
  }

  .download-materials-page__search-icon {
    position: absolute;
    right: 3rem;
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-color);
    transform: translateY(-50%);
    pointer-events: none
  }

  @media(width<=576px) {
    .download-materials-page__search-icon {
      right: 3rem;
      width: 1.5rem;
      height: 1.5rem
    }
  }

  .download-materials-page__search-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor
  }

  .download-materials-page__filter-field {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
  }

  @media(width<=576px) {
    .download-materials-page__filter-field {
      gap: 1rem
    }
  }

  .download-materials-page__filter-label {
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.05
  }

  @media(width<=576px) {
    .download-materials-page__filter-label {
      font-size: 1.2rem
    }
  }

  .download-materials-page__count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: 1.7rem 3rem;
    border-radius: 4rem;
    background-color: #223;
    color: #fff;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    text-align: center
  }

  @media(width<=576px) {
    .download-materials-page__count {
      min-height: 5.6rem;
      width: 100%;
      padding-inline: 2rem
    }
  }

  .download-materials-page__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 8rem;
    margin-top: 4.5rem
  }

  @media(width<=576px) {
    .download-materials-page__list {
      grid-template-columns: 1fr;
      row-gap: 1.6rem;
      margin-top: 3.2rem
    }
  }

  .download-materials-page__item {
    display: flex;
    min-width: 0
  }
}

@layer sections {
  .news-detail-content {
    padding-top: 12rem;
    padding-bottom: 15rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .news-detail-content {
      padding-top: 5rem;
      padding-bottom: 8rem
    }
  }

  :is(.news-detail-content, .gallery-grid):has(+.press-center-back) {
    padding-bottom: 6rem
  }

  .press-center-back {
    padding-bottom: 10rem;
    background-color: #fff
  }

  .press-center-back__link {
    width: 30rem
  }

  @media(hover:hover)and (pointer:fine) {
    .press-center-back__link:hover {
      background-color: var(--primary-color);
      color: #fff
    }
  }

  @media(width<=576px) {
    :is(.news-detail-content, .gallery-grid):has(+.press-center-back) {
      padding-bottom: 4rem
    }

    .press-center-back {
      padding-bottom: 6rem
    }

    .press-center-back__link {
      width: 100%
    }
  }

  .article-content table {
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 4rem;
    border: 1px solid #dcdfe6;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 1.2rem;
    overflow: hidden
  }

  .article-content :is(th, td) {
    padding: 1.6rem 2.4rem !important;
    border-top: 1px solid #dcdfe6;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left !important;
    vertical-align: top
  }

  .article-content tr:first-child>:is(th, td) {
    border-top: 0
  }

  .article-content :is(th, td)+:is(th, td) {
    border-left: 1px solid #dcdfe6
  }

  .article-content th {
    background-color: #f4f5f8;
    font-weight: 600
  }

  .article-content td strong {
    font-weight: 600
  }

  /* Таблицы со старого сайта: инлайновые отступы, цвет, <hr> и пустые абзацы в шапке */
  .article-content :is(th, td) :is(p, span) {
    margin: 0;
    padding: 0 !important;
    color: inherit !important;
    font: inherit
  }

  .article-content th :is(hr, p:not(:has(*))) {
    display: none
  }

  @media(width<=576px) {
    .article-content :is(th, td) {
      padding: 1.2rem 1.4rem !important;
      font-size: 1.4rem
    }
  }
}

@layer sections {
  .gallery-hero {
    padding-top: 16rem;
    padding-bottom: 13.1rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .gallery-hero {
      margin-top: 8.5rem;
      padding-top: 0;
      padding-bottom: 4rem
    }
  }

  .gallery-hero .breadcrumbs {
    margin-bottom: 3rem
  }

  @media(width<=576px) {
    .gallery-hero .breadcrumbs {
      display: none
    }
  }

  .gallery-hero__stage {
    background: url(../i/news-detail/regatta/1512515269.webp) 0 -.168px/111.146% 100.031% no-repeat, #fff;
    color: #fff
  }

  @media(width<=576px) {
    .gallery-hero__stage {
      padding-top: 4rem
    }
  }

  .gallery-hero__content {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding-top: 7.3rem
  }

  @media(width<=576px) {
    .gallery-hero__content {
      gap: 3rem;
      padding-top: 0
    }
  }

  .gallery-hero__head {
    display: flex;
    flex-direction: column;
    gap: 8rem
  }

  @media(width<=576px) {
    .gallery-hero__head {
      gap: 3.2rem
    }
  }

  .gallery-hero__media {
    width: 100%;
    aspect-ratio: 1840/900;
    margin-bottom: -13.1rem;
    border-radius: .5rem;
    overflow: hidden
  }

  @media(width<=576px) {
    .gallery-hero__media {
      aspect-ratio: 343/250;
      margin-bottom: -4rem
    }
  }

  .gallery-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center
  }

  .gallery-hero__top {
    display: flex;
    align-items: center;
    gap: 4.8rem
  }

  @media(width<=576px) {
    .gallery-hero__top {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.6rem;
      width: 100%
    }
  }

  .gallery-hero__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem
  }

  @media(width<=576px) {
    .gallery-hero__tags {
      max-width: 100%
    }
  }

  .gallery-hero__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border-radius: 5rem;
    background-color: #fff;
    color: var(--text-color);
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap
  }

  @media(width<=576px) {
    .gallery-hero__tag {
      font-size: 1.2rem
    }
  }

  .gallery-hero__date {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap
  }

  @media(width<=576px) {
    .gallery-hero__date {
      font-size: 1.2rem
    }
  }

  .gallery-hero__title {
    width: min(100%, 125.5rem);
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.24rem;
    text-wrap: balance
  }

  @media(width<=576px) {
    .gallery-hero__title {
      font-size: 3.2rem;
      line-height: 1;
      letter-spacing: -.128rem;
      overflow-wrap: anywhere
    }
  }

  .gallery-grid {
    padding-top: 15rem;
    padding-bottom: 15rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .gallery-grid {
      padding-top: 5rem;
      padding-bottom: 8rem
    }
  }

  .gallery-grid__list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    grid-auto-flow: dense
  }

  @media(width<=576px) {
    .gallery-grid__list {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }
  }

  .gallery-grid__item {
    grid-column: span 2;
    border-radius: .5rem;
    overflow: hidden;
    aspect-ratio: 1
  }

  @media(width<=576px) {
    .gallery-grid__item {
      grid-column: span 1
    }
  }

  @media(width<=576px) {
    .gallery-grid__item:nth-child(3n) {
      grid-column: 1/-1;
      aspect-ratio: 343/160
    }
  }

  .gallery-grid__item--wide {
    grid-column: span 4;
    aspect-ratio: 910/445
  }

  @media(width<=576px) {
    .gallery-grid__item--wide {
      grid-column: span 1;
      aspect-ratio: 1
    }
  }

  .gallery-card {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none
  }

  .gallery-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .gallery-grid__button {
    width: 100%;
    max-width: 44.6rem;
    margin: 12rem auto 0
  }

  @media(width<=576px) {
    .gallery-grid__button {
      max-width: 100%;
      margin-top: 5rem
    }
  }
}

@layer sections {
  .contacts-page {
    padding-top: 16rem;
    padding-bottom: 11rem;
    background-color: #fff;
    color: #223
  }

  @media(width<=576px) {
    .contacts-page {
      padding-top: 12rem;
      padding-bottom: 5rem
    }
  }

  .contacts-page__title {
    margin-top: 5rem;
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance
  }

  @media(width<=576px) {
    .contacts-page__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: uppercase
    }
  }

  @media(width<=576px) {
    .contacts-page__title {
      margin-top: 2.4rem
    }
  }

  .contacts-page__info {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 11rem
  }

  @media(width<=576px) {
    .contacts-page__info {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 4rem
    }
  }

  .contacts-page__info-item {
    display: flex;
    flex-direction: column;
    gap: 4rem
  }

  @media(width<=576px) {
    .contacts-page__info-item {
      padding: 2.4rem 0;
      border-right: 0;
      border-top: 1px solid rgba(34, 34, 51, .12);
      gap: 2rem
    }
  }

  .contacts-page__info-item:not(:first-child) {
    padding-left: 4rem;
    border-left: 1px solid rgba(34, 34, 51, .1)
  }

  @media(width<=576px) {
    .contacts-page__info-item:not(:first-child) {
      padding-left: 0;
      border-left: 0
    }
  }

  @media(width<=576px) {
    .contacts-page__info-item:first-child {
      border-top: 0;
      padding-top: 0
    }
  }

  .contacts-page__info-title {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.042rem
  }

  @media(width<=576px) {
    .contacts-page__info-title {
      font-size: 1.2rem;
      line-height: 1;
      letter-spacing: -.036rem;
      opacity: .7
    }
  }

  .contacts-page__info-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem
  }

  @media(width<=576px) {
    .contacts-page__info-content {
      gap: 1.4rem
    }
  }

  .contacts-page__info-text {
    display: block;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.066rem;
    color: inherit
  }

  @media(width<=576px) {
    .contacts-page__info-text {
      font-size: 2rem;
      letter-spacing: -.04rem
    }
  }

  a.contacts-page__info-text {
    transition: color .2s
  }

  @media(hover:hover)and (pointer:fine) {
    a.contacts-page__info-text:hover {
      color: var(--primary-color)
    }
  }

  .contacts-page__info-note {
    margin-top: -.2rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.042rem;
    opacity: .7
  }

  @media(width<=576px) {
    .contacts-page__info-note {
      margin-top: -.4rem;
      font-size: 1.2rem;
      letter-spacing: -.036rem
    }
  }

  .contacts-page__socials {
    display: flex;
    align-items: center;
    gap: 1rem
  }

  @media(width<=576px) {
    .contacts-page__socials {
      margin-top: .4rem
    }
  }

  .contacts-page__social-link {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f2f2fa;
    color: #223;
    transition: background-color .2s, color .2s
  }

  @media(width<=576px) {
    .contacts-page__social-link {
      width: 5rem;
      height: 5rem
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .contacts-page__social-link:hover {
      background-color: var(--primary-color);
      color: #fff
    }
  }

  .contacts-page__social-link svg {
    width: 100%;
    height: 100%;
    fill: currentColor
  }

  .contacts-page__map {
    position: relative;
    margin-top: 15rem;
    aspect-ratio: 192/63;
    overflow: hidden;
    background-color: #001326;
    color: #fff
  }

  @media(width<=576px) {
    .contacts-page__map {
      display: flex;
      justify-content: center;
      aspect-ratio: auto;
      margin-top: 3rem;
      padding: 2rem var(--container-padding);
      background-color: transparent;
      color: var(--primary-color)
    }
  }

  .contacts-page__map:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0000, #00000080);
    pointer-events: none
  }

  @media(width<=576px) {
    .contacts-page__map:after {
      display: none
    }
  }

  .contacts-page__map-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom
  }

  @media(width<=576px) {
    .contacts-page__map-image {
      display: none
    }
  }

  .contacts-page__map-pin {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 9rem;
    height: 9rem;
    transform: translate(-50%, -50%)
  }

  @media(width<=576px) {
    .contacts-page__map-pin {
      display: none
    }
  }

  .contacts-page__map-caption {
    display: none
  }

  @media(width<=576px) {
    .contacts-page__map-caption {
      display: none
    }
  }

  .contacts-page__map-link {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 74%;
    transform: translate(-50%);
    color: #fff;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: .4rem;
    white-space: nowrap
  }

  @media(width<=576px) {
    .contacts-page__map-link {
      position: static;
      transform: none;
      color: inherit;
      font-size: 1.4rem
    }
  }

  .contacts-page__partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12rem
  }

  @media(width<=576px) {
    .contacts-page__partner {
      width: 100%;
      margin-top: 5rem
    }
  }

  .contacts-page__partner-button {
    width: 44.6rem;
    min-height: 8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem
  }

  @media(width<=576px) {
    .contacts-page__partner-button {
      width: 100%;
      min-height: 6.4rem;
      padding-block: 2rem
    }
  }

  .contacts-page__partner.active .contacts-page__partner-button {
    background-color: var(--primary-color);
    color: #fff
  }

  .contacts-page__partner-button-icon {
    width: 1.6rem;
    height: 1.6rem;
    fill: currentColor
  }

  .contacts-page__partner.active .contacts-page__partner-button-icon {
    display: none
  }

  .contacts-page__partner-dropdown {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    min-width: 0;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .2s ease
  }

  .contacts-page__partner.active .contacts-page__partner-dropdown {
    grid-template-rows: 1fr;
    opacity: 1
  }

  .contacts-page__partner-dropdown-inner {
    width: 85rem;
    max-width: 100%;
    margin-inline: auto;
    min-height: 0;
    overflow: hidden
  }

  @media(width<=576px) {
    .contacts-page__partner-dropdown-inner {
      width: 100%
    }
  }

  .contacts-page__details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 12rem
  }

  @media(width<=576px) {
    .contacts-page__details {
      gap: 0;
      padding-top: 4rem
    }
  }

  .contacts-page__details-row {
    display: grid;
    grid-template-columns: 37.5rem minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(34, 34, 51, .1);
    font-family: var(--inter);
    font-size: 1.8rem;
    font-style: normal;
    line-height: 1.2
  }

  @media(width<=576px) {
    .contacts-page__details-row {
      display: block;
      padding-block: 1.6rem;
      font-size: 1.4rem;
      letter-spacing: -.028rem
    }
  }

  .contacts-page__details-term {
    font-weight: 500
  }

  .contacts-page__details-value {
    min-width: 0;
    margin: 0;
    font-weight: 400;
    overflow-wrap: anywhere
  }

  @media(width<=576px) {
    .contacts-page__details-value {
      margin-top: .8rem;
      color: #222233b3
    }
  }

  .contacts-page__document-card {
    min-height: 20rem;
    margin-top: 5rem;
    border-radius: .5rem;
    border: 1px solid #222233;
    padding: 2rem;
    color: #223;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    transition: border-color .2s, color .2s
  }

  @media(width<=576px) {
    .contacts-page__document-card {
      min-height: 15rem;
      margin-top: 3rem;
      padding: 1.6rem
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .contacts-page__document-card:hover {
      border-color: var(--primary-color);
      color: var(--primary-color)
    }
  }

  .contacts-page__document-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    align-self: stretch
  }

  .contacts-page__document-top {
    display: flex;
    flex-direction: column;
    gap: 2rem
  }

  .contacts-page__document-title {
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .contacts-page__document-title {
      font-size: 2rem;
      letter-spacing: -.06rem
    }
  }

  .contacts-page__document-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    opacity: .7
  }

  @media(width<=576px) {
    .contacts-page__document-meta {
      font-size: 1.2rem
    }
  }

  .contacts-page__document-download {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1
  }

  @media(width<=576px) {
    .contacts-page__document-download {
      font-size: 1.2rem
    }
  }

  .contacts-page__document-icon {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background-color: #00c8f0;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #fff
  }

  @media(width<=576px) {
    .contacts-page__document-icon {
      width: 5rem;
      height: 5rem
    }
  }

  .contacts-page__document-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor
  }
}

@layer sections {
  .it-accreditation-hero {
    padding-top: 16rem;
    background-color: #fff;
    color: #223
  }

  @media(width<=576px) {
    .it-accreditation-hero {
      padding-top: 9.4rem
    }
  }

  .it-accreditation-hero .breadcrumbs {
    margin-bottom: 3rem
  }

  @media(width<=576px) {
    .it-accreditation-hero .breadcrumbs {
      margin-bottom: 2rem
    }
  }

  .it-accreditation-hero__stage {
    --it-accreditation-image-overlap: 2.8rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 7.3rem 0 0;
    background: linear-gradient(124.83deg, #17223c, #091021), #0074e8;
    color: #fff;
    overflow: visible
  }

  @media(width<=576px) {
    .it-accreditation-hero__stage {
      --it-accreditation-image-overlap: 1.6rem;
      padding-top: 4rem
    }
  }

  .it-accreditation-hero__stage>.container {
    display: flow-root
  }

  .it-accreditation-hero__title {
    max-width: 125.5rem;
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .it-accreditation-hero__title {
      max-width: none;
      font-size: 3rem;
      line-height: 1.05;
      text-transform: uppercase
    }
  }

  .it-accreditation-hero__picture {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 8rem;
    margin-bottom: calc(var(--it-accreditation-image-overlap) * -1);
    border-radius: .5rem;
    aspect-ratio: 1840/900;
    overflow: hidden;
    background-color: #001326
  }

  @media(width<=576px) {
    .it-accreditation-hero__picture {
      margin-top: 3rem;
      border-radius: .5rem;
      aspect-ratio: 343/300
    }
  }

  .it-accreditation-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .it-accreditation-content {
    padding-top: 13.7rem;
    padding-bottom: 16rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .it-accreditation-content {
      padding-top: 5.6rem;
      padding-bottom: 5.6rem
    }
  }

  .it-accreditation-content__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 7.2rem 2rem
  }

  @media(width<=576px) {
    .it-accreditation-content__grid {
      display: flex;
      flex-direction: column;
      gap: 5rem
    }
  }

  .it-accreditation-content__article,
  .it-accreditation-details {
    grid-column: 2/8
  }

  .it-accreditation-content .article-content>p+ol {
    margin-top: 8rem
  }

  @media(width<=576px) {
    .it-accreditation-content .article-content>p+ol {
      margin-top: 4rem
    }
  }

  .it-accreditation-content .article-content :is(p, li) {
    letter-spacing: 0
  }

  .it-accreditation-details {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2rem;
    padding: 4rem;
    border-radius: .5rem;
    background-color: #f2f2fa;
    color: #223
  }

  @media(width<=576px) {
    .it-accreditation-details {
      display: flex;
      flex-direction: column;
      gap: 3rem;
      padding: 2rem
    }
  }

  .it-accreditation-details__title {
    grid-column: 1/3;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .it-accreditation-details__title {
      font-size: 2.4rem;
      line-height: 1.15
    }
  }

  .it-accreditation-details__list {
    grid-column: 4/-1;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    max-width: 63.8rem
  }

  @media(width<=576px) {
    .it-accreditation-details__list {
      gap: 2.4rem;
      max-width: none
    }
  }

  .it-accreditation-details__item {
    display: flex;
    flex-direction: column;
    gap: 1rem
  }

  .it-accreditation-details__term {
    opacity: .7;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .it-accreditation-details__term {
      font-size: 1.2rem
    }
  }

  .it-accreditation-details__value {
    margin: 0;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .it-accreditation-details__value {
      font-size: 1.6rem;
      overflow-wrap: anywhere
    }
  }
}

@layer sections {
  .contact-us {
    padding-top: 4rem;
    position: relative;
    z-index: 2
  }

  .contact-us--press-center-subscribe {
    padding-top: 15rem
  }

  .contact-us--reference-request {
    padding-top: 8rem
  }

  @media(width<=576px) {
    .contact-us {
      padding-top: 3.2rem
    }

    .contact-us--press-center-subscribe {
      padding-top: 7rem
    }

    .contact-us--reference-request {
      padding-top: 4rem
    }
  }

  .contact-us__body {
    position: relative;
    border-radius: .5rem;
    overflow: hidden
  }

  .contact-us__bg-picture {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%
  }

  .contact-us__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .contact-us__content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    padding: 4rem;
    color: #fff;
    min-height: 64rem
  }

  @media(width<=576px) {
    .contact-us__content {
      display: flex;
      flex-direction: column;
      gap: 0rem;
      padding: 4rem 2.1rem;
      min-height: auto
    }

    .contact-us--career .contact-us__content {
      padding-bottom: 8rem
    }
  }

  .contact-us--press-center-subscribe .contact-us__content {
    min-height: 33.6rem
  }

  @media(width<=576px) {
    .contact-us--press-center-subscribe .contact-us__content {
      padding-bottom: 3rem
    }
  }

  .contact-us--reference-request .contact-us__content {
    min-height: 54rem
  }

  .contact-us--reference-request .contact-us__head {
    grid-column: 1/5;
    max-width: 42.5rem;
    gap: 0
  }

  .contact-us__head {
    grid-column: 1/5;
    display: flex;
    flex-direction: column;
    gap: 4rem
  }

  @media(width<=576px) {
    .contact-us__head {
      gap: 2rem;
      display: contents
    }
  }

  .contact-us__contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
    margin-top: auto
  }

  @media(width<=576px) {
    .contact-us__contacts {
      margin: 0;
      order: 20;
      margin-top: 8rem
    }
  }

  .contact-us__contact {
    color: #fff;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%
  }

  @media(width<=576px) {
    .contact-us__contact {
      font-size: 1.4rem;
      letter-spacing: -.042rem
    }
  }

  .contact-us__title {
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance
  }

  @media(width<=576px) {
    .contact-us__title {
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0
    }
  }

  .contact-us__description {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1
  }

  @media(width<=576px) {
    .contact-us__description {
      font-family: var(--inter-tight);
      font-size: 1.4rem;
      line-height: 1.05;
      letter-spacing: -.014rem;
      text-wrap: balance;
      margin-top: 1.5rem
    }
  }

  .contact-us__form {
    grid-column: 5/-1;
    display: flex;
    flex-direction: column;
    gap: 3.2rem
  }

  @media(width<=576px) {
    .contact-us__form {
      grid-column: auto;
      gap: 0;
      margin-top: 3.2rem
    }
  }

  .contact-us--reference-request .contact-us__form {
    gap: 4rem
  }

  .contact-us__form-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    row-gap: 2rem;
    align-items: center;
    padding-block: 2.4rem;
    border-top: 1px solid rgba(255, 255, 255, .2)
  }

  @media(width<=576px) {
    .contact-us__form-row {
      gap: 2rem;
      padding-block: 2.4rem;
      display: flex;
      align-items: center;
      flex-wrap: wrap
    }
  }

  .contact-us__form-row:first-child {
    border-top: 0
  }

  .contact-us__form-row--message {
    align-items: flex-start
  }

  .contact-us__form-row--message .contact-us__form-label {
    margin-top: .48rem
  }

  @media(width<=576px) {
    .contact-us__form-row--message .contact-us__form-label {
      margin-top: .1rem
    }
  }

  .contact-us__form-label {
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.042rem
  }

  @media(width<=576px) {
    .contact-us__form-label {
      font-size: 1.2rem;
      line-height: 1;
      letter-spacing: -.036rem
    }
  }

  .contact-us__form-label--file {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: .2rem
  }

  .contact-us__form-control {
    min-width: 0
  }

  @media(width<=576px) {
    .contact-us__form-control {
      width: 30%;
      flex-grow: 1
    }
  }

  .contact-us__form-control--select {
    display: flex;
    align-items: center
  }

  .contact-us__form-input,
  .contact-us__form-textarea,
  .contact-us__form-file-value {
    color: #fff;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {

    .contact-us__form-input,
    .contact-us__form-textarea,
    .contact-us__form-file-value {
      text-align: right;
      font-size: 1.4rem;
      line-height: 1;
      letter-spacing: -.042rem
    }
  }

  .contact-us__form-control--file {
    position: relative;
    cursor: pointer
  }

  .contact-us__form-file-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
  }

  .contact-us__form-file-value {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none
  }

  .contact-us__form-file-value--placeholder {
    opacity: .3
  }

  .contact-us__form-textarea {
    height: 3lh;
    field-sizing: fixed
  }

  .contact-us__form-input::placeholder,
  .contact-us__form-textarea::placeholder {
    color: #fff;
    opacity: .3
  }

  .contact-us__select {
    width: 100%;
    color: #fff
  }

  .contact-us__select .select__button {
    min-height: auto;
    gap: 1rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #fff;
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .contact-us__select .select__button {
      justify-content: flex-end;
      gap: 1rem;
      font-size: 1.4rem;
      line-height: 1;
      letter-spacing: -.042rem
    }
  }

  .contact-us__select:not(.choice-selected) .select__button-text,
  .contact-us__form-input::placeholder {
    opacity: .3
  }

  .contact-us__select .select__arrow {
    width: 1.6rem;
    height: .9rem;
    border: 0;
    transform: none
  }

  @media(width<=576px) {
    .contact-us__select .select__arrow {
      width: 1.2rem;
      height: .675rem
    }
  }

  .contact-us__select.choice-selected .select__arrow {
    opacity: 1
  }

  .contact-us__select .select__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
    opacity: .3
  }

  .contact-us__select.choice-selected .select__arrow svg {
    opacity: 1
  }

  .contact-us__select .select__dropdown {
    top: calc(100% + 2rem);
    color: var(--text-color)
  }

  @media(width<=576px) {
    .contact-us__select .select__dropdown {
      left: auto;
      right: 0;
      width: calc(100vw - var(--container-padding) * 2 - 4.2rem);
      top: calc(100% + 2.4rem)
    }
  }

  .contact-us__select.active .select__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
  }

  .contact-us__select.active .select__arrow {
    transform: rotate(180deg)
  }

  .contact-us__select .select__option {
    color: var(--text-color)
  }

  .contact-us__select .select__option:hover,
  .contact-us__select .select__option:focus-within {
    color: #fff
  }

  .contact-us__form-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    align-items: center;
    margin-top: auto
  }

  @media(width<=576px) {
    .contact-us__form-footer {
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 2rem
    }
  }

  .contact-us__form-submit {
    max-width: 100%;
    flex-shrink: 0
  }

  @media(width<=576px) {
    .contact-us__form-submit {
      width: 100%;
      padding-block: 2.1rem;
      order: 2
    }
  }

  .contact-us--reference-request .contact-us__form-submit {
    width: 100%
  }

  .contact-us__form-policy {
    color: #ffffffb3;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -.042rem
  }

  @media(width<=576px) {
    .contact-us__form-policy {
      line-height: 1.4;
      order: 1
    }
  }

  .contact-us__form-policy-link {
    text-decoration: underline;
    text-decoration-skip-ink: none
  }

  @media(hover:hover)and (pointer:fine) {
    .contact-us__form-policy-link:hover {
      color: #fff
    }
  }

  .contact-us__form-row .validation-error {
    grid-column: 1/-1;
    margin-top: .8rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2
  }

  @media(width<=576px) {
    .contact-us__form-row .validation-error {
      flex: 0 0 100%;
      grid-column: 1/-1
    }
  }

  .contact-us__contact--phone {
    font-size: 5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.112rem;
    white-space: nowrap
  }

  @media(width<=576px) {
    .contact-us__contact--phone {
      font-size: 3rem;
      letter-spacing: -.06rem
    }
  }
}

@layer sections {
  .engineering-center {
    position: relative;
    z-index: 1;
    margin-top: -32.8rem;
    padding-top: 32.8rem;
    padding-bottom: 4rem;
    min-height: 140.5rem;
    background-color: var(--primary-color);
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column
  }

  @media(width<=576px) {
    .engineering-center {
      margin-top: -38rem;
      padding-top: 38rem;
      padding-bottom: 2.1rem;
      min-height: 93.3rem
    }
  }

  .engineering-center .container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-end
  }

  @media(width<=576px) {
    .engineering-center .container {
      justify-content: flex-start
    }
  }

  .engineering-center--compact {
    min-height: 0;
    padding-bottom: 3.2rem
  }

  .engineering-center--compact .container {
    justify-content: flex-start
  }

  .engineering-center--compact .engineering-center__top {
    margin-bottom: 0
  }

  .engineering-center__footer {
    margin-top: 4rem;
    padding-top: 2.4rem;
    border-top: 1px solid rgba(255, 255, 255, .4)
  }

  .engineering-center__footer :is(.page-footer__copyright, .page-footer__policy, .page-footer__developer) {
    color: #fffc
  }

  .engineering-center__footer .page-footer__policy {
    text-decoration: none;
    transition: color .2s
  }

  @media(hover:hover)and (pointer:fine) {
    .engineering-center__footer .page-footer__policy:hover {
      color: #fff
    }
  }

  @media(width<=576px) {
    .engineering-center--compact {
      padding-bottom: 2.4rem
    }

    .engineering-center__footer {
      margin-top: 3.2rem;
      padding-top: 2rem
    }
  }

  .engineering-center--press-center {
    margin-top: -12rem;
    padding-top: 12rem
  }

  @media(width<=576px) {
    .engineering-center--press-center {
      margin-top: -31rem;
      padding-top: 31rem
    }
  }

  .engineering-center--product-detail {
    margin-top: 0;
    padding-top: 0;
    min-height: 119.8rem
  }

  .engineering-center--without-documents {
    padding-top: 4rem;
    min-height: auto
  }

  @media(width<=576px) {
    .engineering-center--without-documents {
      padding-top: 2.1rem
    }
  }

  @media(width<=576px) {
    .engineering-center--without-documents .engineering-center__branding {
      margin-top: 0
    }
  }

  .engineering-center__top {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    border-top: 1px solid rgba(255, 255, 255, .4);
    padding-top: 4rem;
    margin-bottom: auto
  }

  @media(width<=576px) {
    .engineering-center__top {
      grid-template-columns: 1fr;
      margin-bottom: 0;
      border-top: 1px solid rgba(255, 255, 255, .4)
    }
  }

  .engineering-center__copyright {
    grid-column: 1/3;
    font-family: var(--imb-plex-sans);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.05;
    text-transform: uppercase;
    white-space: nowrap
  }

  @media(width<=576px) {
    .engineering-center__copyright {
      display: none
    }
  }

  .engineering-center__docs {
    grid-column: 5/-1
  }

  @media(width<=576px) {
    .engineering-center__docs {
      grid-column: auto
    }
  }

  .engineering-center__docs-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem
  }

  @media(width<=576px) {
    .engineering-center__docs-list {
      grid-template-columns: 1fr
    }
  }

  .engineering-center__top .engineering-doc-card__title {
    max-width: 15rem;
    letter-spacing: 0
  }

  @media(width<=576px) {
    .engineering-center__nav {
      display: none
    }
  }

  .engineering-center__nav-list {
    max-width: 91rem;
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0
  }

  .engineering-center__nav-link {
    display: block;
    text-align: center;
    color: #fff;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.06rem;
    text-transform: uppercase;
    padding-block: 2rem;
    padding-inline: 1rem;
    transition: background-color .2s, color .2s
  }

  @media(hover:hover)and (pointer:fine) {
    .engineering-center__nav-link:hover {
      background-color: #fff;
      color: var(--text-color)
    }
  }

  .engineering-center__branding {
    margin-top: 5.8rem
  }

  @media(width<=576px) {
    .engineering-center__branding {
      margin-top: 8rem
    }
  }

  .engineering-center__label {
    margin-bottom: 2rem;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .engineering-center__label {
      margin-bottom: 1rem;
      font-size: 1.2rem
    }
  }

  .engineering-center__logo {
    width: 100%;
    height: auto
  }

  @media(width<=576px) {
    .engineering-center__logo {
      max-width: 34.3rem;
      aspect-ratio: 343/30.57;
      object-fit: contain
    }
  }

  .engineering-doc-card {
    border-radius: .5rem;
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 2rem;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    aspect-ratio: 445/200;
    transition: border-color .2s
  }

  @media(width<=576px) {
    .engineering-doc-card {
      height: 15rem;
      aspect-ratio: auto
    }
  }

  @media(hover:hover)and (pointer:fine) {
    .engineering-doc-card:hover {
      border-color: #fff
    }
  }

  .engineering-doc-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    align-self: stretch
  }

  .engineering-doc-card__top {
    display: flex;
    flex-direction: column;
    gap: 1rem
  }

  .engineering-doc-card__title {
    color: #fff;
    font-family: var(--inter);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.066rem
  }

  @media(width<=576px) {
    .engineering-doc-card__title {
      font-size: 2rem;
      letter-spacing: -.06rem
    }
  }

  .engineering-doc-card__download {
    color: #fff;
    font-family: var(--inter);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1
  }

  .engineering-doc-card__icon {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background-color: #00c8f0;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #fff
  }

  .engineering-doc-card__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor
  }
}

@layer sections {
  .career-success-stories {
    margin-bottom: 15rem;
    background: #fff;
    position: relative;
    z-index: 5
  }

  @media(width<=576px) {
    .career-success-stories {
      margin-bottom: 8rem
    }
  }

  .career-success-stories .company-leadership__title {
    color: #223
  }

  .career-success-stories__navigation {
    margin-top: 15.6rem
  }

  @media(width<=576px) {
    .career-success-stories__navigation {
      margin-top: 2rem
    }
  }
}

@layer sections {
  .cooperation-hero {
    padding-top: 16rem;
    margin-bottom: 12.5rem;
    background-color: #fff;
    color: var(--text-color)
  }

  @media(width<=576px) {
    .cooperation-hero {
      padding-top: 12rem;
      margin-bottom: 6rem
    }
  }

  @media(width<=576px) {
    .cooperation-hero .breadcrumbs {
      font-size: 1.2rem
    }
  }

  .cooperation-hero__title {
    margin-top: 3.7rem;
    font-family: var(--inter-tight);
    font-size: 12rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: #223;
    text-wrap: balance
  }

  .cooperation-hero__title span {
    text-transform: uppercase
  }

  @media(width<=576px) {
    .cooperation-hero__title {
      margin-top: 2.4rem;
      font-size: 3rem
    }
  }

  .cooperation-hero__description {
    width: 90.5rem;
    max-width: 100%;
    margin-top: 8rem;
    font-family: var(--inter);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: #223
  }

  @media(width<=576px) {
    .cooperation-hero__description {
      margin-top: 2.4rem;
      font-size: 1.6rem;
      line-height: 1.25
    }
  }
}

@layer sections {
  .cooperation-types {
    margin-bottom: 15rem;
    overflow: hidden
  }

  @media(width<=576px) {
    .cooperation-types {
      margin-bottom: 5rem
    }
  }

  .cooperation-types__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8rem 2rem
  }

  @media(width<=576px) {
    .cooperation-types__list {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.6rem
    }
  }

  .cooperation-types__item {
    display: flex;
    min-width: 0
  }

  .cooperation-types__logos {
    width: 100vw;
    margin-top: 12rem;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none
  }

  @media(width<=576px) {
    .cooperation-types__logos {
      margin-top: 4rem
    }
  }

  .cooperation-types__logos.is-dragging {
    cursor: grabbing
  }

  .cooperation-types__logos-track {
    --cooperation-logos-duration: 34s;
    display: flex;
    width: max-content;
    will-change: transform;
    animation: cooperation-logos-marquee var(--cooperation-logos-duration) linear infinite
  }

  @media(width<=576px) {
    .cooperation-types__logos-track {
      --cooperation-logos-duration: 22s
    }
  }

  .cooperation-types__logos.is-marquee-ready .cooperation-types__logos-track {
    animation: none
  }

  .cooperation-types__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 18rem;
    padding-inline: 3.2rem
  }

  @media(width<=576px) {
    .cooperation-types__logo {
      height: 9rem;
      padding-inline: 1.4rem
    }
  }

  .cooperation-types__logo img {
    display: block;
    width: var(--logo-width);
    height: auto;
    pointer-events: none
  }

  @media(width<=576px) {
    .cooperation-types__logo img {
      width: calc(var(--logo-width) * .56)
    }
  }

  @keyframes cooperation-logos-marquee {
    0% {
      transform: translate(0)
    }

    to {
      transform: translate(-50%)
    }
  }
}

@layer sections {
  .pages-list {
    padding-top: 16rem;
    padding-bottom: 10rem;
    background-color: #fff
  }

  @media(width<=576px) {
    .pages-list {
      padding-top: 11rem;
      padding-bottom: 5rem
    }
  }

  .pages-list__head {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2rem;
    align-items: end;
    margin-bottom: 6rem
  }

  @media(width<=576px) {
    .pages-list__head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.6rem;
      margin-bottom: 3rem
    }
  }

  .pages-list__count {
    grid-column: 1/3;
    color: #2222228f;
    font-family: var(--ibm-plex-mono);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase
  }

  @media(width<=576px) {
    .pages-list__count {
      font-size: 1.2rem
    }
  }

  .pages-list__title {
    grid-column: 3/-1;
    color: var(--text-color);
    font-family: var(--inter-tight);
    font-size: 6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.24rem;
    text-wrap: balance
  }

  @media(width<=576px) {
    .pages-list__title {
      font-size: 2.6rem;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -.06rem;
      text-transform: uppercase
    }
  }

  .pages-list__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem
  }

  @media(width<=576px) {
    .pages-list__items {
      grid-template-columns: 1fr;
      gap: .8rem
    }
  }

  .pages-list__item {
    min-width: 0
  }

  .pages-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 7.2rem;
    gap: 2rem;
    padding: 2rem 2.4rem;
    border: 1px solid rgba(34, 34, 34, .14);
    border-radius: .8rem;
    color: var(--text-color)
  }

  @media(width<=576px) {
    .pages-list__link {
      align-items: flex-start;
      flex-direction: column;
      min-height: auto;
      gap: .8rem;
      padding: 1.6rem
    }
  }

  @media(hover:hover) {
    .pages-list__link:hover {
      border-color: var(--primary-color);
      color: var(--primary-color)
    }
  }

  .pages-list__name {
    min-width: 0;
    font-family: var(--inter);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.2
  }

  @media(width<=576px) {
    .pages-list__name {
      font-size: 1.6rem
    }
  }

  .pages-list__url {
    flex-shrink: 0;
    color: #2222228f;
    font-family: var(--ibm-plex-mono);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2
  }

  @media(width<=576px) {
    .pages-list__url {
      font-size: 1.2rem
    }
  }

  .pages-list__link:hover .pages-list__url {
    color: currentColor
  }
}

@layer utilities {

  body.menu-open,
  body.modal-open {
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    overscroll-behavior: none
  }
}