/*
 * Главная основного сайта. Контрольные ширины макета: 1920, 1440, 990, 375.
 * Отступы между секциями: --w-gap-l / -m / -s — с 26.10 все равны роли
 * --w-section-gap (64 / 80 / 120, layout.css, правило .ai/rules/spacing.md).
 */

:root {
    /* Отступы секций — роль --w-section-gap из layout.css (26.10, система отступов). */
    --w-gap-l: var(--w-section-gap);
    --w-gap-m: var(--w-section-gap);
    --w-gap-s: var(--w-section-gap);
    --w-title: 60px;
    --w-glass: rgba(34, 34, 34, .51);
}

@media (max-width: 1919px) {
    :root { --w-title: 48px; }
}

@media (max-width: 1439px) {
    :root { --w-title: 40px; }
}

@media (max-width: 989px) {
    :root { --w-title: 32px; }
}

.w-title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: var(--w-ink);
}

.w-section { margin-top: var(--w-gap-l); }
.w-section--m { margin-top: var(--w-gap-m); }
.w-section--s { margin-top: var(--w-gap-s); }
.w-section--last { margin-bottom: var(--w-gap-s); }

/* =====================================================================
   Hero
   ===================================================================== */

/* Первый экран — во всю высоту окна. Нижняя граница из макета (820 на 1920)
   остаётся минимумом: на низком окне заголовок с кнопкой не налезут
   на плашки. svh — чтобы на телефоне не прыгало с адресной строкой. */
.w-hero {
    position: relative;
    height: 100svh;
    min-height: 820px;
    overflow: hidden;
    color: #fff;
}

.w-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Кадр макета: видна нижняя часть картинки, дом по центру. */
    object-position: 50% 86%;
}

.w-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 18.564%, rgba(0, 0, 0, 0) 75.711%, rgba(0, 0, 0, .35) 100%);
}

.w-hero .w-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Две плашки над домом; зелёная на 5px заходит на стеклянную — так в макете. */
.w-hero__badges {
    position: absolute;
    left: 51.1%;
    /* В долях высоты, а не в px: при экране выше макета дом уезжает вниз,
       и плашки должны ехать вместе с ним (248/820 на 1920). */
    top: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}

.w-hero__badge {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    border: 1px solid;
    border-radius: 48px;
    font-family: var(--w-font-display);
    font-size: 28px;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

.w-hero__badge--glass {
    border-color: #7e7e7e;
    background: rgba(17, 17, 17, .45);
    -webkit-backdrop-filter: blur(17px);
    backdrop-filter: blur(17px);
}

.w-hero__badge--green {
    margin-top: -5px;
    border-color: var(--w-green);
    background: var(--w-green);
}

.w-hero__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-top: auto;
    padding-bottom: 24px;
}

.w-hero__title {
    max-width: 811px;
    margin: 0;
    font-family: var(--w-font-display);
    font-size: 100px;
    font-weight: 400;
    line-height: .84;
    text-transform: uppercase;
}

/* Заголовок в две строки: «Дома из СИП-панелей» / «под ключ в <городе>». Ширину задаёт перенос,
   а не max-width — иначе строки ломались по ширине в три. На мобильном
   перенос свой, по ширине экрана. */
.w-hero__title { max-width: none; }

.w-hero__button {
    flex: none;
    width: 237px;
    height: 91px;
    padding: 0;
}

@media (max-width: 1919px) {
    .w-hero { min-height: 742px; }
    .w-hero__badges { left: 50.1%; top: 40.7%; }
    .w-hero__badge { height: 37px; font-size: 22px; }
    .w-hero__bottom { padding-bottom: 18px; }
    .w-hero__title { font-size: 72px; }
    .w-hero__button { width: 210px; height: 80px; font-size: 24px; }
}

@media (max-width: 1439px) {
    .w-hero { min-height: 566px; }
    .w-hero__badges { left: 49.5%; top: 44%; }
    .w-hero__badge { height: 33px; padding: 0 10px; font-size: 18px; }
    .w-hero__badge--green { height: 25px; }
    .w-hero__bottom { padding-bottom: 20px; }
    .w-hero__title { font-size: 54px; }
    .w-hero__button { width: 190px; height: 66px; font-size: 22px; }
}

@media (max-width: 989px) {
    .w-hero__img { object-position: 71% 50%; }
    .w-hero__badges { left: calc(50% + 8px); top: 40.6%; }
    .w-hero__bottom { flex-direction: column; align-items: stretch; gap: 16px; padding-bottom: 16px; }
    .w-hero__title { font-size: 46px; }
    .w-hero__br { display: none; }
    .w-hero__button { width: 100%; height: 50px; font-size: 22px; }
}

/* =====================================================================
   Популярные проекты
   ===================================================================== */

.w-popular { margin-top: var(--w-gap-m); }

.w-popular__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 16px;
    margin-top: 54px;
}

.w-popular__all {
    display: table;
    margin: 45px auto 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--w-green);
    color: #2a2a2a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}


/* Карточка на главной крупнее каталожной: размеры из макета 1920. */
.w-card--lg {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    color: #0a0a0a;
}

.w-card--wide { grid-column: 1 / -1; }

.w-card--lg .w-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 872 / 484;
    object-fit: cover;
    background: #e9e9e9;
}

.w-card--lg.w-card--wide .w-card__img { aspect-ratio: 2 / 1; }

.w-card--lg .w-card__body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 20px;
}

.w-card--lg .w-card__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.w-card--lg .w-card__price { color: var(--w-green); }

.w-card--lg .w-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0 22px;
}

.w-card--lg .w-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #e9e9e9;
    color: #535353;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.w-card--lg .w-card__chip--area {
    border-color: var(--w-green);
    background: #def2e9;
    color: #136e47;
    font-weight: 700;
}

.w-card--lg .w-card__chip sup {
    font-size: .645em;
    line-height: 0;
    vertical-align: .35em;
}

.w-card--lg .w-card__btn {
    margin: 0 22px;
    height: 72px;
    padding: 0;
    border-radius: 8px;
    font-size: 32px;
}

@media (max-width: 1919px) {
    .w-popular__grid { gap: 24px 16px; margin-top: 44px; }
    .w-card--lg .w-card__body { gap: 24px; padding-top: 18px; }
    .w-card--lg .w-card__head { font-size: 30px; }
    .w-card--lg .w-card__chip { font-size: 20px; }
    .w-card--lg .w-card__btn { height: 64px; font-size: 28px; }
}

@media (max-width: 1439px) {
    .w-popular__grid { gap: 20px 16px; margin-top: 36px; }
    .w-popular__all { margin-top: 36px; font-size: 16px; }
    .w-card--lg .w-card__body { gap: 20px; padding-top: 16px; }
    .w-card--lg .w-card__head { padding: 0 16px; font-size: 24px; }
    .w-card--lg .w-card__chips { gap: 10px; padding: 0 16px; }
    .w-card--lg .w-card__chip { font-size: 16px; }
    .w-card--lg .w-card__btn { margin: 0 16px; height: 56px; font-size: 24px; }
}

@media (max-width: 989px) {
    .w-popular { margin-top: 40px; }
    .w-popular__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
    .w-popular__all { margin-top: 30px; font-size: 14px; }
    .w-card--lg { padding-bottom: 20px; }
    .w-card--lg .w-card__img, .w-card--lg.w-card--wide .w-card__img { aspect-ratio: 347 / 190; }
    .w-card--lg .w-card__body { gap: 22px; padding-top: 12px; }
    .w-card--lg .w-card__head { padding: 0 12px; font-size: 22px; }
    .w-card--lg .w-card__chips { gap: 8px; padding: 0 12px; }
    .w-card--lg .w-card__chip { font-size: 14px; }
    .w-card--lg .w-card__btn { margin: 0 12px; height: 54px; font-size: 22px; }
}


/* =====================================================================
   О чём нужно подумать / Как мы помогаем
   ===================================================================== */

.w-help { margin-top: var(--w-gap-l); }

/*
 * «Проблемы стройки — и как мы их решаем» (26.10, Анастасия): общий тумблер
 * убран, у каждой карточки свой переключатель «Проблема | Как у нас».
 * Решение — мятный акцент; проблема — приглушённый красный (--w-help-bad),
 * карточка чуть приглушена. Смена — плавная, без анимации при
 * prefers-reduced-motion. Телефон — лента со щелчком по карточке и точками.
 */
.w-help {
    /* Цвета сторон карточки: сплошной — активный сегмент, оттенок — текст плашки.
       Проблема — бордо (26.10, Анастасия выбрала «C, ярче»). */
    --w-help-bad: #B23A50;
    --w-help-bad-tint: #F2B8C2;
    /* Решение — фирменный зелёный (26.10, Анастасия выбрала «A»). */
    --w-help-good: #1D6047;
    --w-help-good-ink: #fff;
    --w-help-good-tag: color-mix(in srgb, #1D6047 35%, transparent);
    --w-help-good-tint: #fff;
}

.w-help__panel {
    position: relative;
    overflow: hidden;
    padding: 64px 40px 72px;
    border-radius: 10px;
    color: #fff;
    isolation: isolate;
}

.w-help__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.w-help__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, .3) 100%);
}

.w-help__title {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.w-help__accent { color: #fff; }

.w-help__lead { margin: 14px auto 36px; font-size: 16px; text-align: center; opacity: .9; }

.w-help__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.w-help__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 236px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
    background: rgba(40, 40, 40, .48);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    transition: background-color .35s ease, filter .35s ease;
}

/* Проблема — карточка приглушённее: решение остаётся главным. */
.w-help__card[data-state="problem"] { background: rgba(32, 32, 32, .56); }

.w-help__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/*
 * Иконки из макета разной пропорции (замок 21×30, документы 29×33…) и с
 * preserveAspectRatio="none": в квадрате 33×33 их растягивало — «поплыли
 * иконки» (26.10, Анастасия). Теперь глиф — белая маска с contain (пропорция
 * сохраняется) в круге цвета стороны (Анастасия выбрала вариант «A»).
 */
.w-help__badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--w-help-good);
    transition: background-color .35s ease;
}

/* Значок — белый глиф в круге цвета стороны: бордо у проблемы, зелёный у решения. */
.w-help__card[data-state="problem"] .w-help__badge { background: var(--w-help-bad); }

.w-help__icon {
    display: block;
    width: 24px;
    height: 24px;
    background: #fff;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.w-help__seg { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); }

.w-help__seg button {
    min-height: 36px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .82);
    font: 700 12px var(--w-font);
    cursor: pointer;
    transition: background-color .25s, color .25s;
}

.w-help__card[data-state="problem"] [data-help-show="problem"] { background: var(--w-help-bad); color: #fff; }
.w-help__card[data-state="solution"] [data-help-show="solution"] { background: var(--w-help-good); color: var(--w-help-good-ink); }

.w-help__tag {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--w-help-good-tag);
    color: var(--w-help-good-tint);
    font: 800 11px var(--w-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background-color .35s, color .35s;
}

.w-help__card[data-state="problem"] .w-help__tag { background: color-mix(in srgb, var(--w-help-bad) 25%, transparent); color: var(--w-help-bad-tint); }

/* Обе стороны в одной ячейке сетки: высота карточки — по большей, без скачков. */
.w-help__faces { display: grid; }

.w-help__face { grid-area: 1 / 1; transition: opacity .35s ease, transform .35s ease, visibility .35s; }

.w-help__card[data-state="problem"] .w-help__face--solution,
.w-help__card[data-state="solution"] .w-help__face--problem { visibility: hidden; opacity: 0; transform: translateY(6px); }

.w-help__card-title { margin: 0 0 6px; font-size: 17px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }

.w-help__card-text { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.3; opacity: .92; }

.w-help__dots { display: none; }

@media (max-width: 1439px) {
    .w-help__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
}

@media (max-width: 989px) {
    .w-help__panel { margin: 0 calc(-1 * var(--w-gutter)); padding: 42px 0 32px; border-radius: 0; }
    .w-help__title { max-width: 340px; padding: 0 16px; }
    .w-help__lead { margin: 12px auto 22px; padding: 0 16px; font-size: 15px; }

    .w-help__cards {
        display: flex;
        gap: 12px;
        max-width: none;
        padding: 0 var(--w-gutter) 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--w-gutter);
        scrollbar-width: none;
    }

    .w-help__cards::-webkit-scrollbar { display: none; }
    .w-help__card { flex: 0 0 min(82%, 340px); min-height: 250px; scroll-snap-align: center; }
    .w-help__badge { width: 40px; height: 40px; }
    .w-help__icon { width: 22px; height: 22px; }

    .w-help__dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
    .w-help__dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .45); transition: width .25s, background-color .25s; }
    .w-help__dots i.is-on { width: 18px; background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    .w-help__card,
    .w-help__face,
    .w-help__tag,
    .w-help__badge,
    .w-help__seg button,
    .w-help__dots i { transition: none; }
}

/* =====================================================================
   100+ семей (26.10, Анастасия, вариант C): фирменная зелёная плашка,
   слева белые заголовок и подзаголовок, справа три факта — крупные
   белые цифры Bebas, между ними тонкие белые линии. На телефоне факты
   друг под другом, линии — горизонтальные. Без иконок и без мяты.
   ===================================================================== */

.w-families {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr);
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-2xl) var(--space-3xl);
    border-radius: 28px;
    background: #1D6047;
    color: #fff;
}

body.w-page .w-families__title { margin: 0; color: #fff; font-size: 40px; text-align: left; }
.w-families__title span { display: block; }
.w-families__title span:first-child { white-space: nowrap; }
.w-families__lead { color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.5; }
.w-families__lead b { color: #fff; font-weight: 700; }

.w-families__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.w-families__step { min-width: 0; padding: 0 var(--space-l); }
.w-families__step:first-child { padding-left: 0; }
.w-families__step + .w-families__step { border-left: 1px solid rgba(255, 255, 255, .24); }
.w-families__num { display: block; font: 400 72px/1 var(--w-font-display); text-transform: uppercase; }
.w-families__item-title { margin-top: var(--space-m); font-size: 18px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.w-families__item-text { margin: var(--space-xs) 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.45; text-wrap: pretty; }

@media (max-width: 1279px) {
    .w-families { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-xl); }
    .w-families__num { font-size: 60px; }
}

@media (max-width: 1023px) {
    .w-families__num { font-size: 52px; }
}

@media (max-width: 767px) {
    .w-families { padding: var(--space-xl) var(--w-card-pad); border-radius: 20px; }
    body.w-page .w-families__title { font-size: clamp(30px, 8.6vw, 36px); }
    .w-families__title span:first-child { white-space: normal; }
    .w-families__lead { font-size: 16px; }
    .w-families__steps { grid-template-columns: minmax(0, 1fr); }
    .w-families__step { padding: var(--space-l) 0; }
    .w-families__step:first-child { padding-top: 0; }
    .w-families__step:last-child { padding-bottom: 0; }
    .w-families__step + .w-families__step { border-top: 1px solid rgba(255, 255, 255, .24); border-left: 0; }
    .w-families__num { font-size: 52px; }
    .w-families__item-title { margin-top: var(--space-xs); }
}

/* =====================================================================
   Мы понимаем
   ===================================================================== */

.w-understand {
    position: relative;
    padding: 70px 102px;
    border-radius: 10px;
    overflow: hidden;
    background: #282828;
    color: #fff;
    text-align: center;
}

.w-understand__texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .34;
    mix-blend-mode: color-burn;
    pointer-events: none;
}

.w-understand > :not(.w-understand__texture) { position: relative; }

.w-understand__title {
    max-width: 714px;
    margin: 0 auto;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.w-understand__accent { color: var(--w-green); }

.w-understand__lead {
    max-width: 644px;
    margin: 30px auto 0;
    color: rgba(255, 255, 255, .83);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

.w-understand__cards {
    display: flex;
    gap: 20px;
    margin-top: 70px;
}

.w-understand__card {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    height: 304px;
    padding: 46px 24px;
    border-radius: 10px;
    background: #fff;
    color: var(--w-ink);
}

.w-understand__card--accent { background: var(--w-green); color: #fff; }

.w-understand__icon { display: block; width: 60px; height: 60px; }

.w-understand__card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.w-understand__card-text {
    margin: -12px 0 0;
    color: #6e6e6e;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
}

.w-understand__card--accent .w-understand__card-text { color: #fff; }

@media (max-width: 1919px) {
    .w-understand { padding: 50px 80px; }
    .w-understand__lead { font-size: 16px; }
    .w-understand__cards { margin-top: 50px; }
    .w-understand__card { height: 270px; padding: 36px 20px; }
    .w-understand__card-title { font-size: 18px; }
}

@media (max-width: 1439px) {
    .w-understand { padding: 40px 30px; }
    .w-understand__cards { gap: 14px; margin-top: 36px; }
    .w-understand__card { height: 260px; padding: 30px 16px; gap: 18px; }
    .w-understand__icon { width: 50px; height: 50px; }
    .w-understand__card-title { font-size: 16px; }
    .w-understand__card-text { font-size: 14px; }
}

@media (max-width: 989px) {
    .w-understand { margin: 0 calc(-1 * var(--w-gutter)); padding: 40px 14px 30px; border-radius: 0; }
    .w-understand__lead { margin-top: 24px; font-size: 14px; }
    .w-understand__cards { flex-direction: column; gap: 16px; margin-top: 30px; }
    .w-understand__card { height: 251px; padding: 24px 20px; gap: 20px; }
    .w-understand__card-title { font-size: 20px; }
}

/* =====================================================================
   Ховеры главной. Кнопки наследуют .w-button из layout.css.
   ===================================================================== */

.w-popular__all {
    transition: color var(--w-ease), border-color var(--w-ease), background-color var(--w-ease),
        box-shadow var(--w-ease);
}

@media (hover: hover) {
    /* «Смотреть все»: текст и подчёркивание уходят в зелёный. */
    .w-popular__all:hover { color: var(--w-green); }
}

/* «Популярные» карточками каталога v2: широкая — на всю строку, ровный шаг сетки. */
.w-popular__item--wide { grid-column: 1 / -1; }
.w-popular__grid:has(.w-popular__item) { gap: 16px; }

/* ===== Правки главной 19.10.2026 (Катя) ===== */


/* =====================================================================
   Встреча в офисе (26.10, Анастасия, вариант 1): фото слева, список справа.
   Отступы — роли из layout.css (.ai/rules/spacing.md).
   ===================================================================== */
.w-meet {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
}

.w-meet__photo { display: block; width: 100%; height: 100%; min-height: 560px; object-fit: cover; }

.w-meet__body { padding: var(--space-3xl) var(--space-3xl) var(--space-3xl) 60px; color: var(--w-ink); text-align: left; }

body.w-page .w-meet__title { max-width: 560px; margin: 0; text-wrap: balance; }
body.w-page .w-meet__lead { max-width: 560px; margin-right: 0; margin-left: 0; color: #5f6b65; font-size: 18px; line-height: 1.45; }

.w-meet__list { display: grid; gap: var(--space-l); margin: 0; padding: 0; list-style: none; }
.w-meet__item { display: flex; gap: var(--space-m); }
.w-meet__check { display: grid; flex: none; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: #e3f3ea; color: #1D6047; }
.w-meet__item-title { font-size: 18px; font-weight: 700; line-height: 1.3; }
.w-meet__item-text { margin: var(--space-2xs) 0 0; color: #5f6b65; font-size: 16px; line-height: 1.45; text-wrap: pretty; }

body.w-page .w-button.w-meet__btn { margin-top: var(--space-xl); }
.w-meet__address { display: flex; align-items: flex-start; gap: var(--space-xs); margin: var(--space-m) 0 0; color: #5f6b65; font-size: 15px; font-weight: 500; }
.w-meet__address .w-icon { margin-top: 3px; color: #1D6047; }

@media (max-width: 1279px) {
    .w-meet { grid-template-columns: 1fr 1.2fr; }
    .w-meet__body { padding: var(--space-2xl) var(--space-xl); }
}

@media (max-width: 767px) {
    .w-meet { grid-template-columns: 1fr; border-radius: 20px; }
    .w-meet__photo { height: 220px; min-height: 0; }
    .w-meet__body { padding: var(--space-l) var(--w-card-pad) var(--space-xl); }
    body.w-page .w-meet__lead { font-size: 16px; }
    .w-meet__item-title { font-size: 17px; }
}

/* Новые баннеры главной на пробу (?hero=a / ?hero=b, 20.10). Правки Насти: дом выше —
   картинка на 18% выше блока и прижата низом, так из-под шапки уходит небо, а не дом;
   внизу под заголовком затемнение; плашки крупнее и на правом скате крыши. */
.w-hero--a::after,
.w-hero--b::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .62) 100%); }
@media (min-width: 990px) {
    .w-hero--a .w-hero__img,
    .w-hero--b .w-hero__img { top: -18%; height: 118%; object-position: 50% 100%; }
    .w-hero--a .w-hero__badges,
    .w-hero--b .w-hero__badges { left: 73%; top: 31%; }
    .w-hero--a .w-hero__badge,
    .w-hero--b .w-hero__badge { height: 46px; padding: 0 16px; font-size: 30px; }
}
@media (max-width: 989px) {
    .w-hero--a .w-hero__img,
    .w-hero--b .w-hero__img { object-position: 50% 50%; }
}

/* H1 главного экрана меняется плавно с шириной окна (Настя 20.10), без скачков 100 → 72 → 54 на брейкпоинтах:
   5,2vw = 100px на 1920, ~75 на 1440, ~67 на 1280. На телефоне — от ширины экрана. */
@media (min-width: 990px) {
    .w-hero__title { font-size: clamp(54px, 5.2vw, 130px); }
}
@media (max-width: 989px) {
    .w-hero__title { font-size: clamp(40px, 11.6vw, 72px); }
}
/* «Санкт-Петербурге» не рвётся по дефису (Настя 20.10): город целиком переносится на свою строку. */
.w-hero__city { white-space: nowrap; }
/* Телефон: плашки крупнее и над коньком, в небе, а не поверх фронтона (Настя 20.10). */
@media (max-width: 989px) {
    .w-hero--a .w-hero__badges,
    .w-hero--b .w-hero__badges { left: 50%; top: 22%; }
    .w-hero--a .w-hero__badge,
    .w-hero--b .w-hero__badge { height: 42px; padding: 0 16px; font-size: 27px; }
    .w-hero--a .w-hero__badge--green,
    .w-hero--b .w-hero__badge--green { height: 38px; }
}
/* Телефон: дом выше и ближе к центру — картинка на 14% выше блока и прижата низом, лишнее небо уходит под шапку. */
@media (max-width: 989px) {
    .w-hero--a .w-hero__img,
    .w-hero--b .w-hero__img { top: -14%; height: 114%; object-position: 47.5% 100%; }
    /* 47,5%: середина фронтона — 48% ширины кадра, при 50% дом на телефоне съезжал влево (28.10, Анастасия). */
    .w-hero--a .w-hero__badges,
    .w-hero--b .w-hero__badges { top: 15%; }
}

/* =====================================================================
   Первый экран: «Подобрать себе дом» (26.10, Анастасия, вариант 1).
   Тёмно-зелёная кнопка терялась на газоне — теперь белая пилюля 58/18
   с зелёным кружком справа, низом вровень с последней строкой заголовка;
   низ фото темнее, чтобы и заголовок, и кнопка читались. На телефоне —
   во всю ширину под заголовком (общее правило кнопок, layout.css).
   Селекторы с body.w-page и двойным классом — как у общих кнопок, иначе не перебить.
   ===================================================================== */
.w-hero::after,
.w-hero--a::after,
.w-hero--b::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, .3) 70%, rgba(0, 0, 0, .66) 100%); }

body.w-page .w-button.w-hero__button.w-hero__button {
    width: auto;
    height: 58px;
    margin-bottom: 6px;
    padding: 0 6px 0 28px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    color: var(--w-btn-ink);
    font-size: 18px;
}

body.w-page .w-button.w-hero__button.w-hero__button::after {
    width: 46px;
    height: 46px;
    background-color: var(--w-btn);
    background-image: var(--w-btn-arrow-white);
}

@media (hover: hover) {
    body.w-page .w-button.w-hero__button.w-hero__button:hover { background-color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .32); }
    body.w-page .w-button.w-hero__button.w-hero__button:hover::after { background-color: var(--w-btn-hover); }
}

@media (max-width: 767px) {
    body.w-page .w-button.w-hero__button.w-hero__button { width: 100%; height: 56px; margin-bottom: 0; font-size: 17px; }
    body.w-page .w-button.w-hero__button.w-hero__button::after { width: 44px; height: 44px; }
}