/* =========================================================
   rozenblum.pro — дизайн-код студии Portal
   чёрно-белая база + дозированный жёлтый акцент, скобки [ ]
   ========================================================= */

:root{
  --black:#1E1E1E;
  --white:#FDFDFD;
  --grey:#DEDEDE;
  --yellow:#FFF95F;
  --green:#5BFFA2;
  --orange:#FF7432;
  --blue:#3C95FF;
  --line-dark:rgba(253,253,253,.15);
  --line-light:#DEDEDE;
  /* синий «профессионализм» из брендбука — внутристрочный акцент (.hl) */
  --hl-ink:var(--blue);
  --pad:clamp(16px,4vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden;}

img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,p,ul{margin:0;padding:0;}
ul{list-style:none;}
::selection{background:var(--yellow);color:var(--black);}

.br{color:var(--yellow);}
.arr{display:inline-block;transition:transform .3s var(--ease);}

/* ---------------------------------------------------------
   ПРЕЛОАДЕР
   --------------------------------------------------------- */
.preloader{
  position:fixed;inset:0;z-index:1000;
  background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.preloader__counter{
  font-size:clamp(48px,15vw,15vw);
  font-weight:500;
  line-height:1;
  letter-spacing:-.02em;
  display:flex;gap:.06em;align-items:baseline;
  font-variant-numeric:tabular-nums;
}
.preloader__counter .pl-b{color:var(--yellow);}
.preloader__bar{
  margin-top:clamp(20px,3vw,40px);
  width:min(46vw,420px);height:1px;background:var(--line-dark);
}
.preloader__bar i{
  display:block;height:100%;background:var(--white);
  transform:scaleX(0);transform-origin:left center;
}
body.is-leaving .preloader{opacity:0;transform:translateY(-100%);}

/* появление контента после прелоадера */
body.is-loading main,body.is-loading .hdr,body.is-loading .ftr{opacity:0;}
body.is-ready .hdr,body.is-ready main,body.is-ready .ftr{
  animation:fadeUp .7s var(--ease) both;
}
body.is-ready main{animation-delay:.05s;}
body.is-ready .ftr{animation-delay:.1s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* ---------------------------------------------------------
   ШАПКА
   --------------------------------------------------------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:14px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.hdr.is-stuck{
  background:rgba(30,30,30,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line-dark);
}
.hdr__logo{
  font-size:clamp(15px,1.5vw,19px);
  font-weight:500;letter-spacing:-.02em;
  text-transform:lowercase;
}
.hdr__logo .br{transition:color .25s var(--ease);}
.hdr__logo:hover .br{color:var(--white);}
.hdr__right{display:flex;align-items:center;gap:clamp(12px,2vw,28px);}
.lang{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.08em;}
.lang__btn{opacity:.5;transition:opacity .25s var(--ease),color .25s var(--ease);padding:2px 0;}
.lang__btn:hover{opacity:1;}
.lang__btn.is-active{opacity:1;color:var(--yellow);}
.lang__sep{opacity:.35;}
.btn-ghost{
  display:inline-block;
  padding:9px 16px;
  border:1px solid var(--line-dark);
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
  white-space:nowrap;
}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow);}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{
  min-height:100svh;
  padding:clamp(88px,9.6vh,132px) var(--pad) clamp(22px,3.2vh,44px);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(18px,2.6vh,36px);
}
/* Фото-колонка: доля ширины контента, но с потолком по высоте экрана —
   4:5 (коэффициент .8 = w/h) не даёт фото вылезти за первый экран и утопить CTA под фолд.
   258–300px — вертикальный «расход» hero вокруг фото (паддинги + gap + строка tagline/CTA). */
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,min(40%,calc((100svh - clamp(258px,26vh,300px)) * .8)),700px);
  gap:clamp(20px,3vw,48px);
  align-items:end;
}
.hero__name{display:flex;flex-direction:column;line-height:.86;}
.hero__line{
  font-size:7.7vw;
  font-weight:700;
  letter-spacing:-.045em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero__line--outline{
  color:transparent;
  -webkit-text-stroke:1px var(--white);
  text-stroke:1px var(--white);
}
@supports not ((-webkit-text-stroke:1px #fff) or (text-stroke:1px #fff)){
  .hero__line--outline{color:var(--white);opacity:.45;}
}

.hero__photo{align-self:end;}
.photo{
  position:relative;
  aspect-ratio:4/5;                 /* совпадает с 800×1000 исходников — фото не режется */
  background:#2A2A2A;
  border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.photo img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:none;background:#2A2A2A;
}
.photo.photo--filled img{display:block;}
.photo.photo--filled .photo__ph{display:none;}
.photo__ph{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A;
}
/* Вид со спины: лежит поверх основного фото, кроссфейдом проявляется на ховере.
   Класс photo--back-ready ставит JS, только когда картинка реально загрузилась —
   без него ховер ничего не делает (фолбэк: обычное фото). */
.photo img.photo__back{
  z-index:2;
  opacity:0;
}
@media (hover:hover){
  .photo.photo--back-ready:hover img.photo__back{opacity:1;}
}
/* тач-устройства: ховера нет, класс is-back вешает JS по тапу */
.photo.photo--back-ready.is-back img.photo__back{opacity:1;}
.photo .cor{z-index:3;}
/* уголки-скобки */
.cor{position:absolute;width:14px;height:14px;border:1px solid var(--white);opacity:.85;pointer-events:none;}
.cor--tl{top:8px;left:8px;border-right:0;border-bottom:0;}
.cor--tr{top:8px;right:8px;border-left:0;border-bottom:0;}
.cor--bl{bottom:8px;left:8px;border-right:0;border-top:0;}
.cor--br{bottom:8px;right:8px;border-left:0;border-top:0;}

.hero__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,3vw,40px);
  padding-top:clamp(16px,2.5vh,28px);
  border-top:1px solid var(--line-dark);
}
/* Тагтлайн ужимается, а не сталкивает CTA на отдельную строку: с третьей
   кнопкой в ряду сумма max-content обеих колонок перестаёт влезать в поле
   контента, и без flex-базиса hero перерастал первый экран. */
.hero__tagline{
  flex:1 1 34ch;min-width:0;
  max-width:56ch;font-size:clamp(15px,1.5vw,21px);font-weight:400;color:var(--grey);
}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,28px);flex:0 0 auto;}
.cta{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:clamp(13px,1.2vw,15px);
  text-transform:uppercase;letter-spacing:.08em;
  padding-bottom:4px;border-bottom:1px solid var(--line-dark);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.cta:hover{color:var(--yellow);border-bottom-color:var(--yellow);}
.cta:hover .arr{transform:translateX(5px);}

/* кнопка шоурила: ghost-рамка вместо подчёркивания + жёлтые скобки —
   выделяется среди двух контактных ссылок, но остаётся в их ритме */
.cta--reel{
  gap:.42em;
  padding:10px 16px;
  border:1px solid var(--line-dark);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.cta--reel:hover{color:var(--yellow);border-color:var(--yellow);background:rgba(255,249,95,.06);}
.cta--reel:focus-visible{outline:1px solid var(--yellow);outline-offset:3px;}
.cta__ic{font-size:.92em;line-height:1;}

/* ---------------------------------------------------------
   СЕКЦИИ — общая сетка
   --------------------------------------------------------- */
/* Тема секции задаётся локальными токенами: тёмная — по умолчанию, .light — инверсия.
   Всё внутри секций красится через --fg/--line/--body/--dim, поэтому переключение
   темы у любой секции не требует отдельных переопределений на каждый элемент. */
.sec{
  --bg:var(--black);
  --fg:var(--white);
  --line:var(--line-dark);
  --body:var(--grey);            /* основной текст абзацев */
  --dim:#8A8A8A;                 /* мелкие подписи, номера, второстепенное */
  --accent:var(--yellow);        /* скобки [ ] и акценты по теме секции */
  background:var(--bg);
  color:var(--fg);
  padding:clamp(48px,8vh,110px) var(--pad);
  border-top:1px solid transparent;
  scroll-margin-top:64px;
}
.sec.light{
  --bg:var(--white);
  --fg:var(--black);
  --line:var(--line-light);
  --body:#3C3C3C;
  --dim:#6A6A6A;
  /* тот же жёлтый акцент, но затемнённый до читаемого на белом:
     чистый #FFF95F даёт 1.09:1 и пропадает, этот — 3.28:1 */
  --accent:#9A8F00;
  /* чистый #3C95FF на #FDFDFD даёт лишь 2.98:1 — мало даже для крупного текста;
     затемнённый вариант — 4.80:1 (AA для любого кегля) */
  --hl-ink:#1F6FD6;
}

/* Внутристрочный акцент: дозированно, максимум три места на странице.
   Цвет — через токен, поэтому в светлых секциях он темнеет автоматически.
   Спаны создаёт applyLang() из маркера [[…]] в словаре. */
.hl{color:var(--hl-ink);}
/* скобки [ ] следуют акценту своей секции */
.sec .br{color:var(--accent);}
/* Линия-разделитель нужна только там, где встречаются две секции ОДНОЙ темы:
   на стыке тёмной и светлой границу рисует сам контраст фонов. */
.sec + .sec{border-top-color:var(--line);}
.sec.light + .sec{border-top-color:transparent;}
.sec + .sec.light{border-top-color:transparent;}
.sec.light + .sec.light{border-top-color:var(--line);}

.sec__head{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:clamp(20px,3vh,40px);
}
.sec__num{font-size:12px;letter-spacing:.06em;color:var(--yellow);font-weight:500;}
.sec.light .sec__num{color:var(--fg);}
.sec__label{
  font-size:12px;text-transform:uppercase;letter-spacing:.16em;opacity:.6;
}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{scroll-behavior:auto !important;}
}

/* ---------------------------------------------------------
   [01] ОБО МНЕ
   --------------------------------------------------------- */
.about__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,4vw,64px);
  border-top:1px solid var(--line);
  padding-top:clamp(20px,3vh,40px);
}
.about__lead{font-size:clamp(20px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.18;}
.about__col{display:flex;flex-direction:column;gap:clamp(14px,1.8vh,22px);}
.about__body{font-size:clamp(15px,1.35vw,18px);color:var(--body);max-width:56ch;}

/* ---------------------------------------------------------
   [02] УСЛУГИ
   --------------------------------------------------------- */
.manifesto{
  font-size:clamp(18px,2.2vw,30px);font-weight:500;letter-spacing:-.02em;
  max-width:34ch;padding-bottom:clamp(24px,4vh,52px);
  text-wrap:balance;
}
.svc{border-top:1px solid var(--line);}
.svc__item{
  position:relative;
  display:flex;align-items:baseline;gap:clamp(12px,2vw,28px);
  padding:clamp(12px,1.6vh,20px) 0;
  border-bottom:1px solid var(--line);
  transition:transform .35s var(--ease),color .35s var(--ease);
  cursor:default;
}
.svc__num{
  flex:0 0 auto;font-size:clamp(11px,1vw,13px);opacity:.5;
  transition:color .3s var(--ease),opacity .3s var(--ease);
}
.svc__txt{
  font-size:clamp(24px,4.4vw,4.4vw);
  font-weight:500;letter-spacing:-.035em;line-height:1.02;text-transform:uppercase;
}
.svc__arr{
  margin-left:auto;font-size:clamp(18px,2vw,26px);
  opacity:0;transform:translateX(-14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  color:var(--hl,var(--yellow));
}
/* у каждой строки свой акцент: --hl задаётся инлайн в разметке */
.svc__item:hover{transform:translateX(clamp(8px,1.4vw,22px));color:var(--hl,var(--yellow));}
.svc__item:hover .svc__num{opacity:1;color:var(--hl,var(--yellow));}
.svc__item:hover .svc__arr{opacity:1;transform:none;color:var(--hl,var(--yellow));}

/* --- подблок «почему напрямую»: собственная светлая полоса во всю ширину.
       Секция без [0N] в шапке — нумерацию держит родительский блок услуг. --- */
.why__label{
  display:block;
  font-size:12px;text-transform:uppercase;letter-spacing:.16em;opacity:.6;
  padding-bottom:clamp(24px,4vh,52px);
}
.why__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,4vw,64px);
  align-items:start;
}
.why__q{
  font-size:clamp(28px,2.6vw,44px);
  font-weight:500;letter-spacing:-.03em;line-height:1.1;
  max-width:17ch;
}
.why__col{display:flex;flex-direction:column;gap:clamp(14px,1.8vh,22px);}
.why__p{font-size:clamp(15px,1.35vw,18px);color:var(--body);max-width:56ch;}

/* pull-quote на всю ширину под сеткой */
.why__quote{
  font-size:clamp(22px,2.2vw,36px);
  font-weight:500;letter-spacing:-.03em;line-height:1.15;
  max-width:34ch;
  margin-top:clamp(40px,6.5vh,90px);
  text-wrap:balance;
}
.why__quote .br{padding:0 .28em;}

/* ---------------------------------------------------------
   [03] РАБОТЫ — горизонтальная лента-презентация
   --------------------------------------------------------- */
/* ширина слайда: ~78% вьюпорта, но кадр 16:9 не должен перерастать экран по высоте;
   «выглядывающий» край следующего слайда = остаток ленты до правого края вьюпорта */
.wrk{
  --slide-w:min(80vw,1560px,calc(74vh * 16 / 9));
  --slide-gap:clamp(10px,1.2vw,20px);
}

/* строка над лентой: счётчик + навигация, прижаты к правому полю контента */
.wrk__bar{
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(12px,2vw,26px);
  padding-bottom:clamp(12px,2vh,22px);
}
.wrk__count{
  display:inline-flex;align-items:baseline;gap:.42em;
  font-size:12px;letter-spacing:.16em;color:var(--body);
  font-variant-numeric:tabular-nums;
}
.wrk__sep{opacity:.45;}
.wrk__nav{display:flex;gap:8px;}
.wrk__btn{
  width:38px;height:38px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  font-size:15px;
  transition:color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease);
}
.wrk__btn:hover:not(:disabled){color:var(--yellow);border-color:var(--yellow);}
.wrk__btn:focus-visible{outline:1px solid var(--yellow);outline-offset:2px;}
.wrk__btn:disabled{opacity:.28;cursor:default;}

/* лента: левый край — по полю контента, правый уходит в край вьюпорта */
.wrk__rail{
  position:relative;
  display:flex;gap:var(--slide-gap);
  margin-right:calc(var(--pad) * -1);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.wrk__rail::-webkit-scrollbar{display:none;}
.wrk__rail.is-drag{cursor:grabbing;scroll-snap-type:none;}
/* хвост шириной с «выглядывающий» край — чтобы последний слайд вставал к левому полю */
.wrk__rail::after{
  content:'';flex:0 0 calc(100% - var(--slide-w) - var(--slide-gap));
}

.wslide{
  flex:0 0 var(--slide-w);max-width:var(--slide-w);
  scroll-snap-align:start;
}
.wslide__media{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#2A2A2A;
  border:1px solid var(--line);
}
.wslide__media video{width:100%;height:100%;object-fit:cover;background:#2A2A2A;}
.wslide .cor{opacity:0;transition:opacity .4s var(--ease);border-color:var(--yellow);}
.wslide.is-active .cor{opacity:1;}
.wslide:not(.wslide--empty) .wslide__media{cursor:pointer;}
.wslide__badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;background:rgba(30,30,30,.72);color:var(--grey);
  pointer-events:none;white-space:nowrap;
}
.wslide--empty .wslide__media{cursor:default;}

/* кнопка Play по центру кадра: есть только у активного слайда и только пока он не играет */
.wslide__play{
  position:absolute;left:50%;top:50%;z-index:3;
  transform:translate(-50%,-50%);
  display:none;align-items:center;justify-content:center;gap:.22em;
  width:64px;height:64px;
  border:1px solid var(--white);
  background:rgba(30,30,30,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:var(--white);font-size:13px;line-height:1;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.wslide.is-active:not(.is-playing) .wslide__play{display:inline-flex;}
.wslide__play-ic{font-size:15px;}
.wslide__play:hover{
  color:var(--yellow);border-color:var(--yellow);background:rgba(30,30,30,.72);
  transform:translate(-50%,-50%) scale(1.06);
}
.wslide__play:focus-visible{outline:1px solid var(--yellow);outline-offset:3px;}

/* мини-панель управления: появляется, как только ролик запущен */
.wslide__panel{
  position:absolute;right:10px;bottom:10px;z-index:3;
  display:none;align-items:center;gap:8px;
}
.wslide.is-live .wslide__panel{display:flex;}
.wslide__mini{
  height:28px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(253,253,253,.42);background:rgba(30,30,30,.66);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:var(--white);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease);
}
.wslide__mini--mute{min-width:34px;padding:0 8px;font-size:12px;letter-spacing:0;}
.wslide__mini:hover{color:var(--yellow);border-color:var(--yellow);}
.wslide__mini:focus-visible{outline:1px solid var(--yellow);outline-offset:2px;}
.wslide__mini.is-off{opacity:.6;}

/* подпись: [0N] + название + тег жанра справа, роль строкой ниже;
   у неактивных приглушена */
.wslide__cap{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:clamp(10px,1vw,16px);row-gap:3px;
  padding-top:clamp(10px,1.4vh,16px);
  opacity:.35;transition:opacity .5s var(--ease);
}
.wslide.is-active .wslide__cap{opacity:1;}
.wslide__no{grid-column:1;grid-row:1;font-size:12px;letter-spacing:.06em;color:var(--dim);}
.wslide__title{
  grid-column:2;grid-row:1;
  font-size:clamp(12px,1.05vw,15px);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;
}
/* жанр работы: приглушённый серый, у активного слайда чуть ярче */
.wslide__tag{
  grid-column:3;grid-row:1;justify-self:end;align-self:baseline;
  font-size:clamp(10px,.8vw,12px);
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--dim);opacity:.7;white-space:nowrap;
  transition:opacity .5s var(--ease),color .5s var(--ease);
}
.wslide.is-active .wslide__tag{opacity:1;color:var(--body);}
.wslide__role{grid-column:2 / -1;grid-row:2;font-size:clamp(13px,1.05vw,16px);color:var(--dim);}

/* ---------------------------------------------------------
   [04] КЛИЕНТЫ (светлая секция)
   --------------------------------------------------------- */
.clients__title{
  font-size:clamp(28px,5vw,64px);font-weight:500;letter-spacing:-.035em;
  text-transform:uppercase;line-height:1;
  padding-bottom:clamp(24px,4vh,52px);
  border-bottom:1px solid var(--line);
}
.clients{
  display:grid;grid-template-columns:repeat(5,1fr);
  border-left:1px solid var(--line);
  /* --note-h — фикс-высота места под EN-подписью (2 строки кегля 10px).
     Она же добавляется к высоте ячейки, поэтому сетка остаётся ровной. */
  --cell-h:112px;
  --note-h:26px;
}
.client{
  position:relative;
  min-height:var(--cell-h);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,1.6vw,24px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.client img{
  max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.5;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
  mix-blend-mode:multiply;
}
.client:hover img{filter:grayscale(0);opacity:1;}
.client--broken{display:none;}

/* EN-подписи под логотипами: русскому читателю не нужно объяснять, что такое
   Сбер, англоязычному — нужно. Подпись абсолютная у нижнего края с фикс-высотой,
   а ячейка в EN-режиме на эту же высоту выше — логотип не наезжает, ряды ровные.
   Текст в подписи ставит JS (renderClientsText), в RU он пустой. */
.client__note{
  position:absolute;left:8px;right:8px;bottom:10px;
  display:none;
  height:var(--note-h);overflow:hidden;
  font-size:10px;line-height:1.3;letter-spacing:.01em;
  color:var(--dim);text-align:center;text-wrap:balance;
}
body.lang-en .client__note{display:block;}
body.lang-en .client{min-height:calc(var(--cell-h) + var(--note-h));}
body.lang-en .client:not(.client--accent){padding-bottom:calc(var(--note-h) + 18px);}

/* акцентная ячейка «80+ клиентов» — последняя в сетке */
.client--accent{
  flex-direction:column;gap:4px;
  background:var(--black);color:var(--white);
  border-right-color:var(--black);border-bottom-color:var(--black);
}
.client__num{
  font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1;
}
.client__cap{
  font-size:11px;text-transform:uppercase;letter-spacing:.16em;opacity:.65;
}

/* ---------------------------------------------------------
   [05] РОАДМЭП ПРОЕКТА — горизонтальная полоса из 6 колонок
   Ряд номеров сверху, под ним сквозная линия (border-top у .step__body
   каждой колонки складывается в одну непрерывную), ниже — шаг и описание.
   --------------------------------------------------------- */
/* секции роадмэпа дышат шире прочих: вертикальные поля ×1.5 к базовым .sec */
.sec--flow{padding-top:clamp(72px,12vh,165px);padding-bottom:clamp(72px,12vh,165px);}
.flow{
  display:grid;
  grid-template-columns:repeat(6,1fr);
}
.step{
  display:flex;flex-direction:column;
  gap:clamp(15px,2.1vh,24px);
  padding-left:clamp(18px,2.1vw,36px);
  border-left:1px solid var(--line);
  /* без этого длинное слово в заголовке распирает 1fr-колонку и даёт
     горизонтальный скролл всей странице (min-width у grid-элемента = auto) */
  min-width:0;
}
/* крайняя левая колонка выравнивается по полю контента, без разделителя */
.step:first-child{border-left:0;padding-left:0;}
.step__num{
  font-size:clamp(11px,1vw,13px);letter-spacing:.06em;color:var(--dim);
  transition:color .3s var(--ease);
}
/* сквозная линия под номерами + всё содержимое шага под ней */
.step__body{
  flex:1;
  display:flex;flex-direction:column;gap:clamp(9px,1.5vh,18px);
  padding-top:clamp(18px,2.4vh,30px);
  border-top:1px solid var(--line);
}
.step__t{
  font-size:clamp(20px,1.9vw,30px);
  font-weight:500;letter-spacing:-.02em;line-height:1.1;text-transform:uppercase;
  /* На крупном кегле «СОГЛАСОВАНИЕ» шире колонки 1fr при любом падинге:
     переносим по слогам (hyphens), anywhere — страховка на случай браузера
     без словаря переносов, чтобы слово не вылезло за разделитель. */
  overflow-wrap:anywhere;hyphens:auto;
  /* два шага из шести переносятся в две строки — резервируем две строки всем,
     иначе описания в колонках встают на разной высоте и ряд «плывёт» */
  min-height:2.2em;
}
.step__d{font-size:clamp(14px,1.25vw,18px);line-height:1.5;color:var(--dim);}
.step:hover .step__num{color:var(--yellow);}

/* ---------------------------------------------------------
   [06] КОНТАКТЫ
   --------------------------------------------------------- */
.contacts__title{
  font-size:clamp(30px,6.6vw,6.6vw);font-weight:500;letter-spacing:-.04em;line-height:1;
  text-transform:uppercase;
  padding-bottom:clamp(28px,5vh,60px);
}
.contacts__title .arr{color:var(--yellow);}
.contacts__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);}
.ct{
  position:relative;
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(20px,3vw,40px);
  border:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.ct__label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;opacity:.55;}
.ct__val{font-size:clamp(18px,2.4vw,32px);font-weight:500;letter-spacing:-.03em;word-break:break-word;}
.ct__arr{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);font-size:20px;transition:transform .3s var(--ease);}
.ct .cor{opacity:0;transition:opacity .3s var(--ease);border-color:var(--black);}
.ct:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow);}
.ct:hover .cor{opacity:1;}
.ct:hover .ct__arr{transform:translateX(6px);}

/* ---------------------------------------------------------
   ФУТЕР
   --------------------------------------------------------- */
.ftr{
  padding:clamp(20px,3vh,32px) var(--pad);
  border-top:1px solid var(--line-dark);
  font-size:12px;letter-spacing:.04em;color:#8A8A8A;
}

/* ---------------------------------------------------------
   АДАПТИВ
   --------------------------------------------------------- */
@media (max-width:1024px){
  .wrk{--slide-w:min(84vw,calc(70vh * 16 / 9));}
  .clients{grid-template-columns:repeat(4,1fr);}
  .hero__inner{grid-template-columns:minmax(0,1fr) clamp(240px,min(38%,calc((100svh - 250px) * .75)),520px);}
  /* роадмэп: 3 колонки в два ряда */
  .flow{grid-template-columns:repeat(3,1fr);row-gap:clamp(42px,6vh,66px);}
  .step:first-child{border-left:1px solid var(--line);padding-left:clamp(18px,2.1vw,36px);}
  .step:nth-child(3n+1){border-left:0;padding-left:0;}
  /* в 3 колонки и в ленте названия помещаются в строку — резерв не нужен */
  .step__t{font-size:clamp(22px,2.8vw,30px);min-height:0;}
}

@media (max-width:768px){
  .hero{min-height:auto;padding-top:clamp(90px,16vh,132px);}
  .hero__inner{grid-template-columns:1fr;align-items:start;gap:24px;}
  .hero__line{font-size:11vw;}
  /* мобайл: фото во всю ширину контента, но не выше «экран минус блок имени/tagline» */
  .hero__photo{max-width:min(100%,calc((100svh - 340px) * .75));}
  .about__grid{grid-template-columns:1fr;}
  .why__grid{grid-template-columns:1fr;gap:clamp(18px,3vh,28px);}
  .why__q{font-size:clamp(24px,6.2vw,34px);max-width:none;}
  .why__quote{font-size:clamp(20px,5vw,30px);max-width:none;margin-top:clamp(28px,5vh,44px);}
  .manifesto{max-width:none;}
  /* роадмэп: горизонтальная лента со snap — в ритме слайдера работ */
  .flow{
    display:flex;
    gap:clamp(15px,1.8vw,30px);
    margin-right:calc(var(--pad) * -1);
    padding-right:var(--pad);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .flow::-webkit-scrollbar{display:none;}
  .step{
    flex:0 0 70vw;
    scroll-snap-align:start;
    padding-left:clamp(18px,4.5vw,30px);
    border-left:1px solid var(--line);
  }
  .step:first-child,.step:nth-child(3n+1){padding-left:clamp(18px,4.5vw,30px);border-left:1px solid var(--line);}
  .step:first-child{border-left:0;padding-left:0;}
  .step__t{font-size:clamp(22px,6vw,32px);}
  /* лента: слайд почти во всю ширину, листаем свайпом — кнопки прячем */
  .wrk{--slide-w:min(86vw,calc(62vh * 16 / 9));--slide-gap:10px;}
  .wrk__nav{display:none;}
  .wrk__bar{padding-bottom:12px;}
  .wrk__rail{cursor:default;}
  /* приглашение под лентой — в колонку */
  /* узкие ячейки: под EN-подпись резервируем три строки вместо двух */
  .clients{grid-template-columns:repeat(3,1fr);--note-h:39px;}
  .contacts__grid{grid-template-columns:1fr;}
  .svc__txt{font-size:clamp(20px,6.2vw,34px);}
  .hero__foot{flex-direction:column;align-items:flex-start;}
  .contacts__title{font-size:clamp(26px,8.5vw,52px);}
}

@media (max-width:480px){
  .hdr{padding:11px var(--pad);}
  .btn-ghost{padding:8px 11px;font-size:11px;letter-spacing:.06em;}
  .hero__line{font-size:12vw;letter-spacing:-.05em;}
  .clients{grid-template-columns:repeat(2,1fr);--note-h:39px;}
  .preloader__counter{font-size:19vw;}
  .cta--reel{padding:9px 13px;}
}

/* очень узкие экраны — имя не должно вылезать */
@media (max-width:360px){
  .hero__line{font-size:11.5vw;}
}