/* Секции: по одному блоку на секцию, в порядке карты из docs/design-system.md. Блок начинается с комментария «NN id».
   Мобильные правила – в конце блока секции: @media (max-width: 768px) и (max-width: 500px). */

/* 01 hero */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-top: var(--header-h);
  padding-bottom: var(--space-32);
  overflow: hidden;
}
.hero__head { flex: 1; align-content: center; }
.hero__title { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; }
.hero__title span { display: block; white-space: nowrap; }
.hero__title span:nth-child(1) { grid-column: 1 / -1; }
.hero__title span:nth-child(2) { grid-column: 3 / -1; }
.hero__title span:nth-child(3) { grid-column: 5 / -1; }
.hero__aside { grid-column: 10 / 13; grid-row: 1; align-self: start; display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-16); }
.hero__street { padding-left: var(--page-margin); overflow-x: auto; scrollbar-width: none; }
.hero__street::-webkit-scrollbar { display: none; }
.street { display: flex; gap: var(--space-12); transform: translateX(calc(var(--p, 0) * var(--drift))); }
.facade { flex: none; display: flex; flex-direction: column; gap: var(--space-8); }
.facade img { height: var(--strip-h); width: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.facade--wide { width: var(--strip-wide); }
.facade--wide img { width: 100%; aspect-ratio: auto; }
.facade figcaption { display: flex; justify-content: space-between; gap: var(--space-16); }

@media (max-width: 768px) {
  .hero__head { display: flex; flex-direction: column; justify-content: center; gap: var(--space-24); }
  .hero__title { display: flex; flex-direction: column; }
  .hero__title span:nth-child(2) { padding-left: 12%; }
  .hero__title span:nth-child(3) { padding-left: 24%; }
  .hero__street { padding-left: var(--page-margin-mobile); }
  .facade img { height: var(--strip-h-mobile); }
  .facade--wide { width: var(--strip-wide-mobile); }
}

/* 02 scale */
.scale__top { row-gap: var(--space-64); align-items: start; }
.scale__facts { grid-column: 1 / 5; }
.scale__statement { grid-column: 6 / 13; }
.numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-32) var(--space-48);
  margin-top: var(--space-128);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-line);
}
.numbers__item { display: flex; flex-direction: column; gap: var(--space-12); }
.scale__clients { margin-top: var(--space-128); row-gap: var(--space-24); align-items: baseline; }
.scale__clients-title { grid-column: 1 / 4; }
.clients { grid-column: 4 / 13; display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-32); }

@media (max-width: 768px) {
  .scale__facts, .scale__statement, .scale__clients-title, .clients { grid-column: 1 / -1; }
  .scale__statement { order: -1; }
  .scale__facts { grid-template-columns: var(--facts-label-mobile) 1fr; }
  .numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-64); }
  .numbers__item:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .scale__clients { margin-top: var(--space-64); }
  .clients { gap: var(--space-8) var(--space-24); }
}

/* 03 projects – фирменный приём «улица»: пин с горизонтальной лентой (track, docs/motion.md); без пина – нативный свайп */
.projects { overflow: hidden; }
.projects__intro { row-gap: var(--space-16); align-items: end; }
.projects__title { grid-column: 1 / 9; }
.projects__lead { grid-column: 9 / 13; }
.track { margin-top: var(--space-64); padding-left: var(--page-margin); }
.track__rail { display: flex; align-items: flex-start; gap: var(--space-32); overflow-x: auto; scrollbar-width: none; padding-right: var(--page-margin); }
.track__rail::-webkit-scrollbar { display: none; }
.projects.is-pinned { height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--header-h) + var(--space-16)) var(--space-16); }
.projects.is-pinned .track { margin-top: var(--space-32); }
.projects.is-pinned .track__rail { overflow: visible; width: max-content; }
.projects.is-pinned .track::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: var(--space-24);
  margin-right: var(--page-margin);
  background: var(--color-fg-on-dark);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
.project { flex: none; width: min-content; display: flex; flex-direction: column; gap: var(--space-16); }
.project__media { display: block; height: var(--track-h); aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-bg-elevated); }
.project--wide .project__media { aspect-ratio: 3 / 2; }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-900) var(--ease-out); }
.project:hover .project__media img, .project__media:focus-visible img { transform: scale(var(--zoom-hover)); }
.project__meta { display: flex; flex-direction: column; gap: var(--space-12); }
.project__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); }
.project__area { flex: none; color: var(--color-accent-on-dark); font-variant-numeric: tabular-nums; }
.project__more { align-self: flex-start; }
.project:hover .project__more { background-size: 100% 1px; }
.project--end { width: var(--track-narrow); height: var(--track-h); justify-content: flex-end; align-items: flex-start; gap: var(--space-24); padding-left: var(--space-32); border-left: 1px solid var(--color-line-on-dark); }

@media (max-width: 768px) {
  .projects__title, .projects__lead { grid-column: 1 / -1; }
  .track { margin-top: var(--space-48); padding-left: var(--page-margin-mobile); }
  .track__rail { gap: var(--space-16); padding-right: var(--page-margin-mobile); scroll-snap-type: x mandatory; }
  .project { scroll-snap-align: start; }
  .project__media, .project--wide .project__media { height: auto; width: var(--track-mobile); aspect-ratio: 4 / 5; }
  .project--end { width: var(--track-mobile); height: auto; min-height: var(--track-h-mobile); }
}

/* 04 manifesto – пауза: огромная типографика, строки расходятся по прокрутке (scrub → --p), фото в строке меняет «до» на «после» */
.manifesto { overflow: clip; }
.manifesto__text { display: flex; flex-direction: column; }
.manifesto__line { display: block; white-space: nowrap; padding-left: var(--page-margin); transform: translateX(calc((0.5 - var(--p, 0.5)) * var(--manifesto-shift))); }
.manifesto__line--r { padding-left: var(--manifesto-indent); transform: translateX(calc((var(--p, 0.5) - 0.5) * var(--manifesto-shift))); }
.manifesto__img { position: relative; display: inline-block; height: var(--manifesto-img-h); aspect-ratio: 4 / 3; overflow: hidden; vertical-align: baseline; }
.manifesto__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* «После» проявляется с --manifesto-swap-start прохода секции через экран, за 0.2 прогресса (×5); было 0.4 – менялось слишком поздно */
.manifesto__after { opacity: clamp(0, calc((var(--p, 0.7) - var(--swap, var(--manifesto-swap-start))) * 5), 1); }
/* Второе фото на строку ниже (~300 px) – свой порог, чтобы менялось в той же зоне экрана, что и первое: с низа экрана до середины */
.manifesto__img--late { --swap: var(--manifesto-swap-late); }
.manifesto__note { margin-top: var(--space-64); }

@media (max-width: 768px) {
  .manifesto__line { padding-left: var(--page-margin-mobile); }
  .manifesto__line--r { padding-left: var(--manifesto-indent); }
  .manifesto__note { margin-top: var(--space-32); }
}

/* 05 transformation */
.transformation__intro { row-gap: var(--space-24); align-items: end; }
.transformation__title { grid-column: 1 / 9; }
.transformation__lead { grid-column: 9 / 13; }
.story { margin-top: var(--space-128); row-gap: var(--space-32); align-items: end; }
.story__text { grid-column: 1 / 5; display: flex; flex-direction: column; gap: var(--space-16); }
.story__media { grid-column: 5 / 13; }
.story--reverse .story__media { grid-column: 1 / 7; }
.story--reverse .story__text { grid-column: 8 / 12; }
.story__state { display: flex; flex-direction: column; gap: var(--space-4); }
.story__result { padding-top: var(--space-16); border-top: 1px solid var(--color-line); }

@media (max-width: 768px) {
  .transformation__title, .transformation__lead, .story__text, .story__media,
  .story--reverse .story__media, .story--reverse .story__text { grid-column: 1 / -1; }
  .story { margin-top: var(--space-64); }
  .story__media { order: -1; }
  .story__media.compare { aspect-ratio: 4 / 5; }
}

/* 06 expertise */
.expertise__intro { row-gap: var(--space-24); align-items: end; }
.expertise__title { grid-column: 1 / 9; }
.expertise__lead { grid-column: 9 / 13; }
.expertise__list { margin-top: var(--space-96); }
.expertise__row { row-gap: var(--space-16); align-items: start; padding-block: var(--space-32); border-top: 1px solid var(--color-line-on-dark); transition: color var(--dur-300) var(--ease-out); }
.expertise__row:hover .expertise__name { color: var(--color-accent-on-dark); }
.expertise__name { transition: color var(--dur-300) var(--ease-out); }
.expertise__row:last-child { border-bottom: 1px solid var(--color-line-on-dark); }
.expertise__name { grid-column: 1 / 6; }
.expertise__body { grid-column: 6 / 10; display: flex; flex-direction: column; gap: var(--space-16); }
.expertise__thumb { grid-column: 11 / 13; overflow: hidden; }
.expertise__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-900) var(--ease-out); }
.expertise__row:hover .expertise__thumb img { transform: scale(var(--zoom-hover)); }
/* Hover-приём `row-reveal`: фото раскрывается окном снизу вверх по наведению и фокусу; на тач-экранах – у строки в центре экрана (.is-active из main.js).
   Скрыто только при html.has-motion: в ?static и prefers-reduced-motion фото видны всегда */
.expertise__row:focus-visible { outline: 1px solid var(--color-accent-on-dark); outline-offset: var(--space-8); }
.expertise__row:is(:focus-visible, .is-active) .expertise__name { color: var(--color-accent-on-dark); }
.has-motion .expertise__thumb { clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-600) var(--ease-sharp); }
.has-motion .expertise__row:is(:hover, :focus-within, .is-active) .expertise__thumb { clip-path: inset(0); }
.expertise__figure { margin-top: var(--space-96); display: flex; flex-direction: column; gap: var(--space-12); }
.expertise__figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

@media (max-width: 768px) {
  .expertise__title, .expertise__lead, .expertise__name, .expertise__body { grid-column: 1 / -1; }
  .expertise__thumb { grid-column: 1 / 7; grid-row: 1; }
  .expertise__list { margin-top: var(--space-48); }
  .expertise__row { padding-block: var(--space-24); row-gap: var(--space-12); }
  .expertise__figure { margin-top: var(--space-64); }
  .expertise__figure img { aspect-ratio: 4 / 3; }
}

/* 07 digital-lab */
.lab__intro { row-gap: var(--space-32); }
.lab__title { grid-column: 1 / 10; }
.lab__lead { grid-column: 7 / 13; }
/* Процесс Digital Lab: 4 шага в реальном порядке. С движением (html.has-motion, шире 768): слева прилипшее фото, справа шаги;
   активный шаг – тот, что проходит середину экрана (main.js), фото сменяется окном снизу вверх. Без движения и на телефоне – у каждого шага своё фото */
.lab__process { margin-top: var(--space-96); align-items: start; }
.lab__frame { display: none; }
.lab__steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-64) var(--gutter); }
.lab__step { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-24); row-gap: var(--space-24); align-items: start; padding-top: var(--space-24); border-top: 1px solid var(--color-line); }
.lab__n { color: var(--color-accent); }
.lab__step-body { display: flex; flex-direction: column; gap: var(--space-12); }
.lab__thumb { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-8); }
.lab__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 769px) {
  .has-motion .lab__frame { grid-column: 1 / 7; position: sticky; top: var(--lab-frame-top); height: var(--lab-frame-h); display: block; }
  /* Кадры стопкой в порядке шагов: следующий в DOM лежит выше, открытые – все до активного включительно */
  .has-motion .lab__frame-img { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--space-12); background: var(--color-bg-page); clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-600) var(--ease-sharp); }
  .has-motion .lab__frame-img.is-on { clip-path: inset(0); }
  .has-motion .lab__frame-img img { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
  .has-motion .lab__steps { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 0; padding-block: var(--lab-steps-pad); }
  .has-motion .lab__step { min-height: var(--lab-step-h); }
  .has-motion .lab__step { opacity: var(--lab-step-dim); transition: opacity var(--dur-600) var(--ease-out); }
  .has-motion .lab__step.is-on { opacity: 1; }
  .has-motion .lab__thumb { display: none; }
}

@media (max-width: 768px) {
  .lab__title, .lab__lead { grid-column: 1 / -1; }
  .lab__process { margin-top: var(--space-48); }
  .lab__steps { grid-template-columns: 1fr; gap: var(--space-48); }
}

/* 08 studio */
.studio { padding-top: 0; }
.studio__photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.studio__body { margin-top: var(--space-96); row-gap: var(--space-64); align-items: start; }
.studio__title { grid-column: 1 / 8; }
.studio__text { grid-column: 8 / 13; display: flex; flex-direction: column; gap: var(--space-24); }
.studio__portrait { grid-column: 1 / 4; display: flex; flex-direction: column; gap: var(--space-12); }
.studio__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.studio__portrait figcaption { display: flex; flex-direction: column; gap: var(--space-4); }
.studio__join { grid-column: 8 / 13; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding-top: var(--space-24); border-top: 1px solid var(--color-line-on-dark); }

@media (max-width: 768px) {
  .studio__photo img { aspect-ratio: 4 / 3; }
  .studio__body { margin-top: var(--space-64); row-gap: var(--space-48); }
  .studio__title, .studio__text, .studio__join { grid-column: 1 / -1; }
  .studio__portrait { grid-column: 1 / 9; }
}

/* 09 contact */
.contact__body { row-gap: var(--space-64); align-items: start; }
.contact__title { grid-column: 1 / -1; }
.contact__form { grid-column: 1 / 7; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-24); }
.contact__form .btn { align-self: flex-start; }
.contact__details { grid-column: 8 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); font-style: normal; }
.contact__footer { display: flex; flex-wrap: wrap; gap: var(--space-16) var(--space-32); margin-top: var(--space-128); padding-top: var(--space-24); border-top: 1px solid currentColor; }
.contact__footer span { flex: 1; }

@media (max-width: 768px) {
  .contact__form, .contact__details { grid-column: 1 / -1; }
  .contact__body { row-gap: var(--space-48); }
  .contact__footer { margin-top: var(--space-64); }
}