/* ==========================================================================
   Главный лендинг (/) — только его собственные компоненты.
   Токены, навигация, форма и подвал приходят из /site/base.css.
   ========================================================================== */

/* ---------- типографика страницы ---------- */
/* Палитра и гарнитура пришли из /site/base.css: на белый фон и Montserrat
   переведён весь сайт, а не одна главная. Здесь остались только правки под
   собственные классы страницы.
   Мелкие прописные метки набирались моноширинным — у него на таком кегле
   ровная плотная линия. Montserrat в обычном начертании здесь жидковат. */
.path__n,
.dir__k,
.step__n,
.mat__tag,
.level__n,
.promo__k,
.founder__fig,
.founder__who,
.studio__badge { font-weight: 500 }

/* ---------- шапка ---------- */
/* Montserrat заметно шире Manrope, под который подбиралась раскладка шапки
   общего слоя: те же шесть пунктов меню занимают на ~150px больше и между
   820 и 1080px выдавливали логотип в нулевую ширину.
   Логотип теперь не сжимается, а меню уходит под бургер раньше — с 1080px,
   а не с 820. Кнопка «Обсудить проект» остаётся: без пунктов меню место
   под неё есть, а прячет её общий слой на своих 820px. */
.brand{flex:0 0 auto}
@media (max-width:1080px){
  .nav__links{display:none}
  .burger{display:flex}
}

/* ---------- первый экран ---------- */
/* Развилка на две аудитории поверх ролика. Кадр занимает экран целиком,
   подписи стоят по левому и правому краю — там, где студийный фон пустой,
   и текст читается чёрным без затемнения под ним.
   svh, а не vh: в мобильных браузерах адресная строка уезжает при прокрутке,
   и доля от vh давала бы экран выше окна. */
.hero{
  /* Два тона студийного фона на ролике — сняты пипеткой с самого кадра:
     по краям он темнее, в центре подсвечен. Это не цвета палитры сайта,
     а подгонка под конкретный файл: секция повторяет фон видео, поэтому
     края кадра растворяются без заметной рамки. Поменяется ролик —
     эти два значения надо снять заново. */
  --hero-edge:#eae8e6;
  --hero-mid:#f3f2f0;

  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--nav-h) + clamp(18px,4vh,44px)) var(--pad) clamp(44px,6vh,72px);
  background:radial-gradient(ellipse 72% 72% at 50% 44%,var(--hero-mid) 0%,var(--hero-edge) 70%);
  overflow:hidden;isolation:isolate;
}

/* Заголовок страницы убран с экрана, но остаётся в разметке и в потоке
   чтения: без него у страницы не было бы h1. Прячем не через display:none
   и не через visibility — скринридеры пропустили бы его вместе с остальными. */
.hero__h1{
  position:absolute;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;
}

/* Кадр начинается под навигацией и вписывается целиком (contain, а не cover):
   иначе на широких экранах ролик увеличивается, и шапка героини заезжает
   на меню. По бокам остаются поля фона — они совпадают с фоном секции,
   поэтому границы кадра не видно. */
.hero__media{
  position:absolute;inset:calc(var(--nav-h) + 6px) 0 0;z-index:0;
  pointer-events:none;
}
.hero__video{
  width:100%;height:100%;display:block;
  object-fit:contain;object-position:center bottom;
  /* Над шапкой внутри самого кадра есть пустой фон — около 4,5% высоты.
     Отступом его не убрать: кадр прижат к низу, и уменьшение рамки просто
     уменьшает фигуру вместе с этим запасом. Поэтому сдвигаем кадр целиком
     вверх на фиксированную величину — так зазор до меню одинаков на любой
     ширине экрана, а размер фигуры не меняется. */
  translate:0 calc(-1 * clamp(14px,2.4vh,30px));
  /* Края и низ кадра гаснут: фигура выходит из фона, а подпись внизу
     остаётся читаемой поверх тёмного платья. */
  -webkit-mask-image:radial-gradient(ellipse 62% 88% at 50% 50%,#000 44%,transparent 92%),linear-gradient(to bottom,#000 62%,transparent 92%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 62% 88% at 50% 50%,#000 44%,transparent 92%),linear-gradient(to bottom,#000 62%,transparent 92%);
  mask-composite:intersect;
}

/* Нижний отступ поднимает оба входа над разведёнными руками на кадре:
   при выравнивании по центру он смещает содержимое вверх на половину своей
   величины. Самая широкая точка силуэта приходится на 57-58% высоты кадра —
   подписи и кнопки должны остаться выше неё. */
.hero__cols{
  position:relative;z-index:2;flex:1;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;max-width:1560px;margin:0 auto;
  padding-bottom:clamp(64px,13vh,150px);
}
.hero__col{max-width:min(34vw,460px)}
/* Логические свойства, а не right/left: на арабской версии документ
   переворачивается, второй вход уезжает к левому краю — и текст в нём должен
   прижиматься к тому же краю, а не к середине, где идёт кадр. */
.hero__col--biz{text-align:end}
.hero__col--biz .hero__ctext{margin-inline-start:auto}

/* Номер входа. В монохроме цветом его не выделить, поэтому работает то же,
   что и у остальных меток сайта: мелкий кегль, разрядка, вторичный тон. */
.hero__num{
  display:block;font-family:var(--mono);
  font-size:.76rem;letter-spacing:.18em;color:var(--ink-mute);
  margin-bottom:10px;
}
/* Это подписи входов, а не заголовки разделов: h1 у страницы один и лежит
   выше, поэтому здесь параграф с заголовочным кеглем, а не тег заголовка. */
.hero__ctitle{
  margin:0 0 12px;
  font-size:clamp(1.75rem,2.9vw,2.8rem);
  font-weight:600;line-height:1.06;letter-spacing:-.03em;
  color:var(--ink);
}
.hero__ctext{
  margin:0 0 24px;max-width:32ch;
  font-size:clamp(.92rem,1vw,1rem);line-height:1.5;
  color:var(--ink-soft);text-wrap:balance;
}
/* Стрелка ведёт себя как в остальных ссылках-действиях сайта */
.hero__btn::after{content:"↗";font-size:1.02em;line-height:1;transition:transform .25s ease}
.hero__btn:hover::after{transform:translate(2px,-2px)}

/* Подпись и стрелка вниз: граница отделяет первый экран от следующей секции
   и заодно задаёт низ композиции, к которому прижат кадр. */
.hero__foot{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%;max-width:1560px;padding-top:20px;
  border-top:1px solid var(--line);
}
.hero__made{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-mute);
}
.hero__chev{
  width:22px;height:13px;fill:none;stroke:var(--ink);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.55;
  transition:opacity .25s ease;
}
.hero__foot:hover .hero__chev{opacity:1}

/* На узком экране ролик становится отдельной полосой сверху, а входы
   выстраиваются в столбец: иначе подписи легли бы поверх фигуры. */
@media (max-width:920px){
  .hero{padding-bottom:32px}
  .hero__media{position:relative;inset:auto;order:2;width:100%;height:min(40vh,320px);margin:0 0 4px}
  .hero__video{
    object-fit:cover;object-position:center 22%;translate:none;
    -webkit-mask-image:radial-gradient(ellipse 78% 92% at 50% 50%,#000 52%,transparent 94%);
    -webkit-mask-composite:source-over;
    mask-image:radial-gradient(ellipse 78% 92% at 50% 50%,#000 52%,transparent 94%);
    mask-composite:add;
  }
  .hero__cols{order:3;flex:none;flex-direction:column;align-items:flex-start;gap:30px;margin:6px 0 28px;padding-bottom:0}
  .hero__col,.hero__col--biz{max-width:none;text-align:start}
  .hero__col--biz .hero__ctext{margin-inline-start:0}
  .hero__foot{order:4}
}
@media (max-width:640px){
  .hero__btn{width:100%}
  .hero__media{height:min(34vh,260px)}
}

/* ---------- бренды ---------- */

/* Два ряда едут навстречу: верхний влево, нижний вправо. Встречное движение,
   а не одно общее, — чтобы блок читался как лента, а не как съехавшая сетка.
   Размеры собраны в двух переменных: рост знака и просвет между знаками —
   единственное, что нужно трогать, если лента окажется плотной или редкой.
   direction:ltr не опечатка: на арабской версии документ переворачивается,
   а раскладка ленты завязана на знак сдвига. Направление здесь ничего не
   значит — это фон, и он одинаков на всех языках. */
.brands{
  --brands-h:clamp(24px,2.4vw,38px);
  --brands-gap:clamp(40px,5vw,86px);
  direction:ltr;
  display:grid;gap:clamp(20px,2.6vw,38px);
  margin-top:clamp(18px,2.4vw,28px);
}
.brands__row{
  overflow:hidden;
  /* У краёв знаки растворяются, а не обрезаются посередине буквы */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.brands__track{display:flex;width:max-content}
/* Копии набора, длину сдвига (--brands-shift) и время цикла (--brands-dur)
   считает /home/brands.js: они зависят от ширины окна и от того, какие
   логотипы приехали. До этого анимации нет — на одном наборе она вернула бы
   ленту рывком в начало. */
.brands.is-live .brands__track{
  animation:brands-run var(--brands-dur,26s) linear infinite;
  will-change:transform;
}
/* Селектор длиннее соседнего не для красоты: в правиле выше direction
   приходит частью сокращённой записи animation и сбрасывается в normal,
   поэтому обратный ход должен весить больше, а не просто идти следом. */
.brands.is-live .brands__row--reverse .brands__track{animation-direction:reverse}
.brands__row:hover .brands__track{animation-play-state:paused}
@keyframes brands-run{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--brands-shift,0px) * -1),0,0)}
}
/* Правый отступ набора равен просвету: без него на стыке двух копий
   логотипы сходились бы вплотную */
.brands__set{
  list-style:none;margin:0;padding:0 var(--brands-gap) 0 0;
  display:flex;align-items:center;gap:var(--brands-gap);
}
.brands__item{flex:none;display:flex;align-items:center;justify-content:center;height:var(--brands-h)}
/* Общий у знаков только рост: выравнивать разноширокие логотипы по ширине
   нельзя — квадратные значки распухнут, а длинные надписи сожмутся.
   Ограничение по ширине держит самые растянутые от заезда на пол-экрана. */
.brands__logo{
  height:100%;width:auto;max-width:clamp(130px,17vw,230px);
  object-fit:contain;
}

/* ---------- интеллектуальная собственность ---------- */
/*
  Секция белая и без единой рамки. Ролик тоже на белом фоне, поэтому кадр
  не отделяется от страницы: барс просто стоит на ней, а текст и числа лежат
  на том же белом поле слева. Ни подложки, ни обводки, ни линеек в сетке
  показателей — любая из них вернула бы границу там, где её быть не должно.
*/
.ip-sec{position:relative;overflow:hidden;background:var(--bg)}
.ip__inner{position:relative;z-index:1}
/*
  Ширина текстовой колонки — то единственное, что держит текст в стороне
  от зверя. Барс занимает правые семьдесят процентов своего кадра, кадр
  прижат вправо, и колонке остаётся сорок шесть процентов ширины страницы.
*/
.ip__intro{max-width:min(46%,600px)}
/* Заголовок не должен ломаться на промежуточных ширинах: перенос строки
   задан в разметке, а балансировка не даёт словам расползтись по-своему */
.ip__title{text-wrap:balance}

/* Следы барса. Единственная фактура на белом: нижний левый угол, под
   числами, с выцветанием к середине. Непрозрачность ниже прежней — на белом
   тот же тон читается заметнее, чем был на песочной подложке */
.ip__tracks{
  position:absolute;left:0;bottom:0;z-index:0;
  width:min(52%,540px);height:min(40%,240px);
  color:var(--ink);opacity:.035;pointer-events:none;
}

/*
  Ролик — фоновый слой секции у правого края. Высоту задаёт текст, а не кадр:
  зверь подстраивается под колонку, а не наоборот. `contain` вместо `cover`
  обязателен — барс по высоте заполняет кадр почти целиком, и любая обрезка
  режет его, а не белое поле; поля, которые `contain` оставляет сверху
  и снизу, на белом не видны.

  Ширина кадра — то, чем регулируется рост зверя. 62% ширины страницы
  с потолком в 940px: крупнее он начинает спорить с заголовком, мельче —
  перестаёт держать правую половину.
*/
.ip__stage{
  position:absolute;
  /* Отрицательный слой, а не нулевой: позиционированный потомок с z-index:0
     рисуется ПОВЕРХ обычного потока, и ролик закрыл бы собой заголовок.
     Отрицательный уходит под текст колонки, но остаётся над белым фоном
     секции — она в другом контексте наложения */
  z-index:-1;
  top:50%;right:var(--pad);transform:translateY(-50%);
  width:min(62%,940px);aspect-ratio:16/9;
  pointer-events:none;
}
/* Появление кадра держит атрибут poster самого <video>, а не класс из
   скрипта. Прежний приём — opacity:0 и проявление по loadeddata — давал
   тупик: невидимый ролик Chrome не считает нужным загружать, загрузка
   не начинается, loadeddata не приходит, и кадр остаётся пустым навсегда */
/*
  Умножение — то, чем кадр перестаёт быть прямоугольником.

  Фон ролика не идеально белый: 246 сверху, 254 снизу. На белой странице
  этот перепад читается как рамка вокруг видео, а подобрать под него фон
  секции нельзя — он градиентный. При multiply белое умножается на белое
  и исчезает бесследно, а зверь остаётся: границы кадра не видно вовсе,
  и барс просто стоит на странице.

  Работает только на белом фоне секции — на песочной подложке он бы
  подкрасил зверя. Поэтому .ip-sec и задаёт --bg явно.
*/
.ip__video{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
  /*
    Осветление до умножения. Фон ролика не белый: 247 сверху, 254 снизу —
    градиент, оставшийся от съёмки. При multiply он даёт светло-серый
    прямоугольник на белой странице, и границу кадра снова видно.
    Коэффициент взят по самой тёмной точке фона: 255/247 = 1,032, с запасом
    на шум сжатия — 1,06. Всё, что было светлее 241, схлопывается в чистый
    белый и исчезает под multiply; барсу это стоит верхних полутонов белой
    шерсти, которых на белом фоне всё равно не видно.
  */
  filter:brightness(1.06);
  /*
    Срез кромки в два пикселя. По нижнему краю файла идёт полоса шириной
    ровно в один пиксель яркостью 77 — артефакт кодирования, а не тень
    от зверя: соседний ряд уже 242, следующий 253. На белой странице под
    multiply эта полоса читается как тонкая серая черта во всю ширину кадра.
    Режем по два пикселя со всех сторон: лапы и кончик хвоста, которые
    в отдельных кадрах доходят до края, теряют меньше половины процента
    своей длины.
  */
  clip-path:inset(2px);
  mix-blend-mode:multiply;
}

/*
  Показатели без рамок и линеек: числа держит воздух между ними, а не сетка.
  Пары, а не строка из четырёх: в одну линию подписи вроде
  «ЗАРЕГИСТРИРОВАННЫХ РАЗРАБОТОК» ушли бы под самого барса.
*/
.ipstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,34px) clamp(24px,3vw,48px);margin:clamp(30px,4vh,46px) 0 0;max-width:min(46%,600px)}
.ipstat{display:flex;flex-direction:column}
/* Значение занимает ровно строку, подпись идёт следом: иначе «№ 20912»
   и «17» разной длины развели бы подписи по разным уровням.
   «Кыргызстан» не рвётся посреди слова ни на какой ширине: разрыв названия
   страны читается как опечатка */
.ipstat dd{order:1;margin:0;font-size:clamp(24px,2.4vw,34px);font-weight:500;line-height:1.05;letter-spacing:-.02em;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.ipstat dt{order:2;margin-top:9px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);overflow-wrap:anywhere}

.ip__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(28px,3.6vh,40px)}
/* Кнопка светлеет при наведении — правило общего слоя; здесь только
   область нажатия и время перехода */
.ip__open{padding:16px 32px;transition:background .24s ease,color .24s ease,transform .24s ease}
/* Вторая ссылка намеренно не кнопка. Подчёркивание не меняет цвет,
   а прорастает слева направо: у ссылки без рамки это единственный способ
   показать наведение движением, а не тоном */
.ip__more{position:relative;display:inline-block;font-size:.9rem;font-weight:600;padding-bottom:3px}
.ip__more::before,.ip__more::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px}
.ip__more::before{background:var(--line)}
.ip__more::after{background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .26s ease}
.ip__more:hover::after,.ip__more:focus-visible::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  /* Автозапуск снимает скрипт в разметке — на кадре остаётся постер */
  .ip__more::after{transition:none}
}
/* ---------- продуктовый подлендинг ---------- */
.promo{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(26px,4vw,60px);align-items:center;padding:clamp(28px,3.4vw,48px);background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r)}
.promo__fig{aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:var(--bg-sand)}
.promo__fig img{width:100%;height:100%;object-fit:cover}
.promo__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
/* ---------- основатель ---------- */
.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,64px);align-items:center}
.founder__fig{aspect-ratio:4/5;border-radius:3px;background:linear-gradient(160deg,#1a1a1a,#0e0e0e);display:grid;place-items:center;text-align:center;padding:26px;color:rgba(255,255,255,.5);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;line-height:2}
.founder__q{font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2.25rem);line-height:1.28;margin:0 0 22px}
.founder__who{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:26px}
/* ---------- адаптив страницы ---------- */
@media (max-width:1080px){.promo,.founder{grid-template-columns:1fr}
  .founder__fig{aspect-ratio:16/9}
  /*
    Ролик возвращается в поток: держать его фоном справа можно, пока рядом
    помещается колонка текста. Ниже он встаёт между описанием и числами —
    порядком в разметке, без перестановок: заголовок, описание, ролик,
    числа, кнопки.
  */
  .ip__stage{position:static;transform:none;width:100%;max-width:640px;margin:clamp(26px,4vh,40px) auto 0;aspect-ratio:4/3}
  /*
    В одну колонку кадр становится выше и обрезается по бокам, а не вписывается
    целиком: в пропорции 16:9 зверь занимал бы правые две трети, а левая треть
    оставалась пустой — на узком экране это половина полосы прокрутки впустую.
    4:3 срезает как раз пустое поле слева: видимое окно начинается с 25%
    ширины файла, а барс держится 31–99%, и остаётся ещё запас.
  */
  .ip__video{object-fit:cover;object-position:100% center}
  .ip__intro,.ipstats{max-width:none}
  .ip__tracks{width:min(78%,420px);height:min(34%,200px);opacity:.03}
}
@media (max-width:680px){
  /* Кнопка во всю ширину, вторичная ссылка под ней: в одну строку они
     читаются как равные по важности, а реестр здесь — основное действие */
  .ip__cta{flex-direction:column;align-items:stretch;gap:16px}
  .ip__open{width:100%}
  .ip__more{align-self:flex-start}
  /* На узком экране доля высоты дала бы рамку выше собственной ширины.
     Квадрат — компромисс: и заголовку внутри хватает места, и от кадра
     16:9 по краям отрезается не слишком много */
  .hero__media{height:auto;aspect-ratio:1/1}
  /* Рамка узкая, заголовок занимает почти всю её ширину — клин растянут,
     иначе последние слова строк ложатся на открытую часть кадра.
     Правая сторона всё равно остаётся светлее левой. */
  .hero__veil{
    background:linear-gradient(90deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.78) 45%,
      rgba(0,0,0,.52) 78%,
      rgba(0,0,0,.34) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .path:hover{transform:none}
  /* Ленты стоят: клонов скрипт не делает, поэтому набор один и его хватает
     ровно на свою ширину. Ряд листается пальцем или колесом */
  .brands__row{
    overflow-x:auto;
    -webkit-mask-image:none;mask-image:none;
  }
}

/* ---------- RTL ---------- */
[dir='rtl'] .studio__row{flex-direction:row-reverse}
/* Затемнение держится той стороны, где стоит заголовок */
[dir='rtl'] .hero__veil{
  background:linear-gradient(270deg,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.80) 26%,
    rgba(0,0,0,.58) 44%,
    rgba(0,0,0,.22) 62%,
    transparent 80%);
}
/* Тот же растянутый клин для узкого экрана. Блок стоит после правила
   с [dir='rtl'] намеренно: у того селектора специфичность выше, и внутри
   более раннего @media он бы всё равно выиграл. */
@media (max-width:680px){
  [dir='rtl'] .hero__veil{
    background:linear-gradient(270deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.78) 45%,
      rgba(0,0,0,.52) 78%,
      rgba(0,0,0,.34) 100%);
  }
}


/* Лента знаков и кейсы читаются как одна мысль: чьи логотипы — и что для них
   сделано. Между ними складывались две отбивки сразу: низ секции брендов
   (clamp(44px,6vh,76px)) и верх секции кейсов (--sec, до 160px), то есть
   больше двухсот пикселей пустоты на широком экране. Режем обе, но не в ноль:
   лента должна оставаться отдельным блоком, а не подписью под кейсами. */
#brands{padding-bottom:clamp(22px,3vh,38px)}
#cases{padding-top:clamp(26px,3.4vh,44px)}

/* ---------- кейсы: компактный каталог работ ---------- */
/* Заголовок раздела убран с экрана, но остаётся в разметке и в потоке
   чтения: без него раздел о работах не имел бы собственного заголовка.
   Тот же приём, что у .hero__h1 выше, и по той же причине — не display
   и не visibility, иначе скринридеры пропустили бы его вместе с остальным. */
.hcases__h2{
  position:absolute;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;
}
/* Плитка разной высоты, как в подборке образов: обложки кейсов сняты в
   разных пропорциях, и приведение их к общему кадру — это либо поле вокруг
   вертикального снимка, либо срезанное изделие у горизонтального. Колонки
   (`columns`) вместо сетки выбраны сознательно: высоту каждой карточки
   задаёт её собственная обложка, и раскладке не нужно ни одной строки JS —
   значит, она не разъезжается при смене фильтра и переживает выключенный
   скрипт вместе с запасными карточками в разметке.

   Цена решения — порядок чтения: колонки заполняются сверху вниз, и вторая
   карточка стоит под первой, а не справа от неё. Для подборки работ это
   безразлично: у неё нет последовательности, которую можно нарушить. */
/* Шапка блока: надзаголовок и подводка друг под другом. Общий .secthead
   ограничен 760 px — здесь этого достаточно, потому что заголовка на
   экране нет и держать под него отдельную колонку не для чего. */
.hcases__head{margin-bottom:clamp(26px,3vw,40px)}

.hcases__grid{
  columns:4;
  column-gap:clamp(12px,1.4vw,20px);
}
.hcase{
  display:block;position:relative;
  /* break-inside работает не везде одинаково: WebKit до сих пор надёжнее
     реагирует на -webkit-column-break-inside, и без него карточка на
     границе колонки разрывается пополам вместе с обложкой */
  -webkit-column-break-inside:avoid;break-inside:avoid;
  margin-bottom:clamp(12px,1.4vw,20px);
  border-radius:var(--r);overflow:hidden;
  background:var(--dark);
  color:inherit;text-decoration:none;
}
.hcase__img{
  display:block;width:100%;
  /* Пропорция приезжает с карточки: --ratio считает скрипт из размеров
     обложки и зажимает в разумные границы. Без неё браузер узнаёт высоту
     кадра только после загрузки снимка — и сетка прыгает на каждой. */
  aspect-ratio:1 / var(--ratio,1.25);
  object-fit:cover;
  transition:transform 1s ease;
}
.hcase:hover .hcase__img{transform:scale(1.04)}
/* Обложки нет — фактурная заглушка с названием, а не пустой прямоугольник */
.hcase__stub{
  display:flex;align-items:flex-end;padding:14px;
  aspect-ratio:1 / var(--ratio,1.25);
  background:linear-gradient(150deg,var(--dark-2),var(--dark));
  color:rgba(255,255,255,.55);font-size:.8rem;line-height:1.4;
}

/* Слой с подписями. На мыши он проявляется по наведению, на касании стоит
   всегда: hover там либо не наступает вовсе, либо залипает после тапа, и
   карточка осталась бы без единой подписи. */
.hcase__over{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:5px;padding:clamp(12px,1vw,16px);
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.12) 100%);
  color:var(--ink-d);
  opacity:0;transition:opacity .3s ease;
}
.hcase:hover .hcase__over,
.hcase:focus-visible .hcase__over{opacity:1}
.hcase__k{
  font-family:var(--mono);font-size:.58rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hcase__t{
  font-family:var(--serif);font-size:.9rem;font-weight:500;line-height:1.28;
  /* Название кейса бывает в две строки и в шесть. Трёх достаточно,
     чтобы понять, о чём работа, и мало, чтобы подпись съела обложку */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hcase__occ{font-size:.76rem;line-height:1.42;color:rgba(255,255,255,.7)}
.hcase__go{
  margin-top:4px;font-size:.76rem;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
}
.hcase__go::after{content:'→';transition:transform .25s ease}
.hcase:hover .hcase__go::after{transform:translateX(4px)}
[dir='rtl'] .hcase__go::after{content:'←'}
[dir='rtl'] .hcase:hover .hcase__go::after{transform:translateX(-4px)}

/* Сводка над плиткой. Разметка — <dl>: это пары «подпись — число»,
   а не абзацы, и программа чтения с экрана читает их парами. */
.hcases__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,30px);
  margin:0 0 clamp(22px,2.6vw,32px);
  padding-bottom:clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--line);
}
.hcases__stat{display:flex;flex-direction:column}
/* Число сверху, подпись под ним. В разметке порядок обратный (dt перед dd),
   потому что так пара читается вслух; на экране их меняет местами order. */
.hcases__stat dd{
  order:1;margin:0;
  font-size:clamp(22px,2.2vw,32px);font-weight:500;line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  /* Числа обновляются из API. Перенос внутри «6 575» разорвал бы их
     по неразрывному пробелу — запрещаем перенос целиком */
  white-space:nowrap;
}
.hcases__stat dt{
  order:2;margin-top:8px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);
  overflow-wrap:anywhere;
}

.hcases__more{margin:clamp(22px,2.6vw,34px) 0 0;text-align:center}

@media (max-width:1180px){
  .hcases__grid{columns:3}
}
@media (max-width:820px){
  .hcases__grid{columns:2}
}
@media (max-width:767px){
  /* Две колонки, а не одна: подборка работ на телефоне читается пролистыванием,
     и одна карточка во всю ширину превращает шесть кейсов в шесть экранов */
  .hcases__grid{columns:2;column-gap:10px}
  .hcase{margin-bottom:10px}
  .hcases__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
  /* Подписи стоят всегда, а не по наведению: на телефоне наведения нет,
     и карточка осталась бы шестью снимками без единого слова. Проверять
     это через (hover:none) недостаточно — запрос не срабатывает ни в
     эмуляции устройства, ни на ноутбуке с сенсорным экраном. */
  .hcase__over{opacity:1}
  /* Кнопка перехода не нужна: переход делает сам тап по карточке, а
     на кадре шириной в полэкрана каждая лишняя строка съедает снимок */
  .hcase__go{display:none}
  .hcase__t{font-size:.82rem;-webkit-line-clamp:2}
  .hcase__occ{font-size:.74rem}
  .hcase__k{font-size:.58rem}
}
/* Касание вместо мыши: подписи стоят всегда, кнопка перехода не нужна —
   переход делает сам тап по карточке */
@media (hover:none){
  .hcase__over{opacity:1}
  .hcase__go{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hcase:hover .hcase__img{transform:none}
  .hcase__over{transition:none}
}

/* Ячейка показателей уже двухсот пикселей перестаёт вмещать подпись
   в две строки — ниже этой ширины они идут одна под другой */
@media (max-width:420px){
  .ipstats{grid-template-columns:1fr}
  .ip__tracks{display:none}
}

/* ---------- отзывы ---------- */
/* Заголовок секции убран с экрана, но остаётся в разметке и в потоке
   чтения: без него у секции не было бы собственного заголовка. Тот же
   приём, что у .hero__h1 и .hcases__h2 выше, и по той же причине —
   не display и не visibility, иначе скринридеры пропустили бы его. */
.reviews__h2{
  position:absolute;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;
}
/* От шапки на экране остался один надзаголовок — общий отступ .secthead
   под заголовок и подводку здесь избыточен */
.reviews__head{margin-bottom:clamp(20px,2.4vw,32px)}
/* Сетка в две колонки: в ячейке кружок с инициалами, имя, источник и текст.

   Пунктирная рамка вместо сплошной — единственное место на сайте, где она
   уместна: ячейка отзыва не карточка товара и не кнопка, её граница только
   отделяет одну цитату от другой. Сплошная линия читалась бы как рамка
   объекта, который можно нажать.

   Высоту строки задаёт самый длинный отзыв в ней — это сетка, а не колонки:
   в формате «портрет слева, текст под ним» разъехавшийся нижний край
   ячеек читается как незавершённая вёрстка. Восемь отзывов в четыре колонки
   складываются в два ровных ряда без единой пустой ячейки. Полный список
   отзывов живёт в карточках компании — ссылки под сеткой. */
.reviews__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
}
.review{margin:0}
.review__card{
  height:100%;margin:0;
  display:flex;flex-direction:column;gap:clamp(14px,1.4vw,18px);
  padding:clamp(20px,2vw,28px);
  border:1px dashed var(--line);
  border-radius:var(--r);
}
.review__head{display:flex;align-items:center;gap:14px}
/* Вместо фотографии — кружок с инициалами на решётке кереге. Портреты
   авторов сюда не встают по трём причинам сразу: согласия на публикацию
   изображения нет (R-5), картинка с чужого сервера — это внешний
   поставщик, которого нет в реестре сайта, и ссылка на аватар в Google
   живёт ровно до того дня, когда человек сменит фотографию.
   Решётка нарисована стилями, как и фактуры материалов выше: два
   встречных штриха под 45° — тот же мотив, что в знаке компании */
.review__ava{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  color:var(--ink);
  font-size:.86rem;font-weight:600;letter-spacing:.04em;
  background-color:var(--bg-card);
  background-image:
    repeating-linear-gradient(45deg,rgba(17,17,17,.11) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(-45deg,rgba(17,17,17,.11) 0 1px,transparent 1px 8px);
  border:1px solid var(--line);
}
.review__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.review__name{
  font-family:var(--serif);font-size:1.06rem;font-weight:500;
  line-height:1.2;letter-spacing:-.01em;
  /* Перенос разрешён: в четырёх колонках карточка вдвое уже, и обрезались
     уже сами имена. Имя автора — то, чем отзыв подтверждается. */
  overflow-wrap:anywhere;
}
.review__src{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);
}
/* Звёзды монохромные: в этой палитре цвет несёт только состояния формы,
   а выделение делают вес и трекинг (DESIGN_SYSTEM) */
.review__stars{margin-top:2px;font-size:.7rem;letter-spacing:.12em;line-height:1}
.review__text{
  margin:0;font-size:.95rem;line-height:1.6;
  color:var(--ink-soft);
}
/* Три ссылки на карточки компании в ряд, на узком экране — в столбик */
.reviews__more{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:clamp(22px,2.6vw,34px) 0 0;
}

/* Промежуточной ступени в три колонки нет намеренно: восемь карточек в три
   дают 3+3+2, и последний ряд стоит с двумя дырами. Четыре и две делят
   восьмёрку нацело. */
@media (max-width:1080px){
  .reviews__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  /* На телефоне сетка не годится ни в одну колонку, ни в две: в двух
     строка отзыва становится короче собственной подписи под именем,
     в одну девять карточек дают две с половиной тысячи пикселей
     прокрутки. Вместо сетки лента с прилипанием — та же карточка,
     другой жест. */
  .reviews__list{
    display:flex;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* Лента выходит за поля колонки: обрезанная справа карточка — самый
       понятный признак, что отзывы продолжаются */
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 8px;
    scrollbar-width:none;
  }
  .reviews__list::-webkit-scrollbar{display:none}
  .review{flex:0 0 82%;scroll-snap-align:center}
  /* Длинный отзыв растянул бы всю ленту: рядом видно только две карточки,
     и разнобой по нижнему краю там читается как поломка */
  .review__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
}
@media (max-width:560px){
  .review__ava{width:44px;height:44px;font-size:.76rem}
  .review__name{font-size:.98rem}
  .review__text{font-size:.9rem}
}

/* ---------- RTL: отзывы ---------- */
/* Раскладку ячейки разворачивает сам dir — flex в rtl-контейнере ставит
   аватар справа. Отдельных правил здесь не осталось: срезанного угла,
   который приходилось зеркалить, в этом макете нет */

/* ---------- полноэкранный кадр каталога ---------- */
/* Блок открывает рубрикатор и занимает окно целиком. svh, а не vh: в мобильных
   браузерах адресная строка уезжает при прокрутке, и доля от vh давала бы кадр
   выше окна. Нижняя граница на случай альбомной ориентации телефона, где
   100svh — это 320 px и текст в кадр не помещается. */
.vband {
  position: relative;
  overflow: hidden;
  height: 100svh;
  min-height: 560px;
  display: grid;
  place-items: center;
  /* Подложка на время, пока постер и ролик не пришли */
  background: var(--dark);
}
.vband__video,
.vband__veil {
  position: absolute;
  inset: 0;
}
.vband__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/*
  Знак генерации в кадре остаётся видимым — решение заказчика от 9 сентября
  2026: резкость важнее.

  Ролики сгенерированы, и генератор ставит свою метку — квадрат 48x48 px
  в 96 px от правого и нижнего края кадра 1280x720. Убрать её можно было
  только срезав 11% ширины и вернув кадр на весь экран приближением на 16%;
  на исходнике 720p, который и без того растянут на широком мониторе, это
  давало заметную мягкость. Обрезка снята, кадр идёт как есть.

  Раскрытие происхождения на метке не держится: об этом говорит подпись
  «Визуализация» в углу каждой полосы.

  Если понадобится вернуть — правило было: object-position: left center
  от пропорции 11/8 и transform: scale(1.16) от 63/40. Но правильнее взять
  ролик без метки от самого генератора, и лучше сразу 1080p.
*/
/* Кадр светлый и пёстрый — белый текст на нём без затемнения не читается.
   Затемнение неравномерное: пятно под текстом плотное, к краям сходит почти
   на нет. Ровная заливка той же плотности пригасила бы всю съёмку, а нужен
   контраст только там, где буквы. */
.vband__veil {
  background:
    radial-gradient(118% 78% at 50% 50%, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.44) 58%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.42) 100%);
}
.vband__copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 var(--pad);
  text-align: center;
  color: #fff;
}
/* Прописные заданы стилем, а не набором: в разметке фраза лежит обычным
   регистром, иначе её пришлось бы дублировать капслоком на девяти языках,
   а в арабском и китайском заглавных букв нет вовсе. */
.vband__t {
  margin: 0;
  font-size: clamp(1.7rem, 4.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Две фразы — две строки, независимо от ширины окна */
.vband__t span {
  display: block;
}
.vband__lead {
  margin: clamp(16px, 2.4vw, 26px) auto 0;
  max-width: 60ch;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.9);
}
.vband__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(24px, 3.4vw, 38px);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  transition:
    border-color 0.25s ease,
    gap 0.25s ease;
}
.vband__cta:hover {
  border-bottom-color: #fff;
  gap: 14px;
}
.vband__chev,
.vband__arrow {
  width: 15px;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform 0.25s ease;
}
/* Шеврон зовёт вниз по странице, стрелка уводит на другую */
.vband__cta:hover .vband__chev {
  transform: translateY(3px);
}
.vband__cta:hover .vband__arrow {
  transform: translateX(3px);
}
/* Та же честная подпись, что у карточек изделий: на кадре не съёмка */
.vband__note {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: var(--pad);
  padding: 5px 11px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
@media (prefers-reduced-motion: reduce) {
  .vband__cta:hover {
    gap: 10px;
  }
  .vband__cta:hover .vband__chev,
  .vband__cta:hover .vband__arrow {
    transform: none;
  }
}
/* Стрелка указывает в сторону чтения, а не всегда вправо */
[dir='rtl'] .vband__arrow {
  transform: scaleX(-1);
}
[dir='rtl'] .vband__cta:hover .vband__arrow {
  transform: scaleX(-1) translateX(3px);
}

/* Подпись держится того края, с которого начинается чтение */
[dir='rtl'] .vband__note {
  left: auto;
  right: var(--pad);
}

/*
  Раскладка текста по кадру конструктора.

  Обрезка знака снята, поэтому кадр 16:9 ложится в окно такой же пропорции
  один к одному, и доли кадра совпадают с долями экрана. Отсюда ориентиры:
  конь занимает по высоте 52…65%, человек с ноутбуком — 31…37% ширины
  и 68…80% высоты, ковёр под ним тянется до 48% ширины.

  Текст стоит в левом низу, под конём, и прижат к нижнему краю: тогда он
  не съезжает на коня, сколько бы строк ни вышло на разных языках. Ширина
  ограничена долей кадра, а не числом знаков, — строки обязаны кончаться
  левее человека. Нижними строками блок заходит на угол ковра: это узор,
  а не лицо, и перекрыть его не жалко.

  Ссылка держится правого края, по нижней линии текста.

  Ниже пропорции 1.575 кадр режется по бокам, юрта с конём уходят из вида,
  и раскладка по ним теряет смысл: там остаётся центрированный вариант.
*/
@media (min-aspect-ratio: 63 / 40) {
  /*
    Блок растянут на весь кадр, а текст прижат к низу флексом. Так сделано
    ради ссылки: она позиционируется от этого блока, и её отступы — и правый,
    и вычисленный от высоты кадра — считаются верно только если блок повторяет
    кадр. При блоке по размеру текста доля высоты бралась от двух сотен
    пикселей, и ссылка уезжала вниз.
  */
  .vband--studio .vband__copy {
    position: absolute;
    inset: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 var(--pad) clamp(56px, 8vh, 88px);
    text-align: start;
  }
  .vband--studio .vband__t {
    font-size: clamp(1.1rem, 1.85vw, 1.8rem);
    max-width: min(28%, 30ch);
  }
  .vband--studio .vband__lead {
    margin: clamp(10px, 1.2vw, 16px) 0 0;
    max-width: min(28%, 44ch);
  }
  /*
    Ссылка стоит слева от знака генерации, на его высоте: стрелка после
    текста работает указателем на знак.

    По вертикали привязка точная. Знак сидит в 96 px от нижнего края кадра
    1280x720 и занимает 80…86.5% его высоты; кадр вписан по высоте и сверху
    вниз не обрезан, значит и на экране он всегда там же. Центр — 83.25%.

    По горизонтали точности нет и быть не может без скрипта: обрезка cover
    режет кадр по бокам, и левый край знака гуляет от 88.75% ширины при 16:9
    до 93.7% при 1.575. Правый край ссылки поставлен на 87% — прицел по 16:9,
    где зазор до знака выходит около двух десятков пикселей. На более узких
    экранах просвет шире, но стрелка всё равно смотрит в его сторону.
  */
  .vband--studio .vband__cta {
    position: absolute;
    right: 13%;
    top: 83.25%;
    bottom: auto;
    transform: translateY(-50%);
    margin: 0;
  }
  /* Затемнение идёт за текстом, а не ровным слоем: пятно в левом низу под
     блоком текста и небольшое справа под ссылкой. Середина и верх остаются
     открытыми — там горы, юрта и конь, ради которых кадр и взят. */
  .vband--studio .vband__veil {
    background:
      radial-gradient(38% 34% at 16% 84%, rgba(0, 0, 0, 0.74), transparent 74%),
      radial-gradient(26% 16% at 84% 88%, rgba(0, 0, 0, 0.56), transparent 74%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.4) 100%);
  }
}

/* ---------- мастерская в цифрах ---------- */
/*
  Семь показателей сеткой и отдельная полоса о своём производстве.

  Сетка задана auto-fit с минимумом 210px, а не фиксированными четырьмя
  колонками: показателей семь, при жёстких четырёх последний ряд оставался
  бы с одной ячейкой и тремя дырами. Так строка сама набирает по ширине.

  Разделители — не рамки у ячеек, а фон сетки, проступающий в зазор 1px:
  у рамок на стыке выходит двойная линия.
*/
.nums {
  display: grid;
  /* Пять показателей — одной строкой, как просил заказчик. Явные пять
     колонок, а не auto-fit: тот считает по ширине и на широком мониторе
     раскладывал бы иначе. */
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(26px, 3vw, 38px) 18px clamp(24px, 2.6vw, 32px);
  background: var(--bg);
  text-align: center;
}
.num__i {
  width: 34px;
  height: 34px;
  margin-bottom: clamp(10px, 1.4vw, 18px);
  fill: none;
  stroke: var(--ink-mute);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Цифра — главное в ячейке, поэтому она крупнее заголовка третьего уровня
   и набрана плотнее: в 700 ряд цифр читается как ряд, а не как строки текста */
.num__v {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.num__k {
  max-width: 20ch;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* ---------- своё производство ---------- */
.own {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px);
  background: var(--bg-sand);
  border-radius: var(--r);
}
.own__i {
  width: clamp(64px, 8vw, 92px);
  height: auto;
  fill: none;
  stroke: var(--ink-mute);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Отделяет знак от текста той же линией, что делит показатели выше */
.own__body {
  padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--line);
}
.own__t {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  margin: 0 0 4px;
}
.own__d {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-soft);
}
.own__note {
  max-width: 34ch;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-mute);
}
/* В один ряд пять ячеек помещаются только на широком экране: подпись вроде
   «заказов выполнены в срок» требует около 240px. Ниже — три и одна. */
@media (max-width: 1180px) {
  .nums {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .nums {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  /* Пояснение уходит под заголовок: в три колонки на узком экране
     оно сжимается в колонку по два слова */
  .own {
    grid-template-columns: auto 1fr;
  }
  .own__note {
    grid-column: 1 / -1;
    max-width: none;
  }
}
@media (max-width: 560px) {
  .own {
    grid-template-columns: 1fr;
  }
  .own__body {
    padding-left: 0;
    border-left: 0;
  }
}
[dir='rtl'] .own__body {
  padding-left: 0;
  padding-right: clamp(20px, 3vw, 44px);
  border-left: 0;
  border-right: 1px solid var(--line);
}