/* =========================================================================
   FLIP&STAGE — основная таблица стилей (вариант codex-ds)
   Токены и правила пользования ими — DESIGN_TOKENS.md в корне проекта.
   Палитра и шрифт в DESIGN_CONCEPT.md §1 устарели, действуют значения ниже.
   Классы — семантические компонентные (БЭМ). Единственное исключение —
   утилиты отступов .u-mt-* / .u-mb-* / .u-pt-0 в конце файла, только со значениями шкалы.
   ========================================================================= */

/* ---------- 1. Токены ---------- */
:root {
  /* Цвет: тёплая палитра (вариант Codex, 2026-09-29). Единственное место, где заданы цвета. */
  --bg-cream: #eee9e2;
  --bg-card: #faf8f4;
  --bg-white: #fff;               /* белые карточки на тёплом фоне */
  --bg-paper: #f5f1eb;            /* тёплая бумага: подложки справочных блоков */
  --bg-inverse: #241d1a;
  --bg-stage: #211b18;            /* основа под видео первого экрана */
  --text-graphite: #25211f;
  --text-soft: #4a433e;           /* вторичный текст на светлом, мягче основного */
  --text-muted: #655f59;
  --text-on-inverse: #f3eee8;
  --text-on-inverse-muted: rgb(243 238 232 / .68);
  --paper: #fffaf4;               /* светлый текст и линии на фото и тёмном */
  --accent-maroon: #89412f;
  --accent-maroon-hover: #6f3326;
  --accent-maroon-8: rgb(137 65 47 / .09);
  --accent-light: #e2ad94;        /* акцент на тёмном фоне */
  --wood-oak: #b87a59;
  --wood-walnut: #78513f;
  --sand: #d8c3ae;
  --line-hairline: #d8cec3;
  --surface-error: #8e1f1f;
  --overlay-photo: rgb(22 17 15 / .72);
  --overlay-photo-soft: rgb(22 17 15 / .28);

  /* Каналы RGB для полупрозрачных оттенков: rgb(var(--ink-rgb) / .5) */
  --ink-rgb: 20 15 14;            /* затемнения поверх фото и видео */
  --paper-rgb: 255 250 244;       /* светлый текст и линии на тёмном */
  --graphite-rgb: 37 33 31;
  --cream-rgb: 238 233 226;
  --maroon-rgb: 137 65 47;
  --walnut-rgb: 120 81 63;
  --card-rgb: 250 248 244;
  --shadow-rgb: 35 28 24;

  /* Скругления */
  --radius-xs: 2px;               /* полосы, мелкие метки */
  --radius-sm: 3px;               /* фото и карточки */
  --radius-md: 6px;               /* кнопки, панели */
  --radius-lg: 12px;              /* карточки объектов, окна видео */
  --radius-xl: 18px;              /* обложки видео */
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Тени: уровни высоты */
  --shadow-card: 0 1px 2px rgb(var(--shadow-rgb) / .05);
  --shadow-1: 0 8px 20px rgb(var(--shadow-rgb) / .16);
  --shadow-2: 0 24px 50px rgb(var(--shadow-rgb) / .2);
  --shadow-3: 0 40px 70px rgb(var(--shadow-rgb) / .16);
  --shadow-4: 0 50px 90px rgb(var(--shadow-rgb) / .3);
  --shadow-accent: 0 12px 26px rgb(92 42 30 / .28);         /* тёплое свечение главной кнопки */
  --shadow-accent-hover: 0 16px 32px rgb(92 42 30 / .34);

  /* Отступы */
  --space-0-5: 4px;
  --space-1: 8px;
  --space-1-5: 12px;
  --space-2: 16px;
  --space-2-5: 20px;
  --space-3: 24px;
  --space-3-5: 32px;
  --space-4: 40px;
  --space-4-5: 48px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 160px;

  /* Шрифты. Art direction 2026-09-11: Serif + Grotesk. */
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Размеры шрифта: статичная шкала */
  --fs-2xs: 11px;                 /* надзаголовки капсом, микроподписи */
  --fs-xs: 12px;
  --fs-sm: 13px;                  /* подписи */
  --fs-md: 14px;
  --fs-ui: 15px;                  /* кнопки, навигация */
  --fs-body: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 22px;
  --fs-3xl: 26px;
  --fs-4xl: 32px;
  /* Размеры шрифта: резиновые */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-lead-serif: clamp(22px, 2vw, 28px);            /* вводный абзац с засечками */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
  --fs-page-title: clamp(28px, 3.5vw, 48px);          /* заголовок служебной страницы (калькулятор) */
  --fs-h1: clamp(2.125rem, 1.6rem + 2.4vw, 4.5rem);
  --fs-title: clamp(24px, 2.2vw, 31px);               /* крупный заголовок карточки */
  --fs-stat: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);  /* цифры в строке статистики */
  --fs-figure: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);   /* итог расчёта */
  --fs-display: clamp(43px, 5.1vw, 78px);              /* заголовок первого экрана */
  --fs-hero-lead: clamp(15px, 1.3vw, 18px);

  --container-max: 1280px;
  --header-h: 88px;
  --header-h-scrolled: 64px;
  --header-h-mobile: 64px;

  /* Движение */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;              /* нажатие, цвет, мелкие состояния */
  --dur-base: 250ms;              /* обычные переходы интерфейса */
  --dur-slow: 500ms;              /* фото при наведении */
  --dur-reveal: 900ms;            /* появление при прокрутке */
}
/* Точки адаптива (в медиазапросах переменные не работают, поэтому только эти значения):
   375 — маленький телефон, 430 — телефон, 767/768 — граница телефона, 1023/1024 — граница планшета. */
@media (max-width: 767px) { :root { --fs-display: clamp(37px, 10vw, 54px); } }

/* ---------- 2. Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--text-graphite);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- 3. Grid / container (DESIGN_CONCEPT §1.2) ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4-5);
}
@media (max-width: 1023px) {
  .container { padding: 0 var(--space-3-5); }
}
@media (max-width: 430px) {
  .container { padding: 0 var(--space-2-5); }
}
@media (max-width: 375px) {
  .container { padding: 0 var(--space-2); }
}

.section { padding: var(--space-4) 0; }
@media (min-width: 1024px) {
  .section { padding: var(--space-5) 0; }
}
.section--card { background: var(--bg-card); }
.section--inverse { background: var(--bg-inverse); color: var(--text-on-inverse); }
.section--tight { padding: var(--space-3) 0; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-2);
}
.section--inverse .eyebrow { color: var(--text-on-inverse-muted); }

/* ---------- 4. Typography scale (DESIGN_CONCEPT §1.4) ---------- */
h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.05;
  font-size: var(--fs-h1);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.12;
  font-size: var(--fs-h2);
  letter-spacing: -0.005em;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.2;
  font-size: var(--fs-h3);
}
.body-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-graphite); }
.text-muted { color: var(--text-muted); }
.caption { font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: 0.01em; }
.stat-number {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-stat);
  color: var(--accent-maroon);
  line-height: 1;
}
.max-measure { max-width: 640px; }

/* ---------- 5. Buttons (DESIGN_CONCEPT §1.7) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  min-height: 48px;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent-maroon); color: var(--bg-cream); }
.btn--primary:hover { background: var(--accent-maroon-hover); }
.btn--ghost { background: transparent; border-color: rgb(var(--paper-rgb) / 0.55); color: var(--bg-cream); }
.btn--ghost:hover { background: rgb(var(--paper-rgb) / 0.1); border-color: rgb(var(--paper-rgb) / 0.9); }
.btn--block { width: 100%; }
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 767px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent-maroon);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.text-link:hover { border-color: var(--accent-maroon); }

/* ---------- 6. Header (DESIGN_CONCEPT §2) ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }

/* transparent-on-hero variant */
.site-header[data-transparent="true"] { background: transparent; color: var(--bg-cream); }
.site-header[data-transparent="true"] .nav-link { color: var(--bg-cream); }
.site-header[data-transparent="true"].is-scrolled {
  background: var(--bg-card);
  color: var(--text-graphite);
  border-bottom-color: var(--line-hairline);
  height: var(--header-h-scrolled);
}
.site-header[data-transparent="true"].is-scrolled .nav-link { color: var(--text-graphite); }
.site-header[data-transparent="true"].is-scrolled .logo { color: var(--text-graphite); }

/* solid variant (non-hero pages) */
.site-header[data-transparent="false"] {
  background: var(--bg-card);
  border-bottom-color: var(--line-hairline);
  height: var(--header-h-scrolled);
}

@media (max-width: 767px) {
  .site-header, .site-header[data-transparent="false"], .site-header[data-transparent="true"].is-scrolled {
    height: var(--header-h-mobile);
  }
}

.logo {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-2xl);
  letter-spacing: -0.01em;
}

.nav-desktop { display: flex; align-items: center; gap: var(--space-4); }
.nav-links { display: flex; align-items: center; gap: var(--space-3); }
.nav-link {
  font-size: var(--fs-ui);
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { border-bottom-color: currentColor; }

@media (max-width: 1023px) {
  .nav-desktop { display: none; }
}

/* mobile controls */
.header-mobile-controls { display: none; align-items: center; gap: var(--space-2); }
@media (max-width: 1023px) {
  .header-mobile-controls { display: flex; }
}
.btn--compact {
  padding: 10px var(--space-2);
  min-height: 40px;
  font-size: var(--fs-sm);
}
.menu-trigger {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 0;
}
.menu-trigger span {
  width: 22px;
  height: 1.5px;
  background: currentColor;
  display: block;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.menu-trigger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-trigger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-trigger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- 7. Mobile fullscreen menu (DESIGN_CONCEPT §2.2) ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg-cream);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 0 20px var(--space-4);
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; transform: scale(1); pointer-events: auto; }
.mobile-menu__top {
  height: var(--header-h-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu__close {
  width: 40px; height: 40px;
  background: transparent; border: none;
  font-size: var(--fs-3xl); color: var(--text-graphite);
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); overflow-y: auto; }
.mobile-menu__cta { margin-bottom: var(--space-2); }
.mobile-menu__links { display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-menu__links a { font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: 500; }
.mobile-menu__contacts {
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-ui);
}
.mobile-menu__contacts a { color: var(--text-graphite); font-weight: 600; }

/* ---------- 8. Hero (DESIGN_CONCEPT §3A) ---------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--bg-cream);
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / .48) 0%, transparent 26%, transparent 42%, var(--overlay-photo-soft) 60%, var(--overlay-photo) 100%);
  pointer-events: none;
}
.hero__content { position: relative; z-index: 1; padding: var(--space-6) 0 var(--space-5); max-width: 680px; }
.hero__subtitle { margin: var(--space-2) 0 var(--space-4); color: rgb(var(--paper-rgb) / 0.92); }
@media (max-width: 767px) {
  .hero { min-height: calc(100svh - var(--header-h-mobile)); align-items: flex-end; }
  .hero__content { padding: var(--space-4) 0 var(--space-4); }
}

/* compact hero (service / project / listing pages) */
.hero--compact { min-height: 46vh; }
/* Невысокий герой держит текст по центру по вертикали — то есть ровно в
   прозрачной полосе базового градиента, из-за чего заголовок сливался с
   фотографией. Даём такому герою собственный скрим: плотнее слева, где
   стоит текст, и мягче справа, чтобы снимок оставался виден. */
.hero--compact::after {
  background:linear-gradient(180deg, rgb(var(--ink-rgb) / .52) 0%, rgb(var(--ink-rgb) / .34) 46%, rgb(var(--ink-rgb) / .46) 100%),
    linear-gradient(90deg, rgb(var(--ink-rgb) / .46) 0%, rgb(var(--ink-rgb) / .12) 62%, rgb(var(--ink-rgb) / 0) 100%);
}
@media (max-width: 767px) {
  .hero--compact { min-height: 40vh; }
  /* На узком экране текст занимает всю ширину — боковой градиент не нужен. */
  .hero--compact::after {
    background: linear-gradient(180deg, rgb(var(--ink-rgb) / .54) 0%, rgb(var(--ink-rgb) / .40) 50%, rgb(var(--ink-rgb) / .52) 100%);
  }
  /* Хедер прозрачный и висит поверх: отводим заголовку место под ним,
     иначе H1 подпирает логотип. */
  .hero--compact .hero__content { padding-top: calc(var(--header-h-mobile) + var(--space-3)); }
}
.hero--page {
  min-height: auto;
  padding: calc(var(--header-h-scrolled) + var(--space-5)) 0 var(--space-5);
  align-items: flex-start;
  color: var(--text-graphite);
  background: var(--bg-card);
}
.hero--page::after { display: none; }
@media (max-width: 767px) {
  .hero--page { padding-top: calc(var(--header-h-mobile) + var(--space-3)); }
}

/* ---------- 9. Stat row (§3B) ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.stat-row__item { border-top: 1px solid var(--line-hairline); padding-top: var(--space-2); }
.stat-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-2); }
  .stat-row--3 > :last-child { grid-column: 1 / -1; }
}

/* ---------- 10. Process line (§3C / §3G) ---------- */
.process-line { position: relative; }
.process-line__fill {
  position: absolute;
  top: -1px; left: 0; height: 1px;
  width: 100%;
  background: var(--wood-oak);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-reveal) var(--ease-out);
}
.process-line__fill.is-filled { transform: scaleX(1); }
.process-step__num { font-family: var(--font-serif); color: var(--wood-walnut); font-size: var(--fs-2xl); margin-bottom: var(--space-1); }
.process-step__title { font-weight: 600; margin-bottom: var(--space-0-5); }
.process-step__desc { font-size: var(--fs-md); color: var(--text-muted); }

/* vertical process (services / about) */

/* horizontal process (компактнее, не растягивает страницу вниз) */
.process-horizontal { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.process-horizontal .process-col { border-top: 2px solid var(--line-hairline); padding-top: var(--space-2); }
.process-horizontal .process-step__num { font-family: var(--font-serif); color: var(--accent-maroon); font-size: var(--fs-3xl); margin-bottom: 10px; }
.process-horizontal .process-step__title { font-weight: 600; margin-bottom: 6px; }
.process-horizontal .process-step__desc { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); }
@media (max-width: 1023px) { .process-horizontal { grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-2); } }
@media (max-width: 767px) { .process-horizontal { grid-template-columns: repeat(2, 1fr); } }

/* horizontal process, interactive: все шаги и описания видны одновременно в ряд,
   клик/hover только подсвечивает выбранный шаг — ничего не скрывается */
.process-horizontal--interactive .process-col {
  cursor: pointer; border-top-width: 2px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.process-horizontal--interactive .process-col .process-step__num,
.process-horizontal--interactive .process-col .process-step__title {
  transition: color var(--dur-base) var(--ease-out);
}
.process-horizontal--interactive .process-col.is-active { border-top-color: var(--accent-maroon); }
.process-horizontal--interactive .process-col.is-active .process-step__num,
.process-horizontal--interactive .process-col.is-active .process-step__title { color: var(--accent-maroon); }
@media (hover: hover) and (pointer: fine) {
  .process-horizontal--interactive .process-col:hover { border-top-color: var(--wood-walnut); }
}

/* ---------- 11. Portfolio grid — asymmetric (§3D / §4) ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}
.pf-card { position: relative; display: block; overflow: hidden; }
.pf-card__frame { position: relative; overflow: hidden; background: var(--line-hairline); }
.pf-card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.pf-card__overlay {
  position: absolute; inset: 0;
  background: var(--overlay-photo-soft);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: var(--space-2);
}
/* Наведение — только для мыши: на телефоне тап «залипал» затемнением. */
@media (hover: hover) and (pointer: fine) {
  .pf-card:hover .pf-card__overlay { opacity: 1; }
  .pf-card:hover .pf-card__frame img { transform: scale(1.03); }
}
/* Отклик на нажатие — на рамке, а не на самой карточке: у карточки свой
   transition для появления при прокрутке (data-reveal), его нельзя перебить. */
.pf-card__frame, .pf-feature__frame { transition: transform var(--dur-fast) var(--ease-out); }
.pf-card:active .pf-card__frame, .pf-feature:active .pf-feature__frame { transform: scale(0.985); }
.pf-card__arrow {
  color: var(--bg-cream);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  display: flex; align-items: center; gap: 6px;
}
.pf-card__meta { padding-top: var(--space-1); font-size: var(--fs-md); color: var(--text-muted); }
.pf-card__meta strong { color: var(--text-graphite); font-weight: 600; }

/* homepage witryna: 5 cards asymmetric */
.pf-card--tall { grid-column: span 5; }
.pf-card--tall .pf-card__frame { aspect-ratio: 3 / 4; }

/* Полный список объектов: ритм с широкой карточкой. Раньше широкой была
   каждая третья — на 20 объектов это семь баннеров подряд и очень длинная
   страница. Теперь каждая пятая: ритм сохраняется, длина меньше. */
.pf-grid-full { grid-template-columns: repeat(12, 1fr); }
.pf-grid-full .pf-card { grid-column: span 4; }
.pf-grid-full .pf-card:nth-child(5n+1) { grid-column: span 12; }
.pf-grid-full .pf-card:nth-child(5n+1) .pf-card__frame { aspect-ratio: 21 / 9; }
.pf-grid-full .pf-card:not(:nth-child(5n+1)) .pf-card__frame { aspect-ratio: 4 / 5; }

@media (max-width: 1023px) {
  .pf-grid-full .pf-card { grid-column: span 6; }
}

@media (max-width: 767px) {
  /* Две колонки вместо одной: 20 объектов перестают быть бесконечной лентой,
     страница становится короче примерно вчетверо. */
  .portfolio-grid, .pf-grid-full { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .pf-card--tall,
.pf-grid-full .pf-card { grid-column: span 1; }
  .pf-grid-full .pf-card:nth-child(5n+1) { grid-column: span 2; }
  .pf-card--tall .pf-card__frame,
.pf-grid-full .pf-card .pf-card__frame { aspect-ratio: 4 / 5; }
  .pf-grid-full .pf-card:nth-child(5n+1) .pf-card__frame { aspect-ratio: 3 / 2; }
  .pf-card__meta { font-size: var(--fs-sm); line-height: 1.4; }
}

/* ---------- 12. Services row (§3F / §6) ---------- */
.service-featured {
  position: relative;
  display: block;
  margin-bottom: var(--space-3);
  color: var(--bg-cream);
}
.service-featured__frame { aspect-ratio: 16 / 8; overflow: hidden; background: var(--line-hairline); }
.service-featured__frame img { width: 100%; height: 100%; object-fit: cover; }
.service-featured__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-3);
}
.service-featured::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--overlay-photo) 0%, transparent 60%);
}
.service-featured__content > * { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .service-featured__frame { aspect-ratio: 4 / 5; }
}

/* service-grid: крупные плитки с текстом поверх изображения */
/* Сетка на 6 колонок: обычная плитка занимает 2 (три в ряд). Если плиток пять,
   последние две растягиваем на 3 колонки — иначе в конце висит пустая ячейка. */
.service-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.service-tile { grid-column: span 2; }
.service-tile:nth-child(4):nth-last-child(2),
.service-tile:nth-child(5):nth-last-child(1) { grid-column: span 3; aspect-ratio: 16 / 10; }
.service-tile {
  /* 4:5, а не 3:4 — горизонтальные кадры съёмки режутся мягче, и ряд плиток
     получается ниже, то есть страница компактнее. */
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; background: var(--line-hairline);
  box-shadow: 0 0 0 rgb(var(--shadow-rgb) / 0);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.service-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.service-tile__overlay {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-3); background: linear-gradient(180deg, transparent 38%, rgb(var(--ink-rgb) / .82) 100%);
}
.service-tile__overlay h3 { color: var(--paper); }
.service-tile__overlay p { color: rgb(var(--paper-rgb) / .85); font-size: var(--fs-md); line-height: 1.5; margin: 6px 0 10px; }
.service-tile__overlay .text-link { color: var(--paper); border-color: rgb(var(--paper-rgb) / .5); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .service-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }
  .service-tile:hover img { transform: scale(1.06); }
  .service-tile:hover .text-link { transform: translateX(4px); }
}
@media (max-width: 1023px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-tile,
  .service-tile:nth-child(4):nth-last-child(2),
  .service-tile:nth-child(5):nth-last-child(1) { grid-column: auto; aspect-ratio: 4 / 5; }
}
@media (max-width: 767px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-tile,
  .service-tile:nth-child(4):nth-last-child(2),
  .service-tile:nth-child(5):nth-last-child(1) { grid-column: auto; aspect-ratio: 4 / 3; }
}

/* ---------- 13. Cards (generic content) ---------- */

/* ---------- 14. FAQ accordion (§8.2) ---------- */
.faq-item { border-top: 1px solid var(--line-hairline); }
.faq-item:last-child { border-bottom: 1px solid var(--line-hairline); }
.faq-item__q {
  width: 100%;
  background: transparent; border: none; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body); font-weight: 500; color: var(--text-graphite);
}
.faq-item__icon { color: var(--accent-maroon); font-size: var(--fs-lg); font-weight: 400; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.faq-item[data-open="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item__a {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-out);
}
.faq-item__a-inner { padding: 0 0 var(--space-2); font-size: var(--fs-ui); line-height: 1.55; color: var(--text-muted); max-width: 720px; }

.faq-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.faq-grid-2col .faq-item__a-inner { max-width: none; }
@media (max-width: 767px) {
  .faq-grid-2col { grid-template-columns: 1fr; }
}

/* ---------- 15. Forms (§1.9) ---------- */

/* ---------- 16. Footer (§10) ---------- */
.site-footer { background: var(--bg-inverse); color: var(--text-on-inverse); padding: var(--space-5) 0 var(--space-3); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); padding-bottom: var(--space-4); }
/* Заголовки колонок подвала — h2 для ровной иерархии; вид прежнего h4 */
.footer-col__title { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-inverse-muted); margin: 0 0 var(--space-2); }
.footer-col a, .footer-col span { display: block; padding: 6px 0; color: var(--text-on-inverse); font-size: var(--fs-ui); }
.footer-col a:hover { color: var(--wood-oak); }
.footer-brand .logo { color: var(--text-on-inverse); }
.footer-brand p { color: var(--text-on-inverse-muted); margin-top: var(--space-2); font-size: var(--fs-md); max-width: 280px; }
.footer-legal {
  border-top: 1px solid rgb(var(--paper-rgb) / 0.14);
  padding-top: var(--space-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--text-on-inverse-muted);
}
.footer-legal a { color: var(--text-on-inverse-muted); border-bottom: 1px solid transparent; }
.footer-legal a:hover { border-color: currentColor; }
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-2); }
  .footer-brand { grid-column: span 2; }
  .footer-legal { flex-direction: column; }
}

/* ---------- 17. Project page (§5) ---------- */
.project-hero { min-height: 80vh; }
@media (max-width: 767px) { .project-hero { min-height: 64vh; } }
.meta-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.meta-table__item { border-top: 1px solid var(--line-hairline); padding-top: 10px; }
.meta-table__item span { display: block; }
.meta-table__item .caption { margin-bottom: var(--space-0-5); }

.narrative { max-width: 640px; }
.narrative p { margin-bottom: var(--space-2); }
.narrative ul { margin: var(--space-2) 0; }
.narrative li { position: relative; padding-left: 18px; margin-bottom: var(--space-1); color: var(--text-graphite); }
.narrative li::before { content: "—"; position: absolute; left: 0; color: var(--wood-walnut); }

/* Перечни длиннее пяти пунктов: две колонки, волосяная линия только сверху
   строки (а не сверху и снизу каждой) — иначе список читается как таблица. */
.spec-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-4);
  margin: var(--space-3) 0 0; padding: 0; list-style: none;
}
.spec-list li {
  padding: 14px 0; border-top: 1px solid var(--line-hairline);
  color: var(--text-graphite); position: static;
}
.spec-list li::before { content: none; }

/* Очень длинные перечни разбиваем на смысловые группы. */
.spec-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-3); }
.spec-groups__title { font-family: var(--font-serif); font-size: var(--fs-body); margin: 0 0 6px; }
.spec-groups .spec-list { grid-template-columns: 1fr; }

@media (max-width: 1023px) { .spec-groups { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .spec-list { grid-template-columns: 1fr; } }

.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}
.gallery__item { grid-column: span 3; overflow: hidden; background: var(--line-hairline); cursor: zoom-in; }
.gallery__item--wide { grid-column: span 6; aspect-ratio: 16 / 9; }
.gallery__item:not(.gallery__item--wide) { aspect-ratio: 4 / 5; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__item, .gallery__item--wide { grid-column: span 1; aspect-ratio: 4 / 5; }
}

/* single-frame carousel: один кадр за раз, стрелки вперёд/назад, без обрезки */
.frame-carousel { max-width: 760px; margin: 0 auto; }
.frame-carousel__stage {
  position: relative; aspect-ratio: 1191 / 842; background: var(--bg-cream);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-3);
}
.frame-carousel__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.frame-carousel__img.is-active { opacity: 1; }
.frame-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: var(--radius-round); border: none; cursor: pointer;
  background: rgb(var(--paper-rgb) / .92); color: var(--text-graphite); font-size: var(--fs-2xl); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.frame-carousel__arrow--prev { left: 14px; }
.frame-carousel__arrow--next { right: 14px; }
@media (hover: hover) and (pointer: fine) {
  .frame-carousel__arrow:hover { background: var(--bg-white); transform: translateY(-50%) scale(1.06); }
}
.frame-carousel__meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; gap: var(--space-2); }
.frame-carousel__label { font-size: var(--fs-md); color: var(--text-muted); }
.frame-carousel__counter { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
@media (max-width: 767px) {
  .frame-carousel__arrow { width: 36px; height: 36px; font-size: var(--fs-lg); }
  .frame-carousel__arrow--prev { left: 8px; }
  .frame-carousel__arrow--next { right: 8px; }
}

.next-project {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-4);
  border-top: 1px solid var(--line-hairline); padding-top: var(--space-5);
}
.next-project__frame { aspect-ratio: 4 / 3; overflow: hidden; }
.next-project__frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .next-project { grid-template-columns: 1fr; } }

/* ---------- 18. Lightbox ---------- */
/* Открытие — затухание фона, закрытие быстрее открытия. visibility держит
   слой вне табуляции, пока он закрыт. */
.lightbox {
  position: fixed; inset: 0; background: var(--bg-inverse);
  z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out), visibility 0s; }
.lightbox__img {
  max-width: 90vw; max-height: 78vh; object-fit: contain;
  transition: opacity var(--dur-fast) var(--ease-out);
  touch-action: pan-y;
}
/* Пока грузится следующее фото, текущее приглушено — видно, что нажатие принято. */
.lightbox__img.is-loading { opacity: .35; }
.lightbox__counter { color: var(--text-on-inverse-muted); font-size: var(--fs-md); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; border: none; color: var(--text-on-inverse);
  width: 48px; height: 48px; border-radius: var(--radius-round); padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-3xl); line-height: 1;
  background: rgb(var(--paper-rgb) / .08);
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgb(var(--paper-rgb) / .18); }
}
.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) {
  /* На телефоне стрелки уходят вниз, под большой палец, и не закрывают снимок. */
  .lightbox__prev, .lightbox__next { top: auto; bottom: 20px; transform: none; }
  .lightbox__prev { left: calc(50% - 72px); }
  .lightbox__next { right: calc(50% - 72px); }
  .lightbox__counter { margin-top: var(--space-3); margin-bottom: 72px; }
  .lightbox__img { max-width: 100vw; }
}
.gallery__item:focus-visible { outline-offset: 2px; }

/* ---------- 19. Reveal-on-scroll (§13) ----------
   Контент виден по умолчанию: без JavaScript, при ошибке скрипта и при
   prefers-reduced-motion. Прячет блок только класс js-reveal на <html> — его
   ставит скрипт в <head> и сам же снимает через 3 с, если main.js не запустил
   появление (window.fsRevealReady). Видимое состояние записано с той же
   специфичностью (0,2,0), что прежний [data-reveal].is-visible, — вёрстка
   видимых блоков не меняется. */
[data-reveal][data-reveal] { opacity: 1; transform: translateY(0); }
[data-reveal] {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js-reveal [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .js-reveal [data-reveal]:not(.is-visible) { opacity: 1; transform: none; transition: none; }
}

/* ---------- 20. Misc ---------- */
.section-head { margin-bottom: var(--space-4); }
.section-head--flex { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.disclaimer { font-size: var(--fs-sm); color: var(--text-muted); max-width: 520px; }
.callout {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-md); color: var(--text-muted); max-width: 520px;
}
.callout__icon { color: var(--wood-walnut); flex-shrink: 0; }

.calc-preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.calc-preview__figure {
  background: var(--bg-cream);
  border: 1px solid var(--line-hairline);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}
.calc-preview__figure .stat-number { display: block; font-size: var(--fs-figure); }
@media (max-width: 1023px) {
  .calc-preview { grid-template-columns: 1fr; gap: var(--space-3); }
}

.remote-block { max-width: 720px; }
.remote-block blockquote {
  margin: var(--space-3) 0 0; padding-left: var(--space-2);
  border-left: 2px solid var(--wood-oak);
  font-style: normal; color: var(--text-graphite);
}
.remote-block cite { display: block; margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--text-muted); font-style: normal; }

.final-cta { text-align: center; }
.final-cta h2 { margin-bottom: var(--space-3); }
.final-cta .btn-row { justify-content: center; }

/* =========================================================================
   24. CALCULATOR — CALCULATOR_SPEC.md / CALCULATOR_UX.md / CALCULATOR_DESIGN.md
   ========================================================================= */
.calc { display: flex; min-height: 100svh; }
.calc__photo {
  display: none; position: relative; flex: 0 0 50%;
  background-size: cover; background-position: center;
}
.calc__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / .32) 0%, transparent 30%);
}
.calc__panel {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--header-h) + var(--space-4)) var(--space-3) var(--space-4);
  min-height: 100svh;
}
@media (min-width: 1024px) {
  .calc__photo { display: block; }
  .calc__panel { padding: var(--space-4); }
}

.calc-card { width: 100%; max-width: 480px; }

.calc-progress { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); min-height: 24px; }
.calc-progress__back {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-muted); font-size: var(--fs-md); font-family: var(--font-sans);
  display: flex; align-items: center; gap: var(--space-0-5);
  transition: color var(--dur-fast) var(--ease-out);
}
.calc-progress__back:hover { color: var(--text-graphite); }
.calc-progress__back[hidden] { visibility: hidden; }
.calc-progress__count { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.calc-progress__count b { color: var(--accent-maroon); font-weight: 600; }
.calc-progress__track { position: relative; height: 1px; background: var(--line-hairline); margin-top: var(--space-2); }
.calc-progress__fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent-maroon); width: 0%; transition: width var(--dur-base) var(--ease-out); }

.calc-step { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.calc-step.is-leaving-back { opacity: 0; transform: translateX(16px); }
.calc-step.is-leaving-fwd { opacity: 0; transform: translateX(-16px); }
.calc-step__q { margin-bottom: var(--space-3); }

.calc-options { display: flex; flex-direction: column; gap: var(--space-1); }
.calc-option {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--line-hairline); border-radius: var(--radius-md);
  padding: 14px var(--space-2); min-height: 56px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.calc-option__title { display: block; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body); color: var(--text-graphite); transition: color var(--dur-fast) var(--ease-out); }
.calc-option__desc { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; line-height: 1.4; transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .calc-option:hover { border-color: var(--accent-maroon-8); background: var(--accent-maroon-8); }
}
.calc-option:active { background: var(--accent-maroon-8); }
.calc-option.is-selected { background: var(--accent-maroon); border-color: var(--accent-maroon); }
.calc-option.is-selected .calc-option__title { color: var(--bg-card); }
.calc-option.is-selected .calc-option__desc { color: rgb(var(--paper-rgb) / .78); }
.calc-option__hint { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; }

.calc-field { margin-top: var(--space-1); }
.calc-field__input {
  width: 100%; font-family: var(--font-serif); font-size: var(--fs-3xl); color: var(--text-graphite);
  background: transparent; border: none; border-bottom: 1px solid var(--line-hairline);
  padding: 10px 2px; transition: border-color var(--dur-fast) var(--ease-out);
}
.calc-field__input:focus { outline: none; border-color: var(--accent-maroon); }
.calc-field__hint { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-1); }
.calc-field__type-hint { font-size: var(--fs-md); color: var(--accent-maroon); margin-top: var(--space-2); min-height: 20px; }

.calc-actions { margin-top: var(--space-4); }
.calc-actions .btn:disabled { background: var(--line-hairline); color: var(--text-muted); cursor: not-allowed; }

.calc-result__label { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.calc-result__total { font-family: var(--font-serif); font-size: var(--fs-figure); color: var(--accent-maroon); margin: 10px 0 var(--space-3); }
.calc-result__hr { border: none; border-top: 1px solid var(--line-hairline); margin: var(--space-3) 0; }
.calc-result__row { padding: var(--space-2) 0; border-top: 1px solid var(--line-hairline); }
.calc-result__row:last-of-type { border-bottom: 1px solid var(--line-hairline); }
.calc-result__row-label { font-size: var(--fs-md); color: var(--text-graphite); }
.calc-result__tag { font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-left: 6px; }
.calc-result__row-value { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--text-graphite); margin-top: var(--space-0-5); }
.calc-result__note { display: flex; gap: var(--space-1); font-size: var(--fs-sm); color: var(--text-muted); margin: var(--space-3) 0; line-height: 1.5; }
.calc-result__note-icon { flex-shrink: 0; color: var(--wood-walnut); }
.calc-result__disclaimer { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-bottom: var(--space-3); }

.calc-contact-summary { background: var(--accent-maroon-8); border-radius: var(--radius-md); padding: var(--space-2); margin-bottom: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
.calc-contact-summary b { color: var(--text-graphite); font-family: var(--font-serif); font-size: var(--fs-body); display: block; margin-top: 2px; }
.calc-form-field { margin-bottom: var(--space-3); }
.calc-form-field label { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 6px; }
.calc-form-field input[type="text"], .calc-form-field input[type="tel"] {
  width: 100%; font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-graphite);
  background: transparent; border: none; border-bottom: 1px solid var(--line-hairline);
  padding: var(--space-1) 2px; transition: border-color var(--dur-fast) var(--ease-out);
}
.calc-form-field input:focus { outline: none; border-color: var(--accent-maroon); }
.calc-consent { display: flex; gap: 10px; align-items: flex-start; margin: var(--space-3) 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.calc-consent input { margin-top: 3px; accent-color: var(--accent-maroon); }
.calc-consent a { color: var(--accent-maroon); border-bottom: 1px solid var(--accent-maroon); }
.calc-success { text-align: center; padding: var(--space-4) 0; }
.calc-success__icon { font-size: var(--fs-4xl); color: var(--accent-maroon); margin-bottom: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .calc-step { transition: none !important; }
}

/* =========================================================================
   21. HERO VIDEO — art direction утверждён 2026-09-11:
   Serif+Grotesk / cream / burgundy / video-first / layered photography /
   editorial asymmetry / premium radii+shadow / restrained cinematic motion.
   Продакшн-версия — без плашек и переключателей, которые были только
   в design-exploration/concept-final.html.
   ========================================================================= */
#heroCta {
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-accent);
}
#heroCta:hover { box-shadow: var(--shadow-accent-hover); }


/* =========================================================================
   22. PORTFOLIO v2 — крупный ведущий объект + layered detail + вторичный ряд
   разных пропорций. Не сетка из одинаковых карточек.
   ========================================================================= */
.pf-feature { position: relative; display: block; }
.pf-feature__frame { position: relative; aspect-ratio: 16 / 11; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-3); background: var(--line-hairline); }
.pf-feature__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.pf-feature__detail {
  position: absolute; left: -6%; bottom: -14%; width: 30%; aspect-ratio: 4/5; z-index: 3;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-3); transform: rotate(-3deg);
  transition: transform var(--dur-slow) var(--ease-out);
}
.pf-feature__detail img { width: 100%; height: 100%; object-fit: cover; }
.pf-feature__meta { margin-top: var(--space-3); padding-left: 26%; }
.pf-feature__overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--space-2);
  background: linear-gradient(0deg, rgb(var(--ink-rgb) / .32) 0%, transparent 45%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.pf-feature__arrow { color: var(--text-on-inverse); font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: 6px; }
@media (hover: hover) and (pointer: fine) {
  .pf-feature:hover .pf-feature__frame img { filter: brightness(.95); }
  .pf-feature:hover .pf-feature__detail { transform: rotate(-1deg) translateY(-4px); }
  .pf-feature:hover .pf-feature__overlay { opacity: 1; }
}

.pf-secondary { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-3); margin-top: var(--space-6); }
.pf-secondary .pf-card { grid-column: span 4; align-self: start; }
.pf-secondary .pf-card:nth-child(2) { margin-top: 56px; }
.pf-secondary .pf-card:nth-child(3) { margin-top: var(--space-2-5); }
.pf-secondary .pf-card .pf-card__frame { border-radius: var(--radius-lg); }
.pf-secondary .pf-card:nth-child(1) .pf-card__frame { aspect-ratio: 3/4; }
.pf-secondary .pf-card:nth-child(2) .pf-card__frame { aspect-ratio: 1/1; }
.pf-secondary .pf-card:nth-child(3) .pf-card__frame { aspect-ratio: 3/4; }

@media (max-width: 1023px) {
  .pf-feature__detail { width: 38%; left: -5%; bottom: -10%; }
  .pf-feature__meta { padding-left: 0; }
}
@media (max-width: 767px) {
  .pf-feature__frame { aspect-ratio: 4/5; border-radius: var(--radius-lg); }
  .pf-feature__detail { display: none; }
  .pf-feature__meta { padding-left: 0; }
  .pf-secondary { grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }
  .pf-secondary .pf-card { grid-column: span 1; margin-top: 0 !important; }
}

/* =========================================================================
   23. DESIGN-PROJECT TEASER — «физический альбом»: коллаж + реальные листы
   стопкой позади, лёгкая глубина, hover/detail interaction.
   ========================================================================= */
.dp-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.dp-teaser__text { max-width: 460px; }
.dp-teaser__badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--walnut, var(--wood-walnut)); margin-bottom: 18px; }
.dp-teaser__badge svg { flex-shrink: 0; }

.dp-stack { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.dp-sheet {
  position: absolute; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-white);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.dp-sheet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-sheet--back-1 { width: 78%; aspect-ratio: 1191/842; right: -6%; top: 6%; z-index: 1; transform: rotate(6deg); filter: saturate(.92); }
.dp-sheet--back-2 { width: 74%; aspect-ratio: 1191/842; left: -4%; bottom: 2%; z-index: 1; transform: rotate(-5deg); filter: saturate(.92); }
.dp-sheet--main { position: relative; width: 100%; aspect-ratio: 1191/842; z-index: 2; transform: rotate(-1deg); box-shadow: var(--shadow-3); }
/* Подпись живёт под стопкой листов, а не плашкой поверх фотографии. */
.dp-stack__caption {
  position: relative; z-index: 3; margin: 18px 0 0; text-align: center;
  font-size: var(--fs-sm); color: var(--text-muted);
}
@media (hover: hover) and (pointer: fine) {
  .dp-stack:hover .dp-sheet--back-1 { transform: rotate(9deg) translate(6px,-4px); }
  .dp-stack:hover .dp-sheet--back-2 { transform: rotate(-8deg) translate(-6px,4px); }
  .dp-stack:hover .dp-sheet--main { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-4); }
}

@media (max-width: 1023px) {
  .dp-teaser { grid-template-columns: 1fr; gap: var(--space-4); }
  .dp-teaser__text { order: 2; max-width: none; }
  .dp-stack { order: 1; max-width: 480px; }
}
@media (max-width: 767px) {
  .dp-sheet--back-1, .dp-sheet--back-2 { display: none; }
  .dp-sheet--main { transform: none; box-shadow: var(--shadow-2); }
  .dp-stack:hover .dp-sheet--main { transform: none; }
}

/* =========================================================================
   25. ДОСТУПНОСТЬ И РИТМ ТЕКСТА (визуальная доработка 2026-09-29)
   ========================================================================= */
/* Видимый фокус только для клавиатуры: мышь и тап его не показывают. */
:focus-visible { outline: 2px solid var(--accent-maroon); outline-offset: 3px; }
.hero :focus-visible,
.section--inverse :focus-visible,
.site-footer :focus-visible,
.lightbox :focus-visible,
.video-dialog :focus-visible,
.service-featured:focus-visible,
.service-tile:focus-visible,
.site-header[data-transparent="true"]:not(.is-scrolled) :focus-visible { outline-color: var(--bg-cream); }

/* Читаемость текста поверх видео главной. В кадре светлые подушки, стена и
   чашка — ровно там, где стоят заголовок и подзаголовок, а средняя полоса
   прежнего скрима была затемнена всего на 8–10%. Добавлен градиент со
   стороны текста (десктоп) и более плотный низ (телефон, текст во всю ширину). */

/* Подзаголовки внутри длинного текста (ошибки инвестора, истории кейсов)
   стояли вплотную к предыдущему абзацу. Инлайн-отступы на других страницах
   сильнее этого правила и не меняются. */
.narrative h3 { margin: var(--space-4) 0 var(--space-1); }
.narrative > h3:first-child { margin-top: 0; }

/* =========================================================================
   26. ВИДЕО ОБЪЕКТОВ — метка на карточках, обложка на странице кейса,
   кнопка в карточках удалённых кейсов, общий просмотрщик.
   ========================================================================= */
/* Метка «Видео»: видно заранее, у каких объектов есть видеообзор. */
.pf-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px var(--space-1); border-radius: var(--radius-pill);
  background: rgb(var(--ink-rgb) / .62); color: var(--bg-cream);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; line-height: 1.2;
  pointer-events: none;
}
.pf-badge svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Обложка видео на странице кейса. Размер кадра зарезервирован (16:9),
   поэтому страница не прыгает, пока грузится постер. */
.video-cover-wrap { max-width: 1100px; }
.video-cover {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 16 / 9; border-radius: var(--radius-xl); overflow: hidden;
  background: rgb(var(--ink-rgb)); color: var(--bg-cream); text-align: left;
  box-shadow: var(--shadow-3);
  transition: transform var(--dur-fast) var(--ease-out);
}
.video-cover:active { transform: scale(0.99); }
.video-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.video-cover__shade {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgb(var(--ink-rgb) / .62) 0%, rgb(var(--ink-rgb) / .12) 42%, rgb(var(--ink-rgb) / .10) 100%);
}
.video-cover__play {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: var(--radius-round); background: rgb(var(--paper-rgb) / .94); color: var(--accent-maroon);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.video-cover__play svg { width: 30px; height: 30px; margin-left: var(--space-0-5); }
.video-cover__meta {
  position: absolute; left: var(--space-3); bottom: var(--space-3); right: var(--space-3);
  display: flex; align-items: baseline; gap: var(--space-1-5); flex-wrap: wrap;
  font-size: var(--fs-body); font-weight: 600;
}
.video-cover__meta span:last-child { font-weight: 500; color: rgb(var(--paper-rgb) / .82); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .video-cover:hover img { transform: scale(1.02); }
  .video-cover:hover .video-cover__play { transform: scale(1.06); background: var(--bg-white); }
}
@media (max-width: 767px) {
  .video-cover { border-radius: var(--radius-lg); }
  .video-cover__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .video-cover__play svg { width: 24px; height: 24px; margin-left: 3px; }
  .video-cover__meta { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); font-size: var(--fs-md); }
}

/* Кнопка видео в карточке удалённого кейса — открывает просмотр сразу,
   без перехода на страницу объекта. */
.video-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--space-2); padding: 6px var(--space-2) 6px 6px; min-height: 44px;
  border: 1px solid var(--line-hairline); border-radius: var(--radius-pill);
  background: var(--bg-card); color: var(--text-graphite);
  font-size: var(--fs-md); font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.video-link:active { transform: scale(0.97); }
.video-link__icon {
  width: 32px; height: 32px; border-radius: var(--radius-round); flex-shrink: 0;
  background: var(--accent-maroon); color: var(--bg-cream);
  display: flex; align-items: center; justify-content: center;
}
.video-link__icon svg { width: 12px; height: 12px; margin-left: 2px; }
.video-link__dur { color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .video-link:hover { border-color: var(--accent-maroon); }
}

/* Просмотрщик: один <dialog> на страницу. Модальное окно не привязано к
   кнопке, поэтому масштабируется от центра. Открытие 250 мс, закрытие 180 мс. */
.video-dialog {
  width: min(1200px, calc(100vw - 32px), calc((100svh - 120px) * 16 / 9));
  max-width: none; max-height: none; padding: 0; border: 0; overflow: visible;
  background: transparent; color: var(--text-on-inverse);
  opacity: 1; transform: scale(1);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.video-dialog::backdrop { background: rgb(var(--ink-rgb) / .9); opacity: 1; transition: opacity var(--dur-base) var(--ease-out); }
@starting-style {
  .video-dialog[open] { opacity: 0; transform: scale(0.96); }
  .video-dialog[open]::backdrop { opacity: 0; }
}
.video-dialog.is-closing { opacity: 0; transform: scale(0.98); transition-duration: var(--dur-fast); }
.video-dialog.is-closing::backdrop { opacity: 0; transition-duration: var(--dur-fast); }
.video-dialog__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-1-5); }
.video-dialog__title { font-family: var(--font-serif); font-size: var(--fs-lead); line-height: 1.3; }
.video-dialog__close {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-round); border: none;
  background: rgb(var(--paper-rgb) / .12); color: var(--text-on-inverse); font-size: var(--fs-xl); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.video-dialog__close:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .video-dialog__close:hover { background: rgb(var(--paper-rgb) / .22); }
}
.video-dialog__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: rgb(var(--ink-rgb)); border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: reduce) {
  /* Без масштаба: остаётся только затухание. */
  .video-dialog, .video-dialog.is-closing { transform: none; }
  @starting-style { .video-dialog[open] { transform: none; } }
}

/* Остановка фонового видео на главной (WCAG 2.2.2): видео крутится дольше
   5 секунд, у посетителя должна быть возможность его остановить. */
.video-toggle {
  position: absolute; right: 24px; bottom: 24px; z-index: 3;
  width: 44px; height: 44px; border-radius: var(--radius-round);
  border: 1px solid rgb(var(--paper-rgb) / .45); background: rgb(var(--ink-rgb) / .34); color: var(--bg-cream);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.video-toggle:active { transform: scale(0.95); }
.video-toggle svg { width: 16px; height: 16px; }
.video-toggle .icon-play { margin-left: 2px; }
.video-toggle[data-state="playing"] .icon-play,
.video-toggle[data-state="paused"] .icon-pause { display: none; }
@media (hover: hover) and (pointer: fine) {
  .video-toggle:hover { background: rgb(var(--ink-rgb) / .55); }
}
@media (max-width: 767px) {
  .video-toggle { right: 16px; bottom: 16px; }
}

/* ---------- Модификаторы и утилиты дизайн-системы (вместо стилей в HTML) ---------- */
.eyebrow--on-dark { color: rgb(var(--paper-rgb) / .85); }
.text-link:active { color: var(--accent-maroon-hover); }
.text-link--on-dark { color: var(--paper); border-color: rgb(var(--paper-rgb) / .5); }
.text-link--on-dark:hover { border-color: var(--paper); }
.text-link--on-dark:active { color: rgb(var(--paper-rgb) / .8); }
.service-featured__title { color: var(--paper); }
.service-featured__text { color: rgb(var(--paper-rgb) / .9); max-width: 520px; margin: var(--space-1) 0 var(--space-2); }
.dp-teaser__lead { max-width: 420px; margin: 18px 0 28px; }   /* вне сетки — как было, см. DESIGN_TOKENS.md */
.final-cta__lead { color: var(--text-on-inverse-muted); max-width: 520px; margin: var(--space-2) auto var(--space-3-5); }
.measure-wide { max-width: 760px; }
.page-offset { padding-top: calc(var(--header-h-scrolled) + var(--space-5)); }
/* Отступы-утилиты: только значения шкалы --space-*. !important — намеренно:
   утилита заменяет стиль из HTML и должна побеждать правила компонентов, как он. */
.u-mt-1 { margin-top: var(--space-1) !important; }
.u-mt-1-5 { margin-top: var(--space-1-5) !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-3-5 { margin-top: var(--space-3-5) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-4-5 { margin-top: var(--space-4-5) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-pt-0 { padding-top: 0 !important; }

/* ---------- Форма заявки: ошибки видны после первой попытки ввода ---------- */
.calc-form-field input:user-invalid,
.calc-form-field input[aria-invalid="true"] { border-color: var(--surface-error); }
.calc-consent input:user-invalid + span { color: var(--surface-error); }

/* Текст только для программ чтения с экрана */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Ссылка «Перейти к содержимому»: видна только при фокусе с клавиатуры ---------- */
.skip-link { position: absolute; left: var(--space-2); top: -100px; z-index: 400; padding: 10px var(--space-2); background: var(--bg-inverse); color: var(--text-on-inverse); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.skip-link:focus { top: var(--space-2); }
main:focus { outline: none; }

/* ---------- Юридические документы (/privacy/, /soglasie/) ---------- */
.legal-doc h2 { margin: var(--space-5) 0 var(--space-2); }
.legal-doc ul { margin: 0 0 var(--space-2); }
.legal-doc a { overflow-wrap: anywhere; }

/* ---------- Плашка о cookie (assets/js/analytics.js) ---------- */
.cookie-banner {
  position: fixed; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); z-index: 150;
  max-width: 600px; margin: 0 auto; padding: var(--space-2) var(--space-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  background: var(--bg-inverse); color: var(--text-on-inverse); border-radius: var(--radius-md); box-shadow: var(--shadow-3);
  font-size: var(--fs-sm); line-height: 1.5;
}
.cookie-banner p { flex: 1 1 280px; margin: 0; }
.cookie-banner a { color: inherit; border-bottom: 1px solid currentColor; }
.cookie-banner__actions { display: flex; gap: var(--space-1); }
@media (max-width: 767px) {
  .cookie-banner { padding: var(--space-2); }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; }
}

/* ---------- Подпись под кнопкой заявки ---------- */
.calc-consent-note { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.calc-consent-note a { color: var(--accent-maroon); border-bottom: 1px solid var(--accent-maroon); }