/* ==========================================================================
   arbuzov.biz · design system v2
   Бренд: жёлтый #FFE868 · чёрный #0D0D0D · бумага #F3F1EA
   Шрифты: Manrope (текст, заголовки) · Unbounded (имя, цифры) · Cormorant (акценты)
   ========================================================================== */

@view-transition { navigation: auto; }

:root {
  --yellow: #FFE868;
  --black: #0D0D0D;
  --paper: #F3F1EA;

  --f-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --f-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;

  --pad: clamp(16px, 3.4vw, 56px);
  --maxw: 1680px;
  --r: clamp(18px, 2vw, 32px);
  --hdr: 84px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  /* значения темы по умолчанию (бумага) */
  --bg: var(--paper); --fg: var(--black); --muted: #6E6C65; --ln: rgba(13,13,13,.14);
  --fill: var(--yellow); --fill-fg: var(--black);
  --btn: var(--black); --btn-fg: var(--paper); --btn-h: var(--yellow); --btn-hfg: var(--black);
}

/* ---------- темы секций ---------- */
[data-theme="paper"]  { --bg: var(--paper);  --fg: var(--black); --muted: #6E6C65;              --ln: rgba(13,13,13,.14);   --fill: var(--yellow); --fill-fg: var(--black);  --btn: var(--black);  --btn-fg: var(--paper);  --btn-h: var(--yellow); --btn-hfg: var(--black); }
[data-theme="yellow"] { --bg: var(--yellow); --fg: var(--black); --muted: rgba(13,13,13,.62);   --ln: rgba(13,13,13,.2);    --fill: var(--black);  --fill-fg: var(--yellow); --btn: var(--black);  --btn-fg: var(--yellow); --btn-h: var(--paper);  --btn-hfg: var(--black); }
[data-theme="black"]  { --bg: var(--black);  --fg: var(--paper); --muted: rgba(243,241,234,.56); --ln: rgba(243,241,234,.16); --fill: var(--yellow); --fill-fg: var(--black);  --btn: var(--yellow); --btn-fg: var(--black);  --btn-h: var(--paper);  --btn-hfg: var(--black); }
[data-theme] { background-color: var(--bg); color: var(--fg); }
/* графики: одна серия = один цвет; контраст метки к фону ≥ 3:1 (чёрный/бумага 17.2, жёлтый/чёрный 15.7) */
:root, [data-theme="paper"], [data-theme="yellow"] { --mark: var(--black); --track: rgba(13,13,13,.08); }
[data-theme="black"] { --mark: var(--yellow); --track: rgba(255,232,104,.14); }

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--black);
  font: 400 17px/1.55 var(--f-sans); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
ul, ol { margin: 0; }
::selection { background: var(--yellow); color: var(--black); }
[data-theme="yellow"] ::selection { background: var(--black); color: var(--yellow); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.ico { width: 1.1em; height: 1.1em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 200; background: var(--black); color: var(--yellow); padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 10px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; padding-block: clamp(96px, 11vw, 180px); }
.section--tight { padding-top: clamp(24px, 3vw, 48px); }
.section--flush-top { padding-top: 0; }

/* ---------- типографика ---------- */
.t-kicker {
  display: inline-flex; align-items: center; gap: .9em; flex-wrap: wrap;
  font: 600 12px/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.t-kicker b { font-weight: 800; color: var(--fg); letter-spacing: .06em; }
.t-h1, .t-h2 { font-family: var(--f-sans); font-weight: 800; letter-spacing: -.055em; }
.t-h1 { font-size: clamp(46px, 8.4vw, 156px); line-height: .9; }
.t-h2 { font-size: clamp(40px, 6.3vw, 112px); line-height: .92; }
.t-h3 { font: 800 clamp(24px, 2.3vw, 38px)/1.04 var(--f-sans); letter-spacing: -.035em; }
.t-h1 em, .t-h2 em, .t-h3 em, .stack-title em, .ftr-big em, .art-title em {
  font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: -.02em; font-size: 1.12em; line-height: .8;
  padding-left: .04em;
}
.t-lead { font-size: clamp(18px, 1.45vw, 23px); line-height: 1.45; max-width: 34em; letter-spacing: -.012em; }
.t-muted { color: var(--muted); }

/* ---------- заголовок секции ---------- */
.sec-head { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: 28px 40px; align-items: start; margin-bottom: clamp(48px, 6vw, 104px); }
.sec-head > .t-kicker { padding-top: .9em; grid-column: 1; }
.sec-head > :not(.t-kicker) { grid-column: 2; }
.sec-head .t-h2 { max-width: 13.5em; }
.sec-aside { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.sec-aside .t-lead { margin: 0; }

/* ---------- кнопки ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 58px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--btn); color: var(--btn-fg);
  font: 700 15px/1 var(--f-sans); letter-spacing: -.01em; white-space: nowrap;
  transition: color .55s var(--ease), transform .5s var(--ease), box-shadow .4s;
}
.btn::before {
  content: ""; position: absolute; left: -12%; right: -12%; top: 0; height: 125%; z-index: -1;
  background: var(--btn-h); border-radius: 50% 50% 0 0 / 70% 70% 0 0;
  transform: translate3d(0, 102%, 0); transition: transform .65s var(--ease), border-radius .65s var(--ease);
}
.btn:hover { color: var(--btn-hfg); }
.btn:hover::before { transform: translate3d(0, -12%, 0); border-radius: 0; }
.btn .ico { transition: transform .6s var(--ease); }
.btn:hover .ico { transform: rotate(45deg); }
.btn--line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.btn--line::before { background: var(--fg); }
.btn--line:hover { color: var(--bg); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.roll { position: relative; display: inline-block; overflow: hidden; line-height: 1.25; vertical-align: top; }
.roll > span { display: block; transition: transform .6s var(--ease); }
.roll > span + span { position: absolute; left: 0; top: 100%; }
.btn:hover .roll > span, a:hover > .roll > span { transform: translate3d(0, -100%, 0); }
[data-magnetic] { will-change: transform; }

/* ---------- шапка ---------- */
.hdr {
  --h-fg: var(--black); --h-bg: transparent;
  position: fixed; inset: 0 0 auto 0; z-index: 100; color: var(--h-fg); background: var(--h-bg);
  transition: transform .7s var(--ease), background-color .45s, color .45s;
  view-transition-name: site-header;
}
.hdr[data-on="black"] { --h-fg: var(--paper); }
.hdr.is-solid { -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.hdr.is-solid[data-on="paper"] { --h-bg: rgba(243,241,234,.8); }
.hdr.is-solid[data-on="yellow"] { --h-bg: rgba(255,232,104,.84); }
.hdr.is-solid[data-on="black"] { --h-bg: rgba(13,13,13,.72); }
.hdr.is-hidden { transform: translate3d(0, -105%, 0); }
.menu-open .hdr { --h-fg: var(--paper); --h-bg: transparent; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-inner { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); height: var(--hdr); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--black); color: var(--yellow); font: 800 17px/1 var(--f-display);
  transition: background-color .45s, color .45s, transform .9s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-360deg); }
.hdr[data-on="black"] .brand-mark, .menu-open .brand-mark { background: var(--yellow); color: var(--black); }
.brand-name { font: 800 14px/1.05 var(--f-sans); letter-spacing: -.02em; }
.hdr-time { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-left: clamp(0px, 2vw, 40px); }
.hdr-time::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.hdr-nav { display: flex; gap: clamp(16px, 1.8vw, 30px); margin-left: auto; }
.hdr-nav a { position: relative; font: 600 14px/1 var(--f-sans); padding: 8px 0; }
.hdr-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--ease); }
.hdr-nav a:hover::after, .hdr-nav a[aria-current]::after { transform: scaleX(1); transform-origin: 0 50%; }
.hdr .btn { --btn: var(--black); --btn-fg: var(--paper); --btn-h: var(--yellow); --btn-hfg: var(--black); }
.hdr[data-on="yellow"] .btn { --btn-fg: var(--yellow); --btn-h: var(--paper); }
.hdr[data-on="black"] .btn, .menu-open .hdr .btn { --btn: var(--yellow); --btn-fg: var(--black); --btn-h: var(--paper); }
.menu-btn { display: none; align-items: center; gap: 10px; margin-left: auto; padding: 6px 0; background: none; border: 0; cursor: pointer; font: 700 14px/1 var(--f-sans); color: inherit; }
.menu-btn-ico { position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--black); transition: background-color .45s; }
.menu-btn-ico i { position: absolute; left: 13px; right: 13px; height: 1.6px; background: var(--yellow); transition: transform .6s var(--ease), top .6s var(--ease), background-color .45s; }
.menu-btn-ico i:first-child { top: 17px; } .menu-btn-ico i:last-child { top: 23px; }
.hdr[data-on="black"] .menu-btn-ico, .menu-open .menu-btn-ico { background: var(--yellow); }
.hdr[data-on="black"] .menu-btn-ico i, .menu-open .menu-btn-ico i { background: var(--black); }
.menu-open .menu-btn-ico i:first-child { top: 20px; transform: rotate(45deg); }
.menu-open .menu-btn-ico i:last-child { top: 20px; transform: rotate(-45deg); }

/* ---------- полноэкранное меню ---------- */
.menu {
  position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; justify-content: flex-end; gap: 40px;
  padding: calc(var(--hdr) + 24px) var(--pad) calc(28px + env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .9s var(--ease-io), visibility 0s linear .9s;
}
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease-io), visibility 0s; }
.menu-open, .menu-open body { overflow: hidden; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { display: flex; align-items: baseline; gap: 16px; padding: 4px 0; border-bottom: 1px solid var(--ln); }
.menu-num { font: 600 12px/1 var(--f-display); color: var(--yellow); width: 28px; }
.menu-l { display: block; overflow: hidden; font: 800 clamp(40px, 10.5vw, 88px)/1.02 var(--f-sans); letter-spacing: -.055em; }
.menu-l > span { display: block; transform: translate3d(0, 105%, 0); transition: transform .9s var(--ease) calc(.2s + var(--i) * .06s); }
.menu-open .menu-l > span { transform: none; }
.menu-links a[aria-current] .menu-l { color: var(--yellow); }
.menu-foot { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font-weight: 700; opacity: 0; transition: opacity .6s .5s; }
.menu-open .menu-foot { opacity: 1; }
.menu-foot .btn { margin-left: auto; }

/* ---------- прелоадер ---------- */
.pl { display: none; }
.is-preload, .is-preload body { overflow: hidden; }
.is-preload .pl {
  position: fixed; inset: 0; z-index: 9995; display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px var(--pad) 34px; background: var(--black); color: var(--paper);
  clip-path: inset(0 0 0 0); transition: clip-path 1.15s var(--ease-io);
}
.pl.is-out { clip-path: inset(0 0 100% 0); }
.pl-top { display: flex; justify-content: space-between; gap: 20px; font: 600 12px/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.pl-mid { height: 1.08em; overflow: hidden; font: 800 clamp(44px, 8vw, 132px)/1.08 var(--f-sans); letter-spacing: -.055em; }
.pl-words { display: flex; flex-direction: column; transition: transform .7s var(--ease-io); }
.pl-words span:nth-child(odd) { font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: -.02em; }
.pl-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.pl-num { font: 800 clamp(96px, 20vw, 320px)/.78 var(--f-display); color: var(--yellow); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.pl-note { font: 600 12px/1.5 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; text-align: right; opacity: .65; }
.pl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(243,241,234,.12); }
.pl-bar i { display: block; height: 100%; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- зерно ---------- */
.grain {
  position: fixed; inset: -10%; z-index: 9990; pointer-events: none;
  background: url(/img/grain.png) repeat; background-size: 180px; opacity: .55;
  animation: grain 1.1s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate3d(0, 0, 0); } 17% { transform: translate3d(-4%, 3%, 0); } 33% { transform: translate3d(3%, -5%, 0); }
  50% { transform: translate3d(-2%, 5%, 0); } 67% { transform: translate3d(5%, 2%, 0); } 83% { transform: translate3d(-5%, -2%, 0); }
}

/* ---------- курсор ---------- */
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea { cursor: text !important; }
.has-cursor select { cursor: pointer !important; }
.cur { position: fixed; left: 0; top: 0; z-index: 9998; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cur.is-on { opacity: 1; }
.cur-dot {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  display: grid; place-items: center; background: var(--black);
  transition: width .5s var(--ease), height .5s var(--ease), margin .5s var(--ease), background-color .3s, box-shadow .3s, transform .3s var(--ease), opacity .3s;
}
.cur[data-on="black"] .cur-dot { background: var(--yellow); }
.cur.is-link .cur-dot { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--black); }
.cur.is-link[data-on="black"] .cur-dot { box-shadow: inset 0 0 0 1.5px var(--yellow); }
.cur.is-link[data-on="paper"] .cur-dot { background: var(--yellow); box-shadow: none; mix-blend-mode: multiply; }
.cur.is-label .cur-dot { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--black); box-shadow: none; mix-blend-mode: normal; }
.cur.is-label[data-on="black"] .cur-dot { background: var(--yellow); }
.cur.is-text .cur-dot { opacity: 0; }
.cur.is-down .cur-dot { transform: scale(.8); }
.cur-label { font: 700 13px/1 var(--f-sans); letter-spacing: -.01em; color: var(--yellow); white-space: nowrap; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .5s var(--ease); }
.cur[data-on="black"] .cur-label { color: var(--black); }
.cur.is-label .cur-label { opacity: 1; transform: none; }

/* ---------- картинка, следующая за курсором ---------- */
.hover-media { position: fixed; left: 0; top: 0; z-index: 80; width: clamp(240px, 21vw, 340px); aspect-ratio: 4 / 3; pointer-events: none; }
.hm-in { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: var(--black); transform: scale(.3); opacity: 0; transition: transform .7s var(--ease), opacity .4s; }
.hover-media.is-on .hm-in { transform: none; opacity: 1; }
.hm-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.2); transition: opacity .45s, transform .9s var(--ease); }
.hm-in img.is-active { opacity: 1; transform: none; }

/* ---------- появление ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 44px, 0); transition: opacity 1s var(--ease), transform 1.3s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--r)); transition: clip-path 1.5s var(--ease-io); }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--r)); }
.media-in { position: absolute; inset: 0; }
.js [data-reveal="clip"] .media-in { transform: scale(1.3); transition: transform 2.2s var(--ease); }
.js [data-reveal="clip"].is-in .media-in { transform: none; }
.js [data-stagger] > * { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity .9s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--si, 0) * 70ms + var(--d, 0s)); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-split]:not(.is-split) { opacity: 0; }
[data-split] .w { display: inline-block; clip-path: inset(-.25em -.15em -.3em -.15em); }
.js [data-split] .wi { display: inline-block; transform: translate3d(0, 140%, 0); transition: transform 1.2s var(--ease); transition-delay: var(--wd, 0s); }
.js [data-split].is-in .wi { transform: none; }
[data-scrub] .w { display: inline; }
[data-scrub] .w.pic { display: inline-block; }
.js [data-scrub] .w { opacity: .13; }
[data-letters] .ch { display: inline-block; }

/* ---------- ГЕРОЙ ---------- */
.hero-wrap { position: relative; }
.hero { position: sticky; top: var(--hero-top, 0px); height: 100svh; min-height: 640px; overflow: hidden; z-index: 0; }
.hero-inner { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 100%; }
.hero-stage { position: absolute; inset: 0; }
.hero-title { position: absolute; left: 0; right: 0; bottom: max(29svh, 230px); margin: 0; padding-inline: var(--pad); z-index: 1; line-height: 1; font-weight: 400; }
.hero-first { display: block; margin: 0 0 -.06em .04em; font: 500 italic clamp(44px, 6.6vw, 128px)/.9 var(--f-serif); letter-spacing: -.02em; }
.hero-last-wrap { display: block; overflow: hidden; padding-top: .06em; will-change: transform; }
.hero-last { display: inline-block; padding-right: .05em; font: 800 15.4vw/.84 var(--f-display); letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; }
.js .hero-last .ch { transform: translate3d(0, 110%, 0); }
.is-loaded .hero-last .ch { transform: none; transition: transform 1.35s var(--ease) calc(.18s + var(--i) * .055s); }
.hero-portrait { position: absolute; bottom: 0; left: 50%; z-index: 2; height: min(86svh, 1000px); aspect-ratio: 588 / 947; translate: -42% 0; pointer-events: none; }
.hero-portrait-in { width: 100%; height: 100%; }
.hero-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; will-change: transform; }
.js .hero-portrait-in { transform: translate3d(0, 16%, 0); opacity: 0; }
.is-loaded .hero-portrait-in { transform: none; opacity: 1; transition: transform 1.7s var(--ease) .1s, opacity .7s .1s; }
.hero-meta { position: absolute; left: 0; right: 0; top: calc(var(--hdr) + clamp(12px, 3vh, 36px)); z-index: 3; display: flex; justify-content: space-between; gap: 16px; }
.hero .t-kicker { color: var(--black); }
.hero-foot { position: absolute; left: 0; right: 0; bottom: clamp(24px, 4.5vh, 48px); z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.hero-lead { max-width: 23em; margin: 0 0 22px; font: 500 clamp(16px, 1.22vw, 19px)/1.45 var(--f-sans); letter-spacing: -.012em; }
.hero-lead em { font-family: var(--f-serif); font-weight: 600; font-size: 1.22em; letter-spacing: -.01em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-scroll { display: flex; align-items: center; gap: 14px; font: 600 11px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; }
.hero-scroll-line { position: relative; width: 1.5px; height: 58px; overflow: hidden; background: rgba(13,13,13,.18); }
.hero-scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 45%; background: var(--black); animation: scrollLine 2.2s var(--ease-io) infinite; }
@keyframes scrollLine { from { transform: translateY(-100%); } to { transform: translateY(230%); } }
.spin-wrap { position: absolute; z-index: 3; right: calc(var(--pad) + 2vw); top: 29%; }
.spin-badge { position: relative; display: grid; place-items: center; width: clamp(116px, 9.6vw, 168px); aspect-ratio: 1; border-radius: 50%; background: var(--black); color: var(--yellow); }
.spin-text { position: absolute; inset: 5%; width: 90%; height: 90%; animation: spin 18s linear infinite; }
.spin-text text { font: 700 12px var(--f-sans); letter-spacing: .12em; fill: currentColor; }
.spin-arrow { width: 30%; height: 30%; transition: transform .7s var(--ease); }
.spin-badge:hover .spin-arrow { transform: rotate(45deg) scale(1.08); }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-shade { position: absolute; inset: 0; z-index: 5; background: var(--black); opacity: 0; pointer-events: none; }
.js .hero [data-intro] { opacity: 0; transform: translate3d(0, 26px, 0); }
.is-loaded .hero [data-intro] { opacity: 1; transform: none; transition: opacity 1s var(--ease) var(--d, 0s), transform 1.3s var(--ease) var(--d, 0s); }
.js .hero .spin-wrap[data-intro] { transform: scale(0) rotate(-120deg); }
.is-loaded .hero .spin-wrap[data-intro] { transform: none; transition: opacity .6s var(--d), transform 1.4s var(--ease) var(--d); }

/* ---------- манифест ---------- */
.manifesto { position: relative; z-index: 2; min-height: 100svh; border-radius: var(--r) var(--r) 0 0; padding-block: clamp(96px, 11vw, 170px) clamp(80px, 9vw, 140px); box-shadow: 0 -40px 80px rgba(13,13,13,.1); }
.mf-label { margin-bottom: clamp(32px, 4vw, 64px); }
.mf-text { margin: 0; max-width: 17.5em; font: 700 clamp(30px, 4.25vw, 76px)/1.07 var(--f-sans); letter-spacing: -.045em; }
.mf-text em { font-family: var(--f-serif); font-weight: 500; font-size: 1.12em; letter-spacing: -.015em; }
.pic { display: inline-block; width: 2.1em; height: .84em; margin-inline: .06em; border-radius: 999px; overflow: hidden; vertical-align: -.06em; background: var(--yellow); }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.mf-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: clamp(40px, 5vw, 80px); }
.mf-roles { margin: 0; font: 600 15px/1.6 var(--f-sans); color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(64px, 8vw, 128px); border-top: 1px solid var(--ln); }
.stat { padding: 28px 24px 0 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--ln); }
.stat-num { display: flex; align-items: baseline; gap: .08em; font: 700 clamp(52px, 6.2vw, 108px)/.9 var(--f-display); letter-spacing: -.06em; }
.stat-num em { font-family: var(--f-serif); font-weight: 500; font-size: .62em; letter-spacing: -.02em; }
.stat-label { margin: 16px 0 0; max-width: 15em; font-size: 15px; color: var(--muted); }

/* ---------- ленты ---------- */
.tapes { position: relative; z-index: 2; height: clamp(250px, 27vw, 440px); overflow: hidden; }
.tape { position: absolute; left: -8vw; right: -8vw; top: 50%; padding-block: clamp(14px, 1.5vw, 24px); overflow: hidden; }
.tape--a { z-index: 2; background: var(--black); color: var(--yellow); transform: translateY(-50%) rotate(-4deg); }
.tape--b { background: var(--yellow); color: var(--black); transform: translateY(-50%) rotate(3.4deg); }
.tape-track { display: flex; width: max-content; will-change: transform; }
.tape-item { display: inline-flex; align-items: center; gap: .55em; padding-right: .55em; font: 700 clamp(26px, 3.4vw, 58px)/1.1 var(--f-display); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; }
.tape-item::after { content: ""; width: .5em; height: .5em; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.tape--b .tape-item { font: 600 italic clamp(32px, 4vw, 68px)/1.05 var(--f-serif); letter-spacing: -.015em; text-transform: none; }

/* ---------- стопка форматов ---------- */
.formats { position: relative; z-index: 2; padding-block: clamp(96px, 11vw, 180px); }
.stack { display: flex; flex-direction: column; gap: 6vh; }
.stack-card {
  position: sticky; top: calc(var(--hdr) + 12px + var(--i) * 16px);
  display: grid; grid-template-columns: 1.05fr .95fr; height: min(78svh, 760px); min-height: 540px;
  border-radius: var(--r); overflow: hidden; transform-origin: 50% 0; will-change: transform;
}
.stack-card[data-theme="black"] { box-shadow: inset 0 0 0 1px var(--ln); }
.stack-body { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(24px, 3.2vw, 56px); }
.stack-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.stack-num { font: 700 13px/1 var(--f-display); letter-spacing: .02em; }
.stack-title { margin-bottom: .22em; font: 800 clamp(46px, 6.2vw, 112px)/.9 var(--f-sans); letter-spacing: -.058em; }
.stack-desc { margin: 0; max-width: 30em; font-size: clamp(16px, 1.22vw, 20px); line-height: 1.5; opacity: .82; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.tags li, .tag { font: 600 13px/1 var(--f-sans); padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ln); }
.stack-media { position: relative; margin: clamp(10px, 1vw, 16px); border-radius: calc(var(--r) - 8px); overflow: hidden; background: var(--black); }
.stack-media img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.stack-shade { position: absolute; inset: 0; background: var(--black); opacity: 0; pointer-events: none; }

/* ---------- строки ---------- */
.rows { border-top: 1px solid var(--ln); }
.row {
  position: relative; isolation: isolate; display: grid; align-items: center; gap: 10px 28px;
  grid-template-columns: minmax(64px, 8%) 1fr minmax(170px, 24%) 52px;
  padding: clamp(20px, 2.1vw, 34px) 0; border-bottom: 1px solid var(--ln);
  transition: color .5s var(--ease);
}
.row::before { content: ""; position: absolute; inset: 0 calc(var(--pad) * -1); z-index: -1; background: var(--fill); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .75s var(--ease); }
.row:hover, .row:focus-visible { color: var(--fill-fg); }
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row-num { font: 600 13px/1.2 var(--f-sans); letter-spacing: .04em; color: var(--muted); transition: color .5s; }
.row-title { font: 700 clamp(21px, 2.45vw, 42px)/1.08 var(--f-sans); letter-spacing: -.04em; transition: transform .75s var(--ease); }
.row:hover .row-title { transform: translate3d(clamp(8px, 1vw, 18px), 0, 0); }
.row-meta, .row-desc { font-size: 15px; line-height: 1.45; color: var(--muted); transition: color .5s; }
.row:hover .row-num, .row:hover .row-meta, .row:hover .row-desc { color: inherit; }
.row-arrow { justify-self: end; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ln); transition: transform .75s var(--ease), background-color .5s, color .5s, box-shadow .5s; }
.row:hover .row-arrow { background: var(--fill-fg); color: var(--fill); box-shadow: none; transform: rotate(45deg); }
.row-body { display: flex; flex-direction: column; gap: 8px; }
.row-body .row-desc { max-width: 44em; }
.row--desc { align-items: start; }
.row--desc .row-num, .row--desc .row-meta { padding-top: .5em; }
.row--desc .row-title { font-size: clamp(22px, 2.2vw, 36px); }
.row--status { grid-template-columns: minmax(80px, 12%) 1fr minmax(200px, 30%); }
.row--media { grid-template-columns: minmax(80px, 12%) 1fr 52px; }
.row--article .badge { vertical-align: middle; margin-left: 6px; }
.row--empty { grid-template-columns: minmax(64px, 8%) 1fr minmax(170px, 24%); }
.topic-group-title { margin: clamp(48px, 5vw, 80px) 0 18px; }
.topic-group-title:first-of-type { margin-top: 0; }

/* ---------- горизонтальная галерея ---------- */
.hs { position: relative; z-index: 2; }
.hs-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hs-track { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 44px); width: max-content; padding-inline: var(--pad); will-change: transform; }
.hs-intro { flex: none; width: min(560px, 84vw); padding-right: clamp(0px, 4vw, 80px); }
.hs-intro .t-h2 { margin: 22px 0 26px; }
.hs-item { flex: none; margin: 0; }
.hs-item--low { align-self: flex-end; }
.hs-img { position: relative; height: 54svh; aspect-ratio: var(--ar, 4 / 3); border-radius: 18px; overflow: hidden; background: #1c1c1c; }
.hs-item--tall .hs-img { height: 64svh; }
.hs-img img { position: absolute; top: 0; left: -8%; width: 116%; max-width: none; height: 100%; object-fit: cover; will-change: transform; }
.hs-cap { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; font: 700 15px/1.3 var(--f-sans); letter-spacing: -.01em; }
.hs-cap span { font: 600 11px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.hs-end { flex: none; display: grid; place-items: center; align-content: center; gap: 12px; width: clamp(200px, 19vw, 300px); aspect-ratio: 1; margin-left: clamp(20px, 3vw, 64px); padding: 28px; border-radius: 50%; background: var(--yellow); color: var(--black); text-align: center; font: 800 clamp(18px, 1.5vw, 24px)/1.15 var(--f-sans); letter-spacing: -.03em; transition: transform .8s var(--ease); }
.hs-end:hover { transform: scale(1.06) rotate(-4deg); }
.hs-end .ico { width: 28px; height: 28px; }
.hs-progress { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(24px, 5vh, 48px); height: 1px; background: var(--ln); }
.hs-progress i { position: absolute; inset: 0; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- стена клиентов ---------- */
.wall { margin: 0; font: 700 clamp(28px, 4.4vw, 78px)/1.16 var(--f-sans); letter-spacing: -.045em; }
.wall > span { display: inline-block; transition: color .35s, opacity .9s var(--ease), transform 1.2s var(--ease); }
.wall > span:not(:last-of-type)::after { content: "/"; margin: 0 .28em; font-weight: 300; color: var(--muted); }
.wall:hover > span { color: rgba(13,13,13,.22); }
.wall > span:hover { color: var(--fg); }
.wall > em { display: inline-block; font: 500 italic 1.12em/1 var(--f-serif); color: var(--muted); letter-spacing: -.02em; margin-left: .2em; }

/* ---------- аккордеон ---------- */
.acc { border-top: 1px solid var(--ln); }
.acc-item { border-bottom: 1px solid var(--ln); }
.acc-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 2vw, 30px) 0; cursor: pointer; list-style: none; font: 700 clamp(19px, 1.7vw, 27px)/1.25 var(--f-sans); letter-spacing: -.028em; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-ico { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ln); transition: background-color .45s, color .45s, box-shadow .45s, transform .7s var(--ease); }
.acc-ico::before, .acc-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px; background: currentColor; transition: transform .6s var(--ease); }
.acc-ico::after { transform: rotate(90deg); }
.acc-item summary:hover .acc-ico { box-shadow: inset 0 0 0 1px var(--fg); }
.acc-item.is-open .acc-ico, html:not(.js) .acc-item[open] .acc-ico { background: var(--fill); color: var(--fill-fg); box-shadow: none; transform: rotate(180deg); }
.acc-item.is-open .acc-ico::after, html:not(.js) .acc-item[open] .acc-ico::after { transform: rotate(0deg); }
.acc-body { overflow: hidden; }
.acc-in { max-width: 50em; padding: 0 0 clamp(22px, 2vw, 32px); color: var(--muted); font-size: 17px; line-height: 1.62; }
.acc-in p:last-child { margin: 0; }
.acc--cases .acc-item summary { display: grid; grid-template-columns: minmax(48px, 6%) 1fr minmax(210px, 30%) 46px; gap: 24px; font: 800 clamp(28px, 3.6vw, 64px)/1 var(--f-sans); letter-spacing: -.055em; padding: clamp(20px, 2.2vw, 34px) 0; }
.acc--cases .case-name { transition: transform .75s var(--ease); }
.acc--cases summary:hover .case-name { transform: translate3d(clamp(6px, .8vw, 14px), 0, 0); }
.case-idx { font: 600 13px/1 var(--f-sans); letter-spacing: .06em; color: var(--muted); }
.case-metric { font: 500 14px/1.35 var(--f-sans); letter-spacing: 0; color: var(--muted); }
.case-metric b { display: block; margin-bottom: 4px; font: 700 clamp(22px, 2vw, 34px)/1 var(--f-display); letter-spacing: -.045em; color: var(--fg); }
.case-metric--plain { font-size: 15px; }
.case-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 3vw, 64px); align-items: start; padding: 6px 0 clamp(32px, 3.4vw, 56px); color: var(--fg); }
.case-shot { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: #1c1c1c; }
.case-shot img { width: 100%; height: 100%; object-fit: cover; }
.case-about { margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.case-text h3 { margin-bottom: 22px; font: 800 clamp(22px, 1.9vw, 30px)/1.12 var(--f-sans); letter-spacing: -.035em; }
.case-label { margin-bottom: 8px; }
.case-text .checks li { font-size: 15.5px; }
.case-result, .case-note { margin: 18px 0 0; padding: 18px 20px; border-radius: 16px; font-size: 16px; line-height: 1.5; }
.case-result { background: var(--fill); color: var(--fill-fg); font-weight: 600; }
.case-note { box-shadow: inset 0 0 0 1px var(--ln); color: var(--fg); margin-top: 10px; }
.case-result b, .case-note b { display: block; margin-bottom: 6px; font: 800 11px/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; }
.case-note b { color: var(--muted); }

/* ---------- большие кейсы: карточки ---------- */
.fcases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 2.4vw, 40px) clamp(14px, 1.6vw, 28px); }
.fcase { display: flex; flex-direction: column; gap: 18px; }
.fcase-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--black); }
.fcase-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.fcase:hover .fcase-media img { transform: scale(1.06); }
.fcase-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fcase-title { font: 800 clamp(23px, 2.1vw, 34px)/1.06 var(--f-sans); letter-spacing: -.045em; }
.fcase-metric { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.fcase-metric b { font: 700 clamp(28px, 2.5vw, 42px)/1 var(--f-display); letter-spacing: -.05em; color: var(--fg); white-space: nowrap; }
.fcase-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; font-size: 15px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .6s var(--ease); }
.fcase:hover .fcase-go { background-size: 100% 1.5px; }
.fcase-go .ico { transition: transform .6s var(--ease); }
.fcase:hover .fcase-go .ico { transform: rotate(45deg); }

/* ---------- страница кейса ---------- */
.cmeta { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--ln); }
.cmeta > div { padding: 22px 24px 0 0; }
.cmeta > div + div { padding-left: 24px; border-left: 1px solid var(--ln); }
.cmeta .t-kicker { display: flex; margin-bottom: 10px; }
.cmeta p { margin: 0; font: 600 16px/1.45 var(--f-sans); letter-spacing: -.01em; }
.stats--flush { margin-top: 0; }
.stats--2 { grid-template-columns: 1fr 1fr; }
.stats--2 .stat:nth-child(3) { padding-left: 0; border-left: 0; }
.stats--2 .stat:nth-child(n+3) { margin-top: 28px; border-top: 1px solid var(--ln); }
.sec-head--gap { margin-top: clamp(96px, 10vw, 170px); }
.card p + p { margin-top: 10px; }
.card p b { font-weight: 800; }
.offer .card-big { margin: 6px 0 0; font-size: clamp(30px, 2.8vw, 46px); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card-big { display: block; margin-bottom: 10px; font: 700 clamp(34px, 3.2vw, 54px)/1 var(--f-display); letter-spacing: -.05em; }
.dirs { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 4vw, 64px) clamp(16px, 2vw, 32px); }
.dir { display: flex; flex-direction: column; gap: 16px; }
.dir-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: #1c1c1c; }
.dir-media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.dir h3 { font: 800 clamp(32px, 3.2vw, 56px)/.95 var(--f-sans); letter-spacing: -.055em; }
.dir-goal { margin: 0; font: 600 17px/1.45 var(--f-sans); }
.years { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ln); }
.year { padding: 26px 24px 0 0; }
.year + .year { padding-left: 24px; border-left: 1px solid var(--ln); }
.year-n { margin-bottom: 14px; font: 700 clamp(40px, 4.2vw, 72px)/.9 var(--f-display); letter-spacing: -.055em; }
.year-focus { margin: 0 0 14px; font: 700 16px/1.4 var(--f-sans); }
.year ul { margin: 0; padding: 0; list-style: none; }
.year li { padding: 7px 0; border-top: 1px solid var(--ln); font-size: 15px; line-height: 1.35; color: var(--muted); }
.step--done .step-dot { background: var(--fg); color: var(--bg); }
.step-state { display: block; margin: -14px 0 12px; font: 700 11px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.note { max-width: 46em; margin: 0; padding: 20px 22px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ln); font-size: 15px; line-height: 1.55; color: var(--muted); }
.note b { color: var(--fg); }

/* ---------- графики ---------- */
.chart { position: relative; margin: 0; }
.chart-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; margin-bottom: 28px; }
.chart-title { font: 700 17px/1.35 var(--f-sans); letter-spacing: -.01em; }
.chart-src { font-size: 13px; color: var(--muted); }
.chart-plot { position: relative; height: clamp(220px, 24vw, 320px); margin: 0 0 38px 46px; }
.chart-grid { position: absolute; inset: 0; pointer-events: none; }
.chart-grid span { position: absolute; left: 0; right: 0; bottom: calc(var(--t) * 100%); height: 0; border-top: 1px solid var(--ln); }
.chart-grid span:first-child { border-top-color: var(--muted); }
.chart-grid span::before { content: attr(data-l); position: absolute; right: calc(100% + 10px); top: -.62em; font: 500 12px/1 var(--f-sans); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-cols { position: absolute; inset: 0; display: flex; }
.chart-col { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; border-radius: 8px; }
.chart-col:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.chart-bar { width: min(24px, 56%); height: calc(var(--v) * 100%); border-radius: 4px 4px 0 0; background: var(--mark); transform-origin: 50% 100%; transition: filter .3s, box-shadow .3s; }
.chart-col.is-hot .chart-bar { box-shadow: 0 0 0 4px var(--track); }
.chart-val { position: absolute; bottom: calc(var(--v) * 100% + 8px); font: 700 14px/1 var(--f-sans); color: var(--fg); white-space: nowrap; }
.chart-x { position: absolute; top: calc(100% + 12px); font: 500 13px/1 var(--f-sans); color: var(--muted); white-space: nowrap; }
.js [data-chart] .chart-bar { transform: scaleY(0); transition: transform 1.3s var(--ease) calc(var(--i, 0) * 90ms), box-shadow .3s; }
.js [data-chart].is-in .chart-bar { transform: none; }
.js [data-chart] .chart-val { opacity: 0; transition: opacity .6s calc(.6s + var(--i, 0) * 90ms); }
.js [data-chart].is-in .chart-val { opacity: 1; }
.hbars { display: flex; flex-direction: column; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(150px, 32%) 1fr minmax(64px, auto); align-items: center; gap: 18px; padding: 8px 0; border-radius: 8px; }
.hbar:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.hbar-label { font: 600 15px/1.3 var(--f-sans); }
.hbar-label small { display: block; font-weight: 500; font-size: 13px; color: var(--muted); }
.hbar-track { position: relative; height: 24px; border-radius: 4px; background: var(--track); }
.hbar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: 0 4px 4px 0; background: var(--mark); transform-origin: 0 50%; transition: box-shadow .3s; }
.hbar.is-hot .hbar-fill { box-shadow: 0 0 0 4px var(--track); }
.hbar-val { font: 700 16px/1 var(--f-sans); text-align: right; white-space: nowrap; }
.js [data-chart] .hbar-fill { transform: scaleX(0); transition: transform 1.3s var(--ease) calc(var(--i, 0) * 110ms), box-shadow .3s; }
.js [data-chart].is-in .hbar-fill { transform: none; }
.chart-tip { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 10px; background: var(--fg); color: var(--bg); font: 500 12px/1.2 var(--f-sans); white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); }
.chart-tip[hidden] { display: none; }
.chart-tip strong { font: 800 16px/1.1 var(--f-sans); }
.chart-tip span { opacity: .72; }
.chart-table { margin-top: 18px; font-size: 14px; }
.chart-table summary { display: inline-flex; cursor: pointer; list-style: none; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--ln); }
.chart-table summary::-webkit-details-marker { display: none; }
.chart-table summary:hover { color: var(--fg); }
.chart-table table { margin-top: 12px; border-collapse: collapse; min-width: min(100%, 360px); }
.chart-table th, .chart-table td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--ln); text-align: left; font-variant-numeric: tabular-nums; }
.chart-table th { font-weight: 700; }

/* ---------- орбита систем ---------- */
.orbit { position: relative; width: min(100%, 640px); aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.orbit::before, .orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid var(--ln); }
.orbit::before { inset: 11%; }
.orbit::after { inset: 25%; border-style: solid; opacity: .6; }
.orbit-core { position: absolute; inset: 31%; z-index: 1; display: grid; place-items: center; padding: 6%; border-radius: 50%; background: var(--yellow); color: var(--black); text-align: center; font: 800 clamp(15px, 3.4cqi, 24px)/1.1 var(--f-sans); letter-spacing: -.03em; }
.orbit-ring { position: absolute; inset: 0; animation: spin 90s linear infinite; }
.orbit:hover .orbit-ring, .orbit:hover .orbit-label { animation-play-state: paused; }
.orbit-node { position: absolute; left: 50%; top: 50%; width: 19cqi; height: 19cqi; margin: -9.5cqi 0 0 -9.5cqi; transform: rotate(var(--a)) translate(39cqi) rotate(calc(-1 * var(--a))); }
.orbit-label { display: grid; place-items: center; width: 100%; height: 100%; padding: 6px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); text-align: center; font: 700 clamp(11px, 2.4cqi, 16px)/1.1 var(--f-sans); letter-spacing: -.01em; animation: spin 90s linear infinite reverse; }

/* ---------- следующий кейс ---------- */
.next-case { position: relative; z-index: 3; }
.next-case-in { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px 40px; padding-block: clamp(72px, 9vw, 150px); }
.next-case .t-kicker { grid-column: 1 / -1; }
.next-case-title { max-width: 13em; font: 800 clamp(38px, 6.6vw, 120px)/.92 var(--f-sans); letter-spacing: -.06em; transition: transform .9s var(--ease); }
.next-case-in:hover .next-case-title { transform: translate3d(clamp(8px, 1.4vw, 24px), 0, 0); }
.next-case-arrow { display: grid; place-items: center; width: clamp(72px, 9vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--black); color: var(--yellow); transition: transform .9s var(--ease); }
.next-case-arrow .ico { width: 40%; height: 40%; }
.next-case-in:hover .next-case-arrow { transform: rotate(45deg); }

/* ---------- сетка карточек ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ln); border-left: 1px solid var(--ln); }
.card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: clamp(280px, 24vw, 380px); padding: clamp(24px, 2.4vw, 40px); border-right: 1px solid var(--ln); border-bottom: 1px solid var(--ln); transition: color .55s var(--ease); }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .8s var(--ease); }
.card:hover { color: var(--fill-fg); }
.card:hover::before { transform: scaleY(1); }
.card-num { font: 700 13px/1 var(--f-display); }
.card h3 { margin-bottom: 14px; font: 800 clamp(26px, 2.3vw, 40px)/1 var(--f-sans); letter-spacing: -.045em; }
.card p { margin: 0; font-size: 16px; line-height: 1.55; opacity: .78; }

/* ---------- предложения (консалтинг) ---------- */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.2vw, 20px); }
.offers--2 { grid-template-columns: repeat(2, 1fr); }
.offer { display: flex; flex-direction: column; gap: 18px; min-height: 560px; padding: clamp(26px, 2.8vw, 46px); border-radius: var(--r); }
.offers--2 .offer { min-height: 0; }
.offer[data-theme="paper"] { box-shadow: inset 0 0 0 1px var(--ln); }
.offer h3 { font: 800 clamp(34px, 3.4vw, 58px)/.95 var(--f-sans); letter-spacing: -.055em; }
.offer > p { margin: 0; opacity: .82; }
.offer-result { margin-top: auto !important; padding-top: 18px; border-top: 1px solid var(--ln); font-size: 15px; }
.checks { margin: 0; padding: 0; list-style: none; }
.checks li { position: relative; padding: 13px 0 13px 30px; border-top: 1px solid var(--ln); font-size: 16px; line-height: 1.45; }
.checks li::before { content: ""; position: absolute; left: 0; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--fill); }
[data-theme="yellow"] .checks li::before { background: var(--black); }

/* ---------- шаги ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--ln); transform-origin: 0 50%; }
.js .steps::before { transform: scaleX(0); transition: transform 1.8s var(--ease-io) .2s; }
.js .steps.is-in::before { transform: none; }
.step { position: relative; padding-right: 28px; }
.step-dot { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 26px; border-radius: 50%; background: var(--fill); color: var(--fill-fg); font: 700 13px/1 var(--f-display); }
.step h3 { margin-bottom: 10px; font: 800 22px/1.1 var(--f-sans); letter-spacing: -.035em; }
.step p { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- медиа-блоки ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.split--top { align-items: start; }
.media { position: relative; overflow: hidden; border-radius: var(--r); background: var(--black); }
.media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.media--tall { aspect-ratio: 4 / 5; }
.media--portrait { aspect-ratio: 630 / 1000; }
.media--wide { aspect-ratio: 16 / 9; }
.media--square { aspect-ratio: 1; }

/* ---------- шапка внутренних страниц ---------- */
.phero { position: relative; padding: calc(var(--hdr) + clamp(48px, 8vw, 120px)) 0 clamp(40px, 5vw, 80px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3.4vw, 52px); font: 500 13px/1.3 var(--f-sans); color: var(--muted); }
.crumbs a:hover { color: var(--fg); }
.phero .t-kicker { margin-bottom: clamp(20px, 2.4vw, 36px); }
.phero-title { max-width: 13em; }
.phero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px; margin-top: clamp(32px, 4vw, 64px); }
.phero-foot .t-lead { margin: 0; }
.phero-media { position: relative; height: clamp(320px, 72svh, 860px); margin: clamp(48px, 6vw, 96px) var(--pad) 0; overflow: hidden; border-radius: var(--r); background: var(--black); }
.phero-media img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.phero--split .phero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 96px); align-items: end; }
.phero--split .phero-title { max-width: 11em; }

/* ---------- цитата ---------- */
.quote { margin: 0; max-width: 18em; font: 500 italic clamp(40px, 6vw, 108px)/1 var(--f-serif); letter-spacing: -.03em; }
.quote-cap { margin-top: 32px; }

/* ---------- колонки ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); }
.cols3 h3 { margin: 14px 0 20px; font: 800 clamp(26px, 2.4vw, 38px)/1 var(--f-sans); letter-spacing: -.045em; }

/* ---------- жизнь ---------- */
.life { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 20px); align-items: start; }
.life figure { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 18px; background: #1c1c1c; }
.life figure:nth-child(even) { margin-top: clamp(40px, 10vw, 160px); }
.life img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; transition: scale 1.2s var(--ease); }
.life figure:hover img { scale: 1.06; }
.life figcaption { position: absolute; left: 16px; bottom: 14px; font: 800 15px/1 var(--f-sans); color: var(--paper); text-shadow: 0 2px 14px rgba(0,0,0,.5); }

/* ---------- контакты и форма ---------- */
.row--contact { grid-template-columns: minmax(120px, 16%) 1fr 52px; }
.row--contact .row-title { font-size: clamp(26px, 4vw, 68px); letter-spacing: -.055em; }
.madlib { font: 600 clamp(22px, 2.6vw, 42px)/1.75 var(--f-sans); letter-spacing: -.03em; max-width: 26em; }
.madlib p { margin: 0 0 .3em; }
.madlib input, .madlib select, .madlib textarea {
  max-width: 100%; min-width: 3.5em; padding: 0 .12em; border: 0; border-bottom: 2px solid var(--ln); border-radius: 0;
  background: transparent; color: var(--fg); font: inherit; letter-spacing: inherit; vertical-align: baseline;
  transition: border-color .3s;
}
.madlib input:focus, .madlib select:focus, .madlib textarea:focus { outline: none; border-bottom-color: var(--fg); }
.madlib input::placeholder, .madlib textarea::placeholder { color: var(--muted); font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.madlib select { -webkit-appearance: none; appearance: none; padding-right: 1.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230D0D0D' stroke-width='2'/%3E%3C/svg%3E") no-repeat right center / .7em; }
.madlib textarea { display: block; width: 100%; min-height: 2.2em; margin-top: .15em; resize: vertical; line-height: 1.4; }
.madlib-measure { position: absolute; visibility: hidden; white-space: pre; height: 0; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(32px, 4vw, 56px); }
.form-note { margin: 0; max-width: 30em; font-size: 14px; color: var(--muted); }

/* ---------- статьи: список ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 3vw, 48px); }
.chip { padding: 12px 18px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--ln); font: 600 14px/1 var(--f-sans); cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.chip.is-active { background: var(--fg); color: var(--bg); box-shadow: none; }
.agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 3.4vw, 56px) clamp(16px, 1.6vw, 28px); }
.filter-item[hidden] { display: none; }
.acard { display: flex; flex-direction: column; gap: 14px; }
.acard-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: var(--yellow); }
.acard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.acard:hover .acard-media img { transform: scale(1.07); }
.acard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 13px/1.3 var(--f-sans); color: var(--muted); }
.acard-title { font: 800 clamp(21px, 1.8vw, 28px)/1.12 var(--f-sans); letter-spacing: -.035em; }
.acard-title span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .8s var(--ease); }
.acard:hover .acard-title span { background-size: 100% 1.5px; }
.acard-desc { margin: 0; font-size: 15px; color: var(--muted); }
.badge { display: inline-block; padding: 7px 10px; border-radius: 999px; background: var(--yellow); color: var(--black); font: 700 11px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; }
.badge--draft { background: #FFD6CC; color: #8F2A12; }
[data-theme="yellow"] .badge:not(.badge--draft) { background: var(--black); color: var(--yellow); }

/* ---------- статья ---------- */
.read-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 101; height: 3px; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: var(--black); transform-origin: 0 50%; transform: scaleX(0); }
.draft-banner { position: fixed; left: 16px; bottom: 16px; z-index: 90; padding: 10px 16px; border-radius: 999px; background: #FFD6CC; color: #8F2A12; font: 700 13px/1 var(--f-sans); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.art-head { padding: calc(var(--hdr) + clamp(48px, 7vw, 110px)) 0 clamp(32px, 4vw, 56px); }
.art-title { max-width: 16em; margin: clamp(18px, 2vw, 28px) 0 clamp(24px, 3vw, 44px); font: 800 clamp(38px, 5.6vw, 98px)/.95 var(--f-sans); letter-spacing: -.055em; }
.art-sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.art-sub .t-lead { margin: 0; }
.art-meta { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--muted); }
.art-meta img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--yellow); }
.art-meta a { color: var(--fg); font-weight: 800; }
.art-cover { position: relative; aspect-ratio: 21 / 9; margin: 0 0 clamp(48px, 6vw, 104px); overflow: hidden; border-radius: var(--r); background: var(--black); }
.art-cover img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.art-grid { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 780px); justify-content: center; gap: clamp(40px, 6vw, 110px); padding-bottom: clamp(80px, 9vw, 140px); }
.art-side { position: sticky; top: 110px; align-self: start; }
.art-main { min-width: 0; }
.toc .t-kicker { margin-bottom: 14px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 30px 1fr; gap: 4px; padding: 10px 0; border-top: 1px solid var(--ln); font: 600 14px/1.35 var(--f-sans); color: var(--muted); transition: color .3s; }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 600 11px/1.8 var(--f-display); }
.toc a:hover, .toc a.is-active { color: var(--fg); }
.tldr { margin-bottom: 48px; padding: clamp(24px, 2.6vw, 40px); border-radius: var(--r); background: var(--yellow); color: var(--black); }
.tldr .t-kicker { color: rgba(13,13,13,.62); }
.tldr .t-kicker b { color: var(--black); }
.tldr ul { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: t; }
.tldr li { counter-increment: t; display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 13px 0; border-top: 1px solid rgba(13,13,13,.16); font: 600 17px/1.45 var(--f-sans); letter-spacing: -.012em; }
.tldr li::before { content: counter(t, decimal-leading-zero); font: 700 12px/1.9 var(--f-display); }
.prose { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.75; }
.prose h2, .art-h2 { margin: 2.1em 0 .65em; font: 800 clamp(26px, 2.6vw, 40px)/1.08 var(--f-sans); letter-spacing: -.045em; scroll-margin-top: 110px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.8em 0 .6em; font: 800 22px/1.2 var(--f-sans); letter-spacing: -.03em; }
.prose a { background: linear-gradient(var(--yellow), var(--yellow)) 0 92% / 100% .38em no-repeat; transition: background-size .45s var(--ease); }
.prose a:hover { background-size: 100% 88%; }
.prose strong { font-weight: 800; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--muted); font-weight: 700; }
.prose blockquote { margin: 2em 0; padding-left: .9em; border-left: 4px solid var(--yellow); font: 500 italic clamp(28px, 2.8vw, 44px)/1.12 var(--f-serif); letter-spacing: -.015em; }
.prose blockquote p { margin: 0; }
.prose img { border-radius: 16px; }
.prose code { padding: .1em .35em; border-radius: 6px; background: rgba(13,13,13,.06); font-size: .9em; }
.prose pre { overflow-x: auto; padding: 20px; border-radius: 16px; background: var(--black); color: var(--paper); }
.prose hr { height: 1px; margin: 3em 0; border: 0; background: var(--ln); }
.table-wrap { margin: 2em 0; overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ln); }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.prose th, .prose td { padding: 14px 16px; border-bottom: 1px solid var(--ln); text-align: left; vertical-align: top; }
.prose th { background: var(--yellow); font-weight: 800; }
.prose tr:last-child td { border-bottom: 0; }
.art-main .tags { margin: 36px 0 0; }
.art-main .tag { color: var(--muted); }
.art-faq { margin-top: 72px; }
.art-faq .art-h2 { margin-top: 0; }
.author { display: grid; grid-template-columns: 112px 1fr; gap: 28px; align-items: center; margin-top: 72px; padding: clamp(24px, 2.8vw, 44px); border-radius: var(--r); }
.author img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; background: var(--yellow); }
.author-name { margin-bottom: 8px; font: 800 24px/1.1 var(--f-sans); letter-spacing: -.035em; }
.author p { color: var(--muted); font-size: 15px; }

/* ---------- 404 ---------- */
.e404 { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr) + 40px) 0 80px; }
.e404-num { overflow: hidden; margin: 12px 0 8px; font: 800 clamp(120px, 30vw, 460px)/.8 var(--f-display); letter-spacing: -.07em; }
.js .e404-num .ch { transform: translate3d(0, 100%, 0); transition: transform 1.3s var(--ease) calc(var(--i) * .08s); }
.js .e404-num.is-in .ch { transform: none; }
.e404 .t-lead { margin: 24px 0 32px; }

/* ---------- футер ---------- */
.ftr { position: relative; z-index: 3; overflow: hidden; padding-top: clamp(96px, 11vw, 170px); }
.ftr-top { position: relative; margin-bottom: clamp(64px, 8vw, 128px); }
.ftr-big { display: block; width: fit-content; margin-top: clamp(20px, 2.4vw, 36px); font: 800 clamp(54px, 10vw, 184px)/.9 var(--f-sans); letter-spacing: -.06em; }
.ftr-line { display: block; }
.ftr-big em { color: var(--yellow); }
.ftr-arr { display: inline-block; vertical-align: middle; color: var(--yellow); transition: transform .9s var(--ease); }
.ftr-arr .ico { width: .7em; height: .7em; }
.ftr-big:hover .ftr-arr { transform: rotate(45deg); }
.ftr-circle-wrap { position: absolute; right: 0; bottom: 0; }
.circle-btn { display: grid; place-items: center; width: clamp(130px, 12vw, 190px); aspect-ratio: 1; border-radius: 50%; background: var(--yellow); color: var(--black); text-align: center; font: 800 clamp(14px, 1.1vw, 17px)/1.2 var(--f-sans); letter-spacing: -.02em; transition: transform .6s var(--ease); }
.circle-btn .mag-in { display: block; transition: transform .6s var(--ease); }
.ftr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 40px 0; border-top: 1px solid var(--ln); }
.ftr-h { margin-bottom: 16px; font: 600 12px/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ftr-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ftr-links a { font: 600 16px/1.35 var(--f-sans); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.ftr-links a:hover { background-size: 100% 1px; color: var(--yellow); }
.ftr-time { margin: 0 0 8px; font: 700 clamp(36px, 3.4vw, 54px)/1 var(--f-display); letter-spacing: -.05em; }
.ftr-time small { font: 600 12px var(--f-sans); letter-spacing: .14em; color: var(--muted); }
.ftr-note { font-size: 14px; color: var(--muted); }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 20px 0; border-top: 1px solid var(--ln); font-size: 13px; color: var(--muted); }
.ftr-bottom a:hover { color: var(--yellow); }
.ftr-word-wrap { overflow: hidden; margin-top: 12px; }
.ftr-word { display: flex; width: max-content; margin: 0 auto -.13em; padding-right: .04em; font: 800 14.6vw/.86 var(--f-display); letter-spacing: -.05em; text-transform: uppercase; color: var(--yellow); white-space: nowrap; }
.js .ftr-word .ch { transform: translate3d(0, 100%, 0); transition: transform 1.4s var(--ease) calc(var(--i) * .06s); }
.js .ftr-word.is-in .ch { transform: none; }

/* ---------- переходы между страницами ---------- */
::view-transition-old(root) { animation: vt-out .75s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .9s var(--ease-io) both; }
@keyframes vt-out { to { transform: translate3d(0, -6vh, 0) scale(.96); opacity: .25; } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- адаптив ---------- */
@media (max-width: 1180px) {
  .hdr-nav, .hdr-time { display: none; }
  .menu-btn { display: inline-flex; margin-left: 0; }
  .hdr-cta { margin-left: auto; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .steps::before { display: none; }
  .offers { grid-template-columns: 1fr; }
  .offer { min-height: 0; }
}
@media (max-width: 1024px) {
  .hero-portrait { height: min(74svh, 820px); translate: -50% 0; }
  .hero-title { bottom: 30svh; }
  .spin-wrap { top: 22%; }
  .cards, .agrid, .cols3 { grid-template-columns: repeat(2, 1fr); }
  .art-grid { grid-template-columns: minmax(0, 780px); }
  .art-side { position: static; }
  .row { grid-template-columns: minmax(64px, 10%) 1fr minmax(150px, 26%) 52px; }
  .row--status { grid-template-columns: minmax(70px, 12%) 1fr minmax(160px, 30%); }
}
@media (max-width: 900px) {
  :root { --hdr: 72px; }
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
  .sec-head > * { grid-column: 1 !important; }
  .sec-head > .t-kicker { padding-top: 0; }
  .split, .phero--split .phero-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--ln); margin-top: 28px; }
  .stack { gap: 16px; }
  .stack-card { position: relative; top: auto; grid-template-columns: 1fr; height: auto; min-height: 0; transform: none !important; }
  .stack-media { order: -1; height: 46svh; }
  .stack-shade { display: none; }
  .hs { height: auto !important; }
  .hs-sticky { position: relative; height: auto; display: block; padding-block: clamp(80px, 12vw, 120px) 64px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hs-sticky::-webkit-scrollbar { display: none; }
  .hs-track { transform: none !important; align-items: flex-start; }
  .hs-intro, .hs-item { scroll-snap-align: start; }
  .hs-img, .hs-item--tall .hs-img { height: 48svh; }
  .hs-img img { left: 0; width: 100%; transform: none !important; }
  .hs-item--low { align-self: auto; }
  .hs-progress { display: none; }
  .hs-end { align-self: center; }
  .acc--cases .acc-item summary { grid-template-columns: 36px 1fr 46px; row-gap: 10px; }
  .acc--cases .case-metric { grid-column: 2; grid-row: 2; }
  .acc--cases .acc-ico { grid-column: 3; grid-row: 1 / span 2; }
  .case-body { grid-template-columns: 1fr; }
  .fcases { grid-template-columns: 1fr 1fr; }
  .cmeta { grid-template-columns: 1fr 1fr; }
  .cmeta > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .cmeta > div:nth-child(n+3) { margin-top: 22px; border-top: 1px solid var(--ln); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .years { grid-template-columns: 1fr 1fr; }
  .year:nth-child(3) { padding-left: 0; border-left: 0; }
  .year:nth-child(n+3) { margin-top: 26px; border-top: 1px solid var(--ln); }
  .offers--2 { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-circle-wrap { position: relative; margin-top: 36px; }
  .life { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .hero { height: auto; min-height: 0; }
  .hero-inner { position: relative; inset: auto; }
  .hero-meta { position: relative; top: auto; padding-top: calc(var(--hdr) + 12px); flex-direction: column; gap: 6px; }
  .hero-meta-r { display: none; }
  .hero-stage { position: relative; inset: auto; height: max(64svh, 470px); }
  .hero-title { top: 10px; bottom: auto; }
  .hero-first { font-size: clamp(38px, 11vw, 64px); }
  .hero-portrait { height: 86%; translate: -50% 0; }
  .spin-wrap { top: auto; bottom: 18%; right: var(--pad); }
  .spin-badge { width: 92px; }
  .spin-text text { font-size: 13px; }
  .hero-foot { position: relative; bottom: auto; display: block; padding-top: 22px; padding-bottom: 36px; border-top: 1.5px solid var(--black); }
  .hero-scroll { display: none; }
  .hero-actions .btn { flex: 1 1 auto; }
  .manifesto { min-height: 0; }
  .row, .row--status, .row--media, .row--empty { grid-template-columns: 1fr 44px; gap: 8px 16px; }
  .row-num { grid-column: 1; grid-row: 1; }
  .row-title, .row-body { grid-column: 1; grid-row: 2; }
  .row-meta { grid-column: 1; grid-row: 3; }
  .row-arrow { grid-column: 2; grid-row: 1 / span 3; width: 44px; height: 44px; }
  .row--status .row-meta, .row--empty .row-meta { grid-column: 1 / -1; }
  .row--contact { grid-template-columns: 1fr 44px; }
  .cards, .agrid, .cols3, .steps { grid-template-columns: 1fr; }
  .card { min-height: 0; gap: 28px; }
  .phero-foot .btn-row { width: 100%; }
  .author { grid-template-columns: 1fr; }
  .author img { width: 88px; height: 88px; }
  .art-cover { aspect-ratio: 4 / 3; }
  .tape { left: -20vw; right: -20vw; }
  .ftr-grid { grid-template-columns: 1fr; gap: 28px; }
  .menu-foot .btn { margin-left: 0; width: 100%; }
  .madlib { font-size: 22px; }
}
@media (max-width: 760px) {
  .fcases, .dirs, .cards--2, .cards--4, .cmeta, .years { grid-template-columns: 1fr; }
  .cmeta > div, .cmeta > div + div, .year, .year + .year { padding-left: 0; border-left: 0; }
  .cmeta > div + div, .year + .year { margin-top: 18px; border-top: 1px solid var(--ln); }
  .hbar { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .hbar-label { grid-column: 1 / -1; }
  .chart-plot { margin-left: 38px; }
  .next-case-in { grid-template-columns: 1fr; }
  .next-case-arrow { justify-self: start; }
}
@media (max-width: 560px) {
  .menu-btn-label { display: none; }
  .hdr-inner { gap: 12px; }
}
@media (max-width: 420px) {
  .btn { padding: 0 22px; }
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding-left: 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--ln); margin-top: 24px; }
}

/* ---------- уменьшенное движение ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .grain { animation: none; }
  .js [data-scrub] .w { opacity: 1; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}