/* ============================================================
   Method Media — фирменные стили для Тильды
   Вставлять в: Настройки сайта → Ещё → Пользовательские CSS-стили
   Порядок применения: сначала шрифт и базовые цвета, потом блоки.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#0E0E0E;
  --gray:#6B6B6B;
  --line:#E3E3E3;
  --accent:#E30613;
  --soft:#F5F4F2;
}

/* ---------- шрифт ---------- */
body,
.t-body,
.t-records,
.t-title,
.t-descr,
.t-text,
.t-name,
.t-btn,
.t-input,
.t-textarea,
.t-select,
.popup,
.t-menu__link{
  font-family:'Montserrat', Arial, sans-serif !important;
}

.t-body{ color:var(--ink); -webkit-font-smoothing:antialiased; }

/* ---------- заголовки ---------- */
.t-title,
.t-title_xl,
.t-title_l,
.t-title_m{
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  color:var(--ink) !important;
}

.t-title_xl{ line-height:1.03 !important; }

/* ---------- тексты ---------- */
.t-descr,
.t-text{
  color:var(--gray);
  line-height:1.6;
}

.t-text strong, .t-descr strong{ color:var(--ink); }

/* ---------- ссылки ---------- */
.t-text a:not(.t-btn){
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:1px;
}
.t-text a:not(.t-btn):hover{
  color:var(--accent);
}

/* ---------- кнопки ---------- */
.t-btn,
.t-btn_2,
button.t-btn{
  background:var(--ink) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  padding:18px 34px !important;
  font-weight:600 !important;
  font-size:15px !important;
  letter-spacing:0.01em;
  transition:background .18s ease;
}
.t-btn:hover,
.t-btn_2:hover{
  background:var(--accent) !important;
  color:#fff !important;
}

/* вторичная кнопка — текстовая со стрелкой */
.t-btn_secondary,
.t-btn.t-btn_secondary{
  background:transparent !important;
  color:var(--ink) !important;
  padding:0 !important;
  border-bottom:2px solid var(--accent) !important;
  border-radius:0 !important;
}
.t-btn_secondary:hover{
  color:var(--accent) !important;
  background:transparent !important;
}

/* ---------- формы ---------- */
.t-input,
.t-textarea,
.t-select{
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:10px 0 !important;
  font-size:16px !important;
  color:var(--ink) !important;
}
.t-input:focus,
.t-textarea:focus{
  border-bottom-color:var(--accent) !important;
  outline:none;
}
.t-input::placeholder,
.t-textarea::placeholder{ color:#A3A3A3; }

/* ---------- линии и фоны ---------- */
.t-cover{ background:transparent; }

/* ---------- типографика: примерные масштабы ---------- */
/* Подгоняются после первой собранной страницы */

/* ---------- мобильные ---------- */
@media screen and (max-width:960px){
  .t-title_xl{ font-size:38px !important; line-height:1.06 !important; }
  .t-title_l{ font-size:28px !important; }
  .t-btn{ padding:16px 28px !important; font-size:14px !important; }
}

.t-menu-base__imglogo{
  max-width:170px !important;
  width:auto !important;
  height:38px !important;
}

.t-menu-base__list li:nth-last-child(-n+2) .t-menu__link-item{
  font-size:12px !important;
  letter-spacing:.08em;
  color:#B4B4B4 !important;
}

/* ============================================================
   METHOD MEDIA — мобильная версия
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили
   Вставлять в конец, после остальных стилей.
   Правила с !important, потому что перебивают инлайн-отступы
   внутри блоков T123.
   ============================================================ */

@media (max-width: 900px) {

  /* ---------- общая ширина и отступы ---------- */
  .mm-wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* первый экран: убираем 80–88px пустоты сверху */
  .mm > .mm-wrap:first-child {
    padding-top: 40px !important;
    padding-bottom: 30px !important;
  }

  .mm-sec, .mm-dark, .mm-block, .mm-state, .mm-xref {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* ---------- типографика ---------- */
  .mm-h1 { font-size: 32px !important; line-height: 1.1 !important; letter-spacing: -.02em !important; }
  .mm-h2 { font-size: 24px !important; line-height: 1.2 !important; }
  .mm-lead { font-size: 16px !important; line-height: 1.55 !important; margin-top: 18px !important; }
  .mm-kicker { margin-bottom: 16px !important; }

  .mm-prose > p, .mm-prose li { font-size: 15.5px !important; line-height: 1.7 !important; }
  .mm-prose h2 { font-size: 21px !important; margin-top: 36px !important; }
  .mm-prose blockquote p { font-size: 16px !important; }
  .mm-ah, .mm-prose { padding-left: 20px !important; padding-right: 20px !important; }
  .mm-ah { padding-top: 36px !important; }
  .mm-ah h1 { font-size: 26px !important; line-height: 1.18 !important; }
  .mm-sub { font-size: 15.5px !important; }

  /* ---------- цифры ---------- */
  .mm-num { font-size: 26px !important; }
  .mm-cap { font-size: 12.5px !important; }
  .mm-big { font-size: 64px !important; }
  .mm-big-cap { font-size: 12px !important; margin-top: 10px !important; }

  /* ---------- сетки в одну колонку ---------- */
  .mm-grid,
  .mm-arts,
  .mm-more-grid,
  .mm-pr,
  .mm-steps,
  .mm-case-grid,
  .mm-tgrid,
  .mm-give,
  .mm-xgrid,
  .mm-facts { grid-template-columns: 1fr !important; }

  .mm-grid, .mm-arts, .mm-tgrid, .mm-xgrid { gap: 1px !important; }
  .mm-steps, .mm-pr, .mm-give { gap: 26px !important; }
  .mm-facts { gap: 20px !important; margin-top: 36px !important; }

  .mm-steprow, .mm-tool { grid-template-columns: 1fr !important; gap: 6px !important; }
  .mm-steprow .n, .mm-tool .n { padding-top: 0 !important; }

  /* ---------- карточки ---------- */
  .mm-card, .mm-tcard { padding: 26px 22px 26px !important; min-height: 0 !important; }
  .mm-card h3, .mm-tcard h3 { font-size: 19px !important; }
  .mm-art { min-height: 0 !important; padding: 24px 20px 24px !important; }
  .mm-art h3 { font-size: 15.5px !important; }
  .mm-xitem { padding: 24px 22px 26px !important; }

  /* ---------- отзывы и награда ---------- */
  .mm-phi, .mm-award { grid-template-columns: 1fr !important; gap: 26px !important; padding: 40px 0 !important; }
  .mm-mark { max-width: 150px !important; }
  .mm-slot { min-height: 200px !important; }
  .mm-rev { margin-top: 26px !important; }
  .mm-rev p { font-size: 15px !important; }
  .mm-who { font-size: 12.5px !important; }

  /* ---------- призывы ---------- */
  .mm-end, .mm-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 44px 0 !important;
    gap: 20px !important;
  }
  .mm .mm-btn { width: 100% !important; text-align: center !important; padding: 16px 24px !important; }

  /* ---------- статьи ---------- */
  .mm-chart { min-height: 160px !important; font-size: 11px !important; }
  .mm-plate { padding: 16px 18px !important; font-size: 12.5px !important; }
  .mm-meta { gap: 6px 18px !important; font-size: 12px !important; }

  /* ---------- карта ---------- */
  .mm-map iframe { height: 280px !important; }
  .mm-info { grid-template-columns: 1fr !important; gap: 28px !important; padding: 40px 0 !important; }

  /* ---------- подвал ---------- */
  .mmf { padding: 40px 0 30px !important; }
  .mmf-grid { flex-direction: column !important; gap: 18px !important; }
  .mmf-wrap { padding: 0 20px !important; }
}

/* ============================================================
   METHOD MEDIA — мобильная версия, дополнение №2
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили
   Вставлять В КОНЕЦ, после предыдущих правил.
   ============================================================ */

@media (max-width: 960px) {

  /* ---------- логотип в мобильной шапке ---------- */
  /* Тильда по умолчанию делает его белым, на белом фоне не видно */
  .tmenu-mobile__text,
  .tmenu-mobile__text a,
  .tmenu-mobile__burgerlogo,
  .tmenu-mobile__burgerlogo a {
    color: #0E0E0E !important;
  }
  .tmenu-mobile__text {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
  }
  /* сама шапка: воздух по краям и линия снизу */
  .tmenu-mobile__container {
    padding: 0 20px !important;
  }

  /* ---------- открытое меню ---------- */
  /* пункты чуть плотнее, чтобы весь список влезал без прокрутки */
  .t-menu-base__list li {
    padding: 9px 0 !important;
  }
  .t-menu-base__list .t-menu__link-item {
    font-size: 19px !important;
  }

  /* RU / EN: убираем большой отступ слева, ставим пометку сверху */
  .t-menu-base__list li:nth-last-child(2) {
    margin-left: 0 !important;
    margin-top: 22px !important;
  }
  .t-menu-base__list li:nth-last-child(-n+2) .t-menu__link-item {
    font-size: 13px !important;
    letter-spacing: .1em !important;
  }

  /* ---------- знак φ ---------- */
  .mm-mark {
    max-width: 130px !important;
  }

  /* ---------- текст ---------- */
  .mm-lead {
    line-height: 1.6 !important;
  }
}

/* ============================================================
   METHOD MEDIA — логотип в мобильной шапке
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили
   Вставлять В КОНЕЦ.

   Правило срабатывает только пока Тильда считает шапку
   «без логотипа» (класс _withoutlogo). Как только логотип
   появится в настройках блока — правил больше не будет,
   дубля не случится.
   ============================================================ */

@media (max-width: 960px) {
  .tmenu-mobile__container_withoutlogo::before {
    content: "METHOD MEDIA";
    display: inline-block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #0E0E0E;
    line-height: 1;
    padding-right: 16px;
    white-space: nowrap;
  }
}

/* ============================================================
   METHOD MEDIA — доводка типографики и меню
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили
   Вставлять В КОНЕЦ.
   ============================================================ */

/* ---------- 1. МОБИЛЬНОЕ МЕНЮ: RU и EN по центру ---------- */
@media (max-width: 960px) {
  .t-menu-base .t-menu-base__list li:nth-last-child(2) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 20px !important;
  }
  .t-menu-base .t-menu-base__list li:nth-last-child(-n+2) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    padding-left: 0 !important;
  }
  .t-menu-base .t-menu-base__list li:nth-last-child(-n+2) .t-menu__link-item {
    text-align: center !important;
    display: inline-block !important;
  }
}

/* ---------- 2. ОБЩИЙ РАЗМЕР: чуть мельче ---------- */
.mm .mm-h1 { font-size: clamp(32px, 4.4vw, 62px) !important; }
.mm .mm-h2 { font-size: clamp(23px, 2.7vw, 36px) !important; }
.mm .mm-lead { font-size: 18px !important; }
.mm .mm-hero h1 { font-size: clamp(28px, 3.6vw, 48px) !important; }
.mm .mm-phi h2,
.mm .mm-award h2 { font-size: clamp(22px, 2.5vw, 32px) !important; }
.mm .mm-case h3 { font-size: clamp(21px, 2.2vw, 27px) !important; }

@media (max-width: 900px) {
  .mm .mm-h1 { font-size: 29px !important; }
  .mm .mm-h2 { font-size: 22px !important; }
  .mm .mm-lead { font-size: 15px !important; }
  .mm .mm-prose > p,
  .mm .mm-prose li { font-size: 15px !important; }
  .mm .mm-ah h1 { font-size: 24px !important; }
}

/* ---------- 3. НОМЕРА: структурный элемент, крупнее ---------- */

/* шаги процесса — «Агентство», «Эконометрика», «BI» */
.mm .mm-steprow .n {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  padding-top: 2px !important;
}
.mm .mm-steprow {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

/* шаги в тёмном блоке на главной */
.mm .mm-step .n {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  padding-bottom: 16px !important;
}

/* карточки направлений на главной */
.mm .mm-card .idx,
.mm .mm-tcard .idx {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* «Что вы получаете» на странице технологий */
.mm .mm-give .n {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  padding-bottom: 16px !important;
}

/* списки инструментов на «Технологиях» */
.mm .mm-tool .n {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

@media (max-width: 900px) {
  .mm .mm-steprow .n,
  .mm .mm-card .idx,
  .mm .mm-tcard .idx,
  .mm .mm-give .n,
  .mm .mm-tool .n { font-size: 14px !important; }
  .mm .mm-step .n { font-size: 13px !important; }
}

/* ============================================================
   METHOD MEDIA — номера ещё на 10% крупнее
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили
   Вставлять В КОНЕЦ, после предыдущих правил.
   ============================================================ */

/* направления на главной, инструменты, «что вы получаете» */
.mm .mm-card .idx,
.mm .mm-tcard .idx,
.mm .mm-give .n,
.mm .mm-tool .n {
  font-size: 16.5px !important;
}

@media (max-width: 900px) {
  .mm .mm-card .idx,
  .mm .mm-tcard .idx,
  .mm .mm-give .n,
  .mm .mm-tool .n {
    font-size: 15.5px !important;
  }
}

/* ============================================================
   METHOD MEDIA — выравнивание колонок в блоке «Наши правила»
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили
   Вставлять В КОНЕЦ.
   Заголовок занимает высоту двух строк даже если он короче,
   поэтому тексты под ним начинаются на одном уровне.
   ============================================================ */
.mm .mm-pr > div h3 {
  min-height: 2.6em;
}
@media (max-width: 900px) {
  /* на телефоне колонки идут друг под другом — выравнивать нечего */
  .mm .mm-pr > div h3 {
    min-height: 0;
  }
}

/* ============================================================
   METHOD MEDIA — отступ между заголовком и подзаголовком
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили
   Вставлять В КОНЕЦ.
   ============================================================ */
@media (min-width: 901px) {
  .mm .mm-lead {
    margin-top: 46px !important;
  }
}
@media (max-width: 900px) {
  .mm .mm-lead {
    margin-top: 22px !important;
  }
}

/* ============================================================
   METHOD MEDIA — блок «Дополнительно» ближе к таблице
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили
   Вставлять В КОНЕЦ.
   ============================================================ */
.mm .mm-more {
  margin-top: 34px !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}
.mm .mm-more .lab {
  margin-bottom: 16px !important;
}
@media (max-width: 900px) {
  .mm .mm-more {
    margin-top: 26px !important;
  }
}

/* ============================================================
   METHOD MEDIA — логотип в шапке крупнее на 20%
   Куда: Настройки сайта → Ещё → Пользовательские CSS-стили
   Вставлять В КОНЕЦ.

   Селектор усилен классом .t-menu-base, чтобы перебить правило
   внутри блоков: там высота 38px и оно грузится позже.
   ============================================================ */

.t-menu-base .t-menu-base__imglogo {
  max-width: 210px !important;
  width: auto !important;
  height: 46px !important;
}

@media (max-width: 960px) {
  .t-menu-base .t-menu-base__imglogo {
    height: 36px !important;
    max-width: 170px !important;
  }
}