@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=Unbounded:wght@600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — urban-decision-lab profile v1.0.0
   All values sourced from DESIGN.md frontmatter.
   No raw hex outside these variables (except transparent helpers).
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* Typography */
    --dp-font-sans: 'Golos Text', Arial, sans-serif;
    --dp-font-display: 'Unbounded', Golos Text, sans-serif;

    /* Colors — core */
    --dp-canvas: #eef1ed;
    --dp-surface: #f9faf7;
    --dp-ink: #15211b;
    --dp-muted: #617068;
    --dp-line: #cad2cc;
    --dp-primary: #6d52ff;
    --dp-primary-strong: #5137e6;
    --dp-signal: #c9ff4d;
    --dp-coral: #ff6846;
    --dp-danger: #b82d3e;

    /* Colors — status */
    --dp-status-foundation-bg: #fff4cf;
    --dp-status-construction-bg: #e9e5ff;
    --dp-status-construction-text: #4630bd;
    --dp-status-completed-bg: #def3e5;
    --dp-status-completed-text: #12653e;

    /* Colors — flash / notification */
    --dp-flash-border: #8fb9a4;
    --dp-flash-accent: #168054;
    --dp-flash-bg: #e8f7ef;

    /* Colors — errors */
    --dp-error-border: #ffb4a4;
    --dp-error-bg: #fff1ec;

    /* Colors — favorite */
    --dp-favorite-bg: #ffe8e2;
    --dp-favorite-border: #ffb4a4;

    /* Colors — surface variants */
    --dp-footer-bg: #e2e7e2;
    --dp-table-header-bg: #e5eae6;
    --dp-table-hover: #f0f3f0;
    --dp-meta-bg: #e8ede9;
    --dp-search-clear-bg: #e9ede9;
    --dp-input-bg: #fbfcfa;
    --dp-building-cover-bg: #dfe6e0;

    /* Colors — media placeholders */
    --dp-card-media-start: #dbe2dc;
    --dp-card-media-end: #b7c7bd;
    --dp-placeholder-start: #dce4de;
    --dp-placeholder-end: #e8ede9;

    /* Colors — lead strip */
    --dp-lead-text: #b8c5be;
    --dp-lead-input-border: #607168;

    /* Colors — scrollbar */
    --dp-scrollbar-track: #dde3de;

    /* Colors — cabinet */
    --dp-data-label-color: #555;

    /* Transparent helpers (allowed per spec) */
    --dp-shadow: 10px 10px 0 rgba(21, 33, 27, .09);
    --dp-overlay: rgba(238, 241, 237, .92);
    --dp-grid-line: rgba(21, 33, 27, .055);
    --dp-board-line: rgba(255, 255, 255, .06);

    /* Radii */
    --dp-radius-control: 12px;
    --dp-radius-panel: 20px;
    --dp-radius-card: 24px;

    /* Spacing */
    --dp-space-compact: 8px;
    --dp-space-control: 12px;
    --dp-space-section: clamp(56px, 8vw, 104px);

    /* Layout */
    --dp-frame: 100%;
    --dp-gutter: max(12px, 2.4vw);
    --dp-content-gap: max(16px, 2.2vw);
    --dp-dock-space: 0px;

    /* Component tokens */
    --dp-btn-min-height: 44px;
    --dp-panel-border: 1px solid var(--dp-line);

    color-scheme: light;
    font-family: var(--dp-font-sans);
    scrollbar-color: var(--dp-primary) var(--dp-scrollbar-track);
    scrollbar-width: thin;
}

/* ═══════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--dp-canvas); color: var(--dp-ink); font-family: inherit; line-height: 1.55; }

/* Technical background grid — architectural drafting-board aesthetic */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(var(--dp-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--dp-grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: -1;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--dp-scrollbar-track); }
*::-webkit-scrollbar-thumb { background: var(--dp-primary); border: 2px solid var(--dp-scrollbar-track); border-radius: 999px; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
textarea { resize: vertical; }
:focus-visible { outline: 3px solid var(--dp-primary); outline-offset: 3px; }
[x-cloak] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ═══════════════════════════════════════════════════════════════════
   SHELL — header, footer, main
   ═══════════════════════════════════════════════════════════════════ */
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; }
.site-frame { width: min(calc(100% - 40px), var(--dp-frame)); margin-inline: auto; }

/* ── Header ── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--dp-ink);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header__row { min-height: 74px; display: flex; align-items: center; gap: 28px; }

.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--dp-radius-control);
    background: var(--dp-signal);
    color: var(--dp-ink);
    font-family: var(--dp-font-display);
    font-size: 14px;
    box-shadow: 5px 5px 0 var(--dp-primary);
}
.brand__name { font-family: var(--dp-font-display); font-size: 17px; letter-spacing: -.04em; color: var(--dp-surface); }
.brand__sub { display: block; color: rgba(255,255,255,.5); font-size: 11px; letter-spacing: .03em; }

.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a, .account-nav a, .account-nav button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 0;
    border-radius: var(--dp-radius-control);
    background: transparent;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.site-nav a:hover, .account-nav a:hover, .account-nav button:hover { background: rgba(255,255,255,.08); color: var(--dp-signal); }
.site-nav a[aria-current="page"] { color: var(--dp-signal); background: rgba(201,255,77,.1); }
.account-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.account-nav form { margin: 0; }
.account-nav .nav-primary { background: var(--dp-signal); color: var(--dp-ink); }

.menu-toggle { display: none; margin-left: auto; min-width: 44px; min-height: 44px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--dp-radius-control); background: transparent; color: white; cursor: pointer; }
.mobile-nav { display: none; padding-bottom: 14px; background: var(--dp-ink); }
.mobile-nav a { display: block; padding: 11px 12px; text-decoration: none; font-weight: 700; color: rgba(255,255,255,.75); }
.mobile-nav a:hover { color: var(--dp-signal); }

.flash { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--dp-flash-border); border-left: 6px solid var(--dp-flash-accent); border-radius: 14px; background: var(--dp-flash-bg); }

/* ── Footer ── */
.site-footer { margin-top: 60px; padding: 38px 0; border-top: var(--dp-panel-border); background: var(--dp-footer-bg); }
.site-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--dp-muted); font-size: 14px; }
.site-footer__links { display: flex; gap: 18px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid var(--dp-ink);
    border-radius: var(--dp-radius-control);
    background: var(--dp-surface);
    color: var(--dp-ink);
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--dp-ink); }
.btn-primary { border-color: var(--dp-primary); background: var(--dp-primary); color: white; }
.btn-primary:hover { background: var(--dp-primary-strong); }
.btn-signal { background: var(--dp-signal); }
.btn-quiet { border-color: var(--dp-line); }
.btn-sm { min-height: 44px; padding-inline: 13px; font-size: 14px; }
.btn-link { background: none; border: 0; color: var(--dp-primary-strong); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.btn-link:hover { color: var(--dp-primary); }

/* ═══════════════════════════════════════════════════════════════════
   HERO — asymmetric 7/5 grid, route-line signature
   ═══════════════════════════════════════════════════════════════════ */
.page-hero { position: relative; padding: clamp(54px,8vw,108px) 0 38px; overflow: hidden; }

/* Graphite board — the architect's working surface */
.page-hero--board {
    background: var(--dp-ink);
    color: var(--dp-surface);
}
.page-hero--board::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--dp-board-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--dp-board-line) 1px, transparent 1px);
    background-size: 32px 32px;
}
.page-hero--board .lede { color: rgba(255,255,255,.6); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.eyebrow::before {
    content: '';
    width: 34px;
    height: 4px;
    border-radius: 99px;
    background: var(--dp-signal);
    box-shadow: 12px 0 0 var(--dp-primary);
}
.display-title {
    max-width: 980px;
    margin: 0;
    font-family: var(--dp-font-display);
    font-size: clamp(38px,6.5vw,86px);
    line-height: .98;
    letter-spacing: -.065em;
}
.page-title {
    margin: 0;
    font-family: var(--dp-font-display);
    font-size: clamp(30px,5vw,58px);
    line-height: 1.03;
    letter-spacing: -.055em;
}
.lede { max-width: 680px; margin: 20px 0 0; color: var(--dp-muted); font-size: clamp(17px,2vw,21px); }

/* 7/5 asymmetric grid — the defining layout of urban-decision-lab */
.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,7fr) minmax(340px,5fr);
    gap: 42px;
    align-items: end;
}

/* Signature route line — lime SVG crossing the graphite board */
.route-line {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.route-line svg {
    width: 100%;
    height: 100%;
}

/* Route connector — visual link from hero board to results */
.hero-route-connector {
    width: 4px;
    height: 48px;
    margin: 0 auto;
    background: var(--dp-signal);
    border-radius: 99px;
    box-shadow: 0 0 16px rgba(201,255,77,.3);
}

/* ═══════════════════════════════════════════════════════════════════
   DECISION PANEL & FORMS
   ═══════════════════════════════════════════════════════════════════ */
.decision-panel, .panel {
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-panel);
    background: var(--dp-surface);
    box-shadow: var(--dp-shadow);
}
.decision-panel { padding: 24px; }
.decision-panel h2 { margin: 0 0 6px; font-family: var(--dp-font-display); font-size: 20px; letter-spacing: -.035em; }
.decision-panel > p { margin: 0 0 20px; color: var(--dp-muted); }

/* Decision panel on graphite board — embedded control panel, not floating card */
.page-hero--board .decision-panel {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    box-shadow: none;
    color: var(--dp-surface);
}
.page-hero--board .decision-panel h2 { color: var(--dp-surface); }
.page-hero--board .decision-panel > p { color: rgba(255,255,255,.6); }
.page-hero--board .field input,
.page-hero--board .field select {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
    color: var(--dp-surface);
}
.page-hero--board .field input::placeholder { color: rgba(255,255,255,.35); }
.page-hero--board .field input:focus,
.page-hero--board .field select:focus {
    border-color: var(--dp-signal);
    outline: 3px solid rgba(201,255,77,.2);
}
.page-hero--board .field label { color: rgba(255,255,255,.7); }
.page-hero--board .check-field label { color: rgba(255,255,255,.7); }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.field { display: grid; gap: 7px; }
.field--wide { grid-column: 1/-1; }
.field label { font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea, .catalog-filters input, .catalog-filters select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-control);
    background: white;
    color: var(--dp-ink);
}
.field input:focus, .field select:focus, .catalog-filters input:focus, .catalog-filters select:focus {
    border-color: var(--dp-primary);
    outline: 3px solid rgba(109,82,255,.18);
}
.check-field { display: flex; align-items: center; gap: 9px; min-height: 46px; }
.check-field input { width: 19px; height: 19px; accent-color: var(--dp-primary); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.error-text { color: var(--dp-danger); font-size: 13px; }
.form-group { display: grid; gap: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════════ */
.section { padding: clamp(48px,7vw,88px) 0; }
.section--tight { padding-top: 20px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-title { margin: 0; font-family: var(--dp-font-display); font-size: clamp(24px,3vw,38px); letter-spacing: -.045em; }
.section-kicker { margin-top: 8px; color: var(--dp-muted); }
.section-link { font-weight: 700; color: var(--dp-primary-strong); }

/* ═══════════════════════════════════════════════════════════════════
   BUILDING CARDS
   ═══════════════════════════════════════════════════════════════════ */
.buildings-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.building-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-card);
    background: var(--dp-surface);
    transition: transform .18s ease, box-shadow .18s ease;
}
.building-card:hover { transform: translateY(-4px); box-shadow: var(--dp-shadow); }
.building-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg,var(--dp-card-media-start),var(--dp-card-media-end)); }
.building-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.building-card:hover .building-card__media img { transform: scale(1.025); }
.building-card__link { color: inherit; text-decoration: none; }
.building-card__body { padding: 18px; }
.building-card__top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.card-title { margin: 0; font-size: 20px; line-height: 1.16; }
.card-developer, .card-city, .card-rooms, .card-area, .card-deadline { margin: 5px 0 0; color: var(--dp-muted); font-size: 14px; }
.card-price { margin: 18px 0 0; font-family: var(--dp-font-display); font-size: 17px; font-variant-numeric: tabular-nums; }
.card-status { display: inline-flex; padding: 5px 9px; border: var(--dp-panel-border); border-radius: 99px; font-size: 12px; font-weight: 700; }
.status-foundation { background: var(--dp-status-foundation-bg); }
.status-construction { background: var(--dp-status-construction-bg); color: var(--dp-status-construction-text); }
.status-completed { background: var(--dp-status-completed-bg); color: var(--dp-status-completed-text); }
.favorite-btn { position: relative; z-index: 2; min-height: 44px; padding: 0 12px; border: var(--dp-panel-border); border-radius: 99px; background: white; color: var(--dp-ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.favorite-btn.favorited { background: var(--dp-favorite-bg); border-color: var(--dp-favorite-border); }
.favorite-btn:focus-visible { outline: 3px solid var(--dp-primary); outline-offset: 3px; }
.card-image-placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg,var(--dp-placeholder-start) 0 12px,var(--dp-placeholder-end) 12px 24px); }
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; }
.card-compare { font-size: 13px; margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════
   PROCESS STEPS
   ═══════════════════════════════════════════════════════════════════ */
.process-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: var(--dp-panel-border); }
.process-step { padding: 24px; border-right: var(--dp-panel-border); }
.process-step:last-child { border-right: 0; }
.process-number { font-family: var(--dp-font-display); font-size: 34px; color: var(--dp-primary); font-variant-numeric: tabular-nums; }
.process-step h3 { margin: 26px 0 8px; }
.process-step p { margin: 0; color: var(--dp-muted); }

/* ═══════════════════════════════════════════════════════════════════
   LEAD STRIP
   ═══════════════════════════════════════════════════════════════════ */
.lead-strip { display: grid; grid-template-columns: 1fr minmax(320px,520px); gap: 36px; padding: 32px; border-radius: var(--dp-radius-card); background: var(--dp-ink); color: white; }
.lead-strip h2 { margin: 0; font-family: var(--dp-font-display); font-size: clamp(26px,4vw,44px); letter-spacing: -.05em; }
.lead-strip p { color: var(--dp-lead-text); }
.lead-form { display: grid; gap: 13px; }
.lead-form .form-group { display: grid; gap: 6px; }
.lead-form label { font-size: 13px; font-weight: 700; }
.lead-form input { min-height: 46px; padding: 10px 12px; border: 1px solid var(--dp-lead-input-border); border-radius: var(--dp-radius-control); background: var(--dp-input-bg); color: var(--dp-ink); }

/* ═══════════════════════════════════════════════════════════════════
   CATALOG
   ═══════════════════════════════════════════════════════════════════ */
.catalog-layout { padding: 58px 0 90px; }
.catalog-intro { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; margin-bottom: 28px; }
.catalog-split { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
.catalog-filters { position: sticky; top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; border: var(--dp-panel-border); border-radius: var(--dp-radius-panel); background: var(--dp-surface); }
.catalog-filters .field--wide, .catalog-filters .check-group { grid-column: 1 / -1; }
.catalog-filters .field:has(.check-group) { grid-column: 1 / -1; }
.catalog-filters .field-price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.search-control { position: relative; }
.search-control input { padding-right: 52px; }
.search-control input[type='search']::-webkit-search-cancel-button, .search-control input[type='search']::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-clear { position: absolute; right: 1px; top: 1px; width: 44px; height: 44px; border: 0; border-radius: 11px; background: var(--dp-search-clear-bg); cursor: pointer; }
.catalog-actions { grid-column: 1/-1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 8px; }
.catalog-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; padding: 14px 16px; border: 1px solid var(--dp-error-border); border-left: 6px solid var(--dp-coral); border-radius: 14px; background: var(--dp-error-bg); }
.catalog-error[hidden] { display: none; }
.catalog-error p { margin: 0; }

/* Filter chips — active filter summary */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--dp-primary);
    border-radius: 99px;
    background: rgba(109, 82, 255, .06);
    color: var(--dp-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .16s ease;
}
.filter-chip:hover { background: rgba(109, 82, 255, .12); }
.filter-chip__label { color: var(--dp-muted); }
.filter-chip__remove { font-size: 16px; line-height: 1; color: var(--dp-muted); }
.filter-chip:hover .filter-chip__remove { color: var(--dp-danger); }
.filter-chip--reset { border-color: var(--dp-line); background: transparent; color: var(--dp-muted); }
.filter-chip--reset:hover { background: var(--dp-search-clear-bg); color: var(--dp-ink); }

/* Checkbox group for rooms multi-select */
.check-group { display: flex; flex-wrap: wrap; gap: 6px; }
.check-group .check-field {
    min-height: 36px;
    gap: 5px;
    padding: 0 10px;
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-control);
    background: white;
    cursor: pointer;
    font-size: 14px;
    transition: border-color .16s ease, background .16s ease;
}
.check-group .check-field:has(input:checked) {
    border-color: var(--dp-primary);
    background: rgba(109, 82, 255, .06);
}
.check-group .check-field input { width: auto; accent-color: var(--dp-primary); }

.catalog-results { position: relative; }
.catalog-results[aria-busy='true'] { opacity: .58; }
.results-status { margin: 0 0 18px; color: var(--dp-muted); }
.empty-state { grid-column: 1/-1; padding: 50px 24px; border: 1px dashed var(--dp-line); border-radius: var(--dp-radius-panel); text-align: center; background: rgba(249,250,247,.7); }
.pagination { margin-top: 28px; }
.pagination nav > div:first-child { display: none; }
.hx-indicator { display: none; }
.catalog-results[aria-busy='true'] .hx-indicator { display: block; position: absolute; inset: 0; background: var(--dp-overlay); z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════
   DEVELOPERS
   ═══════════════════════════════════════════════════════════════════ */
.developers-layout { padding: 58px 0 90px; }
.developers-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.developer-card {
    display: block;
    padding: 22px;
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-card);
    background: var(--dp-surface);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.developer-card:hover { transform: translateY(-4px); box-shadow: var(--dp-shadow); }
.developer-card__header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.developer-card__name { margin: 0; font-size: 20px; line-height: 1.16; }
.developer-card__count { display: inline-flex; align-items: center; padding: 5px 10px; border: var(--dp-panel-border); border-radius: 99px; background: var(--dp-status-construction-bg); color: var(--dp-status-construction-text); font-size: 13px; font-weight: 700; white-space: nowrap; }
.developer-page { padding: 48px 0 90px; }

/* ═══════════════════════════════════════════════════════════════════
    LOCATIONS — district & metro pages
    ═══════════════════════════════════════════════════════════════════ */
.location-page { padding: 48px 0 90px; }
.card-district, .card-metro { margin: 5px 0 0; color: var(--dp-muted); font-size: 14px; }
.card-metro { display: inline-flex; align-items: center; gap: 6px; }
.card-metro::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dp-primary);
    flex-shrink: 0;
}

@media (max-width: 980px) {
    .developers-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .developers-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   BUILDING DETAIL
   ═══════════════════════════════════════════════════════════════════ */
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; color: var(--dp-muted); font-size: 14px; }
.building-page { padding: 48px 0 90px; }
.building-hero { display: grid; grid-template-columns: minmax(0,7fr) minmax(330px,5fr); gap: 28px; align-items: stretch; }
.building-cover { min-height: 430px; overflow: hidden; border-radius: var(--dp-radius-card); background: var(--dp-building-cover-bg); }
.building-cover img { width: 100%; height: 100%; object-fit: cover; }
.building-summary { padding: 28px; }
.building-summary h1 { margin: 0; font-family: var(--dp-font-display); font-size: clamp(30px,4vw,52px); line-height: 1; letter-spacing: -.055em; }
.building-summary .developer, .building-summary .address, .building-summary .description { color: var(--dp-muted); }
.building-summary .developer { margin-top: 16px; font-weight: 700; }
.building-summary .address { margin-top: 5px; }
.building-summary .description { margin-top: 22px; }
.building-summary .price-from { margin: 24px 0 0; font-family: var(--dp-font-display); font-size: 22px; font-variant-numeric: tabular-nums; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.meta-item { padding: 7px 10px; border-radius: 99px; background: var(--dp-meta-bg); font-size: 13px; }
.building-route { height: 12px; margin: 32px 0; border-radius: 99px; }
.building-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
.building-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 18px; }
.lots-section { margin-top: 54px; }
.table-shell { overflow-x: auto; border: var(--dp-panel-border); border-radius: var(--dp-radius-panel); background: var(--dp-surface); scrollbar-gutter: stable; }
.lots-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.lots-table th, .lots-table td { padding: 15px 16px; text-align: left; border-bottom: var(--dp-panel-border); font-variant-numeric: tabular-nums; }
.lots-table th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: var(--dp-table-header-bg); }
.lots-table tr:last-child td { border-bottom: 0; }
.lots-table tbody tr:hover { background: var(--dp-table-hover); }
.quick-lead-panel { margin-top: 32px; padding: 28px; }
.quick-lead-panel h2 { margin: 0 0 18px; font-family: var(--dp-font-display); letter-spacing: -.04em; }

/* ═══════════════════════════════════════════════════════════════════
    ARCHITECT BOARD — building detail as decision board
    ═══════════════════════════════════════════════════════════════════ */
.board-layout {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0 20px;
    padding-left: 0;
}
.board-route {
    position: relative;
    grid-column: 1;
    grid-row: 1 / -1;
    width: 4px;
    margin: 0 auto;
    background: var(--dp-signal);
    border-radius: 99px;
    box-shadow: 0 0 16px rgba(201, 255, 77, .3);
}
.board-route::before,
.board-route::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    border-radius: 99px;
    background: var(--dp-signal);
}
.board-route::before { top: -24px; height: 24px; }
.board-route::after { bottom: -24px; height: 24px; }
.board-block {
    position: relative;
    grid-column: 2;
    padding: 32px 0;
}
.board-block + .board-block {
    border-top: none;
}
.board-anchor {
    position: absolute;
    left: -34px;
    top: 36px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dp-signal);
    border: 3px solid var(--dp-canvas);
    box-shadow: 0 0 0 2px var(--dp-signal);
    z-index: 2;
}
.board-anchor__label {
    position: absolute;
    left: -140px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dp-muted);
    white-space: nowrap;
}
.board-heading {
    margin: 0 0 20px;
    font-family: var(--dp-font-display);
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -.04em;
}
.board-card {
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-panel);
    background: var(--dp-surface);
    box-shadow: var(--dp-shadow);
    padding: 24px;
}

/* Mortgage block — board-style inline calculator link */
.mortgage-board {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 24px;
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-panel);
    background: var(--dp-surface);
    box-shadow: var(--dp-shadow);
}
.mortgage-board__info { display: grid; gap: 6px; }
.mortgage-board__rate { font-family: var(--dp-font-display); font-size: 28px; color: var(--dp-primary); }
.mortgage-board__note { color: var(--dp-muted); font-size: 14px; }

/* Passport facts — compact grid */
.passport-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.passport-item {
    padding: 14px;
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-control);
    background: var(--dp-surface);
}
.passport-item dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dp-muted); margin-bottom: 4px; }
.passport-item dd { margin: 0; font-size: 17px; font-weight: 600; }

/* Sort controls for lots table */
.sort-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.sort-controls a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-control);
    background: var(--dp-surface);
    color: var(--dp-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.sort-controls a[aria-current="true"],
.sort-controls a:hover {
    border-color: var(--dp-primary);
    color: var(--dp-primary-strong);
    background: rgba(109, 82, 255, .06);
}
.sort-controls .sort-arrow { font-size: 11px; }

@media (max-width: 980px) {
    .board-layout { grid-template-columns: 24px 1fr; gap: 0 12px; }
    .board-anchor { left: -18px; width: 14px; height: 14px; }
    .board-anchor__label { display: none; }
    .mortgage-board { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .board-layout { grid-template-columns: 16px 1fr; gap: 0 8px; }
    .board-anchor { left: -12px; width: 10px; height: 10px; }
    .board-block { padding: 20px 0; }
    .board-card { padding: 18px; }
    .passport-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
    .passport-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   SCENARIO / MORTGAGE PREVIEW
   ═══════════════════════════════════════════════════════════════════ */
.scenario-preview, .mortgage-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 26px; }
.scenario-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mortgage-preview { margin-top: 28px; }
.mortgage-card { padding: 18px; border: var(--dp-panel-border); border-radius: 18px; background: var(--dp-surface); }
.mortgage-rate { font-family: var(--dp-font-display); font-size: 22px; color: var(--dp-primary); font-variant-numeric: tabular-nums; }
.scenario-preview-empty, .lots-none { color: var(--dp-muted); }

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════════════════════════════ */
.auth-page { display: flex; justify-content: center; padding: clamp(48px,7vw,88px) 0; }
.auth-card { width: 100%; max-width: 420px; padding: 32px; border: var(--dp-panel-border); border-radius: var(--dp-radius-panel); background: var(--dp-surface); box-shadow: var(--dp-shadow); }
.auth-title { margin: 0 0 24px; font-family: var(--dp-font-display); font-size: 28px; letter-spacing: -.04em; text-align: center; }
.auth-error { padding: 12px 16px; margin-bottom: 20px; border: 1px solid var(--dp-error-border); border-left: 6px solid var(--dp-coral); border-radius: 14px; background: var(--dp-error-bg); color: var(--dp-danger); font-size: 14px; }
.auth-card .field { margin-bottom: 16px; }
.auth-card .form-actions { margin-top: 24px; }
.auth-card .form-actions .btn { width: 100%; }
.auth-switch { margin-top: 20px; text-align: center; font-size: 14px; color: var(--dp-muted); }
.auth-switch a { color: var(--dp-primary-strong); font-weight: 600; }

/* Password field with toggle */
.password-field { position: relative; display: flex; }
.password-field input { flex: 1; padding-right: 80px; }
.password-toggle { position: absolute; right: 0; top: 0; height: 100%; padding: 0 12px; border: 0; border-radius: 0 var(--dp-radius-control) var(--dp-radius-control) 0; background: transparent; color: var(--dp-primary-strong); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.password-toggle:hover { text-decoration: underline; }

/* Accessible focus for auth */
.auth-card :focus-visible { outline: 3px solid var(--dp-primary); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════
   CABINET
   ═══════════════════════════════════════════════════════════════════ */
.cabinet-page { padding: clamp(48px, 7vw, 88px) 0 90px; }
.cabinet-page__heading {
    margin: 0 0 32px;
    font-family: var(--dp-font-display);
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -.05em;
}
.cabinet-board { padding-left: 0; }
.cabinet-board .board-block { padding: 28px 0; }
.cabinet-board .board-heading { color: var(--dp-ink); }
.cabinet-board .empty-state { max-width: 480px; }
.cabinet-board .empty-state .btn { margin-top: 16px; }
.cabinet-board .buildings-grid { margin-top: 0; }
.cabinet-board .table-shell { margin-top: 0; }
.cabinet-table { width: 100%; border-collapse: collapse; }
.cabinet-table th, .cabinet-table td { padding: 12px 16px; text-align: left; border-bottom: var(--dp-panel-border); }
.cabinet-table th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: var(--dp-table-header-bg); }
.cabinet-table tr:last-child td { border-bottom: 0; }
.cabinet-table tbody tr:hover { background: var(--dp-table-hover); }
.cabinet-table a { color: inherit; text-decoration: none; }
.cabinet-table a:hover { color: var(--dp-primary-strong); }
.user-data-table { width: 100%; }
.user-data-table td:first-child { font-weight: 600; color: var(--dp-data-label-color); padding-right: 2rem; }

/* ═══════════════════════════════════════════════════════════════════
   MORTGAGE APPLICATION
   ═══════════════════════════════════════════════════════════════════ */
.mortgage-apply-page { /* container for Alpine x-data */ }
.mortgage-apply-summary { /* status container */ }
.mortgage-apply-next { /* next-step links */ }
.mortgage-application-errors { /* error partial wrapper */ }

/* ═══════════════════════════════════════════════════════════════════
   MORTGAGE STATUS
   ═══════════════════════════════════════════════════════════════════ */
.status-card { /* status result container */ }
.status-next-step { /* next-step note */ }
.status-actions { /* action buttons row */ }
.badge { /* generic badge */ }

/* ═══════════════════════════════════════════════════════════════════
    COMPARE — side-by-side building comparison
    ═══════════════════════════════════════════════════════════════════ */
.compare-page { padding: clamp(48px, 7vw, 88px) 0 90px; }
.compare-title { margin-bottom: 24px; }
.compare-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; }
.compare-table-shell {
    overflow-x: auto;
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-panel);
    background: var(--dp-surface);
}
.compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}
.compare-table th, .compare-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: var(--dp-panel-border);
    vertical-align: top;
}
.compare-table th {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--dp-table-header-bg);
}
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover { background: var(--dp-table-hover); }
.compare-label-col, .compare-label {
    min-width: 130px;
    max-width: 160px;
    font-weight: 700;
    font-size: 14px;
    color: var(--dp-muted);
    white-space: nowrap;
    position: sticky;
    left: 0;
    background: var(--dp-surface);
    z-index: 2;
}
.compare-table thead .compare-label-col { background: var(--dp-table-header-bg); }
.compare-table tbody tr:hover .compare-label { background: var(--dp-table-hover); }
.compare-col { min-width: 200px; }
.compare-name {
    display: block;
    font-family: var(--dp-font-display);
    font-size: 17px;
    letter-spacing: -.03em;
    color: var(--dp-ink);
    text-decoration: none;
    margin-bottom: 10px;
}
.compare-name:hover { color: var(--dp-primary-strong); }
.compare-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; }
.compare-cell { font-size: 15px; }
.compare-hint { margin: -12px 0 20px; color: var(--dp-muted); font-size: 14px; }
.compare-na { color: var(--dp-muted); font-style: italic; }

.cabinet-favorites-toolbar { margin-bottom: 16px; }

@media (max-width: 640px) {
    .compare-label-col, .compare-label {
        position: sticky;
        left: 0;
        min-width: 110px;
        max-width: 130px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
    LOT DETAIL PAGE
    ═══════════════════════════════════════════════════════════════════ */
.lot-page { padding: 48px 0 90px; }

/* ═══════════════════════════════════════════════════════════════════
    JOURNAL / ARTICLES
   ═══════════════════════════════════════════════════════════════════ */
.news-layout { padding: 48px 0 90px; }
.news-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin-top: 32px; }
.news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-card);
    background: var(--dp-surface);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--dp-shadow); }
.news-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg,var(--dp-card-media-start),var(--dp-card-media-end)); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.news-card:hover .news-card__media img { transform: scale(1.025); }
.news-card__body { flex: 1; padding: 18px; }
.news-card__date { display: block; margin-bottom: 8px; color: var(--dp-muted); font-size: 13px; }
.news-card__title { margin: 0; font-size: 20px; line-height: 1.2; }
.news-card__excerpt { margin: 10px 0 0; color: var(--dp-muted); font-size: 14px; }
.news-card__route { height: 6px; border-radius: 99px; }
.article-page { padding: 48px 0 90px; }
.article-header { max-width: 720px; }
.article-date { display: block; margin-bottom: 12px; color: var(--dp-muted); font-size: 14px; }
.article-title { margin: 0; font-family: var(--dp-font-display); font-size: clamp(30px,5vw,52px); line-height: 1.05; letter-spacing: -.05em; }
.article-excerpt { margin: 18px 0 0; color: var(--dp-muted); font-size: clamp(17px,2vw,21px); }
.article-cover { margin-top: 32px; border-radius: var(--dp-radius-card); overflow: hidden; max-height: 480px; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-body { max-width: 720px; margin-top: 36px; font-size: 17px; line-height: 1.7; }
.article-body p { margin: 0 0 20px; }
.article-route { height: 12px; margin: 48px 0 0; border-radius: 99px; }
@media (max-width: 980px) {
    .news-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .news-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   LEADS TABLE & BADGES
   ═══════════════════════════════════════════════════════════════════ */
.leads-table { width: 100%; border-collapse: collapse; }
.leads-table th, .leads-table td { padding: 12px 16px; text-align: left; border-bottom: var(--dp-panel-border); }
.leads-table th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: var(--dp-table-header-bg); }
.leads-table tr:last-child td { border-bottom: 0; }
.lead-status-badge { display: inline-flex; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .site-nav, .account-nav { display: none; }
    .menu-toggle { display: inline-grid; place-items: center; }
    .mobile-nav { display: block; }
    .hero-grid, .building-hero, .lead-strip { grid-template-columns: 1fr; }
    .buildings-grid, .scenario-preview, .mortgage-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .catalog-split, .catalog-filters { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .site-frame { width: min(calc(100% - 24px), var(--dp-frame)); }
    .brand__sub { display: none; }
    .display-title { font-size: clamp(36px,12vw,58px); }
    .form-grid, .buildings-grid, .scenario-preview, .mortgage-cards, .process-grid, .catalog-filters, .building-gallery { grid-template-columns: 1fr; }
    .process-step { border-right: 0; border-bottom: var(--dp-panel-border); }
    .process-step:last-child { border-bottom: 0; }
    .catalog-intro { grid-template-columns: 1fr; }
    .catalog-actions { justify-content: stretch; flex-direction: column; }
    .catalog-actions .btn { width: 100%; }
    .lead-strip, .building-summary, .decision-panel { padding: 22px; }
    .site-footer__row { align-items: flex-start; flex-direction: column; }
    .page-hero--board .route-line svg { display: none; }
    .page-hero--board .route-line::after {
        content: '';
        display: block;
        position: absolute;
        left: 24px;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--dp-signal);
        border-radius: 99px;
        box-shadow: 0 0 16px rgba(201,255,77,.3);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGES — static content pages
   ═══════════════════════════════════════════════════════════════════ */
.page-content { padding: clamp(48px, 7vw, 88px) 0 90px; }
.page-content__inner { max-width: 720px; }
.page-content h1 {
    margin: 0 0 24px;
    font-family: var(--dp-font-display);
    font-size: clamp(30px, 5vw, 52px);
    line-height: 1.05;
    letter-spacing: -.05em;
}
.page-content h2 {
    margin: 40px 0 12px;
    font-family: var(--dp-font-display);
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -.04em;
}
.page-content p {
    margin: 0 0 18px;
    color: var(--dp-muted);
    font-size: 17px;
    line-height: 1.7;
}
.page-content a { color: var(--dp-primary-strong); font-weight: 600; }
.page-content ul {
    margin: 0 0 18px;
    padding-left: 20px;
    color: var(--dp-muted);
    font-size: 17px;
    line-height: 1.7;
}
.page-content li { margin-bottom: 6px; }
.page-route { height: 12px; margin: 48px 0 0; border-radius: 99px; }

/* Contacts page */
.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}
.contacts-card {
    padding: 24px;
    border: var(--dp-panel-border);
    border-radius: var(--dp-radius-panel);
    background: var(--dp-surface);
}
.contacts-card__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dp-muted);
}
.contacts-card__value {
    font-size: 17px;
    line-height: 1.5;
}
@media (max-width: 640px) {
    .contacts-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.site-footer__links { flex-wrap: wrap; }

@media (max-width: 640px) {
    .site-footer__links { gap: 10px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
    GALLERY & DOCUMENTS — building detail
    ═══════════════════════════════════════════════════════════════════ */
.building-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
.building-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 18px; }
.documents-list { list-style: none; padding: 0; margin: 0; }
.documents-item { border-bottom: var(--dp-panel-border); }
.documents-item:last-child { border-bottom: 0; }
.documents-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    text-decoration: none;
    color: inherit;
    transition: color .16s ease;
}
.documents-link:hover { color: var(--dp-primary-strong); }
.documents-icon { font-size: 20px; flex-shrink: 0; }
.documents-title { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
    ADMIN
    ═══════════════════════════════════════════════════════════════════ */
.site-footer__contacts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--dp-muted); }

/* ═══════════════════════════════════════════════════════════════════
    LANDING — SEO collection pages /catalog/{segment}
    ═══════════════════════════════════════════════════════════════════ */
.landing-layout { padding: 40px 0 90px; }
.landing-intro { margin-bottom: 28px; }
.landing-intro .page-title { margin-bottom: 12px; }
.landing-intro .lede { color: var(--dp-muted); max-width: 640px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; font-size: 13px; color: var(--dp-muted); }
.breadcrumbs a { color: var(--dp-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--dp-primary-strong); text-decoration: underline; }
.breadcrumbs span[aria-current] { color: var(--dp-ink); }
.landing-results { position: relative; }
.landing-related { margin-top: 56px; }
.landing-related .section-title { margin-bottom: 20px; }
.landing-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.landing-related-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.landing-related-card:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--dp-ink); }
.landing-related-label { font-weight: 600; }
.landing-related-count { font-size: 13px; color: var(--dp-muted); }

/* ═══════════════════════════════════════════════════════════════════
    ACCESSIBILITY & MOTION
    ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
}

@media (forced-colors: active) {
    :root { scrollbar-color: auto; }
    .btn, .panel, .building-card, .decision-panel { border: 1px solid CanvasText; }
}


/* ═══════════════════════════════════════════════════════════════════
   HOME — вход в свайп, города, «ближайшие сдачи»
   ═══════════════════════════════════════════════════════════════════ */
.hero-grid--swipe { align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-on-board { background: transparent; border-color: rgba(255,255,255,.35); color: var(--dp-surface); }
.btn-on-board:hover { box-shadow: 4px 4px 0 var(--dp-signal); border-color: var(--dp-signal); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 28px 40px; margin: 40px 0 0; padding: 0; }
.hero-stats div { display: grid; gap: 2px; }
.hero-stats dt { font-family: var(--dp-font-display); font-size: clamp(24px,3vw,36px); line-height: 1; color: var(--dp-signal); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.hero-stats dd { margin: 0; color: rgba(255,255,255,.6); font-size: 14px; }

.hero-deck { position: relative; display: block; width: min(100%, 360px); aspect-ratio: 3 / 3.7; justify-self: center; text-decoration: none; color: var(--dp-surface); }
.hero-deck__card {
    position: absolute; inset: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--dp-radius-card);
    overflow: hidden;
    background: #223028;
    box-shadow: 12px 12px 0 rgba(0,0,0,.35);
    transform: translate(calc(var(--i) * 10px), calc(var(--i) * -14px)) rotate(calc(var(--i) * 3deg)) scale(calc(1 - var(--i) * .04));
    transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.hero-deck:hover .hero-deck__card { transform: translate(calc(var(--i) * 18px), calc(var(--i) * -14px)) rotate(calc(var(--i) * 5deg)) scale(calc(1 - var(--i) * .04)); }
.hero-deck:hover .hero-deck__card[style*="--i: 0"] { transform: translate(-6px, -4px) rotate(-2deg); }
.hero-deck__card img { width: 100%; height: 100%; object-fit: cover; }
.hero-deck__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,33,27,0) 45%, rgba(21,33,27,.92) 100%); }
.hero-deck__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 4px; padding: 18px 20px; }
.hero-deck__name { font-family: var(--dp-font-display); font-size: 20px; line-height: 1.1; letter-spacing: -.03em; }
.hero-deck__meta { font-size: 14px; color: rgba(255,255,255,.75); }
.hero-deck__price { color: var(--dp-signal); font-weight: 700; }
.hero-deck__hint { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 6px 11px; border: 1px solid var(--dp-ink); border-radius: 99px; background: var(--dp-signal); color: var(--dp-ink); font-size: 12px; font-weight: 700; transform: rotate(4deg); }

.city-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.city-card { display: grid; gap: 6px; padding: 24px; box-shadow: none; transition: transform .18s ease, box-shadow .18s ease; }
.city-card:hover { transform: translateY(-4px); box-shadow: var(--dp-shadow); }
.city-card__name { margin: 0; font-family: var(--dp-font-display); font-size: 24px; letter-spacing: -.04em; }
.city-card__meta { margin: 0; color: var(--dp-muted); font-size: 14px; }
.city-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   MORTGAGE — программы банков
   ═══════════════════════════════════════════════════════════════════ */
.mortgage-layout { padding: 58px 0 90px; }
.mortgage-filters { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 12px; align-items: end; margin: 28px 0 26px; padding: 20px; border: var(--dp-panel-border); border-radius: var(--dp-radius-panel); background: var(--dp-surface); }
.mortgage-filters__cta { display: flex; align-items: end; }
.mortgage-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.mortgage-program { display: grid; gap: 8px; padding: 22px; box-shadow: none; }
.mortgage-program__bank { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dp-muted); }
.mortgage-program__name { margin: 0; font-size: 19px; line-height: 1.2; }
.mortgage-program__rate { margin: 6px 0 0; font-family: var(--dp-font-display); font-size: 34px; line-height: 1; color: var(--dp-primary); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.mortgage-program__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px; }
.mortgage-program__facts dt { font-size: 12px; color: var(--dp-muted); }
.mortgage-program__facts dd { margin: 2px 0 0; font-weight: 700; }
.mortgage-program .btn { justify-self: start; }

@media (max-width: 980px) {
    .hero-grid--swipe { grid-template-columns: 1fr; }
    .hero-deck { width: min(100%, 300px); }
    .city-grid, .mortgage-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mortgage-filters { grid-template-columns: 1fr 1fr; }
    .mortgage-filters__cta { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .city-grid, .mortgage-grid, .mortgage-filters { grid-template-columns: 1fr; }
    .hero-stats { gap: 18px 24px; }
    .hero-deck { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   LOT CARDS — квартиры (страница ЖК, раздел «Квартиры», подборка)
   ═══════════════════════════════════════════════════════════════════ */
.lots-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.lot-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: var(--dp-panel-border); border-radius: var(--dp-radius-panel); background: var(--dp-surface); transition: transform .18s ease, box-shadow .18s ease; }
.lot-card:hover { transform: translateY(-3px); box-shadow: var(--dp-shadow); }
.lot-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: white; border-bottom: var(--dp-panel-border); }
.lot-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.lot-card__media img.lot-card__cover { object-fit: cover; padding: 0; }
.lot-card__noplan { color: var(--dp-muted); font-size: 13px; }
.lot-card__body { display: grid; gap: 6px; padding: 14px 16px 16px; align-content: start; }
.lot-card__title { margin: 0; font-size: 17px; font-weight: 700; }
.lot-card__title a { text-decoration: none; }
.lot-card__building { margin: 0; color: var(--dp-muted); font-size: 13px; }
.lot-card__building a { color: var(--dp-primary-strong); text-decoration: none; }
.lot-card__price { margin: 4px 0 0; font-family: var(--dp-font-display); font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lot-card__price small { margin-left: 8px; font-family: var(--dp-font-sans); font-size: 12px; font-weight: 500; color: var(--dp-muted); letter-spacing: 0; }
.lot-card__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lot-card__facts li { padding: 3px 8px; border: var(--dp-panel-border); border-radius: 8px; background: var(--dp-meta-bg); font-size: 12px; }
.lot-card__actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

/* Shared property cards: photographic cover, concise facts, clear next action. */
.property-card { display: flex; flex-direction: column; box-shadow: 0 3px 0 rgba(21,33,27,.04); }
.property-card:hover { border-color: var(--dp-ink); box-shadow: 6px 8px 0 rgba(21,33,27,.09); }
.property-card > .building-card__link { display: block; }
.property-card .building-card__media { aspect-ratio: 4 / 3; }
.property-card .building-card__media::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(21,33,27,.4)); pointer-events: none; }
.property-card__badges { position: absolute; z-index: 1; inset: 14px; display: flex; flex-direction: column; align-items: start; justify-content: space-between; padding-right: 125px; pointer-events: none; }
.property-card__badges .card-status { border-color: transparent; border-radius: 8px; }
.property-card__city { max-width: 100%; padding: 5px 9px; border-radius: 8px; background: var(--dp-surface); color: var(--dp-ink); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.property-card__open { position: absolute; z-index: 1; right: 14px; bottom: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(249,250,247,.65); border-radius: 50%; background: rgba(21,33,27,.3); color: var(--dp-surface); font-size: 24px; }
.property-card .building-card__body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.property-card .card-title { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.property-card .card-developer { margin-top: 5px; font-size: 12px; }
.property-card__location { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 13px 0 0; font-size: 13px; }
.property-card__location > span:last-child:not(.property-card__metro) { color: var(--dp-muted); }
.property-card__metro { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 2px; border-radius: 50%; background: var(--dp-status-construction-bg); color: var(--dp-primary-strong); font-size: 11px; font-weight: 700; }
.property-card__facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.property-card__facts:empty { display: none; }
.property-card__facts > span { padding: 5px 9px; border: var(--dp-panel-border); border-radius: 8px; font-size: 12px; }
.property-card .card-price { margin-top: 20px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; letter-spacing: -.045em; }
.property-card .card-deadline { margin-bottom: 16px; font-size: 12px; }
.property-card .card-actions { margin-top: auto; padding-top: 16px; border-top: var(--dp-panel-border); flex-wrap: wrap; }
.property-card .card-actions .btn { flex: 1; }
.property-card__save { position: absolute; z-index: 3; top: 12px; right: 12px; }
.property-card__save .favorite-btn { display: inline-flex; align-items: center; padding: 0 10px; min-height: 44px; border-radius: 12px; font-size: 12px; }
.property-card__save .favorite-btn:hover { border-color: var(--dp-primary); }
.lot-card { border-radius: var(--dp-radius-card); }
.lot-card__media { background: var(--dp-input-bg); }
.lot-card__media img { padding: 44px 28px 34px; mix-blend-mode: multiply; }
.lot-card__media img.lot-card__cover { padding: 0; mix-blend-mode: normal; }
.lot-card__format { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 5px 10px; border: var(--dp-panel-border); border-radius: 8px; background: var(--dp-surface); color: var(--dp-ink); font-size: 12px; font-weight: 600; }
.lot-card__media-label { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 4px 16px; background: var(--dp-meta-bg); color: var(--dp-muted); font-size: 11px; }
.lot-card__media-label > span { font-size: 20px; color: var(--dp-ink); }
.lot-card__body { padding: 20px; gap: 10px; }
.lot-card__title { font-size: 20px; letter-spacing: -.025em; }
.lot-card__building { font-size: 13px; }
.lot-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 21px; letter-spacing: -.045em; line-height: 1.4; }
.lot-card__price small { margin: 0; }
.lot-card__actions { margin-top: auto; padding-top: 14px; }
.lot-card__actions .btn { flex: 1; }
.lot-card__facts { gap: 7px; }

.site-header__row { gap: 18px; }
.site-nav a { padding-inline: 10px; font-size: 14px; white-space: nowrap; }
.brand { flex-shrink: 0; }
.account-nav { flex-wrap: wrap; }
@media (min-width: 981px) and (max-width: 1320px) {
    .site-header__row { flex-wrap: wrap; gap: 6px 18px; padding-block: 10px; }
    .site-nav { order: 3; flex: 1 1 100%; justify-content: space-between; }
    .site-nav a { padding-inline: 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .property-card, .property-card .building-card__media img, .lot-card { transition: none; }
}

.rooms-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rooms-tab { min-height: 40px; padding: 0 14px; border: var(--dp-panel-border); border-radius: 99px; background: var(--dp-surface); font-weight: 600; font-size: 14px; cursor: pointer; }
.rooms-tab span { margin-left: 6px; color: var(--dp-muted); font-weight: 500; }
.rooms-tab.is-active { background: var(--dp-ink); color: var(--dp-signal); border-color: var(--dp-ink); }
.rooms-tab.is-active span { color: rgba(255,255,255,.7); }

/* Фото дома — горизонтальная лента, а не стена из двадцати картинок */
.gallery-strip { display: flex; gap: 12px; margin-top: 22px; padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.gallery-strip img { flex: 0 0 auto; width: min(360px, 70vw); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; border: var(--dp-panel-border); scroll-snap-align: start; }
.passport-item--plan { grid-column: 1 / -1; }
.passport-item--plan img { max-width: 420px; border: var(--dp-panel-border); border-radius: 12px; background: white; }

.flats-layout { padding: 58px 0 90px; }
.flats-layout .lede a { color: var(--dp-primary-strong); }

@media (max-width: 980px) {
    .catalog-split { grid-template-columns: 1fr; }
    .catalog-filters { position: static; }
    .lots-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .lots-grid { grid-template-columns: 1fr; }
    .catalog-filters { grid-template-columns: 1fr; }
}