/* =====================================================================
   Bau — site design (2026 rebuild)

   One brand colour (#2B73A3), four blocks, nothing black.
   Everything the visitor sees on the front page lives here: the header,
   the hero banner, "About us", "Choose an apartment" and the footer.

   Loaded after style.css, which keeps the design tokens (:root) and the
   inner building / floor / apartment templates. Class names are all
   `bau-` prefixed so none of the older rules in style.css can reach them.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Brand typeface — Roboto

   Roboto replaced the self-hosted BPG Mrgvlovani face across the site.
   Roboto ships NO Georgian glyphs, so 'Noto Sans Georgian' sits directly
   behind it and is what actually renders the Georgian copy — both are
   enqueued from Google Fonts in functions.php. Keep them adjacent: drop
   Noto and every Georgian letter falls back to an arbitrary system face.

   The old bpg-mrgvlovani.woff2 / .woff / .ttf files are still in
   ../fonts if the face is ever wanted back.
   --------------------------------------------------------------------- */

:root {
    --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;
}

/* ---------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------- */

body {
    font-family: var(--font-body);
    color: var(--color-text-light);
    background: var(--color-white);
}

.bau-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.bau-section {
    padding: 96px 0;
}

.bau-section--tint {
    background: var(--bau-blue-wash);
}

/* Section heading group: small blue kicker, then the title. */
.bau-head {
    max-width: 720px;
    margin: 0 0 48px;
}

.bau-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.bau-kicker {
    display: inline-block;
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--bau-blue);
}

.bau-kicker--light {
    color: rgba(255, 255, 255, 0.9);
}

.bau-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    color: var(--bau-blue); /* same blue as the header bar */
}

.bau-title--light {
    color: var(--color-white);
}

.bau-lead {
    margin: 18px 0 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text-light);
}

.bau-lead--light {
    color: rgba(255, 255, 255, 0.86);
}

/* ---------------------------------------------------------------------
   2. Buttons
   --------------------------------------------------------------------- */

.bau-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: background var(--transition-smooth), color var(--transition-smooth),
                border-color var(--transition-smooth), transform var(--transition-smooth);
}

.bau-btn:hover {
    transform: translateY(-2px);
}

.bau-btn__arrow {
    transition: transform var(--transition-smooth);
}

.bau-btn:hover .bau-btn__arrow {
    transform: translateX(4px);
}

/* Solid brand blue — the primary call to action. */
.bau-btn--primary {
    background: var(--bau-blue);
    border-color: var(--bau-blue);
    color: var(--color-white);
}

.bau-btn--primary:hover {
    background: var(--bau-blue-dark);
    border-color: var(--bau-blue-dark);
    color: var(--color-white);
}

/* White solid, blue text — the other half of the pair. */
.bau-btn--white {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--bau-blue);
}

.bau-btn--white:hover {
    background: var(--bau-blue-soft);
    border-color: var(--bau-blue-soft);
    color: var(--bau-blue-dark);
}

/* Blue outline on white — the second action on light sections. */
.bau-btn--outline {
    background: transparent;
    border-color: var(--bau-blue);
    color: var(--bau-blue);
}

.bau-btn--outline:hover {
    background: var(--bau-blue);
    border-color: var(--bau-blue);
    color: var(--color-white);
}

/* The header floats over the page, so anchor jumps have to clear it. */
[id] {
    scroll-margin-top: calc(var(--bau-header-h) + 12px);
}

/* Inner templates (building / floor / apartment / contact) run under the
   fixed bar — reserve its height once, on the wrapper. */
body:not(.home) main.page-horizontal {
    padding-top: var(--bau-header-h);
}

/* ---------------------------------------------------------------------
   3. Header
   --------------------------------------------------------------------- */

.bau-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    height: var(--bau-header-h);
    background: var(--bau-blue);
    transition: background var(--transition-smooth), box-shadow var(--transition-smooth);
}

/* Solid brand blue everywhere, home page included — the same bar bau.ge
   uses. It no longer goes see-through over the hero photo. */
/* Logged-in: WordPress pushes the page down by its admin toolbar, but the
   fixed bar stayed at the very top, leaving a white strip above the hero.
   Sit the bar under the toolbar instead. */
.admin-bar .bau-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .bau-header {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    /* The toolbar scrolls away on phones: the bar follows it up (the offset is
       set on scroll from functions.php), 0 once the toolbar is gone. */
    .admin-bar .bau-header {
        top: var(--bau-bar-top, 46px);
    }
}

body.home .bau-header {
    background: var(--bau-blue);
    border-bottom: 0;
}

body.home .bau-header.is-solid {
    box-shadow: 0 2px 24px rgba(43, 115, 163, 0.28);
}

.bau-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.bau-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: auto;
}

/* The bar is 120px so the logo can be 104px (8px of air above and below).
   The source is bau-logo@3x.png — the 100x86 original pre-upscaled, which stays
   crisp at this size where the browser-stretched original went soft. On scroll
   it drops to 84px. */
.bau-header__logo img {
    display: block;
    height: 104px;
    width: auto;
    transition: height var(--transition-smooth);
}

.bau-header.is-solid .bau-header__logo img {
    height: 84px;
}

/* Primary menu ------------------------------------------------------- */

.bau-header__nav .nav-menu,
.bau-header__nav ul {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bau-header__nav a {
    position: relative;
    display: block;
    padding: 6px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-white);
    text-decoration: none;
    transition: transform 0.18s ease;
}

/* Hover: the label grows slightly — no underline. */
.bau-header__nav a:hover,
.bau-header__nav a:focus-visible {
    transform: scale(1.08);
}

.bau-header__nav a:hover,
.bau-header__nav .current-menu-item > a,
.bau-header__nav .current_page_item > a {
    color: var(--color-white);
}

/* Right-hand actions ------------------------------------------------- */

.bau-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.bau-lang {
    display: flex;
    align-items: center;
    gap: 2px;
}

.bau-lang a {
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color var(--transition-smooth), background var(--transition-smooth);
}

.bau-lang a:hover {
    color: var(--color-white);
}

.bau-lang a.is-active {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
}

.bau-header__phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-white);
    text-decoration: none;
    transition: background var(--transition-smooth), border-color var(--transition-smooth),
                color var(--transition-smooth);
}

.bau-header__phone:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--bau-blue);
}

/* Hamburger ---------------------------------------------------------- */

.bau-burger {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.bau-burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-white);
    transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}

/* Mobile drawer ------------------------------------------------------ */

.bau-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--bau-blue);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
}

.bau-drawer.is-open {
    opacity: 1;
    visibility: visible;
}

.bau-drawer__bar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: var(--bau-header-h);
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.bau-drawer__logo img {
    display: block;
    height: 84px;
    width: auto;
}

.bau-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
}

.bau-drawer__close:hover,
.bau-drawer__close:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

/* Menu, languages, phone: centred when they fit, scrollable when the screen
   is short (landscape) - auto margins never push the first item off-screen. */
.bau-drawer__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 28px 18px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bau-drawer__body > :first-child {
    margin-top: auto;
}

.bau-drawer__body > :last-child {
    margin-bottom: auto;
}

.bau-drawer ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bau-drawer a {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
}

.bau-drawer a:hover {
    color: var(--bau-blue-soft);
}


.bau-drawer__phone {
    margin-top: 6px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   4. Block 1 — Hero banner
   --------------------------------------------------------------------- */

/* Photo only — no copy, no overlay. It starts under the solid header and
   fills what is left of the first screen. */
.bau-hero {
    position: relative;
    display: block;
    margin-top: var(--bau-header-h);
    /* Sized to the photo (1672 wide) minus ~80px of empty sky at the top, so
       the building sits close under the header; the street at the bottom is
       never cropped (see object-position on the image below). A full-screen
       box was wider than 16:9 and shaved the roof or the street off. */
    aspect-ratio: 1672 / 861;
    padding: 0;
    overflow: hidden;
    background: var(--bau-blue-deep);
}

.bau-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bau-hero__media img,
.bau-hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom; /* any crop comes off the sky */
    display: block;
}

.bau-hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}



/* ---------------------------------------------------------------------
   5. Block 2 — About us
   --------------------------------------------------------------------- */

.bau-about__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: start;
}

.bau-about__text {
    margin: 0 0 20px;
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--bau-blue); /* same blue as the header bar */
}

/* "Quality / Reliability" — the company's two principles, pulled out. */
.bau-about__principles {
    margin: 28px 0;
    padding: 22px 26px;
    border-left: 3px solid var(--bau-blue);
    background: var(--bau-blue-wash);
    border-radius: 0 6px 6px 0;
}

.bau-about__principles-label {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--bau-blue);
}

.bau-about__principles-value {
    /* The two principles used to be split by a "/" glyph. Without it the gap
       has to come from the layout — and each principle needs its own span,
       because adjacent bare text nodes collapse into one anonymous flex item
       and `gap` would never apply between them. */
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Fact cards ----------------------------------------------------------
   Plain white cards, text only — no icons, no badges. A blue edge on the
   left is the only ornament. */

.bau-facts {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bau-fact {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid var(--color-line);
    border-left: 3px solid var(--bau-blue);
    border-radius: 4px;
    background: var(--color-white);
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.bau-fact:hover {
    border-color: var(--bau-blue);
    box-shadow: var(--shadow-sm);
}

.bau-fact__label {
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-primary);
}

/* Partner bank strip -------------------------------------------------- */

.bau-partner {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
    padding: 20px 24px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    background: var(--color-white);
}

.bau-partner__logo {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 4px;
    object-fit: contain;
}

.bau-partner__label {
    margin: 0 0 3px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--bau-blue);
}

.bau-partner__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   6. Block 3 — Our projects

   White paper, blue ink. The single hot-spotted render was replaced by a
   slider over every published building, so more projects can be added
   without touching this file.
   --------------------------------------------------------------------- */

.bau-choose {
    background: var(--color-white);
    color: var(--color-primary);
}

/* The interactive render. Desktop gets the image map, phones get the
   [mobile-building] shortcode — same behaviour as before, on white. */
.bau-choose__stage {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    overflow: hidden;
    background: var(--bau-blue-wash);
}

.bau-choose__stage img,
.bau-choose__stage .building-img {
    display: block;
    width: 100%;
    height: auto;
}

.bau-choose__stage a {
    display: block;
}

.bau-choose__stage .building-desktop {
    display: block;
}

.bau-choose__stage .building-mobile {
    display: none;
}

/* Projects carousel (2+ projects in Admin → Projects) — same frame as the
   single render; slides cross-fade, arrows sit on the sides. */
.bau-carousel__track {
    position: relative;
}

.bau-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s;
}

.bau-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.bau-carousel__slide a {
    height: 100%;
}

.bau-choose__stage .bau-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bau-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--bau-blue);
    box-shadow: 0 4px 16px rgba(43, 115, 163, 0.25);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.bau-carousel__arrow--prev { left: 16px; }
.bau-carousel__arrow--next { right: 16px; }

.bau-carousel__arrow:hover,
.bau-carousel__arrow:focus-visible {
    background: var(--bau-blue);
    color: var(--color-white);
    transform: translateY(-50%) scale(1.06);
    outline: none;
}

.bau-carousel__arrow:active {
    transform: translateY(-50%) scale(0.94);
}

.bau-carousel__dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 2;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.bau-carousel__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.bau-carousel__dot.is-active {
    background: var(--color-white);
    transform: scale(1.25);
}

@media screen and (max-width: 600px) {
    .bau-carousel__arrow {
        width: 36px;
        height: 36px;
    }
    .bau-carousel__arrow--prev { left: 8px; }
    .bau-carousel__arrow--next { right: 8px; }
}

/* Steps ---------------------------------------------------------------- */

.bau-choose__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 44px auto 0;
    padding: 0;
    list-style: none;
}

.bau-step {
    padding: 22px 24px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    background: var(--bau-blue-wash);
}

.bau-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--bau-blue);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-white);
}

.bau-step__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.bau-step__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-light);
}

.bau-choose__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 44px;
}

/* ---------------------------------------------------------------------
   7. Block 4 — Contact

   Details and a short callback form on the left, the map on the right.
   --------------------------------------------------------------------- */

/* White, like the block above it — no tinted band. */
.bau-contact {
    background: var(--color-white);
    padding: 56px 0 64px;
}

/* `stretch` is what keeps the map exactly as tall as the form beside it:
   the form column sets the row height, the map fills it. */
.bau-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: stretch;
}

/* Callback form ------------------------------------------------------- */

.bau-contact__form {
    margin-top: 20px;
}

.bau-contact__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bau-contact__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.bau-contact__field > span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.bau-contact__field input,
.bau-contact__field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-primary);
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.bau-contact__field textarea {
    resize: vertical;
}

.bau-contact__field input:focus,
.bau-contact__field textarea:focus {
    outline: none;
    border-color: var(--bau-blue);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}

/* Off-screen rather than display:none — some bots skip hidden fields. */
.bau-contact__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bau-contact__submit {
    margin-top: 4px;
}

.bau-contact__alert {
    margin: 22px 0 0;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.bau-contact__alert--ok {
    border: 1px solid #b7e0c4;
    background: #eefaf1;
    color: #1d6b37;
}

.bau-contact__alert--bad {
    border: 1px solid #f0c2c2;
    background: #fdeeee;
    color: #96342f;
}

/* Map ----------------------------------------------------------------- */

.bau-contact__map {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    background: var(--color-white);
}

/* Grows to the row height the form set, with a floor for short forms. */
.bau-contact__map iframe {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 340px;
    border: 0;
}

/* ---------------------------------------------------------------------
   8. Block 5 — Footer
   --------------------------------------------------------------------- */

.bau-footer {
    background: var(--bau-blue);
    color: rgba(255, 255, 255, 0.78);
}

.bau-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color var(--transition-smooth);
}

.bau-footer a:hover {
    color: var(--color-white);
}

.bau-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 56px;
    padding: 72px 0 56px;
}

.bau-footer__logo img {
    display: block;
    height: 76px; /* 2x the original 38px */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 20px;
}

.bau-footer__tagline {
    margin: 0;
    max-width: 320px;
    font-size: 0.95rem;
    line-height: 1.75;
}

.bau-footer__title {
    margin: 0 0 18px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-white);
}

.bau-footer__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}

.bau-footer__list--contact li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.bau-footer__ico {
    flex-shrink: 0;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.6);
}

.bau-footer__socials {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.bau-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    transition: transform var(--transition-smooth), filter var(--transition-smooth),
                box-shadow var(--transition-smooth);
}

/* Each network in its own colour. Written as `a.bau-footer__social` on purpose:
   the generic `.bau-footer a:hover` above is one pseudo-class heavier than a
   plain `.bau-footer__social:hover`, so it used to win and repaint the glyph. */
.bau-footer a.bau-footer__social,
.bau-footer a.bau-footer__social:hover {
    color: var(--color-white);
}

.bau-footer__social--fb { background: #1877f2; }

.bau-footer__social--ig {
    background: #d6249f; /* fallback where the gradient does not paint */
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.bau-footer__social--wa { background: #25d366; }

.bau-footer__social--vb { background: #7360f2; }

.bau-footer a.bau-footer__social:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.bau-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.86rem;
}

.bau-footer__top-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Floating WhatsApp button (phones only) */
.bau-wa {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 800;
    display: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366; /* WhatsApp brand green, official glyph */
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(18, 140, 76, 0.35);
}

@media (max-width: 860px) {
    .bau-wa {
        display: flex;
    }
}

/* ---------------------------------------------------------------------
   8. Generic pages (blog, 404, editor content)
   --------------------------------------------------------------------- */

.bau-page {
    padding: calc(var(--bau-header-h) + 72px) 0 96px;
}

.bau-page__title {
    margin: 0 0 32px;
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
}

.bau-prose {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--color-text-light);
}

.bau-prose h2,
.bau-prose h3,
.bau-prose h4 {
    margin: 2em 0 0.6em;
    color: var(--color-primary);
}

.bau-prose a {
    color: var(--bau-blue);
}

.bau-postlist {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bau-postcard {
    padding: 26px 28px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.bau-postcard:hover {
    border-color: var(--bau-blue);
    box-shadow: var(--shadow-sm);
}

.bau-postcard h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
}

.bau-postcard h2 a {
    color: var(--color-primary);
    text-decoration: none;
}

.bau-postcard h2 a:hover {
    color: var(--bau-blue);
}

.bau-postcard time {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   9. Scroll reveal
   --------------------------------------------------------------------- */

/* Visible by default — main.js only opts in once it knows it can animate,
   so a blocked script never leaves a blank section behind. */
.js-reveal .bau-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.js-reveal .bau-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .bau-reveal,
    .js-reveal .bau-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------------------------------------------------------------------
   10. Responsive
   --------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .bau-about__grid,
    .bau-contact__grid {
        gap: 44px;
    }
    .bau-header__nav .nav-menu,
    .bau-header__nav ul {
        gap: 22px;
    }
}

@media (max-width: 960px) {
    .bau-section {
        padding: 72px 0;
    }
    .bau-about__grid,
    .bau-contact__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .bau-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 56px 0 44px;
    }
    .bau-footer__brand {
        grid-column: 1 / -1;
    }
    .bau-choose__steps {
        grid-template-columns: 1fr;
    }
}

/* Below this the inline menu, the language switcher and the phone button
   all move into the drawer — only the logo and the burger stay. */
@media (max-width: 860px) {
    .bau-header__nav,
    .bau-header__phone,
    .bau-header__actions .bau-lang {
        display: none;
    }
    .bau-burger {
        display: flex;
    }
    .bau-drawer .bau-lang {
        display: flex;
    }
}

@media (max-width: 680px) {
    .bau-section {
        padding: 60px 0;
    }
    .bau-container,
    .bau-header__inner {
        padding-left: 18px;
        padding-right: 18px;
    }
    .bau-head {
        margin-bottom: 34px;
    }
    /* Only swap in the phone image map when the plugin actually rendered one. */
    .bau-choose__stage.has-mobile-map .building-desktop {
        display: none;
    }
    .bau-choose__stage.has-mobile-map .building-mobile {
        display: block;
    }
    .bau-choose__actions .bau-btn,
    .bau-partner {
        width: 100%;
    }
    .bau-contact__row {
        grid-template-columns: 1fr;
    }
    .bau-contact__submit {
        width: 100%;
    }
    .bau-contact {
        padding: 40px 0 48px;
    }
    .bau-contact__map iframe {
        min-height: 260px;
    }
    .bau-footer__grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .bau-footer__bottom {
        justify-content: center;
        text-align: center;
    }
    .bau-about__principles {
        padding: 18px 20px;
    }
}

/* ---------------------------------------------------------------------
   11. Apartment page (single-apartment.php)

   Rebuilt to the shape of the old baumeister.ge page — address, plan
   render, "Information" table, PDF download — on the new design system.
   --------------------------------------------------------------------- */

/* Specificity matches main.page-horizontal > .page-section in style.css. */
main.page-horizontal > .page-section.ap-detail {
    max-width: 1760px;
    margin: 0 auto;
    padding: 14px clamp(20px, 3vw, 56px) 56px;
}

/* Compact: everything above the render eats into the height the render gets. */
.ap-head {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-line);
}

.ap-head__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--color-text-muted);
}

.ap-head__crumbs a {
    color: var(--bau-blue);
    text-decoration: none;
}

.ap-head__crumbs a:hover {
    text-decoration: underline;
}

.ap-head__title {
    margin: 6px 0 0;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.1vw, 1.7rem);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
}

.ap-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.ap-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--color-text-light);
}

.ap-chip strong {
    color: var(--color-primary);
}

/* Render + information ------------------------------------------------ */

.ap-grid {
    display: grid;
    /* 70 / 30 — the render is the point of the page, the table supports it. */
    grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
    gap: clamp(28px, 2.4vw, 48px);
    align-items: start;
}

/* Building page: no Information column — the render takes the full width. */
.ap-grid--solo {
    grid-template-columns: minmax(0, 1fr);
}

.ap-render {
    padding: 18px;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    background: var(--color-white);
}

.ap-render__btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.ap-render__img,
.ap-render img {
    display: block;
    width: 100%;
    height: auto;
    /* Plans are often portrait — at full column width they ran ~1.5 screens
       tall. Fit the whole plan on screen, centred; click still enlarges it. */
    max-height: calc(100svh - 200px);
    min-height: 0;
    object-fit: contain;
    margin-inline: auto;
}

.ap-render__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    color: var(--color-line);
}

/* The information table: blue header, zebra rows — the old site's panel. */
.ap-info {
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    background: var(--color-white);
}

.ap-info__head {
    margin: 0;
    padding: 16px 22px;
    background: var(--bau-blue);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-white);
}

.ap-info__rows {
    margin: 0;
    padding: 0;
}

.ap-info__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 22px;
    font-size: 0.92rem;
}

.ap-info__row:nth-child(odd) {
    background: var(--bau-blue-wash);
}

.ap-info__row dt {
    margin: 0;
    color: var(--color-text-light);
}

.ap-info__row dd {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-primary);
}

.ap-info__row--total dd {
    font-size: 1.05rem;
    color: var(--bau-blue);
}

.ap-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 22px;
    border-top: 1px solid var(--color-line);
}

.ap-price__value {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
}

.ap-price__unit {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.ap-actions {
    display: grid;
    gap: 10px;
    padding: 0 22px 20px;
}

.ap-actions__btn {
    width: 100%;
}

/* The white button sits on a white card here, so it needs its own edge. */
.ap-actions .bau-btn--white {
    border-color: var(--bau-blue);
}

.ap-info__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 14px 22px;
    border-top: 1px solid var(--color-line);
}

.ap-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bau-blue);
    text-decoration: none;
    cursor: pointer;
}

.ap-link:hover {
    color: var(--bau-blue-dark);
}

@media (max-width: 1080px) {
    .ap-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 680px) {
    main.page-horizontal > .page-section.ap-detail {
        padding: 24px 16px 56px;
    }
    .ap-render {
        padding: 14px;
    }
    .ap-info__row,
    .ap-price,
    .ap-actions,
    .ap-info__foot {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------------------------------------------------------------------
   12. Building page (single-building.php)

   Reuses the apartment page's head / info-table components; only the
   interactive render stage and its legend are specific to this template.
   --------------------------------------------------------------------- */

/* style.css still carries `.single-building { padding-top: 100px }` from the
   old template. That class sits on BOTH <body> and <main>, so the page got
   100px of dead space on top of the 86px the fixed header already reserves.
   The wrapper offset above is the only one this layout needs. */
body.single-building {
    padding-top: 0;
}

main.page-horizontal > .page-section.bg-detail {
    max-width: 1760px;
    margin: 0 auto;
    padding: 14px clamp(20px, 3vw, 56px) 56px;
}

.bg-stage__img,
.bg-stage img {
    display: block;
    width: 100%;
    height: auto;
}

/* The interactive render fills the wide column, edge to edge — no mat around
   it. style.css caps the overlay image at 60vh for the floor plan; on the
   building stage that cap kept the render small no matter how much room the
   column had, so it is lifted here and width is the only constraint. */
.bg-stage .apt-floor-map-root {
    width: 100%;
    max-width: 100%;
    margin: 0;
    align-items: stretch;
}

.bg-stage .apt-floor-map-root .sunrise-building-map,
.bg-stage .apt-floor-map-root .she-preview-overlay__wrapper {
    width: 100%;
    max-width: 100%;
    max-height: none;
}

.bg-stage .apt-floor-map-root .she-preview-overlay__img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
}

/* Full-width column: cap the render so the whole building fits on screen.
   The frame's width is derived from the height budget × image aspect, so the
   image and the SVG hotspot overlay scale together and stay aligned; the
   floor picker is positioned against this frame. */
.bg-stage__frame {
    position: relative;
}

.ap-grid--solo .bg-stage__frame {
    width: min(100%, calc(max(100svh - 220px, 480px) * var(--render-aspect, 1.7778)));
    margin-inline: auto;
}

.ap-grid--solo .bg-stage .apt-floor-map-root .she-preview-overlay__wrapper {
    display: block; /* base is inline-block */
}

.bg-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 22px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
    font-size: 0.86rem;
    color: var(--color-text-light);
}

.bg-legend .apt-floor-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bg-legend .apt-floor-legend__count {
    font-weight: 700;
    color: var(--color-primary);
}

@media (max-width: 680px) {
    main.page-horizontal > .page-section.bg-detail {
        padding: 24px 16px 56px;
    }
    .bg-stage {
        padding: 14px;
    }
}

/* ---------------------------------------------------------------------
   13. Floor page — the building render was removed from this template,
   so the two-column layouts it anchored collapse to a single column.
   --------------------------------------------------------------------- */

.apt-detail__grid--floor {
    grid-template-columns: minmax(0, 1fr);
}

/* Phone layout: only the floor selector is left in the top row, and a
   column of every floor was taller than the row (it spilled over the tabs
   and the plan). It is a single swipeable strip instead: higher floors to
   the left, the current one centred, arrows step to the next floor. */
.fm .fm-top {
    display: block;
    height: auto;
    max-height: none;
}

.fm .fm-floors {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    height: auto;
}

.fm .fm-floors__head {
    grid-column: 1 / -1;
}

.fm .fm-floors__nav {
    height: auto;
}

.fm .fm-floors__nav svg {
    transform: rotate(-90deg);
}

.fm .fm-floors__list {
    flex-direction: row;
    gap: 6px;
    padding: 8px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
}

.fm .fm-floors__list li {
    flex: none;
    scroll-snap-align: center;
}

.fm .fm-floor {
    min-width: 44px;
    padding: 9px 10px;
    border: 1px solid var(--color-line-soft);
}

.fm .fm-floor.is-current {
    border-color: transparent;
}

/* Floor picker — a small white card on the render's top-right corner.
   ▲/▼ step through floors, the label opens the list. -------------------- */

.bg-floorpick {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    display: flex;
    align-items: stretch;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    color: #2b73a3;
}

.bg-floorpick__arrows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 0 4px 6px;
}

.bg-floorpick__arrow {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.bg-floorpick__arrow:active {
    transform: scale(0.86);
}

/* Soft ring that pulses out of an arrow when it is pressed. */
.bg-floorpick__arrow.is-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(43, 115, 163, 0.45);
    animation: bau-ring 0.45s ease-out;
    pointer-events: none;
}

.bg-floorpick__arrow:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--bau-blue);
}

.bg-floorpick__toggle {
    min-width: 170px;
    padding: 10px 20px 10px 10px;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.bg-floorpick__toggle:hover {
    color: var(--bau-blue);
}

.bg-floorpick__arrow:focus-visible,
.bg-floorpick__toggle:focus-visible,
.bg-floorpick__item:focus-visible {
    outline: 2px solid var(--bau-blue);
    outline-offset: -2px;
}

.bg-floorpick__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    max-height: min(320px, 50vh);
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(43, 115, 163, 0.22);
    scrollbar-width: thin;
    scrollbar-color: rgba(43, 115, 163, 0.35) transparent;
    animation: bau-menu-in 0.16s ease-out;
}

.bg-floorpick__menu::-webkit-scrollbar {
    width: 6px;
}

.bg-floorpick__menu::-webkit-scrollbar-thumb {
    background: rgba(43, 115, 163, 0.35);
    border-radius: 3px;
}

.bg-floorpick__menu::-webkit-scrollbar-track {
    background: transparent;
}

.bg-floorpick__menu[hidden] {
    display: none;
}

.bg-floorpick__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 0.88rem;
    color: inherit;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.bg-floorpick__item:hover,
.bg-floorpick__item:focus {
    background: rgba(43, 115, 163, 0.08);
    color: var(--bau-blue);
    outline: none;
}

.bg-floorpick__item.is-current,
.bg-floorpick__item.is-current:hover,
.bg-floorpick__item.is-current:focus {
    background: var(--bau-blue);
    color: var(--color-white);
    outline: none; /* no second ring around the selected row */
}

.bg-floorpick__avail {
    font-size: 0.8rem;
    opacity: 0.6;
}

.bg-floorpick__avail.is-on {
    opacity: 1;
    font-weight: 600;
}

/* The map script tints a hovered floor green (red when sold out) before our
   white outline takes over, which flashed on every hover. Keep the shapes
   clear; only the white .is-picked outline below shows. */
#building-map-root polygon {
    fill: var(--bau-blue) !important; /* never the script's green/red, even while fading out */
    fill-opacity: 0;
    transition: fill-opacity 0.12s ease, stroke-opacity 0.12s ease !important;
}

/* Floor picked with the arrows — outlined in white on the render. CSS beats
   the SVG fill/stroke presentation attributes React sets. */
#building-map-root polygon.is-picked {
    fill: var(--bau-blue); /* header blue, see-through */
    fill-opacity: 0.35;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

#building-map-root polygon.is-picked.is-pulse {
    animation: bau-floor-pulse 0.5s ease-out;
}

/* Popup above the picked floor. */
.bg-floortip {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 196px;
    padding: 16px 14px 14px;
    background: #0a0a9c;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    color: #ffffff;
    transform: translateX(-50%);
    pointer-events: auto;
}

.bg-floortip[hidden] {
    display: none;
}

.bg-floortip.is-pop {
    animation: bau-tip-pop 0.18s ease-out;
}

@keyframes bau-ring {
    to { box-shadow: 0 0 0 7px rgba(43, 115, 163, 0); }
}

@keyframes bau-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
}

@keyframes bau-floor-pulse {
    0%   { fill-opacity: 0.35; }
    35%  { fill-opacity: 0.55; }
    100% { fill-opacity: 0.35; }
}

@keyframes bau-tip-pop {
    from { opacity: 0.6; transform: translateX(-50%) translateY(4px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
    .bg-floorpick__menu,
    .bg-floortip.is-pop,
    #building-map-root polygon.is-picked.is-pulse,
    .bg-floorpick__arrow.is-pulse::after {
        animation: none;
    }
}

/* Arrow pointing at the floor. */
.bg-floortip::after {
    content: "";
    position: absolute;
    left: var(--tip-arrow-x, 50%);
    top: 100%;
    border: 8px solid transparent;
    border-top-color: #0a0a9c;
    transform: translateX(-50%);
}

.bg-floortip.is-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #0a0a9c;
}

.bg-floortip__title {
    font-size: 0.95rem;
    font-weight: 500;
}

.bg-floortip__btn {
    display: block;
    padding: 7px 14px;
    border-radius: 3px;
    background: #2b8ad9;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    transition: background var(--transition-smooth);
}

.bg-floortip__btn:hover {
    background: #3a9cec;
    color: #ffffff;
}

/* The render's own hover tooltip is replaced by .bg-floortip on this page. */
.bg-stage__frame .she-preview-tooltip {
    display: none !important;
}

/* ---------------------------------------------------------------------
   Typography matched to bau.ge (Elementor values, desktop / ≤767px).
   The sizes below came from bau.ge; the face is now Roboto site-wide,
   with Noto Sans Georgian carrying the Georgian glyphs.
   --------------------------------------------------------------------- */

.bau-header__nav a {
    /* Same stack as --font-heading: Roboto alone would drop the Georgian menu
       labels onto whatever generic sans-serif the OS picks (Sylfaen on
       Windows), which looked nothing like the rest of the page. */
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
}

.bau-kicker {                 /* "მიმდინარე პროექტები" */
    font-size: 20px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.bau-title {                  /* "გლდანი ცენტრალი" */
    font-size: 27px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: normal;
}

.bau-lead,
.bau-about__text {            /* project / company description */
    font-size: 15px;
    font-weight: 500;
}

.bau-btn {                    /* "პროექტების ნახვა" */
    font-size: 20px;
    font-weight: 500;
}

.bau-footer__title {          /* footer address line */
    font-size: 19px;
    line-height: 1.1em;
    letter-spacing: normal;
    text-transform: none;
}

.bau-footer__list {           /* phone / e-mail */
    font-size: 17px;
    line-height: 30px;
}

@media (max-width: 767px) {
    .bau-kicker { font-size: 16px; }
    .bau-title { font-size: 22px; }
    .bau-lead,
    .bau-about__text { font-size: 13px; }
    .bau-footer__list { font-size: 14px; line-height: 1.2em; }
}

/* Floor page: style.css caps .apt-detail__grid at the viewport height
   (max-height: calc(100vh - 140px)). A floor's plan + legend + share row is
   taller than that on most screens, so the card overflowed its section and
   sat on top of the footer. Let the section grow with its content. */
main.page-horizontal.single-floor .apt-detail__grid--floor {
    max-height: none;
}


/* Floor plan: stamps on sold apartments, blue hover on free ones.
   The plan script sets each outline's fill from its status; CSS beats those
   presentation attributes. */
#floor-map-root polygon[fill="#2b73a3"],
#floor-map-root-m polygon[fill="#2b73a3"] {
    fill: var(--bau-blue) !important; /* available: header blue, not green */
}

/* Hover on a free apartment: a deeper blue than the plan's own fill. The
   bundle only nudges fill-opacity on hover, which is invisible over an
   already-blue plan — the colour itself has to change. */
#floor-map-root polygon[fill="#2b73a3"]:hover,
#floor-map-root-m polygon[fill="#2b73a3"]:hover {
    fill: var(--bau-blue-dark) !important;
    fill-opacity: 0.38 !important;
}

/* Sold: a see-through coral red, matched to the client's reference so the
   plan's walls still show through (#f1634e at 68% over the blue plan renders
   #b87886, the reference's exact tone). */
#floor-map-root polygon[fill="#dc2626"],
#floor-map-root-m polygon[fill="#dc2626"] {
    fill: #f1634e !important;
    fill-opacity: 0.68 !important;
}

.fm-stamp {
    position: absolute;
    z-index: 3;
    padding: 0.32em 0.75em 0.5em; /* extra room below: Georgian descenders (ყ, ლ) touched the border */
    /* Reference style: white outline and white text straight on the red,
       no filled card, so the plan still reads through the stamp. */
    border: 0.14em solid #ffffff;
    border-radius: 0.3em;
    background: transparent;
    color: #ffffff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
    font-family: var(--font-heading);
    font-size: 10px; /* real size is set per apartment by the floor page script */
    font-weight: 700;
    /* The brand face has one weight, so 700 alone barely thickens it —
       a thin stroke in the text colour makes small stamps readable. */
    -webkit-text-stroke: 0.045em currentColor;
    paint-order: stroke fill;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(-28deg);
    pointer-events: none; /* clicks and hover still reach the outline below */
}

/* Floor page: the plan was capped at 60vh, which kept wide plans narrow.
   Let it use the column width; the cap only stops very tall plans. */
main.page-horizontal.single-floor .apt-floor-map-root .she-preview-overlay__img {
    max-height: 78vh;
}

/* "Information" heading on the apartment page: an inherited h2 colour from
   style.css was winning over the white. */
.ap-info h2.ap-info__head {
    color: var(--color-white) !important;
}

/* Floor plan: sold apartments are not clickable and show no popup — the
   outline ignores the pointer entirely (hover, click, tap). The stamp on top
   already says why. */
#floor-map-root polygon[fill="#dc2626"],
#floor-map-root-m polygon[fill="#dc2626"] {
    pointer-events: none !important;
}

/* Page titles on the project / floor / apartment pages ("სართული 16",
   the address, "აირჩიე ბინა") in the header blue. */
.apt-brand__title,
.fm-card__title,
.ap-head__title,
.apt-floor-heading__label {
    color: var(--bau-blue) !important;
}


/* Floor-plan tooltip: no "Available" badge at all (client, 2026-09-28) —
   the tooltip shows only rooms and area. */
.she-preview-tooltip__badge--available {
    display: none !important;
}


/* Floor page: the building page's floor picker, in the chip row where the
   "View apartments" button used to be — pushed to the right end like it was. */
.bg-floorpick.bg-floorpick--inline {
    position: relative;
    top: auto;
    right: auto;
    z-index: 30;
    margin-left: auto;
}

.bg-floorpick--inline .bg-floorpick__toggle {
    min-width: 150px;
}

@media (max-width: 767px) {
    .apt-floor-chips .bg-floorpick--inline {
        margin-left: 0;
        flex: 1 1 100%;
    }
    .apt-floor-chips .bg-floorpick--inline .bg-floorpick__toggle {
        flex: 1;
        min-height: 44px;
    }
}


/* Floor-plan tooltip: no name line. The unit's area is already in the details
   row and the floor is the page itself, so "16 - 151.4 m²" only repeated them. */
.apt-floor-map-root .she-preview-tooltip__title {
    display: none;
}

/* Floor plan: the area of each available apartment, printed on the plan.
   A white chip keeps it legible on both the light and the deep blue units;
   it ignores the pointer so hover and click still reach the outline. */
.fm-area {
    position: absolute;
    z-index: 3;
    padding: 0.32em 0.62em 0.36em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 4px rgba(43, 115, 163, 0.28);
    color: var(--bau-blue-deep, #2b73a3);
    font-family: var(--font-heading);
    font-size: 11px; /* real size is set per apartment by the floor page script */
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Home "Our projects": two cards side by side, each titled above its image.
   A third project turns the row into a scroll-snap carousel with arrows. */
.bau-projects {
    position: relative;
}

.bau-projects__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 28px) / 2);
    column-gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.bau-projects__track::-webkit-scrollbar {
    display: none;
}

.bau-project-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-snap-align: start;
    min-width: 0;
}

.bau-project-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bau-blue);
    text-align: center;
}

.bau-project-card__title a {
    color: inherit;
    text-decoration: none;
}

.bau-project-card__media {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    box-shadow: 0 10px 30px rgba(43, 115, 163, 0.14);
}

.bau-project-card__img,
.bau-project-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bau-project-card:hover .bau-project-card__media img {
    transform: scale(1.04);
}

.bau-project-card:hover .bau-project-card__title a {
    color: var(--bau-blue-dark);
}

.bau-projects__arrow {
    position: absolute;
    top: 55%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--bau-blue);
    box-shadow: 0 4px 16px rgba(43, 115, 163, 0.22);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, background 0.2s ease;
}

.bau-projects__arrow--prev { left: -18px; }
.bau-projects__arrow--next { right: -18px; }

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

.bau-projects__arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    /* Phones: projects stack one under the other — a sideways strip hid
       every card after the first. */
    .bau-projects__track {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: 100%;
        row-gap: 36px;
        overflow: visible;
        scroll-snap-type: none;
    }
    .bau-projects__arrow {
        display: none;
    }
    .bau-project-card__title {
        font-size: 1.1rem;
    }
}

/* Building marked "All apartments sold": the card stays, muted, unlinked. */
.bau-project-card.is-sold .bau-project-card__media {
    cursor: default;
}

.bau-project-card.is-sold .bau-project-card__media img {
    filter: grayscale(0.35);
}

.bau-project-card.is-sold:hover .bau-project-card__media img {
    transform: none;
}

.bau-project-card__sold {
    margin: 0;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--bau-blue-soft);
    color: var(--bau-blue-dark);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

/* Apartment page: button back to the building (project) the unit belongs to,
   at the right end of the status / floor row. */
.ap-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ap-back-project {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 10px 18px;
    border-radius: 6px;
    background: var(--bau-blue);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.ap-back-project:hover,
.ap-back-project:focus-visible {
    background: var(--bau-blue-dark);
    color: var(--color-white);
}

.ap-back-project:hover svg {
    transform: translateX(-3px);
}

.ap-back-project svg {
    transition: transform 0.2s ease;
}

@media (max-width: 600px) {
    .ap-back-project {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

/* Floor plan: outlines marked "sold" in the hotspot editor (no apartment behind
   them) look exactly like a sold apartment and ignore the pointer. */
.apt-floor-map-root polygon[data-fm-sold] {
    fill: #f1634e !important;
    fill-opacity: 0.68 !important;
    pointer-events: none !important;
}

/* Floor plans are cut out (transparent background, trimmed to the drawing),
   so the image itself must not draw a card: no shadow, no rounded corners. */
.apt-floor-map-root .she-preview-overlay__img {
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Floor page: with the white background gone the plan can use the whole
   column width instead of a 960px, 78vh-capped box. */
main.page-horizontal.single-floor .apt-floor-map-root .sunrise-floor-map,
main.page-horizontal.single-floor .apt-floor-map-root .she-preview-overlay__wrapper {
    display: block;
    width: 100%;
}

main.page-horizontal.single-floor .apt-floor-map-root .she-preview-overlay__img {
    width: 100% !important;
    max-height: none !important;
}

/* Compass from the architect's plan, kept outside the image so the plan stays large. */
.fm-compass {
    display: block;
    width: 84px;
    height: auto;
    margin: 4px 8px 0 auto;
}

@media (max-width: 767px) {
    .fm-compass {
        width: 52px;
        margin-right: 4px;
    }
}

/* Building render: a sold-out floor tints red when picked/hovered. */
#building-map-root polygon.is-picked.is-soldout {
    fill: #f1634e !important;
    fill-opacity: 0.45;
}

/* Overscroll (iOS rubber-band) shows the canvas between the fixed header and
   the page — make it header blue instead of a white strip. */
html {
    background: #2b73a3;
}

/* Drawer opens smoothly: the panel fades/slides down, then the items rise in
   one after another. Closing reverses without the stagger. */
.bau-drawer {
    transform: translateY(-14px);
    transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.38s;
}

.bau-drawer.is-open {
    transform: none;
}

.bau-drawer .nav-menu li,
.bau-drawer .bau-lang,
.bau-drawer__phone {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bau-drawer.is-open .nav-menu li,
.bau-drawer.is-open .bau-lang,
.bau-drawer.is-open .bau-drawer__phone {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.bau-drawer.is-open .nav-menu li:nth-child(1) { transition-delay: 0.08s; }
.bau-drawer.is-open .nav-menu li:nth-child(2) { transition-delay: 0.13s; }
.bau-drawer.is-open .nav-menu li:nth-child(3) { transition-delay: 0.18s; }
.bau-drawer.is-open .nav-menu li:nth-child(4) { transition-delay: 0.23s; }
.bau-drawer.is-open .nav-menu li:nth-child(n+5) { transition-delay: 0.28s; }
.bau-drawer.is-open .bau-lang { transition-delay: 0.3s; }
.bau-drawer.is-open .bau-drawer__phone { transition-delay: 0.35s; }

/* Page to page: a soft cross-fade (browsers with cross-document View
   Transitions - Chrome/Edge, Safari 18.2+; others just navigate). The fixed
   header keeps its own layer so it stays still while the page fades. */
@view-transition {
    navigation: auto;
}

.bau-header {
    view-transition-name: bau-header;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: ease;
}

::view-transition-group(bau-header) {
    animation-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .bau-drawer,
    .bau-drawer .nav-menu li,
    .bau-drawer .bau-lang,
    .bau-drawer__phone {
        transition: none !important;
        transform: none;
    }
    @view-transition {
        navigation: none;
    }
}

/* Project page on phones: the dedicated phone layout (.fm--building) never
   drew the building (its map had no height) and its floor list spilled over
   the tabs. Phones get the same render + floor picker as desktop instead,
   zoomed onto the tower so each floor is big enough to tap. */
@media (max-width: 767px) {
    main.page-horizontal.single-building > .page-section.bg-detail {
        display: block !important;
    }
    main.page-horizontal.single-building > section.fm--building {
        display: none !important;
    }
    .bg-stage {
        padding: 10px;
    }
    .bg-stage__frame {
        overflow: hidden !important;
    }
    /* Compact popup so it covers less of the tower. */
    .bg-floortip {
        gap: 10px;
        min-width: 0;
        padding: 12px 12px 12px;
    }
    .bg-floortip__btn {
        white-space: nowrap;
    }
    /* Tower spans ~28-68% of the (block B) render: 2.1x puts it across the
       frame. Only renders with floor outlines to tap get zoomed. */
    .bg-stage__frame:has(.she-preview-overlay__svg polygon) > #building-map-root {
        width: 210% !important;
        max-width: none !important;
        margin-left: -50.8% !important;
    }
    /* Block A's render (post 86) is taller and the tower spans ~21-77% of it:
       2.1x cut both sides off. 1.65x, centred on the tower, keeps it whole. */
    .postid-86 .bg-stage__frame:has(.she-preview-overlay__svg polygon) > #building-map-root {
        width: 165% !important;
        margin-left: -30.9% !important;
    }
}

/* Phone floor page: the section sits right under the fixed header already;
   its 84px top padding was left over from when it did not. */
@media (max-width: 767px) {
    .fm {
        padding-top: 20px;
    }
}

/* Phone floor page: just the floor strip and the floor plan - no tabs, no
   info card, no apartment list / plan tabs. */
@media (max-width: 767px) {
    .fm .fm-tabs,
    .fm .fm-card {
        display: none !important;
    }
    .fm .fm-panel {
        display: none !important;
    }
    .fm .fm-panel:has(#floor-map-root-m) {
        display: block !important;
    }
    .fm .fm-top {
        margin-bottom: 22px;
    }
}

/* Floors with free apartments: brand (header) blue instead of green. */
.fm-floor--available {
    color: var(--bau-blue);
}

/* 2026-10-01: titles AND body copy share the header blue site-wide.
   Text on blue bands is white and does not use this token. */
:root {
    --color-text-light: var(--bau-blue);
}

/* 2026-10-01: floor page — the back button moved up into the chips row,
   left of the floor picker (was a plain link at the bottom). */
.apt-floor-chips .ap-back-project {
    margin-left: auto;
    align-self: center;
}

.apt-floor-chips .ap-back-project + .bg-floorpick--inline {
    margin-left: 0;
}

@media (max-width: 767px) {
    .apt-floor-chips .ap-back-project {
        margin-left: 0;
        flex: 1 1 100%;
        justify-content: center;
        min-height: 44px;
    }
}