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

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

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl {
  margin: 0;
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

h1,
h2,
h3,
p,
li,
a {
  overflow-wrap: break-word;
}

/* Фокус. Браузерное кольцо снимаем везде, взамен — своё, в цветах макета.
   :focus-visible срабатывает только при управлении с клавиатуры: мышью
   подсветка не появляется, а таб-навигация остаётся видимой. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid #91a5ba;
  outline-offset: 3px;
}

/* У полей ввода вместо кольца подсвечиваем рамку — она уже часть макета. */
.field input:focus,
.field textarea:focus {
  border-color: #91a5ba;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: #91a5ba;
  box-shadow: 0 0 0 1px #91a5ba;
}

/* Радиокнопки и чекбоксы кольцо сохраняют — рамка у них слишком мелкая. */
.choice input:focus-visible {
  outline: 2px solid #91a5ba;
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: 1400px;
  padding: 0 35px;
  margin: 0 auto;
}

.h1 {
  font-size: 100px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.h2 {
  font-size: 70px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.h3 {
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.h4 {
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.h5 {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}

.header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.4s ease;
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12.5px);
  border-bottom: 1px solid rgba(24, 29, 44, 0.08);
  transition: all 0.4s ease;
}

.header.is-scrolled::before {
  transition: all 0.4s ease;
  opacity: 1;
}

.header.is-menu.is-scrolled::before {
  background: #fff;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.header.is-hidden {
  transition: all 0.4s ease;
  transform: translateY(-100%);
}

.header.is-scrolled .header-search,
.header.is-scrolled .header-lang {
  transition: all 0.2s ease;
  background: none;
  border-color: transparent;
  backdrop-filter: none;
}

.header.is-scrolled .header-search svg path {
  transition: all 0.2s ease;
  stroke: #181d2c;
}

.header.is-scrolled .header-search:hover {
  transition: all 0.2s ease;
  background: #91a5ba;
  border-color: transparent;
}

.header.is-scrolled .header-search:hover svg path {
  transition: all 0.2s ease;
  stroke: #fff;
}

.header-inner {
  position: relative;
  height: 85px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header .header-burger {
  flex: 0 0 auto;
  height: 85px;
  width: 85px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #91a5ba;
  transition: all 0.2s ease;
}

.header .header-burger rect {
  transform-box: fill-box;
  transform-origin: center;
  transition: all 0.2s ease;
}

.header .header-burger:hover {
  transition: all 0.2s ease;
  background: #181d2c;
}

.header .header-burger:hover rect:last-child {
  transition: all 0.2s ease;
  width: 35px;
}

.header-logo img {
  position: relative;
  top: 5px;
}

.header .header-r {
  flex: 0 0 auto;
  display: flex;
}

.header .header-search svg path {
  transition: all 0.2s ease;
}

.header .header-search {
  flex: 0 0 auto;
  height: 85px;
  width: 85px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.header .header-search:hover {
  transition: all 0.2s ease;
  background: #91a5ba;
}

.header .header-lang {
  flex: 0 0 auto;
  transition: all 0.2s ease;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 85px;
  color: #181d2c;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.header .header-lang:hover {
  transition: all 0.2s ease;
  background: #91a5ba;
  color: #fff;
}

.header .header-search-bar {
  height: 85px;
  width: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #91a5ba;
  transition: all 0.4s ease;
}

.header.is-search .header-search-bar {
  transition: all 0.4s ease;
  width: calc(100% - 170px);
  padding: 0 25px 0 88px;
}

.header .header-search-field {
  height: 56px;
  width: 100%;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.header .header-search-field > svg {
  flex: 0 0 auto;
  opacity: 0.5;
}

.header .header-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.header .header-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.header .header-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.header .header-search-close {
  flex: 0 0 auto;
  width: 15px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.header .header-search-close:hover {
  transition: all 0.2s ease;
  opacity: 0.5;
}

.header .header-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  transition-delay: 0.2s;
}

.header.is-search .header-logo,
.header.is-menu .header-logo {
  transition: all 0.4s ease;
  transition-delay: 0s;
  transform: translate(-50%, calc(-50% - 85px));
  opacity: 0;
}

.header.is-search .header-search {
  transition: all 0.4s ease;
  width: 0;
  opacity: 0;
  border-width: 0;
}

.mp .section-1 {
  display: flex;
  min-height: 750px;
  background:
    linear-gradient(
      0deg,
      rgba(145, 165, 186, 0.25) 0%,
      rgba(145, 165, 186, 0.25) 100%
    ),
    var(--hero-image, none) lightgray 50% / cover no-repeat;
  background-blend-mode: overlay, normal;
  padding-top: 94px;
}

.mp .section-1 .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mp .section-1 h1 {
  text-indent: 121px;
  color: #181d2c;
  font-size: 120px;
  font-weight: 400;
  line-height: 140px;
  width: min-content;
}

.mp .section-1 h3 {
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-align: left;
  max-width: 310px;
  width: 100%;
  margin-top: 90px;
  align-self: flex-end;
}

.mp .section-1 a {
  display: flex;
  align-items: center;
  gap: 20px;
  align-self: flex-end;
  margin-top: 94px;
  transition: all 0.2s ease;
}

.mp .section-1 a span {
  transition: all 0.2s ease;
  color: #181d2c;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.mp .section-1 a .arrow-line {
  transform-box: fill-box;
  transform-origin: center;
  transition: all 0.2s ease;
}

.mp .section-1 a .arrow-tip {
  transition: all 0.2s ease;
}

.mp .section-1 a:hover span {
  transition: all 0.2s ease;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.mp .section-1 a:hover .arrow-line {
  transition: all 0.2s ease;
  transform: scaleY(1.42945);
}

.mp .section-1 a:hover .arrow-tip {
  transition: all 0.2s ease;
  transform: translateY(5px);
}

.header .header-burger svg {
  overflow: visible;
}

.header.is-menu .header-burger rect {
  transition: all 0.2s ease;
  width: 35px;
}

.header.is-menu .header-burger rect:first-child {
  transform: translateY(4.75px) rotate(45deg);
}

.header.is-menu .header-burger rect:last-child {
  transform: translateY(-4.75px) rotate(-45deg);
}

body.is-locked {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.modal-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: rgba(24, 29, 44, 0.3);
  transition: all 0.4s ease;
}

.modal-overlay.is-open::before {
  transition: all 0.4s ease;
  opacity: 1;
}

.modal-overlay.is-open {
  transition: all 0.4s ease;
  visibility: visible;
}

.modal-overlay-inner {
  position: relative;
  height: 100%;
}

.fullscreen-menu {
  width: 998px;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 85px 34px;
  display: grid;
  grid-template-columns: 475px 1fr;
  align-content: safe center;
  align-items: end;
  position: relative;
  background: #fff;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.modal-overlay.is-open .fullscreen-menu {
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: 0.1s;
  clip-path: inset(0 0 0 0);
}

.fullscreen-menu .fullscreen-menu-info {
  order: -1;
}

.fullscreen-menu .fullscreen-menu-logo {
  display: block;
  width: 270px;
  margin-bottom: 84px;
}

.fullscreen-menu .fullscreen-menu-logo img {
  display: block;
  width: 100%;
}

.fullscreen-menu .fullscreen-menu-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.fullscreen-menu .fullscreen-menu-contacts-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 21px;
}

.fullscreen-menu .fullscreen-menu-address {
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.fullscreen-menu .fullscreen-menu-phone {
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 38px;
  transition: color 0.2s ease;
}

.fullscreen-menu .fullscreen-menu-phone:hover {
  transition: color 0.2s ease;
  color: #91a5ba;
}

.fullscreen-menu .fullscreen-menu-hours {
  max-width: 325px;
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.fullscreen-menu .fullscreen-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.fullscreen-menu .fullscreen-menu-nav a {
  color: #181d2c;
  font-size: 51px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
  transition: all 0.2s ease;
}

.fullscreen-menu .fullscreen-menu-nav a:hover {
  color: #91a5ba;
}

.mp .section-2 .top {
  background: linear-gradient(90deg, #91a5ba -2.72%, #fff 114.56%);
  padding: 56px 0 57px 0;
}

.mp .section-2 .top .r1 {
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
  margin-bottom: 32px;
}

.mp .section-2 .top .r2 {
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.mp .section-2 .bottom {
  padding-top: 378px;
  background-image: var(--section-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mp .section-2 .bottom .blur-content {
  background: rgba(107, 123, 142, 0.3);
  backdrop-filter: blur(12.5px);
}

.mp .section-2 .bottom .blur-content .blur-content-inner {
  padding: 30px 0 38px 0;
  display: grid;
  grid-template-columns: 473px 1fr;
  gap: 20px;
}

.mp .section-2 .bottom .blur-content .c1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 17px;
  padding-bottom: 3px;
}

.mp .section-2 .bottom .blur-content .c1 a {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.mp .section-4 .blur-content .c1 a {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.mp .section-2 .bottom .blur-content .c1 a span {
  transition: all 0.2s ease;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.mp .section-4 .blur-content .c1 a span {
  transition: all 0.2s ease;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.mp .section-2 .bottom .blur-content .c1 a .arrow-line {
  transform-box: fill-box;
  transform-origin: left center;
  transition: all 0.2s ease;
}

.mp .section-4 .blur-content .c1 a .arrow-line {
  transform-box: fill-box;
  transform-origin: left center;
  transition: all 0.2s ease;
}

.mp .section-2 .bottom .blur-content .c1 a .arrow-tip {
  transition: all 0.2s ease;
}

.mp .section-4 .blur-content .c1 a .arrow-tip {
  transition: all 0.2s ease;
}

.mp .section-2 .bottom .blur-content .c1 a:hover span {
  transition: all 0.2s ease;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.mp .section-4 .blur-content .c1 a:hover span {
  transition: all 0.2s ease;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.mp .section-2 .bottom .blur-content .c1 a:hover .arrow-line {
  transition: all 0.2s ease;
  transform: scaleX(1.4652);
}

.mp .section-4 .blur-content .c1 a:hover .arrow-line {
  transition: all 0.2s ease;
  transform: scaleX(1.4652);
}

.mp .section-2 .bottom .blur-content .c1 a:hover .arrow-tip {
  transition: all 0.2s ease;
  transform: translateX(10px);
}

.mp .section-4 .blur-content .c1 a:hover .arrow-tip {
  transition: all 0.2s ease;
  transform: translateX(10px);
}

.mp .section-2 .bottom .blur-content .c2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mp .section-2 .bottom .blur-content .c2 .r1 {
  color: #fff;
  font-size: 120px;
  font-style: normal;
  font-weight: 400;
  line-height: 120px;
}

.mp .section-2 .bottom .blur-content .c2 .r2 {
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}

.mp .section-3 .top {
  padding-top: 92px;
}

.mp .section-3 .top .c1 {
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.mp .section-3 .top .c2 {
  max-width: 571px;
  margin: 32px 0 0 493px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.mp .section-3 .middle {
  margin-top: 79px;
  border-bottom: 1px solid rgba(145, 165, 186, 0.35);
}

.mp .section-3 .middle .item {
  height: 293px;
  padding: 0 max(35px, calc((100% - 1330px) / 2));
  border-top: 1px solid rgba(145, 165, 186, 0.35);
  display: grid;
  grid-template-columns: 473px 1fr;
  gap: 20px;
}

.mp .section-3 .middle .item .c1 {
  margin-left: -35px;
  height: 100%;
  overflow: hidden;
  display: flex;
  border-right: 1px solid rgba(145, 165, 186, 0.35);
}

.mp .section-3 .middle .item .c1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp .section-3 .middle .item .c2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.mp .section-3 .middle .item .c2 .r1 {
  color: #181d2c;
  font-size: 70px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.mp .section-3 .middle .item .c2 .r2 {
  color: #91a5ba;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.mp .section-3 .bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 55px 35px 120px 528px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.mp .section-4 {
  padding-top: 464px;
  background-image: var(--section-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mp .section-4 .blur-content {
  border-top: 1px solid rgba(145, 165, 186, 0.4);
  background: rgba(107, 123, 142, 0.3);
  backdrop-filter: blur(12.5px);
}

.mp .section-4 .blur-content .blur-content-inner {
  padding: 42px 0 41px 0;
  display: grid;
  grid-template-columns: 473px 1fr;
  gap: 20px;
}

.mp .section-4 .blur-content .c1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mp .section-4 .blur-content .c2 {
  max-width: 660px;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}

.mp .section-5 .top {
  padding: 48px 0 76px 0;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.mp .section-5 .top .r1 {
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.mp .section-5 .top .r2 {
  margin-top: 32px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.mp .section-5 .list {
  max-width: 1400px;
  margin: 0 auto;
}

.mp .section-5 .list .item {
  position: relative;
  height: 244px;
  display: grid;
  align-items: center;
}

.mp .section-5 .list .item > * {
  grid-area: 1 / 1;
}

.mp .section-5 .list .item:hover {
  z-index: 1;
}

.mp .section-5 .list .item .c1 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 max(0px, calc((100vw - 1400px) / 2));
  height: 244px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  border-top: 1px solid rgba(145, 165, 186, 0.35);
  border-bottom: 1px solid rgba(145, 165, 186, 0.35);
  transition: all 0.3s ease;
}

.mp .section-5 .list .item:hover .c1 {
  transition: all 0.3s ease;
  height: 280px;
  margin-block: -18px;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

/* В макете кадр всегда 279px и выступает за строку сверху и снизу,
   меняются только ширина и вылет вправо. */
.mp .section-5 .list .item .c1 img {
  flex: 0 0 auto;
  height: 279px;
  object-fit: cover;
  object-position: bottom;
}

.mp .section-5 .list .item-1 .c1 img {
  width: 808px;
  margin-right: -35px;
  object-position: 50% calc(100% - 24px);
}

.mp .section-5 .list .item-2 .c1 img {
  width: 716px;
  margin-right: 134px;
  object-position: top;
}

.mp .section-5 .list .item-3 .c1 img {
  width: 841px;
  margin-right: -36px;
  object-position: center;
}

.mp .section-5 .list .item .c2 {
  padding-left: 35px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  transition: all 0.3s ease;
}

.mp .section-5 .list .item:hover .c2 {
  transition: all 0.3s ease;
  padding-left: 105px;
}

.mp .section-5 .list .item .c2 .r1 {
  flex: 0 0 auto;
  width: 94px;
  color: #91a5ba;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  transition: all 0.3s ease;
}

.mp .section-5 .list .item:hover .c2 .r1 {
  transition: all 0.3s ease;
  color: #fff;
}

.mp .section-5 .list .item .c2 .r2 {
  width: 324px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mp .section-5 .list .item .c2 .t1 {
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.mp .section-5 .list .item .c2 .t2 {
  color: #91a5ba;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  transition: all 0.3s ease;
}

.mp .section-5 .list .item:hover .c2 .t2 {
  transition: all 0.3s ease;
  color: #181d2c;
}

.modal-overlay-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 998px;
  max-width: 100%;
  background: #91a5ba;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: 0.1s;
}

.modal-overlay.is-open .modal-overlay-inner::before {
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: 0s;
  clip-path: inset(0 0 0 0);
}

.fullscreen-menu .fullscreen-menu-nav a {
  transform: translateX(-48px);
  transition:
    transform 0s ease 0.7s,
    color 0.2s ease;
}

.modal-overlay.is-open .fullscreen-menu .fullscreen-menu-nav a {
  transform: translateX(0);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) var(--delay),
    color 0.2s ease;
}

.modal-overlay.is-open .fullscreen-menu .fullscreen-menu-nav a:nth-child(1) {
  --delay: 0.42s;
}
.modal-overlay.is-open .fullscreen-menu .fullscreen-menu-nav a:nth-child(2) {
  --delay: 0.47s;
}
.modal-overlay.is-open .fullscreen-menu .fullscreen-menu-nav a:nth-child(3) {
  --delay: 0.52s;
}
.modal-overlay.is-open .fullscreen-menu .fullscreen-menu-nav a:nth-child(4) {
  --delay: 0.57s;
}
.modal-overlay.is-open .fullscreen-menu .fullscreen-menu-nav a:nth-child(5) {
  --delay: 0.62s;
}
.modal-overlay.is-open .fullscreen-menu .fullscreen-menu-nav a:nth-child(6) {
  --delay: 0.67s;
}
.modal-overlay.is-open .fullscreen-menu .fullscreen-menu-nav a:nth-child(7) {
  --delay: 0.72s;
}

.fullscreen-menu .fullscreen-menu-info {
  transform: translateX(-32px);
  transition: transform 0s ease 0.7s;
}

.modal-overlay.is-open .fullscreen-menu .fullscreen-menu-info {
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .fullscreen-menu,
  .modal-overlay-inner::before,
  .fullscreen-menu .fullscreen-menu-nav a,
  .fullscreen-menu .fullscreen-menu-info,
  .mp .section-8 .track .item {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
}

.mp .section-6 {
  padding-top: 464px;
  background-image: var(--section-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mp .section-6 .blur-content {
  border-top: 1px solid rgba(145, 165, 186, 0.4);
  background: rgba(107, 123, 142, 0.3);
  backdrop-filter: blur(12.5px);
}

.mp .section-6 .blur-content .blur-content-inner {
  padding: 42px 0 41px 0;
  display: grid;
  grid-template-columns: 473px 1fr;
  gap: 20px;
}

.mp .section-6 .blur-content .c1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mp .section-6 .blur-content .c2 {
  max-width: 660px;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}

.mp .section-6 .blur-content .c1 a {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.mp .section-6 .blur-content .c1 a span {
  transition: all 0.2s ease;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.mp .section-6 .blur-content .c1 a .arrow-line {
  transform-box: fill-box;
  transform-origin: left center;
  transition: all 0.2s ease;
}

.mp .section-6 .blur-content .c1 a .arrow-tip {
  transition: all 0.2s ease;
}

.mp .section-6 .blur-content .c1 a:hover span {
  transition: all 0.2s ease;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.mp .section-6 .blur-content .c1 a:hover .arrow-line {
  transition: all 0.2s ease;
  transform: scaleX(1.4652);
}

.mp .section-6 .blur-content .c1 a:hover .arrow-tip {
  transition: all 0.2s ease;
  transform: translateX(10px);
}

.mp .section-7 .top {
  padding-top: 48px;
}

.mp .section-7 .top .r1 {
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.mp .section-7 .top .r2 {
  max-width: 690px;
  margin-top: 32px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.mp .section-7 .bottom {
  padding: 48px 0 120px 0;
}

.mp .section-7 .accordion {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.mp .section-7 .accordion .item {
  position: relative;
  display: block;
  width: 100%;
  height: 110px;
  overflow: hidden;
  padding: 0 max(35px, calc((100% - 1330px) / 2));
  border-top: 1px solid rgba(145, 165, 186, 0.35);
  font-family: inherit;
  text-align: left;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.mp .section-7 .accordion .item.is-active {
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  height: 201px;
}

.mp .section-7 .accordion .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
  transition: opacity 0.45s ease;
}

.mp .section-7 .accordion .item.is-active::before {
  transition: opacity 0.45s ease;
  opacity: 1;
}

.mp .section-7 .accordion .item .c1 {
  position: relative;
  width: 690px;
  margin-left: auto;
  padding-top: 33px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.mp .section-7 .accordion .item .r1 {
  flex: 0 0 auto;
  width: 94px;
  height: 45px;
  display: flex;
  align-items: center;
  color: #91a5ba;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.mp .section-7 .accordion .item .r2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mp .section-7 .accordion .item .t1 {
  height: 45px;
  display: flex;
  align-items: center;
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.mp .section-7 .accordion .item .t2 {
  max-width: 453px;
  opacity: 0;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  transition: opacity 0.25s ease;
}

.mp .section-7 .accordion .item.is-active .t2 {
  transition: opacity 0.35s ease 0.15s;
  opacity: 1;
}

.mp .section-7 .accordion .media {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(max(35px, (100% - 1330px) / 2) + 233px);
  width: 334px;
  height: 315px;
  overflow: hidden;
  display: grid;
  pointer-events: none;
  transform: translateY(calc(var(--active, 0) * 110px));
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.mp .section-7 .accordion .media img {
  grid-area: 1 / 1;
  width: 473px;
  height: 315px;
  margin-left: -69px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.mp .section-7 .accordion .media img.is-active {
  transition: opacity 0.45s ease;
  opacity: 1;
}

.mp .section-8 {
  padding: 88px 0 66px 0;
  background: #f4f6f8;
}

.mp .section-8 .top {
  max-width: 640px;
  margin-bottom: 50px;
}

.mp .section-8 .top .r1 {
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

/* Лента уходит за правый край экрана, и она же контейнер прокрутки:
   тачпадом и пальцем листается нативно. К границам слайдов её
   доводит JS: при mandatory-snap конец ленты становится недостижим,
   потому что последнему слайду уже не встать началом к левому краю. */
.mp .section-8 .viewport {
  margin-right: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  margin-bottom: -40px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mp .section-8 .viewport::-webkit-scrollbar {
  display: none;
}

.mp .section-8 .track {
  display: flex;
  align-items: flex-start;
  gap: 33px;
  /* Карточки выезжают снизу вверх — запас снизу нужен, чтобы их не
     подрезал край контейнера прокрутки. На поток он не влияет:
     ровно столько же снимает отрицательный отступ у .viewport. */
  padding-bottom: 40px;
}

.mp .section-8 .track .item {
  flex: 0 0 auto;
  width: 691px;
  display: flex;
  flex-direction: column;
  gap: 31px;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Карточки выезжают по очереди, номер по порядку проставляет JS. */
.mp .section-8.is-visible .track .item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 0.09s);
}

.mp .section-8 .track .item .c1 {
  width: 100%;
  height: 292px;
  overflow: hidden;
}

.mp .section-8 .track .item .c1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mp .section-8 .track .item:hover .c1 img {
  transform: scale(1.05);
}

.mp .section-8 .track .item .c2 {
  display: flex;
  align-items: flex-end;
  gap: 91px;
}

.mp .section-8 .track .item .r1 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.mp .section-8 .track .item .d1 {
  color: #181d2c;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: 65px;
}

.mp .section-8 .track .item .d2 {
  color: #91a5ba;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.mp .section-8 .track .item .r2 {
  width: 407px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  transition: all 0.2s ease;
}

.mp .section-8 .track .item:hover .r2 {
  transition: all 0.2s ease;
  color: #e96565;
}

.mp .section-8 .bottom {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mp .section-8 .bottom .all {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mp .section-8 .bottom .all span {
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.mp .section-8 .bottom .all .arrow-line {
  transform-box: fill-box;
  transform-origin: left center;
  transition: all 0.2s ease;
}

.mp .section-8 .bottom .all .arrow-tip {
  transition: all 0.2s ease;
}

.mp .section-8 .bottom .all:hover span {
  transition: all 0.2s ease;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.mp .section-8 .bottom .all:hover .arrow-line {
  transition: all 0.2s ease;
  transform: scaleX(1.4652);
}

.mp .section-8 .bottom .all:hover .arrow-tip {
  transition: all 0.2s ease;
  transform: translateX(10px);
}

.mp .section-8 .nav {
  display: flex;
  gap: 17px;
}

.mp .section-8 .nav button {
  width: 77px;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.2s ease;
}

.mp .section-8 .nav .prev svg {
  transform: scaleX(-1);
}

.mp .section-8 .nav button:disabled {
  cursor: default;
  opacity: 0.5;
}

.mp .section-8 .nav button:not(:disabled):hover {
  transition: all 0.2s ease;
  background: #91a5ba;
}

.mp .section-8 .nav button:not(:disabled):hover path {
  transition: all 0.2s ease;
  fill: #fff;
}

.mp .section-8 .nav button path {
  transition: all 0.2s ease;
}

.footer {
  padding: 17px 0 26px 0;
  background: #fff;
  box-shadow: 0 4px 76.5px 0 rgba(107, 123, 142, 0.19);
}

.footer .row-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.footer .row-1 a {
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  transition: all 0.2s ease;
}

.footer .row-1 a:hover {
  transition: all 0.2s ease;
  color: #91a5ba;
}

.footer .row-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 150px;
}

.footer .row-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.footer .row-3 .phone {
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  transition: all 0.2s ease;
}

.footer .row-3 .phone:hover {
  transition: all 0.2s ease;
  color: #91a5ba;
}

.footer .row-3 .email {
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  transition: all 0.2s ease;
}

.footer .row-3 .email:hover {
  transition: all 0.2s ease;
  color: #91a5ba;
}

.footer .row-4 {
  border-top: 1px solid rgba(145, 165, 186, 0.4);
  margin-top: 20px;
}

.footer .row-4-inner {
  padding-top: 12px;
  display: grid;
  grid-template-columns: 358px 550px 150px 1fr;
}

.footer .row-4-inner * {
  color: #91a5ba;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

.footer .row-4 .c4 {
  text-align: right;
}

.footer .row-4 a {
  transition: all 0.2s ease;
}

.footer .row-4 a:hover {
  text-decoration: underline;
  transition: all 0.2s ease;
}

.cookie {
  position: fixed;
  z-index: 9;
  left: var(--pad);
  bottom: 0;
  width: min(582px, calc(100% - var(--pad) * 2));
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12.5px);
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.cookie[hidden] {
  display: none;
}

.cookie.is-open {
  transition: transform 0.4s ease;
  transform: translateY(0);
}

.cookie-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 29px;
  padding: 16px 31px;
}

.cookie-text {
  color: #181d2c;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

.cookie-text a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  transition: color 0.2s ease;
}

.cookie-text a:hover {
  transition: color 0.2s ease;
  color: #91a5ba;
}

.cookie-accept {
  flex: 0 0 auto;
  width: 127px;
  padding: 14.68px 22px;
  background: #91a5ba;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 14.68px;
  text-align: center;
  transition: background 0.2s ease;
}

.cookie-accept:hover {
  transition: background 0.2s ease;
  background: #181d2c;
}

/* ==================================================================
   О компании
   ================================================================== */

.ab {
  /* Правая колонка макета: 628px от левого края макета шириной 1470. */
  --col: 42.4%;
}

.ab .nav {
  display: flex;
  gap: 17px;
}

.ab .nav button {
  width: 77px;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.2s ease;
}

.ab .nav button path {
  transition: all 0.2s ease;
}

.ab .nav .prev svg {
  transform: scaleX(-1);
}

.ab .nav button:disabled {
  cursor: default;
  opacity: 0.5;
}

.ab .nav button:not(:disabled):hover {
  transition: all 0.2s ease;
  background: #91a5ba;
}

.ab .nav button:not(:disabled):hover path {
  transition: all 0.2s ease;
  fill: #fff;
}

.ab .slider .viewport {
  overflow: hidden;
}

.ab .slider .track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ab .slider .item {
  flex: 0 0 auto;
  overflow: hidden;
}

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

/* --- Первый экран --- */

.ab .section-1 {
  position: relative;
  display: flex;
  min-height: 750px;
  padding: 198px 0 55px 0;
  background:
    linear-gradient(
      0deg,
      rgba(24, 29, 44, 0.34) 0%,
      rgba(24, 29, 44, 0.34) 100%
    ),
    linear-gradient(
      0deg,
      rgba(145, 165, 186, 0.25) 0%,
      rgba(145, 165, 186, 0.25) 100%
    ),
    var(--hero-image, none) lightgray 50% / cover no-repeat;
  background-blend-mode: normal, color, normal;
}

/* Шторка под шапкой, чтобы бургер и логотип читались на светлом кадре. */
.ab .section-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 248px;
  background: linear-gradient(
    180deg,
    rgba(24, 29, 44, 0.34) 0%,
    rgba(24, 29, 44, 0) 80.645%
  );
}

.ab .section-1 .container {
  position: relative;
}

.ab .section-1 .crumbs {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ab .section-1 .crumbs a {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.ab .section-1 .crumbs a:hover {
  transition: opacity 0.2s ease;
  opacity: 1;
}

.ab .section-1 .crumbs .dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: #e96565;
}

.ab .section-1 h1 {
  margin-top: 148px;
  color: #fff;
  font-size: 120px;
  font-style: normal;
  font-weight: 400;
  line-height: 164px;
}

.ab .section-1 .lead {
  margin: 30px 0 0 17.3%;
  max-width: 849px;
  color: #fff;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 42px;
}

/* --- Более 15 лет --- */

.ab .section-2 {
  position: relative;
  padding-top: 48px;
}

.ab .section-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1025px;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.ab .section-2 .container {
  position: relative;
}

.ab .section-2 .r1 {
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.ab .section-2 .r2 {
  margin: 48px 0 0 var(--col);
  max-width: 599px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ab .section-2 .r3 {
  margin: 48px 0 0 var(--col);
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.ab .section-2 .r3 .item {
  width: 332px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ab .section-2 .r3 .t1 {
  color: #181d2c;
  font-size: 70px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.ab .section-2 .r3 .t2 {
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

/* --- Видео --- */

.ab .section-3 {
  position: relative;
  padding-top: 120px;
}

.ab .section-3 .video {
  position: relative;
  display: block;
  width: 79.6%;
  margin-left: 10.2%;
  aspect-ratio: 1119 / 630;
  overflow: hidden;
}

.ab .section-3 .video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab .section-3 .video .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #91a5ba;
  transition: background 0.2s ease;
}

.ab .section-3 .video:hover .play {
  transition: background 0.2s ease;
  background: #181d2c;
}

/* --- Производство полного цикла --- */

.ab .section-4 {
  position: relative;
  padding-top: 48px;
}

.ab .section-4 .top .r1 {
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.ab .section-4 .top .r2 {
  margin: 48px 0 0 var(--col);
  max-width: 571px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ab .section-4 .slider {
  position: relative;
  margin-top: 64px;
}

.ab .section-4 .slider .item {
  flex-basis: 100%;
  height: 765px;
}

.ab .section-4 .slider .nav {
  position: absolute;
  left: max(35px, calc((100% - 1330px) / 2));
  bottom: 46px;
}

/* --- Технологии восстановления --- */

.ab .section-5 {
  padding: 48px 0 125px 0;
}

.ab .section-5 .top .r1 {
  max-width: 713px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.ab .section-5 .top .r2 {
  max-width: 713px;
  margin-top: 32px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ab .section-5 .slider,
.ab .section-8 .slider {
  position: relative;
  margin-top: 48px;
}

.ab .section-5 .slider .viewport,
.ab .section-8 .slider .viewport {
  margin-left: var(--col);
  margin-right: calc(50% - 50vw);
}

.ab .section-5 .slider .track,
.ab .section-8 .slider .track {
  gap: 24px;
}

.ab .section-5 .slider .item,
.ab .section-8 .slider .item {
  flex-basis: 692px;
  height: 455px;
}

.ab .section-5 .slider .nav,
.ab .section-8 .slider .nav {
  position: absolute;
  left: 28.5%;
  bottom: 0;
}

/* --- Экосистема --- */

.ab .section-6 {
  position: relative;
  padding-top: 99px;
}

.ab .section-6::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1974px;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.ab .section-6 > .container {
  position: relative;
}

.ab .section-6 .top .r1 {
  color: #181d2c;
  font-size: 120px;
  font-style: normal;
  font-weight: 400;
  line-height: 120px;
}

.ab .section-6 .top .r2 {
  max-width: 929px;
  margin-top: 32px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.ab .section-6 .top .r3 {
  margin: 48px 0 0 var(--col);
  max-width: 729px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ab .section-6 .cards {
  position: relative;
  margin-top: 120px;
}

.ab .section-6 .card {
  position: relative;
  height: 609px;
  overflow: hidden;
}

.ab .section-6 .card-1 {
  --scrim: 244, 246, 248;
  background: #f4f6f8;
}

.ab .section-6 .card-2 {
  --scrim: 233, 101, 101;
  background: #e96565;
}

.ab .section-6 .card-3 {
  --scrim: 145, 165, 186;
  background: #91a5ba;
}

/* Чем уже экран, тем сильнее кадр заезжает под текст. Шторка цветом
   карточки гасит его слева — на 1470 обе точки в нуле, и градиент
   полностью прозрачный, поэтому десктоп остаётся как был. */
.ab .section-6 .card .pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--scrim), 1) 0,
    rgba(var(--scrim), 1) var(--scrim-solid, 0px),
    rgba(var(--scrim), 0) var(--scrim-end, 0px)
  );
}

/* Кадры лежат в макете по-разному: первый и третий прижаты к верху
   в натуральную ширину, второй сдвинут вправо и выходит за карточку. */
.ab .section-6 .card .pic {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.ab .section-6 .card .pic img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.ab .section-6 .card-1 .pic {
  width: 41%;
}

.ab .section-6 .card-2 .pic {
  width: 40.6%;
}

.ab .section-6 .card-2 .pic img {
  width: 115.6%;
  margin: -5.3% 0 0 16.9%;
}

.ab .section-6 .card-3 .pic {
  width: 38.4%;
}

.ab .section-6 .card .container {
  position: relative;
  height: 100%;
}

.ab .section-6 .card-inner {
  padding-top: 63px;
  display: flex;
  gap: 20px;
}

.ab .section-6 .num {
  flex: 0 0 auto;
  width: 95px;
  margin-top: -5px;
  text-align: center;
  font-size: 55px;
  font-style: normal;
  font-weight: 400;
  line-height: 65px;
}

.ab .section-6 .body {
  width: 814px;
  height: 483px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ab .section-6 .text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ab .section-6 .title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ab .section-6 .t1 {
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 42px;
}

.ab .section-6 .t2 {
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.ab .section-6 .t3 {
  max-width: 693px;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ab .section-6 .foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.ab .section-6 .logo {
  flex: 0 0 auto;
  width: 214px;
  height: 87px;
  display: flex;
  align-items: center;
}

.ab .section-6 .logo img {
  max-width: 100%;
  height: auto;
}

.ab .section-6 .link {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.ab .section-6 .link .arrow-line {
  transform-box: fill-box;
  transform-origin: left center;
  transition: all 0.2s ease;
}

.ab .section-6 .link .arrow-tip {
  transition: all 0.2s ease;
}

.ab .section-6 .link span {
  transition: all 0.2s ease;
}

.ab .section-6 .link:hover span {
  transition: all 0.2s ease;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.ab .section-6 .link:hover .arrow-line {
  transition: all 0.2s ease;
  transform: scaleX(1.4652);
}

.ab .section-6 .link:hover .arrow-tip {
  transition: all 0.2s ease;
  transform: translateX(10px);
}

.ab .section-6 .card-1 .num,
.ab .section-6 .card-1 .t3 {
  color: #91a5ba;
}

.ab .section-6 .card-1 .t1,
.ab .section-6 .card-1 .t2 {
  color: #181d2c;
}

.ab .section-6 .card-1 .link {
  color: #e96565;
}

.ab .section-6 .card-2,
.ab .section-6 .card-3 {
  color: #fff;
}

/* --- Решения, которым доверяют --- */

.ab .section-7 {
  position: relative;
  padding: 120px 0 113px 0;
  overflow: hidden;
}

/* Карта лежит в разметке между текстом и счётчиком: на 1470 она уходит
   из потока и работает фоном, ниже — встаёт в поток отдельной полосой.
   Контейнер не позиционируем, иначе отсчёт пойдёт от него, а не от секции;
   текст поднимаем над картой через z-index. */
.ab .section-7 .map {
  position: absolute;
  top: 190px;
  right: 0;
  width: min(1360px, calc(100vw - 78px));
  /* В макете кадр карты обрезан по высоте: 1360x614 на 1470,
     694x314 на 768, 342x155 на 360 — отношение везде одно. */
  aspect-ratio: 1360 / 614;
  height: auto;
  object-fit: cover;
}

.ab .section-7 .top,
.ab .section-7 .count {
  position: relative;
  z-index: 1;
}

.ab .section-7 .top .r1 {
  max-width: 691px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.ab .section-7 .top .r2 {
  max-width: 452px;
  margin-top: 32px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ab .section-7 .count {
  margin: 52px 0 0 62.1%;
}

.ab .section-7 .count .c1 {
  color: #181d2c;
  font-size: 120px;
  font-style: normal;
  font-weight: 400;
  line-height: 120px;
}

.ab .section-7 .count .c2 {
  max-width: 443px;
  margin: 16px 0 0 60px;
  color: #181d2c;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}

/* --- Площадка в Пущино --- */

.ab .section-8 {
  padding-top: 120px;
}

.ab .section-8 .top .r1 {
  max-width: 713px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.ab .section-8 .top .r2 {
  max-width: 713px;
  margin-top: 32px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

/* --- Миссия --- */

.ab .section-9 {
  display: flex;
  flex-direction: column;
  min-height: 677px;
  margin-top: 120px;
  padding-top: 43px;
  background: linear-gradient(0deg, rgba(24, 29, 44, 0.34) 0%, rgba(24, 29, 44, 0.34) 100%), linear-gradient(0deg, rgba(145, 165, 186, 0.25) 0%, rgba(145, 165, 186, 0.25) 100%), var(--mission-image, none) lightgray 0px 0px / cover no-repeat;
}

.ab .section-9 .title {
  color: #fbfcff;
  font-size: 120px;
  font-style: normal;
  font-weight: 400;
  line-height: 120px;
}

.ab .section-9 .blur-content {
  margin-top: auto;
  background: rgba(107, 123, 142, 0.3);
  backdrop-filter: blur(12.5px);
}

.ab .section-9 .blur-content-inner {
  margin-left: 34.4%;
  max-width: 804px;
  padding: 38px 0 43px 0;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}

/* Страховка от переполнения: фиксированные ширины макета
   ужимаются по контейнеру, когда места не хватает. */
.ab .section-2 .r3 .item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 332px;
}

/* .t3 и .c2 сюда не входят: у них в макете свои ограничения
   по ширине (693 и 443), а max-width:100% их снимал. */
.ab .section-6 .body,
.ab .section-5 .slider .item,
.ab .section-8 .slider .item {
  max-width: 100%;
}

/* ==================================================================
   «Лицензия и сертификаты» и «Поставщикам» — общий первый экран
   ================================================================== */

.lc,
.sp,
.dv,
.ct,
.cr,
.nw {
  /* Правая колонка макета, как на «О компании». */
  --col: 42.4%;
}

.lc .section-1,
.sp .section-1,
.dv .section-1,
.ct .section-1,
.cr .section-1 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 692px;
  padding-top: 199px;
  background:
    linear-gradient(
      0deg,
      rgba(24, 29, 44, 0.43) 0%,
      rgba(24, 29, 44, 0.43) 100%
    ),
    var(--hero-image, none) lightgray 50% / cover no-repeat;
}

/* Шторка под шапкой, чтобы бургер и логотип читались на светлом кадре. */
.lc .section-1::before,
.sp .section-1::before,
.dv .section-1::before,
.ct .section-1::before,
.cr .section-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 248px;
  background: linear-gradient(
    180deg,
    rgba(24, 29, 44, 0.34) 0%,
    rgba(24, 29, 44, 0) 80.645%
  );
}

.lc .section-1 > .container,
.sp .section-1 > .container,
.dv .section-1 > .container,
.ct .section-1 > .container,
.cr .section-1 > .container {
  position: relative;
}

.lc .section-1 .crumbs,
.sp .section-1 .crumbs,
.dv .section-1 .crumbs,
.ct .section-1 .crumbs,
.cr .section-1 .crumbs,
.nw .section-1 .crumbs {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.lc .section-1 .crumbs a,
.sp .section-1 .crumbs a,
.dv .section-1 .crumbs a,
.ct .section-1 .crumbs a,
.cr .section-1 .crumbs a,
.nw .section-1 .crumbs a {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.lc .section-1 .crumbs a:hover,
.sp .section-1 .crumbs a:hover,
.dv .section-1 .crumbs a:hover,
.ct .section-1 .crumbs a:hover,
.cr .section-1 .crumbs a:hover,
.nw .section-1 .crumbs a:hover {
  transition: opacity 0.2s ease;
  opacity: 1;
}

.lc .section-1 .crumbs .dot,
.sp .section-1 .crumbs .dot,
.dv .section-1 .crumbs .dot,
.ct .section-1 .crumbs .dot,
.cr .section-1 .crumbs .dot,
.nw .section-1 .crumbs .dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: #e96565;
}

.lc .section-1 h1,
.sp .section-1 h1,
.dv .section-1 h1,
.ct .section-1 h1,
.cr .section-1 h1 {
  margin-top: 42px;
  color: #fff;
  font-size: 100px;
  font-style: normal;
  font-weight: 400;
  line-height: 100px;
}

/* Полоса с подзаголовком прижата к низу кадра, текст в ней по центру. */
.lc .section-1 .blur-content,
.sp .section-1 .blur-content,
.dv .section-1 .blur-content,
.cr .section-1 .blur-content {
  margin-top: auto;
  min-height: 182px;
  display: flex;
  align-items: center;
  background: rgba(107, 123, 142, 0.3);
  backdrop-filter: blur(12.5px);
}

.lc .section-1 .blur-content .container,
.sp .section-1 .blur-content .container,
.dv .section-1 .blur-content .container,
.cr .section-1 .blur-content .container {
  padding-top: 24px;
  padding-bottom: 24px;
}

.lc .section-1 .blur-content-inner,
.sp .section-1 .blur-content-inner,
.dv .section-1 .blur-content-inner {
  margin-left: var(--col);
  max-width: 691px;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

/* ==================================================================
   «Лицензия и сертификаты»
   ================================================================== */

.lc .section-2 {
  position: relative;
  padding-bottom: 120px;
}

/* Высота градиентной полосы в макете (1470: 153px, 375: 125) — это
   высота ленты фильтров вместе с отступами, полоса лежит под ней.
   Красим саму ленту, чтобы полоса не разъезжалась с содержимым. */
.lc .section-2 .band {
  position: relative;
  padding: 75px 0 34px 0;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.lc .section-2 > .container {
  position: relative;
}

/* Фильтры длиннее экрана даже на 1470 — значит это лента с прокруткой. */
.lc .section-2 .filters {
  position: relative;
  overflow-x: auto;
  /* overflow-x: auto делает блок прокручиваемым и по вертикали,
     а 32px глифы не влезают в интерлиньяж 28px из макета —
     ленту можно было утащить вверх-вниз. Запас даёт трек. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-left: max(var(--pad), calc((100% - 1330px) / 2));
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lc .section-2 .filters::-webkit-scrollbar {
  display: none;
}

.lc .section-2 .filters-track {
  width: max-content;
  display: flex;
  gap: 48px;
  padding-right: max(var(--pad), calc((100% - 1330px) / 2));
}

/* Запас сверху и снизу: интерлиньяж из макета (28px) меньше самих
   глифов 32px, без него они вылезают за пределы ленты. Ровно на эти
   8px уменьшена вертикальная набивка подложки. */
.lc .section-2 .filters a {
  display: block;
  padding: 8px 0;
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  white-space: nowrap;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.lc .section-2 .filters a.is-active,
.lc .section-2 .filters a:hover {
  transition: opacity 0.2s ease;
  opacity: 1;
}

.lc .section-2 > .container {
  position: relative;
}

.lc .section-2 .list {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}

.lc .section-2 .item {
  min-height: 248px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #f4f6f8;
}

.lc .section-2 .item .r1 {
  flex: 1 1 auto;
  min-height: 114px;
  padding: 0 41px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 63px;
}

.lc .section-2 .item .t1 {
  color: #181d2c;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
  transition: color 0.2s ease;
}

.lc .section-2 .item .t2 {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.lc .section-2 .item .t2 svg {
  display: block;
}

.lc .section-2 .item .t2 path {
  transition: stroke 0.2s ease;
}

.lc .section-2 .item .r2 {
  border-top: 1px solid rgba(145, 165, 186, 0.35);
}

.lc .section-2 .item .r3 {
  padding: 0 41px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.lc .section-2 .item .type {
  padding: 5px 10px;
  background: #91a5ba;
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

.lc .section-2 .item .size {
  color: #91a5ba;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.lc .section-2 .item:hover .t1 {
  transition: color 0.2s ease;
  color: #e96565;
}

.lc .section-2 .item:hover .t2 path {
  transition: stroke 0.2s ease;
  stroke: #e96565;
}

/* ==================================================================
   «Поставщикам и партнёрам»
   ================================================================== */

/* Градиентная полоса в макете лежит ровно под первым текстовым блоком:
   её высота (1470: 379px, 768: 437, 375: 387) совпадает с высотой
   секции 2, поэтому красим сам блок, а не соседний. */
.sp .section-2 .band {
  padding: 48px 0 69px 0;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.sp .section-2 .r1 {
  max-width: 1077px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.sp .section-2 .r2 {
  margin: 48px 0 0 var(--col);
  max-width: 691px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

/* --- Направления сотрудничества --- */

.sp .section-3 .top {
  padding-top: 54px;
}

.sp .section-3 .top .r1 {
  max-width: 912px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.sp .section-3 .top .r2 {
  margin-top: 32px;
  max-width: 690px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

/* Линейки идут через весь экран, а текст внутри держится колонки. */
.sp .section-3 .list {
  position: relative;
  width: 100vw;
  margin: 50px 0 0 calc(50% - 50vw);
}

.sp .section-3 .list .item {
  padding: 33px max(var(--pad), calc((100% - 1330px) / 2));
  border-top: 1px solid rgba(145, 165, 186, 0.35);
}

.sp .section-3 .list .item:last-child {
  border-bottom: 1px solid rgba(145, 165, 186, 0.35);
}

.sp .section-3 .list .item-inner {
  margin-left: var(--col);
  display: flex;
  gap: 24px;
}

.sp .section-3 .list .c1 {
  flex: 0 0 auto;
  width: 94px;
  color: #91a5ba;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.sp .section-3 .list .c2 {
  min-width: 0;
}

.sp .section-3 .list .t1 {
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.sp .section-3 .list .t2 {
  margin: 36px 0 0 0;
  padding: 0;
  list-style: none;
}

.sp .section-3 .list .t2 li {
  position: relative;
  padding-left: 20px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.sp .section-3 .list .t2 li + li {
  margin-top: 6px;
}

.sp .section-3 .list .t2 li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11.5px;
  width: 5px;
  height: 5px;
  background: #91a5ba;
}

/* --- Требования к партнёрам --- */

.sp .section-4 {
  padding: 66px 0 113px 0;
}

.sp .section-4 .r1 {
  max-width: 912px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.sp .section-4 .slider {
  position: relative;
  margin-top: 64px;
}

.sp .section-4 .slider .viewport {
  margin-left: 25.5%;
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.sp .section-4 .slider .track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp .section-4 .slider .item {
  flex: 0 0 auto;
  width: 453px;
  min-height: 396px;
  padding: 42px 46px 0 46px;
  display: flex;
  flex-direction: column;
  background: #f4f6f8;
}

.sp .section-4 .slider .item .t1 {
  min-height: 206px;
  max-width: 358px;
  color: #181d2c;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}

/* Линейка идёт от края до края карточки, поэтому вылезаем из паддинга. */
.sp .section-4 .slider .item .t2 {
  margin: 0 -46px;
  padding: 23px 46px 42px 46px;
  border-top: 1px solid rgba(145, 165, 186, 0.35);
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

/* Стрелок в макете нет, но пятая карточка иначе недостижима мышью. */
.sp .section-4 .slider .nav {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: 17px;
}

.sp .section-4 .slider .nav button {
  width: 77px;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.2s ease;
}

.sp .section-4 .slider .nav button path {
  transition: all 0.2s ease;
}

.sp .section-4 .slider .nav .prev svg {
  transform: scaleX(-1);
}

.sp .section-4 .slider .nav button:disabled {
  cursor: default;
  opacity: 0.5;
}

.sp .section-4 .slider .nav button:not(:disabled):hover {
  transition: all 0.2s ease;
  background: #91a5ba;
}

.sp .section-4 .slider .nav button:not(:disabled):hover path {
  transition: all 0.2s ease;
  fill: #fff;
}

/* --- Контакты и форма --- */

.sp .section-5 {
  position: relative;
  padding: 58px 0 66px 0;
}

.sp .section-5::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.sp .section-5 > .container {
  position: relative;
}

.sp .section-5 .top .r1 {
  max-width: 1077px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.sp .section-5 .top .r2 {
  margin-top: 32px;
  max-width: 691px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.sp .section-5 .cols {
  margin-top: 47px;
  display: flex;
  gap: 20px;
}

.sp .section-5 .cols .c1 {
  flex: 0 1 auto;
  width: 477px;
}

.sp .section-5 .cols .c1 .label {
  color: #181d2c;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}

.sp .section-5 .cols .c1 .lines {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.sp .section-5 .cols .c1 .lines a {
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
  transition: color 0.2s ease;
}

.sp .section-5 .cols .c1 .lines a:hover {
  transition: color 0.2s ease;
  color: #e96565;
}

.sp .section-5 .cols .c2 {
  flex: 0 1 auto;
  width: 691px;
  margin-left: auto;
}

.sp .section-5 .field + .field {
  margin-top: 32px;
}

.sp .section-5 .field label,
.sp .section-5 .field .label {
  display: block;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.sp .section-5 .field input[type="text"],
.sp .section-5 .field textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 16px 23px;
  background: #fff;
  border: 1px solid #d0d8e1;
  border-radius: 0;
  color: #181d2c;
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

.sp .section-5 .field input[type="text"]::placeholder,
.sp .section-5 .field textarea::placeholder {
  color: #181d2c;
  opacity: 0.5;
}

.sp .section-5 .field textarea {
  height: 154px;
  resize: vertical;
}

.sp .section-5 .choice {
  margin-top: 8px;
  display: flex;
  gap: 20px;
}

.sp .section-5 .choice label {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-size: 16px;
  line-height: 28px;
}

.sp .section-5 .choice input {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d0d8e1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sp .section-5 .choice input:checked {
  transition: background 0.2s ease;
  background: radial-gradient(circle at center, #e96565 0 5px, #fff 5px);
}

.sp .section-5 .send {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.sp .section-5 .attach {
  min-height: 60px;
  padding: 10px 62px 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  border: 1px solid #181d2c;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sp .section-5 .attach input {
  display: none;
}

.sp .section-5 .attach svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.sp .section-5 .attach path {
  transition: fill 0.2s ease;
}

.sp .section-5 .attach span {
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  transition: color 0.2s ease;
}

.sp .section-5 .attach:hover {
  transition: all 0.2s ease;
  background: #181d2c;
}

.sp .section-5 .attach:hover span {
  transition: color 0.2s ease;
  color: #fff;
}

.sp .section-5 .attach:hover path {
  transition: fill 0.2s ease;
  fill: #fff;
}

.sp .section-5 .note {
  color: rgba(24, 29, 44, 0.43);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.sp .section-5 .note a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.sp .section-5 .submit {
  width: 100%;
  min-height: 60px;
  padding: 18px 62px;
  background: #181d2c;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  transition: background 0.2s ease;
}

.sp .section-5 .submit:hover {
  transition: background 0.2s ease;
  background: #e96565;
}

/* ==================================================================
   «Наши разработки»
   ================================================================== */

/* Свой кадр и вуаль легче, чем на соседних страницах. */
.dv .section-1 {
  background:
    linear-gradient(
      0deg,
      rgba(24, 29, 44, 0.34) 0%,
      rgba(24, 29, 44, 0.34) 100%
    ),
    var(--hero-image, none) lightgray 50% / cover no-repeat;
}

/* Как и на «Поставщикам»: высота градиентной полосы в макете
   (1470: 385px, 768: 539, 375: 387) — это высота секции 2, полоса
   лежит под первым текстовым блоком. */
.dv .section-2 .band {
  padding: 48px 0 47px 0;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.dv .section-2 .r1 {
  max-width: 1077px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.dv .section-2 .r2 {
  margin: 48px 0 0 var(--col);
  max-width: 691px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

/* --- Направления продукции --- */

.dv .section-3 .top {
  padding-top: 107px;
}

.dv .section-3 .top .r1 {
  max-width: 800px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.dv .section-3 .top .r2 {
  margin-top: 32px;
  max-width: 691px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.dv .accordion {
  position: relative;
  /* Ширина колонки с номером — от неё же пляшет отступ кадра. */
  --num-w: 94px;
  margin-top: 48px;
}

.dv .accordion .item {
  position: relative;
  padding: 33px max(var(--pad), calc((100% - 1330px) / 2)) 32px;
  border-top: 1px solid rgba(145, 165, 186, 0.35);
  cursor: pointer;
}

.dv .accordion .item-inner {
  margin-left: 51%;
  display: flex;
  gap: 24px;
}

.dv .accordion .c1 {
  flex: 0 0 auto;
  width: var(--num-w);
  color: #91a5ba;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.dv .accordion .c2 {
  min-width: 0;
}

.dv .accordion .t1 {
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

/* Высоту раскрытия не задаём числом: у пунктов разный текст, а
   0fr → 1fr анимирует ровно ту высоту, которая получилась. */
.dv .accordion .t2 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.dv .accordion .t2-inner {
  overflow: hidden;
}

.dv .accordion .item.is-active .t2 {
  grid-template-rows: 1fr;
}

.dv .accordion .d1 {
  max-width: 453px;
  padding-top: 36px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.dv .accordion .d2 {
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
}

.dv .accordion .d2 li {
  position: relative;
  padding-left: 20px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.dv .accordion .d2 li + li {
  margin-top: 6px;
}

.dv .accordion .d2 li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11.5px;
  width: 5px;
  height: 5px;
  background: #91a5ba;
}

/* Кадр стоит в пустой левой колонке и живёт ровно столько,
   сколько раскрыт пункт. */
.dv .accordion .media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18.2%;
  width: 334px;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.dv .accordion .item.is-active .media {
  opacity: 1;
}

.dv .accordion .media-inner {
  height: 100%;
  overflow: hidden;
}

.dv .accordion .media img {
  display: block;
  width: 163%;
  height: 100%;
  margin-left: -50%;
  object-fit: cover;
}

/* У второго пункта кадр в макете взят крупнее и сдвинут левее. */
.dv .accordion .item-2 .media img {
  width: 234%;
  margin-left: -91%;
  object-position: 50% 30%;
}

/* --- Каталог --- */

.dv .section-4 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 655px;
  margin-top: 40px;
  padding-top: 170px;
  background: var(--catalog-image, none) lightgray 50% 90% / cover no-repeat;
  overflow: hidden;
}

.dv .section-4 .title {
  max-width: 1296px;
  color: #fff;
  font-size: 120px;
  font-style: normal;
  font-weight: 400;
  line-height: 120px;
}

.dv .section-4 .blur-content {
  margin-top: auto;
  min-height: 191px;
  background: rgba(107, 123, 142, 0.3);
  backdrop-filter: blur(12.5px);
}

.dv .section-4 .blur-content-inner {
  padding: 42px 0 33px 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.dv .section-4 .blur-content-inner .c1 {
  flex: 0 0 auto;
  align-self: flex-end;
}

.dv .section-4 .blur-content-inner .c1 a {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dv .section-4 .blur-content-inner .c1 a span {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  transition: all 0.2s ease;
}

.dv .section-4 .blur-content-inner .c1 a .arrow-line {
  transform-box: fill-box;
  transform-origin: left center;
  transition: all 0.2s ease;
}

.dv .section-4 .blur-content-inner .c1 a .arrow-tip {
  transition: all 0.2s ease;
}

.dv .section-4 .blur-content-inner .c1 a:hover span {
  transition: all 0.2s ease;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.dv .section-4 .blur-content-inner .c1 a:hover .arrow-line {
  transition: all 0.2s ease;
  transform: scaleX(1.4652);
}

.dv .section-4 .blur-content-inner .c1 a:hover .arrow-tip {
  transition: all 0.2s ease;
  transform: translateX(10px);
}

.dv .section-4 .blur-content-inner .c2 {
  margin-left: auto;
  max-width: 755px;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}

/* ==================================================================
   «Контакты и обратная связь»
   ================================================================== */

.ct .section-1 {
  background:
    linear-gradient(
      0deg,
      rgba(24, 29, 44, 0.34) 0%,
      rgba(24, 29, 44, 0.34) 100%
    ),
    var(--hero-image, none) lightgray 50% / cover no-repeat;
}

.ct .section-1 h1 {
  max-width: 1268px;
}

.ct .section-1 .blur-content {
  margin-top: auto;
  min-height: 182px;
  background: rgba(107, 123, 142, 0.3);
  backdrop-filter: blur(12.5px);
}

.ct .section-1 .blur-content .container {
  position: relative;
}

/* Ссылка висит над полосой, а не в потоке: в макете она заходит на
   высоту заголовка, и в столбик секция стала бы выше кадра. */
.ct .section-1 .cta {
  position: absolute;
  right: var(--pad);
  bottom: 100%;
  margin-bottom: 21px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

.ct .section-1 .cta svg {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.ct .section-1 .cta:hover svg {
  transition: transform 0.2s ease;
  transform: translateY(6px);
}

.ct .section-1 .blur-content-inner {
  max-width: none;
  margin-left: 0;
  padding: 23px 0 30px 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.ct .section-1 .blur-content-inner .phone {
  display: block;
  color: #fff;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
  transition: color 0.2s ease;
}

.ct .section-1 .blur-content-inner .phone:hover {
  transition: color 0.2s ease;
  color: #e96565;
}

.ct .section-1 .blur-content-inner .hours {
  margin-top: 16px;
  max-width: 325px;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.ct .section-1 .blur-content-inner .c2 {
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 640px;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}

/* --- Карта --- */

/* Высота кадра карты в макете одинаковая на всех разрешениях. */
.ct .section-2 {
  height: 491px;
  overflow: hidden;
}

.ct .section-2 .map {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Пока по карте не кликнули, колесо и палец прокручивают страницу,
   а не масштабируют карту: иначе мимо полосы на всю ширину экрана
   не проскроллить. */
.ct .section-2:not(.is-active) .map {
  pointer-events: none;
}

/* --- Как добраться --- */

/* Зазор до блока формы в макете: 73 на 1470, 107 на 768, 64 на 360. */
.ct .section-3 {
  padding: 46px 0 73px 0;
}

.ct .section-3 .top .r1 {
  max-width: 912px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.ct .section-3 .top .r2 {
  margin-top: 32px;
  max-width: 690px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ct .section-3 .list {
  position: relative;
  width: 100vw;
  margin: 48px 0 0 calc(50% - 50vw);
}

.ct .section-3 .list .item {
  padding: 33px max(var(--pad), calc((100% - 1330px) / 2)) 46px;
  border-top: 1px solid rgba(145, 165, 186, 0.35);
}

.ct .section-3 .list .item-inner {
  margin-left: var(--col);
  display: flex;
  gap: 24px;
}

.ct .section-3 .list .c1 {
  flex: 0 0 auto;
  width: 94px;
  color: #91a5ba;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.ct .section-3 .list .c2 {
  min-width: 0;
}

.ct .section-3 .list .t1 {
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.ct .section-3 .list .t2 {
  margin-top: 36px;
  max-width: 705px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ct .section-3 .list .t2 p + p {
  margin-top: 15px;
}

/* --- Свяжитесь с нами --- */

.ct .section-4 {
  position: relative;
  padding: 95px 0 99px 0;
}

.ct .section-4::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.ct .section-4 > .container {
  position: relative;
}

.ct .section-4 .top .r1 {
  max-width: 1077px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.ct .section-4 .top .r2 {
  margin-top: 32px;
  max-width: 691px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ct .section-4 .form {
  margin-top: 58px;
}

.ct .section-4 .group + .group {
  margin-top: 48px;
}

.ct .section-4 .group > .label {
  color: #181d2c;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}

.ct .section-4 .rows {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ct .section-4 .row-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ct .section-4 .row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.ct .section-4 .field label {
  display: block;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.ct .section-4 .field input[type="text"],
.ct .section-4 .field textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 16px 23px;
  background: #fff;
  border: 1px solid #d0d8e1;
  border-radius: 0;
  color: #181d2c;
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

.ct .section-4 .field input[type="text"]::placeholder,
.ct .section-4 .field textarea::placeholder {
  color: #181d2c;
  opacity: 0.5;
}

.ct .section-4 .field textarea {
  height: 165px;
  resize: vertical;
}

.ct .section-4 .send {
  margin-top: 24px;
}

.ct .section-4 .send .note {
  margin-top: 20px;
}

.ct .section-4 .attach {
  min-height: 60px;
  padding: 10px 62px 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  border: 1px solid #181d2c;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ct .section-4 .attach input {
  display: none;
}

.ct .section-4 .attach svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.ct .section-4 .attach path {
  transition: fill 0.2s ease;
}

.ct .section-4 .attach span {
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  transition: color 0.2s ease;
}

.ct .section-4 .attach:hover {
  transition: all 0.2s ease;
  background: #181d2c;
}

.ct .section-4 .attach:hover span {
  transition: color 0.2s ease;
  color: #fff;
}

.ct .section-4 .attach:hover path {
  transition: fill 0.2s ease;
  fill: #fff;
}

.ct .section-4 .submit {
  width: 100%;
  min-height: 60px;
  padding: 18px 62px;
  background: #181d2c;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  transition: background 0.2s ease;
}

.ct .section-4 .submit:hover {
  transition: background 0.2s ease;
  background: #e96565;
}

.ct .section-4 .note {
  color: rgba(24, 29, 44, 0.43);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.ct .section-4 .note a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

/* ==================================================================
   «Карьера»
   ================================================================== */

/* Кадр тот же, что в «Нашей миссии» на «О компании». */
.cr .section-1 {
  background:
    linear-gradient(
      0deg,
      rgba(24, 29, 44, 0.34) 0%,
      rgba(24, 29, 44, 0.34) 100%
    ),
    var(--hero-image, none) lightgray 50% / cover no-repeat;
}

.cr .section-1 h1 {
  max-width: 536px;
}

/* Вертикальную набивку несёт сам блок — у него она несимметричная,
   поэтому у контейнера её снимаем. */
.cr .section-1 .blur-content .container {
  padding-top: 0;
  padding-bottom: 0;
}

.cr .section-1 .blur-content-inner {
  max-width: none;
  margin-left: 0;
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.cr .section-1 .blur-content-inner .c1 {
  flex: 0 0 auto;
}

.cr .section-1 .blur-content-inner .c1 a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

.cr .section-1 .blur-content-inner .c1 svg {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.cr .section-1 .blur-content-inner .c1 a:hover svg {
  transition: transform 0.2s ease;
  transform: translateY(6px);
}

.cr .section-1 .blur-content-inner .c2 {
  margin-left: var(--col);
  max-width: 691px;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

/* --- Работа, которой можно гордиться --- */

/* Линейка под блоком идёт через весь экран, поэтому висит на секции,
   а не на колонке с текстом. */
.cr .section-2 {
  border-bottom: 1px solid rgba(145, 165, 186, 0.35);
}

/* Высота полосы в макете (1470: 299px, 768: 361, 375: 333) — это
   высота первого текстового блока, полоса лежит под ним, а список
   специальностей уже на белом. */
.cr .section-2 .band {
  padding: 48px 0 70px 0;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.cr .section-2 .band .r1 {
  max-width: 1077px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.cr .section-2 .band .r2 {
  margin: 32px 0 0 var(--col);
  max-width: 691px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.cr .section-2 .roles {
  position: relative;
  margin-left: var(--col);
  padding: 42px 0 61px 0;
}

.cr .section-2 .roles .t1 {
  max-width: 572px;
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.cr .section-2 .roles .t2 {
  margin: 37px 0 0 0;
  padding: 0;
  list-style: none;
}

.cr .section-2 .roles .t2 li {
  position: relative;
  padding-left: 20px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.cr .section-2 .roles .t2 li + li {
  margin-top: 6px;
}

.cr .section-2 .roles .t2 li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11.5px;
  width: 5px;
  height: 5px;
  background: #91a5ba;
}



/* --- Почему выбирают нас --- */

.cr .section-3 {
  padding: 66px 0 110px 0;
}

.cr .section-3 .r1 {
  max-width: 775px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.cr .section-3 .slider {
  position: relative;
  margin-top: 64px;
}

.cr .section-3 .slider .viewport {
  margin-left: 25.5%;
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.cr .section-3 .slider .track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cr .section-3 .slider .item {
  flex: 0 0 auto;
  width: 453px;
  min-height: 313px;
  padding: 42px 46px 0 46px;
  display: flex;
  flex-direction: column;
  background: #f4f6f8;
}

.cr .section-3 .slider .item .t1 {
  min-height: 136px;
  max-width: 358px;
  color: #181d2c;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}

.cr .section-3 .slider .item .t2 {
  margin: 0 -46px;
  padding: 23px 46px 40px 46px;
  border-top: 1px solid rgba(145, 165, 186, 0.35);
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

/* Стрелок в макете нет, но пятая карточка иначе недостижима мышью. */
.cr .section-3 .slider .nav {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: 17px;
}

.cr .section-3 .slider .nav button {
  width: 77px;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.2s ease;
}

.cr .section-3 .slider .nav button path {
  transition: all 0.2s ease;
}

.cr .section-3 .slider .nav .prev svg {
  transform: scaleX(-1);
}

.cr .section-3 .slider .nav button:disabled {
  cursor: default;
  opacity: 0.5;
}

.cr .section-3 .slider .nav button:not(:disabled):hover {
  transition: all 0.2s ease;
  background: #91a5ba;
}

.cr .section-3 .slider .nav button:not(:disabled):hover path {
  transition: all 0.2s ease;
  fill: #fff;
}

/* --- Отправьте резюме --- */

.cr .section-4 {
  position: relative;
  padding: 58px 0 86px 0;
}

.cr .section-4::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.cr .section-4 > .container {
  position: relative;
}

.cr .section-4 .top .r1 {
  max-width: 1077px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.cr .section-4 .top .r2 {
  margin-top: 32px;
  max-width: 691px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.cr .section-4 .cols {
  margin-top: 36px;
  display: flex;
  gap: 20px;
}

.cr .section-4 .cols .c1 {
  flex: 0 1 auto;
  width: 477px;
}

.cr .section-4 .cols .c1 .label {
  color: #181d2c;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}

.cr .section-4 .cols .c1 .lines {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.cr .section-4 .cols .c1 .lines a {
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
  transition: color 0.2s ease;
}

.cr .section-4 .cols .c1 .lines a:hover {
  transition: color 0.2s ease;
  color: #e96565;
}

.cr .section-4 .cols .c2 {
  flex: 0 1 auto;
  width: 688px;
  margin-left: auto;
}

.cr .section-4 .field + .field {
  margin-top: 32px;
}

.cr .section-4 .field label,
.cr .section-4 .field .label {
  display: block;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.cr .section-4 .field input[type="text"],
.cr .section-4 .field textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 16px 23px;
  background: #fff;
  border: 1px solid #d0d8e1;
  border-radius: 0;
  color: #181d2c;
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

.cr .section-4 .field input[type="text"]::placeholder,
.cr .section-4 .field textarea::placeholder {
  color: #181d2c;
  opacity: 0.5;
}

.cr .section-4 .field textarea {
  height: 149px;
  resize: vertical;
}

.cr .section-4 .choice {
  margin-top: 8px;
  display: flex;
  gap: 20px;
}

.cr .section-4 .choice label {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-size: 16px;
  line-height: 28px;
}

.cr .section-4 .choice input {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d0d8e1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cr .section-4 .choice input:checked {
  transition: background 0.2s ease;
  background: radial-gradient(circle at center, #e96565 0 5px, #fff 5px);
}

.cr .section-4 .send {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.cr .section-4 .attach {
  min-height: 60px;
  padding: 10px 62px 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  border: 1px solid #181d2c;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cr .section-4 .attach input {
  display: none;
}

.cr .section-4 .attach svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.cr .section-4 .attach path {
  transition: fill 0.2s ease;
}

.cr .section-4 .attach span {
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  transition: color 0.2s ease;
}

.cr .section-4 .attach:hover {
  transition: all 0.2s ease;
  background: #181d2c;
}

.cr .section-4 .attach:hover span {
  transition: color 0.2s ease;
  color: #fff;
}

.cr .section-4 .attach:hover path {
  transition: fill 0.2s ease;
  fill: #fff;
}

.cr .section-4 .note {
  color: rgba(24, 29, 44, 0.43);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.cr .section-4 .note a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.cr .section-4 .submit {
  width: 100%;
  min-height: 60px;
  padding: 18px 62px;
  background: #181d2c;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  transition: background 0.2s ease;
}

.cr .section-4 .submit:hover {
  transition: background 0.2s ease;
  background: #e96565;
}

/* ==================================================================
   «Новости»
   ================================================================== */

/* Новости, статья и поиск идут без кадра в шапке: белая иконка
   поиска на светлом фоне пропадает, здесь она сразу тёмная. */
body:has(.nw) .header .header-search,
body:has(.na) .header .header-search,
body:has(.se) .header .header-search {
  background: none;
  border-color: transparent;
  backdrop-filter: none;
}

body:has(.nw) .header .header-search svg path,
body:has(.na) .header .header-search svg path,
body:has(.se) .header .header-search svg path {
  stroke: #181d2c;
}

body:has(.nw) .header .header-search:hover,
body:has(.na) .header .header-search:hover,
body:has(.se) .header .header-search:hover {
  background: #91a5ba;
}

body:has(.nw) .header .header-search:hover svg path,
body:has(.na) .header .header-search:hover svg path,
body:has(.se) .header .header-search:hover svg path {
  stroke: #fff;
}

/* В макете между последней новостью и подвалом остаётся воздух:
   114 на 1470, 180 на 768, 136 на 360. Без него список упирался в подвал. */
.nw .section-1 {
  padding: 199px 0 114px 0;
}

.nw .section-1 .crumbs,
.nw .section-1 .crumbs a {
  color: #181d2c;
}

.nw .section-1 h1 {
  margin-top: 42px;
  max-width: 946px;
  color: #181d2c;
  font-size: 100px;
  font-style: normal;
  font-weight: 400;
  line-height: 100px;
}

.nw .list {
  margin-top: 50px;
}

/* Кликабельна вся строка, поэтому сама строка и есть ссылка.
   «Подробнее» внутри — уже не ссылка, а подпись: вложенные <a>
   недопустимы, да и вторая цель клика тут ни к чему. */
.nw .list .item {
  padding: 68px 0 32px 0;
  display: flex;
  gap: 25px;
  cursor: pointer;
  border-top: 1px solid rgba(145, 165, 186, 0.35);
}

.nw .list .item:first-child {
  padding-top: 42px;
}

.nw .list .item:last-child {
  border-bottom: 1px solid rgba(145, 165, 186, 0.35);
}

.nw .list .c1 {
  flex: 0 0 auto;
  width: 332px;
  height: 220px;
  overflow: hidden;
}

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

/* Сканы документов режутся по краям, поэтому вписываем целиком. */
.nw .list .item-doc .c1 img {
  object-fit: contain;
}

.nw .list .c2 {
  flex: 0 0 auto;
  width: 452px;
}

.nw .list .date {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nw .list .date .d1 {
  color: #181d2c;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: 65px;
}

.nw .list .date .d2 {
  color: #91a5ba;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.nw .list .title {
  margin-top: 29px;
  color: #181d2c;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
  transition: color 0.2s ease;
}

.nw .list .c3 {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.nw .list .text {
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.nw .list .more {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nw .list .more span {
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  transition: all 0.2s ease;
}

.nw .list .more .arrow-line {
  transform-box: fill-box;
  transform-origin: left center;
  transition: all 0.2s ease;
}

.nw .list .more .arrow-tip {
  transition: all 0.2s ease;
}

.nw .list .item:hover .more span {
  transition: all 0.2s ease;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.nw .list .item:hover .more .arrow-line {
  transition: all 0.2s ease;
  transform: scaleX(1.4652);
}

.nw .list .item:hover .more .arrow-tip {
  transition: all 0.2s ease;
  transform: translateX(10px);
}

.nw .list .item:hover .title {
  transition: color 0.2s ease;
  color: #e96565;
}

/* ==================================================================
   Отдельная новость
   ================================================================== */

.na .section-1 {
  padding: 199px 0 120px 0;
}

.na .section-1 .crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.na .section-1 .crumbs a {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.na .section-1 .crumbs a:hover {
  transition: opacity 0.2s ease;
  opacity: 1;
}

.na .section-1 .crumbs .dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: #e96565;
}

/* Высота полосы в макете (1470: 288px, 768: 441, 375: 298) — это
   высота шапки новости с датой и заголовком: полоса лежит под ней,
   текст статьи уже на белом. */
.na .band {
  margin-top: 22px;
  padding: 42px 0 51px 0;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

.na .band .head {
  padding-left: 16.9%;
  display: flex;
  align-items: flex-start;
  gap: 107px;
}

.na .band .date {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.na .band .date .d1 {
  color: #181d2c;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: 65px;
}

.na .band .date .d2 {
  color: #91a5ba;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.na .band h1 {
  max-width: 786px;
  color: #181d2c;
  font-size: 55px;
  font-style: normal;
  font-weight: 500;
  line-height: 65px;
}

.na .body {
  margin: 32px 0 0 33.9%;
}

.na .body .text {
  max-width: 810px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.na .body .text > * + * {
  margin-top: 15px;
}

.na .body .text ul {
  margin-left: 0;
  padding-left: 27px;
  list-style: disc;
}

.na .body .text a {
  color: #91a5ba;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  transition: color 0.2s ease;
}

.na .body .text a:hover {
  transition: color 0.2s ease;
  color: #e96565;
}

.na .body .more {
  margin-top: 80px;
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 16px;
  width: max-content;
}

.na .body .more span {
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  transition: all 0.2s ease;
}

.na .body .more .arrow-line {
  transform-box: fill-box;
  transform-origin: left center;
  transition: all 0.2s ease;
}

.na .body .more .arrow-tip {
  transition: all 0.2s ease;
}

.na .body .more:hover span {
  transition: all 0.2s ease;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.na .body .more:hover .arrow-line {
  transition: all 0.2s ease;
  transform: scaleX(1.4652);
}

.na .body .more:hover .arrow-tip {
  transition: all 0.2s ease;
  transform: translateX(10px);
}

/* ==================================================================
   Поиск
   ================================================================== */

.se .section-1 {
  padding: 199px 0 150px 0;
}

.se .section-1 .crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: #181d2c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.se .section-1 .crumbs a {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.se .section-1 .crumbs a:hover {
  transition: opacity 0.2s ease;
  opacity: 1;
}

.se .section-1 .crumbs .dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: #e96565;
}

.se .section-1 h1 {
  margin-top: 42px;
  color: #181d2c;
  font-size: 100px;
  font-style: normal;
  font-weight: 400;
  line-height: 100px;
}

.se .field {
  margin-top: 42px;
  height: 54px;
  padding: 0 23px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #d0d8e1;
}

.se .field input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  color: #181d2c;
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

.se .field input::placeholder {
  color: #181d2c;
  opacity: 0.5;
}

.se .field input::-webkit-search-cancel-button {
  display: none;
}

.se .field .clear {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.se .field .clear path {
  transition: fill 0.2s ease;
}

.se .field .clear:hover path {
  transition: fill 0.2s ease;
  fill: #e96565;
}

.se .count {
  margin-top: 24px;
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

.se .list {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid rgba(145, 165, 186, 0.35);
}

.se .list .item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(145, 165, 186, 0.35);
}

.se .list .item + .item {
  margin-top: 48px;
}

.se .list .c1 {
  flex: 0 0 auto;
  width: 452px;
  color: #181d2c;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
  transition: color 0.2s ease;
}

.se .list .c2 {
  flex: 0 1 auto;
  width: 800px;
  min-width: 0;
}

.se .list .text {
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.se .list .where {
  margin-top: 22px;
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.se .list .item:hover .c1 {
  transition: color 0.2s ease;
  color: #e96565;
}

/* ==================================================================
   404
   ================================================================== */

/* В макете 404 идёт без шапки, и не зря: бургер #91a5ba сливается с
   подложкой того же цвета, а логотип ложится на шестерёнку.
   Навигация остаётся в подвале и на кнопке. */
body:has(.nf) .header {
  display: none;
}

.nf .section-1 {
  padding-bottom: 137px;
  background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
}

/* Кадр прижат низом: сверху его подрезает высота блока, как в макете. */
.nf .pic {
  position: relative;
  width: 100%;
  max-width: 1368px;
  height: 465px;
  margin: 0 auto;
  overflow: hidden;
}

.nf .pic img {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
}

/* Нижний слой несёт тени: на белом фоне умножение ничего не меняет,
   а на подложке проявляет только тень под цифрами. */
.nf .pic .shadow {
  mix-blend-mode: multiply;
}

.nf .head {
  margin-top: -42px;
  text-align: center;
}

.nf .head .t1 {
  color: #181d2c;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
}

.nf .head .t2 {
  max-width: 855px;
  margin: 15px auto 0 auto;
  color: #181d2c;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}

.nf .home {
  width: 300px;
  min-height: 60px;
  margin: 33px auto 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #181d2c;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  transition: background 0.2s ease;
}

.nf .home:hover {
  transition: background 0.2s ease;
  background: #e96565;
}

/* Фокус полей ввода. Селекторы повторяют страничные — иначе те
   перебивают цвет рамки по специфичности. */
.sp .section-5 .field input[type="text"]:focus,
.sp .section-5 .field textarea:focus,
.ct .section-4 .field input[type="text"]:focus,
.ct .section-4 .field textarea:focus,
.cr .section-4 .field input[type="text"]:focus,
.cr .section-4 .field textarea:focus {
  border-color: #91a5ba;
  box-shadow: 0 0 0 1px #91a5ba;
}

/* Рамка поля нарисована на обёртке, у самого input рамки нет. Общее
   правило .field рисовало ему кольцо тенью — внутри рамки появлялась
   вторая, вокруг текста. Гасим её и подсвечиваем внешнюю рамку. */
.se .field input:focus,
.se .field input:focus-visible {
  outline: none;
  box-shadow: none;
}

.se .field:focus-within {
  border-color: #91a5ba;
}

/* ==================================================================
   Модальные окна результата отправки форм
   Макет: 492x367 (десктоп) и 392x367 (мобильные), окно 458x314 / 330x314
   ================================================================== */

.dialog {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(24, 29, 44, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dialog[hidden] {
  display: none;
}

.dialog.is-open {
  transition: opacity 0.3s ease;
  opacity: 1;
}

.dialog-box {
  position: relative;
  width: 458px;
  max-width: 100%;
  min-height: 314px;
  /* Заголовок «Спасибо за обращение!» — ровно 349px, столько же, сколько
     колонка текста. При боковых 54px он упирался в край и переносился. */
  padding: 78px 50px 60px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background: #fff;
  border: 1px solid #ececee;
  box-shadow: 0 0 13.5px 0 rgba(145, 165, 186, 0.4);
  transform: translateY(12px);
  transition: transform 0.3s ease;
}

.dialog.is-open .dialog-box {
  transition: transform 0.3s ease;
  transform: translateY(0);
}

.dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.dialog-close:hover {
  transition: opacity 0.2s ease;
  opacity: 0.5;
}

.dialog-title {
  color: #181d2c;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
}

.dialog-text {
  max-width: 349px;
  color: #181d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}

.dialog-text p + p {
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .dialog,
  .dialog-box {
    transition-duration: 0.01s;
  }
}

/* ==================================================================
   Формы: служебное
   ================================================================== */

/* Поле-ловушка для роботов. Именно уводим за экран, а не display: none:
   часть ботов пропускает скрытые поля, а это заполняет. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Ошибка проверки под кнопкой. */
.form-error {
  margin-top: 12px;
  color: #e96565;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}