/* ============================================
   45PIXELS — STYLES
   Правки цветов и шрифтов — здесь, в самом верху.
   ============================================ */

:root {
  /* ПАЛИТРА */
  --bg:        #20201F;  /* фон по умолчанию — везде, пока не решаем иначе */
  --coal:      #0D0D0D;  /* уголь — второй и последний чёрный в палитре.
                             Только для оттенения блоков (подвал, чередующиеся
                             секции кейса), никогда как общий фон страницы. */
  --paper:     #F2EDE4;  /* текст / бумага */
  --accent:    #D94F2B;  /* оранжевый акцент */
  --secondary: #1C3A52;  /* синий */

  --muted:     #8C8880;  /* ПРИГЛУШЁННЫЙ — НЕ ЦВЕТ ЧИТАЕМОГО ТЕКСТА.
                             Контраст с фоном 4.62 — впритык к норме, но норма
                             посчитана для обычного веса, а весь наш текст идёт
                             тонким (200). Тонкие штрихи на таком контрасте
                             растворяются.
                             Можно: капсовые ярлыки, номера шагов, подписи в
                             подвале, короткие сноски.
                             Нельзя: абзацы, буллеты, ответы — всё, что читают.
                             Читаемый текст всегда --paper.
                             Иерархию делаем размером и весом, а не контрастом. */
  --line:      #262626;  /* разделители */

  /* ШРИФТЫ */
  --display: "tablet-gothic-compressed", "Arial Narrow", sans-serif;
  --body:    "tablet-gothic", Arial, sans-serif;

  /* ВЕСА (как в PSD) */
  --w-thin:    200;  /* Thin    — основной текст */
  --w-regular: 400;  /* Regular — подзаголовки, кнопки */
  --w-bold:    700;  /* Bold    — мелкие подписи капсом (см. блок ниже) */
  --w-extra:   800;  /* Extrabold — только Compressed, для H1 */

  /* РАЗМЕРЫ ТЕКСТА — закрытый список из четырёх ступеней.
     Правило: новый текстовый блок берёт ОДИН из этих токенов.
     Ставить размер «на глаз» нельзя — так в стилях и завелось два
     десятка случайных чисел, из-за которых текст на разных страницах
     читался по-разному. Ступеней четыре, пятой не будет.

     --t-lead     интро секции. Одна штука на секцию, не больше.
     --t-body     ВЕСЬ читаемый текст. По умолчанию берём этот.
                    Опорная точка — текст кейса Borealis: он читается,
                    значит он и есть стандарт.
     --t-note     только служебное: подзаголовок под H2, сноска, чек.
     --t-caption  капсовые ярлыки (группы B и D). */
  --t-lead:    clamp(17px, 2vw, 21px);
  --t-body:    clamp(16px, 1.3vw, 18px);
  --t-note:    14px;
  --t-caption: 12px;

  /* СЕТКА */
  --max: 1200px;
  --pad: 24px;
}

/* ============================================
   БАЗА
   ============================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--body);
  font-weight: var(--w-thin);  /* весь обычный текст — тонкий по умолчанию,
                                   если явно не переопределён */
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* защита от горизонтального скролла из-за наклонных элементов */
}

img { max-width: 100%; display: block; }

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

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ============================================
   ТИПОГРАФИКА
   ============================================ */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: var(--w-extra);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
}

h1 { font-size: clamp(56px, 11vw, 158px); }  /* 157pt в PSD */
h2 { font-size: clamp(32px, 5vw, 56px); }
h3 { font-size: clamp(20px, 2.4vw, 28px); }

/* Мелкие подписи капсом: кнопки, теги, подписи к цитатам, пункты меню,
   лейблы в кейсах. Единая роль — единое правило. Каждый селектор ниже
   по коду добавляет только то, что у него реально своё: цвет, размер,
   отступы. Шрифт/вес/трекинг/капс — здесь и только здесь.
   Новая подпись капсом на сайте — дописывай её сюда, а не изобретай
   очередное число трекинга на глаз. */
.btn, .nav, .hero__sub, .card__badge, .card__title, .service .link,
.site-footer .links, .case-hero__tag, .case-block__label, .eyebrow, .doors {
  font-family: var(--body);
  font-weight: var(--w-bold);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

/* Группа D — тонкий капс. Не ярлык (группа B — жирная, трекинг 35),
   а спокойная подпись-квалификатор НАД чем-то более важным: широкий
   трекинг и лёгкий вес дают воздух и контраст с тем, что стоит рядом.
   Первое применение — тег над названием кейса на карточках портфолио.
   Второе — лейблы блоков на странице About (WHY, WHAT, WHO...).
   Сюда же добавляй следующие места с той же ролью по мере появления. */
.card__tag, .about-block__label, .step__num, .case-split__label, .case-meta__client {
  font-family: var(--body);
  font-weight: var(--w-thin);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Подписи и вспомогательный текст: имя под цитатой, статус-строка перед
   отзывами, строка в подвале. Роль другая, чем у группы B — это не ярлык,
   который глаз опознаёт боковым зрением, а текст, который читают: имя
   человека, факт, контекст. Поэтому не капс и не bold — наследует обычный
   вес body (200) и просто чуть мельче основного текста.
   <cite> в браузерах курсивом по умолчанию — снимаем. */
.quote cite,
.case-result__quote cite {
  font-style: normal;
}

p { margin: 0 0 1em; }

/* Ярлык над заголовком (WHY, CRAFT, CHAPTER 01...).
   Сдвиг вправо — фирменный приём, применяется везде одинаково. */
.eyebrow {
  font-size: var(--t-caption);
  color: var(--accent);
  margin: 0 0 10px 20px;  /* 20px — тот самый сдвиг */
}

.lead {
  font-size: var(--t-lead);
  color: var(--paper);
  max-width: 46ch;
}

.note {
  font-size: var(--t-note);
  color: var(--muted);
}

/* ============================================
   КНОПКИ
   ============================================ */

.btn {
  display: inline-block;
  padding: 12px 22px;
  font-size: clamp(13px, 1.1vw, 16px);
  border: 3px solid var(--accent);   /* 3px — как во всех оранжевых линиях */
  color: var(--paper);
  transition: background 0.18s ease, color 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--accent);
  color: var(--bg);
}

/* Основной (якорный) вариант — заливкой */
.btn--solid {
  background: var(--accent);
  color: var(--bg);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: transparent;
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 22px;
}

/* ============================================
   ШАПКА
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Логотип — инлайновый SVG.
   Цвет задаётся здесь, через color: SVG внутри наследует его благодаря
   fill="currentColor". Поэтому перекраска на наведении — одна строка,
   без второго файла и без фильтров.

   ШАПКА  — знак без подписи.
   ПОДВАЛ — полный лок-ап: там есть высота, и «Pixels» читается. */
.logo {
  display: block;
  line-height: 0;
  color: var(--accent);
  transition: color 0.18s ease;
}

.logo:hover,
.logo:focus-visible { color: var(--paper); }

.logo svg {
  height: 38px;
  width: auto;
  display: block;
}

/* Полный лок-ап — только там, где хватает высоты.
   124px не с потолка: «Pixels» — это 9% высоты лок-апа, значит при 124px
   подпись выходит ~11px и читается. Меньше — превращается в грязь. */
.logo--full svg { height: 124px; }

.nav {
  display: flex;
  gap: 26px;
  font-size: 12px;
}

.nav a { color: var(--muted); }
.nav a:hover,
.nav a[aria-current="page"] { color: var(--paper); }

/* Текущая страница помечена оранжевым — тем же акцентом, что и штрих
   в мобильном меню. box-shadow, а не border: не занимает места и не
   сдвигает соседние пункты. */
.nav a[aria-current="page"] { box-shadow: 0 2px 0 var(--accent); }

/* ============================================
   СЕКЦИИ
   ============================================ */

.section {
  padding: clamp(64px, 9vw, 120px) 0;
}

.section + .section { border-top: 1px solid var(--line); }

.section__head { margin-bottom: 48px; }

/* Вводная строка под H2 секции. НЕ .note: сноска — это то, что дочитывают
   в конце, а это — то, с чего начинают читать секцию. Поэтому крупнее
   и обычным цветом. */
.section__sub {
  font-size: var(--t-lead);
  color: var(--paper);
  max-width: 52ch;
  margin: 14px 0 0;
}

/* ============================================
   HERO
   ============================================ */

.hero {
  position: relative;
  overflow: hidden;   /* треугольник может выходить за край — но не даёт горизонтального скролла */
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 88px);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

/* Подзаголовок: Regular 28pt, трекинг 35, капс, оранжевый */
.hero__sub {
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.2;
  color: var(--accent);
  margin: 10px 0 28px;
}

/* Основной текст: Thin 28pt */
.hero__lead,
.hero__start {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--paper);
  margin: 0;
}

.hero__text { max-width: 620px; }   /* текст физически не дотянется до треугольника */

/* Смысловая пауза перед строкой «Start with one label…» */
.hero__start { margin-top: clamp(48px, 8vw, 130px); }

.hero .btn-row { margin: 26px 0 0; }

/* ФИГУРЫ В HERO — четыре штуки, одна поверх другой, видна одна */
.hero__art {
  position: relative;
  pointer-events: none;   /* не перехватывает клики по ссылкам под ним */
  width: 100%;
  aspect-ratio: 640 / 690;
}

.hero__art .shape {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* переход резкий: никакого transition — так и задумано */
}

.hero__art .shape.is-active {
  opacity: 1;
  visibility: visible;
}

.hero__art svg { width: 100%; height: 100%; overflow: visible; }

/* ============================================
   ПОРТФОЛИО
   ============================================ */

/* ============================================
   ЗАГОЛОВОК СТРАНИЦЫ (Work, Services, About…)
   ============================================ */

.page-head {
  padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 4vw, 48px);
}

.page-head h1 {
  font-size: clamp(48px, 8vw, 110px);
  margin-bottom: 22px;
}

.page-head__lead {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--paper);
  max-width: 52ch;
  margin: 0;
}

/* ============================================
   ПОРТФОЛИО
   ============================================ */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--coal);
}

.card picture,
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.card picture img { aspect-ratio: auto; transition: none; }

.card:hover picture,
.card:hover img { transform: scale(1.04); }

/* Карточка кейса, который ещё не написан. Картинка притушена,
   бейдж честно предупреждает до клика — это не обман, это список дел. */
.card--pending picture,
.card--pending img { filter: grayscale(45%) brightness(0.6); }

.card--pending:hover picture,
.card--pending:hover img { filter: grayscale(20%) brightness(0.7); }

.card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--paper);
  background: rgba(13, 13, 13, 0.82);
  border: 1px solid var(--accent);
}

/* Плашка стоит ПОД картинкой отдельным блоком, а не наложена поверх неё —
   фото остаётся целым, ничего не перекрыто градиентом.
   Высота фиксирована (96px, посчитано под самый крупный заголовок с запасом),
   содержимое центрируется по вертикали через flex, а не вручную подобранным
   padding-top/bottom — так оно не съезжает при смене размера clamp().
   overflow: hidden — подстраховка на случай переноса названия на 2 строки. */
.card__body {
  min-height: 96px;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  background: var(--coal);
  overflow: hidden;
}

.card__tag {
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 6px;
}

.card__title { font-size: clamp(17px, 1.9vw, 22px); }

/* Строка масштаба под названием кейса. Переводит карточку из «красивая
   работа» в «доказанное решение». Числа только проверенные — см. реестр. */
.card__fact {
  font-size: var(--t-caption);
  color: var(--muted);
  margin: 6px 0 0;
}

/* ============================================
   УСЛУГИ
   ============================================ */

.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

/* Название услуги стоит НАД картинкой */
.service h3 { margin-bottom: 14px; }

/* Карусель услуги: три кадра друг на друге, виден один.
   Рамка держит высоту, чтобы блок не прыгал при смене. */
.service .slides {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* квадрат — как в PSD (387x387) */
  margin-bottom: 16px;
  background: var(--coal);   /* если кадр ещё не загрузился */
}

/* Правила ниже не завязаны на .service: .slides — универсальный
   карусельный блок, его использует и главная (.service .slides),
   и карточки сервисов (.chapter__media .slides). Держит их только
   общий JS-движок (см. <script> в конце страницы) и класс .slides. */
.slides picture {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  /* переход резкий: никакого transition — так и задумано */
}

.slides picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slides picture.is-active {
  opacity: 1;
  visibility: visible;
}

/* Карусель внутри карточки сервиса (services.html, .chapter__media).
   Пропорция 1:1 — ровно такая, какие исходники (все кадры 1200x1200).
   Раньше здесь стояло 4:3, и object-fit: cover срезал квадрату верх и низ:
   у коллажей отваливался нижний ряд. Держать надо формат ИСХОДНИКА,
   иначе кроп съедает содержимое. */
.chapter__media .slides {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--coal);
}

/* Подпись под услугой — это текст, который читают, а не служебная сноска.
   Был 15px приглушённым: мелко и низкий контраст, подписи проваливались.
   Теперь обычный body-размер и обычный цвет текста. */
.service p { font-size: var(--t-body); color: var(--paper); }

.service .link {
  font-size: 12px;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}

.service .link:hover { border-color: var(--accent); }

/* ============================================
   TRUE STORY
   ============================================ */

.story {
  border-left: 2px solid var(--accent);
  padding-left: 24px;
  max-width: 62ch;
}

.story p:first-of-type {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
}

.story .note { margin-top: 22px; }

/* ============================================
   ОТЗЫВЫ
   ============================================ */

/* Строка доверия над отзывами: площадка, статус, рейтинг, стаж.
   Тот же оранжевый ограничитель слева, что и у True story — один приём. */
.creds {
  border-left: 2px solid var(--accent);
  padding-left: 24px;
  margin-bottom: 44px;
}

.creds p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper);
}

/* Вторичная атрибуция — короткая сноска под главным доказательством.
   Здесь --muted допустим: это ровно тот служебный случай, для которого
   он и заведён (см. комментарий в :root), а не читаемый текст. */
.creds__source {
  margin-top: 4px !important;
  font-size: var(--t-note);
  color: var(--muted) !important;
}

.quotes {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;   /* отзывы разной длины — держим по верхнему краю */
  gap: 32px;
}

.quote p {
  font-size: 15px;
  color: var(--paper);
  margin-bottom: 10px;
}

.quote cite {
  font-style: normal;
  font-size: 13px;
  color: var(--accent);
}

/* ============================================
   ФИНАЛЬНЫЙ ПРИЗЫВ + ПОДВАЛ
   ============================================ */

/* ============================================
   СЛЕДУЮЩИЙ КЕЙС
   Кольцевая навигация в конце каждой страницы кейса. До неё все
   восемнадцать страниц были тупиками: дочитал — и упёрся в CTA.
   ============================================ */

.next-case { border-top: 1px solid var(--line); }
.next-case .eyebrow { margin-bottom: 20px; }

.next-case__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}

.next-case__link img {
  width: 100%;
  height: auto;
  display: block;
}

.next-case__title {
  margin: 6px 0 0;
  transition: color .2s;
}

.next-case__link:hover .next-case__title { color: var(--accent); }

.next-case__all {
  margin: 28px 0 0;
  font-size: var(--t-caption);
  color: var(--muted);
}
.next-case__all a { border-bottom: 1px solid var(--accent); }
.next-case__all a:hover { color: var(--accent); }

@media (min-width: 700px) {
  .next-case__link { grid-template-columns: 320px 1fr; gap: 32px; }
}

.closing { text-align: center; }
.closing h2 { margin-bottom: 18px; }
.closing p { font-size: var(--t-body); color: var(--paper); max-width: 46ch; margin: 0 auto 28px; }
.closing .btn-row { justify-content: center; }

.site-footer {
  background: var(--coal);
  border-top: 1px solid var(--line);
  padding: 32px 0;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  justify-content: space-between;
}

.site-footer .links {
  display: flex;
  gap: 24px;
  font-size: 12px;
}

.site-footer .links a { color: var(--muted); }
.site-footer .links a:hover { color: var(--accent); }

.site-footer .tagline { font-size: 12px; color: var(--muted); }

/* ============================================
   АДАПТИВ
   Правило простое: сначала пишем мобильную версию (выше),
   потом расширяем на больших экранах (ниже).
   ============================================ */

/* Планшет */
@media (min-width: 700px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 24px; }        /* 588 + 24 + 588 = 1200 */
  .services { grid-template-columns: repeat(3, 1fr); gap: 20px; } /* 387 x3 + 20 x2 = 1200 */
  .quotes { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
}

/* Десктоп */
@media (min-width: 1000px) {
  :root { --pad: 40px; }

  .hero__grid {
    grid-template-columns: 1fr;   /* текст держит свою колонку */
    gap: 0;
  }

  /* Треугольник — отдельным слоем справа, вне потока текста.
     Может залезать на текстовую колонку и выходить за край экрана. */
  .hero__art {
    position: absolute;
    top: 50%;
    right: 0;
    width: 42%;
    max-width: 560px;   /* треугольник — спутник заголовка, а не фон */
    transform: translateY(-50%);
  }

  .quotes { grid-template-columns: repeat(4, 1fr); }

  /* Страница Work: работ много — сетка в три колонки, читается как указатель.
     На главной остаются две: там четыре карточки-витрины, им нужен размер. */
  .cards--all { grid-template-columns: repeat(3, 1fr); }
}

/* Мобильный и планшет: фигура встаёт под текст, обычным блоком */
@media (max-width: 999px) {
  .hero__art { margin-top: 48px; }
}

/* Телефон: фигура ПЕРЕД заголовком.
   Карусель — это четыре лица, а слоган обещает лицо. Сначала показываем,
   потом заявляем: на маленьком экране доказательство должно идти первым,
   иначе его видит только тот, кто домотал до конца героя.

   Переставляем через order, а не в разметке: в коде H1 остаётся первым
   (поиск и скринридеры читают исходный порядок), меняется только вид.
   Сама фигура aria-hidden, так что расхождение порядка ничего не ломает.

   Отступы срезаны сознательно: фигура почти квадратная и на всю ширину
   занимает ~370px. Без этого «Be a brand.» уходит за нижний край, и мы
   меняем позиционирование на картинку. Нужно, чтобы в первый экран попали
   оба — и лицо, и заголовок. */
@media (max-width: 699px) {
  .hero { padding-top: 20px; }

  .hero__grid { gap: 24px; }

  .hero__art {
    order: -1;
    margin-top: 0;
    max-width: 320px;   /* не даём фигуре съесть весь экран на крупных телефонах */
  }
}

/* ============================================
   МОБИЛЬНОЕ МЕНЮ
   Панель позиционируется ABSOLUTE внутри .site-header, а не FIXED.
   Причина: у шапки есть backdrop-filter, а он (как filter и transform)
   создаёт containing block для fixed-потомков — панель прилипла бы к
   64px шапки вместо экрана. Шапка position:sticky, то есть уже
   позиционирована, поэтому absolute от неё считается корректно.
   ============================================ */

.nav-toggle {
  display: none;              /* на десктопе бургера нет */
  width: 44px;                /* 44px — минимальная комфортная цель для пальца */
  height: 44px;
  margin-right: -10px;        /* оптически выравниваем к краю .wrap */
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper);
  cursor: pointer;
  align-items: center;
  justify-content: flex-end;
}

.nav-toggle__box {
  position: relative;
  display: block;
  width: 22px;
  height: 12px;
}

/* Три штриха. Средний прячется, крайние складываются в косой крест. */
.nav-toggle__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;               /* волосяная линия — в тон тонкому тексту сайта */
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.16s ease;
}
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 50%; margin-top: -0.5px; }
.nav-toggle__box span:nth-child(3) { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

@media (max-width: 699px) {
  .nav-toggle { display: flex; }

  .nav {
    position: absolute;
    top: 100%;                        /* сразу под шапкой */
    left: 0;
    right: 0;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);      /* dvh — чтобы адресная строка не резала низ */
    background: var(--bg);
    border-top: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 8px var(--pad) 40px;
    font-size: 15px;
    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Пункты — во всю ширину, с волосяными разделителями. Крупная цель
     для пальца, никакого декора: список, а не «меню-витрина». */
  .nav a {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child { border-bottom: 0; }

  /* Текущая страница помечена штрихом слева, а не цветом:
     --muted для читаемого текста мы не используем. */
  .nav a[aria-current="page"] {
    color: var(--paper);
    box-shadow: inset 2px 0 0 var(--accent);
    padding-left: 14px;
  }
}

/* ============================================
   СТРАНИЦА КЕЙСА
   Это шаблон для всех 13 кейсов — секции нейтральные и переиспользуемые,
   меняются только текст и картинки. Не придумывай новую структуру под
   каждый проект, иначе 13 кейсов превратятся в 13 разных сайтов.
   ============================================ */

.case-hero {
  padding: clamp(40px, 6vw, 72px) 0 0;
}

.case-hero__tag {
  font-size: 13px;
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 14px;
}

.case-hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  max-width: 22ch;
  margin-bottom: clamp(20px, 3vw, 28px);
}

/* МЕТА-СТРОКА — обязательна в каждом кейсе.
   Клиент и страна — чтобы «работаю по всему миру» читалось не лозунгом, а
   списком фактов. SCOPE пишется словами из прайса (packaging / illustration /
   merch system), а не общими («design», «identity»): слово «design» ничего не
   сообщает — сайт дизайнера и так открыт. Слова прайса сцепляют кейс с
   услугами: клиент читает в кейсе ровно то, что покупает на Services.

   Клиент и scope стоят на одной строке, на одной линии шрифта — это факт
   и его уточнение, а не два разных по значимости объявления. Клиент чуть
   крупнее (--t-note против --t-caption у scope) — единственная разница
   в размере, не в контрасте (см. правило про --muted выше в файле). */
.case-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 4px;
  margin-bottom: clamp(32px, 5vw, 52px);
}

.case-meta__client {
  font-size: var(--t-note);
  color: var(--muted);
  margin: 0;
}

/* Ссылка на живого клиента внутри строки заказчика. Подчёркивание —
   акцентом, а не --line (#262626 на тёмном фоне не видно вовсе).
   Правило по сайту одно: всё, что можно проверить, помечено акцентом. */
.case-meta__client a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color .2s;
}
.case-meta__client a:hover { color: var(--accent); }

/* .eyebrow здесь — не лейбл над заголовком (его обычная роль в остальных
   местах сайта), а вторая часть той же строки: фирменный сдвиг вправо
   тут неуместен, отменяем его и ставим точку-разделитель вместо него. */
.case-meta .eyebrow {
  margin: 0;
  color: var(--muted);
}

.case-meta .eyebrow::before {
  content: "·";
  margin-right: 12px;
  color: var(--muted);
}

/* ШАПКА КЕЙСА — два кадра в НАХЛЁСТ, а не одна картинка на всю ширину.
   Одиночный кадр во всю ширину требует идеального исходника: любой слабый
   кроп или мягкая резкость лезут в глаза на 1200px. Нахлёст решает это по
   существу — не «прячет» плохую фотографию, а меняет задачу: широкий кадр
   даёт контекст, продуктовый наезжает сверху и забирает фокус. Глаз читает
   композицию, а не оценивает один снимок.
   Тот же приём, что на About: два элемента заходят друг на друга, вместо
   того чтобы стоять встык. */
.case-hero__pair { position: relative; }

.case-hero__back img,
.case-hero__front img {
  width: 100%;
  height: auto;
  display: block;
}

/* Задний кадр слегка обесцвечен — глаз читает более насыщенный цвет как
   «ближе, важнее» без единого добавленного элемента на холст. Чисто
   фотографический приём, ничего не может выглядеть дёшево, потому что
   ничего не украшено — только перераспределён фокус. */
.case-hero__back img { filter: saturate(0.45) brightness(0.92); }

.case-hero__front { position: relative; }

/* Типографские регистрационные метки — те крестики-мишени, что печатник
   ставит по углам тиража для совмещения красок. Не рамка и не декор:
   подпись специалиста, который знает, как физически рождается этикетка —
   ровно то, что FAQ обещает словами («print-ready files, checked against
   your printer's specs»). Только на переднем кадре: он один играет роль
   «продукта, готового к печати», задний — контекст.
   Разметка: четыре .reg-mark span в HTML, крест = линия 1px по вертикали
   и горизонтали через ::before/::after самого span. */
.reg-mark { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.reg-mark::before,
.reg-mark::after { content: ""; position: absolute; background: var(--accent); }
.reg-mark::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.reg-mark::after  { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }
.reg-mark--tl { top: 8px; left: 8px; }
.reg-mark--tr { top: 8px; right: 8px; }
.reg-mark--bl { bottom: 8px; left: 8px; }
.reg-mark--br { bottom: 8px; right: 8px; }

/* На мобильном нахлёста нет — он превратился бы в кашу на узкой колонке.
   Кадры просто идут друг за другом, передний чуть уже и сдвинут вправо,
   чтобы намёк на композицию остался. */
.case-hero__front {
  width: 72%;
  margin: -12% 0 0 auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

@media (min-width: 800px) {
  .case-hero__back  { width: 74%; }

  /* Передний кадр вынут из потока и положен поверх заднего справа-снизу.
     Проценты, не пиксели: нахлёст должен быть пропорционален ширине
     контейнера, иначе на широком экране он станет щелью, а на узком — кашей. */
  .case-hero__front {
    position: absolute;
    right: 0;
    bottom: -8%;
    width: 34%;
    margin: 0;
  }

  /* Плашка не даёт следующему блоку налезть на выступающий угол фото. */
  .case-hero__pair { margin-bottom: 8%; }
}

/* ============================================
   CASE HERO — SPLIT VARIANT (front-left / back-right)

   Базовый .case-hero__pair (выше) — задний кадр во всю ширину, передний
   продуктовый нахлёстывает справа-снизу. Это ПРАВИЛО для всех кейсов.
   Но само соотношение и то, какой кадр где, — решение под конкретный
   проект (см. заметку у .case-hero__pair). Здесь — зеркальный вариант:
   продуктовый кадр слева, контекстный — справа. Используется через
   модификатор .case-hero__pair--split, добавляемый ВМЕСТЕ с базовым
   .case-hero__pair (тот даёт .case-hero__back/__front общую вёрстку
   картинок, этот — раскладку и flex).
   ============================================ */
.case-hero__pair--split {
  display: flex;
  align-items: stretch;
  aspect-ratio: 2.1 / 1;
  overflow: hidden;
}

.case-hero__pair--split .case-hero__front,
.case-hero__pair--split .case-hero__back {
  position: relative;
  height: 100%;
  margin: 0;
  box-shadow: none;
}

.case-hero__pair--split .case-hero__back img,
.case-hero__pair--split .case-hero__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-hero__pair--split .case-hero__back  { width: 70%; }
.case-hero__pair--split .case-hero__front { width: 30%; flex-shrink: 0; }

/* KOSMOS — форма выреза переднего кадра повторяет силуэт индивидуальной
   вырубки этикетки (см. фотошоп-макет заказчика). Точки в процентах от
   бокса .case-hero__front, не от всей шапки. Крестики reg-mark для этого
   кейса намеренно убраны — на нестандартной форме они не читаются как
   типографская метка, а выглядят как случайный декор. */
.case-hero__pair--kosmos .case-hero__front {
  clip-path: polygon(60% 7%, 97% 30%, 61% 100%, 21% 35%);
}

@media (max-width: 799px) {
  /* На мобильном нахлёст и вырез убираем — прямоугольники друг под другом,
     тот же принцип, что у базового варианта. */
  .case-hero__pair--split {
    flex-direction: column;
    aspect-ratio: auto;
  }
  .case-hero__pair--split .case-hero__back,
  .case-hero__pair--split .case-hero__front {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .case-hero__pair--kosmos .case-hero__front { clip-path: none; }
}


/* ============================================
   CASE HERO — CONTAINED FULL-WIDTH VARIANT

   Для кейсов с готовой, уже скомпонованной фотографией (не наша вёрстка
   нахлёста, а авторская композиция целиком) — картинка на всю ширину
   .wrap, тот же принцип, что у .case-hero__pair в Borealis: не шире
   колонки контента, без выхода за края экрана. Если в файле прозрачные
   области (PNG) — сквозь них будет виден --bg страницы, а не белый угол,
   так что кадр любой формы (не только прямоугольник) читается на сайте
   как единое целое, а не как картинка "в рамке". */
.case-hero__full {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.case-hero__full img {
  width: 100%;
  height: auto;
  display: block;
}

/* Вариант, когда в шапке не фото, а логотип на прозрачном фоне
   (кейс Summer Jam). Не тянем на всю ширину — центрируем с воздухом,
   иначе логотип разлезается и теряет плотность. */
.case-hero__full--logo {
  display: flex;
  justify-content: center;
  padding: clamp(24px, 5vw, 56px) 0;
}

.case-hero__full--logo img {
  width: auto;
  max-width: min(560px, 80%);
  height: auto;
}


/* ============================================
   CASE HERO — INFINITE MARQUEE VARIANT

   Единственный кейс на сайте, где шапка намеренно выходит за пределы
   .wrap на всю ширину экрана (100vw): длинный панорамный ряд бутылок
   едет бесконечной лентой. Здесь это оправдано — эффект бесконечности
   держится на том, что лента упирается в оба края вьюпорта; внутри
   .wrap с отступами он бы не читался. Для обычных кейсов (одна цельная
   фотография) используем .case-hero__full — контейнерный, см. выше.

   Механика: .track содержит ДВЕ одинаковые копии панорамы подряд;
   анимация сдвигает трек на -50% его собственной ширины — то есть
   ровно на одну копию — и по кругу. Стык не виден, потому что вторая
   копия побитово совпадает с первой. object-fit не нужен: высота кадра
   фиксирована, ширина — auto, соотношение сторон сохраняется. */
.case-hero__marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.case-hero__marquee-track {
  display: flex;
  width: max-content;
  animation: case-hero-marquee-scroll 26s linear infinite;
}

.case-hero__marquee-track picture {
  display: flex;
  flex: 0 0 auto;
}

.case-hero__marquee-track img {
  height: clamp(220px, 32vw, 460px);
  width: auto;
  aspect-ratio: 3145 / 920; /* точное соотношение исходника — браузер резервирует
  ширину ДО загрузки картинки, иначе трек «прыгает» в момент догрузки и анимация
  идёт вразнобой с реальной раскладкой. */
  display: block;
  flex-shrink: 0;
}

@keyframes case-hero-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .case-hero__marquee-track { animation: none; }
}


/* Текстовые блоки: Challenge / Face / What stayed-changed / The world.
   Оранжевый ограничитель слева — тот же приём, что у True Story и у creds
   перед отзывами. Один приём, повторённый по сайту, а не три разных. */
.case-block { padding: clamp(32px, 5vw, 52px) 0; }
/* Раньше .case-block--alt красил каждый второй блок в --coal — на реальной
   странице это читалось как случайная зебра (то серый, то чёрный), а не
   как ритм. Убрано: все текстовые блоки кейса теперь на одном фоне. */
.case-block--alt { background: transparent; }

.case-block__grid {
  display: grid;
  gap: 16px;
}

.case-block__label {
  font-size: 12px;
  font-weight: var(--w-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  height: fit-content;
}

.case-block__text {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--paper);
  max-width: 62ch;
}

.case-block__text p + p { margin-top: 1em; }

/* Модификатор для блоков-легенд (напр. "The story" у Kosmos): курсивом
   отделяем повествование от констатации фактов, но кегль — тот же,
   что у остального боди-текста (var(--t-body) уже задан в .case-block__text
   выше). Отличие только в начертании, не в размере. */
.case-block__text--italic { font-style: italic; }

/* Галерея: masonry через CSS columns, не grid.
   Картинки НЕ обрезаются в квадрат — каждая сохраняет свои родные пропорции
   (кадрирование делается один раз при подготовке файла: ширина фиксируется,
   высота подстраивается). Горизонтальная картинка шире, вертикальная —
   выше, квадрат — квадрат; все текут по колонкам сверху вниз.
   break-inside: avoid не даёт браузеру разрезать карточку между колонками. */
.case-gallery-section { padding: clamp(32px, 5vw, 52px) 0; }

/* На телефоне — ОДНА колонка. В двух паковка на 360px ужимается до
   ~160px, и этикетка (ради которой кадр и снят) перестаёт читаться.
   Дальше по ступеням: 2 с крупного телефона, 3 с планшета, 4 на десктопе. */
.case-gallery {
  columns: 1;
  column-gap: 16px;
}

@media (min-width: 480px) {
  .case-gallery { columns: 2; }
}

.case-gallery__item {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: var(--coal);
  overflow: hidden;
  cursor: zoom-in;
  break-inside: avoid;
}

.case-gallery__item picture,
.case-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.case-gallery__item:hover img { transform: scale(1.04); }

.case-gallery__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Лайтбокс: полноэкранный просмотр с пролистыванием.
   Скрыт по умолчанию (display:none) — от display, не opacity,
   чтобы не перехватывал клики и Tab, пока закрыт. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 13, 0.94);
}

.lightbox.is-open { display: flex; }

.lightbox__image {
  max-width: 88vw;
  max-height: 84vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* Возврат кадра на место, если свайп не дотянул до порога. Во время
     самого перетаскивания переход снимается из JS (transition: none),
     иначе картинка отставала бы от пальца. */
  transition: transform 0.22s ease, opacity 0.22s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Экран лайтбокса не выделяется при протягивании пальцем. */
.lightbox { -webkit-user-select: none; user-select: none; }

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  border: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font-family: var(--display);
  line-height: 1;
  transition: color 0.18s ease;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { color: var(--accent); }

.lightbox__close {
  top: 20px;
  right: 20px;
  font-size: 36px;
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 56px;
  padding: 12px 18px;
}

.lightbox__prev { left: 8px; }
.lightbox__next { right: 8px; }

@media (max-width: 699px) {
  .lightbox__prev,
  .lightbox__next { font-size: 40px; padding: 8px 12px; }
  .lightbox__close { top: 12px; right: 12px; }
}

/* Результат: отзыв клиента как смысловой якорь кейса — то самое место,
   где случайный посетитель встречает историю, а не просто галерею. */
.case-result { padding: clamp(40px, 6vw, 64px) 0; }

/* Ссылка внутри текста кейса — на публикацию о клиенте или на его сайт.
   Подчёркивание обязательно: глобальное правило снимает его у всех ссылок,
   а непомеченная ссылка = утверждение, которое читатель не может проверить.
   Акцентный цвет, а не line: её задача — быть найденной. */
.case-block__text a,
.case-result__quote a {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color .2s;
}
.case-block__text a:hover,
.case-result__quote a:hover { color: var(--accent); }

.case-result__quote {
  max-width: 62ch;
  margin: 0;
}

.case-result__quote p {
  font-family: var(--body);
  font-weight: var(--w-regular);
  /* Раньше цитата шла дисплейным шрифтом на увеличенном кегле — рядом с
     остальным телом кейса это читалось как случайно другой размер, а не
     как приём. Теперь тот же кегль, что у любого читаемого текста на
     сайте: цитата — это текст, а не заголовок. */
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--paper);
  margin-bottom: 20px;
}

.case-result__quote cite {
  font-style: normal;
  font-size: var(--t-caption);
  color: var(--accent);
}

@media (min-width: 700px) {
  .case-gallery { columns: 3; }
}

@media (min-width: 1000px) {
  .case-block__grid {
    grid-template-columns: 220px 1fr;
    gap: 48px;
  }
  .case-gallery { columns: 4; }
}

/* ============================================
   СТРАНИЦА ABOUT
   ============================================ */

.about-hero {
  padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 56px);
}

.about-hero__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.about-hero__text { max-width: 46ch; }

.about-hero__lead {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  margin-top: 14px;
}

/* Вторая часть лида — оговорка про материал. Тише первой: она отвечает
   на вопрос «а не сгенерировано ли», но не должна быть первым, что
   человек прочитает на странице. Позиционирование делает абзац выше. */
.about-hero__lead--note {
  color: var(--muted);
  margin-top: 12px;
}

/* Видео — квадрат, чуть крупнее строки заголовка рядом.
   Играет один раз (JS не даёт loop), останавливается на последнем кадре. */
.about-hero__video {
  width: clamp(210px, 24vw, 330px);  /* ×1.5 от прежнего clamp(140px, 16vw, 220px) */
  flex-shrink: 0;
}

.about-hero__video video {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  cursor: pointer;

  /* Видео хранится в YUV (сжатие с потерями) и физически не может
     держать точный #20201F фона — на выходе всегда всплывает то
     #1E1E1E, то #1F1F1C, край квадрата видно на фоне сайта.
     Подгонять цвет бессмысленно: он снова уплывёт при следующем
     экспорте. Вместо этого фон видео задавлен в чистый чёрный
     (ffmpeg colorlevels), а тут — lighten: на каждый пиксель берётся
     то, что светлее — видео или фон страницы. Чёрный темнее фона →
     побеждает страница, квадрат исчезает. Белая линия человечка
     светлее — побеждает она, рисуется как есть. Ошибка не подогнана,
     а перестала существовать: сработает на любом фоне, попадать
     точно в цвет больше не нужно. */
  mix-blend-mode: lighten;
}

/* Блок «лейбл + заголовок + текст» — костяк почти всей страницы About.
   Лейбл — та же роль (группа D, тонкий капс), что и .card__tag в портфолио:
   спокойная подпись-квалификатор над чем-то более важным. */
.about-block { padding: clamp(28px, 4.5vw, 44px) 0; }

.about-block__label {
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 10px;
}

.about-block h2 { margin-bottom: 14px; }

.about-block p {
  max-width: 62ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

.about-block p + p { margin-top: 1em; }

/* WHO — первое и единственное применение синего акцента на сайте.
   Сплошная плашка на всю ширину, точечно, не растаскиваем по другим блокам.
   Нижний отступ намеренно больше верхнего и больше, чем у соседних блоков —
   плашка «утекает» вниз за пределы своего текста, и фото леттеринга из
   следующего блока подтягивается вверх ей навстречу (см. .about-pair__image
   в медиа-запросе ниже). Величина — в em, не в px, чтобы нахлёст был
   пропорционален контенту на любой desktop-ширине, а не «дырой» на широком
   экране и перебором на узком. */
.about-block--navy {
  background: var(--secondary);
  padding-bottom: calc(clamp(28px, 4.5vw, 44px) + 4.5em);
}

/* CRAFT + DISCIPLINE — два .about-block подряд слева, фото леттеринга
   справа, по высоте примерно равное обоим блокам вместе. На мобильном
   просто встают друг под другом. */
.about-pair { padding: clamp(28px, 4.5vw, 44px) 0; }

.about-pair__text .about-block--tight { padding: 0 0 clamp(24px, 4vw, 36px); }
.about-pair__text .about-block--tight:last-child { padding-bottom: 0; }

.about-pair__image { display: none; }  /* показываем только от 1000px, см. медиа-запрос */

.about-pair__photo {
  display: block;
  width: 100%;
  transform: rotate(-4deg);
  border: 19px solid var(--accent);  /* та же толщина, что у обводки hero-фигур
                                         на главной: 22 ед. SVG × масштаб 0.875
                                         при типичной ширине контейнера 560px */
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.about-pair__photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* CUSTOMERS — тот же приём оранжевого ограничителя слева, что у True Story
   и у creds перед отзывами. Повторяем приём, не изобретаем новый. */
.about-customers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
}

.about-customers__item {
  border-left: 2px solid var(--accent);
  padding-left: 20px;
}

.about-customers__item p {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  max-width: 44ch;
}

.about-customers__item strong { font-weight: var(--w-bold); }

@media (min-width: 700px) {
  .about-customers { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .about-pair__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: start;
  }
  .about-pair__image {
    display: block;
    margin-top: -7em;  /* тянем фото вверх, навстречу продлённому низу
                           синей плашки — та же логика в em, что и там */
    position: relative;
    z-index: 1;         /* фото должно рисоваться поверх границы секций */
  }
}

/* Уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================
   СТРАНИЦА SERVICES
   Логика блока: три главы — три одинаковых по скелету плашки.
   Скелет НЕ меняется от главы к главе, меняется только начинка:
     ярлык → заголовок → цена → одна строка описания →
     ровно ЧЕТЫРЕ строки списка → одна курсивная строка-итог → кнопка.
   Четыре строки — жёсткое правило. Пятая ломает симметрию ряда,
   и вместо неё содержимое уходит в FAQ внизу страницы.
   ============================================ */

/* Подзаголовок под H1 страницы — оранжевый капс, как hero__sub на главной */
.page-head__sub {
  font-family: var(--body);
  font-weight: var(--w-regular);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--accent);
  margin: 0 0 22px;
}

/* Строка про открытые цены. Сдвиг вправо — тот же приём, что у .eyebrow. */
.page-head__open {
  margin: 28px 0 0 20px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-head__open b { color: var(--accent); font-weight: var(--w-bold); }

/* Заголовок группы глав: PACKAGING. / ILLUSTRATION. */
.group-head { margin-bottom: 28px; }
.group-head h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 10px; }
.group-head p { font-size: var(--t-body); color: var(--paper); max-width: 52ch; margin: 0; }

/* ---- ГЛАВА (одна плашка) ---- */
.chapters { display: grid; gap: 2px; }   /* 2px — тонкий шов, а не отступ */

.chapter {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--coal);
}

.chapter__media { overflow: hidden; }
.chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;   /* на мобильном картинка не должна съедать экран */
}

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

.chapter__body h3 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 18px; }

/* .eyebrow сдвинут вправо на 20px глобально — приём работает над
   открытым заголовком, где глазу не за что зацепиться кроме него.
   Внутри плашки другая ситуация: заголовок, цена, буллеты, кнопка —
   всё стоит на одной жёсткой вертикали, и единственный элемент не
   на ней читается не как жест, а как «поехало». Обнуляем именно
   здесь, не трогая .eyebrow глобально — снаружи карточек приём
   по-прежнему живой (шапки страниц, заголовки секций). */
.chapter .eyebrow { margin-left: 0; }

/* Цена. «FROM» стоит отдельной строкой над числом — иначе оно теряется. */
.price__from {
  display: block;
  font-family: var(--body);
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}
.price {
  font-family: var(--display);
  font-weight: var(--w-extra);
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1;
  margin: 0 0 16px;
}
.price sup {   /* знак евро — мелкий, приподнятый, как в макете */
  font-size: 0.45em;
  top: -0.75em;
  margin-right: 2px;
}

.chapter__desc { font-size: var(--t-body); margin: 0 0 20px; max-width: 40ch; }

/* Четыре строки. Ромб — фирменный маркер, тот же оранжевый. */
.plan { list-style: none; margin: 0 0 20px; padding: 0; }
.plan li {
  position: relative;
  padding-left: 26px;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--paper);
  margin-bottom: 14px;
}
.plan li::before {
  content: "◇";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent);
  font-size: var(--t-note);
}
.plan li b { font-weight: var(--w-bold); }

/* Строка-итог внизу каждой главы. У 01 это «Best for», у 02 — посчитанный
   чек, у 03 — что входит. Роль одна: закрыть карточку одной сухой фразой.
   Курсив и приглушённый цвет — чтобы читалось как сноска, а не как лозунг. */
.chapter__check {
  font-size: var(--t-note);
  font-style: italic;
  color: var(--paper);
  margin: auto 0 20px;   /* auto сверху — прижимает итог и кнопку к низу,
                             и все три плашки выравниваются по нижнему краю */
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.chapter__check b { font-style: normal; font-weight: var(--w-bold); color: var(--accent); }

/* Кнопка + мелкая ссылка в FAQ рядом с ней */
.chapter__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.chapter__more {
  font-size: var(--t-caption);
  font-style: italic;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.chapter__more:hover { color: var(--paper); border-color: var(--accent); }

/* ---- БОКОВЫЕ ДВЕРИ: добавить вкус / доп. материалы ---- */
.sidedoors { display: grid; gap: 32px; margin-top: 34px; }
.sidedoor h4 {
  font-family: var(--display);
  font-weight: var(--w-extra);
  text-transform: uppercase;
  font-size: clamp(18px, 2vw, 24px);
  margin: 0 0 10px;
}
.sidedoor__price {
  font-family: var(--display);
  font-weight: var(--w-extra);
  font-size: 28px;
  line-height: 1;
  margin: 0 0 10px;
}
.sidedoor__price sup { font-size: 0.45em; top: -0.75em; margin-right: 2px; }
.sidedoor__text { font-size: var(--t-body); color: var(--paper); max-width: 40ch; }
.sidedoor .link {
  font-family: var(--body);
  font-weight: var(--w-bold);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: var(--t-caption);
  color: var(--accent);
  border-bottom: 1px solid transparent;
}
.sidedoor .link:hover { border-color: var(--accent); }

/* ---- КАК ЭТО ИДЁТ: четыре шага ---- */
.steps { display: grid; gap: 26px; margin-top: 34px; }
.step { padding-left: 16px; border-left: 1px solid var(--line); }

/* Номер шага — служебная метка, а не заголовок. Шрифт/вес/трекинг/капс
   берёт из группы D (см. верх файла). Здесь — только размер и цвет.
   ВАЖНО: селектор одноклассовый, а текст шага раньше ловился как «.step p»
   (класс + элемент = вес выше). Тот селектор перебивал и цвет, и размер
   номера — поэтому STEP 01 рисовался крупным и бумажным вместо мелкого
   серого. Отсюда правило: не цеплять текст через «.блок p», если внутри
   блока есть другие <p> со своими классами. Только явные классы. */
.step__num {
  font-size: var(--t-caption);
  color: var(--muted);
  margin: 0 0 10px;
}

/* Название шага — главное в колонке. Крупнее номера, но заметно меньше H2
   секции, чтобы с ним не спорить. */
.step h4 {
  font-family: var(--display);
  font-weight: var(--w-extra);
  text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1;
  margin: 0 0 12px;
}
.step__text { font-size: var(--t-body); color: var(--paper); margin: 0; }

/* ---- ВОПРОСЫ ---- */
.faq { margin-top: 34px; border-top: 1px solid var(--line); }
.faq__row {
  display: grid;
  gap: 10px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.faq__q {
  font-family: var(--body);
  font-weight: var(--w-bold);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: 13px;
  margin: 0;
}
/* Вопрос оставлен как был — он читается. Ответ был 14px и проваливался:
   это основной текст, значит --t-body, как везде. */
.faq__a { font-size: var(--t-body); color: var(--paper); margin: 0; max-width: 62ch; }

/* ---- АДАПТИВ СТРАНИЦЫ ---- */
@media (min-width: 700px) {
  .sidedoors { grid-template-columns: 1fr 1fr; gap: 40px; }
  .steps     { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .faq__row  { grid-template-columns: 1fr 1.6fr; gap: 32px; }
}

@media (min-width: 1000px) {
  /* Картинка чуть шире текста — как в макете */
  .chapter { grid-template-columns: 1.15fr 1fr; }

  /* Кадр держит КВАДРАТ — формат исходников (1200x1200).
     Раньше здесь стояло aspect-ratio: auto + height: 100%, то есть высоту
     кадра задавал текст рядом. У коротких карточек («A cast for one brand»,
     «One dense visual») текста мало — квадрат сплющивался в полосу и
     обрезался. У длинных это не проявлялось, потому и не замечали.

     min-height: 100% оставляет запас: квадрат — это ПОЛ, а не потолок.
     Если текст окажется выше, блок дорастёт и кадр закроет его целиком. */
  .chapter__media .slides,
  .chapter__media > picture {
    display: block;
    aspect-ratio: 1 / 1;
    min-height: 100%;
    height: auto;
  }

  .steps { grid-template-columns: repeat(4, 1fr); }
}

/* «Priced with your project» — не число, а фраза. В слоте цены она рисовалась
   компрессед-экстраболдом и читалась как ценник, которым не является. */
.sidedoor__note {
  font-size: var(--t-body);
  color: var(--accent);
  margin: 0 0 10px;
}

/* ============================================
   СТРАНИЦА CONTACT
   Это не «контакты», а бриф: цены человек уже прочитал, спрашивать
   ему нечего — не хватает вводных. Поэтому страница без картинок,
   одной типографикой, и почти целиком собрана из уже готовых блоков
   (.steps, .faq, .sidedoors). Новых стилей — минимум.
   ============================================ */

/* Кнопка-письмо. mailto открывает почту с уже набитым телом письма:
   человек видит не пустой лист, а бланк из четырёх строк.
   Ни формы, ни бэкенда, ни спама. */
/* Внутренняя ссылка в списке цен — ведёт в FAQ, где объясняется разница
   между новым героем и новым вкусом. Тихая: подчёркивание, акцент на hover. */
.plan a {
  color: inherit;
  border-bottom: 1px solid var(--accent);
  transition: color .2s;
}
.plan a:hover { color: var(--accent); }

/* Примечание под четырьмя вводными на contact. Снимает с клиента
   обязанность самому выбрать главу: тише основного текста, но не
   сноска — это ответ на реальный страх «а вдруг я закажу не то». */
.contact-note {
  margin: clamp(28px, 3vw, 40px) 0 0;
  max-width: 56ch;
  color: var(--muted);
}

.mailto {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}

.mailto .btn { font-size: clamp(15px, 1.4vw, 19px); padding: 18px 30px; }

.mailto__note {
  font-size: var(--t-note);
  color: var(--muted);
  margin: 16px 0 0;
  max-width: 52ch;
}
.mailto__note a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
}
.mailto__note a:hover { border-color: var(--accent); }

/* Ряд ссылок на площадки. Роль та же, что у ссылок в подвале —
   группа B, поэтому дописан туда же, наверх файла. */
.doors {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}
.doors a { color: var(--accent); border-bottom: 1px solid transparent; }
.doors a:hover { border-color: var(--accent); }

/* Заголовки в боковых дверях на контактах длиннее, чем на услугах —
   там это две строки, им нужен воздух. */
.sidedoor h4 { line-height: 1.05; }

/* ============================================
   КЕЙС — блок «что осталось / что изменилось»
   Самый важный блок на сайте: он единственный доказывает, что система
   и правда живёт годами — то, за что берутся €1,500 и €5,500.
   Раньше был написан сплошной прозой, и весь его смысл (ПРОТИВОПОСТАВЛЕНИЕ)
   растворялся в предложениях. Контраст должен быть в СТРУКТУРЕ, а не в
   словах: две колонки — одна неподвижная, вторая всё время меняется.
   ============================================ */

.case-split {
  display: grid;
  gap: 28px;
  margin-bottom: 28px;
}

/* Вертикальная линия слева — та же роль, что у шагов на услугах:
   тихо держит колонку, не рисуя коробку. */
.case-split__half { padding-left: 16px; border-left: 1px solid var(--line); }

/* Ярлык колонки — группа D (тонкий капс, трекинг 0.1), как .step__num
   и .card__tag. Спокойная подпись над тем, что важнее её самой. */
.case-split__label {
  font-size: var(--t-caption);
  color: var(--accent);
  margin: 0 0 10px;
}

.case-split__half p:not(.case-split__label) {
  font-size: var(--t-body);
  color: var(--paper);
  margin: 0;
}

/* Строка-вывод под колонками. Курсив и мелкий кегль — сноска, но цвет
   читаемый: второстепенность даём размером, а не низким контрастом. */
.case-split__note {
  font-size: var(--t-note);
  font-style: italic;
  color: var(--paper);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  margin: 0;
}

@media (min-width: 700px) {
  .case-split { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ============================================
   КЕЙС — ВТОРАЯ ГАЛЕРЕЯ («IN THE ROOM»)
   Две галереи в кейсе делают РАЗНУЮ работу, поэтому не должны выглядеть
   одинаково.
     THE CAST    — рендеры. Идеальный свет, идеальный кроп. Отвечают на
                   вопрос «умеет ли он рисовать». Это обещание.
     IN THE ROOM — телефонные снимки: тусклый свет, картошка на столе,
                   кривой баннер, сделанный клиентом. Отвечают на вопрос
                   «а это вообще случилось?». Это доказательство.
   Если сделать их одинаковыми, вторая читается как «ещё немного работ» и
   теряет всю силу. Поэтому: плитка плотнее, кадры мельче, тон суше.
   ============================================ */

.case-gallery--evidence { columns: 2; }

@media (min-width: 700px) {
  .case-gallery--evidence { columns: 4; }
}

/* Подпись под уликами. Сухая констатация, а не подпись к картинке. */
.case-evidence__note {
  font-size: var(--t-note);
  font-style: italic;
  color: var(--paper);
  max-width: 62ch;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Галерея THE CAST — диптихи широкие (7:5), по одному в ряд на мобильном,
   по два на десктопе. Крупнее обычной плитки: в каждом кадре две сцены. */
.case-gallery--cast { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .case-gallery--cast { grid-template-columns: 1fr 1fr; }
}

/* Наброски — суше и мельче галереи. Это не «работы», а рабочий стол.
   Широкие горизонтальные листы, по одному в ряд, чтобы читались номера
   вариантов (1. / 2.) и грязь карандаша. */
.case-gallery--sketch { grid-template-columns: 1fr; gap: 14px; }
.case-gallery--sketch .case-gallery__item { opacity: 0.94; }
@media (min-width: 900px) {
  .case-gallery--sketch { grid-template-columns: 1fr 1fr; }
  .case-gallery--sketch .case-gallery__item:first-child { grid-column: 1 / -1; }
}

/* ============================================
   МОБИЛЬНЫЕ HERO-ОВЕРРАЙДЫ
   Мобильные кадры (5:4) подаются через <picture media="(max-width:699px)">.
   Здесь — только поведение контейнеров, которые на десктопе устроены иначе.
   ============================================ */
@media (max-width: 699px) {
  /* TK4: на десктопе это логотип-локап (узкий, по центру). Мобильный кадр —
     полноценная композиция на тёмном фоне, ей нужна вся ширина, без
     padding и без ограничения 560px. */
  .case-hero__full--logo.has-mobile-hero { padding: 0; }
  .case-hero__full--logo.has-mobile-hero img { max-width: 100%; }

  /* Borealis: на десктопе шапка парная (задний кадр + передний внахлёст
     с крестиками-метками). На телефоне вместо этого — один мобильный кадр
     в заднем слоте. Передний кадр и метки прячем, нахлёст и тени убираем,
     чтобы остался чистый одиночный кадр. */
  .case-hero__pair .case-hero__front { display: none; }
  .case-hero__pair .case-hero__back {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }
  .case-hero__pair { margin-bottom: clamp(24px, 4vw, 40px); }
}