/* Native browser cross-fade between page loads (Chrome/Edge, and Safari from
   v18) — zero JS, and simply ignored by browsers that don't support it yet,
   so this is a free, safe upgrade rather than something that needs a fallback. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .45s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

:root {
    /* Palette pulled from the Magnolia Suite Vienna logo */
    --ink: #3a2e28;
    --muted: #8a7a72;
    --cream: #fdf7f4;
    --blush: #f7e3e6;
    --card: #fffdfb;
    --gold: #b7893c;
    --gold-dark: #8f6a2c;
    --gold-soft: #d9c08f;
    --border: #ecdcd6;
    --radius: 12px;

    --font-display: 'Marcellus', 'Georgia', serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* One shared "soft, confident" ease-out used for every hover/lift/reveal —
       a single consistent curve across the site reads as considered, not busy.
       (A gentle cubic approximation of GSAP's power3.out — no bounce, no elastic.) */
    --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; height: 100%; }
/* Lenis (see motion.js) takes over smooth-scrolling with its own easing once
   it initializes, so native CSS smooth-scroll is switched off to avoid the
   two fighting each other; anyone without JS just keeps the native one. */
html.lenis { scroll-behavior: auto; }

/* Thin progress bar tracking scroll position, filled in via ScrollTrigger —
   a small "considered" touch rather than a loud loading-bar cliche. */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 1000;
    pointer-events: none;
}
.scroll-progress-bar {
    height: 100%;
    width: 100%;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
}

/* Sticky footer: on short pages (few reviews, a thin policy page, etc.) the
   footer now always sits at the bottom of the viewport instead of floating
   partway up under a short amount of content. */
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.65;
    font-weight: 400;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }


h1, h2, h3, .brand, .price-box .price {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: .02em;
}

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

a { color: var(--gold-dark); transition: color .2s ease; }
a:hover { color: var(--gold); }

/* ---------- Header ---------- */
.site-header {
    background: rgba(253, 247, 244, .92);
    backdrop-filter: saturate(160%) blur(6px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 0 0 rgba(58, 46, 40, 0);
    transition: box-shadow .4s var(--ease-soft);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(58, 46, 40, .45); }
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .6rem;
    padding-bottom: .6rem;
    gap: 1rem;
    transition: padding .4s var(--ease-soft);
}
.site-header.is-scrolled .wrap { padding-top: .35rem; padding-bottom: .35rem; }
.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: var(--ink);
    font-size: 1.2rem;
}
.brand img {
    height: 52px;
    width: 52px;
    object-fit: contain;
    display: block;
    transition: height .4s var(--ease-soft), width .4s var(--ease-soft);
}
.site-header.is-scrolled .brand img { height: 40px; width: 40px; }
.brand span.accent-word { color: var(--gold); }

.main-nav {
    display: flex;
    align-items: center;
}
.main-nav a {
    margin-left: 2rem;
    text-decoration: none;
    color: var(--ink);
    font-size: .82rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px;
}
.main-nav a:first-child { margin-left: 0; }
.main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--gold);
    transition: right .35s var(--ease-soft);
}
.main-nav a:hover { color: var(--gold-dark); }
.main-nav a:hover::after { right: 0; }

/* Kept visually subdued and pill-shaped — a small side door for you, not a call
   to action guests need to notice. */
.main-nav a.nav-admin-link {
    margin-left: 1.5rem;
    padding: .35rem .9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .72rem;
    color: var(--muted);
}
.main-nav a.nav-admin-link::after { display: none; }
.main-nav a.nav-admin-link:hover { color: var(--gold-dark); border-color: var(--gold); }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: .4rem;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--ink); display: block; transition: transform .25s ease, opacity .25s ease; }

/* ---------- Hero ---------- */
/* Redesigned as a near-full-viewport statement (same copy, far more
   confidence behind it): the background photo lives in its own .hero-media
   layer, oversized 12% beyond the hero's bounds, so motion.js can parallax
   it on scroll without ever exposing an edge. */
.hero {
    position: relative;
    min-height: 88vh;
    padding: 9rem 0 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--blush);
    overflow: hidden;
}
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.12);
    will-change: transform;
}
/* A few soft, slow-drifting gold/blush blobs between the photo and its scrim —
   texture, not decoration. Pure canvas, no markup/copy impact; see motion.js.
   Blend mode lets it warm the photo underneath rather than sit as a flat tint,
   and it lives entirely below the scrim, so text contrast is unaffected
   whether or not it ever draws a frame. */
.hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    mix-blend-mode: soft-light;
    opacity: .8;
    pointer-events: none;
}
/* Same dark scrim as .page-hero (below), so the photo behind the heading and
   buttons never fights with the white text sitting on top of it. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(58,46,40,.5) 0%, rgba(58,46,40,.74) 100%);
    pointer-events: none;
}
.hero .hero-inner { position: relative; z-index: 3; }
.hero .hero-logo {
    width: 92px;
    height: 92px;
    object-fit: contain;
    margin: 0 auto 2rem;
    display: block;
}
.hero h1 {
    font-size: clamp(2.6rem, 6.4vw, 5.65rem);
    line-height: 1.02;
    letter-spacing: -.01em;
    max-width: 18ch;
    margin: 0 auto 1.1rem;
    color: #fff;
}
.hero p.tagline {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .85);
    max-width: 600px;
    margin: 0 auto 2.4rem;
}
.hero .cta-row {
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
/* The outline button's gold-on-transparent look was designed for a light
   background — swapped for white on the hero now that it sits on a photo. */
.hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .75); }
.hero .btn-outline:hover { background: #fff; color: var(--ink); }

/* A quiet "keep scrolling" cue in the mould of the bolder reference sites —
   a drawn line with a droplet of light travelling down it, on an infinite
   loop, plus a letter-spaced label. Pure CSS (no GSAP dependency) so it
   still animates even if a script fails to load; reduced-motion visitors
   get the static line with no droplet. */
.hero-scrollcue {
    position: absolute;
    left: 50%;
    bottom: 1.85rem;
    z-index: 3;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    color: rgba(255, 255, 255, .78);
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
}
.hero-scrollcue i {
    display: block;
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, .4);
    position: relative;
    overflow: hidden;
}
.hero-scrollcue i::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    animation: hero-scrollcue-drop 2s ease-in-out infinite;
}
@keyframes hero-scrollcue-drop {
    0% { top: -100%; }
    55% { top: 100%; }
    100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-scrollcue i::after { animation: none; top: 0; }
}
@media (max-width: 780px) {
    .hero { min-height: 0; padding: 7.5rem 0 4.5rem; }
    .hero-scrollcue { display: none; }
}

/* Progressive enhancement: only hide the hero's starting state once we know JS
   (and GSAP) actually loaded — see motion.js. If a script fails to load, the
   .js class is never added and everything just shows up normally, instantly. */
.js .hero-logo,
.js .hero h1 .motion-word,
.js .hero p.tagline,
.js .hero .cta-row {
    opacity: 0;
}
.motion-word { display: inline-block; will-change: transform, opacity; }
.gold-rule {
    width: 64px;
    height: 2px;
    background: var(--gold);
    margin: 0 auto 1.25rem;
    position: relative;
    transform-origin: center;
}
/* Draws itself outward from the center the first time it scrolls into view —
   one small signature moment per section rather than everywhere at once. */
.js .gold-rule { transform: scaleX(0); }
.js .gold-rule.is-drawn { transform: scaleX(1); transition: transform .7s var(--ease-soft); }
.gold-rule::before, .gold-rule::after {
    content: "";
    position: absolute;
    top: 50%; width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
    transform: translateY(-50%);
}
.gold-rule::before { left: -10px; }
.gold-rule::after { right: -10px; }

/* ---------- Page hero banners (About / Reviews) ---------- */
.page-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    color: #fff;
    margin-bottom: 1rem;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(58,46,40,.55) 0%, rgba(58,46,40,.72) 100%);
}

/* The site logo itself as the hero's background — docked near the top at
   a fixed size (not stretched to cover) on a blush backdrop, with the
   heading pushed below it via padding so the two don't overlap. */
.page-hero.page-hero-logo-bg {
    min-height: 420px;
    background-color: var(--blush);
    background-size: 200px 200px;
    background-position: center 32px;
    background-repeat: no-repeat;
    color: var(--ink);
}
.page-hero.page-hero-logo-bg::before { content: none; }
.page-hero.page-hero-logo-bg .eyebrow { color: var(--gold-dark); }
.page-hero.page-hero-logo-bg h1 { color: var(--ink); }
.page-hero.page-hero-logo-bg .page-hero-inner { padding-top: 250px; }
.page-hero .page-hero-inner {
    position: relative;
    z-index: 1;
}
.page-hero .eyebrow { color: var(--gold-soft); }
.page-hero h1 { color: #fff; margin: 0; font-size: clamp(2rem, 4vw, 2.6rem); }
.page-hero .gold-rule { margin-left: auto; margin-right: auto; }

/* Same small entrance treatment as the home hero — these banners sit above
   the fold on their own pages too, so they get the same quiet welcome. */
.js .page-hero .eyebrow,
.js .page-hero h1 .motion-word {
    opacity: 0;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: .8rem 1.9rem;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    cursor: pointer;
    transition: background .25s var(--ease-soft), color .25s var(--ease-soft), transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; transform: translateY(-3px) scale(1.015); box-shadow: 0 14px 28px -12px rgba(143, 106, 44, .55); }
/* Once motion.js confirms a mouse/trackpad device, it takes over .btn's
   hover transform with a magnetic cursor-follow (see motion.js) — this just
   steps the CSS transform out of the way so the two don't fight. */
.js .btn-magnetic:hover { transform: none; box-shadow: 0 14px 28px -12px rgba(143, 106, 44, .55); }
.btn-outline { background: transparent; color: var(--gold-dark); border: 1px solid var(--gold-dark); }
.btn-outline:hover { background: var(--gold-dark); color: #fff; }

/* WhatsApp's own brand green, kept separate from the site's gold so it still
   reads instantly as "WhatsApp" rather than blending into the other CTAs. */
.btn-whatsapp { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-whatsapp:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.icon-whatsapp { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Sections ---------- */
section { padding: 3.5rem 0; }
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title h1, .section-title h2 { margin-bottom: .5rem; }
.section-title p { color: var(--muted); }
.eyebrow {
    display: block;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: .5rem;
}

/* One quiet signature word per section title — "beautifully" pours from a
   soft gold into the deeper brand gold as its section scrolls through view
   (see motion.js). --fillpct defaults to a fully-filled 100% so a visitor
   without JS (or before motion.js runs) just sees a solid gold word, never a
   half-finished or invisible one. */
.fill-word {
    --fillpct: 100%;
    background-image: linear-gradient(90deg,
        var(--gold-dark) 0%, var(--gold-dark) var(--fillpct),
        var(--gold-soft) var(--fillpct), var(--gold-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- Cards / apartments ---------- */
.apartment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
}
.card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
    display: block;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 26px 44px -22px rgba(58, 46, 40, .3); }
.card img, .card .placeholder-photo { width: 100%; height: 230px; object-fit: cover; display: block; transition: transform .4s var(--ease-soft); }
.card:hover img { transform: scale(1.045); }
.placeholder-photo {
    background: linear-gradient(135deg, var(--blush) 0%, var(--cream) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
}
.placeholder-photo .flower { font-size: 1.6rem; display: block; margin-bottom: .4rem; }
.card-body { padding: 1.4rem; }
.card-body h3 { margin: 0 0 .35rem; font-size: 1.3rem; }
.card-meta { color: var(--gold-dark); font-size: .8rem; margin-bottom: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.card-body p.excerpt { color: var(--muted); font-size: .95rem; }

/* ---------- Homepage apartment showcase ---------- */
/* An editorial, alternating split layout for the homepage only — large
   photo on one side, a big index numeral and the same copy on the other.
   Kept separate from .apartment-grid/.card (used on the full apartments
   listing page) so this redesign stays scoped to the homepage for now. */
.home-showcase-list {
    display: flex;
    flex-direction: column;
    gap: 5.5rem;
}
.home-showcase-item {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 3.5rem;
    text-decoration: none;
    color: inherit;
}
.home-showcase-item.is-reversed { grid-template-columns: 1fr 1.1fr; }
.home-showcase-item.is-reversed .home-showcase-media { order: 2; }
.home-showcase-item.is-reversed .home-showcase-body { order: 1; }
.home-showcase-media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 5 / 4;
    background: var(--blush);
}
/* Subtle pointer-following 3D tilt on desktop/trackpad only — see motion.js.
   The transform is set and cleared entirely by JS, so this is a no-op on
   touch devices and on any visitor whose script never ran. */
.home-showcase-media[data-tilt] { will-change: transform; }
.home-showcase-media img,
.home-showcase-media .placeholder-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease-soft);
}
.home-showcase-item:hover .home-showcase-media img { transform: scale(1.055); }
/* Reveals as a wipe (clip-path), triggered by the PARENT .home-showcase-item's
   own .reveal/.in-view state (see site.js) rather than being a .reveal target
   itself — a clip-path'd element's own on-screen area reads as zero to
   IntersectionObserver while fully clipped, so it can never cross the
   visibility threshold needed to earn .in-view on itself. Watching the
   un-clipped parent link instead avoids that deadlock entirely. */
.home-showcase-item .home-showcase-media { clip-path: inset(0 0 0 100%); transition: clip-path .9s var(--ease-soft); }
.home-showcase-item.is-reversed .home-showcase-media { clip-path: inset(0 100% 0 0); }
.home-showcase-item.in-view .home-showcase-media { clip-path: inset(0 0 0 0); }
.home-showcase-index {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--gold-soft);
    letter-spacing: .08em;
    margin-bottom: 1rem;
}
.home-showcase-body h3 { font-size: clamp(1.75rem, 2.6vw, 2.4rem); margin: 0 0 .6rem; }
.home-showcase-body .card-meta { margin-bottom: 1rem; }
.home-showcase-body .excerpt { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 42ch; }
.home-showcase-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.5rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-dark);
}
.home-showcase-link i { font-style: normal; transition: transform .3s var(--ease-soft); }
.home-showcase-item:hover .home-showcase-link i { transform: translateX(5px); }
@media (max-width: 780px) {
    .home-showcase-list { gap: 3rem; }
    .home-showcase-item,
    .home-showcase-item.is-reversed { grid-template-columns: 1fr; gap: 1.5rem; }
    .home-showcase-item.is-reversed .home-showcase-media,
    .home-showcase-item.is-reversed .home-showcase-body { order: initial; }
    .home-showcase-item .home-showcase-media,
    .home-showcase-item.is-reversed .home-showcase-media { clip-path: inset(0 0 100% 0); }
    .home-showcase-item.in-view .home-showcase-media { clip-path: inset(0 0 0 0); }
}

/* Apartment detail — photo carousel. A single photo just sits still (no
   arrows/dots are rendered for it); once an apartment has several, this
   gives them a real gallery experience instead of a static grid.
   Suite 02's whole photo batch (the set being kept) is a consistent 3:4
   portrait shape, so the box matches that exactly — no blush letterbox at
   all for those. Suite 01 still has its old, differently-shaped photos in
   the mix (pending replacement), which will show blush bars either side
   here until they're swapped for a matching batch.
   height (not width) is the box's primary dimension here — a full-width
   3:4 box was taller than most screens, so a visitor had to scroll to see
   the bottom half of every single photo. width is left to derive from the
   3:4 ratio, and the box is centered rather than stretched edge to edge. */
.apartment-carousel {
    position: relative;
    margin: 1.75rem auto;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--blush);
    touch-action: pan-y;
    aspect-ratio: 3 / 4;
    height: 45vw;
    max-width: 100%;
}
.apartment-carousel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.carousel-track {
    display: flex;
    height: 100%;
    transition: transform .5s var(--ease-soft);
}
.carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
}
.apartment-carousel img {
    width: 100%;
    height: 100%;
    /* contain, not cover — cover was cropping into every photo to fill
       the box exactly, which read as "zoomed in". The box is already the
       same 4:3 shape as the photos, so contain shows the whole shot with
       no crop, and the blush background only ever fills a sliver on the
       rare photo that isn't a perfect 4:3. */
    object-fit: contain;
    background: var(--blush);
    display: block;
    cursor: zoom-in;
    -webkit-user-drag: none;
    user-select: none;
}
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(253, 247, 244, .85);
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.carousel-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }
.carousel-counter {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(58, 46, 40, .55);
    color: #fff;
    font-size: .78rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    letter-spacing: .04em;
}
.carousel-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .4rem;
}
.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    padding: 0;
    transition: background .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.carousel-dot:hover { background: rgba(255, 255, 255, .8); }
.carousel-dot.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 700px) {
    .carousel-arrow { width: 38px; height: 38px; font-size: 1.3rem; }
}
.amenity-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; }
.amenity-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-size: .85rem;
}
.amenity-chip-icon { font-size: 1rem; line-height: 1; }

.map-embed {
    margin-top: 1.25rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 16 / 9;
    max-height: 340px;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.price-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    text-align: center;
    position: sticky;
    top: 6.5rem;
}
.price-box .price { font-size: 1.9rem; }
.price-box .price small { font-size: .95rem; font-weight: 400; color: var(--muted); font-family: var(--font-body); }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 1.2rem; }
.form-field label { display: block; font-size: .8rem; margin-bottom: .35rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(183, 137, 60, .15);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field textarea.notes-field { min-height: 90px; }
.form-field .optional-tag { text-transform: none; letter-spacing: 0; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
}
/* Grid items default to min-width:auto, so without this a wide input's
   intrinsic content size can force its 1fr track wider than its fair
   share — pushing .form-row (and the whole page) past the viewport
   edge instead of letting the input shrink to fit. */
.form-row > .form-field { min-width: 0; }
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ---------- Booking form: errors + summary card ---------- */
.gold-rule-left { margin-left: 0; }
.form-errors {
    background: #fbeceb;
    border: 1px solid #f0c4c0;
    border-radius: var(--radius);
    padding: 1rem 1.3rem;
    margin: 1.25rem 0;
}
.form-errors ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.booking-note { color: var(--muted); font-size: .9rem; }
.booking-note-small { font-size: .78rem; margin-top: .85rem; }
.booking-note-warning {
    background: #fdf3e3;
    border: 1px solid #f0dcae;
    border-radius: var(--radius);
    padding: .7rem .9rem;
    margin: .9rem 0 0;
    color: #8a6d23;
    font-weight: 600;
    font-size: .82rem;
}
.booking-submit { width: 100%; margin-top: 1.25rem; }

/* ---------- Apartment page ---------- */
.apartment-title { margin-top: .25rem; }
.card-meta-flush { margin-bottom: 0; }
.apartment-photo-placeholder { height: 260px; border-radius: var(--radius); margin: 1.75rem 0; }
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; margin-top: 1rem; }
@media (max-width: 780px) {
    .detail-grid { grid-template-columns: 1fr; }
}
.price-note { color: var(--muted); font-size: .85rem; margin-bottom: 1.5rem; }
.price-note-small { color: var(--muted); font-size: .85rem; }
.price-divider { margin: 1.5rem 0; border: none; border-top: 1px solid var(--border); }
.btn-block { width: 100%; }
.btn-block + .btn-block { margin-top: .6rem; }

/* ---------- Contact page + footer helpers ---------- */
.contact-page { max-width: 640px; }
.contact-divider { margin-top: 2.5rem; }
.footer-social { margin-top: .9rem; }
/* Spam-bot trap: kept off-screen rather than display:none, which some bots detect. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Reviews ---------- */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.review-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem;
    transition: box-shadow .45s var(--ease-soft), transform .45s var(--ease-soft);
}
.review-card:hover { box-shadow: 0 20px 38px -22px rgba(58, 46, 40, .28); transform: translateY(-4px); }
.review-card .stars { color: var(--gold); margin-bottom: .5rem; letter-spacing: .1em; }
.review-card .guest { font-weight: 600; margin-top: .85rem; font-family: var(--font-display); }
.reviews-content { padding-top: 6rem; }
.rating-summary { text-align: center; margin-bottom: 2.5rem; }
.rating-summary .score { font-size: 2.75rem; font-family: var(--font-display); color: var(--gold-dark); }
.rating-summary-count { color: var(--muted); }

/* ---------- Homepage trust bar ---------- */
/* Rebuilt as a bolder editorial strip: the rating becomes a genuine
   typographic moment (not a small badge), and each quote gets a large
   decorative opening mark instead of a plain italic line. Same markup,
   same copy — just given room to read as a statement rather than a caption. */
.trust-bar {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    flex-wrap: wrap;
    padding: 3rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.trust-bar-rating { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }
.trust-bar-score { font-size: clamp(3rem, 5.5vw, 4.5rem); font-family: var(--font-display); color: var(--gold-dark); line-height: 1; }
.trust-bar-rating .stars { color: var(--gold); letter-spacing: .14em; font-size: 1rem; }
.trust-bar-count { font-size: .85rem; margin-top: .2rem; }
.trust-bar-count a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.trust-bar-count a:hover { color: var(--gold-dark); }
.trust-bar-quotes {
    display: flex;
    gap: 2.25rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    padding-left: 3rem;
    border-left: 1px solid var(--border);
}
.trust-bar-quote {
    position: relative;
    margin: 0;
    flex: 1 1 220px;
    font-size: .92rem;
    color: #55483f;
    font-family: var(--font-display);
    line-height: 1.5;
}
.trust-bar-quote::before {
    content: "\201C";
    display: block;
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    color: var(--gold-soft);
    margin-bottom: .2rem;
}
.trust-bar-quote cite { display: block; margin-top: .6rem; font-style: normal; font-family: var(--font-body); letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; color: var(--muted); }
@media (max-width: 780px) {
    .trust-bar { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .trust-bar-quotes { display: none; border-left: none; padding-left: 0; } /* keep mobile short — the rating + link is enough */
}

/* ---------- Story statement: a big pull-quote whose words light up one by ----------
   one as it scrolls into view (see motion.js) — inspired by darcode.hr, but
   toned down to the site's own restrained, one-signature-moment style: a
   gold-to-ink color sweep rather than a full pinned background/color morph. */
.story-statement { max-width: 780px; margin: 0 auto; padding: .5rem 0 3rem; text-align: center; }
.story-statement-text {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.2vw, 2.3rem);
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
}
.story-statement-text .motion-word { display: inline-block; }
.js .story-statement-text .motion-word { color: var(--gold-soft); }

/* ---------- Content photos: real interior shots dropped into otherwise ----------
   ---------- text-only pages (About, FAQ, Contact, Reviews). Cropped to a ----------
   calmer landscape-ish frame rather than shown at their native tall portrait
   ratio, so they read as a considered break in the text, not a wall. */
.content-photo {
    max-width: 560px;
    aspect-ratio: 4 / 3;
    margin: 2.25rem auto;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 40px -24px rgba(58, 46, 40, .35);
}
.content-photo.content-photo-wide { max-width: 760px; aspect-ratio: 16 / 10; }
/* For designed graphics (e.g. the Vienna map poster) rather than candid
   room photos — shown at their own native portrait ratio instead of
   force-cropped into the landscape frame above, so no part of the design
   gets cut off. */
.content-photo.content-photo-poster { max-width: 380px; aspect-ratio: 900 / 1215; }
.content-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Policy pages ---------- */
/* Extra breathing room above (beyond .mg-pagehero's own padding) and below
   (there was none before — content ran straight into the footer). */
.policy { padding: 3rem 0 4.5rem; }
.policy h1 { margin-bottom: .25rem; }
.policy h2 { margin-top: 2.2rem; font-size: 1.25rem; color: var(--gold-dark); }
.policy p, .policy li { color: #55483f; }

/* ---------- FAQ ---------- */
.faq-page { padding-top: 3rem; padding-bottom: 4rem; max-width: 760px; }
.faq-intro { color: var(--muted); margin: 1rem 0 2.25rem; max-width: 56ch; }
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.3rem;
    color: var(--gold-dark);
    transition: transform .3s var(--ease-soft);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: .9rem 0 0; color: #55483f; overflow: hidden; }

/* ---------- Error pages (404 / 500) ---------- */
.error-page { padding-top: 6rem; padding-bottom: 6rem; max-width: 640px; text-align: left; }
.error-page p { color: #55483f; }
.error-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* ---------- Flash messages ---------- */
.flash { padding: 1rem 0; }
.flash .wrap { background: #f1f6e9; border: 1px solid #d3e3bd; border-radius: var(--radius); padding: 1rem 1.3rem; }
.flash-error .wrap { background: #fbeceb; border-color: #f0c4c0; }

/* ---------- Footer ---------- */
.site-footer {
    background: #241d19;
    color: #d9cfc7;
    padding: 3.5rem 0 1.75rem;
    margin-top: 3.5rem;
}
.site-footer .footer-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2rem;
}
.footer-brand img { height: 60px; margin-bottom: .85rem; }
.footer-brand p { color: #b8ab9f; font-size: .9rem; max-width: 260px; }
.site-footer a { color: #d9cfc7; text-decoration: none; }
.site-footer a:hover { color: var(--gold-soft); }
.site-footer strong { display: block; margin-bottom: .8rem; color: #fff; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .04em; }
.site-footer p { margin: .35rem 0; font-size: .9rem; display: flex; align-items: flex-start; gap: .55rem; }
.site-footer p .ftr-ico { flex: 0 0 auto; line-height: 1.4; }
.site-footer p a, .site-footer p > span:last-child { min-width: 0; line-height: 1.4; }
.copyright {
    padding-top: 1.5rem;
    border-top: 1px solid #3c332c;
    font-size: .8rem;
    color: #8f8377;
    text-align: center;
    letter-spacing: .03em;
}

/* ---------- Lightbox ---------- */
.lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(36, 29, 25, .92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 2rem;
    animation: fadeIn .2s ease;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 85vh; border-radius: 6px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.lightbox-close {
    position: absolute; top: 1.5rem; right: 1.75rem;
    background: none; border: none; color: #fff; font-size: 2rem;
    cursor: pointer; line-height: 1;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 780px) {
    .main-nav {
        position: fixed;
        top: 78px; left: 0; right: 0;
        background: var(--cream);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.5rem 1.5rem;
        transform: translateY(-130%);
        transition: transform .3s ease;
    }
    .main-nav.is-open { transform: translateY(0); }
    .main-nav a { margin: .55rem 0 !important; }
    .nav-toggle { display: flex; }
    .brand { font-size: 1rem; white-space: nowrap; }
    .brand img { height: 38px; width: 38px; }
    .site-footer .footer-top { grid-template-columns: 1fr; gap: 2rem; }
    .price-box { position: static; }
}

/* ---------- Dedicated booking page ---------- */
.booking-page { padding-top: 2.5rem; padding-bottom: 4.5rem; }
.booking-page-price {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--gold-dark);
    margin: .25rem 0 2rem;
}
.booking-page-price small { font-size: 1rem; font-weight: 400; color: var(--muted); font-family: var(--font-body); }

.booking-page-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
.booking-step-title {
    font-size: 1.15rem;
    margin: 0 0 1.1rem;
}
.booking-page-main .booking-step-title:not(:first-child) { margin-top: 2.5rem; }

.booking-calendar-inline {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fffefc 0%, var(--card) 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2rem 2.25rem 1.5rem;
    box-shadow: 0 34px 60px -38px rgba(58, 46, 40, .38);
}
.booking-calendar-inline::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--gold-soft) 1px, transparent 1.4px);
    background-size: 24px 24px;
    opacity: .07;
    pointer-events: none;
}
.booking-calendar-inline > * { position: relative; z-index: 1; }

.booking-page-side { position: sticky; top: 6.5rem; }
.booking-summary-card { text-align: left; }
.booking-summary-card .eyebrow { margin-bottom: .9rem; }

.booking-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.cal-nav {
    background: var(--card);
    border: 1px solid var(--gold-soft);
    color: var(--gold-dark);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex: none;
    transition: background .3s var(--ease-soft), color .3s var(--ease-soft), transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.cal-nav:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(143, 106, 44, .5); }
.cal-nav:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

.cal-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1;
    /* A flex item defaults to min-width:auto, which would let the two
       month tables' content push this wider than the header's available
       space instead of shrinking — causing the whole calendar (and page)
       to overflow horizontally at narrower viewports. */
    min-width: 0;
}
.cal-month { padding: 0 1.25rem; min-width: 0; }
.cal-month + .cal-month { border-left: 1px solid var(--border); }

.cal-month-heading {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: .04em;
    color: var(--ink);
    padding-bottom: .7rem;
    margin-bottom: .9rem;
    position: relative;
}
.cal-month-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: var(--gold);
}

.cal-grid {
    display: grid;
    /* minmax(0, 1fr) rather than plain 1fr: a day cell's text content
       (the price label especially) would otherwise set a min-content
       floor on its column, same shrink issue as above, one level deeper. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: .3rem;
    column-gap: 0;
}
.cal-weekday {
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gold-dark);
    padding-bottom: .65rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid var(--border);
}
.cal-day {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    font-size: .85rem;
    font-family: var(--font-body);
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--ink);
    cursor: pointer;
    transition: background .25s var(--ease-soft), color .25s var(--ease-soft), transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.cal-day-num { line-height: 1; }
.cal-day-price {
    /* Per-night price, shown on every open day so guests can browse rates like a
       Booking.com-style price calendar, not just see a total after picking dates. */
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    color: var(--gold-dark);
}
.cal-day:hover:not(:disabled) { background: var(--blush); transform: scale(1.08); }
.cal-day-blank { cursor: default; visibility: hidden; }
.cal-day.is-today {
    /* "today" marker — a thin gold ring around the cell (replaces a dot, since that
       space is now used by the price line). */
    box-shadow: inset 0 0 0 1.5px var(--gold);
}
.cal-day.is-selected-start.is-today,
.cal-day.is-selected-end.is-today { box-shadow: none; }

.cal-day.is-past,
.cal-day.is-blocked {
    color: #cabcb5;
    cursor: not-allowed;
}
.cal-day.is-past .cal-day-num,
.cal-day.is-blocked .cal-day-num { text-decoration: line-through; }
.cal-day.is-blocked { background: #f4ece9; border-radius: 10px; }
.cal-day.is-in-range { background: var(--blush); border-radius: 0; }
.cal-day.is-selected-start,
.cal-day.is-selected-end {
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    transform: scale(1.04);
    box-shadow: 0 8px 18px -8px rgba(143, 106, 44, .6);
}
.cal-day.is-selected-start .cal-day-price,
.cal-day.is-selected-end .cal-day-price { color: rgba(255, 255, 255, .85); }
.cal-day.is-selected-start { border-radius: 10px 0 0 10px; }
.cal-day.is-selected-end { border-radius: 0 10px 10px 0; }
.cal-day.is-selected-start.is-selected-end { border-radius: 10px; }

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    justify-content: center;
    font-size: .76rem;
    color: var(--muted);
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.cal-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.cal-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-available { background: #fff; border: 1px solid var(--border); }
.dot-blocked { background: #f4ece9; border: 1px solid #cabcb5; }
.dot-selected { background: var(--gold); }

.booking-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: .9rem;
    color: var(--ink);
    padding: .65rem 0;
    border-bottom: 1px solid var(--border);
}
.booking-summary-line:first-child { padding-top: 0; }
.booking-summary-line span:first-child { color: var(--muted); }
.booking-summary-line.booking-summary-total {
    border-bottom: none;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--gold-dark);
    padding-top: .85rem;
}
.booking-summary-line.booking-summary-total span:first-child { color: var(--gold-dark); }

/* ---------- Booking result pages (success / cancelled) ---------- */
.booking-result {
    max-width: 640px;
    text-align: center;
    padding: 4rem 1.5rem 5rem;
}
.booking-result .gold-rule { margin-left: auto; margin-right: auto; }
.booking-result-dates {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--gold-dark);
    margin: 1rem 0;
}

@media (max-width: 900px) {
    .booking-page-grid { grid-template-columns: 1fr; }
    .booking-page-side { position: static; }
}

@media (max-width: 560px) {
    .booking-calendar-inline { padding: 1.5rem 1rem 1.1rem; }
    .cal-months { grid-template-columns: 1fr; gap: 2rem; }
    .cal-month { padding: 0; }
    .cal-month + .cal-month { border-left: none; border-top: 1px solid var(--border); padding-top: 1.5rem; }
}

/* ====================================================================
   Redesign component system (mg-*) — shared building blocks used by the
   redesigned pages (home, about, and any page after). Page-specific
   layout (marquee, bento grid, story rows, etc.) stays inline in each
   template; only pieces reused across pages live here.
   ==================================================================== */

/* Top/bottom only (not the "5rem 0" shorthand): several sections carry
   both .wrap and .mg-section on the same element, and a shorthand here
   would win the cascade (declared later) and zero out .wrap's left/right
   padding, dropping their side gutters and letting content run edge to
   edge on narrow screens. */
.mg-section { padding-top: 5rem; padding-bottom: 5rem; }

/* Buttons. Reuses the sitewide .btn-magnetic hook (see motion.js), which
   now also queries .mg-btn, so these get the same cursor-follow pull as
   every other button on the site with no extra JS. */
.mg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.9rem; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: .92rem; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; text-decoration: none; transition: box-shadow .35s var(--ease-soft), background .3s var(--ease-soft); }
.mg-btn:hover { text-decoration: none; }
.mg-btn-quiet { background: rgba(250, 247, 244, .94); color: var(--ink); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .4); }
.mg-btn-quiet:hover { background: #fff; }
.mg-btn-dark { background: var(--ink); color: var(--cream); }
.mg-btn-dark:hover { background: var(--gold-dark); }
.mg-btn-whatsapp { background: var(--gold-dark); color: #fff; }
.mg-btn-whatsapp:hover { background: var(--gold); color: #fff; }
.mg-ic-whatsapp { width: 16px; height: 16px; fill: currentColor; margin-right: .15rem; flex-shrink: 0; }

/* Icon badges — small round callouts (amenities, feature lists) */
.mg-ic-badge { width: 46px; height: 46px; border-radius: 50%; background: var(--blush); display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; flex-shrink: 0; }
.mg-ic-badge svg { width: 22px; height: 22px; stroke: var(--gold-dark); color: var(--gold-dark); }

/* Section headings */
.mg-section-title { max-width: 640px; margin-bottom: 3rem; }
.mg-section-title h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.mg-section-title p { color: var(--muted); margin-top: .8rem; font-size: 1.02rem; }

/* Apartment cards — shared by Home's preview grid and the full Apartments
   listing, so both pages use the same card design. */
.mg-apt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
@media (max-width: 820px) { .mg-apt-grid { grid-template-columns: 1fr; } }
.mg-apt-card { display: block; position: relative; border-radius: 20px; overflow: hidden; background: var(--card); box-shadow: 0 1px 0 var(--border); border: 1px solid var(--border); transition: box-shadow .4s var(--ease-soft); text-decoration: none; color: inherit; }
.mg-apt-card:hover { box-shadow: 0 26px 60px -24px rgba(58, 46, 40, .35); }
.mg-apt-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.mg-apt-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
.mg-apt-card:hover .mg-apt-media img { transform: scale(1.07); }
.mg-apt-media .mg-placeholder-photo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--blush); color: var(--muted); }
.mg-apt-index { position: absolute; top: 1rem; left: 1rem; z-index: 2; font-family: var(--font-display); font-size: .95rem; color: #fff; background: rgba(36, 26, 21, .55); backdrop-filter: blur(4px); padding: .3rem .8rem; border-radius: 999px; letter-spacing: .05em; }
.mg-apt-body { padding: 1.6rem 1.7rem 1.9rem; }
.mg-apt-body h3 { font-size: 1.35rem; }
.mg-apt-meta { color: var(--gold-dark); font-size: .85rem; font-weight: 600; margin: .4rem 0 .7rem; letter-spacing: .02em; }
.mg-apt-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .88rem; color: var(--gold-dark); margin-top: .6rem; }
.mg-apt-link i { transition: transform .3s var(--ease-soft); font-style: normal; }
.mg-apt-card:hover .mg-apt-link i { transform: translateX(5px); }

/* Full-bleed photo hero shell — a direct child of #mg-home with no
   padded ancestor to cancel out, so no negative margin is needed here
   (one was left over from a different context and was dragging the
   hero past both edges of the viewport, causing horizontal scroll). */
.mg-hero { position: relative; overflow: hidden; padding: 9.5rem 1.5rem 5rem; min-height: 92vh; display: flex; align-items: center; }
.mg-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; animation: mg-kenburns 26s var(--ease-soft) infinite alternate; }
.mg-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 26, 21, .18) 0%, rgba(36, 26, 21, .4) 55%, rgba(36, 26, 21, .68) 100%); }
@keyframes mg-kenburns { from { transform: scale(1.04); } to { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .mg-hero-bg { animation: none; } }
.mg-hero-inner { position: relative; z-index: 2; color: var(--cream); max-width: 980px; }
.mg-hero .eyebrow { color: var(--gold-soft); }
.mg-hero-brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.7rem; }
.mg-hero-brand img { height: 62px; width: 62px; border-radius: 50%; background: rgba(255, 255, 255, .08); padding: 6px; box-shadow: 0 0 0 1px rgba(217, 192, 143, .5); }
.mg-hero-brand span { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.75rem); color: #fff; letter-spacing: .02em; }
.mg-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.04; color: #fff; text-shadow: 0 2px 40px rgba(0, 0, 0, .25); }
.mg-tagline { font-size: clamp(1.02rem, 1.6vw, 1.25rem); color: #f2e6df; max-width: 600px; margin: 1.3rem 0 2.3rem; }
.mg-hero-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.mg-hero-scrollcue { position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #f2e6df; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.mg-hero-scrollcue i { width: 1px; height: 34px; background: linear-gradient(#f2e6df, transparent); animation: mg-cue 1.8s ease-in-out infinite; display: block; }
@keyframes mg-cue { 0% { opacity: .2; transform: scaleY(.4); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } 100% { opacity: .2; transform: scaleY(.4); transform-origin: top; } }

/* CTA band */
.mg-cta-band { position: relative; border-radius: 28px; overflow: hidden; padding: 4.5rem 2rem; text-align: center; background: linear-gradient(135deg, var(--blush), var(--card) 55%, var(--blush)); border: 1px solid var(--border); color: var(--ink); }
.mg-cta-band::before { content: ""; position: absolute; inset: -40% -10%; background: radial-gradient(circle at 30% 20%, rgba(183, 137, 60, .14), transparent 55%), radial-gradient(circle at 80% 80%, rgba(183, 137, 60, .1), transparent 50%); }
.mg-cta-band-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.mg-cta-band h2 { color: var(--ink); font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.mg-cta-band p { color: var(--muted); margin: 1rem 0 2rem; }

/* Stat row — a few real figures given a big-number treatment */
.mg-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 760px) { .mg-stat-row { grid-template-columns: repeat(2, 1fr); } }
.mg-stat-tile { text-align: center; padding: 1.4rem .5rem; }
.mg-stat-num { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--ink); }
.mg-stat-label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; }

/* Page hero — the interior-page hero (About / Contact / Reviews / …): a
   richer, two-column treatment (text + a tilted framed brand-logo card) for
   pages that shouldn't reuse Home's full-bleed cinematic .mg-hero. */
.mg-pagehero { position: relative; overflow: hidden; padding: 9.5rem 0 4.5rem; background: var(--cream); }
.mg-pagehero::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(circle at 12% 15%, rgba(247, 227, 230, .95), transparent 55%), radial-gradient(circle at 90% -5%, rgba(183, 137, 60, .16), transparent 50%), radial-gradient(circle at 78% 100%, rgba(183, 137, 60, .1), transparent 50%); pointer-events: none; }
.mg-pagehero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.2rem; align-items: center; }
@media (max-width: 860px) { .mg-pagehero-grid { grid-template-columns: 1fr; gap: 2.6rem; } }
.mg-pagehero-text h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); margin: 1rem 0 0; line-height: 1.08; }
.mg-pagehero-lede { font-size: 1.06rem; color: var(--muted); max-width: 48ch; margin-top: 1.1rem; }
.mg-pagehero-media { position: relative; }
.mg-pagehero-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 70px -28px rgba(58, 46, 40, .4); transform: rotate(1.4deg); background: radial-gradient(circle at 30% 25%, rgba(183, 137, 60, .1), transparent 55%), linear-gradient(160deg, var(--card), var(--blush)); display: flex; align-items: center; justify-content: center; padding: 3rem; }
.mg-pagehero-photo img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 18px 30px rgba(58, 46, 40, .18)); }
.mg-pagehero-badge { position: absolute; left: -1.2rem; bottom: -1.2rem; width: 86px; height: 86px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 32px -12px rgba(58, 46, 40, .35); border: 1px solid var(--border); transform: rotate(-6deg); }
.mg-pagehero-badge img { width: 46px; height: 46px; object-fit: contain; }
@media (max-width: 860px) { .mg-pagehero-badge { left: 1rem; bottom: -1.2rem; } }

/* Page hero, plain variant — a centered title-only header (no two-column
   grid/photo) for text-heavy pages like the legal policies, on the same
   soft gradient background as the full .mg-pagehero. */
.mg-pagehero-plain { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; }
.mg-pagehero-plain h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 1rem 0 0; }

/* FAQ page — a sticky visual aside (map poster + a direct "get in touch" CTA)
   next to the question list, instead of the old single stacked column. */
#mg-faq .faq-page { max-width: none; padding-top: 4.5rem; }
#mg-faq .mg-faq-layout { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: start; }
@media (max-width: 860px) { #mg-faq .mg-faq-layout { grid-template-columns: 1fr; } }
#mg-faq .mg-faq-aside { position: sticky; top: 6.5rem; }
@media (max-width: 860px) { #mg-faq .mg-faq-aside { position: static; } }
#mg-faq .mg-faq-aside-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 1.6rem; text-align: center; box-shadow: 0 20px 50px -30px rgba(58, 46, 40, .25); }
#mg-faq .mg-faq-poster { border-radius: 16px; overflow: hidden; aspect-ratio: 900 / 1215; margin: 0 0 1.2rem; max-width: 220px; margin-left: auto; margin-right: auto; }
#mg-faq .mg-faq-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
#mg-faq .mg-faq-aside-text { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); margin: 0 0 1.1rem; }
#mg-faq .faq-item { transition: box-shadow .25s ease, border-color .25s ease; }
#mg-faq .faq-item:hover { box-shadow: 0 16px 34px -24px rgba(58, 46, 40, .3); }
#mg-faq .faq-item[open] { border-color: var(--gold-soft); }

/* Contact page — three even cards in one row: quick-contact info, the form,
   and the map. Each column is narrow, so the info card stacks its photo
   above the details instead of beside them, and the form drops the
   side-by-side name/email row it used when it had more width to work with. */
#mg-contact .contact-page { max-width: none; padding-top: 4.5rem; }
#mg-contact .mg-contact-triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: stretch; }
#mg-contact .mg-contact-triple > :first-child { margin-left: 2.5rem; }
#mg-contact .mg-contact-triple > :last-child { margin-right: 2.5rem; }
@media (max-width: 980px) {
    #mg-contact .mg-contact-triple { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    #mg-contact .mg-contact-triple > :first-child, #mg-contact .mg-contact-triple > :last-child { margin-left: 0; margin-right: 0; }
}
#mg-contact .mg-contact-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 1.8rem; box-shadow: 0 20px 50px -30px rgba(58, 46, 40, .25); display: flex; flex-direction: column; min-width: 0; }
#mg-contact .mg-contact-heading { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 .6rem; color: var(--ink); }
#mg-contact .mg-contact-form-card > p, #mg-contact .mg-contact-map-card > p { color: var(--muted); margin: 0 0 1.4rem; }

/* Quick-contact card: photo on top, WhatsApp/phone/email below. */
#mg-contact .mg-contact-photo { border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; margin: 0 0 1.4rem; }
#mg-contact .mg-contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#mg-contact .mg-contact-infocard-body { flex: 1; display: flex; flex-direction: column; }
#mg-contact .mg-contact-whatsapp { width: 100%; margin: 0 0 1.2rem; }
#mg-contact .mg-contact-details { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; overflow-wrap: anywhere; }
#mg-contact .mg-contact-details strong { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; font-weight: 600; }
#mg-contact .mg-contact-card .price-note-small { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--border); }

/* Map card: the embed fills the remaining card height, matching the other
   two columns instead of floating at a fixed short height. */
#mg-contact .mg-contact-map-card .map-embed { flex: 1; margin-top: 0; aspect-ratio: auto; max-height: none; min-height: 220px; }

/* Reviews page — the score sits beside a photo instead of a photo banner
   splitting the rating from the review grid below it. */
#mg-reviews .reviews-content { padding-top: 4.5rem; }
#mg-reviews .mg-reviews-summary { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; align-items: center; margin-bottom: 3.2rem; }
@media (max-width: 760px) { #mg-reviews .mg-reviews-summary { grid-template-columns: 1fr; } }
#mg-reviews .mg-reviews-score-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 2.4rem 1.6rem; text-align: center; box-shadow: 0 20px 50px -30px rgba(58, 46, 40, .25); }
#mg-reviews .mg-reviews-score-card .score { font-size: 3.2rem; font-family: var(--font-display); color: var(--gold-dark); }
#mg-reviews .mg-reviews-score-card .stars { color: var(--gold); letter-spacing: .14em; margin: .5rem 0; font-size: 1.15rem; }
#mg-reviews .mg-reviews-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 30px 70px -32px rgba(58, 46, 40, .35); }
#mg-reviews .mg-reviews-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Apartment detail page — softer, larger corner radii and a styled icon
   badge on the amenity chips, matching the rest of the redesign; the
   carousel/gallery markup and classes are untouched (site.js/motion.js
   bind to them directly). */
#mg-apartment-show { padding-top: 3.5rem; padding-bottom: 5rem; }
#mg-apartment-show .apartment-carousel { border-radius: 22px; }
#mg-apartment-show .amenity-chip { padding: .5rem 1.05rem .5rem .55rem; transition: box-shadow .25s ease, border-color .25s ease; }
#mg-apartment-show .amenity-chip:hover { border-color: var(--gold-soft); box-shadow: 0 10px 22px -16px rgba(58, 46, 40, .3); }
#mg-apartment-show .amenity-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blush); color: var(--gold-dark); font-size: .68rem; }
#mg-apartment-show .price-box { border-radius: 22px; padding: 2rem 1.75rem; box-shadow: 0 30px 60px -32px rgba(58, 46, 40, .3); }

/* Booking page — the calendar card was already built to this standard;
   this just brings the summary/price card's corners and shadow in line
   with it and with the rest of the redesign. Nothing booking-calendar.js
   binds to (ids, .cal-* classes, the form) is touched. */
#mg-booking .price-box { border-radius: 22px; padding: 2rem 1.75rem; box-shadow: 0 30px 60px -32px rgba(58, 46, 40, .3); }