/* ═══════════════════════════════════════════════════════════════
   MARQA · UI LAYER  (единая шапка, подвал, куки-баннер, капча)
   Источник: /_ui/header.html, /_ui/footer.html
   Собирается скриптом /_ui/sync.py — вручную страницы не править.

   Все классы с префиксом .mq- , чтобы не конфликтовать
   с инлайновыми стилями старых шаблонов услуг.
═══════════════════════════════════════════════════════════════ */

:root {
  --mq-black: #141414;
  --mq-ink:   #1B1B1B;
  --mq-red:   #C23B2A;
  --mq-bone:  #F0EDE8;
  --mq-dim:   rgba(240, 237, 232, .55);
  --mq-dim2:  rgba(240, 237, 232, .32);
  --mq-line:  rgba(240, 237, 232, .10);
  --mq-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mq-head:  'Barlow Condensed', 'Arial Narrow', sans-serif;
}

/* ── Skip link ─────────────────────────────────────────────── */
.mq-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--mq-red); color: #fff;
  font-family: var(--mq-mono); font-size: 12px;
  padding: 10px 18px; text-decoration: none;
}
.mq-skip:focus { left: 0; }

/* В style.css есть правило для тега nav (старая шапка). Внутри новой
   шапки оно рисовало лишний тёмный прямоугольник — гасим его. */
.mq-header nav,
.mq-footer nav {
  position: static; height: auto; min-height: 0;
  display: block; padding: 0; margin: 0;
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  z-index: auto;
}

/* ── HEADER ────────────────────────────────────────────────── */
.mq-header {
  position: sticky; top: 0; z-index: 300;
  background: rgba(20, 20, 20, .97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mq-line);
}
.mq-header__inner {
  height: 52px; max-width: 1560px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mq-logo {
  font-family: var(--mq-head); font-size: 20px; font-weight: 900;
  text-transform: uppercase; letter-spacing: -.01em;
  color: var(--mq-bone); text-decoration: none; flex-shrink: 0;
}
.mq-logo span { color: var(--mq-red); }

.mq-nav { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.mq-nav a {
  display: block; padding: 0 13px; line-height: 51px;
  font-family: var(--mq-mono); font-size: 10px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mq-dim); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
.mq-nav a:hover { color: rgba(240, 237, 232, .85); }
.mq-nav a[aria-current="page"] { color: var(--mq-bone); border-bottom-color: var(--mq-red); }

.mq-cta {
  flex-shrink: 0;
  background: var(--mq-red); color: var(--mq-bone); text-decoration: none;
  font-family: var(--mq-head); font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 9px 18px; white-space: nowrap;
  transition: background .15s;
}
.mq-cta:hover { background: #8C2219; }

.mq-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 8px;
  background: none; border: 0; cursor: pointer;
}
.mq-burger span {
  display: block; width: 100%; height: 2px; background: var(--mq-bone);
  transition: transform .25s, opacity .25s;
}
.mq-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mq-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mq-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Мобильная шторка ──────────────────────────────────────── */
.mq-drawer {
  display: none;
  position: fixed; inset: 52px 0 0 0; z-index: 290;
  background: var(--mq-black);
  padding: 24px clamp(16px, 6vw, 40px) 40px;
  overflow-y: auto;
  flex-direction: column; gap: 2px;
}
.mq-drawer.is-open { display: flex; }
.mq-drawer a {
  font-family: var(--mq-head); font-weight: 800; font-size: 22px;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--mq-bone); text-decoration: none;
  padding: 16px 0; border-bottom: 1px solid var(--mq-line);
}
.mq-drawer a[aria-current="page"] { color: var(--mq-red); }
.mq-drawer__cta {
  margin-top: 24px; text-align: center;
  background: var(--mq-red); border: 0 !important;
  padding: 16px 0 !important; font-size: 16px !important;
}
.mq-drawer__contacts {
  margin-top: 28px; display: flex; flex-direction: column; gap: 10px;
  font-family: var(--mq-mono); font-size: 12px;
}
.mq-drawer__contacts a {
  font-family: var(--mq-mono) !important; font-size: 12px !important;
  font-weight: 400 !important; text-transform: none !important;
  color: var(--mq-dim) !important; padding: 0 !important; border: 0 !important;
}

@media (max-width: 1000px) {
  .mq-nav { display: none; }
  .mq-burger { display: flex; }
  .mq-cta { display: none; }
}

/* ── FOOTER ────────────────────────────────────────────────── */
.mq-footer {
  background: var(--mq-black); color: var(--mq-bone);
  font-family: var(--mq-mono);
  padding: 56px clamp(16px, 4vw, 56px) 32px;
  border-top: 3px solid var(--mq-red);
}
.mq-footer__grid {
  max-width: 1560px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.mq-footer__logo {
  font-family: var(--mq-head); font-size: 26px; font-weight: 900;
  text-transform: uppercase; color: var(--mq-bone); text-decoration: none;
  display: inline-block; margin-bottom: 14px;
}
.mq-footer__logo span { color: var(--mq-red); }
.mq-footer__desc {
  font-size: 11px; line-height: 1.8; color: var(--mq-dim);
  margin-bottom: 18px; max-width: 42ch;
}
.mq-footer__contacts { display: flex; flex-direction: column; gap: 7px; }
.mq-footer__contacts a {
  font-size: 12px; color: var(--mq-bone); text-decoration: none;
}
.mq-footer__contacts a:hover { color: var(--mq-red); }
.mq-footer__addr {
  font-size: 10px; line-height: 1.8; color: var(--mq-dim2); margin-top: 14px;
}
.mq-footer__ttl {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mq-dim2); margin-bottom: 14px;
}
.mq-footer__col a {
  display: block; font-size: 11px; line-height: 1.5; color: var(--mq-dim);
  text-decoration: none; padding: 5px 0;
}
.mq-footer__col a:hover { color: var(--mq-bone); }
.mq-footer__bottom {
  max-width: 1560px; margin: 40px auto 0; padding-top: 22px;
  border-top: 1px solid var(--mq-line);
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline;
  font-size: 10px; color: var(--mq-dim2); line-height: 1.7;
}
.mq-footer__bottom a { color: var(--mq-dim2); text-decoration: none; }
.mq-footer__bottom a:hover { color: var(--mq-bone); }
.mq-footer__legal { flex-basis: 100%; }

@media (max-width: 900px) {
  .mq-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .mq-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .mq-footer { padding-top: 40px; }
  .mq-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Куки-баннер ───────────────────────────────────────────── */
.mq-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  display: none; gap: 16px 24px; align-items: center; flex-wrap: wrap;
  background: rgba(20, 20, 20, .98);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 2px solid var(--mq-red);
  padding: 18px clamp(16px, 4vw, 40px);
  font-family: var(--mq-mono); font-size: 11px; line-height: 1.7;
  color: var(--mq-dim);
}
.mq-cookie.is-visible { display: flex; }
.mq-cookie__txt { flex: 1 1 380px; max-width: 90ch; }
.mq-cookie__txt a { color: var(--mq-bone); }
.mq-cookie__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.mq-cookie button {
  font-family: var(--mq-head); font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 11px 20px; border: 1px solid var(--mq-red); cursor: pointer;
  white-space: nowrap;
}
.mq-cookie__ok     { background: var(--mq-red); color: var(--mq-bone); }
.mq-cookie__ok:hover { background: #8C2219; }
.mq-cookie__no     { background: none; color: var(--mq-dim); border-color: var(--mq-line); }
.mq-cookie__no:hover { color: var(--mq-bone); border-color: var(--mq-dim2); }

/* ── Капча и антиспам в формах ─────────────────────────────── */
.mq-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; opacity: 0 !important;
}
.mq-captcha { margin: 14px 0; }
.mq-captcha__label {
  display: block; font-family: var(--mq-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .6; margin-bottom: 7px;
}
.mq-captcha__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mq-captcha__q {
  font-family: var(--mq-head); font-size: 20px; font-weight: 800;
  letter-spacing: .04em; white-space: nowrap;
  padding: 8px 14px; border: 1px dashed currentColor; opacity: .85;
  -webkit-user-select: none; user-select: none;
}
.mq-captcha__in {
  width: 92px; padding: 11px 12px;
  font-family: var(--mq-mono); font-size: 13px;
  color: inherit; background: rgba(127, 127, 127, .10);
  border: 1px solid rgba(127, 127, 127, .35);
  outline: none;
}
.mq-captcha__in:focus { border-color: var(--mq-red); }
.mq-captcha__in.is-bad { border-color: var(--mq-red); background: rgba(194, 59, 42, .10); }
.mq-captcha__reload {
  background: none; border: 0; cursor: pointer; padding: 6px;
  font-size: 15px; line-height: 1; color: inherit; opacity: .5;
}
.mq-captcha__reload:hover { opacity: 1; }
.mq-captcha__err {
  display: none; margin-top: 7px;
  font-family: var(--mq-mono); font-size: 11px; color: var(--mq-red);
}
.mq-captcha__err.is-visible { display: block; }

/* Незаполненное обязательное поле, из-за которого браузер не отправляет форму.
   Без подсветки человек видит только то, что кнопка «не работает». */
.mq-invalid {
  outline: 2px solid var(--mq-red, #C23B2A) !important;
  outline-offset: 1px;
  background: rgba(194, 59, 42, .07) !important;
}

/* ── Общие исправления вёрстки ─────────────────────────────── */

/* Фокус виден при навигации с клавиатуры (было: почти нигде) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mq-red, #C23B2A);
  outline-offset: 2px;
}

/* Длинные слова и заголовки не должны обрезаться на телефоне */
@media (max-width: 900px) {
  h1, h2, h3, .art-h1, .ab-h1, .ch-h1, .ct-h1, .tm-h1 {
    overflow-wrap: break-word; word-break: break-word; hyphens: auto;
  }
}

/* Многоколоночные сетки на телефоне складываются в одну колонку.
   На части страниц («О нас», «Команда», «Контакты», «Проверка»,
   профили юристов) сетки заданы прямо в разметке и мобильных
   правил для них не было — контент уезжал за край и обрезался. */
@media (max-width: 860px) {
  .check-inner,
  .ct-grid,
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* Те же сетки, но заданные классами в стилях самих страниц.
   Перечислены поимённо — их нашли обмером страниц на экране 375px. */
@media (max-width: 860px) {
  .about-inner, .awards-grid, .values-grid,
  .team-grid, .analysts-grid,
  .profile-inner, .stat-row, .stat-bl,
  .cta-banner, .pricing-wrapper, .cases-grid, .related-grid,
  .partner-card, .svc-cta-a, .svc-price-grid, .svc-cta-b-inner {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }
  .about-inner > *, .team-grid > *, .analysts-grid > *,
  .profile-inner > *, .partner-card > *, .cases-grid > *,
  .pricing-wrapper > *, .svc-price-grid > *, .faq-item, .faq-item > *,
  .con > *, .cta-banner > * {
    min-width: 0;
  }
  /* Крупные наборные заголовки уменьшаем, чтобы слова влезали целиком
     и их не приходилось разрывать посреди слова */
  .hero-h1, .ab-h1, .ch-h1, .ct-h1, .tm-h1, .cta-h, .cta-title, .svc-cta-a-h {
    font-size: clamp(30px, 9.5vw, 46px) !important;
    line-height: 1.05 !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* Чекбокс согласия: текст переносится рядом с галочкой */
  label { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
  label > span { min-width: 0; overflow-wrap: anywhere; }

  .country-grid, .cta-banner, .svc-cta-a, .svc-cta-b-inner, .price-grid {
    grid-template-columns: 1fr !important;
  }
  /* Те же блоки, но собранные на flex, а не на grid */
  .cta-banner, .svc-cta-a, .svc-cta-b-inner, .case-step, .partner-card {
    flex-direction: column !important;
    align-items: stretch;
  }
  .cta-banner > *, .svc-cta-a > *, .svc-cta-b-inner > *, .case-step > * {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }
  /* Длинная надпись на кнопке переносится, а не вылезает за экран */
  .btn, .btn-primary, .btn-ghost, .btn-outline, .btn-s, .btn-red, .btn-tg,
  .nav-cta, .fsubmit {
    white-space: normal;
  }
  .faq-item, .faq-item * { min-width: 0; overflow-wrap: anywhere; }

  /* Слишком длинное слово переносится, а не растягивает страницу
     (в согласии на обработку ПДн — длинные строки подчёркиваний) */
  p, li, dd, dt, td, th, .ct-ch-val, .fi-val { overflow-wrap: break-word; }

  /* Поля ввода и выпадающие списки не шире экрана */
  input, select, textarea, button { max-width: 100%; }
}

/* Ряды кнопок на узком экране: переносим и растягиваем на всю ширину,
   иначе последняя кнопка уходит за край и её не нажать. */
@media (max-width: 640px) {
  .cta-row, .cta-btns, .hero-btns, .partner-btns, .buttons,
  .form-submit, .svc-cta-a-btns, .art-early-btns, .pc-btns {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
  }
  .cta-row > *, .cta-btns > *, .hero-btns > *, .partner-btns > *,
  .buttons > *, .form-submit > *, .svc-cta-a-btns > *,
  .art-early-btns > *, .pc-btns > * {
    flex: 1 1 100%;
    min-width: 0;
    text-align: center;
  }
}

@media (max-width: 560px) {
  /* Двухколоночные поля форм тоже в одну колонку */
  .form-row, .form-grid, .ct-form-row { grid-template-columns: 1fr !important; }
  .cta-h, .cta-title { font-size: clamp(24px, 8vw, 34px) !important; line-height: 1.1 !important; }
}

/* Длинные ссылки и адреса переносятся, а не растягивают блок */
.mq-footer a, .ct-ch-val, .fi-val { overflow-wrap: anywhere; }

/* Таблицы в тексте прокручиваются, а не режутся по краю экрана */
.mq-tablewrap { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mq-tablewrap > table { min-width: max-content; }

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .mq-header, .mq-drawer, .mq-cookie, .mq-burger { display: none !important; }
  .mq-footer { background: none; color: #000; border-top: 1px solid #000; }
}