/* ARTSTITCH — бренд поверх кита.
 * Мир dark-cinematic перекрашен: нейтральная чёрная кожа вместо тёплого обсидиана,
 * одна оранжевая нить вместо латуни. Нить — она же цвет действия.
 * Сигнатура: строчка прошивается на глазах (под H1, из кадра вниз, швы между секциями,
 * прогресс брифа). Двигаем только transform, opacity и clip-path. */

@font-face { font-family: "Cabinet Grotesk"; src: url("fonts/cabinet-grotesk-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ============ ТОКЕНЫ ============ */
:root[data-theme="dark"][data-direction="dark-cinematic"] {
  --font-display: "Cabinet Grotesk", "Arial Black", system-ui, sans-serif;
  --font-text: "Satoshi", system-ui, sans-serif;
  --weight-display: 800;

  --color-bg: oklch(12% 0.003 270);
  --color-surface: oklch(16.5% 0.003 270);
  --color-elevated: oklch(21% 0.004 270);
  --color-text: oklch(94.5% 0.003 270);
  --color-muted: oklch(70% 0.004 270);
  --color-hairline: oklch(94.5% 0.003 270 / 0.12);
  --color-accent: oklch(77% 0.16 60);
  --color-accent-hover: oklch(83% 0.15 64);
  --color-on-accent: oklch(15% 0.01 60);
  --shadow-color: oklch(4% 0.004 270 / 0.9);
  --color-thread: var(--color-accent);
  --color-thread-hole: oklch(5% 0.003 270 / 0.7);
  --color-scrim: oklch(12% 0.003 270 / 0.86);
  --color-texture: oklch(94.5% 0.003 270 / 0.07);
  --color-needle: oklch(90% 0.005 270);
  --color-error: oklch(70% 0.17 25);

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;

  --lh-hero: 0.86;
  --track-hero: -0.045em;
  --track-display: -0.035em;
  --track-title: -0.02em;
  --text-strap: clamp(1.15rem, 0.9rem + 1.1vw, 1.9rem);
  --text-giant: clamp(3.5rem, 0.5rem + 19vw, 21rem);
  --text-mark: 1.35rem;

  --dur-sew: 900ms;
  --dur-sew-long: 1400ms;
  --delay-sew: 350ms;
  --reveal-shift: 32px;

  --stitch-w: 3px;
  --stitch-len: 9px;
  --stitch-gap: 6px;
  --stitch-period: calc(var(--stitch-len) + var(--stitch-gap));
  --seam-gap: 7px;
  --seam-h: 3rem;
  --needle-len: 2.6rem;
  --needle-w: 2px;
  --header-h: 4.5rem;
  --hero-strip: 46svh;
  --strap-h: 4.75rem;
  --perf-dot: 1.6px;
  --perf-step: 14px;
  --marquee-gap: 2.25rem;
  --grain-opacity: 0.06;

  /* градиентный задник: четыре пятна света (нить, угли, сталь, коньяк), без фиолетового */
  --aura-amber: oklch(76% 0.165 62 / 0.32);
  --aura-ember: oklch(52% 0.18 38 / 0.42);
  --aura-steel: oklch(52% 0.035 250 / 0.28);
  --aura-cognac: oklch(42% 0.085 55 / 0.4);
  --aura-cursor: oklch(80% 0.15 64 / 0.13);
  --aura-size: 82vmax;
  --aura-size-sm: 44vmax;
  --dur-aura: 2200ms;
  --dur-drift: 26s;

  /* моушн страницы: глубина 3D, кинетический H1, оседание героя, блик под мышью */
  --persp: 900px;
  --persp-wide: 1600px;
  --kin-d0: 120ms;
  --kin-d1: 480ms;
  --kin-step: 32ms;
  --kin-step-slow: 130ms;
  --dur-settle: 2400ms;
  --hero-drift: 30svh;
  --color-glare: oklch(97% 0.03 70 / 0.2);

  /* вшитая строчка по краю (.edge) */
  --st-color: var(--color-thread);
  --st-inset: 6px;
  --st-len: 7px;
  --st-gap: 5px;
  --st-w: 1.5px;
  --st-opacity: 0.9;
}

/* ============ БАЗА ============ */
[hidden] { display: none !important; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
figure { margin: 0; }
.micro {
  font-size: var(--text-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}
:is(.manifesto, .work, .patterns, .process, .services, .brief, .foot) {
  width: min(100% - var(--gutter) * 2, var(--page-max));
  margin-inline: auto;
}
.skip {
  position: absolute;
  left: var(--gutter);
  top: var(--space-xs);
  z-index: var(--z-overlay);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-sm);
  transform: translateY(-300%);
}
.skip:focus-visible { transform: none; }

/* Подчёркивание: волосяная линия всегда видна, нить прошивает её при наведении. */
.link-underline {
  text-decoration: none;
  padding-block-end: 0.15em;
  background-image: linear-gradient(var(--color-thread), var(--color-thread)), linear-gradient(var(--color-hairline), var(--color-hairline));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
}

/* ============ ГРАДИЕНТНЫЙ ЗАДНИК ============ */
/* Четыре пятна света за всей страницей. Секция в центре экрана ставит сцену (site.js → data-mood
 * на html): пятна переезжают и меняют силу, внутри сцены медленно дышат. Пятно — радиальный
 * градиент, без filter: blur; двигаем только transform, translate и opacity. Зерно сверху
 * снимает полосы градиента. Бриф — самая горячая сцена. */
main, .foot { position: relative; z-index: 1; }
.aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.aura__blob,
.aura__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--aura-size);
  height: var(--aura-size);
  margin: calc(var(--aura-size) / -2) 0 0 calc(var(--aura-size) / -2);
}
.aura__blob { transition: transform var(--dur-aura) var(--ease-in-out-soft), opacity var(--dur-aura) var(--ease-in-out-soft); }
.aura__blob--amber { background: radial-gradient(closest-side, var(--aura-amber), transparent); transform: translate(74vw, 22vh); }
.aura__blob--ember { background: radial-gradient(closest-side, var(--aura-ember), transparent); transform: translate(10vw, 90vh) scale(0.8); opacity: 0.85; }
.aura__blob--steel { background: radial-gradient(closest-side, var(--aura-steel), transparent); transform: translate(6vw, 4vh) scale(0.9); opacity: 0.7; }
.aura__blob--cognac { background: radial-gradient(closest-side, var(--aura-cognac), transparent); transform: translate(50vw, 112vh) scale(0.7); opacity: 0.5; }
.aura__cursor {
  width: var(--aura-size-sm);
  height: var(--aura-size-sm);
  margin: calc(var(--aura-size-sm) / -2) 0 0 calc(var(--aura-size-sm) / -2);
  background: radial-gradient(closest-side, var(--aura-cursor), transparent);
  opacity: 0;
  transition: opacity var(--dur-scene) var(--ease-out-quart);
}
.aura__cursor[data-on] { opacity: 1; }

:root[data-mood="manifesto"] .aura__blob--amber { transform: translate(82vw, 62vh) scale(0.9); opacity: 0.9; }
:root[data-mood="manifesto"] .aura__blob--ember { transform: translate(-6vw, 40vh) scale(0.7); opacity: 0.4; }
:root[data-mood="manifesto"] .aura__blob--steel { transform: translate(40vw, -10vh); opacity: 0.6; }
:root[data-mood="manifesto"] .aura__blob--cognac { transform: translate(20vw, 70vh) scale(1.1); opacity: 1; }

:root[data-mood="work"] .aura__blob--amber { transform: translate(100vw, 100vh) scale(0.6); opacity: 0.35; }
:root[data-mood="work"] .aura__blob--ember { transform: translate(0vw, 100vh) scale(0.6); opacity: 0.3; }
:root[data-mood="work"] .aura__blob--steel { transform: translate(30vw, 30vh) scale(1.3); opacity: 1; }
:root[data-mood="work"] .aura__blob--cognac { transform: translate(85vw, 15vh) scale(0.9); opacity: 0.6; }

:root[data-mood="patterns"] .aura__blob--amber { transform: translate(55vw, 55vh) scale(0.85); opacity: 0.95; }
:root[data-mood="patterns"] .aura__blob--ember { transform: translate(90vw, 90vh) scale(0.7); opacity: 0.5; }
:root[data-mood="patterns"] .aura__blob--steel { transform: translate(5vw, 20vh); opacity: 0.8; }
:root[data-mood="patterns"] .aura__blob--cognac { transform: translate(20vw, 95vh) scale(0.9); opacity: 0.7; }

:root[data-mood="wheels"] .aura__blob--amber { transform: translate(20vw, 80vh) scale(0.7); opacity: 0.5; }
:root[data-mood="wheels"] .aura__blob--ember { transform: translate(70vw, 70vh); opacity: 0.9; }
:root[data-mood="wheels"] .aura__blob--steel { transform: translate(80vw, 10vh); opacity: 0.7; }
:root[data-mood="wheels"] .aura__blob--cognac { transform: translate(10vw, 20vh) scale(0.8); opacity: 0.6; }

:root[data-mood="process"] .aura__blob--amber { transform: translate(30vw, 30vh) scale(0.75); opacity: 0.9; }
:root[data-mood="process"] .aura__blob--ember { transform: translate(90vw, 100vh) scale(0.8); opacity: 0.5; }
:root[data-mood="process"] .aura__blob--steel { transform: translate(95vw, 0vh); opacity: 0.6; }
:root[data-mood="process"] .aura__blob--cognac { transform: translate(35vw, 75vh) scale(1.2); opacity: 1; }

:root[data-mood="services"] .aura__blob--amber { transform: translate(95vw, 50vh) scale(0.7); opacity: 0.6; }
:root[data-mood="services"] .aura__blob--ember { transform: translate(0vw, 0vh) scale(0.6); opacity: 0.3; }
:root[data-mood="services"] .aura__blob--steel { transform: translate(25vw, 60vh) scale(1.2); opacity: 0.9; }
:root[data-mood="services"] .aura__blob--cognac { transform: translate(60vw, 10vh) scale(0.8); opacity: 0.6; }

:root[data-mood="brief"] .aura__blob--amber { transform: translate(72vw, 45vh) scale(1.15); opacity: 1; }
:root[data-mood="brief"] .aura__blob--ember { transform: translate(30vw, 85vh) scale(1.1); opacity: 1; }
:root[data-mood="brief"] .aura__blob--steel { transform: translate(0vw, 0vh) scale(0.7); opacity: 0.35; }
:root[data-mood="brief"] .aura__blob--cognac { transform: translate(95vw, 95vh); opacity: 0.9; }

:root[data-mood="foot"] .aura__blob--amber { transform: translate(50vw, 105vh); opacity: 0.85; }
:root[data-mood="foot"] .aura__blob--ember { transform: translate(15vw, 90vh) scale(0.9); opacity: 1; }
:root[data-mood="foot"] .aura__blob--steel { transform: translate(85vw, 20vh) scale(0.8); opacity: 0.5; }
:root[data-mood="foot"] .aura__blob--cognac { transform: translate(80vw, 95vh); opacity: 0.8; }

/* ============ СТРОЧКА ПО КРАЮ ============ */
.edge { position: relative; }
.edge::before,
.book__tab::before {
  content: "";
  position: absolute;
  inset: var(--st-inset);
  z-index: 1;
  pointer-events: none;
  border-radius: var(--radius-xs);
  opacity: var(--st-opacity);
  background:
    linear-gradient(90deg, var(--st-color) var(--st-len), transparent 0) 0 0 / calc(var(--st-len) + var(--st-gap)) var(--st-w) repeat-x,
    linear-gradient(90deg, var(--st-color) var(--st-len), transparent 0) 0 100% / calc(var(--st-len) + var(--st-gap)) var(--st-w) repeat-x,
    linear-gradient(180deg, var(--st-color) var(--st-len), transparent 0) 0 0 / var(--st-w) calc(var(--st-len) + var(--st-gap)) repeat-y,
    linear-gradient(180deg, var(--st-color) var(--st-len), transparent 0) 100% 0 / var(--st-w) calc(var(--st-len) + var(--st-gap)) repeat-y;
}
:is(.shot, .book__photo, .process__frame, .manifesto__film).edge { --st-inset: 10px; --st-opacity: 0.75; }

/* ============ КНОПКИ ============ */
:root .btn {
  position: relative;
  justify-content: center;
  min-height: 3.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out-quart), background-color var(--dur-micro) var(--ease-out-quart), color var(--dur-micro) var(--ease-out-quart);
}
.btn.edge { --st-color: var(--color-on-accent); --st-inset: 4px; --st-opacity: 0.5; --st-len: 5px; --st-gap: 4px; --st-w: 1px; }
:root .btn:active { transform: scale(0.97); }
:root .btn--sm { min-height: 2.75rem; padding: 0.5em 1.1em; font-size: var(--text-small); }
:root .btn--ghost { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-hairline); }
.btn--ghost.edge { --st-color: var(--color-thread); }

/* ============ ШАПКА ============ */
.top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-inline: var(--gutter);
}
.top--static { position: relative; }
.mark { display: inline-flex; align-items: baseline; text-decoration: none; font-size: var(--text-mark); line-height: 1; }
.mark__art { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.mark__stitch { font-family: var(--font-text); font-style: italic; color: var(--color-thread); margin-inline-start: 0.04em; }
.top__nav { display: none; }

/* ============ ПЕРВЫЙ ЭКРАН ============ */
.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: var(--hero-strip) auto;
}
.hero__media {
  position: relative;
  grid-row: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, black 52%, transparent 100%);
  mask-image: linear-gradient(180deg, black 52%, transparent 100%);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 59.8% 40%; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--color-scrim) 0%, transparent 30%);
}
.hero__text { position: relative; grid-row: 2; padding: 0 var(--gutter) var(--space-lg); }
.hero__title { margin: -0.38em 0 0; }
.hero__lead { color: var(--color-text); opacity: 0.86; margin-block-end: var(--space-md); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); }
.hero__cta .link-underline { padding-block: var(--space-2xs); }

/* Строчка под H1: прошивается при загрузке, игла идёт впереди и уходит. */
.sew { position: relative; width: min(100%, 26rem); height: var(--needle-len); margin-block: var(--space-2xs) var(--space-xs); }
.sew__line {
  position: absolute;
  inset: calc(50% - var(--stitch-w) / 2) 0 auto 0;
  height: var(--stitch-w);
  background: linear-gradient(90deg, var(--color-thread) var(--stitch-len), transparent 0) 0 0 / var(--stitch-period) 100% repeat-x;
  filter: drop-shadow(0 1px 0 var(--color-thread-hole));
  animation: sew-in var(--dur-sew-long) var(--ease-in-out-soft) var(--delay-sew) both;
}
.sew__track { position: absolute; inset: 0; animation: needle-run var(--dur-sew-long) var(--ease-in-out-soft) var(--delay-sew) both; }
.sew__needle,
.seam__needle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--needle-w);
  border-radius: var(--radius-xs);
  background: linear-gradient(180deg, transparent, var(--color-needle) 30%, var(--color-needle) 70%, transparent);
}
.sew__needle { animation: needle-out var(--dur-ui) var(--ease-out-quart) calc(var(--delay-sew) + var(--dur-sew-long)) both; }
@keyframes sew-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes needle-run { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes needle-out { to { opacity: 0; } }

/* Нить из кадра: продолжает строчку макро-кадра Cullinan вниз, сквозь ремень. */
.hero__thread { display: none; }

/* ============ РЕМЕНЬ МАРОК ============ */
.strap {
  position: relative;
  z-index: 3;
  height: var(--strap-h);
  display: flex;
  align-items: center;
  background: color-mix(in oklch, var(--color-surface) 86%, transparent);
  box-shadow: 0 -1px 0 var(--color-hairline), 0 1px 0 var(--color-hairline), 0 24px 40px -28px var(--shadow-color);
}
.strap::before,
.strap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  opacity: 0.45;
  background: linear-gradient(90deg, var(--color-muted) var(--st-len), transparent 0) 0 0 / calc(var(--st-len) + var(--st-gap)) 100% repeat-x;
}
.strap::before { top: var(--space-2xs); }
.strap::after { bottom: var(--space-2xs); }
.strap__rail { width: 100%; }
.strap__track { list-style: none; margin: 0; padding: 0; }
.strap__track li {
  display: inline-flex;
  align-items: center;
  gap: var(--marquee-gap);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-strap);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.strap__track li::after {
  content: "";
  width: 2.2em;
  height: var(--stitch-w);
  background: linear-gradient(90deg, var(--color-thread) var(--stitch-len), transparent 0) 0 0 / var(--stitch-period) 100% repeat-x;
}

/* ============ МАНИФЕСТ ============ */
.manifesto {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-section-lg) var(--space-section-md);
}
.panel-perf::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -1);
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--color-texture) var(--perf-dot), transparent calc(var(--perf-dot) + 0.6px));
  background-size: var(--perf-step) var(--perf-step);
  mask-image: radial-gradient(ellipse 70% 60% at 28% 45%, black, transparent 78%);
}
.manifesto__title { font-size: var(--text-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); margin: 0 0 var(--space-md); }
.manifesto__lead { margin: 0; }
.manifesto__film { width: 74%; justify-self: end; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.manifesto__video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--color-surface); }
.manifesto__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: var(--space-xl) var(--space-md) var(--space-md); color: var(--color-text); background: linear-gradient(0deg, var(--color-scrim) 0%, transparent 100%); }

/* ============ ШОВ МЕЖДУ СЕКЦИЯМИ ============ */
.seam { position: relative; height: var(--seam-h); width: min(100% - var(--gutter) * 2, var(--page-max)); margin-inline: auto; overflow: clip; }
.seam__line {
  position: absolute;
  inset: calc(50% - var(--stitch-w) - var(--seam-gap) / 2) 0 auto 0;
  height: calc(var(--stitch-w) * 2 + var(--seam-gap));
  background:
    linear-gradient(90deg, var(--color-thread) var(--stitch-len), transparent 0) 0 0 / var(--stitch-period) var(--stitch-w) repeat-x,
    linear-gradient(90deg, var(--color-thread) var(--stitch-len), transparent 0) 0 100% / var(--stitch-period) var(--stitch-w) repeat-x;
  filter: drop-shadow(0 1px 0 var(--color-thread-hole));
  transition: clip-path var(--dur-sew-long) var(--ease-in-out-soft);
}
.seam__needle-track { position: absolute; inset: 0; transition: transform var(--dur-sew-long) var(--ease-in-out-soft); }
.seam__needle { opacity: 0; transition: opacity var(--dur-ui) var(--ease-out-quart) var(--dur-sew-long); }
[data-motion-ready] [data-reveal="seam"]:not([data-shown]),
[data-motion-ready] [data-reveal="thread"]:not([data-shown]) { opacity: 1; }
[data-motion-ready] .seam:not([data-shown]) .seam__line { clip-path: inset(0 100% 0 0); }
[data-motion-ready] .seam:not([data-shown]) .seam__needle-track { transform: translateX(-100%); }
[data-motion-ready] .seam:not([data-shown]) .seam__needle { opacity: 1; transition: none; }

/* ============ РАБОТЫ ============ */
.work { padding-block: var(--space-section-md); }
.work__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-md); margin-block-end: var(--space-xl); }
.work__head h2 { margin: 0; }
.work__count { margin: 0; }
.case { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.case + .case { margin-block-start: var(--space-2xl); }
.case > * { grid-column: 1 / -1; min-width: 0; }
.shot { overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.case__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.case__pair img,
.case--c .trip-2 img,
.case--c .trip-3 img { aspect-ratio: 3 / 4; }
.case--a .case__main img,
.case__wide img { aspect-ratio: 16 / 10; }
.case--b .case__main img,
.case--c .trip-1 img { aspect-ratio: 4 / 5; }
.case--c > .trip-2 { grid-column: 1; }
.case--c > .trip-3 { grid-column: 2; }
.case__meta { padding-block: var(--space-xs); }
.case__num { color: var(--color-thread); margin: 0 0 var(--space-2xs); }
.case__name { margin: 0 0 var(--space-xs); }
.case__text { color: var(--color-muted); max-width: var(--measure-tight); margin: 0; }

.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: var(--space-xs); margin-block-start: var(--space-2xl); }
.tile { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface); }
.tile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform var(--dur-scene) var(--ease-out-expo); }
.m-door, .m-seat, .m-olive { grid-column: span 2; }
.m-door img, .m-seat img, .m-olive img { aspect-ratio: 16 / 10; }
.tile__cap {
  position: absolute;
  left: var(--space-xs);
  bottom: var(--space-xs);
  margin: 0;
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--color-scrim);
  color: var(--color-text);
  border-radius: var(--radius-xs);
}

/* ============ КНИГА УЗОРОВ ============ */
.patterns { padding-block: var(--space-section-md) var(--space-section-sm); }
.patterns__head { display: grid; gap: var(--space-xs); margin-block-end: var(--space-lg); }
.patterns__head h2 { margin: 0; }
.patterns__intro { color: var(--color-muted); max-width: var(--measure-tight); margin: 0; }
.book { display: grid; gap: var(--space-md); }
.book__tabs {
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--space-2xs) var(--gutter);
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.book__tabs::-webkit-scrollbar { display: none; }
.book__tab {
  --st-inset: 0px;
  --st-opacity: 0;
  position: relative;
  flex: 0 0 auto;
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
  align-items: center;
  padding: var(--space-2xs);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-small);
  text-align: start;
  cursor: pointer;
  scroll-snap-align: start;
}
.book__tab::before { transition: opacity var(--dur-micro) var(--ease-out-quart); }
.book__tab[aria-selected="true"] { --st-opacity: 1; color: var(--color-text); }
.book__tab img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-sm); transition: transform var(--dur-ui) var(--ease-out-expo); }
.book__tab:active { transform: scale(0.97); }
.book__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface); }
.book__photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 100% 100%; transition: opacity var(--dur-micro) var(--ease-out-quart), filter var(--dur-micro) var(--ease-out-quart), transform var(--dur-scene) var(--ease-out-expo); }
.book__photo[data-swapping] img { opacity: 0; filter: blur(4px); }
.book__num { margin: 0 0 var(--space-xs); }
.book__num span { color: var(--color-thread); }
.book__name { margin: 0 0 var(--space-xs); }
.book__note { color: var(--color-muted); margin-block-end: var(--space-md); }

/* 3D-образец (swatch3d.js): канвас — главная сцена, фото кабины ложится карточкой в угол.
   Рамка-отпечаток — outline: на полном кадре он за краем и срезан overflow, на карточке виден. */
.book__stage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out-quart);
}
.book[data-3d] .book__photo { background: radial-gradient(75% 60% at 46% 42%, var(--color-elevated), var(--color-surface) 55%, var(--color-bg)); }
.book[data-3d] .book__stage { opacity: 1; }
.book[data-3d] .book__photo img { outline: 1rem solid var(--color-text); }
.book[data-3d]:not([data-view="photo"]) .book__photo img {
  position: relative;
  z-index: 2;
  transform: translate(calc(var(--space-sm) * -1), calc(var(--space-sm) * -1)) rotate(3deg) scale(0.34);
  box-shadow: 0 2rem 4rem var(--shadow-color);
}
.book[data-view="photo"] .book__stage { opacity: 0; }
.book__flip {
  position: absolute;
  z-index: 3;
  right: var(--space-sm);
  bottom: var(--space-sm);
  width: 34%;
  aspect-ratio: 4 / 5;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0 0 var(--space-xs);
  background: transparent;
  border: 0;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transform: rotate(3deg);
  transition: transform var(--dur-ui) var(--ease-out-expo);
}
.book__flip:active { transform: rotate(3deg) scale(0.97); }
.book__flip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.book__flip-label {
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-xs);
  background: color-mix(in oklch, var(--color-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  white-space: nowrap;
}
.book[data-view="photo"] .book__flip { width: auto; aspect-ratio: auto; transform: none; }
.book__hint {
  position: absolute;
  z-index: 3;
  left: var(--space-md);
  bottom: var(--space-md);
  pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out-quart);
}
.book__hint[data-gone],
.book[data-view="photo"] .book__hint { opacity: 0; }

/* ============ РУЛИ ============ */
.wheels { padding-block: var(--space-section-sm) 0; }
.wheels__head {
  width: min(100% - var(--gutter) * 2, var(--page-max));
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
}
.wheels__head h2 { margin: 0; max-width: 11ch; }
.wheels__nav { display: flex; gap: var(--space-2xs); flex: 0 0 auto; }
.wheels__btn {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-lead);
  cursor: pointer;
}
.wheels__btn:disabled { opacity: 0.32; cursor: default; }
.wheels__btn:not(:disabled):active { transform: scale(0.97); }
.wheels__track {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter) var(--space-xl);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70vw;
  gap: var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.wheels__track::-webkit-scrollbar { display: none; }
.wheels__track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.wheel { scroll-snap-align: start; }
.wheel:nth-child(even) { margin-block-start: var(--space-xl); }
.wheel img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); }
.wheel__cap { margin-block-start: var(--space-xs); font-size: var(--text-small); color: var(--color-muted); transition: color var(--dur-micro) var(--ease-out-quart); }

/* ============ ПРОЦЕСС ============ */
.process { padding-block: var(--space-section-lg) var(--space-section-md); }
.process__title { max-width: 13ch; margin-block-end: var(--space-xl); }
.process__frame { display: none; }
.process__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }
.step__num { color: var(--color-thread); margin: 0 0 var(--space-2xs); }
.step__name { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--track-display); margin: 0 0 var(--space-sm); }
.step p:not(.step__num) { color: var(--color-muted); }
.step p.step__quote { font-style: italic; font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--color-thread); margin-block-end: var(--space-xs); }
.step__shot { margin-block-start: var(--space-sm); overflow: hidden; border-radius: var(--radius-sm); }
.step__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ============ ЧТО ПЕРЕТЯГИВАЕМ ============ */
.services { padding-block: var(--space-section-md) 0; }
.services h2 { margin-block-end: var(--space-lg); }
.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg, var(--color-muted) var(--st-len), transparent 0) 0 0 / calc(var(--st-len) + var(--st-gap)) 1px repeat-x;
}
.svc-list li {
  background: linear-gradient(90deg, var(--color-muted) var(--st-len), transparent 0) 0 100% / calc(var(--st-len) + var(--st-gap)) 1px repeat-x;
}
.svc {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 2rem;
  grid-template-areas: "thumb num arrow" "thumb name arrow" "thumb desc arrow";
  column-gap: var(--space-sm);
  align-items: center;
  padding-block: var(--space-sm);
  color: var(--color-text);
  text-decoration: none;
}
.svc__num { grid-area: num; }
.svc__name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-title);
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
  transition: transform var(--dur-ui) var(--ease-out-expo), color var(--dur-micro) var(--ease-out-quart);
}
.svc__desc { grid-area: desc; font-size: var(--text-small); color: var(--color-muted); }
.svc__thumb { grid-area: thumb; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-sm); }
.svc__arrow { grid-area: arrow; justify-self: end; font-size: var(--text-lead); color: var(--color-muted); transition: transform var(--dur-ui) var(--ease-out-expo), color var(--dur-micro) var(--ease-out-quart); }
.svc-preview { display: none; }

/* ============ БРИФ ============ */
.brief { display: grid; gap: var(--space-lg); padding-block: var(--space-section-lg) var(--space-section-sm); }
.brief__intro h2 { margin-block-end: var(--space-sm); }
.brief__intro .lead { margin-block-end: var(--space-md); }
.brief__ig { color: var(--color-muted); }
.bf {
  --st-color: var(--color-muted);
  --st-opacity: 0.35;
  background: color-mix(in oklch, var(--color-surface) 66%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-sm);
  scroll-margin-top: var(--space-md);
}
.bf__top { display: grid; gap: var(--space-xs); margin-block-end: var(--space-md); }
.bf__count { margin: 0; }
.bf__progress {
  --p: 25%;
  position: relative;
  height: var(--stitch-w);
  background: linear-gradient(90deg, var(--color-hairline) var(--stitch-len), transparent 0) 0 0 / var(--stitch-period) 100% repeat-x;
}
.bf__seam {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-thread) var(--stitch-len), transparent 0) 0 0 / var(--stitch-period) 100% repeat-x;
  clip-path: inset(0 calc(100% - var(--p)) 0 0);
  transition: clip-path var(--dur-ui) var(--ease-signature);
}
.bf__step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-2xs); }
.bf__legend {
  padding: 0;
  margin-block-end: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-title);
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}
.bf__label { font-size: var(--text-small); color: var(--color-muted); margin-block-start: var(--space-xs); }
.bf__opt { opacity: 0.6; }
.bf__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8em 1em;
  font: inherit;
  color: var(--color-text);
  background: var(--color-elevated);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-micro) var(--ease-out-quart);
}
.bf__input::placeholder { color: var(--color-muted); opacity: 0.6; }
.bf__input:focus { border-color: var(--color-accent); }
.bf__input[aria-invalid="true"] { border-color: var(--color-error); }
textarea.bf__input { resize: vertical; min-height: 6.5rem; }
.bf__err { color: var(--color-error); font-size: var(--text-small); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chips--pattern { margin-block-end: var(--space-xs); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45em 1em;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  transition: background-color var(--dur-micro) var(--ease-out-quart), border-color var(--dur-micro) var(--ease-out-quart), color var(--dur-micro) var(--ease-out-quart), transform var(--dur-micro) var(--ease-out-quart);
}
.chip input:checked + span { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.chip input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.chip:active span { transform: scale(0.97); }
.chips[aria-invalid="true"] .chip span { border-color: var(--color-error); }
.consent { display: flex; align-items: flex-start; gap: var(--space-xs); margin-block-start: var(--space-xs); font-size: var(--text-small); color: var(--color-muted); cursor: pointer; }
.consent input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0.15em 0 0; accent-color: var(--color-accent); }
.consent a { color: var(--color-text); }
.bf__nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); margin-block-start: var(--space-md); }
.bf__back { margin-inline-end: auto; min-height: 2.75rem; padding: 0; background: none; border: 0; color: var(--color-muted); font: inherit; cursor: pointer; }
.bf__done { display: grid; gap: var(--space-sm); }
.bf__done-title { margin: 0; }
.bf__done-text { color: var(--color-muted); margin: 0; }
.bf__text {
  margin: 0;
  padding: var(--space-sm);
  max-height: 16rem;
  overflow: auto;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: var(--lh-body);
  white-space: pre-wrap;
  color: var(--color-muted);
}
.bf__done-cta { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.bf[data-done] > :not(.bf__done) { display: none; }

/* ============ ОСТАНОВКИ С WHATSAPP ============ */
/* Слово владельца 15.10.2026: «добавь СТА еще 4 между окнами и в пустые».
   Строка и одна кнопка; короткий стежок сверху ведёт ту же нитку, что швы между секциями. */
.stop {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
}
.stop::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6rem;
  height: var(--stitch-w);
  background: linear-gradient(90deg, var(--color-thread) var(--stitch-len), transparent 0) 0 0 / var(--stitch-period) 100% repeat-x;
}
.stop__line { margin: 0; max-width: var(--measure-tight); font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--color-text); }
.stop--wheels { width: min(100% - var(--gutter) * 2, var(--page-max)); margin-inline: auto; margin-block-start: 0; }

/* ============ ПОДВАЛ ============ */
.foot { padding-block: var(--space-section-md) var(--space-lg); overflow: hidden; }
.foot__mark { margin: 0 0 var(--space-lg); max-width: none; font-size: var(--text-giant); line-height: 0.8; letter-spacing: -0.045em; white-space: nowrap; }
.foot__art { font-family: var(--font-display); font-weight: 800; }
.foot__stitch { font-family: var(--font-text); font-style: italic; color: var(--color-thread); letter-spacing: -0.03em; }
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  padding-block-start: var(--space-sm);
  font-size: var(--text-small);
  color: var(--color-muted);
  background: linear-gradient(90deg, var(--color-muted) var(--st-len), transparent 0) 0 0 / calc(var(--st-len) + var(--st-gap)) 1px repeat-x;
}
.foot__row p { margin: 0; }
.foot__link { color: var(--color-text); text-decoration: none; }
.foot--min { padding-block: var(--space-lg); }

/* Док-кнопка на телефоне: появляется, когда ни первый экран, ни бриф не видны. */
:root .dock {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: flex;
  opacity: 0;
  transform: translateY(calc(100% + var(--space-md)));
  pointer-events: none;
  box-shadow: 0 20px 40px -12px var(--shadow-color);
  transition: transform var(--dur-ui) var(--ease-out-expo), opacity var(--dur-ui) var(--ease-out-quart);
}
:root[data-dock] .dock { opacity: 1; transform: none; pointer-events: auto; }

/* ============ ПОЛИТИКА ============ */
.legal { width: min(100% - var(--gutter) * 2, 46rem); margin-inline: auto; padding-block: var(--space-xl) var(--space-section-md); }
.legal__title { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.legal h2 { font-size: var(--text-title); line-height: var(--lh-title); letter-spacing: var(--track-title); margin-block-start: var(--space-lg); }
.legal p:not(.lead) { color: var(--color-muted); }
/* 404: та же раскладка, что у политики, плюс две кнопки */
.lost { min-height: 62vh; }
.lost__code { margin: 0 0 var(--space-xs); color: var(--color-thread); letter-spacing: var(--track-caps); }
.lost__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); }

/* ============ ДЕСКТОП ============ */
@media (min-width: 600px) {
  .bf { padding: var(--space-lg); }
  .manifesto__film { width: 56%; }

  /* Планшет: кейсы и мозаика уже на сетке 12, процесс текстом рядом с кадром. */
  .case { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-md); row-gap: var(--space-md); }
  .case + .case { margin-block-start: var(--space-3xl); }
  .case--a .case__main { grid-column: 1 / 9; grid-row: 1 / 3; }
  .case--a .case__meta { grid-column: 9 / 13; grid-row: 1; align-self: end; }
  .case--a .case__pair { grid-column: 9 / 13; grid-row: 2; }
  .case--a.case--flip .case__main { grid-column: 5 / 13; }
  .case--a.case--flip .case__meta,
  .case--a.case--flip .case__pair { grid-column: 1 / 5; }
  .case--b .case__main { grid-column: 1 / 5; grid-row: 1 / 3; }
  .case--b .case__meta { grid-column: 6 / 12; grid-row: 1; align-self: end; }
  .case--b .case__wide { grid-column: 6 / 13; grid-row: 2; }
  .case--b.case--flip .case__main { grid-column: 7 / 13; }
  .case--b.case--flip .case__meta { grid-column: 1 / 6; }
  .case--b.case--flip .case__pair { grid-column: 1 / 7; grid-row: 2; }
  .case--c .case__meta { grid-column: 1 / 6; grid-row: 1; align-self: end; }
  .case--c > .trip-1 { grid-column: 1 / 6; grid-row: 2; }
  .case--c > .trip-2 { grid-column: 6 / 10; grid-row: 1 / 3; align-self: start; margin-block-start: var(--space-xl); }
  .case--c > .trip-3 { grid-column: 10 / 13; grid-row: 1 / 3; align-self: start; }
  .case--c > .stop { grid-column: 6 / 13; grid-row: 3; margin-block-start: 0; }

  .mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(4.5rem, 7vw, 7.5rem); grid-auto-flow: row; gap: var(--space-sm); margin-block-start: var(--space-3xl); }
  .tile img { aspect-ratio: auto; }
  .m-door { grid-column: 1 / 8; grid-row: 1 / 4; }
  .m-ferrari { grid-column: 8 / 11; grid-row: 1 / 6; }
  .m-ghost { grid-column: 11 / 13; grid-row: 1 / 6; }
  .m-bmw { grid-column: 1 / 4; grid-row: 4 / 9; }
  .m-seat { grid-column: 4 / 8; grid-row: 4 / 7; }
  .m-olive { grid-column: 8 / 13; grid-row: 6 / 9; }
  .m-star { grid-column: 4 / 8; grid-row: 7 / 9; }

  .wheels__track { grid-auto-columns: 42vw; }

  .book { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-lg); align-items: end; }
  .book__tabs { grid-column: 1 / -1; }

  .step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-lg); align-items: center; }
  .step__shot { margin: 0; }
}

@media (min-width: 900px) {
  .top__nav { display: flex; gap: var(--space-md); margin-inline: auto var(--space-md); }
  .top__nav a { font-size: var(--text-small); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; color: var(--color-text); opacity: 0.78; }

  .hero { grid-template-columns: 7fr 5fr; grid-template-rows: 1fr; min-height: 100dvh; }
  .hero__media { grid-column: 2; grid-row: 1; }
  .hero__media img { position: absolute; inset: 0; object-position: 59.8% 100%; }
  .hero__media { -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 24%); mask-image: linear-gradient(90deg, transparent 0%, black 24%); }
  .hero__media::after { background: linear-gradient(180deg, var(--color-scrim) 0%, transparent 24%); }
  :root:not([data-mood]) .aura__blob--amber,
  :root[data-mood="hero"] .aura__blob--amber { transform: translate(58vw, 52vh) scale(0.9); }
  .hero__text {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(var(--header-h) + var(--space-lg)) var(--space-lg) var(--space-xl) var(--gutter);
  }
  .hero__title { margin: 0; }

  .hero__thread {
    display: block;
    position: absolute;
    top: 100%;
    left: calc(58.333% + 41.667% * 0.598);
    width: var(--needle-len);
    height: calc(var(--strap-h) + var(--space-3xl));
    translate: -50% 0;
    pointer-events: none;
  }
  .hero__thread-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - var(--stitch-w) / 2);
    width: var(--stitch-w);
    background: linear-gradient(180deg, var(--color-thread) var(--stitch-len), transparent 0) 0 0 / 100% var(--stitch-period) repeat-y;
    filter: drop-shadow(1px 0 0 var(--color-thread-hole));
    transition: clip-path var(--dur-sew-long) var(--ease-in-out-soft);
  }
  .hero__needle-track { position: absolute; inset: 0; transition: transform var(--dur-sew-long) var(--ease-in-out-soft); }
  .hero__needle {
    position: absolute;
    left: calc(50% - var(--needle-w) / 2);
    bottom: calc(var(--needle-len) * -0.6);
    width: var(--needle-w);
    height: var(--needle-len);
    border-radius: var(--radius-xs);
    background: linear-gradient(180deg, transparent, var(--color-needle) 40%, var(--color-needle));
  }
  [data-motion-ready] .hero__thread:not([data-shown]) .hero__thread-line { clip-path: inset(0 0 100% 0); }
  [data-motion-ready] .hero__thread:not([data-shown]) .hero__needle-track { transform: translateY(-100%); }

  .manifesto { grid-template-columns: 7fr 4fr; align-items: end; column-gap: var(--space-xl); }
  .manifesto__film { width: 100%; }

  .patterns__head { grid-template-columns: 7fr 5fr; align-items: end; column-gap: var(--space-xl); }
  .book { grid-template-columns: 4fr 5fr 3fr; align-items: end; column-gap: var(--space-lg); }
  .book__tabs { grid-column: auto; display: grid; align-self: start; gap: var(--space-3xs); margin: 0; padding: 0; overflow: visible; }
  .book__tab { grid-template-columns: 3.25rem 1fr; gap: var(--space-sm); width: 100%; padding: var(--space-3xs); font-size: var(--text-body); }
  .book__tab img { width: 3.25rem; height: 3.25rem; }

  .wheels__track {
    grid-auto-columns: clamp(14rem, 24vw, 21rem);
    padding-inline: max(var(--gutter), (100% - var(--page-max)) / 2 + var(--gutter));
  }

  .process__body { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--space-xl); align-items: start; }
  .process__body > .stop { grid-column: 2; }
  .process__frame {
    display: block;
    position: sticky;
    top: 12vh;
    height: 76vh;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }
  .process__shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(100% 0 0 0);
    transition: clip-path var(--dur-scene) var(--ease-signature);
  }
  .process__shot[data-on] { clip-path: inset(0 0 0 0); }
  .process__counter {
    position: absolute;
    left: var(--space-md);
    bottom: var(--space-md);
    z-index: 2;
    margin: 0;
    padding: var(--space-3xs) var(--space-2xs);
    background: var(--color-scrim);
    border-radius: var(--radius-xs);
    color: var(--color-text);
  }
  .process__steps { gap: 0; }
  .step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
  .step__shot { display: none; }
  [data-process-live] .step { opacity: 0.3; transition: opacity var(--dur-ui) var(--ease-out-quart); }
  [data-process-live] .step[data-active] { opacity: 1; }

  .svc {
    grid-template-columns: 4rem minmax(0, 1.15fr) minmax(0, 1fr) auto 3rem;
    grid-template-areas: "num name desc thumb arrow";
    padding-block: var(--space-md);
  }
  .svc__desc { font-size: var(--text-body); }

  .brief { grid-template-columns: 5fr 7fr; column-gap: var(--space-xl); align-items: start; }
  .brief__intro { position: sticky; top: var(--space-xl); }

  :root .dock { display: none; }
}

/* С 1280px пустой угол под кадрами GT3 вмещает остановку (замер 15.10: запас над кадром 44-64px на 1280-1920;
   на 900-1200 наезжала или касалась кадра) — прижимаем её к низу второй строки. */
@media (min-width: 1280px) {
  .case--c > .stop { grid-row: 2; align-self: end; }
}

/* ============ НАВЕДЕНИЕ: только мышь ============ */
@media (hover: hover) and (pointer: fine) {
  :root .btn:hover { background: var(--color-accent-hover); }
  :root .btn--ghost:hover { background: var(--color-elevated); color: var(--color-accent); }
  .top__nav a:hover { opacity: 1; color: var(--color-thread); }
  .tile:hover img { transform: scale(1.03); }
  .book__tab:hover { color: var(--color-text); }
  .book__tab:hover img { transform: scale(1.05); }
  .book[data-3d]:not([data-view="photo"]) .book__photo:has(.book__flip:hover) img {
    transform: translate(calc(var(--space-sm) * -1), calc(var(--space-sm) * -1)) rotate(1deg) scale(0.36);
  }
  .wheels__btn:not(:disabled):hover { border-color: var(--color-accent); color: var(--color-accent); }
  .wheel:hover .wheel__cap { color: var(--color-text); }
  .svc__thumb { display: none; }
  .svc:hover .svc__name { transform: translateX(var(--space-xs)); color: var(--color-thread); }
  .svc:hover .svc__arrow { transform: translateX(var(--space-2xs)); color: var(--color-thread); }
  .chip:hover span { border-color: var(--color-accent); }
  .bf__back:hover { color: var(--color-text); }
  .foot__link:hover { color: var(--color-thread); }
}

/* Мышь на узком окне: миниатюры услуг скрыты, их колонку не держим пустой. */
@media (hover: hover) and (pointer: fine) and (max-width: 899.98px) {
  .svc { grid-template-columns: minmax(0, 1fr) 2rem; grid-template-areas: "num arrow" "name arrow" "desc arrow"; }
}

/* Превью кадра под курсором в списке услуг: только мышь и без просьбы не двигать. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .svc-preview {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--z-overlay);
    width: clamp(14rem, 19vw, 19rem);
    aspect-ratio: 4 / 5;
    pointer-events: none;
    opacity: 0;
    will-change: transform;
    transition: opacity var(--dur-ui) var(--ease-out-quart);
  }
  .svc-preview[data-active] { opacity: 1; }
  .svc-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: 0 30px 60px -20px var(--shadow-color);
    transform: scale(0.92);
    transition: transform var(--dur-ui) var(--ease-out-expo);
  }
  .svc-preview[data-active] img { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .seam__needle, .sew__needle, .hero__needle { display: none; }
  .book__photo img, .book__stage { transition-property: opacity, filter; }
}

/* Пятна задника дышат внутри сцены: только планшет и шире, на телефоне хватает смены сцен. */
@media (min-width: 600px) and (prefers-reduced-motion: no-preference) {
  .aura__blob { animation: aura-drift var(--dur-drift) var(--ease-in-out-soft) infinite alternate; }
  .aura__blob--ember { animation-name: aura-drift-b; animation-delay: calc(var(--dur-drift) / -3); }
  .aura__blob--steel { animation-direction: alternate-reverse; animation-delay: calc(var(--dur-drift) / -2); }
  .aura__blob--cognac { animation-name: aura-drift-b; animation-direction: alternate-reverse; }
}
@keyframes aura-drift { 0% { translate: 0 0; } 50% { translate: 7vw -5vh; } 100% { translate: -4vw 6vh; } }
@keyframes aura-drift-b { 0% { translate: 0 0; } 50% { translate: -6vw 4vh; } 100% { translate: 5vw -7vh; } }

/* Просьба системы о меньшей прозрачности: форма брифа на сплошной подложке. */
@media (prefers-reduced-transparency: reduce) {
  .book__flip-label { background: var(--color-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bf { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============ АНИМАЦИИ СТРАНИЦЫ ============
   Двигаем только transform (и его отдельные свойства rotate/scale/translate), opacity и clip-path.
   Всё, что привязано к скроллу, живёт под @supports: без поддержки страница просто стоит. */

/* Кинетический H1: буквы встают из плоскости. Слово целиком не рвётся переносом. */
.kin__w { display: inline-block; white-space: nowrap; }
.kin__c { display: inline-block; }

/* Нить прогресса сверху: прошивается вместе с прокруткой. Без поддержки скролл-таймлайна её нет. */
.progress { display: none; }

/* Нить вдоль шагов процесса: без поддержки скролл-таймлайна стоит целиком, как шов. */
.process__steps { position: relative; padding-inline-start: var(--space-md); view-timeline: --steps block; }
.process__steps::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--stitch-w);
  opacity: 0.6;
  pointer-events: none;
  background: linear-gradient(180deg, var(--color-thread) var(--stitch-len), transparent 0) 0 0 / 100% var(--stitch-period) repeat-y;
}

/* Блик под мышью на кадрах кейсов: слой добавляет site.js только для мыши. */
.glare {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--color-glare), transparent 55%);
  transition: opacity var(--dur-ui) var(--ease-out-quart);
}
.shot[data-tilting] .glare { opacity: 1; }
:is(.case, .case__pair) { perspective: var(--persp-wide); }
.case .shot { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .kin__c {
    transform-origin: 50% 100%;
    animation: kin-in var(--dur-reveal) var(--ease-out-expo) calc(var(--kin-d0) + var(--i) * var(--kin-step)) both;
  }
  .kin__w--slow .kin__c {
    animation-duration: var(--dur-scene);
    animation-timing-function: var(--ease-signature);
    animation-delay: calc(var(--kin-d1) + var(--i) * var(--kin-step-slow));
  }

  /* Фото героя оседает при загрузке (scale), а при прокрутке отстаёт от страницы (translate). */
  .hero__media img { animation: hero-settle var(--dur-settle) var(--ease-out-expo) both; }

  .foot__mark { perspective: var(--persp); }
  .foot__art, .foot__stitch { display: inline-block; transform-origin: 50% 100%; }
}

@keyframes kin-in {
  from { opacity: 0; transform: perspective(var(--persp)) translateY(0.42em) rotateX(-80deg); }
  to { opacity: 1; transform: perspective(var(--persp)) translateY(0) rotateX(0deg); }
}
@keyframes hero-settle { from { scale: 1.14; } to { scale: 1; } }

@supports (animation-timeline: scroll()) {
  .progress {
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-overlay);
    height: var(--stitch-w);
    pointer-events: none;
    background: linear-gradient(90deg, var(--color-thread) var(--stitch-len), transparent 0) 0 0 / var(--stitch-period) 100% repeat-x;
    animation: progress-run linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes progress-run { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media img {
      animation: hero-settle var(--dur-settle) var(--ease-out-expo) both, hero-drift linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100svh;
    }

    /* Кадры кейсов плывут внутри рамки медленнее страницы. */
    .case .shot img {
      scale: 1.12;
      animation: shot-drift linear both;
      animation-timeline: view();
    }

    /* Мозаика: плитка лежит на спине и встаёт, пока въезжает в экран. */
    .mosaic { perspective: var(--persp-wide); }
    .tile {
      transform-origin: 50% 100%;
      animation: tile-stand linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    /* Фильм манифеста поднимается, как экран. */
    .manifesto { perspective: var(--persp-wide); }
    .manifesto__film {
      transform-origin: 50% 100%;
      animation: film-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    /* Рули: лента-коверфлоу. Край ленты повёрнут, кадр в поле зрения стоит прямо. */
    .wheel figure {
      animation: wheel-flow linear both;
      animation-timeline: view(inline);
    }

    /* Нить процесса: кончик всегда на середине экрана, пока читаешь шаги. */
    .process__steps::before {
      animation: thread-run linear both;
      animation-timeline: --steps;
      animation-range: entry 50% exit 50%;
    }

    /* Вордмарк подвала встаёт из плоскости: сначала ART, следом stitch. */
    .foot__art, .foot__stitch {
      animation: mark-stand linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .foot__stitch { animation-range: entry 30% entry 100%; }
  }

  /* Бриф встаёт, как пюпитр: только шире 900, на телефоне форма с размытием подложки не крутится. */
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .brief { perspective: var(--persp-wide); }
    .bf {
      transform-origin: 50% 0;
      animation: bf-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

@keyframes hero-drift { from { translate: 0 0; } to { translate: 0 var(--hero-drift); } }
@keyframes shot-drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
@keyframes tile-stand { from { rotate: x 24deg; opacity: 0.4; } to { rotate: x 0deg; opacity: 1; } }
@keyframes film-rise { from { rotate: x 16deg; scale: 0.9; } to { rotate: x 0deg; scale: 1; } }
@keyframes wheel-flow {
  0% { transform: perspective(var(--persp)) rotateY(34deg) scale(0.86); opacity: 0.55; }
  38%, 62% { transform: perspective(var(--persp)) rotateY(0deg) scale(1); opacity: 1; }
  100% { transform: perspective(var(--persp)) rotateY(-34deg) scale(0.86); opacity: 0.55; }
}
@keyframes thread-run { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mark-stand { from { rotate: x 80deg; opacity: 0; } to { rotate: x 0deg; opacity: 1; } }
@keyframes bf-rise { from { rotate: x -12deg; translate: 0 var(--reveal-shift); } to { rotate: x 0deg; translate: 0 0; } }