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

/* 01 hero -------------------------------------------------------------------------------------------------- */
.hero { position: relative; min-height: var(--h-screen); display: flex; align-items: flex-end; padding-block: calc(var(--header-h) + var(--space-48)) var(--space-48); }
.hero__in { position: relative; align-items: end; row-gap: var(--space-48); }
.hero__text { grid-column: 1 / 9; display: flex; flex-direction: column; gap: var(--space-32); align-items: flex-start; }
.hero__lead { max-width: var(--measure); }
.hero__actions { display: flex; align-items: center; gap: var(--space-32); }
.hero__board { grid-column: 9 / 13; display: flex; flex-direction: column; gap: var(--space-16); }
.fig { padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
.fig__stack { display: grid; aspect-ratio: 3 / 2; overflow: hidden; }
.fig__stack img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.fig__stack img[data-fit="contain"] { object-fit: contain; background: var(--color-bg-sheet); }   /* вертикальный фасад – целиком на листе, горизонтальные кадры – в рамку 3:2 без потерь */
.fig__cap { display: flex; justify-content: space-between; gap: var(--space-16); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.steps button { padding-block: var(--space-8); }
.steps i { display: block; height: var(--step-h); background: var(--color-line); }
.steps i::before { content: ""; display: block; height: 100%; background: var(--color-red); transform: scaleX(var(--p, 0)); transform-origin: left; }
.steps button:hover i { background: var(--color-fg); }
.dim { display: flex; align-items: center; gap: var(--space-12); color: var(--color-red); }
.dim::before, .dim::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.dim span { color: var(--color-fg); }
.hero__facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--color-line); padding-top: var(--space-16); }
.hero__facts div { display: flex; flex-direction: column; gap: var(--space-4); }
/* Факты по колонкам 1–2, 3–5, 6–8, 9–12: линия чертежа по краю фигуры (колонка 9) проходит в межколоннике, текст не пересекает */
.hero__facts div:nth-child(1) { grid-column: 1 / 3; }
.hero__facts div:nth-child(2) { grid-column: 3 / 6; }
.hero__facts div:nth-child(3) { grid-column: 6 / 9; }
.hero__facts div:nth-child(4) { grid-column: 9 / 13; }
@media (max-width: 768px) {
  .hero { padding-block: calc(var(--header-h) + var(--space-32)) var(--space-32); }
  .hero__text, .hero__board, .hero__facts { grid-column: 1 / -1; }
  .hero__facts { grid-template-columns: 1fr 1fr; row-gap: var(--space-16); }
  .hero__facts div:nth-child(n) { grid-column: auto; }
  .hero__facts div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .hero__actions { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .fig { padding: var(--space-16); }
}

/* 02 intro ------------------------------------------------------------------------------------------------- */
.intro__text { grid-column: 1 / 12; }
.intro__text .word { transition: color var(--dur-300); }
.intro__foot { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: var(--space-96); padding-top: var(--space-16); border-top: 1px solid var(--color-line); }
.intro__foot p:first-child { grid-column: 1 / 6; }
.intro__foot p:last-child { grid-column: 7 / 12; }
@media (max-width: 768px) {
  .intro__text, .intro__foot, .intro__foot p:first-child, .intro__foot p:last-child { grid-column: 1 / -1; }
  .intro__foot { row-gap: var(--space-16); margin-top: var(--space-48); }
}

/* 03 transformation ---------------------------------------------------------------------------------------- */
/* Шов на весь экран: фото «до» и «после» в одном кадре, заголовок поверх сверху, штамп фактов поверх снизу в строку */
.transformation { padding-bottom: var(--space-section); }
.seam__frame { --seam: 50%; position: relative; display: grid; height: var(--h-screen); min-height: var(--seam-min-h); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; color: var(--color-fg-on-dark); }
.seam__frame *, .seam__frame *::selection { -webkit-user-drag: none; background-color: transparent; }
.seam__frame > img, .seam__before, .seam__ui { grid-area: 1 / 1; min-height: 0; }
.seam__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; pointer-events: none; }
.seam__before { position: relative; clip-path: inset(0 calc(100% - var(--seam)) 0 0); }
.seam__frame::after { content: ""; grid-area: 1 / 1; position: relative; z-index: var(--z-content); pointer-events: none;
  background: linear-gradient(var(--color-scrim-strong), var(--color-scrim) 30%, transparent 48%, transparent 56%, var(--color-scrim) 72%, var(--color-scrim-strong)); }   /* затемнение на всю ширину кадра, а не контейнера – иначе на широких экранах светлые полосы по краям */
.seam__ui { position: relative; z-index: var(--z-raised); display: grid; grid-template-rows: auto 1fr auto auto; row-gap: var(--space-16); padding-block: calc(var(--header-h) + var(--space-48)) var(--space-32); pointer-events: none; }
.seam__head { align-items: end; row-gap: var(--space-16); }
.seam__title { grid-column: 1 / 9; }
.seam__lead { grid-column: 9 / 13; max-width: var(--measure); }
.seam__tags { grid-row: 3; display: flex; justify-content: space-between; }
.seam__facts { grid-row: 4; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: var(--space-16); border-top: 1px solid var(--color-line-on-dark); }
.seam__handle { z-index: var(--z-raised); position: absolute; top: 0; bottom: 0; left: var(--seam); width: var(--seam-knob); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; cursor: ew-resize; outline: none; }   /* декор: шов */
.seam__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--seam-w); transform: translateX(-50%); background: var(--color-red); }
.seam__knob { position: relative; width: var(--seam-knob); height: var(--seam-knob); border-radius: var(--radius-round); background: var(--color-red); color: var(--color-bg-sheet); display: flex; align-items: center; justify-content: center; transition: transform var(--dur-300) var(--ease-out); }
.seam__frame:hover .seam__knob, .seam__handle:focus-visible .seam__knob { transform: scale(1.12); }
.transformation__more { padding-top: var(--space-section); }
.lives { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--space-48); }
.lives__head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; row-gap: var(--space-16); }
.lives__head h3 { grid-column: 1 / 8; }
.lives__head p { grid-column: 9 / 13; max-width: var(--measure); }
.lives__row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.lives__row .sheet__img { background: var(--color-bg-sheet); }
.lives__line { grid-column: 1 / -1; height: var(--step-h); background: var(--color-line); }
.lives__line i { display: block; height: 100%; background: var(--color-red); transform: scaleX(var(--p, 1)); transform-origin: left; }
@media (max-width: 768px) {
  .seam__ui { padding-block: calc(var(--header-h) + var(--space-24)) var(--space-24); }
  .seam__title, .seam__lead { grid-column: 1 / -1; }
  .seam__facts { grid-template-columns: 1fr 1fr; row-gap: var(--space-12); }
  .seam__facts div:nth-child(n+4) { display: none; }
  .lives__head h3, .lives__head p { grid-column: 1 / -1; }
  .lives__row { grid-template-columns: 1fr; gap: var(--space-32); }
}

/* 04 scale ------------------------------------------------------------------------------------------------- */
.axis { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--space-96); position: relative; }
.axis__line { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--axis-w); background: var(--color-line); }   /* декор: ось */
.axis__line i { display: block; width: 100%; height: 100%; background: var(--color-red); transform: scaleY(0); transform-origin: top; }
.stop { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: var(--space-24); }
.stop__value { grid-column: 6 / 8; grid-row: 1; justify-self: center; padding: var(--space-8) var(--space-12); background: var(--color-bg-sheet); position: relative; text-align: center; }
.stop__fig { grid-row: 1; display: flex; flex-direction: column; gap: var(--space-16); text-align: left; position: relative; background: var(--color-bg-sheet); }
.stop__media { display: block; overflow: hidden; outline: 1px solid transparent; outline-offset: var(--space-8); transition: outline-color var(--dur-400) var(--ease-out); }
.stop__media img { width: 100%; height: auto; transition: transform var(--dur-900) var(--ease-out); }
.stop__fig:hover .stop__media, .stop__fig:focus-visible .stop__media { outline-color: var(--color-red); }
.stop__fig:hover .stop__media img { transform: scale(1.05); }
.stop__text { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); }
.stop--s .stop__fig { grid-column: 3 / 6; }
.stop--m .stop__fig { grid-column: 8 / 12; }
.stop--lg .stop__fig { grid-column: 1 / 6; }
.stop--wide .stop__fig { grid-column: 3 / 11; grid-row: 2; }   /* фото целиком: размер – колонками, пропорция – своя */
@media (max-width: 768px) {
  .axis { grid-template-columns: 1fr; padding-left: var(--space-24); row-gap: var(--space-64); }
  .axis__line { left: 0; }
  .stop { grid-template-columns: 1fr; }
  .stop__value { grid-column: 1; justify-self: start; padding-inline: 0; }
  .stop .stop__fig { grid-column: 1; grid-row: 2; }
  .stop--s .stop__fig { width: 55%; }
  .stop--m .stop__fig { width: 70%; }
  .stop--lg .stop__fig { width: 85%; }
}

/* 05 projects ---------------------------------------------------------------------------------------------- */
.filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-48); }
.index { grid-column: 1 / -1; }
.index__head, .index__row { display: grid; grid-template-columns: 3fr 4fr 3fr 2fr 4fr var(--space-24); column-gap: var(--gutter); align-items: baseline; }
.index__head { padding-bottom: var(--space-12); border-bottom: 1px solid var(--color-fg); }
.index__list li { border-bottom: 1px solid var(--color-line-soft); }
.index__list li.is-filtered { display: none; }
.index__row { width: 100%; padding-block: var(--space-24); text-align: left; position: relative; }
.index__row::before, .index__row::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--color-red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-600) var(--ease-out); }
.index__row::before { top: -1px; }
.index__row::after { bottom: -1px; }
.index__row > span { transition: transform var(--dur-600) var(--ease-out), color var(--dur-300); }
.index__row:hover::before, .index__row:hover::after, .index__row:focus-visible::before, .index__row:focus-visible::after { transform: scaleX(1); }
.index__row:hover > span:first-child { transform: translateX(var(--space-12)); }
.index__arrow { justify-self: end; color: var(--color-red); }
.index__row:hover .index__arrow { transform: translateX(var(--nudge)); }
.index__foot { display: flex; justify-content: space-between; gap: var(--space-24); padding-top: var(--space-24); }
.preview { position: fixed; top: 0; left: 0; z-index: var(--z-raised); width: var(--preview-w); aspect-ratio: 4 / 3; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity var(--dur-300) var(--ease-out); }   /* превью проекта за курсором */
.preview.is-on { opacity: 1; }
.preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  .index__head { display: none; }
  .index__row { grid-template-columns: 1fr var(--space-24); row-gap: var(--space-4); padding-block: var(--space-16); }
  .index__row > span:first-child { grid-column: 1; grid-row: 1; }
  .index__row > span:nth-child(n+2) { grid-column: 1; }
  .index__row > span:nth-child(5) { display: none; }
  .index__arrow { grid-column: 2; grid-row: 1; }
  .index__foot { flex-direction: column; }
}

/* 06 expertise --------------------------------------------------------------------------------------------- */
.ex { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; row-gap: var(--space-32); }   /* не subgrid: при пине GSAP оборачивает блок, и subgrid теряет родительскую сетку */
.ex.is-pinned { height: var(--h-screen); padding-block: calc(var(--header-h) + var(--space-16)) var(--space-16); }   /* закреплённый лист целиком в экране, ничего не уходит под край */
.ex.is-pinned .ex__stack { aspect-ratio: auto; height: min(calc(var(--h-screen) - var(--header-h) - var(--ex-chrome)), var(--ex-stack-max)); }   /* лист на всю колонку; если экран низкий, картинка вписывается (contain) на бумаге того же цвета – без обрезки и без полей другого цвета */
.ex.is-pinned .ex__btn { padding-block: var(--space-12); }
.ex__sheet { grid-column: 1 / 6; padding: var(--space-12); display: flex; flex-direction: column; gap: var(--space-12); }
.ex__sheet.marks { background-color: var(--color-bg-sheet); }
.ex__stack { background: var(--color-bg-sheet); padding: var(--ex-inset); }   /* иллюстрация меньше внутри листа, лист того же размера */
.ex__stack { display: grid; aspect-ratio: 4 / 5; overflow: hidden; }
.ex__img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; position: relative; visibility: hidden; }
.ex__img.is-active { visibility: visible; z-index: var(--z-raised); }
.ex__img.is-leaving { visibility: visible; z-index: var(--z-content); }
.ex__cap { display: flex; justify-content: space-between; gap: var(--space-16); }
.ex__cap span:first-child { color: var(--color-red-deep); white-space: nowrap; }
.ex__list { grid-column: 7 / 13; display: flex; flex-direction: column; }
.ex__item { display: grid; grid-template-rows: auto 0fr; border-top: 1px solid var(--color-line); transition: grid-template-rows var(--dur-600) var(--ease-out); }
.ex__item.is-active { grid-template-rows: auto 1fr; }
.ex__btn { display: flex; flex-direction: column; gap: var(--space-8); padding-block: var(--space-16); text-align: left; width: 100%; }
.ex__fig { color: var(--color-red-deep); }
.ex__title { color: var(--color-fg-soft); transition: color var(--dur-400) var(--ease-out), transform var(--dur-600) var(--ease-out); }
.ex__btn:hover .ex__title { color: var(--color-fg); transform: translateX(var(--space-8)); }
.ex__item.is-active .ex__title { color: var(--color-fg); }
.ex__text { overflow: hidden; min-height: 0; max-width: var(--measure); }
.ex__item.is-active .ex__text { padding-bottom: var(--space-24); }
@media (max-width: 768px) {
  .ex__sheet, .ex__list { grid-column: 1 / -1; }
  .ex__sheet { padding: var(--space-16); }
  .ex__stack { aspect-ratio: 4 / 5; }
}

/* 07 digital-lab ------------------------------------------------------------------------------------------- */
.lab { overflow: hidden; }
.lab__stage { position: relative; display: grid; aspect-ratio: 3 / 2; max-height: var(--h-screen); width: 100%; overflow: hidden; cursor: none; touch-action: pan-y; }
.lab__stage > img, .lab__drawing { grid-area: 1 / 1; }
.lab__stage img { width: 100%; height: 100%; object-fit: cover; }
.lab__drawing { --x: 50%; --y: 50%; --r: 0px; clip-path: circle(var(--r) at var(--x) var(--y)); }
.lab__ring { position: absolute; top: 0; left: 0; width: calc(var(--r-px, 0) * 2); height: calc(var(--r-px, 0) * 2); border: 1px solid var(--color-red); border-radius: var(--radius-round); pointer-events: none; }   /* декор: край линзы, двигает JS */
.lab__ring::before, .lab__ring::after { content: ""; position: absolute; background: var(--color-red); }
.lab__ring::before { left: 50%; top: 50%; width: var(--space-24); height: 1px; transform: translate(-50%, -50%); }
.lab__ring::after { left: 50%; top: 50%; width: 1px; height: var(--space-24); transform: translate(-50%, -50%); }
.lab__cap { grid-area: 1 / 1; align-self: end; display: flex; justify-content: space-between; gap: var(--space-24); padding: var(--space-16) var(--page-margin); background: linear-gradient(transparent, var(--color-scrim-strong)); color: var(--color-fg-on-dark); position: relative; pointer-events: none; }
.tools { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--space-64); }
.tool { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-16); border-top: 1px solid var(--color-line); position: relative; }
.tool::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--color-red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-600) var(--ease-out); }
.tool:hover::before { transform: scaleX(1); }
@media (max-width: 768px) {
  .lab__stage { aspect-ratio: 4 / 5; }
  .lab__stage img { object-position: 45% 60%; }
  .lab__cap { flex-direction: column; gap: var(--space-4); }
  .tools { grid-template-columns: 1fr; gap: var(--space-24); margin-top: var(--space-48); }
}

/* 08 studio ------------------------------------------------------------------------------------------------ */
/* Таймлайн как размерная цепочка чертежа: числа над линией, засечки 45° в узлах, красная линия идёт прокруткой (--p у каждого звена) */
.timeline { grid-column: 1 / -1; margin-bottom: var(--space-96); }
.timeline__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.timeline__list li { --p: 1; display: flex; flex-direction: column; gap: var(--space-16); padding-right: var(--gutter); }
.has-motion .timeline__list li { --p: 0; }
.timeline__list li::after { content: ""; order: 1; height: var(--mark); margin-right: calc(var(--gutter) * -1);
  background:
    linear-gradient(135deg, transparent 44%, var(--color-fg) 44% 56%, transparent 56%) left center / var(--mark) var(--mark) no-repeat,
    linear-gradient(var(--color-red), var(--color-red)) left center / calc(var(--p) * 100%) var(--step-h) no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) left center / 100% 1px no-repeat; }
.timeline__list li:last-child::after { background:
    linear-gradient(135deg, transparent 44%, var(--color-fg) 44% 56%, transparent 56%) left center / var(--mark) var(--mark) no-repeat,
    linear-gradient(135deg, transparent 44%, var(--color-fg) 44% 56%, transparent 56%) right center / var(--mark) var(--mark) no-repeat,
    linear-gradient(var(--color-red), var(--color-red)) left center / calc(var(--p) * 100%) var(--step-h) no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) left center / 100% 1px no-repeat; margin-right: 0; }
.timeline__list li:last-child { padding-right: 0; }
.timeline__list li > :last-child { order: 2; max-width: var(--measure); }
/* Лента «на стройке»: фото целиком по высоте --strip-h, лента едет влево прокруткой секции */
.strip { overflow: hidden; margin-block: var(--space-32) var(--space-96); }
.strip__track { display: flex; gap: var(--gutter); padding-inline: var(--page-margin); width: max-content; will-change: transform; }
.strip__item .sheet__img { aspect-ratio: auto; height: var(--strip-h); }
.strip__item .sheet__img img { width: auto; height: 100%; object-fit: contain; }
.studio__careers { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--space-24); align-items: end; }
.studio__careers-title { grid-column: 1 / 7; }
.studio__careers .body-l { grid-column: 8 / 13; }
.studio__careers .btn { grid-column: 8 / 13; justify-self: start; }
.studio__careers .body-l { max-width: var(--measure); }
@media (max-width: 768px) {
  .timeline { margin-bottom: var(--space-48); }
  .timeline__list { grid-template-columns: 1fr 1fr; row-gap: var(--space-24); }
  .studio__careers-title, .studio__careers .body-l, .studio__careers .btn { grid-column: 1 / -1; }
  .strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-block: var(--space-16) var(--space-48); }
  .strip__item { scroll-snap-align: start; }
}

/* 09 contact ----------------------------------------------------------------------------------------------- */
.contact__side { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--space-32); }
.contact__direct { display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--color-line); }
.form { grid-column: 7 / 13; display: flex; flex-direction: column; gap: var(--space-32); }
.form__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
.form__note { max-width: var(--measure); }
.form__note.is-error { color: var(--color-red-deep); }
@media (max-width: 768px) {
  .contact__side, .form { grid-column: 1 / -1; }
  .form { margin-top: var(--space-64); }
  .form__foot { flex-direction: column; align-items: flex-start; }
}

/* footer --------------------------------------------------------------------------------------------------- */
.footer { min-height: var(--h-screen); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding-top: var(--space-section); }
.footer__in { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-96); }
.footer__quote { max-width: var(--measure); }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-16) var(--space-32); padding-bottom: var(--space-16); border-bottom: 1px solid var(--color-line-on-dark); }
.footer__mark { --bx: 50%; --by: 50%; display: flex; justify-content: center; padding-top: var(--space-24); color: transparent; background: url("../assets/img/pda/chaussee-facade.jpg") var(--bx) var(--by) / 140% auto no-repeat; -webkit-background-clip: text; background-clip: text; user-select: none; }   /* логотип pda.archi, залитый камнем фасада */
@media (max-width: 768px) {
  .footer__row { flex-direction: column; }
}