/* Опорные точки макета: 1470 (десктоп), 768 (планшет), 375 (мобайл).
   Между ними значения интерполируются, поэтому вёрстка не прыгает
   ни на одной ширине от 320px. */

:root {
  --pad: 35px;
}

.container {
  padding: 0 var(--pad);
}

/* ------------------------------------------------------------------
   768 — 1469
   ------------------------------------------------------------------ */

@media screen and (max-width: 1469px) {
  :root {
    --pad: 40px;
  }

  /* --- Шапка: логотип съезжает влево, чтобы не налезать на кнопки --- */

  .header .header-logo {
    left: min(50%, calc(100% - 423px));
  }

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

  .mp .section-1 {
    min-height: calc(841px - (100vw - 768px) * 91 / 702);
    padding-top: calc(113px - (100vw - 768px) * 19 / 702);
  }

  .mp .section-1 h1 {
    font-size: calc(58px + (100vw - 768px) * 62 / 702);
    line-height: calc(63px + (100vw - 768px) * 77 / 702);
    text-indent: calc(65px + (100vw - 768px) * 56 / 702);
  }

  .mp .section-1 h3 {
    align-self: flex-start;
    max-width: calc(263px + (100vw - 768px) * 47 / 702);
    margin-top: calc(24px + (100vw - 768px) * 66 / 702);
    font-size: calc(14px + (100vw - 768px) * 4 / 702);
    line-height: calc(22px + (100vw - 768px) * 6 / 702);
  }

  .mp .section-1 .container {
    padding-bottom: calc(37px + (100vw - 768px) * 7 / 702);
  }

  .mp .section-1 a {
    margin-top: auto;
  }

  /* --- Блоки с блюром (2, 4, 6): в одну колонку, ссылка под текстом --- */

  .mp .section-2 .bottom .blur-content .blur-content-inner,
  .mp .section-4 .blur-content .blur-content-inner,
  .mp .section-6 .blur-content .blur-content-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 36px 0;
  }

  .mp .section-2 .bottom .blur-content .c1,
  .mp .section-4 .blur-content .c1,
  .mp .section-6 .blur-content .c1 {
    order: 1;
    gap: 8px;
    padding-bottom: 0;
  }

  .mp .section-2 .bottom .blur-content .c2,
  .mp .section-4 .blur-content .c2,
  .mp .section-6 .blur-content .c2 {
    order: 0;
    max-width: none;
  }

  /* --- Секция 2 --- */

  .mp .section-2 .bottom {
    padding-top: calc(257px + (100vw - 768px) * 121 / 702);
  }

  /* --- Секция 3 --- */

  .mp .section-3 .top {
    padding-top: calc(56px + (100vw - 768px) * 36 / 702);
  }

  .mp .section-3 .top .c2 {
    max-width: calc(689px - (100vw - 768px) * 118 / 702);
    margin-left: calc((100vw - 768px) * 493 / 702);
  }

  .mp .section-3 .middle {
    margin-top: calc(56px + (100vw - 768px) * 23 / 702);
  }

  .mp .section-3 .middle .item {
    height: auto;
    min-height: calc(183px + (100vw - 768px) * 110 / 702);
    padding: 0 max(var(--pad), calc((100% - 1330px) / 2));
    grid-template-columns: calc(337px + (100vw - 768px) * 136 / 702) 1fr;
    gap: calc(15px + (100vw - 768px) * 5 / 702);
  }

  .mp .section-3 .middle .item .c1 {
    margin-left: calc(var(--pad) * -1);
  }

  /* Пункт без фото занимает всю ширину строки. */
  .mp .section-3 .middle .item .c1:empty {
    display: none;
  }

  .mp .section-3 .middle .item .c1:empty + .c2 {
    grid-column: 1 / -1;
    padding: 40px 0;
  }

  .mp .section-3 .bottom {
    padding:
      calc(58px - (100vw - 768px) * 3 / 702)
      var(--pad)
      calc(77px + (100vw - 768px) * 43 / 702)
      calc(var(--pad) + (100vw - 768px) * 493 / 702);
  }

  /* --- Секция 4 --- */

  .mp .section-4 {
    padding-top: calc(401px + (100vw - 768px) * 63 / 702);
  }

  /* --- Секция 5 --- */

  .mp .section-5 .top {
    padding-top: calc(62px - (100vw - 768px) * 14 / 702);
    padding-bottom: calc(62px + (100vw - 768px) * 14 / 702);
  }

  .mp .section-5 .list {
    margin-top: 0;
  }

  /* Кадр остаётся в натуральную величину и сильнее уходит вправо. */
  .mp .section-5 .list .item-1 .c1 img {
    margin-right: calc((100vw - 768px) * 435 / 702 - 470px);
  }

  .mp .section-5 .list .item-2 .c1 img {
    width: calc(695px + (100vw - 768px) * 21 / 702);
    margin-right: calc((100vw - 768px) * 399 / 702 - 265px);
  }

  .mp .section-5 .list .item-3 .c1 img {
    width: calc(808px + (100vw - 768px) * 33 / 702);
    margin-right: calc((100vw - 768px) * 434 / 702 - 470px);
  }

  .mp .section-5 .list .item .c2 {
    padding-left: var(--pad);
    gap: calc(29px - (100vw - 768px) * 5 / 702);
  }

  .mp .section-5 .list .item:hover .c2 {
    padding-left: calc(var(--pad) + 30px + (100vw - 768px) * 40 / 702);
  }

  .mp .section-5 .list .item .c2 .r1 {
    width: calc(36px + (100vw - 768px) * 58 / 702);
  }

  .mp .section-5 .list .item .c2 .r2 {
    width: calc(318px + (100vw - 768px) * 6 / 702);
  }

  /* --- Секция 6 --- */

  .mp .section-6 {
    padding-top: calc(401px + (100vw - 768px) * 63 / 702);
  }

  /* --- Секция 7: картинка встаёт в поток под активный пункт --- */

  .mp .section-7 .top {
    padding-top: calc(68px - (100vw - 768px) * 20 / 702);
  }

  .mp .section-7 .bottom {
    padding: calc(65px - (100vw - 768px) * 17 / 702) 0 calc(118px + (100vw - 768px) * 2 / 702);
  }

  .mp .section-7 .accordion {
    display: flex;
    flex-direction: column;
  }

  .mp .section-7 .accordion .item:nth-child(2) {
    order: 1;
  }

  .mp .section-7 .accordion .item:nth-child(3) {
    order: 3;
  }

  .mp .section-7 .accordion .item:nth-child(4) {
    order: 5;
  }

  .mp .section-7 .accordion .item:nth-child(5) {
    order: 7;
  }

  .mp .section-7 .accordion .item,
  .mp .section-7 .accordion .item.is-active {
    height: auto;
    padding: 33px max(var(--pad), calc((100% - 1330px) / 2)) 40px;
  }

  .mp .section-7 .accordion .item.is-active {
    padding-bottom: 35px;
  }

  .mp .section-7 .accordion .item .c1 {
    width: 100%;
    margin-left: 0;
    padding-top: 0;
  }

  .mp .section-7 .accordion .item .r1 {
    height: auto;
  }

  .mp .section-7 .accordion .item .t1 {
    height: auto;
    display: block;
  }

  .mp .section-7 .accordion .item .t2 {
    display: none;
    opacity: 1;
  }

  .mp .section-7 .accordion .item.is-active .t2 {
    display: block;
  }

  .mp .section-7 .accordion .media {
    position: static;
    order: calc(var(--active, 0) * 2 + 2);
    width: 100%;
    height: 315px;
    transform: none;
    background: linear-gradient(90deg, #91a5ba 2.721%, #fff 114.56%);
  }

  .mp .section-7 .accordion .media img {
    width: 334px;
    height: 100%;
    margin-left: calc(var(--pad) + 118px);
    object-fit: cover;
  }

  /* --- Секция 8: заголовок над слайдером, а не поверх --- */

  .mp .section-8 {
    padding: 88px 0 calc(37px + (100vw - 768px) * 29 / 702);
  }

  /* Ширину заголовка не снимаем: без неё на 1469 он схлопывается
     в одну строку, и на границе брейкпоинта блок прыгает. */
  .mp .section-8 .top {
    margin-bottom: calc(20px + (100vw - 768px) * 30 / 702);
  }

  .mp .section-8 .track {
    gap: calc(16px + (100vw - 768px) * 17 / 702);
  }

  .mp .section-8 .track .item {
    width: calc(344px + (100vw - 768px) * 347 / 702);
  }

  .mp .section-8 .track .item .c1 {
    height: calc(142px + (100vw - 768px) * 150 / 702);
  }

  .mp .section-8 .track .item .c2 {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(32px + (100vw - 768px) * 59 / 702);
  }

  .mp .section-8 .track .item .r2 {
    width: 100%;
  }

  .mp .section-8 .bottom {
    margin-top: calc(88px - (100vw - 768px) * 38 / 702);
  }

  .mp .section-8 .nav button {
    width: calc(76.8px + (100vw - 768px) * 0.2 / 702);
    height: calc(76.8px + (100vw - 768px) * 0.2 / 702);
  }

  /* --- Подвал: логотип сверху, меню в столбик --- */

  .footer {
    display: flex;
    flex-direction: column;
    padding-top: calc(81px - (100vw - 768px) * 64 / 702);
  }

  .footer > .container:nth-child(1) {
    order: 2;
  }

  .footer > .container:nth-child(2) {
    order: 1;
  }

  .footer > .container:nth-child(3) {
    order: 3;
  }

  .footer .row-4 {
    order: 4;
    margin-top: calc(53px - (100vw - 768px) * 33 / 702);
  }

  .footer .row-1 {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(28px - (100vw - 768px) * 18 / 702);
  }

  .footer .row-2 {
    justify-content: flex-start;
    padding: 0;
    margin-bottom: calc(53px - (100vw - 768px) * 53 / 702);
  }

  .footer .row-2 a {
    display: block;
    width: 100%;
    max-width: 691px;
  }

  .footer .row-2 img {
    display: block;
    width: 100%;
    height: auto;
  }

  .footer .row-3 {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(24px - (100vw - 768px) * 14 / 702);
    margin-top: calc(66px - (100vw - 768px) * 66 / 702);
  }

  .footer .row-4-inner {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    row-gap: 20px;
  }

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

/* ------------------------------------------------------------------
   Панель меню шириной 998px перекрывает правую часть шапки, пока окно
   уже 1168px (998 + 170 на поиск и язык). На белой панели светлые
   иконки не видны, поэтому там шапка переходит в тёмный вариант.
   ------------------------------------------------------------------ */

@media screen and (max-width: 1167px) {
  .header.is-menu::before {
    transition: all 0.4s ease;
    opacity: 1;
    background: #fff;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }

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

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

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

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

/* ------------------------------------------------------------------
   Полноэкранное меню: две колонки перестают помещаться раньше,
   чем ломается сетка страницы, поэтому у него своя граница.
   ------------------------------------------------------------------ */

@media screen and (max-width: 1023px) {
  .fullscreen-menu {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: clamp(48px, calc(67px - (100vw - 375px) * 19 / 649), 67px);
    padding:
      clamp(85px, calc(126px - (100vw - 375px) * 41 / 649), 126px)
      var(--pad)
      clamp(40px, calc(40px + (100vw - 375px) * 8 / 649), 48px);
  }

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

  .fullscreen-menu .fullscreen-menu-logo {
    margin-bottom: clamp(48px, calc(48px + (100vw - 375px) * 36 / 649), 84px);
  }

  .fullscreen-menu .fullscreen-menu-nav a {
    font-size: clamp(24px, calc(24px + (100vw - 375px) * 27 / 649), 51px);
    line-height: clamp(32px, calc(32px + (100vw - 375px) * 10 / 649), 42px);
  }

  .fullscreen-menu .fullscreen-menu-address {
    font-size: clamp(14px, calc(14px + (100vw - 375px) * 4 / 649), 18px);
    line-height: clamp(22px, calc(22px + (100vw - 375px) * 2 / 649), 24px);
  }

  .fullscreen-menu .fullscreen-menu-phone {
    font-size: clamp(24px, calc(24px + (100vw - 375px) * 8 / 649), 32px);
    line-height: clamp(32px, calc(32px + (100vw - 375px) * 6 / 649), 38px);
  }

  .fullscreen-menu .fullscreen-menu-hours {
    font-size: clamp(14px, calc(14px + (100vw - 375px) * 2 / 649), 16px);
    line-height: clamp(20px, calc(20px + (100vw - 375px) * 2 / 649), 22px);
  }
}

/* ------------------------------------------------------------------
   320 — 767
   ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  :root {
    --pad: clamp(16px, calc(16px + (100vw - 375px) * 24 / 392), 40px);
  }

  body {
    overflow-wrap: break-word;
  }

  /* Жёсткие переносы макета рассчитаны на широкие колонки —
     на узких экранах текст ломается по месту. */
  .mp br,
  .footer .row-4 br {
    display: none;
  }

  .mp .section-8 .track .item .d2 br {
    display: inline;
  }

  /* --- Шапка: бургер + логотип --- */

  .header-inner {
    height: 65px;
  }

  .header .header-burger {
    width: 65px;
    height: 65px;
  }

  .header .header-burger svg {
    width: 31px;
    height: 10px;
  }

  .header .header-logo {
    position: static;
    transform: none;
    margin: 0 auto 0 10px;
    min-width: 0;
    overflow: hidden;
  }

  /* Логотип в потоке, поэтому в открытых состояниях его нужно
     схлопнуть — иначе он держит место между бургером и кнопками. */
  .header.is-menu .header-logo,
  .header.is-search .header-logo {
    transform: translateY(-65px);
    width: 0;
    margin: 0;
  }

  .header .header-logo img {
    top: 0;
    width: min(283px, calc(100vw - 92px));
    height: auto;
  }

  /* Поиск и язык в макете есть только у открытого меню. */
  .header .header-r {
    display: none;
  }

  .header.is-menu .header-r {
    display: flex;
  }

  .header .header-search,
  .header .header-lang {
    width: 65px;
    height: 65px;
  }

  .header.is-menu .header-search {
    background: none;
    border-color: transparent;
    backdrop-filter: none;
  }

  .header.is-menu .header-lang {
    background: #f4f6f8;
  }

  .header.is-menu .header-search svg path {
    stroke: #91a5ba;
  }

  .header.is-menu .header-search:hover {
    background: #91a5ba;
  }

  .header.is-menu .header-search:hover svg path {
    stroke: #fff;
  }

  /* --- Строка поиска --- */

  .header .header-search-bar {
    height: 65px;
  }

  .header.is-search .header-search-bar {
    width: calc(100% - 65px);
    padding: 0 16px 0 10px;
  }

  .header .header-search-field {
    height: 37px;
    gap: 12px;
  }

  .header .header-search-field > svg {
    width: 25px;
    height: 25px;
  }

  .header .header-search-input {
    font-size: 14px;
    line-height: 22px;
  }

  /* --- Стрелки-ссылки --- */

  .mp .section-2 .bottom .blur-content .c1 a,
  .mp .section-4 .blur-content .c1 a,
  .mp .section-6 .blur-content .c1 a,
  .mp .section-8 .bottom .all {
    gap: 12px;
  }

  .mp .section-2 .bottom .blur-content .c1 a span,
  .mp .section-4 .blur-content .c1 a span,
  .mp .section-6 .blur-content .c1 a span,
  .mp .section-8 .bottom .all span {
    font-size: 12px;
    line-height: 17px;
  }

  .mp .section-2 .bottom .blur-content .c1 a svg,
  .mp .section-4 .blur-content .c1 a svg,
  .mp .section-6 .blur-content .c1 a svg,
  .mp .section-8 .bottom .all svg {
    width: 26px;
    height: 12px;
  }

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

  .mp .section-1 {
    min-height: clamp(700px, calc(736px + (100vw - 375px) * 105 / 393), 841px);
    padding-top: calc(85px + (100vw - 375px) * 28 / 393);
  }

  .mp .section-1 h1 {
    font-size: min(58px, 15.47vw);
    line-height: min(63px, 16.8vw);
    /* Первая строка вынесена отступом за пределы min-content —
       на узких экранах отступ ужимается, чтобы буквы не срезало. */
    text-indent: min(65px, calc(100vw - var(--pad) * 2 - 4.95em));
  }

  .mp .section-1 h3 {
    max-width: 263px;
    margin-top: 24px;
    font-size: 14px;
    line-height: 22px;
  }

  .mp .section-1 .container {
    padding-bottom: calc(54px - (100vw - 375px) * 17 / 393);
  }

  .mp .section-1 a {
    gap: 14px;
  }

  .mp .section-1 a span {
    font-size: 12px;
    line-height: 17px;
  }

  .mp .section-1 a svg {
    width: 14px;
    height: 28px;
  }

  /* --- Секция 2 --- */

  .mp .section-2 .top {
    padding:
      calc(64px - (100vw - 375px) * 7 / 393) 0
      calc(76px - (100vw - 375px) * 20 / 393);
  }

  .mp .section-2 .top .r1 {
    margin-bottom: calc(16px + (100vw - 375px) * 16 / 393);
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .mp .section-2 .top .r2 {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .mp .section-2 .bottom {
    padding-top: calc(328px - (100vw - 375px) * 71 / 393);
  }

  .mp .section-2 .bottom .blur-content .blur-content-inner,
  .mp .section-4 .blur-content .blur-content-inner,
  .mp .section-6 .blur-content .blur-content-inner {
    gap: 32px;
    padding: 28px 0;
  }

  .mp .section-2 .bottom .blur-content .c1,
  .mp .section-4 .blur-content .c1,
  .mp .section-6 .blur-content .c1 {
    gap: 6px;
  }

  .mp .section-2 .bottom .blur-content .c2 .r1 {
    font-size: calc(80px + (100vw - 375px) * 40 / 393);
    line-height: calc(80px + (100vw - 375px) * 40 / 393);
  }

  .mp .section-2 .bottom .blur-content .c2 .r2,
  .mp .section-4 .blur-content .c2,
  .mp .section-6 .blur-content .c2 {
    font-size: calc(16px + (100vw - 375px) * 8 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }

  /* --- Секция 3 --- */

  .mp .section-3 .top {
    padding-top: calc(64px - (100vw - 375px) * 8 / 393);
  }

  .mp .section-3 .top .c1 {
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .mp .section-3 .top .c2 {
    max-width: none;
    margin: calc(16px + (100vw - 375px) * 16 / 393) 0 0 0;
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .mp .section-3 .middle {
    margin-top: calc(64px - (100vw - 375px) * 8 / 393);
  }

  .mp .section-3 .middle .item {
    display: block;
    height: auto;
    padding: 0;
  }

  .mp .section-3 .middle .item .c1 {
    width: 100vw;
    height: calc(182px + (100vw - 375px) * 1 / 393);
    margin-left: calc(50% - 50vw);
    border-right: 0;
  }

  .mp .section-3 .middle .item .c1:empty {
    display: none;
  }

  .mp .section-3 .middle .item .c2,
  .mp .section-3 .middle .item .c1:empty + .c2 {
    padding: 40px var(--pad);
  }

  .mp .section-3 .middle .item .c2 .r1 {
    font-size: calc(58px + (100vw - 375px) * 12 / 393);
  }

  .mp .section-3 .middle .item .c2 .r2 {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .mp .section-3 .bottom {
    padding: 40px var(--pad) calc(80px - (100vw - 375px) * 3 / 393) var(--pad);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  /* --- Секции 4 и 6 --- */

  .mp .section-4 {
    padding-top: calc(460px - (100vw - 375px) * 59 / 393);
  }

  .mp .section-6 {
    padding-top: calc(423px - (100vw - 375px) * 22 / 393);
  }

  /* --- Секция 5: текст, под ним картинка во всю ширину --- */

  .mp .section-5 .top {
    padding-top: calc(64px - (100vw - 375px) * 2 / 393);
    padding-bottom: calc(66px - (100vw - 375px) * 4 / 393);
  }

  .mp .section-5 .top .r1 {
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .mp .section-5 .top .r2 {
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .mp .section-5 .list {
    margin-top: calc(38px - (100vw - 375px) * 38 / 393);
  }

  .mp .section-5 .list .item {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .mp .section-5 .list .item + .item {
    margin-top: 40px;
  }

  .mp .section-5 .list .item .c1,
  .mp .section-5 .list .item:hover .c1 {
    order: 1;
    width: 100vw;
    height: calc(160px + (100vw - 375px) * 84 / 393);
    margin: 36px 0 0 calc(50% - 50vw);
    padding: 0;
    justify-content: center;
    background: #fff;
  }

  /* Кадр в макете шире экрана и обрезан с двух сторон. */
  .mp .section-5 .list .item .c1 img,
  .mp .section-5 .list .item-1 .c1 img,
  .mp .section-5 .list .item-2 .c1 img,
  .mp .section-5 .list .item-3 .c1 img {
    width: 124%;
    height: 100%;
    margin: 0;
    object-fit: cover;
  }

  .mp .section-5 .list .item-1 .c1 img {
    object-position: bottom;
  }

  .mp .section-5 .list .item .c2,
  .mp .section-5 .list .item:hover .c2 {
    order: 0;
    padding: 0 var(--pad);
    gap: 24px;
  }

  .mp .section-5 .list .item .c2 .r1,
  .mp .section-5 .list .item:hover .c2 .r1 {
    width: 35px;
    color: #91a5ba;
    font-weight: 400;
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .mp .section-5 .list .item .c2 .r2 {
    width: auto;
    flex: 1;
    min-width: 0;
    gap: 16px;
  }

  .mp .section-5 .list .item .c2 .t1 {
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px - (100vw - 375px) * 4 / 393);
  }

  .mp .section-5 .list .item .c2 .t2,
  .mp .section-5 .list .item:hover .c2 .t2 {
    color: #91a5ba;
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  /* --- Секция 7 --- */

  .mp .section-7 .top {
    padding-top: calc(64px + (100vw - 375px) * 4 / 393);
  }

  .mp .section-7 .top .r1 {
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .mp .section-7 .top .r2 {
    max-width: none;
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .mp .section-7 .bottom {
    padding:
      calc(64px + (100vw - 375px) * 1 / 393) 0
      calc(80px + (100vw - 375px) * 38 / 393);
  }

  .mp .section-7 .accordion .item,
  .mp .section-7 .accordion .item.is-active {
    padding: 33px var(--pad) 34px;
  }

  .mp .section-7 .accordion .item.is-active {
    padding-top: 20px;
    padding-bottom: 36px;
  }

  .mp .section-7 .accordion .item .c1 {
    gap: 24px;
  }

  .mp .section-7 .accordion .item .r1 {
    width: calc(34px + (100vw - 375px) * 60 / 393);
    padding-top: 6px;
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .mp .section-7 .accordion .item .t1 {
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px - (100vw - 375px) * 4 / 393);
  }

  .mp .section-7 .accordion .item .t2 {
    max-width: none;
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .mp .section-7 .accordion .media {
    --acc-img-x: calc(59px + (100vw - 375px) * 59 / 393);
    height: calc(268px + (100vw - 375px) * 47 / 393);
  }

  .mp .section-7 .accordion .media img {
    width: min(
      calc(284px + (100vw - 375px) * 50 / 393),
      calc(100vw - var(--pad) * 2 - var(--acc-img-x))
    );
    margin-left: calc(var(--pad) + var(--acc-img-x));
  }

  /* --- Секция 8 --- */

  .mp .section-8 {
    padding:
      calc(45px + (100vw - 375px) * 43 / 393) 0
      calc(65px - (100vw - 375px) * 28 / 393);
  }

  .mp .section-8 .top {
    margin-bottom: calc(32px - (100vw - 375px) * 12 / 393);
  }

  .mp .section-8 .top .r1 {
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .mp .section-8 .track {
    gap: calc(11px + (100vw - 375px) * 5 / 393);
  }

  .mp .section-8 .track .item {
    width: calc(255px + (100vw - 375px) * 89 / 393);
  }

  .mp .section-8 .track .item .c1 {
    height: calc(108px + (100vw - 375px) * 34 / 393);
  }

  .mp .section-8 .track .item .c2 {
    gap: calc(24px + (100vw - 375px) * 8 / 393);
  }

  .mp .section-8 .track .item .d1 {
    font-size: calc(50px + (100vw - 375px) * 20 / 393);
    line-height: calc(50px + (100vw - 375px) * 15 / 393);
  }

  .mp .section-8 .track .item .d2 {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .mp .section-8 .track .item .r2 {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .mp .section-8 .bottom {
    margin-top: calc(44px + (100vw - 375px) * 44 / 393);
  }

  .mp .section-8 .nav {
    gap: calc(12.75px + (100vw - 375px) * 4.25 / 393);
  }

  .mp .section-8 .nav button {
    width: calc(57.6px + (100vw - 375px) * 19.2 / 393);
    height: calc(57.6px + (100vw - 375px) * 19.2 / 393);
  }

  .mp .section-8 .nav button svg {
    width: calc(24.7px + (100vw - 375px) * 8.3 / 393);
    height: calc(13.5px + (100vw - 375px) * 4.5 / 393);
  }

  /* --- Подвал --- */

  .footer {
    padding-top: calc(62px + (100vw - 375px) * 19 / 393);
    padding-bottom: calc(67px - (100vw - 375px) * 41 / 393);
  }

  .footer .row-1 {
    gap: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .footer .row-1 a {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 6 / 393);
  }

  .footer .row-2 {
    margin-bottom: calc(61px - (100vw - 375px) * 8 / 393);
  }

  .footer .row-3 {
    gap: calc(16px + (100vw - 375px) * 8 / 393);
    margin-top: calc(67px - (100vw - 375px) * 1 / 393);
  }

  .footer .row-4 {
    margin-top: calc(32px + (100vw - 375px) * 21 / 393);
  }

  .footer .row-4-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    padding-top: calc(37px - (100vw - 375px) * 25 / 393);
  }

  .footer .row-4 .c3 {
    margin-top: 16px;
  }
}


@media screen and (max-width: 767px) {
  .cookie-inner {
    gap: 16px;
    padding: 16px var(--pad);
  }
}

@media screen and (max-width: 519px) {
  .cookie-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .cookie-accept {
    width: 100%;
  }
}

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

/* ==================================================================
   «О компании»: 768 — 1469
   ================================================================== */

@media screen and (max-width: 1469px) {
  .ab {
    /* Правая колонка схлопывается: к 768 весь текст встаёт по левому краю. */
    --col: calc((100vw - 768px) * 564 / 702);
    --nav-size: 76.8px;
    /* Насколько стрелки свисают ниже ленты. В макете 1470 они стоят в пустой
       левой колонке, но она узкая — ниже 1417 кнопки налезли бы на кадры. */
    --nav-drop: max(0px, calc(92.8px - (100vw - 768px) * 92.8 / 649));
  }

  .ab .nav button {
    width: var(--nav-size);
    height: var(--nav-size);
  }

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

  .ab .section-1 {
    padding-top: calc(113px + (100vw - 768px) * 85 / 702);
    padding-bottom: calc(58px - (100vw - 768px) * 3 / 702);
  }

  .ab .section-1 h1 {
    margin-top: calc(189px - (100vw - 768px) * 41 / 702);
  }

  .ab .section-1 .lead {
    max-width: calc(652px + (100vw - 768px) * 197 / 702);
    margin-left: calc((100vw - 768px) * 230 / 702);
  }

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

  .ab .section-2 {
    padding-top: calc(45px + (100vw - 768px) * 3 / 702);
  }

  .ab .section-2::before {
    height: calc(887px + (100vw - 768px) * 138 / 702);
  }

  .ab .section-2 .r2 {
    max-width: calc(690px - (100vw - 768px) * 91 / 702);
    margin-top: calc(32px + (100vw - 768px) * 16 / 702);
  }

  .ab .section-2 .r3 {
    justify-content: flex-start;
    gap: calc(23px + (100vw - 768px) * 79 / 702);
  }

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

  .ab .section-3 {
    padding-top: calc(115px + (100vw - 768px) * 5 / 702);
  }

  .ab .section-3 .video {
    width: calc(100% - (100vw - 768px) * 272 / 702);
    margin-left: calc((100vw - 768px) * 136 / 702);
  }

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

  .ab .section-4 {
    padding-top: calc(60px - (100vw - 768px) * 12 / 702);
  }

  .ab .section-4 .top .r2 {
    max-width: calc(695px - (100vw - 768px) * 124 / 702);
    margin-top: calc(32px + (100vw - 768px) * 16 / 702);
  }

  .ab .section-4 .slider {
    margin-top: calc(94px - (100vw - 768px) * 30 / 702);
  }

  .ab .section-4 .slider .item {
    height: calc(401px + (100vw - 768px) * 364 / 702);
  }

  .ab .section-4 .slider .nav {
    left: max(calc(20px + (100vw - 768px) * 20 / 702), calc((100% - 1330px) / 2));
    bottom: calc(20px + (100vw - 768px) * 26 / 702);
  }

  /* --- Технологии восстановления и площадка в Пущино --- */

  .ab .section-5 {
    padding-top: calc(60px - (100vw - 768px) * 12 / 702);
    padding-bottom: calc(66px + (100vw - 768px) * 59 / 702 + var(--nav-drop));
  }

  .ab .section-8 {
    padding-top: calc(100px + (100vw - 768px) * 20 / 702);
    padding-bottom: var(--nav-drop);
  }

  .ab .section-5 .top .r1,
  .ab .section-5 .top .r2,
  .ab .section-8 .top .r1,
  .ab .section-8 .top .r2 {
    max-width: calc(692px + (100vw - 768px) * 21 / 702);
  }

  .ab .section-5 .slider,
  .ab .section-8 .slider {
    margin-top: calc(60px - (100vw - 768px) * 12 / 702);
  }

  .ab .section-5 .slider .track,
  .ab .section-8 .slider .track {
    gap: calc(17px + (100vw - 768px) * 7 / 702);
  }

  .ab .section-5 .slider .item,
  .ab .section-8 .slider .item {
    flex-basis: calc(511.6px + (100vw - 768px) * 180.4 / 702);
    height: calc(335.9px + (100vw - 768px) * 119.1 / 702);
  }

  .ab .section-5 .slider .nav,
  .ab .section-8 .slider .nav {
    left: calc((100vw - 768px) * 379 / 702);
    bottom: calc(var(--nav-drop) * -1);
  }

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

  .ab .section-6 {
    padding-top: calc(95px + (100vw - 768px) * 4 / 702);
  }

  .ab .section-6 .top .r1 {
    font-size: calc(70px + (100vw - 768px) * 50 / 702);
    line-height: calc(75px + (100vw - 768px) * 45 / 702);
  }

  .ab .section-6 .top .r2 {
    max-width: calc(688px + (100vw - 768px) * 241 / 702);
  }

  .ab .section-6 .top .r3 {
    max-width: calc(688px + (100vw - 768px) * 41 / 702);
  }

  .ab .section-6 .cards {
    margin-top: calc(84px + (100vw - 768px) * 36 / 702);
  }

  /* Высота карточки — минимум: текст на промежуточных ширинах ломается
     иначе, чем в макете, и жёсткая высота его бы обрезала. */
  .ab .section-6 .card {
    height: auto;
    min-height: calc(770px - (100vw - 768px) * 161 / 702);
  }

  .ab .section-6 .card {
    --scrim-solid: calc(243px - (100vw - 768px) * 243 / 702);
    --scrim-end: calc(715px - (100vw - 768px) * 715 / 702);
  }

  .ab .section-6 .card-1 .pic {
    width: calc(466px + (100vw - 768px) * 136.7 / 702);
  }

  .ab .section-6 .card-2 .pic {
    width: calc(413px + (100vw - 768px) * 183.8 / 702);
  }

  .ab .section-6 .card-3 .pic {
    width: calc(417px + (100vw - 768px) * 147.5 / 702);
  }

  /* Карточка стала выше кадра — тянем кадр по высоте, иначе снизу
     остаётся полоса фона. */
  .ab .section-6 .card .pic img,
  .ab .section-6 .card-2 .pic img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
  }

  .ab .section-6 .card-inner {
    padding-top: calc(88px - (100vw - 768px) * 25 / 702);
    padding-bottom: calc(53px + (100vw - 768px) * 10 / 702);
  }

  .ab .section-6 .body {
    width: calc(574px + (100vw - 768px) * 240 / 702);
    height: auto;
    min-height: calc(629px - (100vw - 768px) * 146 / 702);
  }

  .ab .section-6 .t3 {
    max-width: calc(558px + (100vw - 768px) * 135 / 702);
  }

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

  .ab .section-7 {
    padding-top: calc(73px + (100vw - 768px) * 47 / 702);
    padding-bottom: calc(100px + (100vw - 768px) * 13 / 702);
  }

  /* Полосой в потоке: так место под карту не надо отмерять руками,
     и на промежуточных ширинах её не накрывает счётчик. */
  .ab .section-7 .map {
    position: static;
    display: block;
    width: calc(694px + (100vw - 768px) * 666 / 702);
    margin: calc(27px + (100vw - 768px) * 25 / 702) 0 0 auto;
  }

  .ab .section-7 .top .r2 {
    max-width: calc(691px - (100vw - 768px) * 239 / 702);
  }

  /* Карта тут в потоке не участвует, поэтому место под неё
     отмеряет верхний отступ счётчика. */
  .ab .section-7 .count {
    margin-top: calc(4px + (100vw - 768px) * 48 / 702);
    margin-left: calc((100vw - 768px) * 826 / 702);
  }

  .ab .section-7 .count .c2 {
    margin-left: calc(80px - (100vw - 768px) * 20 / 702);
  }

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

  .ab .section-9 {
    margin-top: calc(100px + (100vw - 768px) * 20 / 702);
  }

  .ab .section-9 .blur-content-inner {
    max-width: calc(682px + (100vw - 768px) * 122 / 702);
    margin-left: calc((100vw - 768px) * 458 / 702);
  }
}

/* ==================================================================
   «О компании»: 320 — 767
   ================================================================== */

@media screen and (max-width: 767px) {
  .ab {
    --col: 0px;
    --nav-size: calc(38.4px + (100vw - 375px) * 38.4 / 393);
    --nav-drop: calc(54.4px + (100vw - 375px) * 38.4 / 393);
  }

  /* Жёсткие переносы макета рассчитаны на широкие колонки. */
  .ab br {
    display: none;
  }

  .ab .nav {
    gap: calc(8.5px + (100vw - 375px) * 8.5 / 393);
  }

  .ab .nav button svg {
    width: calc(16.5px + (100vw - 375px) * 16.5 / 393);
    height: calc(9px + (100vw - 375px) * 9 / 393);
  }

  /* --- Общая типографика страницы --- */

  .ab .section-2 .r1,
  .ab .section-4 .top .r1,
  .ab .section-5 .top .r1,
  .ab .section-6 .top .r2,
  .ab .section-6 .t2,
  .ab .section-7 .top .r1,
  .ab .section-8 .top .r1 {
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .ab .section-1 .crumbs,
  .ab .section-2 .r2,
  .ab .section-2 .r3 .t2,
  .ab .section-4 .top .r2,
  .ab .section-5 .top .r2,
  .ab .section-6 .top .r3,
  .ab .section-6 .t3,
  .ab .section-7 .top .r2,
  .ab .section-8 .top .r2 {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
  }

  .ab .section-2 .r2,
  .ab .section-2 .r3 .t2,
  .ab .section-4 .top .r2,
  .ab .section-5 .top .r2,
  .ab .section-6 .top .r3,
  .ab .section-6 .t3,
  .ab .section-7 .top .r2,
  .ab .section-8 .top .r2 {
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .ab .section-1 .lead,
  .ab .section-6 .t1 {
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px + (100vw - 375px) * 10 / 393);
  }

  .ab .section-2 .r2,
  .ab .section-4 .top .r2,
  .ab .section-5 .top .r1,
  .ab .section-5 .top .r2,
  .ab .section-6 .top .r2,
  .ab .section-6 .top .r3,
  .ab .section-6 .t3,
  .ab .section-7 .top .r2,
  .ab .section-8 .top .r1,
  .ab .section-8 .top .r2 {
    max-width: none;
  }

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

  .ab .section-1 {
    min-height: calc(736px + (100vw - 375px) * 14 / 393);
    padding-top: calc(114px - (100vw - 375px) * 1 / 393);
    padding-bottom: calc(77px - (100vw - 375px) * 19 / 393);
  }

  .ab .section-1 h1 {
    margin-top: calc(206px - (100vw - 375px) * 17 / 393);
    font-size: calc(45px + (100vw - 375px) * 75 / 393);
    line-height: calc(55px + (100vw - 375px) * 109 / 393);
  }

  .ab .section-1 .lead {
    max-width: calc(325px + (100vw - 375px) * 327 / 393);
    margin-top: calc(32px - (100vw - 375px) * 2 / 393);
    margin-left: 0;
  }

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

  .ab .section-2 {
    padding-top: calc(64px - (100vw - 375px) * 19 / 393);
  }

  .ab .section-2::before {
    height: calc(863px + (100vw - 375px) * 24 / 393);
  }

  .ab .section-2 .r2 {
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
  }

  .ab .section-2 .r3 {
    flex-direction: column;
    gap: calc(32px - (100vw - 375px) * 9 / 393);
  }

  /* Ширина из макета 1470 осталась бы поперёк колонки. */
  .ab .section-2 .r3 .item {
    width: 100%;
    max-width: none;
  }

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

  .ab .section-3 {
    padding-top: calc(55px + (100vw - 375px) * 60 / 393);
  }

  .ab .section-3 .video {
    width: 100%;
    margin-left: 0;
  }

  .ab .section-3 .video .play {
    width: calc(50px + (100vw - 375px) * 50 / 393);
    height: calc(50px + (100vw - 375px) * 50 / 393);
  }

  .ab .section-3 .video .play svg {
    width: calc(14.5px + (100vw - 375px) * 14.5 / 393);
    height: calc(18.5px + (100vw - 375px) * 18.5 / 393);
  }

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

  .ab .section-4 {
    padding-top: calc(65px - (100vw - 375px) * 5 / 393);
    /* Стрелки уехали под ленту — освобождаем им место в потоке. */
    padding-bottom: max(0px, calc(54.2px - (100vw - 375px) * 74.2 / 393));
  }

  .ab .section-4 .top .r2 {
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
  }

  .ab .section-4 .slider {
    margin-top: calc(64px + (100vw - 375px) * 30 / 393);
  }

  .ab .section-4 .slider .item {
    height: calc(199px + (100vw - 375px) * 202 / 393);
  }

  .ab .section-4 .slider .nav {
    left: calc(17px + (100vw - 375px) * 3 / 393);
    bottom: calc((100vw - 375px) * 74.2 / 393 - 54.2px);
  }

  /* --- Технологии восстановления и площадка в Пущино --- */

  .ab .section-5 {
    padding-top: calc(80px - (100vw - 375px) * 20 / 393);
    padding-bottom: calc(64px + (100vw - 375px) * 2 / 393 + var(--nav-drop));
  }

  .ab .section-8 {
    padding-top: calc(64px + (100vw - 375px) * 36 / 393);
  }

  .ab .section-5 .top .r2,
  .ab .section-8 .top .r2 {
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
  }

  .ab .section-5 .slider,
  .ab .section-8 .slider {
    margin-top: calc(64px - (100vw - 375px) * 4 / 393);
  }

  .ab .section-5 .slider .track,
  .ab .section-8 .slider .track {
    gap: calc(9.8px + (100vw - 375px) * 7.2 / 393);
  }

  .ab .section-5 .slider .item,
  .ab .section-8 .slider .item {
    flex-basis: calc(282.7px + (100vw - 375px) * 228.9 / 393);
    height: calc(185.9px + (100vw - 375px) * 150 / 393);
  }

  .ab .section-5 .slider .nav,
  .ab .section-8 .slider .nav {
    left: 0;
  }

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

  .ab .section-6 {
    padding-top: calc(70px + (100vw - 375px) * 25 / 393);
  }

  .ab .section-6 .top .r1 {
    font-size: calc(40px + (100vw - 375px) * 30 / 393);
    line-height: calc(50px + (100vw - 375px) * 25 / 393);
  }

  .ab .section-6 .top .r2 {
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
  }

  .ab .section-6 .cards {
    margin-top: calc(91px - (100vw - 375px) * 7 / 393);
  }

  .ab .section-6 .card {
    min-height: calc(808px - (100vw - 375px) * 38 / 393);
  }

  .ab .section-6 .card {
    --scrim-solid: calc(188px + (100vw - 375px) * 55 / 393);
    --scrim-end: calc(654px + (100vw - 375px) * 61 / 393);
  }

  .ab .section-6 .card-1 .pic,
  .ab .section-6 .card-2 .pic,
  .ab .section-6 .card-3 .pic {
    width: 100%;
  }

  /* Номер и логотип встают над текстом. */
  .ab .section-6 .card-inner {
    flex-direction: column;
    gap: calc(32px - (100vw - 375px) * 12 / 393);
    padding-top: calc(56px + (100vw - 375px) * 32 / 393);
    padding-bottom: calc(56px - (100vw - 375px) * 3 / 393);
  }

  .ab .section-6 .num {
    width: 100%;
    margin-top: 0;
    text-align: left;
  }

  .ab .section-6 .body {
    width: 100%;
    min-height: 0;
    gap: 32px;
    justify-content: flex-start;
  }

  .ab .section-6 .t3 {
    max-width: none;
  }

  .ab .section-6 .foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .ab .section-6 .link {
    gap: calc(12px + (100vw - 375px) * 4 / 393);
    font-size: calc(12px + (100vw - 375px) * 4 / 393);
    line-height: calc(17px + (100vw - 375px) * 5 / 393);
  }

  .ab .section-6 .link svg {
    width: calc(26px + (100vw - 375px) * 8 / 393);
    height: calc(12px + (100vw - 375px) * 4 / 393);
  }

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

  .ab .section-7 {
    padding-top: calc(64px + (100vw - 375px) * 9 / 393);
    padding-bottom: calc(64px + (100vw - 375px) * 36 / 393);
  }

  .ab .section-7 .map {
    width: calc(342px + (100vw - 375px) * 352 / 393);
    margin-top: calc(11px + (100vw - 375px) * 16 / 393);
  }

  .ab .section-7 .top .r2 {
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
  }

  .ab .section-7 .count {
    margin-top: calc(11px - (100vw - 375px) * 7 / 393);
    margin-left: 0;
  }

  .ab .section-7 .count .c1 {
    font-size: calc(80px + (100vw - 375px) * 40 / 393);
    line-height: calc(80px + (100vw - 375px) * 40 / 393);
  }

  .ab .section-7 .count .c2 {
    max-width: calc(334px + (100vw - 375px) * 109 / 393);
    margin-left: calc((100vw - 375px) * 80 / 393);
    font-size: calc(14px + (100vw - 375px) * 10 / 393);
    line-height: calc(22px + (100vw - 375px) * 14 / 393);
  }

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

  .ab .section-9 {
    min-height: calc(655px + (100vw - 375px) * 22 / 393);
    margin-top: calc(63.6px + (100vw - 375px) * 36.4 / 393);
  }

  .ab .section-9 .title {
    font-size: calc(58px + (100vw - 375px) * 62 / 393);
    line-height: calc(64px + (100vw - 375px) * 56 / 393);
  }

  .ab .section-9 .blur-content-inner {
    max-width: none;
    margin-left: 0;
    padding-top: calc(34px + (100vw - 375px) * 4 / 393);
    padding-bottom: calc(41px + (100vw - 375px) * 2 / 393);
    font-size: calc(16px + (100vw - 375px) * 8 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }
}

/* ==================================================================
   «Лицензии» и «Поставщикам»: 768 — 1469
   ================================================================== */

@media screen and (max-width: 1469px) {
  .lc,
  .sp,
  .dv,
  .ct,
  .cr {
    --col: calc((100vw - 768px) * 564 / 702);
  }

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

  .lc .section-1,
  .sp .section-1,
  .dv .section-1 {
    padding-top: calc(242px - (100vw - 768px) * 43 / 702);
  }

  .lc .section-1 h1,
  .sp .section-1 h1,
  .dv .section-1 h1,
  .ct .section-1 h1,
  .cr .section-1 h1 {
    font-size: calc(70px + (100vw - 768px) * 30 / 702);
    line-height: calc(75px + (100vw - 768px) * 25 / 702);
  }

  /* --- Лицензии --- */

  .lc .section-2 {
    padding-bottom: calc(185px - (100vw - 768px) * 65 / 702);
  }

  .lc .section-2 .list {
    margin-top: calc(51px - (100vw - 768px) * 3 / 702);
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- Поставщикам --- */

  .sp .section-2 .band {
    padding-top: calc(59px - (100vw - 768px) * 11 / 702);
    padding-bottom: calc(67px + (100vw - 768px) * 2 / 702);
  }

  .sp .section-2 .r1 {
    max-width: calc(691px + (100vw - 768px) * 386 / 702);
  }

  .sp .section-2 .r2 {
    margin-top: calc(32px + (100vw - 768px) * 16 / 702);
  }

  .sp .section-3 .list {
    margin-top: calc(75px - (100vw - 768px) * 25 / 702);
  }

  .sp .section-3 .top .r1 {
    max-width: calc(682px + (100vw - 768px) * 230 / 702);
  }

  .sp .section-4 {
    --nav-size: 77px;
    /* Стрелки живут в пустой левой колонке; она схлопывается,
       и ниже 1417 кнопки уезжают под ленту. */
    --nav-drop: max(0px, calc(93px - (100vw - 768px) * 93 / 649));
    padding-top: calc(75px - (100vw - 768px) * 9 / 702);
    padding-bottom: calc(108px + (100vw - 768px) * 5 / 702 + var(--nav-drop));
  }

  .sp .section-4 .r1 {
    max-width: calc(687px + (100vw - 768px) * 225 / 702);
  }

  .sp .section-4 .slider .viewport {
    margin-left: calc((100vw - 768px) * 339 / 702);
  }

  .sp .section-4 .slider .nav {
    bottom: calc(var(--nav-drop) * -1);
  }

  .sp .section-4 .slider .nav button {
    width: var(--nav-size);
    height: var(--nav-size);
  }

  .sp .section-5 {
    padding-top: calc(91px - (100vw - 768px) * 33 / 702);
    padding-bottom: calc(85px - (100vw - 768px) * 19 / 702);
  }

  .sp .section-5 .top .r1 {
    max-width: calc(687px + (100vw - 768px) * 390 / 702);
  }

  /* Форма уходит под контакты — рядом она помещается только на 1470. */
  .sp .section-5 .cols {
    margin-top: calc(33px + (100vw - 768px) * 14 / 702);
    flex-direction: column;
    gap: calc(62px - (100vw - 768px) * 0 / 702);
  }

  .sp .section-5 .cols .c1,
  .sp .section-5 .cols .c2 {
    width: 100%;
    margin-left: 0;
  }
}

/* ==================================================================
   «Лицензии» и «Поставщикам»: 320 — 767
   ================================================================== */

@media screen and (max-width: 767px) {
  .lc,
  .sp,
  .dv,
  .ct,
  .cr {
    --col: 0px;
  }

  .lc br,
  .sp br,
  .dv br,
  .ct br,
  .cr br {
    display: none;
  }

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

  .lc .section-1,
  .sp .section-1,
  .dv .section-1,
  .cr .section-1 {
    min-height: calc(736px - (100vw - 375px) * 44 / 393);
    padding-top: calc(114px + (100vw - 375px) * 128 / 393);
  }

  .lc .section-1 .crumbs,
  .sp .section-1 .crumbs,
  .dv .section-1 .crumbs,
  .ct .section-1 .crumbs,
  .cr .section-1 .crumbs {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
  }

  .lc .section-1 h1,
  .sp .section-1 h1,
  .dv .section-1 h1,
  .ct .section-1 h1 {
    margin-top: calc(229px - (100vw - 375px) * 187 / 393);
    font-size: calc(45px + (100vw - 375px) * 25 / 393);
    line-height: calc(55px + (100vw - 375px) * 20 / 393);
  }

  .lc .section-1 .blur-content,
  .sp .section-1 .blur-content,
  .dv .section-1 .blur-content {
    min-height: calc(226px - (100vw - 375px) * 44 / 393);
  }

  .lc .section-1 .blur-content-inner,
  .sp .section-1 .blur-content-inner,
  .dv .section-1 .blur-content-inner {
    max-width: none;
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  /* --- Лицензии --- */

  .lc .section-2 {
    padding-bottom: calc(119px + (100vw - 375px) * 66 / 393);
  }

  .lc .section-2 .band {
    padding-top: calc(54px + (100vw - 375px) * 21 / 393);
    padding-bottom: calc(23px + (100vw - 375px) * 11 / 393);
  }

  .lc .section-2 .filters a {
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px - (100vw - 375px) * 4 / 393);
  }

  .lc .section-2 .list {
    margin-top: calc(31px + (100vw - 375px) * 20 / 393);
    gap: calc(24px + (100vw - 375px) * 4 / 393);
  }

  .lc .section-2 .item {
    min-height: calc(228px + (100vw - 375px) * 20 / 393);
  }

  .lc .section-2 .item .r1 {
    min-height: calc(94px + (100vw - 375px) * 20 / 393);
  }

  .lc .section-2 .item .r1,
  .lc .section-2 .item .r3 {
    padding: 0 calc(18px + (100vw - 375px) * 23 / 393);
  }

  .lc .section-2 .item .t1 {
    font-size: calc(16px + (100vw - 375px) * 8 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }

  .lc .section-2 .item .type,
  .lc .section-2 .item .size {
    font-size: calc(14px + (100vw - 375px) * 2 / 393);
  }

  /* --- Поставщикам --- */

  .sp .section-2 .band {
    padding-top: calc(64px - (100vw - 375px) * 5 / 393);
    padding-bottom: calc(82px - (100vw - 375px) * 15 / 393);
  }

  .sp .section-2 .r1,
  .sp .section-3 .top .r1,
  .sp .section-4 .r1,
  .sp .section-5 .top .r1 {
    max-width: none;
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .sp .section-2 .r2,
  .sp .section-3 .top .r2,
  .sp .section-5 .top .r2 {
    max-width: none;
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .sp .section-3 .top {
    padding-top: calc(64px - (100vw - 375px) * 10 / 393);
  }

  .sp .section-3 .list {
    margin-top: calc(64px + (100vw - 375px) * 11 / 393);
  }

  .sp .section-3 .list .item {
    padding-top: calc(32px + (100vw - 375px) * 1 / 393);
    padding-bottom: calc(32px + (100vw - 375px) * 1 / 393);
  }

  .sp .section-3 .list .c1 {
    width: calc(34px + (100vw - 375px) * 60 / 393);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .sp .section-3 .list .t1 {
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px - (100vw - 375px) * 4 / 393);
  }

  .sp .section-3 .list .t2 {
    margin-top: calc(16px + (100vw - 375px) * 20 / 393);
  }

  .sp .section-3 .list .t2 li {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .sp .section-3 .list .t2 li::before {
    top: calc(8.5px + (100vw - 375px) * 3 / 393);
  }

  .sp .section-4 {
    --nav-size: calc(38.4px + (100vw - 375px) * 38.4 / 393);
    --nav-drop: calc(54.4px + (100vw - 375px) * 38.6 / 393);
    padding-top: calc(64px + (100vw - 375px) * 11 / 393);
    padding-bottom: calc(64px + (100vw - 375px) * 44 / 393 + var(--nav-drop));
  }

  .sp .section-4 .slider {
    margin-top: calc(32px + (100vw - 375px) * 32 / 393);
  }

  .sp .section-4 .slider .viewport {
    margin-left: 0;
  }

  .sp .section-4 .slider .track {
    gap: calc(10px + (100vw - 375px) * 14 / 393);
  }

  .sp .section-4 .slider .item {
    width: calc(282.7px + (100vw - 375px) * 170.3 / 393);
    min-height: calc(329px + (100vw - 375px) * 67 / 393);
    padding:
      calc(27px + (100vw - 375px) * 15 / 393)
      calc(26px + (100vw - 375px) * 20 / 393)
      0;
  }

  .sp .section-4 .slider .item .t1 {
    max-width: none;
    min-height: calc(161px + (100vw - 375px) * 45 / 393);
    font-size: calc(18px + (100vw - 375px) * 6 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }

  .sp .section-4 .slider .item .t2 {
    max-width: none;
    margin: 0 calc((26px + (100vw - 375px) * 20 / 393) * -1);
    padding:
      calc(18px + (100vw - 375px) * 5 / 393)
      calc(26px + (100vw - 375px) * 20 / 393)
      calc(27px + (100vw - 375px) * 15 / 393);
    font-size: calc(14px + (100vw - 375px) * 2 / 393);
    line-height: calc(20px + (100vw - 375px) * 4 / 393);
  }

  .sp .section-4 .slider .nav {
    gap: calc(8.5px + (100vw - 375px) * 8.5 / 393);
  }

  .sp .section-4 .slider .nav button svg {
    width: calc(16.5px + (100vw - 375px) * 16.5 / 393);
    height: calc(9px + (100vw - 375px) * 9 / 393);
  }

  .sp .section-5 {
    padding-top: calc(70px + (100vw - 375px) * 21 / 393);
    padding-bottom: calc(97px - (100vw - 375px) * 12 / 393);
  }

  .sp .section-5 .cols {
    margin-top: calc(35px - (100vw - 375px) * 2 / 393);
    gap: calc(48px + (100vw - 375px) * 14 / 393);
  }

  .sp .section-5 .cols .c1 .label {
    font-size: calc(18px + (100vw - 375px) * 6 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }

  .sp .section-5 .cols .c1 .lines {
    gap: calc(16px + (100vw - 375px) * 2 / 393);
  }

  .sp .section-5 .cols .c1 .lines a {
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px + (100vw - 375px) * 4 / 393);
  }

  .sp .section-5 .field label,
  .sp .section-5 .field .label {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .sp .section-5 .choice label {
    font-size: calc(14px + (100vw - 375px) * 2 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }
}

/* ==================================================================
   «Наши разработки»: 768 — 1469
   ================================================================== */

@media screen and (max-width: 1469px) {
  .dv .section-2 .band {
    padding-top: calc(56px - (100vw - 768px) * 8 / 702);
    padding-bottom: calc(79px - (100vw - 768px) * 32 / 702);
  }

  .dv .section-2 .r1 {
    max-width: calc(702px + (100vw - 768px) * 375 / 702);
  }

  .dv .section-2 .r2 {
    margin-top: calc(32px + (100vw - 768px) * 16 / 702);
  }

  .dv .section-3 .top {
    padding-top: calc(100px + (100vw - 768px) * 7 / 702);
  }

  .dv .section-3 .top .r1 {
    max-width: calc(687px + (100vw - 768px) * 113 / 702);
  }

  .dv .accordion {
    margin-top: calc(105px - (100vw - 768px) * 57 / 702);
  }

  .dv .accordion .item-inner {
    margin-left: calc((100vw - 768px) * 678 / 702);
  }

  /* Пустой левой колонки уже нет — кадр встаёт в поток под текст
     и складывается вместе с пунктом. */
  .dv .accordion .media {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    /* Ниже 375 кадр макета уже не влезает в колонку — прижимаем его
       к остатку ширины, иначе строка вылезает за экран. */
    width: min(
      calc(284px + (100vw - 375px) * 50 / 393),
      calc(100% - var(--num-w) - 24px)
    );
    margin-left: calc(var(--num-w) + 24px);
    opacity: 1;
    transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }

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

  .dv .accordion .media-inner {
    height: auto;
  }

  .dv .accordion .media img {
    height: calc(268px + (100vw - 375px) * 95 / 393);
    margin-top: calc(36px + (100vw - 375px) * 7 / 393);
  }

  .dv .section-4 {
    margin-top: calc(100px - (100vw - 768px) * 60 / 702);
    padding-top: calc(33px + (100vw - 768px) * 137 / 702);
  }

  .dv .section-4 .title {
    max-width: calc(702px + (100vw - 768px) * 594 / 702);
    font-size: calc(70px + (100vw - 768px) * 50 / 702);
    line-height: calc(75px + (100vw - 768px) * 45 / 702);
  }

  .dv .section-4 .blur-content {
    min-height: calc(281px - (100vw - 768px) * 90 / 702);
  }

  /* Ссылка уходит под текст: рядом они помещаются только на 1470. */
  .dv .section-4 .blur-content-inner {
    flex-direction: column;
    gap: calc(32px - (100vw - 768px) * 0 / 702);
    padding-top: calc(33px + (100vw - 768px) * 9 / 702);
    padding-bottom: calc(32px + (100vw - 768px) * 1 / 702);
  }

  .dv .section-4 .blur-content-inner .c1 {
    order: 1;
    align-self: flex-start;
  }

  .dv .section-4 .blur-content-inner .c2 {
    order: 0;
    max-width: none;
    margin-left: 0;
  }
}

/* ==================================================================
   «Наши разработки»: 320 — 767
   ================================================================== */

@media screen and (max-width: 767px) {
  .dv .section-1 h1 {
    margin-top: calc(284px - (100vw - 375px) * 242 / 393);
  }

  .dv .section-1 .blur-content {
    min-height: calc(170px + (100vw - 375px) * 12 / 393);
  }

  .dv .section-2 .band {
    padding-top: calc(64px - (100vw - 375px) * 8 / 393);
    padding-bottom: calc((100vw - 375px) * 79 / 393);
  }

  .dv .section-2 .r1,
  .dv .section-3 .top .r1 {
    max-width: none;
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .dv .section-2 .r2,
  .dv .section-3 .top .r2 {
    max-width: none;
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .dv .section-3 .top {
    padding-top: calc(64px + (100vw - 375px) * 36 / 393);
  }

  .dv .accordion {
    --num-w: calc(34px + (100vw - 375px) * 60 / 393);
    margin-top: calc(42px + (100vw - 375px) * 63 / 393);
  }

  .dv .accordion .item-inner {
    margin-left: 0;
  }

  .dv .accordion .c1 {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .dv .accordion .t1 {
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px - (100vw - 375px) * 4 / 393);
  }

  .dv .accordion .d1 {
    max-width: none;
    padding-top: calc(16px + (100vw - 375px) * 20 / 393);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .dv .accordion .d2 {
    margin-top: calc(16px - (100vw - 375px) * 6 / 393);
  }

  .dv .accordion .d2 li {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .dv .accordion .d2 li::before {
    top: calc(8.5px + (100vw - 375px) * 3 / 393);
  }

  .dv .section-4 {
    margin-top: calc((100vw - 375px) * 100 / 393);
    padding-top: calc(53px - (100vw - 375px) * 20 / 393);
  }

  .dv .section-4 .title {
    max-width: none;
    font-size: calc(58px + (100vw - 375px) * 12 / 393);
    line-height: calc(64px + (100vw - 375px) * 11 / 393);
  }

  .dv .section-4 .blur-content {
    min-height: calc(245px + (100vw - 375px) * 36 / 393);
  }

  .dv .section-4 .blur-content-inner {
    gap: calc(24px + (100vw - 375px) * 8 / 393);
    padding-top: calc(34px - (100vw - 375px) * 1 / 393);
    padding-bottom: calc(27px + (100vw - 375px) * 5 / 393);
  }

  .dv .section-4 .blur-content-inner .c1 a {
    gap: calc(12px + (100vw - 375px) * 4 / 393);
  }

  .dv .section-4 .blur-content-inner .c1 a span {
    font-size: calc(12px + (100vw - 375px) * 4 / 393);
    line-height: calc(17px + (100vw - 375px) * 5 / 393);
  }

  .dv .section-4 .blur-content-inner .c1 a svg {
    width: calc(26px + (100vw - 375px) * 8 / 393);
    height: calc(12px + (100vw - 375px) * 4 / 393);
  }

  .dv .section-4 .blur-content-inner .c2 {
    font-size: calc(16px + (100vw - 375px) * 8 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }
}

/* ==================================================================
   «Контакты»: 768 — 1469
   ================================================================== */

@media screen and (max-width: 1469px) {
  /* Крошки на этой странице сидят выше, чем на соседних. */
  .ct .section-1 {
    padding-top: calc(134px + (100vw - 768px) * 65 / 702);
  }

  .ct .section-1 h1 {
    max-width: calc(701px + (100vw - 768px) * 567 / 702);
  }

  /* Переносы из макета 1470 рассчитаны на широкую строку: ниже они
     добавляют лишнюю строку и заголовок вылезает за высоту кадра. */
  .ct .section-1 h1 br,
  .ct .section-1 .blur-content-inner .c2 br {
    display: none;
  }

  /* Ссылка висит над полосой, поэтому под заголовком резервируем её
     высоту: иначе на узких экранах он дорастает до неё и налезает. */
  .ct .section-1 > .container {
    padding-bottom: 56px;
  }

  .ct .section-1 .cta {
    margin-bottom: calc(26px - (100vw - 768px) * 5 / 702);
  }

  .ct .section-1 .cta svg {
    width: 30px;
    height: 30px;
  }

  /* Телефон, часы и адрес встают в одну колонку. */
  .ct .section-1 .blur-content-inner {
    flex-direction: column;
    gap: 16px;
    padding-top: calc(32px - (100vw - 768px) * 9 / 702);
    padding-bottom: calc(32px - (100vw - 768px) * 2 / 702);
  }

  .ct .section-1 .blur-content-inner .phone {
    font-size: calc(28px + (100vw - 768px) * 27 / 702);
    line-height: calc(38px + (100vw - 768px) * 27 / 702);
  }

  .ct .section-1 .blur-content-inner .hours {
    max-width: none;
    font-size: calc(14px + (100vw - 768px) * 4 / 702);
    line-height: calc(22px + (100vw - 768px) * 2 / 702);
  }

  .ct .section-1 .blur-content-inner .c2 {
    margin-top: 0;
    margin-left: 0;
    max-width: none;
    font-size: calc(16px + (100vw - 768px) * 8 / 702);
    line-height: calc(26px + (100vw - 768px) * 10 / 702);
  }

  .ct .section-3 {
    padding-top: calc(60px - (100vw - 768px) * 14 / 702);
    padding-bottom: calc(107px - (100vw - 768px) * 34 / 702);
  }

  .ct .section-3 .list {
    margin-top: calc(113px - (100vw - 768px) * 65 / 702);
  }

  .ct .section-3 .list .item {
    padding-bottom: calc(50px - (100vw - 768px) * 4 / 702);
  }

  .ct .section-3 .list .t2 {
    max-width: calc(550px + (100vw - 768px) * 155 / 702);
  }

  .ct .section-4 {
    padding-top: calc(81px + (100vw - 768px) * 14 / 702);
    padding-bottom: calc(76px + (100vw - 768px) * 23 / 702);
  }

  .ct .section-4 .top .r1 {
    max-width: calc(686px + (100vw - 768px) * 391 / 702);
  }

  .ct .section-4 .form {
    margin-top: calc(59px - (100vw - 768px) * 1 / 702);
  }

  .ct .section-4 .group + .group {
    margin-top: calc(61px - (100vw - 768px) * 13 / 702);
  }

  /* Поля в одну колонку: рядом они помещаются только на 1470. */
  .ct .section-4 .row-3,
  .ct .section-4 .row-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .ct .section-4 .send {
    margin-top: calc(28px - (100vw - 768px) * 4 / 702);
    gap: calc(24px - (100vw - 768px) * 0 / 702);
  }

  .ct .section-4 .send .note {
    margin-top: calc(16px + (100vw - 768px) * 4 / 702);
  }
}

/* ==================================================================
   «Контакты»: 320 — 767
   ================================================================== */

@media screen and (max-width: 767px) {
  .ct .section-1 {
    min-height: calc(736px - (100vw - 375px) * 44 / 393);
    padding-top: calc(114px + (100vw - 375px) * 20 / 393);
  }

  .ct .section-1 h1 {
    margin-top: calc(40px + (100vw - 375px) * 2 / 393);
    max-width: calc(325px + (100vw - 375px) * 376 / 393);
  }

  .ct .section-1 .cta {
    margin-bottom: calc(22px + (100vw - 375px) * 4 / 393);
  }

  .ct .section-1 .blur-content {
    min-height: calc(238px - (100vw - 375px) * 56 / 393);
  }

  .ct .section-1 .blur-content-inner {
    padding-top: 32px;
    padding-bottom: calc(40px - (100vw - 375px) * 8 / 393);
  }

  .ct .section-3 {
    padding-top: calc(64px - (100vw - 375px) * 4 / 393);
    padding-bottom: calc(64px + (100vw - 375px) * 43 / 393);
  }

  .ct .section-3 .top .r1,
  .ct .section-4 .top .r1 {
    max-width: none;
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .ct .section-3 .top .r2,
  .ct .section-4 .top .r2 {
    max-width: none;
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .ct .section-3 .list {
    margin-top: calc(64px + (100vw - 375px) * 49 / 393);
  }

  .ct .section-3 .list .item {
    padding-top: calc(32px + (100vw - 375px) * 1 / 393);
    padding-bottom: calc(32px + (100vw - 375px) * 18 / 393);
  }

  .ct .section-3 .list .c1 {
    width: calc(34px + (100vw - 375px) * 60 / 393);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .ct .section-3 .list .t1 {
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px - (100vw - 375px) * 4 / 393);
  }

  .ct .section-3 .list .t2 {
    max-width: none;
    margin-top: calc(16px + (100vw - 375px) * 20 / 393);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .ct .section-4 {
    padding-top: calc(53px + (100vw - 375px) * 28 / 393);
    padding-bottom: calc(103px - (100vw - 375px) * 27 / 393);
  }

  .ct .section-4 .form {
    margin-top: calc(48px + (100vw - 375px) * 11 / 393);
  }

  .ct .section-4 .group + .group {
    margin-top: calc(48px + (100vw - 375px) * 13 / 393);
  }

  .ct .section-4 .group > .label {
    line-height: calc(32px + (100vw - 375px) * 4 / 393);
  }

  .ct .section-4 .field label {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .ct .section-4 .send {
    margin-top: calc(32px - (100vw - 375px) * 4 / 393);
    gap: calc(13px + (100vw - 375px) * 11 / 393);
  }

  .ct .section-4 .send .note {
    margin-top: calc(13px + (100vw - 375px) * 3 / 393);
  }
}

/* ==================================================================
   «Карьера»: 768 — 1469
   ================================================================== */

@media screen and (max-width: 1469px) {
  .cr .section-1 {
    padding-top: calc(202px - (100vw - 768px) * 3 / 702);
  }

  .cr .section-1 h1 {
    max-width: calc(376px + (100vw - 768px) * 160 / 702);
  }

  .cr .section-1 .blur-content {
    min-height: calc(212px - (100vw - 768px) * 30 / 702);
  }

  /* Ссылка встаёт над текстом: рядом они помещаются только на 1470. */
  .cr .section-1 .blur-content-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    /* В столбик блок выше, чем в строку, поэтому к 1470 набивку сводим
       так, чтобы общая высота полосы совпала с десктопной. */
    padding-top: calc(24px - (100vw - 768px) * 12 / 702);
    padding-bottom: calc(30px - (100vw - 768px) * 18 / 702);
  }

  .cr .section-1 .blur-content-inner .c1 svg {
    width: 30px;
    height: 30px;
  }

  .cr .section-1 .blur-content-inner .c2 {
    max-width: none;
  }

  .cr .section-2 .band {
    padding-top: calc(58px - (100vw - 768px) * 10 / 702);
    padding-bottom: calc(57px + (100vw - 768px) * 13 / 702);
  }

  .cr .section-2 .band .r1 {
    max-width: calc(679px + (100vw - 768px) * 398 / 702);
  }

  .cr .section-2 .roles {
    padding-top: calc(60px - (100vw - 768px) * 18 / 702);
    padding-bottom: calc(80px - (100vw - 768px) * 19 / 702);
  }

  .cr .section-3 {
    /* Стрелки живут в пустой левой колонке; ниже 1417 она схлопывается
       и кнопки уезжают под ленту. */
    --nav-drop: max(0px, calc(93px - (100vw - 768px) * 93 / 649));
    padding-top: calc(80px - (100vw - 768px) * 14 / 702);
    padding-bottom: calc(80px + (100vw - 768px) * 30 / 702 + var(--nav-drop));
  }

  .cr .section-3 .slider .viewport {
    margin-left: calc((100vw - 768px) * 339 / 702);
  }

  .cr .section-3 .slider .nav {
    bottom: calc(var(--nav-drop) * -1);
  }

  .cr .section-4 {
    padding-top: calc(80px - (100vw - 768px) * 22 / 702);
    padding-bottom: calc(94px - (100vw - 768px) * 8 / 702);
  }

  .cr .section-4 .top .r1 {
    max-width: calc(688px + (100vw - 768px) * 389 / 702);
  }

  /* Форма уходит под контакты. */
  .cr .section-4 .cols {
    flex-direction: column;
    gap: calc(60px - (100vw - 768px) * 0 / 702);
  }

  .cr .section-4 .cols .c1,
  .cr .section-4 .cols .c2 {
    width: 100%;
    margin-left: 0;
  }
}

/* ==================================================================
   «Карьера»: 320 — 767
   ================================================================== */

@media screen and (max-width: 767px) {
  .cr .section-1 {
    padding-top: calc(114px + (100vw - 375px) * 88 / 393);
  }

  .cr .section-1 h1 {
    margin-top: calc(174px - (100vw - 375px) * 132 / 393);
    max-width: calc(325px + (100vw - 375px) * 51 / 393);
    font-size: calc(45px + (100vw - 375px) * 25 / 393);
    line-height: calc(55px + (100vw - 375px) * 20 / 393);
  }

  .cr .section-1 .blur-content {
    min-height: calc(286px - (100vw - 375px) * 74 / 393);
  }

  .cr .section-1 .blur-content-inner {
    gap: calc(39px - (100vw - 375px) * 23 / 393);
    padding-top: calc(23px + (100vw - 375px) * 1 / 393);
    padding-bottom: calc(40px - (100vw - 375px) * 10 / 393);
  }

  .cr .section-1 .blur-content-inner .c2 {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .cr .section-2 .band {
    padding-top: calc(64px - (100vw - 375px) * 6 / 393);
    padding-bottom: calc(66px - (100vw - 375px) * 9 / 393);
  }

  .cr .section-2 .band .r1,
  .cr .section-3 .r1,
  .cr .section-4 .top .r1 {
    max-width: none;
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .cr .section-2 .band .r2,
  .cr .section-4 .top .r2 {
    max-width: none;
    margin-top: calc(16px + (100vw - 375px) * 16 / 393);
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .cr .section-2 .roles {
    padding-top: calc(64px - (100vw - 375px) * 4 / 393);
    padding-bottom: calc(63px + (100vw - 375px) * 17 / 393);
  }

  .cr .section-2 .roles .t1 {
    max-width: none;
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px - (100vw - 375px) * 4 / 393);
  }

  .cr .section-2 .roles .t2 {
    margin-top: calc(16px + (100vw - 375px) * 21 / 393);
  }

  .cr .section-2 .roles .t2 li {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .cr .section-2 .roles .t2 li::before {
    top: calc(8.5px + (100vw - 375px) * 3 / 393);
  }

  .cr .section-3 {
    --nav-size: calc(38.4px + (100vw - 375px) * 38.4 / 393);
    --nav-drop: calc(54.4px + (100vw - 375px) * 38.6 / 393);
    padding-top: calc(64px + (100vw - 375px) * 16 / 393);
    padding-bottom: calc(64px + (100vw - 375px) * 16 / 393 + var(--nav-drop));
  }

  .cr .section-3 .slider {
    margin-top: calc(32px + (100vw - 375px) * 32 / 393);
  }

  .cr .section-3 .slider .viewport {
    margin-left: 0;
  }

  .cr .section-3 .slider .track {
    gap: calc(10px + (100vw - 375px) * 14 / 393);
  }

  .cr .section-3 .slider .item {
    width: calc(282.7px + (100vw - 375px) * 170.3 / 393);
    min-height: calc(329px - (100vw - 375px) * 16 / 393);
    padding:
      calc(27px + (100vw - 375px) * 15 / 393)
      calc(26px + (100vw - 375px) * 20 / 393)
      0;
  }

  .cr .section-3 .slider .item .t1 {
    max-width: none;
    min-height: calc(161px - (100vw - 375px) * 25 / 393);
    font-size: calc(18px + (100vw - 375px) * 6 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }

  .cr .section-3 .slider .item .t2 {
    margin: 0 calc((26px + (100vw - 375px) * 20 / 393) * -1);
    padding:
      calc(18px + (100vw - 375px) * 5 / 393)
      calc(26px + (100vw - 375px) * 20 / 393)
      calc(43px - (100vw - 375px) * 3 / 393);
    font-size: calc(14px + (100vw - 375px) * 2 / 393);
    line-height: calc(20px + (100vw - 375px) * 4 / 393);
  }

  .cr .section-3 .slider .nav {
    gap: calc(8.5px + (100vw - 375px) * 8.5 / 393);
  }

  .cr .section-3 .slider .nav button {
    width: var(--nav-size);
    height: var(--nav-size);
  }

  .cr .section-3 .slider .nav button svg {
    width: calc(16.5px + (100vw - 375px) * 16.5 / 393);
    height: calc(9px + (100vw - 375px) * 9 / 393);
  }

  .cr .section-4 {
    padding-top: calc(57px + (100vw - 375px) * 23 / 393);
    padding-bottom: calc(97px - (100vw - 375px) * 3 / 393);
  }

  .cr .section-4 .cols {
    margin-top: calc(31px + (100vw - 375px) * 5 / 393);
    gap: calc(74px - (100vw - 375px) * 14 / 393);
  }

  .cr .section-4 .cols .c1 .label {
    font-size: calc(18px + (100vw - 375px) * 6 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }

  .cr .section-4 .cols .c1 .lines {
    gap: calc(16px + (100vw - 375px) * 2 / 393);
  }

  .cr .section-4 .cols .c1 .lines a {
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px + (100vw - 375px) * 4 / 393);
  }

  .cr .section-4 .field label,
  .cr .section-4 .field .label {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .cr .section-4 .field textarea {
    height: calc(154px - (100vw - 375px) * 5 / 393);
  }

  .cr .section-4 .choice label {
    font-size: calc(14px + (100vw - 375px) * 2 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }
}

/* ==================================================================
   «Новости»: 768 — 1469
   ================================================================== */

@media screen and (max-width: 1469px) {
  .nw .section-1 {
    padding-top: calc(148px + (100vw - 768px) * 51 / 702);
    padding-bottom: calc(180px - (100vw - 768px) * 66 / 702);
  }

  .nw .section-1 h1 {
    margin-top: calc(48px - (100vw - 768px) * 6 / 702);
    max-width: calc(662px + (100vw - 768px) * 284 / 702);
    font-size: calc(70px + (100vw - 768px) * 30 / 702);
    line-height: calc(75px + (100vw - 768px) * 25 / 702);
  }

  /* Строка новости складывается в колонку, кадр уходит вниз. */
  .nw .list .item,
  .nw .list .item:first-child {
    padding-top: calc(48px - (100vw - 768px) * 6 / 702);
    padding-bottom: calc(48px + (100vw - 768px) * 20 / 702);
    flex-direction: column;
    gap: 30px;
  }

  .nw .list .c1 {
    order: 3;
  }

  /* В колонке пустой блок под кадр держать незачем — на десктопе он
     нужен только чтобы столбцы соседних новостей совпадали. */
  .nw .list .item-empty .c1 {
    display: none;
  }

  .nw .list .c2 {
    order: 1;
    width: 100%;
  }

  .nw .list .c3 {
    order: 2;
    min-height: 0;
    justify-content: flex-start;
    gap: 10px;
  }
}

/* ==================================================================
   «Новости»: 320 — 767
   ================================================================== */

@media screen and (max-width: 767px) {
  .nw .section-1 {
    padding-top: calc(114px + (100vw - 375px) * 34 / 393);
    padding-bottom: calc(136px + (100vw - 375px) * 44 / 393);
  }

  .nw .section-1 h1 {
    margin-top: calc(32px + (100vw - 375px) * 16 / 393);
    max-width: calc(325px + (100vw - 375px) * 337 / 393);
    font-size: calc(45px + (100vw - 375px) * 25 / 393);
    line-height: calc(55px + (100vw - 375px) * 20 / 393);
  }

  .nw .list {
    margin-top: calc(48px + (100vw - 375px) * 2 / 393);
  }

  /* Кадр поднимается наверх строки. */
  .nw .list .item,
  .nw .list .item:first-child {
    padding-top: calc(32px + (100vw - 375px) * 16 / 393);
    padding-bottom: calc(32px + (100vw - 375px) * 16 / 393);
    gap: calc(16px + (100vw - 375px) * 14 / 393);
  }

  .nw .list .c1 {
    order: 1;
    width: 332px;
    max-width: 100%;
    margin-bottom: calc(8px - (100vw - 375px) * 8 / 393);
  }

  .nw .list .c2 {
    order: 2;
  }

  .nw .list .c3 {
    order: 3;
    gap: calc(16px - (100vw - 375px) * 6 / 393);
  }

  .nw .list .date .d1 {
    font-size: calc(44px + (100vw - 375px) * 26 / 393);
    line-height: calc(50px + (100vw - 375px) * 15 / 393);
  }

  .nw .list .date .d2 {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .nw .list .title {
    margin-top: calc(24px + (100vw - 375px) * 5 / 393);
    font-size: calc(18px + (100vw - 375px) * 6 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }

  .nw .list .text {
    font-size: calc(14px + (100vw - 375px) * 2 / 393);
    line-height: calc(20px + (100vw - 375px) * 4 / 393);
  }

  .nw .list .more {
    gap: calc(12px + (100vw - 375px) * 4 / 393);
  }

  .nw .list .more span {
    font-size: calc(12px + (100vw - 375px) * 4 / 393);
    line-height: calc(17px + (100vw - 375px) * 5 / 393);
  }

  .nw .list .more svg {
    width: calc(26px + (100vw - 375px) * 8 / 393);
    height: calc(12px + (100vw - 375px) * 4 / 393);
  }
}

/* ==================================================================
   Отдельная новость: 768 — 1469
   ================================================================== */

@media screen and (max-width: 1469px) {
  .na .section-1 {
    padding-top: calc(154px + (100vw - 768px) * 45 / 702);
    padding-bottom: calc(126px - (100vw - 768px) * 6 / 702);
  }

  .na .band {
    margin-top: calc(37px - (100vw - 768px) * 15 / 702);
    padding-bottom: calc(42px + (100vw - 768px) * 9 / 702);
  }

  /* Дата встаёт над заголовком: рядом они помещаются только на 1470. */
  .na .band .head {
    flex-direction: column;
    padding-left: 0;
    gap: 32px;
  }

  .na .band h1 {
    max-width: none;
  }

  .na .body {
    margin-top: calc(46px - (100vw - 768px) * 14 / 702);
    margin-left: 0;
  }

  .na .body .text {
    max-width: none;
  }
}

/* ==================================================================
   Отдельная новость: 320 — 767
   ================================================================== */

@media screen and (max-width: 767px) {
  .na .section-1 {
    padding-top: calc(120px + (100vw - 375px) * 34 / 393);
    padding-bottom: calc(80px + (100vw - 375px) * 46 / 393);
  }

  .na .section-1 .crumbs {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .na .band {
    margin-top: calc(34px + (100vw - 375px) * 3 / 393);
    padding-top: calc(33px + (100vw - 375px) * 9 / 393);
    padding-bottom: calc(48px - (100vw - 375px) * 6 / 393);
  }

  .na .band .head {
    gap: calc(15px + (100vw - 375px) * 17 / 393);
  }

  .na .band .date .d1 {
    font-size: calc(44px + (100vw - 375px) * 26 / 393);
    line-height: calc(50px + (100vw - 375px) * 15 / 393);
  }

  .na .band .date .d2 {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .na .band h1 {
    font-size: calc(28px + (100vw - 375px) * 27 / 393);
    line-height: calc(38px + (100vw - 375px) * 27 / 393);
  }

  .na .body {
    margin-top: calc(34px + (100vw - 375px) * 12 / 393);
  }

  .na .body .text {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(22px + (100vw - 375px) * 6 / 393);
  }

  .na .body .more {
    margin-top: calc(32px + (100vw - 375px) * 48 / 393);
    gap: calc(12px + (100vw - 375px) * 4 / 393);
  }

  .na .body .more span {
    font-size: calc(12px + (100vw - 375px) * 4 / 393);
    line-height: calc(17px + (100vw - 375px) * 5 / 393);
  }

  .na .body .more svg {
    width: calc(26px + (100vw - 375px) * 8 / 393);
    height: calc(12px + (100vw - 375px) * 4 / 393);
  }
}

/* ==================================================================
   Поиск: 768 — 1469
   ================================================================== */

@media screen and (max-width: 1469px) {
  .se .section-1 {
    padding-top: calc(148px + (100vw - 768px) * 51 / 702);
    padding-bottom: calc(90px + (100vw - 768px) * 60 / 702);
  }

  .se .section-1 h1 {
    margin-top: calc(47px - (100vw - 768px) * 5 / 702);
    font-size: calc(70px + (100vw - 768px) * 30 / 702);
    line-height: calc(75px + (100vw - 768px) * 25 / 702);
  }

  .se .field {
    margin-top: calc(18px + (100vw - 768px) * 24 / 702);
  }

  .se .count {
    margin-top: calc(18px + (100vw - 768px) * 6 / 702);
  }

  .se .list {
    margin-top: calc(38px + (100vw - 768px) * 10 / 702);
  }

  /* Заголовок результата встаёт над выдержкой. */
  .se .list .item {
    flex-direction: column;
    gap: 16px;
  }

  .se .list .c1 {
    width: 452px;
    max-width: 100%;
  }

  .se .list .c2 {
    width: 100%;
  }
}

/* ==================================================================
   Поиск: 320 — 767
   ================================================================== */

@media screen and (max-width: 767px) {
  .se .section-1 {
    padding-top: calc(120px + (100vw - 375px) * 28 / 393);
    padding-bottom: calc(96px - (100vw - 375px) * 6 / 393);
  }

  .se .section-1 .crumbs {
    font-size: calc(14px + (100vw - 375px) * 4 / 393);
    line-height: calc(20px + (100vw - 375px) * 8 / 393);
  }

  .se .section-1 h1 {
    margin-top: calc(26px + (100vw - 375px) * 21 / 393);
    font-size: calc(45px + (100vw - 375px) * 25 / 393);
    line-height: calc(55px + (100vw - 375px) * 20 / 393);
  }

  .se .field {
    margin-top: calc(32px - (100vw - 375px) * 14 / 393);
  }

  .se .count {
    margin-top: calc(10px + (100vw - 375px) * 8 / 393);
  }

  .se .list {
    margin-top: calc(32px + (100vw - 375px) * 6 / 393);
    padding-top: calc(32px + (100vw - 375px) * 16 / 393);
  }

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

  .se .list .c1 {
    width: 100%;
    font-size: calc(18px + (100vw - 375px) * 6 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }

  .se .list .text,
  .se .list .where {
    font-size: calc(14px + (100vw - 375px) * 2 / 393);
    line-height: calc(22px + (100vw - 375px) * 2 / 393);
  }
}

/* ==================================================================
   404: 768 — 1469
   ================================================================== */

@media screen and (max-width: 1469px) {
  .nf .section-1 {
    padding-bottom: calc(106px + (100vw - 768px) * 31 / 702);
  }

  .nf .pic {
    height: calc(261px + (100vw - 768px) * 204 / 702);
  }

  .nf .head {
    margin-top: calc(42px - (100vw - 768px) * 84 / 702);
  }

  .nf .head .t2 {
    max-width: none;
  }
}

/* ==================================================================
   404: 320 — 767
   ================================================================== */

@media screen and (max-width: 767px) {
  .nf .section-1 {
    padding-bottom: calc(52px + (100vw - 375px) * 54 / 393);
  }

  .nf .pic {
    height: calc(169px + (100vw - 375px) * 92 / 393);
  }

  .nf .head {
    margin-top: calc(71px - (100vw - 375px) * 29 / 393);
  }

  .nf .head .t1 {
    font-size: calc(24px + (100vw - 375px) * 8 / 393);
    line-height: calc(32px + (100vw - 375px) * 10 / 393);
  }

  .nf .head .t2 {
    font-size: calc(16px + (100vw - 375px) * 8 / 393);
    line-height: calc(26px + (100vw - 375px) * 10 / 393);
  }

  .nf .home {
    width: calc(278px + (100vw - 375px) * 22 / 393);
    max-width: 100%;
  }
}

/* Модалки: мобильный размер из макета — окно 330x314, текст 273. */
@media screen and (max-width: 767px) {
  .dialog-box {
    width: 330px;
    padding: 52px 28px 40px 28px;
  }

  .dialog-close {
    top: 14px;
    right: 10px;
  }

  .dialog-title {
    font-size: 24px;
    line-height: 32px;
  }

  .dialog-text {
    max-width: 273px;
    font-size: 14px;
    line-height: 20px;
  }
}