@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Playfair+Display:wght@400;500;600&display=swap');
/* ============================================================
   apex — editorial research-product system (v8)
   Палитра: bone → paper → graphite. Типографика: Tinos + Inter + JetBrains Mono.
   Сетка: editorial, asymmetric. Ритм секций: 120px (desktop) / 70px (mobile).
   ============================================================ */

:root {
  --bone:    #F5F4F0;
  --paper:   #FAF8F3;
  --graphite:#14161A;
  --ink:     #1A1A1A;
  --ink-soft:#4A4A48;
  --ink-mute:#8A8A86;
  --rule:    #D9D5C8;
  --rule-dim:#E7E3D6;
  --accent:  #A98C5F;
  --good:    #4A7C59;
  --bad:     #B0413E;

  --serif: "Tinos", "Times New Roman", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --max: 1320px;
  --gutter: 6vw;
  --pad-section: 120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "kern", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a  { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }

::selection { background: var(--accent); color: var(--paper); }

/* ============================================================
   ТИПОГРАФИКА — display, mono labels, цитаты
   ============================================================ */

.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.display-1 { font-size: clamp(40px, 5.6vw, 84px); }
.display-2 { font-size: clamp(32px, 3.8vw, 56px); }
.display-3 { font-size: clamp(24px, 2.6vw, 36px); }

.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mono-label .num {
  color: var(--accent);
  margin-right: 8px;
}

.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}

.body-rich p { color: var(--ink-soft); max-width: 60ch; }
.body-rich p + p { margin-top: 14px; }

.pull-quote {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.28;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 24px;
  max-width: 32ch;
}
.pull-quote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* ============================================================
   HEADER — минимальный editorial
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 244, 240, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.logo .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 3px;
}
.logo .mark {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 14px;
  border-left: 1px solid var(--rule);
  padding-left: 14px;
}
.nav {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.nav a {
  position: relative;
  padding: 4px 0;
  transition: color .2s ease;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.lang {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink);
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}

/* ============================================================
   NAV DROPDOWN — «Продукты для ▾» с тёмным меню как в футере
   ============================================================ */

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px 0;
  position: relative;
  transition: color .2s ease;
  user-select: none;
}
.nav-trigger::after {
  content: ''; position: absolute; left: 0; right: 16px; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-dropdown:hover .nav-trigger,
.nav-dropdown:focus-within .nav-trigger,
.nav-dropdown.active .nav-trigger { color: var(--ink); }
.nav-dropdown:hover .nav-trigger::after,
.nav-dropdown:focus-within .nav-trigger::after,
.nav-dropdown.active .nav-trigger::after { transform: scaleX(1); }

.nav-caret {
  display: inline-block;
  font-size: 10px;
  opacity: 0.55;
  transition: transform .25s ease, opacity .2s ease;
  margin-left: 2px;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
  transform: rotate(-180deg);
  opacity: 1;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--graphite);
  color: rgba(245,244,240,0.85);
  padding: 26px 30px 28px;
  min-width: 264px;
  border: 1px solid rgba(245,244,240,0.08);
  box-shadow: 0 24px 50px rgba(20,22,26,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1);
  z-index: 90;
}
/* «мостик» между триггером и меню — чтобы курсор не «срывался» */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.5);
  margin: 0 0 18px;
}
.nav-dropdown-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-dropdown-menu li {
  margin: 0;
  padding: 0;
}
.nav-dropdown-menu li + li { margin-top: 2px; }
.nav-dropdown-menu a {
  display: block;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(245,244,240,0.85);
  border-bottom: 1px solid rgba(245,244,240,0);
  transition: color .2s ease, padding-left .25s ease, border-color .25s ease;
}
.nav-dropdown-menu a:hover {
  color: var(--paper);
  padding-left: 10px;
  border-bottom-color: rgba(169,140,95,0.4);
}
.nav-dropdown-menu a.current {
  color: var(--accent);
}

/* На мобильных дропдаун не критичен — nav скрыта */
@media (max-width: 760px) {
  .nav-dropdown-menu { display: none; }
}

/* ============================================================
   SECTION SYSTEM — ритм bone → paper → graphite
   ============================================================ */

.section {
  padding: var(--pad-section) var(--gutter);
  border-top: 1px solid var(--rule);
  position: relative;
}
.section:first-of-type { border-top: 0; }
.section.paper    { background: var(--paper); }
.section.graphite { background: var(--graphite); color: rgba(245,244,240,0.92); border-top-color: var(--graphite); }
.section.graphite .mono-label { color: rgba(245,244,240,0.55); }
.section.graphite .mono-label .num { color: var(--accent); }
.section.graphite .lead { color: rgba(245,244,240,0.74); }
.section.graphite .pull-quote { color: rgba(245,244,240,0.95); }
.section.graphite .pull-quote cite { color: rgba(245,244,240,0.55); }

.container { max-width: var(--max); margin: 0 auto; }

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 64px;
}
.section-head .lead { margin-top: 18px; }

/* ============================================================
   HERO — split: manifest слева, cinemagraph справа
   ============================================================ */

.hero {
  padding: 64px var(--gutter) 96px;
  border-bottom: 1px solid var(--rule);
}
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 540px;
}
.hero-text .mono-label { margin-bottom: 28px; }
.hero-text .display-1 {
  margin-bottom: 28px;
  max-width: 14ch;
}
.hero-text .lead { max-width: 46ch; }
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero-proofs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}
.hero-proofs .proof {
  padding-right: 18px;
  border-right: 1px solid var(--rule-dim);
}
.hero-proofs .proof:last-child { border-right: 0; padding-right: 0; }
.proof .num {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.proof .txt {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 22ch;
}

.hero-media {
  position: relative;
  background: var(--graphite);
  overflow: hidden;
  min-height: 560px;
  border: 1px solid var(--rule);
}
.hero-media video, .hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 28s ease-in-out infinite alternate;
}
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20,22,26,0.55) 100%);
  pointer-events: none;
}
.hero-media .caption {
  position: absolute;
  left: 20px; bottom: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.85);
  z-index: 2;
}
@keyframes kenburns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}

/* ============================================================
   HERO-FULL — full-bleed видео с текстом поверх (Space Architects-стиль)
   ============================================================ */

.hero-full {
  position: relative;
  height: 88vh;
  min-height: 640px;
  max-height: 880px;
  overflow: hidden;
  background: var(--graphite);
  margin: 0;
  border-bottom: 1px solid var(--rule);
}
.hero-full video,
.hero-full .hf-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: kenburns 32s ease-in-out infinite alternate;
}
.hero-full .hf-overlay {
  position: absolute; inset: -25% 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,22,26,0.55) 0%, rgba(20,22,26,0.20) 22%, rgba(20,22,26,0.10) 42%),
    linear-gradient(0deg,   rgba(20,22,26,0.78) 0%, rgba(20,22,26,0.42) 38%, rgba(20,22,26,0.20) 72%),
    rgba(20,22,26,0.42);
  pointer-events: none;
}
.hero-full .hf-grid {
  position: relative; z-index: 2;
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--gutter) 56px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  color: var(--paper);
}
.hero-full .hf-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.78);
}
.hero-full .hf-kicker .num { color: var(--accent); margin-right: 8px; }

.hero-full .hf-title {
  align-self: center;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(48px, 7.2vw, 112px);
  color: var(--paper);
  max-width: 16ch;
  text-shadow: 0 2px 24px rgba(20,22,26,0.25);
}

.hero-full .hf-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: end;
}
.hero-full .hf-bottom-l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.62);
  align-self: end;
}
.hero-full .hf-bottom-r {
  justify-self: end;
  text-align: left;
  max-width: 38ch;
}
.hero-full .hf-lead {
  color: rgba(245,244,240,0.9);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.hero-full .hf-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.hero-full .hf-actions .btn {
  border-color: rgba(245,244,240,0.7);
  color: var(--paper);
  background: transparent;
}
.hero-full .hf-actions .btn:hover {
  border-color: var(--paper);
  background: rgba(245,244,240,0.08);
}
.hero-full .hf-actions .btn.primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.hero-full .hf-actions .btn.primary:hover { background: var(--bone); }

@media (max-width: 760px) {
  .hero-full { height: auto; min-height: 78vh; }
  .hero-full .hf-grid { padding: 36px var(--gutter) 36px; gap: 36px; }
  .hero-full .hf-title { font-size: clamp(36px, 12vw, 56px); max-width: none; }
  .hero-full .hf-bottom { justify-content: flex-start; }
  .hero-full .hf-bottom-r { justify-self: start; max-width: none; }
}

/* ============================================================
   PROOF-STRIP — полоса 3 цифр под hero
   ============================================================ */

.proof-strip {
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
  padding: 36px var(--gutter);
}
.proof-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  align-items: start;
}
.proof-strip .ps-item .ps-num {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.proof-strip .ps-item .ps-num .suff {
  font-size: 0.55em;
  color: var(--accent);
  margin-left: 4px;
}
.proof-strip .ps-item .ps-txt {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 28ch;
}
@media (max-width: 760px) {
  .proof-strip .container { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   BUTTONS — editorial, прозрачные
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 13px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: 100px;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--ink);
  color: var(--paper);
}
.btn.primary:hover { background: var(--graphite); }
.btn .arrow {
  font-family: var(--serif);
  font-size: 16px;
  transition: transform .22s ease;
}
.btn:hover .arrow { transform: translateX(3px); }
.btn.ghost { border-color: var(--rule); color: var(--ink-soft); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.section.graphite .btn { border-color: rgba(245,244,240,0.4); color: rgba(245,244,240,0.92); }
.section.graphite .btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ============================================================
   ПАКЕТЫ — 3 крупные карточки editorial
   ============================================================ */

.packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.package {
  padding: 44px 36px 40px;
  border-right: 1px solid var(--rule);
  background: var(--bone);
  display: flex;
  flex-direction: column;
  min-height: 540px;
  position: relative;
  transition: background .25s ease;
}
.package:last-child { border-right: 0; }
.package:hover { background: var(--paper); }
.package .pkg-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 36px;
}
.package h3 {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  max-width: 14ch;
}
.package .pkg-sub {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 32ch;
}
.package ul {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.package li {
  padding: 9px 0;
  border-top: 1px solid var(--rule-dim);
  position: relative;
  padding-left: 22px;
}
.package li::before {
  content: '·';
  position: absolute; left: 4px; top: 6px;
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}
.package li:last-child { border-bottom: 1px solid var(--rule-dim); }
.package .pkg-out {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 20px;
  border-top: 1px solid var(--rule-dim);
}
.package .pkg-out b {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 6px;
  font-weight: 400;
}

/* ============================================================
   КЕЙС — Strelka-style разворот
   ============================================================ */

.case-spread {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.case-meta .mono-label { margin-bottom: 28px; }
.case-meta h2 {
  margin-bottom: 28px;
  max-width: 16ch;
}
.case-meta .lead { margin-bottom: 36px; }
.case-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.case-figures .fig {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-dim);
  padding-right: 24px;
}
.case-figures .fig:nth-child(2n) { border-left: 1px solid var(--rule-dim); padding-left: 24px; padding-right: 0; }
.case-figures .fig .num {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 8px;
}
.case-figures .fig .lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.case-visual {
  display: grid;
  gap: 18px;
}
.case-visual .photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--rule);
  position: relative;
}
.case-visual .photo .cap {
  position: absolute;
  left: 14px; bottom: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  background: rgba(20,22,26,0.55);
  padding: 5px 9px;
}
.case-visual .ba-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.case-visual .ba-row .photo { aspect-ratio: 1/1; }

/* ============================================================
   ПОЧЕМУ МЫ — editorial список тезисов
   ============================================================ */

.thesis-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.thesis-row {
  display: grid;
  grid-template-columns: 90px 1.1fr 1.8fr;
  gap: 40px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.thesis-row .t-num {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.thesis-row .t-title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 18ch;
}
.thesis-row .t-body {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 56ch;
}

/* ============================================================
   ПРОЦЕСС (graphite section) — горизонтальный timeline
   ============================================================ */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(245,244,240,0.18);
}
.process-step {
  padding: 36px 28px 36px 0;
  border-right: 1px solid rgba(245,244,240,0.18);
  position: relative;
}
.process-step:last-child { border-right: 0; padding-right: 0; }
.process-step .ps-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 28px;
}
.process-step .ps-title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.18;
  color: var(--paper);
  margin-bottom: 14px;
  max-width: 12ch;
}
.process-step .ps-body {
  color: rgba(245,244,240,0.7);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 28ch;
}
.process-step .ps-time {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
}

/* ============================================================
   COUNTERS — UNStudio-style
   ============================================================ */

.counter-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.counter-cell {
  padding: 36px 28px 32px 0;
  border-right: 1px solid var(--rule-dim);
}
.counter-cell:last-child { border-right: 0; }
.counter-cell .val {
  font-family: var(--serif);
  font-size: clamp(42px, 4.8vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 12px;
}
.counter-cell .val .suff { font-size: 0.55em; color: var(--accent); margin-left: 4px; }
.counter-cell .cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 26ch;
}

/* ============================================================
   CASE INDEX (cards с editorial-обложкой)
   ============================================================ */

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.case-card {
  border: 1px solid var(--rule);
  background: var(--bone);
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.case-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.case-card .cc-photo {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
}
.case-card .cc-body { padding: 24px 26px 28px; }
.case-card .cc-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.case-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

/* ============================================================
   FOOTER — editorial, dark
   ============================================================ */

.footer {
  background: var(--graphite);
  color: rgba(245,244,240,0.7);
  padding: 96px var(--gutter) 56px;
  border-top: 1px solid var(--graphite);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 64px;
}
.footer h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.5);
  margin-bottom: 20px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; font-size: 13.5px; }
.footer a { color: rgba(245,244,240,0.85); }
.footer a:hover { color: var(--accent); }
.footer .ft-manifest {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.18;
  color: var(--paper);
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(245,244,240,0.14);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.5);
  flex-wrap: wrap;
}

/* ============================================================
   FADE-UP / scroll-reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 2.2s cubic-bezier(.22,.61,.36,1), transform 2.2s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 2.2s cubic-bezier(.22,.61,.36,1), transform 2.2s cubic-bezier(.22,.61,.36,1);
}
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.22s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.44s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.66s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.88s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 1.10s; }

/* ============================================================
   AUDIENCE PAGE — split intro + 3 thesis + service list
   ============================================================ */

.audience-intro {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.audience-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-color: var(--rule);
}
.audience-photo .cap {
  position: absolute; left: 14px; bottom: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  background: rgba(20,22,26,0.5);
  padding: 5px 9px;
}

/* ============================================================
   ABOUT PAGE — discipline matrix
   ============================================================ */

.discipline-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.discipline {
  padding: 32px 28px 32px 0;
  border-right: 1px solid var(--rule-dim);
  border-bottom: 1px solid var(--rule-dim);
}
.discipline:nth-child(3n) { border-right: 0; }
.discipline .d-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.discipline h4 {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 10px;
  max-width: 14ch;
}
.discipline p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 28ch;
}
/* блок «О нас»: отступ текста от вертикальной линии слева */
#about-approach .discipline { padding-left: 32px; }
/* заголовок: «...работы —» в одну строку, «продуктовый подход» во вторую */
#about-approach .section-head {
  grid-template-columns: 1.5fr 1.5fr;
  gap: 40px;
  align-items: start;
}
/* текст «Мы смотрим…» — шире и чуть ниже заголовка */
#about-approach .section-head .lead { max-width: none; margin-top: 34px; white-space: nowrap; }
/* тире после «работы» — чуть правее */
#about-approach .hd-dash { margin-left: 0.14em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-text { min-height: 0; }
  .hero-media { min-height: 420px; }
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .packages { grid-template-columns: 1fr; }
  .package { border-right: 0; border-bottom: 1px solid var(--rule); min-height: 0; }
  .package:last-child { border-bottom: 0; }
  .case-spread { grid-template-columns: 1fr; gap: 36px; }
  .audience-intro { grid-template-columns: 1fr; gap: 32px; }
  .discipline-matrix { grid-template-columns: repeat(2, 1fr); }
  .discipline:nth-child(3n) { border-right: 1px solid var(--rule-dim); }
  .discipline:nth-child(2n) { border-right: 0; }
}
@media (max-width: 760px) {
  :root { --pad-section: 70px; }
  .header-inner { gap: 18px; }
  .logo .mark { display: none; }
  .nav { display: none; }
  .hero { padding-top: 40px; padding-bottom: 64px; }
  .display-1 { font-size: 38px; }
  .hero-proofs { grid-template-columns: 1fr; gap: 18px; }
  .hero-proofs .proof { border-right: 0; border-bottom: 1px solid var(--rule-dim); padding-bottom: 12px; padding-right: 0; }
  .hero-proofs .proof:last-child { border-bottom: 0; }
  .counter-row { grid-template-columns: repeat(2, 1fr); }
  .counter-cell { border-right: 1px solid var(--rule-dim); }
  .counter-cell:nth-child(2n) { border-right: 0; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { border-right: 0; border-bottom: 1px solid rgba(245,244,240,0.18); padding-right: 0; }
  .process-step:last-child { border-bottom: 0; }
  .thesis-row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .case-figures { grid-template-columns: 1fr; }
  .case-figures .fig:nth-child(2n) { border-left: 0; padding-left: 0; }
  .case-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; margin-bottom: 40px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .discipline-matrix { grid-template-columns: 1fr; }
  .discipline { border-right: 0 !important; }
}


/* ============================================================
   HEADER — двухрядная шапка (только на index.html)
   row 1 — лого + О компании / Проекты / Контакты / RU EN
   row 2 — 6 аудиторий inline (без скрытия на ПК)
   ============================================================ */

.header.header-two-row .header-inner { display: none; }

.header-two-row { padding: 0; }

.header-two-row .header-row-1 {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-two-row .header-row-2 {
  border-top: 1px solid var(--rule);
  background: rgba(245, 244, 240, 0.78);
  padding: 11px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.header-two-row .header-row-2 a {
  color: var(--ink-soft);
  white-space: nowrap;
  position: relative;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.header-two-row .header-row-2 a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.header-two-row .header-row-2 a:hover { color: var(--ink); }
.header-two-row .header-row-2 a:hover::after { transform: scaleX(1); }

.header-two-row .header-row-2 .hr2-sep {
  color: var(--ink-mute);
  opacity: 0.6;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 0;
}

.nav-compact {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 20px;
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.nav-compact a,
.nav-compact .dd-trigger-link { white-space: nowrap; }
/* вертикальная полоска-разделитель после логотипа «апекс» (короткая, как у RU/EN) */
.header-two-row .logo-dropdown {
  padding-right: 26px;
}
.header-two-row .logo-dropdown::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--rule);
}
.nav-compact a {
  position: relative;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.nav-compact a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.nav-compact a:hover { color: var(--ink); }
.nav-compact a:hover::after { transform: scaleX(1); }
.nav-compact .lang {
  border-left: 1px solid var(--rule);
  padding-left: 22px;
  color: var(--ink);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  /* На мобиле второй ряд скрывается (по стикеру: «вертикальное меню скрывается») */
  .header-two-row .header-row-2 { display: none; }
  .header-two-row .header-row-1 { padding: 14px var(--gutter); }
  .nav-compact { gap: 16px; font-size: 12px; }
  .nav-compact .lang { padding-left: 12px; }
}

/* ============================================================
   КАСКАДНЫЕ DROPDOWNS — апекс + О компании
   ============================================================ */

.has-dropdown { position: relative; }

/* подчёркивание для слова «апекс» — как у обычных nav-ссылок */
.logo-dropdown .logo .logo-name {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.logo-dropdown .logo .logo-name::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.logo-dropdown:hover .logo .logo-name::after,
.logo-dropdown:focus-within .logo .logo-name::after {
  transform: scaleX(1);
}

/* подчёркивание для «О компании» (триггер dropdown) — открытие меню */
.nav-item-dropdown { display: inline-flex; align-items: center; }
.nav-item-dropdown:hover .dd-trigger-link::after,
.nav-item-dropdown:focus-within .dd-trigger-link::after {
  transform: scaleX(1);
}

/* dropdown-панель (тёмная, как футер «Кому мы помогаем») */
.dd-panel {
  position: absolute;
  background: var(--graphite);
  color: rgba(245,244,240,0.88);
  padding: 22px 26px 24px;
  min-width: 260px;
  border: 1px solid rgba(245,244,240,0.08);
  box-shadow: 0 24px 50px rgba(20,22,26,0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  z-index: 90;
}

/* root-уровень (от логотипа / от ссылки nav) — открывается вниз */
.dd-panel--root {
  top: calc(100% + 14px);
  left: 0;
  transform: translateY(-6px);
}
.dd-panel--root.dd-panel--right {
  left: auto;
  right: 0;
}
.dd-panel--root::before {
  /* hover-мостик через gap, чтобы курсор не «срывался» */
  content: '';
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}

/* sub и sub2 — каскад вправо */
.dd-panel--sub,
.dd-panel--sub2 {
  top: -22px;
  left: calc(100% + 12px);
  transform: translateX(-6px);
  min-width: 240px;
}
.dd-panel--sub::before,
.dd-panel--sub2::before {
  /* мостик слева */
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -12px;
  width: 12px;
}

/* раскрытие на hover/focus-within */
.has-dropdown:hover > .dd-panel--root,
.has-dropdown:focus-within > .dd-panel--root {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.dd-list .has-sub:hover > .dd-panel--sub,
.dd-list .has-sub:focus-within > .dd-panel--sub,
.dd-list .has-sub:hover > .dd-panel--sub2,
.dd-list .has-sub:focus-within > .dd-panel--sub2 {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* заголовок секции в dropdown */
.dd-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.5);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(245,244,240,0.08);
}

/* список пунктов */
.dd-list { list-style: none; margin: 0; padding: 0; }
.dd-list li { position: relative; }
.dd-list li + li { margin-top: 1px; }
.dd-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(245,244,240,0.85);
  transition: color .2s ease, padding-left .25s cubic-bezier(.2,.7,.2,1);
  white-space: nowrap;
}
.dd-list a:hover {
  color: var(--paper);
  padding-left: 4px;
}
.dd-list .has-sub > a .caret {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1;
  color: rgba(245,244,240,0.4);
  margin-left: 8px;
  transition: color .2s ease, transform .2s ease;
}
.dd-list .has-sub:hover > a .caret,
.dd-list .has-sub:focus-within > a .caret {
  color: var(--accent);
  transform: translateX(3px);
}

/* мягко гасим аудитории-ряд2 пока открыт корневой dropdown */
.header-two-row:has(.has-dropdown:hover) .header-row-2,
.header-two-row:has(.has-dropdown:focus-within) .header-row-2 {
  opacity: 0.35;
  transition: opacity .2s ease;
}

/* На мобиле dropdown отключаем (на мобиле row-2 уже скрыт, отдельное меню — позже) */
@media (max-width: 760px) {
  .dd-panel { display: none; }
}

/* ============================================================
   DROPDOWN-ITEMS: подчёркивание-анимация (universal)
   и flip-каскад влево для правых dropdown (О компании, Проекты)
   ============================================================ */

/* underline на hover для любых пунктов dropdown */
.dd-list a { /* уже position: relative — выставляем подложку под underline */ }
.dd-list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.dd-list a:hover::after,
.dd-list a:focus-visible::after {
  transform: scaleX(1);
}

/* FLIP: для dropdown в правой части шапки (О компании, Проекты)
   подпанели открываются ВЛЕВО, а не вправо */
.nav-item-dropdown .dd-panel--sub,
.nav-item-dropdown .dd-panel--sub2 {
  left: auto;
  right: calc(100% + 12px);
  transform: translateX(6px);
}
.nav-item-dropdown .dd-panel--sub::before,
.nav-item-dropdown .dd-panel--sub2::before {
  left: auto;
  right: -12px;
}
.nav-item-dropdown .dd-list .has-sub:hover > .dd-panel--sub,
.nav-item-dropdown .dd-list .has-sub:focus-within > .dd-panel--sub,
.nav-item-dropdown .dd-list .has-sub:hover > .dd-panel--sub2,
.nav-item-dropdown .dd-list .has-sub:focus-within > .dd-panel--sub2 {
  transform: translateX(0);
}

/* в правых dropdown caret разворачиваем (›→‹) для семантики «влево» */
.nav-item-dropdown .dd-list .has-sub > a .caret {
  transform: scaleX(-1);
}
.nav-item-dropdown .dd-list .has-sub:hover > a .caret,
.nav-item-dropdown .dd-list .has-sub:focus-within > a .caret {
  transform: scaleX(-1) translateX(3px);
}

/* ============================================================
   ЭКСПЕРИМЕНТАЛЬНЫЕ ПРОТОТИПЫ (exp-2 / exp-3)
   ============================================================ */

/* плашка-индикатор «это эксперимент» */
.exp-banner {
  position: relative;
  z-index: 100;
  background: var(--graphite);
  color: var(--paper);
  padding: 10px var(--gutter);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(245,244,240,0.10);
}
.exp-banner .exp-label { color: var(--accent); }
.exp-banner .exp-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.exp-banner .exp-nav a {
  color: rgba(245,244,240,0.78);
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px dashed rgba(245,244,240,0.35);
  transition: color .2s ease, border-color .2s ease;
}
.exp-banner .exp-nav a:hover { color: var(--paper); border-color: var(--paper); }
.exp-banner .exp-nav a.current {
  color: var(--accent);
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
}

/* ============================================================
   LOGO · ALL-CAPS (exp-2 / exp-3)
   ============================================================ */
.logo.logo-allcaps {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.logo.logo-allcaps .logo-name {
  font-family: var(--sans);
}
.logo.logo-allcaps .dot {
  width: 5px; height: 5px;
  margin-left: 6px;
  margin-bottom: 1px;
}
.logo.logo-allcaps .mark {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  margin-left: 18px;
  padding-left: 18px;
}
/* белый вариант (для exp-3 — лого над тёмным hero) */
.logo.logo-allcaps.logo-allcaps--white,
.logo.logo-allcaps.logo-allcaps--white .logo-name {
  color: var(--paper);
}
.logo.logo-allcaps.logo-allcaps--white .mark {
  color: rgba(245,244,240,0.66);
  border-left-color: rgba(245,244,240,0.30);
}
.logo.logo-allcaps.logo-allcaps--white .dot {
  background: var(--accent);
}

/* ============================================================
   HEADER MINIMAL (exp-3) — лого слева + триггер меню справа,
   плавает над hero, темнеет при скролле
   ============================================================ */
.header-minimal {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.header-minimal.is-scrolled {
  background: rgba(20,22,26,0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(245,244,240,0.08);
}

/* МЕНЮ-триггер */
.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 1px solid rgba(245,244,240,0.55);
  color: var(--paper);
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.menu-trigger:hover {
  border-color: var(--paper);
  background: rgba(245,244,240,0.08);
}
.menu-trigger .mt-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 14px;
}
.menu-trigger .mt-bars span {
  display: block;
  height: 1.5px;
  background: var(--paper);
  width: 100%;
  transform-origin: center;
  transition: transform .25s ease, opacity .2s ease;
}
.menu-trigger[aria-expanded="true"] .mt-bars span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-trigger[aria-expanded="true"] .mt-bars span:nth-child(2) { opacity: 0; }
.menu-trigger[aria-expanded="true"] .mt-bars span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ============================================================
   OVERLAY-MENU (exp-3) — full-screen меню «выезжает сверху»
   ============================================================ */
.overlay-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  background: var(--graphite);
  color: var(--paper);
  z-index: 55;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.6,.05,.15,1), opacity .35s ease;
  overflow-y: auto;
}
.overlay-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.overlay-menu .om-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 130px var(--gutter) 60px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.overlay-menu .om-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  align-items: start;
  flex: 1;
}
.overlay-menu .om-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.5);
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(245,244,240,0.12);
}
.overlay-menu .om-list { list-style: none; margin: 0; padding: 0; }
.overlay-menu .om-list li { margin-bottom: 14px; }
.overlay-menu .om-list a {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: rgba(245,244,240,0.85);
  transition: color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.overlay-menu .om-list a:hover {
  color: var(--paper);
  transform: translateX(8px);
}
.overlay-menu .om-foot {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(245,244,240,0.12);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(245,244,240,0.55);
}
.overlay-menu .om-foot a { color: rgba(245,244,240,0.85); }
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .overlay-menu .om-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .overlay-menu .om-grid { grid-template-columns: 1fr; gap: 28px; }
  .overlay-menu .om-inner { padding: 110px var(--gutter) 48px; }
}

/* ============================================================
   HERO TITLE SPLIT (exp-3) — большой ALL-CAPS H1
   ============================================================ */
.hf-title-split {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-size: clamp(56px, 11vw, 156px);
  line-height: 0.92;
  font-style: normal;
  color: var(--paper);
  max-width: none;
  margin: 0;
  text-shadow: 0 2px 30px rgba(20,22,26,0.30);
}
.hf-title-split .line { display: block; width: 100%; }
.hf-title-split .line-l { text-align: left; }
.hf-title-split .line-r { text-align: right; }

.hf-subline {
  margin-top: 22px;
  font-family: var(--sans);
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.78);
  text-align: right;
  font-weight: 400;
}

@media (max-width: 640px) {
  .hf-title-split .line-l, .hf-title-split .line-r { text-align: left; }
  .hf-subline { text-align: left; }
}

/* ============================================================
   PROOF-STRIP с анимацией счётчиков (для exp-2 и exp-3)
   ============================================================ */
.ps-num [data-counter] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1ch;
}
.ps-num .prefix,
.ps-num .suff {
  display: inline-block;
}

/* небольшой отдельный hint для proof-strip счётчиков — если хочется выделить */
.proof-strip .ps-num .suff {
  font-size: 0.55em;
  color: var(--accent);
  margin-left: 4px;
}
/* ============================================================
   V9 · ВИЗУАЛЬНЫЕ КОМПОНЕНТЫ (bequant-приёмы) — спроектированы workflow
   ============================================================ */

/* ===== HERO SCROLL PARALLAX ===== */
/* ============================================================
   HERO SCROLL PARALLAX (приём ⑥ — фон оживает при микроскролле)
   Слои hero уходят с РАЗНОЙ скоростью при скролле вниз:
   фон/видео — медленнее, текст — быстрее, overlay плавно затемняется.
   Реализация: JS пишет --pscroll (0..1) в .hf-parallax и --py (px) в слои.
   Видео НЕ перетранслируется через JS-transform (там живёт kenburns) —
   ему даём отдельную обёртку через will-change и лёгкий drift по --py
   на ОТДЕЛЬНОМ свойстве (translate), которое не конфликтует с transform.
   ============================================================ */

/* Каждый слой со своим data-parallax получает вертикальный сдвиг.
   Используем индивидуальное свойство `translate` (CSS Transforms L2),
   чтобы НЕ затирать существующий transform: kenburns у видео. */
.hf-parallax video[data-parallax],
.hf-parallax .hf-overlay[data-parallax],
.hf-parallax .hf-grid > [data-parallax] {
  translate: 0 var(--py, 0px);
  will-change: translate;
}

/* Текстовые слои: вместе со сдвигом слегка гаснут к концу прокрутки hero —
   premium-«уход в глубину». Фон/overlay не трогаем по opacity. */
.hf-parallax .hf-grid > [data-parallax] {
  opacity: var(--pfade, 1);
}

/* Overlay при скролле плавно набирает плотность (фон «уходит в тень»).
   Накладываем дополнительный затемняющий слой через ::after,
   чтобы не переписывать существующий двойной градиент .hf-overlay. */
.hf-parallax .hf-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 30%, transparent 0%, rgba(20,22,26,0.55) 100%);
  opacity: var(--pscroll, 0);
  pointer-events: none;
  will-change: opacity;
}

/* Видео при скролле получает едва заметный масштаб поверх kenburns —
   усиливает глубину. scale здесь не конфликтует с transform(kenburns),
   т.к. это отдельное свойство `scale`. */
.hf-parallax video[data-parallax] {
  scale: calc(1 + var(--pscroll, 0) * 0.04);
}

/* Производительность: контейнер изолируем, чтобы перерисовка слоёв
   не задевала остальную страницу. */
.hf-parallax {
  isolation: isolate;
  contain: paint;
}

/* Доступность: при reduced-motion параллакс выключаем полностью —
   слои статичны, видео без drift/scale, текст без fade. */
@media (prefers-reduced-motion: reduce) {
  .hf-parallax video[data-parallax],
  .hf-parallax .hf-overlay[data-parallax],
  .hf-parallax .hf-grid > [data-parallax] {
    translate: none !important;
    scale: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
  .hf-parallax .hf-overlay::after { opacity: 0 !important; }
}

/* На узких экранах параллакс приглушаем (короткий hero, мало хода скролла).
   Сдвиги масштабируются через --pmax в JS, но и тут страхуемся. */
@media (max-width: 560px) {
  .hf-parallax .hf-grid > [data-parallax] { opacity: 1; } /* текст не гасим на мобиле — читаемость */
}

/* ===== ЛЕНТА ТЕРМИНОВ (term-marquee) ===== */
/* ============================================================
   TERM-MARQUEE — тонкая бесконечная лента терминов
   (отдельной полосой под proof-strip)
   ============================================================ */

.term-marquee {
  position: relative;
  overflow: hidden;
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  /* плавное растворение краёв ленты */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

/* трек — две идентичные дорожки встык, едут как единое полотно */
.term-marquee .tm-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: tm-scroll 38s linear infinite;
}

/* одна порция терминов (дублируется в разметке для бесшовности) */
.term-marquee .tm-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.term-marquee .tm-item {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  padding: 0 26px;
  position: relative;
}

/* акцентная точка-разделитель между терминами */
.term-marquee .tm-item::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--accent);
}

/* бесконечная прокрутка: уезжаем ровно на ширину одной группы (50% трека) */
@keyframes tm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* пауза при наведении */
.term-marquee:hover .tm-track { animation-play-state: paused; }

@media (max-width: 900px) {
  .term-marquee { padding: 12px 0; }
  .term-marquee .tm-item { font-size: 11px; padding: 0 20px; letter-spacing: 0.16em; }
  .term-marquee .tm-track { animation-duration: 30s; }
}
@media (max-width: 560px) {
  .term-marquee .tm-item { font-size: 10.5px; padding: 0 16px; }
  .term-marquee .tm-item::after { width: 3px; height: 3px; margin-top: -1.5px; }
}

/* доступность: при reduced-motion лента не едет, термины статичны и читабельны */
@media (prefers-reduced-motion: reduce) {
  .term-marquee .tm-track { animation: none; }
}

/* ===== ПАКЕТЫ — ТАБ-СВИТЧЕР (pkg-switch) ===== */
/* ============================================================
   ПАКЕТЫ — таб-свитчер (приёмы ①+⑨): A/B/C табы + split-полотно
   ============================================================ */
.pkg-switch {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* --- лента табов --- */
.pkg-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--rule);
}
.pkg-tab {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bone);
  border: 0;
  border-right: 1px solid var(--rule);
  padding: 26px 30px 24px;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: background .35s ease, color .35s ease;
}
.pkg-tab:last-child { border-right: 0; }
.pkg-tab:hover { background: var(--paper); }
.pkg-tab .pkg-tab-id {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color .35s ease;
}
.pkg-tab .pkg-tab-name {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  transition: color .35s ease;
}
/* акцентная подчёркивающая черта активного таба */
.pkg-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.pkg-tab[aria-selected="true"] {
  background: var(--paper);
  color: var(--ink);
}
.pkg-tab[aria-selected="true"] .pkg-tab-id { color: var(--accent); }
.pkg-tab[aria-selected="true"] .pkg-tab-name { color: var(--ink); }
.pkg-tab[aria-selected="true"]::after { transform: scaleX(1); }
.pkg-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* --- полотно панелей --- */
.pkg-stage {
  position: relative;
  background: var(--paper);
}
.pkg-panel {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 0;
}
/* неактивные панели сняты из потока, но доступны для измерения высоты через .is-active */
.pkg-panel[hidden] { display: none; }

/* анимация входа панели (fade + slide) — навешивается JS-классом */
.pkg-panel.is-entering .pkg-panel-info > *,
.pkg-panel.is-entering .pkg-panel-visual {
  opacity: 0;
  transform: translateY(14px);
}
.pkg-panel.is-active .pkg-panel-info > *,
.pkg-panel.is-active .pkg-panel-visual {
  opacity: 1;
  transform: none;
  transition: opacity 1.15s ease, transform 1.15s cubic-bezier(.22,.61,.36,1);
}
/* лёгкий каскад для содержимого левой колонки */
.pkg-panel.is-active .pkg-panel-info > *:nth-child(1) { transition-delay: .06s; }
.pkg-panel.is-active .pkg-panel-info > *:nth-child(2) { transition-delay: .18s; }
.pkg-panel.is-active .pkg-panel-info > *:nth-child(3) { transition-delay: .32s; }
.pkg-panel.is-active .pkg-panel-info > *:nth-child(4) { transition-delay: .46s; }
.pkg-panel.is-active .pkg-panel-visual { transition-delay: .30s; }

/* левая колонка — текст + список услуг */
.pkg-panel-info {
  padding: 48px 48px 44px;
  display: flex;
  flex-direction: column;
}
.pkg-panel-info .pkg-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.pkg-panel-info h3 {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  max-width: 16ch;
}
.pkg-panel-info .pkg-sub {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 30px;
  max-width: 40ch;
}
.pkg-panel-info ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.pkg-panel-info li {
  padding: 10px 0 10px 22px;
  border-top: 1px solid var(--rule-dim);
  position: relative;
}
.pkg-panel-info li:last-child { border-bottom: 1px solid var(--rule-dim); }
.pkg-panel-info li::before {
  content: '·';
  position: absolute; left: 4px; top: 7px;
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}

/* правая колонка — крупный визуал + подпись fig + «На выходе» */
.pkg-panel-visual {
  position: relative;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.pkg-photo {
  flex: 1;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  background-color: var(--rule);
  position: relative;
}
.pkg-photo .cap {
  position: absolute;
  left: 14px; bottom: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(20,22,26,0.55);
  padding: 4px 9px;
}
.pkg-out {
  border-top: 1px solid var(--rule);
  padding: 22px 28px 24px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pkg-out b {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 7px;
  font-weight: 400;
}

/* --- адаптив --- */
@media (max-width: 900px) {
  .pkg-tab { padding: 20px 18px 18px; }
  .pkg-tab .pkg-tab-name { font-size: 17px; }
  .pkg-panel { grid-template-columns: 1fr; }
  .pkg-panel-visual {
    border-left: 0;
    border-top: 1px solid var(--rule);
    grid-row: 1; /* визуал над текстом на узких экранах */
  }
  .pkg-panel-info { padding: 36px 30px 34px; }
  .pkg-photo { min-height: 300px; }
}
@media (max-width: 560px) {
  /* табы становятся компактной лентой: прячем длинное название, оставляем A/B/C */
  .pkg-tabs { grid-template-columns: repeat(3, 1fr); }
  .pkg-tab { padding: 16px 12px; gap: 4px; align-items: flex-start; }
  .pkg-tab .pkg-tab-name { font-size: 13px; }
  .pkg-panel-info { padding: 30px 22px 30px; }
  .pkg-panel-info h3 { font-size: 27px; }
  .pkg-photo { min-height: 230px; }
  .pkg-out { padding: 18px 22px 20px; }
}

/* prefers-reduced-motion: без слайда/каскада, мгновенная смена */
@media (prefers-reduced-motion: reduce) {
  .pkg-tab::after { transition: none; }
  .pkg-panel.is-entering .pkg-panel-info > *,
  .pkg-panel.is-entering .pkg-panel-visual { opacity: 1; transform: none; }
  .pkg-panel.is-active .pkg-panel-info > *,
  .pkg-panel.is-active .pkg-panel-visual { transition: none; transition-delay: 0s; }
}

/* ===== РАЗДЕЛИТЕЛЬ С ЦИТАТОЙ (quote-divider) ===== */
/* ============================================================
   QUOTE-DIVIDER — full-bleed фото-разделитель с цитатой (приёмы ⑤+⑦)
   ставится между «Что мы делаем» и «Опорный кейс»
   ============================================================ */

.quote-divider {
  position: relative;
  /* full-bleed: выход за .container на всю ширину вьюпорта */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--graphite);
  isolation: isolate;
}

/* слой фонового фото — отдельный элемент, чтобы анимировать ken-burns/параллакс
   без дрожания текста; чуть выше блока для запаса под параллакс */
.quote-divider .qd-bg {
  position: absolute;
  inset: -12% 0;            /* запас сверху/снизу под сдвиг параллакса */
  z-index: 0;
  background-image: url('assets/home-hero.png');
  background-size: cover;
  background-position: center 40%;
  transform: translate3d(0, 0, 0) scale(1.06);
  will-change: transform;
  animation: qd-kenburns 26s ease-in-out infinite alternate;
}

/* тёмный градиент-оверлей: глубже слева, чтобы цитата читалась */
.quote-divider .qd-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(20,22,26,0.86) 0%, rgba(20,22,26,0.62) 42%, rgba(20,22,26,0.34) 100%),
    linear-gradient(0deg,  rgba(20,22,26,0.55) 0%, rgba(20,22,26,0.10) 30%, transparent 60%);
  pointer-events: none;
}

/* тонкая бронзовая черта-засечка сверху для editorial-ритма */
.quote-divider::before {
  content: "";
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(169,140,95,0) 46%);
}

.quote-divider .qd-inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 88px var(--gutter);
  color: var(--paper);
}

.quote-divider .qd-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.7);
  margin: 0 0 26px;
}
.quote-divider .qd-tag .num { color: var(--accent); margin-right: 10px; }

.quote-divider .qd-quote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: clamp(34px, 5.2vw, 72px);
  color: var(--paper);
  max-width: 22ch;
  text-shadow: 0 2px 28px rgba(20,22,26,0.35);
}
/* акцент на ключевом фрагменте цитаты */
.quote-divider .qd-quote em {
  font-style: normal;
  color: var(--paper);
  background: rgba(185, 151, 84, 0.53);
  padding: 0.02em 0.20em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.quote-divider .qd-cite {
  display: block;
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.6);
}
.quote-divider .qd-cite::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 12px;
}

/* reveal цитаты — поверх общего .reveal даём мягкий доезд внутри блока */
.quote-divider .qd-inner.reveal { transition-duration: 1.8s; }

@keyframes qd-kenburns {
  0%   { transform: translate3d(0, 0, 0) scale(1.06); }
  100% { transform: translate3d(-1.5%, -1.2%, 0) scale(1.12); }
}

/* JS-параллакс: переменная --qd-shift задаётся в enhancements.js */
.quote-divider.qd-parallax .qd-bg {
  animation: none;
  transform: translate3d(0, var(--qd-shift, 0px), 0) scale(1.12);
}

@media (max-width: 900px) {
  .quote-divider { min-height: 52vh; }
  .quote-divider .qd-inner { padding: 64px var(--gutter); }
  .quote-divider .qd-quote { max-width: 26ch; }
}
@media (max-width: 560px) {
  .quote-divider { min-height: 46vh; }
  .quote-divider .qd-inner { padding: 52px var(--gutter); }
  .quote-divider .qd-overlay {
    background:
      linear-gradient(180deg, rgba(20,22,26,0.7) 0%, rgba(20,22,26,0.55) 55%, rgba(20,22,26,0.72) 100%);
  }
  .quote-divider .qd-quote { max-width: none; }
  .quote-divider .qd-tag { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-divider .qd-bg {
    animation: none;
    transform: translate3d(0, 0, 0) scale(1.06);
  }
  .quote-divider.qd-parallax .qd-bg {
    transform: translate3d(0, 0, 0) scale(1.06);
  }
}

/* ===== КЕЙС — BEFORE/AFTER СЛАЙДЕР (ba-slider) ===== */
/* ============================================================
   BEFORE / AFTER слайдер «было/стало» (секция «Опорный кейс»)
   — добавлено в конец styles.css; дублирует правки, уже
     внесённые на месте старого блока .ba-row
   ============================================================ */

/* ---- BEFORE / AFTER слайдер (заменяет .ba-row) ---- */
.case-visual .ba-slider {
  --ba-pos: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--rule);
  cursor: ew-resize;
  touch-action: pan-y;            /* по вертикали скроллим, по горизонтали — тащим */
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.case-visual .ba-before,
.case-visual .ba-after {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* «стало» — верхний слой, обрезается слева по позиции ползунка */
.case-visual .ba-after {
  clip-path: inset(0 0 0 var(--ba-pos));
  will-change: clip-path;
}
.case-visual .ba-cap {
  /* наследует .cap, добавляем z-index поверх слоёв */
  z-index: 3;
  pointer-events: none;
}
.case-visual .ba-cap--after { left: auto; right: 14px; }

/* вертикальный разделитель */
.case-visual .ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos);
  width: 2px;
  margin-left: -1px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(20,22,26,0.18), 0 0 14px rgba(20,22,26,0.30);
  z-index: 4;
  pointer-events: none;          /* перетаскиваем сам слайдер, не линию */
}
/* круглая ручка */
.case-visual .ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(20,22,26,0.12);
  background: var(--paper);
  color: var(--graphite);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 6px 22px rgba(20,22,26,0.22);
  pointer-events: none;          /* drag-цель — родительский слайдер */
  transition: transform 0.45s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.45s cubic-bezier(0.22,0.61,0.36,1);
}
.case-visual .ba-handle-arrow {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1;
  color: var(--ink-soft);
}
.case-visual .ba-slider:hover .ba-handle {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 8px 28px rgba(20,22,26,0.28);
}
.case-visual .ba-slider.is-grabbing { cursor: grabbing; }
.case-visual .ba-slider.is-grabbing .ba-after { will-change: clip-path; }
/* focus-ring для клавиатуры */
.case-visual .ba-slider:focus-visible {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
}
.case-visual .ba-slider:focus-visible .ba-handle {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: var(--accent);
}

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

/* Адаптив <760px — добавить ВНУТРЬ существующего @media (max-width:760px) */
@media (max-width: 760px) {
  .case-visual .ba-slider { aspect-ratio: 4 / 3; }
  .case-visual .ba-handle { width: 52px; height: 52px; }
}

/* ===== В ЧИСЛАХ — SPARKLINES (spark) ===== */
/* ============================================================
   SPARKLINES для .counter-cell (приём ④, синхрон со счётчиком)
   ============================================================ */
.counter-cell .spark {
  display: block;
  width: 100%;
  max-width: 88px;
  height: 30px;
  margin-bottom: 14px;
  overflow: visible;
}
/* линия графика */
.counter-cell .spark .spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* рисование: длина пути 120 заведомо >= реальной длины,
     старт — линия скрыта (offset = длина) */
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}
/* мини-бары (4-й вариант) — рисуются как «штрихи» по тому же приёму */
.counter-cell .spark .spark-bar {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
/* пунктирная базовая ось — статична, очень бледная */
.counter-cell .spark .spark-base {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}

/* запуск рисования: класс ставит JS (тот же IO-подход, что и счётчики) */
.counter-cell.spark-go .spark .spark-line {
  transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  stroke-dashoffset: 0;
}
.counter-cell.spark-go .spark .spark-bar {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  stroke-dashoffset: 0;
}
/* лёгкий каскад баров внутри 4-й ячейки */
.counter-cell.spark-go .spark .spark-bar:nth-of-type(2) { transition-delay: 0.08s; }
.counter-cell.spark-go .spark .spark-bar:nth-of-type(3) { transition-delay: 0.16s; }
.counter-cell.spark-go .spark .spark-bar:nth-of-type(4) { transition-delay: 0.24s; }
.counter-cell.spark-go .spark .spark-bar:nth-of-type(5) { transition-delay: 0.32s; }

@media (max-width: 560px) {
  .counter-cell .spark { max-width: 72px; height: 26px; margin-bottom: 12px; }
}

/* prefers-reduced-motion: без рисования — линия видна сразу, без transition */
@media (prefers-reduced-motion: reduce) {
  .counter-cell .spark .spark-line,
  .counter-cell .spark .spark-bar {
    stroke-dashoffset: 0;
    transition: none;
  }
  .counter-cell.spark-go .spark .spark-line,
  .counter-cell.spark-go .spark .spark-bar {
    transition: none;
  }
}

/* ============================================================
   V9 · АВТОРСКИЕ БЛОКИ (partners-marquee · cta-micro · why-sticky)
   ============================================================ */

/* ===== ЛЕНТА ПАРТНЁРОВ (partners) ===== */
.partners{background:var(--bone);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:40px 0;overflow:hidden;}
.partners .pm-head{max-width:var(--max);margin:0 auto 20px;padding:0 var(--gutter);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);}
.partners .pm-head b{color:var(--accent);font-weight:500;}
.pm-row{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.pm-row + .pm-row{margin-top:14px;}
.pm-track{display:flex;gap:14px;flex:0 0 auto;padding-right:14px;animation:pm-scroll 38s linear infinite;}
.pm-track--rev{animation-direction:reverse;animation-duration:46s;}
.partners:hover .pm-track{animation-play-state:paused;}
.pm-item{flex:0 0 auto;border:1px solid var(--rule);border-radius:999px;background:var(--paper);padding:11px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-soft);white-space:nowrap;}
@keyframes pm-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.pm-track{animation:none;}.pm-row{overflow-x:auto;}}

/* ===== CTA МИКРО-ИНТЕРАКЦИИ ===== */
.cta-pulse{position:relative;}
.cta-pulse::after{content:'';position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(169,140,95,.5);animation:cta-breathe 3.4s ease-in-out infinite;pointer-events:none;}
@keyframes cta-breathe{0%{box-shadow:0 0 0 0 rgba(169,140,95,.42);}70%{box-shadow:0 0 0 14px rgba(169,140,95,0);}100%{box-shadow:0 0 0 0 rgba(169,140,95,0);}}
.cta-hint{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1);}
#contacts:hover .cta-hint,#contacts:focus-within .cta-hint{opacity:1;transform:translateY(0);}
.cta-hint-item{border:1px dashed var(--rule);border-radius:8px;padding:8px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-mute);background:var(--bone);}
.cta-hint-item b{color:var(--accent);font-weight:500;}
@media(prefers-reduced-motion:reduce){.cta-pulse::after{animation:none;}.cta-hint{transition:none;}}

/* ===== WHY-STICKY (сторителлинг + sticky SVG-диаграмма) ===== */
.why-sticky{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.ws-theses{display:flex;flex-direction:column;}
.ws-thesis{padding:40px 0;border-top:1px solid var(--rule);transition:opacity .4s ease;}
.ws-thesis:first-child{border-top:none;}
.ws-thesis.is-dim{opacity:.4;}
.ws-thesis .t-num{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent);margin-bottom:12px;}
.ws-thesis .t-title{font-family:var(--serif);font-size:clamp(22px,2.3vw,30px);line-height:1.15;letter-spacing:-.015em;margin-bottom:14px;}
.ws-thesis .t-body{color:var(--ink-soft);font-size:15px;max-width:46ch;}
.ws-sticky{position:sticky;top:120px;align-self:start;}
.ws-diagram{width:100%;border:1px solid var(--rule);border-radius:12px;background:var(--paper);padding:30px;}
.ws-diagram svg{width:100%;height:auto;display:block;}
.wsn{transition:opacity .45s ease;}
.wsn .wsn-box{fill:var(--bone);stroke:var(--rule);stroke-width:1.5;transition:fill .45s ease,stroke .45s ease;}
.wsn .wsn-label{fill:var(--ink-mute);font-family:var(--mono);font-size:11px;letter-spacing:.05em;transition:fill .45s ease;text-transform:uppercase;}
.wsn.is-on .wsn-box{fill:var(--graphite);stroke:var(--graphite);}
.wsn.is-on .wsn-label{fill:var(--paper);}
.ws-link{stroke:var(--rule);stroke-width:1.5;transition:stroke .45s ease;}
.ws-link.is-on{stroke:var(--accent);}
.ws-diagram .ws-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:18px;}
@media(max-width:900px){
  .why-sticky{grid-template-columns:1fr;gap:32px;}
  .ws-sticky{position:static;order:-1;}
  .ws-thesis{padding:26px 0;}
}

/* ===== BELIEVE · Sequel-style закреплённый слайд со сменой фраз по скроллу ===== */
.believe{background:#000;}
.believe-track{position:relative;height:440vh;}
.believe-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.believe-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);will-change:transform;}
.believe-veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.70) 58%,rgba(0,0,0,.90) 100%);}
.believe-inner{position:relative;z-index:2;width:100%;max-width:1040px;padding:0 32px;text-align:center;color:#fff;}
.believe-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.30em;text-transform:uppercase;color:rgba(255,255,255,.60);margin-bottom:44px;}
.believe-phrases{position:relative;height:64vh;display:flex;align-items:center;justify-content:center;}
.believe-phrase{position:absolute;left:0;right:0;top:50%;opacity:0;will-change:transform,opacity,filter;pointer-events:none;}
.bp-title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,5.2vw,74px);line-height:1.05;letter-spacing:-.03em;margin:0;}
.bp-title em{font-style:italic;}
.bp-body{margin:28px auto 0;max-width:56ch;font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:rgba(255,255,255,.72);}
.believe-dots{display:flex;gap:10px;justify-content:center;margin-top:56px;}
.believe-dots .bd{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.26);transition:background .4s ease,transform .4s ease;}
.believe-dots .bd.is-active{background:#fff;transform:scale(1.3);}
@media(max-width:760px){
  .believe-track{height:360vh;}
  .believe-phrases{min-height:54vh;}
}
@media(prefers-reduced-motion:reduce){
  .believe-track{height:auto;}
  .believe-stage{position:static;height:auto;padding:90px 0;}
  .believe-phrase{position:relative;opacity:1;transform:none;margin-bottom:54px;}
  .believe-bg{transform:none;}
  .believe-dots{display:none;}
}

/* ============================================================
   ЛОГОТИП — вариант C (ALL-CAPS Tinos serif), выбран как основной
   ============================================================ */
.logo{ letter-spacing:0; font-size:15px; }
.logo .logo-name{
  font-family: "Lora", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
}
/* акцентный dot вплотную к слову (как в варианте C) */
.logo{ gap: 4px; }
/* ============================================================
   ХЕРО-заголовок главной — шрифт как на фото (Playfair Display), уменьшенный
   ============================================================ */
.hf-title{
  font-family:"Tinos", Georgia, serif !important;
  font-weight:400;
  font-size:clamp(40px, 6vw, 80px) !important;
  line-height:1.06;
  letter-spacing:-0.02em;
}
/* hero-фраза в 2 строки: снимаем узкий лимит ширины, перенос задаёт <br> */
.hero-full .hf-title{ max-width: none !important; }
/* nav-compact подчёркивание (О компании, Проекты) — акцентный коричневый, как у остальных */
.nav-compact a::after{ background: var(--accent) !important; }
/* ============================================================
   СЕКЦИЯ С ФОТО-ФОНОМ (как у блока-цитаты) — «В числах»
   ============================================================ */
.section.section-photo{
  position: relative;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-top-color: rgba(245,244,240,0.14);
  color: var(--paper);
  overflow: hidden;
}
.section.section-photo::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(20,22,26,0.84) 0%, rgba(20,22,26,0.66) 45%, rgba(20,22,26,0.86) 100%);
}
.section.section-photo > .container{ position:relative; z-index:1; }
.section.section-photo .display{ color: var(--paper); }
.section.section-photo .lead{ color: rgba(245,244,240,0.86); }
.section.section-photo .mono-label{ color: rgba(245,244,240,0.72); }
.section.section-photo .mono-label .num{ color: var(--accent); }
.section.section-photo .counter-row{ border-top-color: rgba(245,244,240,0.24); border-bottom-color: rgba(245,244,240,0.24); }
.section.section-photo .counter-cell{ border-right-color: rgba(245,244,240,0.16); }
.section.section-photo .counter-cell .val{ color: var(--paper); }
.section.section-photo .counter-cell .val .suff{ color: var(--accent); }
.section.section-photo .counter-cell .cap{ color: rgba(245,244,240,0.70); }
.section.section-photo .counter-cell .spark .spark-base{ stroke: rgba(245,244,240,0.30); }
@media (max-width: 900px){
  .section.section-photo{ background-attachment: scroll; }
}
/* ============================================================
   PREMIUM МИКРО-АНИМАЦИИ (5 пунктов) — сдержанно, один раз, reduced-motion учтён
   ============================================================ */
/* 3 · Кнопки: стрелка едет + заливка-свайп */
.btn .arrow{ display:inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arrow, .btn:focus-visible .arrow{ transform: translateX(5px); }
.section .btn:not(.primary){ position:relative; overflow:hidden; z-index:0; isolation:isolate; }
.section .btn:not(.primary)::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background: var(--ink); transform: scaleX(0); transform-origin:left;
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
}
.section .btn:not(.primary):hover{ color: var(--paper); border-color: var(--ink); }
.section .btn:not(.primary):hover::after{ transform: scaleX(1); }
.btn.primary{ position:relative; overflow:hidden; z-index:0; isolation:isolate; }
.btn.primary::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:60%; z-index:-1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-180%);
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.btn.primary:hover::after{ transform: translateX(320%); }

/* 4 · Шапка: ужимается + усиление подложки при скролле, строка-аудитории сворачивается */
.header.header-two-row{ transition: background .5s ease, box-shadow .5s ease; }
.header.header-two-row .header-row-1{ transition: padding .35s cubic-bezier(.2,.7,.2,1); }
.header.header-two-row .header-row-2{
  transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .26s ease, padding .34s cubic-bezier(.4,0,.2,1), border-color .3s ease;
  max-height: 64px; overflow: hidden;
}
.header.header-two-row.is-scrolled{ background: rgba(245,244,240,0.97); box-shadow: 0 10px 30px rgba(20,22,26,0.06); }
.header.header-two-row.is-scrolled .header-row-1{ padding-top: 11px; padding-bottom: 11px; }
.header.header-two-row.is-scrolled .header-row-2{
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent;
}

/* 5 · Полоса прогресса чтения */
.read-progress{
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); z-index: 200; transition: width .12s linear; pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .read-progress{ display:none; }
  .btn .arrow, .section .btn:not(.primary)::after, .btn.primary::after{ transition:none; }
}
/* ============================================================
   HERO построчное появление (как Gehl) — translateY + маска, безопасно
   ============================================================ */
.hf-lines{ display:block; }
.hf-lines .ln{ display:block; overflow:hidden; padding-bottom:0.14em; margin-bottom:-0.14em; }
.hf-lines .ln-in{ display:block; }
.js .hf-lines .ln-in{
  transform: translateY(120%);
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.js .hf-lines.lines-go .ln-in{ transform: translateY(0); }
.js .hf-lines.lines-go .ln:nth-child(1) .ln-in{ transition-delay: .10s; }
.js .hf-lines.lines-go .ln:nth-child(2) .ln-in{ transition-delay: .38s; }
@media (prefers-reduced-motion: reduce){
  .js .hf-lines .ln-in{ transform:none !important; transition:none !important; }
}
/* ============================================================
   Построчное появление текстовых блоков (.lead): построчно + слева-направо,
   плавно как остальные ревилы (opacity + лёгкий подъём, общий ease)
   ============================================================ */
.js .reveal-lines .wd{ display:inline-block; }
.js .reveal-lines .wd-in{
  display:inline-block;
  opacity:0;
  transform: translateY(0.45em);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.js .reveal-lines.go .wd-in{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .js .reveal-lines .wd-in{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* ============================================================
   Мини-схема «Почему мы»: дисциплины сходятся в продукт
   ============================================================ */
.wc-cap{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 22px;
}
.wc-diagram{ display: grid; grid-template-columns: 1fr 72px auto; align-items: center; }
.wc-list{ list-style: none; margin: 0; padding: 0 24px 0 0; border-right: 1px solid var(--accent); }
.wc-list li{
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.03em;
  color: var(--ink-soft); padding: 12px 0; white-space: nowrap;
}
.wc-list li + li{ border-top: 1px solid var(--rule-dim); }
.wc-join{ position: relative; height: 1px; background: var(--accent); }
.wc-arrow{
  position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 17px; line-height: 1; font-family: var(--sans);
}
.wc-result{ display: inline-flex; align-items: baseline; gap: 8px; }
.wc-result span:first-child{
  font-family: var(--serif); font-size: clamp(26px, 2.8vw, 38px);
  letter-spacing: -0.02em; color: var(--ink); line-height: 1;
}
.wc-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
@media (max-width: 900px){
  .wc-diagram{ grid-template-columns: 1fr 48px auto; }
  .wc-list li{ font-size: 11.5px; }
}
@media (max-width: 760px){
  .why-grid{ grid-template-columns: 1fr !important; gap: 40px !important; align-items: start !important; }
}
/* ============================================================
   Цифра-доказательство «Почему мы»: 4 дисциплины -> 1 продукт
   ============================================================ */
.ws-cap{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 26px;
}
.ws-big{ display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.ws-unit{ display: flex; flex-direction: column; }
.ws-unit b{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(58px, 6.6vw, 104px); line-height: 0.86;
  letter-spacing: -0.03em; color: var(--ink);
}
.ws-unit i{
  font-family: var(--mono); font-style: normal; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
  margin-top: 12px;
}
.ws-unit.ws-accent b{ color: var(--accent); }
.ws-arrow{
  font-family: var(--sans); font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1; color: var(--accent); align-self: flex-start; margin-top: 0.18em;
}
.ws-sub{
  margin-top: 30px; max-width: 36ch;
  color: var(--ink-soft); font-size: 15px; line-height: 1.6;
}
@media (max-width: 760px){ .ws-big{ gap: 22px; } }
/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ — бургер + полноэкранное меню (<=760px)
   ============================================================ */
.m-burger{ display:none; }
.m-menu{ display:none; }

@media (max-width: 760px){
  /* шапка: только лого + бургер */
  .header.header-two-row .nav-compact{ display:none; }
  .header.header-two-row .header-row-2{ display:none; }
  .header.header-two-row .header-row-1{ padding:14px var(--gutter); }
  .logo .mark{ display:none; }

  .m-burger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:9px; margin:-9px; background:transparent; border:none;
    cursor:pointer; position:relative; z-index:130;
  }
  .m-burger span{
    display:block; height:2px; width:100%; background:var(--ink); border-radius:2px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s ease, background .3s ease;
    transform-origin:center;
  }
  .m-burger[aria-expanded="true"] span{ background:var(--paper); }
  .m-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .m-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .m-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* полноэкранное меню */
  .m-menu{
    display:block; position:fixed; inset:0; z-index:120;
    background:var(--graphite); color:var(--paper);
    transform:translateY(-100%); opacity:0; pointer-events:none;
    transition: transform .5s cubic-bezier(.6,.05,.15,1), opacity .3s ease;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .m-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  body.m-lock{ overflow:hidden; }
  .m-menu-inner{ min-height:100%; padding:92px var(--gutter) 44px; display:flex; flex-direction:column; gap:30px; }
  .m-label{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(245,244,240,.5); padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid rgba(245,244,240,.12);
  }
  .m-group{ display:flex; flex-direction:column; }
  .m-group a, .m-projects{
    font-family:var(--serif); font-size:21px; line-height:1.5; color:rgba(245,244,240,.9);
    padding:7px 0; text-decoration:none;
  }
  .m-group a:active, .m-projects:active{ color:var(--accent); }
  .m-projects{ border-top:1px solid rgba(245,244,240,.12); padding-top:18px; }
  .m-foot{
    margin-top:auto; padding-top:22px; border-top:1px solid rgba(245,244,240,.12);
    font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:rgba(245,244,240,.55);
  }

  /* HERO: кнопки на всю ширину, столбиком */
  .hf-actions{ flex-direction:column; align-items:stretch; }
  .hf-actions .btn{ width:100%; }
}
/* ============================================================
   Мобильное меню — аккордеон (сворачивающиеся вертикальные списки)
   ============================================================ */
@media (max-width: 760px){
  .m-menu-inner{ gap: 0 !important; }
  .m-acc{ display:flex; flex-direction:column; border-bottom:1px solid rgba(245,244,240,.10); }
  .m-acc .m-label{
    display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
    background:transparent; border:none; cursor:pointer; text-align:left; margin:0;
    font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(245,244,240,.62); padding:17px 0;
  }
  .m-chev{ color:var(--accent); font-size:13px; transition:transform .3s ease; }
  .m-acc.is-open .m-chev{ transform:rotate(180deg); }
  .m-acc.is-open .m-label{ color:rgba(245,244,240,.88); }
  .m-links{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.2,.7,.2,1); }
  .m-acc.is-open .m-links{ max-height:460px; }
  .m-links a{
    display:block; font-family:var(--serif); font-size:20px; line-height:1.4;
    color:rgba(245,244,240,.9); padding:8px 0; text-decoration:none;
  }
  .m-links a:first-child{ padding-top:2px; }
  .m-links a:last-child{ padding-bottom:18px; }
  .m-links a:active{ color:var(--accent); }
}
/* ============================================================
   Мобильное Услуги-меню рядом с бургером + «Проекты» как заголовок
   ============================================================ */
.m-actions{ display:none; }
@media (max-width: 760px){
  .m-actions{ display:flex; align-items:center; gap:18px; }

  /* "Услуги" — как пункт навигации на ПК, с подчёркиванием при тапе */
  .m-services{ position:relative; }
  .m-svc-trigger{
    background:transparent; border:none; cursor:pointer; padding:6px 0; margin:0; position:relative;
    font-family:"Lora", Georgia, serif; font-weight:400;
    text-transform:uppercase; letter-spacing:0.06em;
    font-size:15px; color:var(--ink);
  }
  .m-svc-trigger::after{
    content:''; position:absolute; left:0; right:0; bottom:1px; height:1px;
    background:var(--accent); transform:scaleX(0); transform-origin:left;
    transition:transform .28s cubic-bezier(.2,.7,.2,1);
  }
  .m-services.open .m-svc-trigger::after{ transform:scaleX(1); }

  /* выпадающее окошко "Услуги" (как dropdown «О компании» на ПК) */
  .m-svc-panel{
    position:absolute; top:calc(100% + 14px); right:0; min-width:262px;
    background:var(--graphite); color:var(--paper);
    padding:22px 24px 24px; border:1px solid rgba(245,244,240,.08);
    box-shadow:0 24px 50px rgba(20,22,26,.28);
    opacity:0; pointer-events:none; transform:translateY(-6px);
    transition:opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1); z-index:118;
  }
  .m-services.open .m-svc-panel{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .m-svc-head{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(245,244,240,.5); padding-bottom:12px; margin-bottom:8px;
    border-bottom:1px solid rgba(245,244,240,.12);
  }
  .m-svc-panel a{
    display:block; font-family:var(--serif); font-size:17px; line-height:1.4;
    color:rgba(245,244,240,.9); padding:8px 0; text-decoration:none; white-space:nowrap;
  }
  .m-svc-panel a:active{ color:var(--accent); }

  /* бургер компактнее */
  .m-burger{ width:34px; height:34px; padding:7px; margin:-7px; gap:4px; }
  .m-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .m-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* "Проекты" — стиль заголовка группы (моно), прямая ссылка без гармошки */
  .m-projects{
    font-family:var(--mono) !important; font-size:11px !important; letter-spacing:.2em !important;
    text-transform:uppercase !important; color:rgba(245,244,240,.62) !important;
    padding:17px 0 !important; border-top:none !important;
    border-bottom:1px solid rgba(245,244,240,.10);
  }
  .m-projects:active{ color:var(--accent) !important; }
}

/* отступ шапки под камеру/чёлку телефона (safe-area) */
@media (max-width: 760px){
  .header.header-two-row .header-row-1{ padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
}

/* мобильное меню: бургер всплывает крестиком поверх открытого меню — чтобы можно было закрыть */
@media (max-width: 760px){
  .m-burger[aria-expanded="true"]{
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: var(--gutter);
    z-index: 140;
  }
  .m-burger[aria-expanded="true"] span{ background: var(--paper); }
  .m-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .m-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .m-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}
/* кнопка-крестик внутри меню (закрыть) — поверх контента меню, не зависит от шапки */
.m-menu-close{ display:none; }
@media (max-width: 760px){
  .m-menu-close{
    display:inline-flex; align-items:center; gap:9px;
    position:absolute; top:calc(14px + env(safe-area-inset-top, 0px)); right:var(--gutter);
    background:transparent; border:none; cursor:pointer; padding:8px 0; margin:0; z-index:10;
  }
  .m-menu-close .mc-label{
    font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(245,244,240,.7);
  }
  .m-menu-close .mc-x{ position:relative; width:18px; height:18px; display:inline-block; }
  .m-menu-close .mc-x span{
    position:absolute; top:50%; left:0; width:100%; height:1.6px; background:var(--paper); border-radius:2px;
  }
  .m-menu-close .mc-x span:nth-child(1){ transform:translateY(-50%) rotate(45deg); }
  .m-menu-close .mc-x span:nth-child(2){ transform:translateY(-50%) rotate(-45deg); }
  .m-menu-close:active .mc-label{ color:var(--accent); }
}
/* close: «Закрыть» only при наведении + квадратная кнопка-крестик */
@media (max-width: 760px){
  .m-menu-close{ width:40px; height:40px; justify-content:center; gap:0 !important; padding:0 !important; }
  .m-menu-close .mc-label{
    position:absolute; right:calc(100% + 6px); top:50%; white-space:nowrap;
    opacity:0; transform:translateY(-50%) translateX(8px); pointer-events:none;
    transition:opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .m-menu-close:hover .mc-label, .m-menu-close:focus-visible .mc-label{
    opacity:1; transform:translateY(-50%) translateX(0);
  }
}

/* мобайл: двухколоночные inline-сетки в секциях складываются в один столбец */
@media (max-width: 760px){
  .section [style*="grid-template-columns"]{ grid-template-columns:1fr !important; gap:32px !important; }
}
/* Услуги: раскрытие по наведению (hover) + подчёркивание при наведении */
@media (max-width: 760px){
  .m-services:hover .m-svc-panel,
  .m-services:focus-within .m-svc-panel{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .m-services:hover .m-svc-trigger::after,
  .m-services:focus-within .m-svc-trigger::after{ transform:scaleX(1); }
  /* мостик через зазор: курсор переходит с «Услуги» на меню, не теряя hover */
  .m-svc-panel::before{ content:''; position:absolute; top:-16px; left:0; right:0; height:16px; }
}
/* ============================================================
   ПАРЯЩЕЕ ПРОЗРАЧНОЕ МЕНЮ (как Origin) — отдельный скруглённый смок-блок, наши цвета
   ============================================================ */
.header.header-two-row{
  position: fixed;
  top: 14px; left: 44px; right: 44px;
  z-index: 60;
  border-radius: 18px;
  background: rgba(20,22,26,0.12) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  border: 1px solid rgba(245,244,240,0.14) !important;
  box-shadow: 0 20px 50px rgba(20,22,26,0.20);
  transition: background .5s ease, box-shadow .5s ease;
}
.header.header-two-row .header-row-1{ padding: 11px 26px; background: transparent; }
.header.header-two-row .header-row-2{
  padding: 8px 26px; background: transparent;
  border-top: 1px solid rgba(245,244,240,0.12);
}
/* весь текст светлый — блок-смок-стекло читается поверх любого фона */
.header.header-two-row .logo .logo-name{ color: var(--paper); }
.header.header-two-row .logo .mark{ color: rgba(245,244,240,.6); border-left-color: rgba(245,244,240,.25); }
.header.header-two-row .nav-compact a,
.header.header-two-row .dd-trigger-link{
  color: rgba(245,244,240,.92);
  text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-family: var(--mono);
}
.header.header-two-row .lang{ color: rgba(245,244,240,.92); border-left-color: rgba(245,244,240,.28); }
.header.header-two-row .logo-dropdown::after{ background: rgba(245,244,240,.28); }
.header.header-two-row .header-row-2 a{ color: rgba(245,244,240,.80); }
.header.header-two-row .hr2-sep{ color: rgba(245,244,240,.4); }

/* при скролле блок чуть плотнее (остаётся прозрачно-смок) */
.header.header-two-row.is-scrolled{
  background: rgba(20,22,26,0.28) !important;
  box-shadow: 0 18px 44px rgba(20,22,26,0.28);
}

/* hero: контент ниже парящего блока, чтобы не наезжало */
.hero-full .hf-grid{ padding-top: 160px !important; }

/* мобайл: шапка как была (липкая bone-плашка, бургер) — не парящая */
@media (max-width: 760px){
  .header.header-two-row{
    position: sticky; top: 0; left: auto; right: auto;
    border-radius: 0;
    background: rgba(245,244,240,0.92) !important;
    border: none !important; border-bottom: 1px solid var(--rule) !important;
    box-shadow: none;
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  }
  .header.header-two-row .logo .logo-name{ color: var(--ink); }
  .header.header-two-row .logo .mark{ color: var(--ink-mute); border-left-color: var(--rule); }
  .hero-full .hf-grid{ padding-top: calc(82px + env(safe-area-inset-top,0px)) !important; }
}

/* === Подвал · юридические документы === */
.footer-legal{
  max-width: var(--max);
  margin: 0 auto 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(245,244,240,0.14);
}
.footer-legal h4{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.5);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer-legal .ft-legal-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
}
.footer-legal .ft-legal-list a{
  color: rgba(245,244,240,0.72);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.footer-legal .ft-legal-list a:hover{
  color: var(--accent);
  border-bottom-color: var(--accent);
}
@media (max-width: 760px){
  .footer-legal .ft-legal-list{ flex-direction: column; gap: 12px; }
}