/* ============================================================
   Главное меню + мега-меню
   Вёрстка по макету mainmenu.jpg (3840×1038 = 2x от 1920×519).
   Все размеры ниже сняты с макета и приведены к 1x.
   ============================================================ */

:root{
  /* цвета (замерены по макету) */
  --nav-bg:            #073072;  /* фон полосы меню            */
  --nav-bg-active:     #164088;  /* фон активного/открытого п. */
  --nav-underline:     #EAC57A;  /* золотая полоса снизу       */
  --nav-text:          #FFFFFF;

  --navy:              #122675;  /* основной тёмно-синий текст */
  --blue:              #1D60D7;  /* акцентный синий            */
  --badge:             #FB0304;  /* красный бейдж «новый»      */
  --tab-border:        #C5CCDF;  /* рамка плитки услуги        */
  --tab-active:        #155CD8;  /* залитая плитка при наведении */
  --cta-btn:           #385CD3;  /* кнопки в блоках CTA        */
  --cta-btn-hover:     #2D4CB4;
  --gold:              #EFC186;  /* маркеры списка, акцентное слово */
  --link-hover:        #E1C383;  /* ссылки в панелях при наведении, маркеры */
  --pcard-border:      #D2D1E3;  /* рамка карточки статьи и кейса */
  --pcard-tag:         #DEE8FF;  /* фон тега в карточке */
  --panel-bg:          #FFFFFF;  /* фон выпадающей панели      */
  --cta-bg:            #9BDFFF;  /* фон блока «Остались вопросы?»          */
  --rule:              #DCDBE0;  /* вертикальная линейка       */

  /* геометрия */
  --bar-h:             48px;
  --container:         1350px;
  --radius:            8px;
  --radius-btn:        6px;

  --font: Montserrat, -apple-system, BlinkMacSystemFont, Inter, Arial, sans-serif;
}

/* box-sizing только внутри компонентов меню, чтобы не влиять на проект */
.mainmenu,
.mainmenu *,
.mainmenu *::before,
.mainmenu *::after{ box-sizing:border-box; }

/* Убирает задержку 300 мс перед click на тач-экранах: без неё первое
   касание кажется «непроходящим». */
.mainmenu a,
.mainmenu button{ touch-action:manipulation; }

/* ---------- полоса меню ---------------------------------- */

.mainmenu{
  position:relative;
  z-index:50;
  background:var(--nav-bg);
  font-family:var(--font);
}

/* Обёртка шириной ровно по меню — от неё позиционируется мега-меню,
   поэтому панель получается по ширине меню, а не во всю страницу. */
.mainmenu__box{
  position:relative;
  width:max-content;
  max-width:100%;
  margin:0 auto;
}

.mainmenu__list{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.mainmenu__item{ position:relative; }

.mainmenu__link{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;                 /* замер: текст → шеврон */
  height:var(--bar-h);
  padding:0 10px;
  color:var(--nav-text);
  font-size:15px;           /* как в прежнем главном меню */
  font-weight:400;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .15s ease;
}

/* подсветка пункта: наведение, фокус, открытое мега-меню, текущий раздел */
.mainmenu__link:hover,
.mainmenu__link:focus-visible,
.mainmenu__item.mm-open  > .mainmenu__link,
.mainmenu__item.mm-current > .mainmenu__link{
  background:var(--nav-bg-active);
}

/* золотая полоса снизу — замер: 3px, во всю ширину пункта */
.mainmenu__link:hover::after,
.mainmenu__link:focus-visible::after,
.mainmenu__item.mm-open  > .mainmenu__link::after,
.mainmenu__item.mm-current > .mainmenu__link::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:var(--nav-underline);
}

.mainmenu__link:focus-visible{ outline:2px solid var(--nav-underline); outline-offset:-4px; }

/* шеврон родителя */
.mainmenu__chevron{
  flex:none;
  width:14px; height:8px;   /* замер: ширина 14px */
  transition:transform .2s ease;
}
/* В макете шеврон открытого пункта смотрит вниз — поворот отключён.
   Если нужен разворот, раскомментируйте: */
/* .mainmenu__item.mm-open > .mainmenu__link .mainmenu__chevron{ transform:rotate(180deg); } */

/* красный бейдж «новый» */
.badge{
  display:inline-block;
  height:12px;
  padding:0 6px;
  border-radius:2px;
  background:var(--badge);
  color:#fff;
  font-size:9px;
  font-weight:600;
  line-height:12px;
  letter-spacing:.2px;
  white-space:nowrap;
  text-transform:lowercase;
}
/* в полосе меню — над текстом справа */
/* Бейдж «новый» висит над пунктом и по центру его ширины. Размеры и цвет
   заданы здесь целиком, потому что общий .badge крупнее — он же стоит
   в списке «О компании». pointer-events снят, чтобы бейдж не перехватывал
   наведение у самого пункта. */
.mainmenu__link .badge{
  position:absolute;
  top:4px;
  /*left:50%;*/
  right: -27px !important;
  right:auto;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  height:12px;
  padding:2px 3px;
  border-radius:2px;
  background:#ff1f1f;
  color:#fff;
  font-size:7px;
  font-weight:600;
  line-height:0;
  text-transform:uppercase;
  pointer-events:none;
}

/* ---------- выпадающая панель ----------------------------- */

.megamenu{
  position:absolute;
  top:100%; left:0;
  width:100%;
  background:var(--panel-bg);
  font-family:var(--font);
  /* Очень слабая тень только вниз: отрицательный разброс убирает её
     сверху, чтобы не пачкала синюю полосу меню. */
  box-shadow:0 16px 28px -8px rgba(18,38,117,.14);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
}
.megamenu.mm-open{ opacity:1; visibility:visible; }

.megamenu__inner{
  /* Колонка контента остаётся макетной (1350), 20px по бокам добавляются
     сверх неё — поэтому все замеры внутри панели не сдвигаются. */
  max-width:calc(var(--container) + 40px);
  margin:0 auto;
  padding:32px 20px 62px;   /* верх 32 — как в остальных панелях */
  display:grid;
  /* карточки и блок CTA — фиксированные по макету, левая колонка добирает
     остаток (по макету она 368px при контейнере 1350px) */
  /* замер new_about.png: колонки 272 / 272 / 324, зазор 24 */
  grid-template-columns:1fr 272px 272px 324px;
  grid-template-rows:auto auto;
  column-gap:24px;
  row-gap:12px;             /* замер: заголовок 49…75, карточки с 87 */
}

/* заголовки колонок */
.megamenu__title{
  margin:0;
  font-size:18px;
  line-height:24px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--navy);
}

/* Заголовок со ссылкой. Если адрес не задан, ссылки нет вовсе —
   заголовок остаётся обычным текстом. */
.megamenu__title-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color .15s ease;
}
.megamenu__title-link:hover,
.megamenu__title-link:focus-visible{ color:var(--link-hover); }

/* Заголовок-аккордеон со ссылкой: текст — ссылка, шеврон — отдельная
   кнопка. На десктопе шеврона нет, поэтому кнопку прячем целиком. */
.megamenu__title--row{ display:flex; align-items:center; gap:12px; }
.megamenu__title--row .acc{ display:none; width:auto; }

/* Раскладка панели задаётся явно: блок CTA занимает обе строки —
   в макете его верх вровень с заголовками колонок, — а при
   автоматической расстановке остальные ячейки из-за этого съезжают. */
.megamenu--about .megamenu__inner > h2:nth-of-type(1){ grid-area:1 / 1; }
.megamenu--about .megamenu__inner > .megamenu__title:nth-of-type(1){ grid-area:1 / 1; }
.megamenu--about .megamenu__inner > h2:nth-of-type(2){ grid-area:1 / 2; }
.megamenu--about .megamenu__inner > .megamenu__title:nth-of-type(2){ grid-area:1 / 2; }
.megamenu--about .megamenu__inner > h2:nth-of-type(3){ grid-area:1 / 3; }
.megamenu--about .megamenu__inner > .megamenu__title:nth-of-type(3){ grid-area:1 / 3; }
.megamenu--about .alist            { grid-area:2 / 1; }
.megamenu--about .pcards--articles { grid-area:2 / 2; }
.megamenu--about .pcards--cases    { grid-area:2 / 3; }
.megamenu--about .cta{
  grid-area:1 / 4 / span 2;
  align-self:start;                  /* в макете блок ниже колонок не тянется */
  padding:20px 27px 22px 36px;       /* как в «Направлениях» */
  min-height:242px;                  /* одна высота во всех панелях */
}

/* ---------- «О компании»: замеры с макета 7300:4947 ----------
   Блок правит только эту панель. Ниже по файлу идут правила для
   экранов до 1430px — они остаются в силе, здесь только десктоп. */
@media (min-width:1431px){

  /* Все панели одной ширины и по центру окна: в макете 1423px при ширине
     меню 1353. Пока ширину задавала сама полоса, блок «Остались вопросы?»
     в каждой панели вставал на своё место — отсюда и смещения. */
  .megamenu{
    left:50%;
    width:1423px;
    max-width:100vw;
    transform:translateX(-50%);
  }

  /* Одинаковая высота белой панели: карточка 232 плюс 35 сверху и 35 снизу.
     Иначе панели прыгают по высоте при переключении пунктов. */
  .megamenu__inner,
  .megamenu__inner--services,
  .megamenu__inner--directions{ min-height:302px; }

  /* Панель «Услуги»: карточка встаёт туда же, что и в «О компании» —
     верх 35, правый край 30 от края панели. Селектор составной не для
     красоты: базовое правило .megamenu__inner--services стоит ниже по
     файлу с тем же весом и иначе перебивало эти отступы обратно на
     32 и 20 — карточка оказывалась выше и правее соседних. */
  .megamenu--services .megamenu__inner--services{
    max-width:1423px;
    padding:35px 30px 35px 20px;
  }

  /* Плитки тянутся на всю левую колонку. При фиксированных 224px сетка
     занимала 926 из 1025 — между плитками и карточкой оставалось около
     99px пустоты. На экранах уже 1431 плитки так себя ведут давно. */
  .megamenu--services .stabs--grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }

  /* Колонки по макету: 27…333, 354…669, 712…1027, блок справа 1057…1381.
     Отступы между колонками разные, поэтому column-gap нулевой, а сдвиги
     заданы каждой колонке отдельно. */
  .megamenu--about .megamenu__inner{
    position:relative;
    max-width:1423px;
    padding:35px 30px 35px 27px;
    /* В дорожку входит и отступ перед колонкой: 306 | 21+315 | 43+315 | 42+324.
       Иначе margin-left отъедал ширину карточек, колонка «Статьи» вставала
       на 691 вместо 712, и разделитель на 692 прилипал к ней вплотную.
       Сумма дорожек с отступами даёт ровно ширину панели:
       27 + 306 + 336 + 358 + 366 + 30 = 1423. Пока последняя дорожка была
       354, справа оставалось 12px пустоты, и карточка вставала в 42 от
       края, а не в 30, как в соседних панелях. */
    grid-template-columns:306px 336px 358px 366px;
    grid-template-rows:24px auto;
    column-gap:0;
    row-gap:19px;                    /* заголовок 35…59, контент с 78 */
  }

  /* Порядок колонок в макете: список, кейсы, статьи. В разметке карточки
     идут наоборот, поэтому расставляем явно. */
  .megamenu--about .megamenu__inner > h2:nth-of-type(3){ grid-area:1 / 2; margin-left:21px; }
  .megamenu--about .megamenu__inner > .megamenu__title:nth-of-type(3){ grid-area:1 / 2; margin-left:21px; }
  .megamenu--about .megamenu__inner > h2:nth-of-type(2){ grid-area:1 / 3; margin-left:43px; }
  .megamenu--about .megamenu__inner > .megamenu__title:nth-of-type(2){ grid-area:1 / 3; margin-left:43px; }
  .megamenu--about .pcards--cases   { grid-area:2 / 2; margin-left:21px; }
  .megamenu--about .pcards--articles{ grid-area:2 / 3; margin-left:43px; }
  .megamenu--about .cta{ margin-left:42px; }

  /* Разделители колонок — тонкие линии на 333 и 692. Тянутся от отметки 32
     почти до низа панели: высота не фиксированная, а от top/bottom, чтобы
     линия доходила ниже карточек при любой высоте содержимого.
     Псевдоэлементы абсолютные и поэтому не становятся ячейками сетки. */
  .megamenu--about .megamenu__inner::before,
  .megamenu--about .megamenu__inner::after{
    content:'';
    position:absolute;
    top:32px;
    bottom:14px;
    width:1px;
    background:var(--pcard-border);
  }
  .megamenu--about .megamenu__inner::before{ left:333px; }
  .megamenu--about .megamenu__inner::after { left:692px; }

  .megamenu--about .megamenu__title{
    font-size:20px;
    line-height:24px;
    letter-spacing:-.015em;
    color:#001B6B;
  }

  /* Заголовок «О компании» — ссылка, но подчёркивания в образце нет. */
  .megamenu--about .megamenu__title-link{ text-decoration:none; }

  /* Список: пункты с шагом 30px, маркер 10×10 на 28, текст на 54. */
  .megamenu--about .alist{ margin:0; gap:3px; }
  .megamenu--about .alist__item{ padding-left:27px; }
  .megamenu--about .alist__item::before{
    left:1px;
    top:9px;
    width:10px;
    height:10px;
  }
  .megamenu--about .alist__link{
    font-size:14px;
    line-height:27px;
    color:#001B6B;
  }

  /* Карточки 315×90, шаг 99px. */
  .megamenu--about .pcards{ gap:9px; }
  .megamenu--about .pcard{ min-height:90px; }
}

/* ---------- «О компании»: ссылка «Все …» рядом с заголовком ----------
   В макете заголовок колонки — обычный текст, а ссылка со стрелкой
   прижата к правому краю колонки (замер: «Все кейсы» 73+13 на 575,
   колонка 354…669). */
.megamenu--about .megamenu__title--all{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.megamenu--about .megamenu__all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  font-size:14px;
  line-height:17px;
  font-weight:600;
  letter-spacing:normal;
  text-transform:none;
  color:#001B6B;
  text-decoration:none;
  transition:color .15s ease;
}
.megamenu--about .megamenu__all:hover,
.megamenu--about .megamenu__all:focus-visible{ color:var(--link-hover); }

.megamenu--about .megamenu__all-arrow{
  flex:none;
  width:13px;
  height:8px;
  color:#043462;
}

/* ---------- «О компании»: карточка кейса -----------------------------
   Замеры: заголовок с 14/8 шириной 184, внизу маршрут слева (12/21)
   и сумма справа с подписью под ней (11/22 и 10/21), цвет #6E7DAB. */
.megamenu--about .pcard--case{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:8px 34px 8px 14px;
}

@media (max-width:1320px){
  .megamenu--about .pcard--case{
    padding:8px 45px 8px 14px;
  }
}

.megamenu--about .pcard--case .pcard__title{
  max-width:184px;
  font-size:14px;
  line-height:19px;
}

@media (max-width:1320px){
  .megamenu--about .pcard--case .pcard__title{
    max-width:100%;
  }
}

.megamenu--about .pcard__foot{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:12px;
}

.megamenu--about .pcard__route{
  font-size:12px;
  line-height:21px;
  color:#6E7DAB;
  white-space:nowrap;
}

.megamenu--about .pcard__sumbox{ display:block; }

.megamenu--about .pcard--case .pcard__sum{
  display:block;
  margin:0;
  font-size:11px;
  line-height:22px;
  color:var(--navy);   /* тот же цвет, что у заголовка карточки */
  position:relative;
  top:-4px;            /* строка поднята, как была поднята пара до неё */
}
.megamenu--about .pcard--case .pcard__sum b{
  font-weight:600;
  font-size:13px;
  font-family:'Inter';
  color:var(--navy);
}

/* Подпись стоит в одной строке с суммой, поэтому строчная, а не блочная. */
.megamenu--about .pcard__sumlabel{
  display:inline;
  font-size:11px;
  line-height:22px;
  color:var(--navy);
}



/* Стрелка в обеих колонках стоит у правого края по центру карточки. */
.megamenu--about .pcard__arrow{
  right:20px;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
}

/* ---------- «О компании»: карточка статьи ----------------------------
   Замеры: миниатюра 60×67 на 12/12, текст с 81, дата и время чтения
   на 57 — Inter 11/21, цвет #6E7DAB. */
.megamenu--about .pcard--article{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:9px 30px 12px 12px;
}

@media (max-width:1320px){
  .megamenu--about .pcard--article{
    padding:9px 45px 12px 12px;
  }
  .megamenu .cta--photo .cta__btn{ width:167px; }
}

/* Миниатюра заполняет кадр, но формат близок к исходным фото статей
   (3:2 и 2:1), поэтому от центра отрезается минимум. Ширина 80px —
   заголовку остаётся больше строки, чем при прежних 92px. */
.megamenu--about .pcard__thumb{
  flex:none;
  width:80px;
  height:50px;
  border-radius:3px;
  object-fit:cover;
  object-position:center;
}

.megamenu--about .pcard__body{
  display:block;
  min-width:0;
}

.megamenu--about .pcard--article .pcard__title{
  font-size:13px;
  line-height:17px;
  letter-spacing:-0.1px;   /* чуть плотнее — в строку влезает на пару слов больше */
}

/* Заголовок карточки — не больше двух строк, дальше многоточие.
   Иначе длинное название кейса или статьи распирает карточку и ломает
   высоту колонки. Работает и в кейсах, и в статьях: класс общий. */
.megamenu--about .pcard__title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}

.megamenu--about .pcard__meta{
  display:block;
  margin-top:6px;
  font-size:11px;
  line-height:21px;
  color:#6E7DAB;
}

/* В макете у карточки статьи тегов нет: вместо них дата и время чтения.
   Данные в полях остаются — при необходимости строка возвращается. */
.megamenu--about .pcard--article .pcard__tags{ display:none; }


/* ---------- список «О компании» с маркерами ---------------- */

.alist{
  margin:24px 0 0;          /* замер: заголовок до 75, первый пункт с 111 */
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;                 /* 24 + 12 = шаг 36px */
}

.alist__item{
  position:relative;
  padding-left:20px;        /* замер: маркер на 94, текст на 114 */
}
.alist__item::before{
  content:'';
  position:absolute;
  left:0; top:8px;
  width:11px; height:11px;
  background:var(--link-hover);
}

.alist__link{
  font-size:14px;
  line-height:22px;
  color:var(--navy);
  text-decoration:none;
  transition:color .15s ease;
}
.alist__link:hover,
.alist__link:focus-visible{ color:var(--link-hover); }

/* Бейдж «новый» в списке не показываем: он остаётся только в полосе меню.
   Разметка и поле в админке сохранены — достаточно снять это правило. */
.megamenu--about .alist__link .badge{ display:none; }

/* Рейтинг Яндекса последней строкой левой колонки. Бейдж приходит
   фиксированным 150×50 — уменьшаем трансформацией, а обёртку режем по
   уменьшенному размеру, иначе снизу остаётся пустая полоса 10px. */
/* Рейтинг Яндекса пока не показываем. Разметка и стили оставлены:
   чтобы вернуть плашку, достаточно убрать display:none. */
.megamenu--about .alist__item--rating{ display:none; margin-top:14px; padding-left:0; }
.megamenu--about .alist__item--rating::before{ display:none; }

.yrating{ display:block; width:165px; height:55px; overflow:hidden; }
.yrating__badge{
  display:block;
  width:150px;
  height:50px;
  border:0;
  transform:scale(1.1);
  transform-origin:left top;
}

/* бейдж в списке — замер: 42×12, левый край на (ширина текста − 10) */
.alist__link{ position:relative; display:inline-block; }
.alist__link .badge{
  position:absolute;
  top:-7px;
  left:calc(100% - 10px);
}

/* ---------- карточки статей и кейсов ---------------------- */

.pcards{
  display:flex;
  flex-direction:column;
  gap:10px;                 /* замер: карточки 87…168, 178…259 */
}

.pcard{
  position:relative;
  display:block;
  min-height:82px;          /* замер: карточка 87…168 */
  padding:6px 34px 3px 12px;/* справа место под стрелку */
  border:1px solid var(--pcard-border);
  border-radius:4px;
  text-decoration:none;
  transition:border-color .15s ease;
}
.pcard:hover,
.pcard:focus-visible{ border-color:var(--cta-btn); }

.pcard__title{
  display:block;
  font-size:14px;
  line-height:19px;
  color:var(--navy);
}

.pcard__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:5px;
}
.pcard__tag{
  display:inline-block;
  height:23px;              /* замер: чип 141…163 */
  padding:0 10px;
  border-radius:4px;
  background:var(--pcard-tag);
  color:var(--navy);
  font-size:13px;
  line-height:23px;
  white-space:nowrap;
}

.pcard__sum{
  display:block;
  margin-top:6px;
  font-size:16px;           /* замер: высота прописной 12px */
  line-height:20px;
  color:var(--navy);
}
.pcard__sum b{ font-weight:700; }

.pcard__arrow{
  position:absolute;
  right:9px; bottom:9px;
  width:17px; height:14px;   /* assets/img/arrow-right.svg, цвет внутри файла */
}

/* ---------- блок «Остались вопросы?» ---------------------- */

.cta{
  background:var(--cta-bg);
  border-radius:var(--radius);
  padding:32px 16px 42px;        /* колонка сузилась до 269: отступы симметричные,
                                    номер телефона помещается в строку */
}

.cta__title{
  margin:0;
  overflow-wrap:break-word;
  font-size:22px;           /* один размер во всех панелях — по «Направлениям» */
  line-height:24px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--navy);
  text-align:center;
}

.cta__phonebox{
  position:relative;
  margin-top:22px;
  height:52px;
  border:1px solid var(--blue);
  border-radius:var(--radius-btn);
  display:flex;
  align-items:center;
  justify-content:center;
}
/* подпись разрывает верхнюю рамку (замер: отбивка 17px с каждой стороны) */
.cta__legend{
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-50%);
  padding:0 12px;
  background:var(--cta-bg);
  color:var(--blue);
  font-size:15px;
  font-weight:700;
  line-height:15px;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;
}

.cta__phone{
  display:inline-flex;
  align-items:center;
  gap:19px;                 /* иконка → номер */
  font-family:'Geologica', var(--font);
  font-size:20px;
  line-height:1;
  font-weight:700;
  color:var(--navy);
  text-decoration:none;
}
.cta__phone svg,
.cta__phone img{ flex:none; width:28px; height:27px; color:var(--blue); }

.cta__or{
  margin-top:5px;
  margin-bottom:5px;
  font-size:14px;
  line-height:22px;
  font-weight:600;
  color:var(--blue);
  text-align:center;
}

.cta__btn{
  margin-top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0;                /* сброс, иначе текст уезжает от центра */
  border-radius:var(--radius-btn);
  background:var(--cta-btn);
  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:1;
  text-align:center;
  text-decoration:none;
  transition:background-color .15s ease;
}
.cta__btn:hover,
.cta__btn:focus-visible{ background:var(--cta-btn-hover); }

/* ==========================================================
   Панель «Услуги»
   (перенесена с прежнего макета выпадающего меню)
   ========================================================== */

.megamenu__inner--services{
  padding:32px 20px 38px;   /* замер: низ панели 273…311 */
  grid-template-columns:1fr 324px;
  grid-template-rows:auto;
  column-gap:24px;
  row-gap:0;
}

.dleft{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* ---------- плитки услуг ---------------------------------- */

.stabs{ display:flex; gap:18px; }

/* заголовок над плитками (необязательный, приходит из поля tilestitle) */
.stabsec .megamenu__title{ margin-bottom:16px; }   /* замер: заголовок до 59, плитки с 75 */

/* сетка 4 × 224 (замер: 76…300, 309…533, 545…769, 778…1002) */
.stabs--grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,224px));   /* 224 — максимум, при нехватке места сжимаются */
  gap:10px;
}

.stab{
  display:flex;
  align-items:center;
  gap:21px;                         /* замер: иконка до 136, текст с 157 */
  height:77px;                      /* замер: 75…151 */
  padding:0 12px 0 20px;            /* замер: иконка на 96 при крае плитки 76 */
  border:1px solid var(--tab-border);
  border-radius:var(--radius);
  background:#fff;
  color:var(--navy);
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}

.stab__icon{
  flex:none;
  width:40px; height:40px;          /* замер: иконка 40×40 */
  display:block;
}
.stab__icon > *{ width:100%; height:100%; display:block; object-fit:contain; }

/* Иконка — обычный файл, поэтому на залитой плитке перекрашиваем её
   фильтром в белый: работает с любым форматом и любой заливкой. */
.stab:hover .stab__icon > *,
.stab:focus-visible .stab__icon > *,
.stab.mm-active .stab__icon > *{ filter:brightness(0) invert(1); }

.stab__label{
  min-width:0;                      /* даёт подписи сжаться внутри плитки */
  overflow-wrap:break-word;         /* длинное слово переносится, а не вылезает */
  font-size:14px;
  line-height:18px;                 /* замер: шаг строк 18 */
  font-weight:500;
  text-transform:none;
}

/* наведение — залитая синяя плитка */
.stab:hover,
.stab:focus-visible,
.stab.mm-active{
  background:var(--tab-active);
  border-color:var(--tab-active);
  color:#fff;
}

/* ---------- блок «Не уверены какая услуга подходит вам?» ---
   Тот же .cta, что в «О компании», но заголовок длиннее и потому
   мельче. Все размеры сняты с new_services.png: блок 324×237. */

.megamenu--services .cta{
  align-self:start;
  padding:20px 27px 22px 36px;       /* как в «Направлениях» */
  min-height:242px;                  /* одна высота во всех панелях */
}

/* ---------- Блок «Остались вопросы?» с фотографией -------------------
   Карточка с фотографией и синей заливкой поверх — вместо светлой плашки.
   Общая для панелей: класс cta--photo ставит php тем панелям, где она
   нужна. Правила стоят ниже .megamenu--about .cta и .megamenu--services
   .cta, иначе те перебивали бы отступы и высоту по весу селектора. */
.megamenu .cta--photo{
  position:relative;
  overflow:hidden;
  padding:30px 16px 16px;
  border-radius:6px;
  background:#1F3371 var(--cta-photo-desktop, url('../img/about-cta.jpg')) center / cover no-repeat;
}

/* Заливка поверх фотографии — замер: rgba(31,51,113,.59). */
/* В «Услугах» своя фотография. Лежит в assets/img/, поэтому путь из
   menu/css/ поднимается на два уровня. Используется ужатая копия 648px:
   исходный questions.png — 1,9 МБ, для карточки 324×232 это лишнее. */
.megamenu--services .cta--photo{
  background-image:var(--cta-photo-desktop, url('../../assets/img/questions-card.jpg'));
}

.megamenu .cta--photo::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(31,51,113,.59);
}
.megamenu .cta--photo > *{ position:relative; }

.megamenu .cta--photo .cta__title{
  /*max-width:205px;*/
  font-size:20px;
  line-height:24px;
  letter-spacing:-.015em;
  color:#fff;
  text-align:left;
}

/* Подзаголовок под белым заголовком карточки. */
.megamenu .cta--photo .cta__text{
  max-width:205px;
  margin:10px 0 0;
  font-size:16px;
  line-height:22px;
  font-weight:400;
  color:#fff;
}
.megamenu .cta--photo .cta__text b,
.megamenu .cta--photo .cta__text strong{ font-weight:600; }

/* Подпись и номер идут строками, рамки вокруг них в макете нет. */
.megamenu .cta--photo .cta__phonebox{
  display:block;
  height:auto;
  margin-top:35px;
  padding:0;
  border:0;
  border-radius:0;
}

.megamenu .cta--photo .cta__legend{
  position:static;
  transform:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  background:none;
  font-size:13px;
  line-height:1;
  font-weight:500;
  letter-spacing:.03em;
  text-transform:none;
  color:var(--link-hover);
}
.megamenu .cta--photo .cta__legend svg,
.megamenu .cta--photo .cta__legend img{
  flex:none;
  width:15px;
  height:15px;
  color:currentColor;
}

.megamenu .cta--photo .cta__phone{
  display:block;
  margin-top:6px;
  gap:0;
  font-size:22px;
  line-height:22px;
  font-weight:500;
  color:#fff;
}

.megamenu .cta--photo .cta__btn{
  height:34px;
  margin-top:18px;
  border-radius:6px;
  background:var(--link-hover);
  font-size:16px;
  font-weight:600;
  color:#001B6B;
  transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* Наведение видно не только по оттенку: кнопка слегка подрастает
   и получает тень — иначе смену цвета легко не заметить. */
.megamenu .cta--photo .cta__btn:hover,
.megamenu .cta--photo .cta__btn:focus-visible{
  background:var(--gold);
  transform:scale(1.04);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

@media (prefers-reduced-motion:reduce){
  .megamenu .cta--photo .cta__btn{ transition:background-color .15s ease; }
  .megamenu .cta--photo .cta__btn:hover,
  .megamenu .cta--photo .cta__btn:focus-visible{ transform:none; }
}

/* Размеры карточки — только на десктопе; ниже по файлу блок тянется
   на всю ширину колонки, как и прежде. */
@media (min-width:1431px){
  .megamenu .cta--photo{
    height:232px;
    min-height:232px;
  }
  .megamenu .cta--photo .cta__btn{ width:167px; }
}

/* ==========================================================
   Панель «Направления платежа» (макет new_directions.png)
   Все размеры сняты с макета 1920×358: контейнер 1350 (285…1635),
   линейка на 605, блок CTA 1048…1372 от левого края панели.
   ========================================================== */

.megamenu__inner--directions{
  padding:32px 20px 36px;            /* замер: низ линейки 322, край макета 358 */
  grid-template-columns:1fr 324px;   /* замер: блок CTA 1309…1632 */
  grid-template-rows:auto;
  column-gap:40px;
  row-gap:0;
  align-items:start;
}

/* Левая часть тянется по высоте строки. Тогда она, колонки регионов
   и блок CTA всегда одной высоты: кто выше — тот и задаёт, остальные
   подстраиваются. Иначе при коротком списке ссылок блок CTA, который
   не может стать ниже своего содержимого, торчал бы вниз. */
.dirmain{
  align-self:stretch;
  display:flex;
  min-width:0;
}

/* ---------- популярные направления ------------------------ */

/* Левый блок забирает всё, что осталось от колонок регионов: в макете
   при контейнере 1350 это ровно 585px до линейки, на узком экране —
   меньше, но колонки регионов при этом не ужимаются. */
.dirpop{
  flex:0 1 585px;                    /* замер: 585px до линейки при контейнере 1350 */
  min-width:0;
}

.dirpop__grid{
  margin-top:27px;                   /* замер: заголовок до 72, первая строка с 100 */
  padding-left:12px;                 /* замер: флаги на 32 при заголовке на 20 */
  display:grid;
  grid-template-columns:265px auto;
  column-gap:0;
  row-gap:19px;                      /* 22 + 19 = шаг 41px */
}

/* строка «флаг + страна» */
.dirgrp__link{
  position:relative;
  display:block;
  padding-left:33px;                 /* слот под флаг: 20 + 13; замер: текст с 65 при флаге на 32 */
  font-size:16px;
  line-height:22px;
  font-weight:400;
  color:var(--navy);
  text-decoration:none;
  transition:color .15s ease;
}
.dirgrp__link:hover,
.dirgrp__link:focus-visible{ color:var(--link-hover); }

.dirgrp__flag{
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:20px; height:14px;           /* замер: 20×14 */
  border-radius:2px;
}

/* ---------- колонки регионов за линейкой ------------------ */

.dirregions{
  flex:1 0 auto;                     /* лишнее место достаётся колонкам, а не ужимает их */
  display:grid;
  grid-template-columns:220px auto;  /* замер: колонки на 648 и 868 */
  border-left:1px solid var(--pcard-border);
  padding-left:43px;                 /* замер: линейка 605, флаги 648 */
}

.dircountries{
  margin:23px 0 0;                   /* замер: заголовок до 72, первая строка с 96 */
  padding:0;
  list-style:none;
}
.dircountries li + li{ margin-top:8px; }   /* 22 + 8 = шаг 30px */

.dircountry{
  position:relative;
  display:block;
  padding-left:43px;                 /* слот под флаг: 20 + 23; у Азии флагов нет, текст стоит по той же линии */
  white-space:nowrap;
  font-size:14px;
  line-height:20px;
  color:var(--navy);
  text-decoration:none;
  transition:color .15s ease;
}
.dircountry:hover,
.dircountry:focus-visible{ color:var(--link-hover); }

.dircountry img{
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:20px; height:14px;           /* замер: 20×14 */
  border-radius:2px;
}

/* ---------- надпись под колонками регионов ---------------- */

.dirnote{
  grid-column:1 / -1;
  /* Ширину колонок задают списки стран, а не эта строка: нулевая ширина
     убирает надпись из расчёта, min-width возвращает её на всю строку. */
  width:0;
  min-width:100%;
  margin-top:14px;                   /* замер: список до 268, надпись с 282 */
}
.dirnote__text{
  margin:0;
  font-size:16px;
  line-height:24px;
  font-weight:300;
  text-transform:uppercase;
  color:#385CD3;
}
.dirnote__text b{ font-weight:700; }

.dirnote__link{
  display:inline-flex;
  align-items:center;
  gap:6px;                           /* замер: текст до 1038, стрелка с 1044 */
  font-size:13px;
  line-height:22px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--cta-btn);
  text-decoration:none;
  transition:color .15s ease;
}
.dirnote__link svg{
  flex:none;
  width:14px; height:8px;            /* замер: стрелка 14px */
  transition:transform .15s ease;
}
.dirnote__link:hover,
.dirnote__link:focus-visible{ color:var(--link-hover); }
.dirnote__link:hover svg,
.dirnote__link:focus-visible svg{ transform:translateX(3px); }

/* ---------- голубой блок «Не нашли свое направление?» ----- */

/* Блок тянется по высоте правой части — то есть по .dirregions,
   а содержимое центрируется, чтобы не липло к верхнему краю. */
.ctad{
  align-self:start;                  /* замер: блок 237px, ниже колонок не тянется */
  display:flex;
  flex-direction:column;
  background:var(--cta-bg);
  border-radius:var(--radius);
  padding:20px 27px 22px 36px;       /* замер: содержимое 1350…1609 при блоке 1313…1637 */
  min-height:242px;                  /* эталон высоты для блоков CTA в остальных панелях */
}

.ctad__title{
  margin:0;
  overflow-wrap:break-word;
  text-align:center;
  font-size:22px;                    /* замер: высота прописной 16px */
  line-height:24px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--navy);
}

/* Текст под заголовком скрыт — поле в ACF остаётся,
   вернуть можно сняв display:none */
.ctad__text{
  display:none;
  margin:6px 0 0;
  font-size:16px;                    /* замер: высота прописной 12px */
  line-height:22px;
  font-weight:400;
  color:var(--navy);
}
.ctad__text b{ font-weight:700; }

.ctad__phonebox{
  position:relative;
  margin-top:22px;                   /* замер: заголовок до 110, поле с 132 */
  height:52px;                       /* замер: 132…184 */
  border:1px solid var(--blue);
  border-radius:var(--radius-btn);
  display:flex;
  align-items:center;
  justify-content:center;
}
/* подпись разрывает верхнюю рамку */
.ctad__legend{
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-50%);
  padding:0 12px;
  background:var(--cta-bg);
  color:var(--blue);
  font-size:15px;                    /* замер: высота прописной 11px */
  font-weight:700;
  line-height:15px;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;
}

.ctad__phone{
  display:inline-flex;
  align-items:center;
  gap:19px;                          /* замер: иконка → номер */
  font-family:'Geologica', var(--font);
  font-size:20px;                    /* замер: высота цифр 15px */
  line-height:1;
  font-weight:700;
  color:var(--navy);
  text-decoration:none;
}
.ctad__phone svg,
.ctad__phone img{ flex:none; width:28px; height:27px; color:var(--blue); }

.ctad__or{
  margin-top:5px;
  margin-bottom:5px;
  font-size:14px;
  line-height:22px;
  font-weight:600;
  color:var(--blue);
  text-align:center;
}

.ctad__btn{
  margin-top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:46px;                       /* замер: 211…257 */
  padding:0;                         /* сброс, иначе текст уезжает от центра */
  border-radius:var(--radius-btn);
  background:var(--cta-btn);
  color:#fff;
  font-size:18px;                    /* замер: высота прописной 12px */
  font-weight:700;
  line-height:1;
  text-align:center;
  text-decoration:none;
  transition:background-color .15s ease;
}
.ctad__btn:hover,
.ctad__btn:focus-visible{ background:var(--cta-btn-hover); }


/* ==========================================================
   ПЛАНШЕТЫ И УЗКИЕ ДЕСКТОПЫ (1100…1430)
   Макет рассчитан на контейнер 1350. Ниже него панели целиком
   не помещаются, поэтому блоки перестраиваются, а не ужимаются
   до нечитаемых колонок и не наезжают друг на друга.
   ========================================================== */

@media (min-width:1321px) and (max-width:1430px){

  /* ---------- полоса меню --------------------------------- */

  /* На макете панель равна ширине меню. Здесь полосу приходится
     ужимать, чтобы она влезла, — но панель от неё отвязываем,
     иначе вместе с полосой сжимается и содержимое панелей. */
  .mainmenu__box{ width:100%; }

  .mainmenu__list{ gap:7px; }
  .mainmenu__link{ padding:0 8px; font-size:15px;   /* кегль как на широких экранах, отступы плотнее */ }

  /* ---------- общее для панелей --------------------------- */

  /* Карточка «Остались вопросы?» стоит одинаково во всех панелях и здесь:
     верх 35, правый край 30 — те же числа, что на широком экране.
     Раньше в этом диапазоне отступы были 32 и 20, из-за чего блок
     смещался при переключении пунктов. */
  .megamenu__inner,
  .megamenu__inner--services,
  .megamenu__inner--directions{
    max-width:none;
    min-height:302px;
    padding-top:35px;
    padding-left:20px;
    padding-right:30px;
    column-gap:32px;
  }

  /* Карточка занимает последнюю колонку целиком и прижата к её верху:
     ширина 496 и отступ сверху из широкого макета сюда не доходят. */
  .megamenu .cta{ align-self:start; }
  .megamenu .cta--photo{ width:auto; margin-top:0; }


  /* ---------- панель «О компании» ------------------------- */

  .megamenu__inner{
    grid-template-columns:minmax(190px,368px) minmax(190px,269px) minmax(190px,269px) minmax(300px,324px);
  }

  /* ---------- панель «Услуги» ----------------------------- */

  .megamenu__inner--services{ grid-template-columns:minmax(0,1fr) minmax(300px,324px); }

  /* плитки тянутся по колонке вместо жёстких 220px */
  .stabs--grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .stabs--grid .stab{ gap:14px; }

  /* две группы ссылок рядом требуют 1200px — ставим их друг под друга */

  /* ---------- панель «Направления платежа» ---------------- */

  .megamenu__inner--directions{ grid-template-columns:minmax(0,1fr) minmax(300px,324px); }

  /* колонки регионов рядом с «популярными» требуют 968px —
     уводим их вниз, вертикальная линейка становится горизонтальной */
  .dirmain{ display:block; }
  .dirpop{ flex:none; }
  .dirpop__grid{ column-gap:32px; }

  .dirregions{
    flex:none;
    margin-top:32px;
    padding-top:32px;
    padding-left:0;
    padding-bottom:0;
    border-left:0;
    border-top:1px solid var(--rule);
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:32px;
  }
}

/* Ещё уже: плиток в ряд меньше, типографика блоков CTA на шаг мельче,
   чтобы номер и кнопка не разрывались по слогам. */
/* Блок писался под 1100–1300px. С переносом порога мобильного меню на 1320px
   этот диапазон целиком ушёл в шторку, поэтому правила ниже больше не
   срабатывают — оставлены на случай, если порог вернут обратно. */
@media (min-width:1100px) and (max-width:1300px){
  .stabs--grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stabs--grid .stab__label{ font-size:13px; line-height:17px; }

  .cta__title,
  .ctad__title{ font-size:20px; line-height:24px; }

  .cta__phone,
  .ctad__phone{ font-size:18px; gap:12px; }

}

/* ==========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   Макеты: ../Меню_О компании_mob.jpg, ../Меню_Услуги_mob.jpg,
           ../Меню_Направления платежа_mob.jpg  (все 576px шириной)
   Размеры сняты с макетов 1:1 (шрифты совпадают с десктопом).
   ========================================================== */

/* --- элементы, которых на десктопе не видно ---------------- */

.mbar{ display:none; }
.mback{ display:none; }
.acc__chev{ display:none; }

/* кнопка-аккордеон: на десктопе выглядит как обычный заголовок */
.acc{
  display:block;
  width:100%;
  margin:0; padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  text-transform:inherit;
  letter-spacing:inherit;
  cursor:pointer;
}
.acc:disabled{ cursor:default; }

@media (max-width:1320px){

  /* ---------- шапка с логотипом и бургером ---------------- */

  .mainmenu{
    position:relative;
    z-index:9998;             /* выше шапки темы: иначе её элементы
                                 перехватывают касания по шторке */
    background:transparent;
  }

  .mbar{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    height:52px;                     /* замер: полоса 0…51 */
    padding:0 20px;                  /* по контейнеру панели */
    background:#E9ECFD;              /* замер */
  }

  .mbar__logo{ display:block; line-height:0; }
  .mbar__logo img{ display:block; width:127px; height:32px; }

  .mbar__toggle{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px; height:32px;
    margin-right:-4px;
    padding:0;
    border:0;
    background:none;
    color:var(--navy);
    cursor:pointer;
  }

  /* бургер из трёх линий */
  .mbar__burger{
    position:relative;
    display:block;
    width:24px; height:2px;
    border-radius:2px;
    background:currentColor;
  }
  .mbar__burger::before,
  .mbar__burger::after{
    content:'';
    position:absolute;
    left:0;
    width:24px; height:2px;
    border-radius:2px;
    background:currentColor;
  }
  .mbar__burger::before{ top:-7px; }
  .mbar__burger::after{ top:7px; }

  .mbar__x{ display:none; width:24px; height:24px; }

  .mainmenu.mm-mobile-open .mbar__burger{ display:none; }
  .mainmenu.mm-mobile-open .mbar__x{ display:block; }

  /* ---------- сама шторка --------------------------------- */

  .mainmenu__box{
    position:fixed;
    top:52px; left:0; right:0; bottom:0;
    width:auto; max-width:none;
    margin:0;
    background:var(--panel-bg);
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    z-index:55;
    visibility:hidden;
    transform:translateX(100%);
    transition:transform .25s ease, visibility .25s ease;
  }
  .mainmenu.mm-mobile-open .mainmenu__box{
    visibility:visible;
    transform:none;
  }

  /* ---------- корневой экран: список разделов ------------- */

  .mainmenu__nav{ padding:14px 20px 40px; }

  .mainmenu__list{
    display:block;
    padding:0;
  }

  .mainmenu__link{
    height:auto;
    padding:12px 0;
    gap:12px;
    justify-content:space-between;
    color:var(--navy);
    font-size:18px;      /* как в прежнем меню: .menu-block__nav — 18px */
    font-weight:400;
    line-height:24px;
    white-space:normal;
  }
  .mainmenu__link:hover,
  .mainmenu__link:focus-visible,
  .mainmenu__item.mm-open > .mainmenu__link,
  .mainmenu__item.mm-current > .mainmenu__link{ background:none; }
  .mainmenu__link:hover::after,
  .mainmenu__link:focus-visible::after,
  .mainmenu__item.mm-open > .mainmenu__link::after,
  .mainmenu__item.mm-current > .mainmenu__link::after{ display:none; }

  /* шеврон родителя смотрит вправо — уход на подэкран */
  .mainmenu__chevron{ transform:rotate(-90deg); }

  .mainmenu__link .badge{
    position:static;
    margin-right:auto;
  }

  /* ---------- подэкраны (панели мега-меню) ---------------- */

  /* панель лежит внутри прокручиваемой шторки, поэтому absolute:
     иначе transform на шторке во время анимации делает её
     containing block и fixed-панель уезжает вниз на высоту шапки */
  .megamenu{
    position:absolute;
    top:0; left:0; right:0;
    width:auto;
    min-height:100%;
    background:var(--panel-bg);
    z-index:56;
    opacity:1;
    visibility:hidden;
    transform:translateX(100%);
    transition:transform .25s ease, visibility .25s ease;
  }
  .megamenu.mm-open{
    visibility:visible;
    transform:none;
  }

  /* «← Вернуться назад» — замер: строка 78…100 */
  .mback{
    position:relative;
    z-index:1;
    display:flex;
    width:100%;                      /* кнопка — форма, по умолчанию она
                                        шириной по содержимому; тянем на всю
                                        строку, чтобы палец не промахивался */
    justify-content:flex-start;
    align-items:center;
    gap:9px;
    margin:26px 0 0;
    padding:0 20px;
    border:0;
    background:none;
    color:var(--blue);
    font-family:var(--font);
    font-size:16px;
    line-height:22px;
    cursor:pointer;
  }
  .mback svg{ flex:none; width:18px; height:14px; }

  .megamenu__inner{
    display:block;
    max-width:none;
    margin-top:25px;                 /* замер: заголовок с 125 */
    padding:0 20px 40px;
  }

  /* ---------- аккордеоны ---------------------------------- */

  .acc{
    display:inline-flex;
    align-items:center;
    gap:12px;                        /* замер: текст → шеврон */
    width:auto;
  }
  .acc__label{ display:block; }
  .megamenu__title--row .acc{ display:inline-flex; }

  .acc__chev{
    display:block;
    flex:none;
    width:15px; height:9px;          /* замер */
    transition:transform .2s ease;
  }
  .acc[aria-expanded="true"] .acc__chev,
  .dirgrp__link[aria-expanded="true"] .acc__chev{ transform:rotate(180deg); }

  .acc-sec.mm-collapsed > .acc-body{ display:none; }

  /* ==========  панель «О компании»  ====================== */

  .megamenu--about .megamenu__inner{ display:flex; flex-direction:column; }

  /* порядок по макету: заголовок → ссылки → статьи → кейсы → CTA */
  .megamenu--about .megamenu__inner > h2:nth-of-type(1){ order:1; }
  .megamenu--about .megamenu__inner > .megamenu__title:nth-of-type(1){ order:1; }
  .megamenu--about .alist                              { order:2; margin-top:11px; }
  .megamenu--about .megamenu__inner > h2:nth-of-type(2){ order:3; margin-top:33px; }
  .megamenu--about .megamenu__inner > .megamenu__title:nth-of-type(2){ order:3; margin-top:33px; }
  .megamenu--about .pcards--articles                   { order:4; margin-top:12px; }
  .megamenu--about .megamenu__inner > h2:nth-of-type(3){ order:5; margin-top:24px; }
  .megamenu--about .megamenu__inner > .megamenu__title:nth-of-type(3){ order:5; margin-top:24px; }
  .megamenu--about .pcards--cases                      { order:6; margin-top:12px; }
  .megamenu--about .cta{
    order:7;
    margin-top:23px;
    align-self:stretch;              /* на десктопе start — в колонке это сузило бы блок */
    padding:25px 22px 33px;
    min-height:0;
  }

  /* в колонке карточки тянутся на всю ширину */
  .pcards{ gap:8px; }
  .pcard{ min-height:0; padding:9px 34px 9px 12px; }
  .pcard__title{ font-size:16px; line-height:20px; }
  /* у кейсов и статей свой размер в базовых правилах — перебиваем тем же весом,
     иначе .pcard__title выше по файлу не срабатывает */
  .megamenu--about .pcard--case .pcard__title,
  .megamenu--about .pcard--article .pcard__title{ font-size:16px; line-height:20px; }
  .pcard__tag{ font-size:12px; height:22px; line-height:22px; padding:0 9px; }
  .pcard__sum{ font-size:15px; line-height:19px; }

  .alist{ margin-top:0; gap:10px; }
  .alist__link{ font-size:16px; line-height:22px; }

  /* ==========  блоки CTA (общие для всех панелей)  ======= */

  .cta,
  .ctad{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:12px;
    min-height:0;
    padding:25px 22px 33px;          /* замер: 773…942 при контенте 46…529 */
    border-radius:var(--radius);
  }

  .cta__title,
  .ctad__title{
    width:100%;
    margin-bottom:14px;              /* 26 − gap 12 */
    font-size:28px;                  /* замер: высота прописной 20px */
    line-height:34px;
    text-align:left;
  }
  .megamenu--services .cta{
    align-self:stretch;
    padding:25px 22px 33px;
    min-height:0;
  }

  /* Панель «География платежей» перешла с .ctad на карточку .cta--photo:
     мобильные размеры задаём ей так же, как соседним панелям. */
  .megamenu--directions .cta{
    align-self:stretch;
    padding:25px 22px 33px;
    min-height:0;
  }

  .cta__title br,
  .ctad__title br,
  .ctad__text br{ display:none; }

  .ctad__text{
    width:100%;
    margin:-4px 0 8px;               /* замер: строка под заголовком */
  }

  .cta__phonebox,
  .ctad__phonebox{
    flex:1 1 230px;                  /* замер: поле 46…275 */
    margin-top:0;
    height:51px;
  }
  .cta__legend,
  .ctad__legend{
    font-size:13px;
    line-height:13px;
  }
  .cta__phone,
  .ctad__phone{ font-size:20px; gap:16px; }

  .cta__or,
  .ctad__or{
    flex:none;
    align-self:center;
    margin:0;
    font-size:18px;
    line-height:22px;
    font-weight:600;
  }

  .cta__btn,
  .ctad__btn{
    flex:1 1 205px;                  /* замер: кнопка 325…529 */
    margin-top:0;
    height:46px;
    background:var(--cta-btn);
    font-weight:700;
  }
  .cta__btn:hover,
  .cta__btn:focus-visible,
  .ctad__btn:hover,
  .ctad__btn:focus-visible{ background:var(--cta-btn-hover); }

  /* ==========  панель «Услуги»  ========================== */

  .megamenu__inner--services{ padding:0 20px 40px; }
  .dleft{ display:block; }

  /* плитки: две колонки (замер: 258 + 12 + 258, высота 66, шаг 74) */
  .stabs--grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 12px;
  }
  .stabs--grid .stab{
    height:auto;
    min-height:66px;
    padding:0 18px;
    gap:22px;                        /* замер: иконка 43…83, текст с 105 */
  }
  .stab__icon{ width:40px; height:40px; }
  .stab__label{
    font-size:17px;                  /* замер: высота прописной 12px */
    line-height:22px;
    font-weight:600;
    text-transform:none;             /* в мобильном макете обычный регистр */
  }

  .stabsec{ padding-bottom:26px; }
  .stabsec .megamenu__title{ margin-bottom:15px; }


  /* ==========  панель «Направления платежа»  ============= */

  .megamenu__inner--directions{ padding:0 20px 40px; }
  .dirmain{ display:block; margin-top:0; padding-left:0; }

  .dirpop{ flex:none; padding-bottom:26px; }
  .dirregions{
    display:block;
    border-left:0;
    padding-left:0;
    padding-bottom:0;
  }
  .dirreg{
    border-top:1px solid var(--rule);
    padding:20px 0 23px;
  }

  .dirpop__grid{
    display:block;
    margin-top:24px;                 /* замер: заголовок до 151, страна с 176 */
    padding-bottom:5px;
  }
  .dirgrp__link + .dirgrp__link{ margin-top:20px; }
  .dirnote{ margin-top:20px; }

  .dircountries{ margin-top:20px; padding-bottom:5px; }
  .dircountry{ font-size:16px; }

  .ctad{
    align-self:auto;
    flex-direction:row;
    justify-content:flex-start;
    margin-top:4px;
  }
}

/* --- очень узкие экраны ------------------------------------ */

@media (max-width:575px){
  .cta__phonebox,
  .ctad__phonebox,
  .cta__btn,
  .ctad__btn{ flex:1 1 100%; }
  .cta__or,
  .ctad__or{ width:100%; text-align:center; }
}

@media (max-width:479px){
  .mbar,
  .mback,
  .megamenu__inner,
  .mainmenu__nav{ padding-left:16px; padding-right:16px; }

  .stabs--grid{ grid-template-columns:1fr; }


  .cta__title,
  .ctad__title{ font-size:24px; line-height:30px; }
}

/* --- блокировка прокрутки страницы под открытой шторкой ----
   body фиксируется со смещением (top задаёт скрипт), иначе на iOS
   сбиваются попадания по элементам внутри fixed-шторки. */

.mm-lock,
.mm-lock body{ overflow:hidden; }
.mm-lock body{
  position:fixed;
  left:0; right:0;
  width:100%;
}


/* ==========================================================
   Панель «География платежей» — замеры сняты с эталона
   assets/img/submenu_geo.png (скриншот 3840 при раскладке 1920,
   значения пересчитаны в css-пиксели). Панель 1423×301 по центру окна:
   слева заголовок, три колонки стран и строка под ними, справа
   карточка с фотографией 496×232.
   ========================================================== */
@media (min-width:1431px){

  .megamenu__inner--directions{
    position:relative;
    max-width:1423px;
    /* Отступы как в остальных панелях: заголовок и верх карточки на 35.
       Правый 30: 27 + 870 + 496 + 30 = 1423. Панель здесь выше соседних —
       колонки со странами намеренно опущены ниже. */
    padding:35px 30px 30px 27px;
    grid-template-columns:870px 496px;
    column-gap:0;
    row-gap:0;
    align-items:start;
  }

  .megamenu--directions .dirmain{ display:block; }

  /* Заголовок подан так же, как «Услуги платёжного агента» в соседней
     панели: по левому краю, тёмно-синий, с отбивкой 16 до содержимого. */
  .megamenu--directions .dirpop .megamenu__title{
    margin:0 0 16px;
    font-size:18px;
    line-height:24px;
  }

  /* Плиток популярных направлений в эталоне нет. */
  .megamenu--directions .dirpop__grid{ display:none; }

  /* Колонки стран начинаются на 27 / 333 / 618 от края панели. */
  /* Колонки начинаются на 27 / 333 / 618 от края панели. Ширины заданы
     с зазором 40, чтобы разделитель приходился ровно на его середину. */
  .megamenu--directions .dirregions{
    position:relative;
    display:grid;
    grid-template-columns:266px 245px 279px;
    column-gap:40px;
    margin-top:10px;
    border:0;
  }

  .megamenu--directions .dirreg{ min-width:0; }

  /* Названия регионов — как названия услуг: обычный регистр, 16/18.
     Небольшой отступ сверху опускает их относительно разделителей. */
  .megamenu--directions .dirregions .megamenu__title{
    margin:8px 0 0;
    font-size:14px;
    line-height:18px;
    font-weight:700;
    text-transform:none;
  }

  .megamenu--directions .dircountries{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:23px;
  }

  .megamenu--directions .dircountry{
    padding-left:32px;        /* флаг 20 + отбивка 12 */
    line-height:20px;
  }

  /* Разделители тянутся на всю высоту колонок со странами: псевдоэлементы
     сидят на самой сетке колонок, поэтому их высота считается от неё,
     а не задана числом. Абсолютные — ячейками сетки не становятся.
     Координаты от края сетки: 313 и 598 минус её отступ 27. */
  .megamenu--directions .dirregions::before,
  .megamenu--directions .dirregions::after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    width:1px;
    background:var(--pcard-border);
  }
  .megamenu--directions .dirregions::before{ left:286px; }
  .megamenu--directions .dirregions::after { left:571px; }

  /* Строка под колонками — по центру левой части и обычным регистром:
     базовое правило .dirnote__text переводит её в прописные. */
  .megamenu--directions .dirnote{
    width:auto;
    min-width:0;
    margin-top:2px;
    text-align:center;
  }

  .megamenu--directions .dirnote__text{ text-transform:none; }

  /* Карточка справа: 496×232, её верх на 34 от края панели,
     то есть на 15 ниже заголовка. */
  .megamenu--directions .cta--photo{
    width:496px;
    height:232px;
    min-height:232px;
    margin-top:0;      /* верх карточки задаёт отступ панели — 35 */
    padding:18px;
  }

  /* Карточка здесь шире остальных, поэтому заголовку и подзаголовку
     даём больше места — строки не ломаются посередине. */
  .megamenu--directions .cta--photo .cta__title,
  .megamenu--directions .cta--photo .cta__text{ max-width:330px; }

  .megamenu--directions .cta--photo .cta__phonebox{ margin-top:20px; }
  .megamenu--directions .cta--photo .cta__btn{ margin-top:14px; width:167px; }
}

/* На узких экранах плашка «Новый» больше не висит над строкой, а встаёт
   в поток: при ширине до 1320px она наезжала на подпись пункта. */
@media (max-width:1320px){
  .mainmenu__link .badge{
    position:static;
    margin-right:auto;
    margin-top:-30px;
  }

  /* Заголовок карточки «Остались вопросы?» крупнее: на узкой полосе
     места под него больше, чем на широком экране. */
  .megamenu .cta--photo .cta__title{
    max-width:205px;
    font-size:28px;
    line-height:30px;
    letter-spacing:-.015em;
    color:#fff;
    text-align:left;
  }
}

/* В мобильной шторке «Популярные направления» — обычный заголовок:
   четыре страны под ним дублируют список ниже, а раскрывать там нечего. */
@media (max-width:1320px){
  .megamenu--directions .dirpop__grid{ display:none !important; }

  .megamenu--directions .dirpop .acc{
    pointer-events:none;
    cursor:default;
  }

  .megamenu--directions .dirpop .acc__chev{ display:none; }
}

/* ---------- планшет: карточка «Остались вопросы?» ----------
   Содержимое по центру карточки, телефон и кнопка столбиком, фотография
   сдвинута вправо — на узкой полосе прежняя строчная раскладка ломалась. */
@media (min-width:576px) and (max-width:1320px){

  .megamenu .cta--photo{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:230px;
    padding:28px 24px;
    background-position:right center;
    text-align:center;
  }

  .megamenu .cta--photo .cta__title{
    width:100%;
    max-width:none;
    margin:0 0 16px;
    font-size:32px;
    line-height:36px;
    text-align:center;
  }

  .megamenu .cta--photo .cta__text{
    max-width:none;
    margin:0 0 14px;
    text-align:center;
  }

  /* телефон и кнопка — друг под другом, по центру */
  .megamenu .cta--photo .cta__phonebox{
    flex:none;
    width:auto;
    height:auto;
    margin:0;
    text-align:center;
  }

  .megamenu .cta--photo .cta__legend,
  .megamenu .cta--photo .cta__phone{ justify-content:center; }

  .megamenu .cta--photo .cta__or{ display:none; }

  .megamenu .cta--photo .cta__btn{
    flex:none;
    width:min(260px, 100%);
    margin-top:14px;
  }
}

/* Фотографии карточки приходят из пункта меню переменными --cta-photo-*.
   Если поле для планшета или мобильных пустое, остаётся десктопное фото,
   а если пусто всё — фон из стилей темы. */
@media (max-width:1320px){
  .megamenu .cta--photo{
    background-image:var(--cta-photo-tablet, var(--cta-photo-desktop, url('../img/about-cta.jpg')));
  }

  .megamenu--services .cta--photo{
    background-image:var(--cta-photo-tablet, var(--cta-photo-desktop, url('../../assets/img/questions-card.jpg')));
  }
}

@media (max-width:575px){
  .megamenu .cta--photo{
    background-image:var(--cta-photo-mobile, var(--cta-photo-tablet, var(--cta-photo-desktop, url('../img/about-cta.jpg'))));
  }

  .megamenu--services .cta--photo{
    background-image:var(--cta-photo-mobile, var(--cta-photo-tablet, var(--cta-photo-desktop, url('../../assets/img/questions-card.jpg'))));
  }
}

/* На самых узких экранах заголовок карточки мельче: при 28px он занимал
   почти всю высоту плашки. */
@media (max-width:480px){
  .megamenu .cta--photo .cta__title{
    max-width:205px;
    font-size:22px;
    line-height:30px;
    letter-spacing:-.015em;
    color:#fff;
    text-align:left;
  }
}

/* Кегль пунктов главного меню на телефонах — как в прежнем меню:
   .menu-block__nav падал с 18px до 16px на max-width:576px. */
@media (max-width:576px){
  .mainmenu__link{ font-size:16px; }
}

/* Шторку открывает бургер шапки сайта: своя полоса меню с логотипом
   и бургером на планшете и мобильных не нужна, а верх шторки считается
   от низа шапки (--mm-drawer-top ставит menu.js). */
@media (max-width:1320px){
  .mainmenu .mbar{ display:none; }
  .mainmenu__box{ top:var(--mm-drawer-top, 52px); }
}

/* Выше 1099px работает горизонтальная полоса меню — бургер шапки не нужен. */
@media (min-width:1321px){
  .main-header__mbtn{ display:none !important; }
}

/* Полоса меню: свой фон и отступ от шапки. Только десктоп — на планшете
   и мобильных полосы нет, там меню открывается шторкой. */
@media (min-width:1321px){
  .mainmenu{
    background-color:#1F3371;
    margin-top:15px;
  }
}

/* Пока открыто мега-меню или мобильная шторка, шапка идёт поверх страницы.
   Класс ставит menu.js; :has() — подстраховка для случая, когда скрипт
   почему-то не отработал. Модалки сайта (magnific popup, z-index 1042+)
   остаются выше. */
.main-header.mm-elevated,
.main-header:has(.megamenu.mm-open),
.main-header:has(.mainmenu.mm-mobile-open){
  z-index:1000;
}