/* ==========================================================================
   LUMERA — внутренние страницы 4107 (районы, направления, «Как мы работаем»).
   Собираются _build/build-pages.mjs из _content/**. Подключается после site.css: те же токены, шрифты и шкала
   (на ≥1024 px 1rem = 1/144 ширины окна). Ось текста — как у первого экрана главной (11.2rem слева).
   Ритм страницы (как у главной — фото и тёмные модули между текстом): тёмный первый экран → светлые факты → текст →
   кинолента → текст → пара деталей → тёмная «Честно о…» → шаги → карточки → тёмные «Контакты».
   ========================================================================== */

/* ---------- первый экран страницы ---------- */
/* фон — размытая копия кадра (~1 КБ, ставит сборка): при переходе с главной вместо чёрного кадра — цвет фото */
.ph { position: relative; display: flex; align-items: flex-end; min-height: max(52rem, 76svh); color: var(--white); background: var(--night) center / cover no-repeat; overflow: hidden; isolation: isolate; }
.ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; view-transition-name: ph-hero; }
/* вуаль — два мягких слоя на весь первый экран, оба уходят в ноль внутри кадра (без швов):
   ::before — полоса под шапкой и крошками, ::after — градиент снизу (телефон) или два градуированных фильтра (десктоп).
   Плотность — --veil (0…1) по яркости кадра под текстом: задаётся в шапке md («veil:»), сборщик ставит style на .ph */
.ph__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ph__shade::before, .ph__shade::after { content: ""; position: absolute; inset: 0; opacity: var(--veil, .75); }
.ph__shade::before { background: linear-gradient(180deg, rgba(3, 7, 4, .7) 0%, rgba(3, 7, 4, .56) 26%, rgba(3, 7, 4, .22) 40%, rgba(3, 7, 4, 0) 54%); }
/* телефон: текст во всю ширину — пятно не подходит (к краям уходит в ноль), нужен ровный градиент снизу */
.ph__shade::after { background: linear-gradient(0deg, rgba(3, 7, 4, .9) 0%, rgba(3, 7, 4, .72) 40%, rgba(3, 7, 4, .3) 70%, rgba(3, 7, 4, 0) 88%); }
.ph__body { position: relative; width: 100%; padding: calc(var(--hdr-h) + 6rem) 2rem 5.6rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; column-gap: .8rem; margin-bottom: 1.2rem; font: 500 1.2rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--white); text-shadow: 0 0 2px rgba(0, 0, 0, .7), 0 0 6px rgba(0, 0, 0, .45), 0 1px 14px rgba(0, 0, 0, .5); }
.crumbs a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; text-decoration-color: rgba(247, 243, 236, .5); }
.crumbs [aria-current] { opacity: .86; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { text-decoration-color: currentColor; } }
.ph__eyebrow { margin-bottom: 1.2rem; text-shadow: 0 0 2px rgba(0, 0, 0, .5), 0 1px 12px rgba(0, 0, 0, .45); }
.ph__title { font: 400 clamp(3.2rem, 10.6vw, 4.6rem)/1.04 var(--serif); text-transform: uppercase; letter-spacing: -.01em; max-width: 12em; hyphens: manual; -webkit-hyphens: manual; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
/* длинный H1 услуги (предложение, а не имя места) — мельче и шире строкой, чтобы кнопки остались на первом экране */
.ph__title--long { font-size: clamp(3rem, 8.8vw, 3.6rem); line-height: 1.08; max-width: 16em; }
.ph__title .ln { padding-bottom: .12em; margin-bottom: -.12em; }
.ph__title, .ph__title .ln__in { text-wrap: balance; }
.ph__lead { margin-top: 1.8rem; max-width: 34em; font: 500 1.7rem/1.5 var(--sans); text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.ph__ctas { margin-top: 2.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 3.2rem; }
.ph__cta { display: inline-flex; align-items: center; gap: 1.6rem; }
/* вторая кнопка — тише первой: строчная ссылка со стрелкой, без капса */
.ph__cta2.link-arrow { color: var(--white); font: 600 1.5rem/1.2 var(--sans); letter-spacing: .01em; text-transform: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.ph__cta2 .i-arrow { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .4)); }
.ph__cta2:focus-visible { outline-color: #fff; }
/* H1 — та же маска-интро, что на главной (900 мс, по готовности шрифта); при reduced motion класса .motion нет */
.motion .ph__title .ln__in { transform: translateY(105%); }
.motion .ph.is-play .ph__title .ln__in { transform: none; transition: transform calc(var(--dur-reveal) - 100ms) var(--ease-lux-out) 60ms; }
.motion .ph.is-fade .ph__title .ln__in { transform: none; transition: none; }

/* ---------- «Коротко» ---------- */
.pf { background: var(--cream); color: var(--ink); padding: 3.2rem 2rem 1.2rem; }
.pf__list { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(21, 20, 15, .16); }
.pf__i { padding: 1.6rem 0 1.8rem; border-bottom: 1px solid rgba(21, 20, 15, .16); }
.pf__k { font: 600 1.15rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
/* значение — текстовым шрифтом; ведущее число — антиквой (цены и единицы — Manrope, ฿ не из дисплейной гарнитуры) */
.pf__v { margin-top: .6rem; font: 500 1.6rem/1.4 var(--sans); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.pf__n { margin-right: .15em; font: 400 2.8rem/1.1 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums; }

/* ---------- карта-локатор (signature): контур острова (© OpenStreetMap), район — зелёной точкой с кольцом ---------- */
.pmap, .hubmap { margin: 0; }
.pmap svg, .hubmap svg { display: block; width: 100%; height: auto; overflow: visible; }
.map__land { fill: var(--cream-2); stroke: rgba(21, 20, 15, .42); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map__dot { fill: rgba(21, 20, 15, .38); transition: fill var(--dur-micro) var(--ease-fade); }
.map__dot--on { fill: var(--green); }
.map__ring { fill: none; stroke: var(--green); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map__air { fill: none; stroke: rgba(21, 20, 15, .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map__t { font-family: var(--sans); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-2); paint-order: stroke; stroke: var(--cream); stroke-width: 4px; stroke-linejoin: round; }   /* кремовая обводка: подпись читается и поверх контура */
.map__t--air { fill: var(--ink-3); font-weight: 500; }
.map__src { margin-top: .8rem; font: 500 max(11px, 1.1rem)/1.3 var(--sans); letter-spacing: .02em; color: var(--ink-3); }   /* подпись ODbL — читается без лупы */
/* кегль подписей на экране — не меньше 11.5 px при любой ширине карты (--map-k ставит site.js) */
.map__t { font-size: max(calc(var(--fs-u, 13) * 1px), calc(11.5px / var(--map-k, 1))); }
.map__t--air { font-size: max(11px, calc(10.5px / var(--map-k, 1))); }
/* район: карта рядом с «Коротко» (на телефоне — над списком, узкой колонкой по центру) */
.pf--map .pmap { width: min(100%, 15rem); margin: 0 auto 2rem; }
.pf--map .pmap .map__src { text-align: center; }
/* хаб: большая карта, подписи — ссылки; наведение на карточку подсвечивает точку и наоборот (site.js) */
.hubmap { width: min(100%, 40rem); margin: 0 auto 3.2rem; }
.map__a { cursor: pointer; }
.map__a .map__t { transition: fill var(--dur-micro) var(--ease-fade); }
.map__a .map__dot { transition: fill var(--dur-micro) var(--ease-fade), transform var(--dur-micro) var(--ease-lux-out); transform-box: fill-box; transform-origin: center; }
.map__a::after { content: none; }
.map__a.is-hot .map__dot, .map__a:hover .map__dot { fill: var(--green); transform: scale(1.3); }
.map__a.is-hot .map__t, .map__a:hover .map__t { fill: var(--green); }
.map__ring--hot { fill: none; stroke: var(--green); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--dur-micro) var(--ease-fade); }
.map__a.is-hot .map__ring--hot, .map__a:hover .map__ring--hot { opacity: 1; }
.rcard.is-hot .rcard__img { transform: scale(1.03); }
.rcard.is-hot::after { box-shadow: inset 0 0 0 1px var(--green), inset 0 0 0 2px rgba(255, 255, 255, .25); }

/* ---------- секции текста ---------- */
.pb { position: relative; background: var(--cream); color: var(--ink); padding: 5.6rem 2rem 0; }
.pb:last-of-type { padding-bottom: 5.6rem; }
/* заголовок-мысль строчными: капс — только у коротких заголовков главной */
.pb__title { font-size: 2.6rem; line-height: 1.14; letter-spacing: -.015em; text-transform: none; hyphens: manual; -webkit-hyphens: manual; }   /* перенос — только по ­ в словах от 14 букв (ставит сборщик) */
.pb__text { margin-top: 2.4rem; max-width: 68rem; font: 300 1.75rem/1.65 var(--sans); color: var(--ink-2); }
.pb__text p + p, .pb__text p + .pl, .pb__text .pl + p, .pb__text .steps + p, .pb__text p + .steps { margin-top: 1.6rem; }
.pb__text strong { font-weight: 600; color: var(--ink); }
.pb__h3 { margin: 3.2rem 0 1.2rem; font: 400 2.4rem/1.2 var(--serif); color: var(--ink); }
.pb__h3:first-child { margin-top: 0; }
.tlink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: rgba(21, 20, 15, .35); transition: text-decoration-color var(--dur-micro) var(--ease-fade); }
@media (hover: hover) and (pointer: fine) { .tlink:hover { text-decoration-color: currentColor; } }
.pl { display: grid; gap: 1rem; }
.pl li { position: relative; padding-left: 2.8rem; }
.pl li::before { content: ""; position: absolute; left: 0; top: .82em; width: 1.6rem; height: 1px; background: currentColor; opacity: .55; }

/* «Честно о…» — тёмный модуль с тенью листьев (как «Контакты» главной): главный блок доверия.
   .pb--dark — тот же модуль для секций из шапки «dark:» (перерыв на длинных страницах) */
.pb--honest, .pb--dark { background: var(--green); color: var(--white); padding-bottom: 5.6rem; overflow: hidden; isolation: isolate; }
.pb--dark + .pb--dark { padding-top: 0; }
.pb--honest + .pb, .pb--dark + .pb:not(.pb--dark) { padding-top: 5.6rem; }
.pb__leaves { position: absolute; z-index: -1; right: -18%; top: -10%; width: 70%; height: 120%; opacity: .1; transform: rotate(8deg); pointer-events: none; }
.pb__leaves img { width: 100%; height: 100%; object-fit: cover; }
.pb--honest .pb__text, .pb--dark .pb__text { color: rgba(247, 243, 236, .86); }
.pb--honest .pb__text strong, .pb--dark .pb__text strong, .pb--dark .pb__h3 { color: var(--white); }
.pb--honest .tlink, .pb--dark .tlink { text-decoration-color: rgba(247, 243, 236, .45); }
.pb--honest :focus-visible, .pb--dark :focus-visible { outline-color: #F4E9CF; }
.hon { display: grid; gap: 3.2rem; margin-top: 2.4rem; }
.pb__text > .hon:first-child { margin-top: 0; }
.hon__k { font: 600 1.15rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(247, 243, 236, .7); padding-bottom: 1.2rem; border-bottom: 1px solid rgba(247, 243, 236, .22); }
.hon__ul { display: grid; gap: 1.4rem; margin-top: 1.8rem; }
.hon__ul li { position: relative; padding-left: 2.8rem; }
/* маркеры: «плюс» — точка, «оговорка» — тире; без символов-иконок */
.hon__ul li::before { content: ""; position: absolute; left: 0; background: #CDBF9F; }
.hon__ul--p li::before { top: .7em; width: 6px; height: 6px; border-radius: 50%; }
.hon__ul--c li::before { top: .82em; width: 1.2rem; height: 1px; }

/* «Как это происходит» — шаги */
.steps { counter-reset: s; display: grid; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 5.6rem 1fr; gap: 1.6rem; padding: 2rem 0; border-top: 1px solid rgba(21, 20, 15, .16); }
.steps li:last-child { border-bottom: 1px solid rgba(21, 20, 15, .16); }
.steps__n { font: 400 2.6rem/1.1 var(--serif); color: var(--ink-3); }

/* ---------- фото между текстом: кинолента 2.4:1 (телефон 4:5) и пара деталей 4:5 ---------- */
.pband { margin: 5.6rem 0 0; background: var(--green-2); aspect-ratio: 4 / 5; overflow: hidden; }
.pband picture, .pband__img { display: block; width: 100%; height: 100%; }
.pband__img { object-fit: cover; }
.ppair { display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; background: var(--cream); padding: 5.6rem 2rem 0; }
.ppair figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1rem; background: var(--cream-2); }
.ppair__b { width: 60%; justify-self: end; margin-top: -15% !important; position: relative; box-shadow: 0 0 0 .6rem var(--cream); }
.ppair__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- связанные страницы и список районов ---------- */
.rel { background: var(--cream); color: var(--ink); padding: 6.4rem 0 6.4rem 2rem; }
.rel__head { padding-right: 2rem; }
.rel__head .h2 { font-size: 2.8rem; line-height: 1.12; letter-spacing: -.015em; text-transform: none; }
.rel__row { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 1.2rem; margin-top: 2.8rem; padding-right: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rel__row::-webkit-scrollbar { display: none; }
.rel__row > li { scroll-snap-align: start; }
.rel__row--grid { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; }
.rel--hub { padding-top: 5.6rem; }
.rcard { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 1rem; overflow: hidden; color: var(--white); background: #22302a; isolation: isolate; }
.rcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--dur-zoom) var(--ease-lux-out); }
.rcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 22, 20, .05) 0%, rgba(4, 22, 20, .1) 45%, rgba(3, 14, 12, .78) 100%); }
.rcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); pointer-events: none; }
.rcard__txt { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 6.2rem; display: flex; flex-direction: column; gap: .8rem; }
.rcard__e { font: 600 1.1rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .88; }
.rcard__t { font: 400 clamp(1.7rem, 5.4vw, 2.2rem)/1.06 var(--serif); text-transform: uppercase; overflow-wrap: anywhere; }
.rcard__a { position: absolute; left: 1.4rem; bottom: 1.4rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(247, 243, 236, .3); transition: background-color var(--dur-micro) var(--ease-fade); }
.rcard__a svg { width: 55%; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--dur-micro) var(--ease-lux-out); }
@media (hover: hover) and (pointer: fine) {
  .rcard:hover .rcard__img { transform: scale(1.03); }
  .rcard:hover .rcard__a { background: rgba(247, 243, 236, .14); }
  .rcard:hover .rcard__a svg { transform: translateX(.2rem); }
}
.rcard:focus-visible { outline-color: var(--ink); }

/* «Контакты» внутренней страницы: заголовок — из cta_title (предложение), поэтому строчными и мельче, чем на главной */
.inner .cts__title { text-transform: none; letter-spacing: -.015em; font-size: 3rem; line-height: 1.12; }
.pb__more { margin-top: 2.4rem; font-size: .92em; color: var(--ink-3); }

/* ---------- низкие телефоны (Safari с панелями): первый экран плотнее, обе кнопки видны над нижней панелью ---------- */
@media (max-width: 767px) {
  .crumbs [aria-current], .crumbs [aria-current] + *, .crumbs span[aria-hidden]:nth-last-child(2) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 767px) and (max-height: 600px) {
  .ph__eyebrow { display: none; }   /* 320×568: надзаголовок уступает место второй кнопке */
}
@media (max-width: 767px) and (max-height: 700px) {
  .ph { min-height: 0; }
  .ph__body { padding-top: calc(var(--hdr-h) + 2.4rem); padding-bottom: calc(var(--dock-h, 0px) + 3.2rem); }
  .crumbs { margin-bottom: .4rem; }
  .ph__title { font-size: clamp(3rem, 9.4vw, 3.8rem); }
  .ph__title--long { font-size: clamp(2.8rem, 8vw, 3.2rem); }
  .ph__lead { margin-top: 1.2rem; font-size: 1.55rem; line-height: 1.45; }
  .ph__ctas { margin-top: 1.8rem; }
}

/* ---------- планшет ---------- */
@media (min-width: 768px) {
  .ph__body { padding: calc(var(--hdr-h) + 10rem) 4rem 7.2rem; }
  .ph__title { font-size: 6.4rem; }
  .ph__title--long { font-size: 4.8rem; }
  .ph__lead { font-size: 2rem; }
  .pf { padding: 4.8rem 4rem 2rem; }
  .pf__list { grid-template-columns: repeat(2, 1fr); column-gap: 4rem; }
  .pb { padding: 7.2rem 4rem 0; }
  .pb:last-of-type, .pb--honest, .pb--dark { padding-bottom: 7.2rem; }
  .pb--honest + .pb, .pb--dark + .pb:not(.pb--dark) { padding-top: 7.2rem; }
  .pb__title { font-size: 3.6rem; }
  .inner .cts__title { font-size: 4.4rem; }
  .pband { margin-top: 7.2rem; aspect-ratio: 2.4 / 1; }
  .ppair { grid-template-columns: 1fr 1fr; padding: 7.2rem 4rem 0; gap: 2.4rem; }
  .ppair__b { width: auto; justify-self: stretch; margin-top: 9.6rem !important; box-shadow: none; }
  .rel { padding: 8rem 0 8rem 4rem; }
  .rel__row { grid-auto-columns: 38%; padding-right: 4rem; }
  .rel__row--grid { grid-template-columns: repeat(3, 1fr); }
  .rel__head { padding-right: 4rem; }
  .rel__head .h2 { font-size: 3.6rem; }
}

/* ---------- десктоп: две колонки, заголовок секции прилипает ---------- */
@media (min-width: 1024px) {
  /* масштаб первого экрана — по высоте окна, как у первого экрана главной (надзаголовок ~16 px, кнопка ~50 px) */
  .ph { --v: var(--hv); min-height: max(64rem, 82svh); }
  /* десктоп: градуированные фильтры без замкнутой формы (слева направо и снизу вверх) — глаз принимает их за оптику, а не за пятно */
  .ph__shade::after { background:
    linear-gradient(90deg, rgba(3, 7, 4, .62) 0%, rgba(3, 7, 4, .44) 34%, rgba(3, 7, 4, .1) 60%, rgba(3, 7, 4, 0) 78%),
    linear-gradient(0deg, rgba(3, 7, 4, .6) 0%, rgba(3, 7, 4, .4) 40%, rgba(3, 7, 4, .12) 70%, rgba(3, 7, 4, 0) 88%); }
  .ph__body { padding: calc(var(--hdr-h) + 12rem) calc(var(--gut) + 9.6rem) 8.8rem calc(var(--gut) + 11.2rem); }
  .crumbs { font-size: 1.2rem; }
  .ph__title { font-size: 8.8rem; line-height: 1.02; }
  .ph__title--long { font-size: 6.4rem; line-height: 1.06; max-width: 15em; }
  .ph__lead { margin-top: 2.8rem; font-size: 2.2rem; max-width: 30em; }
  .ph__ctas { margin-top: 4rem; gap: 1.2rem 4rem; }
  .ph__cta2.link-arrow { font-size: 1.6rem; gap: 1.4rem; }
  .ph__cta2.link-arrow .i-arrow { width: 2.8rem; height: 1.4rem; }
  /* первый ряд фактов виден из-под первого экрана */
  .pf { padding: 4.8rem calc(var(--gut) + 9.6rem) 0 calc(var(--gut) + 11.2rem); }
  .pf__list { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); column-gap: 4.8rem; }
  .pf--map { display: grid; grid-template-columns: 19rem minmax(0, 1fr); column-gap: 6.4rem; align-items: start; }
  .pf--map .pmap { width: auto; margin: 0; padding-top: 4rem; }
  .pf--map .pf__list { grid-template-columns: repeat(min(var(--n, 3), 3), minmax(0, 1fr)); }
  .hub { display: grid; grid-template-columns: minmax(380px, 34rem) minmax(0, 1fr); column-gap: 8rem; align-items: start; }   /* на 1024–1279 карта не уже 380 px — подписи 11.5 px помещаются */
  .hubmap { width: auto; margin: 0; position: -webkit-sticky; position: sticky; top: calc(var(--hdr-h) + 3.2rem); }
  .hub .rel__row--grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }   /* 10 карточек — 2 × 5, без пустых ячеек */
  .hub .rcard { aspect-ratio: 4 / 3; }
  .pf__i { padding: 2.4rem 0 2.8rem; }
  .pf__v { font-size: 1.8rem; }
  .pf__n { font-size: 3.2rem; }
  .pb { display: grid; grid-template-columns: 52rem minmax(0, 1fr); column-gap: 8rem; padding: 12rem calc(var(--gut) + 9.6rem) 0 calc(var(--gut) + 11.2rem); }
  .pb:last-of-type, .pb--honest, .pb--dark { padding-bottom: 12rem; }
  .pb--honest + .pb, .pb--dark + .pb:not(.pb--dark) { padding-top: 12rem; }
  .pb--dark + .pb--dark { padding-top: 0; }
  .pb__head { position: -webkit-sticky; position: sticky; top: calc(var(--hdr-h) + 4rem); align-self: start; }
  .pb__title { font-size: 4rem; line-height: 1.1; }
  .pb__text { margin-top: .8rem; font-size: 1.9rem; max-width: 72rem; }
  .pb__h3 { font-size: 2.8rem; }
  /* «Честно о…»: заголовок сверху, две колонки на всю ширину текста (не лесенка 27 знаков) */
  .pb--honest { display: block; }
  .pb--honest .pb__head { position: static; max-width: 60rem; }
  .pb--honest .pb__text { max-width: none; margin-top: 4.8rem; }
  .pb--honest .hon { grid-template-columns: 1fr 1fr; gap: 8rem; }   /* до 1024 — одна колонка: на планшете две по 320 px — лесенка */
  .pb--honest .hon__ul { gap: 1.8rem; }
  .steps li { grid-template-columns: 8rem 1fr; padding: 2.8rem 0; }
  .steps__n { font-size: 3.2rem; }
  .pband { margin-top: 12rem; }
  /* пара деталей: асимметрия — крупный кадр на оси текста, второй уже и ниже */
  .ppair { grid-template-columns: 7fr 5fr; gap: 3.2rem; padding: 12rem calc(var(--gut) + 9.6rem) 0 calc(var(--gut) + 11.2rem); }
  .ppair__b { margin-top: 16rem !important; }
  .rel { padding: 12rem calc(var(--gut) + 9.6rem) 12rem calc(var(--gut) + 11.2rem); }
  .rel--hub { padding-top: 9.6rem; }
  .rel__head { padding-right: 0; }
  .rel__head .h2 { font-size: 4rem; }
  /* число колонок — по числу карточек (сборка ставит --n), без пустых ячеек */
  .rel__row { grid-auto-flow: row; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); grid-auto-columns: auto; gap: 1.6rem; margin-top: 4.8rem; padding-right: 0; overflow: visible; }
  .rel__row[style*="--n: 1"], .rel__row[style*="--n: 2"] { max-width: calc(var(--n) * 36rem + (var(--n) - 1) * 1.6rem); }   /* 1–2 карточки не растягиваются на всю ширину; 3–4 — на всю колонку */
  .rel__row--grid { grid-template-columns: repeat(5, 1fr); max-width: none; }
  .rcard__txt { left: 2rem; right: 2rem; }
  .rcard__e { font-size: 1.1rem; }
  .rcard__t { font-size: 2.4rem; }
  /* заголовок и лид — в тёмной левой части кадра (на главной строки разбиты вручную), не заходят на светлый мрамор */
  .inner .cts__title { font-size: calc(6.4 * var(--v)); line-height: 1.1; max-width: 11.5em; }
  .inner .cts__lead { max-width: 26em; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
  /* ось «Контактов» — как у всей страницы (11.2rem от края колонки) */
  .inner .cts__body { padding-left: calc(11.2rem - 9.5rem); }
}

.rel__head .h2 { text-wrap: balance; }

/* раздел с якорем (ссылка вида page.html#hidden): html уже отступает на шапку (scroll-padding-top),
   здесь снимаем верхнее поле раздела — заголовок встаёт в 2.4rem под шапкой */
main > section.pb[id] { scroll-margin-top: -3.2rem; }
@media (min-width: 768px) { main > section.pb[id] { scroll-margin-top: -4.8rem; } }
@media (min-width: 1024px) { main > section.pb[id] { scroll-margin-top: -9.6rem; } }

/* кнопка заявки внутри раздела ([[cta: …]] в md) */
.pb__cta { margin-top: 3.2rem; }

/* полоса цифр ([[stats: …]] в md) — визуальная пауза в ночном тоне вместо стокового фото (Лагуна) */
.pstats { margin-top: 5.6rem; background: var(--night); color: var(--cream); padding: 8rem 2rem; }
.pstats__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4.8rem; }
.pstats__n { display: block; font: 300 4.8rem/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.pstats__t { display: block; margin-top: 1.4rem; max-width: 24em; font: 500 1.2rem/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 233, 216, .72); }
@media (min-width: 768px) { .pstats { margin-top: 7.2rem; padding: 11rem 4rem; } .pstats__l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem; } .pstats__n { font-size: 6.4rem; } }
@media (min-width: 1024px) { .pstats { margin-top: 12rem; padding: 16rem calc(var(--gut) + 9.6rem) 16rem calc(var(--gut) + 11.2rem); } .pstats__n { font-size: 8.8rem; } }

/* телефон: хлебные крошки в первом экране не дублируют надзаголовок и не ложатся на главный объект кадра (разметка и JSON-LD остаются) */
@media (max-width: 767px) { .ph .crumbs { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }   /* скрыты визуально, для скринридера остаются */