/* ============================================================================
   YOUSUPOVA pages.css: разметка сцен главной и внутренних страниц.
   ========================================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-head { padding-top: calc(var(--y-nav-h) + var(--y-section-compact)); padding-bottom: var(--y-sp-7); }
.page-head .filters, .page-head .index { margin-top: var(--y-sp-7); }
.index { display: flex; flex-wrap: wrap; gap: var(--y-sp-2) var(--y-sp-6); }
.index__link { font-weight: 500; font-size: var(--y-fs-xs); letter-spacing: var(--y-track-wide); text-transform: uppercase; color: var(--y-ink-soft); min-height: 2.75rem; display: inline-flex; align-items: center; }
.index__link:hover { color: var(--y-ink-display); }
.list { padding-left: 1.2em; list-style: disc; max-width: var(--y-measure); color: var(--y-ink); }
.list li + li { margin-top: var(--y-sp-2); }

/* --- 1 · хиро --------------------------------------------------------------- */
.hero__stage { background: var(--y-graphite-900); }
.intro { position: absolute; left: 50%; top: 50%; z-index: var(--y-z-copy); margin: 0; width: min(64vw, 56rem); transform-origin: 50% 50%; translate: -50% -50%; will-change: transform; pointer-events: none; }
.intro__box { display: block; }
.mark--intro { width: 100%; height: auto; fill: var(--y-paper-50); perspective: 1000px; overflow: visible; }
.mark__l { transform-box: fill-box; transform-origin: 50% 50%; transform: rotateX(90deg); opacity: 0; }
.js .intro.is-up .mark__l { animation: letter-up 600ms var(--y-ease-expo) both; animation-delay: calc(var(--i) * 40ms); }
.no-js .mark__l, .intro.is-flown .mark__l { transform: none; opacity: 1; animation: none; }
@keyframes letter-up { from { transform: rotateX(90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }
.intro.is-flown { visibility: hidden; }
.hero__copy { max-width: min(40rem, 70vw); }
.hero__copy .label { margin-bottom: var(--y-sp-3); }
.hero__meta { margin-top: var(--y-sp-3); font-size: var(--y-fs-xs); letter-spacing: var(--y-track-wide); text-transform: uppercase; color: var(--y-bone-300); }
.hero__copy .link { margin-top: var(--y-sp-4); }
@media (prefers-reduced-motion: reduce) { .mark__l { transform: none; opacity: 1; animation: none !important; } }
@media (max-width: 860px) { .intro { width: 82vw; } }

/* --- 2 · философия ---------------------------------------------------------- */
.phil { background: var(--y-canvas); }
.phil__stage { display: grid; place-items: center; padding: calc(var(--y-nav-h) + var(--y-sp-5)) var(--y-gutter) var(--y-sp-7); background: var(--y-canvas); }
.phil__inner { width: min(100%, 64rem); }
.phil__label { margin-bottom: var(--y-sp-6); }
.phil__box { position: relative; min-height: 8em; }
.flip { position: absolute; inset: 0 auto auto 0; width: 100%; margin: 0; perspective: 1000px; text-wrap: pretty; visibility: hidden; }
.flip .wd { display: inline-block; white-space: nowrap; }
.flip .ch { display: inline-block; transform-origin: 50% 50%; opacity: 0; will-change: transform, opacity; backface-visibility: hidden; }
.flip-sign { display: flex; flex-direction: column; gap: var(--y-sp-1); margin-top: var(--y-sp-7); opacity: 0; will-change: opacity, transform; }
.flip-sign strong { font-weight: 500; }
.flip-sign span { font-size: var(--y-fs-xs); letter-spacing: var(--y-track-wide); text-transform: uppercase; color: var(--y-ink-soft); }
.no-js .flip { position: static; visibility: visible; margin-top: var(--y-sp-4); } .no-js .flip .ch { opacity: 1; } .no-js .flip-sign { opacity: 1; }
@media (max-width: 860px) { .phil .display--md { font-size: var(--y-fs-xl); } .phil__box { min-height: 12em; } }

/* --- 3 · полёт -------------------------------------------------------------- */
.flight__stage { background: var(--y-graphite-900); }
.flight__copy { max-width: min(38rem, 70vw); }
.flight__meta { margin-top: var(--y-sp-3); }
.flight__lede { margin-top: var(--y-sp-4); margin-left: auto; color: var(--y-paper-50); }
.flight__copy .link { margin-top: var(--y-sp-4); }
@media (max-width: 860px) { .flight__lede { margin-left: 0; } .flight__copy { max-width: none; } }

/* --- 4 · услуги: рейл -------------------------------------------------------- */
.svc__stage { display: flex; align-items: center; background: var(--y-canvas); }
.rail { display: flex; align-items: stretch; gap: 2vw; padding-inline: var(--y-gutter); width: max-content; }
.rail__lead { flex: 0 0 30vw; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--y-sp-5); padding-block: var(--y-sp-8); }
.rail__item { flex: 0 0 24vw; display: flex; flex-direction: column; gap: var(--y-sp-3); padding: var(--y-sp-7) var(--y-sp-6); border-top: 1px solid var(--y-hairline); border-radius: var(--y-r-1); background: var(--y-surface); min-height: 62vh; color: inherit; transition: background-color var(--y-d-base) var(--y-ease-out); }
.rail__item:hover { background: var(--y-paper-200); }
.rail__title { margin-top: auto; }
.rail__blurb { color: var(--y-ink-soft); }
.rail__item .link { margin-top: var(--y-sp-3); }
.rail__tail { flex: 0 0 18vw; display: flex; align-items: flex-end; padding: var(--y-sp-7) var(--y-sp-6); border-top: 1px solid var(--y-hairline); }
@media (prefers-reduced-motion: no-preference) {
  .rail__item, .rail__tail { opacity: clamp(0.55, calc(0.55 + (var(--sc-p, 0) * 3.2 - var(--i, 0) * 0.55) * 0.45 + 0.45), 1); }
}
@media (max-width: 1024px) { .rail__lead { flex-basis: 44vw; } .rail__item { flex-basis: 40vw; } }
@media (max-width: 860px) { .rail { gap: 4vw; } .rail__lead { flex-basis: 76vw; padding-block: var(--y-sp-6); } .rail__item { flex-basis: 72vw; min-height: 52vh; padding: var(--y-sp-5); } .rail__tail { flex-basis: 40vw; } }

/* --- 5 · пик: морф ------------------------------------------------------------ */
.peak { background: var(--y-graphite-900); }
.peak__stage { background: var(--y-graphite-900); }
.morph { position: absolute; inset: 0; clip-path: polygon(50% 46.5%, 52.6% 50%, 50% 53.5%, 47.4% 50%); will-change: clip-path; background: var(--y-paper-50); }
.peak__poster { transition: opacity 400ms var(--y-ease-out); }
.peak__live { opacity: 0; transition: opacity 400ms var(--y-ease-out); }
.peak__live.is-live { opacity: 1; }
.peak__figures { position: absolute; left: var(--y-gutter); right: var(--y-gutter); bottom: clamp(3rem, 10vh, 7rem); z-index: var(--y-z-copy); }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: var(--y-sp-6) var(--y-sp-9); margin: var(--y-sp-4) 0 0; align-items: end; justify-content: start; }
.figure { display: flex; flex-direction: column-reverse; gap: var(--y-sp-2); will-change: opacity, transform; }
.figure__n { margin: 0; font-family: var(--y-font-display); font-weight: 500; font-size: var(--y-figure-fs); line-height: 0.9; letter-spacing: var(--y-figure-track); color: var(--y-paper-50); }
.figure__l { font-size: var(--y-fs-xs); letter-spacing: var(--y-track-wide); text-transform: uppercase; color: var(--y-bone-300); }
.peak__text { margin-top: var(--y-sp-5); max-width: 52ch; color: var(--y-paper-50); }
.values { position: absolute; top: 50%; left: var(--y-gutter); right: var(--y-gutter); margin: 0; opacity: 0; will-change: transform, opacity; z-index: var(--y-z-copy); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 0.5em; align-items: baseline; text-align: center; transform: translate3d(0,-50%,0); }
.values i { font-style: normal; color: var(--y-red-400); }
.values__label { position: absolute; left: var(--y-gutter); top: calc(66% + 1rem); opacity: 0; transition: opacity 240ms var(--y-ease-out); z-index: var(--y-z-copy); }
@media (max-width: 860px) {
  .figures { grid-template-columns: 1fr; gap: var(--y-sp-4); }
  .figure__n { font-size: clamp(3.4rem, 18vw, 5.5rem); }
  .peak__text { display: none; }
  .values { font-size: var(--y-fs-xl); }
}
@media (prefers-reduced-motion: reduce) {
  /* Без движения: постер держит кадр, цифры и ценности стоят столбиком на тёмной плашке. */
  .morph { clip-path: none !important; }
  .morph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(20 19 18 / 0.94) 0%, rgb(20 19 18 / 0.78) 50%, rgb(20 19 18 / 0.3) 100%); }
  .peak__stage { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--y-sp-5); padding-bottom: var(--y-sp-7); }
  .peak__figures { position: static; padding-inline: var(--y-gutter); }
  .values { position: static; white-space: normal; opacity: 1 !important; transform: none !important; flex-wrap: wrap; justify-content: flex-start; text-align: left; padding: 0 var(--y-gutter); font-size: var(--y-fs-2xl); }
  .values__label { position: static; opacity: 1 !important; padding-inline: var(--y-gutter); }
}

/* --- 6 · команда --------------------------------------------------------------- */
.team { background: var(--y-graphite-900); }
.team__field { position: relative; min-height: 100vh; overflow: clip; display: grid; place-items: center; padding: var(--y-sp-10) var(--y-gutter); }
.team__copy { position: relative; z-index: 2; width: min(100%, 40rem); text-align: center; display: flex; flex-direction: column; gap: var(--y-sp-4); align-items: center; }
.team__copy .lede { color: var(--y-paper-50); }
.team__copy .body { color: var(--y-bone-300); }
.team__p { position: absolute; margin: 0; width: 12vw; min-width: 6.5rem; max-width: 14rem; will-change: transform; }
.team__img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--y-r-1); filter: grayscale(1); }
.team__p figcaption { display: flex; flex-direction: column; margin-top: var(--y-sp-2); background: var(--y-graphite-900); }
.team__name { font-size: var(--y-fs-sm); color: var(--y-paper-50); }
.team__role { font-size: var(--y-fs-xs); letter-spacing: var(--y-track-wide); text-transform: uppercase; color: var(--y-bone-300); }
.team__p--founder { width: 18vw; max-width: 20rem; left: 5%; top: 12%; z-index: 1; }
.team__p--1 { left: 27%; top: 0; } .team__p--2 { right: 5%; top: 8%; } .team__p--3 { right: 21%; top: 1%; } .team__p--4 { left: 4%; top: 58%; }
.team__p--5 { left: 19%; top: 64%; } .team__p--6 { right: 4%; top: 54%; } .team__p--7 { right: 19%; top: 64%; } .team__p--8 { left: 45%; top: 66%; }
.team__p--9 { left: 50%; top: 0; } .team__p--10 { right: 36%; top: 60%; }
.team__copy::before { content: ""; position: absolute; inset: -14% -12%; z-index: -1; background: radial-gradient(closest-side, color-mix(in oklab, var(--y-graphite-900) 92%, transparent), transparent); }
@media (max-width: 860px) {
  /* Телефон: текст сверху, портреты сеткой 3 × 4 под ним, дрейф остаётся. */
  .team__field { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--y-sp-6) var(--y-sp-3); align-items: start; min-height: 0; padding: var(--y-sp-9) var(--y-gutter) var(--y-sp-10); overflow: visible; }
  .team__p, .team__p--founder { position: static; width: auto; min-width: 0; max-width: none; margin: 0; transform: none !important; }
  .team__p--founder { grid-column: span 2; }
  .team__copy { order: -1; grid-column: 1 / -1; width: auto; text-align: left; align-items: flex-start; margin-bottom: var(--y-sp-4); }
  .team__copy::before { display: none; }
}

/* --- 7 · сетка проектов --------------------------------------------------------- */
.grid-sec__head { margin-bottom: var(--y-sp-7); }
.tile__tilt { will-change: transform; }

/* --- 8 · закрытие --------------------------------------------------------------- */
.close { background: var(--y-graphite-900); }
.close__stage { display: flex; flex-direction: column; justify-content: space-between; padding-top: calc(var(--y-nav-h) + var(--y-sp-6)); background: var(--y-graphite-900); }
.close__inner { padding-inline: var(--y-gutter); display: flex; flex-direction: column; align-items: flex-start; gap: var(--y-sp-5); }
.close__title { max-width: 12ch; }
.close__lede { color: var(--y-bone-300); }
.cta--big { font-size: var(--y-fs-sm); padding: 1em 1.6em; }
.close .foot { color: var(--y-paper-50); }
.close .foot .label { color: var(--y-bone-300); }
.close .foot__bar { border-top-color: var(--y-hairline); color: var(--y-bone-300); }
@media (max-width: 860px) {
  .close__stage { padding-top: calc(var(--y-nav-h) + var(--y-sp-4)); }
  .close .foot { padding-top: var(--y-sp-5); }
  .close .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--y-sp-4); }
  .close .foot__col:last-child { grid-column: 1 / -1; }
  .close .foot__col p a { font-size: var(--y-fs-sm); }
  .close .foot__bar { margin-top: var(--y-sp-4); }
}
@media (max-width: 480px) { .close .foot__grid { grid-template-columns: 1fr; } }

/* --- страница проекта ------------------------------------------------------------ */
.phero { background: var(--y-graphite-900); overflow-x: clip; }
.phero__copy { max-width: min(46rem, 80vw); }
.phero__copy .label { margin-bottom: var(--y-sp-3); }
.phero--still .phero__frame { position: relative; height: 100svh; overflow: clip; }
.phero__fig { position: absolute; inset: -12% 0; margin: 0; }
.phero__fig img { width: 100%; height: 100%; object-fit: cover; }
.phero--still .phero__copy { position: absolute; left: var(--y-gutter); bottom: clamp(3rem, 12vh, 9rem); z-index: 2; }
.popen__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--y-sp-7); align-items: start; }
.popen__grid > .link { justify-self: start; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--y-sp-5); margin: 0; }
.facts dd { margin: var(--y-sp-2) 0 0; font-family: var(--y-font-display); font-weight: 500; font-size: var(--y-fs-xl); letter-spacing: var(--y-track-snug); line-height: 1.1; }
.ptext { padding-block: var(--y-section-compact); }
.ptext__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--y-sp-7); align-items: start; }
.ptext__h { max-width: 18ch; }
.ptext__body > p + p { margin-top: var(--y-sp-4); }
.bands { display: flex; flex-direction: column; gap: var(--y-sp-5); padding-block: var(--y-sp-3) var(--y-sp-6); overflow-x: clip; }
.band { position: relative; overflow-x: clip; }
.band__fig { margin: 0; overflow: clip; border-radius: var(--y-r-1); }
.band__fig img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; }
.band--wide .band__fig { aspect-ratio: 16 / 8; }
.band--col { padding-inline: var(--y-gutter); } .band--col .band__fig { aspect-ratio: 16 / 10; max-width: 74rem; margin-left: auto; }
.band--half { padding-inline: var(--y-gutter); } .band--half .band__fig { aspect-ratio: 3 / 4; width: min(46vw, 40rem); }
.band--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--y-sp-5); padding-inline: var(--y-gutter); } .band--pair .band__fig { aspect-ratio: 3 / 4; } .band--pair .band__fig:nth-child(2) { margin-top: var(--y-sp-9); }
.band__stage { background: var(--y-graphite-900); }
.pnext { position: relative; overflow-x: clip; }
.pnext__link { position: relative; display: block; height: 80vh; overflow: clip; color: var(--y-paper-50); }
.pnext__fig { position: absolute; inset: -10% 0; margin: 0; }
.pnext__fig img { width: 100%; height: 100%; object-fit: cover; }
.pnext__copy { position: absolute; left: var(--y-gutter); bottom: clamp(3rem, 10vh, 7rem); z-index: 2; display: flex; flex-direction: column; gap: var(--y-sp-3); }
@media (max-width: 860px) {
  .popen__grid, .ptext__grid { grid-template-columns: 1fr; gap: var(--y-sp-5); }
  .facts { grid-template-columns: 1fr 1fr; }
  .band--pair { grid-template-columns: 1fr; } .band--pair .band__fig:nth-child(2) { margin-top: 0; }
  .band--half .band__fig { width: 100%; } .band--col .band__fig { aspect-ratio: 4 / 3; }
}

/* --- услуги ---------------------------------------------------------------------- */
.svc-sec { scroll-margin-top: var(--y-nav-h); border-top: 1px solid var(--y-hairline); }
.svc-sec__grid { display: grid; grid-template-columns: 4fr 3fr 5fr; gap: var(--y-sp-7); align-items: start; }
.svc-sec__head { position: sticky; top: calc(var(--y-nav-h) + var(--y-sp-4)); display: flex; flex-direction: column; gap: var(--y-sp-3); }
.svc-sec__media { margin: 0; overflow: clip; border-radius: var(--y-r-1); aspect-ratio: 3 / 4; }
.svc-sec__frame { height: 100%; }
.svc-sec__frame img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; }
.svc-sec__body .display--sm { margin-top: var(--y-sp-7); }
.svc-h4 { margin: var(--y-sp-6) 0 0; font-size: var(--y-fs-lg); font-weight: 500; letter-spacing: var(--y-track-snug); max-width: 40ch; }
.svc-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--y-sp-4); margin-top: var(--y-sp-8); padding-top: var(--y-sp-6); border-top: 1px solid var(--y-hairline); }
.svc-sec__note { font-size: var(--y-fs-sm); }
@media (max-width: 1024px) { .svc-sec__grid { grid-template-columns: 1fr 1fr; } .svc-sec__body { grid-column: 1 / -1; } .svc-sec__head { position: static; } }
@media (max-width: 860px) { .svc-sec__grid { grid-template-columns: 1fr; } .svc-sec__media { aspect-ratio: 4 / 3; } }

/* --- о студии --------------------------------------------------------------------- */
.ahero { background: var(--y-canvas); }
.ahero__stage { display: grid; place-items: center; background: var(--y-canvas); }
.ahero__photo { position: absolute; inset: 0; margin: 0; }
.ahero__photo img { width: 100%; height: 100%; object-fit: cover; }
.ahero__lockup { position: relative; z-index: 2; text-align: center; will-change: transform; transform-origin: 50% 50%; }
.ahero__title { font-size: clamp(4rem, 14.8vw, 18rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--y-ink-display); transition: color 240ms var(--y-ease-out); }
.ahero__lockup.is-over-photo .ahero__title { color: var(--y-paper-50); }
.ahero__lockup.is-over-photo .ahero__eyebrow { color: var(--y-bone-300); }
.ahero__eyebrow { margin-bottom: var(--y-sp-4); }
.alead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--y-sp-8); }
.aimg { height: 70vh; overflow: clip; }
main { overflow-x: clip; }
.aimg__fig { margin: 0; height: 120%; margin-top: -10%; } .aimg__fig img { width: 100%; height: 100%; object-fit: cover; }
.avalues__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--y-sp-7); }
.avalues__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--y-sp-5) var(--y-sp-7); }
.avalues__list li { display: flex; flex-direction: column; gap: var(--y-sp-2); padding-top: var(--y-sp-4); border-top: 1px solid var(--y-hairline); }
.aphil__grid { display: grid; grid-template-columns: 2fr 3fr; gap: var(--y-sp-8); align-items: start; }
.aphil__portrait { margin: 0; overflow: clip; border-radius: var(--y-r-1); aspect-ratio: 2 / 3; }
.aphil__portrait > div { height: 100%; }
.aphil__portrait img { width: 100%; height: 100%; object-fit: cover; scale: 1.1; filter: grayscale(1); }
.aphil__sign { margin-top: var(--y-sp-5); font-size: var(--y-fs-sm); letter-spacing: var(--y-track-wide); text-transform: uppercase; color: var(--y-ink-soft); }
.aphil .cta { margin-top: var(--y-sp-6); }
@media (max-width: 860px) { .alead__grid, .avalues__grid, .aphil__grid { grid-template-columns: 1fr; gap: var(--y-sp-6); } .avalues__list { grid-template-columns: 1fr; } .aimg { height: 48vh; } }

/* --- контакты ----------------------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--y-sp-9); align-items: start; }
.contact__sheet { display: flex; flex-direction: column; gap: var(--y-sp-7); }
.contact__block { display: flex; flex-direction: column; gap: var(--y-sp-3); align-items: flex-start; }
.contact__list { display: flex; flex-direction: column; gap: var(--y-sp-2); }
.contact__list li { display: flex; gap: var(--y-sp-4); align-items: baseline; }
.contact__list a { font-size: var(--y-fs-lg); }
.contact__list a:hover { text-decoration: underline; text-underline-offset: var(--y-link-offset); }
.contact__form { position: sticky; top: calc(var(--y-nav-h) + var(--y-sp-5)); display: flex; flex-direction: column; gap: var(--y-sp-5); }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; gap: var(--y-sp-7); } .contact__form { position: static; } }

/* --- без JavaScript: всё видно, ничего не пинится --------------------------------- */
.no-js [data-sc-cue], .no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
.no-js [data-sc-reveal] { clip-path: none !important; }
.no-js .w__i { transform: none; }
.no-js .intro { display: none; }
.no-js .masthead .mark--head { visibility: visible !important; }
.no-js .morph { clip-path: none !important; }
.no-js .values { position: static; opacity: 1 !important; transform: none !important; white-space: normal; flex-wrap: wrap; padding: var(--y-sp-5) var(--y-gutter); }
.no-js .values__label { position: static; opacity: 1 !important; padding-inline: var(--y-gutter); }
.no-js .peak__stage { display: flex; flex-direction: column; justify-content: flex-end; }
.no-js .rail { width: auto; flex-wrap: wrap; padding-block: var(--y-sp-8); }
.no-js .rail__item, .no-js .rail__lead, .no-js .rail__tail { opacity: 1 !important; flex-basis: 40vw; min-height: 0; }
.no-js .team__field { display: flex; flex-wrap: wrap; gap: var(--y-sp-5); min-height: 0; justify-content: center; }
.no-js .team__p { position: static; width: 12rem; }
.no-js .team__copy { width: 100%; }
.no-js .ahero__lockup { transform: none !important; }
.no-js .sc-stage__poster, .no-js .stage-poster { opacity: 1 !important; }
.no-js video[data-sc-scrub], .no-js video[data-live] { display: none; }