/*
Theme Name: Bau
Theme URI: https://bau.ge/
Author: Baumeister
Author URI: https://bau.ge/
Description: Baumeister development theme - simple single-colour (#2B73A3) site with an interactive building, floor and apartment browser for the Gldani Central residential project.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunrise
*/

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ── Brand palette ────────────────────────────────────────────────
       One colour carries the whole site: Baumeister blue #2B73A3.
       Everything else is a tint, a shade or a neutral mixed from it.
       Nothing is black — the darkest ink is a deep blue slate. */
    --bau-blue: #2b73a3;              /* brand blue — buttons, links, header */
    --bau-blue-dark: #1e5678;         /* hover / pressed */
    --bau-blue-deep: #2b73a3;         /* deepest shade — headings, dark bands */
    --bau-blue-soft: #dcebf5;         /* tinted surfaces */
    --bau-blue-wash: #eff6fb;         /* section backgrounds */

    --color-primary: #2b73a3;         /* deep blue (was slate-navy) */
    --color-secondary: #f2f7fb;       /* cool blue paper */
    --color-paper: #eaf2f8;           /* alternating sections */
    --color-cream: #ffffff;           /* body bg */
    --color-accent: #2b73a3;          /* brand blue */
    --color-accent-dark: #1e5678;     /* hover / depth */
    --color-accent-light: #dcebf5;    /* tints, subtle backgrounds */
    --color-accent-glow: rgba(43, 115, 163, 0.16);
    --color-text: #2b73a3;            /* headings — deep blue, never black */
    --color-text-light: #4c6e85;      /* body copy */
    --color-text-muted: #86a2b4;      /* muted labels */
    --color-white: #ffffff;
    --color-line: #d7e4ee;            /* light blue-grey border */
    --color-line-soft: rgba(43, 115, 163, 0.07);
    --color-line-strong: rgba(43, 115, 163, 0.18);
    --color-overlay: rgba(43, 115, 163, 0.6);

    /* Typography — Roboto for Latin, Noto Sans Georgian for Georgian glyphs
       (Roboto ships no Georgian coverage, so it falls through to Noto).
       bau.css redefines both with the same stack; keep the two in step. */
    --font-heading: 'Roboto', 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Roboto', 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layered shadows — tinted with the brand blue instead of neutral grey */
    --shadow-xs: 0 1px 2px rgba(43, 115, 163, 0.05);
    --shadow-sm: 0 2px 6px rgba(43, 115, 163, 0.07), 0 1px 2px rgba(43, 115, 163, 0.04);
    --shadow-md: 0 8px 24px rgba(43, 115, 163, 0.1), 0 2px 6px rgba(43, 115, 163, 0.05);
    --shadow-lg: 0 16px 48px rgba(43, 115, 163, 0.14), 0 4px 12px rgba(43, 115, 163, 0.06);
    --shadow-xl: 0 32px 80px rgba(43, 115, 163, 0.16), 0 8px 24px rgba(43, 115, 163, 0.08);

    /* Tracking presets */
    --tracking-tight: -0.03em;
    --tracking-tighter: -0.05em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;
    --tracking-wider: 0.12em;
    --tracking-widest: 0.18em;

    /* Timing curves */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --transition: all 0.3s ease;
    --transition-smooth: 0.4s var(--ease-out);

    /* Fixed header height — inner pages reserve this much room. */
    --bau-header-h: 120px;   /* taller bar so the logo can be bigger */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "kern", "liga", "calt";
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--color-accent);
    color: var(--color-white);
}

::-moz-selection {
    background: var(--color-accent);
    color: var(--color-white);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== INNER PAGES — HORIZONTAL SCROLL LAYOUT ===== */

/* Page-horizontal wrapper: fills viewport, scrolls horizontally with snap.
   Applied to <main> elements on all non-front-page templates.
   Header (.site-header), .bottom-navigation, and .social-fixed stay
   fixed on top; sections flow horizontally beneath them. */
.page-horizontal {
    position: relative;
    width: 100%;
    display: block;
}

.page-section {
    width: 100%;
    padding: 80px 60px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.page-section + .page-section {
    padding-top: 32px;
}

.page-section > *:first-child {
    margin-top: 0;
}

.page-section--center {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.page-section--content {
    max-width: 100vw;
}

.page-section__inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .page-section {
        padding: 64px 24px 32px;
    }
    .page-section + .page-section {
        padding-top: 24px;
    }
}

@media (max-width: 600px) {
    .page-section {
        padding: 56px 16px 24px;
    }
    .page-section + .page-section {
        padding-top: 20px;
    }
}

/* ===== SINGLE BUILDING (T5.1) ===== */

.single-building {
    padding-top: 100px;
}

/* Hero */
.building-hero {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.building-hero__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.building-hero__title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.building-hero__address {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.building-hero__address svg {
    flex-shrink: 0;
    color: var(--color-accent);
}

.building-hero__description {
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: 32px;
}

.building-hero__stats {
    display: flex;
    gap: 32px;
}

.building-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.building-hero__stat-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.building-hero__stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-light);
    margin-top: 4px;
}

/* Building Map Section */
.building-map-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 24px 60px;
}

.building-map-section__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 32px;
}

#building-map-root {
    min-height: 200px;
}

/* Floor List (no-JS fallback / SEO) */
.building-floors-list {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

.building-floors-list__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 24px;
}

.building-floors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.floor-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border: 1px solid #e5e5e0;
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.floor-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.floor-card__number {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.floor-card__count {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.floor-card__status {
    display: flex;
    align-items: center;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot--available {
    background-color: #2b73a3;
}

.status-dot--sold {
    background-color: #e53935;
}

.floor-card--sold {
    opacity: 0.6;
}

/* Building Content */
.building-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

.building-content__inner {
    line-height: 1.9;
    color: var(--color-text);
}

/* Responsive */
@media (max-width: 768px) {
    .building-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 16px;
    }

    .building-hero__title {
        font-size: 1.8rem;
    }

    .building-hero__stats {
        gap: 24px;
    }

    .building-hero__stat-value {
        font-size: 1.5rem;
    }

    .building-map-section,
    .building-floors-list,
    .building-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .building-floors-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== 404 PAGE (T7.7) ===== */

.page-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2rem;
}

.page-404__inner {
    text-align: center;
    max-width: 480px;
}

.page-404__code {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 0.5rem;
    color: var(--color-accent, #c9a96e);
}

.page-404__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--color-text, #333);
}

.page-404__desc {
    font-size: 1rem;
    color: var(--color-text-light, #777);
    margin: 0 0 2rem;
}

.page-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.page-404__btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s;
    color: #fff;
    background: var(--color-accent, #c9a96e);
}

.page-404__btn:hover {
    opacity: 0.85;
}

.page-404__btn--secondary {
    color: var(--color-text, #333);
    background: transparent;
    border: 1px solid var(--color-border, #e0e0e0);
}

.page-404__btn--secondary:hover {
    background: var(--color-secondary, #f5f5f0);
    opacity: 1;
}

/* ===== HORIZONTAL LAYOUT — FINAL OVERRIDES =====
   Ensures .page-section geometry wins over any existing template class
   (.building-hero, .floor-hero, .archive-apartment, etc.) that originally
   used max-width + margin: auto for vertical-scroll centering.
   These rules use higher specificity (main.page-horizontal > .page-section)
   to override the per-template rules in both style.css and frontend.css. */

main.page-horizontal {
    padding: 0;
    margin: 0;
    max-width: none;
}

main.page-horizontal > .page-section {
    width: 100%;
    margin: 0;
    padding: 80px 60px 40px;
    box-sizing: border-box;
}

main.page-horizontal > .page-section + .page-section {
    padding-top: 32px;
}

/* Override grid-based hero sections: convert from 2-col grid to
   centered single-column within the 100vw section. Map/filter sections
   get a centered inner block. */
main.page-horizontal > .page-section.building-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

main.page-horizontal > .page-section.building-hero > * {
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

main.page-horizontal > .page-section.building-map-section,
main.page-horizontal > .page-section.floor-map-section,
main.page-horizontal > .page-section.building-floors-list,
main.page-horizontal > .page-section.floor-apartments-list,
main.page-horizontal > .page-section.apartment-details,
main.page-horizontal > .page-section.apartment-plan,
main.page-horizontal > .page-section.apartment-gallery,
main.page-horizontal > .page-section.apartment-description,
main.page-horizontal > .page-section.building-content,
main.page-horizontal > .page-section.archive-apartment__filter-section {
    display: flex;
    flex-direction: column;
}

main.page-horizontal > .page-section.building-map-section > *,
main.page-horizontal > .page-section.floor-map-section > *,
main.page-horizontal > .page-section.building-floors-list > *,
main.page-horizontal > .page-section.floor-apartments-list > *,
main.page-horizontal > .page-section.apartment-details > *,
main.page-horizontal > .page-section.apartment-plan > *,
main.page-horizontal > .page-section.apartment-gallery > *,
main.page-horizontal > .page-section.apartment-description > *,
main.page-horizontal > .page-section.building-content > *,
main.page-horizontal > .page-section.archive-apartment__filter-section > * {
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Hero sections that center their content */
main.page-horizontal > .page-section.archive-apartment__header,
main.page-horizontal > .page-section.archive-building__header,
main.page-horizontal > .page-section.apartment-hero,
main.page-horizontal > .page-section.floor-hero {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 16px;
}

main.page-horizontal > .page-section.apartment-hero > *,
main.page-horizontal > .page-section.floor-hero > * {
    max-width: 1440px;
    width: 100%;
}

main.page-horizontal > .page-section.archive-apartment__filter-section #apartment-filter-root {
    min-height: calc(100vh - 220px);
}

/* Navigation visibility on inner pages: header has white text suited
   for dark hero background; inner page sections have white backgrounds,
   so invert nav colors for legibility. */
body:not(.home) .site-header .site-logo img.logo-img {
    filter: brightness(0);
}

body:not(.home) .bottom-navigation .nav-menu li a {
    color: rgba(0, 0, 0, 0.75);
}

body:not(.home) .bottom-navigation .nav-menu li a:hover,
body:not(.home) .bottom-navigation .nav-menu li.current-menu-item a {
    color: var(--color-primary);
}

body:not(.home) .social-fixed a {
    color: rgba(0, 0, 0, 0.75);
}

body:not(.home) .menu-toggle span {
    background-color: var(--bau-blue);
}

@media (max-width: 900px) {
    main.page-horizontal > .page-section {
        padding: 100px 24px 80px;
    }
}

@media (max-width: 600px) {
    main.page-horizontal > .page-section {
        padding: 90px 16px 70px;
    }
}

/* ===== INNER PAGES — DESIGN REFINEMENTS ===== */

/* 2) Hero image constraints — prevent oversized images dominating 100vh */
main.page-horizontal > .page-section.building-hero .building-hero__image {
    max-width: 640px;
    max-height: 44vh;
    margin: 0 auto;
}

main.page-horizontal > .page-section.building-hero .building-hero__image img {
    width: 100%;
    height: 100%;
    max-height: 44vh;
    object-fit: cover;
    border-radius: 5px;
}

main.page-horizontal > .page-section.apartment-plan .apartment-plan__image-wrap {
    max-width: 1440px;
    max-height: 60vh;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 5px;
}

main.page-horizontal > .page-section.apartment-plan .apartment-plan__image {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}

/* 3) Compact breadcrumbs (they eat ~48px of scarce 100vh) */
main.page-horizontal .floor-breadcrumb,
main.page-horizontal .apartment-breadcrumb,
main.page-horizontal .archive-apartment__breadcrumb {
    padding: 0 0 0.75rem;
    margin: 0 auto 1rem;
    font-size: 0.8125rem;
    max-width: 1440px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

main.page-horizontal .floor-breadcrumb__list,
main.page-horizontal .apartment-breadcrumb__list,
main.page-horizontal .archive-apartment__breadcrumb-list {
    padding: 0;
    margin: 0;
}

/* 4) Grid density — reduce minmax so more cards fit per row in 100vw */
main.page-horizontal .building-floors-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

main.page-horizontal .floor-card {
    padding: 1rem 0.875rem;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
}

main.page-horizontal .floor-apartments-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.875rem;
}

main.page-horizontal .apartment-card {
    padding: 0.875rem 1rem;
}

main.page-horizontal .apartment-card__header {
    margin-bottom: 0.5rem;
}

/* 5) Archive Building Grid + Building Card (missing styles) */
.archive-building__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.building-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.building-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.building-card__image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.building-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.building-card__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.building-card__address {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    margin: 0;
}

main.page-horizontal .archive-building__grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* 6) Apartment-filter React island — adapt for horizontal 100vw×100vh */
main.page-horizontal > .page-section.archive-apartment__filter-section {
    overflow: hidden;
}

main.page-horizontal > .page-section.archive-apartment__filter-section #apartment-filter-root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

main.page-horizontal .af-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    max-width: 100%;
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 220px);
}

main.page-horizontal .af-sidebar-wrap {
    width: 100%;
}

/* The sticky filter action bar is a mobile-sheet-only element; hidden where the
   sidebar renders inline (desktop/tablet). Re-shown in the ≤720 sheet block. */
.af-sidebar-actions {
    display: none;
}

main.page-horizontal .af-sidebar {
    position: sticky;
    top: 85px;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 0.5rem;
}

main.page-horizontal .af-main {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    overflow: hidden;
}

main.page-horizontal .af-sort-bar {
    flex: 0 0 auto;
}

main.page-horizontal .af-grid-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.5rem;
}

main.page-horizontal .af-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

main.page-horizontal .af-grid .apartment-card__image {
    aspect-ratio: 4 / 3;
    margin-bottom: 0.5rem;
}

/* Branded placeholder for archive cards without a plan image — matches the
   similar-apartment cards: plum→cyan gradient + floor-plan grid texture. */
.apartment-card__placeholder {
    position: relative;
    aspect-ratio: 4 / 3;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--bau-blue) 0%, var(--bau-blue-deep) 100%);
    color: var(--color-accent);
}

.apartment-card__placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(43, 115, 163, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 115, 163, 0.07) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

.apartment-card__placeholder svg {
    position: relative;
    z-index: 1;
    opacity: 0.85;
    filter: drop-shadow(0 2px 10px rgba(43, 115, 163, 0.35));
}

.apartment-card__placeholder-num {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.72);
}

main.page-horizontal .af-load-more {
    padding: 1rem 0 0.5rem;
}

/* 7) Archive header (title-only section) — less top padding, more room */
main.page-horizontal > .page-section.archive-apartment__header,
main.page-horizontal > .page-section.archive-building__header {
    gap: 12px;
}

main.page-horizontal > .page-section.archive-apartment__header .archive-apartment__breadcrumb {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    border: none;
    padding: 0;
}

main.page-horizontal > .page-section.archive-apartment__header {
    position: relative;
}

main.page-horizontal > .page-section.archive-apartment__header .archive-apartment__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
}

main.page-horizontal > .page-section.archive-building__header .archive-building__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
}

main.page-horizontal > .page-section.archive-apartment__header .archive-apartment__count {
    font-size: 1rem;
    color: var(--color-text-light);
    letter-spacing: 0.02em;
}

/* 8) Single-building / floor / apartment hero — tighten typography */
main.page-horizontal > .page-section.building-hero {
    gap: 24px;
}

main.page-horizontal > .page-section.building-hero .building-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 0.5rem;
}

main.page-horizontal > .page-section.building-hero .building-hero__description {
    font-size: 0.9375rem;
    line-height: 1.65;
    margin-bottom: 1rem;
    max-width: 640px;
}

main.page-horizontal > .page-section.building-hero .building-hero__stats {
    gap: 2.5rem;
}

main.page-horizontal > .page-section.apartment-hero .apartment-hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-family: var(--font-heading);
    margin: 0;
}

main.page-horizontal > .page-section.apartment-hero .apartment-hero__header {
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

main.page-horizontal > .page-section.apartment-hero .apartment-hero__price {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--color-accent);
    font-weight: 600;
    margin: 0;
}

main.page-horizontal > .page-section.floor-hero .floor-hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-family: var(--font-heading);
}

main.page-horizontal > .page-section.floor-hero .floor-hero__stats {
    gap: 2.5rem;
}

/* 9) Section titles — more space, gravitas */
main.page-horizontal > .page-section .building-map-section__title,
main.page-horizontal > .page-section .floor-map-section__title,
main.page-horizontal > .page-section .building-floors-list__title,
main.page-horizontal > .page-section .floor-apartments-list__title,
main.page-horizontal > .page-section .apartment-details__title,
main.page-horizontal > .page-section .apartment-plan__title,
main.page-horizontal > .page-section .apartment-gallery__title,
main.page-horizontal > .page-section .apartment-description__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-align: center;
}

/* 10) Map sections — allow to fill more of viewport */
main.page-horizontal > .page-section.building-map-section,
main.page-horizontal > .page-section.floor-map-section {
    justify-content: flex-start;
}

main.page-horizontal > .page-section.building-map-section #building-map-root,
main.page-horizontal > .page-section.floor-map-section #floor-map-root {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 11) Horizontal scroll hint — animated chevron on the right edge */
body:not(.home) .page-horizontal::after {
    content: '';
    position: fixed;
    right: 24px;
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    pointer-events: none;
    z-index: 1001;
    transform: translateY(-50%);
    display: none;
}

body.has-scrollable-sections:not(.home)::after {
    content: '';
    position: fixed;
    right: 28px;
    top: 50%;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    z-index: 1002;
    animation: sunriseScrollHint 1.6s ease-in-out infinite;
    opacity: 0.6;
}

body.has-scrollable-sections.has-scrolled:not(.home)::after {
    opacity: 0;
    transition: opacity 0.4s ease;
}

@keyframes sunriseScrollHint {
    0%, 100% {
        transform: translateY(-50%) translateX(0) rotate(45deg);
    }
    50% {
        transform: translateY(-50%) translateX(8px) rotate(45deg);
    }
}

/* 12) Section progress dots (bottom-center, mirrors fixed bottom nav) */
.horizontal-progress {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 1001;
    pointer-events: none;
}

body.home .horizontal-progress {
    display: none;
}

.horizontal-progress__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    transition: background 0.3s ease, transform 0.3s ease;
}

.horizontal-progress__dot.is-active {
    background: var(--color-accent);
    transform: scale(1.3);
}

/* 13) Page-content long-form (page.php, single.php) readability */
main.page-horizontal > .page-section .page-content {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text);
}

main.page-horizontal > .page-section .section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    text-align: center;
    letter-spacing: -0.01em;
}

main.page-horizontal > .page-section .section-label {
    text-align: center;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

/* 14) 404 page centered and generous */
main.page-horizontal.page-404 {
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
}

main.page-horizontal.page-404 > .page-section .page-404__code {
    font-size: clamp(6rem, 16vw, 12rem);
    line-height: 1;
    margin-bottom: 1rem;
}

main.page-horizontal.page-404 > .page-section .page-404__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: 1rem;
}

main.page-horizontal.page-404 > .page-section .page-404__desc {
    font-size: 1.0625rem;
    margin-bottom: 2.5rem;
}

/* 15) Apartment gallery grid compact */
main.page-horizontal > .page-section.apartment-gallery .apartment-gallery__grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

/* 16) Responsive: tighter padding on small screens */
@media (max-width: 720px) {
    main.page-horizontal > .page-section {
        padding: 100px 20px 40px;
    }

    main.page-horizontal > .page-section.archive-apartment__header .archive-apartment__breadcrumb {
        position: static;
        transform: none;
    }
}

/* ======================================================================
   PREMIUM DESIGN POLISH
   Editorial typography, layered shadows, refined interactions.
   ====================================================================== */

/* --- Global typographic refinement ---------------------------------- */

main.page-horizontal {
    color: var(--color-text);
}

main.page-horizontal h1,
main.page-horizontal h2,
main.page-horizontal h3,
main.page-horizontal .section-title {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
}

main.page-horizontal .page-content p {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--color-text);
    margin: 0 0 1.25em;
}

main.page-horizontal .page-content p:first-of-type::first-letter {
    font-family: var(--font-heading);
    font-size: 3.6em;
    line-height: 0.9;
    float: left;
    margin: 0.05em 0.1em 0 -0.02em;
    color: var(--color-accent);
    font-weight: 600;
}

main.page-horizontal .page-content a {
    color: var(--color-primary);
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 2px;
    transition: background-size var(--transition-smooth), color var(--transition-smooth);
}

main.page-horizontal .page-content a:hover {
    color: var(--color-accent-dark);
    background-size: 100% 2px;
}

/* --- Section-label / eyebrow text (editorial labels) ----------------- */

main.page-horizontal .section-label,
main.page-horizontal .archive-apartment__count {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

/* --- Unified "accent line" divider used throughout ------------------ */

main.page-horizontal > .page-section.archive-apartment__header::after,
main.page-horizontal > .page-section.archive-building__header::after {
    content: '';
    display: block;
    width: 64px;
    height: 1px;
    background: var(--color-accent);
    margin: 24px auto 0;
}

/* --- Premium breadcrumb treatment ----------------------------------- */

main.page-horizontal .floor-breadcrumb__list,
main.page-horizontal .apartment-breadcrumb__list,
main.page-horizontal .archive-apartment__breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.75rem;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

main.page-horizontal .floor-breadcrumb__item,
main.page-horizontal .apartment-breadcrumb__item,
main.page-horizontal .archive-apartment__breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

main.page-horizontal .floor-breadcrumb__item + .floor-breadcrumb__item::before,
main.page-horizontal .apartment-breadcrumb__item + .apartment-breadcrumb__item::before,
main.page-horizontal .archive-apartment__breadcrumb-item + .archive-apartment__breadcrumb-item::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--color-line-strong);
    display: inline-block;
}

main.page-horizontal .floor-breadcrumb__item a,
main.page-horizontal .apartment-breadcrumb__item a,
main.page-horizontal .archive-apartment__breadcrumb-item a {
    color: var(--color-text-light);
    transition: color var(--transition-smooth);
}

main.page-horizontal .floor-breadcrumb__item a:hover,
main.page-horizontal .apartment-breadcrumb__item a:hover,
main.page-horizontal .archive-apartment__breadcrumb-item a:hover {
    color: var(--color-accent-dark);
}

main.page-horizontal .floor-breadcrumb__item--current,
main.page-horizontal .apartment-breadcrumb__item--current,
main.page-horizontal .archive-apartment__breadcrumb-item--current {
    color: var(--color-primary);
    font-weight: 500;
}

/* --- Progress indicator: editorial bars (not dots) ------------------ */

.horizontal-progress {
    gap: 14px;
    bottom: 44px;
}

.horizontal-progress__dot {
    width: 24px;
    height: 2px;
    border-radius: 0;
    background: var(--color-line-strong);
    transition: width var(--transition-smooth), background var(--transition-smooth);
}

.horizontal-progress__dot.is-active {
    background: var(--color-accent);
    transform: none;
    width: 56px;
}

/* --- Scroll-hint chevron refinement --------------------------------- */

body.has-scrollable-sections:not(.home)::after {
    width: 10px;
    height: 10px;
    border-top-width: 1.5px;
    border-right-width: 1.5px;
    opacity: 0.4;
    right: 36px;
}

/* --- Custom scrollbar (webkit) -------------------------------------- */

main.page-horizontal::-webkit-scrollbar {
    height: 4px;
}

main.page-horizontal::-webkit-scrollbar-track {
    background: transparent;
}

main.page-horizontal::-webkit-scrollbar-thumb {
    background: var(--color-line-strong);
    border-radius: 0;
    transition: background 0.3s ease;
}

main.page-horizontal::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

main.page-horizontal > .page-section::-webkit-scrollbar,
.af-sidebar::-webkit-scrollbar,
.af-grid-wrap::-webkit-scrollbar {
    width: 4px;
}

main.page-horizontal > .page-section::-webkit-scrollbar-thumb,
.af-sidebar::-webkit-scrollbar-thumb,
.af-grid-wrap::-webkit-scrollbar-thumb {
    background: var(--color-line);
    border-radius: 0;
}

main.page-horizontal > .page-section::-webkit-scrollbar-thumb:hover,
.af-sidebar::-webkit-scrollbar-thumb:hover,
.af-grid-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--color-line-strong);
}

/* --- Status badge: premium dot + text treatment --------------------- */

main.page-horizontal .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--color-line-strong);
    border-radius: 2px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text);
    line-height: 1;
}

main.page-horizontal .status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

main.page-horizontal .status-badge--available {
    color: #1f5779;
    border-color: rgba(43, 115, 163, 0.3);
    background: rgba(43, 115, 163, 0.05);
}

main.page-horizontal .status-badge--sold {
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(220, 38, 38, 0.05);
}

/* --- Number / price tabular figures --------------------------------- */

main.page-horizontal .apartment-hero__price,
main.page-horizontal .apartment-card__price,
main.page-horizontal .building-hero__stat-value,
main.page-horizontal .floor-hero__stat-value,
main.page-horizontal .apartment-details__value,
main.page-horizontal .apartment-card__number,
main.page-horizontal .apartment-card__details {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* --- Apartment hero: dramatic price + divider ----------------------- */

main.page-horizontal > .page-section.apartment-hero .apartment-hero__header {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 0;
}

main.page-horizontal > .page-section.apartment-hero .apartment-hero__title {
    font-size: clamp(3rem, 7vw, 5.5rem);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

main.page-horizontal > .page-section.apartment-hero .status-badge {
    margin-top: 0.5rem;
}

main.page-horizontal > .page-section.apartment-hero .apartment-hero__price {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.25rem);
    color: var(--color-primary);
    font-weight: 600;
    margin: 1.5rem 0 0;
    position: relative;
    padding-top: 1.5rem;
    letter-spacing: var(--tracking-tight);
}

main.page-horizontal > .page-section.apartment-hero .apartment-hero__price::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1px;
    background: var(--color-accent);
}

/* --- Apartment card: refined shadows, price display ----------------- */

main.page-horizontal .apartment-card {
    border: 1px solid var(--color-line);
    border-radius: 2px;
    background: var(--color-white);
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-smooth);
    box-shadow: var(--shadow-xs);
}

/* Downloadable floor-plan badge — small corner button on each apartment card.
   Unscoped so it also works on the apartments archive (React) grid. */
.apartment-card { position: relative; }
.apartment-card__pdf {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-accent-dark);
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.apartment-card__pdf:hover,
.apartment-card__pdf:focus-visible {
    background: var(--color-accent);
    color: #fff;
    transform: translateY(-1px);
    outline: none;
}

main.page-horizontal a.apartment-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

main.page-horizontal .apartment-card__number {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
}

main.page-horizontal .apartment-card__details {
    color: var(--color-text-light);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}

main.page-horizontal .apartment-card__price {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-line);
    margin-top: auto;
}

/* --- Building card: image zoom + gradient overlay ------------------- */

.building-card {
    border-radius: 2px;
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.building-card__image-wrap,
.building-card a:first-child,
.building-card__image {
    overflow: hidden;
}

.building-card {
    position: relative;
    overflow: hidden;
}

.building-card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 240px;
    background: linear-gradient(to top, rgba(15, 15, 15, 0.25) 0%, transparent 40%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-smooth);
    z-index: 1;
}

.building-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.building-card:hover::after {
    opacity: 1;
}

.building-card__image {
    transition: transform 1s var(--ease-out);
    will-change: transform;
}

.building-card:hover .building-card__image {
    transform: scale(1.06);
}

.building-card__title {
    letter-spacing: var(--tracking-tight);
    font-size: 1.375rem;
}

.building-card__content {
    position: relative;
    z-index: 2;
    background: var(--color-white);
    gap: 0.375rem;
}

.building-card__address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    color: var(--color-text-light);
}

.building-card__address::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--color-accent);
    flex-shrink: 0;
}

/* --- Floor card: accent bar + premium feel -------------------------- */

main.page-horizontal .floor-card {
    border: 1px solid var(--color-line);
    border-radius: 2px;
    padding: 1.125rem 1rem;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-smooth);
}

main.page-horizontal .floor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--color-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-smooth);
}

main.page-horizontal .floor-card:hover {
    border-color: var(--color-line);
    box-shadow: var(--shadow-sm);
    transform: translateX(2px);
}

main.page-horizontal .floor-card:hover::before {
    transform: scaleY(1);
}

main.page-horizontal .floor-card__number {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    letter-spacing: var(--tracking-tight);
}

main.page-horizontal .floor-card__count {
    font-size: 0.75rem;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-light);
}

/* --- Apartment details grid: accent on hover ------------------------ */

main.page-horizontal .apartment-details__grid {
    gap: 0.75rem;
}

main.page-horizontal .apartment-details__item {
    border: 1px solid var(--color-line);
    border-radius: 2px;
    padding: 1.25rem 1.25rem;
    background: var(--color-white);
    transition: border-color var(--transition-smooth), background var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    position: relative;
}

main.page-horizontal .apartment-details__item:hover {
    border-color: var(--color-accent);
    background: var(--color-cream);
}

main.page-horizontal .apartment-details__item svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

main.page-horizontal .apartment-details__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.125rem;
}

main.page-horizontal .apartment-details__value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
}

/* --- Hero stats: refined number treatment --------------------------- */

main.page-horizontal .building-hero__stat,
main.page-horizontal .floor-hero__stat {
    position: relative;
    padding: 0 1.25rem;
}

main.page-horizontal .building-hero__stat + .building-hero__stat::before,
main.page-horizontal .floor-hero__stat + .floor-hero__stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36px;
    background: var(--color-line-strong);
}

main.page-horizontal .building-hero__stat-value,
main.page-horizontal .floor-hero__stat-value {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

main.page-horizontal .building-hero__stat-label,
main.page-horizontal .floor-hero__stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

/* --- Back link: elegant treatment ----------------------------------- */

main.page-horizontal .apartment-back {
    margin-top: 2rem;
    text-align: center;
}

main.page-horizontal .apartment-back__link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    border: 1px solid var(--color-line-strong);
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-primary);
    transition: background var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth);
}

main.page-horizontal .apartment-back__link:hover {
    background: var(--bau-blue);
    color: var(--color-white);
    border-color: var(--color-primary);
}

main.page-horizontal .apartment-back__link svg {
    transition: transform var(--transition-smooth);
}

main.page-horizontal .apartment-back__link:hover svg {
    transform: translateX(-4px);
}

/* --- 404 buttons: premium CTA treatment ----------------------------- */

main.page-horizontal.page-404 .page-404__btn {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    transition: background var(--transition-smooth), color var(--transition-smooth), transform var(--transition-smooth);
}

main.page-horizontal.page-404 .page-404__btn:hover {
    opacity: 1;
    background: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

main.page-horizontal.page-404 .page-404__btn--secondary {
    border: 1px solid var(--color-line-strong);
    color: var(--color-primary);
    background: transparent;
}

main.page-horizontal.page-404 .page-404__btn--secondary:hover {
    background: var(--bau-blue);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

main.page-horizontal.page-404 .page-404__code {
    font-family: var(--font-heading);
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    position: relative;
}

main.page-horizontal.page-404 .page-404__code::after {
    content: '';
    display: block;
    width: 64px;
    height: 1px;
    background: var(--color-accent);
    margin: 1.5rem auto 0;
}

/* --- Apartment gallery: premium hover zoom -------------------------- */

main.page-horizontal .apartment-gallery__thumb {
    border: 0;
    padding: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
    aspect-ratio: 4/3;
}

main.page-horizontal .apartment-gallery__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.15);
    opacity: 0;
    transition: opacity var(--transition-smooth);
}

main.page-horizontal .apartment-gallery__thumb:hover::after {
    opacity: 1;
}

main.page-horizontal .apartment-gallery__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out);
}

main.page-horizontal .apartment-gallery__thumb:hover .apartment-gallery__thumb-img {
    transform: scale(1.05);
}

/* --- Sidebar filter chips: refined premium feel --------------------- */

main.page-horizontal .af-chip {
    border: 1px solid var(--color-line);
    border-radius: 2px;
    padding: 0.5rem 0.875rem;
    background: var(--color-white);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text);
    transition: background var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-smooth);
}

main.page-horizontal .af-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

main.page-horizontal .af-chip--active {
    background: var(--bau-blue);
    border-color: var(--color-primary);
    color: var(--color-white);
}

main.page-horizontal .af-sidebar__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: var(--tracking-tight);
    text-transform: none;
}

main.page-horizontal .af-filter-group__label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    color: var(--color-text-muted);
}

main.page-horizontal .af-sort-bar__select {
    border: 1px solid var(--color-line-strong);
    border-radius: 2px;
    padding: 0.5rem 0.875rem;
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: var(--color-primary);
    cursor: pointer;
    transition: border-color var(--transition-smooth);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%230f0f0f' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

main.page-horizontal .af-sort-bar__select:hover {
    border-color: var(--color-accent);
}

main.page-horizontal .af-sort-bar__sort-label,
main.page-horizontal .af-sort-bar__count {
    font-size: 0.75rem;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* --- Section entrance animation (first visible section only) -------- */

@keyframes sunriseFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

main.page-horizontal > .page-section:first-child > *,
main.page-horizontal > .page-section:first-child .page-section__inner > * {
    animation: sunriseFadeUp 0.9s var(--ease-out) both;
}

main.page-horizontal > .page-section:first-child > *:nth-child(1) { animation-delay: 0.05s; }
main.page-horizontal > .page-section:first-child > *:nth-child(2) { animation-delay: 0.15s; }
main.page-horizontal > .page-section:first-child > *:nth-child(3) { animation-delay: 0.25s; }
main.page-horizontal > .page-section:first-child > *:nth-child(4) { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
    main.page-horizontal > .page-section:first-child > *,
    main.page-horizontal > .page-section:first-child .page-section__inner > * {
        animation: none;
    }
    body.has-scrollable-sections:not(.home)::after {
        animation: none;
    }
    .building-card__image,
    .apartment-gallery__thumb-img {
        transition: none;
    }
}

/* --- Header: subtle shadow on scroll, refined spacing --------------- */

body:not(.home) .site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.2) blur(12px);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    border-bottom: 1px solid var(--color-line);
    padding: 18px 60px;
}

body:not(.home) .site-header .site-logo img.logo-img {
    height: 38px;
}

body:not(.home) .bottom-navigation {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 12px 20px;
    border-radius: 2px;
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-sm);
}

body:not(.home) .bottom-navigation .nav-menu li a {
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-widest);
}

body:not(.home) .social-fixed {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 2px;
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-sm);
    gap: 14px;
}

body:not(.home) .social-fixed a {
    color: var(--color-primary);
    transition: color var(--transition-smooth), transform var(--transition-smooth);
}

body:not(.home) .social-fixed a:hover {
    color: var(--color-accent-dark);
    transform: translateY(-2px);
}

/* --- Archive apartment: title with refined subtitle ----------------- */

main.page-horizontal > .page-section.archive-apartment__header .archive-apartment__title,
main.page-horizontal > .page-section.archive-building__header .archive-building__title {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

main.page-horizontal > .page-section.archive-apartment__header .archive-apartment__title::after {
    display: none;
}

/* --- Single-building hero: refined hierarchy ------------------------ */

main.page-horizontal > .page-section.building-hero .building-hero__title {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    line-height: 1.05;
}

main.page-horizontal > .page-section.building-hero .building-hero__address {
    font-size: 0.75rem;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
}

main.page-horizontal > .page-section.building-hero .building-hero__address::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--color-accent);
}

main.page-horizontal > .page-section.building-hero .building-hero__address svg {
    color: var(--color-accent);
}

main.page-horizontal > .page-section.building-hero .building-hero__description {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* --- Floor hero building link: editorial eyebrow -------------------- */

main.page-horizontal > .page-section.floor-hero .floor-hero__building {
    font-size: 0.75rem;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

main.page-horizontal > .page-section.floor-hero .floor-hero__building a {
    color: var(--color-accent-dark);
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 1px;
    transition: color var(--transition-smooth);
}

main.page-horizontal > .page-section.floor-hero .floor-hero__building a:hover {
    color: var(--color-primary);
}

/* --- Section title: accent underline underneath --------------------- */

main.page-horizontal > .page-section .building-map-section__title,
main.page-horizontal > .page-section .floor-map-section__title,
main.page-horizontal > .page-section .building-floors-list__title,
main.page-horizontal > .page-section .floor-apartments-list__title,
main.page-horizontal > .page-section .apartment-details__title,
main.page-horizontal > .page-section .apartment-plan__title,
main.page-horizontal > .page-section .apartment-gallery__title,
main.page-horizontal > .page-section .apartment-description__title {
    position: relative;
    padding-bottom: 1.25rem;
    margin-bottom: 2rem;
    letter-spacing: var(--tracking-tight);
}

main.page-horizontal > .page-section .building-map-section__title::after,
main.page-horizontal > .page-section .floor-map-section__title::after,
main.page-horizontal > .page-section .building-floors-list__title::after,
main.page-horizontal > .page-section .floor-apartments-list__title::after,
main.page-horizontal > .page-section .apartment-details__title::after,
main.page-horizontal > .page-section .apartment-plan__title::after,
main.page-horizontal > .page-section .apartment-gallery__title::after,
main.page-horizontal > .page-section .apartment-description__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--color-accent);
}

/* --- Alternating section backgrounds for rhythm --------------------- */

main.page-horizontal > .page-section.building-map-section,
main.page-horizontal > .page-section.floor-map-section,
main.page-horizontal > .page-section.apartment-plan,
main.page-horizontal > .page-section.apartment-description {
    background: var(--color-cream);
}

/* --- Building CTA button on homepage: refined for consistency ------ */

.building-cta__btn {
    border-radius: 2px;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 1.125rem 2rem;
    box-shadow: var(--shadow-md);
}

.building-cta__btn:hover,
.building-cta__btn:focus-visible {
    box-shadow: var(--shadow-xl);
}

/* --- Apartment description content: refined prose ------------------- */

main.page-horizontal > .page-section.apartment-description .apartment-description__content {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--color-text);
}

main.page-horizontal > .page-section.apartment-description .apartment-description__content p {
    margin: 0 0 1.25em;
}

/* --- Mobile refinement ---------------------------------------------- */

@media (max-width: 720px) {
    body:not(.home) .site-header {
        padding: 14px 20px;
    }

    body:not(.home) .bottom-navigation,
    body:not(.home) .social-fixed {
        box-shadow: var(--shadow-xs);
    }

    main.page-horizontal .page-content p:first-of-type::first-letter {
        font-size: 3em;
    }

    main.page-horizontal > .page-section.apartment-hero .apartment-hero__title {
        font-size: clamp(2.25rem, 9vw, 3.5rem);
    }

    main.page-horizontal .building-hero__stat + .building-hero__stat::before,
    main.page-horizontal .floor-hero__stat + .floor-hero__stat::before {
        display: none;
    }
}

/* ======================================================================
   BIOGRAPI-INSPIRED FINAL POLISH
   Warm plum/cream/terracotta palette, geometric sans only (no serif
   contrast), editorial grid, smooth horizontal flow.
   ====================================================================== */

/* --- Heading weight recalibration (no more Playfair serif contrast) -- */

main.page-horizontal h1,
main.page-horizontal h2,
main.page-horizontal h3,
main.page-horizontal .section-title,
main.page-horizontal .building-hero__title,
main.page-horizontal .floor-hero__title,
main.page-horizontal .apartment-hero__title,
main.page-horizontal .archive-apartment__title,
main.page-horizontal .archive-building__title,
main.page-horizontal .apartment-card__number,
main.page-horizontal .apartment-card__price,
main.page-horizontal .apartment-hero__price,
main.page-horizontal .apartment-details__value,
main.page-horizontal .building-hero__stat-value,
main.page-horizontal .floor-hero__stat-value,
main.page-horizontal .floor-card__number,
main.page-horizontal .building-card__title,
main.page-horizontal .building-map-section__title,
main.page-horizontal .floor-map-section__title,
main.page-horizontal .building-floors-list__title,
main.page-horizontal .floor-apartments-list__title,
main.page-horizontal .apartment-details__title,
main.page-horizontal .apartment-plan__title,
main.page-horizontal .apartment-gallery__title,
main.page-horizontal .apartment-description__title,
main.page-horizontal.page-404 .page-404__code,
main.page-horizontal.page-404 .page-404__title {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

/* Display-scale titles (heroes, 404 code) get tighter tracking */
main.page-horizontal .building-hero__title,
main.page-horizontal .floor-hero__title,
main.page-horizontal .apartment-hero__title,
main.page-horizontal .archive-apartment__title,
main.page-horizontal .archive-building__title,
main.page-horizontal .section-title,
main.page-horizontal.page-404 .page-404__code {
    font-weight: 800;
    letter-spacing: var(--tracking-tighter);
    line-height: 0.95;
}

/* Smaller headings: slightly looser weight for readability */
main.page-horizontal .building-map-section__title,
main.page-horizontal .floor-map-section__title,
main.page-horizontal .building-floors-list__title,
main.page-horizontal .floor-apartments-list__title,
main.page-horizontal .apartment-details__title,
main.page-horizontal .apartment-plan__title,
main.page-horizontal .apartment-gallery__title,
main.page-horizontal .apartment-description__title {
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
}

/* --- Remove drop cap (biograpi is clean, not literary) -------------- */

main.page-horizontal .page-content p:first-of-type::first-letter {
    all: unset;
}

/* --- Cream body background cascades; sections inherit via transparency */

main.page-horizontal {
    background: transparent;
}

main.page-horizontal > .page-section {
    background: var(--color-cream);
}

/* Alternating paper-tone sections (biograpi rhythm) */
main.page-horizontal > .page-section.building-map-section,
main.page-horizontal > .page-section.floor-map-section,
main.page-horizontal > .page-section.apartment-plan,
main.page-horizontal > .page-section.apartment-description,
main.page-horizontal > .page-section.apartment-gallery {
    background: var(--color-paper);
}

/* Hero sections get subtle depth: cream with optional accent top border */
main.page-horizontal > .page-section.archive-apartment__header,
main.page-horizontal > .page-section.archive-building__header,
main.page-horizontal > .page-section.apartment-hero,
main.page-horizontal > .page-section.floor-hero,
main.page-horizontal > .page-section.building-hero {
    background: var(--color-cream);
    position: relative;
}

/* --- Cards: white cards on cream bg for contrast ------------------- */

main.page-horizontal .apartment-card,
main.page-horizontal .floor-card,
main.page-horizontal .apartment-details__item {
    background: var(--color-white);
    border-color: var(--color-line);
    border-radius: 4px;
}

main.page-horizontal .building-card,
.building-card {
    background: var(--color-white);
    border-color: var(--color-line);
    border-radius: 4px;
}

main.page-horizontal .apartment-card:hover,
main.page-horizontal .floor-card:hover,
main.page-horizontal .apartment-details__item:hover,
.building-card:hover {
    border-color: var(--color-primary);
}

/* --- Accent color usage: terracotta everywhere -------------------- */

main.page-horizontal .building-hero__address::before,
main.page-horizontal .building-card__address::before,
main.page-horizontal > .page-section.apartment-hero .apartment-hero__price::before,
main.page-horizontal > .page-section.archive-apartment__header::after,
main.page-horizontal > .page-section.archive-building__header::after,
main.page-horizontal .floor-card::before,
main.page-horizontal > .page-section .building-map-section__title::after,
main.page-horizontal > .page-section .floor-map-section__title::after,
main.page-horizontal > .page-section .building-floors-list__title::after,
main.page-horizontal > .page-section .floor-apartments-list__title::after,
main.page-horizontal > .page-section .apartment-details__title::after,
main.page-horizontal > .page-section .apartment-plan__title::after,
main.page-horizontal > .page-section .apartment-gallery__title::after,
main.page-horizontal > .page-section .apartment-description__title::after,
main.page-horizontal.page-404 .page-404__code::after {
    background: var(--color-accent);
}

main.page-horizontal .apartment-details__item svg,
main.page-horizontal .building-hero__address svg {
    color: var(--color-accent);
}

main.page-horizontal > .page-section.apartment-hero .apartment-hero__price,
main.page-horizontal .apartment-card__price,
main.page-horizontal .building-hero__stat-value,
main.page-horizontal .floor-hero__stat-value {
    color: var(--color-primary);
}

main.page-horizontal .apartment-details__item:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-glow);
}

/* Underline reveal on links uses brand cyan */
main.page-horizontal .page-content a,
main.page-horizontal > .page-section.floor-hero .floor-hero__building a {
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
}

/* --- Status badges: semantic colors (green/amber/red), cyan is reserved for brand --- */

main.page-horizontal .status-badge {
    border-radius: 2px;
    border: 1px solid var(--color-line);
    background: var(--color-white);
}

main.page-horizontal .status-badge--available {
    color: #1f5779;
    border-color: rgba(31, 87, 121, 0.28);
    background: rgba(31, 87, 121, 0.06);
}

main.page-horizontal .status-badge--sold {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.28);
    background: rgba(185, 28, 28, 0.05);
}

/* --- Filter chips: brand cyan active state ------------------------- */

main.page-horizontal .af-chip--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    font-weight: 600;
}

main.page-horizontal .af-chip--status.af-chip--available.af-chip--active {
    background: #1f5779;
    border-color: #1f5779;
    color: var(--color-white);
}

main.page-horizontal .af-chip--status.af-chip--sold.af-chip--active {
    background: #b91c1c;
    border-color: #b91c1c;
    color: var(--color-white);
}

/* --- Header glass: cool white tint to harmonise with cyan --------- */

body:not(.home) .site-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(1.2) blur(14px);
    -webkit-backdrop-filter: saturate(1.2) blur(14px);
    border-bottom: 1px solid var(--color-line);
}

body:not(.home) .bottom-navigation,
body:not(.home) .social-fixed {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-line);
}

body:not(.home) .bottom-navigation .nav-menu li a {
    color: var(--color-primary);
    opacity: 0.72;
    transition: opacity var(--transition-smooth), color var(--transition-smooth);
}

body:not(.home) .bottom-navigation .nav-menu li a:hover,
body:not(.home) .bottom-navigation .nav-menu li.current-menu-item a {
    opacity: 1;
    color: var(--color-accent);
}

body:not(.home) .bottom-navigation .nav-menu li a::after {
    background-color: var(--color-accent);
}

body:not(.home) .social-fixed a {
    color: var(--color-primary);
    opacity: 0.72;
}

body:not(.home) .social-fixed a:hover {
    color: var(--color-accent);
    opacity: 1;
}

/* --- Progress bar indicator: terracotta fill --------------------- */

.horizontal-progress__dot {
    background: var(--color-line);
    border: none;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 2px;
}

.horizontal-progress__dot:hover {
    background: var(--color-text-muted);
}

.horizontal-progress__dot.is-active {
    background: var(--color-accent);
    width: 56px;
}

/* --- Scroll hint: terracotta chevron ----------------------------- */

body.has-scrollable-sections:not(.home)::after {
    border-top-color: var(--color-accent);
    border-right-color: var(--color-accent);
}

/* --- Custom scrollbar: terracotta on hover ----------------------- */

main.page-horizontal::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

/* --- Apartment back link: plum primary --------------------------- */

main.page-horizontal .apartment-back__link:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

/* --- 404 buttons: terracotta + plum ------------------------------ */

main.page-horizontal.page-404 .page-404__btn {
    background: var(--bau-blue);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
}

main.page-horizontal.page-404 .page-404__btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

main.page-horizontal.page-404 .page-404__btn--secondary {
    background: transparent;
    border-color: var(--color-line);
    color: var(--color-primary);
}

main.page-horizontal.page-404 .page-404__btn--secondary:hover {
    background: var(--bau-blue);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* --- Hero home video CTA (front page): refined warm ------------- */

.building-cta__btn {
    background: var(--color-white);
    color: var(--color-primary);
    border-radius: 2px;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1.125rem 2rem;
}

.building-cta__btn:hover,
.building-cta__btn:focus-visible {
    background: var(--color-accent);
    color: var(--color-white);
}

/* --- Sort dropdown: plum chevron --------------------------------- */

main.page-horizontal .af-sort-bar__select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%231a1120' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

main.page-horizontal .af-sort-bar__select:hover {
    border-color: var(--color-accent);
}

/* --- Building CTA arrow: terracotta on hover feels warmer ------- */

.building-cta__btn:hover .building-cta__arrow {
    transform: translateX(6px);
}

/* --- Page-content link hover: terracotta ------------------------- */

main.page-horizontal .page-content a:hover {
    color: var(--color-accent);
}

/* --- Logo filter: plum instead of pure black -------------------- */

body:not(.home) .site-header .site-logo img.logo-img {
    filter: brightness(0) saturate(100%) invert(6%) sepia(8%) saturate(3000%) hue-rotate(260deg) brightness(96%) contrast(98%);
}

body:not(.home) .menu-toggle span {
    background-color: var(--bau-blue);
}

/* --- Section title accent line: tighter, more editorial --------- */

main.page-horizontal > .page-section .building-map-section__title,
main.page-horizontal > .page-section .floor-map-section__title,
main.page-horizontal > .page-section .building-floors-list__title,
main.page-horizontal > .page-section .floor-apartments-list__title,
main.page-horizontal > .page-section .apartment-details__title,
main.page-horizontal > .page-section .apartment-plan__title,
main.page-horizontal > .page-section .apartment-gallery__title,
main.page-horizontal > .page-section .apartment-description__title {
    text-align: left;
    padding-bottom: 1rem;
    padding-left: 0;
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

main.page-horizontal > .page-section .building-map-section__title::after,
main.page-horizontal > .page-section .floor-map-section__title::after,
main.page-horizontal > .page-section .building-floors-list__title::after,
main.page-horizontal > .page-section .floor-apartments-list__title::after,
main.page-horizontal > .page-section .apartment-details__title::after,
main.page-horizontal > .page-section .apartment-plan__title::after,
main.page-horizontal > .page-section .apartment-gallery__title::after,
main.page-horizontal > .page-section .apartment-description__title::after {
    left: 0;
    transform: none;
    width: 32px;
}

/* --- Section relative positioning for layering -------------------- */

main.page-horizontal > .page-section {
    position: relative;
}

main.page-horizontal > .page-section > * {
    position: relative;
    z-index: 1;
}

/* --- Brand cyan: focus glow, subtle hover fills ------------------ */

main.page-horizontal :focus-visible,
.page-horizontal :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

main.page-horizontal .af-chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Soft cyan glow on primary CTAs (404 buttons, back link, CTA) */
main.page-horizontal.page-404 .page-404__btn:hover {
    box-shadow: var(--shadow-md), 0 0 0 4px var(--color-accent-glow);
}

main.page-horizontal .apartment-back__link:hover {
    box-shadow: var(--shadow-sm), 0 0 0 4px var(--color-accent-glow);
}

.building-cta__btn:hover,
.building-cta__btn:focus-visible {
    box-shadow: var(--shadow-xl), 0 0 0 4px var(--color-accent-glow);
}

/* --- Cards on matching bg: default shadow for separation -------- */

main.page-horizontal .apartment-card,
main.page-horizontal .floor-card,
main.page-horizontal .apartment-details__item,
.building-card {
    background: var(--color-white);
    box-shadow: var(--shadow-xs);
}

main.page-horizontal a.apartment-card:hover,
main.page-horizontal .floor-card:hover,
.building-card:hover {
    box-shadow: var(--shadow-md), 0 0 0 1px var(--color-accent);
    border-color: transparent;
}

/* --- Section title accent line: brand cyan, a touch thicker ---- */

main.page-horizontal > .page-section .building-map-section__title::after,
main.page-horizontal > .page-section .floor-map-section__title::after,
main.page-horizontal > .page-section .building-floors-list__title::after,
main.page-horizontal > .page-section .floor-apartments-list__title::after,
main.page-horizontal > .page-section .apartment-details__title::after,
main.page-horizontal > .page-section .apartment-plan__title::after,
main.page-horizontal > .page-section .apartment-gallery__title::after,
main.page-horizontal > .page-section .apartment-description__title::after {
    height: 2px;
    width: 36px;
}

main.page-horizontal > .page-section.archive-apartment__header::after,
main.page-horizontal > .page-section.archive-building__header::after,
main.page-horizontal.page-404 .page-404__code::after {
    height: 2px;
    width: 72px;
}

/* --- Hero image border radius softer for tech feel ------------ */

main.page-horizontal > .page-section.building-hero .building-hero__image img,
main.page-horizontal > .page-section.apartment-plan .apartment-plan__image-wrap {
    border-radius: 6px;
}

/* --- Building card corner refinement ------------------------- */

.building-card {
    border-radius: 6px;
}

main.page-horizontal .apartment-card,
main.page-horizontal .floor-card,
main.page-horizontal .apartment-details__item {
    border-radius: 6px;
}

/* --- Apartment details icon: cyan --------------------------- */

main.page-horizontal .apartment-details__item svg {
    color: var(--color-accent-dark);
}

main.page-horizontal .apartment-details__item:hover svg {
    color: var(--color-accent);
}

/* --- Logo filter: plum dark (brand plum on cream) ---------- */

body:not(.home) .site-header .site-logo img.logo-img {
    filter: none;
}

/* --- Social icon hover: cyan ------------------------------- */

body:not(.home) .social-fixed a:hover {
    color: var(--color-accent-dark);
}

/* --- Floor card accent bar: cyan (inherits from --color-accent) --- */

main.page-horizontal .floor-card::before {
    width: 3px;
}

/* --- Apartment hero price divider: 2px cyan ---------------- */

main.page-horizontal > .page-section.apartment-hero .apartment-hero__price::before {
    height: 2px;
    width: 56px;
}

/* --- Accent text usage for eyebrow labels ------------------ */

main.page-horizontal .section-label,
main.page-horizontal .archive-apartment__count {
    color: var(--color-accent-dark);
}

/* --- Refined sort dropdown: cyan accent on hover/active ---- */

main.page-horizontal .af-sort-bar__select:hover,
main.page-horizontal .af-sort-bar__select:focus {
    border-color: var(--color-accent);
    outline: none;
}

/* --- Custom scrollbar thumb: plum default, cyan on hover --- */

main.page-horizontal::-webkit-scrollbar-thumb {
    background: var(--color-line-strong);
}

main.page-horizontal::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

/* ======================================================================
   SINGLE BUILDING PAGE — PREMIUM REDESIGN (9 sections)
   Namespace: `bh-*` for building-hero and children.
   ====================================================================== */

/* --- Shared section scaffolding ----------------------------------- */

main.page-horizontal.single-building > .page-section {
    padding: 110px 80px 90px;
}

.bh-section-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    flex: 1;
    min-height: 0;
}

.bh-section-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
}

.bh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.bh-eyebrow::before {
    content: '';
    width: 28px;
    height: 1.5px;
    background: var(--color-accent);
}

.bh-eyebrow--small { font-size: 0.625rem; }
.bh-eyebrow--light { color: var(--color-accent); }
.bh-eyebrow--light::before { background: var(--color-accent); }

.bh-section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.875rem, 3vw, 2.625rem);
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
    margin: 0;
    line-height: 1.1;
}

.bh-section-sub {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    line-height: 1.6;
    max-width: 640px;
    margin: 0;
}

/* ===== 1. HERO ===================================================== */

main.page-horizontal > .page-section.bh-hero {
    padding: 0;
    position: relative;
    overflow: hidden;
    background: var(--bau-blue);
    color: var(--color-white);
}

.bh-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bh-hero__image img,
.bh-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bh-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(43, 115, 163, 0.88) 0%, rgba(43, 115, 163, 0.4) 50%, rgba(43, 115, 163, 0.6) 100%),
        radial-gradient(circle at 85% 20%, rgba(43, 115, 163, 0.12) 0%, transparent 50%);
}

.bh-hero__content {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    padding: 0 80px 120px;
    max-width: 1440px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: auto;
}

.bh-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-accent);
}

.bh-hero__eyebrow-divider {
    width: 36px;
    height: 1px;
    background: var(--color-accent);
    display: inline-block;
}

.bh-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 800;
    letter-spacing: var(--tracking-tighter);
    line-height: 0.95;
    color: var(--color-white);
    margin: 0;
}

.bh-hero__address {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.bh-hero__address svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.bh-hero__meta {
    display: flex;
    gap: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    flex-wrap: wrap;
}

.bh-hero__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bh-hero__meta-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    color: var(--color-white);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.bh-hero__meta-label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.bh-hero__scroll-hint {
    position: absolute;
    right: 80px;
    bottom: 120px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    animation: bhScrollPulse 2.4s ease-in-out infinite;
}

.bh-hero__scroll-hint svg { color: var(--color-accent); }

@keyframes bhScrollPulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

/* ===== 2. OVERVIEW ================================================= */

main.page-horizontal > .page-section.bh-overview {
    background: var(--color-white);
}

.bh-overview__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 2rem 0;
}

.bh-overview__lead {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bh-overview__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: var(--tracking-tight);
    line-height: 1.05;
    color: var(--color-primary);
    margin: 0;
}

.bh-overview__desc {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-light);
    max-width: 560px;
}

.bh-overview__desc p { margin: 0 0 1em; }

.bh-overview__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--color-line);
}

.bh-spec {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1.25rem 1.25rem 1.25rem 0;
    border-bottom: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
    gap: 1rem;
}

.bh-spec:nth-child(2n) {
    border-right: none;
    padding-left: 1.25rem;
    padding-right: 0;
}

.bh-spec__label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bh-spec__value {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ===== 3. STATS DASHBOARD ========================================== */

main.page-horizontal > .page-section.bh-stats {
    background: var(--color-cream);
}

.bh-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    flex: 1;
    align-content: start;
}

.bh-stat-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 160px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.bh-stat-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.bh-stat-card--primary {
    background: var(--bau-blue);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.bh-stat-card--primary .bh-stat-card__label,
.bh-stat-card--primary .bh-stat-card__hint {
    color: rgba(255, 255, 255, 0.6);
}

.bh-stat-card--primary .bh-stat-card__number { color: var(--color-accent); }

.bh-stat-card--wide { grid-column: span 2; }
.bh-stat-card--full { grid-column: span 4; }

.bh-stat-card__label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bh-stat-card__number {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 3.5vw, 3rem);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.bh-stat-card__hint {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin-top: auto;
}

.bh-stat-card__bar {
    height: 3px;
    background: var(--color-line);
    border-radius: 2px;
    overflow: hidden;
    margin-top: auto;
}

.bh-stat-card__bar-fill {
    display: block;
    height: 100%;
    background: var(--color-accent);
    transition: width 1s var(--ease-out);
}

.bh-stat-card__range {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    font-family: var(--font-heading);
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

.bh-stat-card__range-from,
.bh-stat-card__range-to {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.bh-stat-card__range-divider {
    flex: 1;
    height: 1px;
    background: var(--color-line);
    max-width: 60px;
    align-self: center;
}

.bh-stat-card__range-unit {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.bh-room-mix {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: baseline;
}

.bh-room-mix__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    background: var(--color-cream);
    border-radius: 6px;
    border: 1px solid var(--color-line);
}

.bh-room-mix__rooms {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

.bh-room-mix__label {
    font-size: 0.75rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.bh-room-mix__count {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    margin-left: 0.25rem;
    font-variant-numeric: tabular-nums;
}

/* ===== 4. MAP ====================================================== */

main.page-horizontal > .page-section.bh-map {
    background: var(--color-white);
}

.bh-map__wrap {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 2rem;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.bh-map__canvas {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream);
    border-radius: 4px;
    border: 1px solid var(--color-line);
    overflow: hidden;
    padding: 1rem;
}

.bh-legend {
    background: var(--color-cream);
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 1.5rem;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 0;
}

.bh-legend__title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bh-legend__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bh-legend__list li {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.bh-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.bh-legend__dot--available { background: #1f5779; }
.bh-legend__dot--sold      { background: #b91c1c; }

.bh-legend__label {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 500;
}

.bh-legend__count {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

/* ===== 5. FLOORS SHOWCASE ========================================== */

main.page-horizontal > .page-section.bh-floors {
    background: var(--color-paper);
}

.bh-floors__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    flex: 1;
    align-content: start;
    overflow-y: auto;
    padding: 2px;
}

.bh-floor-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-smooth);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.bh-floor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--color-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-smooth);
}

/* Permanent status bar: green when the floor has available units, muted
   when sold out — so the eye can scan availability at a glance. */
.bh-floor-card--available::before {
    background: #2b73a3;
    transform: scaleY(1);
}
.bh-floor-card--sold::before {
    background: var(--color-line-strong, #c8ccd2);
    transform: scaleY(1);
}

.bh-floor-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.bh-floor-card--available:hover::before { background: #2b73a3; transform: scaleY(1); }

.bh-floor-card--sold { opacity: 0.7; }
.bh-floor-card--sold:hover { opacity: 0.9; }

/* Availability count: green & bold when units are free. */
.bh-floor-card--available .bh-floor-card__stat--avail .bh-floor-card__stat-value {
    color: #2b73a3;
}
.bh-floor-card--sold .bh-floor-card__stat--avail .bh-floor-card__stat-value {
    color: var(--color-text-muted);
}

.bh-floor-card__header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-line);
}

.bh-floor-card__number {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--tracking-tighter);
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.bh-floor-card__label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bh-floor-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.bh-floor-card__stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.bh-floor-card__stat-value {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.bh-floor-card__stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bh-floor-card__footer {
    padding-top: 1rem;
    border-top: 1px solid var(--color-line);
}

.bh-floor-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent-dark);
    transition: color var(--transition-smooth), gap var(--transition-smooth);
}

.bh-floor-card:hover .bh-floor-card__cta {
    color: var(--color-accent);
    gap: 0.75rem;
}

/* On mobile a 39-card grid becomes a wall of squished tiles — switch to
   single-column rows with horizontal information layout for an at-a-glance
   list that's easy to scan and tap. Selector is scoped to single-building
   so the higher specificity wins over earlier mobile blocks in this file. */
@media (max-width: 720px) {
    main.page-horizontal.single-building .bh-floors__grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        overflow-y: visible;
        padding: 0;
    }

    main.page-horizontal.single-building .bh-floor-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0.85rem;
        padding: 0.75rem 0.95rem;
        min-height: 64px;
    }

    main.page-horizontal.single-building .bh-floor-card__header {
        padding: 0;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        min-width: 56px;
    }

    main.page-horizontal.single-building .bh-floor-card__number {
        font-size: 1.75rem;
        line-height: 1;
    }

    main.page-horizontal.single-building .bh-floor-card__label {
        font-size: 0.625rem;
        margin-top: 0.15rem;
    }

    main.page-horizontal.single-building .bh-floor-card__body {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem 0.85rem;
        align-items: baseline;
    }

    main.page-horizontal.single-building .bh-floor-card__stat {
        flex-direction: row;
        gap: 0.35rem;
        font-size: 0.8125rem;
    }

    main.page-horizontal.single-building .bh-floor-card__stat-label {
        font-size: 0.625rem;
    }

    main.page-horizontal.single-building .bh-floor-card__footer {
        padding: 0;
        border: none;
        align-self: center;
    }

    main.page-horizontal.single-building .bh-floor-card__cta {
        font-size: 0;
        gap: 0;
        color: var(--color-accent);
    }

    main.page-horizontal.single-building .bh-floor-card__cta svg {
        width: 18px;
        height: 18px;
    }
}

/* ===== STAT BAR (T8.2 — project marketing facts) =================== */

main.page-horizontal.single-building > .page-section.bh-stat-bar {
    padding: 56px 80px;
    background: var(--color-cream);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    justify-content: center;
}

.bh-stat-bar__inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.bh-stat-bar__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bh-stat-bar__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--color-line);
    min-height: 132px;
}

.bh-stat-bar__item:last-child {
    border-right: none;
}

.bh-stat-bar__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--color-accent-glow);
    color: var(--color-accent-dark);
}

.bh-stat-bar__icon svg {
    width: 22px;
    height: 22px;
}

.bh-stat-bar__value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

.bh-stat-bar__unit {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-light);
    letter-spacing: 0;
}

.bh-stat-bar__label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-light);
}

.bh-stat-bar__sublabel {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-text-muted);
}

@media (max-width: 1024px) {
    main.page-horizontal.single-building > .page-section.bh-stat-bar {
        padding: 48px 40px;
    }

    .bh-stat-bar__list {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 0;
    }

    .bh-stat-bar__item {
        border-right: 1px solid var(--color-line);
        border-bottom: 1px solid var(--color-line);
    }

    .bh-stat-bar__item:nth-child(3n) {
        border-right: none;
    }

    .bh-stat-bar__item:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

@media (max-width: 640px) {
    main.page-horizontal.single-building > .page-section.bh-stat-bar {
        padding: 36px 20px;
    }

    .bh-stat-bar__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .bh-stat-bar__item {
        padding: 1rem 1.1rem;
        min-height: 116px;
        border-right: 1px solid var(--color-line);
        border-bottom: 1px solid var(--color-line);
    }

    .bh-stat-bar__item:nth-child(2n) {
        border-right: none;
    }

    .bh-stat-bar__item:last-child {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: none;
        align-items: center;
        text-align: center;
    }

    .bh-stat-bar__item:nth-last-child(2),
    .bh-stat-bar__item:nth-last-child(3) {
        border-bottom: none;
    }
}

/* ===== 6. AMENITIES ================================================ */

main.page-horizontal > .page-section.bh-amenities {
    background: var(--color-white);
}

.bh-amenities__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    flex: 1;
    align-content: start;
}

.bh-amenity {
    background: var(--color-cream);
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-smooth), background var(--transition-smooth);
    min-height: 180px;
}

.bh-amenity:hover {
    background: var(--color-white);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.bh-amenity__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--color-accent-glow);
    color: var(--color-accent-dark);
}

.bh-amenity:hover .bh-amenity__icon {
    background: var(--color-accent);
    color: var(--color-white);
}

.bh-amenity__icon svg {
    width: 22px;
    height: 22px;
}

.bh-amenity__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
    margin: 0;
}

.bh-amenity__desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-light);
    margin: 0;
}

@media (max-width: 1024px) {
    .bh-amenities__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .bh-amenities__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .bh-amenity {
        padding: 1.25rem 1rem;
        min-height: auto;
        gap: 0.625rem;
    }

    .bh-amenity__icon {
        width: 38px;
        height: 38px;
    }

    .bh-amenity__icon svg {
        width: 18px;
        height: 18px;
    }

    .bh-amenity__title {
        font-size: 0.95rem;
    }

    .bh-amenity__desc {
        font-size: 0.8125rem;
        line-height: 1.5;
    }
}

@media (max-width: 420px) {
    .bh-amenities__grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 6.5 FEATURE BLOCKS (T8.5) =================================== */

main.page-horizontal > .page-section.bh-features {
    background: var(--color-paper);
}

.bh-features__list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    flex: 1;
    align-content: start;
}

.bh-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
}

.bh-feature--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.bh-feature--reverse .bh-feature__media {
    order: 2;
}

.bh-feature__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 5px;
    background: var(--color-cream);
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
}

.bh-feature__img,
.bh-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-out);
}

.bh-feature:hover .bh-feature__img,
.bh-feature:hover .bh-feature__media img {
    transform: scale(1.04);
}

.bh-feature__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-line-strong);
}

.bh-feature__placeholder svg {
    width: 64px;
    height: 64px;
}

.bh-feature__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 520px;
}

.bh-feature__index {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: var(--tracking-widest);
    color: var(--color-accent-dark);
    font-variant-numeric: tabular-nums;
}

.bh-feature__index::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1.5px;
    background: var(--color-accent);
    vertical-align: middle;
    margin-right: 0.625rem;
    transform: translateY(-2px);
}

.bh-feature__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 2vw, 2rem);
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
    line-height: 1.15;
    margin: 0;
}

.bh-feature__desc {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-light);
}

.bh-feature__desc p {
    margin: 0 0 0.75rem;
}

.bh-feature__desc p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .bh-features__list {
        gap: 3rem;
    }

    .bh-feature,
    .bh-feature--reverse {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .bh-feature--reverse .bh-feature__media {
        order: 0;
    }

    .bh-feature__body {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .bh-features__list {
        gap: 2.5rem;
    }

    .bh-feature__media {
        aspect-ratio: 3 / 2;
        border-radius: 5px;
    }
}

/* ===== 7. FEATURED APARTMENTS ====================================== */

main.page-horizontal > .page-section.bh-featured {
    background: var(--color-paper);
}

.bh-featured__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    flex: 1;
    align-content: start;
}

.bh-featured-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-smooth);
    box-shadow: var(--shadow-xs);
}

.bh-featured-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.bh-featured-card__image {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--color-cream);
}

.bh-featured-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out);
}

.bh-featured-card:hover .bh-featured-card__image img {
    transform: scale(1.05);
}

.bh-featured-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.bh-featured-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.bh-featured-card__number {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.bh-featured-card__meta {
    display: flex;
    gap: 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.bh-featured-card__meta-item {
    display: inline-flex;
    align-items: center;
}

.bh-featured-card__meta-item + .bh-featured-card__meta-item::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-line-strong);
    margin-right: 0.875rem;
}

.bh-featured-card__price {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.bh-featured-card__price span {
    font-size: 1rem;
    color: var(--color-accent-dark);
    font-weight: 500;
    margin-left: 0.25rem;
}

.bh-featured-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-top: auto;
    transition: gap var(--transition-smooth);
}

.bh-featured-card:hover .bh-featured-card__cta {
    gap: 0.75rem;
}

.bh-featured__link {
    display: inline-flex;
    align-self: center;
    margin: 0 auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-primary);
    padding: 1rem 2rem;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    transition: background var(--transition-smooth), color var(--transition-smooth);
}

.bh-featured__link:hover {
    background: var(--bau-blue);
    color: var(--color-white);
}

/* ===== 8. LOCATION ================================================= */

main.page-horizontal > .page-section.bh-location {
    background: var(--color-white);
}

.bh-location__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    padding: 2rem 0;
    align-items: flex-start;
}

.bh-location__lead {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bh-location__address {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-cream);
    border: 1px solid var(--color-line);
    border-radius: 4px;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-primary);
    letter-spacing: -0.005em;
}

.bh-location__address svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.bh-location__maps-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent-dark);
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--color-accent-dark);
    border-radius: 4px;
    align-self: flex-start;
    transition: background var(--transition-smooth), color var(--transition-smooth);
}

.bh-location__maps-link:hover {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.bh-location__nearby {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bh-nearby-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-line);
}

.bh-nearby-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: 0.9375rem;
}

.bh-nearby-list__label {
    color: var(--color-primary);
    font-weight: 500;
}

.bh-nearby-list__distance {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-accent-dark);
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
    letter-spacing: var(--tracking-tight);
}

/* ===== 9. CTA ====================================================== */

main.page-horizontal > .page-section.bh-cta {
    background: var(--bau-blue);
    color: var(--color-white);
    padding: 120px 80px 110px;
}

.bh-cta__inner {
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 1.75rem;
    max-width: 860px;
}

.bh-cta__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    letter-spacing: var(--tracking-tighter);
    line-height: 1.05;
    color: var(--color-white);
    margin: 0;
}

.bh-cta__desc {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    max-width: 560px;
    margin: 0;
}

.bh-cta__actions {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.bh-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.125rem 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background var(--transition-smooth), color var(--transition-smooth), transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.bh-cta__btn--primary {
    background: var(--color-accent);
    color: var(--color-white);
    border: 1px solid var(--color-accent);
}

.bh-cta__btn--primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px var(--color-accent-glow);
}

.bh-cta__btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.bh-cta__btn--ghost:hover {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
    transform: translateY(-2px);
}

.bh-cta__back { margin-top: 1.5rem; }

.bh-cta__back a {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 2px;
    transition: color var(--transition-smooth), border-color var(--transition-smooth);
}

.bh-cta__back a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ===== Responsive (single-building) =================================== */

@media (max-width: 1200px) {
    main.page-horizontal.single-building > .page-section { padding: 110px 48px 90px; }
    .bh-hero__content { padding: 0 48px 96px; }
    .bh-hero__scroll-hint { right: 48px; bottom: 96px; }
    .bh-stats__grid, .bh-amenities__grid { grid-template-columns: repeat(3, 1fr); }
    .bh-stat-card--wide { grid-column: span 3; }
    .bh-stat-card--full { grid-column: span 3; }
    .bh-featured__grid { grid-template-columns: repeat(2, 1fr); }
    .bh-map__wrap { grid-template-columns: 1fr 220px; }
}

@media (max-width: 900px) {
    main.page-horizontal.single-building > .page-section { padding: 100px 32px 80px; }
    .bh-overview__grid, .bh-location__grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .bh-overview__specs { grid-template-columns: 1fr; }
    .bh-spec { border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; }
    .bh-stats__grid, .bh-amenities__grid { grid-template-columns: repeat(2, 1fr); }
    .bh-stat-card--wide, .bh-stat-card--full { grid-column: span 2; }
    .bh-featured__grid { grid-template-columns: 1fr; }
    .bh-map__wrap { grid-template-columns: 1fr; }
    .bh-legend { position: static; }
    .bh-hero__content { padding: 0 32px 64px; }
    .bh-hero__scroll-hint { right: 32px; bottom: 64px; }
}

@media (max-width: 720px) {
    main.page-horizontal.single-building > .page-section { padding: 100px 20px 60px; }
    main.page-horizontal > .page-section.bh-hero { padding: 0; }
    .bh-hero__content { padding: 0 20px 40px; }
    .bh-hero__meta { gap: 1.5rem; }
    .bh-hero__scroll-hint { display: none; }
    .bh-stats__grid, .bh-amenities__grid { grid-template-columns: 1fr; }
    .bh-stat-card--wide, .bh-stat-card--full { grid-column: span 1; }
    .bh-floors__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ======================================================================
   TOP & BOTTOM BARS — PREMIUM REDESIGN
   Scroll progress, restructured header, refined bottom nav, floating
   prev/next section buttons.
   ====================================================================== */

/* ---- Scroll progress bar (very top of viewport) --------------------- */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 2px;
    background: transparent;
    z-index: 1100;
    pointer-events: none;
}

.scroll-progress__fill {
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.12s var(--ease-out);
    box-shadow: 0 0 12px rgba(43, 115, 163, 0.45);
}

body.home .scroll-progress {
    display: none;
}

/* ---- Header rewrite (inner flex, brand/actions) --------------------- */

body:not(.home) .site-header {
    padding: 0;
    height: 68px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: saturate(1.4) blur(20px);
    -webkit-backdrop-filter: saturate(1.4) blur(20px);
    border-bottom: 1px solid var(--color-line);
    transition: background var(--transition-smooth), border-color var(--transition-smooth), height var(--transition-smooth);
}

body:not(.home) .site-header.scrolled {
    background: rgba(255, 255, 255, 0.92);
    height: 60px;
    border-bottom-color: var(--color-line-strong);
    padding: 0;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 40px;
    max-width: none;
    margin: 0;
    gap: 1.5rem;
}

.site-header__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__brand .site-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

body:not(.home) .site-header .site-logo img.logo-img,
body:not(.home) .site-header .logo-img {
    height: 30px;
    width: auto;
    display: block;
    transition: height var(--transition-smooth);
}

body:not(.home) .site-header.scrolled .logo-img {
    height: 26px;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
}

/* Language switcher */
.site-header__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-white);
}

.site-header__lang-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: 999px;
    transition: color var(--transition-smooth), background var(--transition-smooth);
}

.site-header__lang-item:hover {
    color: var(--color-primary);
}

.site-header__lang-item.is-active {
    color: var(--color-white);
    background: var(--color-accent);
    font-weight: 700;
}

/* Contact CTA */
.site-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 1rem 0 1.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.site-header__cta:hover {
    background: var(--bau-blue);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px var(--color-accent-glow);
}

.site-header__cta-arrow {
    transition: transform var(--transition-smooth);
}

.site-header__cta:hover .site-header__cta-arrow {
    transform: translateX(3px);
}

/* Hamburger refinement */
body:not(.home) .site-header .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    gap: 4px;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    flex-direction: column;
    cursor: pointer;
    transition: background var(--transition-smooth), border-color var(--transition-smooth);
}

body:not(.home) .site-header .menu-toggle:hover {
    border-color: var(--color-primary);
}

body:not(.home) .site-header .menu-toggle span {
    width: 16px;
    height: 1.5px;
    background-color: var(--bau-blue);
    transition: transform var(--transition-smooth), opacity var(--transition-smooth), width var(--transition-smooth);
}

/* Hide legacy .header-top remnants (we restructured header.php) */
.site-header .header-top,
.site-header .header-icons {
    display: none;
}

/* ---- Bottom-navigation pill refinement ---------------------------- */

body:not(.home) .bottom-navigation {
    left: 50%;
    right: auto;
    bottom: 28px;
    transform: translateX(-50%);
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 999;
}

.bottom-navigation__inner {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    box-shadow: var(--shadow-md), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.bottom-navigation__inner .nav-menu {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.bottom-navigation__inner .nav-menu li {
    display: inline-flex;
}

body:not(.home) .bottom-navigation .nav-menu li a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-light);
    border-radius: 999px;
    transition: color var(--transition-smooth), background var(--transition-smooth);
    opacity: 1;
}

body:not(.home) .bottom-navigation .nav-menu li a::after {
    display: none; /* remove legacy underline indicator; active styled via background pill */
}

body:not(.home) .bottom-navigation .nav-menu li a:hover {
    color: var(--color-primary);
    background: var(--color-accent-glow);
}

body:not(.home) .bottom-navigation .nav-menu li.current-menu-item a,
body:not(.home) .bottom-navigation .nav-menu li.current_page_item a {
    color: var(--color-white);
    background: var(--color-accent);
}

/* ---- Floating Prev / Next section arrows ------------------------- */

.section-nav {
    position: fixed;
    bottom: 32px;
    right: 40px;
    display: none;
    align-items: center;
    gap: 0.5rem;
    z-index: 999;
}

body.has-section-nav .section-nav {
    display: inline-flex;
}

.section-nav__btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-primary);
    cursor: pointer;
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth), opacity var(--transition-smooth);
    padding: 0;
}

.section-nav__btn:hover:not(:disabled) {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 0 0 4px var(--color-accent-glow);
}

.section-nav__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.section-nav__btn--prev:hover:not(:disabled) svg {
    transform: translateX(-2px);
    transition: transform var(--transition-smooth);
}

.section-nav__btn--next:hover:not(:disabled) svg {
    transform: translateX(2px);
    transition: transform var(--transition-smooth);
}

/* ---- Social fixed — refined pill ---------------------------------- */

body:not(.home) .social-fixed {
    right: auto;
    left: 40px;
    bottom: 32px;
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.375rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    box-shadow: var(--shadow-sm);
}

body:not(.home) .social-fixed a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--color-text-light);
    opacity: 1;
    transition: background var(--transition-smooth), color var(--transition-smooth);
}

body:not(.home) .social-fixed a:hover {
    background: var(--color-accent-glow);
    color: var(--color-accent-dark);
    transform: none;
}

/* ---- Hide scroll-hint chevron now that we have explicit nav ------- */

body.has-scrollable-sections:not(.home)::after {
    display: none;
}

.horizontal-progress {
    display: none !important; /* supplanted by top scroll-progress bar + section-nav */
}

/* ---- Mobile: stack & simplify ------------------------------------- */

@media (max-width: 900px) {
    body:not(.home) .site-header {
        height: 60px;
    }
    .site-header__inner {
        padding: 0 20px;
        gap: 0.75rem;
    }
    .site-header__lang {
        display: none;
    }
    /* Hidden on mobile — contact is reachable via the hamburger menu and the
       floating contact button, so the bare arrow CTA is redundant here. */
    .site-header__cta {
        display: none;
    }
    .section-nav {
        right: 20px;
        bottom: 24px;
    }
    .section-nav__btn {
        width: 40px;
        height: 40px;
    }
    body:not(.home) .social-fixed {
        left: 20px;
        bottom: 24px;
    }
    body:not(.home) .bottom-navigation {
        bottom: 84px;
    }
}

@media (max-width: 720px) {
    body:not(.home) .site-header {
        position: fixed;
        background: rgba(255, 255, 255, 0.96);
    }
    .section-nav {
        display: none;
    }
    body.has-section-nav .section-nav {
        display: none;
    }
    body:not(.home) .bottom-navigation {
        display: none;
    }
    body:not(.home) .social-fixed {
        display: none;
    }
    .scroll-progress {
        display: none;
    }
}

/* ---- Home page (front) keeps legacy treatment for hero ----------- */

body.home .site-header__lang,
body.home .site-header__cta {
    color: var(--color-white);
}

body.home .site-header__lang {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

body.home .site-header__lang-item {
    color: rgba(255, 255, 255, 0.72);
}

body.home .site-header__lang-item:hover {
    color: var(--color-white);
}

body.home .site-header__lang-item.is-active {
    color: var(--color-white);
    background: var(--color-accent);
}

body.home .site-header__cta {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

body.home .site-header__cta:hover {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
}

body.home .site-header .menu-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

body.home .site-header .menu-toggle span {
    background-color: var(--color-white);
}

body.home .site-header {
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.home .site-header.scrolled {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ======================================================================
   UNIFY HOME BARS WITH INNER PAGES
   Front page now uses the same top/bottom bar styling as inner pages
   (frosted cream glass, plum text, cyan accents). Keeps the cinematic
   hero video but overlays the unified chrome on top.
   ====================================================================== */

/* Home header overlays the hero video: transparent, with a soft top scrim
   for legibility over bright video frames. Darkens to a frosted bar once
   the user scrolls past the hero. */
body.home .site-header {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    height: 68px;
    padding: 0;
}

body.home .site-header.scrolled {
    background: rgba(0, 0, 0, 0.55);
    height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
}

body.home .site-header .site-logo img.logo-img,
body.home .site-header .logo-img {
    filter: none;
    height: 30px;
}

body.home .site-header.scrolled .logo-img {
    height: 26px;
}

/* Language switcher: light-on-video treatment */
body.home .site-header__lang {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

body.home .site-header__lang-item {
    color: rgba(255, 255, 255, 0.72);
}

body.home .site-header__lang-item:hover {
    color: var(--color-white);
}

body.home .site-header__lang-item.is-active {
    color: var(--color-white);
    background: var(--color-accent);
    font-weight: 700;
}

/* Contact CTA stays cyan on both */
body.home .site-header__cta {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

body.home .site-header__cta:hover {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
    box-shadow: 0 0 0 4px var(--color-accent-glow);
}

/* Hamburger: clean white bars (no box) over the video */
body.home .site-header .menu-toggle {
    background: transparent;
    border: none;
    width: auto;
    height: auto;
    padding: 6px;
}

body.home .site-header .menu-toggle span {
    background-color: var(--color-white);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

body.home .site-header .menu-toggle:hover span {
    background-color: var(--color-accent);
}

/* Bottom-navigation pill: same frosted light on home */
body.home .bottom-navigation {
    left: 50%;
    right: auto;
    bottom: 28px;
    transform: translateX(-50%);
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 999;
}

body.home .bottom-navigation .nav-menu li a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-light);
    border-radius: 999px;
    opacity: 1;
}

body.home .bottom-navigation .nav-menu li a::after {
    display: none;
}

body.home .bottom-navigation .nav-menu li a:hover {
    color: var(--color-primary);
    background: var(--color-accent-glow);
}

body.home .bottom-navigation .nav-menu li.current-menu-item a,
body.home .bottom-navigation .nav-menu li.current_page_item a {
    color: var(--color-white);
    background: var(--color-accent);
}

/* Social icons: same light pill treatment */
body.home .social-fixed {
    right: auto;
    left: 40px;
    bottom: 32px;
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.375rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    box-shadow: var(--shadow-sm);
}

body.home .social-fixed a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--color-text-light);
    opacity: 1;
}

body.home .social-fixed a:hover {
    background: var(--color-accent-glow);
    color: var(--color-accent-dark);
}

/* Scroll progress bar: enable on home too */
body.home .scroll-progress {
    display: block;
}

/* Re-enable responsive hiding on mobile */
@media (max-width: 720px) {
    body.home .site-header {
        position: fixed;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    }
    body.home .site-header.scrolled {
        background: rgba(0, 0, 0, 0.6);
    }
    body.home .bottom-navigation,
    body.home .social-fixed {
        display: none;
    }
}

/* ======================================================================
   SINGLE FLOOR / APARTMENT — extensions to the bh-* system
   New classes for plan, gallery and prose blocks.
   ====================================================================== */

/* --- Apartment plan image showcase ---------------------------------- */

.bh-plan-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream);
    border: 1px solid var(--color-line);
    border-radius: 5px;
    padding: 2rem;
    overflow: hidden;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    box-shadow: var(--shadow-xs);
}

.bh-plan-image {
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

/* --- Apartment gallery (bh-* namespace) ---------------------------- */

main.page-horizontal > .page-section.bh-gallery {
    background: var(--color-paper);
}

.bh-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.875rem;
    flex: 1;
    align-content: start;
    overflow-y: auto;
    padding: 2px;
}

.bh-gallery__thumb {
    border: none;
    padding: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
    aspect-ratio: 4/3;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    box-shadow: var(--shadow-xs);
}

.bh-gallery__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(43, 115, 163, 0.4) 100%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
}

.bh-gallery__thumb:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--color-accent);
}

.bh-gallery__thumb:hover::after {
    opacity: 1;
}

.bh-gallery__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s var(--ease-out);
}

.bh-gallery__thumb:hover .bh-gallery__thumb-img {
    transform: scale(1.05);
}

/* --- Prose block (apartment description) ---------------------------- */

.bh-prose {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--color-text);
    width: 100%;
}

.bh-prose p {
    margin: 0 0 1.25em;
}

.bh-prose p:last-child {
    margin-bottom: 0;
}

.bh-prose strong {
    color: var(--color-primary);
    font-weight: 600;
}

.bh-prose a {
    color: var(--color-accent-dark);
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 2px;
    transition: background-size var(--transition-smooth), color var(--transition-smooth);
}

.bh-prose a:hover {
    color: var(--color-primary);
    background-size: 100% 2px;
}

/* --- Lightbox theme tweaks for cyan brand --------------------------- */

.apartment-lightbox {
    background: rgba(43, 115, 163, 0.94);
}

.apartment-lightbox__close,
.apartment-lightbox__prev,
.apartment-lightbox__next {
    color: var(--color-white);
    transition: color var(--transition-smooth);
}

.apartment-lightbox__close:hover,
.apartment-lightbox__prev:hover,
.apartment-lightbox__next:hover {
    color: var(--color-accent);
}

.apartment-lightbox__counter {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-wider);
}

/* --- Apartment-specific hero accent (stats row with status/price) --- */

main.page-horizontal.single-apartment > .page-section.bh-hero .bh-hero__address {
    gap: 1rem;
    flex-wrap: wrap;
}

main.page-horizontal.single-apartment > .page-section.bh-hero .status-badge {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}

main.page-horizontal.single-apartment > .page-section.bh-hero .status-badge--available {
    color: #7dffc9;
    border-color: rgba(125, 255, 201, 0.45);
    background: rgba(125, 255, 201, 0.08);
}

main.page-horizontal.single-apartment > .page-section.bh-hero .status-badge--sold {
    color: #ff9a95;
    border-color: rgba(255, 154, 149, 0.45);
    background: rgba(255, 154, 149, 0.08);
}

/* --- Responsive tweaks for floor/apartment --------------------------- */

@media (max-width: 900px) {
    .bh-gallery__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .bh-plan-wrap { padding: 1rem; }
}

@media (max-width: 720px) {
    .bh-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* ======================================================================
   MOBILE OPTIMIZATION — Comprehensive
   Stacks horizontal layout to natural vertical scroll, tightens typography
   and spacing, adds floating contact FAB for inner pages, simplifies heavy
   paint (backdrop-filter, grain) to keep scroll smooth on low-end devices.
   ====================================================================== */

/* -------- Tablet (≤900px) polish -------- */

@media (max-width: 900px) {
    /* Slightly reduce section paddings for richer content visibility */
    main.page-horizontal.single-building > .page-section,
    main.page-horizontal.single-floor > .page-section,
    main.page-horizontal.single-apartment > .page-section {
        padding: 96px 40px 72px;
    }

    .bh-section-inner {
        gap: 2rem;
    }

    .bh-overview__grid,
    .bh-location__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .bh-overview__specs {
        grid-template-columns: 1fr 1fr;
    }

    .bh-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bh-stat-card--wide,
    .bh-stat-card--full {
        grid-column: span 2;
    }

    .bh-amenities__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bh-featured__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bh-map__wrap {
        grid-template-columns: 1fr;
    }

    .bh-legend {
        position: static;
    }
}

/* -------- Mobile (≤720px) — full vertical layout -------- */

@media (max-width: 720px) {

    /* === Body & container reset === */
    html,
    body {
        overflow: auto;
        height: auto;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    body:not(.home) .site-footer,
    body.home .site-footer {
        display: block;
    }

    /* === Unlock horizontal layout to vertical === */
    main.page-horizontal {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        overflow: visible;
        padding: 0;
    }

    main.page-horizontal > .page-section,
    main.page-horizontal.single-building > .page-section,
    main.page-horizontal.single-floor > .page-section,
    main.page-horizontal.single-apartment > .page-section {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: auto;
        flex: 0 0 auto;
        padding: 72px 20px 48px;
        overflow: visible;
    }

    /* Remove grain overlay on mobile (paint heavy) */
    main.page-horizontal > .page-section::before {
        display: none;
    }

    /* === Header: sleek fixed bar === */
    body .site-header,
    body:not(.home) .site-header {
        position: fixed;
        height: 56px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--color-line);
        z-index: 1050;
    }

    /* Home stays transparent over the hero video (scrim for legibility) */
    body.home .site-header {
        position: fixed;
        height: 56px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
        z-index: 1050;
    }

    body.home .site-header.scrolled {
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: saturate(1.4) blur(12px);
        -webkit-backdrop-filter: saturate(1.4) blur(12px);
    }

    .site-header__inner {
        padding: 0 16px;
        gap: 0.5rem;
    }

    body:not(.home) .site-header .site-logo img.logo-img,
    body.home .site-header .site-logo img.logo-img,
    body:not(.home) .site-header .logo-img,
    body.home .site-header .logo-img {
        height: 26px;
    }

    .site-header__lang {
        display: none;
    }

    .site-header__cta {
        height: 34px;
        padding: 0 0.75rem;
        border-radius: 999px;
    }

    .site-header__cta-label {
        display: none;
    }

    .site-header__cta-arrow {
        width: 14px;
        height: 14px;
    }

    body:not(.home) .site-header .menu-toggle {
        width: 36px;
        height: 36px;
        background: var(--color-white);
        border: 1px solid var(--color-line);
    }

    /* Home hamburger: clean white bars (no box) over the video */
    body.home .site-header .menu-toggle {
        width: auto;
        height: auto;
        padding: 6px;
        background: transparent;
        border: none;
    }

    body.home .site-header .menu-toggle span {
        background-color: var(--color-white);
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    }

    body:not(.home) .site-header .menu-toggle span,
    body.home .site-header .menu-toggle span {
        width: 14px;
    }

    /* === Scroll progress: keep visible on mobile (useful indicator) === */
    body .scroll-progress {
        display: block;
        height: 2px;
    }

    /* === Hide desktop-only floating chrome === */
    .section-nav,
    body.has-section-nav .section-nav {
        display: none !important;
    }

    body .bottom-navigation,
    body:not(.home) .bottom-navigation,
    body.home .bottom-navigation {
        display: none;
    }

    body .social-fixed,
    body:not(.home) .social-fixed,
    body.home .social-fixed {
        display: none;
    }

    body.has-scrollable-sections:not(.home)::after,
    body.has-scrollable-sections::after {
        display: none;
    }

    /* === HERO (mobile) === */
    main.page-horizontal > .page-section.bh-hero {
        padding: 0;
        min-height: 88vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        overflow: hidden;
    }

    .bh-hero__image {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .bh-hero__image img,
    .bh-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bh-hero__overlay {
        background:
            linear-gradient(to top, rgba(43, 115, 163, 0.92) 0%, rgba(43, 115, 163, 0.45) 55%, rgba(43, 115, 163, 0.55) 100%);
    }

    .bh-hero__content {
        position: relative;
        z-index: 1;
        padding: 84px 20px 48px;
        max-width: none;
        width: 100%;
        align-self: stretch;
        margin-top: auto;
        gap: 1rem;
    }

    .bh-hero__eyebrow {
        font-size: 0.625rem;
        gap: 0.625rem;
    }

    .bh-hero__eyebrow-divider {
        width: 24px;
    }

    .bh-hero__title {
        font-size: clamp(2rem, 9vw, 3.25rem);
        line-height: 1;
    }

    .bh-hero__address {
        font-size: 0.8125rem;
        gap: 0.625rem;
        flex-wrap: wrap;
    }

    .bh-hero__meta {
        gap: 1.25rem;
        padding-top: 0.75rem;
    }

    .bh-hero__meta-value {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .bh-hero__meta-label {
        font-size: 0.625rem;
        letter-spacing: 0.15em;
    }

    .bh-hero__scroll-hint {
        display: none;
    }

    /* === Section headings (mobile) === */
    .bh-section-inner {
        gap: 1.5rem;
    }

    .bh-section-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .bh-overview__title {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .bh-eyebrow {
        font-size: 0.625rem;
        gap: 0.5rem;
    }

    .bh-eyebrow::before {
        width: 20px;
    }

    /* === Overview (mobile) === */
    .bh-overview__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0;
    }

    .bh-overview__specs {
        grid-template-columns: 1fr;
    }

    .bh-spec {
        padding: 0.875rem 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-right: none !important;
    }

    .bh-spec__value {
        font-size: 0.9375rem;
    }

    /* === Stats dashboard (mobile) === */
    .bh-stats__grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .bh-stat-card {
        min-height: auto;
        padding: 1.25rem;
    }

    .bh-stat-card__number {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .bh-stat-card--wide,
    .bh-stat-card--full {
        grid-column: span 1;
    }

    .bh-stat-card__range {
        gap: 0.5rem;
    }

    .bh-stat-card__range-from,
    .bh-stat-card__range-to {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .bh-stat-card__range-divider {
        max-width: 40px;
    }

    .bh-room-mix {
        gap: 0.625rem;
    }

    .bh-room-mix__item {
        padding: 0.5rem 0.75rem;
    }

    .bh-room-mix__rooms {
        font-size: 1rem;
    }

    /* === Map (mobile) === */
    main.page-horizontal > .page-section.bh-map {
        padding: 72px 16px 48px;
    }

    .bh-map__wrap {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .bh-map__canvas {
        padding: 0.5rem;
        min-height: 50vh;
    }

    .bh-legend {
        position: static;
        padding: 1rem;
    }

    /* === Floors / apartment cards (mobile) === */
    .bh-floors__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.625rem;
    }

    .bh-floor-card {
        padding: 1rem 0.875rem;
        gap: 0.875rem;
    }

    .bh-floor-card__number {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .bh-floor-card__body {
        gap: 0.5rem;
    }

    /* === Amenities (mobile) === */
    .bh-amenities__grid {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .bh-amenity {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.125rem;
        min-height: auto;
    }

    .bh-amenity__icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .bh-amenity__icon svg {
        width: 20px;
        height: 20px;
    }

    .bh-amenity__title {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .bh-amenity__desc {
        font-size: 0.8125rem;
    }

    /* Put icon left, text right on mobile */
    .bh-amenity {
        flex-direction: row;
    }
    .bh-amenity > * {
        display: block;
    }

    /* === Featured apartments (mobile) === */
    .bh-featured__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .bh-featured-card__body {
        padding: 1.125rem;
        gap: 0.625rem;
    }

    .bh-featured-card__number {
        font-size: 1.0625rem;
    }

    .bh-featured-card__price {
        font-size: 1.25rem;
        padding: 0.625rem 0;
    }

    .bh-featured__link {
        padding: 0.875rem 1.5rem;
        font-size: 0.6875rem;
    }

    /* === Plan image (mobile) === */
    .bh-plan-wrap {
        padding: 1rem;
        max-width: 100%;
    }

    .bh-plan-image {
        max-height: 50vh;
    }

    /* === Gallery (mobile) === */
    .bh-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    /* === Prose (mobile) === */
    .bh-prose {
        font-size: 1rem;
        line-height: 1.75;
    }

    /* === Location (mobile) === */
    .bh-location__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0;
    }

    .bh-location__address {
        padding: 1rem 1.125rem;
        font-size: 0.9375rem;
    }

    .bh-nearby-list li {
        padding: 0.75rem 0;
        font-size: 0.875rem;
    }

    /* === CTA (mobile) === */
    main.page-horizontal > .page-section.bh-cta {
        padding: 72px 20px 64px;
    }

    .bh-cta__title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    .bh-cta__desc {
        font-size: 0.9375rem;
    }

    .bh-cta__actions {
        flex-direction: column;
        width: 100%;
        gap: 0.625rem;
    }

    .bh-cta__btn {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
    }

    /* === Archive apartment filter (mobile) === */
    main.page-horizontal .af-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 0;
        gap: 1rem;
    }

    /* The entrance fade-up animation leaves an identity transform on the
       island root, which would make the sheet's position:fixed resolve
       against the root instead of the viewport. Clear it on mobile so the
       bottom sheet anchors to the viewport. (!important beats the animation
       fill state.) */
    main.page-horizontal #apartment-filter-root {
        transform: none !important;
        animation: none !important;
    }

    /* Filters as a bottom sheet on mobile. The WRAP is the full-viewport
       fixed overlay; the sheet sits at its bottom via flexbox (no nested
       fixed positioning, which was resolving against shifted containing
       blocks). */
    /* Portalled to <body> on mobile, so selectors are NOT scoped under
       main.page-horizontal. */
    .af-sidebar-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        z-index: 100000;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        pointer-events: none;
        visibility: hidden;
    }
    .af-sidebar-wrap.af-sidebar-wrap--open {
        pointer-events: auto;
        visibility: visible;
    }

    .af-sidebar-overlay {
        position: absolute;
        inset: 0;
        background: rgba(43, 115, 163, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1;
        animation: af-overlay-in 0.25s ease;
    }
    @keyframes af-overlay-in { from { opacity: 0; } to { opacity: 1; } }

    /* Slide via `bottom` (NOT transform): a transform on this absolutely
       positioned, left/right:0 element triggers a Chromium width bug that
       shrinks it to ~85%. Animating `bottom` avoids the transform entirely. */
    /* Width via 100vw (not left/right insets): in this layout the inset-based
       width resolves to ~85% of the viewport, but the vw unit is correct. */
    .af-sidebar-touch-wrap {
        position: fixed;
        left: 0;
        right: auto;
        /* `top: auto` overrides the bundled frontend.css left-drawer rule, which
           sets top:0 and would otherwise anchor this sheet to the top. */
        top: auto;
        bottom: -100%;
        z-index: 100001;
        width: 100vw;
        max-width: none;
        box-sizing: border-box;
        max-height: 86vh;
        display: flex;
        flex-direction: column;
        background: var(--color-white);
        border-radius: 6px 6px 0 0;
        box-shadow: 0 -14px 44px rgba(43, 115, 163, 0.28);
        /* No bottom padding — the sticky action bar owns the sheet's bottom. */
        padding: 10px 0 0;
        transition: bottom 0.34s cubic-bezier(0.32, 0.72, 0, 1);
        touch-action: pan-y;
    }
    .af-sidebar-wrap--open .af-sidebar-touch-wrap {
        bottom: 0;
    }

    /* Grab handle */
    .af-sidebar-touch-wrap::before {
        content: '';
        flex: none;
        width: 42px;
        height: 4px;
        margin: 0 auto 6px;
        border-radius: 99px;
        background: var(--color-line-strong, #cfd4da);
    }

    .af-sidebar-close {
        position: absolute;
        top: 12px;
        right: 14px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: var(--color-cream);
        color: var(--color-primary);
        cursor: pointer;
    }

    /* The filter list scrolls inside the sheet; full width with padding. */
    /* Global (not main-scoped) — the sheet is portalled to <body>. */
    .af-sidebar-touch-wrap .af-sidebar {
        position: static;
        /* Take the remaining height and scroll inside, leaving the sticky
           action bar pinned below. */
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        width: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 1.25rem 0.25rem;
        box-sizing: border-box;
        /* The sheet slides via the wrapper's `bottom`; kill the bundled
           left-drawer translateX so the panel never shifts horizontally. */
        transform: none;
        box-shadow: none;
    }

    /* Sticky filter actions (apply / clear) at the bottom of the sheet */
    .af-sidebar-actions {
        display: flex;
        flex: none;
        gap: 0.6rem;
        padding: 0.75rem 1.25rem max(0.75rem, env(safe-area-inset-bottom));
        border-top: 1px solid var(--color-line);
        background: var(--color-white);
        box-shadow: 0 -6px 20px rgba(43, 115, 163, 0.07);
    }
    .af-sidebar-actions__btn {
        min-height: 48px;
        border-radius: 5px;
        font-family: var(--font-heading);
        font-size: 0.9375rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    }
    .af-sidebar-actions__btn--clear {
        flex: 0 0 38%;
        border: 1px solid var(--color-line);
        background: var(--color-white);
        color: var(--color-text-light);
    }
    .af-sidebar-actions__btn--clear:active { background: var(--color-secondary); }
    .af-sidebar-actions__btn--apply {
        flex: 1 1 auto;
        border: none;
        background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
        color: #fff;
        box-shadow: 0 6px 16px rgba(43, 115, 163, 0.3);
    }
    .af-sidebar-actions__btn--apply:active { transform: translateY(1px); }

    main.page-horizontal .af-main {
        order: 1;
        overflow: visible;
    }

    main.page-horizontal .af-grid-wrap {
        overflow: visible;
    }

    /* Sort bar — refined stacked layout on phones: emphasised count, the sort
       control becomes a full-width rounded pill. */
    main.page-horizontal .af-sort-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
    main.page-horizontal .af-sort-bar__count {
        font-size: 0.9375rem;
        color: var(--color-text-muted);
        letter-spacing: 0;
        text-transform: none;
    }
    main.page-horizontal .af-sort-bar__count strong {
        color: var(--color-primary);
        font-weight: 800;
        font-size: 1.0625rem;
    }
    main.page-horizontal .af-sort-bar__sort {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
    }
    main.page-horizontal .af-sort-bar__sort-label {
        flex: none;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: var(--tracking-widest);
        text-transform: uppercase;
        color: var(--color-accent-dark);
    }
    main.page-horizontal .af-sort-bar__select {
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 5px;
        border: 1px solid var(--color-line);
        background-color: var(--color-secondary);
        background-position: right 0.9rem center;
        padding: 0.7rem 2.2rem 0.7rem 0.95rem;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--color-primary);
    }
    main.page-horizontal .af-sort-bar__select:focus {
        background-color: var(--color-white);
        border-color: var(--color-accent);
    }

    /* Two compact columns on mobile so many units are scannable at once
       (one giant card per screen made browsing 311 units painful). */
    main.page-horizontal .af-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
    }

    main.page-horizontal .af-grid .apartment-card {
        padding: 0.625rem 0.7rem 0.75rem;
    }

    /* Smaller branded placeholder in the 2-col layout */
    main.page-horizontal .af-grid .apartment-card__image,
    main.page-horizontal .af-grid .apartment-card__placeholder {
        aspect-ratio: 5 / 4;
        margin-bottom: 0.5rem;
    }
    .apartment-card__placeholder-num { font-size: 0.6875rem; }
    .apartment-card__placeholder svg { width: 26px; height: 26px; }

    /* Stack number above the status badge so neither wraps awkwardly in the
       narrow 2-col card. */
    main.page-horizontal .af-grid .apartment-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    main.page-horizontal .apartment-card__number {
        font-size: 1rem;
        white-space: nowrap;
    }
    main.page-horizontal .apartment-card__details { font-size: 0.75rem; }
    main.page-horizontal .apartment-card__price {
        font-size: 1.0625rem;
        padding-top: 0.5rem;
    }

    main.page-horizontal .af-sidebar {
        position: static;
        max-height: none;
    }

    /* === Page content (page.php / single.php on mobile) === */
    main.page-horizontal > .page-section .section-title {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    main.page-horizontal > .page-section .page-content {
        font-size: 0.9375rem;
        line-height: 1.7;
    }

    /* === Archive hero typography (mobile) === */
    main.page-horizontal > .page-section.archive-apartment__header .archive-apartment__title,
    main.page-horizontal > .page-section.archive-building__header .archive-building__title {
        font-size: clamp(1.875rem, 8vw, 2.5rem);
    }

    main.page-horizontal > .page-section.archive-apartment__header .archive-apartment__breadcrumb {
        position: static;
        transform: none;
        margin-bottom: 0.75rem;
    }

    /* === Building card on mobile === */
    .archive-building__grid,
    main.page-horizontal .archive-building__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .building-card__image {
        height: 200px;
    }

    /* === Mobile contact FAB — floating call/email quick actions === */
    .mobile-contact-fab {
        position: fixed;
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--color-accent);
        color: var(--color-white);
        box-shadow: 0 10px 28px rgba(43, 115, 163, 0.38), 0 2px 8px rgba(15, 15, 15, 0.14);
        z-index: 1040;
        text-decoration: none;
        transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    }

    .mobile-contact-fab:hover,
    .mobile-contact-fab:active {
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 14px 36px rgba(43, 115, 163, 0.5), 0 4px 12px rgba(15, 15, 15, 0.18);
    }

    .mobile-contact-fab svg { display: block; }
}

/* Hide FAB on desktop */
@media (min-width: 901px) {
    .mobile-contact-fab { display: none; }
}

/* -------- Small mobile (≤480px) — further compact -------- */

@media (max-width: 480px) {
    main.page-horizontal > .page-section,
    main.page-horizontal.single-building > .page-section,
    main.page-horizontal.single-floor > .page-section,
    main.page-horizontal.single-apartment > .page-section {
        padding: 64px 16px 40px;
    }

    .bh-hero__content {
        padding: 72px 16px 36px;
    }

    .bh-floors__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .bh-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }

    .bh-featured-card__image {
        aspect-ratio: 4/3;
    }

    .bh-stat-card {
        padding: 1rem;
    }

    .bh-room-mix {
        gap: 0.5rem;
    }

    .bh-room-mix__item {
        padding: 0.375rem 0.625rem;
    }

    main.page-horizontal > .page-section.bh-cta {
        padding: 64px 16px 48px;
    }

    /* Lightbox: full-screen on small devices */
    .apartment-lightbox__close,
    .apartment-lightbox__prev,
    .apartment-lightbox__next {
        width: 44px;
        height: 44px;
    }
}

/* -------- Mobile touch: honor prefers-reduced-motion -------- */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    /* Keep gentle image zoom on tap-and-hold (webkit) but not too dramatic */
    .bh-featured-card:hover .bh-featured-card__image img,
    .bh-gallery__thumb:hover .bh-gallery__thumb-img,
    .building-card:hover .building-card__image {
        transform: none;
    }
}

/* -------- Mobile menu overlay enhancements -------- */

@media (max-width: 720px) {
    /* Translucent glass like the desktop menu — lets the page blur through
       instead of a flat opaque fill. */
    .mobile-menu-overlay {
        background: rgba(43, 115, 163, 0.55);
        backdrop-filter: saturate(1.4) blur(20px);
        -webkit-backdrop-filter: saturate(1.4) blur(20px);
    }

    .mobile-menu-overlay .nav-menu {
        gap: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .mobile-menu-overlay .nav-menu li a {
        color: var(--color-white);
        font-family: var(--font-heading);
        font-size: clamp(1.5rem, 7vw, 2.25rem);
        font-weight: 700;
        letter-spacing: var(--tracking-tight);
        text-transform: none;
        padding: 0.5rem 1rem;
        transition: color var(--transition-smooth);
    }

    .mobile-menu-overlay .nav-menu li a:hover,
    .mobile-menu-overlay .nav-menu li.current-menu-item a {
        color: var(--color-accent);
    }

    .mobile-menu-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: var(--color-white);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        cursor: pointer;
    }

    .mobile-menu-close:hover {
        background: var(--color-accent);
        color: var(--color-white);
        border-color: var(--color-accent);
    }
}

/* -------- Reduced-data / low-power hints -------- */

@media (max-width: 720px) {
    /* Lighter backdrop filter on mobile (paint heavy) */
    body:not(.home) .site-header {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Home: blur only once scrolled — keep the hero video crisp at the top */
    body.home .site-header.scrolled {
        backdrop-filter: saturate(1.4) blur(12px);
        -webkit-backdrop-filter: saturate(1.4) blur(12px);
    }
}

/* ======================================================================
   APARTMENT DETAIL — unified hero / specs / plan (Anaria-style)
   Single-view layout: left sidebar (info) + right plan canvas.
   ====================================================================== */

main.page-horizontal.single-apartment > .page-section.apt-detail {
    padding: 80px 56px 32px;
    background: var(--color-cream);
}

.apt-detail__grid {
    display: grid;
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: 2.25rem;
    width: 100%;
    max-width: 1440px;
    max-height: calc(100vh - 140px);
    margin: 0 auto;
    align-items: stretch;
    min-height: 0;
}

/* -------- Left sidebar -------- */

.apt-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 50% 20%, #fff 0%, var(--color-cream) 100%);
    border: 1px solid var(--color-line);
    border-radius: 6px;
}

/* Editorial section heading — reusable across sidebar & plan area */
.apt-section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.5rem 0;
}

.apt-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    line-height: 1;
}

.apt-heading__rule {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--color-accent);
    flex-shrink: 0;
}

.apt-heading__label {
    font-weight: 600;
    font-size: 0.625rem;
    color: var(--color-accent);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.apt-heading__sep {
    color: var(--color-line-strong);
    font-weight: 300;
    font-size: 0.85rem;
    opacity: 0.6;
}

.apt-heading__title {
    color: var(--color-primary);
    font-weight: 400;
    font-size: 0.9375rem;
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

.apt-brand {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-line);
}

.apt-brand__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: 0.28em;
    line-height: 1;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
}

.apt-brand__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s var(--ease-out);
}

.apt-brand__title a:hover { color: var(--color-accent); }

.apt-brand__address {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    margin: 0;
}

.apt-brand__address a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s var(--ease-out);
}

.apt-brand__address a:hover {
    color: var(--color-accent-dark);
}

.apt-brand__dot {
    display: inline-block;
    margin: 0 0.5rem;
    color: var(--color-line-strong);
    opacity: 0.6;
}

.apt-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.apt-floor-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--color-text-light);
    line-height: 1;
}

.apt-floor-pill__label {
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.apt-floor-pill__value {
    position: relative;
    padding-left: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.apt-floor-pill__value::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: var(--color-line-strong);
    opacity: 0.5;
}

.apt-meta-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
}

.apt-meta-list li { line-height: 1.45; }

/* Apartment area stats (total / interior / balcony) */
.apt-area-stats {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
}
.apt-area-stats__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.5rem;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    background: var(--color-cream);
    text-align: center;
}
.apt-area-stats__item--total {
    border-color: var(--color-accent);
    background: var(--color-accent-glow);
}
.apt-area-stats__value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.apt-area-stats__unit {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.apt-area-stats__label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}
@media (max-width: 480px) {
    .apt-area-stats__value { font-size: 0.95rem; }
    .apt-area-stats__item { padding: 0.6rem 0.35rem; }
}

.apt-meta-list strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* -------- Rooms list -------- */

.apt-rooms-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: relative;
    border-left: 2px solid var(--color-accent);
}

.apt-rooms-list__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.apt-rooms-list__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.apt-rooms-list__name { color: var(--color-primary); }

.apt-rooms-list__sep {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.apt-rooms-list__area {
    color: var(--color-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* -------- Total value block -------- */

.apt-total {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 5px;
}

.apt-total__price {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
}

.apt-total__price strong {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2rem;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

.apt-total__currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bau-blue);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.apt-total__breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    margin-top: 0.35rem;
}

.apt-pp {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.apt-pp__label {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
}

.apt-pp__value {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

/* -------- PDF Plan link -------- */

.apt-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.35rem 0;
    letter-spacing: 0.01em;
    transition: color 0.25s var(--ease-out);
    align-self: flex-start;
}

.apt-pdf:hover { color: var(--color-accent-dark); }

.apt-pdf__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bau-blue);
    color: var(--color-white);
    flex-shrink: 0;
}

/* -------- Book an apartment CTA -------- */

.apt-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 1.25rem;
    margin-top: 0.25rem;
    background: var(--bau-blue);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    box-shadow: var(--shadow-sm);
}

.apt-book:hover {
    background: #000;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* -------- Sidebar footer (share / back) -------- */

.apt-sidebar__footer {
    padding-top: 0.85rem;
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--color-line);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.apt-share {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 0;
    padding: 0.35rem 0;
    color: var(--color-text-light);
    cursor: pointer;
    transition: color 0.2s var(--ease-out);
    font: inherit;
}

.apt-share:hover,
.apt-share.is-copied { color: var(--color-accent-dark); }

.apt-share.is-copied::after {
    content: " ✓";
    color: var(--color-accent-dark);
}

.apt-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    text-decoration: none;
    transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.apt-back:hover {
    color: var(--color-accent-dark);
    transform: translateX(-2px);
}

/* -------- Sidebar apartment render (own plan image) -------- */

/* Transparent container — the render PNG has no background, so it floats on
   the page rather than sitting on a white card. Clickable to enlarge. */
.apt-sidebar__render {
    margin-top: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    position: relative;
    cursor: zoom-in;
}

.apt-sidebar__render-img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(43, 115, 163, 0.16));
    transition: transform 0.3s var(--ease-out);
}

.apt-sidebar__render:hover .apt-sidebar__render-img {
    transform: scale(1.03);
}

/* Zoom hint badge */
.apt-sidebar__render::after {
    content: '';
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(43, 115, 163, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E") center/16px no-repeat;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.apt-sidebar__render:hover::after { opacity: 1; }

/* ===== Render zoom overlay (apartment plan render fullscreen) ========= */
.apt-render-zoom {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5vw;
    background: rgba(43, 115, 163, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: zoom-out;
}
.apt-render-zoom.is-open { display: flex; animation: af-overlay-in 0.2s ease; }
.apt-render-zoom__img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.45));
}
.apt-render-zoom__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.apt-render-zoom__close:hover { background: rgba(255, 255, 255, 0.26); }
@media (max-width: 720px) {
    .apt-render-zoom { padding: 16px; }
    .apt-render-zoom__img { max-width: 96vw; max-height: 80vh; }
}

/* -------- Plan area (right) -------- */

.apt-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 6px;
    overflow: hidden;
    min-height: 0;
}

.apt-plan__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-white);
    flex-wrap: wrap;
}

.apt-plan__stats {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.apt-plan__stat {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
}

.apt-plan__stat sup {
    font-size: 0.6em;
    font-weight: 500;
    vertical-align: super;
    margin-left: 1px;
}

.apt-plan__stat--price { color: var(--color-primary); }

.apt-plan__divider {
    color: var(--color-line-strong);
    font-weight: 300;
}

.apt-plan__floor-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--bau-blue);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.apt-plan__floor-chip svg { opacity: 0.8; }

.apt-plan__actions {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.apt-favorite {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-light);
    letter-spacing: 0.01em;
    transition: color 0.2s var(--ease-out);
}

.apt-favorite:hover { color: var(--color-primary); }

.apt-favorite svg {
    transition: fill 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.apt-favorite.is-active {
    color: var(--color-accent-dark);
}

.apt-favorite.is-active svg {
    fill: var(--color-accent);
    color: var(--color-accent);
}

/* View tabs — 3D | 2D | 360° */

.apt-view-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}

.apt-view-tab {
    background: none;
    border: 0;
    padding: 0.25rem 0.25rem;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: color 0.2s var(--ease-out);
    font: inherit;
}

.apt-view-tab:hover:not([disabled]) { color: var(--color-primary); }

.apt-view-tab.is-active {
    color: var(--color-accent);
    position: relative;
}

.apt-view-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
}

.apt-view-tab[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
}

.apt-view-tabs__sep {
    color: var(--color-line-strong);
    font-weight: 300;
}

/* -------- Plan image display -------- */

.apt-plan__image-wrap {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 320px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, #fff 0%, var(--color-cream) 100%);
}

.apt-plan__image {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(43, 115, 163, 0.08));
}

.apt-plan__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.5;
}

.apt-plan__placeholder span {
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

/* -------- Plan bottom overlay: compass + position -------- */

.apt-plan__bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    pointer-events: none;
}

.apt-plan__bottom > * { pointer-events: auto; }

/* Compass */

.apt-compass {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.apt-compass__rose {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-line-strong);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
}

.apt-compass__pt {
    position: absolute;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.625rem;
    color: var(--color-primary);
    letter-spacing: 0.04em;
}

.apt-compass__pt--n { top: 3px;    left: 50%; transform: translateX(-50%); }
.apt-compass__pt--s { bottom: 3px; left: 50%; transform: translateX(-50%); }
.apt-compass__pt--e { right: 4px;  top: 50%;  transform: translateY(-50%); }
.apt-compass__pt--w { left: 4px;   top: 50%;  transform: translateY(-50%); }

.apt-compass__arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 14px;
    background: var(--color-accent);
    border-radius: 1px;
    transform: translate(-50%, -100%);
    transform-origin: bottom center;
}

.apt-compass__label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

/* Apartment position on floor */

.apt-position {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--color-text-muted);
    transition: color 0.2s var(--ease-out);
}

.apt-position:hover { color: var(--color-primary); }

.apt-position__label {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.apt-position__silhouette {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    opacity: 0.9;
}

/* -------- Plan split: floor render (top) + amenities (bottom) -------- */

.apt-plan--split {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 50% 20%, #fff 0%, var(--color-cream) 100%);
}

.apt-plan__floor {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: transparent;
}

.apt-plan__amenities {
    flex: 0 0 auto;
}

/* Amenities editorial heading — same pattern as floor heading */
.apt-amen-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0;
    font-family: var(--font-heading);
    line-height: 1;
}

.apt-amen-heading__rule {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--color-accent);
    flex-shrink: 0;
}

.apt-amen-heading__label {
    font-weight: 600;
    font-size: 0.6875rem;
    color: var(--color-accent);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.apt-amen-heading__sep {
    color: var(--color-line-strong);
    font-weight: 300;
    font-size: 0.9rem;
    opacity: 0.6;
}

.apt-amen-heading__title {
    color: var(--color-primary);
    font-weight: 400;
    font-size: 1.0625rem;
    letter-spacing: var(--tracking-tight);
}

.apt-amen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.apt-amen-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.65rem 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 5px;
    transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    text-align: center;
    min-height: 78px;
}

.apt-amen-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.apt-amen-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--color-text-muted);
    transition: color 0.25s var(--ease-out);
}

.apt-amen-card__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.apt-amen-card:hover .apt-amen-card__icon {
    color: var(--color-accent-dark);
}

.apt-amen-card__title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-light);
    letter-spacing: 0.01em;
    line-height: 1.25;
}

/* -------- Floor render with active apartment highlight -------- */

.apt-plan--floor {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 50% 50%, #fff 0%, var(--color-cream) 100%);
}

.apt-floor-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
}

/* Floor render title — editorial eyebrow above the plan image */
.apt-floor-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0;
    font-family: var(--font-heading);
    line-height: 1;
    align-self: flex-start;
}

.apt-floor-heading__rule {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--color-accent);
    flex-shrink: 0;
}

.apt-floor-heading__label {
    font-weight: 600;
    font-size: 0.6875rem;
    color: var(--color-accent);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.apt-floor-heading__sep {
    color: var(--color-line-strong);
    font-weight: 300;
    font-size: 0.9rem;
    opacity: 0.6;
}

.apt-floor-heading__num {
    color: var(--color-primary);
    font-weight: 400;
    font-size: 1.0625rem;
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

.apt-floor-wrap__img {
    display: block;
    max-width: 100%;
    max-height: 42vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
    filter: drop-shadow(0 16px 32px rgba(43, 115, 163, 0.08));
}

.apt-floor-wrap__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.apt-floor-wrap__svg a,
.apt-floor-wrap__svg polygon { pointer-events: auto; }

.apt-floor-hotspot {
    fill: var(--color-primary);
    fill-opacity: 0.04;
    stroke: var(--color-line-strong);
    stroke-width: 0.15;
    stroke-opacity: 0.35;
    transition: fill-opacity 0.2s var(--ease-out), stroke-opacity 0.2s var(--ease-out);
    cursor: pointer;
}

.apt-floor-hotspot:hover {
    fill-opacity: 0.18;
    stroke-opacity: 0.6;
}

.apt-floor-hotspot--sold {
    cursor: not-allowed;
    fill: #dc2626;
    fill-opacity: 0.18;
}

.apt-floor-hotspot--sold:hover {
    fill: #dc2626;
    fill-opacity: 0.18;
}

.apt-floor-hotspot--available:hover {
    fill: var(--bau-blue-dark);
    fill-opacity: 0.38;
}

/* Active apartment: solid accent, visible stroke */
.apt-floor-hotspot.is-active {
    fill: var(--color-accent);
    fill-opacity: 0.55;
    stroke: var(--color-accent-dark);
    stroke-width: 0.4;
    stroke-opacity: 0.9;
    cursor: default;
    animation: apt-floor-active-pulse 2.4s ease-in-out infinite;
}

.apt-floor-hotspot.is-active:hover {
    fill-opacity: 0.55;
}

@keyframes apt-floor-active-pulse {
    0%, 100% { fill-opacity: 0.55; }
    50%      { fill-opacity: 0.78; }
}

/* ======================================================================
   SIMILAR APARTMENTS — editorial card grid matching apt-detail style
   ====================================================================== */

main.page-horizontal.single-apartment > .page-section.apt-similar {
    padding: 100px 56px 48px;
    background: var(--color-cream);
    justify-content: center;
}

.apt-similar__inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background:
        radial-gradient(circle at 50% 20%, #fff 0%, var(--color-cream) 100%);
    border: 1px solid var(--color-line);
    border-radius: 6px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.apt-similar__head {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.apt-heading--lg .apt-heading__rule { width: 32px; }
.apt-heading--lg .apt-heading__label { font-size: 0.6875rem; }
.apt-heading--lg .apt-heading__title { font-size: 1.125rem; }

.apt-similar__sub {
    margin: 0 0 0 3rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
}

.apt-similar__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* ===== Similar apartments carousel (4 cards per view) ================= */
.apt-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.apt-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 1rem) / 4); /* 4 cards per view */
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    padding: 2px;
}
.apt-carousel__track::-webkit-scrollbar { display: none; }
.apt-carousel__track > .apartment-card { scroll-snap-align: start; }

/* Card image aspect inside the carousel (mirrors the archive .af-grid rule) */
.apt-carousel__track .apartment-card__image,
.apt-carousel__track .apartment-card__placeholder {
    aspect-ratio: 4 / 3;
    margin-bottom: 0.5rem;
}

.apt-carousel__nav {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    background: var(--color-white);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-smooth), border-color var(--transition-smooth), opacity var(--transition-smooth);
    z-index: 2;
}
.apt-carousel__nav:hover { border-color: var(--color-accent); background: var(--color-cream); }
.apt-carousel__nav[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

@media (max-width: 1024px) {
    .apt-carousel__track { grid-auto-columns: calc((100% - 2 * 1rem) / 3); } /* 3 per view */
}
@media (max-width: 720px) {
    .apt-carousel__track { grid-auto-columns: calc((100% - 0.75rem) / 2 - 0.5px); gap: 0.75rem; } /* 2 per view */
    .apt-carousel__nav { display: none; } /* swipe on mobile */
}
@media (max-width: 460px) {
    .apt-carousel__track { grid-auto-columns: 78%; } /* 1+peek */
}

.apt-similar-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.apt-similar-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.apt-similar-card__media {
    position: relative;
    aspect-ratio: 16 / 11;
    /* Branded placeholder: deep plum → cyan tint, so cards without a plan
       image read as intentional rather than "missing image". */
    background:
        linear-gradient(135deg, var(--color-primary) 0%, #2a2036 55%, #143b42 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--color-line);
}

/* Subtle floor-plan grid texture over the gradient */
.apt-similar-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(43, 115, 163, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 115, 163, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

/* When a real image is present, drop the branded gradient/texture */
.apt-similar-card__media:has(img) {
    background: var(--color-cream);
}
.apt-similar-card__media:has(img)::after {
    display: none;
}

.apt-similar-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease-out);
}

.apt-similar-card:hover .apt-similar-card__media img {
    transform: scale(1.04);
}

.apt-similar-card__media-fallback {
    position: relative;
    z-index: 1;
    color: var(--color-accent);
    opacity: 0.85;
    filter: drop-shadow(0 2px 12px rgba(43, 115, 163, 0.35));
}

.apt-similar-card__status {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.apt-similar-card__body {
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1 1 auto;
}

.apt-similar-card__row--top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.apt-similar-card__label {
    font-size: 0.625rem;
    color: var(--color-accent);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    font-weight: 600;
}

.apt-similar-card__number {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

.apt-similar-card__meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-line);
}

.apt-similar-card__meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.apt-similar-card__meta-val {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.apt-similar-card__meta-lbl {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.apt-similar-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-top: 0.1rem;
}

.apt-similar-card__price strong {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

.apt-similar-card__currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bau-blue);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.625rem;
    margin-left: 0.15rem;
}

.apt-similar-card__ppsqm {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
}

.apt-similar-card__cta {
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-line);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-primary);
    transition: color 0.25s var(--ease-out), gap 0.25s var(--ease-out);
}

.apt-similar-card:hover .apt-similar-card__cta {
    color: var(--color-accent-dark);
    gap: 0.65rem;
}

@media (max-width: 1100px) {
    .apt-similar__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    main.page-horizontal.single-apartment > .page-section.apt-similar {
        padding: 88px 20px 40px;
    }
    .apt-similar__inner { padding: 1.25rem; }
    .apt-similar__grid { grid-template-columns: 1fr; }
    .apt-similar__sub { margin-left: 2.5rem; }
}

/* ======================================================================
   APARTMENT CTA — editorial style matching apt-detail block
   ====================================================================== */

main.page-horizontal.single-apartment > .page-section.apt-cta {
    padding: 90px 56px 40px;
    background: var(--color-cream);
    justify-content: center;
    align-items: center;
    text-align: left;
}

.apt-cta__inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background:
        radial-gradient(circle at 50% 20%, #fff 0%, var(--color-cream) 100%);
    border: 1px solid var(--color-line);
    border-radius: 6px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.apt-cta__top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: end;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-line);
}

.apt-cta__head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.apt-cta__sub {
    margin: 0 0 0 3rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-light);
    max-width: 520px;
}

.apt-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* -- Grid: contact columns + map -- */
.apt-cta__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 1.75rem;
    align-items: start;
}

.apt-cta__col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.apt-cta__col-title {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.625rem;
    color: var(--color-accent);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    line-height: 1;
}

.apt-cta__col-title .apt-heading__rule {
    /* reuse sidebar heading rule variable */
}

.apt-cta__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.apt-cta__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
    line-height: 1.4;
}

.apt-cta__list-stack {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.apt-cta__list a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s var(--ease-out);
}

.apt-cta__list a:hover { color: var(--color-accent-dark); }

.apt-cta__list-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    flex-shrink: 0;
}

.apt-cta__list--nav li {
    padding: 0.25rem 0;
    border-bottom: 1px dashed var(--color-line);
}

.apt-cta__list--nav li:last-child { border-bottom: 0; }

.apt-cta__list--nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.apt-cta__list--nav a::before {
    content: "→";
    color: var(--color-accent);
    font-weight: 400;
    transition: transform 0.2s var(--ease-out);
}

.apt-cta__list--nav a:hover::before { transform: translateX(3px); }

/* Socials */
.apt-cta__socials {
    display: inline-flex;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.apt-cta__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-primary);
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.apt-cta__social:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Newsletter form */
.apt-cta__newsletter {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--color-line);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.apt-cta__newsletter-label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.625rem;
    color: var(--color-accent);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.apt-cta__newsletter-row {
    display: flex;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 3px 3px 3px 0.85rem;
    transition: border-color 0.2s var(--ease-out);
}

.apt-cta__newsletter-row:focus-within {
    border-color: var(--color-accent);
}

.apt-cta__newsletter-row input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-primary);
    padding: 0.35rem 0;
    outline: none;
}

.apt-cta__newsletter-row input::placeholder {
    color: var(--color-text-muted);
}

.apt-cta__newsletter-row button {
    flex-shrink: 0;
    min-height: 34px;
    padding: 0 0.95rem;
    background: var(--bau-blue);
    color: var(--color-white);
    border: 0;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s var(--ease-out);
}

.apt-cta__newsletter-row button:hover { background: #000; }

.apt-cta__newsletter-msg {
    font-size: 0.75rem;
    color: var(--color-accent-dark);
    display: none;
}

.apt-cta__newsletter.is-submitted .apt-cta__newsletter-msg { display: inline; }
.apt-cta__newsletter.is-submitted .apt-cta__newsletter-row { opacity: 0.5; pointer-events: none; }

/* Map */
.apt-cta__map {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.apt-cta__map-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 220px;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    overflow: hidden;
    background: var(--color-white);
}

.apt-cta__map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(0.25) contrast(0.95);
    transition: filter 0.3s var(--ease-out);
}

.apt-cta__map-frame:hover iframe { filter: none; }

.apt-cta__map-link {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    z-index: 2;
    transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.apt-cta__map-link:hover {
    color: var(--color-accent-dark);
    border-color: var(--color-accent);
}

.apt-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0 1.25rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.apt-cta-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.apt-cta-btn--primary {
    background: var(--bau-blue);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.apt-cta-btn--primary:hover {
    background: #000;
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.apt-cta-btn--ghost {
    background: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-line);
}

.apt-cta-btn--ghost:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.apt-cta__footer {
    margin-top: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.apt-cta__copyright {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
}

.apt-cta__credit {
    color: var(--color-text-muted);
}

.apt-cta__credit strong {
    color: var(--color-primary);
    font-weight: 600;
}

.apt-cta__home {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-primary);
    transition: color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.apt-cta__home:hover {
    color: var(--color-accent-dark);
    transform: translateX(-2px);
}

/* Override old .bh-cta dark defaults on apt-cta */
main.page-horizontal.single-apartment > .page-section.apt-cta .bh-cta__title,
main.page-horizontal.single-apartment > .page-section.apt-cta .bh-cta__desc,
main.page-horizontal.single-apartment > .page-section.apt-cta .bh-eyebrow,
main.page-horizontal.single-apartment > .page-section.apt-cta .bh-cta__back {
    color: inherit;
}

@media (max-width: 1100px) {
    .apt-cta__top {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .apt-cta__grid {
        grid-template-columns: 1fr 1fr;
    }
    .apt-cta__map { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    main.page-horizontal.single-apartment > .page-section.apt-cta {
        padding: 88px 20px 40px;
    }
    .apt-cta__inner { padding: 1.5rem; }
    .apt-cta__sub { margin-left: 2.5rem; }
    .apt-cta__actions { flex-direction: column; align-items: stretch; }
    .apt-cta-btn { justify-content: center; }
    .apt-cta__grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .apt-cta__footer { flex-direction: column; text-align: center; }
}

/* Footer CTA: wider container than apartment/floor/building pages */
.site-footer .page-section.apt-cta {
    padding-left: 32px;
    padding-right: 32px;
}
.site-footer .apt-cta__inner {
    max-width: 1440px;
}
@media (max-width: 720px) {
    .site-footer .page-section.apt-cta {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Footer / CTA — phone: one column, and never let a child (long email, map
   frame, newsletter row) push the container wider than the viewport. */
@media (max-width: 768px) {
    .apt-cta__top { grid-template-columns: 1fr; gap: 1rem; }
    .apt-cta__grid { grid-template-columns: 1fr; gap: 1.25rem; }
    /* min-width:0 lets grid/flex tracks shrink below their content's min-size */
    .apt-cta__inner > *,
    .apt-cta__col,
    .apt-cta__map { min-width: 0; }
    .apt-cta__sub { margin-left: 0; }
    .apt-cta__list a,
    .apt-cta__list-stack a { overflow-wrap: anywhere; }
    /* Map "open in maps" pill: span the frame so a long label can't overflow */
    .apt-cta__map-link {
        left: 0.75rem;
        right: 0.75rem;
        justify-content: center;
        font-size: 0.625rem;
        padding: 0.45rem 0.6rem;
    }
    .apt-cta__map-link span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .site-footer .page-section.apt-cta { padding-left: 16px; padding-right: 16px; }
}

/* ======================================================================
   FLOOR DETAIL — shares apt-detail styling, plus floor-specific bits
   ====================================================================== */

main.page-horizontal.single-floor > .page-section.apt-detail,
main.page-horizontal.single-floor > .page-section.apt-similar,
main.page-horizontal.single-floor > .page-section.apt-cta {
    background: var(--color-cream);
}

main.page-horizontal.single-floor > .page-section.apt-detail {
    padding: 80px 56px 32px;
}

/* Status dot list in floor sidebar */
.apt-stat-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.apt-stat-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.apt-stat-list__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.apt-stat-list__dot--available { background: #2b73a3; }
.apt-stat-list__dot--sold      { background: #dc2626; }

.apt-stat-list__label { flex: 1 1 auto; }

.apt-stat-list__value {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

/* Legend hint inside sidebar */
.apt-legend {
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: var(--color-accent-glow);
    border: 1px dashed var(--color-accent);
    border-radius: 5px;
}

.apt-legend__hint {
    font-size: 0.75rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* Interactive floor map canvas */
.apt-plan--floormap {
    background:
        radial-gradient(circle at 50% 20%, #fff 0%, var(--color-cream) 100%);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.apt-plan__floor--interactive {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.apt-floor-map-root {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apt-floor-map-root .sunrise-floor-map,
.apt-floor-map-root .she-preview-overlay__wrapper {
    max-width: 100%;
    max-height: 100%;
}

.apt-floor-map-root .she-preview-overlay__img {
    max-height: 60vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    box-shadow: 0 16px 32px rgba(43, 115, 163, 0.08);
}

/* Floor legend (bottom of plan area) */
.apt-floor-legend {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.5rem 0.85rem;
    align-self: center;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--color-text-light);
    flex-wrap: wrap;
}

.apt-floor-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.apt-floor-legend__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.apt-floor-legend__dot--available { background: #2b73a3; }
.apt-floor-legend__dot--sold      { background: #dc2626; }

.apt-floor-legend__count {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    padding-left: 0.2rem;
}

/* Sold card variant for apartment grid */
.apt-similar-card--sold {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ======================================================================
   FLOOR PAGE — redesigned: zoomed building render + info strip + plan
   ====================================================================== */

.apt-detail__grid--floor {
    grid-template-columns: minmax(320px, 420px) 1fr;
    align-items: stretch;
}

/* Left column — interactive building render with floor hotspots */
.apt-building-render {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background:
        radial-gradient(circle at 50% 30%, #fff 0%, var(--color-cream) 100%);
    border: 1px solid var(--color-line);
    border-radius: 6px;
    overflow: hidden;
    padding: 1rem 1rem 0.75rem;
    gap: 0.75rem;
    min-height: 0;
}

/* Heading (matches editorial style) */
.apt-building-render__heading {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    line-height: 1;
}

.apt-building-render__heading-label {
    font-weight: 600;
    font-size: 0.625rem;
    color: var(--color-accent);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.apt-building-render__heading-sep {
    color: var(--color-line-strong);
    font-weight: 300;
    font-size: 0.85rem;
    opacity: 0.6;
}

.apt-building-render__heading-title {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--color-text-light);
    letter-spacing: 0.02em;
}

/* Canvas — zoom viewport that clips to the corpus area so floors
   are large and directly clickable. Both img and SVG scale together
   under the wrapper transform so hotspots stay perfectly aligned. */
.apt-building-render__canvas {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 320px;
    overflow: hidden;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apt-building-render__canvas .sunrise-building-map {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wrapper keeps natural image aspect; we scale it up to zoom into the corpus */
.apt-building-render__canvas .she-preview-overlay__wrapper {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    transform: scale(2.6);
    transform-origin: 62% 52%;
}

.apt-building-render__canvas .she-preview-overlay__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(43, 115, 163, 0.08);
}

/* Active floor hotspot — permanent accent + pulse */
.she-preview-active-floor {
    animation: apt-active-floor-pulse 2.4s ease-in-out infinite;
}

@keyframes apt-active-floor-pulse {
    0%, 100% { fill-opacity: 0.3; }
    50%      { fill-opacity: 0.5; }
}


.apt-building-render__link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    text-decoration: none;
    transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.apt-building-render__link:hover {
    border-color: var(--color-accent);
}

.apt-building-render__label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    padding-right: 0.5rem;
    border-right: 1px solid var(--color-line-strong);
}

.apt-building-render__title {
    flex: 1 1 auto;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apt-building-render__link svg {
    flex-shrink: 0;
    color: var(--color-primary);
    transition: transform 0.2s var(--ease-out);
}

.apt-building-render__link:hover svg {
    transform: translateX(3px);
    color: var(--color-accent-dark);
}

/* Right column becomes flex column with info on top and plan below */
.apt-detail__grid--floor .apt-plan--floormap {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Info strip above the floor plan */
.apt-floor-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-line);
}

.apt-floor-info .apt-brand {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-line);
}

.apt-floor-info .apt-brand__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

/* Clean horizontal chip row for floor stats + CTA */
.apt-floor-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

.apt-floor-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.85rem;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 5px;
    min-width: 88px;
}

.apt-floor-chip__label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    line-height: 1;
}

.apt-floor-chip__value {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.apt-floor-chip--price .apt-floor-chip__value {
    color: var(--color-accent-dark);
}

/* CTA button that sits inside the chip row, same height as chips */
.apt-floor-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.1rem;
    margin-left: auto;
    background: var(--bau-blue);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}

.apt-floor-cta:hover {
    background: #000;
    transform: translateY(-1px);
}

.apt-floor-cta svg {
    transition: transform 0.2s var(--ease-out);
}

.apt-floor-cta:hover svg { transform: translateX(3px); }

/* Footer row at the bottom of the right column — same style as sidebar footer */
.apt-floor-footer {
    padding: 0.75rem 0.25rem 0;
    margin: 0;
    border-top: 1px solid var(--color-line);
}

/* Floor plan area gets flex-1 so it uses remaining vertical space */
.apt-detail__grid--floor .apt-plan__floor--interactive {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 1100px) {
    .apt-detail__grid--floor {
        grid-template-columns: 260px 1fr;
    }
    .apt-floor-info__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .apt-detail__grid--floor {
        grid-template-columns: 1fr;
    }
    .apt-building-render {
        min-height: 220px;
    }
    .apt-building-render__img {
        transform: scale(1.2);
    }
}

/* ======================================================================
   BUILDING PAGE — floor cards (big number hero + availability bar)
   ====================================================================== */

main.page-horizontal.single-building > .page-section.apt-detail,
main.page-horizontal.single-building > .page-section.apt-similar,
main.page-horizontal.single-building > .page-section.apt-cta {
    background: var(--color-cream);
}

main.page-horizontal.single-building > .page-section.apt-detail {
    padding: 80px 56px 32px;
    justify-content: center;
}

.apt-floor-card__media {
    background:
        linear-gradient(135deg, var(--color-primary) 0%, #2a1d37 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 1.5rem 1rem;
    color: var(--color-white);
    border-bottom: 1px solid var(--color-line);
    overflow: hidden;
}

.apt-floor-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(43, 115, 163, 0.12) 0%, transparent 55%);
    pointer-events: none;
}

.apt-floor-card__big-num {
    position: relative;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(3rem, 6vw, 4.5rem);
    letter-spacing: var(--tracking-tighter);
    line-height: 1;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
}

.apt-floor-card__big-label {
    position: relative;
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-accent);
}

.apt-floor-card__chip {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.3rem 0.65rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.apt-floor-card:hover .apt-floor-card__media {
    background:
        linear-gradient(135deg, #000 0%, var(--color-primary) 100%);
}

/* Availability segmented bar */
.apt-floor-bar {
    display: flex;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-line-soft);
}

.apt-floor-bar__seg {
    display: block;
    min-width: 0;
}

.apt-floor-bar__seg--available { background: #2b73a3; }
.apt-floor-bar__seg--sold      { background: #dc2626; }

/* Floor card meta dots */
.apt-floor-card .apt-similar-card__meta .apt-stat-list__dot {
    margin-right: 0.1rem;
}

.apt-floor-card .apt-similar-card__meta-item {
    gap: 0.3rem;
}

/* ======================================================================
   APARTMENT DETAIL — Responsive
   ====================================================================== */

@media (max-width: 1100px) {
    main.page-horizontal.single-apartment > .page-section.apt-detail {
        padding: 72px 40px 32px;
    }
    .apt-detail__grid {
        grid-template-columns: minmax(300px, 360px) 1fr;
        gap: 2rem;
    }
}

@media (max-width: 900px) {
    main.page-horizontal.single-apartment > .page-section.apt-detail {
        padding: 64px 28px 32px;
        overflow-y: visible;
    }
    /* Stack into one column and let the whole page scroll naturally — the
       desktop one-viewport max-height would otherwise trap the floor plan
       and amenities inside a tiny internal scroll area on mobile. */
    .apt-detail__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-height: none;
        align-items: start;
    }
    .apt-sidebar {
        border-right: 0;
        padding-right: 0;
    }
    .apt-plan {
        min-height: auto;
        overflow: visible;
    }
    .apt-plan__topbar {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }
    .apt-plan__actions { gap: 1rem; }
    .apt-plan__bottom { padding: 0.75rem 1rem; }
}

@media (max-width: 600px) {
    .apt-amen-grid { grid-template-columns: repeat(2, 1fr); }
    .apt-amen-card { min-height: 88px; }
}

@media (max-width: 600px) {
    main.page-horizontal.single-apartment > .page-section.apt-detail {
        padding: 56px 16px 28px;
    }
    .apt-brand__title { font-size: 1.5rem; letter-spacing: 0.22em; }
    .apt-total__price strong { font-size: 1.625rem; }
    .apt-plan__topbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .apt-plan__actions {
        width: 100%;
        justify-content: space-between;
    }
    .apt-plan__image-wrap { padding: 1rem; min-height: 280px; }
    .apt-compass__rose { width: 42px; height: 42px; }
    .apt-position__silhouette svg { width: 72px; }
}

/* ======================================================================
   SINGLE-BUILDING — full-bleed render stage with glass overlay panels
   ====================================================================== */

/* Establish positioning context for the BuildingMap island (inline style
   removed so the full-stage variant can override `position` from CSS). */
.sunrise-building-map {
    position: relative;
}

/* Neutralize the default apt-detail padding/grid on the building page so the
   render can fill the entire section edge-to-edge. */
main.page-horizontal.single-building > .page-section.apt-detail.bh-stage-section {
    background: var(--color-cream);
    position: relative;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    padding: 24px 32px 32px;
}

@media (max-width: 900px) {
    main.page-horizontal.single-building > .page-section.apt-detail.bh-stage-section {
        /* Edge-to-edge so the canvas can fill the full mobile viewport. The
           project info + actions stack below; the section's bottom padding
           gives those overlay panels breathing room. */
        padding: 0 0 28px;
        overflow: visible;
    }
}

.bh-stage {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    aspect-ratio: var(--render-aspect, 1.7778);
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(43, 115, 163, 0.22);
    /* cqw / cqh refer to this element for the contained render wrapper */
    container-type: size;
}

@media (max-width: 900px) {
    .bh-stage {
        border-radius: 6px;
    }
}

@media (max-width: 600px) {
    .bh-stage {
        border-radius: 5px;
    }
}

/* --- Render canvas ------------------------------------------------------- */

.bh-stage__canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--color-primary, #2b73a3);
}

.bh-stage__canvas .apt-floor-map-root--full-stage,
.apt-floor-map-root--full-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    display: block;
}

.apt-floor-map-root--full-stage .sunrise-building-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Contain-fit: size the image+SVG wrapper so it fits inside the stage
   while preserving the render's natural aspect ratio. Hotspots stay
   perfectly aligned because image and SVG share the same parent box.
   Uses container query units that resolve against .bh-stage. */
.apt-floor-map-root--full-stage .she-preview-overlay__wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(100cqw, calc(100cqh * var(--render-aspect, 1.7778)));
    height: min(100cqh, calc(100cqw / var(--render-aspect, 1.7778)));
    max-width: none;
    max-height: none;
}

/* Higher specificity (parent .bh-stage__canvas added) so this wins over
   the responsive `.apt-floor-map-root .she-preview-overlay__img` rules
   in earlier sections that ship a `max-height: 42vh` clamp at small
   widths — that clamp would otherwise crop the building image to ~40%
   of the viewport height and break floor selection on mobile. */
.bh-stage__canvas .apt-floor-map-root--full-stage .she-preview-overlay__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: fill;
    box-shadow: none;
    border-radius: 0;
}

.apt-floor-map-root--full-stage .she-preview-overlay__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* --- Overlay layer ------------------------------------------------------- */

.bh-stage__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    padding: 24px;
    box-sizing: border-box;
}

.bh-stage__overlay > * {
    pointer-events: auto;
}

/* --- Glass utility ------------------------------------------------------- */

.glass-panel {
    /* Apple-style depth: more opaque at the top edge, airier at the bottom.
       This keeps highlights crisp against bright sky while the lower half
       blends with foreground foliage/concrete. */
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.78) 0%,
            rgba(255, 255, 255, 0.62) 100%
        );
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 6px;
    box-shadow:
        0 22px 54px rgba(43, 115, 163, 0.20),
        0 4px 12px rgba(43, 115, 163, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 0 rgba(43, 115, 163, 0.04);
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .glass-panel {
        background: rgba(255, 255, 255, 0.92);
    }
}

/* --- Text readability inside glass panels -------------------------------- */

/* Inner text uses darker accent/body variants so contrast holds against
   bright sky areas of the render. */
.bh-panel .apt-heading__label,
.bh-panel .apt-floor-heading__label {
    color: var(--color-accent-dark);
}

.bh-panel .apt-heading__rule,
.bh-panel .apt-floor-heading__rule {
    background: var(--color-accent-dark);
}

.bh-panel .apt-heading__sep,
.bh-panel .apt-floor-heading__sep {
    color: rgba(43, 115, 163, 0.45);
    opacity: 1;
}

.bh-panel .apt-heading__title,
.bh-panel .apt-floor-heading__num {
    color: var(--color-primary);
    font-weight: 500;
}

.bh-panel .apt-meta-list {
    color: var(--color-text-light);
}

.bh-panel .apt-stat-list li {
    color: var(--color-primary);
}

.bh-panel .apt-brand__address {
    color: var(--color-text-light);
}

.bh-panel .apt-share {
    color: var(--color-primary);
}

.bh-panel .apt-share svg {
    color: var(--color-accent-dark);
}

/* --- Project info panel (top-left) --------------------------------------- */

.bh-panel--project {
    position: absolute;
    top: 100px;
    left: 32px;
    width: min(400px, calc(100% - 64px));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.15rem;
    z-index: 3;
}

.bh-panel--project .bh-panel__body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* --- Polish: bigger stats, tabular numbers, cleaner hierarchy ----------- */

.bh-panel--project .apt-meta-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.35rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.bh-panel--project .apt-meta-list strong {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bh-panel--project .apt-stat-list {
    padding-top: 0.5rem;
    gap: 0.6rem;
}

.bh-panel--project .apt-stat-list li {
    font-size: 0.875rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(43, 115, 163, 0.06);
}

.bh-panel--project .apt-stat-list li:last-child {
    border-bottom: 0;
}

.bh-panel--project .apt-stat-list__dot {
    width: 10px;
    height: 10px;
}

.bh-panel--project .apt-stat-list__value {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.bh-panel--project .apt-total__price strong {
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.bh-panel--project .apt-total__currency {
    font-size: 1.1rem;
    margin-left: 0.25rem;
    color: var(--color-accent-dark);
    font-weight: 500;
}

.bh-panel--project .apt-pp__value {
    font-variant-numeric: tabular-nums;
}

.bh-panel--project .bh-panel__body::-webkit-scrollbar {
    width: 4px;
}
.bh-panel--project .bh-panel__body::-webkit-scrollbar-thumb {
    background: rgba(43, 115, 163, 0.2);
    border-radius: 4px;
}

.bh-panel--project .apt-brand {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(43, 115, 163, 0.12);
}

.bh-panel--project .apt-sidebar__footer {
    border-top: 1px solid rgba(43, 115, 163, 0.12);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

/* Hint callout — swapped the dashed outline for a cleaner left accent rule
   that reads better on a translucent surface. */
.bh-panel--project .apt-legend {
    background: rgba(43, 115, 163, 0.10);
    border: 0;
    border-left: 3px solid var(--color-accent-dark);
    border-radius: 4px;
    padding: 0.7rem 0.85rem;
}

.bh-panel--project .apt-legend__hint {
    color: var(--color-primary);
    opacity: 0.78;
}

/* --- Select-a-floor heading (top-right) ---------------------------------- */

/* Extra opacity because this pill typically floats over clear sky, the
   area with the least texture to give the glass something to blur. */
.bh-panel--floor-heading.glass-panel {
    position: absolute;
    top: 100px;
    right: 32px;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    z-index: 3;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.74) 100%
        );
}

.bh-panel--floor-heading .apt-floor-heading {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

/* --- Legend (right-center, vertical stack) ------------------------------- */

.bh-panel--legend {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    padding: 0.85rem 1.1rem;
    border-radius: 6px;
    z-index: 3;
}

.bh-panel--legend .apt-floor-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: var(--color-primary);
    font-weight: 500;
    flex-wrap: nowrap;
}

.bh-panel--legend .apt-floor-legend__item {
    width: 100%;
    justify-content: flex-start;
    gap: 0.55rem;
}

.bh-panel--legend .apt-floor-legend__count {
    color: var(--color-primary);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* --- Responsive ---------------------------------------------------------- */

/* Mobile composition (≤900px): the building canvas takes the full
   viewport on first load so visitors immediately see the rendering and
   can tap a floor. The project info panel, action buttons, and other
   blocks live below — they reveal as the user scrolls.

   The image is scaled to fill the canvas vertically (so each floor band
   is tall enough to tap) and the canvas scrolls horizontally because
   the 16:9 render is wider than the portrait viewport at that height.
   An inline script (single-building.php) centers the scroll position
   on initial paint so the building is in view, not the sky on the
   sides. */
@media (max-width: 900px) {
    .bh-stage {
        aspect-ratio: auto;
        max-width: none;
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
        /* container-type lives on .bh-stage__canvas on mobile so the
           building wrapper sizes against the canvas rather than the
           collapsed bh-stage. */
        container-type: normal;
    }

    .bh-stage__canvas {
        position: relative;
        inset: auto;
        width: 100%;
        /* Taller portrait frame on mobile, with a cover-zoom into the
           building so it reads big — while staying short enough that the
           project info + floor picker remain reachable just below. */
        aspect-ratio: 3 / 4;
        height: auto;
        min-height: 0;
        order: 1;
        border-radius: 0;
        background: var(--color-primary, #2b73a3);
        overflow: hidden;
        /* container units resolve against this box for the cover-fit below */
        container-type: size;
    }

    /* Cover-fit zoom: the image+SVG wrapper is sized to COVER the portrait
       canvas (overflow cropped), centred on the building. Image and SVG
       share this box so hotspots stay perfectly aligned. */
    .bh-stage__canvas .apt-floor-map-root--full-stage .she-preview-overlay__wrapper {
        position: absolute;
        top: 50%;
        /* Shift left a touch so the tower (which sits right-of-centre in the
           render) lands in the middle of the portrait frame. */
        left: 50%;
        transform: translate(-58%, -50%);
        width: max(100cqw, calc(100cqh * var(--render-aspect, 1.7778)));
        height: max(100cqh, calc(100cqw / var(--render-aspect, 1.7778)));
        display: block;
        max-width: none;
        max-height: none;
    }

    /* Soft gradient scrims at the top (under the site header) and the
       bottom (fading into the project info card) so the immersive
       full-screen render meets the chrome around it cleanly. */
    .bh-stage__canvas::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 25%;
        background: linear-gradient(
            180deg,
            rgba(43, 115, 163, 0.55) 0%,
            rgba(43, 115, 163, 0.10) 65%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 2;
    }

    .bh-stage__canvas::after {
        content: '';
        position: absolute;
        inset: auto 0 0 0;
        height: 22%;
        background: linear-gradient(
            0deg,
            var(--color-cream, #f5f1ea) 0%,
            rgba(245, 241, 234, 0.55) 35%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 2;
    }

    .bh-stage__overlay {
        position: relative;
        inset: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        order: 2;
    }

    .bh-stage__overlay > * {
        pointer-events: auto;
    }

    .bh-panel--project {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        max-height: none;
        padding: 1.1rem 1.05rem 0.9rem;
        gap: 0.85rem;
        z-index: 1;
    }

    .bh-panel--project .bh-panel__body {
        gap: 0.95rem;
    }

    .bh-panel--floor-heading {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        align-self: center;
        order: 1;
    }

    /* Duplicates the per-status counts already in the project panel. */
    .bh-panel--legend {
        display: none;
    }

    .bh-panel--project .apt-sidebar__footer {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        align-items: stretch;
    }

    .bh-panel--project .apt-share,
    .bh-panel--project .apt-back {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

}

@media (max-width: 600px) {
    .bh-panel--project .apt-brand__title {
        font-size: 1.2rem;
        letter-spacing: 0.16em;
    }

    .bh-panel--project {
        padding: 1rem 0.95rem 0.85rem;
        border-radius: 6px;
    }
}

/* ======================================================================
   CONTACT PAGE — cream-contained two-panel layout (matches site style)
   ====================================================================== */

main.page-horizontal.single-contact > .page-section.contact-stage {
    padding: 120px 32px 56px;
    background: var(--color-cream);
    position: relative;
    overflow: visible;
    justify-content: center;
    align-items: stretch;
}

@media (max-width: 900px) {
    main.page-horizontal.single-contact > .page-section.contact-stage {
        padding: 100px 24px 40px;
    }
}

@media (max-width: 720px) {
    main.page-horizontal.single-contact > .page-section.contact-stage {
        padding: 96px 16px 40px;
    }
}

/* Backdrop + scrim are no longer used in the cream layout */
.contact-stage__bg,
.contact-stage__scrim {
    display: none;
}

.contact-stage__overlay {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.4fr);
    gap: 1.5rem;
    align-items: stretch;
    box-sizing: border-box;
}

.contact-stage__overlay > .contact-map {
    grid-column: 1 / -1;
}

/* --- Embedded map -------------------------------------------------------- */

.contact-map {
    position: relative;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-cream);
    box-shadow: var(--shadow-sm);
}

.contact-map__frame {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

@media (max-width: 720px) {
    .contact-map__frame {
        height: 320px;
    }
}

/* --- Shared card look for both contact panels --------------------------- */

main.page-horizontal.single-contact .contact-info,
main.page-horizontal.single-contact .contact-form-panel {
    background:
        radial-gradient(circle at 50% 20%, #fff 0%, var(--color-cream) 100%);
    border: 1px solid var(--color-line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* --- Left: contact info ------------------------------------------------- */

.contact-info {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.contact-info .apt-brand {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(43, 115, 163, 0.12);
}

.contact-info .apt-brand__title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: 0.22em;
}

.contact-info .apt-brand__address {
    color: var(--color-text-light);
    font-size: 0.875rem;
    line-height: 1.55;
}

.contact-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1 1 auto;
    gap: 1rem;
}

.contact-list__item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.contact-list__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--color-accent-dark);
    background: rgba(43, 115, 163, 0.14);
    border: 1px solid rgba(43, 115, 163, 0.32);
}

.contact-list__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.contact-list__label {
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-accent-dark);
    font-weight: 600;
}

.contact-list__value {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.45;
    text-decoration: none;
    word-break: break-word;
    transition: color 0.2s var(--ease-out);
}

.contact-list__value:hover {
    color: var(--color-accent-dark);
}

.contact-list__value--secondary {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin-top: 0.15rem;
}

/* --- WhatsApp contact method (expandable: message / call) --------------- */
.contact-wa {
    display: block;
}
.contact-wa__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.contact-wa__summary::-webkit-details-marker { display: none; }
.contact-wa__chev {
    opacity: 0.7;
    transition: transform 0.2s var(--ease-out);
}
.contact-wa[open] .contact-wa__chev { transform: rotate(180deg); }
.contact-wa__menu {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.contact-wa__opt {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    background: var(--color-white);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.contact-wa__opt:hover {
    border-color: #25d366;
    color: #128c4b;
    background: rgba(37, 211, 102, 0.06);
}
.contact-wa__opt svg { color: #25d366; flex: none; }

/* --- Right: message form ------------------------------------------------ */

.contact-form-panel {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form__head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(43, 115, 163, 0.12);
}

.contact-form__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
    margin: 0;
}

.contact-form__sub {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.contact-form__alert {
    padding: 0.8rem 0.95rem;
    border-radius: 5px;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid transparent;
}

.contact-form__alert--success {
    background: rgba(43, 115, 163, 0.12);
    border-color: rgba(43, 115, 163, 0.45);
    color: #145a32;
}

.contact-form__alert--error {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.45);
    color: #7f1d1d;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact-form__label {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    font-weight: 500;
}

.contact-form__required {
    color: var(--color-accent-dark);
    margin-left: 0.2rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    background: #fff;
    color: var(--color-primary);
    font: inherit;
    font-size: 0.9375rem;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.contact-form textarea {
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent-dark);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(43, 115, 163, 0.18);
}

.contact-form__hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
}

.contact-form__submit {
    align-self: flex-start;
    margin-top: 0.25rem;
    min-height: 48px;
    padding: 0 1.4rem;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.contact-form__note {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
    .contact-stage__overlay {
        grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.4fr);
        gap: 1.25rem;
    }
}

@media (max-width: 900px) {
    .contact-stage__overlay {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        align-items: start;
    }
}

@media (max-width: 600px) {
    .contact-form__row {
        grid-template-columns: 1fr;
    }
    .contact-info,
    .contact-form-panel {
        padding: 1.25rem;
    }
    .contact-info .apt-brand__title {
        font-size: 1.5rem;
        letter-spacing: 0.18em;
    }
}

/* ======================================================================
   MOBILE POLISH — Project / Floor / Apartment pages
   ====================================================================== */

/* --- Project page (single-building) ------------------------------------- */

@media (max-width: 900px) {
    /* Full-bleed render — edge to edge, no side gaps, so the building image
       fills the entire mobile width and the floor hotspots are as large
       (and tappable) as possible. */
    main.page-horizontal.single-building > .page-section.apt-detail.bh-stage-section {
        padding: 0 0 20px;
        /* Pull the render up under the fixed header so it meets (and tucks
           slightly under) the header with no gap. */
        margin-top: -44px;
    }

    /* Square corners for a true full-width immersive render */
    .bh-stage {
        border-radius: 0;
    }

    /* Project panel sits in normal flow below the render (the overlay is a
       flex column on mobile), so no absolute offsets — full width, centred
       by the overlay's own padding. */
    .bh-panel--project {
        padding: 1rem 1rem 0.85rem;
        gap: 0.75rem;
    }
    .bh-panel--project .bh-panel__body {
        gap: 0.85rem;
    }
    .bh-panel--project .apt-meta-list {
        font-size: 0.875rem;
    }
    .bh-panel--project .apt-stat-list li {
        font-size: 0.8125rem;
        padding: 0.25rem 0;
    }
    .bh-panel--project .apt-total__price strong {
        font-size: 1.625rem;
    }
    .bh-panel--project .apt-brand__title {
        font-size: 1.25rem;
        letter-spacing: 0.16em;
        line-height: 1.15;
    }

    /* Tap targets ≥ 44px for sidebar footer buttons */
    .bh-panel--project .apt-share,
    .bh-panel--project .apt-back {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Legend pill: keep horizontal at the bottom but compact */
    .bh-panel--legend {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 0.5rem 0.75rem;
    }
    .bh-panel--legend .apt-floor-legend {
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .bh-panel--legend .apt-floor-legend__item {
        font-size: 0.75rem;
    }
}

/* --- Floor page (single-floor) ----------------------------------------- */

@media (max-width: 900px) {
    /* Show the whole building on phones (no zoom-in) */
    .apt-building-render__canvas .she-preview-overlay__wrapper {
        transform: none;
    }
    .apt-building-render__canvas {
        min-height: 280px;
    }

    /* Stacked grid no longer needs viewport cap */
    .apt-detail__grid--floor {
        max-height: none;
        gap: 1.5rem;
    }

    /* Inventory: 2 columns on tablet (was inherited as 2 already; explicit) */
    main.page-horizontal.single-floor .apt-similar__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    /* Section paddings tuned for floor */
    main.page-horizontal.single-floor > .page-section.apt-detail {
        padding: 88px 20px 32px;
    }
    main.page-horizontal.single-floor > .page-section.apt-similar {
        padding: 56px 20px 40px;
    }

    .apt-detail__grid--floor {
        gap: 1.25rem;
    }

    /* Building render — phone height */
    .apt-building-render {
        padding: 0.85rem 0.85rem 0.65rem;
        gap: 0.5rem;
        border-radius: 5px;
    }
    .apt-building-render__canvas {
        min-height: 260px;
        max-height: 360px;
    }
    .apt-building-render__heading {
        font-size: 0.75rem;
    }
    .apt-building-render__link {
        padding: 0.6rem 0.85rem;
        min-height: 44px;
    }
    .apt-building-render__title {
        font-size: 0.875rem;
    }

    /* Plan column: tighter padding & rounded card on phone */
    .apt-plan--floormap {
        padding: 0.85rem;
        border-radius: 5px;
        gap: 0.85rem;
    }

    /* Floor info strip — let the parent .apt-plan--floormap padding own the inset */
    .apt-floor-info {
        padding-bottom: 0.85rem;
        gap: 0.65rem;
    }
    .apt-floor-info .apt-brand {
        padding-bottom: 0.6rem;
    }
    .apt-floor-info .apt-brand__title {
        font-size: 1.5rem;
        letter-spacing: 0.18em;
    }
    .apt-brand__address {
        font-size: 0.75rem;
        line-height: 1.45;
    }
    .apt-brand__dot {
        display: none;
    }

    /* Chips: 2-up grid, no fixed min-width that forces overflow */
    .apt-floor-chips {
        gap: 0.45rem;
    }
    .apt-floor-chip {
        min-width: 0;
        flex: 1 1 calc(50% - 0.225rem);
        padding: 0.5rem 0.75rem;
    }
    .apt-floor-chip__value {
        font-size: 0.875rem;
    }

    /* CTA: full-width below chips, comfortable tap target */
    .apt-floor-cta {
        margin-left: 0;
        flex: 1 1 100%;
        justify-content: center;
        min-height: 44px;
        padding: 0.7rem 1rem;
    }

    /* Floor heading row */
    .apt-floor-heading {
        font-size: 0.8125rem;
        flex-wrap: wrap;
    }

    /* Floor plan image — shorter on phone */
    .apt-floor-map-root .she-preview-overlay__img {
        max-height: 50vh;
    }

    /* Legend pill spans the row with even spacing */
    .apt-floor-legend {
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.55rem 0.75rem;
    }
    .apt-floor-legend__item {
        font-size: 0.75rem;
    }

    /* Footer (share + back): wrap + 44px tap targets */
    .apt-floor-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 0.75rem;
    }
    .apt-floor-footer .apt-share,
    .apt-floor-footer .apt-back {
        min-height: 44px;
        padding: 0.5rem 0;
    }

    /* Inventory section on phone — single column */
    main.page-horizontal.single-floor .apt-similar__inner {
        padding: 1.25rem;
        border-radius: 5px;
    }
    main.page-horizontal.single-floor .apt-similar__grid {
        grid-template-columns: 1fr;
    }
    main.page-horizontal.single-floor .apt-similar__sub {
        margin-left: 2.5rem;
    }
}

@media (max-width: 480px) {
    /* Building render: tighter on small phones */
    .apt-building-render__canvas {
        min-height: 220px;
        max-height: 300px;
    }

    /* Brand title: smaller still */
    .apt-floor-info .apt-brand__title {
        font-size: 1.25rem;
        letter-spacing: 0.14em;
    }

    /* Plan image */
    .apt-floor-map-root .she-preview-overlay__img {
        max-height: 42vh;
    }

    /* Legend: tighter font & spacing */
    .apt-floor-legend {
        font-size: 0.6875rem;
        gap: 0.4rem;
        padding: 0.5rem 0.6rem;
    }

    /* .fm top block (render + floor selector): the 92vw height made it
       oversized / "spread out" on phones — pull it in so the render and the
       floor list read as a compact pair with breathing room at the edges. */
    .fm-top {
        height: clamp(240px, 72vw, 330px);
        gap: 0.6rem;
    }
}

/* ======================================================================
   Mobile floor experience (.fm) — phone-only redesign of single-floor.
   Hidden on desktop; replaces the stacked sections below 768px.
   ====================================================================== */

.fm { display: none; }

@media (max-width: 768px) {
    /* Swap layouts: hide the desktop sections, show the mobile experience */
    main.page-horizontal.single-floor > .page-section.apt-detail,
    main.page-horizontal.single-floor > .page-section.apt-similar {
        display: none !important;
    }

    /* Hard guard: nothing in the mobile experience may widen the page
       horizontally, so the sides can never get cut off on real devices. */
    html { overflow-x: clip; }

    .fm {
        display: block;
        /* Generous side gutters (scale with width) so the content never runs
           edge-to-edge — it sits as a centered column with clear margins. */
        padding: 84px clamp(22px, 7vw, 44px) 40px;
        max-width: 560px;
        margin: 0 auto;
        color: var(--color-text);
        overflow-x: clip;
    }

    /* Breadcrumb */
    .fm-crumbs {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.8125rem;
        font-weight: 600;
        margin-bottom: 0.9rem;
    }
    .fm-crumbs__link { color: var(--color-accent-dark); text-decoration: none; }
    .fm-crumbs__sep { color: var(--color-text-muted); }
    .fm-crumbs__current { color: var(--color-text-muted); }

    /* Top: building render + floor selector */
    .fm-top {
        display: grid;
        grid-template-columns: 1fr 0.62fr;
        gap: 0.75rem;
        /* Fixed row height so the 39-floor selector scrolls inside its card
           instead of stretching the whole row. */
        height: clamp(300px, 92vw, 400px);
        margin-bottom: 1.1rem;
    }
    .fm-render {
        position: relative;
        display: block;
        height: 100%;
        min-height: 0;
        min-width: 0;
        border-radius: 6px;
        overflow: hidden;
        /* iOS Safari fails to clip the scaled building-map layer with
           overflow:hidden + border-radius, leaking it past the card and
           widening the whole page (sides get cut). clip-path clips reliably. */
        clip-path: inset(0 round 16px);
        background: var(--color-secondary);
        box-shadow: var(--shadow-sm);
    }
    .fm-render__canvas { position: absolute; inset: 0; }
    /* SSR fallback image (shown until the React building map mounts) */
    .fm-render__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 63% center;
        display: block;
    }
    /* Interactive building map inside the portrait card. The image + hotspot
       SVG live in a 16:9 "frame" that is panned/cropped together, so the active
       floor highlight stays pixel-aligned with the building under the crop —
       exactly reproducing object-position:63%. */
    .fm-render .sunrise-building-map { position: absolute; inset: 0; }
    .fm-render .she-preview-overlay__wrapper {
        position: absolute;
        top: 0;
        left: 63%;
        height: 100%;
        aspect-ratio: 16 / 9;
        max-width: none;
        max-height: none;
        transform: translateX(-63%);
        display: block;
    }
    .fm-render .she-preview-overlay__img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        border-radius: 0;
        box-shadow: none;
    }
    .fm-render .she-preview-overlay__svg { border-radius: 0; }
    /* Make the active-floor highlight read clearly on the bright render */
    .fm-render .she-preview-active-floor {
        stroke: var(--color-accent);
        stroke-width: 0.5;
        stroke-opacity: 0.9;
    }
    .fm-render__badge { z-index: 2; }
    .fm-render--empty {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-muted);
    }
    .fm-render__badge {
        position: absolute;
        left: 0.6rem;
        bottom: 0.6rem;
        display: inline-flex;
        flex-direction: column;
        gap: 0.1rem;
        padding: 0.45rem 0.7rem;
        border-radius: 5px;
        background: rgba(43, 115, 163, 0.72);
        backdrop-filter: blur(6px);
        color: #fff;
    }
    .fm-render__badge-label {
        font-size: 0.625rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.8;
    }
    .fm-render__badge-num { font-size: 1.5rem; font-weight: 800; line-height: 1; }
    .fm-render__badge-total { font-size: 0.875rem; font-weight: 600; opacity: 0.7; }

    /* Floor selector card */
    .fm-floors {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        border: 1px solid var(--color-line);
        border-radius: 6px;
        background: var(--color-white);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .fm-floors__head {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.55rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--color-accent-dark);
        border-bottom: 1px solid var(--color-line-soft);
    }
    .fm-floors__head svg { color: var(--color-accent); }
    .fm-floors__nav {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        border: none;
        background: var(--color-secondary);
        color: var(--color-text-light);
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .fm-floors__nav:active { background: var(--color-accent-light); color: var(--color-accent-dark); }
    .fm-floors__list {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        list-style: none;
        margin: 0;
        padding: 0.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        scrollbar-width: none;
    }
    .fm-floors__list::-webkit-scrollbar { display: none; }
    .fm-floor {
        display: block;
        text-align: center;
        padding: 0.5rem 0.25rem;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text-light);
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .fm-floor:active { background: var(--color-secondary); }
    /* Status colours: green = has free apartments, red = sold out.
       (The current floor's .is-current teal rule below overrides these.) */
    .fm-floor--available { color: #15a34a; }
    .fm-floor--soldout { color: #dc2626; }
    .fm-floor.is-current {
        background: var(--color-accent);
        color: #fff;
        box-shadow: 0 4px 12px rgba(43, 115, 163, 0.35);
    }

    /* Tabs */
    .fm-tabs {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid var(--color-line);
        margin-bottom: 1.1rem;
    }
    .fm-tab {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.7rem 0.25rem;
        border: none;
        background: none;
        font-family: inherit;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--color-text-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: color 0.15s ease, border-color 0.15s ease;
    }
    .fm-tab svg { opacity: 0.7; }
    .fm-tab.is-active {
        color: var(--color-accent-dark);
        border-bottom-color: var(--color-accent);
    }
    .fm-tab.is-active svg { opacity: 1; }

    /* Panels */
    .fm-panel { display: none; }
    .fm-panel.is-active { display: block; }

    /* Info card */
    .fm-card {
        border: 1px solid var(--color-line);
        border-radius: 6px;
        background: var(--color-white);
        box-shadow: var(--shadow-sm);
        padding: 1.1rem;
        margin-bottom: 1.4rem;
    }
    .fm-card__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    .fm-card__title {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: 0.01em;
    }
    .fm-card__sub {
        margin: 0.2rem 0 0;
        font-size: 0.8125rem;
        color: var(--color-text-muted);
    }
    .fm-share {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 0.7rem;
        border: 1px solid var(--color-line);
        border-radius: 999px;
        background: var(--color-white);
        font-family: inherit;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-text-light);
        cursor: pointer;
        white-space: nowrap;
        transition: border-color 0.15s ease, color 0.15s ease;
    }
    .fm-share:active,
    .fm-share.is-copied { border-color: var(--color-accent); color: var(--color-accent-dark); }

    /* Stats grid */
    .fm-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }
    .fm-stat {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.7rem 0.8rem;
        border: 1px solid var(--color-line);
        border-radius: 5px;
        background: var(--color-secondary);
    }
    .fm-stat__label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-accent-dark);
    }
    .fm-stat__value {
        font-size: 1.0625rem;
        font-weight: 800;
        color: var(--color-text);
    }
    .fm-stat__value--avail {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
    .fm-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #2b73a3;
        flex: none;
    }
    .fm-stat--wide {
        grid-column: 1 / -1;
    }
    /* Price range: spaced muted separator + accented currency */
    .fm-stat__value--price {
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
    }
    .fm-stat__value--price .fm-price__sep {
        margin: 0 0.3em;
        color: var(--color-text-muted);
        font-weight: 500;
    }
    .fm-stat__value--price .fm-price__cur {
        margin-left: 0.22em;
        color: var(--color-accent-dark);
        font-weight: 700;
    }
    .fm-stat--cta {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
        color: #fff;
        font-family: inherit;
        font-size: 0.9375rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(43, 115, 163, 0.3);
    }
    .fm-stat--cta:active { transform: translateY(1px); }

    /* Section head (Floor plan) */
    .fm-section-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin: 0 0.15rem 0.7rem;
    }
    .fm-section-head__label { font-size: 1.05rem; font-weight: 800; }
    .fm-section-head__count { font-size: 0.8125rem; color: var(--color-text-muted); font-weight: 600; }

    /* Plan card */
    .fm-plan {
        border: 1px solid var(--color-line);
        border-radius: 6px;
        background: var(--color-white);
        box-shadow: var(--shadow-sm);
        padding: 0.85rem;
    }
    .fm-plan .apt-floor-map-root { width: 100%; }
    .fm-plan .she-preview-overlay__img { max-height: 46vh; }
    .fm-legend {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding: 0.55rem 0.5rem 0;
        border-top: 1px solid var(--color-line-soft);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-text-light);
    }
    .fm-legend__item { display: inline-flex; align-items: center; gap: 0.3rem; }
    .fm-legend__dot { width: 4px; height: 4px; border-radius: 50%; flex: none; }
    .fm-legend__dot--available { background: #2b73a3; }
    .fm-legend__dot--sold { background: #dc2626; }
    .fm-legend__count { color: var(--color-text-muted); }

    /* Apartments tab grid */
    .fm-aparts.af-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }
    .fm-empty {
        text-align: center;
        color: var(--color-text-muted);
        padding: 2rem 1rem;
    }

    /* ---- Project (building) page: swap desktop sections for the .fm view ---- */
    /* The body carries a 100px top padding to clear the fixed header on desktop;
       on mobile the .fm block owns its own top spacing, so drop the duplicate. */
    body.single-building { padding-top: 0; }

    /* Apartment page: the body's 100px header offset stacks on top of the
       apt-detail section's own ~56-64px top padding — trim it so the project
       card sits just below the header (consistent with the project page). */
    body.single-apartment { padding-top: 24px; }

    main.page-horizontal.single-building > .page-section.apt-detail,
    main.page-horizontal.single-building > .page-section.bg-detail,
    main.page-horizontal.single-building > .page-section.bh-stat-bar,
    main.page-horizontal.single-building > .page-section.bh-amenities,
    main.page-horizontal.single-building > .page-section.bh-features {
        display: none !important;
    }

    /* Floors tab — browseable floor cards */
    .fm-floor-cards { display: flex; flex-direction: column; gap: 0.55rem; }
    .fm-floor-card {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.7rem 0.85rem;
        border: 1px solid var(--color-line);
        border-radius: 5px;
        background: var(--color-white);
        text-decoration: none;
        color: var(--color-text);
        box-shadow: var(--shadow-xs);
    }
    .fm-floor-card:active { background: var(--color-secondary); }
    .fm-floor-card__num {
        flex: none;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        background: var(--color-accent-light);
        color: var(--color-accent-dark);
        font-size: 1.1rem;
        font-weight: 800;
    }
    .fm-floor-card__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
    .fm-floor-card__line { font-size: 0.9375rem; font-weight: 700; }
    .fm-floor-card__sub { display: flex; gap: 0.6rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--color-text-muted); }
    .fm-floor-card__avail.is-on { color: #15a34a; font-weight: 600; }
    .fm-floor-card__price { font-weight: 700; color: var(--color-text-light); }
    .fm-floor-card__arrow { flex: none; color: var(--color-text-muted); }

    /* Features tab — feature blocks + amenity chips */
    .fm-features { display: flex; flex-direction: column; gap: 1rem; }
    .fm-feature {
        border: 1px solid var(--color-line);
        border-radius: 5px;
        overflow: hidden;
        background: var(--color-white);
        box-shadow: var(--shadow-xs);
    }
    .fm-feature__img { width: 100%; height: 160px; object-fit: cover; display: block; }
    .fm-feature__body { padding: 0.9rem 1rem 1.1rem; }
    .fm-feature__title { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 800; }
    .fm-feature__desc { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--color-text-light); }

    .fm-amenities { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
    .fm-amenity {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.75rem;
        border: 1px solid var(--color-line);
        border-radius: 999px;
        background: var(--color-secondary);
        font-size: 0.8125rem;
        font-weight: 600;
    }
    .fm-amenity__icon { display: inline-flex; width: 16px; height: 16px; color: var(--color-accent-dark); }
    .fm-amenity__icon svg { width: 100%; height: 100%; }
}

@media (max-width: 380px) {
    .fm-tab { font-size: 0.75rem; gap: 0.25rem; }
    .fm-tab svg { width: 14px; height: 14px; }
    .fm-card__title { font-size: 1.3rem; }
    .fm-aparts.af-grid { grid-template-columns: 1fr; }
}

/* --- Apartment page (single-apartment) --------------------------------- */

@media (max-width: 720px) {
    /* Sidebar: looser rhythm and no horizontal cramp */
    .apt-sidebar {
        padding: 1rem;
        gap: 0.85rem;
        border-radius: 5px;
    }
    .apt-sidebar__footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .apt-sidebar__footer .apt-share,
    .apt-sidebar__footer .apt-back {
        min-height: 44px;
    }

    /* Plan image: rounded card on mobile */
    .apt-plan {
        border-radius: 5px;
    }

    /* Gallery: 2-column on phones */
    .apartment-gallery__grid,
    .apt-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    /* Smaller meta stat blocks */
    .apt-stat-list li {
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    /* Even more compact on small phones */
    .bh-panel--project {
        padding: 0.85rem 0.85rem 0.75rem;
    }
    .bh-panel--project .apt-brand__title {
        font-size: 1.125rem;
        letter-spacing: 0.14em;
    }
    .bh-panel--project .apt-total__price strong {
        font-size: 1.5rem;
    }

    .apt-sidebar {
        padding: 0.85rem;
    }
}

/* --- Bottom nav clearance (all stage pages) ---------------------------- */

@media (max-width: 768px) {
    /* The mobile-bottom-nav from header.php is fixed at viewport bottom.
       Add bottom safe-area padding so content isn't hidden behind it. */
    main.page-horizontal {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* ============================================================
   Mobile (≤720px): show the desktop-style bottom pill menu,
   hide the hamburger + 2-link nav, and lift the contact FAB
   above the menu. Added 2026-06-08.
   ============================================================ */
@media (max-width: 900px) {
    /* Bottom pill menu — desktop style, fitted for phones/tablets */
    body .bottom-navigation,
    body.home .bottom-navigation,
    body:not(.home) .bottom-navigation {
        display: block !important;
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 14px;
        transform: translateX(-50%);
        max-width: calc(100vw - 16px);
        z-index: 1001;
    }
    body .bottom-navigation__inner {
        max-width: 100%;
        padding: 0.3rem 0.4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox — hide scrollbar */
    }
    body .bottom-navigation__inner::-webkit-scrollbar { display: none; } /* Safari/Chrome */
    body .bottom-navigation__inner .nav-menu {
        flex-wrap: nowrap;
        gap: 0.1rem;
        justify-content: center;
    }
    /* Higher specificity to beat the inner-page pill link sizing so all
       items fit on one line (smaller padding + tighter letter-spacing). */
    body.home .bottom-navigation .nav-menu li a,
    body:not(.home) .bottom-navigation .nav-menu li a {
        height: 36px;
        padding: 0 0.5rem;
        font-size: 14px;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    /* Hide the mobile-only nav variants (replaced by the pill) */
    body .site-header .menu-toggle,
    body.home .site-header .menu-toggle,
    body:not(.home) .site-header .menu-toggle { display: none !important; }
    body .mobile-bottom-nav { display: none !important; }

    /* Contact button (FAB) — styled here too so it shows up to 900px,
       lifted above the bottom menu. */
    .mobile-contact-fab {
        position: fixed;
        right: 16px;
        bottom: 84px;
        width: 52px;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--color-accent);
        color: var(--color-white);
        box-shadow: 0 10px 28px rgba(43, 115, 163, 0.38), 0 2px 8px rgba(15, 15, 15, 0.14);
        z-index: 1040;
        text-decoration: none;
    }
}

/* ============================================================
   Bigger logo — desktop + mobile. Added 2026-06-08.
   ============================================================ */
body.home .site-header .site-logo img.logo-img,
body.home .site-header .logo-img,
body:not(.home) .site-header .site-logo img.logo-img,
body:not(.home) .site-header .logo-img {
    height: 46px;
}
body.home .site-header.scrolled .logo-img,
body:not(.home) .site-header.scrolled .logo-img {
    height: 38px;
}
@media (max-width: 720px) {
    body.home .site-header .site-logo img.logo-img,
    body.home .site-header .logo-img,
    body:not(.home) .site-header .site-logo img.logo-img,
    body:not(.home) .site-header .logo-img {
        height: 40px;
    }
    body.home .site-header.scrolled .logo-img,
    body:not(.home) .site-header.scrolled .logo-img {
        height: 36px;
    }
}

/* ============================================================
   Project page — scroll-down cue (desktop + mobile). Added 2026-06-08.
   ============================================================ */
.bh-scroll-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(15, 15, 15, 0.55);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 1002;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    animation: bhCueBounce 1.8s ease-in-out infinite;
    transition: opacity 0.3s ease;
}
.bh-scroll-cue svg { width: 23px; height: 23px; }
.bh-scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
/* Keep the cue centred just ABOVE the bottom menu at every breakpoint
   (the menu sits at bottom:28px on desktop, 84px on tablets, 16px on phones). */
@media (max-width: 900px) {
    .bh-scroll-cue { bottom: 78px; }
}
@keyframes bhCueBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(5px); }
}

/* Language switcher — keep visible on tablet/mobile for testing. Added 2026-06-08. */
@media (max-width: 900px) {
    .site-header__lang { display: inline-flex !important; }
}

/* Phone home (video splash): hide the logo and language switcher so only the
   video, bottom-nav pill and WhatsApp FAB show. Overrides the testing rule
   above. Added 2026-06-29. */
@media (max-width: 720px) {
    body.home .site-header__brand,
    body.home .site-header__lang { display: none !important; }

    /* The home header is empty on phones (logo + lang hidden), so the dark
       "scrolled" background showed as a stray grey bar at the top on scroll.
       Keep it fully transparent at every scroll position. */
    body.home .site-header,
    body.home .site-header.scrolled {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
}

/* ============================================================
   Project stage — stack panels BELOW the render on tablet/mobile.
   The base layout overlays the panels absolutely on a fixed-aspect
   stage with overflow:hidden, which cramped/clipped the left panel
   on small screens. Here we switch to a clean vertical stack.
   Added 2026-06-08.
   ============================================================ */
@media (max-width: 900px) {
    .bh-stage {
        aspect-ratio: auto;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
        container-type: normal;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .bh-stage__canvas {
        position: relative;
        inset: auto;
        width: 100%;
        /* Portrait/vertical frame, like the floor page's building render. */
        aspect-ratio: 4 / 5;
        border-radius: 0;
        overflow: hidden;
    }
    /* Zoom into the building exactly like the floor page: scale the WHOLE
       wrapper (image + SVG hotspots together) so the hotspots stay aligned
       and clickable; the canvas overflow:hidden crops it. */
    .bh-stage__canvas .apt-floor-map-root--full-stage .sunrise-building-map {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bh-stage__canvas .apt-floor-map-root--full-stage .she-preview-overlay__wrapper {
        position: relative;
        inset: auto;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        transform: scale(2.6);
        transform-origin: 62% 52%;
    }
    .bh-stage__canvas .apt-floor-map-root--full-stage .she-preview-overlay__img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .bh-stage__overlay {
        position: static;
        inset: auto;
        padding: 0 14px;
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .bh-panel--project,
    .bh-panel--legend {
        position: static;
        inset: auto;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        transform: none;
    }
    /* Legend just repeats the project panel's status list when stacked */
    .bh-panel--legend { display: none; }
}

/* ============================================================
   Logo plate — white "glass" background like the bottom menu pill,
   rounded RECTANGLE (not a circle), so the logo stays visible over
   the hero video / render. Added 2026-06-08.
   ============================================================ */
.site-header__brand .site-logo {
    padding: 0.35rem 0.95rem;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    backdrop-filter: saturate(1.4) blur(18px);
    box-shadow: var(--shadow-md, 0 6px 20px rgba(43, 115, 163, 0.12));
}

/* ============================================================
   Mobile inner pages — transparent header overlaying the render
   at the top; turns solid white once scrolled. Added 2026-06-08.
   ============================================================ */
@media (max-width: 900px) {
    body:not(.home) .site-header:not(.scrolled) {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    body:not(.home) .site-header.scrolled {
        background: rgba(255, 255, 255, 0.96) !important;
    }
}

/* ======================================================================
   Booking modal — apartment booking form ("დაჯავშნე ბინა")
   ====================================================================== */
.booking-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.booking-modal[hidden] { display: none; }
.booking-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 26, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: booking-fade 0.2s ease;
}
.booking-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-white);
    border-radius: 6px;
    box-shadow: var(--shadow-xl);
    padding: 1.75rem 1.5rem 1.5rem;
    animation: booking-pop 0.22s var(--ease-out, ease);
}
@keyframes booking-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes booking-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

.booking-modal__close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text-light);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.booking-modal__close:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }

.booking-modal__head { margin-bottom: 1.1rem; padding-right: 2.5rem; }
.booking-modal__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: 0.01em;
}
.booking-modal__sub { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--color-text-muted); }

.booking-modal__alert {
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 5px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #b91c1c;
    font-size: 0.8125rem;
}

.booking-form { display: flex; flex-direction: column; gap: 0.85rem; }
.booking-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.booking-form__field { display: flex; flex-direction: column; gap: 0.3rem; }
.booking-form__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-accent-dark);
}
.booking-form__label span { color: #dc2626; margin-left: 2px; }
.booking-form__field input,
.booking-form__field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    background: var(--color-secondary);
    font: inherit;
    font-size: 0.9375rem;
    color: var(--color-primary);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.booking-form__field input:focus,
.booking-form__field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-white);
}
.booking-form__field textarea { resize: vertical; min-height: 64px; }

.booking-form__submit {
    margin-top: 0.35rem;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(43, 115, 163, 0.28);
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.booking-form__submit:hover { box-shadow: 0 10px 26px rgba(43, 115, 163, 0.36); }
.booking-form__submit:active { transform: translateY(1px); }
.booking-form__note { margin: 0; font-size: 0.6875rem; color: var(--color-text-muted); text-align: center; }

.booking-modal__success {
    text-align: center;
    padding: 1rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.booking-modal__success svg { color: #2b73a3; }
.booking-modal__success h4 { margin: 0.4rem 0 0; font-size: 1.125rem; font-weight: 800; color: var(--color-primary); }
.booking-modal__success p { margin: 0; font-size: 0.875rem; color: var(--color-text-light); }
.booking-modal__success .booking-form__submit { margin-top: 0.85rem; width: 100%; }

@media (max-width: 480px) {
    .booking-modal { padding: 0; align-items: flex-end; }
    .booking-modal__dialog {
        max-width: none;
        max-height: 92vh;
        border-radius: 6px 6px 0 0;
        padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
        animation: booking-sheet 0.24s var(--ease-out, ease);
    }
    @keyframes booking-sheet { from { transform: translateY(100%); } to { transform: none; } }
    .booking-modal__title { font-size: 1.3rem; }
}