/* =====================================================================
   VIAMANZONI27 — база и HERO (утверждён: prototypes/hero-v4, десктоп ≥1280 заморожен, адаптив <1280 — аудит 25.09).
   Перенесено 1:1 из hero-v2.css + hero-v4.css; убраны только правила, у которых нет элементов в разметке
   (старые кадры .vm-hero__photo, ячейки .vm-cells, светлая тема v2, .vm-fig / .vm-stage, заглушка .vm-next).
   Сетка 60 | 292:491:234:619:165 | 60, слово от поля до поля. Секции ниже hero — css/home.css.
   ===================================================================== */
:root {
  --c-bg: #F8F5F9;
  --c-card: #EEEEEE;
  --c-ink: #2A2A28;
  --c-ink-2: #575757;
  --c-dark: #030303;

  --f-sans: "Instrument Sans", system-ui, sans-serif;
  --fs-h1: clamp(36px, 5vw, 96px);
  --fs-h3: clamp(20px, 1.875vw, 36px);
  --fs-body: clamp(13px, 1.25vw, 24px);
  --fs-label: clamp(12px, .8334vw, 16px);
  --lh-head: .92; --lh-desc: 1.25;
  --tr-display: -0.04em; --tr-h3: -0.03em; --tr-text: -0.05em; --tr-caption: 0.1em;

  --margin: 60px;
  --cols: minmax(0, 292fr) minmax(0, 491fr) minmax(0, 234fr) minmax(0, 619fr) minmax(0, 165fr);
  --gut: clamp(16px, 1.667vw, 32px);
  --screen: 100svh;
  --head-h: 62px;
  --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-72: 72px;
  --sp-head: clamp(20px, 3.125vw, 60px);
  --top: calc(var(--head-h) + 40px);      /* верх контента hero */

  --L2: calc(var(--margin) + (100% - 2 * var(--margin)) * 292 / 1801);
  --L3: calc(var(--margin) + (100% - 2 * var(--margin)) * 783 / 1801);
  --L4: calc(var(--margin) + (100% - 2 * var(--margin)) * 1017 / 1801);
  --L5: calc(var(--margin) + (100% - 2 * var(--margin)) * 1636 / 1801);

  --r: 6px;
  --btn-h: 48px; --btn-h-sm: 42px;
  --ease-out: cubic-bezier(.22, .8, .2, 1);
  --t-fade: 500ms;
}
@media (max-width: 767px) {
  :root { --margin: 20px; --cols: repeat(2, minmax(0, 1fr)); --gut: 0px; --head-h: 54px; --btn-h: 56px;
    --L2: 25%; --L3: 50%; --L4: 50%; --L5: 75%; }
}

/* ── База ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 var(--fs-body)/1 var(--f-sans);
  letter-spacing: var(--tr-text); text-transform: uppercase; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -100px; z-index: 30; padding: 14px 16px; border-radius: var(--r);
  background: var(--c-ink); color: var(--c-bg); font-size: var(--fs-label); letter-spacing: 0; }
.skip:focus { top: 8px; }

.vm-grid { display: grid; grid-template-columns: var(--cols); padding-inline: var(--margin); container-type: inline-size; }
.vm-grid > * { margin-right: var(--gut); min-width: 0; }
.vm-grid > .vm-e { margin-right: 0; }
@media (max-width: 767px) { .vm-grid { column-gap: 20px; } }

.vm-label { font-size: var(--fs-label); line-height: 1.1; letter-spacing: var(--tr-caption); color: var(--c-ink-2); }
.vm-h3 { font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--tr-h3); }

/* ── Шапка ── */
.vm-header { position: sticky; top: 0; z-index: 20; height: var(--head-h); margin-bottom: calc(-1 * var(--head-h));
  color: var(--c-ink); font-size: var(--fs-label); letter-spacing: 0; }
.vm-header[data-tone="dark"] { color: #fff; }
.vm-header__in { height: 100%; padding-inline: var(--margin); display: grid; grid-template-columns: var(--cols); align-items: center; }
.vm-header nav { grid-column: 1 / 3; }
.vm-logo { grid-column: 3; display: grid; }
.vm-logo__svg { display: block; width: 100%; height: auto; overflow: visible; }
.vm-header__secondary { grid-column: 4 / 6; display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.vm-header nav ul { display: flex; gap: var(--sp-32); }
.vm-header__link { display: inline-block; padding-block: var(--sp-12); transition: opacity .2s ease; }
@media (hover: hover) and (pointer: fine) { .vm-header__link:hover { opacity: .6; } }
.vm-icon { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.vm-icon svg { width: 24px; height: 24px; }
.vm-header__cart { margin-right: -12px; }
.vm-header__locale { display: inline-flex; gap: var(--sp-8); margin-right: var(--sp-16); white-space: nowrap; }
.vm-header__locale img { width: 20px; height: 15px; }
.vm-header__locale .vm-loc__arrow { width: 10px; height: 10px; }
.vm-header__menu-btn { display: none; }
.vm-header__menu-btn .i-close { display: none; }
@media (max-width: 1023px) {
  .vm-header nav ul, .vm-header__locale, .vm-header__account { display: none; }
  .vm-header__menu-btn { display: inline-grid; justify-self: start; margin-left: -12px; }
  .menu-open .vm-header__menu-btn .i-open { display: none; }
  .menu-open .vm-header__menu-btn .i-close { display: block; }
  .vm-header nav { grid-column: 1; }
  .vm-logo { grid-column: 2; }
}
@media (max-width: 767px) {
  .vm-header__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vm-header__menu-btn svg { width: 20px; height: 20px; }
  .vm-header__secondary { grid-column: 4; gap: 0; }
  .vm-logo { grid-column: 2 / 4; }
}
/* мобильное меню R11 */
.vm-menu { position: fixed; inset: 0; z-index: 15; background: var(--c-dark); color: #F7F7F7;
  padding: calc(var(--head-h) + var(--sp-48)) var(--margin) var(--sp-32); display: flex; flex-direction: column; gap: var(--sp-16);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease-out), visibility 0s .2s; }
.menu-open .vm-menu { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out); }
.menu-open .vm-header { color: #fff; }
.menu-open body { overflow: hidden; }
.vm-menu a { display: flex; align-items: center; min-height: 64px; font-size: 24px; letter-spacing: var(--tr-h3); }
@media (min-width: 1024px) { .vm-menu { display: none; } }

/* =====================================================================
   HERO — геометрия (из v2)
   ===================================================================== */
.vm-hero { --h-bg: #030303; --h-fg: #ECECEC; --h-strong: #F7F7F7; --h-2: #C4C4C4;
  --h-line: rgb(255 255 255 / .09); --h-rule: rgb(255 255 255 / .32); --h-track: rgb(255 255 255 / .24); --h-cell: rgb(255 255 255 / .5);
  position: relative; height: max(640px, var(--screen)); overflow: hidden; isolation: isolate; container-type: size;   /* cqh нужен кадру-фигуре */
  background: var(--h-bg); color: var(--h-fg); }
.vm-hero ::selection { background: var(--h-strong); color: var(--h-bg); }

/* ≤1023: коробка кадра между CTA и цифрами (низ коробки --st-bot — в блоке «Адаптив <1280») */
@media (max-width: 1023px) { :root { --st-top: calc(var(--top) + var(--btn-h-sm) + 24px); } }
@media (max-width: 767px) { :root { --st-top: calc(var(--head-h) + 148px); } }  /* 24 + заголовок 20 + 24 + CTA 56 + 24 */

/* Ряды сетки: 3 равных ряда | ряд логотипа = высота заглавных SVG (31,58 / 631,37 ширины) | нижнее поле */
.vm-hero { --cap: calc((100cqi - 2 * var(--margin)) * .05002); --row: calc((100cqh - var(--margin) - var(--cap)) / 3); }

/* .vm-hero__grid не контейнер: внутри hero 100cqi = ширина hero, 100cqh = высота */
.vm-hero__grid { position: relative; height: 100%; display: grid; grid-template-rows: auto auto 1fr; padding-top: var(--top); pointer-events: none; container-type: normal; }
.vm-hero__grid a, .vm-hero__grid button { pointer-events: auto; }
.vm-hero__title { grid-column: 4 / 6; grid-row: 1; align-self: start; font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--tr-h3); white-space: nowrap; }
.vm-mask { display: block; overflow: hidden; }
.vm-mask > span { display: block; }

/* ── CTA: квадратные углы, поле текста + квадрат со стрелкой; блик по контуру; наведение — перекат букв ── */
.vm-hero { --cta-h: 48px; --cta-bg: rgb(3 3 3 / .55); --cta-bg-h: rgb(3 3 3 / .8); --cta-line: rgb(255 255 255 / .28); --cta-fg: #F7F7F7; --beam: #fff; }
.vm-cta { position: absolute; left: var(--margin); top: calc(var(--row) * 2); width: calc((100cqi - 2 * var(--margin)) * 292 / 1801 - var(--gut)); height: var(--cta-h);
  display: flex; isolation: isolate; border: 1px solid var(--cta-line); border-radius: 0; background: var(--cta-bg); color: var(--cta-fg);
  font-size: var(--fs-label); letter-spacing: 0; transition: background-color .3s var(--ease-out), transform .16s var(--ease-out); }
.vm-cta__t { flex: 1; min-width: 0; display: flex; align-items: center; padding-inline: var(--sp-12); white-space: nowrap; }
.vm-cta__a { flex: none; width: calc(var(--cta-h) - 2px); display: grid; place-items: center; border-left: 1px solid var(--cta-line); }
.vm-cta__a svg { width: 14px; height: 14px; transition: transform .5s cubic-bezier(.43, .195, .02, 1); }
.vm-cta .vm-mask { line-height: 1.2; }
.vm-cta .tx { display: flex; overflow: clip; }
.vm-cta .tx i { display: inline-block; font-style: normal; white-space: pre; text-shadow: 0 4em 0 currentColor;
  transition: transform .5s cubic-bezier(.43, .195, .02, 1); transition-delay: calc(var(--n, 0) * .02s); }
@property --ga { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes vm-ga { to { --ga: 360deg; } }
.vm-cta::before { content: ""; position: absolute; inset: -1px; z-index: -1; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ga), transparent 15%, var(--beam) 25%, transparent 35%, transparent 65%, var(--beam) 75%, transparent 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: vm-ga 4.8s linear infinite; }
.vm-cta:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .vm-cta:hover { background: var(--cta-bg-h); }
  .vm-cta:hover .tx i { transform: translateY(-4em); }
  .vm-cta:hover .vm-cta__a svg { transform: translateX(4px); }
}
.vm-cta:focus-visible { outline-offset: 3px; border-radius: 0; }
.vm-cta:focus-visible .tx i { transform: translateY(-4em); }
@media (prefers-reduced-motion: reduce) { .vm-cta::before { animation: none; opacity: .35; } .vm-cta .tx i, .vm-cta__a svg { transition: none; transform: none !important; } }
.still .vm-cta::before { animation: none; }
/* 1024–1379: CTA на C1–C2 над словом (низ за 24 px до линии заглавных) */
@media (min-width: 1024px) and (max-width: 1379px) {
  .vm-cta { width: calc((100cqi - 2 * var(--margin)) * 783 / 1801 - var(--gut)); top: calc(var(--row) * 3 - 24px - var(--cta-h)); }
}

/* ── Цифры, прогресс, пауза ── */
.vm-facts { --fs-num: clamp(32px, 3.334vw, 64px); grid-column: 4; grid-row: 1; align-self: start; margin-top: calc(var(--row) - var(--top)); }
.vm-prog { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--h-track); pointer-events: none; }
.vm-prog > i { position: absolute; inset: 0; background: var(--h-strong); transform: scaleX(0); transform-origin: left; }
.vm-scenes__pause { flex: none; margin: -4px -12px 0 0; color: var(--h-strong); }
.vm-scenes__pause svg { width: 20px; height: 20px; }
.vm-scenes__pause .i-play, .vm-hero.is-paused .vm-scenes__pause .i-pause { display: none; }
.vm-hero.is-paused .vm-scenes__pause .i-play { display: block; }
.vm-facts__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); row-gap: var(--sp-32); margin-top: var(--sp-32); }
.vm-fact { position: relative; padding-top: var(--sp-12); }
.vm-fact__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--h-rule); transform-origin: left; }
.vm-num { display: flex; font-weight: 400; font-size: var(--fs-num); line-height: 1; letter-spacing: var(--tr-h3); font-variant-numeric: tabular-nums;
  color: var(--h-strong); transition: transform 900ms var(--ease-out) var(--nd, 0ms); transform: translateX(calc(var(--lead, 0) * -1ch)); }
.vm-num__d { display: block; width: 1ch; height: 1em; overflow: hidden; margin-right: -.03em; }
.vm-num__s { display: block; transform: translateY(calc(var(--i, 1) * -1em)); transition: transform 900ms var(--ease-out) var(--nd, 0ms); }
.vm-num__s > span { display: block; height: 1em; }
.vm-fact .vm-mask { margin-top: var(--sp-8); font-size: var(--fs-label); line-height: 1.1; letter-spacing: var(--tr-caption); color: var(--h-2); }
/* слово футера (Instrument Sans wdth 83) */
.vm-mark { margin: 0; font-weight: 400; font-stretch: 83%; line-height: 1; white-space: nowrap; pointer-events: none; }
.vm-mark > span { display: block; font-size: calc(100cqi / 5.389); letter-spacing: var(--tr-display); line-height: .74; margin: 0 0 -.01em -.0277em; }
/* логотип hero: SVG клиента от поля до поля, высота = --cap, низ заглавных на нижнем поле */
.vm-hero__mark { position: absolute; left: var(--margin); right: var(--margin); bottom: var(--margin); margin: 0; color: var(--h-fg); pointer-events: none; transform-origin: 0 0; }
.vm-hero__rev, .vm-hero__mark svg { display: block; }
.vm-hero__mark svg { width: 100%; height: auto; overflow: visible; }
/* логотип шапки появляется, когда логотип hero до него долетел (JS); без JS — виден */
.js .vm-logo { opacity: 0; }

@media (max-width: 1023px) {
  .vm-hero__grid { grid-template-rows: auto 1fr auto; }
  .vm-hero__title { grid-column: 1 / 4; align-self: center; }
  .vm-cta { position: static; grid-column: 4 / 6; grid-row: 1; width: auto; margin-right: 0; height: var(--btn-h-sm); }
  .vm-facts { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .vm-facts__list { grid-template-columns: repeat(4, 1fr); margin-top: var(--sp-24); }
}
@media (max-width: 767px) {
  .vm-hero__grid { display: flex; flex-direction: column; padding-top: calc(var(--head-h) + 24px); }
  .vm-hero__title { align-self: start; margin-bottom: var(--sp-24); }
  .vm-cta { align-self: stretch; height: 56px; --cta-h: 56px; }
  .vm-facts { --fs-num: 32px; margin-top: auto; }
  .vm-facts__list { column-gap: 12px; margin-top: var(--sp-16); }
}

/* ── Оверлей сетки: G или ?grid ── */
.vm-gridlines { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: none; }
.show-grid .vm-gridlines { display: grid; grid-template-columns: var(--cols); padding-inline: var(--margin); }
.vm-gridlines i { border-left: 1px solid rgb(255 0 170 / .6); }
.vm-gridlines i:last-of-type { border-right: 1px solid rgb(255 0 170 / .6); }
.show-grid .vm-gridlines { container-type: size; }
.vm-gridlines b { position: absolute; left: 0; right: 0; border-top: 1px solid rgb(255 0 170 / .6);
  --rowG: calc((100cqh - var(--margin) - (100cqi - 2 * var(--margin)) * .05002) / 3); }
.vm-gridlines b:nth-of-type(1) { top: var(--rowG); } .vm-gridlines b:nth-of-type(2) { top: calc(var(--rowG) * 2); }
.vm-gridlines b:nth-of-type(3) { top: calc(var(--rowG) * 3); } .vm-gridlines b:nth-of-type(4) { top: calc(100cqh - var(--margin)); }
@media (max-width: 767px) { .show-grid .vm-gridlines { column-gap: 20px; } .vm-gridlines i:nth-child(n+3) { display: none; } .vm-gridlines i:nth-child(2) { border-right: 1px solid rgb(255 0 170 / .6); } }

/* ── Движение: интро ── */
.w > span { display: inline-block; white-space: pre; }
.js .vm-hero .w > span { opacity: .3; filter: blur(8px); color: #7F7F7F; }
.js .vm-hero__rev { opacity: .3; filter: blur(14px); color: #7F7F7F; }
.js .vm-hero__fade { opacity: 0; }
.js .vm-header { opacity: 0; }
.js .vm-hero.is-in .w > span, .js .vm-hero.is-in .vm-hero__rev { opacity: 1; filter: none; color: inherit;
  transition: opacity 600ms var(--ease-out), filter 600ms var(--ease-out), color 900ms var(--ease-out); transition-delay: var(--d); }
.js .vm-hero.is-in .vm-hero__fade, .js body.is-in .vm-header { opacity: 1; transition: opacity var(--t-fade) var(--ease-out) var(--d, 300ms); }
.still .vm-num, .still .vm-num__s { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .vm-num, .vm-num__s { transition: none; }
  .js .vm-hero .w > span, .js .vm-hero__rev { filter: none !important; color: inherit !important; }
  .js .vm-hero.is-in .w > span, .js .vm-hero.is-in .vm-hero__rev, .js .vm-hero.is-in .vm-hero__fade,
  .js body.is-in .vm-header { transition: opacity 200ms ease-out !important; transition-delay: 0ms !important; }
}

/* =====================================================================
   HERO v4 — светлая серая студия, сцены по кругу, персонажи вырезаны.
   Фон hero #D6D6D9, весь текст, линии, кнопка, иконки шапки — #161615.
   Персонаж слева (C1–C2), текст справа (C4–C5), слово внизу, подошвы над ним.
   ===================================================================== */
:root { --c-bg: #F5F5F2; --c-ink: #161615; --c-ink-2: #3B3B39; --c-dark: #161615;
  --paper: #D6D6D9; --ink: #161615;
  --ease-rise: cubic-bezier(.23, 1, .32, 1); }
body { background: var(--paper); }

.vm-hero[data-theme="studio"] {
  --h-bg: var(--paper); --h-fg: var(--ink); --h-strong: var(--ink); --h-2: #3B3B39;
  --h-line: rgb(22 22 21 / .11); --h-rule: rgb(22 22 21 / .4); --h-track: rgb(22 22 21 / .18); --h-cell: rgb(22 22 21 / .35);
  --cta-bg: var(--paper); --cta-bg-h: var(--ink); --cta-line: rgb(22 22 21 / .32); --cta-fg: var(--ink); --beam: var(--ink); }
.vm-hero::selection, .vm-hero ::selection { background: var(--ink); color: var(--paper); }

/* ── КАДР. ≥1024: кадр ставится по фигуре. Подошвы на --feet-gap выше верха слова; центр фигуры — на середине C1–C2 ── */
.vm-photo { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
/* слой сцены на весь hero, залит бумагой; видны только текущий (.is-on) и входящий поверх (.is-top), его clip-path ведёт JS */
.vm-shot { position: absolute; inset: 0; background: var(--paper); visibility: hidden; }
.vm-shot.is-on, .vm-shot.is-top { visibility: visible; }
.vm-shot.is-top { z-index: 1; }
.vm-photo img { position: absolute; max-width: none; transform-origin: calc(var(--fx, .5) * 100%) calc(var(--sole, .968) * 100%); }
/* КОНТАКТНАЯ ТЕНЬ — фон самого <img>: два эллипса по ступням (data-feet), центр на линии подошв */
.vm-photo img {
  --cx: var(--fcx, .3); --sw: calc(var(--fw, .14) * 1.3); --sw2: calc(var(--fw, .14) * 2.4);
  background-image: radial-gradient(closest-side, rgb(22 22 21 / .30), rgb(22 22 21 / .12) 55%, transparent),
    radial-gradient(closest-side, rgb(22 22 21 / .10), transparent);
  background-repeat: no-repeat;
  background-size: calc(var(--sw) * 100%) 2.4%, calc(var(--sw2) * 100%) 5%;
  background-position: calc((var(--cx) - var(--sw) / 2) / (1 - var(--sw)) * 100%) calc((var(--sole, .968) - .012) / .976 * 100%),
    calc((var(--cx) - var(--sw2) / 2) / (1 - var(--sw2)) * 100%) calc((var(--sole, .968) - .03) / .95 * 100%); }
@media (max-width: 1023px) { .vm-photo img { --cx: var(--fcxm, .55); --sw: calc(var(--fw, .14) * 2.6); --sw2: calc(var(--fw, .14) * 4.8); } }
.vm-hero { --feet-gap: 16px; }
@media (min-width: 1024px) and (max-width: 1379px) { .vm-hero { --feet-gap: calc(48px + var(--cta-h)); } }
@media (min-width: 1024px) {
  .vm-photo img {
    --h: calc((100cqh - var(--margin) - var(--cap) - var(--feet-gap) - var(--head-h)) / var(--sole, .968));
    top: var(--head-h); height: var(--h); width: calc(var(--h) * 1.7921);
    left: calc(var(--margin) + (100cqi - 2 * var(--margin)) * 537.5 / 1801 - var(--fx, .252) * 1.7921 * var(--h)); }
}
/* ≤1023: вертикальный кроп вокруг фигуры (1000×1116) в коробке между CTA и цифрами, contain по центру */
@media (max-width: 1023px) {
  .vm-photo img { top: var(--st-top); left: var(--margin); width: calc(100% - 2 * var(--margin)); height: calc(100% - var(--st-top) - var(--st-bot));
    object-fit: contain; object-position: 50% 50%; }
}

/* ── Линии сетки отдельным слоем, прорисовываются в интро. Вертикали: поле, L2–L5, поле. Горизонтали: 3 ряда, верх заглавных, нижнее поле ── */
.vm-lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vm-lines > * { position: absolute; background: var(--h-line); }
.vm-lines i { top: 0; bottom: 0; width: 1px; transform-origin: 50% 0; }
.vm-lines b { left: 0; right: 0; height: 1px; transform-origin: 0 50%; }
.vm-lines i:nth-child(1) { left: calc(var(--margin) - 1px); }
.vm-lines i:nth-child(2) { left: calc(var(--L2) - 1px); }
.vm-lines i:nth-child(3) { left: calc(var(--L3) - 1px); }
.vm-lines i:nth-child(4) { left: calc(var(--L4) - 1px); }
.vm-lines i:nth-child(5) { left: calc(var(--L5) - 1px); }
.vm-lines i:nth-child(6) { left: calc(100% - var(--margin) - 1px); }
.vm-lines b:nth-of-type(1) { top: calc(var(--row) - 1px); }
.vm-lines b:nth-of-type(2) { top: calc(var(--row) * 2 - 1px); }
.vm-lines b:nth-of-type(3) { top: calc(var(--row) * 3 - 1px); }
.vm-lines b:nth-of-type(4) { top: calc(100% - var(--margin) - 1px); }
@media (max-width: 767px) { .vm-lines i:nth-child(2), .vm-lines i:nth-child(4), .vm-lines i:nth-child(5) { display: none; } }

/* ── CTA v4: заливка цветом бумаги, контур 32 %, чёрный блик; наведение и фокус — инверсия ── */
.vm-cta { transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .vm-cta:hover { color: #F5F5F2; } .vm-cta:hover .vm-cta__a { border-left-color: rgb(245 245 242 / .2); } }
.vm-cta:focus-visible { color: #F5F5F2; background: var(--cta-bg-h); }

/* ── Интро v4: линии растут, кадр проявляется, слово поднимается из-под линии маской, заголовок по словам ── */
.js .vm-photo { opacity: 0; }
.js .vm-hero.is-in .vm-photo { opacity: 1; transition: opacity 1200ms var(--ease-out) 300ms; }
.js .vm-lines > * { transition: transform 900ms var(--ease-rise); }
.js .vm-lines i { transform: scaleY(0); }
.js .vm-lines b { transform: scaleX(0); }
.js .vm-lines i:nth-child(2) { transition-delay: 60ms; } .js .vm-lines i:nth-child(3) { transition-delay: 120ms; }
.js .vm-lines i:nth-child(4) { transition-delay: 180ms; } .js .vm-lines i:nth-child(5) { transition-delay: 240ms; }
.js .vm-lines i:nth-child(6) { transition-delay: 300ms; }
.js .vm-lines b:nth-of-type(1) { transition-delay: 200ms; } .js .vm-lines b:nth-of-type(2) { transition-delay: 280ms; }
.js .vm-lines b:nth-of-type(3) { transition-delay: 360ms; } .js .vm-lines b:nth-of-type(4) { transition-delay: 440ms; }
.js .vm-hero.is-in .vm-lines > * { transform: none; }

.js .vm-hero__rev, .js .vm-hero.is-in .vm-hero__rev { opacity: 1; filter: none; color: inherit; }
.js .vm-hero__rev { transform: translateY(110%); clip-path: inset(-20% -2% 110% -2%); }
.js .vm-hero.is-in .vm-hero__rev { transform: none; clip-path: inset(-20% -2% -10% -2%);
  transition: transform 1100ms var(--ease-rise) 250ms, clip-path 1100ms var(--ease-rise) 250ms; }

.vm-hero__title { overflow: clip; overflow-clip-margin: 2px; }
.js .vm-hero .w > span, .js .vm-hero.is-in .w > span { opacity: 1; filter: none; color: inherit; }
.js .vm-hero .w > span { transform: translateY(105%); }
.js .vm-hero.is-in .w > span { transform: none; transition: transform 900ms var(--ease-rise) var(--d); }

@media (prefers-reduced-motion: reduce) {
  .js .vm-lines > *, .js .vm-hero__rev, .js .vm-hero .w > span { transform: none !important; clip-path: none !important; }
  .js .vm-lines > *, .js .vm-hero__rev, .js .vm-hero .w > span { opacity: 0; }
  .js .vm-hero.is-in .vm-lines > *, .js .vm-hero.is-in .vm-hero__rev, .js .vm-hero.is-in .w > span, .js .vm-hero.is-in .vm-photo { opacity: 1; transition: opacity 200ms ease-out !important; }
}

/* ── КРАЯ НА ЛИНИЯХ: CTA до L2, цифры до L5, заголовок L4–L5 по контуру букв ── */
.vm-hero__grid > * { margin-right: 0; }
@media (min-width: 1380px) { .vm-cta { width: calc((100cqi - 2 * var(--margin)) * 292 / 1801); } }
@media (min-width: 1024px) and (max-width: 1379px) { .vm-cta { width: calc((100cqi - 2 * var(--margin)) * 783 / 1801); } }
/* заголовок: контур «INDULGE…COMPROMISE.» при трекинге −0,03 em = 15,832 em (левый отступ «I» 0,078 em) */
@media (min-width: 1024px) {
  .vm-hero__title { grid-column: 4 / 6; font-size: calc((100cqi - 2 * var(--margin)) * 619 / 1801 / 15.832); margin-left: -.078em; }
}
.vm-facts__list { margin-top: 0; }
@media (max-width: 1023px) { .vm-facts__list { margin-top: 0; } }

/* ── СТРОКА СЦЕНЫ под словом, от поля до поля. ≤767 слово поднимается на --foot 56 ── */
.vm-hero { --foot: var(--margin); --row: calc((100cqh - var(--foot) - var(--cap)) / 3); }
@media (max-width: 767px) { .vm-hero { --foot: 56px; } }
.vm-hero__mark { bottom: var(--foot); }
.vm-lines b:nth-of-type(4) { top: calc(100% - var(--foot) - 1px); }
.vm-scenebar { position: absolute; left: var(--margin); right: var(--margin); bottom: 20px; height: 32px;
  display: flex; align-items: center; justify-content: space-between; }
.vm-scenebar .vm-prog { top: auto; bottom: 0; }
.vm-scenebar__head { margin: 0; padding: 0; min-height: 32px; border: 0; background: none; cursor: pointer; color: var(--h-strong);
  font-size: 12px; line-height: 1; letter-spacing: var(--tr-caption); text-align: left; }
.vm-scenebar__head .vm-mask { padding-bottom: 1px; }
.vm-scenebar .vm-scenes__pause { margin: -6px -18px -6px 0; color: var(--h-strong); }
@media (hover: hover) and (pointer: fine) { .vm-scenebar__head:hover .vm-mask { opacity: .6; } .vm-scenebar__head .vm-mask { transition: opacity .2s ease; } }

/* ── ЦИФРЫ «Одно главное»: число группы на высоту ряда в C4, остальные три столбиком в C5 ── */
.vm-facts__list { column-gap: 0; row-gap: 0; grid-template-columns: 619fr 165fr; grid-template-rows: auto auto auto 1fr; }
.vm-fact { padding-top: 0; }
.vm-num { margin-left: -.031em; }
.vm-fact .vm-mask { font-size: 12px; }
.vm-fact:first-child { grid-row: 1 / 5;
  --fB: min(var(--row) / .72, (100cqi - 2 * var(--margin)) * 619 / 1801 / 1.27); }
.vm-fact:first-child .vm-num { font-size: var(--fB); margin-top: calc(-.14 * var(--fB)); letter-spacing: -.04em; }
.vm-fact:first-child .vm-mask { margin-top: calc(12px - .14 * var(--fB)); }
.vm-fact:first-child .vm-fact__rule, .vm-fact:nth-child(2) .vm-fact__rule { display: none; }
.vm-fact:not(:first-child) { grid-column: 2; padding: 12px 0 20px 12px; --fs-num: clamp(24px, 1.667vw, 32px); }
.vm-fact:not(:first-child) .vm-mask { margin-top: 6px; }
.vm-fact:nth-child(2) { padding-top: 0; }
@media (min-width: 1024px) { .vm-facts { grid-column: 4 / 6; } }
@media (max-width: 1023px) {
  .vm-facts__list { grid-template-columns: 1fr 1fr; }
  .vm-fact:first-child { --fB: min(var(--row) / .72, (100cqi - 2 * var(--margin)) / 2 / 1.27); }
  .vm-fact:first-child .vm-num { margin-top: 0; }
  .vm-fact:not(:first-child) { display: flex; align-items: baseline; gap: 8px; padding: 0 0 8px 12px; --fs-num: 24px; }
  .vm-fact:not(:first-child) .vm-mask { margin: 0; }
  .vm-fact:not(:first-child) .vm-fact__rule { display: none; }
}

/* =====================================================================
   АДАПТИВ <1280 (аудит 25.09). Всё ниже — только в медиазапросах шириной ≤1279.
   ===================================================================== */
@media (max-width: 1023px) {
  .vm-hero { --fgap: 32px; --fBm: min(var(--row) / .72, (100cqi - 2 * var(--margin)) / 2 / 1.27);
    --st-bot: calc(var(--foot) + var(--cap) + var(--fgap) * 2 + .86 * var(--fBm) + 25px); }
  .vm-fact:first-child { --fB: var(--fBm); }
  .vm-facts { margin-bottom: calc(var(--foot) + var(--cap) + var(--fgap)); }
  .vm-logo { min-height: 44px; align-content: center; }
  .vm-scenebar__head { position: relative; }
  .vm-scenebar__head::after { content: ""; position: absolute; inset: -6px 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .vm-header__link { padding-block: 16px; }
  .vm-logo { min-height: 44px; align-content: center; }
  .vm-scenebar__head { position: relative; }
  .vm-scenebar__head::after { content: ""; position: absolute; inset: -6px 0; }
}
@media (min-width: 768px) and (max-width: 1023px) { :root { --btn-h-sm: 48px; } }
@media (max-width: 767px) {
  .vm-hero { --fgap: 24px; height: max(560px, var(--screen)); }
  .vm-hero__title { font-size: min(20px, (100cqi - 2 * var(--margin)) / 15.832); }
}
@media (max-width: 767px) and (max-height: 760px) {
  .vm-hero { --fgap: 16px; --st-top: calc(var(--head-h) + 124px);
    --fBm: min(var(--row) / .72, (100cqi - 2 * var(--margin)) / 2 / 1.27, 100cqh * .15); }
  .vm-hero__grid { padding-top: calc(var(--head-h) + 16px); }
  .vm-hero__title { margin-bottom: 16px; }
}
/* ТЕЛЕФОН ЛЁЖА (568–1023 × ≤500): раскладка десктопа, hero выше экрана */
@media (min-width: 568px) and (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  :root { --cols: minmax(0, 292fr) minmax(0, 491fr) minmax(0, 234fr) minmax(0, 619fr) minmax(0, 165fr);
    --L2: calc(var(--margin) + (100% - 2 * var(--margin)) * 292 / 1801); --L3: calc(var(--margin) + (100% - 2 * var(--margin)) * 783 / 1801);
    --L4: calc(var(--margin) + (100% - 2 * var(--margin)) * 1017 / 1801); --L5: calc(var(--margin) + (100% - 2 * var(--margin)) * 1636 / 1801); }
  .vm-grid { column-gap: 0; }
  .vm-lines i:nth-child(2), .vm-lines i:nth-child(4), .vm-lines i:nth-child(5) { display: block; }
  .vm-hero__grid { display: grid; grid-template-rows: auto auto 1fr; padding-top: calc(var(--head-h) + 24px); }
  .vm-hero__title { grid-column: 4 / 6; grid-row: 1; align-self: start; margin: 0 0 0 -.078em;
    font-size: calc((100cqi - 2 * var(--margin)) * 784 / 1801 / 15.832); }
  .vm-cta { position: static; grid-column: 4 / 6; grid-row: 2; align-self: start; width: auto; height: 48px; --cta-h: 48px; margin: 24px 0 0; }
  .vm-facts { grid-column: 4 / 6; grid-row: 3; align-self: start; margin: 24px 0 0; }
  .vm-facts__list { grid-template-columns: minmax(0, 1fr) auto; }
  .vm-fact:first-child { --fB: min(150px, (100cqi - 2 * var(--margin)) * 619 / 1801 / 1.27); }
  .vm-fact:not(:first-child) { display: block; padding: 0 0 12px 12px; }
  .vm-fact:not(:first-child) .vm-mask { margin: 4px 0 0; }
  .vm-photo img { top: var(--head-h); left: var(--margin); width: calc(var(--L4) - var(--margin) - 24px);
    height: calc(100% - var(--head-h) - var(--foot) - var(--cap) - 16px); object-position: 50% 100%; }
}