/* CLEANINK — style.css */

/* ---------- tokens ---------- */
:root {
  /* Белая основа. Тепло приходит из фотографий кожи, а не из интерфейса. */
  --bg:        #FFFFFF;
  --surface:   #F5F7F8;   /* холодная off-white для чередующихся полос */
  --text:      #14161A;   /* чернильный, слегка холодный */
  --muted:     #616873;
  --border:    #E4E8EC;
  --accent:    #6E8CA0;   /* холодный сланцево-голубой */
  --accent-ink: #55707F;  /* тот же тон, глубже: мелкий капс на светлом.
                             #6E8CA0 давал 3.55:1 — под солнцем не читалось */
  --attention: #A8452F;   /* терракота — только CTA */

  --tint:      rgba(110,140,160,.08);
  --tint-strong: rgba(110,140,160,.16);

  /* глубокий океанский — тёмная зона. И вода, и чернила. */
  --deep:      #0A1822;
  --deep-2:    #0D2130;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;  /* только курсив, редким акцентом */
  --sans:  "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* типографическая шкала — один ряд, шаг ~1.25, всё остальное ссылается сюда */
  --fs-xs:   13px;                       /* капс-метки, подписи на фото */
  --fs-sm:   16px;                       /* заметки, подписи, вторичное */
  --fs-base: 18px;                       /* основной текст */
  --fs-md:   20px;                       /* lead, h3, кнопки-окна */
  --fs-lg:   25px;                       /* заголовок шторки */
  --fs-xl:   clamp(32px, 6.4vw, 52px);   /* h2 */
  --fs-2xl:  clamp(44px, 10.5vw, 88px);  /* h1 */

  /* шкала отступов — единая для всего сайта */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --gap: 80px;            /* отступ между секциями, мобила */
  --pad: 20px;            /* боковые поля */
  --radius: 3px;
  --radius-field: 12px;   /* поля формы: мягче остального интерфейса */
  --radius-card: 16px;
  --radius-lg: 6px;       /* карточки/чром-рамки */
  --u: 7.4px;             /* размер-пикер: пикселей на сантиметр */

  --shadow-xs: 0 1px 2px rgba(20,22,26,.05);
  --shadow-sm: 0 6px 24px rgba(20,22,26,.08);

  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (min-width: 900px) {
  :root { --gap: 140px; --pad: 40px; --u: 11px; }
}

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

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

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 900px) { body { font-size: 19px; } }

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

a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); transition: text-decoration-color 160ms var(--ease); }
a:hover { text-decoration-color: var(--text); }

/* Гротеск в заголовках. Serif-курсив — только редким акцентом через .em */
h1, h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.03em; }

h1 {
  font-size: var(--fs-2xl);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-5);
}

h2 {
  font-size: var(--fs-xl);
  line-height: 1.05;
  margin: 0 0 var(--s-6);
}

/* один курсивный serif внутри заголовка — «бутик в клинике» */
.em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.h3 {
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: var(--s-7) 0 var(--s-3);
}

.h1--page { font-size: clamp(38px, 8.4vw, 64px); line-height: 1.04; }
.h3--flush { margin-top: 0; }

p { margin: 0 0 var(--s-5); max-width: 62ch; }
li p, .field p, blockquote p { max-width: none; }

.lead { font-size: var(--fs-md); line-height: 1.55; color: var(--text); }

.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s-4);
}

.note {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.note--center { text-align: center; margin-top: var(--s-4); }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.wrap--narrow { max-width: 680px; }

/* --gap — расстояние МЕЖДУ секциями. Соседние секции складывают свои отступы,
   поэтому каждая берёт половину: иначе между блоками выходило 160px вместо 80. */
.section { padding: calc(var(--gap) / 2) 0; }
.section--first { padding-top: var(--s-8); }
/* снимок в конце секции уже отбит своим полем */
.wrap > .case:last-child { margin-bottom: 0; }
.section--surface { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ---------- header / wordmark ---------- */
.site-header {
  position: relative;
  z-index: 20;
  padding: var(--s-5) var(--pad);
}

.wordmark { display: inline-block; text-decoration: none; line-height: 1; }
.wordmark__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
}
.wordmark__sub {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--muted);
  margin-top: 5px;
}

.site-header { border-bottom: 1px solid var(--border); }
.has-hero .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 0;
  color: #FFF;
}
.has-hero .site-header .wordmark { color: #FFF; }
.has-hero .site-header .wordmark__sub { color: rgba(255,255,255,.68); }

/* ---------- placeholders ---------- */
.ph {
  position: relative;
  background: #EAE2D6;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.ph::before {
  /* тонкая рамка-регистрация внутри — читается как макет, а не заглушка */
  content: "";
  position: absolute;
  inset: var(--s-3);
  border: 1px solid rgba(26,24,21,.09);
  pointer-events: none;
}
.ph::after {
  content: attr(data-ph);
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-3);
  right: var(--s-4);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26,24,21,.45);
}
/* ---------- светлые секции с фото на фоне ----------
   Фотография под плотной белой вуалью: даёт воздух и текстуру,
   но текст читается как на белом. */
.section--photo {
  position: relative;
  background: var(--bg) center/cover no-repeat;
  isolation: isolate;
}
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    #FFFFFF 0%,
    rgba(255,255,255,.90) 18%,
    rgba(255,255,255,.86) 50%,
    rgba(255,255,255,.90) 82%,
    #FFFFFF 100%);
}

/* мягкие края у вставленных фото — чтобы не было резкой границы с фоном */
.ph--accent {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

/* вертикальный кадр показываем целиком, без обрезки — просто ограничиваем ширину */
.ph--portrait {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.ph--accent {
  border: 0;
  border-radius: var(--radius-lg);
  margin-top: var(--s-7);
}
.ph--accent::before { display: none; }

/* ---------- тёмный верх → светлый низ ----------
   Метафора: чернила уходят, кожа очищается. Тёмная зона — «до»,
   белая — «после». Переход — чистый цвет, без фото поверх. */
/* Тёмная зона — ровный чернильный цвет во всю высоту. */
.fadezone {
  position: relative;
  background: var(--deep);
}

/* Градиентной полосы между тёмным блоком и снимком больше нет.
   Любая её длина читалась мутным огрызком, упирающимся в фотографию:
   переход теперь делает сам контраст — чернильное кончается, светлый кадр
   начинается. Резкая горизонталь здесь работает лучше любой растяжки. */
/* текстуры поверх нет: второе макро-фото кожи сразу за героем читалось
   как повтор той же фотографии. Тёмную зону держит только градиент. */
.fadezone > * { position: relative; z-index: 1; }

/* секции внутри зоны — прозрачные, фон даёт контейнер */
.tone-dark {
  background: transparent;
  color: rgba(255,255,255,.80);
  border-color: rgba(255,255,255,.12);
}
.tone-dark h2,
.tone-dark .lead,
.tone-dark strong { color: #FFF; }
.tone-dark .note { color: rgba(255,255,255,.52); }
.tone-dark a { color: #FFF; text-decoration-color: rgba(255,255,255,.45); }
.tone-dark .eyebrow { color: rgba(255,255,255,.55); }

.trustbar.tone-dark {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.trustbar.tone-dark .trustbar__list { color: rgba(255,255,255,.62); }
.trustbar.tone-dark .trustbar__list li + li::before { background: rgba(255,255,255,.16); }

/* полоса перехода: глубокая вода сверху, чистое снизу.
   Длинная и с частыми стопами — чтобы осветлялось незаметно, без ступеньки. */
/* здесь чернила уже ушли: вода и чистая кожа. Фотография занимает пустоту,
   которая раньше была просто градиентом, и растворяется краями в него же —
   сверху в тёмное, снизу в белое. Никаких фильтров, кадр видно целиком. */
/* снимок перехода теперь работает шапкой «How it works»: маски нет вообще,
   кадр виден целиком, снизу его закрывает затемнение под заголовок.
   Сам модификатор .panel--fit лежит ниже, рядом с .panel--head — иначе
   при равной специфичности его перебивает правило, объявленное позже. */
/* на широком экране cover резал бы портрет в тонкую полосу поперёк —
   поэтому кадр вписан по высоте и стоит по центру, а поля добирает градиент */
@media (min-width: 900px) {
  .clearing {
    aspect-ratio: auto;
    height: 78vh;
    background-size: auto 100%;
    background-position: center center;
  }
}

/* тонкая фото-полоса между смысловыми блоками, с растворяющимися краями */
.divider {
  height: 22vh;
  min-height: 150px;
  background: var(--bg) center 45%/cover no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 66%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 66%, transparent 100%);
}
@media (min-width: 900px) { .divider { height: 30vh; } }

/* ---------- карточки «что входит» ----------
   Вместо списка на пять абзацев — сетка коротких блоков. Метка капсом
   вместо иконки: клипарт правилами проекта запрещён, а якорь для глаза нужен. */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin: var(--s-6) 0 var(--s-5);
}
@media (min-width: 620px) { .cards { gap: var(--s-4); } }

.card {
  padding: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
@media (min-width: 620px) { .card { padding: var(--s-5); } }
.card__n {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.card__t {
  display: block;
  margin-bottom: var(--s-2);
  font-weight: 600;
  line-height: 1.35;
}
.card p {
  margin: 0;
  max-width: none;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
}
@media (min-width: 620px) { .card p { font-size: var(--fs-sm); line-height: 1.55; } }

/* снимок без обвязки: ни рамки, ни подписи — только кадр */
.ph--bare {
  margin: var(--s-7) 0;
  border: 0;
  border-radius: var(--radius);
}

/* схема внутри шторки: рисунок на белом, подпись под ним */
.diagram { margin: var(--s-6) 0; }
.diagram .ph { border: 1px solid var(--border); border-radius: var(--radius); }
.diagram figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- band: фотография во всю ширину между смысловыми блоками ----------
   Разбивает длинные текстовые перегоны. Без подписи: это атмосфера, а не кейс,
   подпись читалась бы как «вот результат». Пропорции задаются на месте,
   отдельно для телефона и десктопа. */
.band {
  aspect-ratio: var(--ar-m, 4 / 5);
  background: var(--surface) center/cover no-repeat;
}
@media (min-width: 900px) {
  .band { aspect-ratio: var(--ar-d, 16 / 9); max-height: 76vh; }
  /* вертикальный кадр на широком экране не растягиваем поперёк — вписываем по высоте */
  .band--upright { background-size: auto 100%; background-color: var(--deep); }
}

/* ---------- panel: фото на весь экран, белый текст поверх ---------- */
.panel {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 78vh;
  min-height: 78svh;
  padding: var(--s-9) 0;
  color: #FFF;
  background: #1A1D21;
  overflow: hidden;
}
/* снимок отдельным слоем, а не фоном самой панели: на десктопе он
   уезжает в свою колонку и показывается целиком */
.panel__media {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,10,12,.82) 0%, rgba(8,10,12,.45) 50%, rgba(8,10,12,.25) 100%);
}
.panel > .wrap { position: relative; z-index: 2; }
.panel h2 { color: #FFF; }
.panel p { color: rgba(255,255,255,.84); }
.panel .eyebrow { color: rgba(255,255,255,.6); }
.panel .lead { color: #FFF; }
.panel a { color: #FFF; text-decoration-color: rgba(255,255,255,.5); }
.panel .list li { color: rgba(255,255,255,.84); }
.panel .list strong { color: #FFF; }

/* заголовок секции живёт прямо на фотографии: снимок перестаёт быть
   вставкой «между» и становится шапкой блока */
.panel--head {
  min-height: 58vh;
  min-height: 58svh;
  align-items: flex-end;
  padding: 0;
}
.panel--head > .wrap { padding-top: var(--s-8); padding-bottom: var(--s-7); }
.panel--head h2 {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 15ch;
  text-shadow: 0 1px 24px rgba(8,10,12,.45);
}
/* затемнение снизу плотнее и выше — заголовок стоит на нём, а не на фактуре кожи */
.panel--head::after {
  background: linear-gradient(to top,
    rgba(8,10,12,.90) 0%, rgba(8,10,12,.72) 26%, rgba(8,10,12,.34) 55%, rgba(8,10,12,.10) 100%);
}
/* На десктопе полоса во всю ширину резала портретный снимок больше чем
   наполовину: 0.79 растягивалось в 2.3. Поэтому с 900px шапка распадается
   на две колонки — кадр в своих пропорциях слева, заголовок справа.
   На телефоне всё как было: снимок на весь блок, белый текст поверх. */
@media (min-width: 900px) {
  .section--panelled > .panel--head {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* заголовок стоит на нижней кромке снимка — как он стоит на телефоне,
       только рядом, а не поверх */
    align-items: end;
    gap: clamp(32px, 4.5vw, 72px);
    width: min(100%, 1120px);
    margin-inline: auto;
    padding: 0 var(--pad);
    background: none;
    overflow: visible;
  }
  .section--panelled > .panel--head > .panel__media {
    position: static;
    height: min(62vh, 600px);
    aspect-ratio: var(--panel-r, 3 / 4);
    width: auto;
    border-radius: var(--radius);
  }
  /* затемнение было нужно только под белым текстом на фотографии */
  .section--panelled > .panel--head::after { display: none; }
  .section--panelled > .panel--head > .wrap {
    padding: 0 0 clamp(6px, 1.4vw, 22px);
    max-width: none;
  }
  .section--panelled > .panel--head h2 {
    color: var(--text);
    text-shadow: none;
    max-width: 12ch;
  }
  /* шапка больше не полоса от края до края — секции нужен обычный отступ сверху */
  .section--panelled { padding-top: calc(var(--gap) / 2); }
  .section--panelled > .wrap { padding-top: var(--s-7); }
}

/* кадр перехода показываем в его собственных пропорциях — cover тогда
   ничего не срезает, и снимок виден ровно так, как снят */
.panel--fit {
  min-height: 0;
  aspect-ratio: 736 / 935;
}
@media (min-width: 900px) {
  .panel--fit { aspect-ratio: auto; }
}

/* у секции с фото-шапкой своего верхнего отступа быть не должно:
   его отдаёт wrap с содержимым, уже под снимком */
.section--panelled { padding-top: 0; }
.section--panelled > .wrap { padding-top: var(--gap); }
/* снимок подтягиваем к предыдущему блоку: две полные отбивки подряд давали провал */
.section:has(+ .section--panelled) { padding-bottom: var(--s-7); }
/* тёмный блок упирается прямо в снимок — своя отбивка ему тут не нужна */
.fadezone > .section:last-child { padding-bottom: var(--s-6); }
/* секция, которая кончается закрытой вкладкой, не нуждается в полной отбивке:
   вкладка и так читается как край блока */
.section:has(> .wrap > .more:last-child) { padding-bottom: var(--s-7); }

.ph[data-ph*="16:9"] { aspect-ratio: 16 / 9; }
.ph[data-ph*="4:5"]  { aspect-ratio: 4 / 5; }
.ph[data-ph*="3:2"]  { aspect-ratio: 3 / 2; }
.ph[data-ph*="1:1"]  { aspect-ratio: 1 / 1; }

/* ---------- window-chrome: обрамление для до/после и деталей кабинета ---------- */
.frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-size: var(--fs-sm);
  color: var(--muted);
  font-family: var(--sans);
}
.frame__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.frame__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}
.frame__title { flex: 1 1 auto; }
.frame .case__pair { border: 0; border-radius: 0; }
.frame .ph { border: 0; border-radius: 0; border-right: 1px solid var(--border); }
.frame .ph:last-child { border-right: 0; }

/* ---------- 2.1 Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 94vh;
  min-height: 94svh;
  color: #FFF;
  background: #0E1013;
  overflow: hidden;
}

.hero .hero__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  background: #1A1D21;
  border: 0;
  border-radius: 0;
}
.hero .hero__media::before { display: none; }
.hero .hero__media::after {
  color: rgba(255,255,255,.35);
  right: var(--s-5);
  bottom: var(--s-5);
  left: var(--s-5);
  text-align: right;
}

.hero__video { width: 100%; height: 100%; object-fit: cover; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8,16,22,.90) 0%, rgba(8,16,22,.58) 32%, rgba(8,16,22,.08) 62%, rgba(8,16,22,.20) 100%);
}

/* технические подписи по углам — как в studio1.04 / RUSHIE */
.hero__meta {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 90px var(--pad) 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  pointer-events: none;
}
@media (min-width: 900px) { .hero__meta { padding-top: 104px; } }

.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: var(--s-9);
  padding-bottom: var(--s-8);
  max-width: 760px;
}

.hero__sub {
  color: rgba(255,255,255,.82);
  max-width: 34em;
  margin-bottom: var(--s-6);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.hero__micro {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.62);
  margin: var(--s-5) 0 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 17px 26px;
  border: 0;
  border-radius: var(--radius-field);
  font: inherit;
  /* 20px разрывал «Send a photo → get your price» на две строки в колонке 335px */
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn--cta { background: var(--attention); color: #FFF; }
.btn--cta:hover { background: #92402C; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--cta:active { transform: translateY(0); box-shadow: none; }
.btn--full { display: block; width: 100%; margin-top: var(--s-6); }

/* ---------- 2.2 Trust bar ---------- */
.trustbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* На узком экране четыре пункта переносились по одному, и вертикальные
   разделители повисали слева у перенесённых — читалось как случайный мусор.
   Поэтому на мобиле это ровная сетка 2×2 без палок, а линии возвращаются
   только когда всё влезает в строку. */
.trustbar__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
  justify-items: center;
  text-align: center;
  list-style: none;
  margin: 0;
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.trustbar__list li { position: relative; padding: 0; }

@media (min-width: 760px) {
  .trustbar__list {
    display: flex;
    justify-content: center;
    gap: 0;
    font-size: 14px;
  }
  .trustbar__list li { padding: 0 var(--s-5); }
  .trustbar__list li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 1px;
    background: var(--border);
  }
}

/* ---------- 2.3 Before / After ---------- */
.case { margin: var(--s-7) 0 var(--s-6); }
.case:last-of-type { margin-bottom: var(--s-6); }
.case__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.case__tag {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  display: inline-block;
  padding: 4px 9px;
  background: rgba(26,24,21,.68);
  color: #FFF;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.frame figcaption.frame__bar {
  font-size: var(--fs-sm);
  color: var(--text);
}

/* ---------- галерея результатов ----------
   Листается пальцем, доказательство идёт сразу за героем.
   Нативная прокрутка со snap: ни библиотек, ни таймеров. */
/* Высота у всех слайдов одна — лента листается ровно. Ширина у каждого своя:
   --r в разметке это ширина/высота его пары, посчитанная из размеров файлов,
   поэтому ни один снимок не режется и полей вокруг него нет.
   Самая широкая пара в галерее — 1.65 (лотос, брови-полоски), и высота
   подобрана так, чтобы даже она укладывалась в экран целиком. Меняются
   кейсы — пересчитать 1.66 ниже по максимальному --r. */
.gallery {
  position: relative;
  margin: var(--s-6) 0 var(--s-5);
  --shot-h: min(250px, calc(100vw / 1.66));
}
@media (min-width: 700px)  { .gallery { --shot-h: 280px; } }
@media (min-width: 1100px) { .gallery { --shot-h: 380px; } }
.gallery__track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* кадры доезжают до самого края экрана, а не упираются в поле секции */
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad) var(--s-2);
}
.gallery__track::-webkit-scrollbar { display: none; }

.shot {
  flex: 0 0 auto;
  width: calc(var(--shot-h) * var(--r, 1.4));
  margin: 0;
  scroll-snap-align: center;
  /* кадры стоят на одной нижней линии, подписи — общей полосой под ними:
     слайды разной высоты иначе едут ступеньками */
  display: grid;
  grid-template-rows: 1fr auto;
}

.shot .ph {
  border: 0;
  border-radius: var(--radius-lg);
  /* фон под кадром чернильный, а не светлый: если где-то останется щель,
     она должна читаться как шов, а не как белый огрызок */
  background-color: #0A1822;
}
.shot .ph::before { display: none; }
.shot .ph::after  { display: none; }
.shot__media {
  align-self: end;
  width: 100%;
  height: var(--shot-h);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0A1822;
}
/* Пара делится по длинной стороне снимка: вертикальные кадры — по ширине,
   широкие (грудь, брови) — по высоте. Доли дорожек в разметке заданы
   по реальным пропорциям файлов, поэтому каждая половина видна целиком.
   Коллажей и вписанных кадров больше нет: белые поля читаются как брак. */
.shot__pair,
.shot__stack {
  display: grid;
  gap: 2px;
}
.shot__pair .ph,
.shot__stack .ph { border-radius: 0; aspect-ratio: auto; height: 100%; }

/* та же пара, но внутри оконной рамки на второй странице */
.framepair {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  aspect-ratio: 1 / 1;
}
.framepair .ph { border: 0; border-radius: 0; aspect-ratio: auto; height: 100%; }
.framepair .ph::before,
.framepair .ph::after { display: none; }
.shot__cap {
  margin-top: var(--s-3);
  /* место под две строки: подписи стоят одной полосой, а не вразнобой */
  min-height: 2.9em;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: rgba(255,255,255,.72);
}

/* Стрелки. На телефоне их нет — там свайп, и кнопка поверх кадра только мешает. */
.gallery__nav { display: none; }
@media (min-width: 700px) {
  .gallery__nav {
    position: absolute;
    top: calc(var(--shot-h) / 2);
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background: rgba(10,24,34,.66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: opacity 200ms var(--ease), background 200ms var(--ease);
  }
  .gallery__nav:hover { background: rgba(10,24,34,.92); }
  .gallery__nav[disabled] { opacity: 0; pointer-events: none; }
  .gallery__nav--prev { left: 10px; }
  .gallery__nav--next { right: 10px; }
  /* шеврон рисуется рамкой — никаких иконок в проекте нет */
  .gallery__nav span {
    width: 10px;
    height: 10px;
    border: solid rgba(255,255,255,.9);
    border-width: 0 1.5px 1.5px 0;
  }
  .gallery__nav--prev span { transform: rotate(135deg); margin-left: 3px; }
  .gallery__nav--next span { transform: rotate(-45deg); margin-right: 3px; }
}

.gallery__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: var(--s-4);
}
.gallery__dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.26);
  cursor: pointer;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.gallery__dots button.is-on { background: rgba(255,255,255,.92); transform: scale(1.25); }

/* ---------- съёмка сессии ----------
   Вертикальный кадр с телефона. На телефоне режем до 4:5 — иначе
   девять секунд занимают полтора экрана; на десктопе кадр остаётся
   вертикальным и встаёт рядом с подписью. */
.process {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-4);
}
.process__media {
  position: relative;
  /* кадр как снят, без обрезки: сверху уходила рука с перчаткой */
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,.06);
}
.process__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.process__text .eyebrow { color: rgba(255,255,255,.62); margin-bottom: var(--s-2); }
.process__text h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.process__text p {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.72);
}
@media (min-width: 700px) {
  .process {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-6);
    align-items: center;
    margin-top: var(--s-7);
  }
  /* на десктопе кадр не режем, но и не даём ему съесть весь экран */
  .process__media {
    aspect-ratio: 9 / 16;
    height: min(58vh, 520px);
    width: auto;
  }
  /* подпись не растягиваем на всю колонку — рядом с кадром это выноска,
     а не текстовый блок */
  .process__text { max-width: 34ch; }
  .process__text h3 { font-size: clamp(25px, 2.6vw, 32px); }
}

/* ссылка на страницу с подробностями — отбита от аккордеона, но не кнопка:
   это не призыв, а выход для тех, кто хочет копнуть */
.morelink {
  margin: var(--s-6) 0 0;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.4;
}
.morelink a { text-decoration-color: var(--accent); }

/* ---------- липкий призыв ----------
   Появляется, когда герой уехал, и уходит, когда форма на экране:
   висеть над формой ему незачем. */
.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: var(--s-3) var(--pad) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform 280ms var(--ease);
}
.stickybar.is-on { transform: translateY(0); }
.stickybar .btn {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 15px 24px;
  font-size: var(--fs-sm);
}
/* шторка перекрывает всё — панель под ней не нужна */
.sheet-open .stickybar { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) {
  .stickybar { transition: none; }
}

.mediarow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.mediapair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

/* ---------- 2.4 How it works ---------- */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: var(--s-2) 0 0;
  border-top: 1px solid var(--border);
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--border);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.step__body { display: block; }
.step__body > strong { display: block; margin-bottom: var(--s-1); font-weight: 600; }

.pull {
  margin: var(--s-6) 0 0;
  padding: var(--s-6);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-size: var(--fs-base);
}
.pull p:last-child { margin-bottom: 0; }
.pull strong { color: var(--text); }
.pull--big {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 4.6vw, 34px);
  line-height: 1.32;
  color: var(--text);
  background: none;
  border-left: 0;
  border-radius: 0;
  padding: 0;
  margin-top: var(--s-7);
  position: relative;
  padding-top: var(--s-6);
}
.pull--big::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--accent);
}

.list { margin: 0 0 var(--s-5); padding-left: var(--s-5); max-width: 62ch; }
.list li { margin-bottom: var(--s-2); }
.list--spaced li { margin-bottom: var(--s-4); }

/* ---------- 2.5 Pricing ---------- */
.price__card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 0 var(--s-5);
  box-shadow: var(--shadow-xs);
}
.price {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.price th, .price td {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-weight: 400;
}
.price tr:last-child th, .price tr:last-child td { border-bottom: 0; }
.price td {
  text-align: right;
  white-space: nowrap;
  padding-left: var(--s-4);
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price__quote {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* на мобиле цена уходит под название, а не жмёт его в колонку */
@media (max-width: 559px) {
  .price, .price tbody, .price tr, .price th, .price td { display: block; width: 100%; }
  .price tr { padding: var(--s-5) 0; border-bottom: 1px solid var(--border); }
  .price tr:last-child { border-bottom: 0; }
  .price th, .price td { padding: 0; border: 0; }
  .price td { text-align: left; margin-top: var(--s-2); font-size: 20px; }
}
.price__note,
.price__cm {
  display: block;
  font-size: 14px;
  color: var(--muted);
}
.price__cm { margin-top: var(--s-1); }

/* размер-пикер */
/* внутри окна-помощника рамка не нужна — она уже есть у окна */
.picker { padding: 0; border: 0; background: none; }
.more--picker .more__inner--flush { padding: var(--s-5) var(--s-4); }
.picker__hint { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-6); }

.picker__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 calc(var(--s-5) * -1);
  padding: var(--s-2) var(--s-5) var(--s-2);
  -webkit-overflow-scrolling: touch;
}
.picker__row {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  min-width: min-content;
}

.size {
  display: block;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}
.size__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  /* заливка холодной, рамка muted: на --border контраст был ~1.2:1 и квадраты
     просто не читались — над подписями зияла пустота */
  background: var(--surface);
  border: 1px solid var(--muted);
  border-radius: 2px;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.size__cap {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.size:hover .size__box { border-color: var(--accent); transform: translateY(-2px); }
.size.is-active .size__box { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.size.is-active .size__cap { color: var(--text); font-weight: 600; }
.size.is-active .size__icon { stroke: rgba(255,255,255,.85); }

.size__icon {
  width: 30px;
  height: auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.3;
  opacity: .8;
}
.size__icon--sheet { width: 26px; }

.picker__out {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  min-height: 88px;
}
.picker__placeholder { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.picker__label { margin: 0 0 var(--s-2); font-weight: 500; font-size: var(--fs-sm); color: var(--muted); }
.picker__price {
  font-family: var(--sans);
  font-size: clamp(30px, 8.5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0 0 var(--s-2);
}
.picker__meta { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
/* «per session» — своей строкой, иначе в узкой шторке отрывается одно слово */
.picker__price .picker__meta { display: block; margin-top: var(--s-1); }

/* ---------- 2.13 FAQ ---------- */
.acc { border-top: 1px solid var(--border); }
.acc__item { border-bottom: 1px solid var(--border); }

.acc__q,
.details__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.acc__q:hover, .details__toggle:hover { color: var(--accent); }

.acc__mark {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}
.acc__mark::before,
.acc__mark::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.acc__mark::before { top: 6px; left: 0; width: 13px; height: 1px; }
.acc__mark::after  { left: 6px; top: 0; width: 1px; height: 13px; }
[aria-expanded="true"] .acc__mark::after { transform: scaleY(0); opacity: 0; }

/* раскрытие через grid-template-rows: без layout thrash и без замеров в JS */
.acc__a,
.details__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--ease);
}
.acc__a > *,
.details__body > * { overflow: hidden; min-height: 0; }

.acc__q[aria-expanded="true"] + .acc__a,
.details__toggle[aria-expanded="true"] + .details__body { grid-template-rows: 1fr; }
/* без padding: у прямого grid-потомка он не схлопывается вместе с треком */
.acc__inner { padding: 0; }
.acc__inner p { font-size: var(--fs-base); color: var(--muted); max-width: 60ch; }
.acc__inner p:last-child { margin-bottom: var(--s-4); }

/* ---------- «читать дальше»: окно, которое открывается ----------
   Тот же оконный чром, что у до/после — мотив сайта. */
.more {
  margin-top: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  overflow: hidden;
}
.more__toggle {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4);
  border: 0;
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: background 160ms var(--ease);
}
.more__toggle:hover { background: #EEF1F3; }
.more__toggle .frame__title { flex: 1 1 auto; }

/* цветные точки — только на кликабельных окнах, чтобы читалось «это откроется».
   На фото-рамках точки остаются нейтральными. */
.more__toggle .frame__dots span:nth-child(1) { background: #E0705C; }
.more__toggle .frame__dots span:nth-child(2) { background: #E3B457; }
.more__toggle .frame__dots span:nth-child(3) { background: #64B489; }
.more__toggle .frame__dots span { width: 9px; height: 9px; }
.more__toggle .acc__mark { width: 11px; height: 11px; flex: 0 0 auto; }
.more__toggle .acc__mark::before { top: 5px; width: 11px; }
.more__toggle .acc__mark::after  { left: 5px; height: 11px; }

/* Содержимое живёт в DOM (для поиска и на случай выключенного JS),
   но при живом JS показывается только в шторке. */
.more__inner { padding: var(--s-5) var(--s-4); }
.js .more__body { display: none; }

/* ---------- шторка ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
}
.sheet.is-open { display: block; }

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,24,34,.45);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.sheet.is-in .sheet__backdrop { opacity: 1; }

.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -20px 60px rgba(10,24,34,.28);
  transform: translateY(101%);
  transition: transform 400ms var(--ease);
  will-change: transform;
}
.sheet.is-in .sheet__panel { transform: none; }
.sheet.is-dragging .sheet__panel { transition: none; }

.sheet__grab {
  flex: 0 0 auto;
  width: 38px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: var(--border);
}
.sheet__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-3);
}
.sheet__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.sheet__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 19px;
  line-height: 30px;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.sheet__close:hover { background: #E6EAEE; color: var(--text); }

.sheet__content {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--s-5) var(--s-8);
  overscroll-behavior: contain;
}
.sheet__content > :last-child { margin-bottom: 0; }
.sheet__content .price { width: 100%; }

body.sheet-open { overflow: hidden; }

/* на десктопе — не «снизу», а по центру, как диалог */
@media (min-width: 900px) {
  .sheet__panel {
    left: 50%;
    bottom: auto;
    top: 50%;
    right: auto;
    width: min(680px, calc(100vw - 80px));
    max-height: 82vh;
    border-radius: var(--radius-lg);
    transform: translate(-50%, -46%) scale(.98);
    opacity: 0;
    transition: transform 320ms var(--ease), opacity 320ms var(--ease);
  }
  .sheet.is-in .sheet__panel { transform: translate(-50%, -50%); opacity: 1; }
  .sheet__grab { display: none; }
  .sheet__head { padding-top: var(--s-5); }
}

/* внутри тёмной зоны окно тоже тёмное */
.tone-dark .more { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.tone-dark .more__toggle { background: rgba(255,255,255,.06); color: #FFF; }

/* ---------- 2.14 Форма ---------- */
.form {
  margin-top: var(--s-6);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s-6) var(--s-5);
  box-shadow: 0 1px 2px rgba(20,22,26,.03), 0 8px 28px rgba(20,22,26,.05);
}
@media (min-width: 560px) { .form { padding: var(--s-7); } }

.field { margin-bottom: var(--s-6); }
.field__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.field__meta { color: var(--muted); font-weight: 400; }
.field__hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0 0 var(--s-3);
}
.field__hint strong { color: var(--text); font-weight: 400; }

.input, .select {
  width: 100%;
  min-height: 54px;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  font: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  transition: background 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.input::placeholder { color: var(--muted); opacity: .8; }
.input:hover, .select:hover { border-color: #CFD6DD; }
.input:focus, .select:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--tint-strong);
}
.input--area { min-height: 108px; resize: vertical; }

/* родная стрелка селекта выглядит как системный виджет из нулевых */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23616873' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* аплоад фото — камера или галерея, в один тап */
.upload { position: relative; }
.upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.upload__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-7) var(--s-4);
  background: var(--tint);
  border: 1.5px dashed #C6D0D8;
  border-radius: var(--radius-card);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.upload__label:hover { border-color: var(--accent); background: var(--tint-strong); color: var(--text); }
.upload__input:focus-visible + .upload__label {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--tint-strong);
}
.upload__icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: .75;
}

.row { display: flex; flex-direction: column; gap: var(--s-2); }
@media (min-width: 560px) {
  .row { flex-direction: row; }
  .select { flex: 0 0 150px; }
}
.select--full { width: 100%; }

.previews {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.previews:empty { margin-top: 0; }
.preview {
  position: relative;
  width: 84px;
  height: 84px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview__x {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 0;
  border: 0;
  background: rgba(20,22,26,.78);
  color: #FFF;
  font: inherit;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
}

.err {
  display: none;
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--attention);
}
.err.is-on { display: block; }
/* ошибка не про поле, а про всю отправку — стоит над кнопкой и отбита */
.err--form {
  margin: 0 0 var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius-field);
  background: rgba(168,69,47,.07);
  line-height: 1.45;
}
.input.is-bad, .select.is-bad, .upload__label.is-bad {
  border-color: var(--attention);
  border-style: solid;
  box-shadow: 0 0 0 4px rgba(168,69,47,.10);
}

.details { margin: var(--s-2) 0 var(--s-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.details__inner { padding: 0; }

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

/* ---------- 2.15 Footer ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  /* снизу запас под липкую кнопку — иначе она накрывает последнюю строку */
  padding: var(--s-8) 0 calc(var(--s-8) + 56px);
  text-align: center;
}
.wordmark--footer { margin: 0 0 var(--s-6); display: inline-block; }
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--muted);
}
.footer__list li { margin: 0; }
.footer__links { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.footer__links--plain { margin-top: var(--s-6); padding-top: 0; border-top: 0; text-align: left; }

/* ---------- финальный CTA ---------- */
.closer {
  text-align: center;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.closer .lead { margin-left: auto; margin-right: auto; }
.closer .btn { margin-top: var(--s-4); }

/* ---------- thank-you ---------- */
.thanks { min-height: 55vh; display: flex; align-items: center; }
.thanks .wrap--narrow { width: 100%; }

/* ---------- анимация ---------- */
.js .fade {
  opacity: 0;
  transform: translateY(18px);
}
.js .fade.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fade { opacity: 1; transform: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- ?edit=1 — личный инструмент, не для посетителей ---------- */
.ph--filled { background-size: cover; background-position: center; }
.ph--filled::after, .ph--filled::before { display: none; }

.ph__edit {
  position: absolute;
  z-index: 5;
  right: 8px;
  top: 8px;
  padding: 5px 10px;
  background: var(--attention);
  color: #fff;
  border: 0;
  border-radius: 2px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.editmodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,9,7,.88);
  padding: 16px;
}
.editmodal.is-open { display: flex; }
.editmodal__box { background: var(--surface); border-radius: 6px; padding: 16px; max-width: 100%; }
.editmodal__stage { position: relative; background: #000; border-radius: 4px; overflow: hidden; touch-action: none; cursor: grab; margin: 0 auto 12px; }
.editmodal__stage canvas { display: block; width: 100%; height: 100%; }
.editmodal__row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.editmodal__row input { flex: 1; }
.editmodal__actions { display: flex; gap: 10px; }
.editmodal__actions button {
  flex: 1;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.editmodal__cancel { background: var(--bg); color: var(--text); border-color: var(--border); }
.editmodal__apply { background: var(--attention); color: #fff; }

.edittray {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 190;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  max-height: 40vh;
  overflow-y: auto;
}
.edittray__title { font-weight: 600; width: 100%; }
.edittray__item, .edittray__all {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.edittray__all { background: var(--attention); color: #fff; border: 0; }