/* ================================================================
   AILON — design system
   Источник: Ailon Design Strategy v2.0 + Visual Asset Pack v1.0
   UI: black / ivory / gray. Цвет приходит из арта и работ, не из интерфейса.
   ================================================================ */

/* ---------- tokens ---------- */
:root{
  /* палитра пака */
  --black:#050505;
  --near-black:#111214;
  --ivory:#f2eddf;
  --gray:#b7b5ae;
  --line:#343434;
  --cobalt:#123dce;
  --deep-blue:#071e59;
  --crimson:#d91c32;
  --pink:#e6a5c3;

  /* производные для UI */
  --ivory-70:rgba(242,237,223,.7);
  --ivory-45:rgba(242,237,223,.45);
  --ivory-16:rgba(242,237,223,.16);
  --ivory-08:rgba(242,237,223,.08);

  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* fluid поля: 20px на mobile → 64px на desktop */
  --pad:clamp(1.25rem,1rem + 2.2vw,4rem);
  --maxw:1600px;

  /* вертикальный ритм крупными паузами */
  --sp-s:clamp(2.5rem,2rem + 2.5vw,4.5rem);
  --sp-m:clamp(4.5rem,3.5rem + 5vw,9rem);
  --sp-l:clamp(7rem,5rem + 9vw,15rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--ivory);
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(.9375rem,.875rem + .25vw,1.0625rem);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
::selection{background:var(--ivory);color:var(--black)}

:focus-visible{
  outline:2px solid var(--ivory);
  outline-offset:3px;
  border-radius:1px;
}
.skip{
  position:absolute;left:var(--pad);top:-100px;z-index:400;
  background:var(--ivory);color:var(--black);padding:12px 20px;
  font-size:.875rem;transition:top .2s var(--ease);
}
.skip:focus{top:16px}

/* screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
}
.section{padding-block:var(--sp-l)}
.section--tight{padding-block:var(--sp-m)}
.bleed{width:100%}

/* 12 / 8 / 4 колонки */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,.6rem + 1.6vw,2.5rem)}
@media(max-width:1023px){.grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:719px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- typography ---------- */
.display{
  font-weight:300;
  font-size:clamp(2.5rem,1.4rem + 5.2vw,7rem);
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.display--xl{font-size:clamp(3rem,1.6rem + 6.6vw,9rem);line-height:.98;letter-spacing:-.04em}
.heading{
  font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.9vw,2.75rem);
  line-height:1.14;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.lead{
  font-weight:300;
  font-size:clamp(1.0625rem,.95rem + .7vw,1.5rem);
  line-height:1.42;
  letter-spacing:-.012em;
  max-width:34ch;
}
.body{color:var(--gray);max-width:62ch}
.label{
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ivory-45);
}
.num{
  font-weight:300;
  font-size:clamp(2rem,1.2rem + 3.4vw,4.5rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ivory-16);
  font-variant-numeric:tabular-nums;
}
.muted{color:var(--gray)}

/* стрелка-ссылка — единственный «UI-жест» */
.arrow{
  display:inline-flex;align-items:baseline;gap:.55em;
  font-size:.9375rem;letter-spacing:.01em;
  padding-block:.35em;
}
.arrow::after{
  content:"↗";
  font-size:.85em;
  transition:transform .35s var(--ease);
}
.arrow--down::after{content:"↓"}
.arrow--right::after{content:"→"}
.arrow:hover::after,.arrow:focus-visible::after{transform:translate(.18em,-.18em)}
.arrow--right:hover::after,.arrow--right:focus-visible::after{transform:translateX(.28em)}
.arrow--down:hover::after{transform:translateY(.22em)}

.underline-link{
  position:relative;display:inline-block;
}
.underline-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-.18em;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.underline-link:hover::after,.underline-link:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  padding:clamp(1.1rem,.9rem + .8vw,1.75rem) var(--pad);
  display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);
  transition:background-color .5s var(--ease);
}
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(5,5,5,.55),rgba(5,5,5,0));
  opacity:0;transition:opacity .5s var(--ease);
}
.hdr.is-past-hero::before{opacity:1}
.hdr-mark{flex:0 0 auto;display:flex;align-items:center}
.hdr-mark svg,.hdr-mark img{width:clamp(84px,7vw,116px);height:auto}
.hdr-nav{
  display:flex;align-items:center;gap:clamp(1.25rem,2.6vw,2.75rem);
  margin-inline:auto;
  font-size:.9375rem;
}
.hdr-nav a[aria-current="page"]{color:var(--ivory)}
.hdr-nav a:not([aria-current="page"]){color:var(--ivory-70)}
.hdr-contact{flex:0 0 auto;font-size:.9375rem}
.burger{display:none;flex:0 0 auto;margin-left:auto;font-size:.9375rem;letter-spacing:.02em;min-height:44px;padding-inline:4px}
@media(max-width:899px){
  .hdr-nav,.hdr-contact{display:none}
  .burger{display:block}
}

/* ---------- mobile menu ---------- */
.menu[hidden]{display:none}
.menu{
  position:fixed;inset:0;z-index:80;background:var(--black);
  display:flex;flex-direction:column;
  padding:clamp(1.1rem,.9rem + .8vw,1.75rem) var(--pad) var(--pad);
}
.menu-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.menu-close{font-size:.9375rem;min-height:44px;padding-inline:4px}
.menu-nav{display:flex;flex-direction:column;gap:.35em;margin-block:auto;padding-block:var(--sp-s)}
.menu-nav a{
  font-weight:300;font-size:clamp(2rem,1.2rem + 4.4vw,3.25rem);
  line-height:1.16;letter-spacing:-.03em;
  padding-block:.12em;
}
.menu-foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;color:var(--gray);font-size:.9375rem}

/* ================================================================
   01 — HERO. Раскрытие видео по прогрессу прокрутки.
   Механика снята с voskhod.agency инструментально: sticky-пин,
   карточка 16:10 линейно растёт до full-bleed, состояние обратимо.
   --p  — общий прогресс пина 0..1 (пишет JS)
   --pc — прогресс роста карточки
   --pt — прогресс ухода типографики
   ================================================================ */
.hero{
  --p:0;--pc:0;--pt:0;
  --card-w0:21vw;
  --card-cy0:57%;
  position:relative;
  height:300svh;              /* пин длится 200svh прокрутки */
}
@supports not (height:100svh){.hero{height:300vh}}

.hero-pin{
  position:sticky;top:0;
  height:100svh;
  overflow:clip;
  isolation:isolate;
}
@supports not (height:100svh){.hero-pin{height:100vh}}
.hero-stage{position:relative;width:100%;height:100%}

/* подложка — утверждённый постер эмблемы */
.hero-bed{position:absolute;inset:0;z-index:0}
.hero-bed img{width:100%;height:100%;object-fit:contain;object-position:center;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 86%,transparent 100%)}
.hero-bed::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(46% 34% at 50% 52%,rgba(5,5,5,.72) 0%,rgba(5,5,5,.3) 55%,rgba(5,5,5,0) 80%),
    linear-gradient(180deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,0) 24%,rgba(5,5,5,0) 66%,rgba(5,5,5,.88) 100%);
}
/* подложка гаснет, когда карточка почти заполнила кадр */
.hero-bed{opacity:calc(1 - var(--pc) * .55)}

/* карточка видео: центр интерполируется, размер линейно растёт */
.hero-card{
  position:absolute;z-index:1;
  left:50%;
  top:calc(var(--card-cy0) + (50% - var(--card-cy0)) * var(--pc));
  transform:translate(-50%,-50%);
  width:calc(var(--card-w0) + (100vw - var(--card-w0)) * var(--pc));
  height:calc(var(--card-w0) * 10 / 16 + (100svh - var(--card-w0) * 10 / 16) * var(--pc));
  overflow:hidden;
  background:var(--near-black);
  opacity:clamp(0,calc(var(--pc) * 14),1);
  will-change:width,height,top;
}
@supports not (height:100svh){
  .hero-card{height:calc(var(--card-w0) * 10 / 16 + (100vh - var(--card-w0) * 10 / 16) * var(--pc))}
}
.hero-card video{width:100%;height:100%;object-fit:cover;display:block}
/* лёгкая вуаль, пока карточка мала — чтобы кадр не спорил с эмблемой */
.hero-card-veil{
  position:absolute;inset:0;pointer-events:none;
  background:rgba(5,5,5,.42);
  opacity:calc(1 - var(--pc));
}

/* типографика: держится в кадре, затем уходит вверх и уменьшается */
.hero-type{
  position:absolute;z-index:2;inset:0;
  display:grid;place-items:center;
  padding:var(--pad);
  transform:translateY(calc(var(--pt) * -14vh)) scale(calc(1 - var(--pt) * .38));
  opacity:calc(1 - var(--pt) * .12);
  will-change:transform;
}
.hero-wordmark{margin:0;width:clamp(260px,44vw,660px)}
.hero-wordmark svg{width:100%;height:auto;
  filter:drop-shadow(0 2px 26px rgba(0,0,0,.55))}
.hero-tagline{
  margin-top:clamp(1.6rem,1rem + 2.6vw,3.25rem);
  text-align:center;font-weight:300;
  font-size:clamp(1rem,.86rem + .82vw,1.6rem);
  letter-spacing:-.01em;color:var(--ivory-70);
  opacity:calc(1 - var(--pt) * 1.6);
}
.hero-type > *{grid-area:1/1}
.hero-type{grid-auto-flow:row}
.hero-type{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* боковые фразы — появляются один раз в начале пина, уходят с ростом карточки */
.hero-aside{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.5rem);
  font-size:clamp(.625rem,.58rem + .16vw,.75rem);
  font-weight:500;letter-spacing:.16em;line-height:1.75;
  color:var(--ivory-70);text-transform:uppercase;
  opacity:calc(1 - var(--pt) * 1.8);
}
.hero-aside p{margin:0}
.hero-aside i{display:block;height:1px;background:var(--ivory-45);
  width:clamp(28px,4vw,64px);transform:scaleX(0);
  transition:transform .7s var(--ease) var(--d,0ms)}
.hero-aside--left{left:var(--pad);top:50%;transform:translateY(-50%)}
.hero-aside--left i{transform-origin:left}
.hero-aside--right{right:var(--pad);top:50%;transform:translateY(-50%);flex-direction:row-reverse;text-align:right}
.hero-aside--right i{transform-origin:right}
.hero-aside--low{right:var(--pad);bottom:clamp(4.5rem,12vh,9rem);flex-direction:row-reverse;text-align:right}
.hero-aside--low i{transform-origin:right}
.hero-aside .mask{display:block;overflow:hidden}
.hero-aside .mask > span{display:block;transform:none;opacity:1;
  transition:transform .64s var(--ease) var(--d,0ms),opacity .64s var(--ease) var(--d,0ms)}
.js .hero-aside .mask > span{transform:translateY(10px);opacity:0}
.js .hero-aside i{transform:scaleX(0)}
.hero.is-revealed .hero-aside .mask > span{transform:none;opacity:1}
.hero.is-revealed .hero-aside i{transform:scaleX(1)}

.hero-scroll{
  position:absolute;left:var(--pad);bottom:clamp(1.5rem,4vh,2.75rem);z-index:2;
  display:flex;align-items:center;gap:.9rem;
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-45);
  opacity:calc(1 - var(--p) * 4);
}
.hero-scroll i{display:block;width:1px;height:34px;background:var(--ivory-45);overflow:hidden;position:relative}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--ivory);
  animation:trace 2.6s var(--ease-io) infinite}
@keyframes trace{0%{transform:translateY(-100%)}55%{transform:translateY(100%)}100%{transform:translateY(100%)}}

.hero-pause{
  position:absolute;right:var(--pad);bottom:clamp(1.5rem,4vh,2.75rem);z-index:3;
  width:44px;height:44px;display:grid;place-items:center;
  color:var(--ivory-45);transition:color .3s var(--ease);
  opacity:var(--pc);
}
.hero-pause:hover,.hero-pause:focus-visible{color:var(--ivory)}
.hero-pause svg{width:14px;height:16px;fill:currentColor}
.hero-pause .i-play{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}
.hero-pause[aria-pressed="true"] .i-pause{display:none}

@media(max-width:1279px){
  .hero-aside--left,.hero-aside--right{top:auto;bottom:clamp(6rem,16vh,10rem);transform:none}
  .hero-aside--low{display:none}
}
@media(max-width:899px){
  .hero{--card-w0:62vw;--card-cy0:62%}
  .hero-bed img{object-fit:cover}
  .hero-aside--right{display:none}
  .hero-aside--left{left:50%;transform:translateX(-50%);bottom:clamp(5rem,14vh,8rem);
    flex-direction:column;text-align:center;gap:.65rem}
  .hero-aside--left p{display:flex;gap:.6em}
  .hero-aside--left i{width:44px;transform-origin:center}
  .hero-scroll{left:50%;transform:translateX(-50%)}
  /* mobile-v2: тёмный центр картинки на ~40% высоты; логотип ставим по геометрии
     кадра (cover 853×1844 ≈ 390×844), без чёрной плашки */
  .hero-type{justify-content:flex-start;padding-top:calc(40svh - 26px)}
  .hero-tagline{margin-top:clamp(1.4rem,5svh,2.6rem);margin-bottom:auto}
  .hero-bed::after{background:linear-gradient(180deg,rgba(5,5,5,.45) 0%,rgba(5,5,5,0) 22%,rgba(5,5,5,0) 70%,rgba(5,5,5,.85) 100%)}
}
@media(max-width:389px){.hero-aside--left{display:none}}

/* ================================================================
   02 — SELECTED WORK
   ================================================================ */
.work-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:var(--sp-s)}

.work-duet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,1rem + 3vw,5rem);align-items:end}
.work-duet .work-item:nth-child(1){grid-column:1/8}
.work-duet .work-item:nth-child(2){grid-column:9/13}
.work-full{margin-top:var(--sp-m)}
@media(max-width:899px){
  .work-duet{grid-template-columns:1fr;gap:var(--sp-m)}
  .work-duet .work-item:nth-child(1),.work-duet .work-item:nth-child(2){grid-column:auto}
}

.work-item a{display:block}
.work-media{
  position:relative;overflow:hidden;background:var(--near-black);
  aspect-ratio:var(--ar,16/10);
}
.work-media img,.work-media video{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease),opacity .5s var(--ease);
}
.work-item a:hover .work-media img,.work-item a:focus-visible .work-media img{transform:scale(1.028)}
.work-media video{position:absolute;inset:0;opacity:0}
.work-media video.is-playing{opacity:1}
.work-meta{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:clamp(1rem,.8rem + .8vw,1.6rem)}
.work-title{font-weight:400;font-size:clamp(1.25rem,1rem + 1.1vw,2rem);line-height:1.15;letter-spacing:-.025em}
.work-role{color:var(--gray);font-size:.9375rem;max-width:40ch;margin-top:.5em}
.work-result{color:var(--ivory);font-size:.9375rem;margin-top:.75em}
.work-tag{color:var(--ivory-45);font-size:.8125rem;letter-spacing:.08em;white-space:nowrap}

/* честный внутренний плейсхолдер — только dev */
.slot{
  border:1px dashed var(--crimson);
  padding:clamp(1.25rem,1rem + 1.6vw,2.5rem);
  color:var(--gray);
  font-size:.875rem;line-height:1.6;
  background:rgba(217,28,50,.05);
}
.slot b{display:block;color:var(--crimson);letter-spacing:.14em;text-transform:uppercase;font-size:.6875rem;margin-bottom:.9em;font-weight:600}
.slot code{color:var(--ivory);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem}

/* ================================================================
   03 — MANIFESTO
   ================================================================ */
.manifesto{padding-block:calc(var(--sp-l) * 1.25)}
.manifesto p{
  font-weight:300;
  font-size:clamp(2.25rem,1.1rem + 5.6vw,6.5rem);
  line-height:1.05;
  letter-spacing:-.038em;
  max-width:18ch;
}
.manifesto .beat{display:block;overflow:hidden}
.manifesto .beat > span{
  display:block;
  transform:none;
  transition:transform 1s var(--ease) var(--d,0ms);
}
.manifesto p.is-in .beat > span{transform:none}

/* ================================================================
   04 — CAPABILITIES
   ================================================================ */
.caps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:start}
.caps-list{grid-column:1/8}
.caps-stage{grid-column:8/13;position:sticky;top:18vh;aspect-ratio:1/1;display:grid;place-items:center}
.caps-stage img{
  grid-area:1/1;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(.985);
  transition:opacity .6s var(--ease),transform .8s var(--ease);
}
.caps-stage img.is-active{opacity:1;transform:none}

.cap{border-top:1px solid var(--line)}
.cap:last-child{border-bottom:1px solid var(--line)}
.cap-head{
  width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(1.4rem,1rem + 1.8vw,2.6rem);text-align:left;
}
.cap-name{
  font-weight:300;
  font-size:clamp(1.75rem,1.1rem + 2.9vw,3.5rem);
  line-height:1.06;letter-spacing:-.03em;
  color:var(--ivory-45);
  transition:color .4s var(--ease);
}
.cap.is-active .cap-name,.cap-head:hover .cap-name,.cap-head:focus-visible .cap-name{color:var(--ivory)}
.cap-index{color:var(--ivory-16);font-size:.75rem;letter-spacing:.14em;flex:0 0 auto}
.cap-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s var(--ease)}
.cap-body > .cap-body-in{overflow:hidden;min-height:0}
.js .cap-body{grid-template-rows:0fr}
.js .cap.is-active .cap-body{grid-template-rows:1fr}
.cap-body-in{padding-bottom:clamp(1.4rem,1rem + 1.8vw,2.6rem);display:grid;gap:1.25rem}
.cap-desc{color:var(--gray);max-width:46ch}
.cap-obj{display:none;height:auto;justify-self:start;align-self:start}

@media(max-width:1023px){
  .caps-list{grid-column:1/9}
  .caps-stage{display:none}
  .cap-obj{display:block;width:min(56%,220px);height:auto;margin-top:.25rem}
}
@media(max-width:719px){.caps-list{grid-column:1/5}}

/* ================================================================
   05 — SIGNATURE SCENE
   ================================================================ */
.sig{position:relative;min-height:min(100svh,1040px);display:grid;isolation:isolate;overflow:clip}
.sig-media{position:absolute;inset:0;z-index:0;display:grid;place-items:center}
.sig-media img,.sig-media video{
  grid-area:1/1;
  width:auto;height:132%;max-width:none;
  object-fit:contain;
  transform:translateX(22%);
}
.sig-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--black) 0%,rgba(5,5,5,.92) 24%,rgba(5,5,5,.1) 58%,rgba(5,5,5,0) 100%);
  pointer-events:none;
}
.sig-media .frame-end{opacity:1;transition:opacity 1.6s var(--ease-io)}
.sig.is-in .frame-end{opacity:1}
.sig-inner{position:relative;z-index:1;grid-area:1/1;display:flex;align-items:center;width:100%}
.sig-text{max-width:min(32%,30ch)}
.sig-text p{font-weight:300;font-size:clamp(1.75rem,1.1rem + 3vw,4rem);line-height:1.06;letter-spacing:-.035em}
@media(max-width:1023px){
  .sig-media img,.sig-media video{height:auto;width:135%;transform:translateX(16%) translateY(6%)}
  .sig-media::after{background:linear-gradient(180deg,var(--black) 0%,rgba(5,5,5,.72) 42%,rgba(5,5,5,.1) 100%)}
  .sig-inner{align-items:flex-start;padding-top:var(--sp-m)}
  .sig-text{max-width:26ch}
}

/* ================================================================
   06 — PROCESS
   ================================================================ */
.proc{border-top:1px solid var(--line)}
.proc-step{
  display:grid;grid-template-columns:auto 1fr minmax(0,42%);
  gap:clamp(1rem,.7rem + 2vw,3.5rem);align-items:baseline;
  padding-block:clamp(1.6rem,1.1rem + 2.2vw,3rem);
  border-bottom:1px solid var(--line);
}
.proc-step h3{font-weight:400;font-size:clamp(1.375rem,1rem + 1.7vw,2.5rem);letter-spacing:-.025em;line-height:1.1}
.proc-step .num{min-width:2.2ch}
.proc-step p{color:var(--gray)}
@media(max-width:899px){
  .proc-step{grid-template-columns:auto 1fr;gap:.75rem 1.5rem}
  .proc-step p{grid-column:2/3}
}

/* ================================================================
   08 — PEOPLE
   ================================================================ */
.people{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,1rem + 3vw,4rem)}
.person{grid-column:span 4}
.person-photo{aspect-ratio:4/5;background:var(--near-black);overflow:hidden}
.person-photo img{width:100%;height:100%;object-fit:cover}
.person h3{font-weight:400;font-size:1.375rem;letter-spacing:-.02em;margin-top:1.1rem}
.person p{color:var(--gray);font-size:.9375rem;margin-top:.35em}
@media(max-width:1023px){.person{grid-column:span 4}}
@media(max-width:719px){.person{grid-column:span 4}.people{gap:var(--sp-s)}}

/* ================================================================
   09 — FINAL CTA
   ================================================================ */
.cta{position:relative;isolation:isolate;overflow:clip;min-height:min(96svh,1000px);display:grid}
.cta-media{position:absolute;inset:0;z-index:0}
.cta-media img,.cta-media video{width:100%;height:100%;object-fit:cover;object-position:right center}
.cta-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--black) 0%,rgba(5,5,5,.94) 40%,rgba(5,5,5,.35) 70%,rgba(5,5,5,0) 100%);
}
.cta-inner{position:relative;z-index:1;grid-area:1/1;display:flex;align-items:center;width:100%;padding-block:var(--sp-m)}
.cta-col{width:min(52%,640px)}
.cta-col > p.body{margin-top:1.1rem}
@media(max-width:1023px){
  .cta-media img,.cta-media video{object-position:center bottom}
  .cta-media::after{background:linear-gradient(180deg,var(--black) 0%,rgba(5,5,5,.95) 46%,rgba(5,5,5,.4) 78%,rgba(5,5,5,.1) 100%)}
  .cta-inner{align-items:flex-start}
  .cta-col{width:100%;max-width:34rem}
}

/* ---------- form ---------- */
.form{margin-top:clamp(2rem,1.5rem + 2.4vw,3.5rem);max-width:34rem}
.field{margin-bottom:clamp(1.4rem,1.1rem + 1.2vw,2.2rem)}
.field label{display:block;font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-45);margin-bottom:.7em}
.field input,.field textarea{
  width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  padding:.55rem 0 .7rem;font-size:clamp(1rem,.94rem + .35vw,1.25rem);font-weight:300;
  outline:none;border-radius:0;transition:border-color .35s var(--ease);
  min-height:44px;
}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.45}
.field input::placeholder,.field textarea::placeholder{color:var(--ivory-16)}
.field input:hover,.field textarea:hover{border-bottom-color:var(--gray)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--ivory)}
.field[data-invalid] input,.field[data-invalid] textarea{border-bottom-color:var(--crimson)}
.field-err{display:block;color:var(--crimson);font-size:.8125rem;margin-top:.55em;min-height:1.2em}
.consent{display:flex;gap:.85rem;align-items:flex-start;color:var(--gray);font-size:.8125rem;line-height:1.55;margin-bottom:1.6rem}
.consent input{flex:0 0 auto;width:18px;height:18px;margin-top:.15em;accent-color:var(--ivory)}
.consent a{color:var(--ivory);text-decoration:underline;text-underline-offset:.2em}
.submit{
  display:inline-flex;align-items:center;gap:.7em;
  border:1px solid var(--ivory);color:var(--ivory);
  padding:.95rem 1.9rem;font-size:.9375rem;min-height:44px;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
.submit:hover:not([disabled]),.submit:focus-visible:not([disabled]){background:var(--ivory);color:var(--black)}
.submit[disabled]{opacity:.4;cursor:default}
.form-status{margin-top:1.4rem;font-size:.9375rem;min-height:1.5em}
.form-status[data-state=ok]{color:var(--ivory)}
.form-status[data-state=err]{color:var(--crimson)}
.cta-alt{margin-top:2rem;color:var(--gray);font-size:.9375rem}
.cta-alt a{color:var(--ivory)}

/* ================================================================
   10 — FOOTER
   ================================================================ */
.ftr{border-top:1px solid var(--line);padding-top:var(--sp-m)}
.ftr-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,1rem + 2vw,3rem);padding-bottom:var(--sp-m)}
.ftr-col{grid-column:span 3}
.ftr-col h3{font-size:.6875rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-45);margin-bottom:1.1em}
.ftr-col li{margin-bottom:.55em;color:var(--gray)}
.ftr-col a{color:var(--gray)}
.ftr-col a:hover,.ftr-col a:focus-visible{color:var(--ivory)}
@media(max-width:1023px){.ftr-col{grid-column:span 4}}
@media(max-width:719px){.ftr-col{grid-column:span 6}}

.ftr-wordmark{padding-block:clamp(1rem,3vw,3rem) clamp(1.5rem,3vw,2.5rem)}
.ftr-wordmark svg{width:100%;height:auto;opacity:.92}
.ftr-bottom{
  display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
  color:var(--ivory-45);font-size:.8125rem;
}

/* ================================================================
   inner pages
   ================================================================ */
.phead{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(8rem,6rem + 9vw,14rem) var(--sp-m);display:grid}
.phead-media{position:absolute;inset:0;z-index:0}
.phead-media img{width:100%;height:100%;object-fit:cover}
.phead-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.7) 50%,var(--black) 100%)}
.phead-inner{position:relative;z-index:1;grid-area:1/1;align-self:end;width:100%}
.phead .label{display:block;margin-bottom:1.2rem}
.phead .body{margin-top:clamp(1.2rem,1rem + 1vw,2rem)}

.legal{max-width:74ch;padding-bottom:var(--sp-l)}
.legal h2{font-weight:400;font-size:clamp(1.125rem,1rem + .8vw,1.5rem);letter-spacing:-.02em;margin:clamp(2rem,1.5rem + 2vw,3.25rem) 0 .9rem}
.legal p,.legal li{color:var(--gray);margin-bottom:.85rem;line-height:1.62}
.legal ol{padding-left:1.4rem;list-style:decimal}

.svc-list{border-top:1px solid var(--line)}
.svc{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(1.3rem,1rem + 1.6vw,2.4rem);border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease)}
.svc:hover,.svc:focus-visible{padding-left:.75rem}
.svc h3{font-weight:300;font-size:clamp(1.375rem,1rem + 2vw,2.75rem);letter-spacing:-.028em;line-height:1.08}
.svc span{color:var(--ivory-45);font-size:.8125rem;letter-spacing:.08em;white-space:nowrap}

/* ================================================================
   reveal (сдержанный, не одинаковый fade-up на всё)
   ================================================================ */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-1{transition-delay:.09s}.rv-2{transition-delay:.18s}.rv-3{transition-delay:.27s}

/* маска-строка: для заголовков глав */
.mask-line{display:block;overflow:hidden}
.mask-line > span{display:block;transform:none;transition:transform .95s var(--ease) var(--d,0ms)}
.is-in > .mask-line > span,.mask-line.is-in > span{transform:none}

/* ================================================================
   reduced motion — полноценный статичный сайт
   ================================================================ */
/* Системная «экономия движения» больше НЕ выключает сайт целиком:
   у владельца она включена, и сайт выглядел мёртвым. Гасим только то,
   что крутится бесконечно; фоновое видео останавливается кнопкой паузы
   в первом экране — это и есть корректный механизм по WCAG. */
@media(prefers-reduced-motion:reduce){
  .hero-scroll i::after{animation:none;transform:translateY(0)}
  .marquee-track{animation:none}
}

/* ---------- progressive enhancement --------------------------------------
   Без JS сайт статичен и полностью читаем: ничего не спрятано.
   Все скрывающие состояния включаются только классом .js на <html>. */
.js .mask-line > span{transform:translateY(104%)}
.js .manifesto .beat > span{transform:translateY(105%)}
.js .hero-aside .mask > span{transform:translateY(10px);opacity:0}
.js .hero-aside i{transform:scaleX(0)}
.js .sig-media .frame-end{opacity:0}
.no-js .caps-stage{display:none}
.no-js .cap-obj{display:block;width:min(56%,220px);height:auto}
/* overflow:hidden обрезает по padding-box, поэтому у свёрнутой строки
   отступ обязан быть нулевым — иначе сквозь него видно первую строку */
.js .cap-body-in{padding-bottom:0;transition:padding-bottom .55s var(--ease)}
.js .cap.is-active .cap-body-in{padding-bottom:clamp(1.4rem,1rem + 1.8vw,2.6rem)}

/* состав направления — редакционный список, без переносов внутри слова */
.scope{border-top:1px solid var(--line)}
.scope-item{
  display:flex;align-items:baseline;gap:clamp(1rem,2.4vw,2.5rem);
  padding-block:clamp(1.1rem,.8rem + 1.4vw,2rem);
  border-bottom:1px solid var(--line);
  font-weight:300;font-size:clamp(1.25rem,1rem + 1.5vw,2.25rem);
  line-height:1.12;letter-spacing:-.025em;
  text-wrap:balance;
}
.scope-i{flex:0 0 auto;font-size:.75rem;letter-spacing:.14em;color:var(--ivory-16);font-weight:500}

/* Скрим первого экрана. Кадр Hero Film светлее постера пака,
   поэтому AILON и слоган защищены отдельным слоем — иначе не читаются. */
.hero-scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 42% at 50% 47%,rgba(5,5,5,.82) 0%,rgba(5,5,5,.55) 45%,rgba(5,5,5,0) 78%),
    linear-gradient(180deg,rgba(5,5,5,.62) 0%,rgba(5,5,5,.2) 26%,rgba(5,5,5,.2) 62%,rgba(5,5,5,.9) 100%);
}
/* видео шире постера по яркости — на mobile постер пака, скрим мягче */
@media(max-width:899px){
  .hero-scrim{
    background:linear-gradient(180deg,rgba(5,5,5,.5) 0%,rgba(5,5,5,0) 24%,rgba(5,5,5,0) 62%,rgba(5,5,5,.88) 100%);
  }
}
/* видео заполняет кадр целиком: у него нет чистых боковых полей пака */
.hero-video{object-fit:cover}

/* страница кейса */
.case-hero{position:relative;overflow:clip;height:min(72svh,760px);background:var(--near-black)}
.case-hero img{width:100%;height:100%;object-fit:cover;object-position:top center}
.case-facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.2rem,2vw,2.5rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(1.4rem,1.1rem + 1.4vw,2.4rem);
}
.case-facts .ff-l{
  margin:0 0 .7em;font-size:.6875rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory-45);
}
.case-facts p{margin:0;font-size:.9375rem;color:var(--ivory)}
@media(max-width:899px){.case-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:479px){.case-facts{grid-template-columns:1fr}}

/* пауза фонового видео — как в утверждённом референсе, нижний правый угол */
.hero-pause{
  position:absolute;right:var(--pad);bottom:clamp(1.5rem,4vh,2.75rem);z-index:2;
  width:44px;height:44px;display:grid;place-items:center;
  color:var(--ivory-45);transition:color .3s var(--ease);
}
.hero-pause:hover,.hero-pause:focus-visible{color:var(--ivory)}
.hero-pause svg{width:14px;height:16px;fill:currentColor}
.hero-pause .i-play{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}
.hero-pause[aria-pressed="true"] .i-pause{display:none}
@media(max-width:1279px){.hero-aside--low{display:none}}

/* ================================================================
   Hero — кинематографические титры по таймкодам ролика.
   Появляются только после того, как кадр раскрылся ~на 2/3.
   Один титр одновременно. Без плашек, подложек и рамок.
   ================================================================ */
.hero-cues{
  position:absolute;z-index:3;
  left:50%;bottom:clamp(4.5rem,11vh,7.5rem);
  transform:translateX(-50%);
  width:min(90vw,44rem);height:2.2em;
  pointer-events:none;
  /* включается, когда карточка раскрыта минимум на 65% */
  opacity:clamp(0,calc((var(--pc) - .62) * 6),1);
}
.hero-cue{
  position:absolute;left:50%;bottom:0;
  display:flex;align-items:baseline;justify-content:center;gap:.7em;
  white-space:nowrap;
  color:var(--ivory);
  text-transform:uppercase;
  opacity:0;
  transform:translate(-50%,12px);
  /* выход короче входа */
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.hero-cue.is-on{
  opacity:1;
  transform:translate(-50%,0);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.hero-cue-t{
  font-size:clamp(1.125rem,.9rem + .95vw,2rem);   /* ~18 → 32 px */
  font-weight:400;
  letter-spacing:.26em;
  text-indent:.26em;                               /* компенсация трекинга справа */
  text-shadow:0 2px 22px rgba(5,5,5,.6);
}
.hero-cue-i{
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--ivory-45);
  text-shadow:0 2px 18px rgba(5,5,5,.6);
}
@media(max-width:899px){
  .hero-cues{bottom:clamp(6.5rem,18vh,10rem);width:88vw}
  .hero-cue-t{font-size:.9375rem;letter-spacing:.2em;text-indent:.2em}
  .hero-cue-i{display:none}     /* индексы создают тесноту на узком экране */
}
@media(prefers-reduced-motion:reduce){
  .hero-cue{transition-duration:.001ms}
}

/* Постоянный верхний скрим сцены: на светлых планах ролика шапка и логотип
   иначе теряются. Ниже карточки по z, выше видео. */
.hero-topscrim{
  position:absolute;left:0;right:0;top:0;height:26vh;z-index:2;pointer-events:none;
  /* верх держит навигацию на светлых планах (без него контраст ~2.7:1) */
  background:linear-gradient(180deg,rgba(5,5,5,.7) 0%,rgba(5,5,5,.3) 45%,rgba(5,5,5,0) 100%);
  opacity:calc(.25 + var(--pc) * .75);
}
.hero-botscrim{
  position:absolute;left:0;right:0;bottom:0;height:26vh;z-index:2;pointer-events:none;
  /* минимально достаточный: у титров есть тень, скрим только снимает пересвет */
  background:linear-gradient(0deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,.18) 50%,rgba(5,5,5,0) 100%);
  opacity:calc(.2 + var(--pc) * .8);
}
.hero-wordmark svg{filter:drop-shadow(0 3px 34px rgba(5,5,5,.85)) drop-shadow(0 0 4px rgba(5,5,5,.5))}
.hero-cue-t,.hero-cue-i{text-shadow:0 2px 26px rgba(5,5,5,.85),0 0 6px rgba(5,5,5,.6)}

/* ================================================================
   04 — CAPABILITIES v2. Одна сцена, четыре состояния.
   Кадры рисует canvas по прогрессу sticky-пина. Стопы дают время
   прочитать название и описание. Обратный скролл — обратное воспроизведение.
   ================================================================ */
.caps2{position:relative;height:500svh}           /* пин длится 400svh */
@supports not (height:100svh){.caps2{height:500vh}}
.caps2-pin{position:sticky;top:0;height:100svh;overflow:clip}
@supports not (height:100svh){.caps2-pin{height:100vh}}
.caps2-stage{
  position:relative;height:100%;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto 1fr auto;gap:0 clamp(1rem,2vw,3rem);
  padding-block:clamp(5.5rem,10vh,8rem) clamp(2rem,5vh,3.5rem);
}
.caps2-head{grid-column:1/13;grid-row:1}
.caps2-object{
  grid-column:6/13;grid-row:2;position:relative;align-self:center;justify-self:center;
  /* объект = ~60% полезной высоты экрана; квадрат сцены задаётся высотой */
  height:min(60vh,720px);aspect-ratio:1/1;width:auto;
}
.caps2-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* граница квадрата снимается на этапе сборки: чёрный кадра поднят до #050505
   (build/make_caps_derivatives.py), композитинг в рантайме не нужен */
.caps2-key{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;pointer-events:none;
}
.caps2-tech{
  position:absolute;left:0;bottom:0;margin:0;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);
}
.caps2-text{grid-column:1/6;grid-row:2;position:relative;align-self:center;min-height:14rem}
.caps2-item{
  position:absolute;inset:0 0 auto 0;
  opacity:0;transform:translateY(14px);
  transition:opacity .38s var(--ease),transform .38s var(--ease);
  pointer-events:none;
}
.caps2-item.is-active{opacity:1;transform:none;pointer-events:auto;transition-duration:.5s}
.caps2-index{display:block;font-size:.6875rem;letter-spacing:.18em;color:var(--ivory-45);margin-bottom:1.1rem}
.caps2-name{font-weight:300;font-size:clamp(2.25rem,1.4rem+3.2vw,4.5rem);line-height:1;letter-spacing:-.035em}
.caps2-ru{margin-top:1.1rem;font-weight:300;font-size:clamp(1.0625rem,.95rem+.7vw,1.5rem);line-height:1.4;max-width:30ch}
.caps2-state{margin-top:1.2rem;color:var(--gray);max-width:40ch}
.caps2-item .arrow{margin-top:1.6rem}
.caps2-nav{grid-column:1/13;grid-row:3;display:flex;gap:.5rem;list-style:none;margin:0;padding:0}
.caps2-nav button{
  min-width:44px;min-height:44px;padding:0 .9rem;
  color:var(--ivory-45);font-size:.75rem;letter-spacing:.16em;
  border-top:1px solid var(--line);transition:color .3s var(--ease),border-color .3s var(--ease);
}
.caps2-nav button.is-active{color:var(--ivory);border-color:var(--ivory)}
.caps2-nojs{display:none}
.no-js .caps2{height:auto}
.no-js .caps2-pin{display:none}
.no-js .caps2-nojs{display:grid;gap:var(--sp-m);padding-block:var(--sp-l)}
.caps2-static{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.caps2-static img{width:100%;height:auto}
@media(max-width:1023px){
  .caps2-stage{grid-template-rows:auto auto 1fr auto;padding-top:clamp(4.5rem,9vh,6rem)}
  .caps2-head{grid-row:1}
  .caps2-object{grid-column:1/13;grid-row:2;justify-self:center;height:min(44vh,78vw);width:auto;align-self:start}
  .caps2-text{grid-column:1/13;grid-row:3;align-self:start;min-height:11rem;margin-top:1rem}
  .caps2-name{font-size:clamp(1.75rem,1.2rem+3vw,2.75rem)}
  .caps2-nav{grid-row:4}
  .caps2-static{grid-template-columns:1fr}
}

/* ================================================================
   Межсекционный переход: ivory-глава Manifesto наплывает на последний кейс.
   Секция перекрывает предыдущую на 100svh; панель стирает её снизу вверх
   по прогрессу прокрутки (clip-path), текст входит двумя тактами с масштабом.
   Без перехвата колеса, без 3D.
   --f 0..1 наплыв · --t 0..1 текст · --g 0..1 уход
   ================================================================ */
.flip{position:relative;height:280svh;margin-top:-100svh;z-index:2;--f:0;--t:0;--g:0;pointer-events:none}
@supports not (height:100svh){.flip{height:280vh;margin-top:-100vh}}
.flip-pin{position:sticky;top:0;height:100svh;overflow:clip}
@supports not (height:100svh){.flip-pin{height:100vh}}
.flip-panel{
  position:absolute;inset:0;background:var(--ivory);color:var(--black);
  clip-path:inset(calc((1 - var(--f)) * 100%) 0 0 0);
  transform:translateY(calc(var(--g) * -100%));
  padding:var(--pad);display:grid;grid-template-rows:auto 1fr auto;
}
.flip-index{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(5,5,5,.45);
  padding-top:clamp(4.5rem,9vh,6rem);
  opacity:clamp(0,calc(var(--t) * 3),1);
}
.flip-panel p{
  align-self:center;margin:0;
  font-weight:300;font-size:clamp(2.5rem,1.1rem + 6.4vw,7.6rem);
  line-height:1.0;letter-spacing:-.04em;max-width:17ch;
}
.flip-panel .beat{
  display:block;overflow:hidden;
}
.flip-panel .beat > span{
  display:block;
  --bt:clamp(0,calc((var(--t) - var(--d)) * 2.2),1);
  transform:translateY(calc((1 - var(--bt)) * 110%)) scale(calc(1.06 - var(--bt) * .06));
  transform-origin:left bottom;
  opacity:var(--bt);
}
.flip-panel .beat:nth-child(2) > span{--d:0}
.flip-panel .beat:nth-child(3) > span{--d:.22}
.flip-foot{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(5,5,5,.45);
  padding-bottom:clamp(1.5rem,4vh,2.75rem);
  opacity:clamp(0,calc((var(--t) - .5) * 3),1);
}

/* ================================================================
   05 — SIGNATURE SCENE (прототип). Погружение в макродеталь объекта.
   Кадр объекта (end-frame пака) масштабируется к ядру, поверх
   проявляется макро ivory-core — внутренняя структура.
   ================================================================ */
.sig2{position:relative;height:280svh;--s:0}
@supports not (height:100svh){.sig2{height:280vh}}
.sig2-pin{position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate;background:var(--black)}
@supports not (height:100svh){.sig2-pin{height:100vh}}
.sig2-layer{position:absolute;inset:0;display:grid;place-items:center}
.sig2-whole{
  width:min(96vh,96vw);height:min(96vh,96vw);object-fit:contain;
  transform:translateX(18%) scale(calc(1 + var(--s) * 1.9));
  transform-origin:52% 50%;
  opacity:calc(1 - clamp(0,calc((var(--s) - .62) * 3.2),1) * .85);
  will-change:transform;
}
.sig2-macro{
  width:min(110vh,110vw);height:min(110vh,110vw);object-fit:cover;
  transform:translateX(14%) scale(calc(1.18 - clamp(0,calc((var(--s) - .55) * 2.2),1) * .18));
  opacity:clamp(0,calc((var(--s) - .55) * 2.2),1);
  will-change:transform,opacity;
}
.sig2-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--black) 0%,rgba(5,5,5,.9) 26%,rgba(5,5,5,.05) 60%,rgba(5,5,5,0) 100%);
}
.sig2-text{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.sig2-text .wrap{width:100%}
.sig2-line{
  position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);
  max-width:min(34%,30ch);
  font-weight:300;font-size:clamp(1.75rem,1.1rem + 3vw,4rem);line-height:1.06;letter-spacing:-.035em;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.sig2-line[data-l="0"]{opacity:calc(1 - clamp(0,calc((var(--s) - .5) * 4),1))}
.sig2-line[data-l="1"]{opacity:clamp(0,calc((var(--s) - .62) * 3.5),1)}
.sig2-tag{
  position:absolute;left:var(--pad);bottom:clamp(1.5rem,4vh,2.75rem);z-index:2;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);
  border:1px solid var(--crimson);padding:.5rem .8rem;
}
@media(max-width:1023px){
  .sig2-whole,.sig2-macro{transform-origin:50% 50%}
  .sig2-whole{transform:translateY(8%) scale(calc(1 + var(--s) * 1.7))}
  .sig2-macro{transform:translateY(6%) scale(calc(1.18 - clamp(0,calc((var(--s) - .55) * 2.2),1) * .18))}
  .sig2-veil{background:linear-gradient(180deg,var(--black) 0%,rgba(5,5,5,.8) 40%,rgba(5,5,5,.05) 100%)}
  .sig2-line{top:clamp(6rem,14vh,9rem);transform:none;max-width:26ch}
}

/* шапка на ivory-главе: тёмный текст и знак, без верхнего градиента */
.on-ivory .hdr{color:var(--black)}
.on-ivory .hdr::before{opacity:0}
.on-ivory .hdr-nav a:not([aria-current="page"]){color:rgba(5,5,5,.62)}
.on-ivory .hdr-mark svg [stroke]{stroke:var(--black)}
.on-ivory .hdr-mark svg circle[fill]{fill:var(--black)}
.hdr,.hdr-nav a,.hdr-mark svg [stroke]{transition:color .35s var(--ease),stroke .35s var(--ease)}

/* ================================================================
   FINISH PACK v2 — единая система вне hero
   ================================================================ */
/* иконки пака */
.ic{width:1.1em;height:1.1em;vertical-align:-.18em;stroke:currentColor;fill:none;stroke-width:1.5}
.burger,.menu-close{display:inline-flex;align-items:center;gap:.5em}
.burger .ic,.menu-close .ic{width:22px;height:22px}
.submit .ic{width:1.2em;height:1.2em}

/* editorial reveal: изображение 1.03 → 1 */
.rv-img{overflow:hidden}
.rv-img img{transform:scale(1.03);transition:transform 1.1s var(--ease)}
.rv-img.is-in img,.is-in .rv-img img{transform:scale(1)}
.no-js .rv-img img{transform:none}

/* ---------- 07 Products ---------- */
.products-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center}
.products-text{grid-column:1/5}
.products-text .lead{margin-top:1.1rem}
.products-text .muted{margin-top:1rem}
.products-text .arrow{margin-top:1.4rem}
.products-shot{grid-column:5/13;display:block;background:var(--near-black);aspect-ratio:16/10}
.products-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
@media(max-width:1023px){.products-text,.products-shot{grid-column:1/13}}

/* ---------- 08 Studio типографический ---------- */
.studio-grid{max-width:60ch;display:grid;gap:1.2rem}
.studio-grid .lead{max-width:48ch}

/* ---------- внутренние: первый экран с одним объектом ---------- */
.phead-media img{object-position:right center}
.phead-media.phead-media--square img{object-fit:contain;object-position:right center;width:auto;height:100%;right:0;left:auto;position:absolute}
.phead--art .phead-media::after{background:linear-gradient(90deg,var(--black) 0%,rgba(5,5,5,.86) 36%,rgba(5,5,5,.2) 70%,rgba(5,5,5,0) 100%),linear-gradient(180deg,rgba(5,5,5,.5) 0%,rgba(5,5,5,0) 30%,rgba(5,5,5,0) 70%,var(--black) 100%)}
.phead .display{max-width:16ch}
@media(max-width:899px){
  .phead--art .phead-media::after{background:linear-gradient(180deg,rgba(5,5,5,.7) 0%,rgba(5,5,5,.75) 60%,var(--black) 100%)}
  .phead-media.phead-media--square img{width:100%;height:auto;bottom:0;top:auto;object-position:center}
}

/* ---------- service-шаблон ---------- */
.svc-block{padding-block:var(--sp-m);border-top:1px solid var(--line)}
.svc-block .grid{align-items:start}
.svc-block h2{grid-column:1/5}
.svc-block .svc-body{grid-column:6/13}
.svc-body ul{display:grid;gap:.6rem}
.svc-body li{padding-left:1.4rem;position:relative;color:var(--ivory)}
.svc-body li::before{content:"";position:absolute;left:0;top:.7em;width:.6rem;height:1px;background:var(--gray)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:1.1rem;font-size:clamp(1.0625rem,.95rem + .5vw,1.3rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:0 0 auto}
.faq details[open] .ic-plus{display:none}
.faq details:not([open]) .ic-minus{display:none}
.faq details p{color:var(--gray);padding-bottom:1.2rem;max-width:62ch}
@media(max-width:899px){.svc-block h2,.svc-block .svc-body{grid-column:1/13}}

/* ---- исправления после просмотра прохода 1 ---- */
/* маска заголовков: is-in должен побеждать правило .js .mask-line */
.js .mask-line.is-in > span,.js .is-in > .mask-line > span{transform:none}
/* mobile hero v2: слоган в нижнем чёрном поле кадра, не на светлых лепестках */
@media(max-width:899px){
  .hero-tagline{margin-top:auto;margin-bottom:clamp(7rem,24svh,13rem)}
}
@media(max-width:899px) and (max-height:620px){
  .hero-tagline{margin-bottom:clamp(6rem,21svh,9rem)}
}
/* signature: фраза двумя строками, без разрыва «— в» */
.sigp-text .display{font-size:clamp(2.5rem,1.2rem + 4.8vw,6.2rem);max-width:12ch}
/* переход Manifesto короче: 100svh перекрытия + 130svh своих */
.flip{height:230svh}
@supports not (height:100svh){.flip{height:230vh}}

/* титры: вход начинается после завершения выхода (220 мс) — по opacity виден ровно один */
.hero-cue.is-on{transition-delay:.22s}
.hero-cue{transition-delay:0s}
/* низкие мобильные экраны: кадр целиком (contain) — под слоганом гарантированно чёрное поле */
@media(max-width:899px) and (max-height:640px){
  .hero-bed img{object-fit:contain}
  .hero-type{padding-top:calc(40svh - 22px)}
  .hero-wordmark{width:min(240px,72vw)}
  .hero-tagline{margin-bottom:clamp(5.5rem,19svh,8rem)}
}

/* ================================================================
   SCROLL-ХОРЕОГРАФИЯ ГЛАВНОЙ. Все сцены — чистые функции scrollY.
   ================================================================ */

/* ---------- 02 Selected Work: полноэкранные сцены с перекрытием ---------- */
.wsc{position:relative}
.wsc-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-block:var(--sp-m) var(--sp-s)}
.wsc-pin{position:relative;height:calc(var(--n,3) * 100svh + 60svh)}
@supports not (height:100svh){.wsc-pin{height:calc(var(--n,3) * 100vh + 60vh)}}
.wscene{
  position:sticky;top:0;height:100svh;overflow:clip;
  /* следующий кейс наезжает снизу через маску */
  clip-path:inset(calc((1 - var(--in,1)) * 100%) 0 0 0);
  will-change:clip-path;
}
@supports not (height:100svh){.wscene{height:100vh}}
.wscene:first-child{clip-path:none}
.wscene-a{display:block;position:absolute;inset:0;background:var(--black)}
.wscene-media{position:absolute;inset:-8% 0;overflow:hidden}
.wscene-media img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  /* кадр движется внутри рамки в противоход прокрутке */
  transform:translate3d(0,calc(var(--k,0) * -7%),0) scale(1.08);
  will-change:transform;
}
.wscene-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,5,.5) 0%,rgba(5,5,5,.05) 26%,rgba(5,5,5,.35) 58%,rgba(5,5,5,.94) 100%)}
.wscene-text{position:absolute;left:0;right:0;bottom:clamp(3rem,9vh,6rem);z-index:2;color:var(--ivory)}
.wscene-i{display:block;font-size:.6875rem;letter-spacing:.2em;color:var(--ivory-45);margin-bottom:1rem;
  opacity:clamp(0,calc(var(--t,0) * 3),1)}
.wscene-name{
  font-weight:300;font-size:clamp(2.25rem,1.2rem + 4.6vw,6rem);line-height:.98;letter-spacing:-.04em;margin:0;
  transform:translate3d(0,calc((1 - clamp(0,calc(var(--t,0) * 2.2),1)) * 34px),0);
  opacity:clamp(0,calc(var(--t,0) * 2.2),1);
}
.wscene-task{margin-top:1rem;max-width:44ch;color:var(--ivory-70);
  transform:translate3d(0,calc((1 - clamp(0,calc((var(--t,0) - .12) * 2.2),1)) * 26px),0);
  opacity:clamp(0,calc((var(--t,0) - .12) * 2.2),1)}
.wscene-res{margin-top:.7rem;max-width:52ch;font-size:.9375rem;color:var(--ivory);
  opacity:clamp(0,calc((var(--t,0) - .22) * 2.4),1)}
.wscene-go{display:inline-flex;gap:.6em;margin-top:1.6rem;font-size:.9375rem;
  border-bottom:1px solid var(--ivory-45);padding-bottom:.25em;
  opacity:clamp(0,calc((var(--t,0) - .3) * 2.6),1)}
.wscene-a:hover .wscene-go{border-bottom-color:var(--ivory)}
@media(max-width:899px){
  .wscene-text{bottom:clamp(2rem,7vh,4rem)}
  .wscene-media img{object-position:center}
}

/* ---------- 03 Manifesto: светлая панель закрывает экран ---------- */
.flip{height:220svh}
@supports not (height:100svh){.flip{height:220vh}}
.flip-panel{padding:var(--pad);display:grid;place-items:center}
.flip-panel p{
  align-self:center;margin:0;text-align:left;
  font-weight:300;font-size:clamp(2.6rem,1.1rem + 6.8vw,8rem);
  line-height:.98;letter-spacing:-.042em;max-width:16ch;
}
.flip-panel .beat{display:block;overflow:hidden}
.flip-panel .beat > span{
  display:block;
  --bt:clamp(0,calc((var(--t) - var(--d)) * 2.4),1);
  transform:translate3d(0,calc((1 - var(--bt)) * 108%),0);
}
.flip-panel .beat:nth-child(1) > span{--d:0}
.flip-panel .beat:nth-child(2) > span{--d:.2}

/* ---------- 04 Capabilities: sticky-сцена с масками-диафрагмами ---------- */
.cs{position:relative;height:calc(var(--n,4) * 84svh + 40svh)}
@supports not (height:100svh){.cs{height:calc(var(--n,4) * 84vh + 40vh)}}
.cs-pin{position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate;background:var(--black)}
@supports not (height:100svh){.cs-pin{height:100vh}}
/* глубина: фоновый макро-слой идёт медленнее и темнее */
.cs-depth{display:none}
.cs-stage{position:relative;z-index:1;height:100%;display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;
  gap:0 clamp(1rem,2vw,3rem);padding-block:clamp(5.5rem,11vh,8rem) clamp(2rem,5vh,3.5rem)}
.cs-head{grid-column:1/13;grid-row:1}
.cs-objwrap{grid-column:6/13;grid-row:2;position:relative;align-self:center;justify-self:center;
  height:min(62vh,700px);aspect-ratio:1/1;width:auto}
.cs-layer{position:absolute;inset:0;
  /* маска-диафрагма: объект уходит внутрь центра, следующий раскрывается оттуда */
  clip-path:circle(calc(var(--r,0) * 76%) at 50% 50%);
  transform:scale(var(--sc,1)) rotate(calc(var(--rot,0) * 1deg));
  opacity:var(--op,0);
  will-change:clip-path,transform,opacity}
.cs-layer img{width:100%;height:100%;object-fit:contain;filter:brightness(var(--br,1)) contrast(var(--ct,1))}
/* секвенция кадров: один холст вместо кроссфейда четырёх стоп-состояний */
.cs-seq{position:absolute;inset:0;width:100%;height:100%;display:none}
.cs.has-seq .cs-seq{display:block}
.cs.has-seq .cs-layer{display:none}
.cs-textwrap{grid-column:1/6;grid-row:2;position:relative;align-self:center;min-height:16rem}
.cs-item{position:absolute;inset:0 0 auto 0;opacity:var(--op,0);
  transform:translate3d(0,calc(var(--ty,0) * 1px),0);pointer-events:none;will-change:transform,opacity}
.cs-item.is-live{pointer-events:auto}
.cs-index{display:block;font-size:.6875rem;letter-spacing:.2em;color:var(--ivory-45);margin-bottom:1.2rem}
.cs-name{font-weight:300;font-size:clamp(2.25rem,1.3rem + 3.6vw,5rem);line-height:.98;letter-spacing:-.038em;margin:0}
.cs-name .mask-line{display:block;overflow:hidden}
.cs-ru{margin-top:1.2rem;font-weight:300;font-size:clamp(1.0625rem,.95rem + .7vw,1.5rem);line-height:1.36;max-width:26ch}
.cs-desc{margin-top:1rem;color:var(--gray);max-width:34ch}
.cs-item .arrow{margin-top:1.5rem}
.cs-bars{grid-column:1/13;grid-row:3;display:flex;gap:8px;align-items:center}
.cs-bars i{height:1px;flex:1;background:var(--ivory-16);position:relative;overflow:hidden}
.cs-bars i::after{content:"";position:absolute;inset:0;background:var(--ivory);
  transform:scaleX(var(--f,0));transform-origin:left}
@media(max-width:1023px){
  .cs{height:calc(var(--n,4) * 78svh + 36svh)}
  .cs-stage{grid-template-rows:auto auto 1fr auto;padding-top:clamp(4.5rem,9vh,6rem)}
  .cs-objwrap{grid-column:1/13;grid-row:2;height:min(38vh,44vw);align-self:start}
  .cs.has-seq .cs-objwrap{height:min(40vh,88vw)}
  .cs-textwrap{grid-column:1/13;grid-row:3;align-self:start;min-height:13rem;margin-top:1.2rem}
  .cs-name{font-size:clamp(1.9rem,1.2rem + 3.4vw,3rem)}
  .cs-bars{grid-row:4}
}

/* ---------- 05 Signature: проход камеры внутрь объекта ---------- */
.sg{position:relative;height:300svh}
@supports not (height:100svh){.sg{height:300vh}}
.sg-pin{position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate;background:var(--black)}
@supports not (height:100svh){.sg-pin{height:100vh}}
.sg-pin > div{position:absolute;inset:0}
.sg-bed{z-index:0;opacity:calc(.55 + var(--s,0) * .45)}
.sg-bed img{width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(calc(1.02 + var(--s,0) * .10));filter:brightness(calc(.62 + var(--s,0) * .38))}
/* кадры непрерывного плана: холст поверх постера; постер остаётся запасным */
.sg-seq{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:25% 50%;display:none}
.sg.has-seq .sg-seq{display:block}
.sg.has-seq .sg-bed{display:none}
.sg-vig{z-index:4;pointer-events:none;
  background:radial-gradient(72% 62% at 50% 50%,rgba(5,5,5,0) 40%,rgba(5,5,5,.72) 100%),
             linear-gradient(90deg,rgba(5,5,5,.92) 0%,rgba(5,5,5,.35) 26%,rgba(5,5,5,0) 52%)}
.sg-text{z-index:5;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.sg-line{margin:0;font-weight:300;letter-spacing:-.038em;line-height:1;max-width:14ch;
  font-size:clamp(2.4rem,1.2rem + 4.6vw,6rem)}
.sg-line .mask-line{display:block;overflow:hidden}
.sg-line .mask-line > span{display:block;transform:translate3d(0,calc((1 - var(--v,0)) * 110%),0)}
.sg-line[data-sg-l="0"]{--v:clamp(0,calc(var(--s,0) * 7),1);
  opacity:calc(1 - clamp(0,calc((var(--s,0) - .42) * 4),1))}
.sg-line--2{position:absolute;left:var(--pad);right:var(--pad);
  --v:clamp(0,calc((var(--s,0) - .66) * 4),1);
  opacity:clamp(0,calc((var(--s,0) - .66) * 4),1)}
@media(max-width:899px){
  .sg-vig{background:radial-gradient(80% 60% at 50% 46%,rgba(5,5,5,0) 34%,rgba(5,5,5,.8) 100%),
    linear-gradient(180deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.2) 34%,rgba(5,5,5,0) 60%)}
  .sg-text{justify-content:flex-start;padding-top:clamp(5.5rem,13vh,8rem)}
  .sg-line{max-width:11ch}
  /* портретные кадры 4:5 на всю ширину, прижаты книзу; фраза сверху */
  .sg-seq{inset:auto 0 clamp(1rem,6svh,3rem) 0;height:auto;aspect-ratio:4/5;object-fit:contain;object-position:center;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 86%,transparent 100%)}
}

/* ---------- 06 Process: числа проходят через экран ---------- */
.pr{position:relative;height:calc(var(--n,4) * 76svh + 36svh)}
@supports not (height:100svh){.pr{height:calc(var(--n,4) * 76vh + 36vh)}}
.pr-pin{position:sticky;top:0;height:100svh;overflow:clip;background:var(--black)}
@supports not (height:100svh){.pr-pin{height:100vh}}
.pr-stage{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr;
  padding-block:clamp(5.5rem,11vh,8rem) clamp(3rem,7vh,5rem)}
.pr-head{grid-row:1}
.pr-rail{position:absolute;left:var(--pad);top:clamp(11rem,24vh,16rem);bottom:clamp(4rem,9vh,6rem);width:1px;background:var(--ivory-16)}
.pr-rail i{position:absolute;inset:0;background:var(--ivory);transform:scaleY(var(--f,0));transform-origin:top}
.pr-items{grid-row:2;position:relative}
.pr-item{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);isolation:isolate;
  gap:clamp(1.5rem,4vw,5rem);align-items:center;padding-left:clamp(2rem,4vw,4.5rem);
  opacity:var(--op,0);transform:translate3d(0,calc(var(--ty,0) * 1px),0);will-change:transform,opacity}
.pr-body{position:relative;z-index:1}
.pr-num{position:relative;z-index:0;font-weight:300;font-size:clamp(6rem,4rem + 16vw,22rem);line-height:.78;letter-spacing:-.06em;
  color:var(--ivory-16);transform:translate3d(calc(var(--nx,0) * 1px),0,0);will-change:transform}
.pr-name{margin:0;font-weight:300;font-size:clamp(2.25rem,1.3rem + 3.6vw,5rem);line-height:1;letter-spacing:-.038em}
.pr-name .mask-line{display:block;overflow:hidden}
.pr-name .mask-line > span{display:block;transform:translate3d(0,calc((1 - var(--v,0)) * 110%),0)}
.pr-text{margin-top:1.2rem;color:var(--gray);max-width:34ch;font-size:clamp(1rem,.94rem + .4vw,1.25rem)}
@media(max-width:899px){
  .pr-item{grid-template-columns:1fr;align-content:center;gap:.5rem;padding-left:clamp(1.5rem,5vw,2.5rem)}
  .pr-num{font-size:clamp(5rem,4rem + 12vw,9rem)}
  .pr-name{font-size:clamp(2rem,1.3rem + 3.4vw,3rem)}
}

/* ---------- 09 Final CTA: фрагмент входит сбоку ---------- */
.fc{position:relative;height:210svh}
@supports not (height:100svh){.fc{height:210vh}}
.fc-pin{position:sticky;top:0;height:100svh;overflow:clip;background:var(--black);isolation:isolate}
@supports not (height:100svh){.fc-pin{height:100vh}}
.fc-art{position:absolute;inset:0;z-index:0;
  transform:translate3d(calc((1 - var(--a,0)) * 62%),0,0);will-change:transform}
.fc-art img{width:100%;height:100%;object-fit:cover;object-position:right center;
  transform:scale(calc(1.06 - var(--a,0) * .06))}
.fc-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--black) 0%,rgba(5,5,5,.9) 30%,rgba(5,5,5,.15) 62%,rgba(5,5,5,0) 100%)}
.fc-text{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:2.4rem}
.fc-head{margin:0;font-weight:300;font-size:clamp(2.6rem,1.2rem + 5.6vw,7rem);line-height:.98;letter-spacing:-.042em;max-width:15ch}
.fc-head .mask-line{display:block;overflow:hidden}
.fc-head .mask-line > span{display:block;transform:translate3d(0,calc((1 - var(--t,0)) * 110%),0)}
.fc-link{align-self:flex-start;display:inline-flex;align-items:center;gap:.7em;
  font-size:clamp(1rem,.94rem + .4vw,1.25rem);border-bottom:1px solid var(--ivory-45);padding-bottom:.3em;
  opacity:clamp(0,calc((var(--t,0) - .35) * 3),1);
  transform:translate3d(0,calc((1 - clamp(0,calc((var(--t,0) - .35) * 3),1)) * 18px),0)}
.fc-link:hover,.fc-link:focus-visible{border-bottom-color:var(--ivory)}
@media(max-width:899px){
  .fc-art{transform:translate3d(0,calc((1 - var(--a,0)) * 46%),0)}
  .fc-art img{object-position:right bottom}
  .fc-art::after{background:linear-gradient(180deg,var(--black) 0%,rgba(5,5,5,.88) 40%,rgba(5,5,5,.2) 74%,rgba(5,5,5,0) 100%)}
  .fc-text{justify-content:flex-start;padding-top:clamp(6rem,15vh,9rem)}
}

/* reduced motion: сцены прокрутки не отключаем — кадр зависит только от положения
   прокрутки пользователя (не автоплей, без вспышек); решение владельца: сайт не должен
   выглядеть мёртвым. Бесконечные анимации гасятся выше. */

/* ================================================================
   История кейса (case story): концепция → главы 01–04 → цифры → дальше
   ================================================================ */
.cst-hero{padding-top:clamp(8rem,6rem + 9vw,14rem);padding-bottom:var(--sp-s)}
.cst-hero .label{display:block;margin-bottom:1.4rem}
.cst-h1{max-width:14ch}
.cst-concept{margin-top:clamp(1.4rem,1rem + 1.6vw,2.6rem);font-weight:300;font-size:clamp(1.375rem,1rem + 1.8vw,2.75rem);line-height:1.12;letter-spacing:-.03em;color:var(--ivory-70);max-width:24ch}
.cst-intro{margin-top:clamp(1.4rem,1rem + 1.4vw,2.4rem);max-width:52ch;color:var(--gray)}
.cst-device{padding-bottom:var(--sp-m)}
.cst-device .bf{transform:scale(calc(.9 + var(--k,1) * .1));transform-origin:50% 0;will-change:transform}

/* рамка браузера */
.bf{margin:0;border:1px solid var(--ivory-16);border-radius:14px;overflow:hidden;background:var(--near-black);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.bf-bar{display:flex;align-items:center;gap:7px;padding:.7rem 1rem;border-bottom:1px solid var(--ivory-08);background:rgba(242,237,223,.04)}
.bf-bar i{width:9px;height:9px;border-radius:50%;background:var(--ivory-16)}
.bf-bar span{margin-left:.9rem;font-size:.75rem;letter-spacing:.04em;color:var(--ivory-45)}
.bf-view{position:relative;aspect-ratio:16/10;overflow:hidden}
.bf-view img{width:100%;height:100%;object-fit:cover;object-position:top center}
.bf-view--tall{aspect-ratio:4/5}
.bf-view--tall img{position:absolute;left:0;top:0;height:auto;transform:translate3d(0,calc(var(--k,0) * var(--max,0px) * -1),0);will-change:transform}

/* телефон */
.ph{margin:0;border:5px solid #1b1b1d;border-radius:2.1rem;overflow:hidden;background:#000;box-shadow:0 30px 70px -20px rgba(0,0,0,.75)}
.ph-view{aspect-ratio:9/19.5;overflow:hidden}
.ph-view img{width:100%;height:100%;object-fit:cover;object-position:top}

/* главы */
.cst-ch{padding-block:var(--sp-m);border-top:1px solid var(--ivory-08)}
.cst-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,1rem + 2vw,3.5rem);align-items:center}
.cst-text{grid-column:1/6}
.cst-media{grid-column:6/13;min-width:0}
.cst-ch--r .cst-text{grid-column:8/13;grid-row:1}
.cst-ch--r .cst-media{grid-column:1/8;grid-row:1}
.cst-n{display:block;font-weight:300;font-size:clamp(4.5rem,2.5rem + 9vw,12rem);line-height:.9;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--ivory-45)}
.cst-t{margin-top:clamp(1rem,.8rem + 1vw,2rem);font-weight:300;font-size:clamp(1.9rem,1.2rem + 2.6vw,4rem);line-height:1.02;letter-spacing:-.036em}
.cst-p{margin-top:1.3rem;max-width:46ch;color:var(--gray)}
.cst-p:first-of-type{color:var(--ivory-70)}

/* дуэт: браузер + второй кадр + телефон */
.duo{position:relative;padding:0 0 clamp(3rem,10vw,9rem)}
.duo-sub{position:absolute;width:62%;left:0;bottom:0}
.duo-phone{position:absolute;width:min(24%,190px);right:2%;bottom:0}
@media(max-width:899px){.duo-sub{display:none}.duo{padding-bottom:3rem}.duo-phone{width:min(34%,150px);right:3%}}

/* схема данных */
.schema{display:grid;gap:1.1rem}
.schema-panel{border:1px solid var(--ivory-16);border-radius:14px;padding:clamp(1.2rem,1rem + 1vw,2rem);background:rgba(242,237,223,.03)}
.schema-k{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-45)}
.schema-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.schema-chips li{padding:.4rem .8rem;border:1px solid var(--ivory-16);border-radius:999px;font-size:.8125rem;color:var(--ivory-70)}
.schema-n{margin-top:1rem;font-size:.8125rem;color:var(--ivory-45)}

/* вес страницы */
.weight{display:grid;gap:1rem;padding:clamp(1.4rem,1rem + 2vw,3rem);border:1px solid var(--ivory-16);border-radius:14px;background:rgba(242,237,223,.03)}
.weight-row{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;align-items:center}
.weight-row > span{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-45)}
.weight-bar{width:0;height:clamp(3.2rem,2.4rem + 3vw,5.5rem);display:flex;align-items:center;padding-inline:1.2rem;border-radius:8px;background:var(--ivory-16);font-size:clamp(1rem,.8rem + 1vw,1.5rem);font-weight:300;white-space:nowrap;overflow:hidden;transition:width 1.4s var(--ease)}
.weight-bar b{font-weight:500;margin-right:.35em}
.weight-bar--new{background:var(--ivory);color:var(--black)}
.weight.is-in .weight-bar{width:var(--w)}
.weight-note{grid-column:1/-1;margin-top:.4rem;font-size:.8125rem;color:var(--ivory-45)}

/* цифры */
.cst-results{padding-block:var(--sp-m)}
.cst-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,1.5rem + 2vw,4rem) clamp(1.5rem,1rem + 2vw,3.5rem);margin-top:clamp(2rem,1.5rem + 2vw,4rem)}
.cst-num{border-top:1px solid var(--line);padding-top:1.4rem}
.cst-num-v{display:flex;align-items:baseline;gap:.3em;font-weight:300;font-size:clamp(3rem,2rem + 5vw,7.5rem);line-height:.95;letter-spacing:-.05em}
.cst-num-v small{font-size:.32em;letter-spacing:0;color:var(--ivory-45)}
.cst-num p{margin-top:1rem;max-width:30ch;font-size:.9375rem;color:var(--gray)}
.cst-outro{margin-top:var(--sp-m);max-width:48ch;color:var(--ivory-70)}
@media(max-width:1023px){.cst-nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:899px){
  .cst-text,.cst-ch--r .cst-text{grid-column:1/13;grid-row:auto}
  .cst-media,.cst-ch--r .cst-media{grid-column:1/13;grid-row:auto}
  .cst-device .bf{transform:none}
}
@media(max-width:559px){.cst-nums{grid-template-columns:1fr}}

/* дальше */
.cst-next{padding-block:var(--sp-m) var(--sp-l)}
.cst-next-a{display:block;border-top:1px solid var(--line);padding-top:1.6rem}
.cst-next-t{display:block;margin-top:1rem;font-weight:300;font-size:clamp(2.2rem,1.2rem + 5vw,7rem);line-height:1;letter-spacing:-.045em;transition:transform .5s var(--ease)}
.cst-next-a:hover .cst-next-t,.cst-next-a:focus-visible .cst-next-t{transform:translateX(.6rem)}

/* столбцы сравнения */
.bars{display:grid;gap:1rem;padding:clamp(1.4rem,1rem + 2vw,3rem);border:1px solid var(--ivory-16);border-radius:14px;background:rgba(242,237,223,.03)}
.bars-k{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-45);margin-bottom:.4rem}
.bars-row{display:grid;grid-template-columns:minmax(6.5rem,10rem) minmax(0,1fr);gap:1rem;align-items:center}
.bars-l{font-size:.875rem;color:var(--ivory-70);line-height:1.25}
.bars-track{display:flex;align-items:center;gap:.9rem;min-width:0}
.bars-fill{display:block;height:clamp(2.2rem,1.8rem + 1.6vw,3.2rem);width:0;min-width:6px;border-radius:6px;background:var(--ivory-16);transition:width 1.4s var(--ease)}
.bars-fill--hi{background:var(--ivory)}
.bars.is-in .bars-fill{width:var(--w)}
.bars-v{font-weight:300;font-size:clamp(1.1rem,.9rem + 1vw,1.7rem);letter-spacing:-.02em;white-space:nowrap}
.bars-note{margin-top:.5rem;font-size:.8125rem;color:var(--ivory-45)}

/* шаги */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ivory-16);border:1px solid var(--ivory-16);border-radius:14px;overflow:hidden}
.steps li{display:grid;gap:.45rem;align-content:start;padding:clamp(1.2rem,1rem + 1.2vw,2rem);background:var(--black)}
.steps li span{font-size:.75rem;letter-spacing:.14em;color:var(--ivory-45)}
.steps li b{font-weight:300;font-size:clamp(1.25rem,1rem + 1.2vw,2rem);letter-spacing:-.025em}
.steps li em{font-style:normal;font-size:.875rem;color:var(--gray)}

/* три кадра подряд + телефон */
.trio{position:relative;display:grid;gap:.9rem;padding-bottom:clamp(1rem,3vw,2rem)}
.trio-i:nth-child(2){margin-left:clamp(1rem,4vw,3.5rem)}
.trio-i:nth-child(3){margin-left:clamp(2rem,8vw,7rem)}
.trio-phone{position:absolute;width:min(22%,170px);right:-1%;bottom:-2%}
@media(max-width:899px){.trio-i:nth-child(n+2){margin-left:0}.trio-i:nth-child(3){display:none}.trio-phone{width:min(30%,130px);right:2%;bottom:0}}

/* место под цифру клиента (только страницы согласования) */
.cst-num--todo .cst-num-v{color:var(--ivory-16)}
.cst-todo{display:inline-block;margin-top:.8rem;padding:.25rem .6rem;border:1px dashed var(--crimson);border-radius:999px;font-style:normal;font-size:.75rem;letter-spacing:.06em;color:var(--pink)}

/* ================================================================
   02 — Selected Work: кейсы-истории строками (замена полноэкранных сцен)
   ================================================================ */
.sw{padding-block:var(--sp-l) var(--sp-m)}
.sw-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:var(--sp-s)}
.sw-list{border-top:1px solid var(--line)}
.sw-row{border-bottom:1px solid var(--line)}
.sw-a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.2rem,1rem + 2vw,3.5rem);align-items:center;padding-block:clamp(2.2rem,1.6rem + 3vw,5rem)}
.sw-meta{grid-column:1/2;align-self:start;display:grid;gap:.5rem;padding-top:.6rem}
.sw-i{font-size:.75rem;letter-spacing:.14em;color:var(--ivory-45)}
.sw-tag{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-45);writing-mode:vertical-rl;transform:rotate(180deg);justify-self:start}
.sw-body{grid-column:2/7;min-width:0}
.sw-name{font-weight:300;font-size:clamp(2.4rem,1.4rem + 4.2vw,6rem);line-height:.98;letter-spacing:-.045em;transition:transform .6s var(--ease)}
.sw-concept{margin-top:clamp(.9rem,.7rem + .8vw,1.6rem);font-weight:300;font-size:clamp(1.1rem,.95rem + .8vw,1.6rem);line-height:1.25;letter-spacing:-.02em;color:var(--ivory-70);max-width:26ch}
.sw-nums{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,1rem + 2vw,3rem);margin-top:clamp(1.4rem,1rem + 1.5vw,2.6rem)}
.sw-nums li{display:grid;gap:.35rem;min-width:8.5rem}
.sw-nums b{display:flex;align-items:baseline;gap:.15em;font-weight:300;font-size:clamp(2rem,1.4rem + 2.2vw,3.6rem);line-height:1;letter-spacing:-.045em}
.sw-nums small{font-size:.42em;letter-spacing:0;color:var(--ivory-45)}
.sw-nums span{font-size:.8125rem;color:var(--gray);max-width:18ch;line-height:1.35}
.sw-go{display:inline-flex;gap:.6em;margin-top:clamp(1.4rem,1rem + 1.5vw,2.4rem);font-size:.9375rem;padding-bottom:.25rem;border-bottom:1px solid var(--ivory-16);transition:border-color .3s}
.sw-frame{grid-column:7/13;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.sw-frame .bf-view img{transform:translate3d(0,calc((var(--k,.5) - .5) * -6%),0) scale(1.08);transition:transform .2s linear}
.sw-a:hover .sw-frame,.sw-a:focus-visible .sw-frame{transform:translateY(-6px)}
.sw-a:hover .sw-name,.sw-a:focus-visible .sw-name{transform:translateX(.4rem)}
.sw-a:hover .sw-go,.sw-a:focus-visible .sw-go{border-bottom-color:var(--ivory)}
.sw-row:nth-child(even) .sw-body{grid-column:7/12;grid-row:1}
.sw-row:nth-child(even) .sw-frame{grid-column:2/7;grid-row:1}
@media(max-width:899px){
  .sw-a{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .sw-meta,.sw-body,.sw-frame,.sw-row:nth-child(even) .sw-body,.sw-row:nth-child(even) .sw-frame{grid-column:1/-1;grid-row:auto}
  .sw-meta{display:flex;gap:1rem;padding-top:0}
  .sw-tag{writing-mode:horizontal-tb;transform:none}
  .sw-meta{order:1}.sw-frame{order:2}.sw-body{order:3}
}
@media(max-width:479px){.cst-h1{font-size:clamp(2.2rem,11.2vw,3rem)}}

/* ---- страницы услуг: прайс и короткие шаги ---- */
.steps--list{grid-template-columns:1fr}
.price-table{width:100%;border-collapse:collapse;font-size:clamp(.9375rem,.88rem + .3vw,1.0625rem)}
.price-table th,.price-table td{padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:baseline}
.price-table thead th{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--ivory-45);padding-top:0}
.price-table tbody th{font-weight:300;color:var(--ivory)}
.price-table td{color:var(--gray);white-space:nowrap}
.price-table td:last-child{color:var(--ivory);padding-right:0}
.price-note{margin-top:1.2rem}
@media(max-width:599px){
  .price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .price-table,.price-table tbody,.price-table tr{display:block}
  .price-table tr{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;padding-block:1rem;border-bottom:1px solid var(--line)}
  .price-table th,.price-table td{border:0;padding:0}
  .price-table tbody th{grid-column:1/-1}
  .price-table td{white-space:normal}
  .price-table td::before{content:attr(data-l) " ";color:var(--ivory-45);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;margin-right:.4rem}
  .price-table td:last-child{text-align:right}
}
.svc-body .steps li::before{content:none}