/* ============================================================
   Дизайн-система. Снята с референса malinovich.ru:

   — заголовки тёмные (#303437), бирюзовым выделены отдельные
     слова внутри фразы — класс .accent;
   — 84px отданы цифрам метрик, а не заголовкам: H1 около 46px;
   — кнопки-пилюли со светлой заливкой и круглым бейджем-стрелкой справа;
   — карточки и медиа скруглены (10–14px), портреты — в круге;
   — фон светлый: белый и #f7f7f7;
   — контейнер 1200px, брейкпоинты 1199 / 959 / 639.

   ВАЖНО: по правилам разработки нишевых сайтов минимальный размер
   шрифта — 16px на всех разрешениях.
   ============================================================ */
:root{
  /* палитра */
  --brand:#1e4e54;
  --brand-dark:#11484f;
  --brand-deep:#00444d;
  --ink:#303437;
  --muted:#61686a;
  --muted-2:#566063;
  --bg:#ffffff;
  --bg-soft:#f7f7f7;
  --bg-soft-2:#f9f9f9;
  --line:#efefef;
  --line-2:#e4e4e4;
  --line-3:#dcdee1;
  --wa:#25d366;
  --wa-dark:#1da851;
  --star:#f2a93b;

  /* типографика */
  --font-head:'Manrope','Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-body:'Golos Text','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --fs-base:18px;
  --fs-small:16px;              /* нижняя граница, меньше нельзя */

  /* сетка */
  --container:1200px;
  --gutter:20px;
  --radius:14px;
  --radius-media:10px;
  --radius-pill:100px;
  --radius-chip:30px;
  --section-y:110px;
  --header-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  /* Длинное слово («переосвидетельствование») рвётся, только если не влезает
     в строку целиком: на телефоне оно выталкивало заголовок за край экрана */
  overflow-wrap:break-word;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
small{font-size:var(--fs-small)}

/* Заголовки тёмные; бирюзовым выделяются отдельные слова */
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:500;
  margin:0;
  line-height:1.16;
  letter-spacing:-0.025em;
  color:var(--ink);
}
.accent{color:var(--brand)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
/* У соседних секций с одинаковым фоном отступы складывались в двойной провал */
.section + .section{padding-top:0}
.section--soft + .section,.section + .section--soft{padding-top:var(--section-y)}
.section--soft{background:var(--bg-soft)}
.section--tint{background:var(--bg-soft)}

.eyebrow{
  font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-weight:500;margin-bottom:22px;
}

.h-section{font-size:clamp(25px,2.4vw,32px);margin-bottom:26px;max-width:32ch;line-height:1.22}
.lead{font-size:20px;color:var(--muted);max-width:720px;line-height:1.5}

/* ============================================================
   Кнопки — прямоугольные, без скруглений и теней
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--font-head);font-size:var(--fs-small);font-weight:500;
  padding:14px 14px 14px 28px;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap;line-height:1.2;letter-spacing:-0.01em;
}
.btn svg{width:20px;height:20px;flex:0 0 auto}
/* 14.09.2026, скрин заказчицы: в узкой тёмной карточке этапов длинная кнопка
   («Узнать порядок для моей страны») вылезала за край вместе с бейджем — nowrap
   не давал ей сжаться. Кнопка теперь не шире контейнера, а текст переносится
   на вторую строку только тогда, когда не помещается. Короткие кнопки не меняются. */
.btn{max-width:100%}
.btn > span:not(.btn__badge){white-space:normal;min-width:0;text-align:left}

/* Круглый бейдж со стрелкой справа внутри кнопки — приём референса */
.btn__badge{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;background:var(--brand);
  transition:transform .2s ease;
}
.btn__badge svg{width:13px;height:13px;stroke:#fff;stroke-width:2;fill:none}
.btn:hover .btn__badge{transform:translate(2px,2px)}

/* Основная кнопка светлая, как на референсе */
.btn--primary{background:var(--bg-soft);color:var(--ink)}
.btn--primary:hover{background:#eceeee}
.btn--solid{background:var(--brand);color:#fff;padding:18px 32px}
.btn--solid:hover{background:var(--brand-deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-3);padding:18px 32px}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--light{background:#fff;color:var(--brand)}
.btn--light:hover{background:var(--bg-soft)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--outline-light:hover{background:rgba(255,255,255,.12)}
/* Кнопка WhatsApp в цвете бренда, а не в фирменной зелени мессенджера:
   27.08 заказчица — «этот зелёный цвет кнопки как будто не подходит по стилю».
   #25d366 выбивался из тёмно-зелёной палитры страницы. Канал по-прежнему
   читается — по иконке и тексту кнопки. */
.btn--wa{background:var(--brand);color:#fff}
.btn--wa:hover{background:var(--brand-deep)}
.btn--wa svg{fill:currentColor}
/* На тёмной кнопке бейдж сливался бы с фоном — осветляем. */
.btn--wa .btn__badge{background:rgba(255,255,255,.18)}

/* ============================================================
   Шапка
   ============================================================ */
/* 28.08. Долг «хедер под референс» с 20.08. В docs/ref.html шапка не белая
   полоса с линией снизу, а прозрачный ряд поверх первого экрана: слева
   логотип, по центру серая капсула меню, справа вторая капсула с элементами
   управления и тёмным круглым бургером на её конце. Белый фон и линия
   появляются только при прокрутке — до этого фон первого экрана идёт
   до самого верха окна. */
.header{
  position:sticky;top:0;z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.header.is-stuck{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom-color:var(--line);
}
/* Ряд шапки не влезал в контейнер 1200: логотип 203 + меню 648 + правый блок
   417 + два зазора = 1316 при доступных 1160. Разница в 156px уходила за
   правый край — на широком мониторе незаметно, на 1440 появлялась
   горизонтальная прокрутка и «съезжала» вся страница. Даём шапке свой
   контейнер пошире и поджимаем внутренние отступы. */
.header .container{max-width:1360px}
.header__inner{display:flex;align-items:center;gap:14px;height:var(--header-h)}
.logo{font-family:var(--font-head);font-weight:600;font-size:20px;letter-spacing:-0.035em;color:var(--brand)}
/* Логотип — монограмма и подпись в строку, чтобы помещаться в шапку */
.logo{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:12px}
.logo__mark{
  width:40px;height:40px;flex:0 0 40px;box-sizing:border-box;
  border:1.6px solid var(--brand);border-radius:10px;
  display:flex;align-items:center;justify-content:center;line-height:1;
  font-family:var(--font-head);font-weight:600;
  font-size:16px;letter-spacing:-0.04em;color:var(--brand);
}
.logo span:not(.logo__mark){
  font-family:var(--font-head);font-weight:600;font-size:18px;letter-spacing:-0.03em;
  color:var(--brand);text-transform:none;white-space:nowrap;
}

/* Меню — одна серая капсула, активный пункт белой пилюлей внутри */
.nav{
  display:flex;gap:2px;margin:0 auto;
  background:var(--bg-soft);border-radius:var(--radius-pill);padding:6px;
}
.nav a{
  font-size:var(--fs-small);color:var(--muted);padding:10px 14px;white-space:nowrap;
  border-radius:var(--radius-pill);transition:background .2s,color .2s;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:#fff;color:var(--ink)}

/* Правый блок — вторая капсула, как в оригинале: светлая пилюля с элементами
   управления, бургер тёмным кругом на её конце. */
.header__tools{display:flex;align-items:center;gap:6px;
  background:var(--bg-soft);border-radius:var(--radius-pill);padding:5px 12px 5px 16px}
.header__phone{font-family:var(--font-head);font-weight:500;font-size:17px;white-space:nowrap;
  letter-spacing:-0.02em;color:var(--ink);padding:0 6px}

/* Бургер. 28.08 заказчица про тёмный круг: «кнопка не нравится мне, пусть она
   будет лучше стандартной какой-то». Вернули обычный вид — три полоски без
   заливки; круг из референса убран. */
.burger{
  width:44px;height:44px;background:none;
  display:grid;place-items:center;padding:0;border:0;cursor:pointer;
}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:background .2s}
.burger span+span{margin-top:5px}
.burger:hover span{background:var(--brand)}

.picker{position:relative}
.picker__btn{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-small);color:var(--ink);padding:8px 4px;
}
.picker__btn::after{content:'';width:7px;height:7px;border-right:1.6px solid var(--muted-2);
  border-bottom:1.6px solid var(--muted-2);transform:rotate(45deg) translateY(-2px)}
.picker__list{
  display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:190px;z-index:70;
  background:#fff;border:1px solid var(--line-2);padding:6px;
}
.picker.is-open .picker__list{display:block}
.picker__list a{display:block;padding:11px 14px;font-size:var(--fs-small)}
.picker__list a:hover{background:var(--bg-soft)}
.picker__list a[aria-current="true"]{color:var(--brand);font-weight:500}

.search{position:relative}
.search__toggle{background:none;border:0;cursor:pointer;padding:8px;display:grid;place-items:center}
.search__toggle svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2}
.search__panel{display:none;position:absolute;top:calc(100% + 8px);right:0;width:340px;z-index:70;
  background:#fff;border:1px solid var(--line-2);padding:10px}
.search.is-open .search__panel{display:block}
.search__panel input{width:100%;font-family:var(--font-body);font-size:var(--fs-small);
  padding:13px 15px;border:1px solid var(--line-2)}
.search__panel input:focus{outline:none;border-color:var(--brand)}

/* Стили бургера заданы выше — круглая бирюзовая кнопка, видна на всех ширинах. */

/* Шторка по референсу (скрин заказчика 20.08): белая карточка с отступом от края,
   крупная типографика навигации вместо частокола мелких заголовков, соцсети
   мелкой строкой внизу, кнопка закрытия — тёмный круг снаружи панели. */
.drawer{position:fixed;inset:0;z-index:80;display:none;background:rgba(20,28,30,.45)}
.drawer.is-open{display:block}
.drawer__panel{position:absolute;top:16px;right:16px;bottom:16px;width:min(400px,calc(100vw - 32px));
  background:#fff;border-radius:var(--radius);overflow-y:auto;
  padding:34px 36px 36px;display:flex;flex-direction:column}
.drawer__close{width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:var(--brand);color:#fff;font-size:24px;line-height:1;
  /* fixed, а не absolute: кнопка лежит внутри панели с overflow-y:auto,
     и снаружи панели absolute-кнопку обрезало — шире 640px её не было видно */
  position:fixed;z-index:1;top:16px;right:calc(min(400px,calc(100vw - 32px)) + 26px);
  display:flex;align-items:center;justify-content:center}
.drawer__close:hover{background:var(--brand-deep)}
.drawer__logo{font-family:var(--font-head);font-weight:600;font-size:19px;
  color:var(--brand);letter-spacing:-0.02em;margin-bottom:30px}
/* Подписи групп в шторке — <p>, а не <h4>: заголовок после H2 контента
   давал пропуск уровня. line-height как у h1–h4, вид прежний. */
.drawer__title{font-family:var(--font-head);font-size:var(--fs-small);letter-spacing:.02em;
  color:var(--muted-2);font-weight:400;margin:26px 0 12px;line-height:1.16;
  padding-bottom:12px;border-bottom:1px solid var(--line-3)}
.drawer__title:first-of-type{margin-top:0}
/* Основная навигация — крупная, как в оригинале */
.drawer__nav a{display:block;padding:7px 0;font-family:var(--font-head);font-weight:500;
  font-size:clamp(24px,3.4vw,30px);letter-spacing:-0.03em;line-height:1.22;
  color:var(--ink);border-bottom:0}
.drawer__nav a:hover{color:var(--brand)}
/* Карта раздела переехала сюда (правка 26.08 «это в меню убрать»):
   крупные пункты — направления, под ними мелким списком вложенные страницы. */
.drawer__group{margin-bottom:14px}
.drawer__sub{display:grid;gap:2px;margin:6px 0 0;padding-left:2px}
.drawer__sub a{display:block;padding:4px 0;font-family:var(--font-body);font-weight:400;
  font-size:var(--fs-small);line-height:1.45;letter-spacing:0;color:var(--muted)}
.drawer__sub a:hover{color:var(--brand)}
/* Вспомогательные ссылки — мелкие, без разлиновки */
.drawer__minor a{display:block;padding:6px 0;font-size:var(--fs-small);
  color:var(--muted);border-bottom:0}
.drawer__minor a:hover{color:var(--brand)}
.drawer__socials{display:grid;gap:2px;margin-top:4px}
.drawer__socials a{display:block;padding:6px 0;font-size:var(--fs-small);
  color:var(--muted);border-bottom:0}
.drawer__socials a:hover{color:var(--brand)}
.drawer .btn{width:100%;margin-top:auto;padding-top:18px;padding-bottom:18px}
.drawer__form{margin:0 0 4px}
.drawer__form input{width:100%;font-size:16px;padding:13px 15px;
  border:1px solid var(--line-2);border-radius:10px}
@media (max-width:639px){
  .drawer__panel{top:0;right:0;bottom:0;width:100vw;border-radius:0;padding:70px 22px 26px}
  .drawer__close{top:14px;right:16px}
}

.crumbs{font-size:var(--fs-small);color:var(--muted-2);padding:26px 0 0}
.crumbs a:hover{color:var(--brand)}
.crumbs span{margin:0 8px}

/* ============================================================
   Главный экран.
   Референс открывается видео: запись rec673392852 содержит
   ролик 1140×450 во всю ширину контейнера и круглую кнопку
   воспроизведения 60×60 по центру. Заголовок идёт ниже.
   ============================================================ */
.hero{padding:76px 0 0}

/* Заказчица 25.08: «смущает обрезанная картинка, может получится вверх её
   поднять? Как показывала справа от текста заголовка». Верхний ряд стал
   двухколоночным: слева заголовок с кнопкой, справа снимок. Тезисы из-за
   этого уезжают под ряд — на всю ширину. */
.hero__top{display:grid;grid-template-columns:1fr 1.08fr;gap:48px;
  align-items:center;margin-bottom:46px}
.hero__top .hero__actions{margin-bottom:0}

/* Заголовок: тёмный, с бирюзовым выделением части фразы */
.hero h1{
  font-size:clamp(30px,3.6vw,48px);
  line-height:1.18;
  letter-spacing:-0.025em;
  margin:0 0 28px;
  max-width:22ch;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}

/* Четыре тезиса с плюсиками, без рамок */
.hero__points{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-bottom:36px}
.hero__points li{font-size:var(--fs-small);color:var(--muted);line-height:1.45;max-width:26ch}
/* Плюс — тонкий бирюзовый штрих без заливки, как в референсе */
.plus{
  display:block;width:14px;height:14px;position:relative;flex:0 0 auto;
}
.plus::before,.plus::after{content:'';position:absolute;background:var(--brand)}
.plus::before{left:0;top:6.25px;width:14px;height:1.5px}
.plus::after{top:0;left:6.25px;width:1.5px;height:14px}
.hero__points .plus{margin-bottom:16px}
/* Выделение в тезисах — только на телефоне (28.09, см. ≤639px) */
.hero__points strong{font-weight:inherit;color:inherit}

/* Пропорция кадра совпадает с исходником (1600×900), поэтому снимок
   показывается целиком — раньше рамка 1140×450 срезала треть по высоте,
   на это заказчица и жаловалась. */
.hero__media{
  position:relative;overflow:hidden;border-radius:var(--radius-media);
  aspect-ratio:16/9;background:var(--bg-soft);margin:0;
}
.hero__media img,.hero__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* Кнопка воспроизведения 60×60, бирюзовая */
.hero__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:var(--brand);display:grid;place-items:center;
  transition:transform .2s ease,background .2s ease;
}
.hero__play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--brand-deep)}
.hero__play svg{width:17px;height:17px;fill:#fff;margin-left:3px}

/* ============================================================
   Показатели
   ============================================================ */
/* Метрики стоят лесенкой, а не ровным рядом */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 40px}
.stat{padding-top:26px;border-top:1px solid var(--line-2)}
.stat:nth-child(1){grid-column:1 / span 2}
.stat:nth-child(2){grid-column:3 / span 2}
.stat:nth-child(3){grid-column:2 / span 2}
.stat:nth-child(4){grid-column:4 / span 1}
.stat__num{font-family:var(--font-head);font-size:clamp(52px,6.2vw,84px);font-weight:400;
  color:var(--brand);line-height:1;letter-spacing:-0.05em;margin-bottom:16px}
.stat__num sup{font-size:.42em;vertical-align:baseline;letter-spacing:-0.02em;margin-left:2px}
/* У цифры две строки: короткая подпись и пояснение — без пояснения
   блок выглядел незаконченным. */
.stat__label{font-family:var(--font-head);font-size:18px;font-weight:500;color:var(--ink);
  letter-spacing:-0.02em;line-height:1.3}
.stat__desc{font-size:var(--fs-small);color:var(--muted);margin-top:10px;line-height:1.5;
  max-width:38ch}

/* ============================================================
   Текст + изображение
   ============================================================ */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.figure{aspect-ratio:4/5;border-radius:var(--radius-media);overflow:hidden;
  background:linear-gradient(120deg,#e9eeef 0%,#f7f7f7 60%);
  display:grid;place-items:center;color:var(--muted-2);font-size:var(--fs-small);
  letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:20px}
.figure img{width:100%;height:100%;object-fit:cover}
figcaption{font-size:var(--fs-small);color:var(--muted-2);margin-top:12px}
.prose p{color:var(--muted);font-size:20px;line-height:1.55}
.prose p+p{margin-top:20px}
.credentials{margin-top:40px}
.credentials li{display:flex;gap:20px;font-size:18px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.credentials li:first-child{border-top:1px solid var(--line-2)}
.credentials b,.credentials strong{font-family:var(--font-head);font-weight:500;flex:0 0 170px;color:var(--brand);
  letter-spacing:-0.02em}
.credentials span{color:var(--muted)}

/* ============================================================
   Карточки — без рамок и теней, разделение линиями
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;
  border-top:1px solid var(--line-2)}
.cards--2{grid-template-columns:repeat(2,1fr)}
/* Кейсы лежат в такой же сетке, но листаются лентой — сетку с неё снимаем. */
.cards.slider{grid-template-columns:none;grid-auto-columns:400px;border-top:0}
.card{
  padding:40px 40px 44px 0;border-bottom:1px solid var(--line-2);
  display:flex;flex-direction:column;
}
.card+.card{border-left:1px solid var(--line-2);padding-left:40px}
.card__num{font-family:var(--font-head);font-size:var(--fs-small);letter-spacing:.12em;
  color:var(--muted-2);margin-bottom:24px}
.card h3{font-size:26px;margin-bottom:14px}
.card>p{font-size:18px;color:var(--muted);line-height:1.5}
.card__list{margin-top:22px;display:grid;gap:10px}
.card__list li{font-size:var(--fs-small);color:var(--muted);padding-left:18px;position:relative}
.card__list li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;
  background:var(--brand)}
.card__media{aspect-ratio:16/10;border-radius:var(--radius-media);overflow:hidden;margin-bottom:24px;
  background:var(--bg-soft);display:grid;place-items:center;color:var(--muted-2);font-size:var(--fs-small)}
.card__media img{width:100%;height:100%;object-fit:cover}

.group-title{font-family:var(--font-head);font-size:var(--fs-small);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin:60px 0 -34px}

/* ============================================================
   Блок «О практике»: подпись слева, кавычка, крупный текст
   ============================================================ */
.about-quote{display:grid;grid-template-columns:380px 46px 1fr;gap:0 24px;align-items:start}
.about-quote__label{font-size:var(--fs-small);color:var(--muted-2);padding-top:8px}
.about-quote__mark{font-family:var(--font-head);font-size:46px;line-height:1;
  color:var(--line-3);user-select:none;text-align:right}
/* Строки идут плотно, как в референсе */
.about-quote__body p{font-size:clamp(19px,1.55vw,22px);line-height:1.32;color:var(--ink);
  letter-spacing:-0.015em}

/* Портрет выровнен по левому краю текстового блока */
.person{display:flex;align-items:center;gap:36px;margin-top:56px;padding-left:450px}
.person .btn{margin-top:4px}
/* 960–1199: отступ 450px плюс фото и текст не влезали, кнопка упиралась в край */
@media (max-width:1199px){ .person{padding-left:220px} }
.person__photo{width:190px;height:190px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--bg-soft)}
.person__photo img{width:100%;height:100%;object-fit:cover}
.person__text{font-size:var(--fs-small);color:var(--muted);max-width:420px;line-height:1.5;
  margin-bottom:20px}

/* ============================================================
   Компетенции: серая карточка слева, белые карточки справа
   ============================================================ */
/* Секция серая, карточки белые — включая левую */
.comp{display:grid;grid-template-columns:.86fr 1.14fr;gap:24px;align-items:start}
.comp__side{background:#fff;border-radius:var(--radius);padding:40px 36px 44px;
  position:sticky;top:calc(var(--header-h) + 20px)}
.comp__side .eyebrow{margin-bottom:26px;text-transform:none;letter-spacing:0}
.comp__side h2{font-size:clamp(24px,2.5vw,34px);margin-bottom:34px;letter-spacing:-0.025em}
.comp__list{display:grid;gap:20px}
.comp__card{
  background:#fff;border-radius:var(--radius);padding:30px 34px 32px;position:relative;
}
.comp__card h3{font-size:19px;color:var(--brand);max-width:34ch;letter-spacing:-0.02em;
  line-height:1.35;margin-bottom:18px}
.comp__card p{font-size:var(--fs-small);color:var(--muted);line-height:1.55;max-width:58ch}
.comp__dot{position:absolute;top:30px;right:32px;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--line-3)}

/* ============================================================
   Тёмная секция с сегментами аудитории
   ============================================================ */
.audience{background:var(--brand);border-radius:var(--radius);padding:104px 60px 92px;
  text-align:center;color:#fff;margin-top:0}
.audience h2{color:#fff;font-size:clamp(24px,2.8vw,38px);max-width:24ch;margin:0 auto 20px}
.audience__sub{color:rgba(255,255,255,.74);font-size:var(--fs-small);max-width:56ch;
  margin:0 auto 46px;line-height:1.5}
.audience__actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:72px}
.audience .btn--light{background:#fff;color:var(--ink)}
.audience .btn--light .btn__badge{background:var(--brand)}
.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  border-top:1px solid rgba(255,255,255,.18);padding-top:40px}
.segments li{font-size:var(--fs-small);color:#fff}
.segments .plus{display:block;width:18px;height:18px;margin:0 auto 18px;position:relative}
.segments .plus::before,.segments .plus::after{content:'';position:absolute;background:rgba(255,255,255,.85)}
.segments .plus::before{left:0;top:8px;width:18px;height:2px}
.segments .plus::after{top:0;left:8px;width:2px;height:18px}

/* ============================================================
   Этапы: карточки с крупным призрачным номером
   ============================================================ */
/* Карточки одной высоты. Заголовок и номер занимают фиксированную высоту,
   поэтому описания во всех карточках начинаются на одной линии — и при этом
   идут сразу за номером, без провала. */
/* Три колонки, а не четыре: 8 этапов плюс карточка-призыв дают ровно
   9 ячеек — три полных ряда, и призыв стоит узкой карточкой внутри ряда,
   как в референсе. */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;
  align-items:stretch}
.stage{background:#fff;border-radius:var(--radius);padding:32px 34px 36px;position:relative;
  display:flex;flex-direction:column;min-height:300px}
.stage h3{font-size:21px;font-weight:600;color:var(--brand);letter-spacing:-0.02em;
  line-height:1.25;min-height:2.5em;max-width:24ch;margin:0}
/* Заказчица 20.08: «расстояние между заголовком карточки и описанием —
   не нравится такое большое». Номер поджат с обеих сторон и уменьшен:
   было 10 + 64 + 10 = 84px между заголовком и описанием, стало 4 + 46 + 6 = 56px.
   min-height у h3 не трогаем — на нём держится выравнивание описаний по высоте,
   которое она просила тем же сообщением. */
.stage__num{font-family:var(--font-head);font-size:46px;font-weight:400;line-height:1;
  color:#eef1f1;letter-spacing:-0.05em;margin:4px 0 0}
.stage p{font-size:var(--fs-small);color:var(--muted);line-height:1.5;padding-top:6px}
.stage__dot{position:absolute;top:28px;right:28px;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--line-3)}

/* Тёмная карточка-призыв внутри сетки этапов — приём референса.
   Узкая, когда закрывает последний ряд; на всю ширину, когда иначе
   осталась бы одна в новом ряду. */
.stage--cta{background:var(--brand);color:#fff;justify-content:space-between}
.stage--cta h3{color:#fff;font-size:23px;min-height:0;max-width:22ch}
.stage--cta p{color:rgba(255,255,255,.76);padding-top:14px}
.stage--cta .btn{margin-top:26px;align-self:flex-start}
.stage--cta .btn--light{background:#fff;color:var(--ink)}
.stage--cta .btn--light .btn__badge{background:var(--brand)}
/* Фотоподложка под затемнением — так карточка сделана в оригинале.
   Снимок подставляется через --stage-cta-img, чтобы у каждой страницы был свой.
   26.08 заказчица: «текст плохо видно на таком фоне, может фон подзамылить
   или заменить, как в оригинале». В оригинале (malinovich.ru) кадр
   обесцвечен и уведён в цвет бренда — цветной картинки там нет вообще.
   Поэтому снимок лежит в ::before под фильтром (ч/б + размытие + затемнение),
   а ::after кладёт сверху вертикальный градиент бренда. Фон через filter
   на псевдоэлементе, а не background-image у карточки: фильтр иначе
   съел бы и текст. */
.stage--cta--photo{position:relative;isolation:isolate;overflow:hidden;
  background-image:none;background-color:var(--brand)}
.stage--cta--photo::before{content:"";position:absolute;inset:-16px;z-index:-1;
  background-image:var(--stage-cta-img);background-size:cover;
  background-position:center 28%;background-repeat:no-repeat;
  filter:grayscale(1) blur(3px) brightness(.9) contrast(1.02)}
.stage--cta--photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(30,78,84,.6) 0%,rgba(0,52,59,.88) 100%)}
.stage--cta--wide{grid-column:1 / -1;flex-direction:row;align-items:center;
  gap:40px;min-height:0;padding:40px 44px}
.stage--cta--wide h3{max-width:30ch}
.stage--cta--wide p{padding-top:0;max-width:52ch}
.stage--cta--wide .btn{margin-top:0;margin-left:auto;align-self:center}

@media (max-width:959px){
  .about-quote{grid-template-columns:1fr;gap:16px}
  .about-quote__mark{display:none}
  /* 28.09: на узком экране фразы переносятся, и без разделения строки
     «О практике» сливались в сплошной текст. */
  .about-quote__body p+p{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
  .person{padding-left:0;flex-direction:column;align-items:flex-start;gap:24px;margin-top:48px}
  .comp{grid-template-columns:1fr}
  .comp__side{position:static}
  .audience{padding:68px 28px 60px}
  .segments{grid-template-columns:1fr;gap:24px}
  .stages{grid-template-columns:repeat(2,1fr)}
  /* В двух колонках 8 этапов закрывают ряды ровно, и призыв остался бы
     один в новом ряду — растягиваем его на всю ширину. */
  .stage--cta{grid-column:1 / -1}
  .stage--cta--wide{flex-direction:column;align-items:flex-start;gap:20px;padding:36px 32px}
  .stage--cta--wide .btn{margin-left:0}
}
@media (max-width:639px){
  .stages{grid-template-columns:1fr}
  .stage{min-height:0}
  .stage h3{min-height:0}
  .about-quote__body p{font-size:19px}
}

/* ============================================================
   Карта направлений
   ============================================================ */
/* Карта раздела тонула в общем сером фоне — единственное лекарство, о котором
   просил заказчик: блок собран в белую карточку. Декор внутри не добавляем. */
.dir-wrap{background:#fff;border-radius:var(--radius);padding:56px 52px 60px;margin-top:44px}

.dir-quick{display:flex;flex-wrap:wrap;gap:10px}
.dir-quick a{display:inline-block;padding:13px 22px;
  border:1px solid var(--line-3);
  border-radius:var(--radius-chip);font-size:var(--fs-small);color:var(--brand);
  transition:border-color .2s}
.dir-quick a:hover{border-color:var(--brand)}

.dir-group{margin-top:48px;border-top:1px solid var(--line-3);padding-top:32px}
.dir-group__title{font-size:clamp(26px,3vw,40px);margin-bottom:32px}
.dir-group__title a:hover{color:var(--brand-deep)}

.dir-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.dir-col__head{display:block;font-family:var(--font-head);font-weight:600;font-size:20px;
  color:var(--brand);letter-spacing:-0.02em;margin-bottom:16px}
.dir-col__head:hover{color:var(--brand-deep)}
.dir-list{display:grid;gap:11px}
.dir-list a{font-size:var(--fs-small);color:var(--muted);line-height:1.45;transition:color .2s}
.dir-list a:hover{color:var(--brand)}

/* Блок соседних услуг на внутренних страницах */
.siblings{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.siblings a{display:inline-block;padding:12px 20px;border:1px solid var(--line-2);
  font-size:var(--fs-small);color:var(--brand)}
.siblings a:hover{border-color:var(--brand)}

@media (max-width:959px){
  .dir-cols{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media (max-width:639px){
  .dir-cols{grid-template-columns:1fr;gap:28px}
  .dir-group{margin-top:36px}
  .dir-wrap{padding:32px 20px 36px;margin-top:32px}
}

/* ============================================================
   Слайдер на мобильных
   ============================================================ */
/* ------------------------------------------------------------
   Ленты с горизонтальной прокруткой.
   28.08 заказчица: «вот типа таких стрелок надо везде, где нужен
   скролл». До этого лента и стрелки включались только на телефоне,
   а на широком экране блоки стояли сеткой. Теперь лента — базовое
   состояние для команды, кейсов и блога на всех ширинах.
   ------------------------------------------------------------ */
.slider{
  display:grid;grid-auto-flow:column;gap:24px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:18px;scrollbar-width:none;
}
.slider::-webkit-scrollbar{display:none}
.slider>*{scroll-snap-align:start}
.slider__controls{display:flex;align-items:center;gap:16px;margin-top:28px}
.slider__arrow{width:52px;height:52px;border:1px solid var(--line-3);
  background:#fff;cursor:pointer;display:grid;place-items:center}
.slider__arrow svg{width:16px;height:16px;stroke:var(--brand);stroke-width:2;fill:none}
.slider__arrow[disabled]{opacity:.35;cursor:default}
.slider__dots{display:flex;gap:8px;margin-left:auto}
.slider__dot{width:9px;height:9px;background:var(--line-3);border:0;padding:0;cursor:pointer}
.slider__dot.is-active{background:var(--brand);width:28px}

/* ============================================================
   Прайс-лист
   ============================================================ */
.pricing{margin-top:56px;border-top:1px solid var(--line-2)}
.pricing th,.pricing td{text-align:left;padding:26px 24px 26px 0;
  border-bottom:1px solid var(--line-2);font-size:18px}
.pricing thead th{font-family:var(--font-head);font-weight:500;font-size:var(--fs-small);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding-top:20px;padding-bottom:20px}
.pricing td:first-child{font-family:var(--font-head);font-weight:500;color:var(--brand);
  font-size:22px;letter-spacing:-0.02em;width:36%}
.pricing td small{display:block;font-family:var(--font-body);font-weight:400;
  color:var(--muted);margin-top:0}
.pricing td:last-child{white-space:nowrap;color:var(--ink);font-family:var(--font-head);
  font-weight:500;font-size:22px;letter-spacing:-0.02em;text-align:left;padding-right:0;width:1%}
/* 24.09 заказчица (скрин с синей линией): цены — одной вертикалью по левому краю,
   столбец по ширине самой длинной цены остаётся у правого края таблицы */
.pricing th:last-child{padding-right:0;width:1%;white-space:nowrap}
.pricing__note{font-size:var(--fs-small);color:var(--muted-2);margin-top:24px;max-width:760px;line-height:1.55}

/* ============================================================
   Калькулятор
   ============================================================ */
.calc{display:grid;grid-template-columns:1.2fr .8fr;gap:0;margin-top:56px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.calc__form{padding:48px 56px 48px 0}
.calc__row{margin-bottom:32px}
.calc__row>span{display:block;font-family:var(--font-head);font-size:20px;font-weight:500;
  color:var(--brand);letter-spacing:-0.02em;margin-bottom:16px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:inline-block;padding:13px 22px;border:1px solid var(--line-2);
  font-size:var(--fs-small);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.opt input:checked+span{border-color:var(--brand);background:var(--brand);color:#fff}
.opt input:focus-visible+span{outline:2px solid var(--brand);outline-offset:3px}
.calc__result{background:var(--bg-soft);padding:48px;display:flex;flex-direction:column;justify-content:center}
.calc__label{font-size:var(--fs-small);color:var(--muted-2);text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:16px}
.calc__sum{font-family:var(--font-head);font-size:clamp(36px,4.4vw,60px);font-weight:400;
  color:var(--brand);letter-spacing:-0.05em;line-height:1;margin-bottom:18px}
.calc__hint{font-size:var(--fs-small);color:var(--muted);margin-bottom:30px;line-height:1.55}

/* ============================================================
   Преимущества
   ============================================================ */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;
  border-top:1px solid var(--line-2)}
.benefit{padding:40px 40px 44px 0;border-bottom:1px solid var(--line-2)}
.benefit:not(:nth-child(3n+1)){border-left:1px solid var(--line-2);padding-left:40px}
.benefit__icon{font-size:30px;margin-bottom:24px;color:var(--brand)}
.benefit h3{font-size:24px;margin-bottom:12px}
.benefit p{font-size:var(--fs-small);color:var(--muted);line-height:1.55}

/* ============================================================
   Этапы — светлая секция, номера бирюзовым
   ============================================================ */
.steps{margin-top:60px;border-top:1px solid var(--line-2)}
.step{display:grid;grid-template-columns:120px 1fr 1.1fr;gap:48px;padding:36px 0;
  border-bottom:1px solid var(--line-2);align-items:start}
.step__num{font-family:var(--font-head);font-size:32px;color:var(--line-3);
  letter-spacing:-0.04em;line-height:1}
.step h3{font-size:28px}
.step p{font-size:18px;color:var(--muted);line-height:1.5}

/* ============================================================
   Команда
   ============================================================ */
/* Команда. 27.08.2026 заказчица: «добавить хотя бы 8 человек чтоб было
   и скролл сделать». Вместо сетки из трёх колонок — горизонтальная лента:
   карточки фиксированной ширины, прокрутка с подхватом по краю карточки.
   Ширина 300px выбрана так, чтобы на 1140px было видно три с половиной
   карточки: обрезанная четвёртая и есть подсказка, что блок листается. */
/* Механику ленты задаёт общий класс .slider, здесь только ширина карточки. */
.team{grid-auto-columns:300px;gap:32px;margin-top:60px}
.member__photo{aspect-ratio:3/4;border-radius:var(--radius-media);overflow:hidden;
  background:linear-gradient(120deg,#e9eeef 0%,#f7f7f7 60%);
  display:grid;place-items:center;color:var(--muted-2);font-size:var(--fs-small);margin-bottom:24px}
.member__photo img{width:100%;height:100%;object-fit:cover}
.member h3{font-size:26px;margin-bottom:8px}
.member__role{font-size:var(--fs-small);color:var(--muted-2);margin-bottom:16px}
.member p{font-size:var(--fs-small);color:var(--muted);line-height:1.55}
.member__meta{margin-top:18px;display:grid;gap:8px}
.member__meta li{font-size:var(--fs-small);color:var(--muted-2)}

/* ============================================================
   Кейсы
   ============================================================ */
/* 28.08 заказчица про кейсы: «надо как-то визуально разделить, а то слеплено».
   Раньше истории отделялись только волосяными линиями и на сером фоне секции
   читались одним полотном. Теперь каждая — отдельная белая карточка. */
.case{background:#fff;border-radius:var(--radius-media);padding:36px 32px 40px;
  border:1px solid var(--line-2);display:flex;flex-direction:column}
.case__tag{display:inline-block;font-size:var(--fs-small);color:var(--brand);
  border:1px solid var(--line-3);padding:8px 16px;border-radius:var(--radius-chip);margin-bottom:22px}
.case h3{font-size:26px;margin-bottom:22px}
.case dl{display:grid;gap:18px;margin:0}
.case dt{font-family:var(--font-head);font-size:var(--fs-small);font-weight:500;
  color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em}
.case dd{margin:6px 0 0;font-size:18px;color:var(--muted);line-height:1.5}

/* ============================================================
   Связка юрист / адвокат
   ============================================================ */
.branch{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:60px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.branch__item{padding:48px 48px 52px 0}
.branch__item+.branch__item{border-left:1px solid var(--line-2);padding-left:48px}
.branch__item--accent{background:var(--brand);padding-right:48px;color:#fff}
.branch__item--accent h3,.branch__item--accent .branch__list li{color:#fff}
.branch__item h3{font-size:34px;margin-bottom:16px}
.branch__item>p{font-size:18px;color:var(--muted);margin-bottom:26px;line-height:1.5}
.branch__item--accent>p{color:rgba(255,255,255,.78)}
.branch__list{display:grid;gap:12px;margin-bottom:32px}
.branch__list li{font-size:var(--fs-small);color:var(--muted);padding-left:18px;position:relative}
.branch__list li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;background:var(--brand)}
.branch__item--accent .branch__list li::before{background:rgba(255,255,255,.7)}

/* ============================================================
   SEO-статья
   ============================================================ */
/* Правка 26.08: «статью на всю ширину надо» — колонка 860px снята,
   статья идёт по всей ширине контейнера. */
.article{max-width:none}
.article__meta{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;
  padding:26px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  margin-bottom:44px;font-size:var(--fs-small);color:var(--muted-2)}
.article__author{display:flex;align-items:center;gap:14px}
.article__avatar{width:48px;height:48px;border-radius:var(--radius-chip);background:var(--brand);
  flex:0 0 auto;display:grid;place-items:center;color:#fff;font-family:var(--font-head);font-size:var(--fs-small)}
.article__author b,.article__author strong{display:block;font-family:var(--font-head);font-weight:500;color:var(--brand);font-size:var(--fs-small)}
.article h3{font-size:34px;margin:48px 0 18px}
.article p{font-size:20px;color:var(--muted);line-height:1.6}
.article p+p{margin-top:18px}
.article ul{margin:22px 0;display:grid;gap:12px}
.article ul li{font-size:20px;color:var(--muted);padding-left:22px;position:relative;line-height:1.5}
.article ul li::before{content:'';position:absolute;left:0;top:13px;width:7px;height:7px;background:var(--brand)}
.article blockquote{margin:36px 0;padding:32px 36px;background:var(--bg-soft)}
.article blockquote p{font-size:24px;color:var(--brand);font-family:var(--font-head);
  letter-spacing:-0.03em;line-height:1.25}

/* ============================================================
   Отзывы
   ============================================================ */
.rating{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center;
  padding:44px 0;margin-top:56px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.rating__num{font-family:var(--font-head);font-size:clamp(56px,7vw,96px);font-weight:400;
  color:var(--brand);line-height:1;letter-spacing:-0.05em}
.rating__count{font-size:var(--fs-small);color:var(--muted-2);margin-top:14px}
.stars{display:inline-flex;gap:3px;margin-top:12px}
.stars svg{width:20px;height:20px}
.sources{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.source__name{font-family:var(--font-head);font-size:var(--fs-small);font-weight:500;
  color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.source__val{font-size:var(--fs-small);color:var(--muted-2)}
.source b,.source strong{color:var(--brand);font-size:30px;font-family:var(--font-head);letter-spacing:-0.04em}

.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:0}
.review{padding:36px 40px 40px 0;border-bottom:1px solid var(--line-2)}
.review:nth-child(even){border-left:1px solid var(--line-2);padding-left:40px}
.review__head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.review__avatar{width:48px;height:48px;border-radius:var(--radius-chip);background:var(--bg-soft);
  flex:0 0 auto;display:grid;place-items:center;font-family:var(--font-head);color:var(--brand);font-size:18px}
.review__who b,.review__who strong{display:block;font-family:var(--font-head);font-weight:500;font-size:18px;
  color:var(--brand);letter-spacing:-0.02em}
.review__date{font-size:var(--fs-small);color:var(--muted-2)}
.review__text{font-size:18px;color:var(--muted);line-height:1.55}
.review__order{font-size:var(--fs-small);color:var(--muted-2);margin-top:16px}
.review__reply{margin-top:20px;padding:20px 24px;background:var(--bg-soft)}
/* на сером фоне секции подложка ответа сливалась — белая (24.09) */
.section--soft .review__reply{background:var(--bg)}
.review__reply b,.review__reply strong{display:block;font-family:var(--font-head);font-weight:500;font-size:var(--fs-small);
  color:var(--brand);margin-bottom:8px}
.review__reply p{font-size:var(--fs-small);color:var(--muted);line-height:1.55}
.reviews__more{margin-top:44px}

/* Правка 26.08: «отзывы под кнопку надо спрятать Показать ещё».
   Сразу видно шесть карточек (три ряда по два), остальные раскрывает
   кнопка. Класс снимается скриптом, поэтому без JS список открыт целиком
   и отзывы остаются в разметке для поисковика. */
.reviews.is-collapsed .review.is-extra{display:none}
/* У ghost-кнопки правый отступ 32px — с круглым бейджем он великоват. */
.reviews__more .btn{min-width:260px;padding-right:14px}

/* ============================================================
   Карты
   ============================================================ */
/* Таблицы в SEO-статье. 27.08.2026: «таблицы пропали куда-то или не было их,
   но нужны, хотя бы 2». Широкая таблица прокручивается внутри своей обёртки,
   чтобы страница не ехала по горизонтали. */
.table-wrap{overflow-x:auto;margin:36px 0;-webkit-overflow-scrolling:touch}
.article table{width:100%;border-collapse:collapse;min-width:520px;font-size:var(--fs-small)}
.article table caption{text-align:left;font-family:var(--font-head);font-size:20px;
  color:var(--ink);margin-bottom:16px}
.article table th,.article table td{padding:16px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-2);line-height:1.5}
.article table thead th{font-family:var(--font-head);font-weight:600;color:var(--brand);
  border-bottom:2px solid var(--brand);white-space:nowrap}
.article table tbody th{font-weight:600;color:var(--ink);width:34%}
.article table tbody tr:last-child th,.article table tbody tr:last-child td{border-bottom:0}
.article .table-note{font-size:var(--fs-small);color:var(--muted-2);margin:-20px 0 36px}

/* Карта и контакты. 27.08.2026 заказчица прислала как образец logopedy.kz:
   там рядом с картой стоит карточка с адресом, телефоном и режимом работы.
   Слева карточка, справа карта — на сером фоне секции карточка белая,
   иначе она сливается с подложкой, как это было с картой раздела. */
.contacts{display:grid;grid-template-columns:360px 1fr;gap:32px;margin-top:48px;align-items:start}
.contacts__card{background:#fff;border-radius:var(--radius-media);padding:36px 32px}
.contacts__name{font-family:var(--font-head);font-size:22px;margin-bottom:24px}
.contacts__list{display:grid;gap:18px;margin-bottom:28px}
.contacts__list dt{font-size:var(--fs-small);color:var(--muted-2);margin-bottom:4px}
.contacts__list dd{margin:0;font-size:var(--fs-small);color:var(--ink);line-height:1.5}
.contacts__list a{color:var(--brand)}
.contacts__list a:hover{text-decoration:underline}
.contacts .maps{margin-top:0;border-top:0}
.maps{margin-top:56px;border-top:1px solid var(--line-2)}
.maps__tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line-2)}
.maps__tab{flex:1;min-width:150px;background:none;border:0;padding:24px 20px;cursor:pointer;
  font-family:var(--font-head);font-size:var(--fs-small);color:var(--muted);
  border-bottom:2px solid transparent;text-align:left}
.maps__tab[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.maps__tab b,.maps__tab strong{display:block;color:var(--brand);font-size:26px;letter-spacing:-0.04em;margin-top:8px}
/* Подложка под фреймом: пока карта грузится (а в PDF-выгрузке она
   не грузится вовсе) на её месте должна быть плашка, а не пустота. */
.maps__panel{display:none;min-height:420px;border-radius:var(--radius-media);
  background:linear-gradient(120deg,#e9eeef 0%,#f7f7f7 60%)}
.maps__panel.is-active{display:block}
.maps__panel iframe{width:100%;height:420px;border:0;display:block;border-radius:var(--radius-media)}
.maps__stub{height:420px;display:grid;place-items:center;
  background:linear-gradient(120deg,#e9eeef 0%,#f7f7f7 60%);border-radius:var(--radius-media);
  color:var(--muted-2);font-size:var(--fs-small);text-align:center;padding:20px}

/* ============================================================
   Блог
   ============================================================ */
/* Карточки блога собраны как в референсе: медиа сверху, текст в залитой
   карточке, ссылка со стрелкой снизу. */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
/* Блог тоже листается лентой — со стрелками и кнопкой «Все статьи блога». */
.posts.slider{grid-template-columns:none;grid-auto-columns:380px}
.blog__more{display:flex;justify-content:center;margin-top:12px}
.post{display:flex;flex-direction:column;background:var(--bg-soft);
  border-radius:var(--radius);overflow:hidden;transition:background .2s}
.post:hover{background:#f2f4f4}
/* В оригинале снимок лежит внутри карточки с отступом и своим скруглением,
   а не встык к её краям. */
.post__media{aspect-ratio:16/10;overflow:hidden;margin:10px 10px 0;border-radius:10px;
  background:linear-gradient(120deg,#e9eeef 0%,#f7f7f7 60%);
  display:grid;place-items:center;color:var(--muted-2);font-size:var(--fs-small)}
.post__media img{width:100%;height:100%;object-fit:cover}
.post__body{padding:28px 30px 32px;display:flex;flex-direction:column;flex:1}
.post__date{font-size:var(--fs-small);color:var(--muted-2);margin-bottom:14px;display:block}
.post h3{font-size:22px;margin-bottom:14px;letter-spacing:-0.025em}
.post p{font-size:var(--fs-small);color:var(--muted);line-height:1.55}
.post__more{margin-top:auto;padding-top:24px;font-size:var(--fs-small);color:var(--brand);
  display:inline-flex;align-items:center;gap:12px}
.post__more .btn__badge{width:30px;height:30px}
.post__more .btn__badge svg{width:11px;height:11px}

/* ============================================================
   FAQ
   ============================================================ */
/* Двухколоночный FAQ по референсу: слева заголовок с призывом, справа
   аккордеон белыми карточками с круглым бейджем «плюс». */
.faq-split{display:grid;grid-template-columns:.86fr 1.14fr;gap:24px;margin-top:56px;
  align-items:start}
.faq__side{position:sticky;top:calc(var(--header-h) + 20px)}
.faq__side h2{font-size:clamp(24px,2.5vw,34px);margin-bottom:20px;letter-spacing:-0.025em;
  max-width:20ch}
.faq__note{font-size:var(--fs-small);color:var(--muted);max-width:34ch;line-height:1.5;
  margin-bottom:26px}

.faq{display:grid;gap:14px}
.faq details{background:#fff;border-radius:var(--radius)}
.faq summary{
  list-style:none;cursor:pointer;padding:28px 84px 28px 32px;position:relative;
  font-family:var(--font-head);font-size:21px;font-weight:500;color:var(--brand);
  letter-spacing:-0.025em;line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
/* Круглый бейдж справа: плюс, который в раскрытом состоянии становится минусом */
.faq summary::after{
  content:'';position:absolute;right:26px;top:26px;width:38px;height:38px;
  border-radius:50%;background:var(--brand);
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:14px 1.6px,1.6px 14px;background-position:center,center;
  background-repeat:no-repeat;transition:transform .25s;
}
.faq details[open] summary::after{background-size:14px 1.6px,0 0;transform:rotate(180deg)}
.faq details p{padding:0 84px 30px 32px;color:var(--muted);font-size:18px;line-height:1.55}
/* Раскрытый вопрос заливается тёмным — приём оригинала, заказчица отметила
   скрином 20.08 «это нравится как у нее». */
.faq details[open]{background:var(--brand)}
.faq details[open] summary{color:#fff}
.faq details[open] p{color:rgba(255,255,255,.8)}
.faq details[open] summary::after{background-color:rgba(255,255,255,.16)}

@media (max-width:959px){
  .faq-split{grid-template-columns:1fr;gap:32px}
  .faq__side{position:static}
}

/* ============================================================
   Финальный призыв
   ============================================================ */
.cta{background:var(--brand);padding:80px 64px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;color:#fff}
.cta h2{font-size:clamp(30px,3.8vw,54px);margin-bottom:20px;color:#fff}
.cta p{color:rgba(255,255,255,.78);font-size:20px;line-height:1.5}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px}

/* ============================================================
   Бегущая строка. В оригинале такого элемента НЕТ — это была моя выдумка,
   заказчица её и заметила (20.08: «такого элемента в других местах сайта нет»).
   На страницах не выводится; стили оставлены на случай, если решим вернуть.
   ============================================================ */
.marquee{overflow:hidden;padding:44px 0;border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);background:var(--bg)}
.marquee__track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee__track span{
  font-family:var(--font-head);font-weight:500;
  font-size:clamp(34px,5.4vw,76px);letter-spacing:-0.05em;line-height:1;
  color:var(--brand);padding-right:56px;white-space:nowrap;
}
.marquee__track span::after{content:'·';padding-left:56px;color:var(--line-3)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .marquee{overflow-x:auto}
}

/* ============================================================
   Подвал
   ============================================================ */
/* Крупной строки с названием над подвалом больше нет: 26.08 заказчица
   попросила убрать её совсем. Возвращать не надо. */

/* Подвал тёмный, как в референсе */
.footer{background:var(--brand-deep);padding:72px 0 40px;color:#fff}
.footer__socials{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  padding-bottom:56px}
.footer__social{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(255,255,255,.07);border-radius:var(--radius);padding:22px 24px;
  transition:background .2s}
.footer__social:hover{background:rgba(255,255,255,.13)}
.footer__social b,.footer__social strong{display:block;font-family:var(--font-head);font-weight:500;font-size:var(--fs-small);
  color:#fff;letter-spacing:-0.01em;margin-bottom:6px}
.footer__social span{font-size:var(--fs-small);color:rgba(255,255,255,.6)}
.footer__social .btn__badge{background:rgba(255,255,255,.16)}

.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:56px}
.footer li+li{margin-top:12px}
.footer a,.footer p{font-size:var(--fs-small);color:rgba(255,255,255,.72)}
/* Подписи колонок подвала — <p>, а не <h4> (без пропуска уровней заголовков).
   Селектор с .footer, чтобы перебить цвет из «.footer p» выше. */
.footer .footer__title{font-family:var(--font-head);font-size:var(--fs-small);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:500;margin-bottom:22px;line-height:1.16}
address{font-style:normal}
.footer a:hover{color:#fff}
.footer .logo,.footer .logo span:not(.logo__mark){color:#fff}
.footer .logo__mark{border-color:rgba(255,255,255,.5);color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.16);padding-top:28px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer__bottom p{font-size:var(--fs-small);color:rgba(255,255,255,.5);line-height:1.55;max-width:760px}

/* ============================================================
   Плашка cookie
   ============================================================ */
.cookie{
  /* 75: выше нижней панели кнопок (70), но под шторкой меню (80) —
     раньше плашка перекрывала открытое меню */
  position:fixed;left:20px;right:20px;bottom:20px;z-index:75;
  background:#fff;border:1px solid var(--line-2);padding:24px 28px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.4);
  display:none;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  max-width:var(--container);margin:0 auto;
}
.cookie.is-visible{display:flex}
.cookie p{font-size:var(--fs-small);color:var(--muted);max-width:700px;line-height:1.55}
.cookie a{color:var(--brand);text-decoration:underline}
.cookie__actions{display:flex;gap:12px;flex-wrap:wrap}
/* Низкий экран (телефон в альбомной ориентации): плашка занимала больше
   половины высоты. Текст и кнопки в одну строку, отступы поджаты. */
@media (max-height:500px){
  .cookie{left:12px;right:12px;bottom:12px;padding:12px 16px;gap:10px;
    flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .cookie p{margin:0;line-height:1.4;max-width:none}
  .cookie__actions{flex-wrap:nowrap;gap:8px}
  .cookie .btn{width:auto;flex:1;padding:11px 12px}
}

.actionbar{display:none}

/* ============================================================
   Служебное
   ============================================================ */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;padding:12px 20px}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ============================================================
   Страница статьи блога (preview/blog-*.html, template-blog-post.php)

   Шапку и подвал страница берёт те же, что и страницы услуг, поэтому
   здесь только то, чего в разделе услуг нет: узкая колонка чтения,
   обложка, тёмный призыв под текстом и блок ссылок на услуги.
   На страницах услуг статья набрана H3 внутри `.article`; в блоге
   разделы — H2, поэтому размер задаётся и для него.
   ============================================================ */
.container--narrow{max-width:900px}
.post-page{padding:calc(var(--section-y) * .7) 0 0}
.post-page h1{font-size:46px;line-height:1.15;margin:14px 0 0}
.post-page__lead{margin:20px 0 0;font-size:22px;line-height:1.55;color:var(--muted)}
.post-page .article__meta{margin-top:32px}
.article__dates{display:flex;align-items:center;gap:10px;margin-left:auto}
.post-page__cover{margin:0 0 44px;border-radius:var(--radius-card);overflow:hidden;background:var(--bg-soft)}
.post-page__cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.article h2{font-size:34px;line-height:1.2;margin:48px 0 18px;font-family:var(--font-head);
  font-weight:500;color:var(--ink)}
.article h2:first-child{margin-top:0}

/* Тёмный призыв в конце статьи — тот же приём, что у карточки этапов. */
.post-cta{margin:56px 0 0;padding:38px 40px;border-radius:var(--radius-card);
  background:var(--brand-deep);color:#fff;display:flex;flex-wrap:wrap;gap:24px 32px;
  align-items:center;justify-content:space-between}
.post-cta h2{margin:0;font-size:28px;line-height:1.25;font-family:var(--font-head);
  font-weight:500;color:#fff}
.post-cta p{margin:10px 0 0;color:rgba(255,255,255,.78);font-size:var(--fs-small);max-width:52ch}
.post-cta .btn{flex:0 0 auto}

/* Список блога: сетка вместо ленты и фильтр по разделам. */
.posts--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px}
.posts--grid .post{grid-auto-columns:auto}
.posts--grid .post h2{font-size:22px;line-height:1.3;margin:10px 0 0;
  font-family:var(--font-head);font-weight:500;color:var(--ink)}
.posts--grid .post h2+p{margin-top:12px}
.blog-filter{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.blog-filter__chip{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;
  border:1px solid var(--line-2);border-radius:var(--radius-chip);background:var(--bg);
  color:var(--ink);font:inherit;font-size:var(--fs-small);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.blog-filter__chip span{color:var(--muted-2);font-size:16px}
.blog-filter__chip:hover{border-color:var(--brand)}
.blog-filter__chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.blog-filter__chip.is-active span{color:rgba(255,255,255,.7)}

.post-links{margin:56px 0 0}
.post-links h2{font-size:26px;margin:0 0 20px;font-family:var(--font-head);font-weight:500}
.post-links__grid{display:grid;gap:12px}
.post-links__item{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;border:1px solid var(--line-2);border-radius:var(--radius-chip);
  background:var(--bg);color:var(--ink);text-decoration:none;transition:border-color .2s,background .2s}
.post-links__item:hover{border-color:var(--brand);background:var(--bg-soft-2)}
.post-links__item span:first-child{font-family:var(--font-head);font-size:var(--fs-small)}

/* ============================================================
   Адаптив: брейкпоинты референса 1199 / 959 / 639
   ============================================================ */
/* Меню прячем раньше прежнего 1199: ниже 1320 ряд шапки перестаёт помещаться
   целиком, и навигация уходит в бургер — он тут и так есть. */
@media (max-width:1319px){
  /* Меню уезжает в шторку. Центрирование ряда держалось на auto-отступах
     самого меню, поэтому без него правый блок надо прижимать самому. */
  .nav{display:none}
  .header__tools{margin-left:auto}
}
@media (max-width:959px){
  :root{--section-y:80px}
  .hero{padding:44px 0 0}
  .hero__sub{font-size:19px}
  /* На планшете снимок не помещается рядом с заголовком — ставим под него. */
  .hero__top{grid-template-columns:1fr;gap:30px;margin-bottom:34px}
  .hero__top .hero__actions{margin-bottom:0}
  .hero__points{grid-template-columns:repeat(2,1fr);gap:24px}
  .split{grid-template-columns:1fr;gap:44px}
  .figure{max-width:420px}
  .cards,.benefits,.posts,.reviews{grid-template-columns:repeat(2,1fr)}
  .contacts{grid-template-columns:1fr;gap:28px}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px}
  /* Шахматная раскладка показателей рассчитана на 4 колонки. Без сброса
     на 1–2 колонках карточки растягивали неявные колонки и налезали
     друг на друга. */
  .stat:nth-child(n){grid-column:auto}
  .calc{grid-template-columns:1fr}
  .calc__form{padding:36px 0}
  .rating{grid-template-columns:1fr;gap:36px}
  .sources{grid-template-columns:repeat(2,1fr)}
  .branch{grid-template-columns:1fr}
  .branch__item{padding:36px 0 40px}
  .branch__item+.branch__item{border-left:0;border-top:1px solid var(--line-2);padding-left:0}
  .branch__item--accent{padding:36px 28px 40px}
  .cta{grid-template-columns:1fr;padding:56px 36px;gap:32px}
  .step{grid-template-columns:70px 1fr;gap:24px}
  .step p{grid-column:2}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .footer__socials{grid-template-columns:repeat(2,1fr)}
  .group-title{margin-bottom:-26px}
}
@media (max-width:639px){
  :root{--section-y:60px;--gutter:16px}
  /* На телефоне в шапке остаются только логотип и бургер: город, язык, поиск
     и телефон живут в шторке. Раньше они не помещались и уезжали за правый
     край вместе с бургером. */
  .header__phone,.search,.picker{display:none}
  .header__tools{background:none;padding:0}
  .logo span:not(.logo__mark){font-size:16px}
  .hero__video{aspect-ratio:3/2}
  /* 28.09 руководитель заказчицы про тезисы на телефоне: «это не ок» — плюс
     стоял отдельной строкой над текстом, текст узкой колонкой (26ch),
     между пунктами по 40px пустоты. Теперь плюс слева от текста, строка
     на всю ширину, пункты плотным списком. */
  .hero__top{margin-bottom:24px}
  .hero__points{grid-template-columns:1fr;gap:14px;padding-top:0;margin-bottom:8px}
  /* Не flex: с <strong> внутри текст рвался на отдельные колонки */
  .hero__points li{position:relative;padding:0 0 0 28px;max-width:none;font-size:16px}
  .hero__points .plus{position:absolute;left:0;top:5px;margin:0}
  /* 28.09 заказчица: «бесплатно», «без доплат», «без суда», «на казахском
     и русском языках» — жирным, только в этом блоке и только в мобилке */
  .hero__points strong{font-weight:600;color:var(--ink);white-space:nowrap}
  /* 28.09 заказчица про показатели на телефоне: «тоже в мобилке не нравится».
     Четыре цифры по 84px столбиком занимали больше экрана. Теперь строка:
     цифра слева, подпись и пояснение справа (пояснение обязательно, 20.08). */
  .stats{gap:0}
  /* minmax: у части страниц длинные цифры («1965 г.», «¼ дохода») */
  .stat{display:grid;grid-template-columns:minmax(104px,max-content) 1fr;column-gap:16px;
    align-items:start;padding:20px 0}
  .stat:last-child{border-bottom:1px solid var(--line-2)}
  .stat__num{grid-row:1 / span 2;font-size:44px;margin:0;white-space:nowrap}
  .stat__label{grid-column:2;font-size:18px}
  .stat__desc{grid-column:2;margin-top:6px;font-size:16px;line-height:1.45}
  .stats,.benefits,.posts,.reviews,.footer__grid{grid-template-columns:1fr}
  /* На узком экране лента остаётся лентой, карточка чуть уже экрана —
     край следующей видно, и понятно, что блок листается. */
  .team{grid-auto-columns:78vw;gap:20px}
  .footer__socials{grid-template-columns:1fr}
  /* .case сюда не входит: с 28.08 это самостоятельная белая карточка,
     собственные отступы ей нужны и на телефоне. */
  .card,.benefit,.review{padding:32px 0 36px!important;border-left:0!important}
  .case{padding:28px 24px 32px}
  .cta{padding:40px 22px}
  .article h3,.article h2{font-size:26px}
  .article p,.article ul li,.faq details p{font-size:18px}
  /* Страница статьи блога на телефоне */
  .post-page h1{font-size:30px}
  .post-page__lead{font-size:19px}
  .posts--grid{grid-template-columns:1fr;gap:24px}
  .posts--grid .post h2{font-size:20px}
  .article__dates{margin-left:0}
  .post-cta{padding:28px 22px}
  .post-cta h2{font-size:23px}
  .faq summary{font-size:19px;padding:22px 72px 22px 22px}
  .faq summary::after{right:18px;top:20px;width:34px;height:34px}
  .faq details p{padding:0 22px 24px 22px}
  .btn{width:100%}
  /* Три вкладки карты по 150px на 328px не встают, 2ГИС уезжал отдельной строкой */
  /* break-word у body не действует на заголовки внутри flex-карточек
     (.post-cta): там длинное слово раздвигало блок. anywhere — только тут. */
  h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}
  .maps__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .maps__tab{flex:1 0 auto;min-width:0;padding:20px 12px;white-space:nowrap}
  .cookie{left:12px;right:12px;bottom:12px;padding:20px}
  .cookie .btn{width:auto;flex:1}

  .slider{
    grid-auto-columns:86vw;gap:16px;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);border-top:0;
  }
  .slider>*{scroll-snap-align:center;border-bottom:0}

  .actionbar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);border-top:1px solid var(--line-2);
  }
  .actionbar .btn{padding:15px 16px;width:auto}
  body{padding-bottom:82px}
  .cookie{bottom:90px}
  /* Пока висит плашка cookie, нижняя панель прячется: кнопки в ней те же,
     а вдвоём они съедали пол-экрана. После выбора панель возвращается. */
  body:has(.cookie.is-visible) .actionbar{display:none}
  body:has(.cookie.is-visible) .cookie{bottom:12px}
}
/* 640–719px — телефон в альбомной ориентации (iPhone 6/7/8 — 667px).
   Шапка с номером телефона не влезала и давала прокрутку вбок, а столбец
   цены в прайсе (nowrap) выталкивал таблицу. Номер есть в шторке; прайс —
   столбиком, как на телефоне. */
@media (max-width:719px){
  .header__phone{display:none}
  .pricing thead{display:none}
  /* 28.09 руководитель заказчицы: «прайс бы как-то в другом виде сделать
     в мобилке, он полотном прям». Было три строки на позицию (название,
     описание, цена) — ~2000px на 11 услуг. Теперь строка «название — цена»,
     описание под ней мелко: позиция вдвое ниже. */
  .pricing{margin-top:32px}
  .pricing tbody tr{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:6px;
    padding:16px 0;border-bottom:1px solid var(--line-2)}
  .pricing td{display:block;border-bottom:0;padding:0;width:auto!important}
  .pricing td:first-child{grid-column:1;grid-row:1;font-size:18px;line-height:1.3}
  .pricing td:last-child{grid-column:2;grid-row:1;font-size:18px;line-height:1.3;text-align:right}
  .pricing td:nth-child(2){grid-column:1 / -1;grid-row:2;font-size:16px;line-height:1.45}
}
/* Узкий и низкий экран (телефон в альбомной ориентации ≤639px): кнопки под
   текстом в один ряд, иначе колонка текста вытягивалась за верх экрана */
@media (max-width:639px) and (max-height:500px){
  .cookie{flex-direction:column;align-items:stretch;flex-wrap:nowrap;padding:12px 16px;gap:10px}
  .cookie .btn{flex:1;padding:11px 12px}
}

/* ---------- Умный поиск: подсказки (main.js, 21.09.2026) ---------- */
.search.is-open .search__panel{width:min(460px,calc(100vw - 32px))}
.search__panel form,.drawer__form{position:relative}
.has-mic input{padding-right:48px}
.suggest__mic{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;
  background:none;cursor:pointer;display:grid;place-items:center}
.suggest__mic svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.suggest__mic.is-on{background:var(--brand)}
.suggest__mic.is-on svg{stroke:#fff}
.suggest{margin-top:10px;max-height:min(70vh,560px);overflow:auto;font-size:16px;line-height:1.4}
.suggest__label{margin:10px 0 8px;color:var(--muted);font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.suggest__clear{background:none;border:0;padding:0;color:var(--brand);font:inherit;cursor:pointer;text-decoration:underline}
.suggest__chips,.suggest__cats{display:flex;flex-wrap:wrap;gap:8px}
.suggest__chip,.suggest__cat{border:1px solid var(--line-2);background:#fff;border-radius:var(--radius-chip);padding:7px 14px;
  font:inherit;font-size:16px;color:var(--ink);cursor:pointer}
.suggest__chip:hover,.suggest__cat:hover{border-color:var(--brand)}
.suggest__cat span{color:var(--muted)}
.suggest__cat.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.suggest__cat.is-active span{color:rgba(255,255,255,.75)}
.suggest__cats{margin-bottom:8px}
.suggest__fixed,.suggest__none{margin:6px 0 10px;color:var(--muted)}
.suggest__list{list-style:none;margin:0;padding:0}
.suggest__item{display:block;padding:10px 12px;border-radius:var(--radius-media);color:var(--ink);text-decoration:none}
.suggest__item:hover,.suggest__item.is-active{background:var(--bg-soft)}
.suggest__item b,.suggest__item strong{display:block;font-weight:600}
.suggest__cat-label{display:block;color:var(--brand);font-size:16px}
.suggest__desc{display:block;margin-top:2px;color:var(--muted);font-size:16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ТЗ: шапка мобилки — «лого, выбор города, выбор языка, номер телефона
   в виде кнопки с трубкой, бургер» (25.09). До 719px номер — круглая кнопка
   с иконкой: текст номера остаётся в ссылке для скринридеров, но уезжает
   за край кнопки (text-indent), размер шрифта не меняется. Поиск на телефоне
   живёт в шторке — в шапке мобилки его по ТЗ нет. */
@media (max-width:719px){
  .header__phone{display:block;position:relative;flex:none;width:40px;height:40px;padding:0;
    border-radius:50%;background:var(--brand);overflow:hidden;white-space:nowrap;
    text-indent:48px;color:transparent}
  .header__phone::before{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;
    background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media (max-width:639px){
  .picker{display:block}
  .header__tools{gap:2px}
  .picker__btn{padding:8px 3px;gap:5px}
  .picker--city .picker__btn svg{display:none}
  .picker--city .picker__list{left:auto;right:-60px}
  .picker--lang .picker__list{left:auto;right:0;min-width:120px}
  .header__phone{margin:0 4px}
}
/* Узкий телефон: подпись логотипа уступает место элементам шапки, знак PG остаётся. */
@media (max-width:479px){
  .logo span:not(.logo__mark){display:none}
}
/* ТЗ: на мобильном «1 карточка на 1 экран, следующую карточку не должно быть
   видно, она показывается только при скролле» (25.09). Раньше край следующей
   карточки был виден специально — сняли. Ширина карточки = экран минус поля,
   промежуток = два поля: следующая начинается ровно за правым краем экрана. */
.slider__controls--m{display:none}
/* обёртка ленты — элемент сетки .comp: без min-width:0 лента раздувает колонку */
.slider-m{min-width:0}
@media (max-width:639px){
  .slider,.team.slider,.cards.slider,.posts.slider,.slider--m{
    grid-auto-columns:calc(100vw - 2 * var(--gutter));gap:calc(2 * var(--gutter));
  }
  .slider--m{
    display:grid;grid-auto-flow:column;grid-template-columns:none;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    padding-bottom:6px;align-items:stretch;
  }
  .slider--m::-webkit-scrollbar{display:none}
  .slider--m>*{scroll-snap-align:center}
  .slider__controls--m{display:flex}
  /* отзывы на телефоне листаются лентой целиком — «Показать ещё» не нужна */
  .reviews.slider--m.is-collapsed .review.is-extra{display:block}
  .slider-m + .reviews__more,.slider-m ~ .reviews__more{display:none}
  .stages.slider--m{margin-top:40px}
  .stages.slider--m .stage{min-height:0}
}
.slider__count{margin-left:auto;font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums}

/* звёзды у отзыва — справа в шапке карточки (как в WP), 25.09 */
.review__stars{margin-left:auto;align-self:flex-start}
.review__stars .stars{margin-top:4px}
.review__stars .stars svg{width:16px;height:16px}

/* Отзывы: фильтр, сортировка, «Полезно», услуга (ТЗ, раздел 5), 25.09 */
.review[hidden]{display:none!important}
.reviews-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin:8px 0 28px}
.reviews-tools__chips{display:flex;flex-wrap:wrap;gap:8px}
.reviews-tools__chip{font:inherit;font-size:var(--fs-small);padding:9px 16px;border-radius:var(--radius-pill);
  border:1px solid var(--line-3);background:#fff;color:var(--ink);cursor:pointer}
.reviews-tools__chip span{color:var(--muted);margin-left:4px}
.reviews-tools__chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.reviews-tools__chip[aria-pressed="true"] span{color:rgba(255,255,255,.75)}
.reviews-tools__sort{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--muted)}
.reviews-tools__sort select{font:inherit;font-size:var(--fs-small);color:var(--ink);padding:9px 12px;
  border:1px solid var(--line-3);border-radius:10px;background:#fff}
.review__order{font-size:var(--fs-small);color:var(--muted);margin-top:14px}
.review__useful{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 12px 6px 10px;
  font:inherit;font-size:var(--fs-small);color:var(--muted);background:none;border:1px solid var(--line-2);
  border-radius:var(--radius-pill);cursor:pointer}
.review__useful svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.review__useful[aria-pressed="true"]{color:var(--brand);border-color:var(--brand)}
.review__useful[aria-pressed="true"] svg{fill:currentColor}
@media (max-width:639px){ .reviews-tools{margin-bottom:20px} .reviews-tools__sort{width:100%} .reviews-tools__sort select{flex:1} }
/* четыре вкладки карт (с Zoon) на телефоне листаются внутри блока, а не раздвигают сетку */
.contacts>*{min-width:0}