/* pages.css — стили страниц */

/* ══════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Ручные задержки — используются там, где автоматический stagger не нужен */
.js [data-reveal][data-delay="1"] { transition-delay: 0.2s; }
.js [data-reveal][data-delay="2"] { transition-delay: 0.4s; }
.js [data-reveal][data-delay="3"] { transition-delay: 0.6s; }
.js [data-reveal][data-delay="4"] { transition-delay: 0.8s; }

/* Большие текстовые блоки выезжают «из себя»: клип снизу вверх */
.js .about-full__text[data-reveal] {
  opacity: 0;
  transform: translateY(60px);
  clip-path: inset(0 0 30% 0);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
              clip-path 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .about-full__text[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0% 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════
   HERO — главная страница
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   ПЕРВЫЙ ЭКРАН — адаптируется под тему
   ══════════════════════════════════════════ */
.hero {
  /* Рамка второй кнопки первого экрана (на десктопе её перекрашивает лайм) */
  --hero-ghost-border: var(--border);
  position: relative;
  background: var(--bg);
  color: var(--text);
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Мобильный: сверху только небольшой зазор от шапки — место под неё уже
     держит padding-top у .hero, а 12vh опускали хедлайн ещё на ~100px.
     С 48em прежний отступ возвращается (ниже): без него на высоких
     мониторах первый экран становится ниже окна. */
  padding-block: var(--s-4) clamp(28px, 5vh, 48px);
}

/* Строка статуса — акцент на тёмном фоне (лайм читается) */
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(20px, 4vh, 36px);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--accent-text);
}

.hero__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-text);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__status-dot { animation: heroPulse 2.4s ease-in-out infinite; }
}

@keyframes heroPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Типографику задаёт класс .hero-title (единый размер на всех страницах);
   здесь — только раскладка первого экрана главной */
.hero__h1 {
  margin: 0;
  max-width: 18ch;
}

/* Переносы строк макета — только на десктопе (см. блок 64em ниже) */
.hero__h1-br { display: none; }

/* Ключевая фраза — акцентное подчёркивание, не заливка */
.hero__h1-accent {
  color: var(--text);
  box-shadow: inset 0 -0.12em 0 var(--accent);
}

/* ── Разбивка заголовка на мобильном ──
   Группы слов встают строками ровно там, где задумано; на планшете и шире
   .hero__h1-part остаётся inline и перенос делает браузер.
   width: fit-content обязателен: блок во всю ширину растянул бы акцентное
   подчёркивание на весь контейнер, а не по буквам. При этом fit-content —
   это min(max-content, доступная ширина), поэтому группа, которая в строку
   не влезла бы, переносится внутри себя, а не уезжает за край.
   text-wrap: wrap — снимаем унаследованный от h1 balance: он перебивал бы
   заданные группы, разложив их по-своему.
   Кегль здесь свой, текучий: при базовых 52px «СБОРКА САЙТОВ» занимает
   434px против 350px контейнера на 390px — задуманная разбивка физически
   не помещалась ни на одной мобильной ширине. Множитель подобран по этой
   самой длинной строке с запасом ~8px: 41px на 390, 33px на 320, 46px на
   430. Верхнюю границу держит базовое значение .hero-title.
   Подчёркивание на мобильном рисует не .hero__h1-accent, а его части:
   inline-элемент, внутри которого лежат блоки, разрывается на фрагменты, и
   тень легла бы мимо букв. */
@media (max-width: 47.99em) {
  /* Селектор с двумя классами намеренно: мобильный кегль .hero-title
     объявлен ниже по файлу, и при равном весе он перебил бы это правило. */
  .hero .hero__h1 {
    font-size: min(calc(11.7vw - 4.7px), calc(var(--h1-page) + 2px));
    text-wrap: wrap;
    max-width: none;
  }

  .hero__h1-part {
    display: block;
    width: fit-content;
  }

  .hero__h1-accent { box-shadow: none; }

  .hero__h1-accent .hero__h1-part {
    box-shadow: inset 0 -0.12em 0 var(--accent);
  }
}

/* Типографику задаёт .hero-subtitle; здесь — только раскладка */
.hero__subtitle {
  margin: clamp(20px, 3.5vh, 32px) 0 0;
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-direction: column; /* мобильный: CTA в столбик */
  /* .hero__inner выравнивает детей по flex-start, поэтому блок кнопок
     сжимался по содержимому. «Во всю ширину» на мобильном раньше держалось
     не на правиле, а на переполнении: nowrap распирал кнопку шире
     контейнера, и её обрезало ровно по краю. Задаём ширину явно. */
  align-self: stretch;
  gap: 10px;
  margin-top: clamp(28px, 4.5vh, 44px);
}
/* Мобильный: основная и вторичная кнопки во всю ширину контейнера.
   white-space: nowrap здесь стоять не может: он задаёт кнопке min-content по
   длине надписи (у «Рассчитать стоимость» это 359px при корневых 20px), а
   flex-колонка не умеет сжиматься ниже — и растягивалась до 361px внутри
   320-пиксельного .hero__inner. Правая часть кнопки вместе с хвостом текста
   уезжала за экран. Без nowrap надпись переносится только там, где иначе
   не влезает.

   Заодно снимаем горизонтальные поля .btn--lg (32px с каждой стороны):
   кнопка растянута на всю ширину, текст в ней по центру — видно эти поля
   никак, а min-content они раздувают на 64px и роняют надпись во вторую
   строку там, где она бы влезла. Без них «Рассчитать стоимость» держит
   одну строку от 360px, переносится только на 320px. На десктопе ширина
   снова auto, и поля возвращаются вместе с ней. */
.hero__actions > .btn { width: 100%; padding-inline: var(--s-3); text-align: center; }

@media (min-width: 48em) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start; /* десктоп: кнопки по содержимому, как и были */
    gap: var(--space-s);
  }
  .hero__actions > .btn { width: auto; padding-inline: var(--s-6); }
}

/* Обводочная кнопка на первом экране — рамка и текст по теме */
.hero__btn-ghost {
  border-color: var(--hero-ghost-border);
  color: var(--text);
}
.hero__btn-ghost:hover { border-color: var(--text); color: var(--text); }

/* <picture> прозрачна для layout: размеры задаёт вложенный img */
.case-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Мобильный: карточка крупнее — на 220px обложка читалась как иконка.
   Ширина текучая, поэтому на узких экранах карточка ужимается вместе с
   ними и следующая всегда выглядывает из-за края: подсказка, что ленту
   можно листать, держится на этом просвете (46px на 320, 62px на 390).
   Пропорции задаёт aspect-ratio, высота растёт вместе с шириной; подпись
   масштабируется тем же шагом. */

@media (min-width: 48em) {
  .hero__inner { padding-top: clamp(48px, 12vh, 120px); }
  .hero__actions { margin-top: clamp(32px, 5vh, 48px); }
}

/* Фон первого экрана из макета — волна линий, повёрнутая на −19.55° и
   приглушённая до 5%. Только на десктопе: на узком экране она ложится под
   текст целиком и превращается в шум. Положение — от правого края, как в
   макете (рамка 1298 × 779 единиц, её центр на 116 + 584 сверху). */
.hero__waves { display: none; }

/* ── Первый экран на десктопе — по макету ──
   От шапки до строки статуса 146 единиц, статус → H1 40, H1 → лаймовая
   линия 12, линия 8, линия → подзаголовок 40, подзаголовок → кнопки 52.
   Ленты проектов и тонкой линии в макете нет — они остаются мобильным. */
@media (min-width: 64em) {
  .hero__waves {
    display: block;
    position: absolute;
    z-index: 0;
    top: calc(310 * var(--u));
    right: calc(-91 * var(--u));
    width: calc(1298 * var(--u));
    height: calc(779 * var(--u));
    opacity: 0.05;
    transform: rotate(-19.55deg);
    pointer-events: none;
    background: url("../img/hero-waves-600.png") center / cover no-repeat;
    background-image: image-set(
      "../img/hero-waves-600.avif" type("image/avif"),
      "../img/hero-waves-600.webp" type("image/webp"),
      "../img/hero-waves-600.png" type("image/png"));
  }

  .hero__inner { padding-block: calc(146 * var(--u)) 0; }

  .hero__status {
    gap: calc(15 * var(--u));
    margin-bottom: calc(40 * var(--u));
    font-size: var(--fs-label);
    line-height: 1;
    letter-spacing: 0;
  }
  .hero__status-dot {
    width: max(8px, calc(14 * var(--u)));
    height: max(8px, calc(14 * var(--u)));
  }

  /* H1 — три строки макета («Дизайн и сборка / сайтов под ключ — / от идеи
     до запуска»), переносы задают .hero__h1-br. Ширина по самой длинной
     строке, и по ней же тянется лаймовая линия под заголовком.
     Подчёркивание фразы уступает место этой линии. */
  .hero__h1 {
    width: max-content;
    max-width: 100%;
    padding-bottom: calc(12 * var(--u));
    border-bottom: max(4px, calc(8 * var(--u))) solid var(--accent);
    text-wrap: wrap;
  }
  .hero__h1-br { display: inline; }
  .hero__h1-accent { box-shadow: none; }

  .hero__subtitle {
    margin-top: calc(40 * var(--u));
    max-width: calc(930 * var(--u));
  }

  .hero__actions {
    margin-top: calc(52 * var(--u));
    gap: calc(20 * var(--u));
  }
  .hero__actions > .btn { padding-inline: calc(80 * var(--u)); }
  .hero__actions > .btn--ghost { padding-inline: calc(100 * var(--u)); }
  .hero__btn-ghost { border-color: var(--accent); color: var(--accent-text); }
}

/* ══════════════════════════════════════════
   СЕКЦИЯ О СЕБЕ — НА ВЕСЬ ЭКРАН
   ══════════════════════════════════════════ */

.about-full {
  min-height: 100vh;
  min-height: 100dvh; /* dvh: контент не уезжает под адресную строку iOS */
  padding-top: calc(var(--header-h) + 60px);
  padding-bottom: clamp(60px, 8vh, 120px);
  border-bottom: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
}

.about-full__container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about-full__top {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.about-full__text {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7.5vw, 10.6875rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-top: var(--space-l);
  max-width: none;
  flex: 1;
}

.about-full__bottom {
  margin-top: clamp(48px, 7vh, 100px);
  padding-top: clamp(36px, 5vh, 72px);
  border-top: 0.5px solid var(--border);
}

.about-full__blog-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  max-width: 55ch;
}

.about-full__blog-text {
  font-size: clamp(1.0125rem, 1.4vw, 1.18125rem);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 50ch;
}

@media (min-width: 90em) {
  .about-full {
    padding-top: calc(var(--header-h) + 100px);
    padding-bottom: 160px;
  }
}

/* ══════════════════════════════════════════
   СЕКЦИЯ УСЛУГ (таблица)
   ══════════════════════════════════════════ */

/* ── Превью услуг на главной: 3 категории ── */
/* Рамки с обеих сторон. Снизу — стык с калькулятором. Сверху — потому что
   выше стоит .cases-section, а она рисует линию только над собой: граница
   «Мои работы → Услуги» оставалась единственным стыком на главной без
   отбивки. Секция есть только на index, лишних линий это не добавляет. */
.services-preview {
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}

.services-preview h2 {
  margin-bottom: var(--space-l);
}

.services-cats {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-m);
}

/* Три карточки — либо в ряд, либо в колонку. Раскладки 2 + 1 нет ни на одной
   ширине: одинокая карточка во втором ряду читается как ошибка вёрстки.
   Порог — десктопный 64em, а не 900px: на 900 колонка сужается настолько, что
   заголовок и пункты списка ломаются каждый в две строки, и ряд выглядит
   мятым. Ниже порога — одна колонка. */
@media (min-width: 64em) {
  .services-cats { grid-template-columns: repeat(3, 1fr); }
}

/* Карточки услуг — приподняты над фоном: surface + тонкая рамка + радиус карточки. */
.service-cat {
  display: flex;
  flex-direction: column;
  padding: var(--space-l) var(--space-m);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: border-color 0.2s, transform 0.2s;
}

.service-cat:hover,
.service-cat:focus,
.service-cat:active {
  border-color: var(--text-muted);
}

.service-cat__eyebrow {
  display: block;
  font-size: var(--label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
  font-weight: 400;
}

.service-cat__title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: var(--space-m); /* 24px: заголовок отбит от своего содержимого */
}

/* Мини-подводка над списком: два предложения одним абзацем. Раньше они стояли
   по разные стороны от списка, и карточка читалась как три отдельных куска.
   Кегль и интерлиньяж ниже основного текста намеренно — это подводка, а не
   тело карточки: при --body/1.65 абзац весил столько же, сколько сам список,
   и спорил с ним за внимание.
   Три ступени контраста сохраняются: заголовок (--text) → ведущая фраза
   (--text-secondary) → продолжение (--text-muted). */
.service-cat__desc {
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: var(--space-s);
}

/* Первое предложение — ведущая мысль: тяжелее весом и на ступень светлее. */
.service-cat__desc strong {
  font-weight: 500;
  color: var(--text-secondary);
}

/* Перечисление услуг. Маркер акцентный, текст пункта — основной уровень.
   Отбивка до ссылки — 24px: раньше её держал хвостовой абзац описания.
   Кегль и интерлиньяж — те же, что у .service-cat__desc: пункты при --body
   были на ступень крупнее подводки и перевешивали её. Различие между ними
   держит только цвет. Вес и трекинг у обоих наследуются от body. */
.service-cat__list {
  list-style: disc;
  padding-left: var(--s-4);
  margin-bottom: var(--space-m);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--text);
}

.service-cat__list li + li { margin-top: var(--s-1); }
.service-cat__list li::marker { color: var(--accent); }

.service-cat__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Салатовый по умолчанию (на тёмной теме — яркий лайм, на светлой —
     насыщённый зелёный ради читаемости по WCAG AA). */
  color: var(--accent-text);
  font-weight: 500;
  transition: color 0.2s, gap 0.2s;
}

/* При наведении стрелка уезжает вправо — цвет уже салатовый. */
.service-cat__link:hover {
  color: var(--accent-text);
  gap: 12px;
}

/* Строка действий: «Подробнее» ведёт на раздел хаба, «Заказать» — к форме
   заявки внизу этой же страницы. Прижата к низу карточки: при разной длине
   списков кнопки трёх карточек стоят на одной линии. */
.service-cat__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
}

.service-cat__actions .service-cat__link { margin-top: 0; }

/* ---------- Десктоп — по макету ----------
   Карточки 560 × 630 на 1920, поля 50/40, подложка без рамки, радиус 22.
   Надзаголовок карточки 20/28 капсом, заголовок 40/54, подводка и пункты
   20/28–30. Маркер — лаймовый круг 12 единиц, отбивка до текста 25. */
@media (min-width: 64em) {
  .services-preview {
    border: 0;
    padding-block: calc(189 * var(--u)) calc(200 * var(--u));
  }

  .services-preview h2 { margin-bottom: calc(54 * var(--u)); }

  .services-cats { gap: calc(20 * var(--u)); }

  .service-cat {
    min-height: calc(630 * var(--u));
    padding: calc(50 * var(--u)) calc(40 * var(--u)) calc(45 * var(--u));
    border: 0;
  }

  .service-cat__eyebrow {
    font-size: var(--fs-text);
    line-height: var(--lh-text);
    letter-spacing: 0;
    margin-bottom: calc(20 * var(--u));
  }

  .services-cats .service-cat__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    margin-bottom: calc(23 * var(--u));
  }

  .service-cat__desc {
    font-size: var(--fs-text);
    line-height: 1.5;
    margin-bottom: calc(69 * var(--u));
  }
  .service-cat__desc strong { color: rgba(255, 255, 255, 0.9); }

  .service-cat__list {
    list-style: none;
    padding-left: 0;
    margin-bottom: calc(60 * var(--u));
    font-size: var(--fs-text);
    line-height: var(--lh-text);
    color: rgba(255, 255, 255, 0.9);
  }
  .service-cat__list li {
    display: flex;
    align-items: center;
    gap: calc(25 * var(--u));
  }
  .service-cat__list li::before {
    content: "";
    flex: none;
    width: max(8px, calc(12 * var(--u)));
    height: max(8px, calc(12 * var(--u)));
    border-radius: 50%;
    background: var(--accent);
  }
  .service-cat__list li + li { margin-top: calc(9 * var(--u)); }

  .service-cat__actions {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: calc(24 * var(--u));
  }

  .service-cat__link {
    font-size: var(--fs-label);
    line-height: 1;
    font-weight: 400;
    color: var(--text);
    gap: calc(15 * var(--u));
  }
  .service-cat__link:hover { color: var(--accent-text); gap: calc(20 * var(--u)); }

  /* «Заказать» в макете — строчными 28/28, 230 × 56 */
  .service-cat__order {
    min-height: max(40px, calc(56 * var(--u)));
    min-width: calc(230 * var(--u));
    padding: 0 calc(40 * var(--u));
    font-size: var(--fs-label);
    line-height: 1;
    text-transform: none;
  }
}

/* ---------- Микроанимация стрелок в основных призывах ---------- */

/* Стрелка коротко уходит вправо и мягко возвращается, потом стоит. Ставится
   точечно, классом .arrow-nudge, и только на главные CTA: «Все проекты»,
   «Написать», «Подробнее», «Рассчитать стоимость». Если пульсируют все
   стрелки сайта разом, глазу негде остановиться — в шапке, в кейсах и в
   перелинковке услуг стрелки остаются неподвижными.

   Сдвиг 3px и только через transform: margin/left вызывали бы пересчёт
   раскладки на каждом кадре и толкали соседний текст.

   Цикл 2.4s, из них движение — первые 0.86s (36%), остальное пауза. Без
   паузы это читается как дрожание, а не как акцент.

   По умолчанию анимация стоит на паузе: запускает её main.js, когда стрелка
   попадает в зону видимости, и снова гасит, когда она уходит за экран.
   Без JS стрелка просто стоит на месте — контент от этого не страдает. */
@media (prefers-reduced-motion: no-preference) {
  .arrow-nudge {
    /* Внутри inline-flex-ссылок span уже блокируется как flex-item, но
       .cases-all-link — обычная строчная ссылка, и там transform без этого
       не применился бы. */
    display: inline-block;
    animation: arrow-nudge 2.4s ease-in-out infinite;
    animation-play-state: paused;
  }

  .arrow-nudge.is-onscreen { animation-play-state: running; }

  /* На наведении работает собственный hover ссылки (у .service-cat__link —
     раскрытие gap). Микроанимация на это время снимается целиком, а не
     ставится на паузу: пауза заморозила бы стрелку в случайной точке цикла. */
  a:hover .arrow-nudge,
  a:focus-visible .arrow-nudge {
    animation: none;
  }
}

@keyframes arrow-nudge {
  0%        { transform: translateX(0); }
  18%       { transform: translateX(3px); }
  36%, 100% { transform: translateX(0); }
}

/* ---------- Отзывы на главной ---------- */

/* Мобильный — одна колонка: шесть коротких карточек пролистываются быстрее,
   чем человек будет смахивать карусель, и ни один отзыв не прячется. */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

@media (min-width: 40em) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  /* Четыре отзыва — ровный квадрат 2×2 вместо ряда 3+1 с дыркой */
  .reviews-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid[data-count="1"] { grid-template-columns: minmax(0, 36rem); }
}

/* Подложка та же, что у карточек услуг (.service-cat) */
.review {
  display: flex;
  flex-direction: column;
  padding: var(--space-l) var(--space-m);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.review__quote {
  margin-bottom: var(--space-m);
}

/* margin-top:auto прижимает подпись к низу — карточки в ряду выравниваются
   по нижнему краю независимо от длины отзыва (тот же приём, что и у услуг). */
.review__author {
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 0.5px solid var(--border);
}

.review__name,
.review__role,
.review__project {
  display: block;
}

.review__name {
  font-weight: 500;
}

.review__role,
.review__project {
  font-size: 0.95625rem;
  color: var(--text-muted);
}

.review__project {
  margin-top: var(--space-2xs);
}

.review__project a {
  color: var(--accent-text);
  transition: opacity 0.2s;
}

.review__project a:hover {
  opacity: 0.75;
}

.services-table {
  padding-block: clamp(100px, 12vh, 180px);
  border-bottom: 0.5px solid var(--border);
  /* Высота липкой якорной панели: учитывается в scroll-margin, чтобы
     заголовок раздела не уезжал под неё при переходе по якорю. */
  --svc-nav-h: 56px;
}

/* ── Якорная навигация по разделам (services/index.html) ── */
/* Висит под шапкой, пока на экране разделы услуг, и выезжает из-под неё,
   когда до шапки доходит первый раздел (main.js). В потоке не стоит: место
   над условиями работы она не занимает. Панель — «плавающая пилюля» по
   центру: не притворяется второй шапкой и не занимает всю ширину экрана. */
.svc-nav {
  position: fixed;
  top: calc(var(--header-h) + var(--s-2));
  left: 0;
  right: 0;
  z-index: var(--z-sticky-nav);
  margin-inline: auto;
  padding: var(--s-2);
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  border: 0.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  /* visibility без задержки: при появлении панель сразу доступна с клавиатуры */
  transition: transform 250ms ease, opacity 250ms ease, visibility 0s;
}

/* Вне списка услуг панель уезжает вверх и не отнимает экран (main.js).
   visibility убирает её и из порядка табуляции — в невидимую панель фокус не
   проваливается; переключается после ухода, чтобы не сорвать анимацию. */
.svc-nav.is-hidden {
  transform: translateY(calc(-100% - var(--header-h)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 250ms ease, opacity 250ms ease, visibility 0s 250ms;
}

@media (prefers-reduced-motion: reduce) {
  .svc-nav,
  .svc-nav.is-hidden { transition: none; }
}

.svc-nav__list {
  list-style: none;
  display: flex;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  /* На узком экране четыре раздела не влезают в строку — прокручиваются
     горизонтально, полосу прокрутки не показываем. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.svc-nav__list::-webkit-scrollbar { display: none; }

.svc-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--s-4);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: color var(--transition), border-color var(--transition);
}

.svc-nav__link:hover {
  color: var(--text);
  border-color: var(--text);
}

/* Раздел, который сейчас на экране */
.svc-nav__link.is-current {
  color: var(--accent-text);
  border-color: var(--accent);
}

@media (min-width: 48em) {
  .svc-nav__link { min-height: 36px; }
  .services-table { --svc-nav-h: 52px; }
}

/* Десктоп — в единицах макета: на rem теги остались 14px под 24-единичной
   шапкой. Высота панели = тег + поля по 8px + рамка. */
@media (min-width: 64em) {
  .svc-nav__link {
    min-height: max(40px, calc(56 * var(--u)));
    padding-inline: calc(28 * var(--u));
    font-size: max(16px, calc(22 * var(--u)));
  }
  .services-table { --svc-nav-h: calc(max(40px, calc(56 * var(--u))) + 17px); }
}

/* ── Условия работы: строка над прайсом ── */
.svc-terms {
  list-style: none;
  display: grid;
  gap: var(--space-s);
  margin: 0 0 var(--space-l);
  padding: 0;
}

.svc-terms__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: none;
  padding-left: var(--space-s);
  border-left: 2px solid var(--accent);
}

.svc-terms__title {
  font-size: 1.06875rem;
  font-weight: 500;
  color: var(--text);
}

.svc-terms__desc {
  font-size: var(--small);
  line-height: 1.5;
  color: var(--text-muted);
}

@media (min-width: 48em) {
  .svc-terms { grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
}

/* ── Категории услуг (services.html) ── */
.svc-cat {
  scroll-margin-top: calc(var(--header-h) + var(--svc-nav-h, 0px) + var(--s-3));
  padding: var(--space-l) var(--space-m);
  border: 0.5px solid var(--border);
  /* Подложка — тот же токен, что у категорий на главной (.service-cat) */
  background: var(--calc-card);
}

.svc-cat + .svc-cat {
  margin-top: var(--space-l);
}

/* Соцсети — отдельное направление: больше воздуха сверху и разделитель,
   чтобы услуга за $120 не читалась в одном ряду с сайтом за $900. */
.svc-cat--aside {
  margin-top: var(--space-2xl);
  border-top: 2px solid var(--border);
  background: transparent;
}

.svc-cat--aside + .svc-cat,
.svc-cat + .svc-cat--aside {
  margin-top: var(--space-2xl);
}

@media (min-width: 48em) {
  .svc-cat {
    padding: var(--space-xl) var(--space-l);
  }
}

/* Заголовок категории — ярко выражен */
.svc-cat__head {
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-m);
  border-bottom: 2px solid var(--border);
}

.svc-cat__num {
  display: block;
  font-family: var(--font-base);
  font-size: 0.84375rem;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  margin-bottom: var(--space-2xs);
}

/* Кегль — общий h2 (--h2): категория хаба — заголовок секции, а на сайте
   он один. Свой clamp(1.9rem, 5vw, 3rem) давал 54 / 40px против 50 / 32px
   у остальных заголовков секций. */
.svc-cat__title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  margin-bottom: var(--space-xs);
}

.svc-cat__desc {
  color: var(--text-muted);
  max-width: 52ch;
  line-height: 1.6;
}

/* ── Строка услуги на хабе ──
   Витрина без раскрытия: название, уточнение, определение, цена со сроком
   и «Подробнее» — на страницу услуги, где живут состав, этапы и примеры.
   Мобильный: всё столбиком, кнопка во всю ширину. С 48em текст слева,
   цена, срок и кнопка — справа. */
.svc-acc__item {
  display: grid;
  gap: 0 var(--space-m);
  padding-block: 30px;
  border-top: 1px solid var(--border-subtle);
  /* Переход по старому якорю (/services#logo) не уводит строку под шапку */
  scroll-margin-top: calc(var(--header-h) + var(--svc-nav-h, 0px) + var(--s-3));
}

.svc-acc__name {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.9);
}

.svc-acc__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.4286;
  text-transform: uppercase;
  color: var(--text-faint);
}

.svc-acc__lead {
  margin: 15px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.375;
  color: var(--text-muted);
}

.svc-acc__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin: 20px 0 0;
}

.svc-acc__fact { display: flex; align-items: baseline; gap: 8px; }
.svc-acc__fact dt { font-size: 14px; color: var(--text-muted); }
.svc-acc__fact dd { margin: 0; font-size: 16px; color: var(--text-secondary); }
.svc-acc__fact .svc-acc__price { font-size: 18px; color: var(--accent-text); }
/* Цена говорит сама за себя — подпись «Стоимость» только для скринридера */
.svc-acc__fact:has(.svc-acc__price) dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.svc-acc__more { margin-top: 20px; width: 100%; }
.svc-acc__arrow { display: none; }

@media (min-width: 48em) {
  .svc-acc__item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
  }
  .svc-acc__name,
  .svc-acc__sub,
  .svc-acc__lead { grid-column: 1; }
  .svc-acc__facts {
    grid-column: 2;
    grid-row: 1 / 3;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
  }
  .svc-acc__more {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    width: auto;
    margin-top: var(--s-4);
  }
}

@media (min-width: 64em) {
  /* «Подробнее» в карточках — текстовая ссылка без рамки, белая, лайм только
     при наведении: двенадцать кнопок в рамках дробили список и спорили с
     ценой. Стрелка — общая микроанимация .arrow-nudge, на наведении она
     снимается и стрелка просто уходит вправо. На телефоне и планшете
     остаётся кнопка в рамке, без стрелки. */
  .svc-acc__more {
    justify-self: end;
    min-height: 44px;
    padding: 0;
    gap: calc(12 * var(--u));
    border-color: transparent;
    color: var(--text);
  }
  .svc-acc__more:hover {
    border-color: transparent;
    color: var(--accent-text);
  }
  .svc-acc__arrow {
    display: inline-block;
    transition: transform var(--transition);
  }
  .svc-acc__more:hover .svc-acc__arrow,
  .svc-acc__more:focus-visible .svc-acc__arrow { transform: translateX(6px); }
  .svc-acc__item { padding-block: calc(40 * var(--u)); column-gap: calc(80 * var(--u)); }
  .svc-acc__name { font-size: calc(40 * var(--u)); line-height: 1.35; }
  .svc-acc__sub { font-size: max(14px, calc(24 * var(--u))); line-height: 1.25; }
  .svc-acc__lead {
    margin-top: calc(20 * var(--u));
    max-width: calc(1000 * var(--u));
    font-size: max(16px, calc(32 * var(--u)));
    line-height: 1.25;
  }
  .svc-acc__fact dt { font-size: max(14px, calc(20 * var(--u))); }
  .svc-acc__fact dd { font-size: max(16px, calc(24 * var(--u))); }
  .svc-acc__fact .svc-acc__price { font-size: calc(32 * var(--u)); }
}

/* Название услуги — один уровень на главной (карточки «Услуги») и на хабе
   (строки услуг): заметно ниже заголовка секции (h2) и растёт вместе с ним.
   На главной название раньше стояло на --step-2 и на мобильном выходило
   крупнее своего h2 (33px против 32px). */
.service-cat__title {
  font-size: clamp(1.18125rem, 2.2vw, 1.51875rem);
}

/* Варианты услуги на её странице — разные объёмы одного продукта: клиент
   выбирает не отдельную услугу, а размер работы. Каждый вариант — строка
   «название · цена · кому подходит», с хайрлайнами вместо подложек.
   id у варианта — старый якорь услуги, которая сюда влилась. Цену в строку
   вписывает tools/sync-site.mjs по data-price — руками её здесь не правим. */
.svc-var {
  list-style: none;
  margin: 0 0 var(--space-m);
  padding: 0;
  border-top: 0.5px solid var(--border);
}

/* Сетка, а не флексы: описание варианта — абзац со своей мерой строки, и в
   общей флекс-обёртке оно вставало на одну линию с названием и ценой, унося
   цену в середину строки. Две колонки держат «название · цена» в первом
   ряду, описание — во втором, при любой длине текста. */
.svc-var__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px var(--space-s);
  padding: var(--space-xs) 0;
  border-bottom: 0.5px solid var(--border);
  /* Якорь ведёт на вариант — не даём ему уехать под шапку и панель разделов */
  scroll-margin-top: calc(var(--header-h) + var(--svc-nav-h, 0px) + var(--s-3));
  /* base.css режет любой <li> по 70ch — мере сплошного текста. Строка
     «название · цена» не текст: обрезанная, она не доходит до правого края
     карточки и цены перестают выстраиваться в столбик. */
  max-width: none;
}

.svc-var__name {
  grid-column: 1;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--text);
}

/* Кегль цены варианта — свой, меньше цены в шапке: в карточке она уровнем
   ниже. Совпадает у них только правый край. */
.svc-var__price {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.0125rem;
  font-weight: 500;
  color: var(--accent-text);
  white-space: nowrap;
}

.svc-var__desc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Пара смысловых колонок: «подходит для» и «стандартная структура», две
   подгруппы «что входит». align-items: start — списки разной длины не тянут
   соседа. До 48em одна колонка, порядок в DOM = порядок на экране, никаких
   order и grid-area: клавиатура и скринридер идут за глазами. */
.svc-cols {
  display: grid;
  gap: var(--space-m) var(--space-l);
  align-items: start;
}

@media (min-width: 48em) {
  .svc-cols { grid-template-columns: 1fr 1fr; }
}

/* Две части блока на подложках. Ни одной новой величины: набор тот же, что
   у карточек услуг (.service-cat) и отзывов (.review) — surface, хайрлайн
   в 0.5px, --radius-card и поля --space-l / --space-m.
   stretch отменяет align-items: start у .svc-cols: подложки в ряду обязаны
   быть одной высоты, иначе более короткая обрывается выше соседней. */
.svc-cols--panels { align-items: stretch; }

.svc-cols__col--panel {
  padding: var(--space-l) var(--space-m);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.svc-more__group {
  margin-bottom: var(--s-2);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.svc-more__list + .svc-more__group { margin-top: var(--space-s); }

.svc-more__list {
  list-style: disc;
  margin: 0;
  padding-left: 1.15em;
}

.svc-more__list li {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-secondary);
}

.svc-more__list li + li { margin-top: var(--s-2); }

/* Акцент — на маркерах и цифрах, не на тексте пунктов */
.svc-more__list li::marker { color: var(--accent-text); }


.svc-more__note {
  margin-top: var(--space-xs);
  font-size: var(--small);
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 47.99em) {

  .svc-cols { gap: var(--space-m); }

}

/* ══════════════════════════════════════════
   СЕКЦИЯ ПОРТФОЛИО (3 карточки)
   ══════════════════════════════════════════ */

.cases-grid-section {
  padding-block: clamp(60px, 10vh, 140px);
  border-bottom: 0.5px solid var(--border);
}

.cases-grid-section h2 { margin-bottom: var(--space-l); }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

@media (max-width: 63.99em) {
  .cases-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 47.99em) {
  .cases-grid { grid-template-columns: 1fr; }
}

@media (min-width: 90em) {
  .cases-grid-section { padding-block: 160px; }
}

.case-card {
  display: block;
  background: var(--bg-2);
  overflow: hidden;
}

.case-card__img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-3);
}

.case-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

@media (hover: hover) {
  .case-card:hover .case-card__img img { transform: scale(1.05); }
}

.case-card__info {
  padding: 14px 0;
  border-top: 0.5px solid var(--border);
  margin-inline: 0;
  padding-inline: 0;
}

.case-card__cat {
  font-size: 0.73125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  display: block;
}

.case-card__name {
  font-size: 1.125rem;
  color: var(--text);
  margin-top: 4px;
  display: block;
}

/* ══════════════════════════════════════════
   OUR WORK — главная страница
   ══════════════════════════════════════════ */

.our-work-section {
  padding-block: clamp(100px, 12vh, 180px);
  border-bottom: 0.5px solid var(--border);
}

@media (min-width: 90em) {
  .our-work-section { padding-block: 220px; }
}

.our-work-section__head {
  margin-bottom: clamp(48px, 6vh, 80px);
}

.our-work-section__head h2 {
  margin-top: var(--space-xs);
}

.our-work__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-block: clamp(48px, 7vh, 100px);
  border-top: 0.5px solid var(--border);
}

@media (min-width: 64em) {
  .our-work__item {
    grid-template-columns: 3fr 2fr;
    gap: clamp(48px, 5vw, 100px);
    align-items: end;
  }
}

/* Нечётные: текст справа (по умолчанию), чётные — менять порядок */
@media (min-width: 64em) {
  .our-work__item:nth-child(even) .our-work__img-wrap { order: 2; }
  .our-work__item:nth-child(even) .our-work__info     { order: 1; }
}

.our-work__img-wrap {
  display: block;
  overflow: hidden;
}

.our-work__img-wrap img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.our-work__item:hover .our-work__img-wrap img {
  transform: scale(1.04);
}

.our-work__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

@media (min-width: 64em) {
  .our-work__info { padding-bottom: var(--space-s); }
}

.our-work__title {
  font-family: var(--font-display);
  font-size: clamp(2.475rem, 4.5vw, 4.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.our-work__desc {
  font-size: 1.06875rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-style: italic;
  max-width: 38ch;
}

.our-work__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-s);
}

.our-work__cat {
  font-size: 0.765rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.our-work__date {
  font-size: 0.765rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.our-work__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8775rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: var(--space-s);
  transition: gap 0.25s ease, color 0.2s;
}

.our-work__link:hover {
  color: var(--accent-text);
  gap: 14px;
}

.our-work-section__footer {
  padding-top: clamp(48px, 6vh, 80px);
  border-top: 0.5px solid var(--border);
  display: flex;
  justify-content: center;
}

.our-work__all {
  font-size: 0.8775rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s, letter-spacing 0.3s;
  padding: 14px 0;
}

.our-work__all:hover {
  color: var(--text);
  letter-spacing: 0.24em;
}

/* ══════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════ */

.faq-section {
  padding-block: clamp(100px, 12vh, 180px);
  border-bottom: 0.5px solid var(--border);
}

.faq-section h2 { margin-bottom: var(--space-l); }

.faq__inner {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 64em) {
  .faq__inner {
    grid-template-columns: 2fr 3fr; /* fr вместо %: 40/60 без учёта gap */
    align-items: start;
  }
}

.faq__aside {
  display: flex;
  flex-direction: column;
}

.faq__aside-title {
  font-size: var(--h2);
  font-weight: 400;
  margin-bottom: var(--space-s);
  color: var(--text);
}

.faq__aside-desc {
  font-size: 1.0125rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 36ch;
  margin-bottom: var(--space-l);
}

.faq__ask-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 150ms;
}
.faq__ask-link:hover { color: var(--text); }

.faq__list { list-style: none; }

.faq-item {
  border-bottom: 0.5px solid var(--border);
}

.faq-item:first-child { border-top: 0.5px solid var(--border); }

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.0125rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-base);
  font-weight: 400;
  gap: var(--space-m);
}

/* Знак рисуем двумя полосками, а глиф «+» из разметки прячем цветом: коробка
   (16×40.8) и высота строки вопроса остаются прежними, без глифа они бы
   поехали. У открытого пункта вертикальная полоска ложится на горизонтальную
   — «+» становится «−». Повёрнутый на 45° «+» для этого не годится: на экране
   он неотличим от «×», а это знак «закрыть/удалить», а не «свернуть». */
.faq-icon {
  position: relative;
  font-size: 1.35rem;
  color: transparent;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.5px;
  margin: -0.75px 0 0 -6.5px;
  background: var(--text-muted);
}

.faq-icon::after {
  transform: none;
  transition: transform 0.3s;
}

/* Свёрнутый пункт бывает только при живом JS — см. .faq-a ниже, — поэтому
   вертикальная полоска («+») поднимается тем же классом. */
.js .faq-item:not(.open) .faq-icon::after { transform: rotate(90deg); }

/* Раскрытие через grid-template-rows: 0fr → 1fr — так анимируется реальная
   высота содержимого, без магического числа. Раньше здесь стоял
   max-height: 300px: на мобильном 1rem = 20px, и ответ длиннее
   ~9 строк молча обрезался — без всякого признака, что текст продолжается.
   Сейчас самый длинный ответ занимает 226px из тех 300, то есть до обрыва
   оставалось три строки. */
.faq-a {
  display: grid;
  grid-template-rows: 1fr; /* без JS ответы видны все: открыть их нечем */
  /* Клип — на контейнере: во время сворачивания текст выше трека, и без
     этого он вылезал бы на соседний вопрос. */
  overflow: hidden;
  transition: grid-template-rows 0.4s ease;
}

/* Сворачивает только живой JS. Класс js ставится блокирующим скриптом в
   <head> (transitions.js), то есть до первого кадра — свёрнутые ответы не
   успевают мигнуть раскрытыми. */
.js .faq-item:not(.open) .faq-a { grid-template-rows: 0fr; }

/* min-height: 0 обязателен: у grid-элемента минимальная высота по умолчанию
   равна содержимому, и без сброса строка 0fr не схлопнется.
   У свёрнутого пункта отступ снизу снимается и анимируется вместе с
   высотой. Постоянный padding здесь не схлопывается: у контейнера с auto-
   высотой трек 0fr берёт базовым размером min-content элемента, а padding в
   него входит, min-height: 0 его не снимает. Из-за этого под каждым закрытым
   вопросом оставалась полоса 18px с обрезанной первой строкой ответа. */
.faq-a p {
  min-height: 0;
  padding-bottom: 18px;
  transition: padding-bottom 0.4s ease;
  color: var(--text-muted);
  font-size: 0.984375rem;
  line-height: 1.7;
  max-width: none;
}

.js .faq-item:not(.open) .faq-a p { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-a { transition: none; }
  .faq-a p { transition: none; }
  .faq-icon::after { transition: none; }
}

/* ══════════════════════════════════════════
   БЛОГ
   ══════════════════════════════════════════ */

.blog-section {
  padding-block: clamp(60px, 10vh, 140px);
  border-bottom: 0.5px solid var(--border);
}

@media (min-width: 90em) {
  .blog-section { padding-block: 160px; }
}

.blog-section h2 {
  margin-bottom: var(--space-l);
  max-width: 20ch;
}

.blog__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 64em) {
  .blog__inner { grid-template-columns: 1fr 1fr; }
}

.blog-desc {
  font-size: 1.0125rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-l);
  max-width: 44ch;
}

.blog-card {
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  overflow: hidden;
}

.blog-card__img {
  aspect-ratio: 16/9;
  background: var(--bg-3);
  overflow: hidden;
}

.blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__body {
  padding: var(--space-m);
  border-top: 0.5px solid var(--border);
}

.blog-card__title {
  font-size: 1.0125rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 8px;
  max-width: none;
}

.blog-card__date {
  font-size: var(--small);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════
   КАЛЬКУЛЯТОР
   ══════════════════════════════════════════ */

.price-calc {
  padding-block: clamp(60px, 10vh, 140px);
  border-bottom: 0.5px solid var(--border);
  overflow-x: hidden;
  scroll-margin-top: var(--header-h);
}

.price-calc h2 { margin-bottom: var(--space-s); }
/* Описание «3 минуты…» — на пару пикселей мельче обычного .lead: при полном
   .lead разрыв с H2 над ним сокращался, и заголовок читался мельче. */
.price-calc .lead { margin-bottom: var(--space-l); font-size: 1.265625rem; }

/* Описания внутри калькулятора — подписи вариантов, оценка, пояснения на
   экране результата — по эталону описаний на хабе услуг (.svc-var__desc):
   --step--1 и интерлиньяж 1.5. Раньше кегль стоял в каждом правиле отдельно,
   а интерлиньяж наследовался от body (1.65, рассчитан на сплошной текст).
   Цвет и отступы остаются у самих элементов. */
.calc__option-desc,
.calc__estimate,
.calc__funnel,
.calc__breakdown li,
.calc__disclaimer,
.calc__form-note,
.calc__alt {
  font-size: var(--step--1);
  line-height: 1.5;
}

/* Калькулятор — карточка: приподнят над фоном (surface), радиус карточки. */
.calc {
  padding: var(--space-m) var(--space-s);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}

@media (min-width: 48em) {
  .calc { padding: var(--space-l) var(--space-m); }
}

.calc__stepper {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--space-l);
}

/* Индикатор — только цифры: подписи шагов («Тип», «Сфера»…) убраны.
   Элемент остался флексом ради центрирования кружка, но колонка и зазор
   под вторую строку больше не нужны. */
.calc__stepper-item {
  display: flex;
  align-items: center;
}

.calc__stepper-num {
  width: 2.25rem;
  height: 2.25rem;
  border: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.84375rem;
  color: var(--text-muted);
  transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.calc__stepper-line {
  flex: 1;
  height: 1px;
  background-color: var(--border);
  margin-top: 1.125rem;
}

.calc__stepper-item.is-active .calc__stepper-num {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--accent-ink);
}

.calc__stepper-item.is-done .calc__stepper-num {
  border-color: var(--text);
  background-color: var(--text);
  color: var(--bg);
}

/* Полоса состояния: слева номер шага, справа живая оценка. */
.calc__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  flex-wrap: wrap;
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-xs);
  border-bottom: 0.5px solid var(--border);
}

.calc__progress {
  font-size: 0.7875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: none;
}

.calc__estimate {
  display: block;
  color: var(--text-muted);
  max-width: none;
}
.calc__estimate[hidden] { display: none; }
/* На результате вилка стоит крупно сверху — дублировать её в полосе не нужно. */
.calc[data-step="result"] .calc__bar { display: none; }
.calc__estimate-value { color: var(--text); font-weight: 500; white-space: nowrap; }

.calc__step { display: none; }
.calc__step.is-active { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .calc__step.is-active { animation: fadeUp 0.3s ease both; }
}

.calc__fieldset { display: block; border: none; margin: 0; padding: 0; }

/* Вопрос шага — заголовок блока, но тег <legend>, а не h2/h3: базовый
   интерлиньяж заголовков (1.15) на него не распространялся, и он наследовал
   от body 1.7. На 33px это 56px между строками — блок заметно выбивался из
   ритма остального сайта. Значение то же, что у h1–h4 в base.css. */
.calc__question {
  display: block;
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-m);
  color: var(--text);
}

/* --step-2 — только с десктопа: на планшете он давал 31px при h2 секции
   30px, и вопрос шага читался крупнее заголовка блока. */
@media (min-width: 64em) {
  .calc__question { font-size: var(--step-2); }
}

.calc__optional {
  font-size: var(--step-0);
  font-weight: 300;
  color: var(--text-muted);
}

.calc__options {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

/* Мобильный: карточки в один вертикальный столбец на всю ширину */
.calc__options--3col,
.calc__options--4col,
.calc__options--addons { grid-template-columns: 1fr; }

/* Планшет — две колонки: при трёх и четырёх на 768px карточка ~180px, и
   «Одностраничный», «Производство» рвались посреди слова. Полная сетка —
   с десктопа. */
@media (min-width: 48em) {
  .calc__options--3col,
  .calc__options--4col { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .calc__options--3col { grid-template-columns: repeat(3, 1fr); }
  .calc__options--4col { grid-template-columns: repeat(4, 1fr); }
}

.calc__option { display: block; cursor: pointer; min-width: 0; }

.calc__option-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  height: 100%;
  padding: var(--space-m);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-ctrl);
  background: var(--surface-sunk);
  transition: border-color var(--transition), background-color var(--transition);
}

/* Выбранный вариант — акцентная рамка + едва заметная подсветка (без сплошной заливки). */
.calc__option input:checked + .calc__option-inner { border-color: var(--accent); }

.calc__option:hover .calc__option-inner { border-color: var(--text-muted); }

.calc__option input:checked + .calc__option-inner {
  border-color: var(--accent);
}

.calc__option input:focus-visible + .calc__option-inner {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Короткая подсветка выбранной карточки перед автопереходом на следующий шаг. */
.calc__option-inner.is-picked {
  background-color: var(--calc-card);
  border-color: var(--accent);
}

.calc__option-title {
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--text);
  /* Длинные слова («Многостраничный») переносим по слогам с дефисом,
     а не грубым обрывом; break-word — только крайняя страховка */
  hyphens: auto;
  overflow-wrap: break-word;
}

.calc__option-desc {
  color: var(--text-muted);
  max-width: none;
  font-weight: 300;
}

/* На мобилке компактные карточки такие же просторные; ужимаем только на планшете+ */
@media (min-width: 48em) {
  .calc__option--compact .calc__option-inner { padding: var(--space-s); }
}

.calc__option--addon .calc__option-inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  padding: var(--space-s);
}

.calc__addon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.calc__addon-price {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  max-width: none;
  transition: color var(--transition);
}

.calc__option--addon input:checked + .calc__option-inner .calc__addon-price { color: var(--accent-text); }

/* «Ещё услуги» — раскрытие второй половины доп. услуг на шаге 4. */
.calc__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  margin: 0 0 var(--space-l);
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-base);
  font-size: var(--step--1);
  color: var(--text);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
}
.calc__more:hover { text-decoration-color: var(--accent); }
.calc__more-count { color: var(--text-muted); }

/* Группа, за которой сразу идёт кнопка «Ещё услуги», — с уменьшенным отступом. */
.calc__options--tight { margin-bottom: var(--space-s); }

.calc__options--extra { margin-bottom: var(--space-l); }
.calc__options--extra[hidden] { display: none; }

.calc__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.calc__nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* Кнопка «Далее» нужна только клавиатурной навигации: мышью и тапом
   шаг переключается сам сразу после выбора. */
.calc[data-input="pointer"] .calc__btn-next { display: none; }
.calc__btn-skip[hidden] { display: none; }

.calc__nav--result {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 0.5px solid var(--border);
}

/* Заголовок результата компактнее обычного вопроса: вилка и форма
   обязаны поместиться на один экран мобильного (375×667). */
.calc__question--result { margin-bottom: var(--space-s); }

.calc__price-block {
  padding: var(--space-s);
  margin-bottom: var(--space-s);
  background-color: var(--calc-card);
  border: 0.5px solid var(--border);
}

@media (min-width: 48em) {
  .calc__price-block { padding: var(--space-l); margin-bottom: var(--space-l); }
}

/* Путь по калькулятору одной строкой — то же, что уходит в заявку полем funnel.
   На мобильном скрыт: там этот же набор ответов стоит списком под формой,
   а экран нужен целиком под вилку и поля заявки. */
.calc__funnel {
  display: none;
  margin-top: var(--space-2xs);
  color: var(--text-muted);
  max-width: none;
}

@media (min-width: 48em) {
  .calc__funnel { display: block; }
  .calc__funnel:empty { display: none; }
}

.calc__price-range {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--space-2xs);
  margin-bottom: var(--space-2xs);
  line-height: 1;
}

/* На мобильном вилка на шаг мельче: сумма всё равно самая крупная на экране,
   но помещается в одну строку и оставляет место форме. */
.calc__price-from,
.calc__price-to {
  font-size: var(--step-3);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Разделитель вилки и знак валюты приглушены одинаково: 0.45 давало
   4.15:1 на 20px — ниже AA. 0.65 → 7.45:1, тон остаётся вспомогательным. */
.calc__price-sep { font-size: var(--step-1); opacity: 0.65; }
.calc__price-cur { font-size: var(--step-1); font-weight: 400; opacity: 0.65; }

@media (min-width: 48em) {
  .calc__price-range { margin-bottom: var(--space-s); }
  .calc__price-from,
  .calc__price-to { font-size: var(--step-4); }
  .calc__price-sep,
  .calc__price-cur { font-size: var(--step-2); }
}

.calc__timeline { font-size: var(--step-0); color: var(--text-muted); max-width: none; }
.calc__timeline strong { color: var(--text); }

.calc__breakdown {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-m);
  padding: var(--space-m);
  background-color: var(--bg-3);
  border: 0.5px solid var(--border);
  list-style: none;
}

.calc__breakdown li {
  display: flex;
  gap: var(--space-s);
  max-width: none;
}

.calc__breakdown-label {
  flex-shrink: 0;
  min-width: 5.625rem;
  font-weight: 500;
  color: var(--text-muted);
}

.calc__disclaimer {
  margin-bottom: var(--space-m);
  padding-left: var(--space-s);
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  max-width: 60ch;
}

.calc__form-wrap {
  padding: var(--space-s);
  margin-bottom: var(--space-m);
  border: 0.5px solid var(--border);
  background: var(--bg-3);
}

@media (min-width: 48em) {
  .calc__form-wrap { padding: var(--space-l); margin-bottom: var(--space-l); }
}

.calc__form-wrap h4 { font-size: var(--step-1); margin-bottom: var(--space-2xs); color: var(--text); }
@media (min-width: 48em) { .calc__form-wrap h4 { margin-bottom: var(--space-s); } }
.calc__form-wrap > p { margin-bottom: var(--space-m); color: var(--text-muted); }

.calc__form-row {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
}

@media (min-width: 48em) {
  .calc__form-row { grid-template-columns: 1fr 1fr; gap: var(--space-m); margin-bottom: var(--space-m); }
}

/* Необязательное поле «Задача» свёрнуто: обязательны только имя и контакт. */
.calc__details { margin-bottom: var(--space-2xs); }
@media (min-width: 48em) { .calc__details { margin-bottom: var(--space-s); } }

.calc__details-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  font-size: var(--step--1);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.calc__details-summary::-webkit-details-marker { display: none; }

.calc__details-summary::before {
  content: "+";
  font-size: var(--step-0);
  color: var(--text-muted);
  line-height: 1;
}
.calc__details[open] .calc__details-summary::before { content: "–"; }

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

.calc__details .form-field { margin-bottom: var(--space-s); }

.calc__mini-form .form-field { margin-bottom: 0; }
.calc__form-note { margin-top: var(--space-s); color: var(--text-muted); max-width: none; }

/* Альтернативные пути после расчёта: строка мелким текстом, не кнопки —
   акцентное действие в этой точке одно, и это форма выше. */
.calc__alt {
  margin-top: var(--space-s);
  color: var(--text-muted);
  max-width: none;
}

.calc__alt a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

.calc__alt a:hover { color: var(--text); text-decoration-color: var(--accent); }

.form-field {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-m);
}

.form-field label {
  font-size: 0.81rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
}

/* Поля ввода — вложенный уровень: surface-sunk, тонкая рамка, радиус 8px. */
.form-field input,
.form-field textarea,
.form-field select {
  background: var(--surface-3);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-ctrl);
  color: var(--text);
  font-size: 1.06875rem;
  padding: 12px 14px;
  width: 100%;
  font-family: var(--font-base);
  font-weight: 300;
  transition: border-color 0.2s, background-color 0.2s;
}

/* Здесь стоял `outline: none`. По специфичности он перебивал общее правило
   :focus-visible из base.css — и при обходе с клавиатуры ни одно поле,
   включая чекбокс согласия и селекты, не показывало фокус вообще.
   Убран: браузер и так рисует контур только при :focus-visible, то есть
   мышью он не появится. Рамку при этом подсвечиваем как второй признак. */
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-muted); }

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--text-muted);
}

.form-field textarea { resize: none; }

.form-error {
  font-size: var(--step--1);
  color: var(--accent-text);
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { margin-top: var(--space-s); font-weight: 400; }
.form-status--ok { color: var(--text); }
.form-status--error { color: var(--accent-text); }

/* ══════════════════════════════════════════
   СТРАНИЦА КОНТАКТОВ
   ══════════════════════════════════════════ */

.contacts-hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  padding-top: var(--header-h);
  border-bottom: 0.5px solid var(--border);
  box-sizing: border-box;
}

/* Внутренний блок: контент по центру первого экрана */
.contacts-hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding-block: clamp(32px, 6vh, 80px) 28px;
}

/* Двухколоночный блок: заголовок слева, плашка справа */
.contacts-hero__body {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
}

/* Мини-описание под заголовком */
/* Типографику задаёт .hero-subtitle; здесь — только раскладка */
.contacts-hero__desc {
  max-width: 42ch;
  margin-top: var(--space-s);
}

.contacts-hero__left { flex: 1; min-width: 0; }

/* Плашка справа — выровнена по центру по вертикали */
.contacts-hero .about-hero__sig {
  align-self: center;
}

@media (max-width: 47.99em) {
  .contacts-hero__body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-l);
  }
  .contacts-hero .about-hero__sig {
    border-left: none;
    padding-left: 0;
  }
}

/* Типографику задаёт класс .hero-title; здесь — только нижний отступ:
   верхний приходит от надзаголовка через --label-gap (base.css). */
.contacts-h1 {
  margin-bottom: var(--space-m);
}

.contacts-left {}

.contacts-left__quote {
  font-family: var(--font-display);
  font-size: clamp(1.2375rem, 2vw, 1.575rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--text);
  margin: var(--space-m) 0;
}

.contacts-left__desc {
  font-size: 0.984375rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-m);
  max-width: 40ch;
}

.contacts-preview-card {
  margin-top: var(--space-xl);
  border: 0.5px solid var(--border);
  background: var(--bg-2);
  overflow: hidden;
}

.contacts-preview-card__img {
  aspect-ratio: 4/3;
  background: var(--bg-3);
  overflow: hidden;
}

.contacts-preview-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contacts-preview-card__body {
  padding: var(--space-s) var(--space-m);
  border-top: 0.5px solid var(--border);
}

.contacts-preview-card__caption {
  font-size: 0.81rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

@media (max-width: 47.99em) {
  .form-row { grid-template-columns: 1fr; }
}

/* Двухколоночная форма во всю ширину: слева поля, справа задача + отправка */

/* Растягиваем поле описания задачи, чтобы правая колонка была вровень с левой */

/* ══════════════════════════════════════════
   СТРАНИЦА УСЛУГ — HERO
   ══════════════════════════════════════════ */

.page-hero {
  padding-top: calc(var(--header-h) + 80px);
  padding-bottom: clamp(60px, 10vh, 140px);
  border-bottom: 0.5px solid var(--border);
}

/* Типографику задаёт класс .hero-title (base.css); здесь — только нижний
   отступ. Верхний не задаём: расстояние от надзаголовка держит --label-gap
   (base.css), одинаково на всех страницах. */
.page-hero h1 {
  margin-bottom: var(--space-m);
}

/* Типографику подзаголовка задаёт .hero-subtitle; здесь — только ширина */
.page-hero p {
  max-width: 50ch;
}

/* ══════════════════════════════════════════
   ПРАВОВОЙ ТЕКСТ — политика конфиденциальности
   ══════════════════════════════════════════ */
.legal-text { max-width: 65ch; }

.legal-text__meta {
  font-size: var(--small);
  color: var(--text-muted);
  margin-bottom: var(--space-l);
}

.legal-text h2 {
  font-size: var(--step-2);
  margin-top: var(--space-xl);
}
.legal-text h2:first-child { margin-top: 0; }

.legal-text p {
  margin-top: var(--space-s);
  color: var(--text-muted);
  line-height: 1.65;
}

.legal-text ul {
  margin-top: var(--space-s);
  padding-left: var(--space-m);
  list-style: disc;
  color: var(--text-muted);
}

.legal-text li {
  margin-top: var(--space-2xs);
  line-height: 1.65;
}

/* Параметры обработки (раздел «Цели обработки») */
.legal-text__params {
  margin-top: var(--space-m);
  border-top: 0.5px solid var(--border);
}

.legal-text__params dt {
  margin-top: var(--space-m);
  font-weight: 500;
  color: var(--text);
}

.legal-text__params dd {
  margin: var(--space-2xs) 0 var(--space-m);
  padding-bottom: var(--space-m);
  border-bottom: 0.5px solid var(--border);
  color: var(--text-muted);
  line-height: 1.65;
}

/* Первый экран услуг — во весь экран устройства */
.page-hero--full {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  padding-bottom: clamp(60px, 10vh, 140px);
}

.page-hero__cta {
  margin-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* ══════════════════════════════════════════
   КЕЙС — HERO (страницы work/)

   Раскладка одна на всех ширинах: обложка на весь экран, текст поверх неё.
   Разметка у всех кейсов одинакова, поэтому правка здесь — правка сразу во
   всех work/*.html.

   Первый экран — ровно один экран устройства. Обложка залита во всю ширину
   и высоту через cover: края обрезаются, и это осознанно — кадр работает как
   атмосфера, а не как документ. Где обрез съедал важное, у конкретной
   картинки стоит свой object-position (список ниже).

   Сверху служебная строка .case-bar: «Назад», год и направление работы.
   Под ней, прижатые к низу экрана, — название и строка сути. Клиент и
   инструменты живут в мета-блоке в начале секции «Задача»: в первом экране
   им нечем было дышать.

   Шапка непрозрачная и лежит поверх кадра. Обложка при этом растянута на всю
   секцию, включая полосу под шапкой: так высота кадра — честные 100svh, а не
   «экран минус шапка», и низ кадра совпадает с низом экрана.
   ══════════════════════════════════════════ */

.case-hero {
  position: relative;
  /* Свой контекст наложения: z-index детей не спорит с фиксированной шапкой
     и с оверлеем перехода между страницами. */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* Ровно один экран. svh, а не vh: на мобильных vh считается без учёта
     адресной строки, и низ кадра уезжал бы за край ровно на её высоту.
     Первое правило — фолбэк для браузеров без svh. */
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-h); /* место под фиксированный хедер */
  padding-bottom: clamp(32px, 6vh, 72px);
  overflow: hidden;
}

/* Служебная строка под шапкой: слева «Назад», справа год и направление
   работы. Одна линия, мелкий кегль, приглушённый цвет — она отвечает на
   «что это и когда», а не тянет внимание. Не липкая: уезжает вместе с
   содержимым.

   Год и теги живут только здесь. В первом экране их больше нет: там они
   стояли третьей и четвёртой строкой и повторяли то же самое дважды. */
.case-bar {
  position: relative; /* поверх обложки */
  z-index: 2;
  padding-inline: 20px;
}

/* На телефоне строка всегда идёт под «Назад», а не справа от него.
   Раньше здесь стоял flex с переносом, и место в ряду решала длина
   конкретной подписи: «2026 · UX/UI · Мобильный банк» у Moby на 390px
   влезала и вставала к правому краю, а пять остальных не влезали и
   переносились под кнопку влево. Один и тот же экран у шести кейсов
   выглядел по-разному. Ряд возвращается с 48em — там самая длинная
   подпись («2026 · Фирменный стиль · Лендинг · Tilda») помещается
   рядом с кнопкой с запасом. Отступ подписи от кнопки задан ниже,
   в самом .case-bar__meta: правило с `margin` идёт после этого блока и
   при равной специфичности перебило бы отдельный margin-top здесь. */
@media (min-width: 48em) {
  .case-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    /* Ряд переносится целиком, поэтому вертикальный зазор ненулевой: иначе
       при неожиданно длинной подписи теги прилипают к подписи кнопки. */
    gap: var(--s-1) var(--s-4);
  }
}

@media (min-width: 64em) {
  .case-bar { padding-inline: 40px; }
}

/* Пол в 12px — ниже строка перестаёт читаться, а уменьшение базового кегля
   документа утянуло бы её туда само.

   Цвет — второй уровень, а не третий. --text-muted здесь замерялся: поверх
   светлых обложек (постер STAYLY, ноутбук NY Knitwear) он давал от 1.6 до
   3.4:1, то есть проваливал AA даже под градиентом. Затемнять кадр до
   нормы пришлось бы почти в плашку. */
.case-bar__meta {
  /* Отступ сверху — только на телефоне, где подпись стоит своей строкой
     под «Назад» (см. .case-bar выше). В ряду он не нужен. */
  margin: var(--s-1) 0 0;
  font-size: max(var(--label), 12px);
  line-height: 1.4;
  color: var(--text-secondary);
}

@media (min-width: 48em) {
  .case-bar__meta { margin-top: 0; }
}

/* Дубль внизу кейса — перед футером, обычным потоком */
.back-nav--bottom {
  padding: var(--space-m) var(--gutter);
}

/* Текстовый блок прижат к низу экрана — туда, где градиент плотнее всего.
   margin-top: auto вместо выравнивания на секции: между строкой и текстом
   остаётся весь свободный кадр, и он же держит воздух. */
.case-hero__text {
  position: relative;
  z-index: 2;
  min-width: 0;
  margin-top: auto;
  padding-inline: 20px;
}

@media (min-width: 48em) {
  .case-hero__text { padding-inline: clamp(24px, 3vw, 40px); }

  /* Пол в 96px — место под плавающую кнопку Telegram (.tg-btn в layout.css).
     Она fixed в нижнем углу и живёт только от 48em, то есть ровно там, где
     текст первого экрана прижат к низу. Когда кнопка стояла слева, она
     накрывала начало строки сути на всех шести кейсах; справа длинная строка
     на 48–64em тоже доходит до неё. Считано по худшей ширине: кнопка 55px +
     24px отступа = 79px, остальное — воздух.
     Меняешь размер или отступ кнопки — пересчитай и это значение. */
  .case-hero { padding-bottom: clamp(96px, 10vh, 120px); }
}

@media (min-width: 64em) {
  .case-hero__text { padding-inline: 40px; }
}

/* Обложка залита во всю секцию, включая полосу под шапкой. Морфинг при
   переходе с портфолио берёт .case-hero__cover img (assets/js/transitions.js)
   и молча отключается, если её не видно. */
.case-hero__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--surface-2); /* подложка, пока кадр грузится */
}

.case-hero__cover picture,
.case-hero__cover img {
  display: block;
  width: 100%;
  height: 100%;
}

.case-hero__cover img {
  object-fit: cover;
}

/* Кадрирование по кейсам. Значение стоит только там, где центр обрезал
   важное; у «Архитектуры двора», MultiMart, AoE Security и Moby пропорции
   близки к экранным, и центр справляется сам. Файлы не трогались:
   кадрирование — задача вёрстки.
     ny-knitwear — ноутбук в кадре стоит правее центра, и на телефоне, где
                   от ширины остаётся треть, центр срезал ему правый край.
     stayly      — обрез по вертикали, и на широком экране в дело идёт
                   другой кадр того же постера (см. <picture> в разметке).
   У Moby смещения нет намеренно: обложка 4:3, поля вокруг трёх телефонов
   равные (по 18% по ширине и 14% по высоте), и любой сдвиг срезал бы
   крайний телефон. Эти поля же держат первый экран: при cover композиция
   целиком помещается в кадр до соотношения ≈1.87 — то есть на всех
   обычных экранах вплоть до 16:9. */
.case-page--ny-knitwear .case-hero__cover img { object-position: 58% 50%; }
.case-page--stayly .case-hero__cover img { object-position: 50% 40%; }

/* Затемнение под текстом: два градиента, а не плашка. Верхний держит
   служебную строку и ссылки шапки, нижний — название и строку сути.
   Цвет — фон страницы, новых в палитру не заводим. */
.case-hero__cover::before,
.case-hero__cover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* Плотность подобрана расчётом на худший случай — белый кадр под текстом
   (постер STAYLY): при 0.86 композит выходит примерно rgb(47), и второй
   уровень текста держит на нём 6.3:1. Ниже опускать нельзя, выше — уже
   плашка, а не затемнение. */
.case-hero__cover::before {
  top: 0;
  height: 34%;
  background: linear-gradient(
    to bottom,
    rgb(11 11 13 / 0.96) 0%,
    rgb(11 11 13 / 0.86) 34%,
    rgb(11 11 13 / 0) 100%);
}

.case-hero__cover::after {
  bottom: 0;
  height: 56%;
  background: linear-gradient(
    to top,
    rgb(11 11 13 / 0.96) 0%,
    rgb(11 11 13 / 0.86) 38%,
    rgb(11 11 13 / 0) 100%);
}

/* Название проекта. Типографика прописана здесь, а не взята у .hero-title,
   намеренно: тот класс мобильный блок в конце файла переопределяет по кеглю,
   и заголовок кейса снова ломался бы на две строки. Кегль — --h1-case,
   подобранный под самое длинное название в одну строку (см. base.css). */
.case-hero__title {
  font-family: var(--font-base);
  font-size: var(--h1-case);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--s-5);
}

/* Строка сути — одной мелкой строкой под заголовком. Теги направления
   уехали в .case-bar, поэтому здесь осталась только формулировка. */
.case-hero__summary {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0;
}

/* ══════════════════════════════════════════
   КЕЙС — HERO, появление текста

   Строки выезжают снизу вверх из-под маски, друг за другом. Запуск — сам
   факт отрисовки: это @keyframes, а не переход по классу, поэтому анимация
   начинается вместе с первым кадром и ничего не ждёт. Отсюда же и главное
   свойство — обложка не задерживает LCP: пока картинка грузится и
   декодируется, её проявление уже отыграло, и браузер видит готовый кадр.
   Вешать старт на JS нельзя ровно по этой причине: main.js едет с defer, и
   LCP вырос бы на всё время его загрузки.

   Начальное состояние живёт под префиксом .js. Класс ставит transitions.js,
   подключённый в <head> без defer, то есть до первого кадра: без JS текст
   просто виден и никогда не прячется. То же устройство, что у свёрнутых
   ответов FAQ.
   ══════════════════════════════════════════ */

/* Маска: строка выезжает из-под неё. Снимается по окончании анимации
   (класс от main.js) — иначе overflow: hidden срезал бы выносные элементы
   заголовка: у .hero-title интерлиньяж 1.06, и строчный бокс уже самих букв.
   Если main.js почему-то не приедет, текст всё равно виден и отыгран —
   останется только лишняя обрезка по краям бокса. */
.js .case-hero__text .case-hero__mask {
  display: block;
  overflow: hidden;
}

.js .case-hero__text.is-played .case-hero__mask {
  overflow: visible;
}

/* 115%, а не 100%: у заголовка выносные выходят за строчный бокс, и на
   ровно ста процентах их хвосты видны в маске полоской до старта. */
@keyframes case-hero-line {
  from { transform: translateY(115%); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}

.js .case-hero__line {
  display: block;
  /* both — финальное состояние фиксируется и до старта, и после конца:
     один проход, дальше обычная страница. */
  animation: case-hero-line 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Фора перед стартом — чтобы появление не наложилось на переход между
   страницами. Дальше шаг 70 мс: название → строка сути. */
.js .case-hero__text .case-hero__mask:nth-child(1) .case-hero__line { animation-delay: 100ms; }
.js .case-hero__text .case-hero__mask:nth-child(2) .case-hero__line { animation-delay: 170ms; }

/* Обложка проявляется параллельно и мягче: только прозрачность, без сдвига,
   чуть дольше. Сдвигать её нельзя — при переходе с портфолио её место
   занимает морфинг обложки (View Transitions), и второе движение поверх
   первого читается как рывок. */
@keyframes case-hero-cover {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.js .case-hero__cover img {
  animation: case-hero-cover 1s ease both;
}

/* Пришли морфингом с портфолио: обложку уже принесла View Transition, и
   гасить прилетевший кадр ради повторного проявления нечем. */
.js .case-hero.is-morphing .case-hero__cover img {
  animation: none;
}

/* Движения нет вообще — не ускоренная версия, а полное отсутствие. */
@media (prefers-reduced-motion: reduce) {
  .js .case-hero__text .case-hero__mask { overflow: visible; }

  .js .case-hero__line,
  .js .case-hero__cover img {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ══════════════════════════════════════════
   ПОРТФОЛИО-СТРАНИЦА
   ══════════════════════════════════════════ */

.portfolio-page > .cases-section {
  padding-top: calc(var(--header-h) + clamp(40px, 6vh, 80px));
  border-top: none;
}

/* Интро портфолио: заголовок, суть и действия; подпись справа с 64em */
.portfolio-intro__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.portfolio-intro__title { margin-bottom: var(--s-5); }

.portfolio-intro__desc { color: var(--text-muted); }

.portfolio-intro__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-6);
}

.portfolio-intro__alt { color: var(--text-secondary); }
.portfolio-intro__alt:hover { color: var(--text); }

/* .hero-subtitle задаёт только типографику, раскладку добавляет парный класс
   (.hero__subtitle, .page-hero__desc). На правовой странице и в брифе такого
   класса нет — там .lead, и заголовок лип к первому абзацу. */
.page-intro h1 + p { margin-top: var(--s-4); }

.page-intro p + p { margin-top: var(--s-3); }

/* Десктоп — по макету Figma: надзаголовок 24, H1 96, суть 32/40, кнопки
   85, подпись справа сверху. */
@media (min-width: 64em) {
  .portfolio-intro {
    padding-block: calc(var(--header-h) + 156 * var(--u)) calc(160 * var(--u));
  }

  .portfolio-intro__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(60 * var(--u));
  }

  .portfolio-intro .eyebrow {
    font-size: var(--fs-small);
    line-height: 1.1667;
    margin-bottom: calc(30 * var(--u));
  }

  .portfolio-intro__title { margin-bottom: calc(40 * var(--u)); }

  .page-intro h1 + .portfolio-intro__desc { margin-top: 0; }

  .portfolio-intro__desc {
    max-width: calc(1080 * var(--u));
    line-height: var(--lh-lead);
  }

  .portfolio-intro__cta {
    margin-top: calc(52 * var(--u));
    gap: calc(88 * var(--u));
  }

  .portfolio-intro__alt {
    display: inline-flex;
    align-items: center;
    gap: calc(15 * var(--u));
    font-size: max(17px, calc(32 * var(--u)));
    color: var(--text);
  }
  .portfolio-intro__alt:hover { color: var(--accent-text); }

  .portfolio-intro .about-hero__sig {
    width: calc(275 * var(--u));
    margin-top: calc(95 * var(--u));
  }

  .portfolio-page > .cases-section { padding-top: 0; }
}

/* Отдельный кегль названий проектов на портфолио убран: теперь и здесь, и на
   главной работает общее правило .case-sticky-title — сетка колонки и самое
   длинное название («Архитектура двора») у обеих секций одинаковые. */

.portfolio__filter {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-l);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.portfolio__filter::-webkit-scrollbar { display: none; }

.filter-btn {
  flex-shrink: 0;
  padding: 6px var(--space-m);
  border: 0.5px solid var(--border);
  font-size: var(--step--1);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.filter-btn:hover { border-color: var(--text-muted); color: var(--text); }
.filter-btn.is-active { background-color: var(--text); border-color: var(--text); color: var(--bg); }

.portfolio__grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 64em) {
  .portfolio__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 90em) {
  .portfolio__grid { grid-template-columns: repeat(4, 1fr); }
}

.work-card.is-hidden { display: none; }

.work-card__link {
  display: block;
  overflow: hidden;
  position: relative;
  color: inherit;
  text-decoration: none;
}

.work-card__thumb {
  display: block;
  aspect-ratio: 3/2;
  background-color: var(--bg-2);
  overflow: hidden;
  position: relative;
}

.work-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .work-card__link:hover .work-card__thumb img { transform: scale(1.06); }
}

.work-card__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: var(--space-2xs);
}

.work-card__title { font-size: var(--step-1); font-weight: 400; color: var(--text); }
.work-card__tag { font-size: var(--step--1); color: var(--text-muted); }

/* ══════════════════════════════════════════
   ОБО МНЕ
   ══════════════════════════════════════════ */

.about-page {
  padding-top: calc(var(--header-h) + 80px);
}

@media (min-width: 90em) {
  .about-page { padding-top: calc(var(--header-h) + 120px); }
}

.about__grid {
  display: grid;
  gap: var(--space-l);
}

.about__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  background-color: var(--bg-2);
}

.about__text h2 { margin-top: var(--space-l); margin-bottom: var(--space-s); }
.about__text h2:first-child { margin-top: 0; }
.about__text p { margin-bottom: var(--space-s); color: var(--text-muted); line-height: 1.7; }

.tools {
  margin-top: var(--space-xl);
}

.tools__label {
  display: block;
  font-size: 0.765rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-s);
}

.tools__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tools__item {
  padding: 5px 14px;
  border: 0.5px solid var(--accent);
  border-radius: 30px;
  background: rgba(216, 242, 73, 0.05);
  font-size: 0.8775rem;
  color: var(--accent-text);
}

@media (min-width: 64em) {
  .about__grid { grid-template-columns: 2fr 3fr; gap: var(--space-xl); align-items: start; }
}

/* ══════════════════════════════════════════
   ABOUT PAGE — HERO (весь экран)
   ══════════════════════════════════════════ */

.about-hero {
  min-height: 100vh;
  min-height: 100dvh; /* dvh: контент не уезжает под адресную строку iOS */
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  box-sizing: border-box;
  overflow: hidden;
}

.about-hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xl);
  padding-block: clamp(60px, 8vh, 100px);
}

@media (min-width: 64em) {
  .about-hero__inner {
    flex-direction: row;
    align-items: center;
    gap: clamp(48px, 6vw, 100px);
  }
}

.about-hero__main { flex: 1; }

/* Цитата первого экрана: ширину держит колонка, шрифт крупнее вводного текста */
.about-hero__quote {
  font-family: var(--font-display);
  font-size: clamp(1.6875rem, 3vw, 2.475rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  color: var(--text);
  margin: var(--space-s) 0 0;
  padding: 0;
  border: none;
}

.about-hero__quote cite {
  display: block;
  font-family: var(--font-base);
  font-style: normal;
  font-size: 0.84375rem;
  color: var(--text-muted);
  margin-top: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-hero__sig {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

@media (min-width: 64em) {
  .about-hero__sig {
    flex-shrink: 0;
    width: clamp(180px, 22%, 260px);
    border-left: 0.5px solid var(--border);
    padding-left: var(--space-l);
    align-self: center;
  }
}

.about-hero__sig-name {
  font-size: 1.06875rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  max-width: none;
}

.about-hero__sig-role {
  font-size: 0.765rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  margin: 0;
  max-width: none;
}

.about-hero__sig-desc {
  font-size: 0.9225rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  max-width: none;
}

/* ══════════════════════════════════════════
   MARQUEE ПРОЕКТОВ — бегущая строка в первом экране «Обо мне»
   Ряды собирает assets/js/projects-marquee.js
   ══════════════════════════════════════════ */

.clients {
  flex-shrink: 0; /* .about-hero — колоночный флекс, строка не должна сжиматься */
  padding-block: 26px;
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}

.marquee {
  overflow: hidden;
  /* Края растворяются, чтобы строка не обрывалась о границу экрана */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Сдвиг на -50% рассчитан ровно на два одинаковых ряда.
   Анимируется только transform — margin/left дёргаются и грузят процессор. */
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
}

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

.marquee:hover .marquee__track { animation-play-state: paused; }

/* padding-right ОБЯЗАН равняться gap: иначе на стыке рядов
   промежуток окажется двойным или половинным — это видно сразу */
.marquee__row {
  display: flex;
  gap: 40px;
  padding-right: 40px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* Названия разной длины по ширине НЕ равняем — выравнивается только
   кегль и вес, ширина пусть гуляет */
.marquee__item {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Кириллица в этом шрифте плотнее латиницы: тем же кеглем «Архитектура двора»
   выглядит тяжелее «STAYLY». Разводим просветом, кегль не трогаем */
.marquee__item--cyr { letter-spacing: 0.01em; }

.marquee__item a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

.marquee__item a:hover { color: var(--text); }

@media (min-width: 56.25em) {
  .marquee__row { gap: 64px; padding-right: 64px; }
  .marquee__item { font-size: clamp(20px, 2vw, 28px); }
}

/* Бесконечная прокрутка физически неприятна людям с вестибулярными
   нарушениями. Флаг в системе — останавливаем и отдаём строку скроллу */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ══════════════════════════════════════════
   404
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   THANKS — подтверждение отправленной заявки
   ══════════════════════════════════════════ */

.thanks {
  /* Первый экран страницы: контент не должен начинаться под фиксированной шапкой */
  padding-top: calc(var(--header-h) + var(--s-8));
}

.thanks__title { margin-bottom: var(--space-m); }

.thanks__lead {
  max-width: 52ch;
  margin-bottom: var(--space-xl);
}

/* Следующий шаг — бриф. Единственное акцентное действие на странице. */
.thanks__next {
  max-width: 49.5rem;
  padding: clamp(1.6875rem, 4vw, 2.8125rem);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.thanks__next-title {
  font-size: var(--step-1);
  margin-bottom: var(--space-2xs);
}

.thanks__next-desc {
  margin-bottom: var(--space-m);
  font-size: 1.0546875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.thanks__urgent {
  margin-top: var(--space-l);
  font-size: 1.0546875rem;
  color: var(--text-muted);
}

.thanks__back {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-l);
  max-width: none;
}

/* Вторичное действие первого экрана услуг — ссылка, а не вторая кнопка:
   иерархия читается сразу, а не считывается по заливке. */
.page-hero__alt {
  align-self: center;
  color: var(--text-muted);
}

.page-hero__alt:hover { color: var(--text); }

.error-page { padding-block: var(--space-2xl); }
.error-page__code { font-size: var(--step-5); font-weight: 300; line-height: 1; color: var(--accent-text); }
.error-page h1 { margin-block: var(--space-s); }
.error-page p { margin-bottom: var(--space-l); color: var(--text-muted); }

/* ══════════════════════════════════════════
   БРИФ — совместимость
   ══════════════════════════════════════════ */

/* H1 первого экрана — описательная фраза, а не короткий заголовок: то же
   семейство, что у .hero-title, но без капса, легче по весу и мельче.
   max-width держит строку читаемой — иначе фраза растягивается на всю
   ширину контейнера (до 1472px). */
.brief-intro__title {
  font-size: clamp(1.96875rem, 3.2vw, 2.8125rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  max-width: 34ch;
  margin-bottom: var(--s-3);
}

.brief-required { color: var(--accent-text); margin-left: 2px; }

/* П8: поля брифа — явные «коробки», сразу понятно куда вписывать текст */
.brief-form .form-field input,
.brief-form .form-field textarea,
.brief-form .form-field select {
  border: 0.5px solid var(--border);
  background: var(--bg-3);
  padding: 12px 14px;
}

/* opacity: 0.75 поверх --text-muted давала 3.41:1 — плейсхолдер это текст,
   ему нужны те же 4.5:1. Оставляем чистый токен (4.93:1). */
.brief-form .form-field input::placeholder,
.brief-form .form-field textarea::placeholder {
  color: var(--text-muted);
}

.brief-form .form-field input:focus,
.brief-form .form-field textarea:focus,
.brief-form .form-field select:focus {
  border-color: var(--accent);
  background: var(--bg-2);
}

.brief-form .form-field select {
  background-position: right 12px center;
  padding-right: 36px;
}
.brief-hint, .brief-field-hint {
  font-size: var(--step--1);
  color: var(--text-muted);
  font-weight: 300;
}
.brief-field-hint { margin-bottom: var(--space-xs); max-width: 60ch; }
.brief-field-label { font-weight: 400; margin-bottom: var(--space-xs); max-width: none; }

.brief-radio-group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.brief-radio { cursor: pointer; }
.brief-radio__label {
  display: block;
  padding: 6px var(--space-m);
  border: 0.5px solid var(--border);
  font-size: var(--step--1);
  color: var(--text-muted);
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.brief-radio:hover .brief-radio__label { border-color: var(--text-muted); color: var(--text); }
.brief-radio input:checked + .brief-radio__label { background-color: var(--text); border-color: var(--text); color: var(--bg); }
.brief-radio input:focus-visible + .brief-radio__label { outline: 2px solid var(--accent); outline-offset: 2px; }

.brief-grid { display: grid; gap: var(--space-m); margin-bottom: 0; }
@media (min-width: 48em) { .brief-grid--2col { grid-template-columns: 1fr 1fr; } }

.brief-submit {
  padding-top: var(--space-l);
  border-top: 0.5px solid var(--border);
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}
.brief-submit__note { font-size: var(--step--1); max-width: none; color: var(--text-muted); }

.brief-section { border: 0; margin: 0; padding: 0; }
.brief-section + .brief-section .brief-section__legend {
  border-top: 0.5px solid var(--border);
  padding-top: var(--space-l);
  margin-top: var(--space-xl);
}
.brief-section__legend {
  display: block;
  width: 100%;
  margin-bottom: var(--space-l);
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brief-section__num {
  display: inline-block;
  margin-right: var(--space-2xs);
  font-size: var(--step-1);
  color: var(--accent-text);
}

/* Заголовок и описание пункта в блоке «Прежде чем написать» на контактах */

/* ══════════════════════════════════════════
   CONTACTS PAGE — новые классы
   ══════════════════════════════════════════ */

/* П9: без левой колонки — форма занимает всю ширину */

.contacts-left {
  padding-right: var(--space-xl);
}

@media (min-width: 64em) {
  .contacts-left {
    border-right: 0.5px solid var(--border);
    padding-right: var(--space-2xl);
  }
  }

.contacts-case-preview {
  display: block;
  text-decoration: none;
  border: 0.5px solid var(--border);
  overflow: hidden;
  transition: border-color 0.2s;
  margin-bottom: var(--space-xl);
}

.contacts-case-preview:hover {
  border-color: var(--accent);
}

.contacts-case-preview__img {
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
}

.contacts-case-preview__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.contacts-case-preview:hover .contacts-case-preview__img img {
  transform: scale(1.03);
}

.contacts-case-preview__info {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contacts-case-preview__name {
  font-size: 0.95625rem;
  font-weight: 500;
  color: var(--text);
}

.contacts-case-preview__arrow {
  font-size: 1.125rem;
  color: var(--text-muted);
  transition: color 0.2s, transform 0.2s;
}

.contacts-case-preview:hover .contacts-case-preview__arrow {
  color: var(--accent-text);
  transform: translateX(4px);
}

/* ── Прежде чем написать ──
   Кегль заголовка пункта и описания — в правиле .contacts-prep__item-title
   выше. Здесь только раскладка: 1 → 2 → 4 колонки. */

/* Лейбл стоит справа от заголовка, а не над ним — отступ до заголовка ему
   не нужен. */

/* Услуга, выбранная кнопкой «Заказать» на странице услуг. Показывается
   только когда в ссылке пришёл известный ?service= (см. main.js). */
.contacts-form-service {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-s);
  max-width: 40em;
  margin-bottom: var(--space-m);
  padding: var(--space-xs) var(--space-s);
  border-left: 2px solid var(--accent);
  background: var(--surface-3);
  font-size: var(--small);
  color: var(--text-muted);
}

/* display: flex выше перебил бы атрибут hidden — без параметра ?service
   блок не показываем вовсе. */
.contacts-form-service[hidden] { display: none; }

.contacts-form-service__name {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
}

.contacts-form-service__change {
  margin-left: auto;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

.contacts-form-service__change:hover {
  color: var(--text);
  text-decoration-color: var(--accent);
}

/* ══════════════════════════════════════════
   CASES STICKY SECTION
   ══════════════════════════════════════════ */

.cases-section {
  padding: clamp(60px, 10vh, 120px) 0;
  border-top: 0.5px solid var(--border);
}

/* Шапка секции: надзаголовок + H2. Живёт над сеткой, а не внутри залипающей
   колонки, — та скрыта на мобильном, и заголовок пропадал бы вместе с ней. */
.cases-head {
  /* Отступ берём от залипающей колонки, а не от .container: заголовок секции
     должен стоять на одной вертикали с названиями кейсов под ним. */
  padding-inline: clamp(20px, 5vw, 80px);
  margin-bottom: clamp(32px, 5vh, 64px);
}

.cases-inner {
  display: grid;
  /* Правая колонка — полэкрана + 200px, левая — остаток */
  grid-template-columns: 1fr calc(50vw + 200px);
  gap: 0;
  align-items: start;
  /* Выходим за пределы .container чтобы 50vw считался от viewport */
  max-width: none;
  padding-inline: 0;
}

/* Левая — залипающая колонка */
.cases-sticky {
  position: sticky;
  top: 100px;
  padding-top: 20px;
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 3vw, 60px);
}

/* Обёртка с фиксированной высотой — не меняется при смене текста */
.cases-sticky__texts {
  position: relative;
  min-height: 340px;
  margin-top: var(--space-m);
}

/* Все тексты абсолютно позиционированы поверх друг друга */
.case-text {
  opacity: 0;
  transition: opacity 0.45s ease;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  will-change: opacity;
}

/* Активный — только opacity, никакого position/transform */
.case-text.active {
  opacity: 1;
  pointer-events: auto;
}

/* Кегль. Самое длинное название — «Архитектура двора», 10.6em в верхнем
   регистре. Колонка узкая (405px при 1440, 230px при 1024), и дисплейные
   50–90px в строку не влезали.

   Размер задан как calc(vw − px), а не одним множителем vw: колонка растёт
   быстрее вьюпорта (её ширина ≈ 0.5w − 200px), поэтому единый vw пришлось бы
   ограничить самой тесной шириной 1024 — и на 1920 заголовок остался бы вдвое
   мельче доступного. Линейная функция идёт вровень с колонкой и держит
   название одной строкой на всех ширинах от 1024 и выше.

   Границы в px, а не в rem: база документа меняется на 64em (111.11% → 100%),
   и граница в rem съезжала бы вместе с ней — заголовок снова бы сломался.

   Правило общее для index.html и portfolio.html: у секций одинаковая сетка
   и одинаковое самое длинное название. */
.case-sticky-title {
  font-family: var(--font-display);
  font-size: clamp(20px, calc(3.9vw - 19px), 56px);
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance; /* если строка всё же ломается — по словам, ровно */
  hyphens: none;      /* без переносов по слогам */
  color: var(--text);
  margin-bottom: 24px;
}

.case-sticky-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 0.5px solid var(--border);
}

.case-sticky-meta span {
  font-size: 0.84375rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.case-sticky-meta strong {
  font-size: 1.0125rem;
  color: var(--text);
  font-weight: 500;
}

.case-sticky-desc {
  font-size: 1.0125rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 340px;
}

.case-sticky-link {
  font-size: 0.8775rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 0.5px solid var(--border);
  padding-bottom: 3px;
  transition: border-color 0.2s, color 0.2s;
  display: inline-block;
}

.case-sticky-link:hover {
  border-color: var(--text);
  color: var(--accent-text);
}

/* Правая — скроллящаяся колонка */
.cases-scroll {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-slide {
  position: relative;
  overflow: hidden;
  height: 100vh; /* строго одинаковая высота у всех */
  box-sizing: border-box;
  flex-shrink: 0;
  /* Возврат с кейса по якорю (#case-*): карточка встаёт под залипающий хедер */
  scroll-margin-top: calc(var(--header-h) + var(--space-s));
}

.case-slide a {
  display: block;
  height: 100%;
}

.case-slide img {
  width: 100%;
  height: 100%; /* заполняет строго высоту родителя */
  aspect-ratio: unset;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.case-slide:hover img {
  transform: scale(1.03);
}

/* Затемнение неактивных — только при включённом JS */
/* Затемнение неактивных слайдов — только на планшете и десктопе */
@media (min-width: 48em) {
  .js .case-slide {
    opacity: 0.25;
    filter: brightness(0.6);
    transition: opacity 0.55s ease, filter 0.55s ease;
  }

  .js .case-slide.in-view {
    opacity: 1;
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .case-slide,
  .js .case-slide.in-view {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Ссылка «Все проекты» */
.cases-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 0.5px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.cases-all-link {
  font-size: 0.8775rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.cases-all-link:hover {
  color: var(--text);
}

/* Планшет — 50vw + 100vh уже хорошо работает, только чуть скорректируем высоту */
@media (min-width: 48em) and (max-width: 63.99em) {
  /* Заголовок секции повторяет отступ колонки: без этого на планшете он
     вставал на 7px правее названий кейсов под ним. */
  .cases-sticky,
  .cases-head {
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: 24px;
  }

  .case-slide img {
    height: 80vh;
  }
}

/* Мобайл */
@media (max-width: 47.99em) {
  /* П3: убираем grid, кейсы — вертикальный список */
  .cases-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-inline: 20px;
  }

  /* Скрываем залипающую колонку — текст идёт под каждым фото */
  .cases-sticky {
    display: none;
  }

  .cases-scroll {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .case-slide {
    height: auto;
    display: flex;
    flex-direction: column;
    border-bottom: 0.5px solid var(--border);
    padding-bottom: 32px;
    margin-bottom: 32px;
  }

  .case-slide:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .case-slide a {
    height: auto;
    display: block;
  }

  .case-slide img {
    height: 65vw;
    min-height: 220px;
    width: 100%;
  }

  /* Текст под фото (инжектируется через JS) */
  .case-mobile-info {
    padding: 16px 0 0;
  }

  .case-mobile-meta {
    font-size: 0.7875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
  }

  .case-mobile-title {
    font-size: 1.6875rem;
    font-weight: 500;
    margin: 0 0 8px;
    line-height: 1.1;
  }

  .case-mobile-desc {
    font-size: 0.984375rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 12px;
  }

  .case-mobile-link {
    font-size: 0.9rem;
    color: var(--text);
    text-decoration: none;
    border-bottom: 0.5px solid var(--border);
    padding-bottom: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-text {
    transition: none;
  }
}

/* ══════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   ABOUT STATEMENT
   ══════════════════════════════════════════ */

/* Фон совпадает с основным фоном сайта — переменные автоматически
   переключаются между светлой (#F7F5F0) и тёмной (#111111) темами. */
.about-statement {
  background: var(--bg);
  /* Линия сверху, а не снизу: выше — первый экран, который заканчивается
     лентой проектов без рамки, ниже — .cases-section со своим border-top.
     Рамка снизу сошлась бы с ней в две полосы на одном стыке. */
  border-top: 0.5px solid var(--border);
  padding-block: 80px 100px;
}

.about-statement__main {
  /* max-width и padding-inline — из .container */
}

/* ── Fill text (анимация заполнения слов) ── */

.fill-text {
  font-size: clamp(2.8125rem, 4.5vw, 5.625rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text); /* fallback без JS */
  margin: 0 0 var(--s-7) 0;
  max-width: none;
}

/* JS добавляет is-split после разбивки на слова */
.js .fill-text.is-split {
  color: transparent;
}

.fill-text .word {
  display: inline;
  color: var(--text-muted);      /* слово ещё не «залито» */
  transition: color 0.25s ease;
}

.fill-text .word.filled {
  color: var(--text);            /* залитое слово */
}

@media (prefers-reduced-motion: reduce) {
  .fill-text.is-split { color: transparent; }
  .fill-text .word { color: var(--text); transition: none; }
}

/* Заголовки с fill-анимацией на тёмном фоне */
.js h2[data-fill].is-split { color: transparent; }
h2[data-fill] .word {
  color: var(--text-muted);
  transition: color 0.25s ease;
}
h2[data-fill] .word.filled { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .js h2[data-fill].is-split { color: var(--text); }
  h2[data-fill] .word { color: var(--text); transition: none; }
}

/* ── Разделитель ── */

.about-statement__divider {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}

.about-divider-line {
  flex: 1;
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.about-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.about-more-link:hover { opacity: 0.7; }

.about-more-arrow {
  font-size: 16px;
  line-height: 1;
}

/* ── Нижний блок ── */

/* Раньше здесь лежал flex-ряд: значок ☞ + текст. Значок ни на что не
   указывал и ничего не значил — убран вместе с раскладкой под него. */
.about-statement__sub {
  max-width: 560px;
}

.about-sub-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  max-width: none;
}

.about-sub-text strong {
  font-style: italic;
  font-weight: 500;
  color: var(--text);
  display: inline;
}

/* ── Адаптив ── */

@media (max-width: 47.99em) {
  .about-statement {
    padding-block: 60px 80px;
  }
  .fill-text {
    font-size: 1.6875rem; /* 24px — на 16px меньше базовых 40px */
    margin-bottom: 32px;
  }
  .about-statement__sub {
    max-width: none;
  }
}

/* ── «Обо мне» на десктопе — по макету ──
   От кнопок первого экрана до надзаголовка 345 единиц, надзаголовок →
   текст 31, текст 86/100, дальше по 66 до линии и до абзаца. Линии сверху
   в макете нет. */
@media (min-width: 64em) {
  .about-statement {
    border-top: 0;
    padding-block: calc(345 * var(--u)) 0;
  }

  .about-statement .section-label { margin-bottom: calc(31 * var(--u)); }

  .fill-text {
    font-size: var(--fs-statement);
    line-height: 1.1628; /* 100 / 86 */
    letter-spacing: 0;
    margin-bottom: calc(66 * var(--u));
  }

  .about-statement__divider {
    gap: calc(26 * var(--u));
    margin-bottom: calc(66 * var(--u));
  }
  .about-divider-line { border-top: 2px solid var(--divider); }

  .about-more-link {
    gap: calc(15 * var(--u));
    padding: calc(5 * var(--u)) calc(10 * var(--u));
    font-size: var(--fs-label);
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
  }
  .about-more-arrow { font-size: 1em; }

  .about-statement__sub {
    max-width: none;
    padding: calc(10 * var(--u));
  }
  .about-sub-text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
}

/* ══════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroLineFromLeft {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes heroLineFromRight {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes heroLineFromBottom {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  to { opacity: 1; }
}

/* Scroll reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .work-card,
  .js .case-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js .work-card.is-visible,
  .js .case-card.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════
   ФОРМА: способ связи, согласие, спиннер,
   блок успеха, быстрые вопросы, Turnstile
   ══════════════════════════════════════════ */

/* Fieldset «способ связи» без нативной рамки */

/* Радио-«таблетки» способа связи */

/* Согласие с политикой */
.form-field--consent { margin-bottom: var(--space-m); }
.form-field .form-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.0125rem;
  color: var(--text-muted);
  font-weight: 300;
}
.form-field .form-consent input {
  width: auto;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--accent-text);
}
.form-consent span { line-height: 1.4; }

/* Кнопка отправки со спиннером */
.contact-form__submit { position: relative; gap: 8px; }
.contact-form__submit .btn-spinner {
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: none;
  animation: btn-spin 0.7s linear infinite;
}
.contact-form__submit.is-loading .btn-spinner { display: inline-block; }
.contact-form__submit.is-loading { opacity: 0.75; cursor: progress; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .contact-form__submit .btn-spinner { animation: none; }
}

/* Cloudflare Turnstile — резервируем место, чтобы не было сдвига */
.cf-turnstile { margin-bottom: var(--space-m); min-height: 65px; }

/* Быстрые вопросы (чипы → Telegram) */

/* ══════════════════════════════════════════
   Аккордеон этапов — сквозной компонент
   about.html: «Как я работаю с проектами»,
   страницы услуг: «Этапы разработки сайта»
   Мобильный/планшет: горизонтальные строки, раскрытие по тапу (JS).
   Десктоп (hover, ≥1024px): вертикальные колонки, раскрытие по наведению.
   Все цвета/отступы/шрифты — только из переменных проекта → следует за темой.
   Без .approach--js (нет JS) все панели раскрыты — текст доступен всегда.
   ══════════════════════════════════════════ */

.approach__head {
  margin-bottom: var(--space-l);
}

.approach__subtitle {
  margin-top: var(--space-2xs);
  color: var(--text-muted);
  max-width: 46ch;
}

/* ── База: мобильный (до 767px) — горизонтальные строки ── */
.approach__list {
  /* Верхней соединяющей полоски нет — остаются только разделители между строками. */
}

.approach__panel {
  border-bottom: 1px solid var(--border);
}

.approach__heading {
  margin: 0;
  font: inherit;
}

/* Вся строка — одна кнопка: номер слева, заголовок, шеврон справа */
.approach__trigger {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  background: none;
  border: 0;
  text-align: left;
  color: var(--text);
  font-family: var(--font-base);
  cursor: pointer;
}

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

.approach__num {
  flex-shrink: 0;
  font-weight: 400;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
}

.approach__panel-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.125rem;         /* 16px */
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: break-word; /* переносим по словам, не обрезаем */
}

.approach__chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 350ms ease;
}

.approach__panel.is-open .approach__chevron {
  transform: rotate(180deg);
}

/* Тело: анимация высоты через grid-template-rows 0fr → 1fr */
.approach__body {
  display: grid;
  grid-template-rows: 1fr;              /* по умолчанию (без JS) — открыто */
  transition: grid-template-rows 350ms ease;
}

.approach--js .approach__panel:not(.is-open) .approach__body {
  grid-template-rows: 0fr;             /* сворачиваем только при активном JS */
}

.approach__body-inner {
  overflow: hidden;
  min-height: 0;
}

.approach__desc {
  margin: 0;
  padding-bottom: var(--space-m);
  font-size: 0.984375rem;    /* ~14px */
  line-height: 1.65;
  color: var(--text-muted);
}

/* На страницах услуг этап — два абзаца: что делаю и «От тебя». Между ними
   отступ абзаца, а не блока, иначе вторая строка отрывается от своего этапа. */
.approach__desc:not(:last-child) { padding-bottom: var(--s-3); }

/* ── Десктоп: только там, где есть настоящий ховер, от 1024px ──
   Вертикальные колонки; раскрытие по наведению/фокусу. */
@media (hover: hover) and (min-width: 64em) {
  .approach__list {
    display: flex;
    align-items: stretch;
    /* Фиксированная высота (+200px к прежней): вертикальные разделители между
       колонками длиннее, тянутся почти на весь экран. Блок не прыгает.
       Верхней полоски, соединяющей колонки, нет — только вертикальные разделители. */
    height: calc(clamp(320px, 40vh, 33.75rem) + 200px);
  }

  .approach__panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;             /* текст не вылезает при сжатии */
    border-bottom: 0;
    border-left: 1px solid var(--border);
    flex-grow: 1;
    transition: flex-grow 420ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .approach__panel:first-child {
    border-left: 0;               /* у первой колонки границы нет */
  }

  .approach__heading { width: 100%; }

  .approach__trigger {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
    padding: var(--space-l) var(--space-m) var(--space-s);
    cursor: default;              /* на десктопе взаимодействие — наведение */
  }

  .approach__chevron { display: none; } /* шеврон — индикатор только для тапа */

  .approach__num {
    font-size: clamp(44px, 4vw, 56px);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 28px;
  }

  .approach__panel-title {
    flex: 0 0 auto;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 500;
  }

  /* Описание всегда занимает место (высота зарезервирована), меняется opacity —
     «сначала расширяется, потом текст»: fade с задержкой. */
  .approach__body {
    grid-template-rows: 1fr;
    margin-top: var(--space-m);
  }
  .approach--js .approach__panel:not(.is-open) .approach__body {
    grid-template-rows: 1fr;      /* на десктопе высоту не сворачиваем */
  }
  .approach__desc {
    padding: 0 var(--space-m) var(--space-l);
    font-size: clamp(14px, 0.95vw, 15px);
    opacity: 0;
    transition: opacity 300ms ease 120ms;
  }

  /* Раскрытая по состоянию колонка (дефолтная / закреплённая кликом) */
  .approach__panel.is-open { flex-grow: 2.4; }
  .approach__panel.is-open .approach__desc { opacity: 1; }

  /* Наведение и фокус с клавиатуры раскрывают наведённую колонку,
     остальные сжимаются. */
  .approach__list:hover .approach__panel:not(:hover),
  .approach__list:focus-within .approach__panel:not(:focus-within) {
    flex-grow: 1;
  }
  .approach__list:hover .approach__panel:not(:hover) .approach__desc,
  .approach__list:focus-within .approach__panel:not(:focus-within) .approach__desc {
    opacity: 0;
  }
  .approach__panel:hover,
  .approach__panel:focus-within { flex-grow: 2.4; }
  .approach__panel:hover .approach__desc,
  .approach__panel:focus-within .approach__desc { opacity: 1; }
}

/* Сноска под аккордеоном на странице услуги. У .svc-more__note отступ
   рассчитан на список: под колонками аккордеона его не видно. */
.approach__note { margin-top: var(--space-m); }

/* ── Меньше движения — переключение мгновенное, без fade ── */
@media (prefers-reduced-motion: reduce) {
  .approach__panel,
  .approach__body,
  .approach__desc,
  .approach__chevron {
    transition: none;
  }
}

/* Радио/чекбоксы-визуальные-скрытые внутри .form-field: правило .form-field input
   (width:100%) перекрывало .visually-hidden и растягивало их на всю ширину.
   Возвращаем им скрытие с приоритетом по порядку источника. */
.form-field input.visually-hidden,
.brief-radio input.visually-hidden,
.brief-radio-group input.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ  (только <768px, десктоп не затрагивается)
   Единая шкала --s-*. Правило: интервал задаёт нижний margin верхнего
   элемента, без встречных margin-top. Значения — из спецификации проекта.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 47.99em) {

  /* Заголовок секции → её контент = 32px везде.
     Была разнобойная шкала (16 / 24 / 48 / 64px) — десктопные значения
     протекали на мобильный и ломали единый ритм. */
  .price-calc h2,
  .cases-grid-section h2,
  .faq-section h2 {
    margin-bottom: var(--s-6); /* 32px */
  }

  /* Прозаические подзаголовки в тексте «Обо мне»: убираем встречный
     margin-top (запрещён §5), интервал держит только нижний отступ
     предыдущего абзаца + собственный низ заголовка. */
  .about__text h2 { margin-top: 0; margin-bottom: var(--s-4); } /* 16px */
  .about__text p  { margin-bottom: var(--s-5); } /* 24px — воздух перед новым H2 */
  .about__text h2:first-child { margin-top: 0; }

  /* Читабельность основного текста: интерлиньяж 1.7 (был 1.65/1.6 —
     на мелком экране плотный интерлиньяж читается как слипание). */
  body { line-height: 1.7; }

}

/* ══════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ТИПОГРАФСКАЯ ИЕРАРХИЯ  (только <768px, десктоп не затрагивается)
   Основной текст на мобильном — 20px/400 (--body 1.125rem при базе 111.1111%), поэтому
   заголовки в 16–26px с весом 400–500 сливались с ним. Каждому заголовку:
   +2px к кеглю и один шаг веса (300→400, 400→500, 500→600).
   Размер и вес основного текста не меняем — только заголовки.
   Правим ТОЛЬКО font-size и font-weight: margin, padding и line-height
   остаются прежними, вертикальный ритм блока выше не двигается.
   Значения — calc(<исходное выражение> + 2px), чтобы сохранить исходный
   clamp() и не потерять текучесть кегля внутри мобильного диапазона.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 47.99em) {

  /* ── H1 ── */
  h1 { font-size: calc(var(--h1-page) + 2px); font-weight: 500; }
  .hero-title { font-size: calc(var(--h1-page) + 2px); font-weight: 600; }
  .brief-intro__title { font-size: calc(clamp(1.96875rem, 3.2vw, 2.8125rem) + 2px); font-weight: 500; }

  /* ── H2: заголовки секций ── */
  h2 { font-size: calc(var(--h2) + 2px); font-weight: 500; }
  .faq__aside-title { font-size: calc(var(--h2) + 2px); font-weight: 500; }
  .svc-cat__title { font-weight: 600; }
  .legal-text h2 { font-size: calc(var(--step-2) + 2px); }
    .project-modal__title { font-size: calc(clamp(1.4625rem, 2.5vw, 1.96875rem) + 2px); font-weight: 600; }

  /* ── H3 / H4 ── */
  h3 { font-size: calc(1.2375rem + 2px); font-weight: 600; }
  h4 { font-size: calc(1.125rem + 2px); font-weight: 600; }
  .service-cat__title { font-weight: 600; }
  /* Вопрос шага — на ступень мельче --step-2: при нём он выходил крупнее
     h2 секции (33px против 32px). Та же ступень у экрана результата, где
     вилка и поля заявки обязаны уместиться в один экран (375×667). */
  .calc__question { font-size: calc(var(--step-1) + 2px); font-weight: 500; }
  .calc__form-wrap h4 { font-size: calc(var(--step-0) + 2px); }
  .case-mobile-title { font-size: calc(1.6875rem + 2px); font-weight: 600; }
    .site-footer__col-title { font-size: 18px; font-weight: 600; }

  /* Текст заголовка-аккордеона живёт в <span> внутри <h3> (кнопка-строка),
     поэтому кегль задаётся на span, а не на сам h3 (у него font: inherit). */
  .approach__panel-title { font-size: calc(1.125rem + 2px); font-weight: 600; }

  /* Вопрос FAQ — подзаголовок своего ответа, а был мельче ответа (18 против
     20px) и того же веса: иерархия читалась инвертированно. */
  .faq-q { font-size: calc(1.0125rem + 2px); font-weight: 500; }
}

/* ══════════════════════════════════════════════════════════
   ЗАЩИТА ОТ ОБРЕЗКИ ТЕКСТА  (только <768px, десктоп не затрагивается)
   reset.css срезает всё, что вышло за край (overflow-x: clip), поэтому
   длинное русское слово в узком блоке не переносилось, а просто исчезало
   под краем экрана: «Политика КОНФИДЕНЦИАЛЬНОСТИ» на privacy.html,
   «11. Конфиденциальность…» в правовом тексте, названия услуг в аккордеоне.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 47.99em) {

  /* Разрыв слова как крайняя мера вместо обрезки. Срабатывает только на
     словах, которые физически не влезают в строку, поэтому на текст,
     который и так помещался, не влияет. */
  h1, h2, h3, h4,
  .hero-title,
  .legal-text p,
  .legal-text li {
    overflow-wrap: break-word;
  }

  /* Перенос по слогам — только там, где слово заведомо длиннее строки:
     заголовки правового документа и названия услуг в узкой колонке.
     Всем заголовкам подряд hyphens давать нельзя — браузер начинает
     переносить и то, что спокойно уместилось бы целиком
     («Часто задава-емые вопросы»). */
  .legal-page .hero-title,
  .legal-text h2 {
    hyphens: auto;
  }

}

/* ══════════════════════════════════════════
   ЗАЯВКА — короткая форма внизу главной
   ══════════════════════════════════════════ */

.request__card {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.request__title { margin-bottom: var(--s-4); }
.request__lead { margin-bottom: var(--s-6); max-width: 34em; }

.request-form .form-field { margin-bottom: var(--s-5); }

.request-form__row { display: grid; gap: 0 var(--s-5); }

@media (min-width: 48em) {
  .request-form__row { grid-template-columns: 1fr 1fr; }
}

/* Метка поля — капсом, как в макете; обязательность — лаймовой точкой
   справа сверху. Для скринридера слово «обязательное» лежит рядом
   отдельным скрытым текстом. */
.request-form label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  text-transform: uppercase;
  color: var(--text-muted);
}

.request-form__req {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.15em;
  border-radius: 50%;
  background: var(--accent);
}

.request-form__note {
  margin-bottom: var(--s-5);
  font-size: var(--small);
  line-height: 1.5;
  color: var(--text-muted);
}
.request-form__note a { color: var(--text); }
.request-form__note a:hover { color: var(--accent-text); }

/* Turnstile в режиме interaction-only: виджет появляется, только если
   Cloudflare сомневается. Пустой контейнер места не занимает. */
.request-form .cf-turnstile:not(:empty) { margin-bottom: var(--s-4); }

/* ══════════════════════════════════════════
   ГЛАВНАЯ НА ДЕСКТОПЕ — КЕЙСЫ, КАЛЬКУЛЯТОР, FAQ, ЗАЯВКА
   Размеры — с макета Figma (1920), в единицах --u (base.css). Блок стоит в
   конце файла намеренно: он переопределяет десктопные значения общих
   компонентов, объявленных выше, при равной специфичности.
   ══════════════════════════════════════════ */

@media (min-width: 64em) {

  /* ── Кейсы ──
     Текст слева шириной 431, обложки 1300 × 1080 вплотную к правому краю
     окна, между ними 20. Под последней — линия во всю ширину и «Все
     проекты» справа. Линии над секцией в макете нет. */
  .cases-section {
    border-top: 0;
    padding-block: calc(293 * var(--u)) 0;
  }

  .cases-head {
    padding-inline: var(--gutter);
    margin-bottom: calc(74 * var(--u));
  }

  .cases-inner { grid-template-columns: 1fr calc(1300 * var(--u)); }

  .cases-sticky {
    top: var(--header-h);
    padding: calc(120 * var(--u)) calc(40 * var(--u)) 0 var(--gutter);
  }

  /* 460, а не 431 макета: «Архитектура двора» в нашем Inter на 8px шире,
     и в 431 название ломалось на две строки. */
  .cases-sticky__texts {
    max-width: calc(460 * var(--u));
    min-height: calc(560 * var(--u));
    margin-top: 0;
  }

  .case-sticky-title {
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-h3);
    letter-spacing: 0;
    margin-bottom: calc(40 * var(--u));
  }

  .case-sticky-meta {
    margin-bottom: calc(40 * var(--u));
    padding-bottom: calc(40 * var(--u));
    border-bottom: 2px solid var(--divider);
  }
  .case-sticky-meta strong {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
  }

  .case-sticky-desc {
    max-width: none;
    margin-bottom: calc(100 * var(--u));
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }

  .case-sticky-link {
    padding: calc(5 * var(--u)) calc(10 * var(--u));
    border-bottom: 0;
    font-size: var(--fs-label);
    line-height: 1;
    letter-spacing: 0;
  }

  .cases-scroll { gap: calc(20 * var(--u)); }

  .case-slide {
    height: calc(1080 * var(--u));
    border-radius: 4px;
  }

  .cases-footer {
    max-width: none;
    margin-top: calc(60 * var(--u));
    padding-top: calc(45 * var(--u));
    border-top: 2px solid var(--divider);
  }

  .cases-all-link {
    display: inline-flex;
    align-items: center;
    gap: calc(15 * var(--u));
    padding: calc(5 * var(--u)) 0 calc(5 * var(--u)) calc(10 * var(--u));
    font-size: var(--fs-label);
    line-height: 1;
    letter-spacing: 0;
    color: var(--accent-text);
  }
  .cases-all-link:hover { color: var(--text); }

  /* ── Калькулятор ──
     Карточка 1720 × 1000, поля 100 сверху и 90 по бокам. Шаги — квадраты
     70 × 70 с линиями между ними, вопрос 48/58, варианты 3 × 2 с зазором
     20 по горизонтали и 30 по вертикали. */
  .price-calc {
    border-bottom: 0;
    padding-block: 0 calc(200 * var(--u));
  }

  .price-calc h2 { margin-bottom: calc(40 * var(--u)); }
  .price-calc .lead {
    max-width: none;
    margin-bottom: calc(56 * var(--u));
    font-size: var(--fs-lead);
  }

  .calc {
    min-height: calc(1000 * var(--u));
    padding: calc(100 * var(--u)) calc(90 * var(--u)) calc(88 * var(--u));
    border: 0;
  }

  .calc__stepper { margin-bottom: calc(70 * var(--u)); }

  .calc__stepper-num {
    width: max(44px, calc(70 * var(--u)));
    height: max(44px, calc(70 * var(--u)));
    border: 2px solid var(--border-subtle);
    border-radius: 4px;
    font-size: var(--fs-h6);
    color: #414141;
  }
  .calc__stepper-line {
    background-color: var(--border-subtle);
    margin-top: max(22px, calc(35 * var(--u)));
  }

  .calc__bar {
    margin-bottom: calc(86 * var(--u));
    padding-bottom: 0;
    border-bottom: 0;
  }
  .calc__progress {
    font-size: var(--fs-small);
    line-height: 1.1667;
    letter-spacing: 0;
  }
  .calc__estimate { font-size: var(--fs-small); }

  .calc__question {
    font-size: var(--fs-h4);
    font-weight: 500;
    line-height: 1.2083;
    letter-spacing: 0;
    margin-bottom: calc(30 * var(--u));
  }

  .calc__options { gap: calc(30 * var(--u)) calc(20 * var(--u)); }

  .calc__option-inner {
    gap: calc(20 * var(--u));
    min-height: calc(220 * var(--u));
    padding: calc(50 * var(--u)) calc(40 * var(--u));
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-3);
  }

  .calc__option-title {
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
  }

  .calc__option-desc {
    font-size: var(--fs-text);
    line-height: var(--lh-text);
    font-weight: 400;
  }

  /* Компактные карточки (шаг «Сфера») и допродажи остаются в своих
     размерах: вариантов там больше, и высота 220 сделала бы шаг выше окна. */
  .calc__option--compact .calc__option-inner,
  .calc__option--addon .calc__option-inner {
    min-height: 0;
    padding: calc(30 * var(--u));
  }

  /* ── FAQ ──
     Колонка 675 слева (надзаголовок, H2 в две строки, подводка, «Написать»),
     список 990 справа, между ними 54. Вопрос 32/38, ответ 20/28, знаки —
     32 единицы. */
  .faq-section {
    border-bottom: 0;
    padding-block: 0 calc(200 * var(--u));
  }

  /* Колонка на 15 единиц шире макетной (за счёт зазора — список стоит на
     прежнем месте): наш Inter на долю процента шире figma-рендера, и в
     675 «Если не нашёл ответ — напиши напрямую.» не помещалась на 1px. */
  .faq__inner {
    grid-template-columns: calc(690 * var(--u)) 1fr;
    gap: calc(39 * var(--u));
  }

  .faq-item,
  .faq-a p { max-width: none; }

  .faq__aside-title {
    font-weight: 500;
    margin-bottom: calc(70 * var(--u));
  }

  .faq__aside-desc {
    max-width: none;
    margin-bottom: calc(140 * var(--u));
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  .faq__ask-link {
    gap: calc(15 * var(--u));
    font-size: var(--fs-label);
    line-height: 1;
    letter-spacing: 0;
    color: var(--text-secondary);
  }

  .faq-item { border-bottom-width: 1px; }
  .faq-item:first-child { border-top-width: 1px; }

  .faq-q {
    padding: calc(40 * var(--u)) 0;
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
  }

  .faq-icon {
    width: max(20px, calc(32 * var(--u)));
    height: max(20px, calc(32 * var(--u)));
    font-size: 0;
  }
  .faq-icon::before,
  .faq-icon::after {
    width: 66.7%;
    height: 2px;
    margin: -1px 0 0 -33.3%;
    border-radius: 1px;
    background: #72716E;
  }

  .faq-a p {
    margin-top: calc(-2 * var(--u));
    padding-bottom: calc(61 * var(--u));
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }

  /* ── Заявка ──
     Карточка 1720, поля 77 / 80 / 65, рамка 1px. Поля ввода 95 и 170 в
     высоту, текст в них 32/40; метки 24/28 капсом, отбивка до поля 20. */
  .request { padding-block: 0 calc(296 * var(--u)); }

  .request__card {
    padding: calc(77 * var(--u)) calc(80 * var(--u)) calc(65 * var(--u));
  }

  .request__title {
    font-weight: 500;
    margin-bottom: calc(29 * var(--u));
  }

  .request__lead {
    max-width: calc(1060 * var(--u));
    margin-bottom: calc(53 * var(--u));
  }

  .request-form { max-width: calc(1370 * var(--u)); }

  .request-form__row { gap: 0 calc(30 * var(--u)); }

  .request-form .form-field { margin-bottom: calc(61 * var(--u)); }
  .request-form .form-field:has(textarea) { margin-bottom: calc(30 * var(--u)); }

  .request-form label {
    letter-spacing: 0;
    gap: calc(10 * var(--u));
    margin-bottom: calc(20 * var(--u));
    font-size: var(--fs-small);
    line-height: 1.1667;
  }

  .request-form__req {
    width: max(6px, calc(8 * var(--u)));
    height: max(6px, calc(8 * var(--u)));
    margin-top: 0;
  }

  .request-form input,
  .request-form textarea {
    min-height: calc(95 * var(--u));
    padding: calc(27 * var(--u)) calc(30 * var(--u));
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    font-weight: 400;
  }
  .request-form textarea { height: calc(170 * var(--u)); }

  .request-form__note {
    max-width: none;
    margin-bottom: calc(40 * var(--u));
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }
}

.svc-fit__cards {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
}

@media (min-width: 48em) {
  .svc-fit__cards { grid-template-columns: repeat(3, 1fr); }
}

.svc-fit__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-2);
  max-width: none;
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctrl);
  background: var(--surface);
}

.svc-fit__title { font-weight: 400; color: var(--text); }

.svc-fit__desc {
  font-size: var(--small);
  line-height: 1.4;
  color: var(--text-muted);
}


/* ══════════════════════════════════════════
   ХАБ УСЛУГ НА ДЕСКТОПЕ — по макету Figma
   Первый экран без растяжки на весь экран, условия работы строкой, каждое
   направление — карточка на 70 единиц шире контейнера (поля 30 от края
   окна на 1920), услуги внутри — строками с двойной линией.
   ══════════════════════════════════════════ */

@media (min-width: 64em) {

  /* ── Первый экран ── */
  .page-hero {
    padding-top: calc(var(--header-h) + 156 * var(--u));
    padding-bottom: 0;
    border-bottom: 0;
  }
  .page-hero--full { min-height: 0; display: block; }

  .page-hero .section-label {
    font-size: var(--fs-small);
    line-height: 1.1667;
    margin-bottom: calc(30 * var(--u));
  }

  /* «Дизайн, который / приводит клиентов» — две строки макета. Ширина с
     запасом на 70 единиц: наш Inter шире figma-рендера, и в 1104 вторая
     строка рвалась на две. */
  .page-hero h1 {
    max-width: calc(1180 * var(--u));
    margin-bottom: calc(40 * var(--u));
  }

  .page-hero p {
    max-width: calc(930 * var(--u));
    line-height: 1.125; /* 36 / 32 */
  }

  .page-hero__cta {
    margin-top: calc(100 * var(--u));
    gap: calc(88 * var(--u));
  }

  .page-hero__alt {
    display: inline-flex;
    align-items: center;
    gap: calc(15 * var(--u));
    font-size: max(17px, calc(32 * var(--u)));
    color: var(--text);
  }
  .page-hero__alt:hover { color: var(--accent-text); }

  /* ── Условия работы ── */
  .services-table {
    border-bottom: 0;
    padding-block: calc(190 * var(--u)) calc(200 * var(--u));
  }

  /* Пункты по ширине своих строк, как в макете: заголовок не переносится,
     свободное место уходит в промежутки между пунктами. */
  .svc-terms {
    display: flex;
    justify-content: space-between;
    gap: calc(60 * var(--u));
    margin-bottom: calc(141 * var(--u));
  }

  .svc-terms__item {
    justify-content: center;
    gap: calc(14 * var(--u));
    min-height: calc(130 * var(--u));
    padding-left: calc(30 * var(--u));
  }

  .svc-terms__title {
    font-size: max(17px, calc(28 * var(--u)));
    font-weight: 400;
    line-height: 1.357; /* 38 / 28 */
  }

  .svc-terms__desc {
    max-width: calc(470 * var(--u));
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  /* С 90em заголовок пункта держит одну строку, как в макете; ниже кегль
     упирается в пол, и строка шире своей трети — пусть переносится. */
  @media (min-width: 90em) {
    .svc-terms__title { white-space: nowrap; }
  }

  /* ── Направление — карточка ── */
  .svc-cat,
  .svc-cat--aside {
    margin-inline: calc(-70 * var(--u));
    padding: calc(90 * var(--u)) calc(70 * var(--u)) calc(132 * var(--u));
    border: 0;
    border-radius: 12px;
    background: var(--surface-3);
  }

  .svc-cat + .svc-cat,
  .svc-cat--aside + .svc-cat,
  .svc-cat + .svc-cat--aside { margin-top: calc(70 * var(--u)); }

  .svc-cat__head {
    margin-bottom: 0;
    padding-bottom: calc(42 * var(--u));
    border-bottom: 2px solid var(--divider);
  }

  .svc-cat__title { margin-bottom: calc(20 * var(--u)); line-height: var(--lh-h2); }

  .svc-cat__desc {
    max-width: calc(1100 * var(--u));
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--text-secondary);
  }

  .svc-fit__cards { gap: calc(20 * var(--u)); }

  /* Заголовки карточек стоят на одной высоте (130 от верха), а не по
     нижнему краю: описания разной длины иначе разводили бы их по вертикали. */
  .svc-fit__card {
    justify-content: flex-start;
    gap: calc(15 * var(--u));
    min-height: calc(310 * var(--u));
    padding: calc(130 * var(--u)) calc(30 * var(--u)) calc(43 * var(--u));
    border-radius: 12px;
  }

  .svc-fit__title {
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
  }

  .svc-fit__desc {
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }

  /* «Что входит» — две колонки, вторая с 682 единиц, как в макете. Колонки
     по 600, а не 567: строки макета подогнаны под figma-рендер Inter, наш
     на пару процентов шире, и «Бриф: чем занимаешься…» рвалась на две. */
  .svc-cols {
    grid-template-columns: repeat(2, calc(600 * var(--u)));
    gap: calc(40 * var(--u)) calc(82 * var(--u));
  }

    .svc-more__group {
    margin-bottom: calc(25 * var(--u));
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1.1667;
    letter-spacing: 0;
  }

  .svc-more__list {
    list-style: none;
    padding-left: 0;
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }
  .svc-more__list li {
    display: flex;
    align-items: baseline;
    font-size: var(--fs-text);
    line-height: var(--lh-text);
    gap: calc(25 * var(--u));
    max-width: none;
    color: rgba(255, 255, 255, 0.9);
  }
  .svc-more__list li::before {
    content: "";
    flex: none;
    width: max(8px, calc(12 * var(--u)));
    height: max(8px, calc(12 * var(--u)));
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-0.05em);
  }
  .svc-more__list li + li { margin-top: calc(27 * var(--u)); }


    .svc-more__note {
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }

    .svc-more__note { max-width: calc(1100 * var(--u)); }

  /* ── Варианты услуги (у услуг со своей страницей) ── */
  .svc-var { border-top: 0; margin-bottom: 0; }
  .svc-var__item {
    gap: calc(10 * var(--u)) calc(40 * var(--u));
    padding: calc(30 * var(--u)) calc(54 * var(--u)) calc(30 * var(--u)) 0;
    border-bottom: 1px solid var(--border);
  }
  .svc-var__name {
    font-size: var(--fs-h6);
    font-weight: 400;
    line-height: var(--lh-h6);
  }
  .svc-var__price { font-size: var(--fs-label); }
  .svc-var__desc {
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }

}

/* ══════════════════════════════════════════
   «ОБО МНЕ» — лента кейсов
   ══════════════════════════════════════════ */

.about-cases { padding-block: var(--section-m); }

.about-cases__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.about-cases__track::-webkit-scrollbar { display: none; }

.about-case {
  flex: 0 0 100%;
  display: grid;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.about-case__img img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1100 / 765;
  object-fit: cover;
}

.about-case__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: var(--s-5);
}

.about-case__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  text-transform: uppercase;
}

.about-case__desc { color: var(--text-muted); }

.about-case__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  color: var(--accent-text);
}
.about-case__link:hover { color: var(--text); }

.about-cases__nav { margin-top: var(--s-4); }

/* Полоса под лентой: половина на каждый кейс, активная — светлее. Обе
   половины — ссылки на свой слайд, зона нажатия выше самой линии. */
.about-cases__bar { display: flex; }

.about-cases__seg {
  flex: 1;
  display: flex;
  align-items: center;
  height: 24px;
}
.about-cases__seg::before {
  content: "";
  flex: 1;
  height: 3px;
  background: var(--border);
  transition: background-color var(--transition);
}
.about-cases__seg.is-active::before { background: var(--text-muted); }
.about-cases__seg:hover::before { background: var(--text-secondary); }

.about-cases__count {
  margin-top: var(--s-3);
  padding-left: var(--s-2);
  font-weight: 500;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════
   «ОБО МНЕ» НА ДЕСКТОПЕ — по макету Figma
   ══════════════════════════════════════════ */

@media (min-width: 64em) {

  /* ── Первый экран: цитата слева, подпись справа, ниже — строка проектов ── */
  .about-hero { min-height: 0; }

  .about-hero__inner {
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(60 * var(--u));
    padding-block: calc(266 * var(--u)) calc(229 * var(--u));
  }

  .about-hero__main { flex: 0 1 auto; padding-top: calc(26 * var(--u)); }

  .about-hero__quote {
    margin: 0;
    font-size: calc(64 * var(--u));
    line-height: 1.09375; /* 70 / 64 */
  }

  .about-hero__quote cite {
    margin-top: calc(25 * var(--u));
    font-size: var(--fs-small);
    line-height: 1.1667;
    letter-spacing: 0;
  }

  .about-hero__sig {
    width: calc(275 * var(--u));
    gap: 0;
    padding-left: 0;
    border-left: 0;
    align-self: flex-start;
  }

  .about-hero__sig-name {
    margin-bottom: calc(33 * var(--u));
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    color: rgba(255, 255, 255, 0.9);
  }

  .about-hero__sig-role {
    margin-bottom: calc(35 * var(--u));
    font-size: var(--fs-small);
    line-height: 1.1667;
    letter-spacing: 0;
  }

  .about-hero__sig-tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(10 * var(--u)) calc(35 * var(--u));
    margin-bottom: calc(20 * var(--u));
    list-style: none;
    padding: 0;
  }

  .about-hero__sig-tags,
  .about-hero__sig-desc {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-muted);
  }

  /* Строка проектов: линии во всю ширину окна, названия 40/44 */
  .clients {
    padding-block: calc(58 * var(--u));
    border-color: var(--divider);
  }

  .marquee__row {
    gap: calc(100 * var(--u));
    padding-right: calc(100 * var(--u));
  }

  .marquee__item {
    font-size: max(20px, calc(40 * var(--u)));
    font-weight: 400;
    line-height: 1.1;
    color: var(--text-muted);
  }

  /* ── «Обо мне»: портрет 720 × 750 и текст справа ── */
  .about {
    padding-block: calc(200 * var(--u)) 0;
  }

  .about__grid {
    grid-template-columns: calc(720 * var(--u)) 1fr;
    gap: calc(72 * var(--u));
  }

  .about__photo img {
    aspect-ratio: 720 / 750;
    border-radius: 4px;
  }

  .about__text { padding-top: calc(40 * var(--u)); }

  .about__text h2 { margin-bottom: calc(29 * var(--u)); }

  .about__text p {
    max-width: calc(860 * var(--u));
    margin-bottom: 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  .tools { margin-top: calc(55 * var(--u)); }

  .tools__label {
    margin-bottom: calc(25 * var(--u));
    font-size: var(--fs-small);
    line-height: 1.1667;
    letter-spacing: 0;
  }

  .tools__list { gap: calc(10 * var(--u)); }

  .tools__item {
    padding: calc(10 * var(--u)) calc(26 * var(--u));
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  /* ── «Как я работаю»: колонки 770 в высоту, номера 96 ── */
  .approach { padding-block: calc(200 * var(--u)) 0; }

  .approach__head { margin-bottom: calc(76 * var(--u)); }

  .approach__title { font-weight: 500; }

  .approach__subtitle {
    max-width: none;
    margin-top: calc(34 * var(--u));
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  /* ── Лента кейсов: картинка 1100 слева, текст прижат к низу справа ── */
  .about-cases { padding-block: calc(200 * var(--u)) calc(210 * var(--u)); }

  .about-case {
    grid-template-columns: calc(1100 * var(--u)) 1fr;
    min-height: calc(765 * var(--u));
    border-radius: 22px;
  }

  .about-case__img img { aspect-ratio: auto; }

  .about-case__body {
    gap: 0;
    padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(70 * var(--u)) calc(32 * var(--u));
  }

  .about-case__title {
    margin-bottom: calc(14 * var(--u));
    font-size: var(--fs-h4);
    line-height: 1.2083;
  }

  .about-case__desc {
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }

  .about-case__link {
    gap: calc(15 * var(--u));
    margin-top: calc(57 * var(--u));
    font-size: var(--fs-label);
    line-height: 1;
  }

  .about-cases__nav { margin-top: calc(8 * var(--u)); }
  .about-cases__seg { height: calc(24 * var(--u)); min-height: 16px; }

  .about-cases__count {
    margin-top: calc(38 * var(--u));
    padding-left: calc(10 * var(--u));
    font-size: var(--fs-label);
    line-height: 1;
  }
}

/* Аккордеон этапов на десктопе — по макету «Обо мне»: колонки 770 в высоту,
   номер 96 лаймом, заголовок 32, описание 20/28; первая колонка вплотную к
   краю контейнера, разделители 2px. Общий для «Обо мне» и страниц услуг. */
@media (hover: hover) and (min-width: 64em) {
  .approach__list { height: calc(770 * var(--u)); }

  .approach__panel { border-left: 2px solid var(--divider); }
  .approach__panel.is-open,
  .approach__panel:hover,
  .approach__panel:focus-within { flex-grow: 2; }

  .approach__trigger { padding: calc(71 * var(--u)) calc(16 * var(--u)) 0 calc(45 * var(--u)); }
  .approach__panel:first-child .approach__trigger { padding-left: 0; }

  .approach__num {
    margin-bottom: calc(60 * var(--u));
    font-size: var(--fs-h1);
    font-weight: 500;
    line-height: var(--lh-h1);
  }

  .approach__panel-title {
    font-size: var(--fs-h6);
    font-weight: 400;
    line-height: var(--lh-h6);
  }

  .approach__body { margin-top: calc(54 * var(--u)); }

  .approach__desc {
    padding: 0 calc(45 * var(--u)) calc(40 * var(--u));
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }
  .approach__panel:first-child .approach__desc { padding-left: 0; }
}

/* ── Контакты: строка соцсетей и города под первым экраном ── */
.contacts-links {
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}

.contacts-links__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
}

.contacts-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  list-style: none;
  padding: 0;
}

.contacts-links__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
}
.contacts-links__list a:hover { color: var(--accent-text); }

.contacts-links__city { color: var(--text-secondary); }

/* Теги подписи через точку-разделитель (контакты) */
.about-hero__sig-tags--dots li + li::before {
  content: "·";
  margin-right: 0.5em;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════
   КОНТАКТЫ НА ДЕСКТОПЕ — по макету Figma
   ══════════════════════════════════════════ */

@media (min-width: 64em) {
  .contacts-hero {
    min-height: 0;
    display: block;
    border-bottom: 0;
  }

  .contacts-hero__inner { padding-block: calc(156 * var(--u)) calc(268 * var(--u)); }

  .contacts-hero__body {
    align-items: flex-start;
    gap: calc(60 * var(--u));
  }

  .contacts-hero .section-label {
    font-size: var(--fs-small);
    line-height: 1.1667;
    margin-bottom: calc(30 * var(--u));
  }

  .contacts-h1 { margin-bottom: calc(40 * var(--u)); }

  .contacts-hero__desc {
    max-width: calc(770 * var(--u));
    margin-top: 0;
    line-height: 1.125;
  }

  .contacts-hero .about-hero__sig {
    width: calc(375 * var(--u));
    align-self: flex-start;
    margin-top: calc(100 * var(--u));
  }

  .contacts-hero .about-hero__sig-name { margin-bottom: calc(28 * var(--u)); }

  .about-hero__sig-tags--dots {
    gap: 0 calc(10 * var(--u));
    margin-bottom: calc(40 * var(--u));
  }
  .about-hero__sig-tags--dots li + li::before { margin-right: calc(10 * var(--u)); }

  .contacts-links {
    border-top: 0;
    border-bottom: 1px solid var(--divider);
  }

  .contacts-links__inner { padding-block: 0 calc(38 * var(--u)); }

  .contacts-links__list { gap: calc(50 * var(--u)); }

  .contacts-links__list a,
  .contacts-links__city {
    font-size: max(17px, calc(28 * var(--u)));
    line-height: 1.357;
    color: var(--text-secondary);
  }

  /* Форма и лента кейсов стоят в другом порядке, чем на «Обо мне»:
     форма сразу под строкой контактов, лента — последней перед подвалом. */
  .contacts-hero + .request { padding-top: calc(210 * var(--u)); }
  /* Портфолио: заявка сразу под лентой кейсов, у которой нижнего поля нет */
  .cases-section + .request { padding-top: calc(200 * var(--u)); }

  .contacts-form-service {
    max-width: calc(1370 * var(--u));
    margin-bottom: calc(53 * var(--u));
    padding: calc(20 * var(--u)) calc(30 * var(--u));
    font-size: var(--fs-small);
  }
  .contacts-form-service__name { font-size: var(--fs-small); }
  .request__lead:has(+ .contacts-form-service:not([hidden])) { margin-bottom: calc(30 * var(--u)); }
  .request + .about-cases { padding-top: 0; }
}

/* ══════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ ПО МАКЕТУ (до 64em) — главная и общие блоки
   Макет 393px: поля 20, секции разделены линиями во всю ширину
   (#1A1A1A), между надзаголовком и заголовком 10, заголовок → содержимое
   40. Блок стоит в конце файла намеренно: он перекрывает прежнюю мобильную
   типографику выше по файлу при равной специфичности.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 63.99em) {

  /* ── Роли текста (дублируют base.css: здесь их перебивают правила выше) ── */
  h1 { font-size: var(--m-h2); font-weight: 500; }
  h2,
  .faq__aside-title {
    font-size: var(--m-h2);
    font-weight: 500;
    line-height: var(--m-lh-h2);
    color: rgba(255, 255, 255, 0.9);
  }
  h3 { font-size: var(--m-h3); font-weight: 500; line-height: var(--m-lh-h3); }
  .hero-title {
    font-size: var(--m-h1);
    font-weight: 600;
    line-height: var(--m-lh-h1);
    letter-spacing: 0;
  }
  .site-footer__col-title { font-size: 16px; font-weight: 500; }

  /* ── Первый экран ── */
  .hero { border-bottom: 1px solid var(--border-subtle); }
  .hero__inner { padding: 74px var(--gutter) 60px; }

  .hero__status {
    gap: 7px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
  }
  .hero__status-dot { width: 6px; height: 6px; }

  .hero .hero__h1 { font-size: var(--m-h1); }
  .hero__h1-accent .hero__h1-part { box-shadow: inset 0 -4px 0 var(--accent); }

  .hero__subtitle { margin-top: 30px; max-width: none; }
  .hero__actions { margin-top: 50px; gap: 10px; }

  /* ── «Обо мне» ── */
  .about-statement {
    padding-block: 68px 50px;
    border-top: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .fill-text {
    margin-bottom: 30px;
    font-size: var(--m-h2);
    font-weight: 500;
    line-height: var(--m-lh-h2);
    letter-spacing: 0;
  }
  .about-statement__divider { gap: 17px; margin-bottom: 30px; }
  .about-divider-line { border-top-color: var(--border-subtle); }
  .about-more-link {
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
  }
  .about-sub-text { font-size: 14px; line-height: 1.5714; }

  /* ── Кейсы: картинка 240, надзаголовок, название 24/30, описание, ссылка ── */
  .cases-section { padding-block: 70px 0; border-top: 0; }
  .cases-head { padding-inline: var(--gutter); margin-bottom: 40px; }
  .cases-inner { padding-inline: var(--gutter); }

  .case-slide {
    padding-bottom: 0;
    margin-bottom: 60px;
    border-bottom: 0;
  }
  .case-slide img {
    height: 240px;
    min-height: 0;
    border-radius: 2px;
  }
  .case-mobile-info { padding-top: 20px; }
  .case-mobile-meta {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.4286;
    letter-spacing: 0;
    color: var(--text-muted);
  }
  .case-mobile-title {
    margin-bottom: 15px;
    font-size: var(--m-h3);
    font-weight: 500;
    line-height: var(--m-lh-h3);
    color: rgba(255, 255, 255, 0.9);
  }
  .case-mobile-desc {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.375;
    color: var(--text-muted);
  }
  .case-mobile-link {
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
  }

  .cases-footer {
    max-width: none;
    margin-top: 0;
    padding: 20px var(--gutter);
    border-top: 1px solid var(--border-subtle);
  }
  .cases-all-link {
    font-size: 14px;
    letter-spacing: 0;
    color: var(--text-secondary);
  }

  /* ── Услуги на главной: карточки на подложке, радиус 6 ── */
  .services-preview {
    padding-block: 80px 70px;
    border-top: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .services-preview h2 { margin-bottom: 40px; }
  .services-cats { gap: 20px; }

  .service-cat {
    padding: 30px 25px 35px;
    border: 0;
  }
  .service-cat__eyebrow {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.4286;
    letter-spacing: 0;
    color: var(--text-muted);
  }
  .services-cats .service-cat__title {
    margin-bottom: 20px;
    font-size: var(--m-h3);
    font-weight: 500;
    line-height: var(--m-lh-h3);
  }
  .service-cat__desc {
    margin-bottom: 37px;
    font-size: 16px;
    line-height: 1.375;
  }
  .service-cat__desc strong { font-weight: 400; color: rgba(255, 255, 255, 0.9); }

  .service-cat__list {
    margin-bottom: 35px;
    padding-left: 0;
    list-style: none;
    font-size: 16px;
    line-height: 1.375;
    color: rgba(255, 255, 255, 0.9);
  }
  .service-cat__list li {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .service-cat__list li::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
  }
  .service-cat__list li + li { margin-top: 5px; }

  .service-cat__actions { justify-content: space-between; gap: 15px; }
  .service-cat__link {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
  }
  .service-cat__order {
    min-height: 35px;
    min-width: 150px;
    padding: 0 30px;
    font-size: 16px;
  }

  /* ── Калькулятор ── */
  .price-calc {
    padding-block: 50px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .price-calc h2 { margin-bottom: 20px; }
  .price-calc .lead {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.375;
  }

  .calc {
    padding: 40px 14px 25px;
    border: 0;
  }
  .calc__stepper { margin-bottom: 30px; }
  .calc__stepper-num {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 16px;
    color: var(--text-muted);
  }
  .calc__stepper-line { margin-top: 20px; background-color: var(--border-subtle); }

  .calc__bar {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .calc__progress { font-size: 14px; letter-spacing: 0; }

  .calc__question {
    margin-bottom: 25px;
    font-size: var(--m-h3);
    font-weight: 500;
    line-height: var(--m-lh-h3);
  }

  .calc__options { gap: 20px; }
  .calc__option-inner {
    gap: 5px;
    min-height: 120px;
    padding: 25px 20px;
    border: 0.5px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--surface-3);
  }
  .calc__option-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.375;
  }
  .calc__option-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4286;
  }
  .calc__option--compact .calc__option-inner,
  .calc__option--addon .calc__option-inner { min-height: 0; }

  /* ── FAQ ── */
  .faq-section {
    padding-block: 50px 70px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .faq__inner { gap: 30px; }
  .faq__aside-title { margin-bottom: 20px; }
  .faq__aside-desc {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.375;
  }
  .faq__ask-link {
    gap: 8px;
    font-size: 16px;
    letter-spacing: 0;
    color: var(--text-secondary);
  }
  .faq-item { border-bottom: 0; }
  .faq-item:first-child { border-top: 1px solid var(--border-subtle); }
  .faq-q {
    padding: 20px 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2222;
  }
  .faq-item:first-child .faq-q { padding-top: 25px; }
  .faq-a p {
    padding-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
  }

  /* ── Заявка: карточка на подложке ── */
  .request { padding-block: 50px 70px; }
  .request__card {
    padding: 40px 20px;
    border: 0;
  }
  .request__title { margin-bottom: 20px; }
  .request__lead {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.5;
  }
  .request-form label {
    margin-bottom: 10px;
    font-size: 14px;
    letter-spacing: 0;
  }
  .request-form input,
  .request-form textarea {
    min-height: 50px;
    padding: 12px 20px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 16px;
    font-weight: 400;
  }
  .request-form__note { font-size: 14px; }
  .request-form__submit { width: 100%; }
}

/* ── Мобильная версия: первые экраны внутренних страниц, подпись,
   хаб услуг, контакты, «Обо мне» (по макетам 393px) ── */
@media (max-width: 63.99em) {

  /* Действия первого экрана: главная кнопка во всю ширину, вторая —
     ссылкой по центру под ней */
  .page-hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 50px;
  }
  .page-hero__cta .btn { width: 100%; }
  .page-hero__alt {
    align-self: center;
    padding-block: 9px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
  }

  .page-hero { padding-top: calc(var(--header-h) + 74px); padding-bottom: 60px; }
  .page-hero--full { min-height: 0; display: block; }
  .page-hero .section-label { font-size: 16px; line-height: 1.5; }
  .page-hero h1 { margin-bottom: 30px; }
  .page-hero p { max-width: none; }

  .portfolio-intro { padding-block: calc(var(--header-h) + 74px) 70px; }
  .portfolio-intro .eyebrow { font-size: 16px; line-height: 1.5; }
  .portfolio-intro__title { margin-bottom: 30px; }
  /* В мобильном макете портфолио кнопок под описанием нет: сразу подпись */
  .portfolio-intro__cta { display: none; }
  .portfolio-intro__inner { gap: 68px; }

  /* Подпись: имя 18, роль лаймом, теги строкой, «20+ проектов» одной строкой */
  .about-hero__sig,
  .contacts-hero .about-hero__sig {
    gap: 0;
    width: auto;
    padding-left: 0;
    border-left: 0;
  }
  .about-hero__sig-name {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3333;
  }
  .about-hero__sig-role {
    margin-bottom: 15px;
    font-size: 14px;
    letter-spacing: 0;
  }
  .about-hero__sig-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    margin-bottom: 5px;
    padding: 0;
    list-style: none;
  }
  .about-hero__sig-tags,
  .about-hero__sig-desc {
    font-size: 14px;
    line-height: 1.4286;
    color: var(--text-muted);
  }
  .about-hero__sig-tags--dots { gap: 0 6px; }
  .about-hero__sig-desc br { display: none; }

  /* «Обо мне»: цитата 28/34 светлым курсивом */
  .about-hero { min-height: 0; }
  .about-hero__inner { padding-block: 75px 70px; gap: 80px; }
  .about-hero__quote {
    margin: 0;
    font-size: 28px;
    line-height: 1.2143;
  }
  .about-hero__quote cite {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 0;
  }
  .clients { border-color: var(--border-subtle); }

  /* Контакты: первый экран столбиком, строка соцсетей под ним */
  .contacts-hero { display: block; min-height: 0; border-bottom: 0; }
  .contacts-hero__inner { padding-block: 74px 70px; }
  .contacts-hero__body { gap: 60px; }
  .contacts-hero .section-label { font-size: 16px; line-height: 1.5; }
  .contacts-h1 { margin-bottom: 30px; }
  .contacts-links__inner { padding-block: 10px 20px; }
  .contacts-links { border-color: var(--border-subtle); }
  .contacts-hero + .request { padding-top: 50px; }

  /* Контакты по мобильному макету: подпись без точек, первый экран отделён
     линией во всю ширину, соцсетей и ленты кейсов нет — сразу форма. */
  .contacts-hero { border-bottom: 1px solid var(--border-subtle); }
  .contacts-hero__inner { padding-bottom: 114px; }
  .contacts-hero .about-hero__sig { align-self: stretch; }
  .contacts-hero .about-hero__sig-tags--dots { gap: 0 20px; }
  .contacts-hero .about-hero__sig-tags--dots li + li::before { content: none; }
  .contacts-links,
  .contacts-hero ~ .about-cases { display: none; }

  /* Полная форма заявки: без карточки, поля 60px, метки капсом */
  .request--full { padding-block: 50px 100px; }
  .request--full .request__card {
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .request--full .request__title { line-height: 1.1429; }
  .request--full .request__lead { margin-bottom: 40px; }
  .request--full .contacts-form-service {
    align-items: center;
    max-width: none;
    min-height: 50px;
    margin: -20px 0 40px;
    padding: 0 15px 0 18px;
    font-size: 14px;
    line-height: 1.2857;
    color: var(--text-secondary);
  }
  .request--full .contacts-form-service__name { font-size: 14px; font-weight: 400; color: var(--text); }
  .request--full .contacts-form-service__change { text-decoration: none; color: var(--text-muted); }

  .request--full .request-form .form-field { margin-bottom: 25px; }
  .request--full .request-form label,
  .request--full .request-form legend {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    font-size: 14px;
    line-height: 1.2857;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  /* Обязательность — звёздочкой после слова, как в макете */
  .request--full .request-form__req {
    display: inline;
    width: auto;
    height: auto;
    background: none;
  }
  .request--full .request-form__req::before { content: "*"; }

  .request--full .request-form input:not([type="radio"], [type="checkbox"]),
  .request--full .request-form select {
    height: 60px;
    min-height: 0;
    padding: 0 20px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
  }
  .request--full .request-form textarea {
    height: 210px;
    padding: 20px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
  }
  .request--full .request-form select {
    padding-right: 62px;
    color: var(--text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4.5 8l6.5 6.5L17.5 8' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 20px center;
    background-size: 22px;
  }

  /* Способ связи — три «таблетки», выбранная лаймовая */
  .request-form__methods {
    display: flex;
    gap: 10px;
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    border: 0;
  }
  .request-form__methods legend { margin-bottom: 15px; }
  .request--full .request-form .request-form__methods { margin-bottom: 36px; }
  .request--full .request-form .request-form__method {
    display: inline-flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 37px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 60px;
    background: var(--surface-3);
    font-size: 14px;
    line-height: 1.2857;
    text-transform: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
  }
  .request-form__method::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid var(--text-muted);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
  }
  .request--full .request-form .request-form__method:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
  }
  .request-form__method:has(input:checked)::before {
    border-color: var(--accent-ink);
    background: none;
  }
  .request-form__method:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Согласие: квадрат 20px, текст 14/18 */
  .request--full .request-form .request-form__consent { margin: -10px 0 20px; }
  .request--full .request-form .request-form__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding-left: 5px;
    font-size: 14px;
    line-height: 1.2857;
    text-transform: none;
    cursor: pointer;
  }
  .request--full .request-form .request-form__check input {
    flex: none;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    appearance: none;
    cursor: pointer;
  }
  .request--full .request-form .request-form__check input:checked {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  }
  .request-form__check a { color: var(--text); }
  .request-form__check a:hover { color: var(--accent-text); }

  /* ── Хаб услуг ── */
  .svc-terms { gap: 30px; margin-bottom: 50px; }
  .svc-terms__item { gap: 10px; padding-left: 15px; }
  .svc-terms__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1111;
    color: rgba(255, 255, 255, 0.9);
  }
  .svc-terms__desc { font-size: 16px; line-height: 1.25; }

  .services-table { padding-block: 50px 70px; border-bottom: 1px solid var(--border-subtle); }

  .svc-cat,
  .svc-cat--aside {
    padding: 40px 20px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--surface);
  }
  .svc-cat + .svc-cat,
  .svc-cat--aside + .svc-cat,
  .svc-cat + .svc-cat--aside { margin-top: 30px; }

  .svc-cat__head {
    margin-bottom: 0;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border);
  }
  .svc-cat__title { margin-bottom: 20px; font-size: 32px; font-weight: 500; line-height: 0.9375; }
  .svc-cat__desc { max-width: none; font-size: 16px; line-height: 1.5; }

}

/* Планшет (48–64em): кейсы остаются двухколоночными с залипающим текстом —
   мобильная лента из макета включается только до 48em, где main.js
   подставляет подписи под картинки. Возвращаем планшетную сетку, которую
   перекрыл общий мобильный блок выше. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .cases-inner { padding-inline: 0; }
  .cases-head { padding-inline: clamp(20px, 4vw, 40px); }
  .case-slide { margin-bottom: 0; }
  .case-slide img { height: 80vh; border-radius: 0; }
}