/* ==========================================================================
   LIGNUM.PRO — авторская мебель. Стили одностраничного сайта.
   Порядок: токены → база → шапка → сцены → секции → футер → медиазапросы.
   ========================================================================== */

:root {
  --bg: #16241b;
  --bg-glow: radial-gradient(140% 95% at 50% 14%, #32483D, #16241b 74%);
  --copper: #B07A52;
  --copper-grad: linear-gradient(135deg, #c5895a, #9c6a42);
  --cream: #ECE6DA;
  --cream-dim: #c9b9a4;
  /* Чернила на светлых подложках и единственный сигнальный цвет */
  --ink-deep: #191612;
  --ink-body: #2a2620;
  --clay: #e39685;
  --font-head: 'Jost', sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --ease-reveal: cubic-bezier(.2, .6, .2, 1);
  /* Уверенное прибытие: быстрый старт, длинное торможение */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Радиус плиты вынесен в токен: от него считается кольцо обхода */
  --radius-slab: 32px;
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------- база --- */

* { box-sizing: border-box; margin: 0; padding: 0 }

html {
  /* scroll-behavior здесь нет намеренно: все переходы по якорям идут через
     вуаль (js/nav.js), а анимированная прокрутка перематывала бы всю
     хореографию сцен — ровно то, ради чего вуаль и сделана. */
  overflow-x: clip;
  /* Полоса прокрутки в Firefox: светлая по умолчанию рвёт тёмный фон */
  scrollbar-color: #32483D transparent;
}

/* Safari до 16 не знает overflow: clip и оставил бы боковую прокрутку —
   там сцены вылезают за край экрана. */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden }
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  /* iOS игнорирует user-scalable — двойной тап гасим здесь */
  touch-action: manipulation;
  /* Серый прямоугольник поверх кнопки при тапе — фирменного в нём ничего нет */
  -webkit-tap-highlight-color: transparent;
}

/* Поверхности, которые рисует браузер, тоже принадлежат макету. */
::selection { background: rgba(176, 122, 82, .38); color: #fff }

::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb {
  background: #32483D;
  border: 2px solid var(--bg);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(236, 230, 218, .28) }

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

/* Клавиатурная обводка: без неё по табу не видно, где находишься.
   Радиус обводка берёт у самого элемента — задавать его здесь не нужно. */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

.field:focus-visible { outline-offset: 1px }

img { max-width: 100% }

/* <picture> нужен только для выбора файла — в раскладке участвует сама
   картинка: срез и фартук позиционируются относительно своей сцены. */
picture { display: contents }

input, select, textarea, button { accent-color: var(--copper) }

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-glow);
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 44px);
}

.wrap--narrow { max-width: 1000px }

.section { padding-block: clamp(70px, 10vh, 120px) }

.kicker {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
}

.kicker--sm { font-size: 12px }

.h2 {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -.01em;
  margin-top: 10px;
  color: #fff;
}

/* ------------------------------------------------------------- шапка --- */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  /* Размытие переходит вместе с тоном: раньше фон плыл 0.4s, а blur включался
     скачком — переход читался как щелчок, а не как появление подложки. */
  transition: background .4s, border-color .4s,
    backdrop-filter .4s, -webkit-backdrop-filter .4s;
}

.hdr.is-scrolled {
  background: rgba(18, 22, 18, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.hdr__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.hdr__logo { display: flex; align-items: center }
.hdr__logo img { height: 23px; width: auto; display: block }

.hdr__nav { display: flex; gap: 30px; font-size: 15px }
.hdr__nav a {
  color: #fff;
  white-space: nowrap;
  /* Медная черта прочерчивается под ссылкой — та же линия, что ведёт по сайту */
  background-image: linear-gradient(var(--copper), var(--copper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .3s var(--ease-out);
}

.hdr__nav a:hover { background-size: 100% 1px }

.hdr__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 13px;
  line-height: 1.35;
}

.hdr__contacts a { color: #fff; transition: opacity .2s }
.hdr__contacts a:hover { opacity: .65 }

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--copper-grad);
  color: #fff;
  padding: 8px 8px 8px 21px;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 6px 22px -6px rgba(176, 122, 82, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: box-shadow .28s, transform .28s;
}

.btn-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -6px rgba(176, 122, 82, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.btn-pill__icon svg,
.coop__cta svg { transition: transform .28s var(--ease-out) }

.btn-pill:hover .btn-pill__icon svg { transform: translateX(2px) }
.coop__cta:hover svg { transform: translateX(3px) }

.btn-pill__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: grid;
  place-items: center;
  line-height: 1;
}

/* Вуаль перехода между секциями */
.veil {
  position: fixed;
  inset: 0;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  background: var(--bg-glow);
  /* Возврат: длинный, с торможением — кадр не вспыхивает, а проявляется */
  transition: opacity .62s var(--ease-out);
}

/* Уход в темноту: быстрый и с разгоном. Симметричные половины читались
   как склейка — экран гас и тут же вспыхивал обратно. */
.veil[data-state="in"] { transition: opacity .26s cubic-bezier(.4, 0, 1, 1) }

/* ------------------------------------------- АКТ 1 — сцена-манифест --- */

.act1 { position: relative; height: 300vh }

.act1__stage { position: sticky; top: 0; height: 100vh; overflow: hidden }

.act1__bg {
  position: absolute;
  inset: -4%;
  background: #1a140e url('../assets/hero.webp') center 54% / cover;
  will-change: transform;
}

.act1__bg-dark {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, .34), rgba(5, 5, 5, .14) 44%, rgba(5, 5, 5, .68));
}

.act1__slice {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90vh;
  height: 90vh;
  object-fit: contain;
  z-index: 2;
  opacity: 0;
  will-change: transform;
  filter: drop-shadow(0 40px 60px rgba(20, 16, 12, .4));
  transform: translate(-50%, -50%) scale(.24);
}

.act1__hero {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  bottom: 14vh;
  z-index: 5;
  color: #fff;
  max-width: 44ch;
  will-change: transform, opacity;
}

.act1__hero-title {
  font-family: var(--font-head);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: -.01em;
}

.act1__hero-sub {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  margin-top: 12px;
}

.act1__facts {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  will-change: opacity, transform;
}

.fact {
  position: absolute;
  max-width: min(32vw, 360px);
  opacity: 0;
  will-change: opacity, transform;
}

.fact--tl { top: 20%; left: clamp(20px, 5vw, 72px) }
.fact--br { bottom: 20%; right: clamp(20px, 5vw, 72px); text-align: right }

.fact__title {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--cream);
}

.fact__text {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.5;
  color: var(--cream-dim);
  margin-top: 14px;
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 5;
  width: 25px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
  will-change: opacity;
}

.scroll-hint span {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);
  animation: scrollhint 1.7s ease-in-out infinite;
}

/* Подсказку услышали — она перестаёт звать */
.scroll-hint.is-spent span { animation: none }

@keyframes scrollhint {
  0%   { opacity: 0; transform: translateY(0) }
  30%  { opacity: 1 }
  65%  { opacity: 1; transform: translateY(11px) }
  100% { opacity: 0; transform: translateY(13px) }
}

/* ------------------------------------------------ избранные работы --- */

.works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 30px;
}

/* Девять карточек ложатся тремя рядами по три */
@media (min-width: 1000px) {
  .works { grid-template-columns: repeat(3, 1fr) }
}

.work {
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 50px -28px rgba(40, 28, 18, .5);
}

.work__photo {
  position: relative;
  height: clamp(210px, 24vw, 280px);
  background-size: cover;
  background-position: center;
  transition: opacity .25s;
}

/* Полное фото приходит по клику по миниатюре — на время загрузки
   карточка притухает, а не мигает пустотой. */
.work__photo.is-loading { opacity: .55 }

/* Новое фото вводится наплывом поверх прежнего (см. js/portfolio.js). */
.work__photo-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .32s var(--ease-out);
}

.work__photo-layer.is-in { opacity: 1 }

.work__body {
  padding: 16px 20px 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.work__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }

.work__thumb {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .5);
  opacity: .7;
  padding: 0;
  transition: opacity .2s, border-color .2s;
}

.work__thumb.is-active { border-color: var(--copper); opacity: 1 }

.work__title {
  font-family: var(--font-head);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 400;
  line-height: 1.15;
}

.work__mats {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  margin-top: 6px;
  flex: 1;
}

.work__price {
  font-family: var(--font-head);
  font-size: 19px;
  color: var(--cream);
  margin-top: 10px;
}

.works__note { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .45) }


/* Секция вынесена на светлую подложку: на общем тёмном фоне блок
   иначе сливается с соседями. Внутри — своя, тёмная по тексту гамма. */
#portfolio {
  position: relative;
  margin-inline: clamp(16px, 3vw, 40px);
  border-radius: clamp(20px, 2vw, 32px);
  background: linear-gradient(180deg, #F2ECE1, #E3DACA);
}

/* Плита проявляется из того же фона, в котором закончилась сцена: поверх неё
   лежит сам фон страницы и снимается по мере входа (--slab-in ведёт js/scenes.js).
   Новой поверхности не заводим — это тот же хвойный фон, только уходящий. */
#portfolio::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: var(--bg);
  opacity: calc(1 - var(--slab-in, 1));
  pointer-events: none;
}

#portfolio .h2 { color: #241f1a }
#portfolio .works__note { color: rgba(36, 31, 26, .55) }

#portfolio .work {
  background: #fff;
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 20px 44px -26px rgba(60, 44, 28, .45);
}

#portfolio .work__body { color: var(--ink-body) }
#portfolio .work__title { color: var(--ink-deep) }
#portfolio .work__mats { color: rgba(42, 38, 32, .7) }
#portfolio .work__price { color: var(--ink-body) }

#portfolio .work__thumb { border-color: rgba(0, 0, 0, .14) }
#portfolio .work__thumb.is-active { border-color: var(--copper) }

/* ------------------------------------------------------ как заказать --- */

.process__head { text-align: center; max-width: 560px; margin: 0 auto 24px }
.process__sub { font-size: 17px; line-height: 1.5; color: var(--cream-dim); margin-top: 14px }

.timeline {
  position: relative;
  margin-top: 56px;
  /* Нижний отступ секции перенесён сюда: трек тянется до карточки заявки */
  padding-bottom: clamp(70px, 10vh, 120px);
}

.timeline__track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .13);
  border-radius: 2px;
}

.timeline__fill {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  /* Едет масштабом: высота — layout-свойство, в кадре его трогать нельзя */
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  will-change: transform;
  background: var(--copper);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(176, 122, 82, .5);
}

.step { position: relative; display: flex; padding-block: 16px }
.step--left { justify-content: flex-start }
.step--right { justify-content: flex-end }

.step__body { width: 43%; padding: 6px 4px }

.step__title {
  font-family: var(--font-head);
  font-size: 21px;
  line-height: 1.2;
  font-weight: 400;
  color: #fff;
}

.step__text {
  color: rgba(255, 255, 255, .62);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 8px;
}

.step__node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05);
  color: var(--cream-dim);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 17px;
  z-index: 2;
  transition: background .35s, color .35s, border-color .35s;
}

.step__node.is-on { background: var(--copper); color: #fff; border-color: var(--copper) }

/* --------------------------------------------------- обсудить проект --- */

#process { padding-bottom: 0 }

.contact {
  padding-block: 0 clamp(28px, 4vh, 52px);
  padding-inline: clamp(16px, 3vw, 40px);
}

.contact__card {
  position: relative;
  width: min(100%, 1280px);
  margin: 0 auto;
  background: linear-gradient(160deg, #262626, #181818);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius-slab);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7);
  padding: clamp(28px, 4.5vh, 52px) clamp(24px, 5vw, 56px);
  color: #fff;
}



/* ---- обход резцом: медная линия идёт по краю карточки, пока заявка уходит ----
   Продолжение той же линии, что спускается по таймлайну. Кольцо лежит под
   содержимым карточки: внутреннюю часть закрывает собственный фон карточки,
   наружу выходит полоса в 2 px. */
.contact__trace {
  position: absolute;
  inset: -2px;
  /* Кольцо шире карточки ровно на свою толщину — иначе угол выглядит срезанным */
  border-radius: calc(var(--radius-slab) + 2px);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-in-out);
}

.contact__card.is-sending .contact__trace,
.contact__card.is-accepted .contact__trace { opacity: 1 }

.contact__trace i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0 58%,
    rgba(176, 122, 82, .18) 66%,
    var(--copper) 78%,
    var(--cream) 84%,
    var(--copper) 89%,
    transparent 97%);
  animation: trace-lap 2.4s linear infinite;
  will-change: transform;
}

/* Заявка принята — резец делает один быстрый круг и уходит. */
.contact__card.is-accepted .contact__trace i { animation-duration: .85s }

@keyframes trace-lap {
  to { transform: translate(-50%, -50%) rotate(1turn) }
}

.contact__trace::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: var(--radius-slab);
  background: linear-gradient(160deg, #262626, #181818);
}

/* --------------------------------------------------- бирка заявки --- */

.receipt {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.receipt[hidden] { display: none }

.receipt__mark {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--copper);
  border: 1px solid rgba(176, 122, 82, .45);
  background: radial-gradient(closest-side, rgba(176, 122, 82, .22), transparent);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-out);
}

.receipt__check {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

.receipt__title {
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.1;
  margin-top: 16px;
  outline: none;
}

.receipt__sub {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .55);
  margin-top: 8px;
}

.receipt__sub a { color: var(--copper) }

.receipt__list {
  margin-top: 24px;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.receipt__row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.receipt__row[hidden] { display: none }

.receipt__row dt {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--copper);
}

.receipt__row dd {
  font-size: 15px;
  line-height: 1.5;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.receipt__message {
  color: rgba(236, 230, 218, .82);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.receipt__again {
  margin-top: 22px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 9999px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 11px 24px;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.receipt__again:hover {
  border-color: var(--copper);
  background: rgba(176, 122, 82, .16);
}

/* Появление: марка, заголовок, затем строки заявки одна за другой. */
.receipt__mark,
.receipt__title,
.receipt__sub,
.receipt__row,
.receipt__again {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
}

.receipt.is-in .receipt__mark { opacity: 1; transform: scale(1) }
.receipt.is-in .receipt__check { animation: check-draw .5s var(--ease-out) .18s forwards }

.receipt.is-in .receipt__title,
.receipt.is-in .receipt__sub,
.receipt.is-in .receipt__row,
.receipt.is-in .receipt__again { opacity: 1; transform: none }

.receipt.is-in .receipt__title { transition-delay: .1s }
.receipt.is-in .receipt__sub   { transition-delay: .16s }
/* Шаг 45 мс, шесть строк — весь список приходит за 270 мс. */
.receipt.is-in .receipt__row   { transition-delay: calc(.24s + var(--i, 0) * 45ms) }
.receipt.is-in .receipt__again { transition-delay: .56s }

@keyframes check-draw {
  to { stroke-dashoffset: 0 }
}

/* Линия из таймлайна приходит сверху и «зажигает» свечение над карточкой и под ней.
   Только градиент, без blur-фильтра — тот заметно грузит прокрутку. */
.contact__card::before,
.contact__card::after {
  content: '';
  position: absolute;
  left: 50%;
  z-index: -1;
  width: min(86%, 780px);
  height: 170px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(176, 122, 82, .34), transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

.contact__card::before { top: -70px }
.contact__card::after { bottom: -70px }

.contact__card.is-lit::before,
.contact__card.is-lit::after { opacity: 1 }

.contact__head {
  transition: opacity .22s var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  position: relative;
  max-width: 600px;
  margin: 0 auto 18px;
}

.contact__head .h2 {
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: 0;
  margin-top: 0;
}

.contact__sub {
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  line-height: 1.5;
  max-width: 44ch;
}

.contact__head.is-out { opacity: 0 }
.contact__head[hidden] { display: none }

.contact__phone { color: var(--copper); font-size: 14px }
.contact__phone:hover { filter: brightness(1.2) }

.form {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}

/* Отправка идёт — форму больше не трогают, но она остаётся на месте:
   исчезающая форма скакала бы высотой карточки. */
.form.is-sending { pointer-events: none }

.form.is-done {
  opacity: 0;
  transform: translateY(-8px) scale(.99);
  pointer-events: none;
}

.form[hidden] { display: none }

.field {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 13px 16px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
}

.field::placeholder { color: rgba(255, 255, 255, .5) }
.field:focus { outline: none; border-color: var(--copper) }
.field { transition: border-color .2s var(--ease-in-out), background .2s var(--ease-in-out) }

.field--select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .5) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, .5) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-group__error {
  padding-left: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--clay);
  /* Подсказка приходит сверху из-под поля, а не возникает готовой */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}

.field-group.is-invalid .field-group__error { opacity: 1; transform: none }

.field-group__error:empty { display: none }

.field-group.is-invalid .field { border-color: var(--clay) }

/* Подсказки почтовых доменов */
.field-suggest { position: relative }

.suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 216px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--ink-deep);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8);
}

.suggest[hidden] { display: none }

.suggest__item {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
}

.suggest__item.is-active,
.suggest__item:hover { background: rgba(176, 122, 82, .22); color: #fff }

.field--select option { background: #1a1714 }

.field--area { min-height: 98px; resize: none }

.form__row { display: grid; grid-template-columns: 1fr 172px; gap: 12px }

.form__file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 12px;
  padding: 14px;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  cursor: pointer;
}

.form__file:hover { border-color: var(--copper); color: #fff }

.form__file-icon {
  display: block;
  width: 20px;
  height: 20px;
  opacity: .75;
  transition: opacity .2s;
}

.form__file:hover .form__file-icon { opacity: 1 }

.btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--copper);
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 15px;
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
  transition: filter .2s, transform .2s;
}

.btn:hover { filter: brightness(1.08); transform: translateY(-1px) }

.btn:disabled {
  opacity: .6;
  cursor: default;
  filter: none;
  transform: none;
}

/* Пока идёт отправка, кнопка не «выключена» на вид: она работает индикатором,
   поэтому держит полную яркость и показывает, сколько уже ушло. */
.btn.is-sending {
  position: relative;
  overflow: hidden;
  opacity: 1;
  cursor: progress;
}

.btn__label { position: relative; z-index: 1; transition: opacity .2s }

.btn__meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, .22);
  opacity: 0;
  transition: opacity .2s;
}

.btn.is-sending .btn__meter { opacity: 1 }

.btn__meter i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(236, 230, 218, .5), var(--cream));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-out);
}

/* Эскиза нет — отправка занимает доли секунды, и проценты показывать нечего:
   вместо шкалы по ленте кнопки идёт короткий медный проход. */
.btn.is-indeterminate .btn__meter i {
  width: 38%;
  transform: none;
  transition: none;
  animation: meter-sweep 1.15s var(--ease-in-out) infinite;
}

@keyframes meter-sweep {
  0%   { transform: translateX(-100%) }
  100% { transform: translateX(363%) }
}

.form__file { position: relative }

/* Длинные имена файлов не должны распирать карточку */
.form__file-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form__file-clear {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, color .2s;
}

.form__file-clear[hidden] { display: none }
.form__file-clear:hover { background: var(--copper); color: #fff }

.form__legal {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

.form__legal a { color: var(--copper); border-bottom: 1px solid rgba(176, 122, 82, .4) }

.teaser { display: block; height: clamp(20px, 3vh, 36px) }

/* ------------------------------------ АКТ 3 — фартук и блок «Обо мне» --- */

.act3 { position: relative; height: 190vh }

.act3__anchor { position: absolute; top: 86vh; left: 0; width: 1px; height: 1px }

.act3__stage { position: sticky; top: 0; height: 100vh; overflow: hidden }

.act3__apron {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 98vh;
  width: auto;
  max-width: none;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  /* Тень статична и живёт в стилях: раньше js/scenes.js переписывал filter
     каждый кадр вместе с blur — самый дорогой эффект сцены на картинке 588×882,
     и виден он был меньше всего. Глубину теперь несут масштаб и прозрачность. */
  filter: drop-shadow(0 44px 64px rgba(20, 16, 12, .5));
}

.adv {
  position: absolute;
  max-width: min(30vw, 380px);
  z-index: 4;
  opacity: 0;
  will-change: opacity, transform;
}

.adv--tl { top: 14%; left: clamp(20px, 5vw, 72px) }
.adv--br { bottom: 14%; right: clamp(20px, 5vw, 72px); text-align: right }

.adv__title {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--cream);
}

.adv__text {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--cream-dim);
  margin-top: 14px;
  text-wrap: pretty;
}

.about {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.about__grid {
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  max-width: 540px;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  width: 100%;
  pointer-events: auto;
}

.about .h2 { line-height: 1.1; margin-top: 12px }

.about__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
  margin-top: 18px;
}

.about__text--dim { color: rgba(255, 255, 255, .62); margin-top: 12px }

.about__quote {
  margin-top: 20px;
  font-family: var(--font-head);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.34;
  font-weight: 400;
  color: #fff;
  border-left: 2px solid var(--copper);
  padding-left: 18px;
}

.about__sign {
  margin-top: 16px;
  font-style: italic;
  color: rgba(255, 255, 255, .55);
  font-size: 15px;
}

.about__photo {
  /* В одну колонку кадр мастера идёт первым: фартук сцены — и сразу человек в нём. */
  order: -1;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 44px 90px -26px rgba(0, 0, 0, .78);
  border: 1px solid rgba(176, 122, 82, .18);
}

.about__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

/* ------------------------------------------------------------ отзывы --- */

.reviews { padding-block: clamp(50px, 7vh, 90px) clamp(60px, 9vh, 110px) }

.reviews__head-wrap { margin-bottom: 32px }

.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.reviews__arrows { display: flex; gap: 10px }

.reviews__arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, border-color .2s;
}

.reviews__arrow:hover { background: var(--copper); border-color: var(--copper) }

.reviews__scroll {
  overflow-x: auto;
  width: 100%;
  cursor: grab;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.reviews__scroll::-webkit-scrollbar { display: none }
.reviews__scroll:active { cursor: grabbing }

.reviews__marquee { display: flex; gap: 22px; width: max-content; padding-inline: 22px }

.review {
  flex: none;
  width: min(86vw, 440px);
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(20, 12, 6, .5);
  display: flex;
  flex-direction: column;
}

.review__photo { height: 300px; background-size: cover; background-position: center }

.review__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1 }

.review__text { font-size: 16px; line-height: 1.6; color: var(--ink-body); flex: 1 }

.reviews__dots { display: none }

.reviews__dot {
  position: relative;
  box-sizing: content-box;
  width: 26px;
  height: 3px;
  /* Вертикальные поля — площадь под палец: сама полоска остаётся тонкой */
  padding: 12px 0;
  overflow: hidden;
  border: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, .22);
  background-clip: content-box;
  cursor: pointer;
}

/* Заполнение идёт transform-ом: его считает композитор, прокрутка не проседает */
.reviews__dot > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.review__name {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-family: var(--font-head);
  font-size: 17px;
  color: #0a0a0a;
}

/* ---------------------------------------------------- сотрудничество --- */

.coop {
  padding-block: clamp(40px, 6vh, 80px) clamp(56px, 8vh, 100px);
  padding-inline: clamp(16px, 3vw, 40px);
}

.coop__card {
  position: relative;
  overflow: hidden;
  width: min(100%, 1280px);
  margin: 0 auto;
  background: linear-gradient(150deg, #2b2b2b, #171717);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 32px;
  box-shadow: 0 40px 90px -44px rgba(0, 0, 0, .7);
  padding: clamp(36px, 6vh, 72px) clamp(24px, 5vw, 72px);
  color: #fff;
  text-align: center;
}

.coop__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(176, 122, 82, .14), transparent 70%);
  pointer-events: none;
}

.coop__inner { position: relative; max-width: 640px; margin: 0 auto }

.coop__inner .h2 { font-size: clamp(26px, 3vw, 40px); margin-top: 12px }

.coop__text {
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 1.6;
  margin-top: 16px;
  text-wrap: pretty;
}

.coop__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--copper);
  color: #fff;
  padding: 13px 26px;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 15px;
  margin-top: 26px;
}

.coop__cta:hover { filter: brightness(1.08) }

/* ------------------------------------------------------------- футер --- */

.footer { color: #b9c0b4; padding-block: clamp(40px, 6vh, 64px) 24px }

.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: center;
  justify-content: space-between;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  max-width: 34ch;
}

.footer__brand img { height: 22px; width: auto; display: block }
.footer__brand p { font-size: 13px; color: #8a938a; line-height: 1.5 }

.footer__contacts { display: flex; align-items: center; gap: 22px; font-size: 14px }
.footer__contacts a {
  color: #e6e2da;
  background-image: linear-gradient(var(--copper), var(--copper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: color .2s, background-size .3s var(--ease-out);
}

.footer__contacts a:hover { color: #fff; background-size: 100% 1px }
.footer__contacts span { color: #8a938a }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid #35463c;
  margin-top: 26px;
  padding-top: 18px;
  font-size: 13px;
  color: #7d857c;
}

.footer__bottom a { transition: color .2s }
.footer__bottom a:hover { color: #fff }

/* ------------------------------------------------------------- тост --- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 7000;
  /* left:50% оставляет доступной лишь половину экрана — ширину задаём явно */
  width: max-content;
  max-width: min(92vw, 460px);
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(24, 22, 20, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7);
  color: var(--cream);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity .3s, transform .3s;
}

.toast[hidden] { display: none }

.toast.is-visible { opacity: 1; transform: translate(-50%, 0) }

.toast[data-state="success"] { border-color: rgba(176, 122, 82, .55) }

.toast[data-state="error"] {
  border-color: rgba(227, 150, 133, .45);
  color: var(--clay);
}

/* ------------------------------------------------------------ cookie --- */

.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6000;
  transform: translateY(100%);
  transition: transform .5s var(--ease-out);
  background: rgba(20, 18, 16, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 14px clamp(20px, 4vw, 44px);
}

.cookie[hidden] { display: none }
.cookie.is-in { transform: none }

.cookie__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.cookie__inner p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  flex: 1;
  min-width: 240px;
}

.cookie__inner a { color: var(--copper) }

.cookie__btn {
  flex: none;
  background: var(--copper);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 10px 24px;
  font-weight: 500;
  font-size: 14px;
  font-family: var(--font-body);
  cursor: pointer;
}

.cookie__btn:hover { filter: brightness(1.08) }

/* ------------------------------- появление секций (IntersectionObserver) --- */

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s var(--ease-reveal), transform .7s var(--ease-reveal);
}

[data-reveal][data-side="left"]  { transform: translateX(-44px) }
[data-reveal][data-side="right"] { transform: translateX(44px) }

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

/* ------------------------------------------------------- медиазапросы --- */

@media (min-width: 860px) {
  .about__grid { grid-template-columns: .82fr 1.18fr; max-width: 1140px }
  .about__photo { order: 0 }
}

@media (max-width: 1120px) {
  .hdr__contacts { display: none }
  .hdr__nav { gap: 18px; font-size: 14px }
}

/* Мобильная раскладка. Точка 760px продублирована в js/scenes.js
   (STACKED_SCENE_QUERY) — менять их нужно вместе. */
@media (max-width: 760px) {
  .hdr__nav { display: none }
  .hdr__inner { height: 62px }
  /* Логотип уступает место кнопке: 177px + 173px не влезали в 350px строки */
  .hdr__logo img { height: 17px }
  .btn-pill { padding: 8px 8px 8px 15px; font-size: 13px; gap: 7px }
  .btn-pill__icon { width: 26px; height: 26px }

  .timeline__track,
  .timeline__fill { left: 16px }

  .step { justify-content: flex-end }
  .step__body { width: calc(100% - 46px) }
  .step__node { left: 16px; width: 40px; height: 40px; font-size: 15px }

  /* Шаги занимают всю ширину — боковой въезд вылезал бы за экран */
  [data-reveal][data-side="left"],
  [data-reveal][data-side="right"] { transform: translateY(28px) }

  .form__row { grid-template-columns: 1fr }

  /* 5:3 срезало у фотографий слишком много — 4:3 ближе к исходному кадру */
  .work__photo { height: auto; aspect-ratio: 4 / 3 }

  /* --- отзывы в формате сторис: одна карточка на экран --- */

  /* Листается свайпом, стрелки лишние — навигация на полосках-индикаторах */
  .reviews__arrows { display: none }

  .reviews__scroll {
    scroll-snap-type: x mandatory;
    /* Соседних карточек на экране нет — растворять нечего, а маска съедала
       края единственной видимой карточки. */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .reviews__marquee { gap: 14px; padding-inline: 7vw }

  .review {
    width: 86vw;
    scroll-snap-align: center;
  }

  .reviews__dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
    padding-inline: clamp(20px, 5vw, 32px);
  }

  /* Три контакта в строку не помещались — телефон рвался пополам */
  .footer__contacts {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Облегчённый фон героя: десктопные 1535 px телефону не нужны,
     вариант собирается в scripts/build-assets.sh. */
  .act1__bg { background-image: url('../assets/hero-mobile.webp') }

  /* --- АКТ 1: срез сверху, факты списком под ним --- */

  /* Сцена короче, чем на десктопе: три экрана прокрутки до портфолио
     на телефоне ощущаются слишком длинными. */
  .act1 { height: 220vh }

  /* Подсказка скролла поднята над панелью браузера: 100vh на мобильных
     считается по «большому» вьюпорту, и низ сцены уезжает под адресную строку. */
  .scroll-hint { bottom: calc(24px + 100lvh - 100svh) }

  /* Тот же сдвиг для текста героя: иначе на телефонах с высокой панелью
     браузера подсказка поднимается, а текст остаётся на месте — и они
     накладываются. Общий член гарантирует постоянный зазор в 26px. */
  .act1__hero { bottom: calc(90px + 100lvh - 100svh) }

  .act1__slice { top: 28vh; width: 50vh; height: 50vh }

  .act1__facts {
    inset: 48vh clamp(20px, 5vw, 32px) auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .fact {
    inset: auto;
    max-width: none;
    text-align: left;
  }

  .fact__title { font-size: 21px }
  .fact__text { font-size: 15px; margin-top: 8px }

  /* --- АКТ 3: фартук, тезисы и «Обо мне» обычным потоком ---
     Блок «Обо мне» выше 100vh, в закреплённой сцене его срезало. */

  .act3 { height: auto }

  .act3__anchor { position: static }

  .act3__stage {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: clamp(40px, 7vh, 72px);
    padding-inline: clamp(20px, 5vw, 32px);
  }

  /* Фартук на телефоне не показываем. В развёрнутой раскладке сцены нет, и он
     оставался висеть отдельной картинкой без связи с текстом; тот же фартук
     надет на Игоре в портрете двумя блоками ниже — предмет показан один раз и
     сразу на человеке. */
  .act3__apron { display: none }

  /* Акт 3 здесь статичен: js/scenes.js выходит из renderAct3 на этой же точке.
     Постоянный will-change держал бы слои композитора вечно и ни для чего —
     в Safari на длинной странице такие слои иногда остаются непрорисованными,
     и текст тезисов пропадал. */
  .adv {
    inset: auto;
    max-width: none;
    text-align: left;
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .adv__title { font-size: 21px }
  .adv__text { font-size: 15px; margin-top: 8px }

  /* Отбивка только между тезисами: сверху их больше ничем не разделяет — там
     заканчивается паддинг сцены. */
  .act3__stage > .adv + .adv { margin-top: 30px }

  .about {
    position: static;
    display: block;
    margin-top: 44px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    will-change: auto;
  }

  .about__grid { gap: 24px; padding-inline: 0 }
}

/* Маркер-буллет у тезисов сцен — только в мобильной раскладке */
@media (max-width: 760px) {
  .fact,
  .adv {
    position: relative;
    padding-left: 22px;
  }

  .fact::before,
  .adv::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--copper);
  }
}

/* --------------------------------- мобильная доводка: сторис и cookie --- */

@media (max-width: 760px) {
  /* Панель cookie занимала треть первого экрана и закрывала заголовок героя.
     Одна строка вместо трёх плюс сдвиг героя (см. .has-cookie ниже). */
  .cookie { padding-block: 10px 12px }

  .cookie__inner {
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: space-between;
  }

  .cookie__inner p { font-size: 12px; min-width: 0 }
  .cookie__btn { padding: 9px 18px; font-size: 13px }

  /* Высоту панели измеряет js/nav.js — она зависит от того, во сколько строк
     лёг текст на конкретном экране. */
  .has-cookie .act1__hero { bottom: calc(90px + 100lvh - 100svh + var(--cookie-h, 0px)) }
  .has-cookie .scroll-hint { bottom: calc(24px + 100lvh - 100svh + var(--cookie-h, 0px)) }

  /* Сторис должны помещаться целиком: карточка и полоски под ней на одном
     экране, иначе индикаторы прогресса оказываются за нижним краем. */
  .reviews__head-wrap { margin-bottom: 20px }

  /* Карточки в ленте тянутся до самой длинной, поэтому у коротких отзывов
     оставался пустой низ. Отдаём этот запас фотографии — она и есть
     доказательство работы. */
  .review__photo {
    flex: 1 1 auto;
    height: auto;
    /* Первая строка — для браузеров без svh: там фото иначе схлопнулось бы */
    min-height: 170px;
    min-height: clamp(140px, 20svh, 200px);
  }

  .review__body { flex: none; padding: 20px 22px 22px }
  .review__text { flex: none; font-size: 15px; line-height: 1.55 }
  .review__name { margin-top: 14px; padding-top: 12px }
  .reviews__dots { margin-top: 4px }

  /* Ссылки футера стояли в 22 px — под палец мало. */
  .footer__contacts a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer__bottom { gap: 4px 10px }
  .footer__bottom a { display: inline-flex; align-items: center; min-height: 40px }

  /* Нарисованная стрелка шире прежнего глифа, и на 360 px подпись CTA
     срывалась на вторую строку — возвращаем её в одну строку. */
  .coop__cta { gap: 8px; padding: 13px 20px }

  /* Бирка: на телефоне подпись встаёт над значением — в две колонки
     описание задачи рвалось на четыре строки в узком столбце. */
  .receipt__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 2px;
  }
}

/* На 320 px логотип и кнопка в шапке смыкались вплотную: 20 px полей с каждой
   стороны съедали весь запас строки. Ужимаем поля шапки, а не саму кнопку. */
@media (max-width: 360px) {
  .hdr__inner { padding-inline: 14px }
  /* Ширину задаём явно: у файла логотипа своё соотношение 8:1, и при width:auto
     строка шапки оказывалась переполненной — логотип молча сжимался вплотную
     к кнопке. 104 px плюс 173 px кнопки оставляют между ними живой зазор. */
  .hdr__logo img { height: 13px; width: 104px }
}

/* ------------------------------------------- система просит покой --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }

  /* Секции просто на месте, без въезда */
  [data-reveal],
  [data-reveal][data-side="left"],
  [data-reveal][data-side="right"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .veil { transition: none }
  .scroll-hint span { animation: none; opacity: 1 }

  /* Состояния переключаются мгновенно, но остаются различимыми */
  .btn-pill,
  .btn,
  .work__photo,
  .step__node,
  .reviews__arrow,
  .hdr {
    transition: none;
  }

  .btn-pill:hover,
  .btn:hover { transform: none }

  /* Отправка заявки: обратная связь остаётся, движение уходит.
     Медный обход замирает ровной рамкой, шкала кнопки не бежит,
     бирка приходит проявлением без сдвига, галочка уже нарисована. */
  .contact__trace i { animation: none; background: var(--copper); opacity: .55 }

  .btn.is-indeterminate .btn__meter i {
    animation: none;
    width: 100%;
    opacity: .7;
  }

  .form { transition: opacity .2s }
  .form.is-done { transform: none }

  .receipt__mark,
  .receipt__title,
  .receipt__sub,
  .receipt__row,
  .receipt__again {
    transform: none;
    transition: opacity .25s;
  }

  .receipt.is-in .receipt__mark { transform: none }
  .receipt.is-in .receipt__check { animation: none; stroke-dashoffset: 0 }
  .receipt.is-in .receipt__row { transition-delay: 0s }
  .receipt.is-in .receipt__title,
  .receipt.is-in .receipt__sub,
  .receipt.is-in .receipt__again { transition-delay: 0s }

  .work__photo-layer { transition: opacity .15s }
  .cookie { transition: none }
  .hdr__nav a,
  .footer__contacts a { transition: color .2s }
  .btn-pill__icon svg,
  .coop__cta svg { transition: none }
}