/* ============================================================
   Premium Selection Group — shared styles
   Используется на всех direction-страницах (M&R, Production, IT)
   и дальних страницах (about, works, contact, 404, thanks,
   privacy, cookies, offer). index.html и discover.html — свои.
   ============================================================ */

:root {
  --red:   #C51D34; --red-rgb: 197,29,52;
  --red-lit: #FF4D65;   /* красный для текста на графите */
  --ink:   #27292c; --ink-rgb: 39,41,44; --cream-rgb: 243,241,237; --beige: rgb(var(--cream-rgb)); --beige-2: #EEE8D3;
  --paper: var(--beige);
  --dim:   rgba(var(--cream-rgb),.78);
  --dim-2: rgba(var(--cream-rgb),.68);   /* .55 давало 4,4 при норме 4,5 */

  /* Размеры шрифтов вынесены в tokens.css — единая точка управления (--fs-*) */

  /* Шрифты вынесены в tokens.css — единая точка управления (--ff-display / --ff-text / --ff-ui) */

  --gutter: clamp(20px, 3vw, 40px);
  --nav-h: 76px;

  /* разрядка переехала в tokens.css — единая точка на все страницы */
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body {
  background:var(--paper); color:var(--ink);
  font-family:var(--ff-text); font-size:var(--fs-body);
  min-height:100vh; min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  text-size-adjust:100%; -webkit-text-size-adjust:100%;
}
img, picture, svg { max-width:100%; display:block; }
img { height:auto; }
/* Анти-flash на iOS Safari при тапе */
a, button, input, textarea, select { -webkit-tap-highlight-color: rgba(var(--red-rgb),.18); }
/* Шрифт в кнопках и полях. Браузер их не наследует: без этой строки
   текст внутри выпадает на системный Arial. Найдено 25.08.2026
   в окне заявки — на самом важном экране сайта. */
button, input, textarea, select { font-family: inherit; }
/* Минимальная зона тапа на сенсорных экранах.

   Правило стояло здесь с самого начала и НЕ РАБОТАЛО: у строчного
   элемента минимальная высота не действует вовсе. Ссылки подвала
   оставались 18 точек в высоту, крошки и подменю — 14, при норме 44.
   Замерено 26.08.2026 на эмуляции телефона.

   Поэтому ссылкам-указателям меняется способ показа. Ссылки внутри
   абзацев в список намеренно не входят: у строчной ссылки в тексте
   своя высота — высота строки, и ломать её ради нормы нельзя. */
@media (hover: none) and (pointer: coarse) {
  .nav-meta a, .ftr-col a, .ftr-legal a, .subnav a, .breadcrumb a,
  .ws-all, .pf-sub a, .site-footer a,
  /* Контакты — то, по чему на телефоне и жмут. Телефон, почта
     и Telegram были 15 точек в высоту при норме 44. */
  .contact-card li a, .contact-grid li a, .metric a, .case-details li a,
  article li > a,
  a[href^="tel:"], a[href^="mailto:"], a[href*="t.me/"] {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  button, .cta, .next-btn, .opt, .pf-filter button, .pf-item {
    min-height: 44px;
  }
  .nav-logo { min-height: 44px; }
}
a { color:inherit; text-decoration:none; }

/* === NAV === */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:30;
  padding:20px var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  color:var(--beige);
  /* Контент навбара инвертируется относительно фона: белая → чёрный, чёрная → белый. */
  mix-blend-mode: difference;
  isolation: isolate;
}
/* Фолбэк для браузеров без mix-blend-mode (старые Android, IE) */
@supports not (mix-blend-mode: difference) {
  .nav {
    background: linear-gradient(rgba(0,0,0,.45), transparent);
    color: var(--beige);
  }
}
/* При прокрутке мимо hero — шапка становится сплошной тёмной и сливается
   с подшапкой в одну панель (иначе сквозь прозрачную шапку просвечивает
   бегущая лента логотипов из секции trust). */
.nav.nav-solid {
  background: rgba(var(--ink-rgb), .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  mix-blend-mode: normal;
  color: var(--beige);
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo svg { width:27px; height:36px; display:block; }
.nav-logo .wm {
  font-family:var(--ff-text); font-weight:var(--fw-title); font-size:var(--fs-cap);
  letter-spacing:.18em; line-height:1.05;
}
.nav-meta {
  display:flex; align-items:center; gap:24px;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
}
.nav-meta a:hover { opacity:.6; }
.nav-meta .nav-cta {
  border:1.5px solid currentColor; border-radius:0;
  padding:7px 16px; opacity:1;
}
.nav-meta .nav-cta:hover { opacity:1; background:currentColor; }
/* Бургер — мобильное меню (показывается ≤900px) */
.nav-logo { position:relative; z-index:2; }
.nav-burger {
  display:none; width:42px; height:42px; padding:0; border:0; background:none;
  cursor:pointer; color:inherit; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; position:relative; z-index:2;
}
.nav-burger span { display:block; width:26px; height:2px; background:currentColor; transition:transform .3s, opacity .3s; }
.nav.nav-open .nav-burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav.nav-open .nav-burger span:nth-child(2){ opacity:0; }
.nav.nav-open .nav-burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* === STICKY SUB-NAV (вторая линия: крошки + секции страницы, всегда видна) === */
.subnav {
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:25;
  background:rgb(var(--ink-rgb));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:11px var(--gutter);
  border-bottom:1px solid rgba(var(--cream-rgb),.12);
  display:flex; align-items:center; gap:clamp(14px, 2vw, 28px); flex-wrap:wrap;
  transform:translateY(-110%); opacity:0;
  transition:transform .35s cubic-bezier(.65,0,.35,1), opacity .25s;
}
.subnav.visible { transform:translateY(0); opacity:1; }
/* Крошки: Главное • ТЕКУЩАЯ (текущая — красным) */
.subnav-crumbs {
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:var(--dim); flex-shrink:0;
}
.subnav-crumbs .sep { color:var(--dim-2); }
.subnav-current { color:var(--red); }
/* Вертикальный разделитель: крошки │ секции */
.subnav-div {
  width:1px; height:14px; align-self:center; flex-shrink:0;
  background:rgba(var(--cream-rgb),.25);
}
.subnav ul {
  list-style:none; display:flex; gap:clamp(14px, 1.6vw, 24px); flex-wrap:wrap;
}
.subnav::after {
  content:''; position:absolute; left:0; bottom:0;
  height:2px; width:var(--scroll-progress, 0%);
  background:var(--red);
  transition:width .08s linear;
}
.subnav a {
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:var(--dim); padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.subnav a:hover { color:var(--beige); }
.subnav a.active { color:var(--beige); border-bottom-color:var(--red); }
/* Якоря секций учитывают высоту фикс-шапки (шапка + вторая линия) */
section[id] { scroll-margin-top: calc(var(--nav-h) + 56px); }

/* === HERO (direction-style) === */
.hero-direction {
  background:var(--ink); color:var(--beige);
  /* Единая высота для всех страниц-направлений + контент выше (было 100vh — много пустоты сверху) */
  min-height:70vh; min-height:70dvh; padding:120px var(--gutter) clamp(60px, 7vw, 100px);
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden;
}
/* Серый водяной номер/знак в фоне убран — единообразно на всех страницах */
.hero-watermark { display:none; }
.hero-direction > * { position:relative; z-index:1; }
.breadcrumb {
  position:absolute; top:90px; left:var(--gutter); right:var(--gutter);
  display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:var(--dim); z-index:2;
}
.breadcrumb a { transition:opacity .2s; }
.breadcrumb a:hover { opacity:.6; }
.breadcrumb .current { color:var(--beige); }
.hero-meta {
  /* Скрыто по запросу — мета-теги (WEB·MOBILE·… / ACTIVE SINCE) убраны со всех страниц (2026-05-30). Вернуть = display:flex */
  display:none;
  position:absolute; top:90px; right:var(--gutter);
  flex-direction:column; gap:6px; align-items:flex-end;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:var(--dim); text-align:right; z-index:2;
}
.hero-meta strong { color:var(--beige); font-weight:var(--fw-label); }
.hero-meta .dot { color:var(--red); }
.hero-meta a { transition:opacity .2s, color .2s; }
.hero-meta a:hover { opacity:.7; color:var(--red); }
.hero-scroll-hint {
  position:absolute; bottom:clamp(20px, 3vw, 40px); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:var(--dim-2); z-index:2;
  animation:psg-scroll-pulse 2.5s ease-in-out infinite;
}
.hero-scroll-hint::after { content:'↓'; font-size:14px; }
/* Подсказка прокрутки только движется. Прежде она ещё и гасла,
   и в нижней точке текст уходил ниже нормы читаемости: 4,3 при 4,5.
   Двигаем одно свойство, яркость держим постоянной. */
@keyframes psg-scroll-pulse {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(4px); }
}
.direction-title {
  font-family:var(--ff-display); font-weight:var(--fw-display);
  font-size:var(--fs-hero); line-height:var(--lh-display);
  letter-spacing:var(--ls-display); text-transform:uppercase;
  margin-bottom:clamp(24px, 3vw, 48px);
  color:var(--beige);
}
.direction-title .amp { color:var(--red); font-style:italic; }
.direction-manifest {
  font-family:var(--ff-display); font-weight:var(--fw-strong);
  font-size:var(--fs-manifest); line-height:1.15;
  letter-spacing:var(--ls-display);
  margin-bottom:clamp(16px, 2vw, 24px); max-width:none;
  white-space:nowrap;            /* всегда одна строка — блок не «прыгает» при смене фразы */
  color:var(--beige);
  transition:opacity .35s ease, transform .35s ease;
}
.direction-manifest.swap { opacity:0; transform:translateY(-6px); }
.direction-lede {
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--dim); max-width:62ch;
  margin-bottom:clamp(32px, 4vw, 56px);
}
.direction-cta {
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.direction-title, .direction-manifest, .direction-lede, .direction-cta {
  opacity:0; transform:translateY(20px);
  animation:psg-fade-up .8s cubic-bezier(.65,0,.35,1) forwards;
}
.direction-title    { animation-delay:.1s; }
.direction-manifest { animation-delay:.3s; }
.direction-lede     { animation-delay:.5s; }
.direction-cta      { animation-delay:.7s; }
@keyframes psg-fade-up { to { opacity:1; transform:translateY(0); } }
.btn-primary, .btn-ghost {
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 28px; border-radius:0;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  transition:all .3s; cursor:pointer; border:1.5px solid transparent;
}
.btn-primary { background:var(--red); color:var(--beige); }
.btn-primary:hover { background:var(--beige); color:var(--ink); }
.btn-primary::after { content:'→'; }
.btn-ghost { color:var(--beige); border-color:var(--beige); }
.btn-ghost:hover { background:var(--beige); color:var(--ink); }
.btn-ghost::after { content:'↗'; }

/* === GENERIC SECTION === */
.section-pad { padding: clamp(80px, 10vw, 160px) clamp(20px, 4vw, 56px); }
.container { max-width:1480px; margin:0 auto; }
.section-head {
  display:flex; flex-direction:row;
  justify-content:flex-start; align-items:flex-end;
  gap: clamp(24px, 4vw, 80px);
  padding-bottom:24px;
  border-bottom:1px solid currentColor;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section-head .label {
  /* Убрано по запросу — мелкие метки-категории над заголовками сняты (2026-05-30).
     Оформление ниже удалено 26.08.2026 как мёртвое; само скрытие
     оставлено: в разметке три такие метки ещё есть. */
  display:none;
}
.section-head h2 {
  font-family:var(--ff-display); font-weight:var(--fw-head);
  font-size:var(--fs-section);
  line-height:var(--lh-head); letter-spacing:var(--ls-display);
  text-transform:uppercase; text-align:left;
  /* Заголовок берёт цвет своей полосы: графит на бумаге, кремовый
     на графите. Красный сюда больше не заливается целиком — когда
     красным набран каждый заголовок, красный не выделяет ничего.
     Решение владельца 25.08.2026. */
  color:inherit;
}
/* Одно слово в заголовке — красным. Внутри тёмных полос переменная
   уже подменена на осветлённую, поэтому слово читается везде. */
.section-head h2 em {
  font-style:normal; color:var(--red);
}
/* На красной полосе акцент — сама полоса. Красное слово на красном
   фоне попросту исчезает: проверено замером 25.08.2026, контраст 1,0.
   Там слово берёт цвет заголовка и не выделяется вовсе.
   Заводите новую секцию на красном — впишите её сюда. */
.services.is-red .section-head h2 em,
.postlude .section-head h2 em,
.who .section-head h2 em { color:inherit; }


/* ============================================================
   ЧИСЛА — собственная роль
   Телефоны, статистика, даты и суммы набираются цифрами одинаковой
   ширины: иначе столбец номеров «пляшет», а меняющееся число дёргает
   строку. Отдельная роль, а не свойство отдельных мест.
   ============================================================ */
.stat .num, .stat .num-prefix, .stat .num-suffix,
.contact-card .cc-line, .cc-line,
.subnav-crumbs, .case .case-details li.metric,
a[href^="tel:"], time, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* === TRUST-BAR (marquee) === */
.trust {
  background:var(--paper); color:var(--ink);
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  border-bottom:1px solid rgba(var(--ink-rgb),.12);
}
.trust-row {
  max-width:1480px; margin:0 auto;
  display:flex; gap:32px; align-items:center;
  overflow:hidden; position:relative;
}
.trust-row::before, .trust-row::after {
  content:''; position:absolute; top:0; bottom:0; width:80px;
  pointer-events:none; z-index:2;
}
.trust-row::before { left:0;  background:linear-gradient(to right, var(--paper), transparent); }
.trust-row::after  { right:0; background:linear-gradient(to left,  var(--paper), transparent); }
.trust-label {
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:rgba(var(--ink-rgb),.72); flex-shrink:0; z-index:3; position:relative;
  background:var(--paper); padding-right:8px;
}
.trust-marquee { flex:1; overflow:hidden; }
.trust-track {
  display:flex; gap: clamp(24px, 4vw, 64px); align-items:center;
  width:max-content;
  animation:psg-marquee 32s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state:paused; }
.trust-track span {
  font-family:var(--ff-display); font-weight:var(--fw-title);
  font-size:var(--fs-title-s);
  letter-spacing:.04em; text-transform:uppercase;
  color:rgba(var(--ink-rgb),.55); transition:color .25s;
  white-space:nowrap;
}
.trust-track span:hover { color:var(--ink); }
.trust-track img {
  height:clamp(26px, 2.6vw, 38px); width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.55; transition:filter .25s, opacity .25s;
}
.trust-track img:hover { filter:grayscale(0); opacity:1; }
@keyframes psg-marquee {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* === SERVICES === */
.services { background:var(--paper); color:var(--ink); }
/* Вариант секции на малиновом фоне — для визуального разделения соседних секций */
.services.is-red { background:var(--red); color:var(--beige); }
.services.is-red .section-head h2 { color:var(--beige); }
.services.is-red .service { border-color:rgba(var(--cream-rgb),.45); }
/* На красной полосе текст не приглушаем: кремовый при .9 даёт 4,4
   при норме 4,5. Приглушение тут и не нужно — фон и так яркий. */
.services.is-red .service p { opacity:1; }
.services.is-red .service .num { color:rgba(var(--cream-rgb),.22); }
.services.is-red .service:hover { background:var(--ink); color:var(--beige); border-color:var(--ink); }
.services.is-red .service:hover .num { color:rgba(var(--cream-rgb),.16); }
/* Вариант без карточек — колонки, разделённые вертикальной линией (без рамок и ховера) */
.services.is-divided .services-grid { gap:0; }
.services.is-divided .service {
  border:none; cursor:default; overflow:visible;
  padding:0 clamp(24px,3.2vw,52px);
}
.services.is-divided .service:first-child { padding-left:0; }
.services.is-divided .service:last-child { padding-right:0; }
.services.is-divided .service + .service { border-left:1px solid rgba(var(--cream-rgb),.30); }
.services.is-divided .service .num { display:none; }
.services.is-divided .service:hover { background:transparent; color:inherit; transform:none; }
.services.is-divided.is-red .service:hover .num { color:rgba(var(--cream-rgb),.22); }
@media (max-width:760px){
  .services.is-divided .service { padding:0; }
  .services.is-divided .service + .service { border-left:none; border-top:1px solid rgba(var(--cream-rgb),.30); padding-top:28px; margin-top:28px; }
}
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.service {
  border:1.5px solid var(--ink);
  padding:28px; padding-top:84px;
  display:flex; flex-direction:column; gap:12px;
  cursor:pointer; position:relative; overflow:hidden;
  transition:background .35s cubic-bezier(.65,0,.35,1), color .3s, transform .3s;
}
.service:hover { background:var(--ink); color:var(--beige); transform:translateY(-4px); }
.service .num {
  position:absolute; top:24px; left:28px;
  font-family:var(--ff-display); font-weight:var(--fw-head);
  font-size:var(--fs-service-num); line-height:1;
  letter-spacing:var(--ls-display);
  /* Номер-призрак: 12 % — записанное решение системы. Это украшение,
     а не текст; смысл несёт название услуги рядом. Норму контраста
     сюда не применяем осознанно. */
  color:rgba(var(--ink-rgb),.12);
  transition:color .35s;
}
.service:hover .num { color:rgba(var(--cream-rgb),.16); }
.service h3 {
  font-family:var(--ff-display); font-weight:var(--fw-title);
  font-size:var(--fs-title-m); line-height:var(--lh-title);
  letter-spacing:var(--ls-display); text-transform:uppercase;
}
.service p { font-size:var(--fs-service-text); line-height:var(--lh-body); opacity:.9; }
.service-includes {
  list-style:none; margin-top:0;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .4s cubic-bezier(.65,0,.35,1), opacity .25s, margin-top .35s;
}
.service:hover .service-includes { max-height:300px; opacity:1; margin-top:8px; }
.service-includes li {
  font-family:var(--ff-ui); font-size:var(--fs-cap);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  padding:6px 0 6px 14px; position:relative;
  border-top:1px solid rgba(var(--cream-rgb),.18);
}
.service-includes li::before {
  content:'+'; position:absolute; left:0; color:var(--red);
}

/* === POSTLUDE (кульминация M&R — результаты) === */
.postlude { background:var(--red); color:var(--beige); }
.postlude .section-head { color:var(--beige); border-bottom-color:rgba(var(--cream-rgb),.28); }
.postlude .section-head h2 { color:var(--beige); }
.postlude-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(var(--cream-rgb),.28);
  border-left:1px solid rgba(var(--cream-rgb),.28);
}
.postlude-item {
  border-right:1px solid rgba(var(--cream-rgb),.28);
  border-bottom:1px solid rgba(var(--cream-rgb),.28);
  padding:clamp(28px, 3.2vw, 52px);
  display:flex; flex-direction:column; gap:16px;
}
.postlude-item .num {
  font-family:var(--ff-display); font-weight:var(--fw-head);
  font-size:var(--fs-postlude-num); line-height:1;
  letter-spacing:var(--ls-display); color:rgba(var(--cream-rgb),.62);
}
.postlude-item h3 {
  font-family:var(--ff-display); font-weight:var(--fw-title);
  font-size:var(--fs-postlude-title); line-height:1.2;
  color:var(--beige); max-width:22ch;
}
@media (max-width:640px){
  .postlude-grid { grid-template-columns:1fr; }
}

/* === PROCESS === */
.process { background:var(--ink); color:var(--beige); }
.process .section-head { color:var(--beige); border-bottom-color:rgba(var(--cream-rgb),.22); }
.process-steps {
  list-style:none; display:grid; gap:0;
}
.process-step {
  display:grid; grid-template-columns:80px minmax(0, 1fr) clamp(220px, 24vw, 340px);
  gap:clamp(24px, 4vw, 60px); align-items:start;
  padding:clamp(28px, 3.4vw, 48px) 0;
  border-bottom:1px solid rgba(var(--cream-rgb),.18);
}
.process-step:last-child { border-bottom:0; }
.process-step .step-num {
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); color:rgba(var(--cream-rgb),.62);
  align-self:start; justify-self:end;
}
.process-step h3 {
  font-family:var(--ff-display); font-weight:var(--fw-head);
  font-size:var(--fs-process-title); line-height:var(--lh-head); letter-spacing:var(--ls-display);
  text-transform:uppercase; margin-bottom:14px;
}
.process-step p {
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:rgba(var(--cream-rgb),.78); max-width:62ch;
}
.step-deliverable {
  padding-left:24px; border-left:1px solid rgba(var(--cream-rgb),.18);
  align-self:start;
}
.step-deliverable-label {
  display:block;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:rgba(var(--cream-rgb),.62); margin-bottom:10px;
}
.step-deliverable ul { list-style:none; }
.step-deliverable li {
  font-family:var(--ff-ui); font-size:var(--fs-cap);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  padding:5px 0 5px 14px; position:relative;
  color:rgba(var(--cream-rgb),.85);
}
.step-deliverable li::before {
  content:'+'; position:absolute; left:0; color:var(--red);
}

/* === CASES === */
.cases { background:var(--paper); color:var(--ink); }
.cases-filter {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:clamp(32px, 4vw, 56px);
}
.cases-filter button {
  background:transparent; border:1.5px solid rgba(var(--ink-rgb),.18);
  padding:10px 20px; border-radius:0;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  cursor:pointer; transition:all .25s;
}
.cases-filter button:hover { border-color:var(--ink); }
.cases-filter button.active { background:var(--ink); color:var(--beige); border-color:var(--ink); }
.cases-grid {
  display:grid; grid-template-columns:repeat(12,1fr); gap:16px;
}
.case {
  position:relative; overflow:hidden; border-radius:0;
  cursor:pointer; transition:transform .5s cubic-bezier(.65,0,.35,1);
  background:var(--beige-2);
}
.case:hover { transform:translateY(-4px); }
.case picture, .case img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.case .meta {
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 20px;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 60%, transparent 100%);
  color:var(--beige); /* padding не анимируем — это пересчёт раскладки; смена мгновенная */
}
.case:hover .meta { padding-bottom:24px; }
.case .meta .lbl {
  font-family:var(--ff-ui); font-size:var(--fs-cap);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label); opacity:.85;
}
.case .meta h3 {
  font-family:var(--ff-text); font-weight:var(--fw-title);
  font-size:var(--fs-card-title); line-height:1.15; margin-top:4px;
}
.case .case-details {
  list-style:none; margin-top:0;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s cubic-bezier(.65,0,.35,1), opacity .25s, margin-top .35s;
}
.case:hover .case-details { max-height:160px; opacity:1; margin-top:10px; }
.case .case-details li {
  font-family:var(--ff-ui); font-size:var(--fs-cap);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  padding:3px 0 3px 14px; position:relative;
  color:rgba(var(--cream-rgb),.85);
}
.case .case-details li::before {
  content:'+'; position:absolute; left:0; color:var(--red);
}
.case .case-details li.metric {
  color:var(--beige); font-weight:var(--fw-label);
  border-top:1px solid rgba(var(--cream-rgb),.25); margin-top:6px; padding-top:8px;
}
.case .case-details li.metric::before { content:'→'; }
.case.c1 { grid-column:span 7; aspect-ratio:16/10; }
.case.c2 { grid-column:span 5; aspect-ratio:16/10; }
.case.c3 { grid-column:span 4; aspect-ratio:1/1; }
.case.c4 { grid-column:span 4; aspect-ratio:1/1; }
.case.c5 { grid-column:span 4; aspect-ratio:1/1; }

/* === PAINS (M&R) === */
.pains { background: var(--ink); color: var(--beige); }
.pains .section-head { color: var(--beige); border-bottom-color: rgba(var(--cream-rgb),.22); }
.pains-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.pain {
  border-top: 2px solid var(--red);
  padding: clamp(20px, 2vw, 28px) 0 0;
}
.pain h3 {
  font-family: var(--ff-display); font-weight:var(--fw-title);
  font-size:var(--fs-title-m); line-height:var(--lh-title);
  letter-spacing: var(--ls-display); text-transform: uppercase;
  margin-top: 14px;
}
.pain p {
  margin-top: 12px; font-size: var(--fs-body); line-height:var(--lh-body);
  color: rgba(var(--cream-rgb),.78); max-width: 38ch;
}
.pain-bottom-line {
  font-family: var(--ff-display); font-weight:var(--fw-statement);
  font-size:var(--fs-statement); line-height:var(--lh-statement);
  color: var(--beige); max-width: 60ch;
  border-left: 3px solid var(--red); padding-left: clamp(20px, 2vw, 28px);
}
.pain-bottom-line em { color: var(--red); font-style: normal; font-weight:var(--fw-strong); }

/* PAINS — две колонки: идея/заголовок слева, проблемы блоком справа (как на главной) */
.pains-layout {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.pains-aside, .pains-layout .pains-grid { min-width: 0; }  /* чтобы колонки сжимались и текст переносился, а не вылезал */
.pains-aside h2 {
  font-family: var(--ff-display); font-weight:var(--fw-head);
  font-size: clamp(28px, 3.4vw, 52px); line-height:var(--lh-head);
  letter-spacing: var(--ls-display); text-transform: uppercase;
  color: var(--beige); margin-bottom: clamp(24px, 2.6vw, 36px);
}
.pains-aside .pain-bottom-line { margin: 0; }
.pains-layout .pains-grid {
  grid-template-columns: 1fr; gap: 0; margin-bottom: 0;
}
.pains-layout .pain + .pain { margin-top: clamp(20px, 2.2vw, 32px); }
@media (max-width: 900px) {
  .pains-layout { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
}

/* === NUMBERS === */
.numbers {
  background:var(--red); color:var(--beige);
  /* Контент в той же сетке 1480px, что и остальной сайт; красный фон — на всю ширину */
  padding:clamp(40px, 4.5vw, 64px) max(var(--gutter), calc((100% - 1480px) / 2));
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.stat { text-align:center; }
.stat .num {
  display:inline-block;
  font-family:var(--ff-display); font-weight:var(--fw-display);
  font-size:var(--fs-stat);
  line-height:.9; letter-spacing:var(--ls-display);
  font-variant-numeric:tabular-nums;
}
.stat .num-suffix, .stat .num-prefix {
  display:inline-block;
  font-family:var(--ff-display); font-weight:var(--fw-display);
  font-size:var(--fs-stat-affix);
  line-height:.9; letter-spacing:var(--ls-display);
  color:rgba(var(--cream-rgb),.92);
  vertical-align:top; margin-top:6px;
}
.stat .num-prefix { margin-right:6px; }
.stat .num-suffix { margin-left:4px; }
.stat .num-row { display:block; margin-bottom:14px; }
.stat .lbl {
  display:block;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  /* Было .78 — на красном давало 3,61 при норме 4,5. Полный кремовый даёт 5,2. */
  color:var(--beige);
}
.stat .lbl-sub {
  /* Убрано по запросу — мелкие подписи под цифрами сняты (2026-05-30). Вернуть = display:block */
  display:none; margin-top:6px; max-width:24ch;
  font-family:var(--ff-ui); font-size:var(--fs-cap);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:rgba(var(--cream-rgb),.62); line-height:1.4;
}

/* Секции кейсов «Что сделали» на направлениях временно скрыты (2026-05-30) —
   ждём распределения реальных работ по номерам. Вернуть = удалить это правило. */
#cases { display:none; }

/* === TEAM === */
.team { background:var(--paper); color:var(--ink); }
.team-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
/* Секция экспертов (about) — 6 человек, ровно 3×2 */
#leadership .team-grid { grid-template-columns:repeat(3,1fr); }
.person {
  display:flex; flex-direction:column; gap:12px;
}
.person .photo {
  aspect-ratio:3/4; background:var(--beige-2); border-radius:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); color:rgba(var(--ink-rgb),.72);
  position:relative; overflow:hidden;
  cursor:default;
}
.person .photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.person .photo .quote {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(var(--red-rgb),.94) 0%, rgba(var(--ink-rgb),.92) 70%);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 1.6vw, 28px);
  opacity:0; transition:opacity .35s cubic-bezier(.65,0,.35,1);
}
.person .photo:hover .quote { opacity:1; }
.person .photo .quote::before {
  content:'“'; position:absolute; top:6px; left:14px;
  font-family:var(--ff-display); font-weight:var(--fw-display);
  font-size:64px; line-height:1; color:rgba(var(--cream-rgb),.35);
}
.person .photo .quote blockquote {
  font-family:var(--ff-display); font-weight:var(--fw-strong);
  font-size:var(--fs-quote); line-height:1.32;
  color:var(--beige); text-align:center; max-width:22ch;
  letter-spacing:-.005em;
}
.person .name {
  font-family:var(--ff-display); font-weight:var(--fw-title);
  font-size:var(--fs-title-s); line-height:1.05;
  letter-spacing:var(--ls-display); text-transform:uppercase;
}
.person .role {
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:var(--red);
}
/* Короткое био эксперта (опыт/проекты) — только на странице Marketing (#team) */
.person-bio {
  font-size:var(--fs-service-text); line-height:var(--lh-body);
  color:var(--ink); opacity:.72; max-width:42ch; margin:0;
}
/* КТО МЫ — красная вводная секция (Marketing) */
.who { background:var(--red); color:var(--beige); }
.who-layout {
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:clamp(40px, 6vw, 96px); align-items:start;
}
.who-aside, .who-layout .who-text { min-width:0; }
.who-aside h2 {
  font-family:var(--ff-display); font-weight:var(--fw-head);
  font-size:var(--fs-section); line-height:var(--lh-head);
  letter-spacing:var(--ls-display); text-transform:uppercase;
  color:var(--beige);
}
.who-tagline {
  margin:clamp(14px,1.6vw,20px) 0 0;
  font-family:var(--ff-display); font-weight:var(--fw-statement);
  font-size:var(--fs-statement); line-height:var(--lh-statement);
  color:var(--beige);
}
.who-text p {
  font-size:clamp(17px, 1.5vw, 24px); line-height:var(--lh-body);
  color:var(--beige); max-width:60ch;
}
.who-text p + p { margin-top:clamp(16px, 1.6vw, 22px); }
@media (max-width:900px){
  .who-layout { grid-template-columns:1fr; gap:clamp(24px, 5vw, 36px); }
}

/* Команда маркетинга — 3 в ряд (5 = 3+2) */
#team .team-grid { grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ #team .team-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #team .team-grid { grid-template-columns:1fr; } }

/* === CTA === */
.cta-section { background:var(--ink); color:var(--beige); }
.cta-section .section-head { color:var(--beige); border-bottom-color:rgba(var(--cream-rgb),.22); }
.cta-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.cta-card {
  border:1.5px solid rgba(var(--cream-rgb),.22);
  padding:clamp(32px, 3vw, 48px);
  display:flex; flex-direction:column; gap:14px;
  transition:all .35s cubic-bezier(.65,0,.35,1);
  color:var(--beige);
}
.cta-card:hover { background:var(--red); border-color:var(--red); transform:translateY(-4px); }
.cta-card .num {
  /* Убрано по запросу — избыточные красные метки «1 / ABOUT» и т.п. (2026-05-30) */
  display:none;
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:var(--red); transition:color .35s;
}
.cta-card:hover .num { color:var(--beige); }
.cta-card h3 {
  font-family:var(--ff-display); font-weight:var(--fw-title);
  font-size:var(--fs-cta-title); line-height:var(--lh-title);
  letter-spacing:var(--ls-display); text-transform:uppercase;
}
.cta-card p { font-size:var(--fs-body); line-height:var(--lh-body); opacity:.78; }
.cta-card .arrow {
  margin-top:auto; font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
}

/* === FOOTER === */
footer.site-footer {
  background:var(--ink); color:var(--beige);
  border-top:1px solid rgba(var(--cream-rgb),.12);
  padding:clamp(60px, 6vw, 96px) var(--gutter) 32px;
}
.ftr-grid {
  max-width:1480px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
}
.ftr-brand .brand-mark {
  font-family:var(--ff-display); font-weight:var(--fw-display);
  font-size:var(--fs-footer-logo);
  line-height:.95; letter-spacing:var(--ls-display); text-transform:uppercase;
  margin-bottom:16px;
}
.ftr-brand .brand-mark .dot { color:var(--red); }
.ftr-brand p { font-size:var(--fs-body); color:rgba(var(--cream-rgb),.6); max-width:32ch; line-height:var(--lh-body); }
.ftr-col h4 {
  font-family:var(--ff-ui); font-size:var(--fs-meta);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:rgba(var(--cream-rgb),.62); margin-bottom:16px;
}
.ftr-col ul { list-style:none; }
.ftr-col ul li { padding:4px 0; }
.ftr-col ul a { font-size:var(--fs-body); color:var(--beige); }
.ftr-col ul a:hover { color:var(--red); }
.ftr-bottom {
  max-width:1480px; margin:56px auto 0; padding-top:24px;
  border-top:1px solid rgba(var(--cream-rgb),.12);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  font-family:var(--ff-ui); font-size:var(--fs-cap);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:var(--fw-label);
  color:rgba(var(--cream-rgb),.62);
}
.ftr-bottom span:nth-child(2){ text-align:center; }
.ftr-bottom span:last-child{ text-align:right; }
@media (max-width:640px){
  .ftr-bottom{ grid-template-columns:1fr; gap:8px; }
  .ftr-bottom span:nth-child(2), .ftr-bottom span:last-child{ text-align:left; }
}

/* === FOCUS === */
:focus { outline:none; }
a:focus-visible, button:focus-visible {
  outline:2px solid currentColor; outline-offset:3px; border-radius:0;
}

/* === RESPONSIVE === */

/* Ultra-wide (>1920px) — ограничиваем макс. ширину контента */
@media (min-width:1921px) {
  .ftr-grid, .subnav ul, .ftr-bottom { max-width:1720px; }
  .hero-direction { padding-left:max(var(--gutter),5vw); padding-right:max(var(--gutter),5vw); }
}

/* Desktop / Laptop (≤1440px) — лёгкое уплотнение */
@media (max-width:1440px) {
  :root { --gutter: clamp(20px, 2.5vw, 36px); }
}

/* Narrow desktop / tablet landscape (≤1100px) */
@media (max-width:1100px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  #leadership .team-grid { grid-template-columns:repeat(2,1fr); }
  .cases-grid { grid-template-columns:repeat(8,1fr); }
  .case.c1, .case.c2 { grid-column:span 8; }
  .case.c3, .case.c4, .case.c5 { grid-column:span 4; aspect-ratio:1/1; }
  .process-step { grid-template-columns:80px minmax(0, 1fr); }
  .step-deliverable {
    grid-column:2 / 3; padding-left:0;
    border-left:0; border-top:1px solid rgba(var(--cream-rgb),.18);
    padding-top:14px; margin-top:14px;
  }
}

/* Tablet portrait (≤1024px) */
@media (max-width:1024px) {
  .ftr-grid { grid-template-columns:2fr 1fr 1fr; gap:36px; }
  .nav-meta { gap:16px; }
}

/* Tablet narrow (≤900px) — бургер-меню (как на главной) */
@media (max-width: 900px) {
  :root { --nav-h:64px; }
  .nav { padding:14px 16px; }
  .nav-burger { display:flex; }
  .nav.nav-open { mix-blend-mode:normal; background:var(--ink); color:var(--beige); }
  .nav-meta {
    position:fixed; left:0; right:0; top:0; z-index:1;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); color:var(--beige); padding:72px 20px 28px;
    transform:translateY(-105%); transition:transform .42s cubic-bezier(.65,0,.35,1);
  }
  .nav.nav-open .nav-meta { transform:translateY(0); }
  .nav-meta a { padding:16px 2px; font-size:18px; border-bottom:1px solid rgba(var(--cream-rgb),.12); }
  .nav-meta .nav-cta { border:1.5px solid var(--beige); border-radius:0; padding:12px 22px; margin-top:18px; align-self:flex-start; }
}

/* Обёртка лёгкого формата не должна ломать размеры логотипов:
   display:contents убирает её из раскладки, и правила ниже
   по-прежнему применяются к самой картинке. */
.logo-cell picture, .trust-track picture, .person .photo picture { display: contents; }

/* Ссылка «перейти к содержимому»: не видна, пока на неё не перешли
   клавишей Tab. Нужна тем, кто не пользуется мышью, — чтобы не проходить
   каждый раз всё меню. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 14px 20px;
  background: var(--red);
  color: var(--beige);
  font-weight:var(--fw-title);
  text-decoration: none;
  border-radius: 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

/* ============================================================
   Поверхности, которые рисует сам браузер, а не мы: выделение
   текста, курсор ввода, галочки и полоса прокрутки. По умолчанию
   они системно-синие и серые — этих цветов в сайте нет.
   ============================================================ */
::selection      { background: var(--red); color: var(--beige); text-shadow: none; }
::-moz-selection { background: var(--red); color: var(--beige); text-shadow: none; }

:root { accent-color: var(--red); caret-color: var(--red); }

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink-rgb), .42) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--ink-rgb), .38);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--ink-rgb), .62); background-clip: content-box; }

/* ============================================================
   Красный на графите. Фирменный #C51D34 на тёмном даёт контраст
   2,5 при норме 3 — заголовок сереет на неярком экране и на солнце.
   Ниже он подменяется осветлённым: тот же тон (352°), та же
   насыщенность, контраст 4,5. Подменяется сама переменная, поэтому
   всё внутри тёмной секции берёт светлый вариант само.
   Решение владельца 24.08.2026.
   ============================================================ */
.hero-direction,
.process,
.pains,
.cta-section,
.subnav,
.site-footer,
.service:hover,
.case .meta {
  --red: var(--red-lit);
}

/* Осветлённый красный — ТОЛЬКО для текста. Там, где красный работает
   заливкой, краска остаётся фирменной: кремовый текст на осветлённом
   фоне давал бы 2,9 вместо 4,5. Эти элементы возвращают исходную
   переменную даже внутри тёмных секций. */
.btn-primary,
.postlude,
.who,
.numbers,
.services.is-red,
.cta-card:hover,
.skip-link,
.person .photo .quote {
  --red: #C51D34;
}

/* ============================================================
   Отключённая анимация (настройка «уменьшить движение» в системе).
   Раньше общий файл её не учитывал вовсе — на 37 страницах лента
   логотипов ползла бесконечно, а остановить её можно было только
   наведением мыши.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  /* Появление заголовка — сразу в конечном виде. Просто выключить
     анимацию нельзя: текст начинается с прозрачности 0 и остался бы
     невидимым навсегда. */
  .direction-title,
  .direction-manifest,
  .direction-lede,
  .direction-cta {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Останавливаем то, что движется само по себе: именно оно укачивает. */
  .trust-track { animation: none; }
  .hero-scroll-hint { animation: none; }

  /* Подъём карточек убираем, но отклик оставляем — иначе непонятно,
     что наведение поймано. У карточки услуги остаётся заливка,
     у работы вместо сдвига появляется рамка. */
  .service:hover,
  .case:hover,
  .cta-card:hover { transform: none; }
  .case:hover { outline: 2px solid var(--red); outline-offset: -2px; }

  /* Переходы состояний НЕ отключаем: они короткие и запускаются самим
     человеком. Это обратная связь, а не самостоятельное движение. */
}

/* На телефоне услуги в две колонки давали строку в 10 знаков.
   Одна колонка — текст снова читается. Замер 25.08.2026. */
@media (max-width:700px){
  /* Четыре цифры в ряд не помещались на телефон: четвёртая уезжала
     за край экрана и обрезалась. Замер 25.08.2026. */
  .numbers { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:28px; }
}

/* Почта и длинные ссылки без пробелов распирали узкую колонку
   и вылезали за экран. Замер 25.08.2026. */
a, li, p, dd, .cc-line { overflow-wrap:break-word; }
a[href^="mailto:"], .case-details a { overflow-wrap:anywhere; }
.case .meta, .case-details { min-width:0; }

@media (max-width:560px){
  .services-grid { grid-template-columns:1fr; }
  .process-step { grid-template-columns:1fr; gap:12px; }
  .process-step .step-deliverable { grid-column:1 / -1; }
  /* Три колонки подвала на телефоне вылезали за экран на 62 точки */
  .ftr-grid { grid-template-columns:1fr; gap:28px; }
  /* Две карточки призыва не помещались рядом */
  .cta-grid { grid-template-columns:1fr; }
  /* Блоки в красной ленте стояли в три колонки и уезжали за экран */
  .postlude-grid { grid-template-columns:1fr; }
}

/* ============================================================
   КОЛОНКИ — классом, а не в разметке
   На нескольких страницах три колонки были вписаны прямо в тег.
   Вписанное в разметку сильнее файла стилей, поэтому на телефоне
   они оставались тремя и уезжали за край экрана. Замер 25.08.2026.
   ============================================================ */
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .g-3 { grid-template-columns: 1fr; } }

/* ============================================================
   ЛЕНТА РАБОТ НА СТРАНИЦЕ НАПРАВЛЕНИЯ — 26.08.2026
   До этого дня портфолио жило только на своей странице: с главной
   в него вёл лишь пункт меню, а на «Дизайне» работ не было вовсе.
   Здесь восемь работ этого направления и вход в полное портфолио.
   ============================================================ */
.works-strip { background:var(--paper); color:var(--ink); }
.works-strip .section-head { justify-content:space-between; align-items:flex-end; }
.ws-all {
  font-family:var(--ff-ui); font-size:var(--fs-meta); font-weight:var(--fw-label);
  letter-spacing:var(--ls-mono); text-transform:uppercase; color:inherit;
  text-decoration:none; white-space:nowrap; align-self:flex-end; margin-bottom:6px;
  border-bottom:2px solid var(--red); padding-bottom:6px; transition:color .25s;
}
.ws-all:hover { color:var(--red); }
.ws-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-top:clamp(24px,3vw,44px);
}
.ws-item { position:relative; overflow:hidden; display:block; aspect-ratio:5/4; background:var(--ink); }
.ws-item img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.ws-item:hover img { transform:scale(1.05); }
.ws-cap {
  position:absolute; inset:auto 0 0 0; padding:14px;
  background:linear-gradient(transparent, rgba(0,0,0,.78));
  color:var(--beige); opacity:0; transform:translateY(6px);
  transition:opacity .3s, transform .3s;
}
.ws-item:hover .ws-cap, .ws-item:focus-visible .ws-cap { opacity:1; transform:none; }
.ws-cap b { display:block; font-family:var(--ff-ui); font-size:var(--fs-cap);
  font-weight:var(--fw-strong); letter-spacing:.04em; }
.ws-cap i { display:block; font-style:normal; font-family:var(--ff-ui);
  font-size:var(--fs-meta); letter-spacing:var(--ls-mono); text-transform:uppercase;
  opacity:.75; margin-top:3px; }
@media (max-width:900px) { .ws-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px) { .ws-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .ws-cap { opacity:1; transform:none; padding:10px; } }

/* Переключатель языков в подвале — единственный вход на сайте
   с 25.08.2026, когда он был убран из шапки. */
.ftr-lang .nav-lang { display:inline-flex; align-items:center; gap:7px; }
.ftr-lang .nav-lang-link { color:inherit; text-decoration:none; opacity:.55; transition:opacity .2s; }
.ftr-lang .nav-lang-link:hover, .ftr-lang .nav-lang-link:focus-visible { opacity:1; }
.ftr-lang .nav-lang-link.active { opacity:1; font-weight:var(--fw-strong); }
.ftr-lang .nav-lang-sep { opacity:.3; }