/* ==================================================================
   Юридическое бюро «Прометей», Пермь
   1. Переменные, сброс, типографика, контейнер, кнопки, формы
   ================================================================== */

/* Атрибут hidden обязан скрывать: правило класса с display перебивает
   браузерное [hidden]{display:none}, и скрытый блок остаётся видимым. */
[hidden] { display: none !important; }

:root {
  /* Палитра — только плоские заливки, градиентов нет */
  --white:        #FFFFFF;
  --black:        #000000;
  --orange:       #FD5E0F;
  --wine:         #A50034;
  --wine-deep:    #960032;
  --grey-warm:    #C4C0BD;
  --rule:         #DCDCDC;
  --rule-color:   rgba(255, 255, 255, .45);
  --rule-soft:    rgba(0, 0, 0, .14);
  --text-2:       #6E6E6E;
  --bg-soft:      #F3F3F3;

  /* Типографика */
  --f-head: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Golos Text', 'Helvetica Neue', Arial, sans-serif;

  --fs-logo:   clamp(46px, 12.5vw, 176px);
  --fs-h1:     clamp(38px, 8vw, 128px);
  --fs-h2:     clamp(30px, 5.4vw, 72px);
  --fs-h3:     clamp(22px, 3vw, 34px);
  --fs-lead:   15px;
  --fs-micro:  12px;
  --fs-nano:   11px;
  --fs-prose:  17px;

  /* Сетка и ритм */
  --wrap:      1440px;
  --pad:       72px;
  --gutter:    24px;
  --sec-gap:   clamp(56px, 8vw, 128px);
  --header-h:  88px;

  --t: 240ms cubic-bezier(.2, .6, .3, 1);
}

/* ------------------------------ Сброс ------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip не создаёт скролл-контейнер (в отличие от hidden) и не ломает sticky;
     нужен, потому что сквозные линейки намеренно шире контейнера */
  overflow-x: hidden;
  overflow-x: clip;
}

html { overflow-x: clip; }

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; border: 0; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

::selection { background: var(--orange); color: var(--black); }

/* ------------------------- Служебные классы ------------------------ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--black);
  color: var(--white);
  padding: 14px 22px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.skip-link:focus { left: 0; }

.ic { flex: 0 0 auto; }

/* ------------------------------ Сетка ------------------------------ */

.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Full-bleed слой: цветная полоса тянется от края до края вьюпорта.
   Секции с .bleed — прямые потомки <main>, поэтому ширины 100% достаточно;
   100vw здесь давал бы горизонтальное переполнение на ширину полосы прокрутки. */
.bleed { width: 100%; }

.section { padding-block: var(--sec-gap); }
.section--tight { padding-block: clamp(36px, 5vw, 72px); }
.section--flush-top { padding-top: 0; }

/* Сквозная волосяная линейка */
.rule-full {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.on-color { color: var(--white); }
.on-color .rule-full { border-top-color: var(--rule-color); }

.bg-orange { background: var(--orange); }
.bg-wine   { background: var(--wine); }
.bg-grey   { background: var(--grey-warm); }
.bg-soft   { background: var(--bg-soft); }

/* --------------------------- Типографика --------------------------- */

.t-logo {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: var(--fs-logo);
  line-height: .84;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.t-giant,
.section-title {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.t-h2 {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.t-h3 {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* Лид / манифест — выключка по формату, как в референсе */
.t-lead {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: justify;
  /* переносы заметно сокращают «реки» в выключке по формату на узких колонках */
  hyphens: auto;
}

/* Мелкие рубрики, роли, даты, кнопки, меню */
.t-micro,
.eyebrow {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.t-nano {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.t-muted { color: var(--text-2); }
.t-orange { color: var(--orange); }
.t-wine { color: var(--wine); }

/* Длинная проза: статьи, дела */
.prose {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: var(--fs-prose);
  line-height: 1.62;
  max-width: 68ch;
}
.prose p + p { margin-top: 1.1em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--orange); }

.prose-list { margin-top: 1.1em; max-width: 68ch; }
.prose-list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-prose);
  line-height: 1.62;
}
.prose-list li + li { margin-top: .5em; }
.prose-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--orange);
}

/* ---------------------- Заголовок секции + индекс ------------------ */

.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  padding-bottom: clamp(18px, 2.4vw, 34px);
}

.head-row__index {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ----------------------------- Кнопки ------------------------------ */
/* border-radius: 0 везде без исключения */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 0;
  border: 1px solid transparent;
  padding: 17px 30px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t), transform 120ms linear;
}

.btn--primary {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.btn--primary:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
.btn--primary:active { transform: translateY(1px); }

.btn--outline {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
}
.btn--outline:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--outline:active { transform: translateY(1px); }

/* На цветных полосах — белая рамка, hover инвертирует в цвет полосы */
.on-color .btn--outline,
.btn--on-color { color: var(--white); border-color: var(--white); }
.on-color .btn--outline:hover,
.btn--on-color:hover { background: var(--white); color: var(--wine-deep); border-color: var(--white); }
.bg-orange .btn--outline:hover { background: var(--white); color: var(--orange); }
.bg-wine .btn--outline:hover { background: var(--white); color: var(--wine); }

.btn--sm { padding: 12px 20px; font-size: var(--fs-nano); }
.btn--block { width: 100%; }

/* Text-arrow — главный CTA карточек и секций */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: inherit;
}

.arrow-link__line {
  position: relative;
  display: block;
  width: 72px;
  height: 1px;
  background: currentColor;
  transition: width var(--t);
}
.arrow-link__line::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}
.arrow-link:hover .arrow-link__line { width: 104px; }
.arrow-link:hover { color: var(--orange); }
.on-color .arrow-link:hover { color: var(--white); }

.arrow-link--short .arrow-link__line { width: 44px; }
.arrow-link--short:hover .arrow-link__line { width: 72px; }

/* Стрелки каруселей — длинные линейки, прижатые к краям */
.rail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  margin-top: clamp(24px, 3vw, 44px);
}

.rail-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  color: inherit;
  transition: color var(--t);
}
.rail-btn--prev { justify-content: flex-start; }
.rail-btn--next { justify-content: flex-end; }
.rail-btn:hover { color: var(--orange); }
.on-color .rail-btn:hover { color: var(--white); opacity: .7; }

.rail-btn__line {
  display: block;
  height: 1px;
  flex: 1 1 auto;
  min-width: 40px;
  background: currentColor;
}

.rail-nav .btn { flex: 0 0 auto; }

/* ----------------------------- Формы ------------------------------- */

.field { position: relative; margin-bottom: 12px; }

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border: 1px solid var(--black);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  transition: border-color var(--t), background-color var(--t);
  appearance: none;
}
.field__input--area { resize: vertical; min-height: 108px; }

.field__input::placeholder {
  color: inherit;
  opacity: .72;
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.field__input:hover { border-color: var(--orange); }
.field__input[aria-invalid='true'] { border-color: var(--orange); border-width: 2px; }

.on-color .field__input,
.site-footer .field__input { border-color: var(--rule-color); color: var(--white); }
.site-footer .field__input:hover { border-color: var(--white); }

.field__error {
  display: block;
  margin-top: 6px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--orange);
}

/* Квадратный чекбокс согласия */
.field--check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  margin-block: 18px;
}
.field--check .field__error { grid-column: 1 / -1; }

.check__input {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
  flex: 0 0 auto;
}
.check__input::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) scale(0);
  transition: transform 140ms linear;
}
.check__input:checked { background: currentColor; }
.check__input:checked::after { transform: rotate(-45deg) scale(1); border-color: var(--white); }
.site-footer .check__input:checked::after { border-color: var(--wine-deep); }

.check__label { font-size: 13px; line-height: 1.45; cursor: pointer; }
.check__label a { text-decoration: underline; text-underline-offset: 3px; }
.check__label a:hover { color: var(--orange); }

.consult-form__title {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 22px;
}

.consult-form__submit { display: flex; justify-content: center; }

.consult-form__status {
  margin-top: 14px;
  text-align: center;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  min-height: 1em;
}

/* Плоский SVG-квадрат — штатный элемент сетки */
.sq-svg { display: block; width: 100%; height: 100%; }


/* ==================================================================
   2. Шапка, навигация, бургер, мобильное меню, футер
   ================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}

/* ------------------------------ Логотип ---------------------------- */

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--black);
}

.brand__mark { display: block; color: var(--black); }
.brand__mark svg { display: block; }

.brand__word { display: flex; flex-direction: column; gap: 2px; }

.brand__word-top {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

.brand__word-main {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand:hover .brand__mark { color: var(--orange); }

/* --------------------------- Главное меню -------------------------- */

.main-nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.main-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.main-nav__item { display: flex; align-items: center; }

/* Разделитель «/» между пунктами */
.main-nav__item::after {
  content: '/';
  margin-left: 14px;
  color: var(--grey-warm);
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1;
}
.main-nav__item:last-child::after { display: none; }

.main-nav__link {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color var(--t);
}
.main-nav__link:hover { color: var(--orange); }
.main-nav__link.is-active { color: var(--orange); text-decoration: none; }

/* ------------------------- Правая зона шапки ----------------------- */

.site-header__aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header__phone {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color var(--t);
}
.site-header__phone:hover { color: var(--orange); }

/* ------------------------------ Бургер ----------------------------- */

.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.burger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  transition: transform 200ms var(--t), opacity 160ms linear;
}

.burger[aria-expanded='true'] .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------- Мобильная панель ----------------------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 200ms linear, transform 200ms var(--t);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { opacity: 1; transform: none; }

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--rule);
}

.mobile-nav__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.mobile-nav__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  margin-right: -10px;
}
.mobile-nav__close:hover { color: var(--orange); }

.mobile-nav__body { padding-block: 12px 40px; }

.mobile-nav__list { border-top: 1px solid var(--rule); }
.mobile-nav__list li { border-bottom: 1px solid var(--rule); }

.mobile-nav__link {
  display: block;
  padding: 16px 0;
  font-family: var(--f-head);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.mobile-nav__link:hover,
.mobile-nav__link.is-active { color: var(--orange); }

.mobile-nav__contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 26px;
}

.mobile-nav__phone {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -.01em;
}
.mobile-nav__mail {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 15px;
}
.mobile-nav__phone:hover,
.mobile-nav__mail:hover { color: var(--orange); }

.mobile-nav__cta { display: grid; gap: 12px; }
.mobile-nav__cta .btn { min-height: 48px; }

/* ------------------------ Мегаменю «Услуги» ------------------------ */

.main-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.main-nav__chev { transition: transform var(--t); }
.main-nav__trigger[aria-expanded='true'] { color: var(--orange); }
.main-nav__trigger[aria-expanded='true'] .main-nav__chev { transform: rotate(180deg); }

/* Панель висит под шапкой. Ближайший позиционированный предок — sticky-шапка,
   поэтому left/right: 0 растягивают полосу на всю ширину, а .container внутри
   держит содержимое в сетке сайта */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 49;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 30px 48px -28px rgba(0, 0, 0, .32);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms linear, transform 180ms cubic-bezier(.2, .6, .3, 1), visibility 0s linear 180ms;
}
.main-nav__item--mega.is-open .mega,
html:not(.js) .main-nav__item--mega:hover .mega,
html:not(.js) .main-nav__item--mega:focus-within .mega {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 180ms linear, transform 180ms cubic-bezier(.2, .6, .3, 1), visibility 0s;
}

.mega__inner { padding-block: 28px; }

/* Группы услуг — колонками «в набор»: высота панели делится поровну */
.mega__groups {
  columns: 4;
  column-gap: clamp(24px, 2.4vw, 36px);
}

.mega__group {
  break-inside: avoid;
  padding-bottom: 22px;
}

.mega__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1.3;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: color var(--t);
}
.mega__head:hover { color: var(--orange); }

.mega__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.mega__icon--orange { background: var(--orange); color: var(--black); }
.mega__icon--wine   { background: var(--wine); color: var(--white); }
.mega__icon--grey   { background: var(--grey-warm); color: var(--black); }

.mega__list { display: flex; flex-direction: column; gap: 6px; }

.mega__link {
  display: block;
  font-size: 14px;
  line-height: 1.32;
  transition: color var(--t);
}
.mega__link:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

/* Нижняя полоса панели: телефон, режим, консультация, «Все услуги» */
.mega__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 40px;
  padding: 16px 24px;
  background: var(--bg-soft);
}

.mega__contact { display: flex; flex-direction: column; gap: 4px; }

.mega__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.mega__label {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.mega__phone {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color var(--t);
}
.mega__phone:hover { color: var(--orange); }

.mega__note { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.mega__cta { white-space: nowrap; }

/* ---------------- Мобильная панель: аккордеон «Услуги» -------------- */

.mobile-nav__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}
.mobile-nav__chev { flex: 0 0 auto; display: grid; place-items: center; transition: transform var(--t); }
.mobile-nav__toggle[aria-expanded='true'] { color: var(--orange); }
.mobile-nav__toggle[aria-expanded='true'] .mobile-nav__chev { transform: rotate(180deg); }

.mnav-sub { padding: 2px 0 20px; }
.mobile-nav__list .mnav-sub li { border-bottom: 0; }
.mnav-sub__all { margin-block: 4px 16px; }

.mnav-sub__group { border-top: 1px solid var(--rule-soft); }

.mnav-sub__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mnav-sub__head {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 0;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mnav-sub__head:hover { color: var(--orange); }

.mnav-sub__toggle {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin-right: -10px;
  transition: transform var(--t), color var(--t);
}
.mnav-sub__toggle[aria-expanded='true'] { color: var(--orange); transform: rotate(180deg); }

.mnav-sub__list {
  display: flex;
  flex-direction: column;
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
}

.mnav-sub__link { display: block; padding: 8px 0; font-size: 15px; line-height: 1.35; }
.mnav-sub__link:hover { color: var(--orange); }

/* ------------------- Карточка направления (команда) ----------------- */

.dir-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 340px;
  padding: 18px 18px 16px;
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--rule);
  transition: border-color var(--t);
}
.on-color .dir-card { border: 0; }
a.dir-card:hover { border-color: var(--black); }

.dir-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dir-card__meta {
  padding-top: 4px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
}

.dir-card__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.dir-card__icon--orange { background: var(--orange); color: var(--black); }
.dir-card__icon--wine   { background: var(--wine); color: var(--white); }
.dir-card__icon--grey   { background: var(--grey-warm); color: var(--black); }

.dir-card__title {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  hyphens: auto;
  transition: color var(--t);
}
a.dir-card:hover .dir-card__title { color: var(--orange); }

.dir-card__text { font-size: 14px; line-height: 1.55; color: var(--text-2); }

.dir-card__label {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.dir-card__tasks { display: flex; flex-direction: column; gap: 7px; }

.dir-card__task {
  position: relative;
  display: block;
  padding-left: 20px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1.4;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.dir-card__task::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--orange);
}

.dir-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
}
.dir-card__stats dt {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.dir-card__stats dd {
  margin-top: 6px;
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.dir-card__more { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 4px; }
.dir-card .arrow-link:hover,
a.dir-card:hover .arrow-link { color: var(--orange); }

.dir-card--full { min-height: 0; }

.dir-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.team-intro { padding-bottom: clamp(32px, 4vw, 56px); }

/* ---------------- Сайдбар: команда направления (цифры) -------------- */

.side-stats { display: flex; flex-direction: column; }

.side-stats__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-block: 10px;
  border-bottom: 1px solid var(--rule);
}
.side-stats__row:first-child { padding-top: 0; }

.side-stats dt {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
}
.side-stats dd {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}

.side-stats__more { margin-top: 16px; }

/* --------------------- Контакты: Яндекс.Карта ---------------------- */

.map-box {
  margin-top: clamp(28px, 4vw, 56px);
  border: 1px solid var(--rule-soft);
  background: var(--bg-soft);
}

.map-box__frame {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}

.map-box__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 18px;
}

/* Точки перелома новых блоков — те же, что у остального сайта */
@media (max-width: 1199px) {
  .mega__groups { columns: 3; }
}

@media (max-width: 899px) {
  .mega { display: none; }
}

@media (max-width: 599px) {
  .dir-grid { grid-template-columns: minmax(0, 1fr); }
  .map-box__frame { height: 300px; }
}

/* ------------------------------ Футер ------------------------------ */

.site-footer {
  background: var(--wine-deep);
  color: var(--white);
  margin-top: var(--sec-gap);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  padding-block: 72px;
  align-items: start;
}

.site-footer a { color: var(--white); }

/* Колонка 1 — знак, слоган, контакты */

.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand__mark { color: var(--white); }
.footer-brand__word { display: flex; flex-direction: column; gap: 3px; }

.footer-brand__top {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
}
.footer-brand__main {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.site-footer__slogan {
  margin-top: 22px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

.site-footer__contacts {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-footer__big {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
  word-break: break-word;
  transition: color var(--t);
}
.site-footer__big:hover { color: var(--orange); }

.site-footer__address {
  margin-top: 18px;
  font-style: normal;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  opacity: .88;
  max-width: 30ch;
}

.site-footer__policy {
  display: table;
  margin-top: 22px;
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .85;
}
.site-footer__policy + .site-footer__policy { margin-top: 8px; }
.site-footer__policy:hover { color: var(--orange); opacity: 1; }

/* Колонка 2 — форма в рамке */

.site-footer__col--form .consult-form {
  border: 1px solid var(--rule-color);
  padding: 30px 28px;
}

/* Колонка 3 — навигация, подписка, соцсети */

.footer-nav__list { display: flex; flex-direction: column; gap: 18px; }

.footer-nav__link {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color var(--t);
}
.footer-nav__link:hover { color: var(--orange); }

.footer-nav__subscribe { margin-top: 30px; }

.social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  white-space: nowrap;
}

.social__link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule-color);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.social__link:hover { background: var(--white); color: var(--wine-deep); border-color: var(--white); }

/* Нижняя строка футера */

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  padding-block: 22px 30px;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.site-footer__copy,
.site-footer__legal {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .03em;
  opacity: .85;
}

/* ------------------------------ Модалка ---------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 200ms linear;
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
}

.modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--black);
  padding: 34px clamp(20px, 4vw, 40px) 36px;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.modal__title {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.modal__close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  margin: -6px -10px 0 0;
  flex: 0 0 auto;
}
.modal__close:hover { color: var(--orange); }

.modal__note {
  margin-block: 16px 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.modal__note a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.modal__note a:hover { color: var(--orange); }

.modal .consult-form__title { display: none; }


/* ==================================================================
   3. Секции — общие блоки
   ================================================================== */

/* ------------------------ Кадры и дуотон --------------------------- */

.ph {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--grey-warm);
  /* Замыкаем группу смешивания: filter на <img> создаёт свой контекст
     наложения, поэтому слои дуотона обязаны иметь z-index выше кадра */
  isolation: isolate;
}
.ph--sq { aspect-ratio: 1 / 1; }
.ph--wide { aspect-ratio: 4 / 3; }

.ph img,
.ph .sq-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
.ph .sq-svg { filter: none; }

/* Оранжевый дуотон */
.ph--duo::before,
.ph--duo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ph--duo::before { background: var(--orange); mix-blend-mode: multiply; z-index: 1; }
.ph--duo::after  { background: var(--black);  mix-blend-mode: screen;   z-index: 2; }

/* Переключение ч/б → дуотон при наведении на карточку */
.ph--hover-duo::before,
.ph--hover-duo::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}
.ph--hover-duo::before { background: var(--orange); mix-blend-mode: multiply; z-index: 1; }
.ph--hover-duo::after  { background: var(--black);  mix-blend-mode: screen;   z-index: 2; }
.spec-card:hover .ph--hover-duo::before,
.spec-card:hover .ph--hover-duo::after,
.ph--hover-duo:hover::before,
.ph--hover-duo:hover::after { opacity: 1; }

/* Плоский квадрат-акцент */
.acc-square { aspect-ratio: 1 / 1; display: block; }
.acc-square--orange { background: var(--orange); }
.acc-square--wine   { background: var(--wine); }
.acc-square--grey   { background: var(--grey-warm); }
.acc-square--outline { background: transparent; border: 1px solid var(--rule-soft); }

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

.hero { padding-top: clamp(28px, 4vw, 56px); }

.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.hero__logo {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: var(--fs-logo);
  line-height: .84;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.hero__logo-row {
  display: flex;
  align-items: center;
  gap: .04em;
  flex-wrap: nowrap;
}

.hero__logo-sub {
  display: block;
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(22px, 5.4vw, 74px);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

/* Квадратный портрет, врезанный в букву заголовка */
.hero__cut {
  display: inline-block;
  width: .78em;
  height: .78em;
  flex: 0 0 auto;
  position: relative;
  top: .04em;
  overflow: hidden;
  background: var(--orange);
  isolation: isolate;
}
.hero__cut img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
.hero__cut::before,
.hero__cut::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__cut::before { background: var(--orange); mix-blend-mode: multiply; z-index: 1; }
.hero__cut::after  { background: var(--black);  mix-blend-mode: screen;   z-index: 2; }

.hero__lead-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  padding-top: clamp(16px, 2.4vw, 30px);
}
.hero__lead { max-width: 44ch; }

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Мозаика квадратов 1:1 */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: clamp(24px, 4vw, 52px);
}
.mosaic__cell { aspect-ratio: 1 / 1; position: relative; overflow: hidden; }
.mosaic__cell--empty { background: transparent; }
.mosaic__cell--orange { background: var(--orange); }
.mosaic__cell--grey { background: var(--grey-warm); }
.mosaic__cell--wine { background: var(--wine); }
.mosaic__cell img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }

.hero__scroll {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 44px);
}
.hero__scroll a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  transition: transform var(--t), color var(--t);
}
.hero__scroll a:hover { color: var(--orange); transform: translateY(4px); }

/* --------------------- Первый экран внутренних --------------------- */

.page-hero { padding-top: clamp(24px, 3.4vw, 44px); }

.page-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  padding-bottom: clamp(16px, 2.4vw, 30px);
}

.page-hero__title {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 18ch;
}

.page-hero__index {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(28px, 5vw, 84px);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-2);
}

.page-hero__squares {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
  margin-top: clamp(20px, 2.6vw, 34px);
}
.page-hero__squares .acc-square { grid-column: span 1; }

/* -------------------------- Хлебные крошки ------------------------- */

.crumbs { padding-top: 22px; }

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.crumbs__item { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.crumbs__item a { transition: color var(--t); }
.crumbs__item a:hover { color: var(--orange); }
.crumbs__item[aria-current='page'] { color: var(--black); }
.crumbs__sep { color: var(--grey-warm); }

/* ------------------------ Двухколоночник --------------------------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-top: clamp(28px, 4vw, 56px);
}

.layout__main { min-width: 0; }

.layout__side {
  min-width: 0;
  position: sticky;
  top: 108px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---------------------- Карточка специалиста ----------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.spec-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  min-height: 340px;
  background: var(--white);
  border: 1px solid var(--rule);
  color: var(--black);
  transition: border-color var(--t);
}
.on-color .spec-card { border: 0; }
.spec-card:hover { border-color: var(--black); }

.spec-card__role {
  grid-column: 1 / 2;
  padding: 16px 0 0 16px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.spec-card__photo {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  width: 128px;
  align-self: start;
  justify-self: end;
  aspect-ratio: 1 / 1;
}

.spec-card__name {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 12px 0 14px 14px;
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  justify-self: start;
  align-self: end;
}
.spec-card__last { color: var(--orange); }

.spec-card__spec {
  grid-column: 1 / -1;
  grid-row: 3 / 4;
  padding: 14px 16px 0;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1.4;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.spec-card__more {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding: 14px 16px 16px;
}

/* ------------------------- Плитки практик -------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1;
  padding: 18px;
  color: var(--black);
  transition: background-color var(--t), color var(--t);
}
.tile--orange { background: var(--orange); }
.tile--wine   { background: var(--wine); color: var(--white); }
.tile--grey   { background: var(--grey-warm); }
.tile:hover { background: var(--black); color: var(--white); }

.tile__name {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1.35;
  letter-spacing: .07em;
  text-transform: uppercase;
  max-width: 20ch;
}

.tile__arrow { display: flex; justify-content: flex-end; }

/* --------------------- Карточки дел и публикаций ------------------- */

.events {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.event {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 16px;
  color: var(--black);
  transition: border-color var(--t);
}
.event:hover { border-color: var(--black); }
.on-color .event { border: 0; }

.event__marker {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--white);
}
.event__marker.is-orange { background: var(--orange); color: var(--black); }
.event__marker.is-wine   { background: var(--wine); color: var(--white); }

.event__body { display: flex; flex-direction: column; min-width: 0; height: 100%; }

.event__rubric {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 8px;
}
.event__rubric.is-orange { color: var(--orange); }

.event__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.32;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.event:hover .event__title { color: var(--orange); }

.event__meta {
  margin-top: auto;
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .03em;
  color: var(--text-2);
}

.event__more { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ------------------------- Карусель на snap ------------------------ */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, calc(25% - var(--gutter) * .75));
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 2px; }
.rail::-webkit-scrollbar-thumb { background: var(--rule); }

/* --------------------------- Награды ------------------------------- */

.award-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 22px 20px 24px;
  min-height: 250px;
}

.award-card__emblem {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-soft);
  color: var(--black);
}

.award-card__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.award-card__text {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: var(--fs-micro);
  line-height: 1.45;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-2);
}

.award-card__meta {
  margin-top: auto;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ------------------------- Нам доверяют ---------------------------- */

.client-card {
  background: var(--white);
  color: var(--black);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 210px;
}

.client-card__mono {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--grey-warm);
  font-family: var(--f-head);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--black);
}

.client-card__name {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.client-card__task {
  margin-top: auto;
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}

.review-card {
  background: var(--white);
  color: var(--black);
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.review-card__photo { width: 100%; aspect-ratio: 1 / 1; }

.review-card__body { padding: 16px 18px 0; display: flex; flex-direction: column; gap: 10px; height: 100%; }

.review-card__name {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.review-card__meta {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange);
}

.review-card__text {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

/* ---------------------------- Мы в СМИ ----------------------------- */

.media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.media-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  padding: 0 0 16px;
  transition: border-color var(--t);
}
.media-card:hover { border-color: var(--black); }

.media-card__plate {
  height: 92px;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-head);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-align: center;
  padding-inline: 12px;
  color: var(--black);
  filter: grayscale(1);
}

.media-card__body { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }

.media-card__meta {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.media-card__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-card:hover .media-card__title { color: var(--orange); }

.media-card__more { margin-top: auto; padding-top: 14px; display: flex; justify-content: flex-end; }

/* ---------------------------- CTA-дуо ------------------------------ */

.cta-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}
.cta-duo .btn { width: 100%; min-height: 56px; }

/* --------------------------- Поделиться ---------------------------- */

.share {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule-soft);
  padding-top: 20px;
  margin-top: clamp(30px, 4vw, 52px);
}

.share__label {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.share__list { display: flex; gap: 10px; }

.share__btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  color: var(--black);
  background: transparent;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.share__btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* ---------------------------- Сайдбар ------------------------------ */

.side-block { border: 1px solid var(--rule); }

.side-block__head {
  background: var(--black);
  color: var(--white);
  padding: 14px 16px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.side-list li + li { border-top: 1px solid var(--rule); }

.side-list__link {
  position: relative;
  display: block;
  padding: 13px 16px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1.35;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background-color var(--t), color var(--t);
}
.side-list__link:hover { color: var(--orange); }

.side-list__link.is-active { background: var(--black); color: var(--white); }
.side-list__link.is-active::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 14px solid var(--orange);
  border-left: 14px solid transparent;
}

.side-note { padding: 18px 16px; }
.side-note__text { font-size: 14px; line-height: 1.55; }


/* ==================================================================
   4. Секции отдельных страниц
   ================================================================== */

/* ------------------------- Услуги: вводный ------------------------- */

.services-intro__lead {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  max-width: 60ch;
}

.services-intro__block { padding-block: clamp(24px, 3vw, 40px); }

.services-intro__sub {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 16px;
}

.help-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gutter);
}
.help-list li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-top: 1px solid var(--rule-soft);
  font-size: 15px;
  line-height: 1.45;
}
.help-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 19px;
  width: 9px;
  height: 9px;
  background: var(--wine);
}

.geo-list { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 16px; }
.geo-list li {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  padding: 9px 14px;
}

/* --------------------- Услуга: текст и врезка ---------------------- */

.service-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); }

.quote-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 0;
  border: 1px solid var(--rule-soft);
  margin-block: clamp(24px, 3vw, 40px);
}

.quote-box__text {
  padding: 26px 28px;
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: justify;
}

.quote-box__sign {
  margin-top: 18px;
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .08em;
  color: var(--orange);
  text-align: left;
}

.quote-box__photo { width: 200px; aspect-ratio: 1 / 1; align-self: stretch; }
.quote-box__photo.ph { height: auto; }

/* ------------------------------ Табы ------------------------------- */

.tabs { border-top: 1px solid var(--rule-soft); margin-top: clamp(28px, 4vw, 48px); }

.tabs__list { display: flex; flex-wrap: wrap; gap: 0; }

.tabs__tab {
  padding: 15px 24px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: background-color var(--t), color var(--t);
}
.tabs__tab:hover { color: var(--orange); }
.tabs__tab[aria-selected='true'] { background: var(--black); color: var(--white); }

.tabs__panel { padding-top: clamp(22px, 3vw, 34px); }
.tabs__panel[hidden] { display: none; }

/* ---------------------------- Аккордеон ---------------------------- */

.acc { border-top: 1px solid var(--rule-soft); }
.acc__item { border-bottom: 1px solid var(--rule-soft); }

.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  text-align: left;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: color var(--t);
}
.acc__head:hover { color: var(--orange); }

.acc__num { color: var(--orange); margin-right: 8px; }

.acc__chev { flex: 0 0 auto; transition: transform var(--t); }
.acc__head[aria-expanded='true'] .acc__chev { transform: rotate(180deg); }

.acc__body { padding: 0 0 24px; max-width: 68ch; }
.acc__body[hidden] { display: none; }
.acc__body p { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ------------------------- О бюро: манифест ------------------------ */

.manifest-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  padding-block: clamp(28px, 4vw, 52px);
}

.manifest-grid__text { grid-column: span 5; }
.manifest-grid__text--right { grid-column: 7 / span 5; }
.manifest-grid__sq { grid-column: span 2; }
.manifest-grid__sq--wide { grid-column: span 3; }

.about-quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  border: 1px solid var(--rule-soft);
  background: var(--white);
}

.about-quote__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px; }

.about-quote__text {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.5;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: justify;
}

.about-quote__sign {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange);
}

.about-quote__photo { width: 260px; aspect-ratio: 1 / 1; }

.facts-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  border-top: 1px solid var(--rule-soft);
  padding-top: clamp(24px, 3vw, 40px);
}

.fact__num {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.fact__label {
  margin-top: 12px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
  max-width: 22ch;
}

/* ----------------------------- Команда ----------------------------- */

.team-group + .team-group { margin-top: clamp(40px, 6vw, 88px); }

.team-group__title {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 18px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* --------------------------- Дела: лента --------------------------- */

.cases-band { padding-block: clamp(36px, 5vw, 72px); }

.case-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--rule);
  padding: 20px;
  min-height: 230px;
  transition: border-color var(--t);
}
.on-color .case-card { border: 0; }
.case-card:hover { border-color: var(--black); }

.case-card__date {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
}

.case-card__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.case-card:hover .case-card__title { color: var(--orange); }

.case-card__text { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.case-card__more { margin-top: auto; display: flex; justify-content: flex-end; }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

/* --------------------------- Фильтры дел --------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: clamp(24px, 3vw, 40px);
}

.filters__item {
  padding: 14px 20px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: background-color var(--t), color var(--t);
}
.filters__item:hover { color: var(--orange); }
.filters__item.is-active { background: var(--black); color: var(--white); }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 40px);
}

.pager__link {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  padding: 6px 4px;
  color: var(--text-2);
  transition: color var(--t);
}
.pager__link:hover { color: var(--orange); }
.pager__link.is-active { color: var(--black); text-decoration: underline; text-underline-offset: 5px; }
.pager__sep { color: var(--grey-warm); }

/* --------------------------- Страница дела ------------------------- */

.case-title {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 20ch;
}

.case-block { margin-top: clamp(28px, 3.6vw, 48px); }

.case-block__h {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--orange);
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
  margin-bottom: 16px;
}

.case-date {
  border-top: 1px solid var(--rule-soft);
  padding-top: 18px;
  margin-top: clamp(28px, 3.6vw, 48px);
}
.case-date__label {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-2);
}
.case-date__value {
  margin-top: 8px;
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
}

.docs-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 32%);
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.docs-rail > * { scroll-snap-align: start; }

.doc-card { display: flex; flex-direction: column; gap: 12px; }
.doc-card__img { width: 100%; aspect-ratio: 3 / 4; }
.doc-card__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
}

.dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.dots__dot {
  width: 8px; height: 8px;
  border: 1px solid var(--black);
  background: transparent;
  border-radius: 0;
}
.dots__dot.is-active { background: var(--black); }

.related-case {
  border: 1px solid var(--rule-soft);
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.related-case__title {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.related-case__text { font-size: 15px; line-height: 1.55; color: var(--text-2); max-width: 62ch; }

.related-case__rows { display: grid; gap: 8px; margin-top: 6px; }
.related-case__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.related-case__row dt { color: var(--text-2); margin: 0; }
.related-case__row dd { margin: 0; }
.related-case__row a { text-decoration: underline; text-underline-offset: 4px; }
.related-case__row a:hover { color: var(--orange); }

/* ---------------------------- Контакты ----------------------------- */

.contact-row {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(20px, 2.8vw, 34px);
}
.contact-row:last-of-type { border-bottom: 1px solid var(--rule-soft); }

.contact-row__label {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-nano);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 10px;
}

.contact-row__value {
  display: inline-block;
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(26px, 5.6vw, 82px);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  word-break: break-word;
  transition: color var(--t);
}
a.contact-row__value:hover { color: var(--orange); }
.contact-row__value--orange { color: var(--orange); }

.contact-row__aside { display: flex; justify-content: flex-end; margin-top: 18px; }

.office-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(28px, 4vw, 56px);
}
.office-photos .ph { aspect-ratio: 1 / 1; }

.extras-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  border-top: 1px solid var(--rule-soft);
  padding-top: clamp(24px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 56px);
}

.extras-col__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.extras-col__text { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.extras-col .social { margin-top: 0; }
.extras-col .social__link { border-color: var(--rule); color: var(--black); }
.extras-col .social__link:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.community-list { border-top: 1px solid var(--rule-soft); margin-top: clamp(28px, 4vw, 56px); }

.community-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: color var(--t);
}
.community-row:hover { color: var(--orange); }

.community-row__emblem {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--bg-soft);
  filter: grayscale(1);
  color: var(--black);
}
.community-row:hover .community-row__emblem { color: var(--orange); }

.community-row__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.community-row__meta { margin-top: 5px; font-size: 12px; color: var(--text-2); }

/* ------------------------------- 404 ------------------------------- */

.error-hero { padding-block: clamp(40px, 7vw, 110px); }

.error-hero__code {
  display: flex;
  align-items: center;
  gap: .02em;
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(90px, 26vw, 340px);
  line-height: .82;
  letter-spacing: -.05em;
}
.error-hero__zero {
  display: inline-block;
  width: .62em;
  height: .62em;
  background: var(--orange);
  flex: 0 0 auto;
}

.error-hero__note {
  margin-top: clamp(18px, 2.6vw, 34px);
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.big-links { border-top: 1px solid var(--rule-soft); }

.big-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(24px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  transition: color var(--t), padding-left var(--t);
}
.big-link:hover { color: var(--orange); padding-left: 12px; }

/* --------------------------- Карта сайта --------------------------- */

.sitemap-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.sitemap-group__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.sitemap-group__list { display: flex; flex-direction: column; gap: 10px; }

.sitemap-group__link {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  transition: color var(--t);
}
.sitemap-group__link:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 4px; }

.privacy-note { margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--rule-soft); padding-top: 24px; }

/* --------------------- Появление при скролле ----------------------- */

/* Прячем до появления только при работающем JS: без него класс .js
   не проставится и контент останется видимым */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2, .6, .3, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }


/* ==================================================================
   5. Медиазапросы, доступность, печать
   ================================================================== */

/* --------------------------- ≤ 1280px ------------------------------ */

@media (max-width: 1280px) {
  :root { --pad: 40px; }
}

/* Полоса 1281–1330: боковой отступ ещё 72px и кнопка звонка ещё видна,
   а места между логотипом и правой зоной уже не хватает: меню в одну строку
   требует 673px, контейнер даёт 608px на 1281 — первый пункт наезжал на логотип.
   Шаг меню на этой полосе ужимается до 10px — ширина меню падает до 625px. */
@media (min-width: 1281px) and (max-width: 1330px) {
  .main-nav__list { gap: 10px; }
  .main-nav__item::after { margin-left: 10px; }
}

/* Кнопка звонка скрыта ниже 1280, чтобы шапка не наезжала */
@media (max-width: 1279px) {
  .site-header__cta { display: none; }
}

/* --------------------------- ≤ 1199px ------------------------------ */

@media (max-width: 1199px) {
  .team-grid,
  .tiles,
  .events,
  .media-grid,
  .cases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .rail { grid-auto-columns: minmax(240px, calc(33.333% - var(--gutter) * .67)); }

  .main-nav__list { gap: 11px; }
  .main-nav__item::after { margin-left: 11px; }
  .main-nav__link { font-size: 11px; letter-spacing: .05em; }
}

/* ---------------------------- ≤ 1023px ----------------------------- */

@media (max-width: 1023px) {
  /* Контрольная ширина 900: меню ужимается, вордмарк теряет верхнюю строку,
     телефон остаётся — так шапка держится в одну строку без наездов.
     Разделители «/» снимаются: замерено, что с ними меню не помещается
     в контейнер на 900 даже при 10px, а без них остаётся запас 50px
     и на веб-шрифте, и на системном откате. */
  .main-nav__list { gap: 10px; }
  .main-nav__item::after { display: none; }
  .main-nav__link { font-size: clamp(9px, 1.15vw, 11px); letter-spacing: .03em; }

  .brand__word-top { display: none; }
  .brand { gap: 8px; }
  .site-header__phone { font-size: 12px; }
  .site-header__aside { gap: 10px; }

  .quote-box { grid-template-columns: minmax(0, 1fr); }
  .quote-box__photo { width: 100%; aspect-ratio: 16 / 9; }

  .about-quote { grid-template-columns: minmax(0, 1fr); }
  .about-quote__photo { width: 100%; aspect-ratio: 16 / 9; order: -1; }

  .manifest-grid__text,
  .manifest-grid__text--right { grid-column: span 8; }
  .manifest-grid__sq,
  .manifest-grid__sq--wide { grid-column: span 4; }

  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }

  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block: 56px; }
  .site-footer__col--form { order: -1; }
  .site-footer__col--brand { order: 0; }
  .site-footer__col--nav { order: 1; }
}

/* ----------------------------- ≤ 899px ----------------------------- */

@media (max-width: 899px) {
  :root { --header-h: 64px; }

  .main-nav,
  .site-header__aside { display: none; }

  .burger { display: flex; }

  .brand__word-top { font-size: 10px; }
  .brand__word-main { font-size: 14px; }

  /* Сайдбар уходит под контент */
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout__side { position: static; top: auto; }

  .team-grid,
  .tiles,
  .events,
  .media-grid,
  .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rail { grid-auto-columns: minmax(230px, 62%); }

  .mosaic { grid-template-columns: repeat(4, 1fr); }
  .mosaic__cell:nth-child(n + 9) { display: none; }

  .hero__lead-row { grid-template-columns: minmax(0, 1fr); }

  .help-list { grid-template-columns: minmax(0, 1fr); }

  .extras-row { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }

  .sitemap-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .office-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .spec-card { min-height: 300px; }
  .spec-card__photo { width: 104px; }

  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ----------------------------- ≤ 767px ----------------------------- */

@media (max-width: 767px) {
  .team-grid,
  .tiles,
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .events,
  .cases-grid { grid-template-columns: minmax(0, 1fr); }

  .cta-duo { grid-template-columns: minmax(0, 1fr); }
  .cta-duo .btn { min-height: 48px; }

  .docs-rail { grid-auto-columns: minmax(200px, 70%); }

  .community-row { grid-template-columns: 48px minmax(0, 1fr); }
  .community-row__emblem { width: 48px; height: 48px; }
  .community-row .arrow-link { grid-column: 1 / -1; }

  .related-case__rows { gap: 12px; }
}

/* ----------------------------- ≤ 599px ----------------------------- */

@media (max-width: 599px) {
  :root { --pad: 24px; --gutter: 16px; }

  .team-grid,
  .tiles,
  .sitemap-cols,
  .facts-row { grid-template-columns: minmax(0, 1fr); }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mosaic { grid-template-columns: repeat(3, 1fr); }
  .mosaic__cell:nth-child(n + 7) { display: none; }

  .office-photos { grid-template-columns: minmax(0, 1fr); }

  .page-hero__squares { grid-template-columns: repeat(3, 1fr); }

  .rail { grid-auto-columns: minmax(210px, 84%); }

  .filters { border-bottom: 0; }
  .filters__item { padding: 12px 14px; font-size: 11px; }

  .site-footer__col--form .consult-form { padding: 24px 18px; }

  .field__input { min-height: 48px; }

  .head-row,
  .page-hero__row { align-items: flex-start; flex-direction: column; gap: 12px; }

  /* Кнопки первого экрана — в столбик во всю ширину, без рваного правого края */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; min-height: 48px; }

  .contact-row__aside { justify-content: flex-start; }

  .modal__panel { padding: 26px 20px 30px; }
}

/* ----------------------------- ≤ 400px ----------------------------- */

@media (max-width: 400px) {
  .brand__word-top { display: none; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic__cell:nth-child(n + 5) { display: none; }
  .arrow-link__line { width: 48px; }
  .arrow-link:hover .arrow-link__line { width: 64px; }
}

/* ---------------------------- Фокус -------------------------------- */

:focus { outline: none; }

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.main-nav__link:focus-visible { outline-offset: 3px; }

/* На оранжевом фоне фокус чёрный */
.bg-orange :focus-visible,
.tile--orange:focus-visible,
.mosaic__cell--orange :focus-visible { outline-color: var(--black); }

/* На бордовом и в футере — белый */
.bg-wine :focus-visible,
.site-footer :focus-visible { outline-color: var(--white); }

.field__input:focus-visible { outline-offset: 0; border-color: var(--orange); }

/* --------------------- prefers-reduced-motion ---------------------- */

@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;
  }

  .arrow-link:hover .arrow-link__line { width: 72px; }
  .arrow-link--short:hover .arrow-link__line { width: 44px; }
  .big-link:hover { padding-left: 0; }
  .hero__scroll a:hover { transform: none; }

  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; }
  .mobile-nav { transform: none; }

  .rail,
  .docs-rail { scroll-behavior: auto; }
}

/* ----------------------- Тонкая настройка -------------------------- */

@media (hover: none) {
  .arrow-link:hover .arrow-link__line { width: 72px; }
  .tile:hover { background: inherit; }
  .tile--orange:hover { background: var(--orange); color: var(--black); }
  .tile--wine:hover { background: var(--wine); color: var(--white); }
  .tile--grey:hover { background: var(--grey-warm); color: var(--black); }
}

/* ----------------------------- Печать ------------------------------ */

@media print {
  @page { margin: 16mm; }

  :root { --pad: 0; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }

  .site-header,
  .mobile-nav,
  .burger,
  .site-footer,
  .modal,
  .share,
  .cta-duo,
  .rail-nav,
  .filters,
  .pager,
  .hero__scroll,
  .skip-link,
  .layout__side { display: none !important; }

  .container { max-width: none; padding-inline: 0; }

  .bleed,
  .rule-full { width: auto; margin-left: 0; transform: none; }

  .layout { grid-template-columns: minmax(0, 1fr); }

  .ph img,
  .ph .sq-svg,
  .mosaic__cell img { filter: grayscale(1); }

  .ph--duo::before,
  .ph--duo::after,
  .hero__cut::before,
  .hero__cut::after { display: none; }

  .bg-orange,
  .bg-wine,
  .on-color { background: #fff !important; color: #000 !important; }

  a { text-decoration: underline; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }

  .section { padding-block: 12pt; }
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; }

  h1, h2, h3, .case-block__h, .team-group__title { break-after: avoid; }
  .event, .case-card, .spec-card, .award-card { break-inside: avoid; }
}