/* =========================================================================
   Central Property — общие компоненты страниц этапа 3 (главная, районы, ЖК, о компании, контакты).
   Перенос из docs/preview/v2/cp-ui.css (разделы 2–3, 5, 7, 12, 18, 20–21, 24) на токены --cp-* из style.css.
   Зависимости (объявлены в других css дочерней темы, подключаются всегда):
     cards.css          — --cp-s1…s5, --cp-fs-sm/base, --cp-tap; .cp-badge, .cp-card__badges
     header-footer.css  — --cp-night-line, --cp-header-h
   Здесь объявляются только недостающие токены (шкала s6–s8, секции, контейнер, размеры заголовков, орнамент).
   Mobile-first: база — 375 px, расширение через min-width (600 — две колонки, 768 — планшет, 1024 — компьютер).
   Движение — только transform/opacity, 150–480 мс; prefers-reduced-motion выключает всё.
   Разметка: inc/shortcodes.php (.cp-grid, .cp-dcard, .cp-ccard, .cp-chip) и JSON страниц (классы на контейнерах/виджетах Elementor).
   ========================================================================= */

:root{
  --cp-s6:32px; --cp-s7:48px; --cp-s8:64px;
  --cp-section:48px;            /* вертикальный отступ секции: 48 / 72 / 96 (DESIGN.md §4) */
  --cp-gutter:16px;             /* поля контейнера: 16, от 768 — 24 */
  --cp-container:1240px;
  --cp-fs-xs:.75rem;
  --cp-fs-hero:clamp(2rem,4.8vw + .6rem,3.75rem);
  --cp-fs-h2:clamp(1.625rem,2.3vw + .8rem,2.5rem);
  --cp-fs-h3:clamp(1.25rem,.8vw + 1rem,1.625rem);
  --cp-fs-h4:1.125rem;
  --cp-fs-stat:2rem;
  --cp-dur-reveal:480ms;
  --cp-reveal-shift:18px;
  --cp-ornament:color-mix(in srgb,var(--cp-accent) 14%,transparent);
  --cp-ornament-night:color-mix(in srgb,var(--cp-on-night) 11%,transparent);
  --cp-dcard-h:168px; --cp-dcard-h-sm:120px;
}
@media (min-width:768px){:root{--cp-gutter:24px;--cp-section:72px}}
@media (min-width:1024px){:root{--cp-section:96px}}

/* ---------- 1. Текстовые роли ---------- */
.cp-eyebrow{margin:0 0 var(--cp-s2);font-family:var(--cp-font-head);font-size:var(--cp-fs-sm);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cp-accent-text)}
.cp-lead{font-size:1.125rem;line-height:1.55;color:var(--cp-muted);max-width:70ch}
.cp-num{font-family:var(--cp-font-head);font-variant-numeric:tabular-nums}
.cp-muted{color:var(--cp-muted)}
.cp-small{font-size:var(--cp-fs-sm)}
.cp-xs{font-size:var(--cp-fs-xs);line-height:1.4}

/* ---------- 2. Секция и контейнер ---------- */
/* Контейнер Elementor (.e-con) красит отступы через свои переменные --padding-* (boxed — на .e-con-inner, full — на самом .e-con),
   поэтому физический padding получают только обычные блоки (:not(.e-con)) — иначе у boxed-контейнера отступ удваивается. */
.cp-section{position:relative;background:var(--cp-bg);color:var(--cp-text)}
.cp-section:not(.e-con){padding-block:var(--cp-section);padding-inline:var(--cp-gutter)}
.e-con.cp-section{--padding-top:var(--cp-section);--padding-bottom:var(--cp-section);--padding-left:var(--cp-gutter);--padding-right:var(--cp-gutter)}
.cp-section--alt{background:var(--cp-surface-2)}
.cp-section--surface{background:var(--cp-surface)}
.cp-section--night{background:var(--cp-night);color:var(--cp-on-night)}
.cp-section--night h1,.cp-section--night h2,.cp-section--night h3,.cp-section--night h4,
.cp-section--night .elementor-heading-title,.cp-section--night .cp-section__title{color:var(--cp-on-night)}
.cp-section--night .cp-eyebrow{color:var(--cp-gold)}
.cp-section--night .cp-lead,.cp-section--night .cp-section__lead,.cp-section--night .cp-muted,.cp-section--night p{color:var(--cp-on-night-muted)}
.cp-section--night :is(p,li,.cp-section__head,.cp-cta__text) a:not(.cp-btn):not(.cp-chip){color:var(--cp-on-night)}
.cp-section--night .cp-section__link{color:var(--cp-on-night)}
.cp-container{width:100%;max-width:var(--cp-container);margin-inline:auto;padding-inline:var(--cp-gutter)}
.cp-section > .cp-container{padding-inline:0}

/* Шапка секции: eyebrow + заголовок слева, ссылка «Все …» справа; на телефоне — в столбик */
.cp-section__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--cp-s3);margin-bottom:var(--cp-s5)}
.cp-section__head > *{min-width:0}
.cp-section__title,.cp-section__title .elementor-heading-title{margin:0;font-family:var(--cp-font-head);font-size:var(--cp-fs-h2);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:inherit;text-wrap:balance}
.cp-section__lead{margin:var(--cp-s3) 0 0;font-size:1.125rem;line-height:1.55;color:var(--cp-muted);max-width:70ch}
.cp-section__link{display:inline-flex;align-items:center;gap:var(--cp-s2);min-height:var(--cp-tap);font-weight:600;font-size:var(--cp-fs-sm);color:var(--cp-accent-text);text-decoration:none;white-space:nowrap}
.cp-section__link::after{content:"\2192";font-family:var(--cp-font-head);transition:transform var(--cp-dur-fast) var(--cp-ease)}
.cp-section__link:hover{color:var(--cp-accent-hover);text-decoration:none}
.cp-section__link:hover::after{transform:translateX(3px)}
.cp-section__foot{margin-top:var(--cp-s5);display:flex;flex-wrap:wrap;gap:var(--cp-s3);justify-content:center}
.cp-section__note{margin:var(--cp-s3) 0 0;font-size:var(--cp-fs-xs);line-height:1.4;color:var(--cp-muted)}
@media (min-width:768px){
  .cp-section__head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--cp-s4);flex-wrap:wrap}
}
/* Виджет Elementor внутри .cp-section__head не должен растягиваться и давать нижний отступ */
.cp-section__head .elementor-widget,.cp-section__head .elementor-widget:not(:last-child){margin-block-end:0;width:auto;max-width:100%}

/* ---------- 3. Сетка ---------- */
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cp-s4);margin:0;padding:0;list-style:none}
.cp-grid > *{min-width:0}
.cp-grid > .cp-card-wrap{margin:0;width:auto;max-width:none;float:none}
.cp-grid--1{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){
  .cp-grid--2,.cp-grid--3,.cp-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){.cp-grid{gap:var(--cp-s5)}}
@media (min-width:1024px){
  .cp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Пустой результат шорткода */
.cp-empty-note{margin:0;padding:var(--cp-s4);border:1px dashed var(--cp-line-strong);border-radius:var(--cp-r-md);color:var(--cp-muted);font-size:var(--cp-fs-sm);text-align:center}

/* ---------- 4. Кнопки (общие; внутри .cp-card свои правила в cards.css, они сильнее) ---------- */
.cp-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--cp-s2);min-height:48px;padding:0 var(--cp-s5);border:1px solid transparent;border-radius:var(--cp-r-sm);background:var(--cp-accent);color:var(--cp-on-accent);font:600 var(--cp-fs-base)/1.2 var(--cp-font-text);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--cp-dur-fast) var(--cp-ease),color var(--cp-dur-fast) var(--cp-ease),border-color var(--cp-dur-fast) var(--cp-ease),transform var(--cp-dur-fast) var(--cp-ease)}
.cp-btn svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cp-btn:hover,.cp-btn:focus-visible{background:var(--cp-accent-hover);color:var(--cp-on-accent);text-decoration:none}
.cp-btn:active{transform:translateY(1px)}
.cp-btn--primary{background:var(--cp-accent);color:var(--cp-on-accent)}
.cp-btn--secondary{background:var(--cp-surface);color:var(--cp-accent-text);border-color:var(--cp-accent)}
.cp-btn--secondary:hover,.cp-btn--secondary:focus-visible{background:var(--cp-accent-soft);color:var(--cp-accent-text)}
.cp-btn--ghost{background:transparent;color:var(--cp-accent-text);padding-inline:var(--cp-s3)}
.cp-btn--ghost:hover,.cp-btn--ghost:focus-visible{background:var(--cp-accent-soft);color:var(--cp-accent-text)}
.cp-btn--outline-light{background:transparent;color:var(--cp-on-night);border-color:color-mix(in srgb,var(--cp-on-night) 50%,transparent)}
.cp-btn--outline-light:hover,.cp-btn--outline-light:focus-visible{background:color-mix(in srgb,var(--cp-on-night) 10%,transparent);color:var(--cp-on-night)}
.cp-btn--sm{min-height:40px;padding:0 var(--cp-s4);font-size:var(--cp-fs-sm)}
.cp-btn--lg{min-height:56px;padding:0 var(--cp-s6);font-size:1.0625rem}
.cp-btn--block{width:100%}
.cp-btn:disabled,.cp-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
/* Кнопка-виджет Elementor с классом cp-btn--ghost/secondary на обёртке — красим саму кнопку */
.elementor-widget-button.cp-btn--ghost .elementor-button{background:transparent;color:var(--cp-accent-text);border-radius:var(--cp-r-sm);font-weight:600}
.elementor-widget-button.cp-btn--ghost .elementor-button:hover{background:var(--cp-accent-soft);color:var(--cp-accent-text)}
.elementor-widget-button.cp-btn--secondary .elementor-button{background:var(--cp-surface);color:var(--cp-accent-text);border:1px solid var(--cp-accent);border-radius:var(--cp-r-sm);font-weight:600}
.elementor-widget-button.cp-btn--secondary .elementor-button:hover{background:var(--cp-accent-soft);color:var(--cp-accent-text)}

/* ---------- 5. Чипы ---------- */
.cp-chips{display:flex;flex-wrap:wrap;gap:var(--cp-s2);margin:0;padding:0;list-style:none}
.cp-chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--cp-gutter));padding-inline:var(--cp-gutter);padding-bottom:2px;-webkit-overflow-scrolling:touch}
.cp-chips--scroll::-webkit-scrollbar{display:none}
@media (min-width:768px){.cp-chips--scroll{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}}
.cp-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--cp-s4);border:1px solid var(--cp-line);border-radius:var(--cp-r-pill);background:var(--cp-surface);color:var(--cp-text);font-size:var(--cp-fs-sm);font-weight:500;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--cp-dur-fast) var(--cp-ease),border-color var(--cp-dur-fast) var(--cp-ease),color var(--cp-dur-fast) var(--cp-ease)}
.cp-chip:hover,.cp-chip:focus-visible{border-color:var(--cp-accent);color:var(--cp-accent-text);text-decoration:none}
.cp-chip.is-active,.cp-chip[aria-pressed="true"],.cp-chip[aria-current]{background:var(--cp-accent-soft);border-color:var(--cp-accent);color:var(--cp-accent-text)}
.cp-chip__n{font-family:var(--cp-font-head);font-size:var(--cp-fs-xs);color:var(--cp-muted)}
.cp-chip.is-active .cp-chip__n,.cp-chip[aria-current] .cp-chip__n{color:var(--cp-accent-text)}
.cp-chip--night{background:color-mix(in srgb,var(--cp-on-night) 8%,transparent);border-color:var(--cp-night-line);color:var(--cp-on-night)}
.cp-chip--night:hover,.cp-chip--night:focus-visible{background:color-mix(in srgb,var(--cp-on-night) 14%,transparent);border-color:color-mix(in srgb,var(--cp-on-night) 40%,transparent);color:var(--cp-on-night)}
.cp-chip--night .cp-chip__n{color:var(--cp-on-night-muted)}
/* Сенсорный экран (DESIGN.md: цель нажатия на телефоне ≥ 44×44 px): чипы и малые кнопки дорастают до --cp-tap; с мышью — 40 px по макету. */
@media (pointer:coarse){.cp-chip,.cp-btn--sm{min-height:var(--cp-tap)}}

/* ---------- 6. Статистика ---------- */
.cp-stat{padding:var(--cp-s4);border:1px solid var(--cp-line);border-radius:var(--cp-r-md);background:var(--cp-surface)}
.cp-stat b{display:block;font-family:var(--cp-font-head);font-size:var(--cp-fs-stat);font-weight:600;line-height:1.1;color:var(--cp-accent-text);font-variant-numeric:tabular-nums}
.cp-stat span{display:block;margin-top:var(--cp-s1);font-size:var(--cp-fs-sm);line-height:1.35;color:var(--cp-muted)}
.cp-stat--night,.cp-section--night .cp-stat{background:color-mix(in srgb,var(--cp-on-night) 6%,transparent);border-color:var(--cp-night-line)}
.cp-stat--night b,.cp-section--night .cp-stat b{color:var(--cp-on-night)}
.cp-stat--night span,.cp-section--night .cp-stat span{color:var(--cp-on-night-muted)}
/* Полоса из статов: 2×2 на телефоне, в ряд с планшета */
.cp-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cp-s3)}
@media (min-width:768px){.cp-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--cp-s4)}}
@media (max-width:359.98px){.cp-stat b{font-size:1.5rem}}

/* ---------- 7. Шаги («Как проходит сделка», «Как мы работаем») ---------- */
/* <ol class="cp-steps"><li><h3>Заявка и подбор</h3><p>…</p></li>…</ol>; номер ставит счётчик, свой <span class="cp-steps__n"> выключает его */
.cp-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cp-s3);margin:0;padding:0;list-style:none;counter-reset:cp-step}
.cp-steps > li{position:relative;display:flex;flex-direction:column;gap:var(--cp-s2);padding:var(--cp-s5);border-top:3px solid var(--cp-accent);border-radius:var(--cp-r-md);background:var(--cp-surface);box-shadow:var(--cp-shadow-1);counter-increment:cp-step}
.cp-steps > li::before{content:counter(cp-step,decimal-leading-zero);display:block;margin-bottom:var(--cp-s1);font-family:var(--cp-font-head);font-size:2rem;font-weight:600;line-height:1;color:var(--cp-accent-text);font-variant-numeric:tabular-nums}
.cp-steps > li:has(.cp-steps__n)::before{display:none}
.cp-steps__n{display:block;margin-bottom:var(--cp-s1);font-family:var(--cp-font-head);font-size:2rem;font-weight:600;line-height:1;color:var(--cp-accent-text);font-variant-numeric:tabular-nums}
.cp-steps h3,.cp-steps h4{margin:0;font-family:var(--cp-font-text);font-size:var(--cp-fs-h4);font-weight:600;line-height:1.3;color:var(--cp-text)}
.cp-steps p{margin:0;font-size:var(--cp-fs-sm);line-height:1.5;color:var(--cp-muted)}
.cp-section--alt .cp-steps > li{background:var(--cp-surface)}
.cp-section--surface .cp-steps > li{background:var(--cp-bg);box-shadow:none}
.cp-section--night .cp-steps > li{background:color-mix(in srgb,var(--cp-on-night) 6%,transparent);border-top-color:var(--cp-gold);box-shadow:none}
.cp-section--night .cp-steps > li::before,.cp-section--night .cp-steps__n{color:var(--cp-gold)}
.cp-section--night .cp-steps h3,.cp-section--night .cp-steps h4{color:var(--cp-on-night)}
.cp-section--night .cp-steps p{color:var(--cp-on-night-muted)}
@media (min-width:600px){.cp-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cp-s4)}}
@media (min-width:1024px){.cp-steps{grid-template-columns:repeat(4,minmax(0,1fr))}.cp-steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}.cp-steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- 8. Призыв к действию («Не нашли объект?», «Подобрать объект в районе») ---------- */
/* <div class="cp-cta"><div class="cp-cta__text">eyebrow, h2, лид, ul.cp-cta__points</div><div class="cp-cta__box">форма/кнопки</div></div> */
.cp-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cp-s6);align-items:start}
.cp-cta__text > :last-child{margin-bottom:0}
.cp-cta__points{margin:var(--cp-s4) 0 0;padding-left:1.2em;color:var(--cp-muted)}
.cp-cta__points li{margin-bottom:var(--cp-s2)}
.cp-cta__points li::marker{color:var(--cp-accent)}
.cp-cta__box{padding:var(--cp-s5);border:1px solid var(--cp-line);border-radius:var(--cp-r-lg);background:var(--cp-surface);box-shadow:var(--cp-shadow-1)}
.cp-cta__box > .elementor-widget:last-child{margin-block-end:0}
.cp-cta__actions{display:flex;flex-wrap:wrap;gap:var(--cp-s3);margin-top:var(--cp-s4)}
.cp-cta--night .cp-cta__points{color:var(--cp-on-night-muted)}
.cp-cta--night .cp-cta__points li::marker{color:var(--cp-gold)}
.cp-cta--night .cp-cta__box{background:color-mix(in srgb,var(--cp-on-night) 6%,transparent);border-color:var(--cp-night-line);box-shadow:none}
.cp-cta--card{padding:var(--cp-s5);border:1px solid var(--cp-line);border-radius:var(--cp-r-lg);background:var(--cp-surface);box-shadow:var(--cp-shadow-1)}
@media (min-width:768px){.cp-cta--card{padding:var(--cp-s6)}}
@media (min-width:1024px){
  .cp-cta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cp-s7)}
  .cp-cta__box{padding:var(--cp-s6)}
}

/* ---------- 9. Карточка района .cp-dcard (шорткод [cp_districts], макет index.html #districts, district.html «Соседние районы») ---------- */
/* Градиент по оттенку --h (term meta cp_hue или запасной), маска орнамента pattern.svg, подпись внизу */
.cp-dcard{--h:222;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--cp-s1);min-height:var(--cp-dcard-h);padding:var(--cp-s4);border-radius:var(--cp-r-md);overflow:hidden;background:linear-gradient(160deg,hsl(var(--h) 40% 34%),hsl(calc(var(--h) + 20) 45% 20%));color:var(--cp-on-accent);text-decoration:none;transition:transform var(--cp-dur-base) var(--cp-ease)}
.cp-dcard::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cp-ornament-night);-webkit-mask:url(../assets/img/pattern.svg) center/96px 96px repeat;mask:url(../assets/img/pattern.svg) center/96px 96px repeat;opacity:.9}
.cp-dcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--cp-night) 55%,transparent))}
.cp-dcard:hover,.cp-dcard:focus-visible{color:var(--cp-on-accent);text-decoration:none;box-shadow:var(--cp-shadow-2)}
@media (hover:hover){.cp-dcard:hover{transform:translateY(-3px)}}
.cp-dcard__n{position:absolute;top:var(--cp-s3);right:var(--cp-s3);display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--cp-r-pill);background:color-mix(in srgb,var(--cp-on-accent) 16%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font-size:var(--cp-fs-xs);font-weight:600;line-height:1;white-space:nowrap}
.cp-dcard__name{display:block;margin:0;font-family:var(--cp-font-head);font-size:1.25rem;font-weight:600;line-height:1.15;color:inherit;text-wrap:balance}
.cp-dcard__note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--cp-fs-xs);line-height:1.4;color:color-mix(in srgb,var(--cp-on-accent) 82%,transparent)}
.cp-dcard__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--cp-s1) var(--cp-s2);font-size:var(--cp-fs-sm);color:color-mix(in srgb,var(--cp-on-accent) 86%,transparent)}
.cp-dcard__row b{font-family:var(--cp-font-head);font-weight:600;color:inherit;font-variant-numeric:tabular-nums}
.cp-dcard--sm{min-height:var(--cp-dcard-h-sm);padding:var(--cp-s3)}
.cp-dcard--sm .cp-dcard__name{font-size:var(--cp-fs-base)}
.cp-dcard.is-active{outline:2px solid var(--cp-gold);outline-offset:2px}
/* На телефоне карточки районов — две в ряд даже в сетке --4 (макет .home-districts) */
.cp-districts.cp-grid--4,.cp-districts.cp-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cp-s3)}
@media (min-width:768px){.cp-districts.cp-grid--4,.cp-districts.cp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cp-s4)}}
@media (min-width:1024px){.cp-districts.cp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cp-s5)}.cp-districts.cp-grid--3{gap:var(--cp-s5)}}
@media (max-width:359.98px){.cp-districts.cp-grid--4,.cp-districts.cp-grid--3{grid-template-columns:minmax(0,1fr)}}

/* ---------- 10. Карточка ЖК .cp-ccard (шорткод [cp_complexes], макет index.html «Новостройки и ЖК», complex.html «Похожие ЖК») ---------- */
.cp-ccard{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;border:1px solid var(--cp-line);border-radius:var(--cp-r-md);background:var(--cp-surface);box-shadow:var(--cp-shadow-1);transition:transform var(--cp-dur-base) var(--cp-ease)}
.cp-ccard::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--cp-shadow-2);opacity:0;pointer-events:none;transition:opacity var(--cp-dur-base) var(--cp-ease)}
@media (hover:hover){
  .cp-ccard:hover{transform:translateY(-3px)}
  .cp-ccard:hover::before{opacity:1}
  .cp-ccard:hover .cp-ccard__media img{transform:scale(1.04)}
}
.cp-ccard__media{position:relative;display:block;flex:none;aspect-ratio:16/10;overflow:hidden;border-radius:var(--cp-r-md) var(--cp-r-md) 0 0;background:var(--cp-surface-2)}
.cp-ccard__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--cp-night) 8%,transparent),transparent 40%,color-mix(in srgb,var(--cp-night) 40%,transparent))}
.cp-ccard__media img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform var(--cp-dur-slow) var(--cp-ease)}
/* Заглушка без фото: ночной градиент с орнаментом */
.cp-ccard__ph{position:absolute;inset:0;z-index:1;background:linear-gradient(145deg,var(--cp-night-2),var(--cp-night))}
.cp-ccard__ph::before{content:"";position:absolute;inset:0;background:var(--cp-ornament-night);-webkit-mask:url(../assets/img/pattern.svg) center/96px 96px repeat;mask:url(../assets/img/pattern.svg) center/96px 96px repeat}
.cp-ccard__ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:var(--cp-on-night-muted);opacity:.18;-webkit-mask:url(../assets/img/skyline.svg) center bottom/auto 100% repeat-x;mask:url(../assets/img/skyline.svg) center bottom/auto 100% repeat-x}
.cp-ccard .cp-card__badges{top:var(--cp-s3);left:var(--cp-s3);max-width:calc(100% - var(--cp-s5))}
.cp-ccard__body{display:flex;flex-direction:column;gap:var(--cp-s2);flex:1;padding:var(--cp-s4)}
.cp-ccard__name{margin:0;font-family:var(--cp-font-head);font-size:1.25rem;font-weight:600;line-height:1.2;color:var(--cp-text)}
.cp-ccard__name a{color:inherit;text-decoration:none}
.cp-ccard__name a::after{content:"";position:absolute;inset:0;z-index:1} /* вся карточка — ссылка на ЖК */
.cp-ccard:has(.cp-ccard__name a:focus-visible){outline:2px solid var(--cp-accent);outline-offset:2px}
.cp-ccard__name a:focus-visible{outline:none}
.cp-ccard__meta{display:flex;flex-wrap:wrap;gap:var(--cp-s1) var(--cp-s3);font-size:var(--cp-fs-sm);line-height:1.4;color:var(--cp-muted)}
.cp-ccard__meta > * + *::before{content:"";display:inline-block;width:3px;height:3px;margin-right:var(--cp-s3);border-radius:50%;background:var(--cp-faint);vertical-align:middle}
.cp-ccard__meta a{position:relative;z-index:2;color:var(--cp-muted);text-decoration:none}
.cp-ccard__meta a:hover{color:var(--cp-accent-text)}
.cp-ccard__price{font-size:var(--cp-fs-sm);color:var(--cp-muted)}
.cp-ccard__price b{font-family:var(--cp-font-head);font-size:var(--cp-fs-base);font-weight:600;color:var(--cp-text)}
.cp-ccard__count{margin-top:auto;padding-top:var(--cp-s3);border-top:1px solid var(--cp-line);font-size:var(--cp-fs-sm);color:var(--cp-faint)}
/* Метки статуса ЖК (в cards.css их нет) */
.cp-badge--status{background:var(--cp-success);color:var(--cp-on-accent)}
.cp-badge--sale{background:var(--cp-night);color:var(--cp-on-night)}
/* Строчный вид: фото слева с 600 px */
@media (min-width:600px){
  .cp-ccard--row{flex-direction:row}
  .cp-ccard--row .cp-ccard__media{width:40%;max-width:360px;aspect-ratio:auto;min-height:200px;border-radius:var(--cp-r-md) 0 0 var(--cp-r-md)}
  .cp-ccard--row .cp-ccard__body{padding:var(--cp-s5)}
}

/* ---------- 11. Появление при прокрутке .cp-reveal ---------- */
/* Скрытое состояние включается только после запуска js/sections.js (html.cp-js): без JS и при reduced-motion всё видно сразу.
   Задержка каскада — модификаторы --d1…--d4 (80 мс шаг) или своя переменная --cp-d. */
html.cp-js .cp-reveal{opacity:0;transform:translateY(var(--cp-reveal-shift));transition:opacity var(--cp-dur-reveal) var(--cp-ease),transform var(--cp-dur-reveal) var(--cp-ease);transition-delay:var(--cp-d,0ms);will-change:opacity,transform}
html.cp-js .cp-reveal.is-visible{opacity:1;transform:none;will-change:auto}
.cp-reveal--d1{--cp-d:80ms}.cp-reveal--d2{--cp-d:160ms}.cp-reveal--d3{--cp-d:240ms}.cp-reveal--d4{--cp-d:320ms}
/* Каскад внутри сетки: детям .cp-grid.cp-reveal-stagger задержка по порядку (до 8 элементов) */
.cp-reveal-stagger > :nth-child(2){--cp-d:80ms}.cp-reveal-stagger > :nth-child(3){--cp-d:160ms}.cp-reveal-stagger > :nth-child(4){--cp-d:240ms}
.cp-reveal-stagger > :nth-child(5){--cp-d:80ms}.cp-reveal-stagger > :nth-child(6){--cp-d:160ms}.cp-reveal-stagger > :nth-child(7){--cp-d:240ms}.cp-reveal-stagger > :nth-child(8){--cp-d:320ms}

/* ---------- 12. Шапочный блок страницы .cp-page-hero (заголовок, подзаголовок, крошки; ночной фон с орнаментом) ---------- */
/* Контейнер верхнего уровня (Elementor или <section>): .cp-page-hero; внутри — .cp-page-hero__crumbs (ol), __eyebrow, __title (h1), __lead, __actions, __aside (вторая колонка с 1024 px), __credit, фон __bg > img */
.cp-page-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--cp-night);color:var(--cp-on-night)}
.cp-page-hero:not(.e-con){padding-block:var(--cp-s6) var(--cp-s7);padding-inline:var(--cp-gutter)}
.e-con.cp-page-hero{--padding-top:var(--cp-s6);--padding-bottom:var(--cp-s7);--padding-left:var(--cp-gutter);--padding-right:var(--cp-gutter)}
.cp-page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--cp-night),var(--cp-night-2))}
.cp-page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--cp-ornament-night);opacity:.55;pointer-events:none;-webkit-mask-image:url(../assets/img/pattern.svg),linear-gradient(90deg,#000,transparent 60%);-webkit-mask-size:96px 96px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;-webkit-mask-composite:source-in;mask-image:url(../assets/img/pattern.svg),linear-gradient(90deg,#000,transparent 60%);mask-size:96px 96px,100% 100%;mask-repeat:repeat,no-repeat;mask-composite:intersect}
.cp-page-hero__bg{position:absolute;inset:0;z-index:-1;margin:0}
.cp-page-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.55;mix-blend-mode:luminosity}
.cp-page-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--cp-night) 55%,transparent),color-mix(in srgb,var(--cp-night) 25%,transparent) 40%,color-mix(in srgb,var(--cp-night) 85%,transparent)),linear-gradient(90deg,color-mix(in srgb,var(--cp-night) 75%,transparent),color-mix(in srgb,var(--cp-night) 15%,transparent) 70%)}
.cp-page-hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cp-s5);width:100%;max-width:var(--cp-container);margin-inline:auto}
.cp-page-hero__inner > *{min-width:0}
.cp-page-hero__crumbs,.cp-crumbs{display:flex;flex-wrap:wrap;gap:var(--cp-s1) var(--cp-s2);margin:0 0 var(--cp-s4);padding:0;list-style:none;font-size:var(--cp-fs-sm);color:var(--cp-muted)}
.cp-page-hero__crumbs li,.cp-crumbs li{display:flex;align-items:center;gap:var(--cp-s2)}
.cp-page-hero__crumbs li + li::before,.cp-crumbs li + li::before{content:"/";color:var(--cp-faint)}
.cp-crumbs a{color:var(--cp-muted);text-decoration:none}
.cp-crumbs a:hover{color:var(--cp-accent-text)}
.cp-crumbs [aria-current]{color:var(--cp-text);font-weight:500}
.cp-page-hero__crumbs{color:var(--cp-on-night-muted)}
.cp-page-hero__crumbs a{color:var(--cp-on-night-muted);text-decoration:none}
.cp-page-hero__crumbs a:hover{color:var(--cp-on-night)}
.cp-page-hero__crumbs [aria-current]{color:var(--cp-on-night);font-weight:500}
.cp-page-hero__eyebrow,.cp-page-hero .cp-eyebrow{color:var(--cp-gold)}
.cp-page-hero__title,.cp-page-hero__title .elementor-heading-title,.cp-page-hero h1{margin:0 0 var(--cp-s3);max-width:18ch;font-family:var(--cp-font-head);font-size:var(--cp-fs-hero);font-weight:700;line-height:1.08;letter-spacing:-.01em;color:var(--cp-on-night);text-wrap:balance}
.cp-page-hero__title em,.cp-page-hero h1 em{font-style:normal;color:var(--cp-gold)}
.cp-page-hero__lead,.cp-page-hero .cp-lead{margin:0;max-width:52ch;font-size:1.125rem;line-height:1.55;color:var(--cp-on-night-muted)}
.cp-page-hero__actions{display:flex;flex-wrap:wrap;gap:var(--cp-s3);margin-top:var(--cp-s5)}
.cp-page-hero__stats{margin-top:var(--cp-s5)}
.cp-page-hero .cp-stat{background:color-mix(in srgb,var(--cp-on-night) 6%,transparent);border-color:var(--cp-night-line)}
.cp-page-hero .cp-stat b{color:var(--cp-on-night)}
.cp-page-hero .cp-stat span{color:var(--cp-on-night-muted)}
.cp-page-hero__note{margin:var(--cp-s3) 0 0;max-width:52ch;font-size:var(--cp-fs-sm);color:var(--cp-on-night-muted)}
.cp-page-hero__credit{position:absolute;right:var(--cp-gutter);bottom:var(--cp-s2);margin:0;font-size:11px;line-height:1.3;color:var(--cp-on-night-muted);opacity:.8}
.cp-page-hero .elementor-widget:not(:last-child){margin-block-end:0}
/* Светлый вариант (страницы без фото: «О компании», «Контакты», хаб районов) */
.cp-page-hero--light{background:var(--cp-surface);color:var(--cp-text)}
.cp-page-hero--light::before{background:linear-gradient(135deg,var(--cp-surface),var(--cp-surface-2))}
.cp-page-hero--light::after{background:var(--cp-ornament)}
.cp-page-hero--light .cp-page-hero__crumbs,.cp-page-hero--light .cp-page-hero__crumbs a{color:var(--cp-muted)}
.cp-page-hero--light .cp-page-hero__crumbs [aria-current]{color:var(--cp-text)}
.cp-page-hero--light .cp-page-hero__eyebrow,.cp-page-hero--light .cp-eyebrow{color:var(--cp-accent-text)}
.cp-page-hero--light .cp-page-hero__title,.cp-page-hero--light .cp-page-hero__title .elementor-heading-title,.cp-page-hero--light h1{color:var(--cp-text)}
.cp-page-hero--light .cp-page-hero__title em,.cp-page-hero--light h1 em{color:var(--cp-accent-text)}
.cp-page-hero--light .cp-page-hero__lead,.cp-page-hero--light .cp-lead,.cp-page-hero--light .cp-page-hero__note{color:var(--cp-muted)}
.cp-page-hero--light .cp-stat{background:var(--cp-surface);border-color:var(--cp-line)}
.cp-page-hero--light .cp-stat b{color:var(--cp-accent-text)}
.cp-page-hero--light .cp-stat span{color:var(--cp-muted)}
.cp-page-hero--light .cp-page-hero__credit{color:var(--cp-muted)}
@media (min-width:768px){
  .cp-page-hero:not(.e-con){padding-block:var(--cp-s7) var(--cp-s8)}
  .e-con.cp-page-hero{--padding-top:var(--cp-s7);--padding-bottom:var(--cp-s8)}
}
@media (min-width:1024px){
  .cp-page-hero__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:var(--cp-s7)}
  .cp-page-hero__inner--single{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 13. Без движения по просьбе системы ---------- */
@media (prefers-reduced-motion:reduce){
  html.cp-js .cp-reveal{opacity:1;transform:none;transition:none}
  .cp-dcard,.cp-ccard,.cp-ccard::before,.cp-ccard__media img,.cp-btn,.cp-chip,.cp-section__link::after{transition:none}
  .cp-dcard:hover,.cp-ccard:hover,.cp-ccard:hover .cp-ccard__media img,.cp-btn:active,.cp-section__link:hover::after{transform:none}
}