/* PAGES V2 (2026-10-16) — раскладка страниц ?p= из разделов (app/page_sections_render.php).
   Только токены сайта из шаблона: --bg, --surface, --ink, --gold, --deep…, шрифты Prata/Onest, кривые --ease*.
   Своих цветов, гарнитур и кривых здесь нет — тёмная тема перекрашивает страницу вместе с сайтом.
   Сетка: 12 колонок внутри полей сайта (--pad, --maxw) плюс по колонке до края экрана с каждой стороны —
   снимок может уходить в край, текст держится колонок. Проценты в grid-template-columns считаются от ширины
   самого раздела, поэтому полоса прокрутки не даёт горизонтального сдвига (100vw здесь не используется). */

/* Запасные начертания с метриками Prata и Onest — те же, что в fonts.css пакета запасных начертаний для всего сайта
   (имена, метрики, unicode-range фирменных файлов, полужирные диапазоны совпадают; два одинаковых описания браузер
   сливает в одно). Здесь — чтобы страницы ?p= не прыгали при подмене шрифта и без того пакета: Prata и Onest
   приходят из fonts.css через ~150 мс после первой отрисовки (font-display: swap), а текст запасным шрифтом без
   подгонки переносился по-другому (CLS 0,03 на «О мастерской»). unicode-range — как у фирменных файлов: знаки, которых
   в них нет (₽, →), после загрузки рисуются прежним системным шрифтом, а не этими начертаниями. */
@font-face{font-family:'Prata fallback';font-style:normal;font-weight:400;
src:local('Georgia'), local('Gelasio');size-adjust:108.4%;ascent-override:91.3%;descent-override:33.2%;line-gap-override:0%;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Onest fallback';font-style:normal;font-weight:300 550;
src:local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');size-adjust:103.6%;ascent-override:93.6%;descent-override:29.9%;line-gap-override:0%;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Onest fallback';font-style:normal;font-weight:551 650;
src:local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');size-adjust:98.6%;ascent-override:98.4%;descent-override:31.4%;line-gap-override:0%;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Onest fallback';font-style:normal;font-weight:651 800;
src:local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');size-adjust:99.9%;ascent-override:97.1%;descent-override:31%;line-gap-override:0%;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

body.pg-v2 {
  font-family: 'Onest', 'Onest fallback', system-ui, sans-serif;
}

.pg {
  display: block;
}

.pg-hero,
.pg-index,
.pg-dir,
.pg-guide,
.pg-cta,
.pg-prose {
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    repeat(12, [col] calc((min(100%, var(--maxw)) - 2 * var(--pad)) / 12))
    [wend] minmax(0, 1fr) [full-end];
}

.pg-dir,
.pg-guide,
.pg-cta {
  scroll-margin-top: 84px;
}

/* ---------- типографика ---------- */

.pg-h1,
.pg-h2,
.pg-h3,
.pg-index a {
  font-family: 'Prata', 'Prata fallback', 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-synthesis: none;
}

.pg-h1 {
  font-size: clamp(2.7rem, 1.25rem + 4.3vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.pg-h2 {
  font-size: clamp(2.05rem, 1.25rem + 2.5vw, 3.45rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.pg-h3 {
  font-size: clamp(1.3rem, 1.08rem + .75vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -.01em;
}

.pg-lede {
  margin-top: clamp(18px, 2vw, 30px);
  max-width: 29em;
  font-size: clamp(1.1rem, 1rem + .48vw, 1.4rem);
  line-height: 1.52;
  color: var(--ink-2);
}

.pg-text {
  margin-top: clamp(16px, 1.6vw, 24px);
  max-width: 33em;
  color: var(--ink-2);
}

.pg-h3 + .pg-text {
  margin-top: 12px;
}

/* Материал и размер — данные, а не подпись: отдельной строкой, с той же золотой чертой, что у надзаголовков сайта. */
.pg-fact {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 2vw, 28px);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.pg-fact::before {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 2px;
  background: var(--gold);
}

.pg-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(22px, 2.2vw, 30px);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s var(--ease), gap .18s var(--ease);
}

.pg-more:hover,
.pg-more:focus-visible {
  border-color: var(--ink);
  gap: 14px;
}

/* Пометка под снимком: что это за кадр. Мелко, но читаемо (контраст --ink-3 по --bg выше 4,5:1). */
.pg-note {
  padding-top: 10px;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--ink-3);
}

.pg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
  margin-top: clamp(28px, 3vw, 42px);
}

.pg-actions .pg-more {
  margin-top: 0;
}

.pg-actions--row {
  gap: 12px;
}

/* ---------- снимки ---------- */

.pg-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pg-fig__frame {
  position: relative;
  overflow: hidden;
  background: var(--img-fallback);
}

.pg-fig__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- первый экран ---------- */

.pg-hero {
  padding-top: clamp(28px, 4vw, 56px);
}

.pg-hero__body {
  grid-column: col 1 / wend;
}

.pg-hero__visual {
  grid-column: full-start / full-end;
  margin-top: clamp(28px, 6vw, 48px);
}

.pg-hero__visual .pg-fig__frame {
  aspect-ratio: 4 / 3;
}

.pg-hero__visual .pg-note {
  padding-inline: var(--pad);
}

/* ---------- оглавление направлений ---------- */

.pg-index {
  margin-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pg-index__list {
  grid-column: col 1 / wend;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

.pg-index a {
  display: inline-block;
  padding: 12px 0 8px;
  font-size: clamp(1.08rem, .95rem + .6vw, 1.5rem);
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) 0 calc(100% - 2px) / 0 1.5px no-repeat;
  transition: background-size .34s var(--ease);
}

.pg-index a:hover,
.pg-index a:focus-visible {
  background-size: 100% 1.5px;
}

/* ---------- направления ---------- */

.pg-dir {
  padding-block: clamp(48px, 6vw, 104px);
}

.pg-dir__visual {
  grid-column: full-start / full-end;
  grid-row: 1;
}

.pg-dir__body {
  grid-column: col 1 / wend;
  grid-row: 2;
  padding-top: clamp(24px, 4vw, 40px);
}

.pg-dir__visual .pg-fig__frame {
  aspect-ratio: 5 / 4;
}

.pg-dir__visual .pg-note {
  padding-inline: var(--pad);
}

/* Широкий кадр во всю ширину экрана, под ним разворот: заголовок слева, текст справа. Текст на снимок не заходит —
   ковёр в широком кадре обычно у нижнего края, и панель закрыла бы именно его. */
.pg-dir--wide {
  padding-top: clamp(32px, 4vw, 64px);
}

.pg-dir--wide .pg-note {
  text-align: right;
}

/* Схема вместо снимка */
.pg-dir--scheme {
  background: var(--bg-2);
}

.pg-dir--scheme .pg-dir__visual {
  grid-column: col 1 / wend;
}

.pg-scheme {
  margin: 0;
}

.pg-scheme svg {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
}

.pg-scheme .s-wall { stroke: var(--ink-2); stroke-width: 3; }
.pg-scheme .s-rug { fill: var(--surface); stroke: var(--gold-ink); stroke-width: 1.6; }
.pg-scheme .s-rug--pile { fill: url(#pg-pile); stroke: none; }
.pg-scheme .s-pile { stroke: var(--gold); stroke-width: 1; opacity: .38; }
.pg-scheme .s-bed { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1.6; }
.pg-scheme .s-pillow { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.pg-scheme .s-fold { stroke: var(--ink-3); stroke-width: 1.2; }
.pg-scheme .s-stand { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }

/* Тёмный разворот — один на страницу по замыслу: смена тона посреди ритма, а не фон для красоты. */
.pg-dir--dark {
  background: var(--deep);
  color: var(--on-deep);
}

.pg-dir--dark .pg-h2,
.pg-dir--dark .pg-fact,
.pg-dir--dark .pg-more {
  color: var(--on-deep);
}

.pg-dir--dark .pg-text,
.pg-dir--dark .pg-note {
  color: var(--on-deep-2);
}

.pg-dir--dark .pg-more {
  border-color: var(--line-deep);
}

.pg-dir--dark .pg-more:hover,
.pg-dir--dark .pg-more:focus-visible {
  border-color: var(--on-deep);
}

.pg-dir--dark .pg-fig__frame {
  background: var(--deep-2);
}

/* Работа на стене */
.pg-dir--art {
  background: var(--surface);
}

.pg-dir--art .pg-dir__visual {
  grid-column: col 2 / span 10;
}

/* Работа на стене показывается целиком, без кадрирования: обрезанная рама читается как ошибка.
   aspect-ratio: auto перебивает общую пропорцию рамки направления (5 : 4) — иначе вертикальный кадр срезался снизу. */
.pg-dir--art .pg-fig__frame {
  aspect-ratio: auto;
  box-shadow: var(--shadow-s);
}

.pg-dir--art .pg-fig__frame img {
  height: auto;
}

.pg-dir--art .pg-dir__visual .pg-note {
  padding-inline: 0;
}

/* Без снимка — просто текст, без заглушки на месте кадра. */
.pg-dir--text .pg-dir__body {
  grid-row: 1;
  padding-top: 0;
}

/* ---------- гид по выбору ---------- */

.pg-guide {
  padding-block: clamp(64px, 8vw, 132px);
  background: var(--surface);
}

.pg-guide__head {
  grid-column: col 1 / wend;
}

.pg-guide__list {
  grid-column: col 1 / wend;
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.pg-guide__item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  padding-block: clamp(22px, 2.6vw, 38px);
  border-top: 1px solid var(--line);
}

.pg-guide__item:last-child {
  border-bottom: 1px solid var(--line);
}

.pg-guide__item--plain {
  grid-template-columns: minmax(0, 1fr);
}

.pg-icon {
  display: block;
  width: 52px;
  height: 52px;
}

.pg-icon .i-rug { fill: none; stroke: var(--gold-ink); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.pg-icon .i-line { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.pg-icon .i-dim { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }

/* ---------- завершение ---------- */

.pg-cta {
  padding-block: clamp(64px, 8vw, 128px);
  background: var(--bg-2);
}

.pg-cta__body {
  grid-column: col 1 / wend;
}

.pg-cta__visual {
  grid-column: col 1 / wend;
  margin-top: clamp(32px, 5vw, 48px);
}

.pg-cta__visual .pg-fig__frame {
  aspect-ratio: 16 / 10;
}

/* ---------- шаблоны B–D: доводы, крупная фраза, шаги, вопросы, список, люди, цитата ---------- */

.pg-feat,
.pg-callout,
.pg-steps,
.pg-faq,
.pg-list,
.pg-team,
.pg-quote {
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    repeat(12, [col] calc((min(100%, var(--maxw)) - 2 * var(--pad)) / 12))
    [wend] minmax(0, 1fr) [full-end];
  padding-block: clamp(48px, 6vw, 104px);
}

/* Доводы: колонки без рамок — только верхняя черта у каждого и крупный заголовок */
.pg-feat__head,
.pg-feat__list {
  grid-column: col 1 / wend;
}

.pg-feat__visual {
  grid-column: full-start / full-end;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.pg-feat__visual .pg-fig__frame {
  aspect-ratio: 5 / 4;
}

.pg-feat__visual .pg-note {
  padding-inline: var(--pad);
}

.pg-feat__head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.pg-feat__list {
  display: grid;
  gap: clamp(28px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-feat__item {
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line);
}

.pg-feat__t {
  font-family: 'Prata', 'Prata fallback', 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.45rem, 1.1rem + 1.05vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.pg-feat__t + .pg-text {
  margin-top: 14px;
}

/* Крупная фраза */
.pg-callout {
  background: var(--bg-2);
}

.pg-callout__in {
  grid-column: col 1 / wend;
}

.pg-callout__text {
  font-family: 'Prata', 'Prata fallback', 'Times New Roman', Georgia, serif;
  font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.75rem);
  line-height: 1.24;
  letter-spacing: -.012em;
  color: var(--ink);
  max-width: 26em;
  text-wrap: pretty;
}

/* Шаги: номер — порядок действий, золотом, без кружков и плашек */
.pg-steps__head,
.pg-steps__list {
  grid-column: col 1 / wend;
}

.pg-steps__head {
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

.pg-steps__list {
  display: grid;
  gap: clamp(28px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-steps__item {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.pg-steps__n {
  display: block;
  font-family: 'Prata', 'Prata fallback', 'Times New Roman', Georgia, serif;
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.9rem);
  line-height: 1;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}

.pg-steps__item .pg-h3 {
  margin-top: 16px;
}

/* Вопросы */
.pg-faq {
  background: var(--surface);
}

.pg-faq__head,
.pg-faq__list {
  grid-column: col 1 / wend;
}

.pg-faq__list {
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.pg-faq__item {
  padding-block: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--line);
}

.pg-faq__item:last-child {
  border-bottom: 1px solid var(--line);
}

.pg-faq__q {
  font-family: 'Onest', 'Onest fallback', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem);
  line-height: 1.35;
  color: var(--ink);
}

.pg-faq__q + .pg-text {
  margin-top: 10px;
}

/* Список: пункты крупно, разделены чертой — как оглавление */
.pg-list__head,
.pg-list__items {
  grid-column: col 1 / wend;
}

.pg-list__items {
  margin: clamp(20px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.pg-list__items li {
  padding-block: clamp(12px, 1.4vw, 20px);
  border-top: 1px solid var(--line);
  font-family: 'Prata', 'Prata fallback', 'Times New Roman', Georgia, serif;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.pg-list__items .in-link {
  color: inherit;
}

/* Люди */
.pg-team__head,
.pg-team__list {
  grid-column: col 1 / wend;
}

.pg-team__head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.pg-team__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-team__photo {
  aspect-ratio: 4 / 5;
  margin-bottom: 16px;
}

.pg-team__role {
  margin-top: 6px;
  color: var(--ink-2);
}

/* Цитата */
.pg-quote__in {
  grid-column: col 1 / wend;
  margin: 0;
}

.pg-quote blockquote {
  margin: 0;
}

.pg-quote blockquote p {
  font-family: 'Prata', 'Prata fallback', 'Times New Roman', Georgia, serif;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.3rem);
  line-height: 1.16;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.pg-quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(18px, 2vw, 28px);
  font-weight: 600;
  color: var(--ink-2);
}

.pg-quote figcaption::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--gold);
}

/* ---------- прежние блоки внутри новой раскладки ---------- */

.pg-prose {
  padding-block: clamp(40px, 5vw, 72px);
}

.pg-prose__in {
  grid-column: col 1 / wend;
  max-width: 46em;
  color: var(--ink-2);
}

.pg-prose__in > * + * {
  margin-top: .7em;
}

.pg-prose__in .h3 {
  margin-top: 1.4em;
  color: var(--ink);
}

/* Текст сразу под первым экраном — продолжение рассказа («О мастерской»): крупнее и темнее служебных абзацев. */
.pg-hero + .pg-prose .pg-prose__in {
  font-size: clamp(1.05rem, .98rem + .35vw, 1.24rem);
  line-height: 1.6;
  color: var(--ink);
}

/* Одна зелёная кнопка на первом экране: кнопка шапки на этих страницах — контурная. */
.pg-v2 .header-cta {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.pg-v2 .header-cta:hover {
  background: transparent;
  border-color: var(--ink);
}

/* ---------- планшет и компьютер ---------- */

@media (min-width: 640px) {
  .pg-index__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(22px, 3vw, 52px);
  }
}

@media (min-width: 860px) {
  .pg-hero {
    min-height: clamp(540px, calc(100svh - 190px), 820px);
    padding-top: 0;
  }

  .pg-hero__body {
    grid-column: col 1 / span 5;
    grid-row: 1;
    align-self: center;
    padding-block: clamp(40px, 5vw, 88px);
    padding-right: clamp(8px, 2vw, 32px);
  }

  .pg-hero__visual {
    grid-column: col 7 / full-end;
    grid-row: 1;
    margin-top: 0;
    display: flex;
  }

  .pg-hero__visual .pg-fig {
    flex: 1;
  }

  /* Снимок не задаёт высоту первого экрана: её задаёт min-height раздела. Иначе вертикальный кадр вытягивал экран,
     и оглавление уходило за нижний край на 1440 × 900. */
  .pg-hero__visual .pg-fig__frame {
    flex: 1;
    aspect-ratio: auto;
    min-height: 420px;
  }

  .pg-hero__visual .pg-fig__frame img {
    position: absolute;
    inset: 0;
  }

  .pg-hero__visual .pg-note {
    padding-inline: 0;
    padding-bottom: 12px;
  }

  /* Первый экран без снимка — ниже экранного (высота экрана нужна только кадру), но с запасом и по верху: при подмене
     шрифта текст меняет высоту, и без запаса абзацы ниже съезжали (CLS 0,03 на «О мастерской»). */
  .pg-hero--text {
    min-height: clamp(380px, 46vh, 500px);
  }

  .pg-hero--text .pg-hero__body {
    grid-column: col 1 / span 9;
    align-self: start;
    padding-block: clamp(56px, 7vw, 120px) clamp(24px, 3vw, 48px);
  }

  .pg-index {
    margin-top: 0;
  }

  .pg-dir__body {
    padding-top: 0;
  }

  .pg-dir__visual .pg-note {
    padding-inline: 0;
  }

  /* широкий кадр */
  .pg-dir--wide .pg-dir__visual {
    grid-column: full-start / full-end;
  }

  .pg-dir--wide .pg-fig__frame {
    aspect-ratio: 21 / 9;
    max-height: 78vh;
  }

  .pg-dir--wide .pg-dir__visual .pg-note {
    padding-inline: var(--pad);
  }

  .pg-dir--wide .pg-dir__body {
    grid-column: col 1 / wend;
    display: grid;
    grid-template-columns: 5fr 1fr 5fr 1fr;
    padding-top: clamp(36px, 4vw, 64px);
  }

  .pg-dir--wide .pg-dir__body > .pg-h2 {
    grid-column: 1;
  }

  .pg-dir--wide .pg-dir__body > :not(.pg-h2) {
    grid-column: 3;
  }

  .pg-dir--wide .pg-dir__body > .pg-text {
    margin-top: .55em;
  }

  /* текст слева, кадр справа до края */
  .pg-dir--split .pg-dir__body {
    grid-column: col 1 / span 5;
    grid-row: 1;
    align-self: end;
    padding-right: clamp(8px, 2vw, 32px);
  }

  .pg-dir--split .pg-dir__visual {
    grid-column: col 7 / full-end;
    grid-row: 1;
  }

  .pg-dir--split .pg-fig__frame {
    aspect-ratio: 5 / 6;
    max-height: 80vh;
  }

  /* кадр слева от края, текст справа */
  .pg-dir--split-left .pg-dir__visual {
    grid-column: full-start / col 8;
    grid-row: 1;
  }

  .pg-dir--split-left .pg-dir__body {
    grid-column: col 9 / wend;
    grid-row: 1;
    align-self: center;
  }

  .pg-dir--split-left .pg-fig__frame {
    aspect-ratio: 1 / 1;
    max-height: 86vh;
  }

  .pg-dir--split-left .pg-dir__visual .pg-note {
    padding-left: var(--pad);
  }

  /* схема слева, текст справа */
  .pg-dir--scheme .pg-dir__visual {
    grid-column: col 1 / span 6;
    grid-row: 1;
    align-self: center;
  }

  .pg-dir--scheme .pg-dir__body {
    grid-column: col 8 / wend;
    grid-row: 1;
    align-self: center;
  }

  /* тёмный разворот: текст слева, деталь справа до края */
  .pg-dir--dark .pg-dir__body {
    grid-column: col 1 / span 4;
    grid-row: 1;
    align-self: center;
  }

  .pg-dir--dark .pg-dir__visual {
    grid-column: col 6 / full-end;
    grid-row: 1;
  }

  .pg-dir--dark .pg-fig__frame {
    aspect-ratio: 5 / 4;
  }

  /* работа на стене: кадр с воздухом, текст — как этикетка у нижнего края кадра */
  .pg-dir--art {
    padding-block: clamp(72px, 9vw, 150px);
  }

  .pg-dir--art .pg-dir__visual {
    grid-column: col 2 / span 5;
    grid-row: 1;
  }

  .pg-dir--art .pg-dir__body {
    grid-column: col 8 / span 5;
    grid-row: 1;
    align-self: end;
  }

  .pg-dir--text .pg-dir__body {
    grid-column: col 1 / span 7;
  }

  /* гид */
  .pg-guide__head {
    grid-column: col 1 / span 4;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 110px;
  }

  .pg-guide__list {
    grid-column: col 6 / wend;
    grid-row: 1;
    margin-top: 0;
  }

  .pg-guide__item {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: clamp(20px, 2.6vw, 44px);
  }

  .pg-icon {
    width: 64px;
    height: 64px;
  }

  /* завершение */
  .pg-cta__body {
    grid-column: col 1 / span 6;
    grid-row: 1;
    align-self: center;
  }

  .pg-cta__visual {
    grid-column: col 8 / wend;
    grid-row: 1;
    margin-top: 0;
  }

  .pg-cta--text .pg-cta__body {
    grid-column: col 1 / span 8;
  }

  .pg-prose__in {
    grid-column: col 1 / span 8;
  }

  /* доводы: без снимка — колонками; со снимком — снимок слева до края, доводы стопкой справа */
  .pg-feat__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pg-feat--n2 .pg-feat__list,
  .pg-feat--n4 .pg-feat__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-feat--media .pg-feat__head {
    grid-column: col 7 / wend;
  }

  .pg-feat--media .pg-feat__visual {
    grid-column: full-start / col 6;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .pg-feat--media .pg-feat__visual .pg-fig__frame {
    aspect-ratio: 1 / 1;
    max-height: 86vh;
  }

  .pg-feat--media .pg-feat__visual .pg-note {
    padding-left: var(--pad);
  }

  .pg-feat--media .pg-feat__list {
    grid-column: col 7 / wend;
    grid-template-columns: minmax(0, 1fr);
    align-self: center;
  }

  .pg-callout__in {
    grid-column: col 2 / span 10;
  }

  .pg-steps__head {
    grid-column: col 1 / span 7;
  }

  .pg-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pg-steps--n2 .pg-steps__list,
  .pg-steps--n4 .pg-steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-faq__head {
    grid-column: col 1 / span 4;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 110px;
  }

  .pg-faq__list {
    grid-column: col 6 / wend;
    grid-row: 1;
    margin-top: 0;
  }

  .pg-list__head {
    grid-column: col 1 / span 4;
    grid-row: 1;
  }

  .pg-list__items {
    grid-column: col 6 / wend;
    grid-row: 1;
    margin-top: 0;
  }

  .pg-team__head {
    grid-column: col 1 / span 4;
    grid-row: 1;
  }

  .pg-team__list {
    grid-column: col 6 / wend;
    grid-row: 1;
  }

  .pg-quote__in {
    grid-column: col 2 / span 9;
  }
}

/* ---------- телефон: кнопки во всю ширину, цели не меньше 44 px ---------- */

@media (max-width: 520px) {
  .pg-actions .btn {
    flex: 1 1 100%;
  }

  .pg-actions--row .btn {
    flex: 1 1 100%;
  }

  .pg-index a {
    min-height: 44px;
  }
}

/* ---------- движение ----------
   Время и кривые — система сайта: появление блока 0,78 с, раскрытие кадра 1,45 с (телефон 1,1 с), --ease-out / --ease-soft.
   Двигаются только transform и opacity. Скрытое до появления состояние — только под html.pg-motion: его ставит строка
   в <head> без «меньше движения» и снимает сама, если pages.js не отработал. Первый экран не ждёт прокрутки: снимок
   только «оседает» (без прозрачности — LCP не откладывается), текст поднимается по очереди. */

@keyframes pg-settle {
  from { transform: scale(1.06); }
}

@keyframes pg-rise {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes pg-lift {
  from { transform: translateY(14px); }
}

html.pg-motion .pg-hero__fig img {
  animation: pg-settle 1.45s var(--ease-soft) both;
}

html.pg-motion .pg-hero__body .pg-h1 {
  animation: pg-lift .78s var(--ease-out) both;
}

html.pg-motion .pg-hero__body .pg-lede {
  animation: pg-rise .78s var(--ease-out) .12s backwards;
}

html.pg-motion .pg-hero__body .pg-actions {
  animation: pg-rise .78s var(--ease-out) .22s backwards;
}

html.pg-motion .pg-index {
  animation: pg-rise .78s var(--ease-out) .32s backwards;
}

html.pg-motion .pg-dir [data-pg-reveal],
html.pg-motion .pg-guide [data-pg-reveal],
html.pg-motion .pg-cta [data-pg-reveal],
html.pg-motion .pg-feat [data-pg-reveal],
html.pg-motion .pg-callout [data-pg-reveal],
html.pg-motion .pg-steps [data-pg-reveal],
html.pg-motion .pg-faq [data-pg-reveal],
html.pg-motion .pg-list [data-pg-reveal],
html.pg-motion .pg-team [data-pg-reveal],
html.pg-motion .pg-quote [data-pg-reveal] {
  opacity: 0;
  transform: translateY(26px);
}

html.pg-motion [data-pg-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .78s var(--ease-out), transform .78s var(--ease-out);
}

html.pg-motion [data-pg-reveal]:focus-within {
  opacity: 1;
  transform: none;
}

html.pg-motion .pg-dir__visual .pg-fig__frame img,
html.pg-motion .pg-cta__visual .pg-fig__frame img,
html.pg-motion .pg-feat__visual .pg-fig__frame img,
html.pg-motion .pg-team__photo img {
  transform: scale(1.06);
}

html.pg-motion .is-in .pg-fig__frame img {
  transform: none;
  transition: transform 1.45s var(--ease-soft);
}

@media (max-width: 859px) {
  html.pg-motion .is-in .pg-fig__frame img,
  html.pg-motion .pg-hero__fig img {
    transition-duration: 1.1s;
    animation-duration: 1.1s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-more,
  .pg-index a {
    transition: none;
  }
}