/* «Работа» — концепт главной we.upsound.org в дизайн-системе upsound.org (основа — «Орбита» и «Тёмный зал»).
   Токены — из upsound-design-system/tokens/tokens.json (цвета, шрифты, роли текста, сетка, движение). */
:root {
  --wall: #0B0A09; --wall-2: #121010; --wall-3: #1A1715;
  --ivory: #EFE8DC; --ivory-2: #C9C0B2; --mute: #8E867A;
  --rule: rgba(239, 232, 220, .13); --rule-2: rgba(239, 232, 220, .26);
  --ink: #0B0A09; --ink-2: #4A443D; --ink-mute: #6E665C; --ink-rule: rgba(11, 10, 9, .14);
  --red: #E30613; --red-ink: #FF4D3F;
  --fog: #EEEEEC; --fog-2: #E2E2DF; --fog-ink-2: #4B4944; --fog-mute: #66645E; --fog-rule: rgba(11, 10, 9, .14);
  --paper: #FFFFFF;

  --f-display: "Unbounded", "Arial", sans-serif;
  --f-text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --f-serif: "Cormorant Garamond", "Times New Roman", serif;

  --t-hero: 300 clamp(58px, 13.6vw, 232px)/.86 var(--f-display);
  --t-section: 300 clamp(42px, 5.6vw, 92px)/.94 var(--f-display);
  --t-banner: 300 clamp(52px, 8vw, 132px)/.86 var(--f-display);
  --t-part: 300 clamp(32px, 3.2vw, 54px)/1.05 var(--f-display);
  --t-title-l: 300 clamp(26px, 2.6vw, 42px)/1.1 var(--f-display);
  --t-title-m: 300 clamp(24px, 2.2vw, 34px)/1.14 var(--f-display);
  --t-title-s: 400 clamp(19px, 1.5vw, 22px)/1.25 var(--f-display);
  --t-lede: 300 clamp(18px, 1.45vw, 22px)/1.5 var(--f-text);
  --t-body: 400 17px/1.6 var(--f-text);
  --t-card: 500 18px/1.32 var(--f-text);
  --t-small: 300 15.5px/1.5 var(--f-text);
  --t-ui: 500 15px/1.1 var(--f-text);
  --t-nav: 400 14.5px/1 var(--f-text);
  --t-eyebrow: 500 12px/1.4 var(--f-mono);
  --t-label: 400 11px/1.4 var(--f-mono);
  --t-caption: 400 12px/1.55 var(--f-mono);
  --t-accent: italic 300 1.1em/1 var(--f-serif);

  --maxw: 1440px;
  --gut: clamp(20px, 4.4vw, 72px);
  --cg: clamp(16px, 2.2vw, 32px);
  --room: clamp(88px, 10vw, 160px);
  --bleed-r: calc(-1 * (var(--gut) + (100vw - min(100vw, var(--maxw))) / 2));

  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: cubic-bezier(.16, 1, .3, 1);
  --d-fast: .4s; --d-mid: .6s; --d-slow: 1.6s;

  color-scheme: dark;
}
@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }
@media (min-width: 1700px) { :root { --maxw: 1600px; } }

/* ---------- основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--wall); color: var(--ivory); font: var(--t-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 300; background: var(--ivory); color: var(--ink); padding: 12px 18px; font-weight: 500; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
main { overflow-x: clip; }
.room { padding-block: var(--room); position: relative; }
.room + .room::before { content: ""; position: absolute; top: 0; left: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))); right: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))); border-top: 1px solid var(--rule); }

.eyebrow { font: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.it { font: var(--t-accent); letter-spacing: -.025em; }
.ch { display: inline-block; text-align: center; transition: font-weight .35s var(--ease); }
.w { display: inline-block; white-space: nowrap; }

.btn {
  --h: 52px; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: var(--h); padding: 0 24px;
  border: 1px solid transparent; border-radius: 0; background: none;
  font: var(--t-ui); letter-spacing: .01em; cursor: pointer; white-space: nowrap;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn .arr { flex: none; transition: transform .6s var(--slow); }
.btn:hover .arr { transform: translateX(4px); }
.btn:hover .arr--ext { transform: translate(2px, -2px); }
.btn--sm { --h: 40px; padding: 0 16px; font-size: 14px; gap: 10px; }
.btn--ivory { background: var(--ivory); color: var(--ink); }
.btn--ivory:hover { background: #fff; }
.btn--ink { background: var(--ink); color: var(--ivory); }
.btn--ink:hover { background: var(--red); color: #fff; }
.btn--line { border-color: var(--rule-2); color: var(--ivory); }
.btn--line:hover { border-color: var(--ivory); }
.btn--face { gap: 12px; padding-left: 10px; }
.face { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--wall-3); box-shadow: 0 0 0 1.5px var(--red); overflow: hidden; }
/* кадр студии 16:9, лицо — около (50 %, 25 %) кадра: кадр в 3,6 раза шире кружка */
.face img, .face video { position: absolute; left: -130%; top: -4%; width: 360%; height: auto; max-width: none; }
.face video { opacity: 0; transition: opacity .4s var(--ease); }
.face.is-play video { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .face::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--red); animation: face-ping 2.6s var(--ease) infinite; }
}
@keyframes face-ping { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }

.more { display: inline-flex; align-items: center; gap: 12px; font: 500 14px/1.2 var(--f-text); letter-spacing: .01em; padding-bottom: 6px; border-bottom: 1px solid var(--rule-2); transition: border-color .5s var(--ease), gap .6s var(--slow); }
.more:hover { border-color: currentColor; gap: 18px; }

.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 20px; align-items: end; margin-bottom: clamp(40px, 4.4vw, 72px); }
/* блок справа от заголовка (цифра с подписью, ссылка) — последней строкой на одной линии с нижней строкой заголовка (обход 30.10 22:12) */
@supports (align-items: last baseline) { .sec-head { align-items: last baseline; } .sec-head .sec-aside { padding-bottom: 0; } }
.sec-title { grid-column: 1 / span 8; font: var(--t-section); letter-spacing: -.055em; }
.sec-title .it { font-size: 1.12em; }
.sec-aside { grid-column: 9 / span 4; display: grid; gap: 16px; justify-items: start; font-size: 15px; line-height: 1.5; color: var(--ivory-2); padding-bottom: .4em; }
@media (max-width: 960px) { .sec-title, .sec-aside { grid-column: 1 / -1; } }
@media (max-width: 640px) { .sec-title { font-size: clamp(36px, 11vw, 48px); } }

/* обложки «в сером, цвет под курсором» (как .litf в ДС) */
.litf { position: relative; display: block; overflow: hidden; --mx: 50%; --my: 50%; --r: 0px; transition: --r .9s var(--slow); background: var(--wall-2); }
.litf > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--slow); }
.litf > img:not(.lit) { filter: grayscale(1) contrast(1.08) brightness(.72); }
.fog .litf { background: var(--fog-2); }
.fog .litf > img:not(.lit) { filter: grayscale(1) contrast(1.05) brightness(.97); }
.litf > .lit {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0, #000 58%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0, #000 58%, transparent 100%);
}
a:hover .litf, .litf:hover, a:focus-visible .litf { --r: clamp(150px, 15vw, 240px); }
a:hover .litf > img, a:focus-visible .litf > img { transform: scale(1.035); }
@media (hover: none), (pointer: coarse) {
  .litf > img:not(.lit), .fog .litf > img:not(.lit) { filter: none; }
  .litf > .lit { display: none; }
}

/* ---------- шапка ---------- */
.hd { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--rule); }
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(11, 10, 9, .86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.hd__in { display: flex; align-items: center; gap: clamp(16px, 2vw, 36px); height: 76px; }
.hd__logo { flex: none; display: block; color: var(--ivory); }
.logo { display: block; width: 100%; height: auto; overflow: visible; }
.logo .ring { fill: var(--red); }
.hd__logo .logo { width: 104px; }
.nav { margin-left: clamp(8px, 2.4vw, 40px); }
.nav ul { display: flex; gap: clamp(14px, 1.7vw, 28px); }
.nav a { position: relative; display: block; padding: 8px 0; font: var(--t-nav); color: var(--ivory-2); transition: color .4s var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .7s var(--slow); }
.nav a:hover { color: var(--ivory); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hd__tail { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.hd__tel { font: 400 15px/1 var(--f-text); letter-spacing: .01em; color: var(--ivory); white-space: nowrap; transition: color .4s; }
.hd__tel:hover { color: var(--ivory-2); }
.menu { display: none; position: static; }
.menu__btn { display: flex; align-items: center; gap: 12px; height: 40px; cursor: pointer; list-style: none; font: var(--t-nav); color: var(--ivory); }
.menu__btn::-webkit-details-marker { display: none; }
.menu__ico { display: grid; gap: 6px; width: 22px; }
.menu__ico i { display: block; height: 1px; background: currentColor; transition: transform .5s var(--slow); }
.menu[open] .menu__ico i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu[open] .menu__ico i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu__panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 22px; padding: 28px var(--gut) 36px; background: var(--wall); border-bottom: 1px solid var(--rule); max-height: calc(100vh - 76px); overflow-y: auto; }
.menu__nav { display: grid; gap: 4px; }
.menu__nav a { display: block; padding: 8px 0; font: 300 30px/1.1 var(--f-display); letter-spacing: -.04em; }
.menu__tel { font: 300 22px/1 var(--f-display); letter-spacing: -.02em; }
.menu__cta { white-space: normal; text-align: center; padding-block: 12px; }
.menu__soc { display: flex; flex-wrap: wrap; gap: 8px 22px; font: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-2); }
@media (max-width: 1180px) { .hd__tel { display: none; } }
@media (max-width: 1040px) {
  .nav, .hd__cta { display: none; }
  .menu { display: block; }
}
@media (max-width: 640px) { .hd__in { height: 64px; } .hd__logo .logo { width: 92px; } .menu__panel { max-height: calc(100vh - 64px); } }

/* ---------- отзывы ---------- */
.reviews__wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cg); row-gap: clamp(36px, 3.4vw, 56px); align-items: start; }
.review figure { margin: 0; }
@media (max-width: 640px) {
  .reviews__wall { display: flex; gap: 12px; align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .reviews__wall::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 84%; margin: 0; scroll-snap-align: start; }
}

/* ---------- экскурсия: единственная красная полоса ---------- */
.band--red { background: var(--red); color: #fff; color-scheme: dark; }
.band--red .eyebrow { color: #fff; }
.band--red :focus-visible { outline-color: #fff; }
.tour { position: relative; padding-block: clamp(88px, 9vw, 150px); overflow: clip; }
.tour__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 48px; align-items: start; }
.tour__txt { grid-column: 1 / span 7; display: grid; gap: 26px; justify-items: start; }
.tour__t { font: 300 clamp(30px, 3.1vw, 54px)/1.06 var(--f-display); letter-spacing: -.045em; }
.tour__l1 { display: block; max-width: 17em; }
.tour__word { display: block; position: relative; margin-top: .12em; margin-left: -.05em; font-size: 3.4em; line-height: .86; letter-spacing: -.06em; white-space: nowrap; }
.ring-o { position: relative; display: inline-block; }
.ring-o__l { display: inline-block; }
.js .ring-o__l { color: transparent; }
.no-webgl .ring-o__l { color: inherit; }
.ring-o__c { position: absolute; left: 50%; top: 58%; width: 1.42em; height: 1.42em; max-width: none; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 .06em .08em rgba(60, 0, 4, .45)); }
.no-webgl .ring-o__c { display: none; }
.tour__d { max-width: 44ch; font: 300 clamp(17px, 1.35vw, 21px)/1.5 var(--f-text); }
.tour__go { margin-top: 6px; }
.band--red .btn--ivory:hover { background: var(--ink); color: var(--ivory); }
.tour__side { grid-column: 9 / span 4; display: grid; gap: 18px; padding-top: 8px; }
.tour__vid { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #8c040b; box-shadow: 0 40px 60px -30px rgba(60, 0, 4, .7); }
.tour__vid video, .tour__vid .vposter { width: 100%; height: 100%; object-fit: cover; object-position: 56% 30%; }
.tour__bh { margin-top: 12px; }
.bonuses { border-top: 1px solid rgba(255, 255, 255, .5); }
.bonuses li { display: grid; grid-template-columns: 3.2ch minmax(0, 1fr); gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .28); font: 400 15.5px/1.45 var(--f-text); }
.bonuses__n { font: 400 12px/1.8 var(--f-mono); opacity: .86; }
@media (max-width: 1180px) { .tour__word { font-size: 2.9em; } }
@media (max-width: 960px) {
  .tour__txt, .tour__side { grid-column: 1 / -1; }
  .tour__side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--cg); }
  .tour__vid { grid-row: 1 / span 3; }
}
@media (max-width: 640px) {
  .tour__word { font-size: calc((100vw - 2 * var(--gut)) / 5.3); }
  .tour__side { grid-template-columns: minmax(0, 1fr); }
  .tour__vid { grid-row: auto; }
  .tour__go { white-space: normal; text-align: left; padding-block: 10px; }
}

/* ---------- команда ---------- */
.team__n b { font: 200 clamp(40px, 4vw, 64px)/.9 var(--f-display); letter-spacing: -.06em; color: var(--ivory); display: block; margin-bottom: 4px; }
.team__grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: clamp(10px, 1.1vw, 18px); row-gap: clamp(22px, 2vw, 32px); }
.mate { display: grid; gap: 4px; align-content: start; min-width: 0; }
.mate__pic { aspect-ratio: 9 / 16; margin-bottom: 8px; }
.mate:hover .litf { --r: clamp(90px, 8vw, 140px); }
.mate__name { font: 400 15px/1.2 var(--f-display); letter-spacing: -.03em; }
.mate__role { font: 400 12.5px/1.35 var(--f-text); color: var(--mute); }
@media (max-width: 1180px) { .team__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .team__grid { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: 112px; column-gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .team__grid::-webkit-scrollbar { display: none; }
  .mate { scroll-snap-align: start; }
  .mate__name { font-size: 14px; }
  .mate__role { font-size: 11.5px; }
}

/* ---------- офис («А это мы :)»): компактная сетка 6×2 квадратных карточек (как на /tiktok) ---------- */
.room--tight { padding-block: clamp(44px, 4.5vw, 72px); }
.sec-head--tight { margin-bottom: clamp(20px, 2.2vw, 30px); }
.sec-title--compact { font: 300 clamp(28px, 3vw, 46px)/1.02 var(--f-display); letter-spacing: -.05em; }
.office__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.office__grid li { aspect-ratio: 1; min-width: 0; border-radius: 10px; overflow: hidden; background: var(--wall-2); box-shadow: inset 0 0 0 1px var(--rule); }
.office__grid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) brightness(.9); transition: filter .55s var(--ease), transform .95s var(--slow); }
.office__grid li:hover img { filter: none; transform: scale(1.05); }
@media (max-width: 960px) { .office__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .office__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .office__grid li { border-radius: 8px; }
  .office__grid img { filter: none; }
}

/* ---------- видео YouTube и статьи блога: компактные двухколоночные полосы (как на /tiktok) ---------- */
.more-r { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 2.6vw, 48px); align-items: start; }
.more-r + .more-r { margin-top: clamp(32px, 3.4vw, 52px); padding-top: clamp(32px, 3.4vw, 52px); border-top: 1px solid var(--rule); }
.more-r__hd { display: grid; gap: 10px; justify-items: start; align-content: start; min-width: 0; }
.more-r__t { font: 300 clamp(26px, 2.5vw, 40px)/1.06 var(--f-display); letter-spacing: -.045em; color: var(--ivory); }
.more-r__sub { font: 300 14px/1.45 var(--f-text); color: var(--mute); max-width: 32ch; }
.more-r__lnk { margin-top: 6px; }
.yt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.yt-grid__i { min-width: 0; }
.yt-card { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--wall-2); box-shadow: inset 0 0 0 1px var(--rule); }
.yt-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) brightness(.86); transition: filter .45s var(--ease), transform .75s var(--slow); }
.yt-card:hover img, .yt-card:focus-visible img { filter: none; transform: scale(1.04); }
.yt-card__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(11, 10, 9, .68); box-shadow: inset 0 0 0 1px var(--rule-2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .35s var(--ease), transform .35s var(--slow), box-shadow .35s var(--ease); }
.yt-card__play::after { content: ""; position: absolute; left: 15px; top: 12px; border-left: 11px solid var(--ivory); border-block: 7px solid transparent; }
.yt-card:hover .yt-card__play, .yt-card:focus-visible .yt-card__play { background: var(--red); box-shadow: none; transform: scale(1.08); }
.yt-card__t { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 10px 8px; background: linear-gradient(transparent, rgba(11, 10, 9, .92)); font: 400 11.5px/1.28 var(--f-text); color: var(--ivory); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.yt-card:hover .yt-card__t, .yt-card:focus-visible .yt-card__t { opacity: 1; }
.yt-card.is-play iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.arts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.2vw, 36px); min-width: 0; }
.arts__i { min-width: 0; border-bottom: 1px solid var(--rule); }
.arts__i:nth-child(-n+2) { border-top: 1px solid var(--rule); }
.arts__a { display: grid; grid-template-columns: clamp(68px, 5vw, 88px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; min-width: 0; }
.arts__th { display: block; aspect-ratio: 4 / 3; border-radius: 7px; overflow: hidden; background: var(--wall-2); box-shadow: inset 0 0 0 1px var(--rule); }
.arts__th img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04) brightness(.88); transition: filter .45s var(--ease), transform .75s var(--slow); }
.arts__t { font: 400 clamp(14px, 1vw, 15.5px)/1.35 var(--f-text); color: var(--ivory-2); transition: color .3s var(--ease); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.arts__go { color: var(--mute); opacity: .65; transition: color .3s var(--ease), opacity .3s var(--ease), transform .45s var(--slow); }
.arts__a:hover .arts__th img, .arts__a:focus-visible .arts__th img { filter: none; transform: scale(1.05); }
.arts__a:hover .arts__t, .arts__a:focus-visible .arts__t { color: var(--ivory); }
.arts__a:hover .arts__go, .arts__a:focus-visible .arts__go { color: var(--ivory); opacity: 1; transform: translate(2px, -2px); }
@media (max-width: 1024px) {
  .more-r { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .more-r__sub { max-width: none; }
}
@media (max-width: 760px) {
  .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yt-card__t { display: none; }
}
@media (max-width: 640px) {
  .arts { grid-template-columns: minmax(0, 1fr); }
  .arts__i:nth-child(2) { border-top: 0; }
  .arts__a { gap: 12px; padding: 11px 0; }
}

/* ---------- книга: светлая полоса ---------- */
.book { padding-block: clamp(72px, 8vw, 128px); position: relative; }
.book__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 40px; align-items: center; }
.book__media { grid-column: 1 / span 6; position: relative; }
.book__vid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); box-shadow: 0 30px 50px -28px rgba(11, 10, 9, .55); }
.book__vid video, .book__vid .vposter { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--slow); }
.book__media:hover video, .book__media:hover .vposter { transform: scale(1.03); }
/* обложка ролика — картинка под <video>: пустой <video> прозрачен, с первым кадром ролик ложится поверх */
.vposter { position: absolute; inset: 0; }
.vposter + video { position: relative; }
.no-js .vposter, .no-js .vposter + video { display: none; } /* без JS — ролик из <noscript> с обычным poster */
.tag { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 6px 10px; background: var(--paper); color: var(--ink); font: 400 13px/1.2 var(--f-text); }
.book__cover { position: absolute; right: -9%; bottom: -16%; width: 38%; z-index: 3; filter: drop-shadow(0 30px 34px rgba(11, 10, 9, .4)); transform: rotate(7deg); transition: transform 1.2s var(--slow); pointer-events: none; }
.book__media:hover .book__cover { transform: rotate(3deg) translateY(-10px); }
.book__txt { grid-column: 8 / span 5; display: grid; gap: 16px; justify-items: start; }
.book__t { font: 400 clamp(26px, 2.6vw, 42px)/1.1 var(--f-display); letter-spacing: -.04em; }
.book__t .it { font-size: 1.16em; }
.book__d { font: 300 16.5px/1.55 var(--f-text); color: var(--fog-ink-2); max-width: 48ch; }
.book .btn { margin-top: 10px; }
@media (max-width: 960px) {
  .book__media, .book__txt { grid-column: 1 / -1; }
  .book__cover { right: 0; width: 30%; }
  .book__txt { margin-top: 24px; }
}

/* ---------- остались вопросы ---------- */
.faq { padding-block: clamp(110px, 12vw, 200px) clamp(88px, 9vw, 140px); }
.faq__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 32px; align-items: end; }
.faq__t { grid-column: 1 / span 7; font: var(--t-banner); letter-spacing: -.06em; }
.faq__t .it { font-size: 1.1em; }
.faq__side { grid-column: 8 / span 5; display: grid; gap: 26px; justify-items: start; padding-bottom: .5em; }
.faq__d { font: var(--t-lede); color: var(--ivory-2); max-width: 40ch; }
.faq__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.faq__tel { font: 300 clamp(22px, 1.8vw, 28px)/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; border-bottom: 1px solid var(--rule-2); padding-bottom: 6px; transition: border-color .4s; }
.faq__tel:hover { border-color: var(--ivory); }
@media (max-width: 960px) { .faq__t, .faq__side { grid-column: 1 / -1; } }
@media (max-width: 640px) { .faq__t { font-size: clamp(46px, 13vw, 64px); } .faq__go .btn { white-space: normal; text-align: left; padding-block: 10px; } }

/* ---------- подвал ---------- */
.ft { border-top: 1px solid var(--rule); padding-block: clamp(56px, 6vw, 88px) 32px; color: var(--ivory-2); }
.ft__cx { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 40px; }
.ft__main { grid-column: 1 / span 4; display: grid; justify-items: start; align-content: start; gap: 12px; }
.ft__h { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.ft__main .ft__h { margin-bottom: 4px; }
.ft__tel { font: 300 clamp(28px, 2.6vw, 40px)/1.05 var(--f-display); letter-spacing: -.03em; color: var(--ivory); white-space: nowrap; transition: color .4s var(--ease); }
.ft__tel:hover { color: var(--ivory-2); }
.ft__mail { font: 400 17px/1.3 var(--f-text); color: var(--ivory-2); border-bottom: 1px solid var(--rule-2); transition: color .4s var(--ease), border-color .4s var(--ease); }
.ft__mail:hover { color: var(--ivory); border-color: var(--ivory); }
.ft__cols { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 32px; font-size: 14px; line-height: 1.55; }
.ft__cols li { margin-bottom: 8px; }
.ft__cols a { transition: color .3s; }
.ft__cols a:hover { color: var(--ivory); }
.ft__word { margin-top: clamp(64px, 7vw, 112px); color: var(--ivory); }
.ft__word .logo { width: 100%; }
.ft__bottom { margin-top: clamp(28px, 3vw, 44px); padding-top: 20px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; color: var(--mute); }
.ft__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ft__legal a { border-bottom: 1px solid var(--rule-2); transition: color .3s, border-color .3s; }
.ft__legal a:hover { color: var(--ivory); border-color: var(--ivory); }
@media (max-width: 960px) { .ft__main, .ft__cols { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ft__cols { grid-template-columns: 1fr 1fr; } }

/* ---------- «уменьшить движение»: ничего не едет, всё видно ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================================================
   «Орбита»: всё, что ниже, — новое поверх основы «Тёмного зала»
   ============================================================ */
:root { --hd: 76px; }
@media (max-width: 640px) { :root { --hd: 64px; } }
html { scroll-padding-top: calc(var(--hd) + 14px); }

/* ---------- «С кем работали»: компактный лайнап по левому краю (как на /distribution) ---------- */
.artists { position: relative; z-index: 1; padding-block: clamp(48px, 5vw, 84px) clamp(72px, 8vw, 124px); }
.artists .sec-head { margin-bottom: clamp(28px, 3.2vw, 48px); }
.art__count { position: relative; top: -.1em; margin-left: .14em; font: 200 .44em/1 var(--f-display); letter-spacing: -.04em; color: var(--red-ink); vertical-align: top; }
.lu { --luf: clamp(22px, 2.25vw, 34px); display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: clamp(10px, 1vw, 15px) clamp(20px, 2.1vw, 32px); }
.lu__i { display: inline-flex; align-items: flex-start; gap: 9px; transition: color .35s var(--ease); }
.lu__ph { display: block; flex: none; width: calc(var(--luf) * .88); height: calc(var(--luf) * .88); margin: calc(var(--luf) * .12) calc(var(--luf) * .03) 0 0; border-radius: 50%; overflow: hidden; background: var(--wall-3); box-shadow: inset 0 0 0 1px rgba(239, 232, 220, .1); transition: transform .5s var(--slow), opacity .35s var(--ease); }
.lu__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 22%); filter: grayscale(1) contrast(1.06); transition: filter .45s var(--ease); }
.lu.hov .lu__i .lu__ph { opacity: .45; }
.lu.hov .lu__i.on .lu__ph { opacity: 1; transform: scale(1.1); }
.lu.hov .lu__i.on .lu__ph img { filter: none; }
.lu__n { font: 300 var(--luf)/1.14 var(--f-display); letter-spacing: -.05em; white-space: nowrap; }
.lu__s { font: 400 10px/1.32 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--mute); max-width: 12.5em; margin-top: .42em; transition: color .35s var(--ease); }
.lu.hov .lu__i { color: var(--mute); }
.lu.hov .lu__i.on { color: var(--ivory); }
.lu.hov .lu__i.on .lu__s { color: var(--red-ink); }
.lu__fl { position: fixed; left: 0; top: 0; z-index: 80; width: clamp(180px, 15vw, 224px); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(-9999px, 0, 0); transition: opacity .3s var(--ease); background: var(--wall-2); box-shadow: 0 28px 56px -18px rgba(0, 0, 0, .88); will-change: transform; }
.lu__fl.on { opacity: 1; }
.lu__fl img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 20%); }
.lu__more { display: none; }
@media (max-width: 960px) {
  .lu { --luf: clamp(20px, 2.8vw, 26px); gap: 11px 20px; }
}
@media (max-width: 640px) {
  .lu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lu__i { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
  .lu__i:last-child, .js .lu:not(.all) .lu__i:nth-child(12) { border-bottom: 1px solid var(--rule); }
  .lu__ph { grid-row: span 2; width: 52px; height: 52px; margin: 0; }
  .lu__n { font-size: 20px; line-height: 1.2; white-space: normal; }
  .lu__s { margin-top: 3px; max-width: none; }
  .lu__fl { display: none; }
  .js .lu:not(.all) .lu__i:nth-child(n + 13) { display: none; }
  .js .lu__more { display: flex; margin-top: 24px; }
}
@media (hover: none) { .lu__fl { display: none; } }

/* ---------- кейсы: чистая витрина 4×2 с порционным раскрытием «Показать ещё» ---------- */
.cgrid__head { margin-bottom: clamp(36px, 4vw, 60px); }
.cgrid__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.2vw, 32px); row-gap: clamp(38px, 4vw, 56px); align-items: start; }
.js .cgrid__item.is-more { display: none; }
.cgrid__item { min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cgrid__item.is-in { animation: cgrid-in .65s var(--slow) calc(var(--st, 0) * 55ms) both; }
}
@keyframes cgrid-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.cgrid__card { position: relative; display: grid; gap: 14px; align-content: start; min-width: 0; transition: opacity .45s var(--ease), transform .65s var(--slow); }
@media (hover: hover) and (pointer: fine) {
  .cgrid__list:has(.cgrid__card:hover, .cgrid__card:focus-visible) .cgrid__card:not(:hover, :focus-visible) { opacity: .46; }
  .cgrid__card:hover, .cgrid__card:focus-visible { transform: translateY(-5px); }
}
.cgrid__pic {
  position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--wall-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(239, 232, 220, .09), 0 24px 48px -22px rgba(0, 0, 0, .9);
}
.cgrid__pic::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 35%), rgba(255, 255, 255, .16), transparent 72%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.cgrid__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .95s var(--slow); }
.cgrid__go {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(11, 10, 9, .68); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(239, 232, 220, .24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translate(-4px, 4px) scale(.88); transition: opacity .35s var(--ease), transform .5s var(--slow), background-color .3s var(--ease);
}
.cgrid__cap { position: relative; display: grid; gap: 5px; padding-top: 13px; border-top: 1px solid var(--rule); min-width: 0; }
.cgrid__cap::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ivory);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .65s var(--slow);
}
.cgrid__num { font: 200 clamp(26px, 2.35vw, 36px)/1 var(--f-display); letter-spacing: -.055em; color: var(--ivory); white-space: nowrap; }
.cgrid__sub { font: 300 14.5px/1.42 var(--f-text); color: var(--mute); overflow-wrap: break-word; }
.cgrid__who { font-weight: 500; color: var(--ivory-2); transition: color .35s var(--ease); }
.cgrid__sub i { font-style: normal; opacity: .55; margin-inline: 2px; }
.cgrid__card:hover .cgrid__pic img, .cgrid__card:focus-visible .cgrid__pic img { transform: scale(1.04); }
.cgrid__card:hover .cgrid__pic::after, .cgrid__card:focus-visible .cgrid__pic::after { opacity: 1; }
.cgrid__card:hover .cgrid__go, .cgrid__card:focus-visible .cgrid__go { opacity: 1; transform: none; }
.cgrid__card:hover .cgrid__cap::before, .cgrid__card:focus-visible .cgrid__cap::before { transform: scaleX(1); }
.cgrid__card:hover .cgrid__who, .cgrid__card:focus-visible .cgrid__who { color: var(--ivory); }
.cgrid__foot { display: flex; justify-content: center; margin-top: clamp(40px, 4.4vw, 64px); }
.no-js .cgrid__foot, .cgrid__foot[hidden] { display: none; }
.cgrid__more { min-width: 224px; padding-inline: 34px; border-radius: 999px; }
.cgrid__more:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
@media (max-width: 1040px) {
  .cgrid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cgrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 28px; }
  .cgrid__pic { border-radius: 8px; }
  .cgrid__go { display: none; }
  .cgrid__card { gap: 10px; }
  .cgrid__cap { padding-top: 10px; gap: 4px; }
  .cgrid__num { font-size: clamp(20px, 5.8vw, 26px); }
  .cgrid__sub { font-size: 13px; line-height: 1.36; }
  .cgrid__more { width: 100%; max-width: 340px; }
}

/* ---------- смелее, чем «Тёмный зал»: команда и офис ---------- */
.team .sec-title, .office .sec-title { font-size: clamp(42px, 7vw, 120px); }


/* ============================================================
   «Работа»: всё, что ниже, — новое (обход Бориса 29.10 22:15)
   ============================================================ */
@property --a { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --g { syntax: "<color>"; inherits: true; initial-value: #ff4b2b; }

/* светлая полоса (книга) */
.fog { background: var(--fog); color: var(--ink); color-scheme: light; }
.fog ::selection { background: var(--ink); color: var(--fog); }
.fog :focus-visible { outline-color: var(--ink); }
.fog .eyebrow { color: var(--fog-mute); }
.fog .sec-aside { color: var(--fog-ink-2); }
.fog .more { border-color: var(--fog-rule); }

/* ---------- первый экран A (по умолчанию): как на upsound.org — слева кто мы и чем занимаемся, справа витрина ---------- */
.agency { padding-top: clamp(18px, 2.6vh, 36px); padding-bottom: clamp(36px, 3.6vw, 64px); }
.agency__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
.agency__bar { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.agency__who { grid-column: 1 / span 5; container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 1.9vw, 30px); padding-top: clamp(26px, 2.6vw, 42px); padding-right: clamp(0px, 1.4vw, 24px); }
/* размер заголовка — от ширины колонки, а не окна: на 1600 px он не рассыпается на 7 строк (колонка там уже упёрлась в --maxw) */
.agency__t { font: 300 clamp(34px, 10.2cqi, 60px)/1.02 var(--f-display); letter-spacing: -.05em; }
.agency__t .it { font-size: 1.18em; letter-spacing: -.02em; }
.agency__lede { max-width: 32ch; font: var(--t-lede); color: var(--ivory-2); }
.agency__do { display: grid; gap: 10px; width: 100%; }
.agency__do ul { display: flex; flex-wrap: wrap; row-gap: 4px; font: 400 16px/1.45 var(--f-text); }
.agency__do li:not(:last-child)::after { content: "/"; margin: 0 .55em; color: var(--mute); }
.agency__do a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--slow); }
.agency__do a:hover { background-size: 100% 1px; }
.agency__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.agency__tel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font: 400 13px/1.4 var(--f-text); color: var(--mute); }
.agency__tel a { font: 300 clamp(20px, 1.6vw, 26px)/1 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
/* витрина тянется на всю высоту строки: карточка + вкладки = левая колонка (верх — по h1, низ — по последней строке) */
.agency__offers { grid-column: 6 / -1; min-width: 0; padding-top: clamp(26px, 2.6vw, 42px); display: grid; grid-template-rows: minmax(0, 1fr); }
.hero__dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .agency__who > *, .agency__offers { animation: rise 1.1s var(--slow) both; }
  .agency__who > :nth-child(2) { animation-delay: .06s; } .agency__who > :nth-child(3) { animation-delay: .12s; } .agency__who > :nth-child(n+4) { animation-delay: .18s; }
  .agency__offers { animation-delay: .1s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 1180px) { .agency__who { grid-column: 1 / span 6; } .agency__offers { grid-column: 7 / -1; } }
@media (max-width: 960px) {
  .agency__who, .agency__offers { grid-column: 1 / -1; }
  .agency__who { padding-right: 0; }
  .agency__t { font-size: clamp(32px, 6.2vw, 54px); }
}
@media (max-width: 640px) {
  .agency__bar { flex-direction: column; }
  .agency__bar .eyebrow:last-child { display: none; }
  .agency__go .btn { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; padding-block: 10px; }
  .agency__tel { display: none; }
  /* телефон: сначала заголовок и кнопки, сразу за ними — витрина, «Чем занимаемся» — после неё */
  .agency__in { row-gap: 22px; }
  .agency .agency__who { display: contents; }
  .agency .agency__t { order: 1; margin-top: 26px; } .agency .agency__lede { order: 2; } .agency .agency__go { order: 3; }
  .agency .agency__offers { order: 4; padding-top: 12px; } .agency .agency__do { order: 5; margin-top: 10px; }
  .agency .agency__who > *, .agency .agency__offers { grid-column: 1 / -1; }
  .wallhero .agency__do { display: none; }
}

/* ---------- витрина предложений (по образцу upsound.org: components/agency.css) ---------- */
/* Одна сетка у всех шести карточек (обход 30.10 22:12): сверху — метка слева и подпись предмета справа на одной линии;
   заголовок — всегда с одной высоты, под него оставлено место на 3 строки; под ним текст; кнопка — у нижнего края.
   Предмет справа занимает ровно полосу от верха заголовка до низа кнопки: он — контейнер (container-type: size),
   и всё внутри него меряется от этой полосы (cqw, cqh). На первом экране карточка с вкладками по высоте — как левая
   колонка: верх карточки — по верху h1, низ вкладок — по последней строке слева (.agency__offers тянется на всю строку сетки). */
.offers { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
.offers__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; position: relative; outline: none; }
.offers__track::-webkit-scrollbar { display: none; }
.offer {
  --pad: clamp(22px, 2.5vw, 42px); --k: rgba(239, 232, 220, .72); --d: var(--ivory-2);
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; overflow: hidden; container-type: inline-size; isolation: isolate;
  min-height: clamp(420px, 34vw, 560px); padding: var(--pad);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(20px, 5cqi, 48px);
  grid-template-rows: minmax(35px, auto) clamp(20px, 6cqi, 56px) auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "k fl" ". ." "t f" "d f" "n f" ". f" "go f";
  background: var(--wall-3); color: var(--ivory);
}
.offer--dark { box-shadow: inset 0 0 0 1px var(--rule); }
.offer--fog { --k: var(--fog-mute); --d: var(--fog-ink-2); background: var(--fog); color: var(--ink); }
.offer--ivory { --k: var(--ink-mute); --d: var(--ink-2); background: var(--ivory); color: var(--ink); }
.offer--fog :focus-visible, .offer--ivory :focus-visible { outline-color: currentColor; }
.offer__k, .offer__fl { position: relative; z-index: 3; align-self: start; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--k); }
.offer__k { grid-area: k; }
.offer__k span:not(:last-child)::after { content: "·"; margin: 0 .7em; }
/* подпись предмета — обычной строкой (цифра и слова переносятся вместе, не отдельными кусками) */
.offer__fl { grid-area: fl; justify-self: end; display: block; max-width: 34ch; text-align: right; }
.offer__fl .hero__dot { margin-right: 8px; vertical-align: 1px; }
.offer__fl b { font-weight: 500; color: currentColor; white-space: nowrap; }
.offer--dark .offer__fl b { color: var(--ivory); }
.offer__t { grid-area: t; position: relative; z-index: 2; min-height: calc(3 * 1.04em); max-width: 13em; font: 300 clamp(24px, 4.3cqi, 38px)/1.04 var(--f-display); letter-spacing: -.05em; text-wrap: balance; }
.offer__d { grid-area: d; position: relative; z-index: 2; max-width: 42ch; margin-top: 18px; font: 300 clamp(15px, 2.2cqi, 17px)/1.5 var(--f-text); color: var(--d); }
.offer__note { grid-area: n; position: relative; z-index: 2; max-width: 44ch; margin-top: 12px; font: 400 13.5px/1.45 var(--f-text); color: var(--k); }
.offer__go { grid-area: go; position: static; z-index: 2; align-self: end; justify-self: start; margin-top: 24px; }
.offer__go::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.offer--fog:hover .btn--ink, .offer--ivory:hover .btn--ink { background: var(--red); color: #fff; }
.offer--dark:hover .btn--ivory { background: #fff; }
.offer:hover .offer__go .arr { transform: translateX(4px); }
.offer__fig { grid-area: f; position: relative; z-index: 1; min-width: 0; min-height: 0; container-type: size; }

/* 01 — экскурсия: Борис встречает, стоит на нижнем краю карточки */
.offer--boris::before { content: ""; position: absolute; z-index: 0; right: -10%; bottom: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(227, 6, 19, .22), rgba(227, 6, 19, 0)); }
.offer__fig--boris { grid-row: 1 / -1; container-type: normal; display: grid; align-items: end; margin: calc(var(--pad) * -1 + 34px) calc(-1 * var(--pad)) calc(-1 * var(--pad)) -18%; }
.offer__fig--boris img { width: min(128%, 620px); max-width: none; justify-self: end; margin-right: -6%; -webkit-mask-image: linear-gradient(#000 76%, transparent 100%); mask-image: linear-gradient(#000 76%, transparent 100%); }

/* 02 — комплексное: колода кейсов от верха заголовка; под верхней обложкой — имя артиста, кейс и ссылка, прижатые к линии кнопки */
.offer__fig--clients { --cap: 124px; z-index: 4; }
.deck { position: relative; aspect-ratio: 1; margin: 0; padding: 0; }
.deck > li { --p: 0; position: absolute; inset: 0; z-index: calc(20 - var(--p));
  transform: translate(calc(var(--p) * 6%), calc(var(--p) * -5%)) rotate(calc(var(--p) * 3.5deg)) scale(calc(1 - var(--p) * .07));
  opacity: max(0, calc(1 - var(--p) * .3)); transition: transform 1.1s var(--slow), opacity .8s var(--ease); }
.deck img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 34px 50px -24px rgba(0, 0, 0, .75); }
.deck a { display: block; height: 100%; position: relative; color: inherit; }
.deck__t { position: absolute; left: 0; top: 100%; display: grid; align-content: end; gap: 6px; font: 400 15px/1.3 var(--f-text); opacity: 0; transition: opacity .5s var(--ease); }
.deck__who { font: 300 clamp(22px, 10cqw, 32px)/1 var(--f-display); letter-spacing: -.05em; text-wrap: balance; }
.deck > li:first-child .deck__t, .deck.is-run > li.is-top .deck__t { opacity: 1; }
.deck.is-run > li:not(.is-top) .deck__t { opacity: 0; }
.deck__go { margin-top: 2px; font: 400 14px/1.3 var(--f-text); color: var(--k); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--d-fast) var(--ease); }
.deck__go .arr { display: inline-block; vertical-align: middle; margin-left: 6px; }
.deck a:hover .deck__go { color: currentColor; }
/* обложка — от верха полосы; подписи занимают всё, что под ней, и прижаты к низу: «Смотреть кейс» — на линии кнопки */
.offer__fig--clients .deck--offer { --dw: min(84cqw, calc(100cqh - var(--cap))); width: var(--dw); }
.offer__fig--clients .deck__t { width: 100cqw; height: calc(100cqh - var(--dw)); }

/* по очереди: умения UpSound AI — старое уходит, потом приходит новое; без JS — первое */
.cycle { position: relative; }
.cycle > li:not(:first-child) { position: absolute; inset: 0 0 auto 0; opacity: 0; }
.cycle.is-run > li { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .5s var(--ease); }
.cycle.is-run > li.is-on { opacity: 1; transform: none; transition: opacity .6s var(--ease) .3s, transform .9s var(--slow) .3s; }

/* 03 — UpSound AI: умение — строкой сверху (место на 2 строки, на снимок не заходит), снимок мастерской — под ней до линии
   кнопки и до правого края карточки */
.offer__fig--ai { display: grid; grid-template-rows: auto minmax(0, 1fr); row-gap: clamp(14px, 5cqh, 26px); margin-right: calc(-1 * var(--pad)); }
.offer__fig--ai .cycle { height: 2.1em; margin-right: var(--pad); font: 300 clamp(18px, 7cqw, 26px)/1.04 var(--f-display); letter-spacing: -.045em; text-wrap: balance; }
.offer__fig--ai img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; border: 1px solid var(--ink-rule); border-right: 0; box-shadow: 0 34px 60px -26px rgba(11, 10, 9, .5); transition: transform 1.4s var(--slow); }
.offer--ai:hover .offer__fig--ai img { transform: translateY(-6px); }

/* 04 — книга: ролик ровно заполняет правые 70 % карточки сверху донизу, текст — на затемнении слева */
.offer__fig--video { grid-area: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 30%; align-self: stretch; container-type: normal; z-index: 0; overflow: hidden; }
.offer__fig--video .offer__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; filter: saturate(.9); transform: scale(1.06); transition: transform 1.6s var(--slow); }
.offer--book:hover .offer__vid { transform: scale(1.02); }
.offer__fig--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--wall-3) 0%, rgba(26, 23, 21, .72) 24%, rgba(26, 23, 21, 0) 56%), linear-gradient(0deg, rgba(11, 10, 9, .45), transparent 36%); }

/* 05 — курс: кольцо экспертов во всю полосу предмета; подпись эксперта спереди — у линии кнопки */
.offer__fig--orbit { --cap: 78px; --W: min(44cqw, calc((100cqh - var(--cap)) * .8), 250px); --R: calc(var(--W) * .72); --step: 4s;
  display: grid; margin: 0 calc(-1 * var(--pad)) 0 -18%; }
.offer__fig--orbit .cband__stage { grid-column: auto; height: 100cqh; margin: 0; }
.offer__fig--orbit .cband__stage::before, .offer__fig--orbit .cband__ring { bottom: var(--cap); }
.offer__fig--orbit .cband__p figcaption { top: calc(100% + 12px); }
.offer__fig--orbit .cband__p b { font-size: 18px; color: inherit; }
.offer__fig--orbit .cband__p span { max-width: 30ch; margin-top: 5px; font: 400 13px/1.35 var(--f-text); letter-spacing: 0; color: var(--d); }
.offer--orbit .offer__d { max-width: 30ch; }
.offer--ivory .cband__stage::before { background: radial-gradient(closest-side, rgba(11, 10, 9, .12), rgba(11, 10, 9, 0)); }
@supports (opacity: cos(0deg)) { .offer--ivory .cband__p img { filter: grayscale(1) contrast(1.05); opacity: calc(.14 + .43 * (cos(var(--t)) + 1)); } }
@media (prefers-reduced-motion: no-preference) { .offer:hover .cband__ring, .offer:not(.is-cur) .cband__ring { animation-play-state: paused; } }

/* 06 — дистрибуция: барабан площадок от верха заголовка, окно с красными линиями — «попадание»; «8 из 10» — цифрой
   у линии кнопки; размер слов — по ширине полосы, ничего не режется */
.offer__fig--reel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.reel { --h: clamp(36px, 16cqw, 60px); position: relative; height: min(calc(var(--h) * 3.4), 100cqh - 96px); perspective: 700px; -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.reel::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--h); translate: 0 -50%; border-block: 1px solid var(--red); pointer-events: none; }
.reel__drum { --rz: calc(var(--h) * 1.038); position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--rz))) rotateX(0deg); }
.reel__drum li { position: absolute; left: 0; right: 0; top: 50%; height: var(--h); margin-top: calc(var(--h) / -2); display: flex; align-items: center; backface-visibility: hidden; background: var(--wall-3);
  transform: rotateX(calc(var(--i) * -360deg / var(--n))) translateZ(var(--rz)); font: 300 clamp(15px, 8.4cqw, 30px)/1 var(--f-display); letter-spacing: -.04em; color: var(--ivory); white-space: nowrap; }
.reel__note { grid-row: 3; display: grid; gap: 6px; max-width: 30ch; font: 400 14px/1.4 var(--f-text); color: var(--d); }
.reel__note b { font: 200 clamp(28px, 12cqw, 44px)/.9 var(--f-display); letter-spacing: -.05em; color: var(--ivory); }
@media (prefers-reduced-motion: no-preference) { .reel__drum { animation: reel-7 15.4s cubic-bezier(.7, 0, .2, 1) infinite; } .offer:not(.is-cur) .reel__drum { animation-play-state: paused; } }
@keyframes reel-7 {
  0%, 10% { transform: translateZ(calc(-1 * var(--rz))) rotateX(0deg); }
  14.3%, 24.3% { transform: translateZ(calc(-1 * var(--rz))) rotateX(51.43deg); }
  28.6%, 38.6% { transform: translateZ(calc(-1 * var(--rz))) rotateX(102.86deg); }
  42.9%, 52.9% { transform: translateZ(calc(-1 * var(--rz))) rotateX(154.29deg); }
  57.1%, 67.1% { transform: translateZ(calc(-1 * var(--rz))) rotateX(205.71deg); }
  71.4%, 81.4% { transform: translateZ(calc(-1 * var(--rz))) rotateX(257.14deg); }
  85.7%, 95.7% { transform: translateZ(calc(-1 * var(--rz))) rotateX(308.57deg); }
  100% { transform: translateZ(calc(-1 * var(--rz))) rotateX(360deg); }
}
/* текущая карточка: предмет въезжает, когда вкладка переключилась */
@media (prefers-reduced-motion: no-preference) {
  .js .offer .offer__fig:not(.offer__fig--video) { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease) .3s, transform 1.2s var(--slow) .3s; }
  .js .offer.is-cur .offer__fig:not(.offer__fig--video) { opacity: 1; transform: none; }
}
/* с JS на планшете и компьютере карточки лежат стопкой в одной клетке: вкладка и карточка меняются в один момент,
   высота у всех одна. Смена — без наложения текстов: старая карточка гаснет за 0,16 с, новая проявляется после неё.
   Без JS и на телефоне — лента, которую листают пальцем */
@media (min-width: 641px) {
  .js .offers[data-stack] .offers__track { display: grid; overflow: visible; scroll-snap-type: none; }
  .js .offers[data-stack] .offer { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .16s var(--ease), visibility 0s .16s; }
  .js .offers[data-stack] .offer.is-cur { visibility: visible; opacity: 1; z-index: 1; transition: opacity .45s var(--ease) .16s, visibility 0s .16s; }
}

.offers__tabs { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); column-gap: 10px; }
.offers__tab { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 3px; padding: 13px 0 0; border-top: 1px solid var(--rule-2); font: 400 13px/1.3 var(--f-text); color: var(--mute); transition: color var(--d-fast) var(--ease); }
.offers__n { font: 400 11px/1.45 var(--f-mono); letter-spacing: .06em; }
.offers__name { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.offers__tab:hover, .offers__tab.is-on { color: var(--ivory); }
.offers__tab:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }
.offers__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ivory); transform: scaleX(0); transform-origin: 0 50%; }
.is-on > .offers__bar { transform: scaleX(var(--p, 1)); }
@media (max-width: 640px) {
  .offers__track { gap: 10px; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); }
  /* телефон: сверху подпись предмета и сам предмет (у всех одной высоты), ниже — метка, заголовок (место на 3 строки), текст
     и кнопка у нижнего края — в ленте все карточки на одних линиях */
  .offer { flex-basis: 88%; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(35px, auto) auto minmax(35px, auto) auto auto auto minmax(0, 1fr) auto; grid-template-areas: "fl" "f" "k" "t" "d" "n" "." "go"; }
  .offer__fl { justify-self: start; max-width: none; text-align: left; }
  .offer__fig { height: 232px; margin: 16px 0 24px; overflow: hidden; }
  .offer__t { margin-top: 14px; font-size: clamp(24px, 7.6cqi, 32px); }
  /* Борис и ролик — на всю ширину от верхнего края: занимают ровно столько же, сколько подпись (35) + предмет (16 + 232 + 24) у остальных */
  .offer__fig--boris, .offer__fig--video { grid-row: 1 / 3; grid-column: 1; height: calc(283px + var(--pad)); margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 24px; }
  .offer__fig--boris img { width: 84%; margin-right: 0; }
  .offer--boris::before { bottom: auto; top: -20%; }
  .offer__fig--video { position: relative; inset: auto; }
  .offer__fig--video::after { background: linear-gradient(0deg, var(--wall-3), transparent 50%); }
  .offer__fig--clients { --cap: 108px; overflow: visible; }
  .offer__fig--clients .deck__t { gap: 4px; font-size: 14px; }
  .offer__fig--clients .deck__who { font-size: 22px; }
  .offer__fig--ai { margin-right: 0; }
  .offer__fig--ai img { border-right: 1px solid var(--ink-rule); }
  .offer__fig--orbit { --cap: 70px; margin: 16px calc(-1 * var(--pad)) 24px; }
  .offer__fig--orbit .cband__p b { font-size: 16px; }
  .reel__note b { font-size: 26px; }
  .offers__tabs { column-gap: 6px; }
  .offers__tab { padding: 0; height: 12px; }
  .offers__n, .offers__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- сцена курса: эксперты на орбите (components/cband.css upsound.org) ---------- */
.cband { --W: clamp(150px, 17vw, 270px); --R: calc(var(--W) * 1.25); --step: 4s; overflow: hidden; color: var(--ivory);
  padding-block: clamp(72px, 8vw, 128px) clamp(64px, 7vw, 112px); background: radial-gradient(56% 64% at 30% 42%, #221D19 0%, rgba(34, 29, 25, 0) 70%), var(--wall); border-top: 1px solid var(--rule); }
.cband__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: clamp(28px, 3vw, 48px); align-items: end; }
.cband__head { grid-column: 1 / -1; position: relative; z-index: 3; }
.cband__head .eyebrow i { font-style: normal; color: var(--ivory-2); }
.cband__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 10px; vertical-align: 1px; }
.cband__t { font: var(--t-banner); letter-spacing: -.06em; margin-top: 18px; }
.cband__t .it { font-size: 1.12em; margin-left: .04em; letter-spacing: -.02em; }
.cband__stage { grid-column: 1 / span 7; position: relative; height: calc(var(--W) * 1.62); margin-top: clamp(8px, 1.4vw, 24px); perspective: 1600px; perspective-origin: 50% 0%; }
.cband__stage::before { content: ""; position: absolute; left: 50%; bottom: calc(var(--W) * .36); width: calc(var(--R) * 2.9); height: calc(var(--W) * .5); translate: -50% 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 232, 220, .09), rgba(239, 232, 220, 0)); }
.cband__ring { --a: 0deg; position: absolute; left: 50%; bottom: calc(var(--W) * .36); width: var(--W); height: calc(var(--W) * .826); margin-left: calc(var(--W) / -2); transform-style: preserve-3d; transform: rotateX(-9deg) translateZ(calc(-1 * var(--R))); }
.cband__p { --t: calc(var(--i) * 60deg + var(--a)); position: absolute; inset: 0; margin: 0; transform-origin: 50% 100%; transform: rotateY(var(--t)) translateZ(var(--R)) rotateY(calc(-1 * var(--t))) rotateX(9deg); }
.cband__p img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05) brightness(.95); -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 98%); mask-image: linear-gradient(to bottom, #000 58%, transparent 98%); }
.cband__p figcaption { position: absolute; left: -40%; right: -40%; top: calc(100% + 20px); text-align: center; opacity: 0; }
.cband__p b { display: block; font: 400 clamp(16px, 1.25vw, 20px)/1.25 var(--f-display); letter-spacing: -.03em; }
.cband__p span { display: block; margin: 7px auto 0; max-width: 30ch; font: 400 11px/1.45 var(--f-mono); letter-spacing: .06em; color: var(--mute); }
@supports (opacity: cos(0deg)) {
  .cband__p img { filter: grayscale(1) contrast(1.05) brightness(calc(.22 + .38 * (cos(var(--t)) + 1))); }
  .cband__p figcaption { opacity: clamp(0, (cos(var(--t)) - .93) * 16, 1); }
}
@supports not (opacity: cos(0deg)) { .cband__p:first-child figcaption { opacity: 1; } }
.cband__side { grid-column: 8 / -1; position: relative; z-index: 3; display: grid; gap: clamp(24px, 2.2vw, 34px); align-self: end; padding-bottom: calc(var(--W) * .36 - 8px); }
.cband__d { font: 300 clamp(17px, 1.3vw, 19px)/1.55 var(--f-text); color: var(--ivory-2); max-width: 40ch; }
.cband__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); max-width: 520px; }
.cband__nums > * { display: grid; align-content: start; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rule-2); color: var(--ivory); }
.cband__nums b { font: 200 clamp(38px, 3.6vw, 60px)/.9 var(--f-display); letter-spacing: -.06em; white-space: nowrap; }
.cband__nums span { max-width: 24ch; font: 400 11px/1.45 var(--f-mono); letter-spacing: .06em; color: var(--mute); }
.cband__nums .arr { display: inline-block; vertical-align: middle; margin-left: 4px; transition: transform .6s var(--slow); }
.cband__nums a:hover span { color: var(--ivory-2); }
.cband__nums a:hover .arr { transform: translateX(4px); }
.cband__go { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .cband__ring { animation: cband-turn calc(var(--step) * 6) infinite; }
  .cband__stage:hover .cband__ring { animation-play-state: paused; }
}
@keyframes cband-turn {
  0%, 12.5% { --a: 0deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  16.667%, 29.167% { --a: -60deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  33.333%, 45.833% { --a: -120deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  50%, 62.5% { --a: -180deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  66.667%, 79.167% { --a: -240deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  83.333%, 95.833% { --a: -300deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  100% { --a: -360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .cband__stage { perspective: none; height: auto; margin-top: 0; }
  .cband__stage::before { display: none; }
  .cband__ring { position: static; width: auto; height: auto; margin: 0; transform: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 12px; }
  .cband__p { position: relative; transform: none; }
  .cband__p figcaption { position: static; margin-top: 10px; opacity: 1 !important; }
  .cband__p img { filter: grayscale(1) !important; }
  .offer__fig--orbit .cband__ring { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .offer__fig--orbit .cband__p:not(:first-child) { display: none; }
  .offer__fig--orbit .cband__p { width: min(100%, calc(var(--W) * 1.3)); }
}
@media (max-width: 960px) { .cband__stage, .cband__side { grid-column: 1 / -1; } .cband__stage { margin-top: 0; } }
@media (max-width: 640px) {
  .cband { --W: 132px; --R: calc(var(--W) * 1.12); }
  .cband__t { font-size: clamp(32px, 10.2vw, 50px); }
  .cband__stage { height: calc(var(--W) * 1.7 + 92px); margin-top: -8px; }
  .cband__stage::before, .cband__ring { bottom: calc(var(--W) * .62 + 92px); }
  .cband__p figcaption { left: -60%; right: -60%; }
  .cband__p span { max-width: none; }
  .cband__nums b { font-size: clamp(30px, 8.6vw, 38px); }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .cband__stage { height: auto; } }

/* ещё три курса — под сценой: одинаковые карточки, обложка 2:1 с первого экрана страницы курса, подписи по одной линии */
.courses { grid-column: 1 / -1; margin-top: clamp(28px, 3vw, 52px); padding-top: clamp(24px, 2.4vw, 36px); border-top: 1px solid var(--rule-2); }
.courses__k { margin-bottom: 22px; }
/* три курса (обход 30.10 22:12: «огромные отступы внизу, неаккуратно») — одинаковые карточки: обложка 2:1 во всю ширину,
   под ней номер, название и стрелка в одной строке, описание; высота карточек одна, подписи — по одним линиям (subgrid ниже) */
.courses__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 24px; }
.course a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 12px; row-gap: 10px; height: 100%; padding: 0 22px 24px; background: var(--wall-2); box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .5s var(--ease), background-color .5s var(--ease); }
.course a:hover { background: var(--wall-3); box-shadow: inset 0 0 0 1px var(--rule-2); }
.course__pic { grid-column: 1 / -1; display: block; aspect-ratio: 2 / 1; overflow: hidden; margin: 0 -22px 10px; background: var(--wall-3); }
.course__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--slow); }
.course a:hover .course__pic img { transform: scale(1.03); }
.course__n { font: 400 12px/1.85 var(--f-mono); letter-spacing: .08em; color: var(--mute); }
.course__t { font: 400 clamp(18px, 1.45vw, 22px)/1.2 var(--f-display); letter-spacing: -.035em; }
.course__d { grid-column: 2 / -1; max-width: 40ch; font: 300 15px/1.5 var(--f-text); color: var(--ivory-2); }
.course__a { grid-column: 3; grid-row: 2; align-self: start; padding-top: 4px; transition: transform .6s var(--slow); }
.course a:hover .course__a { transform: translateX(4px); }
/* после обучения — бесплатные материалы: без двойного пустого поля между разделами */
.cband.learn { padding-bottom: clamp(48px, 5vw, 80px); }
.learn + .free { padding-top: clamp(64px, 7vw, 112px); }
@media (max-width: 960px) { .courses__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cband__side { padding-bottom: 0; } }
@media (max-width: 640px) {
  .courses__list { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .course__d { font-size: 14.5px; }
}

/* ---------- первый экран B (?hero=b): стена работ, Борис — спереди сбоку; по умолчанию — A ---------- */
.wallhero, .offers-b { display: none; }
.hero-b .wallhero, .hero-b .offers-b { display: block; }
.hero-b .agency { display: none; }
.offers-b { padding-block: clamp(40px, 4vw, 72px) 0; }
.wallhero { position: relative; overflow: hidden; height: clamp(620px, calc(100svh - var(--hd)), 1100px); isolation: isolate; }
.wallhero__wall { position: absolute; inset: -6% -4%; z-index: -2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; transform: rotate(-4deg); }
.wall__col { display: grid; gap: 14px; align-content: start; }
.wall__t { overflow: hidden; background: var(--wall-2); }
.wall__t img { width: 100%; height: auto; display: block; }
.wall__t--case img { aspect-ratio: 1; object-fit: cover; filter: saturate(.85) brightness(.62); }
.wall__t--art img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 26%; filter: grayscale(1) contrast(1.05) brightness(.6); }
@media (prefers-reduced-motion: no-preference) {
  .wall__col { animation: wall-up calc(80s + var(--k) * 9s) linear infinite; }
  .wall__col:nth-child(even) { animation-name: wall-down; }
}
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes wall-down { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }
.wallhero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 10, 9, .97) 0%, rgba(11, 10, 9, .9) 34%, rgba(11, 10, 9, .45) 58%, rgba(11, 10, 9, .2) 100%), linear-gradient(0deg, rgba(11, 10, 9, .85), transparent 30%); }
.wallhero__boris { position: absolute; z-index: 1; right: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))); bottom: 0; height: 58%; width: auto; max-width: none;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7)); -webkit-mask-image: linear-gradient(#000 80%, transparent 100%); mask-image: linear-gradient(#000 80%, transparent 100%); }
.wallhero__label { position: absolute; z-index: 2; right: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))); bottom: calc(58% + 10px); display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; background: rgba(11, 10, 9, .7); font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-2); }
.wallhero__label b { font-weight: 400; color: var(--ivory); }
.wallhero__in { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); padding-top: clamp(18px, 2.6vh, 36px); }
.wallhero__in .agency__who { grid-column: 1 / span 6; }
.wallhero__in .agency__t { font-size: clamp(36px, 4.2vw, 72px); }
@media (max-width: 960px) {
  .wallhero__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wall__col:nth-child(n+5) { display: none; }
  .wallhero__in .agency__who { grid-column: 1 / -1; }
  .wallhero::before { background: linear-gradient(180deg, rgba(11, 10, 9, .94) 0%, rgba(11, 10, 9, .86) 48%, rgba(11, 10, 9, .35) 72%, rgba(11, 10, 9, .6) 100%); }
  .wallhero__boris { height: 34%; right: 0; }
  .wallhero__label { bottom: calc(34% + 8px); right: var(--gut); }
}
@media (max-width: 640px) {
  .wallhero { height: auto; min-height: calc(100svh - var(--hd)); padding-bottom: 46vw; }
  .wallhero__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wall__col { gap: 8px; }
  .wall__col:nth-child(n+4) { display: none; }
  .wallhero__boris { height: auto; width: 62vw; right: -6vw; }
  .wallhero__label { bottom: 40vw; font-size: 9.5px; }
}

/* ---------- превью у курсора (.peek) ---------- */
.peek { position: fixed; left: 0; top: 0; z-index: 80; width: clamp(180px, 15vw, 240px); pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0); transition: opacity .3s var(--ease); background: var(--wall-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); will-change: transform; }
.peek.is-on { opacity: 1; }
.peek img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% var(--y, 26%); }
.peek__t { display: block; padding: 8px 10px 9px; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-2); }
.peek__t:empty { display: none; }
@media (hover: none) { .peek { display: none; } }

/* ---------- о нас: компактная шапка + 6 карточек с инфографикой и анимациями + рост артистов в кейсах (как на /manager) ---------- */
.about.room { padding-block: clamp(56px, 5.6vw, 92px); }
.about__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 18px; align-items: end; }
.about__hl { grid-column: 1 / span 4; display: grid; gap: 10px; min-width: 0; }
.about__t { grid-column: auto; font: 300 clamp(36px, 4.2vw, 68px)/.94 var(--f-display); letter-spacing: -.055em; }
.about__lede { grid-column: 5 / -1; font: 300 clamp(16.5px, 1.32vw, 21px)/1.46 var(--f-text); color: var(--ivory-2); max-width: 64ch; }
.ab-nums { margin-top: clamp(28px, 2.8vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 14px); }
.ab-num { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: clamp(166px, 12.4vw, 206px); padding: clamp(18px, 1.5vw, 24px); background: var(--wall-2); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; transition: border-color .4s var(--ease), background-color .4s var(--ease); }
.ab-num:hover { background: var(--wall-3); border-color: var(--rule-2); }
.ab-num__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.ab-num__v b { font: 200 clamp(38px, 3.5vw, 64px)/.92 var(--f-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ivory); white-space: nowrap; }
.ab-num__v span { font: 300 clamp(14px, 1.05vw, 18px)/1 var(--f-display); letter-spacing: -.025em; color: var(--ivory-2); }
.ab-num__p { margin-top: 8px; max-width: 34ch; font: 300 clamp(13.5px, .95vw, 15px)/1.42 var(--f-text); color: var(--ivory-2); }
.ab-num__g { margin-top: auto; padding-top: clamp(14px, 1.1vw, 18px); }
.g-stack { display: flex; align-items: center; }
.g-stack img { width: clamp(30px, 2.1vw, 36px); height: auto; aspect-ratio: 1; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 2px var(--wall-2); margin-right: -7px; opacity: .92; transition: opacity .5s var(--ease) calc(.22s + var(--k, 0) * .08s), transform .5s var(--ease) calc(.22s + var(--k, 0) * .08s), margin-right .45s var(--slow), filter .45s var(--ease), box-shadow .4s var(--ease); }
.ab-num:hover .g-stack img { margin-right: -3px; box-shadow: 0 0 0 2px var(--wall-3); }
.g-stack.is-round img { border-radius: 50%; object-position: 50% var(--y, 24%); filter: grayscale(1) contrast(1.04); }
.ab-num:hover .g-stack.is-round img { filter: grayscale(.2) contrast(1.02); }
.g-time { position: relative; display: flex; justify-content: space-between; }
.g-time::before { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 1px; background: linear-gradient(90deg, rgba(239, 232, 220, .42), rgba(239, 232, 220, .14)); transform-origin: left; transition: transform 1.6s var(--ease) .18s; }
.g-time span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; font: 400 11px/1.2 var(--f-mono); letter-spacing: .04em; color: var(--mute); transition: opacity .5s var(--ease) calc(.25s + var(--k, 0) * .24s), transform .5s var(--ease) calc(.25s + var(--k, 0) * .24s); }
.g-time span:first-child { align-items: flex-start; }
.g-time span:last-child { align-items: flex-end; color: var(--ivory); }
.g-time i { width: 7px; height: 7px; border-radius: 50%; background: rgba(239, 232, 220, .72); box-shadow: 0 0 0 3px var(--wall-2); transition: box-shadow .4s var(--ease); }
.ab-num:hover .g-time i { box-shadow: 0 0 0 3px var(--wall-3); }
.g-time span:last-child i { background: var(--red); box-shadow: 0 0 0 3px var(--wall-2), 0 0 0 6px rgba(227, 6, 19, .24); }
.g-ticks { display: flex; align-items: flex-end; justify-content: space-between; height: clamp(22px, 1.6vw, 28px); }
.g-ticks i { flex: none; width: 1px; height: 54%; background: rgba(239, 232, 220, .42); transition: background-color .32s var(--ease) calc(var(--k, 0) * 13ms); }
.g-ticks i.t10 { height: 100%; background: rgba(239, 232, 220, .74); }
.g-ticks i:last-child { width: 2px; background: var(--red); }
.g-dots { display: block; width: 100%; height: clamp(32px, 2.2vw, 36px); }
@media (prefers-reduced-motion: no-preference) {
  .js .ab-num:not(.is-in) .g-time::before { transform: scaleX(0); }
  .js .ab-num:not(.is-in) .g-time span { opacity: 0; transform: translateY(6px); }
  .js .ab-num:not(.is-in) .g-stack img { opacity: 0; transform: translateX(-8px); }
  .js .ab-num:not(.is-in) .g-ticks i { background: rgba(239, 232, 220, .11); }
}

/* второй ряд «О нас»: слева — графики роста артистов в кейсах, справа — 4 карточки ярких результатов */
.ab-grow-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(10px, 1vw, 14px); margin-top: clamp(10px, 1vw, 14px); }
.ab-grow { min-width: 0; padding: clamp(20px, 1.7vw, 28px) clamp(20px, 1.7vw, 28px) clamp(10px, .9vw, 16px); background: var(--wall-2); border: 1px solid var(--rule); border-radius: 14px; }
.ab-grow__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: clamp(6px, .6vw, 10px); }
.ab-grow__h { font: 400 clamp(17px, 1.25vw, 21px)/1.2 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
.ab-grow__k { font: var(--t-label); letter-spacing: .09em; text-transform: uppercase; color: var(--mute); }
.gr { display: grid; grid-template-columns: clamp(40px, 3vw, 48px) minmax(0, 1.2fr) minmax(72px, .95fr) auto minmax(64px, 5.2em); align-items: center; gap: clamp(10px, 1.05vw, 18px); padding: clamp(12px, .95vw, 16px) 0; min-width: 0; }
.gr + .gr { border-top: 1px solid var(--rule); }
.gr__th { width: 100%; height: auto; aspect-ratio: 1; border-radius: 9px; object-fit: cover; background: var(--wall-3); transition: transform .6s var(--slow); }
.gr:hover .gr__th, .gr:focus-visible .gr__th { transform: scale(1.06); }
.gr__who { min-width: 0; }
.gr__who b { display: block; font: 400 clamp(15px, 1.1vw, 19px)/1.2 var(--f-display); letter-spacing: -.025em; color: var(--ivory); transition: color .3s var(--ease); }
.gr:hover .gr__who b, .gr:focus-visible .gr__who b { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gr__who span { display: block; margin-top: 3px; font: 300 13px/1.35 var(--f-text); color: var(--mute); }
.gr__ch { position: relative; display: block; width: 100%; height: clamp(32px, 2.4vw, 44px); }
.gr__ch svg { display: block; width: 100%; height: 100%; overflow: visible; transition: clip-path 1.5s var(--ease) calc(.16s + var(--gi, 0) * .14s); clip-path: inset(-8px -8px -8px -8px); }
.gr__ch .ar { fill: rgba(227, 6, 19, .2); transition: opacity .9s var(--ease) calc(.72s + var(--gi, 0) * .14s); }
.gr__ch .ln { fill: none; stroke: var(--red); stroke-width: 2.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gr__dot { position: absolute; left: calc(118 / 120 * 100%); top: calc(5 / 40 * 100%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 3px rgba(227, 6, 19, .32); transition: opacity .35s var(--ease) calc(1.3s + var(--gi, 0) * .14s); }
@media (prefers-reduced-motion: no-preference) {
  .js .ab-grow:not(.is-in) .gr__ch svg { clip-path: inset(-8px 100% -8px -8px); }
  .js .ab-grow:not(.is-in) .gr__ch .ar, .js .ab-grow:not(.is-in) .gr__dot { opacity: 0; }
}
.gr__val { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 300 clamp(13px, .92vw, 14.5px)/1.2 var(--f-text); color: var(--ivory-2); }
.gr__val b { font-weight: 500; color: var(--ivory); }
.gr__arr { flex: none; color: var(--mute); }
.gr__x { text-align: right; white-space: nowrap; font: 300 clamp(18px, 1.45vw, 26px)/1 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
.gr__mul { display: inline-flex; align-items: center; gap: 3px; }
.gr__xmul { flex: none; color: var(--red-ink); transform: translateY(-.5px); }
.ab-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1vw, 14px); min-width: 0; }
.rc2 { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(16px, 1.4vw, 22px); background: var(--wall-2); border: 1px solid var(--rule); border-radius: 14px; transition: background-color .35s var(--ease), border-color .35s var(--ease), transform .45s var(--slow); }
.rc2:hover, .rc2:focus-visible { background: var(--wall-3); border-color: var(--rule-2); transform: translateY(-2px); }
.rc2__h { display: flex; align-items: center; gap: 10px; padding-right: 20px; min-width: 0; }
.rc2__h img { width: clamp(32px, 2.8vw, 46px); height: auto; aspect-ratio: 1; flex: none; border-radius: 9px; object-fit: cover; background: var(--wall-3); }
.rc2__a { font: 400 clamp(13.5px, 1.05vw, 18px)/1.18 var(--f-display); letter-spacing: -.025em; color: var(--ivory); min-width: 0; }
.rc2__n { margin-top: auto; padding-top: 16px; font: 200 clamp(30px, 2.5vw, 48px)/.95 var(--f-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--ivory); white-space: nowrap; }
.rc2__l { margin-top: 8px; font: 300 clamp(13px, .9vw, 14.5px)/1.38 var(--f-text); color: var(--ivory-2); }
.rc2__z { position: absolute; right: 14px; top: 14px; color: var(--mute); transition: color .3s var(--ease), transform .45s var(--slow); }
.rc2:hover .rc2__z, .rc2:focus-visible .rc2__z { color: var(--ivory); transform: translate(2px, -1px); }
@media (max-width: 1080px) {
  .ab-grow-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .about__hl, .about__lede { grid-column: 1 / -1; }
  .ab-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ab-nums { grid-template-columns: minmax(0, 1fr); }
  .ab-num { min-height: 0; padding: 18px; }
  .ab-grow { padding: 18px 18px 10px; }
  .ab-grow__k { display: none; }
  .gr { grid-template-columns: 42px minmax(0, 1fr) auto; row-gap: 8px; }
  .gr__ch { grid-column: 1 / -1; grid-row: 2; height: 34px; }
  .gr__val { grid-column: 2 / -1; grid-row: 3; }
  .gr__x { grid-column: 3; grid-row: 1; font-size: 20px; }
  .rc2__n { font-size: clamp(26px, 7vw, 34px); }
}
@media (max-width: 379px) {
  .ab-res { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- что делаем: у каждой услуги — для кого делали и что вышло ---------- */
.svc__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); align-items: start; }
.svc__list { grid-column: 1 / span 7; }
.svc__item { border-top: 1px solid var(--rule); }
.svc__item:last-child { border-bottom: 1px solid var(--rule); }
/* строка услуги (вариант 4, согласован 06.11): при наведении вся строка заливается светлым,
   справа круглая кнопка становится красной и поворачивается — видно, что это ссылка, а не текст */
.svc__row { position: relative; display: grid; grid-template-columns: 3.4ch minmax(0, 1fr) 54px;
  column-gap: clamp(14px, 1.6vw, 24px); align-items: center; border-radius: 3px;
  padding: clamp(18px, 1.7vw, 25px) clamp(10px, 1.3vw, 18px) clamp(18px, 1.7vw, 25px) 10px;
  transition: background .5s var(--ease), color .5s var(--ease); }
.svc__n { font: 400 11px/1.4 var(--f-mono); letter-spacing: .1em; color: var(--mute); transition: color .4s; }
.svc__t { grid-column: 2; font: 300 clamp(22px, 2.2vw, 36px)/1.08 var(--f-display); letter-spacing: -.045em;
  transition: transform .7s var(--slow), color .4s; }
.svc__d { grid-column: 2; margin-top: 9px; max-width: 50ch; font: 300 14.5px/1.5 var(--f-text);
  color: var(--ivory-2); transition: color .4s; }
.svc__a { grid-column: 3; grid-row: 1 / span 2; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--rule-2); color: var(--ivory);
  transition: background .45s var(--ease), border-color .45s, color .45s, transform .6s var(--slow); }
.svc__row:hover, .svc__row:focus-visible { background: var(--ivory); color: var(--ink); }
.svc__row:hover .svc__n, .svc__row:focus-visible .svc__n { color: var(--fog-mute); }
.svc__row:hover .svc__t, .svc__row:focus-visible .svc__t { color: var(--ink); transform: translateX(8px); }
.svc__row:hover .svc__d, .svc__row:focus-visible .svc__d { color: var(--ink-2); }
.svc__row:hover .svc__a, .svc__row:focus-visible .svc__a { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-45deg); }
/* панель шире (5 колонок из 12) и отодвинута от стрелок списка */
.svc__panel { grid-column: 8 / -1; position: sticky; top: calc(var(--hd) + 20px); display: none; margin-left: clamp(0px, 2.4vw, 44px); }
/* доказательство услуги (обход 30.10 22:12: «мусор, куча шрифтов, куча жирности, всё близко») — одна строгая система:
   три стиля текста — цифра (одна на панель), обычный текст (светлый — главное, приглушённый — пояснение, жирного нет)
   и метка моноширинным; части идут столбиком через одинаковый воздух и тонкую линию; картинки не накладываются друг на друга */
.proof { container-type: inline-size; display: grid; min-width: 0; padding: 4px 4px 32px calc(4ch + clamp(12px, 1.4vw, 22px) + 4px); font: 300 15px/1.5 var(--f-text); color: var(--ivory-2); }
.proof > :not(:first-child) { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.proof__k { display: block; margin-bottom: 12px; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.proof__num { display: grid; gap: 12px; }
.proof__num b { font: 200 clamp(40px, 13cqi, 72px)/.86 var(--f-display); letter-spacing: -.06em; white-space: nowrap; color: var(--ivory); }
.proof__num span { max-width: 36ch; }
.proof__media { display: grid; gap: 12px; margin: 0; }
.proof__media--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof__media--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* квадратный кадр — слева, подпись — справа у его нижнего края */
.proof__media--sq { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); column-gap: 20px; align-items: end; }
.proof__media:not(.proof__media--2):not(.proof__media--3):not(.proof__media--sq) .proof__shot img { aspect-ratio: 16 / 9; object-fit: cover; }
.proof__media figcaption { grid-column: 1 / -1; max-width: 44ch; }
.proof__media--sq figcaption { grid-column: 2; }
.proof__shot { position: relative; display: block; overflow: hidden; background: var(--wall-3); }
.proof__shot img { display: block; width: 100%; height: auto; }
.proof__shot i { position: absolute; left: 8px; top: 8px; padding: 3px 7px; background: rgba(11, 10, 9, .82); font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--ivory); }
.proof__shot--wide { margin-top: 16px; border: 1px solid var(--rule); }
.proof__cases { display: grid; gap: 16px; }
.proof__cases a { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.proof__cases img { width: 72px; height: 72px; object-fit: cover; }
.proof__cases a > span { display: grid; min-width: 0; }
.proof__cases .proof__k { margin-bottom: 4px; }
.proof__ct { color: var(--ivory); overflow-wrap: break-word; }
.proof__res { font-weight: inherit; }
.proof__cases a:hover .proof__ct { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.proof__works ul { display: grid; gap: 12px; }
.proof__works li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.proof__works img { width: 56px; height: 56px; object-fit: cover; }
.proof__works li > span { display: grid; gap: 2px; min-width: 0; }
.proof__works b { font-weight: inherit; color: var(--ivory); }
.proof__works li > span > span { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.proof__more { margin-top: 14px; max-width: 44ch; }
.proof__chips ul { display: flex; flex-wrap: wrap; gap: 8px; }
.proof__chips li { padding: 5px 11px; border: 1px solid var(--rule-2); color: var(--ivory-2); }
.proof__who { display: grid; }
.proof__faces { display: flex; gap: 8px; margin-bottom: 16px; }
.proof__faces li { flex: none; width: 56px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--wall-3); }
.proof__faces img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: grayscale(1) contrast(1.05); }
.proof__names { color: var(--ivory); }
@media (min-width: 961px) {
  .js .svc__list .proof { display: none; }
  .js .svc__panel { display: block; }
  /* вариант 4: все названия светлые, текущая услуга — сдвинута, кнопка видна;
     при наведении строку заливает светлым, и текст на ней становится тёмным */
  .js .svc__item:not(.is-on) .svc__t { color: var(--ivory); }
  .js .svc__item:not(.is-on) .svc__d { color: var(--ivory-2); }
  .js .svc__item.is-on .svc__t { transform: translateX(8px); }
  .js .svc__item.is-on .svc__a { border-color: var(--rule-2); }
  /* закреплённая панель выше последней строки списка: ряд сетки (в его границах ходит панель) удлинён вниз за счёт пустого
     поля раздела — у последней услуги панель целиком под шапкой, а не уезжает вверх вместе с концом списка */
  .js .svc__list { padding-bottom: 250px; }
  .js .svc__in { margin-bottom: -250px; }
}
.svc__panel-in { --sp-pad: clamp(26px, 2.4vw, 40px); min-height: min(56vh, 480px); padding: var(--sp-pad); background: var(--wall-2); box-shadow: inset 0 0 0 1px var(--rule); }
.svc__panel-in .proof { padding: 0; animation: proof-in .7s var(--slow) both; }
.svc__panel-in .svc__ttl { display: block; margin-bottom: 22px; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-2); }
.svc__panel-in:has(.us-cv) > .svc__ttl { display: none; }
/* невысокое окно (ноутбук 1280×720, планшет боком): воздух меньше, картинки ниже — панель целиком под шапкой */
@media (min-width: 961px) and (max-height: 860px), (min-width: 961px) and (max-width: 1180px) {
  .svc__panel-in { --sp-pad: 22px; padding: var(--sp-pad); }
  .svc__panel-in .svc__ttl { margin-bottom: 16px; }
  .svc__panel-in .proof > :not(:first-child) { margin-top: 16px; padding-top: 16px; }
  .svc__panel-in .proof__num b { font-size: clamp(34px, 10cqi, 52px); }
  .svc__panel-in .proof__media--sq { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
  .svc__panel-in .proof__media--2 .proof__shot img { max-height: 150px; object-fit: cover; object-position: 50% 0; }
  .svc__panel-in .proof__media--3 .proof__shot img { max-height: 190px; object-fit: cover; }
  .svc__panel-in .proof__media:not(.proof__media--2):not(.proof__media--3):not(.proof__media--sq) .proof__shot img { aspect-ratio: 2 / 1; }
  .svc__panel-in .proof__cases { gap: 12px; }
  .svc__panel-in .proof__cases a { grid-template-columns: 56px minmax(0, 1fr); }
  .svc__panel-in .proof__cases img { width: 56px; height: 56px; }
  .svc__panel-in .proof__faces { margin-bottom: 10px; }
  .svc__panel-in .proof__faces li { width: 44px; }
  .svc__panel-in .proof__works li { grid-template-columns: 44px minmax(0, 1fr); }
  .svc__panel-in .proof__works img { width: 44px; height: 44px; }
}
.svc__empty { display: grid; gap: 12px; }
.svc__empty b { font: 300 clamp(26px, 2.4vw, 40px)/1.05 var(--f-display); letter-spacing: -.045em; }
.svc__empty span { font: 300 15.5px/1.5 var(--f-text); color: var(--ivory-2); max-width: 36ch; }
@keyframes proof-in { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 960px) { .svc__list { grid-column: 1 / -1; } }
/* телефон (вариант 4): вместо длинного списка — лента из 13 карточек со своей обложкой и кнопкой.
   Счётчик «01 / 13» показывает, сколько просмотрено и сколько осталось */
.svc__hint, .svc__tape { display: none; }
@media (max-width: 960px) {
  .svc__hint { display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
    font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
  .svc__hint i { display: block; height: 2px; width: 44px; background: var(--red); }
  .svc__count { margin-left: auto; color: var(--ivory-2); }
  .js .svc__list { display: none; }
  .svc__tape { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gut); -webkit-overflow-scrolling: touch;
    padding: 2px var(--gut) 24px; margin: 0 calc(-1 * var(--gut)); scrollbar-width: none; }
  .svc__tape::-webkit-scrollbar { display: none; }
  .svc__card { flex: 0 0 min(80vw, 340px); scroll-snap-align: start; background: var(--wall-2);
    box-shadow: inset 0 0 0 1px var(--rule); display: grid; grid-template-rows: auto auto 1fr auto;
    text-decoration: none; color: inherit; }
  .svc__card-ph { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wall-3); }
  .svc__card-ph .us-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
  .svc__card-n { position: absolute; right: 11px; top: 11px; padding: 5px 7px; background: rgba(11, 10, 9, .82);
    font: 500 10px/1 var(--f-mono); letter-spacing: .12em; color: var(--ivory); }
  .svc__card-tx { display: grid; gap: 7px; padding: 14px 14px 0; }
  .svc__card-t { font: 300 19px/1.15 var(--f-display); letter-spacing: -.04em; }
  .svc__card-d { font: 300 13px/1.45 var(--f-text); color: var(--ivory-2); }
  .svc__card-cta { margin: 13px; display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px; background: var(--ivory); color: var(--ink); font: 500 13.5px/1 var(--f-text); }
  .svc__card:active .svc__card-cta { background: var(--red); color: #fff; }
}
@media (max-width: 640px) {
  .svc__row { grid-template-columns: 3.4ch minmax(0, 1fr) 20px; }
  .svc__t { font-size: 24px; }
  .proof { padding-left: calc(3.4ch + 16px); }
  .proof > :not(:first-child) { margin-top: 18px; padding-top: 18px; }
  .proof__cases a { grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; }
  .proof__cases img { width: 60px; height: 60px; }
  .proof__faces li { width: 48px; }
}

/* ---------- бесплатные материалы: воздушная витрина физических 3D-книжечек (5×4, без текста снизу в покое, подпись всплывает в воздухе при наведении) ---------- */
.bk { position: relative; display: block; padding: 0 12px 12px 0; perspective: 1200px; pointer-events: none; }
.bk__leaf {
  position: relative; display: block; aspect-ratio: 320 / 453; border-radius: 1px 3px 3px 1px; background: var(--wall-2);
  transform-origin: 0 50%; transform: rotateY(-15deg) rotateX(2deg);
  transition: transform .85s var(--slow), box-shadow .85s var(--slow);
  box-shadow: 2px 2px 0 -.5px #EAE4D8, 4px 4px 0 -1px #A9A296, 6px 6px 0 -1.5px #E3DDD1, 8px 8px 0 -2px #8B8479, 10px 10px 0 -2.5px #D8D1C4, 22px 30px 40px -18px rgba(0, 0, 0, .92);
}
.bk--game .bk__leaf {
  background: radial-gradient(92% 68% at 50% 42%, #5e0d13 0%, #1f0a09 60%, #0b0a09 100%);
  box-shadow: 2px 2px 0 -.5px #6b151b, 4px 4px 0 -1px #360b0e, 6px 6px 0 -1.5px #521116, 8px 8px 0 -2px #24080a, 22px 30px 40px -18px rgba(0, 0, 0, .94);
}
.bk__leaf > img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px 3px 3px 1px; }
.bk__leaf::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, .05) 2px, rgba(0, 0, 0, .58) 5px, rgba(255, 255, 255, .1) 8px, rgba(255, 255, 255, 0) 16px), linear-gradient(128deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 44%);
  box-shadow: inset 0 0 0 1px rgba(239, 232, 220, .14);
}
.bk__game-in { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6%; padding: 10% 11% 11%; }
.bk__game-top { display: inline-flex; align-items: center; gap: 7px; font: 500 9.5px/1.2 var(--f-mono); letter-spacing: .12em; color: var(--ivory-2); }
.bk__game-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.bk__game-in img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .65)); }
.bk__game-in b { font: 300 clamp(16px, 1.45vw, 24px)/1 var(--f-display); letter-spacing: -.05em; color: var(--ivory); }
.bk__game-in .it { font-size: 1.16em; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .fm__a:hover .bk__leaf, .fm__a:focus-visible .bk__leaf {
    transform: rotateY(-3deg) rotateX(.5deg) translateY(-8px);
    box-shadow: 1.5px 1.5px 0 -.5px #EAE4D8, 3px 3px 0 -1px #A9A296, 4.5px 4.5px 0 -1.5px #E3DDD1, 6px 6px 0 -2px #8B8479, 26px 42px 50px -20px rgba(0, 0, 0, .96);
  }
  .fm__a:hover .bk--game .bk__leaf, .fm__a:focus-visible .bk--game .bk__leaf {
    box-shadow: 1.5px 1.5px 0 -.5px #6b151b, 3px 3px 0 -1px #360b0e, 4.5px 4.5px 0 -1.5px #521116, 26px 42px 50px -20px rgba(0, 0, 0, .96);
  }
}
.fm__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 430px); column-gap: clamp(32px, 4vw, 72px); row-gap: 24px;
  align-items: end; padding-bottom: clamp(28px, 3vw, 44px); margin-bottom: clamp(40px, 4.4vw, 64px); border-bottom: 1px solid var(--rule);
}
.fm__hl { display: grid; gap: 14px; }
.fm__hr { display: grid; gap: 16px; justify-items: start; }
.fm__stat { display: flex; align-items: baseline; gap: 16px; }
.fm__stat b { font: 200 clamp(44px, 4.2vw, 64px)/.85 var(--f-display); letter-spacing: -.06em; color: var(--ivory); }
.fm__stat span { font: 300 14.5px/1.48 var(--f-text); color: var(--ivory-2); max-width: 34ch; }
.fm__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(28px, 3.4vw, 52px); row-gap: clamp(72px, 6.2vw, 94px); }
.fm__item { position: relative; min-width: 0; }
.fm__a { position: relative; display: block; transition: opacity .5s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .fm__grid:has(.fm__a:hover, .fm__a:focus-visible) .fm__a:not(:hover, :focus-visible) { opacity: .48; }
}
.fm__cap {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: 4px;
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .4s var(--ease), transform .6s var(--slow);
}
.fm__k { display: inline-flex; align-items: center; gap: 7px; font: 400 10px/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--mute); }
.fm__k i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex: none; }
.fm__k span { white-space: nowrap; }
.fm__s { display: inline-flex; align-items: center; gap: 6px; font: 400 13.5px/1.32 var(--f-text); color: var(--ivory); }
.fm__s .arr { width: 10px; height: 10px; color: var(--ivory-2); flex: none; }
@media (hover: hover) and (pointer: fine) {
  .fm__a:hover .fm__cap, .fm__a:focus-visible .fm__cap { opacity: 1; transform: translateY(0); }
}
.fm__all { display: block; padding: 0 12px 12px 0; height: 100%; }
.fm__all-leaf {
  display: grid; grid-template-rows: auto 1fr auto; align-items: end; aspect-ratio: 320 / 453; padding: clamp(18px, 1.8vw, 26px);
  border: 1px solid var(--rule-2); background: linear-gradient(165deg, rgba(239, 232, 220, .035), rgba(239, 232, 220, .008));
  transition: border-color .5s var(--ease), background-color .5s var(--ease), transform .7s var(--slow);
}
.fm__all-k { font: 400 10px/1.4 var(--f-mono); letter-spacing: .1em; color: var(--mute); }
.fm__all-t { align-self: center; font: 300 clamp(18px, 1.5vw, 24px)/1.16 var(--f-display); letter-spacing: -.04em; color: var(--ivory); }
.fm__all-t .it { display: block; font-size: 1.15em; color: var(--ivory-2); margin-top: 2px; }
.fm__all-go { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1.2 var(--f-text); color: var(--ivory); padding-top: 12px; border-top: 1px solid var(--rule); }
.fm__all:hover .fm__all-leaf, .fm__all:focus-visible .fm__all-leaf { border-color: var(--ivory); transform: translateY(-6px); }
@media (max-width: 1240px) { .fm__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 920px) {
  .fm__head { grid-template-columns: 1fr; }
  .fm__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 64px; }
}
@media (max-width: 640px) {
  .fm__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 152px; column-gap: 18px; row-gap: 0;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding: 10px var(--gut) 20px; scroll-padding-inline: var(--gut);
  }
  .fm__grid::-webkit-scrollbar { display: none; }
  .fm__item { scroll-snap-align: start; }
  .fm__cap { display: none; }
}

/* ---------- отзывы: минималистичная россыпь (тёплый графит главной, без сердечек) ---------- */
.rev-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(239, 232, 220, .13); color: var(--ivory);
  font: 500 13.5px/1 var(--f-text); letter-spacing: -.005em;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.rev-pill:hover { background: rgba(255, 255, 255, .105); border-color: rgba(239, 232, 220, .28); transform: translateY(-1px); }
.rev-pill svg { opacity: .78; transition: transform .3s var(--ease), opacity .3s; }
.rev-pill:hover svg { opacity: 1; transform: translate(1.5px, -1.5px); }

.rscatter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); align-items: start; }
.rscol { display: flex; flex-direction: column; gap: clamp(32px, 3.6vw, 56px); min-width: 0; }
.rscol--mid { padding-top: clamp(36px, 4.4vw, 76px); gap: clamp(36px, 4vw, 64px); }
.rscol--end { padding-top: clamp(6px, 1vw, 16px); gap: clamp(56px, 6.8vw, 108px); }
.rslot { display: flex; min-width: 0; }
.rslot--l { justify-content: flex-start; }
.rslot--c { justify-content: center; }
.rslot--r { justify-content: flex-end; }

.rcard {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  width: min(100%, var(--mw, 360px)); padding: 15px 19px 14px 15px; border-radius: 15px;
  background: linear-gradient(180deg, #1E1B19, #171513);
  border: 1px solid rgba(239, 232, 220, .13);
  box-shadow: 0 24px 54px -24px rgba(0, 0, 0, .92);
  color: var(--ivory); text-align: left; cursor: zoom-in;
  transform: translateX(var(--dx, 0px)) rotate(var(--t, 0deg));
  transition: transform .5s var(--slow), background .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease);
}
.rcard:hover, .rcard:focus-visible {
  transform: translateX(var(--dx, 0px)) rotate(0deg) translateY(-8px) scale(1.02);
  background: linear-gradient(180deg, #25211E, #1B1816);
  border-color: rgba(239, 232, 220, .30);
  box-shadow: 0 36px 76px -20px rgba(0, 0, 0, 1);
  z-index: 3; outline: none;
}
.rcard__ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; margin-top: 1px; background: var(--wall-3); }
.rcard__body { min-width: 0; flex: 1; }
.rcard__head { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rcard__name { font: 500 13.5px/1.25 var(--f-text); color: #F6F3EC; letter-spacing: -.008em; }
.rcard__chk { width: 13.5px; height: 13.5px; color: var(--ivory-2); opacity: .88; flex: none; }
.rcard__text { margin: 4px 0 0; font: 400 13.5px/1.4 var(--f-text); color: rgba(244, 240, 232, .9); text-wrap: pretty; }
.rcard__em { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; }
.rcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; }
.rcard__date { display: block; font: 400 12.5px/1.25 var(--f-text); color: rgba(239, 232, 220, .44); white-space: nowrap; }
.rcard__proof { display: inline-flex; align-items: center; gap: 4px; font: 400 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ivory-2); opacity: 0; transform: translateX(-4px); transition: opacity .28s var(--ease), transform .28s var(--ease); white-space: nowrap; }
.rcard__parr { flex: none; opacity: .85; }
.rcard:hover .rcard__proof, .rcard:focus-visible .rcard__proof { opacity: .8; transform: none; }

.rlb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgba(8, 7, 7, .93); color: var(--ivory);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-y: auto; overscroll-behavior: contain;
}
.rlb::backdrop { background: transparent; }
.rlb[open] { animation: lb-in .32s var(--ease); }
.rlb__stage { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(68px, 8vh, 104px) var(--gut) clamp(32px, 6vh, 64px); cursor: zoom-out; }
.rlb__x {
  position: fixed; right: var(--gut); top: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--rule-2); background: rgba(20, 18, 17, .88); color: var(--ivory);
  font: 500 13px/1 var(--f-text); cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.rlb__x:hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.rlb__in { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(28px, 4.6vw, 84px); align-items: center; width: min(100%, 1240px); cursor: auto; }
.rlb__shot { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--rule); box-shadow: 0 40px 100px -24px rgba(0, 0, 0, .95); transform-origin: 0 0; }
.rlb__k { margin: 0 0 14px; color: var(--mute); }
.rlb__q { margin: 0; font: 300 clamp(22px, 2.3vw, 36px)/1.24 var(--f-display); letter-spacing: -.03em; color: var(--ivory); text-wrap: pretty; }
.rlb__who { margin-top: clamp(18px, 2vw, 28px); display: flex; align-items: center; gap: 12px; }
.rlb__who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--wall-3); }
.rlb__who b { display: flex; align-items: center; gap: 6px; font: 500 16px/1.25 var(--f-text); color: var(--ivory); }
.rlb__who > div > span { display: block; margin-top: 3px; font: 400 13.5px/1.25 var(--f-text); color: var(--mute); }

@media (max-width: 1120px) {
  .rscatter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .rscol--mid { padding-top: 28px; }
  .rscol--end { grid-column: 1 / -1; flex-direction: row; padding-top: 4px; gap: 28px; justify-content: space-around; }
  .rscol--end .rslot { flex: 1; justify-content: center; }
  .rcard { transform: rotate(var(--t, 0deg)); }
  .rcard:hover, .rcard:focus-visible { transform: rotate(0deg) translateY(-6px); }
}
@media (max-width: 680px) {
  .rscatter { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .rscol, .rscol--mid, .rscol--end { flex-direction: column; padding-top: 0; gap: 34px; }
  .rslot, .rslot--l, .rslot--c, .rslot--r, .rscol--end .rslot { justify-content: flex-start; }
  .rscol .rslot:nth-child(even) { justify-content: flex-end; }
  .rcard { width: min(92%, var(--mw, 360px)); padding: 15px 18px 14px 15px; transform: rotate(calc(var(--t, 0deg) * .6)); }
  .rlb__stage { align-items: flex-start; }
  .rlb__in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .rcard, .rcard:hover, .rcard:focus-visible { transform: none; transition: none; }
  .rlb[open] { animation: none; }
}

/* ---------- своя система управления проектами: экраны CRM в ноутбуке, слева — подписи-выгоды для артиста ---------- */
/* overflow: clip, а не hidden: hidden делает раздел прокручиваемым, и анимация крышки от прокрутки страницы не идёт */
.sys { position: relative; overflow: hidden; overflow: clip; padding-block: clamp(88px, 9vw, 150px); background: #070606; border-top: 1px solid var(--rule); isolation: isolate; }
.sys__glow { position: absolute; z-index: -1; right: -18%; top: 34%; width: min(1400px, 130vw); aspect-ratio: 1.5; border-radius: 50%; background: radial-gradient(closest-side, rgba(227, 6, 19, .2), rgba(227, 6, 19, 0) 72%); pointer-events: none; }
.sys__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: clamp(44px, 4.6vw, 80px); }
.sys__head { grid-column: 1 / span 9; display: grid; gap: 18px; }
.sys__t { font: 300 clamp(36px, 4.4vw, 76px)/.98 var(--f-display); letter-spacing: -.055em; }
.sys__t .it { font-size: 1.12em; }
.sys__stage { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 36px; align-items: center; }
.sys__tabs { grid-column: 1 / span 4; display: grid; border-top: 1px solid var(--rule); }
.sys__tab { position: relative; display: grid; grid-template-columns: 3.4ch minmax(0, 1fr); column-gap: 10px; padding: 14px 0 15px; border-bottom: 1px solid var(--rule); color: var(--ivory-2); transition: color .45s var(--ease); }
.js .sys__tab { color: var(--mute); }
.sys__tab .offers__bar { top: auto; bottom: -1px; }
.sys__tn { font: 400 11px/2 var(--f-mono); letter-spacing: .06em; }
.sys__tt { font: 300 clamp(16px, 1.32vw, 21px)/1.24 var(--f-display); letter-spacing: -.03em; }
.sys__tt span { display: block; margin-top: 5px; font: 300 14px/1.4 var(--f-text); letter-spacing: 0; color: var(--mute); }
.js .sys__tab:hover, .js .sys__tab.is-on { color: var(--ivory); }
.sys__tab.is-on .sys__tt span { color: var(--ivory-2); }
.sys__tab:focus-visible { outline: 1px solid var(--ivory); outline-offset: 3px; }
.sys__device { grid-column: 5 / -1; position: relative; padding-inline: 6%; }
/* ноутбук: крышка с рамкой и вырезом камеры, экран 16:10 с окном системы, корпус-подставка */
.laptop { position: relative; }
.laptop::before { content: ""; position: absolute; z-index: -1; inset: 10% 8% -2%; border-radius: 40px; background: #E30613; filter: blur(90px); opacity: .26; }
.laptop__lid { position: relative; padding: 1.8% 1.8% 2.3%; border-radius: 18px 18px 6px 6px; background: linear-gradient(#1c1c20, #0b0b0d); box-shadow: inset 0 0 0 1px #34343a, 0 50px 90px -40px rgba(0, 0, 0, .95); transform-origin: 50% 100%; }
.laptop__lid::before { content: ""; position: absolute; z-index: 4; left: 50%; top: 0; width: 11%; height: 1.8%; min-height: 8px; translate: -50% 0; border-radius: 0 0 8px 8px; background: #050506; }
.laptop__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: radial-gradient(110% 90% at 78% 0%, #40080d 0%, #160708 46%, #060505 100%); }
.laptop__screen::after { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(112deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 36%); pointer-events: none; }
.laptop__base { position: relative; width: 112%; margin-left: -6%; height: clamp(9px, 1.5vw, 20px); border-radius: 0 0 22px 22px / 0 0 100% 100%; background: linear-gradient(#cfd0d5 0, #9a9ba1 18%, #4a4b51 60%, #232327 100%); box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .9); }
.laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 45%; translate: -50% 0; border-radius: 0 0 10px 10px; background: linear-gradient(#808187, #b7b8bd); }
.sys__win { position: absolute; left: 4%; right: 4%; top: 50%; translate: 0 -46%; overflow: hidden; border-radius: 8px; background: #141416; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -20px rgba(0, 0, 0, .9); }
.sys__bar { display: flex; align-items: center; gap: 6px; height: clamp(14px, 1.5vw, 24px); padding-inline: 1.6%; background: #1d1d20; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.sys__bar i { width: clamp(5px, .55vw, 9px); aspect-ratio: 1; border-radius: 50%; background: #ff5f57; }
.sys__bar i:nth-child(2) { background: #febc2e; }
.sys__bar i:nth-child(3) { background: #28c840; }
.sys__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.sys__track::-webkit-scrollbar { display: none; }
.sys__slide { flex: 0 0 100%; margin: 0; aspect-ratio: 2 / 1; overflow: hidden; scroll-snap-align: start; }
.sys__slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
/* с JS на планшете и компьютере экраны лежат стопкой: новый въезжает в окно справа, как при смене вкладки в приложении */
@media (min-width: 641px) {
  .js .sys__stage[data-stack] .sys__track { display: grid; overflow: hidden; scroll-snap-type: none; }
  .js .sys__stage[data-stack] .sys__slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateX(4%); transition: opacity .45s var(--ease), transform .9s var(--slow), visibility 0s .45s; }
  .js .sys__stage[data-stack] .sys__slide.is-cur { z-index: 1; visibility: visible; opacity: 1; transform: none; transition: opacity .6s var(--ease), transform 1.1s var(--slow), visibility 0s; }
}
/* крышка «открывается», пока раздел въезжает в окно (только где браузер умеет анимацию от прокрутки) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 961px) {
    .sys__device { perspective: 2000px; }
    .sys .laptop__lid { animation: lid-open linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
  }
}
@keyframes lid-open { from { transform: rotateX(-34deg); } to { transform: none; } }
.sys__points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 18px; }
.sys__points li { display: grid; grid-template-columns: 3.2ch minmax(0, 1fr); gap: 10px; padding-top: 16px; border-top: 1px solid var(--rule-2); font: 300 16.5px/1.45 var(--f-text); color: var(--ivory-2); }
.sys__pn { font: 400 12px/1.9 var(--f-mono); color: var(--mute); }
@media (max-width: 1180px) and (min-width: 961px) { .sys__tabs { grid-column: 1 / span 5; } .sys__device { grid-column: 6 / -1; padding-inline: 4%; } }
@media (max-width: 960px) {
  .sys__head { grid-column: 1 / -1; }
  .sys__device { grid-column: 1 / -1; grid-row: 1; padding-inline: 5%; }
  .sys__tabs { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cg); border-top: 0; }
  .sys__tab { border-top: 1px solid var(--rule); border-bottom: 0; }
  .sys__tab .offers__bar { top: -1px; bottom: auto; }
  .sys__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sys__device { padding-inline: 4%; }
  .sys__tabs { grid-template-columns: minmax(0, 1fr); }
  .sys__tt { font-size: 17px; }
  .sys__points { grid-template-columns: minmax(0, 1fr); }
  .laptop__lid { border-radius: 12px 12px 4px 4px; }
  .sys__win { left: 3%; right: 3%; border-radius: 5px; }
}

/* ---------- бонусы после регистрации: под курсором — обложка бонуса на месте ролика, на телефоне — по нажатию под строкой ---------- */
.bonuses li.bonus { display: block; padding: 0; }
.bonus__b { display: grid; grid-template-columns: 3.2ch minmax(0, 1fr) 14px; gap: 10px; width: 100%; padding: 13px 0; border: 0; background: none; color: inherit; font: 400 15.5px/1.45 var(--f-text); text-align: left; cursor: pointer; transition: padding .6s var(--slow); }
.bonus__b:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.bonus__ic { position: relative; align-self: center; width: 12px; height: 12px; opacity: .75; transition: transform .5s var(--slow), opacity .3s; }
.bonus__ic::before, .bonus__ic::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.3px; margin-top: -.65px; background: currentColor; }
.bonus__ic::after { transform: rotate(90deg); }
.bonus.is-open .bonus__ic { transform: rotate(45deg); opacity: 1; }
.bonus-pic { margin: 0; }
.bonus-pic img { display: block; width: auto; height: auto; max-width: 100%; box-shadow: 0 20px 40px -16px rgba(40, 0, 3, .8); }
.bonus-pic figcaption { font: 300 clamp(16px, 1.3vw, 19px)/1.2 var(--f-display); letter-spacing: -.03em; color: #fff; }
.bonus-pic figcaption span { display: block; margin-bottom: 6px; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
/* экран на месте ролика: обложка бонуса и подпись */
.tour__screen { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* с JS (обход 30.10 22:12: «между пунктами на секунду появляется видео — дёргано»): экран обложек включается при входе в список
   бонусов и держится, пока курсор внутри списка; обложки меняются поверх непрозрачного фона экрана — ролик между ними не виден;
   ролик возвращается через 0,4 с после ухода из списка, плавно (main.js) */
.js .tour__screen { background: radial-gradient(90% 80% at 50% 30%, #2a0507, #0b0a09 80%); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.js .tour__screen.is-on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.js .tour__shot { transition: none; }
.js .tour__shot.is-on { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
.js .tour__shot.is-on img { transform: none; }
.tour__shot { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 14px; padding: 7% 8% 6%; background: radial-gradient(90% 80% at 50% 30%, #2a0507, #0b0a09 80%); text-align: center; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.tour__shot img { max-height: 100%; object-fit: contain; transform: translateY(10px) scale(.97); transition: transform .7s var(--slow); }
/* высокая обложка — слева во всю высоту экрана, подпись справа */
.tour__shot.bonus-pic--tall { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); justify-items: start; column-gap: clamp(16px, 2vw, 28px); padding: 6% 8% 6% 7%; text-align: left; }
.tour__shot.bonus-pic--tall img { height: 100%; width: auto; max-width: none; }
.tour__shot.bonus-pic--tall figcaption { align-self: end; padding-bottom: 4px; }
@media (hover: hover) and (pointer: fine) {
  .no-js .tour__side:has(.bonus:nth-child(1):is(:hover, :focus-within, .is-open)) .tour__shot:nth-child(1),
  .no-js .tour__side:has(.bonus:nth-child(2):is(:hover, :focus-within, .is-open)) .tour__shot:nth-child(2),
  .no-js .tour__side:has(.bonus:nth-child(3):is(:hover, :focus-within, .is-open)) .tour__shot:nth-child(3),
  .no-js .tour__side:has(.bonus:nth-child(4):is(:hover, :focus-within, .is-open)) .tour__shot:nth-child(4),
  .no-js .tour__side:has(.bonus:nth-child(5):is(:hover, :focus-within, .is-open)) .tour__shot:nth-child(5) { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
  .no-js .tour__side:has(.bonus:nth-child(1):is(:hover, :focus-within, .is-open)) .tour__shot:nth-child(1) img,
  .no-js .tour__side:has(.bonus:nth-child(2):is(:hover, :focus-within, .is-open)) .tour__shot:nth-child(2) img,
  .no-js .tour__side:has(.bonus:nth-child(3):is(:hover, :focus-within, .is-open)) .tour__shot:nth-child(3) img,
  .no-js .tour__side:has(.bonus:nth-child(4):is(:hover, :focus-within, .is-open)) .tour__shot:nth-child(4) img,
  .no-js .tour__side:has(.bonus:nth-child(5):is(:hover, :focus-within, .is-open)) .tour__shot:nth-child(5) img { transform: none; }
  .bonus:hover .bonus__b, .bonus.is-open .bonus__b, .bonus__b:focus-visible { padding-left: 8px; }
  .bonus:hover .bonus__ic { opacity: 1; }
  /* на компьютере обложка показана на экране — подпись под строкой остаётся только для чтения с экрана */
  .bonus__pic { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* сенсорный экран: по нажатию обложка и подпись — под строкой */
@media (hover: none), (pointer: coarse) {
  .tour__screen { display: none; }
  .bonus__pic { display: none; grid-template-columns: 112px minmax(0, 1fr); align-items: end; gap: 16px; padding: 2px 0 18px calc(3.2ch + 10px); }
  .bonus__pic.bonus-pic--wide { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bonus.is-open .bonus__pic, .bonus:focus-within .bonus__pic { display: grid; }
}

/* ---------- «А это мы»: фото открывается на весь экран — стрелки, свайп, Esc, счётчик ---------- */
.office__a { display: block; height: 100%; cursor: zoom-in; }
.office__a:focus-visible { outline: 2px solid var(--ivory); outline-offset: -2px; }
.office__a:focus-visible img { filter: none; }
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 7, 6, .97); color: var(--ivory); overflow: hidden; overscroll-behavior: contain; }
.is-lb, .is-lb body { overflow: hidden; }
.lb::backdrop { background: rgba(8, 7, 6, .9); }
.lb[open] { animation: lb-in .4s var(--ease); }
@keyframes lb-in { from { opacity: 0; } }
.lb__stage { position: absolute; inset: clamp(64px, 9vh, 96px) clamp(84px, 8vw, 140px); display: grid; grid-template: 100% / 100%; place-items: center; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.lb__img { grid-area: 1 / 1; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 40px 80px -30px #000; transition: opacity .35s var(--ease), transform .6s var(--slow); -webkit-user-drag: none; }
.lb__img.is-load { opacity: 0; }
.lb__img.is-drag { transition: none; }
.lb__n { position: absolute; left: var(--gut); top: 26px; font: 400 12px/1.4 var(--f-mono); letter-spacing: .14em; color: var(--mute); }
.lb__n b { font-weight: 500; color: var(--ivory); }
.lb__x, .lb__go { position: absolute; display: grid; place-items: center; border: 1px solid var(--rule-2); border-radius: 50%; background: rgba(11, 10, 9, .55); color: var(--ivory); cursor: pointer; transition: background-color .4s var(--ease), border-color .4s var(--ease); }
.lb__x { right: var(--gut); top: 14px; width: 48px; height: 48px; }
.lb__go { top: 50%; width: 60px; height: 60px; margin-top: -30px; }
.lb__go--prev { left: clamp(12px, 2.2vw, 40px); }
.lb__go--next { right: clamp(12px, 2.2vw, 40px); }
.lb__x:hover, .lb__go:hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.lb__x:focus-visible, .lb__go:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
@media (max-width: 640px) {
  .lb__stage { inset: 72px 0 96px; }
  .lb__go { top: auto; bottom: 20px; margin-top: 0; width: 54px; height: 54px; }
  .lb__go--prev { left: calc(50% - 66px); }
  .lb__go--next { right: calc(50% - 66px); }
}
@media (prefers-reduced-motion: reduce) { .lb[open] { animation: none; } .lb__img { transition: none; } }

/* ---------- обучение: у трёх курсов подписи по одним линиям (заголовок в две строки не сдвигает описание соседей) ---------- */
@supports (grid-template-rows: subgrid) {
  .course { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .course a { grid-row: span 3; grid-template-rows: subgrid; }
}

/* ---------- команда: при наведении — ролик человека, из ч/б в цвет, лёгкий наклон ---------- */
.mate__pic { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; margin-bottom: 8px; background: var(--wall-2); transition: transform .8s var(--slow), box-shadow .8s var(--ease); }
.mate__pic img, .mate__pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mate__pic img { filter: grayscale(1) contrast(1.04) brightness(.86); transition: filter .8s var(--ease); }
.mate__pic video { opacity: 0; transition: opacity .6s var(--ease); }
.mate.is-live .mate__pic { transform: rotate(-1.6deg) scale(1.04); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9); z-index: 2; }
.mate.is-live .mate__pic img { filter: none; }
.mate.is-play .mate__pic video { opacity: 1; }
.mate:hover .mate__pic img { filter: none; }
@media (prefers-reduced-motion: reduce) { .mate.is-live .mate__pic { transform: none; } }

/* ---------- подвал: логотип обычного размера ---------- */
.ft__logo { display: block; width: 132px; margin-bottom: 22px; color: var(--ivory); }
.ft__logo .logo { width: 100%; }
.ft__bottom { margin-top: clamp(48px, 5vw, 80px); }

/* ---------- модальное окно кейса: центрированный поп-ап на компьютере, шторка снизу на телефоне ---------- */
html.is-cmodal { overflow: hidden; }
.cmodal { position: fixed; inset: 0; z-index: 120; }
.cmodal[hidden] { display: none; }
.cmodal__bg { position: absolute; inset: 0; background: rgba(8, 7, 6, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .32s var(--ease); cursor: pointer; }
.cmodal.is-open .cmodal__bg { opacity: 1; }
.cmodal__box { position: absolute; inset: clamp(20px, 3.2vh, 36px) max(clamp(32px, 5vw, 96px), calc((100vw - 1120px) / 2)); display: flex; flex-direction: column; background: var(--wall); color: var(--ivory); border: 1px solid var(--rule-2); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 104px rgba(0, 0, 0, .92), 0 0 0 1px rgba(255, 255, 255, .04); opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .32s var(--ease), transform .42s var(--slow); outline: none; }
.cmodal.is-open .cmodal__box { opacity: 1; transform: none; }
.cmodal__bar { position: relative; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 16px 0 24px; flex: none; background: rgba(18, 16, 16, .96); border-bottom: 1px solid var(--rule); }
.cmodal__pill { display: none; }
.cmodal__n { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.cmodal__n::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }
.cmodal__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/1.25 var(--f-text); color: var(--ivory-2); }
.cmodal__nav { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cmodal__step { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: 50%; background: rgba(255, 255, 255, .03); color: var(--ivory-2); cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.cmodal__step:hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.cmodal__cta { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--ivory); color: var(--ink); font: 500 12.5px/1 var(--f-text); white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease); }
.cmodal__cta:hover { background: #fff; }
.cmodal__x { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--ivory); font: 500 12px/1 var(--f-text); cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.cmodal__x:hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.cmodal__cta:focus-visible, .cmodal__x:focus-visible, .cmodal__step:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }
.cmodal__scan { position: absolute; left: 0; bottom: -1px; height: 1.5px; width: 0; background: var(--red); transition: width .12s linear; }
.cmodal__stage { position: relative; flex: 1; min-height: 0; background: var(--wall); }
.cmodal__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 2px solid rgba(239, 232, 220, .14); border-top-color: var(--red); border-radius: 50%; animation: cm-spin .8s linear infinite; }
.cmodal.is-ready .cmodal__stage::before { display: none; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
.cmodal__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--wall); opacity: 0; transition: opacity .26s var(--ease); }
.cmodal.is-ready .cmodal__frame { opacity: 1; }
@media (max-width: 960px) {
  .cmodal__cta { display: none; }
}
@media (max-width: 760px) {
  .cmodal__box { inset: max(54px, calc(env(safe-area-inset-top, 0px) + 42px)) 0 0 0; border: 0; border-top: 1px solid var(--rule-2); border-radius: 18px 18px 0 0; opacity: 1; transform: translateY(100%); transition: transform .38s cubic-bezier(.22, 1, .36, 1); }
  .cmodal.is-open .cmodal__box { transform: translateY(0); }
  .cmodal__bar { height: 56px; padding: 8px 10px 0 16px; gap: 8px; touch-action: none; cursor: grab; }
  .cmodal__pill { display: block; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: rgba(239, 232, 220, .28); }
  .cmodal__t { font-size: 13px; }
  .cmodal__step { width: 36px; height: 36px; }
  .cmodal__xl { display: none; }
  .cmodal__x { width: 38px; height: 38px; padding: 0; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cmodal__bg, .cmodal__box, .cmodal__frame { transition: none; }
}

/* ——— живая обложка услуги: цифра, подпись, линейка и факт настоящим кодом, постеры — картинки ———
   Всё в единицах контейнера (cqw), поэтому обложка не пикселит ни в панели 520 px, ни на телефоне 390 px.
   Движение — только transform, translate, rotate и opacity; при «меньше движения» — собранный неподвижный кадр.
   Обложка стоит первой частью в .proof и потому попадает и в панель (её копируют), и под услугу на телефоне. */
.us-cv { position: relative; width: 100%; aspect-ratio: 16 / 10; container-type: inline-size; overflow: hidden;
  background: var(--ivory); color: var(--ink); isolation: isolate; -webkit-font-smoothing: antialiased; }
.us-cv::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 12.5cqw rgba(11, 10, 9, .2); }
.us-cv__grain { position: absolute; inset: 0; z-index: 3; opacity: .09; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
  background-size: 21.7cqw 21.7cqw; }
.us-cv__stage { position: absolute; right: -3.83cqw; top: 0; width: 55cqw; height: 100%;
  transform: translate3d(calc(var(--px, 0) * -1.6cqw), calc(var(--py, 0) * -1.2cqw), 0);
  rotate: -1.6deg; transform-origin: 50% 55%; transition: transform .35s ease-out; }
.us-cv__ph { position: absolute; width: 25.67cqw; height: 25.67cqw; margin: 0; overflow: hidden; background: var(--red);
  box-shadow: 0 2.17cqw 5.5cqw rgba(11, 10, 9, .3); will-change: translate, rotate, transform;
  translate: var(--tx, 0) var(--ty, 0); rotate: var(--r, 0deg); }
.us-cv__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08);
  filter: grayscale(1) contrast(1.1) brightness(1.06); mix-blend-mode: luminosity; }
.us-cv__ph::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(239, 232, 220, .3); }
.us-cv__ph::before { content: ""; position: absolute; inset: -25%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0) 56%);
  transform: translateX(-72%); }
.us-cv__txt { position: absolute; left: 5.33cqw; top: 0; bottom: 0; width: 46.3cqw; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  transform: translate3d(calc(var(--px, 0) * .7cqw), calc(var(--py, 0) * .5cqw), 0); transition: transform .35s ease-out; }
.us-cv__num { display: flex; margin-left: -.6cqw; white-space: nowrap;
  font: 800 var(--ns, 18.43cqw)/.84 var(--f-display); letter-spacing: -.055em; }
.us-cv__d { display: inline-block; overflow: hidden; padding-bottom: .06em; }
.us-cv__d i { display: inline-block; font-style: normal; will-change: transform; }
.us-cv__unit { margin-top: .5cqw; white-space: nowrap;
  font: italic 300 var(--us, 8cqw)/1.02 "Cormorant Garamond", serif; }
.us-cv__rule { width: 12.5cqw; height: .92cqw; margin: 2.83cqw 0 2.33cqw; background: var(--red); transform-origin: 0 50%; }
.us-cv__fact { max-width: 44cqw; font: 500 3.92cqw/1.24 var(--f-text); color: #2A2520; }
/* вход один раз, дальше постоянное качание: у каждого постера свой период */
.us-cv.is-run .us-cv__d i { animation: uscv-rise 1.15s cubic-bezier(.16, .84, .24, 1) both; }
.us-cv.is-run .us-cv__unit { animation: uscv-fade .8s ease-out .25s both; }
.us-cv.is-run .us-cv__fact { animation: uscv-fact .7s ease-out .37s both; }
.us-cv.is-run .us-cv__rule { animation: uscv-draw .7s cubic-bezier(.16, .84, .24, 1) .3s both, uscv-line 4.4s ease-in-out .9s infinite alternate; }
.us-cv.is-run .us-cv__ph { animation: uscv-deal 1.5s cubic-bezier(.16, .84, .24, 1) both,
  uscv-drift var(--pdur, 8.2s) ease-in-out var(--pdly, 0s) infinite alternate; }
.us-cv.is-run .us-cv__ph img { animation: uscv-cam var(--idur, 11s) ease-in-out var(--idly, 0s) infinite alternate; }
.us-cv.is-run .us-cv__ph::before { animation: uscv-sheen 6.4s cubic-bezier(.4, 0, .25, 1) var(--shdly, 0s) infinite; }
.us-cv.is-run .us-cv__num { animation: uscv-num 6.8s ease-in-out infinite alternate; }
.us-cv.is-run .us-cv__txt { animation: uscv-txt 9.3s ease-in-out infinite alternate; }
.us-cv.is-run .us-cv__stage { animation: uscv-sway 15.5s ease-in-out infinite alternate; }
.us-cv__d:nth-child(1) i { animation-delay: .1s; }
.us-cv__d:nth-child(2) i { animation-delay: .155s; }
.us-cv__d:nth-child(3) i { animation-delay: .21s; }
.us-cv__d:nth-child(4) i { animation-delay: .265s; }
.us-cv__ph:nth-child(1) { --r: -9deg; --tx: 2.5cqw; --ty: 2.83cqw; --ax: 2.9cqw; --ay: 2.4cqw; --ar: 1.9deg;
  --pdur: 8.2s; --pdly: -1.4s; --idur: 11.4s; --idly: -2.6s; --shdly: -.2s; }
.us-cv__ph:nth-child(2) { --r: 6deg; --tx: 25cqw; --ty: 8cqw; --ax: 2.6cqw; --ay: 3.2cqw; --ar: -1.7deg;
  --pdur: 9.9s; --pdly: -4.7s; --idur: 13.1s; --idly: -6.3s; --shdly: -2.1s; }
.us-cv__ph:nth-child(3) { --r: -4deg; --tx: 7.17cqw; --ty: 26.33cqw; --ax: 3.2cqw; --ay: 2.5cqw; --ar: 2.2deg;
  --pdur: 7.6s; --pdly: -6.8s; --idur: 9.7s; --idly: -4.1s; --shdly: -3.4s; }
.us-cv__ph:nth-child(4) { --r: 10deg; --tx: 29.33cqw; --ty: 31cqw; --ax: 2.7cqw; --ay: 3.4cqw; --ar: -2deg;
  --pdur: 11.3s; --pdly: -2.9s; --idur: 12.6s; --idly: -1.2s; --shdly: -4.8s; }
@keyframes uscv-rise { 0%, 4% { transform: translateY(112%) } 24%, 100% { transform: translateY(0) } }
@keyframes uscv-deal {
  0% { transform: translateY(18cqw) rotate(-18deg) scale(.88); opacity: 0 }
  6% { opacity: 0 } 40% { opacity: 1 }
  72% { transform: translateY(-.9cqw) rotate(.9deg) scale(1.012); opacity: 1 }
  100% { transform: none; opacity: 1 } }
@keyframes uscv-drift {
  0% { translate: calc(var(--tx) - var(--ax)) calc(var(--ty) - var(--ay)); rotate: calc(var(--r) - var(--ar)) }
  100% { translate: calc(var(--tx) + var(--ax)) calc(var(--ty) + var(--ay)); rotate: calc(var(--r) + var(--ar)) } }
@keyframes uscv-cam { 0% { transform: scale(1.02) translate(2.4%, 2.8%) } 100% { transform: scale(1.26) translate(-3%, -3.4%) } }
@keyframes uscv-sheen { 0%, 54% { transform: translateX(-72%); opacity: 0 } 60% { opacity: .9 } 88%, 100% { transform: translateX(72%); opacity: 0 } }
@keyframes uscv-num { 0% { translate: 0 .62cqw; scale: 1 } 100% { translate: 0 -.62cqw; scale: 1.012 } }
@keyframes uscv-txt { 0% { translate: 0 .5cqw } 100% { translate: 0 -.5cqw } }
@keyframes uscv-line { 0% { scale: .6 1 } 100% { scale: 1 1 } }
@keyframes uscv-sway { 0% { rotate: -1.6deg } 100% { rotate: 1.6deg } }
@keyframes uscv-fade { from { opacity: 0; transform: translateY(1.3cqw) } to { opacity: 1; transform: none } }
@keyframes uscv-draw { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes uscv-fact { from { opacity: 0; transform: translateY(1.2cqw) } to { opacity: 1; transform: none } }
/* обложка и строка под ней говорят одно и то же. Цифра стоит на обложке крупно — в строке под ней
   оставляем только пояснение, чтобы доказательство не повторялось дважды слово в слово */
.proof:has(> .us-cv) > .proof__num { display: block; margin-top: 18px; padding-top: 0; border-top: 0; }
.proof:has(> .us-cv) > .proof__num b { display: none; }
.proof:has(> .us-cv) > .proof__num span { font: 400 clamp(15px, 4.3cqi, 18px)/1.35 var(--f-text); color: var(--ivory-2); }
/* в панели обложка стоит вплотную к краям, поэтому нижний отступ доказательства ей больше не нужен */
.svc__panel-in .proof:has(> .us-cv) { padding-bottom: 0; }
/* панель не длиннее экрана: на невысоком окне прокручивается внутри себя, а не уходит под край */
.svc__panel-in { max-height: calc(100dvh - var(--hd) - 40px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.svc__panel-in::-webkit-scrollbar { width: 6px; }
.svc__panel-in::-webkit-scrollbar-thumb { background: var(--rule); }
/* в панели обложка идёт первой частью и обрезает поля панели, чтобы стоять вплотную к краям.
   Пропорция 16:10 — как в согласованном макете: цифра слева, постеры справа, движение целиком видно */
.svc__panel-in .proof > .us-cv {
  width: auto; margin: calc(-1 * var(--sp-pad)) calc(-1 * var(--sp-pad)) 22px; padding: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .us-cv.is-run :is(.us-cv__d i, .us-cv__unit, .us-cv__fact, .us-cv__rule, .us-cv__ph, .us-cv__ph img,
    .us-cv__ph::before, .us-cv__num, .us-cv__txt, .us-cv__stage) { animation: none; }
  .us-cv__ph { transform: none; opacity: 1; }
  .us-cv__ph img { transform: scale(1.08); }
}