/* Siberianpro — сайт студии.
 * Стиль (15.10.2026) — сертификат студии + логотип: тёплая бумага, графит, тонкий широкий шрифт заглавными,
 * золото логотипа #AF9D6D — линии и акценты, подпись от руки. Тёмные зоны (.dk) — только под видео и в подвале.
 * Прошлые палитры: backup/v9-moodboard-films (мудборд), backup/v5-gold.
 * Радиусы: карточки 16px, поля 12px, кнопки — капсула.
 * Движение: появление блоков 600 мс, реакции 180 мс. prefers-reduced-motion выключает всё, кроме смены состояний.
 */
:root {
  --choc-0: #1e1915; --choc: #2b241e; --choc-2: #352d26; --choc-3: #41372e;   /* шоколад с кадра сертификата «Детали создают ценность» */
  --bg: #ece8e1; --bg-2: #e4dfd6; --bg-3: #f4f1ec; --line: rgba(38,31,26,.13); --line-2: rgba(38,31,26,.24);
  --ink: #261f1a; --ink-2: #4a3f36; --mute: #7b6f63; --gold: #8f7b4c; --gold-hi: #af9d6d; --gold-ink: #261f1a; --err: #b4452c;
  --acc: var(--choc); --acc-hi: var(--choc-3); --acc-ink: #f5efe7; --acc-glow: rgba(43,36,30,.2);
  --paper: #ece8e1; --fog: #d9d4ca; --copper: #8f7b4c; --leather: #4a3f36; --olive: #2b241e; --red: #b4452c;
  --r: 16px; --r-in: 12px; --ease: cubic-bezier(.2,.7,.2,1); --fast: 180ms;
  --display: 'Montserrat', 'Manrope', system-ui, sans-serif; --script: 'Marck Script', cursive; --text: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1240px; --gutter: clamp(16px, 4vw, 40px); --hdr: 72px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc-hi); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--acc); color: var(--acc-ink); padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 880px; }
.gold { color: var(--gold); }
.muted { color: var(--mute); }
.small { font-size: 14px; }

/* типографика */
.h-hero { font: 500 clamp(32px, 4.4vw, 60px)/1.06 var(--display); letter-spacing: -.02em; margin: 0 0 20px; text-wrap: balance; }
.h1 { font: 500 clamp(30px, 4.2vw, 56px)/1.08 var(--display); letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance; }
.h2 { font: 500 clamp(26px, 3.2vw, 42px)/1.12 var(--display); letter-spacing: -.015em; margin: 0 0 16px; text-wrap: balance; max-width: 22ch; }
.h3 { font: 500 clamp(19px, 1.8vw, 22px)/1.25 var(--display); margin: 0 0 10px; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 58ch; margin: 0 0 24px; }
.eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
.prose p { color: var(--ink-2); max-width: 64ch; }
.legal h2 { font: 500 clamp(19px, 1.8vw, 22px)/1.3 var(--display); margin: 30px 0 10px; }
.legal ul { color: var(--ink-2); max-width: 64ch; padding-left: 22px; margin: 0 0 14px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--acc-hi); overflow-wrap: anywhere; }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease), color var(--fast) var(--ease); }
.btn:active { transform: scale(.98); }
.btn--gold { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn--gold:hover { background: var(--acc-hi); border-color: var(--acc-hi); box-shadow: 0 10px 40px -8px var(--acc-glow); }
.btn--gold::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-120%); transition: transform 700ms var(--ease); }
.btn--gold:hover::before { transform: translateX(120%); }
.btn--line:hover { border-color: var(--acc); color: var(--acc-hi); }
.btn--lg { min-height: 58px; padding: 0 32px; font-size: 16px; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn:disabled { opacity: .6; cursor: default; }
.arrow { font-style: normal; color: var(--gold); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.arrow::after { content: '→'; transition: transform var(--fast) var(--ease); }
a:hover .arrow::after { transform: translateX(4px); }

/* шапка */
.hdr { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--hdr); transition: background 300ms var(--ease), border-color 300ms var(--ease); border-bottom: 1px solid transparent; }
.hdr.is-solid, .hdr.is-open { background: rgba(7,7,7,.86); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-color: var(--line); }
.hdr__in { height: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; }
.hdr__logo img { height: 20px; width: auto; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav__link { text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 15px; transition: color var(--fast); }
.nav__link:hover { color: var(--acc-hi); }
.hdr__tel { text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; }
.hdr__burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; position: relative; cursor: pointer; }
.hdr__burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); transition: transform var(--fast) var(--ease); }
.hdr__burger span:first-child { top: 17px; } .hdr__burger span:last-child { top: 25px; }
.hdr.is-open .hdr__burger span:first-child { transform: translateY(4px) rotate(45deg); }
.hdr.is-open .hdr__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* секции */
.sec { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.sec--dark { background: var(--bg-2); }
.sec--top { padding-top: clamp(40px, 5vw, 72px); }
.sec--cards { padding: clamp(40px, 5vw, 64px) 0; }
.sec__head { margin-bottom: 36px; }
.crumbs { padding-top: calc(var(--hdr) + 24px); font-size: 14px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: var(--mute); text-decoration: none; } .crumbs a:hover { color: var(--acc-hi); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* первый экран: сцена 3D, закреплённая на время сюжета */
.hero { position: relative; height: 420vh; }
.hero__stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; background: #0b0c0e; }
.hero__poster img, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__canvas { opacity: 0; transition: opacity 900ms var(--ease); }
.hero.is-3d .hero__canvas { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,7,7,.92) 0%, rgba(7,7,7,.7) 30%, rgba(7,7,7,.12) 56%, transparent 70%), linear-gradient(0deg, rgba(7,7,7,.9) 0%, transparent 26%); }
.hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: var(--hdr); }
.hero__content > * { max-width: 680px; }
/* Сюжет: заголовок уходит в начале прокрутки, дальше говорят подписи кадров. --p задаёт main.js. */
.hero__content { --k: clamp(0, calc((var(--p, 0) - 0.04) * 14), 1); opacity: calc(1 - var(--k)); transform: translateY(calc(var(--k) * -28px)); }
.hero.is-story .hero__content { pointer-events: none; }
.hero__lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 46ch; margin: 0 0 30px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.h-line { display: block; overflow: hidden; padding-bottom: .08em; }
.h-line > span { display: inline-block; animation: line-up 1s var(--ease) both .2s; }
.h-line:nth-child(2) > span { animation-delay: .32s; } .h-line:nth-child(3) > span { animation-delay: .44s; }
.hero__content .eyebrow, .hero__lead, .hero__cta { animation: fade-up .9s var(--ease) both .55s; }
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
.beats { position: absolute; z-index: 2; left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); bottom: 13vh; width: min(560px, 44vw); margin: 0; padding: 0; list-style: none; counter-reset: b; }
.beats li { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 600ms var(--ease), transform 600ms var(--ease), filter 600ms var(--ease); }
.beats li.is-on { opacity: 1; transform: none; filter: none; }
.beats li::before { counter-increment: b; content: '0' counter(b) ' / 05'; display: block; font: 500 13px/1 var(--display); letter-spacing: .12em; color: var(--gold); margin-bottom: 18px; }
.beats b { display: block; font: 500 clamp(28px, 3.4vw, 48px)/1.08 var(--display); letter-spacing: -.015em; margin-bottom: 14px; }
.beats span { display: block; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); max-width: 42ch; }
.hero__progress { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.hero__progress span { display: block; height: 100%; background: var(--acc); transform-origin: left; transform: scaleX(0); }

/* доверие */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.trust__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { padding: 28px 20px; border-left: 1px solid var(--line); }
.trust__item:first-child { border-left: 0; padding-left: 0; }
.trust__item b { display: block; font: 500 clamp(24px, 2.6vw, 34px)/1.1 var(--display); color: var(--gold-hi); margin-bottom: 6px; }
.trust__item span { font-size: 14.5px; color: var(--mute); }

/* сценарии */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.path { padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.path:hover { border-color: rgba(175,157,109,.45); transform: translateY(-2px); }
.path p { color: var(--mute); font-size: 15.5px; }
.path ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.path a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--line); padding-bottom: 8px; display: block; }
.path a:hover { color: var(--acc-hi); }

/* защита плёнкой */
.ppf { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.ppf__card { position: relative; display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); text-decoration: none; min-height: 300px; isolation: isolate; }
.ppf__card--big { grid-row: span 2; min-height: 560px; }
.ppf__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 900ms var(--ease); }
.ppf__card:hover .ppf__img { transform: scale(1.04); }
.ppf__card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,7,7,.94) 8%, rgba(7,7,7,.2) 60%, transparent); }
.ppf__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; display: grid; gap: 8px; }
.ppf__body b { font: 500 20px/1.25 var(--display); }
.ppf__body > span { color: var(--ink-2); font-size: 15px; }

/* каталог */
.catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 40px; }
.catalog__group h3 { color: var(--gold); font-family: var(--text); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-top: 18px; }
.catalog ul { list-style: none; margin: 0; padding: 0; }
.catalog a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; }
.catalog a:hover { color: var(--acc-hi); }

/* до/после */
.ba { margin: 0; }
.ba__frame { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); --pos: 50%; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { position: absolute; inset: 0; -webkit-clip-path: inset(0 0 0 var(--pos)); clip-path: inset(0 0 0 var(--pos)); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--acc-hi); box-shadow: 0 0 16px rgba(175,157,109,.6); pointer-events: none; }
.ba__handle::after { content: '⟷'; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--bg); border: 2px solid var(--acc-hi); display: grid; place-items: center; color: var(--acc-hi); font-size: 18px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__frame:focus-within .ba__handle::after { box-shadow: 0 0 0 3px rgba(175,157,109,.4); }
.ba__cap { display: flex; justify-content: space-between; margin-top: 10px; color: var(--mute); font-size: 14px; }
.works-note { margin-top: 24px; padding: 20px 24px; border: 1px dashed rgba(175,157,109,.5); border-radius: var(--r); color: var(--ink-2); font-size: 15.5px; }
.works-note p { margin: 0; }

/* почему мы */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.why__item { background: var(--bg); padding: 30px 28px; }
.why__item b { display: block; font: 500 18px/1.3 var(--display); margin-bottom: 10px; }
.why__item p { margin: 0; color: var(--mute); font-size: 15.5px; }

/* этапы */
.steps { counter-reset: s; list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.steps li { counter-increment: s; padding: 24px 20px; border-top: 2px solid var(--gold); background: var(--bg-3); border-radius: 0 0 var(--r) var(--r); }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 500 14px/1 var(--display); color: var(--gold); margin-bottom: 14px; }
.steps b { display: block; font-size: 17px; margin-bottom: 6px; }
.steps span { color: var(--mute); font-size: 15px; }

/* студия */
.space { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.space__text p { color: var(--ink-2); }
.space__img, .cert__img { border-radius: var(--r); border: 1px solid var(--line); aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.note-ph { font-size: 13px; color: var(--mute); margin: 10px 0 0; }

/* отзывы */
.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 28px; }
.review { margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.review p { margin: 0 0 18px; font-size: 17px; color: var(--ink-2); }
.review footer { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--mute); }
.review footer b { color: var(--ink); font-size: 15px; }

/* сертификат */
.cert { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* FAQ */
.faq { display: grid; gap: 10px; margin-top: 24px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-3); }
.faq__item summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 700; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--acc); font-size: 24px; transition: transform var(--fast) var(--ease); }
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); }

/* форма */
.sec--form { background: radial-gradient(80% 60% at 80% 0%, rgba(175,157,109,.12), transparent 60%), var(--bg-2); }
.form-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink-2); }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border: solid var(--gold); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.ticks a { color: var(--acc-hi); font-weight: 700; }
.lead-form { padding: 32px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); display: grid; gap: 16px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-field { display: grid; gap: 6px; }
.f-field > span, .f-pref legend { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.f-field input, .f-field select, .f-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r-in); border: 1px solid var(--line-2); background: var(--bg-2); font-size: 16px; transition: border-color var(--fast); }
.f-field textarea { resize: vertical; min-height: 96px; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(175,157,109,.22); }
.f-field input::placeholder, .f-field textarea::placeholder { color: #8b877e; }
.f-field.is-bad input { border-color: var(--err); }
.f-pref { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.f-pref legend { margin-bottom: 8px; width: 100%; }
.f-pref label { position: relative; }
.f-pref input { position: absolute; opacity: 0; }
.f-pref span { display: inline-flex; min-height: 42px; align-items: center; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; font-size: 15px; transition: border-color var(--fast), background var(--fast); }
.f-pref input:checked + span { border-color: var(--acc); background: rgba(175,157,109,.14); color: var(--acc-hi); }
.f-pref input:focus-visible + span { outline: 2px solid var(--acc-hi); outline-offset: 2px; }
.f-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer; }
.f-file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-file__btn { display: inline-flex; min-height: 42px; align-items: center; padding: 0 16px; border: 1px dashed rgba(175,157,109,.6); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--acc-hi); }
.f-file__name { font-size: 14px; color: var(--mute); }
.f-file input:focus-visible + .f-file__btn { outline: 2px solid var(--acc-hi); outline-offset: 2px; }
.f-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.f-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--acc); flex: 0 0 auto; }
.f-consent a { color: var(--acc-hi); }
.f-err { margin: 0; padding: 12px 14px; border-radius: var(--r-in); border: 1px solid rgba(236,155,136,.45); background: rgba(236,155,136,.08); color: #f5c3b6; font-size: 15px; }
.f-ok { margin: 0; padding: 16px; border-radius: var(--r-in); border: 1px solid rgba(175,157,109,.5); background: rgba(175,157,109,.1); color: var(--acc-hi); font-weight: 600; }
.f-submit.is-loading { pointer-events: none; opacity: .75; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* контакты и карта */
.contacts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.contacts--page { padding-top: 0; }
.contacts__addr { font-size: 19px; font-weight: 600; }
.contacts p { margin: 0 0 10px; }
.contacts a { color: var(--ink); font-weight: 700; text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.chips a { display: inline-flex; min-height: 42px; align-items: center; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14.5px; font-weight: 600; transition: border-color var(--fast), color var(--fast); }
.chips a:hover { border-color: var(--acc); color: var(--acc-hi); }
.map__tabs { display: inline-flex; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; margin-bottom: 12px; }
.map__tabs button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink-2); }
.map__tabs button[aria-selected="true"] { background: var(--acc); color: var(--acc-ink); }
.map__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--bg-3); }
.map--full .map__frame { aspect-ratio: 5 / 4; }
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__ph { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--mute); font-size: 14px; padding: 20px; text-align: center; }
.map__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* каталог услуг и страница услуги */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); gap: 16px; }
.cards--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); text-decoration: none; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.card:hover { border-color: rgba(175,157,109,.5); transform: translateY(-3px); }
.card__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card__body { padding: 20px 22px 24px; display: grid; gap: 8px; }
.card__body b { font: 500 18px/1.3 var(--display); }
.card__body > span { color: var(--mute); font-size: 15px; }
.svc-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.svc-hero__in { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 24px; }
.svc-hero__img { border-radius: var(--r); border: 1px solid var(--line); aspect-ratio: 16/11; object-fit: cover; width: 100%; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 40px 0 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.facts div { padding: 20px 24px; border-left: 1px solid var(--line); }
.facts div:first-child { border-left: 0; }
.facts dt { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.facts dd { margin: 0; font-weight: 600; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }

/* подвал */
.ftr { border-top: 1px solid var(--line); background: #08090b; padding: 64px 0 96px; }
.ftr__top { display: grid; grid-template-columns: 1fr 2.2fr; gap: 48px; }
.ftr__brand img { height: 22px; width: auto; margin-bottom: 18px; }
.ftr__brand p { color: var(--mute); font-size: 15px; }
.ftr__tel { display: block; font-weight: 700; text-decoration: none; margin-bottom: 6px; }
.ftr__soc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; }
.ftr__soc a, .ftr__col a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.ftr__soc a:hover, .ftr__col a:hover { color: var(--acc-hi); }
.ftr__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; }
.ftr__col { display: grid; gap: 8px; align-content: start; }
.ftr__h { margin: 0 0 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
.ftr__bottom a { color: var(--mute); }
.dock-m { display: none; }
.demo-flag { position: fixed; left: 12px; bottom: 12px; z-index: 25; padding: 6px 12px; border-radius: 999px; background: rgba(175,157,109,.16); border: 1px solid rgba(175,157,109,.45); color: var(--gold-hi); font-size: 12px; font-weight: 600; pointer-events: none; }

/* адаптив */
@media (max-width: 1100px) {
  .nav { gap: 18px; } .hdr__tel { display: none; }
  .ppf { grid-template-columns: 1fr 1fr; } .ppf__card--big { grid-column: span 2; grid-row: auto; min-height: 420px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  :root { --hdr: 64px; }
  .nav { position: fixed; inset: var(--hdr) 0 auto; flex-direction: column; gap: 0; padding: 8px var(--gutter) 24px; background: rgba(7,7,7,.97); border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform 300ms var(--ease); margin: 0; }
  .hdr.is-open .nav { transform: none; }
  .nav__link { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
  .hdr__burger { display: block; margin-left: auto; }
  .hdr__cta { display: none; }
  .paths, .catalog, .why, .cards, .reviews { grid-template-columns: 1fr; }
  .trust__in { grid-template-columns: 1fr 1fr; }
  .trust__item:nth-child(3) { border-left: 0; padding-left: 0; } .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .form-wrap, .contacts, .space, .cert, .svc-hero__in, .two, .ftr__top { grid-template-columns: 1fr; gap: 32px; }
  .steps, .steps--4 { grid-template-columns: 1fr 1fr; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr; } .facts div { border-left: 0; border-top: 1px solid var(--line); } .facts div:first-child { border-top: 0; }
  .dock-m { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 28; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(7,7,7,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .dock-m__btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; font-weight: 700; font-size: 14.5px; }
  .dock-m__btn--gold { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
  .demo-flag { bottom: 76px; }
  .ftr { padding-bottom: 120px; }
  /* первый экран: сцена сверху, текст ниже */
  .hero { height: 330vh; }
  .hero__scrim { background: linear-gradient(180deg, rgba(7,7,7,.3) 0%, transparent 20%, transparent 40%, rgba(7,7,7,.96) 66%); }
  .hero__content { justify-content: flex-end; padding-bottom: 96px; }
  .beats { left: var(--gutter); right: var(--gutter); width: auto; bottom: 108px; }
  .beats b { font-size: 26px; } .beats span { font-size: 15px; }
}
@media (max-width: 560px) {
  .f-row, .steps, .steps--4, .ftr__cols, .trust__in { grid-template-columns: 1fr; }
  .trust__item, .trust__item:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .trust__item:first-child { border-top: 0; }
  .ppf { grid-template-columns: 1fr; } .ppf__card--big { grid-column: auto; min-height: 340px; }
  .lead-form { padding: 20px; }
  .hero__cta .btn { width: 100%; }
  .h2 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero { height: auto; } .hero__stage { position: relative; } .beats { display: none; }
}
.ftr__credit { width: 100%; margin: 4px 0 0; font-size: 12px; color: #77736b; } .ftr__credit a { color: #8f8a80; }

/* защита плёнкой: большая карточка + три, без пустой клетки; описание — только в большой */
@media (min-width: 1101px) { .ppf__card:nth-child(4) { grid-column: span 2; } }
@media (min-width: 561px) { .ppf__card:not(.ppf__card--big) .ppf__body > span { display: none; } }

/* ───────── кинолента «Студия изнутри» ─────────
 * Без JS и при reduced-motion — сетка кадров с подписями. С JS (.is-live) — сцена закреплена,
 * видео проматывается прокруткой, переход между сценами — приближение и раскрытие следующего кадра. */
.reel { position: relative; background: #070809; padding: clamp(64px, 8vw, 120px) 0; }
.reel__stage { position: relative; }
.reel__shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.reel__shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); aspect-ratio: 16/9; background: #000; }
.reel__shot img, .reel__shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__shot video { display: none; }
.reel__fx, .reel__hud, .reel__nav, .reel__bar { display: none; }
.reel__caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px 32px; margin-top: 40px; }
.reel__h { grid-column: 1 / -1; font: 500 clamp(26px, 3.2vw, 42px)/1.12 var(--display); letter-spacing: -.015em; margin: 0; }
.reel__title { font: 500 clamp(19px, 1.8vw, 22px)/1.25 var(--display); margin: 0 0 10px; text-wrap: balance; }
.reel__text { color: var(--ink-2); margin: 0 0 12px; }
.reel__cap .eyebrow { margin-bottom: 10px; }
.reel__cap .arrow { text-decoration: none; }
.reel__note { font-size: 12px; color: var(--mute); margin: 24px auto 0; max-width: var(--wrap); padding: 0 var(--gutter); }

.reel.is-live { height: calc((var(--n) + .5) * 100svh); padding: 0; }
.reel.is-live .reel__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #000; }
.reel.is-live .reel__shots { display: block; position: absolute; inset: 0; max-width: none; padding: 0; }
.reel.is-live .reel__shot { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; opacity: 0; visibility: hidden; will-change: transform, clip-path, opacity; }
.reel.is-live .reel__shot.is-vis { visibility: visible; }
.reel.is-live .reel__shot video { display: block; opacity: 0; transition: opacity .35s var(--ease); }
.reel.is-live .reel__shot.is-ready video { opacity: 1; }

/* плёнка: виньетка, шторки кадра, зерно, затемнение под текст */
.reel.is-live .reel__fx { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(180deg, #000 0, #000 4.5svh, transparent 4.5svh, transparent calc(100% - 4.5svh), #000 calc(100% - 4.5svh)),
    linear-gradient(90deg, rgba(5,6,7,.82) 0%, rgba(5,6,7,.38) 38%, transparent 62%),
    linear-gradient(0deg, rgba(5,6,7,.7) 0%, transparent 42%); }
.reel.is-live .reel__fx::after { content: ''; position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: reel-grain .9s steps(5) infinite; }
@keyframes reel-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }

.reel.is-live .reel__hud { display: flex; align-items: center; gap: 22px; position: absolute; z-index: 4; left: 0; right: 0; top: calc(4.5svh + var(--hdr) + 6px);
  padding: 0 var(--gutter); max-width: calc(var(--wrap) + 2 * var(--gutter) - 2 * var(--gutter)); margin: 0 auto;
  font: 600 11px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .14em; color: rgba(242,240,234,.72); }
.reel__rec { display: inline-flex; align-items: center; gap: 8px; color: var(--acc-hi); }
.reel__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); animation: reel-rec 1.6s ease-in-out infinite; }
@keyframes reel-rec { 50% { opacity: .25; } }
.reel__count b { color: var(--ink); font-weight: 700; }
.reel__logo { margin-left: auto; height: 18px; width: auto; opacity: .9; }

.reel.is-live .reel__caps { display: grid; position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(4.5svh + clamp(36px, 7svh, 84px)); margin: 0 auto; grid-template-columns: minmax(0, 620px); gap: 18px; }
.reel.is-live .reel__h { font: 600 12px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.reel.is-live .reel__cap { grid-area: 2 / 1; opacity: 0; transform: translateY(28px); transition: opacity .5s var(--ease), transform .7s var(--ease); pointer-events: none; }
.reel.is-live .reel__cap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.reel.is-live .reel__title { font-size: clamp(28px, 4vw, 56px); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 16px; }
.reel.is-live .reel__text { font-size: clamp(16px, 1.4vw, 19px); max-width: 46ch; }

.reel.is-live .reel__nav { display: flex; flex-direction: column; gap: 4px; position: absolute; z-index: 4; right: var(--gutter); top: 50%; transform: translateY(-50%); }
.reel__nav button { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 36px; padding: 0 4px; border: 0; background: none; cursor: pointer; color: var(--mute); font: 600 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.reel__nav button b { font-weight: 600; opacity: 0; transform: translateX(8px); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
.reel__nav button span { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.reel__nav button::after { content: ''; width: 22px; height: 1px; background: currentColor; transition: width .3s var(--ease); }
.reel__nav button:hover b, .reel__nav button.is-on b { opacity: 1; transform: none; }
.reel__nav button.is-on { color: var(--acc-hi); }
.reel__nav button.is-on::after { width: 44px; }
.reel.is-live .reel__bar { display: block; position: absolute; z-index: 4; left: 0; right: 0; bottom: 4.5svh; height: 2px; background: rgba(255,255,255,.08); }
.reel__bar span { display: block; height: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); }
.reel.is-live .reel__note { position: absolute; z-index: 4; right: var(--gutter); bottom: calc(4.5svh + 12px); margin: 0; padding: 0; max-width: 340px; text-align: right; font-size: 11px; color: rgba(242,240,234,.5); }

@media (max-width: 900px) {
  .reel.is-live .reel__nav { display: none; }
  .reel.is-live .reel__fx { background:
    linear-gradient(180deg, #000 0, #000 3svh, transparent 3svh, transparent calc(100% - 3svh), #000 calc(100% - 3svh)),
    linear-gradient(0deg, rgba(5,6,7,.92) 0%, rgba(5,6,7,.55) 38%, transparent 64%); }
  .reel.is-live .reel__hud { top: calc(3svh + var(--hdr) - 4px); gap: 14px; font-size: 10px; }
  .reel.is-live .reel__tc { display: none; }
  .reel.is-live .reel__caps { bottom: calc(3svh + 92px); }
  .reel.is-live .reel__bar { bottom: 3svh; }
  .reel.is-live .reel__note { left: var(--gutter); right: var(--gutter); bottom: calc(3svh + 70px); max-width: none; text-align: left; }
  .reel.is-live .reel__title { font-size: clamp(26px, 7.4vw, 36px); }
}
@media (prefers-reduced-motion: reduce) { .reel__fx::after, .reel__rec i { animation: none; } }
/* Телефон: кадр под шапкой, титры под кадром на чёрном — как в кино. В кадре виден сюжет,
 * а не узкая полоса широкого видео, и текст не спорит с картинкой.
 * --rf — высота кадра: не больше 3:4 по ширине и с местом под титры и нижнюю панель связи (--dock). */
@media (max-width: 767px) {
  .reel { --dock: calc(76px + env(safe-area-inset-bottom)); --capH: 196px; --rf: min(calc((100vw - 24px) * 4 / 3), calc(100svh - var(--hdr) - 10px - var(--capH) - var(--dock))); }
  .reel.is-live .reel__note { display: none; }
  .reel.is-live .reel__shots, .reel.is-live .reel__fx { top: calc(var(--hdr) + 10px); bottom: auto; left: 12px; right: 12px; height: var(--rf); border-radius: 14px; overflow: hidden; }
  .reel.is-live .reel__fx { background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 28%), linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 18%); }
  .reel.is-live .reel__hud { top: calc(var(--hdr) + 24px); padding: 0 26px; }
  .reel.is-live .reel__caps { top: calc(var(--hdr) + 10px + var(--rf) + 18px); bottom: auto; gap: 10px; }
  .reel.is-live .reel__h { display: none; }
  .reel.is-live .reel__cap { grid-area: 1 / 1; }
  .reel.is-live .reel__title { font-size: clamp(21px, 6vw, 28px); margin-bottom: 8px; }
  .reel.is-live .reel__text { font-size: 15px; line-height: 1.45; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .reel.is-live .reel__cap .eyebrow { margin-bottom: 8px; font-size: 11px; }
  .reel.is-live .reel__bar { bottom: auto; top: calc(var(--hdr) + 10px + var(--rf) + 6px); left: 12px; right: 12px; }
  /* Плашка «Демо» на телефоне перекрывает контент; пометки о временных кадрах есть в самих блоках. */
  .demo-flag { display: none; }
}
/* Низкий экран телефона: текст главы прячем, остаются номер, заголовок и ссылка — кадр крупнее. */
@media (max-width: 767px) and (max-height: 720px) {
  .reel { --capH: 128px; }
  .reel.is-live .reel__text { display: none; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ───────── «Защита плёнкой»: горизонтальная лента ─────────
 * Без JS — лента со свайпом и прилипанием. С JS (.is-live) — блок закреплён, карточки едут от прокрутки. */
.hs { position: relative; background: var(--bg-2); padding: clamp(72px, 9vw, 120px) 0; }
.hs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.hs__head .lead { margin-bottom: 0; }
.hs__count { font: 600 13px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; color: var(--mute); margin: 0; white-space: nowrap; }
.hs__count b { color: var(--gold-hi); font-size: 28px; }
.hs__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hs__viewport::-webkit-scrollbar { display: none; }
.hs__track { display: flex; gap: 20px; padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); width: max-content; }
.hs__card { position: relative; flex: 0 0 auto; width: min(64vw, 820px); aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); text-decoration: none; isolation: isolate; scroll-snap-align: center; transition: transform .6s var(--ease), opacity .6s var(--ease), border-color .3s var(--ease); }
.hs__media, .hs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; color: transparent; background: #0b0c0e; }
.hs__card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,9,10,.95) 6%, rgba(8,9,10,.35) 48%, transparent 72%); }
.hs__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 36px); display: grid; gap: 8px; max-width: 640px; }
.hs__n { font: 600 12px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .14em; color: var(--gold); }
.hs__body b { font: 500 clamp(22px, 2.6vw, 34px)/1.12 var(--display); letter-spacing: -.01em; }
.hs__body > span:not(.hs__n) { color: var(--ink-2); font-size: 16px; }
.hs__bar { display: none; height: 2px; margin-top: 28px; background: rgba(255,255,255,.08); }
.hs__bar span { display: block; height: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); }

.hs.is-live { height: calc(100svh + (var(--n) - 1) * 65svh); padding: 0; }
.hs.is-live .hs__stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--hdr); overflow: hidden; }
.hs.is-live .hs__viewport { overflow: visible; scroll-snap-type: none; }
.hs.is-live .hs__track { will-change: transform; }
.hs.is-live .hs__card { width: min(64vw, calc(min(62svh, 560px) * 1.6)); height: auto; aspect-ratio: 16 / 10; opacity: .45; transform: scale(.92); }
.hs.is-live .hs__card.is-on { opacity: 1; transform: none; border-color: rgba(175,157,109,.45); }
.hs.is-live .hs__bar { display: block; }

/* ───────── конфигуратор плёнки ───────── */
.cfg__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: start; }
.cfg__stage { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #0b0c0e; }
.cfg__poster, .cfg__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cfg__canvas { opacity: 0; transition: opacity .8s var(--ease); touch-action: pan-y; cursor: grab; }
.cfg__canvas:active { cursor: grabbing; }
.cfg.is-3d .cfg__canvas { opacity: 1; }
.cfg__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(8,9,10,.7); color: var(--ink-2); font-size: 13px; pointer-events: none; opacity: 0; transition: opacity .5s; }
.cfg.is-3d .cfg__hint { opacity: 1; }
.cfg__panel { display: grid; gap: 22px; }
.cfg__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.cfg__group legend { padding: 0; margin-bottom: 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input, .swatch input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background var(--fast), border-color var(--fast), color var(--fast); }
.chip input:checked + span { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.chip input:focus-visible + span, .swatch input:focus-visible + span { outline: 2px solid var(--acc-hi); outline-offset: 3px; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.swatch { position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer; text-align: center; }
.swatch span { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.45), transparent 42%), var(--c); border: 2px solid var(--line-2); box-shadow: inset 0 -6px 12px rgba(0,0,0,.35); transition: transform var(--fast), border-color var(--fast); }
.swatch input:checked + span { border-color: var(--acc-hi); transform: scale(1.08); box-shadow: 0 0 0 3px rgba(175,157,109,.3), inset 0 -6px 12px rgba(0,0,0,.35); }
.swatch b { font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.cfg__sum { margin: 0; padding: 14px 16px; border-radius: var(--r-in); background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.cfg__cta { justify-self: start; }

/* ───────── полировка «до/после» ───────── */
.pol__frame { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #000; }
.pol__img, .pol__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pol__tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(8,9,10,.72); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.pol__tag--b { left: 14px; } .pol__tag--a { right: 14px; color: var(--acc-hi); }
.pol__pct { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(8,9,10,.72); font-size: 13px; color: var(--ink-2); }
.pol__pct b { color: var(--acc-hi); font: 600 18px/1 var(--display); margin-right: 2px; }
.pol__range { display: none; }
.pol.is-manual .pol__range { display: block; position: absolute; left: 14px; right: 14px; bottom: 56px; width: calc(100% - 28px); accent-color: var(--acc); }
.pol.is-live { height: 230svh; padding: 0; }
.pol.is-live .pol__stage { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hdr) + 16px) 0 24px; }
.pol.is-live .pol__frame { width: min(100%, calc((100svh - var(--hdr) - 250px) * 16 / 9)); margin: 0 auto; }
.pol.is-live .sec__head { margin-bottom: 20px; }
.pol.is-live .works-note { margin-top: 16px; }

/* ───────── переход «плёнка» ───────── */
.has-wipe { overflow-x: clip; }
.wipe { position: absolute; inset: 0; z-index: 4; pointer-events: none; will-change: transform;
  background: linear-gradient(180deg, rgba(7,7,7,.97), rgba(13,14,17,.94)); }
.wipe::before { content: ''; position: absolute; top: 0; bottom: 0; left: -140px; width: 140px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05) 45%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.04)); }
.wipe::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--acc-hi) 20%, var(--acc) 80%, transparent); box-shadow: 0 0 18px rgba(175,157,109,.55); }

/* ───────── финал над формой ───────── */
.sec--form { overflow: hidden; isolation: isolate; }
.form-bg { position: absolute; inset: 0; z-index: -1; }
.form-bg__media { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.form-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,7,.96) 0%, rgba(7,7,7,.82) 45%, rgba(7,7,7,.55) 100%), linear-gradient(0deg, rgba(7,7,7,.9), transparent 40%); }

@media (max-width: 900px) {
  .cfg__grid { grid-template-columns: 1fr; gap: 22px; }
  .cfg__stage { aspect-ratio: 4 / 3; }
  .hs__head { flex-direction: column; align-items: flex-start; margin-bottom: 22px; }
  .hs__card { width: 84vw; aspect-ratio: 4 / 5; }
  .hs.is-live { height: calc(100svh + (var(--n) - 1) * 55svh); }
  .hs.is-live .hs__stage { justify-content: flex-start; padding-top: calc(var(--hdr) + 18px); }
  .hs.is-live .hs__head .lead { display: none; }
  .hs.is-live .hs__card { width: min(80vw, calc(min(58svh, 520px) * .8)); height: auto; aspect-ratio: 4 / 5; }
  .hs__body b { font-size: 22px; }
  .pol.is-live { height: 200svh; }
  .pol.is-live .pol__frame { aspect-ratio: 4 / 5; width: min(100%, calc((100svh - var(--hdr) - 230px) * .8)); }
  .pol.is-live .works-note { display: none; }
  .pol.is-live .sec__head .lead { font-size: 15px; margin-bottom: 0; }
  .pol__frame { aspect-ratio: 4 / 5; }
  .form-bg__media { opacity: .35; }
  .form-bg::after { background: linear-gradient(0deg, rgba(7,7,7,.97) 30%, rgba(7,7,7,.7)); }
}
@media (max-width: 767px) and (max-height: 720px) { .hs.is-live .hs__card { width: min(80vw, calc(50svh * .8)); } }
@media (prefers-reduced-motion: reduce) { .hs__card { transition: none; } }

/* ───────── мобильная адаптация: доводка ───────── */
.nav__extra { display: none; }
.h-hero, .h1, .h2 { overflow-wrap: break-word; }
@media (max-width: 400px) { .h-hero, .h1, .h2 { -webkit-hyphens: auto; hyphens: auto; } }
/* у роликов без панели управления браузер не рисует свою кнопку «▶» */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }
.path a { display: flex; align-items: center; min-height: 44px; padding-bottom: 0; }
.reel__cap .arrow { min-height: 44px; }
.reel.is-live .reel__hud { font-size: 11px; }

@media (max-width: 900px) {
  html.menu-open { overflow: hidden; }
  /* Шапка с backdrop-filter — контейнер для fixed, поэтому высоту меню задаём от экрана, а не bottom: 0. */
  .nav { inset: var(--hdr) 0 auto; height: calc(100dvh - var(--hdr)); background: #0b0c0e; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .nav__extra { display: grid; gap: 10px; margin-top: 22px; }
  .nav__extra .btn { min-height: 52px; width: 100%; }
  .nav__tel { font: 600 22px/1.2 var(--display); text-decoration: none; padding: 6px 0 10px; }
  .reel.is-live .reel__cap .eyebrow { font-size: 12px; }
  .reel.is-live .reel__hud { font-size: 11px; }
}
/* узкие телефоны (320–380): заголовки меньше, чтобы длинные слова не вылезали */
@media (max-width: 400px) {
  .h1 { font-size: clamp(25px, 7.4vw, 30px); }
  .h2 { font-size: clamp(23px, 6.8vw, 28px); }
  .h-hero { font-size: clamp(27px, 8.2vw, 32px); }
  .hs__body b { font-size: 19px; }
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 4px; }
  .swatch span { width: 38px; height: 38px; }
  .chip span { padding: 0 13px; font-size: 14px; }
}
/* низкие экраны телефонов (iPhone SE, mini, Android с панелями): всё компактнее, кадры крупнее */
@media (max-width: 900px) and (max-height: 760px) {
  .hero__content .eyebrow { display: none; }
  .h-hero { margin-bottom: 12px; }
  .hero__lead { font-size: 15px; margin-bottom: 18px; }
  .hero__cta .btn { min-height: 46px; }
  .hero__content { padding-bottom: 86px; }
  .beats { bottom: 92px; }
  .beats b { font-size: 22px; } .beats span { font-size: 14px; }
  .beats li::before { margin-bottom: 10px; }
  .hs__body > span:not(.hs__n) { display: none; }
  .hs.is-live .hs__head .eyebrow { display: none; }
  .pol.is-live .sec__head .lead { display: none; }
  .pol.is-live .pol__frame { width: min(100%, calc((100svh - var(--hdr) - 170px) * .8)); }
}

/* ═════════ v3: реальные фото, сцены, «цветная плёнка» ═════════ */

/* сцена первого экрана: без JS — фото рядом с текстом */
.cine { position: relative; padding: calc(var(--hdr) + 24px) 0 48px; }
.cine__stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.cine__frame { position: relative; order: 2; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #000; isolation: isolate; }
.cine__layer, .cine__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine__layer { display: block; transform-origin: var(--fx) var(--fy); will-change: transform, opacity; }
.cine__img { object-position: var(--fx) var(--fy) !important; }
.cine__layer[data-layer="1"] { opacity: 0; }
.cine__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(6,7,8,.78) 0%, rgba(6,7,8,.15) 45%, transparent 70%); opacity: 0; }
.cine__beat { position: absolute; z-index: 3; left: clamp(20px, 5vw, 72px); bottom: clamp(28px, 7vh, 80px); max-width: 560px; opacity: 0; }
.cine__beat-t { font: 500 clamp(26px, 3.4vw, 46px)/1.08 var(--display); letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
.cine__beat-x { color: var(--ink-2); font-size: clamp(15px, 1.3vw, 18px); margin: 0; max-width: 46ch; }
.cine__copy { order: 1; }
.cine__copy .h-hero { font-size: clamp(32px, 4.2vw, 58px); }
.cine__hint { display: none; }

.cine.is-live { height: 300svh; padding: 0; }
.cine.is-live#usluga, .cine.is-live#studiya { height: 240svh; }
.cine.is-live .cine__stage { position: sticky; top: 0; height: 100svh; display: block; max-width: none; padding: 0; overflow: hidden; }
.cine.is-live .cine__frame { position: absolute; aspect-ratio: auto; z-index: 1; }
.cine.is-live .cine__scrim { opacity: 1; }
.cine.is-live .cine__copy { position: absolute; z-index: 2; left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); width: min(560px, calc(50vw - 64px)); top: calc(var(--hdr) + 24px); bottom: 28px; display: flex; flex-direction: column; justify-content: center; will-change: opacity, transform; }
.cine.is-live .cine__hint { display: block; position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }

.facts-sec { padding: 8px 0 0; }
.facts-sec .facts { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.facts-sec .facts div { border-top: 0; }

/* направления */
.dirs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dir { position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.dir__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.dir__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.dir:hover .dir__img { transform: scale(1.04); }
.dir__body { padding: 24px 26px 26px; display: grid; gap: 10px; align-content: start; }
.dir__n { font: 600 12px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .14em; color: var(--gold); }
.dir__t { font: 500 clamp(22px, 2.2vw, 30px)/1.15 var(--display); margin: 0; }
.dir__t a { text-decoration: none; }
.dir__body > p { margin: 0; color: var(--ink-2); }
.dir__list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dir__list a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color var(--fast), color var(--fast); }
.dir__list a:hover { border-color: var(--acc); color: var(--acc-hi); }

.why--4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 28px; }
.card__price { color: var(--gold) !important; font-weight: 600; font-size: 14px !important; }
.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 36px; }
.cat-nav a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14.5px; }
.cat-nav a:hover { border-color: var(--acc); color: var(--acc-hi); }

/* живое видео студии на странице услуги */
.live__in { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.live--v .live__in { grid-template-columns: 1.2fr .8fr; }
.live__media { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #000; }
.live__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.live--v .live__media { max-width: 400px; justify-self: center; width: 100%; }
.live--v .live__video { aspect-ratio: 9 / 16; }

/* полировка на реальном фото: «до» = то же фото тусклее + паутинка */
.pol__img--before { filter: brightness(.82) contrast(.78) saturate(.6) blur(.6px); }
.pol__haze { position: absolute; inset: 0; background-size: 420px 420px; mix-blend-mode: screen; opacity: .55; pointer-events: none; }
.pol__cap { position: absolute; right: 14px; bottom: 14px; margin: 0; padding: 6px 10px; border-radius: 999px; background: rgba(8,9,10,.7); font-size: 11.5px; color: var(--mute); }

/* галерея работ */
.gal { columns: 3 280px; column-gap: 14px; }
.gal__item { display: block; margin: 0 0 14px; break-inside: avoid; border-radius: var(--r-in); overflow: hidden; border: 1px solid var(--line); }
.gal__img { display: block; width: 100%; height: auto; transition: transform .8s var(--ease); }
.gal__item:hover .gal__img { transform: scale(1.03); }
.vids { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.vid { margin: 0; flex: 1 1 520px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #000; }
.vid--v { flex: 0 1 340px; }
.vid video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vid--v video { aspect-ratio: 9 / 16; }
.vid figcaption { padding: 12px 16px; font-size: 14px; color: var(--ink-2); }

/* мозаика студии */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.mosaic__item { margin: 0; border-radius: var(--r-in); overflow: hidden; border: 1px solid var(--line); }
.mosaic__img { width: 100%; height: 100%; object-fit: cover; }
.mosaic__item--0 { grid-column: span 2; grid-row: span 2; }
.mosaic__item--1 { grid-row: span 2; }
.mosaic__item--2 { grid-row: span 2; }
.mosaic__item--3, .mosaic__item--4 { grid-column: span 2; }

/* ───── переход «цветная плёнка» ───── */
.film-throw { position: fixed; z-index: 25; left: -20vw; top: -20vh; width: 140vw; height: 140vh; pointer-events: none; visibility: hidden; will-change: transform;
  --c1: rgba(175,157,109,.94); --c2: rgba(90,78,51,.9);
  background: linear-gradient(115deg, var(--c1) 0%, var(--c2) 55%, var(--c1) 100%);
  border-radius: 0 0 46% 12% / 0 0 18% 8%;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18); }
.film-throw i { position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent calc(var(--sheen, 50%) - 14%), rgba(255,255,255,.38) var(--sheen, 50%), transparent calc(var(--sheen, 50%) + 10%)); }
.film-throw::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px); }
.film-throw[data-c="graphite"] { --c1: rgba(34,38,26,.96); --c2: rgba(16,17,12,.94); }   /* тёмная олива */
.film-throw[data-c="champagne"] { --c1: rgba(167,85,38,.95); --c2: rgba(83,37,19,.93); }   /* медь циклорамы → кожа */
.film-throw[data-c="smoke"] { --c1: rgba(217,217,220,.95); --c2: rgba(160,160,166,.93); }   /* светлый «смаз» */

@media (max-width: 1100px) { .why--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .dirs, .live__in, .live--v .live__in { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .mosaic__item--0 { grid-column: span 2; }
  .mosaic__item--1, .mosaic__item--2 { grid-row: span 2; grid-column: auto; }
  .mosaic__item--3, .mosaic__item--4 { grid-column: span 1; }
}
@media (max-width: 767px) {
  .cine__stage { grid-template-columns: 1fr; gap: 22px; }
  .cine__frame { order: 1; aspect-ratio: 4 / 5; }
  .cine__copy { order: 2; }
  .cine.is-live { height: 240svh; }
  .cine.is-live#usluga, .cine.is-live#studiya { height: 200svh; }
  .cine.is-live .cine__copy { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); justify-content: flex-end; }
  .cine.is-live .cine__copy .eyebrow { display: none; }
  .cine__copy .h-hero { font-size: clamp(26px, 7.6vw, 34px); margin-bottom: 10px; }
  .cine.is-live .hero__lead { font-size: 15px; margin-bottom: 14px; }
  .cine.is-live .hero__cta { flex-wrap: nowrap; gap: 8px; }
  .cine.is-live .hero__cta .btn { flex: 1; min-height: 46px; padding: 0 12px; font-size: 14px; }
  .cine__beat { left: 18px; right: 18px; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .cine.is-live .cine__hint { display: none; }
  .why--4 { grid-template-columns: 1fr; }
  .gal { columns: 2 140px; column-gap: 10px; }
  .gal__item { margin-bottom: 10px; }
}
@media (max-width: 767px) and (max-height: 720px) {
  .cine.is-live .hero__lead { display: none; }
}
@media (prefers-reduced-motion: reduce) { .film-throw { display: none; } }
@media (max-width: 767px) { .cine__layer { transform-origin: var(--mfx) var(--mfy); } .cine__img { object-position: var(--mfx) var(--mfy) !important; } }

.cine__copy .crumbs { padding: 0; margin: 0 0 18px; max-width: none; font-size: 13px; }
@media (max-width: 767px) { .cine.is-live .cine__copy .crumbs { display: none; } }

/* ═════════ v4: приёмы витрины, переложенные на детейлинг ═════════ */

/* первый экран: SIBERIANPRO с видео в буквах */
.mark { position: relative; background: #000; }
.mark__stage { position: relative; min-height: 100svh; overflow: hidden; display: grid; place-items: center; }
.mark__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mark__cover { position: absolute; inset: 0; z-index: 1; background: #000; color: #fff; mix-blend-mode: multiply; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 12vh; will-change: transform, opacity; }
.mark__word { font: 600 clamp(64px, 15.5vw, 260px)/.86 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.mark__word--pro { font-weight: 400; letter-spacing: .02em; }
.mark__word b { font-weight: inherit; }
.mark__copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(28px, 8vh, 80px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.mark__h { font: 500 clamp(18px, 1.7vw, 24px)/1.3 var(--text); margin: 0; max-width: 26ch; color: var(--ink); }
.mark .hero__cta { flex-wrap: nowrap; }
.mark.is-live { height: 230svh; }
.mark.is-live .mark__stage { position: sticky; top: 0; height: 100svh; }
.mark__hint { display: block !important; }

/* бегущая строка услуг */
.marq { overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; background: var(--bg); }
.marq__track { display: flex; width: max-content; animation: marq 38s linear infinite; }
.marq__set { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.marq__set span { font: 500 clamp(30px, 4.2vw, 64px)/1 var(--display); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(242,240,234,.55); white-space: nowrap; }
.marq__set span:nth-child(4n+1) { color: var(--gold); -webkit-text-stroke: 0; }
.marq__set i { font-style: normal; color: var(--gold); font-size: 20px; }
@keyframes marq { to { transform: translateX(-50%); } }

/* направления стопкой */
.dirs--stack { grid-template-columns: 1fr; gap: 22px; perspective: 1400px; }
.dirs--stack .dir { grid-template-columns: 1.15fr 1fr; grid-template-rows: none; min-height: min(70svh, 560px); transform-origin: 50% 0; }
.dirs--stack .dir__media { aspect-ratio: auto; height: 100%; }
.dirs--stack .dir__body { padding: clamp(24px, 4vw, 56px); align-content: center; }
.dirs--stack .dir__t { font-size: clamp(28px, 3.4vw, 46px); }
.dirs--stack.is-live .dir { position: sticky; top: calc(var(--hdr) + 18px + var(--i) * 14px); will-change: transform, filter; }

/* 3D-наклон за курсором с бликом */
[data-tilt], .card { transform-style: preserve-3d; transition: transform .25s var(--ease); }
.is-tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) !important; }
.is-tilt::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.12), transparent 45%); }
.card { position: relative; }

/* параллакс фото: запас по высоте под сдвиг */
.dir__media, .mosaic__item, .live__media, .cert { overflow: hidden; }
.dir__img, .mosaic__img, .cert__img { will-change: transform; }

/* заголовки выезжают из-под маски */
.h2.reveal { clip-path: inset(0 0 100% 0); transform: translateY(30px); opacity: 1; transition: clip-path .9s var(--ease), transform .9s var(--ease); }
.h2.reveal.is-in { clip-path: inset(-10% -5% -20% -5%); transform: none; }

/* 3D-сфера работ */
.sph { position: relative; background: radial-gradient(60% 50% at 50% 50%, #15171b 0%, #0b0c0e 70%); overflow: hidden; }
.sph__stage { position: relative; min-height: min(100svh, 900px); display: grid; place-items: center; padding: calc(var(--hdr) + 10px) 0 40px; }
.sph__scene { position: relative; width: min(92vw, 900px); aspect-ratio: 1; perspective: 1400px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.sph__scene:active { cursor: grabbing; }
.sph__ball { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.sph__tile { position: absolute; left: -66px; top: -44px; width: 132px; height: 88px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; background: #111; cursor: pointer; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: border-color .2s; }
.sph__tile:hover, .sph__tile:focus-visible { border-color: var(--acc); }
.sph__tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sph__copy { position: absolute; z-index: 2; text-align: center; pointer-events: none; max-width: 520px; padding: 0 var(--gutter); }
.sph__copy .h2 { margin: 0 auto 12px; text-shadow: 0 4px 30px rgba(0,0,0,.9); }
.sph__copy .lead { margin: 0 auto 18px; text-shadow: 0 2px 16px rgba(0,0,0,.9); }
.sph__copy .btn { pointer-events: auto; background: rgba(7,7,7,.6); }
.sph__hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.sph__box { position: fixed; inset: 0; z-index: 60; background: rgba(5,6,7,.92); display: grid; place-items: center; padding: 20px; }
.sph__box[hidden] { display: none; }
.sph__box figure { margin: 0; max-width: min(1100px, 100%); }
.sph__box img { max-width: 100%; max-height: 80svh; border-radius: 12px; display: block; }
.sph__box figcaption { margin-top: 12px; color: var(--ink-2); text-align: center; }
.sph__close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: #0b0c0e; color: var(--ink); font-size: 18px; cursor: pointer; }
.sph.is-static .sph__ball { transform: rotateX(-10deg) rotateY(20deg); }

/* «Фактура и цвет»: живое видео + подкраска */
.cfg__stage--video { aspect-ratio: auto; max-width: 420px; justify-self: center; width: 100%; }
.cfg__video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.cfg__tint { position: absolute; inset: 0; mix-blend-mode: color; opacity: .42; pointer-events: none; transition: background .4s; }
.cfg__tint[data-finish="matte"] { opacity: .5; }
.cfg__stage--video:has(.cfg__tint[data-finish="matte"]) .cfg__video { filter: contrast(.85) saturate(.9); }

@media (max-width: 900px) {
  .dirs--stack .dir { grid-template-columns: 1fr; min-height: 0; }
  .dirs--stack .dir__media { aspect-ratio: 16 / 10; height: auto; }
  .dirs--stack .dir__body { padding: 20px 20px 24px; }
  .dirs--stack .dir__body > p { font-size: 15px; }
}
@media (max-width: 767px) {
  .mark__copy { flex-direction: column; align-items: stretch; bottom: calc(88px + env(safe-area-inset-bottom)); }
  .mark__h { font-size: 17px; }
  .mark .hero__cta .btn { flex: 1; min-height: 48px; padding: 0 10px; font-size: 14px; }
  .mark__cover { padding-bottom: 22vh; }
  .mark__word { font-size: 17vw; }
  .sph__tile { left: -42px; top: -28px; width: 84px; height: 56px; border-radius: 6px; }
  .sph__scene { width: 100vw; }
  .sph__copy .h2 { font-size: 24px; }
  .sph__copy .lead { font-size: 14px; }
  .cfg__stage--video { max-width: 300px; }
  .marq { padding: 16px 0; }
  .dirs--stack.is-live .dir { top: calc(var(--hdr) + 10px + var(--i) * 10px); }
  .dirs--stack .dir__list a { min-height: 40px; font-size: 13px; }
}
@media (max-width: 767px) and (max-height: 720px) { .dirs--stack .dir__body > p { display: none; } }
@media (prefers-reduced-motion: reduce) { .marq__track { animation: none; } .h2.reveal { clip-path: none; transform: none; } }

/* iOS: кнопка «▶» поверх видео без панели управления — прячем (видео запускает скрипт) */
video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.sph__tile { background: #1a1c20; }

/* узкие телефоны: кнопки первого экрана и сцен — друг под другом, текст не обрезается */
@media (max-width: 380px) {
  .mark .hero__cta, .cine.is-live .hero__cta { flex-direction: column; flex-wrap: nowrap; }
  .mark .hero__cta .btn, .cine.is-live .hero__cta .btn { width: 100%; flex: none; }
}

/* ═════════ цены и калькулятор ═════════ */
.price__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); -webkit-overflow-scrolling: touch; }
.price__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.price__table th, .price__table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.price__table thead th { background: var(--bg-3); font-weight: 600; color: var(--mute); }
.price__table thead th b { display: block; font: 600 20px/1 var(--display); color: var(--ink); }
.price__table thead th span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.price__table tbody th { text-align: left; font-weight: 600; white-space: normal; min-width: 220px; }
.price__table tbody th small { display: block; color: var(--mute); font-weight: 500; font-size: 12.5px; }
.price__table tbody tr:hover td, .price__table tbody tr:hover th { background: rgba(175,157,109,.06); }
.price__table thead th:first-child { text-align: left; }
.price__table tbody tr:last-child > * { border-bottom: 0; }
.price__foot { display: grid; gap: 10px; justify-items: start; margin-top: 18px; }
.price__demo { margin: 0; padding: 10px 14px; border: 1px dashed rgba(175,157,109,.6); border-radius: var(--r-in); color: var(--gold-hi); font-size: 14px; }

.calc-head { padding-bottom: 12px; }
.calc { padding: 12px 0 clamp(64px, 8vw, 110px); }
.calc__grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.calc__step { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin: 0 0 18px; min-width: 0; background: var(--bg-2); }
.calc__step legend { display: flex; align-items: center; gap: 12px; padding: 0 8px; font: 500 20px/1.2 var(--display); }
.calc__step legend span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); font: 700 15px/1 var(--text); }
.calc__car { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.calc__label { margin: 4px 0 10px; font-weight: 600; }
.calc__classes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.calc__class input { position: absolute; opacity: 0; pointer-events: none; }
.calc__class span { display: grid; gap: 6px; height: 100%; padding: 12px 10px; border: 1px solid var(--line-2); border-radius: var(--r-in); cursor: pointer; transition: border-color var(--fast), background var(--fast); }
.calc__class b { font: 600 22px/1 var(--display); }
.calc__class em { font-style: normal; font-size: 12px; color: var(--mute); line-height: 1.3; }
.calc__class input:checked + span { border-color: var(--acc); background: rgba(175,157,109,.12); }
.calc__class input:focus-visible + span { outline: 2px solid var(--acc-hi); outline-offset: 2px; }
.calc__group { border-top: 1px solid var(--line); }
.calc__group:first-child { border-top: 0; }
.calc__group summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; font: 500 17px/1.2 var(--display); list-style: none; }
.calc__group summary::-webkit-details-marker { display: none; }
.calc__group summary::after { content: '+'; color: var(--acc); font-size: 22px; margin-left: 12px; }
.calc__group[open] summary::after { content: '−'; }
.calc__badge { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font: 700 13px/24px var(--text); text-align: center; }
.calc__badge:empty { display: none; }
.calc__svc { padding: 4px 0 14px; }
.calc__svc-t { margin: 6px 0 6px; color: var(--gold); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.calc__item { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: var(--r-in); cursor: pointer; }
.calc__item:hover { background: rgba(255,255,255,.03); }
.calc__item input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--acc); }
.calc__item-n small { color: var(--mute); }
.calc__item-p { font-weight: 600; white-space: nowrap; color: var(--ink-2); }
.calc__qty { width: 64px; min-height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); padding: 0 8px; }
.calc__sum { position: sticky; top: calc(var(--hdr) + 16px); border: 1px solid rgba(175,157,109,.45); border-radius: var(--r); padding: 24px; background: linear-gradient(160deg, rgba(175,157,109,.1), transparent 60%), var(--bg-2); display: grid; gap: 10px; }
.calc__sum-k { margin: 0; color: var(--mute); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.calc__sum-v { margin: 0; font: 600 clamp(26px, 2.4vw, 34px)/1.15 var(--display); }
.calc__sum-car { margin: 0; font: 400 clamp(17px, 1.5vw, 20px)/1.3 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.calc__sum-n { margin: 0; }
.calc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 240px; overflow: auto; font-size: 14px; color: var(--ink-2); }
.calc__list li { padding-left: 14px; position: relative; }
.calc__list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.calc__send { width: 100%; white-space: normal; text-align: center; }
.calc__send:disabled { opacity: .45; cursor: not-allowed; }

.calc-teaser__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.calc-teaser__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.calc-teaser__steps li { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.calc-teaser__steps b { font: 600 22px/1 var(--display); color: var(--gold); }

@media (max-width: 1000px) { .calc__grid { grid-template-columns: 1fr; } .calc__classes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .calc-teaser__in { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 1000px) {
  /* телефон и планшет: итог — плашкой над нижней панелью связи */
  .calc__sum { position: fixed; z-index: 27; left: 0; right: 0; top: auto; bottom: calc(66px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; padding: 12px 16px; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; background: rgba(43,36,30,.97); color: #f5efe7; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .calc__sum > :not(.calc__sum-car):not(.calc__send):not(.calc__sum-n) { display: none; }
  /* заявка: сверху машина и число услуг, снизу кнопка во всю ширину */
  .calc__sum { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px 12px !important; }
  .calc__sum-car { grid-column: 1; grid-row: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .calc__sum .calc__sum-n { grid-column: 2 !important; grid-row: 1 !important; white-space: nowrap; font-size: 12.5px; }
  .calc__sum-n { grid-column: 1; grid-row: 2; }
  .calc__send { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; min-height: 44px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
  .calc { padding-bottom: 170px; }
  .calc__sum .calc__sum-n { color: #c9bcab; }
  .calc__sum .calc__send { background: #f5efe7; border-color: #f5efe7; color: #261f1a; }
}
@media (max-width: 560px) { .calc__car { grid-template-columns: 1fr; } .calc__classes { grid-template-columns: 1fr 1fr; } .calc__step { padding: 16px 14px; } .calc__item { grid-template-columns: 22px 1fr auto; } .calc__item .calc__qty { grid-column: 2; grid-row: 2; } .calc__item-p { grid-column: 3; grid-row: 1; } }
@media (min-width: 901px) { .dock-m { display: none; } }
@media (min-width: 901px) and (max-width: 1000px) { .calc__sum { bottom: 0; } }
.price__hint { display: none; margin: 0 0 8px; font-size: 13px; color: var(--mute); }
@media (max-width: 760px) { .price__hint { display: block; } }

/* ═════════ главная: «Капля → слои лака» ═════════ */
.drop { position: relative; background: #070707; }
.drop__stage { position: relative; overflow: hidden; }
.drop__world { position: relative; height: 92svh; transform-origin: 50% 50%; will-change: transform, opacity; }
.drop__frame { position: absolute; inset: 0 0 0 36%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.drop__photo, .drop__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 27% !important; }
.drop__world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,6,7,.82) 0%, rgba(5,6,7,.35) 42%, transparent 65%), linear-gradient(0deg, rgba(5,6,7,.6), transparent 35%); pointer-events: none; }
.drop__macro { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: radial-gradient(80% 70% at 50% 45%, #1d2026 0%, #0a0b0d 70%), #050607; }
.drop__macro::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px); }
.drop__layers { position: relative; padding: 40px var(--gutter) 60px; max-width: 1300px; margin: 0 auto; }
.drop__lt { text-align: left; }
.drop__svg { display: block; width: 100%; height: auto; overflow: visible; }
.lay__top, .lay__side { stroke: rgba(255,255,255,.18); stroke-width: 1; }
.lay__drop { fill: rgba(220,240,255,.55); stroke: rgba(255,255,255,.7); stroke-width: 1.5; }
.lay__drop-hi { fill: rgba(255,255,255,.9); }
.lay__label line { stroke: var(--gold); stroke-width: 2; }
.lay__n { fill: var(--ink); font: 600 34px var(--display); letter-spacing: -.01em; }
.lay__m { fill: var(--gold); font: 500 24px var(--text); }
.lay__d { fill: var(--ink-2); font: 500 22px var(--text); }
.lay__label a:hover .lay__n { fill: var(--acc-hi); }
.drop__copy { position: absolute; z-index: 3; left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); top: calc(var(--hdr) + 24px); height: calc(92svh - var(--hdr) - 48px); width: min(600px, 52vw); display: flex; flex-direction: column; justify-content: center; }
.drop__copy .h-hero { font-size: clamp(32px, 4.2vw, 58px); }
.drop__beat { display: none; }
.drop__hint { display: none; }

.drop.is-live { height: 460svh; }
.drop.is-live .drop__stage { position: sticky; top: 0; height: 100svh; }
.drop.is-live .drop__world { position: absolute; inset: 0; height: auto; }
.drop.is-live .drop__layers { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--hdr) + 10px); padding-bottom: 20px; opacity: 0; }
.drop.is-live .drop__svg { max-height: calc(100svh - var(--hdr) - 90px); }
.drop.is-live .drop__copy { height: auto; bottom: 28px; }
.drop.is-live .drop__beat { display: block; position: absolute; z-index: 3; left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); bottom: clamp(40px, 10vh, 110px); max-width: 560px; opacity: 0; pointer-events: none; }
.drop.is-live .drop__beat--c { left: 0; right: 0; bottom: auto; top: 50%; margin: -40px auto 0; text-align: center; max-width: 900px; padding: 0 var(--gutter); }
.drop__bt { font: 500 clamp(26px, 3.2vw, 44px)/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 10px; text-wrap: balance; text-shadow: 0 4px 30px rgba(0,0,0,.8); }
.drop__bt--xl { font-size: clamp(32px, 5.4vw, 76px); }
.drop__bx { margin: 0; color: var(--ink-2); font-size: clamp(15px, 1.3vw, 18px); text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.drop.is-live .drop__hint { display: block; position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; }

/* направления с ценами */
.dirp__in { display: grid; grid-template-columns: .8fr 2fr; gap: 40px; align-items: start; }
.dirp__aside { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 14px; }
.dirp__aside .lead { margin: 0; }
.dirp__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.dirp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dirp__card { position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.dirp__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.dirp__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.dirp__card:hover .dirp__img { transform: scale(1.05); }
.dirp__body { padding: 20px 22px 22px; display: grid; gap: 12px; align-content: start; }
.dirp__t { margin: 0; font: 500 clamp(21px, 1.8vw, 26px)/1.15 var(--display); }
.dirp__t a { text-decoration: none; }
.dirp__list { list-style: none; margin: 0; padding: 0; display: grid; }
.dirp__list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.dirp__list a { text-decoration: none; color: var(--ink-2); }
.dirp__list a:hover { color: var(--acc-hi); }
.dirp__list span { white-space: nowrap; font-weight: 700; color: var(--ink); }

@media (max-width: 1000px) { .dirp__in { grid-template-columns: 1fr; } .dirp__aside { position: static; } }
@media (max-width: 767px) {
  .drop__world { height: 82svh; }
  .drop__frame { inset: 0; -webkit-mask-image: none; mask-image: none; }
  .drop__img { object-position: 50% 34% !important; }
  .drop__world::after { background: linear-gradient(0deg, rgba(5,6,7,.95) 18%, rgba(5,6,7,.4) 52%, transparent 75%); }
  .drop__copy { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); height: auto; justify-content: flex-end; }
  .drop.is-live .drop__copy { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .drop__copy .eyebrow { display: none; }
  .drop__copy .h-hero { font-size: clamp(26px, 7.6vw, 34px); margin-bottom: 10px; }
  .drop__copy .hero__lead { font-size: 15px; margin-bottom: 14px; }
  .drop.is-live { height: 400svh; }
  .drop.is-live .drop__beat { left: var(--gutter); right: var(--gutter); bottom: calc(100px + env(safe-area-inset-bottom)); }
  .drop.is-live .drop__hint { display: none; }
  .drop__svg { --s: 1; }
  .lay__d { display: none; }
  .lay__n { font-size: 46px; }
  .lay__m { font-size: 34px; }
  .dirp__grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) { .drop__copy .hero__cta { flex-direction: column; } .drop__copy .hero__cta .btn { width: 100%; } }
@media (max-width: 767px) and (max-height: 720px) { .drop__copy .hero__lead { display: none; } }

/* ═════════ стиль соцсетей (12.10.2026): марка в центре кадра, серии машин, рифлёное стекло, смаз движения ═════════ */
/* заголовки разделов въезжают со смазом, по низу проносится световая полоса */
.reveal .h2 { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .reveal:not(.is-in) .h2 { opacity: 0; }
  .reveal.is-in .h2 { animation: speed-in 1s var(--ease) both; }
  .reveal .h2::after { content: ''; position: absolute; left: 0; bottom: -.12em; width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold) 55%, #fff); box-shadow: 0 0 14px var(--acc-glow); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
  .reveal.is-in .h2::after { animation: tail-light 1.2s var(--ease) .08s both; }
}
@keyframes speed-in { from { opacity: 0; filter: blur(12px); transform: translateX(-56px) scaleX(1.12); transform-origin: 0 50%; } 55% { filter: blur(2px); } }
@keyframes tail-light { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1) translateX(18%); opacity: 0; } }

/* марки — ряды как в мудборде: белое полотно, тонкие белые просветы, вертикальная марка на полосе */
.sr-only { position: absolute; width: 0; height: 0; overflow: hidden; }
.ser-sec { background: var(--paper); color: #0a0a0a; }
.ser-sec .h2 { color: #0a0a0a; } .ser-sec .lead { color: #44423f; } .ser-sec .arrow { color: #8f7b4c; }
.ser__head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; align-items: end; margin-bottom: 40px; }
.ser__head .eyebrow { grid-column: 1 / -1; margin: 0; }
.ser__head .h2, .ser__head .lead { margin: 0; }
.ser { display: grid; gap: 8px; }
.ser__row { display: grid; gap: 8px; height: clamp(440px, 50vw, 760px); }
.ser__row--A { grid-template-columns: 1fr 1fr 54px 1fr; }
.ser__row--B { grid-template-columns: 1fr 1fr 1fr; }
.ser__row--C { grid-template-columns: 1fr 1fr 54px 1fr; }
.ser__t { position: relative; margin: 0; overflow: hidden; background: #0a0a0a; min-height: 0; }
.ser__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 900ms var(--ease); }
.ser__t:hover .ser__img { transform: scale(1.035); }
.ser__stack { display: grid; grid-auto-rows: 1fr; gap: 8px; min-height: 0; }
.ser__strip { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6px 0; color: #0a0a0a; }
.ser__strip span { writing-mode: vertical-rl; transform: rotate(180deg); font: 300 clamp(15px, 1.4vw, 21px)/1 var(--display); letter-spacing: .55em; white-space: nowrap; }
.ser__strip small { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: #8c8a86; white-space: nowrap; }
/* «смаз движения», пока нет кадра из ChatGPT: фото уезжает в светлый туман; навели — машина останавливается */
.ser__fx-blur { background: var(--fog); }
.ser__fx-blur .ser__img { filter: url(#mblur) grayscale(1) contrast(1.25) brightness(1.08); transform: scale(1.12); }
.ser__fx-blur::after { content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity 900ms var(--ease);
  background: linear-gradient(180deg, rgba(244,243,241,.9) 0%, rgba(217,217,220,.35) 38%, transparent 60%), linear-gradient(90deg, transparent 35%, rgba(216,38,28,.0) 0); }
.ser__fx-blur:hover .ser__img { filter: none; transform: scale(1.02); }
.ser__fx-blur:hover::after { opacity: 0; }
/* «рифлёное стекло» — статичная плитка, как в мудборде (без реакции на мышь) */
.ser__glass .ser__img { filter: blur(10px) sepia(1) saturate(4) hue-rotate(-18deg) brightness(.85); transform: scale(1.1); }
.ser__glass::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 8px, rgba(0,0,0,.25) 14px 16px); pointer-events: none; }
.ser__more { margin: 28px 0 0; text-align: right; }
.gal-sec .ser { margin-bottom: 8px; }
.car-works { align-items: center; margin: 4px 0 24px; }
.car-works a { text-decoration: none; }
.car-works__k { margin-right: 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.car-works > span:not(.car-works__k) { display: inline-flex; min-height: 42px; align-items: center; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14.5px; font-weight: 600; }
.gal-sec { background: var(--paper); color: #0a0a0a; }
.gal-sec .h2 { color: #0a0a0a; }
.gal-sec.sec--dark { background: #ebeae7; }
@media (max-width: 767px) {
  .ser__head { grid-template-columns: 1fr; }
  .ser, .ser__row, .ser__stack { gap: 6px; }
  .ser__row--A, .ser__row--C { grid-template-columns: 1fr 1fr; grid-template-rows: auto 320px auto; height: auto; }
  .ser__row--A > :nth-child(4) { height: 300px; }
  .ser__strip { grid-column: 1 / -1; grid-row: 1; flex-direction: row; justify-content: space-between; padding: 8px 2px; }
  .ser__strip span, .ser__strip small { writing-mode: horizontal-tb; transform: none; }
  .ser__strip span { font-size: 15px; letter-spacing: .45em; }
  .ser__row--A > :nth-child(1) { grid-row: 2; } .ser__row--A > .ser__stack { grid-row: 2; }
  .ser__row--A > :nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .ser__row--C > :nth-child(1), .ser__row--C > :nth-child(2) { grid-row: 2; }
  .ser__row--C > .ser__stack { grid-column: 1 / -1; grid-row: 3; grid-auto-rows: auto; }   /* кадры циклорамы горизонтальные — друг под другом во всю ширину */
  .ser__row--C > .ser__stack .ser__t { aspect-ratio: 16 / 9; }
  .ser__row--B { grid-template-columns: 1fr 1fr; grid-template-rows: 340px 240px; height: auto; }
  .ser__row--B > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .ser__row--B > :nth-child(1), .ser__row--B > :nth-child(3) { grid-row: 2; }
  .ser__more { text-align: left; }
}
/* марка у кадра: белая полоса с вертикальной надписью (карточки, направления) */
.card__media, .dirp__media { position: relative; display: block; }
.card__media { overflow: hidden; }
.brand-tag { position: absolute; top: 0; right: 0; bottom: 0; width: 30px; display: flex; align-items: center; justify-content: center; background: #f2f1ee; color: #0b0c0e;
  writing-mode: vertical-rl; transform: rotate(180deg); font: 400 10px/1 var(--display); letter-spacing: .34em; white-space: nowrap; overflow: hidden; pointer-events: none; }
/* галерея «Работ»: кадр в белой рамке, на рамке — марка */
.gal-sec .gal__item { border: 0; border-radius: 0; background: #f2f1ee; padding: 8px 8px 0; color: #0b0c0e; text-decoration: none; }
.gal__brand { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 36px; padding: 0 2px; }
.gal__brand b { font: 400 12px/1 var(--display); letter-spacing: .42em; }
.gal__brand span { font-size: 11.5px; color: #6d7076; letter-spacing: .04em; }
/* кнопка звука у видео студии */
.has-snd { position: relative; }
.snd { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  background: rgba(8,9,11,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 600 13.5px/1 var(--text); cursor: pointer; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.snd:hover { border-color: var(--gold-hi); }
.snd[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.snd .snd__w { display: none; } .snd[aria-pressed="true"] .snd__w { display: inline; } .snd[aria-pressed="true"] .snd__x { display: none; }
.vid.has-snd .snd { bottom: 58px; }
@media (max-width: 767px) {
  .gal-sec .gal__item { padding: 6px 6px 0; }
  .gal__brand { height: 30px; }
  .gal__brand b { font-size: 10.5px; letter-spacing: .3em; }
  .gal__brand span { display: none; }
}

/* заявка — на медной циклораме, как машины на оранжевом фоне в мудборде */
.sec--form { background: radial-gradient(75% 60% at 72% 42%, #d8692f 0%, var(--copper) 36%, #4a200c 70%, #120703 100%); }
.sec--form .form-bg__media { opacity: .16; mix-blend-mode: multiply; filter: grayscale(1); }
.sec--form .form-bg::after { background: linear-gradient(90deg, rgba(7,7,7,.88) 0%, rgba(7,7,7,.5) 42%, rgba(7,7,7,0) 75%), linear-gradient(0deg, rgba(7,7,7,.55), transparent 32%); }
.sec--form .lead-form { background: rgba(7,7,7,.92); border-color: rgba(255,255,255,.1); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
/* подвал — тёмная олива из мудборда */
.ftr { background: linear-gradient(180deg, #0d0e09, #15170f); }
@media (max-width: 767px) {
  .sec--form { background: radial-gradient(120% 50% at 50% 18%, #d8692f 0%, var(--copper) 34%, #4a200c 68%, #120703 100%); }
  .sec--form .form-bg::after { background: linear-gradient(0deg, rgba(7,7,7,.85) 35%, rgba(7,7,7,.2)); }
}

/* открытие «Капля»: холст WebGL на весь экран (main.js → initDrop); ролик Hailuo — только источник кадров */
.drop__gl { display: none; }
.drop.has-gl .drop__gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.drop.has-gl .drop__world { visibility: hidden; }
.drop__intro { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

/* ═════════ «кино по прокрутке»: сцены из роликов Hailuo (main.js → initFilm) ═════════
 * Без JS и при reduced-motion — обычный блок с постером и подписями. */
.film { position: relative; background: var(--choc-0); }
.film__stage { position: relative; min-height: 100svh; overflow: hidden; }
.film__media { position: absolute; inset: 0; }
.film__v { width: 100%; height: 100%; object-fit: cover; display: block; }
/* пока кадр видео не отрисован (iOS до первого касания, медленная сеть) — виден постер; видео проявляется после первой перемотки */
.film__media { background-color: var(--choc-0); background-position: center; background-size: cover; background-repeat: no-repeat; }
.film.is-live .film__v { opacity: 0; transition: opacity .3s ease; }
.film.is-live.is-painted .film__v { opacity: 1; }
.film--v .film__media { left: 38%; }
/* мягкий край ролика — затемнением поверх, а не маской: Safari плохо рисует mask-image на видео */
.film__media::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.film--v .film__media::before { background: linear-gradient(90deg, var(--choc-0) 0%, rgba(30,25,21,0) 26%); }
.film__beats { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-top: var(--hdr); }
.film__beat { max-width: 520px; }
.film__t { font: 500 clamp(28px, 3.4vw, 50px)/1.08 var(--display); letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; text-shadow: 0 4px 30px rgba(0,0,0,.7); }
.film__x { margin: 0 0 16px; color: var(--ink-2); font-size: clamp(15px, 1.3vw, 18px); max-width: 44ch; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.film--h .film__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,25,21,.78) 0%, rgba(30,25,21,.22) 45%, transparent 70%); }
.film__bar, .film__fade { display: none; }
/* живой режим: экран встаёт, ролик проматывается, полосы и затемнения */
.film.is-live { height: var(--len); }
.film.is-live .film__stage { position: sticky; top: 0; height: 100svh; }
.film.is-live .film__beats { position: absolute; inset: 0; left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); right: auto; width: min(560px, 46vw); padding: 0; }
.film.is-live .film__beat { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; }
.film.is-live .film__beat.is-on { pointer-events: auto; }
.film.is-live .film__bar { display: block; position: absolute; left: 0; right: 0; z-index: 3; height: 9vh; background: var(--choc-0); transform: scaleY(0); }
.film__bar--t { top: 0; transform-origin: 50% 0; } .film__bar--b { bottom: 0; transform-origin: 50% 100%; }
.film.is-live .film__fade { display: block; position: absolute; inset: 0; z-index: 4; background: var(--choc-0); pointer-events: none; }
@media (max-width: 767px) {
  .film--v .film__media { left: 0; }
  .film--v .film__media::before { background: none; }
  .film__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30,25,21,.93) 8%, rgba(30,25,21,.38) 42%, transparent 62%); }
  .film.is-live .film__beats { left: var(--gutter); right: var(--gutter); width: auto; }
  .film.is-live .film__beat { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); transform: none; }
  .film__t { font-size: clamp(24px, 7vw, 32px); }
  .film.is-live .film__bar { height: 5vh; }
  .film .hero__cta { flex-direction: column; gap: 8px; }
  /* горизонтальный ролик (медная циклорама) на телефоне — машина целиком сверху, вокруг тот же медный фон */
  .film--h .film__media { background-position: 50% 30%; background-size: 125% auto; background-color: transparent; }
  .film--h .film__stage { background: radial-gradient(120% 60% at 50% 35%, #6b5747 0%, #4b3e33 35%, #2b241e 75%, var(--choc-0) 100%); }
  .film--h .film__v { object-fit: contain; object-position: 50% 30%; transform: scale(1.25); transform-origin: 50% 30%; }
  .film .hero__cta .btn { width: 100%; min-height: 48px; }
}

/* открытие сайта роликом «Капля»: первая подпись — H1 и кнопки */
.film--hero .film__beat--h1 { max-width: 600px; }
/* компьютер: вертикальный ролик капли целиком (капля сверху не обрезается), по бокам — чёрный фон самого ролика */
@media (min-width: 768px) {
  .film--hero .film__media { left: auto; right: max(0px, calc((100vw - var(--wrap)) / 2)); width: min(57.14svh, 56vw); }
  .film--hero .film__media { background-size: cover; }
  .film--hero .film__media::before { background: linear-gradient(90deg, var(--choc-0) 0%, rgba(30,25,21,0) 16%, rgba(30,25,21,0) 84%, var(--choc-0) 100%); }
}
.film--hero .film__beat--h1 .h-hero { font-size: clamp(32px, 4.2vw, 58px); }
.film.is-live .film__hint { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; }
.film:not(.is-live) .film__hint { display: none; }
.drop--static { background: var(--choc-0); }
.drop--static .drop__svg { max-height: 86svh; }
@media (max-width: 767px) {
  .film--hero .film__beat--h1 .h-hero { font-size: clamp(26px, 7.6vw, 34px); margin-bottom: 10px; }
  .film--hero .film__beat--h1 .eyebrow { display: none; }
  .film--hero .film__beat--h1 .hero__lead { font-size: 15px; margin-bottom: 14px; }
  .film.is-live .film__hint { display: none; }
}
@media (max-width: 767px) and (max-height: 720px) { .film--hero .film__beat--h1 .hero__lead { display: none; } }


/* ═════════════════ v10 · стиль сертификата (15.10.2026) ═════════════════ */
/* тёмные зоны: видео, киносцены, подвал. Внутри — прежняя тёмная палитра, золото логотипа */
.dk, .film, .drop, .cine, .reel, .sph, .ftr, .pol, .cfg, .hs, .live {
  --bg: var(--choc); --bg-2: var(--choc-2); --bg-3: var(--choc-3); --line: rgba(255,240,222,.12); --line-2: rgba(255,240,222,.22);
  --ink: #f5efe7; --ink-2: #ddd2c4; --mute: #b0a291; --gold: #b9a676; --gold-hi: #d3c49b; --gold-ink: #261f1a;
  --acc: #f5efe7; --acc-hi: #ffffff; --acc-ink: #261f1a; --acc-glow: rgba(244,241,236,.2);
  color: var(--ink); color-scheme: dark;
}
.ftr, .reel, .sph, .pol, .cfg, .hs, .live { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }

/* типографика сертификата: тонкий широкий шрифт заглавными, подпись от руки */
.h-hero, .h1, .h2, .h3, .film__t, .drop__bt, .vband__t, .card__body b, .dirp__t, .steps li b, .calc__step legend {
  font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: .06em;
}
.h-hero { font-size: clamp(30px, 4.2vw, 58px); line-height: 1.08; }
.h1 { font-size: clamp(28px, 3.8vw, 50px); line-height: 1.1; }
.h2 { font-size: clamp(24px, 2.8vw, 38px); line-height: 1.15; max-width: 26ch; }
.h3, .card__body b { font-size: clamp(16px, 1.4vw, 19px); letter-spacing: .08em; font-weight: 400; }
.h-hero .gold, .h1 .gold { color: var(--gold-hi); font-weight: 500; }
.eyebrow { font-family: var(--display); font-weight: 500; letter-spacing: .28em; color: var(--gold); }
.eyebrow::before { content: ''; display: inline-block; width: 34px; height: 1px; margin-right: 14px; vertical-align: middle; background: currentColor; opacity: .7; }
.lead, .prose p { color: var(--ink-2); }

/* кнопки: графитовая капсула на бумаге, светлая — на тёмном */
.btn { font-family: var(--display); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.btn--lg { font-size: 13.5px; }
.btn--gold::before { background: linear-gradient(105deg, transparent 35%, rgba(175,157,109,.55) 50%, transparent 65%); }
.btn--line { border-color: var(--line-2); color: var(--ink); }
.btn--line:hover { border-color: var(--gold-hi); color: var(--gold); }
.arrow { color: var(--gold); letter-spacing: .04em; }

/* шапка — бумага, логотип графитом */
.hdr { background: rgba(236,232,225,.9); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.hdr.is-solid, .hdr.is-open { background: rgba(236,232,225,.96); border-color: var(--line); }
.hdr__logo img { height: 22px; }
.nav__link { color: var(--ink-2); font-family: var(--display); font-weight: 500; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.nav__link:hover { color: var(--gold); }
.hdr__tel { color: var(--ink); }
.hdr__burger { border-color: var(--line-2); }
.hdr__burger span { background: var(--ink); }
.demo-flag { background: rgba(236,232,225,.92); border-color: var(--line-2); color: var(--ink-2); }
@media (max-width: 900px) {
  .nav { background: var(--bg) !important; }
  .dock-m { background: rgba(236,232,225,.96) !important; border-top: 1px solid var(--line) !important; }
  .dock-m__btn { color: var(--ink) !important; border-color: var(--line-2) !important; background: transparent !important; }
  .dock-m__btn--gold { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; }
}

/* вступление-сертификат */
.cert-sec { background: var(--bg); padding-top: clamp(80px, 10vw, 140px); }
.cert { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: center; }
.cert__brand { margin: 0; font: 300 clamp(34px, 5vw, 72px)/1 var(--display); letter-spacing: .14em; color: var(--ink); }
.cert__brand b { font-weight: 600; }
.cert__sub { margin: 14px 0 44px; font: 500 12px/1.4 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }
.cert__h { margin: 0 0 22px; font: 300 clamp(20px, 2vw, 28px)/1.35 var(--display); letter-spacing: .02em; max-width: 30ch; }
.cert__p { margin: 0 0 18px; color: var(--ink-2); max-width: 54ch; }
.cert__sign { margin: 8px 0 40px; font: 400 clamp(30px, 3.2vw, 44px)/1 var(--script); color: var(--ink); transform: rotate(-4deg); transform-origin: 0 50%; }
.cert__sign::after { content: ''; display: block; width: 260px; max-width: 70%; height: 1px; margin-top: 10px; background: linear-gradient(90deg, var(--ink), transparent); }
.cert__facts { display: grid; grid-template-columns: repeat(3, auto); gap: 0; margin: 0; border-top: 1px solid var(--line-2); }
.cert__facts div { padding: 18px 22px 0 0; margin-right: 22px; border-right: 1px solid var(--line-2); }
.cert__facts div:last-child { border-right: 0; }
.cert__facts dt { font: 300 26px/1 var(--display); letter-spacing: .04em; }
.cert__facts dd { margin: 8px 0 0; font-size: 13px; color: var(--mute); max-width: 18ch; }
.cert__words { list-style: none; margin: 0; padding: 8px 0 8px 34px; border-left: 1px solid var(--ink); display: grid; gap: 22px; align-self: center; }
.cert__words a { font: 400 clamp(15px, 1.4vw, 19px)/1 var(--display); letter-spacing: .32em; text-transform: uppercase; text-decoration: none; color: var(--ink); transition: color var(--fast), letter-spacing .5s var(--ease); }
.cert__words a:hover { color: var(--gold); letter-spacing: .38em; }
@media (max-width: 900px) {
  .cert { grid-template-columns: 1fr; gap: 40px; }
  .cert__facts { grid-template-columns: 1fr 1fr 1fr; }
  .cert__facts div { padding-right: 10px; margin-right: 10px; }
  .cert__facts dt { font-size: 20px; }
  .cert__facts dd { font-size: 12px; }
}

/* видео-фон: затемнённое видео работ (услуги, направления) */
.vbg { position: absolute; inset: 0; overflow: hidden; background: var(--choc); }
.vbg__v { width: 100%; height: 100%; object-fit: cover; display: block; }
.vbg__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43,36,30,.9) 0%, rgba(43,36,30,.66) 42%, rgba(43,36,30,.42) 100%), linear-gradient(0deg, rgba(43,36,30,.85), transparent 45%); }
.hud { position: absolute; z-index: 2; top: calc(var(--hdr) + 26px); left: 0; right: 0; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 28px; font: 500 11.5px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .18em; color: rgba(244,241,236,.7); pointer-events: none; }
.hud__rec { color: #e2735a; display: inline-flex; align-items: center; gap: 8px; }
.hud__rec i { width: 8px; height: 8px; border-radius: 50%; background: #e2735a; animation: reel-rec 1.6s ease-in-out infinite; }
.hud b { color: #fff; font-weight: 600; }
.hud__n { margin-left: auto; }

/* страница услуги: первый экран — видео работ */
.vhero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--choc); }
.vhero__in { position: relative; z-index: 2; padding-top: calc(var(--hdr) + 90px); padding-bottom: clamp(40px, 7vh, 80px); }
.vhero .crumbs { padding-top: 0; margin-bottom: 26px; color: rgba(244,241,236,.6); }
.vhero .crumbs a { color: rgba(244,241,236,.6); }
.vhero .h-hero { max-width: 20ch; }
.vhero .hero__lead { max-width: 52ch; }
.vhero .facts--hero { margin-top: 34px; border-top: 1px solid var(--line-2); padding-top: 22px; }

/* направления — полосы с видео */
.vbands { background: var(--bg); padding-top: clamp(72px, 9vw, 120px); }
.vbands__head { margin-bottom: 40px; }
.vbands__head .price__demo { max-width: 640px; color: var(--ink-2); border-color: var(--line-2); }
.vband { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--choc); }
.vband + .vband { border-top: 1px solid rgba(255,255,255,.08); }
.vband__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: end; padding-top: calc(var(--hdr) + 90px); padding-bottom: clamp(48px, 8vh, 96px); }
.vband__t { margin: 0 0 16px; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.08; }
.vband__x { margin: 0 0 22px; color: var(--ink-2); max-width: 44ch; font-size: clamp(15px, 1.2vw, 18px); }
.vband__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.vband__list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: color var(--fast), padding var(--fast) var(--ease); }
.vband__list a:hover { color: var(--gold-hi); padding-left: 8px; }
.vband__list span { font-size: 15.5px; }
.vband__list b { white-space: nowrap; font: 400 15px/1 var(--display); letter-spacing: .04em; color: var(--gold-hi); }
@media (max-width: 900px) {
  .vband__in { grid-template-columns: 1fr; gap: 26px; }
  .vband { min-height: 100svh; }
  .vbg__shade { background: linear-gradient(0deg, rgba(43,36,30,.95) 0%, rgba(43,36,30,.75) 50%, rgba(43,36,30,.35) 100%); }
  .hud { gap: 14px; font-size: 10px; letter-spacing: .12em; top: calc(var(--hdr) + 16px); }
  .hud > span:nth-child(2) { display: none; }
}

/* калькулятор — бланк */
.calc-sheet { background: var(--bg); }
.calc-sheet__in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; padding: clamp(28px, 4vw, 56px); background: var(--bg-3); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(22,21,20,.35); }
.calc-sheet__steps { list-style: none; margin: 0; padding: 0 0 0 30px; border-left: 1px solid var(--ink); display: grid; gap: 22px; }
.calc-sheet__steps li { display: grid; gap: 4px; }
.calc-sheet__steps b { font: 300 26px/1 var(--display); color: var(--gold); }
.calc-sheet__steps span { color: var(--ink-2); }
@media (max-width: 900px) { .calc-sheet__in { grid-template-columns: 1fr; gap: 30px; } }

/* светлые карточки, таблицы, формы */
.card { background: var(--bg-3); border-color: var(--line); }
.card:hover { border-color: var(--gold-hi); box-shadow: 0 24px 50px -36px rgba(22,21,20,.4); }
.sec--dark { background: var(--bg-2); }
.sec--form { background: var(--bg-2) !important; }
.sec--form .form-bg { display: none; }
.sec--form .lead-form { background: var(--bg-3) !important; border-color: var(--line) !important; box-shadow: 0 30px 70px -45px rgba(22,21,20,.45) !important; }
.f-field input, .f-field select, .f-field textarea { background: #fff; border-color: var(--line-2); color: var(--ink); }
.price__table th, .price__table td { border-color: var(--line); }
.price__demo { color: var(--ink-2); border-color: var(--line-2); }
.drop--static { background: var(--choc); }

.h-hero, .h1, .h2, .film__t, .vband__t { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.film--hero .film__beat--h1 .h-hero { font-size: clamp(26px, 3.2vw, 46px); letter-spacing: .04em; }
.film__t { font-size: clamp(24px, 2.8vw, 40px); letter-spacing: .05em; }
@media (max-width: 767px) {
  .h-hero, .film--hero .film__beat--h1 .h-hero { font-size: clamp(22px, 6.4vw, 30px); letter-spacing: .03em; }
  .film__t { font-size: clamp(21px, 6vw, 27px); letter-spacing: .03em; }
  .h2 { font-size: clamp(21px, 6vw, 28px); letter-spacing: .04em; }
  .vband__t { font-size: clamp(24px, 7vw, 32px); }
  .cert__brand { font-size: clamp(28px, 9vw, 40px); letter-spacing: .1em; }
  .cert__sub { letter-spacing: .2em; font-size: 10.5px; margin-bottom: 30px; }
}

.brand-tag { display: none; }   /* полоса с маркой — приём мудборда, в стиле сертификата не нужна */

.cine { background: var(--choc); }

/* ═════ плавные переходы как на vlcode.ru (18.10.2026) ═════ */
/* логотип крупнее — пожелание Юлии */
:root { --hdr: 84px; }
.hdr__logo img { height: 32px; }
@media (max-width: 900px) { :root { --hdr: 74px; } .hdr__logo img { height: 29px; } }
@media (max-width: 380px) { .hdr__logo img { height: 25px; } }

/* мягкое появление: подъём на 40px, дольше, как на референсе */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translateY(40px); transition: opacity 1.1s cubic-bezier(.16,.84,.3,1), transform 1.1s cubic-bezier(.16,.84,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
}

/* шторка: блок прилипает, следующий наезжает сверху; закрываемый темнеет, текст уходит вверх */
.has-curtains [data-curtain] { position: sticky; z-index: 0; }
.has-curtains [data-curtain] + * { position: relative; z-index: 1; }
/* 22.10: полосы направлений не прилипают — все переходы одинаковые: затемнение, текст вверх, линия света на стыке.
   Раньше прилипала только первая (у остальных sticky перебивало правило выше), и 1→2 выглядело иначе, чем 2→3. */
.has-curtains .vband[data-curtain] { position: relative; }
.has-curtains .vhero + * { background: var(--bg); box-shadow: 0 -30px 60px -20px rgba(43,36,30,.45); }
/* 21.10: всё ниже шторки — непрозрачное и поверх неё. На телефоне у main нет фона (он только при ftr-reveal),
   и сквозь прозрачные секции просвечивал прилипший первый экран. Без z-index: fixed-окна внутри секций (шар, лайтбокс) не запираем. */
.has-curtains main > :where([data-curtain] ~ :not([data-curtain])) { position: relative; background-color: var(--paper); }
.curtain__dim { position: absolute; inset: 0; z-index: 3; background: var(--choc); opacity: calc(var(--k, 0) * .72); pointer-events: none; }
.has-curtains [data-curtain] .vhero__in, .has-curtains [data-curtain] .vband__in { transform: translate3d(0, calc(var(--k, 0) * -70px), 0); opacity: calc(1 - var(--k, 0) * .6); will-change: transform; }
.has-curtains [data-curtain] .vbg__v { transform: scale(calc(1 + var(--k, 0) * .06)); }

/* подвал открывается из-под страницы */
.ftr-reveal .ftr { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }   /* z-index 0, не -1: иначе подвал под body и по ссылкам не кликнуть */
.ftr-reveal main { position: relative; z-index: 1; background: var(--bg); box-shadow: 0 30px 60px rgba(43,36,30,.35); }
.nav__link { white-space: nowrap; }
@media (min-width: 901px) { .nav { gap: 22px; } .hdr__in { gap: 24px; } }
@media (min-width: 901px) and (max-width: 1240px) { .nav { gap: 16px; } .nav__link { font-size: 11.5px; letter-spacing: .1em; } .hdr__logo img { height: 28px; } }

/* ═════ переходы в духе детейлинга (18.10.2026) ═════
 * 1) край наезжающего блока — линия света, как отражение LED-трубки бокса на лаке;
 * 2) по закрываемому блоку проходит блик, как по отполированному кузову (ведёт прокрутка, --k);
 * 3) элементы проявляются из лёгкой мутности в резкость — как полировка снимает «паутинку». */
.has-curtains [data-curtain] + *::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.0) 8%, rgba(255,250,240,.95) 50%, rgba(255,255,255,0) 92%, transparent);
  box-shadow: 0 0 18px 2px rgba(255,246,228,.55), 0 0 60px 6px rgba(205,191,151,.25); }
.curtain__glare { position: absolute; inset: -20% -40%; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 42%, rgba(255,248,235,.0) 45%, rgba(255,248,235,.22) 50%, rgba(205,191,151,.12) 53%, transparent 58%);
  transform: translate3d(calc((var(--k, 0) * 1.6 - .8) * 60%), 0, 0); opacity: calc(min(var(--k, 0) * 4, 1) * (1 - var(--k, 0))); }
@media (prefers-reduced-motion: no-preference) {
  .reveal { filter: blur(8px); transition: opacity 1.1s cubic-bezier(.16,.84,.3,1), transform 1.1s cubic-bezier(.16,.84,.3,1), filter 1.1s cubic-bezier(.16,.84,.3,1); }
  .reveal.is-in { filter: none; }
}
@media (max-width: 480px) { .btn { max-width: 100%; white-space: normal; text-align: center; letter-spacing: .06em; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; } }

.ftr__h { text-decoration: none; display: inline-block; } .ftr__h:hover { color: var(--gold-hi); }
.ftr__addr a { text-decoration: none; color: inherit; border-bottom: 1px solid var(--line-2); } .ftr__addr a:hover { color: var(--gold-hi); }
.eyebrow__link, .contacts__addr a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; } .eyebrow__link:hover, .contacts__addr a:hover { color: var(--gold-hi); }
@media (max-width: 1000px) { body:has(.calc__sum) .ftr { padding-bottom: 270px; } }

/* ролик ещё грузится — тонкая золотая полоса внизу сцены, как блик, бегущий по кромке */
.film.is-loading .film__stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 6;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: film-load 1.4s ease-in-out infinite; }
@keyframes film-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* слои покрытия: рисунок + понятный список (19.10.2026) */
.layx { background: var(--choc); }
.layx__head { max-width: 760px; margin-bottom: 40px; }
.layx__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.layx__pic { position: sticky; top: calc(var(--hdr) + 24px); }
.layx__pic .drop__svg { width: 100%; height: auto; max-height: 76svh; }
.lay__num line { stroke: var(--gold); stroke-width: 2; }
.lay__num text { fill: var(--gold-hi); font: 500 30px var(--display); letter-spacing: .1em; }
.layx__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.layx__list a { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background var(--fast), padding var(--fast) var(--ease); }
.layx__list a:hover { background: rgba(255,255,255,.03); padding-left: 10px; }
.layx__n { font: 300 26px/1 var(--display); color: var(--gold-hi); letter-spacing: .06em; padding-top: 4px; }
.layx__body { display: grid; gap: 6px; }
.layx__t { font: 400 clamp(18px, 1.6vw, 22px)/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; }
.layx__t small { font: 400 13px var(--text); letter-spacing: 0; text-transform: none; color: var(--gold); margin-left: 8px; }
.layx__what { color: var(--ink); font-size: 15.5px; }
.layx__why { color: var(--ink-2); font-size: 14.5px; }
.layx__list .arrow { margin-top: 4px; font-size: 13.5px; }
@media (max-width: 900px) {
  .layx__in { grid-template-columns: 1fr; gap: 20px; }
  .layx__pic { position: static; max-width: 420px; margin: 0 auto; }
  .layx__list a { grid-template-columns: 40px 1fr; padding: 18px 0; }
  .layx__n { font-size: 22px; }
}

/* «Ваша машина»: класс находит сайт, клиент выбирает только марку, модель и при необходимости кузов (19.10.2026) */
.carpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; }
.carpick [hidden] { display: none !important; }
.carpick__note { grid-column: 1 / -1; margin: 0; min-height: 1.5em; font-size: 14px; color: var(--mute); }
.carpick__note:empty { display: none; }
.carpick__note.is-unknown { color: var(--ink-2); }
.price__pick { margin: 0 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-3); }
.price__table tbody td { width: 1%; }
.price__table.is-picked td, [data-price-table].is-picked td { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .price__pick { padding: 14px; }
  .price__table th, .price__table td { padding: 12px 12px; }
  .price__table tbody th { min-width: 0; }
}

/* «Расчёт услуги»: кузов — галочка «Универсал» или кнопки вариантов; шаг 3 — форма заявки (19.10.2026) */
.carpick__body { grid-column: 1 / -1; }
.carpick__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.carpick__check, .carpick__pill { position: relative; cursor: pointer; }
.carpick__check input, .carpick__pill input { position: absolute; opacity: 0; pointer-events: none; }
.carpick__check span, .carpick__pill span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-3); font-size: 15px; transition: border-color var(--fast), background var(--fast); }
.carpick__check span::before { content: ''; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--ink-2); border-radius: 5px; background: var(--bg-3) center / 12px no-repeat; }
.carpick__check input:checked + span::before { background-color: var(--acc); border-color: var(--acc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23f5efe7' stroke-width='2'/%3E%3C/svg%3E"); }
.carpick__check input:checked + span, .carpick__pill input:checked + span { border-color: var(--acc); background: rgba(43,36,30,.07); font-weight: 600; }
.carpick__check input:focus-visible + span, .carpick__pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.calc__stepno { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font: 400 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.calc__stepno span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); font-weight: 600; letter-spacing: 0; }
.calc__item-p { font-size: 14px; }
@media (max-width: 1000px) { .calc__sum { transition: transform .3s var(--ease), opacity .3s; } .calc__sum.is-away { transform: translateY(120%); opacity: 0; pointer-events: none; } }
.vhero > .snd { z-index: 7; right: var(--gutter); bottom: auto; top: calc(var(--hdr) + 56px); }
@media (max-width: 767px) { .vhero > .snd { top: calc(var(--hdr) + 6px); min-height: 36px; } }
.vband > .snd { z-index: 7; right: var(--gutter); bottom: auto; top: calc(var(--hdr) + 52px); }
@media (max-width: 767px) { .vband > .snd { top: calc(var(--hdr) + 36px); min-height: 36px; } }
.vhero > .snd, .vband > .snd { right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
.has-curtains .vhero > .snd, .has-curtains .vband > .snd { transform: translate3d(0, var(--pin, 0px), 0); }


/* ═════════════════ v11 · до и после, работы в студии, мастера (21.10.2026) ═════════════════ */
.ba-sec {
  --bg: var(--choc); --bg-2: var(--choc-2); --bg-3: var(--choc-3); --line: rgba(255,240,222,.12); --line-2: rgba(255,240,222,.22);
  --ink: #f5efe7; --ink-2: #ddd2c4; --mute: #b0a291; --gold: #b9a676; --gold-hi: #d3c49b;
  background: var(--choc); color: var(--ink); color-scheme: dark;
}
.ba-grid { display: grid; gap: 22px; }
.ba-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ba-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-grid--1 { max-width: 620px; }
.ba { margin: 0; }
.ba__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: #000; border: 1px solid var(--line); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.ba--single .ba__frame { aspect-ratio: 4 / 3; cursor: default; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; margin-left: -1px; background: rgba(255,250,242,.92); box-shadow: 0 0 14px rgba(255,250,242,.45); pointer-events: none; }
.ba__line i { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(30,25,21,.66); border: 1px solid rgba(255,250,242,.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ba__line i::before, .ba__line i::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid #f5efe7; border-width: 0 0 2px 2px; }
.ba__line i::before { left: 12px; transform: rotate(45deg); }
.ba__line i::after { right: 12px; transform: rotate(-135deg); }
.ba__tag { position: absolute; top: 12px; padding: 7px 12px; border-radius: 999px; background: rgba(20,16,13,.72); color: #f5efe7; font: 600 11.5px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.ba__tag--b { left: 12px; } .ba__tag--a { right: 12px; }
.ba__range { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.ba:has(.ba__range:focus-visible) .ba__frame { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.ba__cap { display: grid; gap: 6px; padding: 16px 2px 0; }
.ba__cap b { font: 600 16px/1.3 var(--display); letter-spacing: .02em; }
.ba__cap span { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.ba__cap .arrow { margin-top: 4px; text-decoration: none; }
.ba__cap a { color: inherit; text-decoration: none; }
.ba__cap a:hover b { color: var(--gold-hi); }
.ba.is-hint .ba__before, .ba.is-hint .ba__line { transition: clip-path .9s var(--ease), left .9s var(--ease); }
.ba-more { margin: 30px 0 0; text-align: center; }
.svc-works .ba-grid { margin-bottom: 26px; }
.gal--work .gal__item { border-radius: var(--r-in); }
.team__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, calc((100% - 28px) / 3)); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.team__item { margin: 0; aspect-ratio: 3 / 4; border-radius: var(--r-in); overflow: hidden; scroll-snap-align: start; border: 1px solid var(--line); }
.team__img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .ba-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ba-grid--2, .ba-grid--3 { grid-template-columns: 1fr; }
  .ba__frame { aspect-ratio: 1 / 1; }
  .team__strip { grid-auto-columns: 72%; }
}
@media (prefers-reduced-motion: reduce) { .ba.is-hint .ba__before, .ba.is-hint .ba__line { transition: none; } }
/* одна пара на странице услуги: кадр и подпись рядом */
.svc-works .ba-grid--1 { max-width: none; }
.svc-works .ba-grid--1 .ba { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.svc-works .ba-grid--1 .ba__frame { aspect-ratio: 1 / 1; }
.svc-works .ba-grid--1 .ba--single .ba__frame { aspect-ratio: 4 / 3; }
.svc-works .ba-grid--1 .ba__cap { padding: 0; gap: 12px; }
.svc-works .ba-grid--1 .ba__cap b { font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.svc-works .ba-grid--1 .ba__cap span { font-size: 16.5px; }
@media (max-width: 760px) { .svc-works .ba-grid--1 .ba { grid-template-columns: 1fr; gap: 16px; } }