/* ================================================================
   Sky Villas — premium landing stylesheet
   Palette: #EEEAE2 · #4E423C · #8E837E · #B7B1B1 · #D3C2A6

   Type, per the brandbook:
     Latin + Cyrillic  headings → Salma Pro Medium Narrow
                       body     → Salma Pro Medium
     Georgian          headings → Noto Sans Georgian ExtraCondensed
                       body     → Noto Sans Georgian Regular

   Salma Pro is commercial; drop the licensed .woff2 files into
   assets/fonts/salma-pro/ and the @font-face rules below activate it.
   Until then Oswald / Noto Sans stand in for Latin and Cyrillic.
   Georgian always uses Noto Sans Georgian and is never affected.

   Font stacks are ordered Latin-first so that per-glyph fallback sends
   Georgian characters to Noto Sans Georgian while Latin and Cyrillic
   stay on the brand face — which is exactly the mix the brandbook shows.
   ================================================================ */

:root {
    /* Light page, dark feature panels — Design code V2.
       Every token below is the LIGHT-context value; the dark panels at the
       bottom of this file re-declare the same names, so each rule picks up
       the right colour from its own context without being duplicated. */
    --page:            #f9f9f6;  /* primary light — page background */
    --surface:         #ede9e2;  /* warm white — raised surfaces */
    --umber:           #4e423c;  /* deliberate dark feature panels */
    --umber-deep:      #40362f;
    --champagne:       #d3c2a6;  /* sand accent — fills and rules, never text on light */
    --accent-text:     #6f5f4a;  /* the accent as TYPE: 5.8:1 on page, 5.1:1 on surface */
    --champagne-dim:   hsla(37, 34%, 74%, 0.75);
    --champagne-subtle:hsla(37, 34%, 74%, 0.15);
    --text-primary:    #4d423b;  /* body text */
    --heading:         #4d423b;
    --line:            rgba(182, 175, 175, 0.9);   /* soft grey #B6AFAF */
    --rule:            #8e827e;                    /* taupe — decorative rules */
    --sand:            #ece5d5;  /* champagne mixed to a surface — ink 7.8:1 */
    --chip-bg:         #ffffff;
    --cream:           #ede9e2;
    --ink:             #4d423b;  /* dark text on sand / cream surfaces */
    --stone:           #8e827e;  /* taupe — decorative and large text only (3.5:1) */
    --text-muted:      #6b605a;  /* 5.8:1 on page */
    --text-soft:       #5c524c;  /* 7.2:1 on page */
    --green:           #9dbf9a;
    --red:             #cf8b76;
    /* Headings — Salma Pro Medium Narrow / Noto Sans Georgian ExtraCondensed */
    --serif: "Salma Pro Narrow", "Oswald", "Noto Sans Georgian", sans-serif;
    /* Body — Salma Pro Medium / Noto Sans Georgian Regular */
    --sans:  "Salma Pro", "Noto Sans", "Noto Sans Georgian", -apple-system, "Segoe UI", sans-serif;
    --container: 1200px;
    --header-h: 72px;
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--page);
    color: var(--text-primary);
    font-family: var(--sans);
    font-weight: 400;          /* Noto Sans Georgian Regular / Salma Pro Medium */
    font-stretch: 100%;        /* body is never condensed — headings only */
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container.narrow { max-width: 880px; }
.center { text-align: center; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-stretch: 62.5%; /* Salma Pro Medium Narrow ⇒ Noto Sans Georgian ExtraCondensed */
    line-height: 1.12;
    color: var(--heading);
}
h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); letter-spacing: 0.01em; }

/* ---------- Micro-label (reference: .section-label / .stat-label) ---------- */
.micro {
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* ---------- Buttons (reference: btn-ghost/solid-champagne) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.95rem 2.6rem;
    border: 1px solid var(--champagne);
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.35s ease, background 0.3s ease, transform 0.3s ease;
    text-align: center;
    border-radius: 0;
}
.btn span, .btn { z-index: 0; }
.btn-outline { background: transparent; color: var(--accent-text); border-color: var(--champagne); }
.btn-outline::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--champagne);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
    z-index: -1;
}
.btn-outline:hover::before { transform: scaleX(1); }
.btn-outline:hover { color: var(--ink); }
.btn-gold { background: var(--champagne); color: var(--ink); font-weight: 700; }
.btn-gold:hover { background: var(--cream); border-color: var(--cream); transform: translateY(-1px); }
.btn-lg { padding: 1.05rem 3rem; }
.btn-sm { padding: 0.65rem 1.6rem; font-size: 0.625rem; }
.btn.full { width: 100%; }

/* ---------- Decorative lines ---------- */
.champagne-line { width: 3rem; height: 1px; background: var(--rule); display: inline-block; flex-shrink: 0; }
.champagne-line-full { width: 100%; height: 1px; background: linear-gradient(90deg, var(--rule), transparent); }

/* ---------- Header ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(64, 54, 47, 0.92), rgba(64, 54, 47, 0.72));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--champagne);
    color: var(--accent-text);
    font-family: var(--serif);
    font-weight: 500;
    font-size: 0.95rem;
}
.brand-name {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
}

.main-nav { display: flex; gap: 26px; flex-wrap: nowrap; }
.main-nav a {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.25s;
    white-space: nowrap;
}
.main-nav a:hover { color: var(--accent-text); }

.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.lang-switch { display: flex; border: 1px solid var(--line); }
.lang-switch a {
    padding: 6px 11px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    transition: all 0.2s;
}
.lang-switch a:hover { color: var(--text-primary); }
.lang-switch a.active { background: var(--champagne); color: var(--ink); }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px 6px;
    cursor: pointer;
}
.nav-toggle span { width: 22px; height: 1px; background: var(--text-primary); transition: all 0.25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero (reference: hero-section) ---------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: calc(var(--header-h) + 40px) 0 150px;
    text-align: center;
}
.hero-bg, .hero-bg img, .rooftop-bg, .rooftop-bg img, .soldout-bg, .soldout-bg img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-bg img { object-position: center 30%; transform: scale(1.04); transition: transform 8s var(--ease); }
body.loaded .hero-bg img { transform: scale(1); }
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(78, 66, 60, 0.5) 0,
        rgba(78, 66, 60, 0.58) 40%,
        rgba(78, 66, 60, 0.82) 78%,
        rgba(78, 66, 60, 0.96));
}
.hero-inner { position: relative; z-index: 10; max-width: 900px; display: flex; flex-direction: column; align-items: center; }

.eyebrow {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 22px;
}

.building-name {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(1.8rem, 5vw, 3.6rem);
    letter-spacing: 0.45em;
    text-indent: 0.45em; /* optically center the tracked text */
    color: var(--text-primary);
    text-transform: uppercase;
    margin-bottom: 18px;
    text-shadow: 0 1px 14px rgba(64, 54, 47, 0.7);
}

.hero h1 {
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    font-style: normal;
    margin-bottom: 22px;
}
.hero-sub {
    font-size: 0.98rem;
    color: var(--text-soft);
    max-width: 560px;
    margin: 0 auto 30px;
}

.hero-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 34px;
}
.price-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-muted); }
.price-value { font-family: var(--serif); font-weight: 500; font-stretch: 62.5%; font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--accent-text); line-height: 1.1; }
.price-note { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-muted); }

.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 24px; }
.hero-contacts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.contact-pill {
    padding: 8px 20px;
    border: 1px solid var(--line);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: all 0.25s;
}
.contact-pill:hover { border-color: var(--champagne); color: var(--accent-text); }

/* Hero bottom stats bar (reference: hero stats row) */
.hero-stats {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    border-top: 1px solid var(--line);
    background: rgba(78, 66, 60, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-stats-inner {
    display: flex;
    justify-content: center;
    gap: clamp(30px, 8vw, 110px);
    padding: 20px 24px;
}
.hero-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hero-stat-value { font-family: var(--serif); font-weight: 500; font-stretch: 62.5%; font-size: 1.25rem; color: var(--accent-text); }
.hero-stat-label { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); text-align: center; }

/* Vertical side text (reference: vertical-text-res) */
.hero-side {
    position: absolute;
    left: 30px; top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 10;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Scroll indicator (reference: scroll-line) */
.scroll-hint {
    position: absolute;
    left: 50%; bottom: 88px;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: hsla(37, 34%, 74%, 0.72);
}
.scroll-hint::after {
    content: "";
    width: 1px; height: 3rem;
    background: linear-gradient(to bottom, var(--champagne), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.3; } }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section-dark { background: var(--surface); }

.section-head { margin-bottom: 56px; }
.head-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.project-index {
    font-family: var(--serif);
    font-weight: 500;
    font-stretch: 62.5%;
    font-style: normal;
    font-size: 0.875rem;
    color: var(--accent-text);
    opacity: 0.8;
    letter-spacing: 0.05em;
}
.section-label {
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-text);
    opacity: 0.9;
}
.section-head h2 { margin-bottom: 12px; }
.section-sub { color: var(--text-soft); font-size: 0.95rem; max-width: 640px; }

.fine-print { font-size: 0.75rem; color: var(--text-muted); margin-top: 28px; max-width: 720px; line-height: 1.7; }
.fine-print.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Facts ---------- */
.facts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.fact-card {
    padding: 34px 26px;
    background: var(--page);
    transition: background 0.3s;
}
.fact-card:hover { background: var(--surface); }
.fact-value {
    display: block;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 2.1rem;
    color: var(--accent-text);
    line-height: 1.15;
    margin-bottom: 10px;
}
.fact-label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.6;
}

.facts-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip {
    padding: 9px 20px;
    border: 1px solid var(--champagne-subtle);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--champagne-dim);
}

/* ---------- Availability ---------- */
.villas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.villa-card {
    background: var(--page);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform 0.3s var(--ease), border-color 0.3s;
}
.villa-card:hover { transform: translateY(-4px); }
.villa-card.status-available:hover { border-color: var(--champagne-dim); }

.villa-visual { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.villa-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.villa-card:hover .villa-visual img { transform: scale(1.05); }
.villa-card.status-sold .villa-visual img,
.villa-card.status-reserved .villa-visual img { filter: grayscale(0.9) brightness(0.55); }

.status-tag {
    position: absolute;
    top: 14px; left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(78, 66, 60, 0.82);
    backdrop-filter: blur(6px);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.status-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-available .status-tag { color: var(--green); }
.status-reserved  .status-tag { color: var(--accent-text); }
.status-sold      .status-tag { color: var(--red); }

.villa-body { padding: 24px 22px; }
.villa-body h3 { font-size: 1.35rem; margin-bottom: 6px; }
.villa-meta {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.status-sold .villa-body h3, .status-sold .villa-meta { opacity: 0.45; }

/* ---------- Statement / rare (emerald band, reference emerald surface) ---------- */
.section-statement {
    background: var(--umber);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.section-statement::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 90% at 50% 0%, hsla(37, 34%, 74%, 0.07), transparent);
}
.section-statement .eyebrow { color: var(--accent-text); opacity: 0.7; }
.statement {
    position: relative;
    font-family: var(--serif);
    font-weight: 300;
    font-style: normal;
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: 40px;
}
.rare-points {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 40px;
}
.rare-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--champagne-dim);
}
.rare-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); flex-shrink: 0; }

/* ---------- Gallery ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.gallery-item {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    cursor: zoom-in;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.gallery-item:hover img { transform: scale(1.045); }
.gallery-item figcaption {
    position: absolute;
    bottom: 1.4rem; left: 1.4rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent-text);
    opacity: 0.9;
    text-shadow: 0 1px 8px rgba(78, 66, 60, 0.8);
}
.gallery-item figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); flex-shrink: 0; }
.gallery-item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(78, 66, 60, 0.78));
    pointer-events: none;
}

/* ---------- Location ---------- */
.location-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 36px;
    align-items: stretch;
}
.location-map {
    border: 1px solid var(--line);
    overflow: hidden;
    min-height: 400px;
}
.location-map iframe {
    width: 100%; height: 100%; min-height: 400px; border: 0;
    filter: invert(0.88) hue-rotate(180deg) saturate(0.4) brightness(0.9);
}
.location-points { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); justify-content: stretch; }
.location-point { padding: 28px 28px; background: var(--surface); flex: 1; }
.location-point h4 {
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-text);
    opacity: 0.75;
    margin-bottom: 10px;
}
.location-point p { font-size: 0.9rem; color: var(--text-soft); }

/* ---------- Layouts ---------- */
.levels-scheme {
    max-width: 900px;
    margin: 0 auto 60px;
}
.level-row {
    display: grid;
    grid-template-columns: 230px 1fr;
    grid-template-areas: "info bar" "info desc";
    gap: 6px 28px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.level-info { grid-area: info; display: flex; flex-direction: column; gap: 2px; }
.level-name { font-family: var(--serif); font-weight: 500; font-stretch: 62.5%; font-size: 1.2rem; color: var(--text-primary); }
.level-area { font-family: var(--serif); font-weight: 500; font-stretch: 62.5%; font-style: normal; font-size: 0.9rem; color: var(--accent-text); }
.level-bar-wrap { grid-area: bar; display: flex; align-items: center; }
.level-bar {
    height: 2px;
    width: var(--w);
    min-width: 40px;
    background: linear-gradient(90deg, var(--champagne), hsla(37, 34%, 74%, 0.15));
    transform-origin: left;
    animation: grow 1.2s var(--ease) both;
}
@keyframes grow { from { transform: scaleX(0); } }
.level-desc {
    grid-area: desc;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.plans-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
.plan-item {
    border: 1px solid var(--line);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--surface);
}
.plan-item figcaption {
    padding: 14px 18px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid var(--line);
}
#layouts .center { margin-top: 34px; }

/* ---------- Rooftop ---------- */
.section-rooftop { position: relative; overflow: hidden; padding: 150px 0; }
.rooftop-bg { position: absolute; inset: 0; }
.rooftop-bg::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(78, 66, 60, 0.9), rgba(78, 66, 60, 0.84) 50%, rgba(78, 66, 60, 0.93));
}
.rooftop-inner { position: relative; z-index: 2; text-align: center; }
.rooftop-inner h2 { margin-bottom: 34px; }
.rooftop-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}
.rooftop-features li {
    padding: 10px 24px;
    border: 1px solid hsla(37, 34%, 74%, 0.3);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-text);
    background: rgba(78, 66, 60, 0.68);
    backdrop-filter: blur(4px);
}
.rooftop-note { font-size: 0.8rem; color: var(--text-muted); max-width: 520px; margin: 0 auto; }

/* ---------- Purchase ---------- */
.purchase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.purchase-card {
    display: flex;
    flex-direction: column;
    padding: 44px 36px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color 0.3s, transform 0.3s var(--ease);
}
.purchase-card:hover { transform: translateY(-4px); border-color: var(--champagne-dim); }
.purchase-card.featured { border-color: var(--champagne-dim); background: linear-gradient(165deg, hsla(37, 34%, 74%, 0.07), var(--surface) 55%); }
.purchase-card h3 { font-size: 1.8rem; margin-bottom: 10px; color: var(--text-primary); }
.purchase-price {
    font-family: var(--serif);
    font-weight: 300;
    font-style: normal;
    font-size: 1rem;
    color: var(--accent-text);
    margin-bottom: 20px;
}
.purchase-desc { font-size: 0.88rem; color: var(--text-soft); margin-bottom: 30px; flex: 1; }

/* ---------- International / management (emerald band) ---------- */
#international { background: var(--umber); }
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
}
.two-col h2 { font-size: 1.7rem; margin-bottom: 26px; }
.check-list li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 13px 0;
    font-size: 0.9rem;
    color: var(--text-soft);
    border-bottom: 1px solid hsla(40, 26%, 91%, 0.1);
}
.check-list li::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--champagne);
    flex-shrink: 0;
    transform: translateY(-2px);
}
.mgmt-text { color: var(--text-soft); font-size: 0.95rem; }
#international .fine-print { color: var(--text-muted); }

/* ---------- Contact / form ---------- */
.section-contact { position: relative; }
.contact-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 70px;
}
.contact-form-col h2, .contact-info-col h2 { margin-bottom: 12px; }
.contact-form-col .section-sub { margin-bottom: 34px; }

.request-form { display: flex; flex-direction: column; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.request-form label { display: flex; flex-direction: column; gap: 9px; }
.request-form label span {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.request-form input, .request-form select {
    padding: 14px 16px;
    background: rgba(250, 247, 242, 0.04);
    border: 1px solid var(--line);
    border-radius: 0;
    color: var(--text-primary);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.95rem;
    transition: border-color 0.25s, background 0.25s;
}
.request-form input:focus, .request-form select:focus {
    outline: none;
    border-color: var(--champagne-dim);
    background: rgba(250, 247, 242, 0.06);
}
.request-form select option { background: var(--page); color: var(--text-primary); }
.hp-field { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; }

.form-alert { padding: 16px 20px; font-size: 0.88rem; margin-bottom: 24px; border: 1px solid; }
.form-alert.success { background: rgba(157, 191, 154, 0.08); border-color: rgba(157, 191, 154, 0.35); color: var(--green); }
.form-alert.error   { background: rgba(207, 139, 118, 0.08); border-color: rgba(207, 139, 118, 0.35); color: var(--red); }

.contact-list { display: flex; flex-direction: column; margin-bottom: 28px; }
.contact-list li {
    display: flex;
    flex-direction: column;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
}
.contact-label {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.contact-list a { font-family: var(--serif); font-weight: 500; font-stretch: 62.5%; font-size: 1.15rem; color: var(--text-primary); transition: color 0.25s; }
.contact-list a:hover { color: var(--accent-text); }
.callback-note { font-size: 0.85rem; color: var(--text-soft); margin-bottom: 18px; }
.contact-location { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-muted); }

/* ---------- Mobile CTA bar ---------- */
.mobile-cta-bar {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    background: rgba(78, 66, 60, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
}
.mobile-cta-item {
    display: grid; place-items: center;
    width: 48px; height: 46px;
    border: 1px solid var(--line);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--accent-text);
    flex-shrink: 0;
}
.mobile-cta-main {
    flex: 1;
    display: grid; place-items: center;
    height: 46px;
    background: var(--champagne);
    color: var(--ink);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ---------- Footer ---------- */
.site-footer {
    padding: 56px 0 110px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 22px;
}
.site-footer .brand-name { font-size: 0.85rem; }
.footer-loc {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.footer-disclaimer { font-size: 0.72rem; color: var(--text-soft); max-width: 760px; margin-bottom: 12px; line-height: 1.8; }
.footer-rights { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-soft); }

/* ---------- Sold out ---------- */
.soldout-page {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.soldout-bg::after { content: ""; position: absolute; inset: 0; background: rgba(78, 66, 60, 0.92); }
.soldout-bg { position: absolute; inset: 0; }
.soldout-inner { position: relative; z-index: 2; text-align: center; padding-top: 80px; }
.soldout-inner h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-style: normal; margin-bottom: 20px; }
.soldout-text { color: var(--text-soft); margin-bottom: 34px; }
.soldout-contacts { margin-top: 44px; display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; }
.soldout-contacts a { color: var(--accent-text); font-size: 0.9rem; letter-spacing: 0.05em; }

/* ---------- Lightbox ---------- */
.lightbox[hidden] { display: none; }
.lightbox {
    position: fixed; inset: 0;
    z-index: 200;
    background: rgba(8, 22, 28, 0.96);
    display: grid;
    place-items: center;
    padding: 40px;
}
.lightbox img { max-width: 100%; max-height: 88vh; }
.lightbox-close {
    position: absolute;
    top: 18px; right: 26px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 2.2rem;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
}

/* ---------- Reveal animation (reference: reveal-up + stagger) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--ease) var(--d, 0ms), transform 0.9s var(--ease) var(--d, 0ms);
}
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-bg img { transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1120px) {
    .main-nav { gap: 18px; }
    .main-nav a { letter-spacing: 0.18em; }
    .facts-grid { grid-template-columns: repeat(4, 1fr); }
    .hero-side { display: none; }
}

@media (max-width: 1024px) {
    .main-nav { display: none; }
    .header-cta { display: none; }
    .nav-toggle { display: flex; }
    .main-nav.open {
        display: flex;
        position: fixed;
        top: var(--header-h); left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(78, 66, 60, 0.99);
        border-bottom: 1px solid var(--line);
        padding: 8px 32px 22px;
    }
    .main-nav.open a {
        padding: 15px 0;
        border-bottom: 1px solid var(--line);
        font-size: 0.72rem;
        color: var(--text-primary);
    }
    .facts-grid { grid-template-columns: repeat(2, 1fr); }
    .villas-grid { grid-template-columns: repeat(2, 1fr); }
    .purchase-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .location-grid { grid-template-columns: 1fr; }
    .location-map, .location-map iframe { min-height: 320px; }
    .two-col { grid-template-columns: 1fr; gap: 56px; }
    .contact-grid { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 768px) {
    .container { padding: 0 20px; }
    .section { padding: 76px 0; }
    .section-head { margin-bottom: 40px; }

    .hero { padding-bottom: 170px; }
    .hero-sub { font-size: 0.92rem; }
    .hero-cta { width: 100%; }
    .hero-cta .btn { width: 100%; }
    .hero-stats-inner { flex-wrap: wrap; gap: 18px 34px; padding: 16px 20px; }
    .scroll-hint { display: none; }

    .gallery-grid { grid-template-columns: 1fr; gap: 14px; }
    .gallery-item { aspect-ratio: 16/11; }
    .plans-row { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }

    .level-row {
        grid-template-columns: 1fr;
        grid-template-areas: "info" "bar" "desc";
        gap: 10px;
        padding: 16px 0;
    }

    .mobile-cta-bar { display: flex; }
    .site-footer { padding-bottom: 130px; }
}

@media (max-width: 560px) {
    .facts-grid { grid-template-columns: repeat(2, 1fr); }
    .fact-card { padding: 24px 18px; }
    .fact-value { font-size: 1.6rem; }
    .villas-grid { grid-template-columns: 1fr; }
    .brand-name { letter-spacing: 0.22em; font-size: 0.85rem; }
    .building-name { letter-spacing: 0.38em; text-indent: 0.38em; }
    .hero-stat-value { font-size: 1.05rem; }
    .rooftop-features li { padding: 9px 16px; }
    .purchase-card { padding: 34px 24px; }
}

@media (max-width: 400px) {
    .lang-switch a { padding: 5px 8px; }
    .brand-mark { width: 32px; height: 32px; font-size: 0.8rem; }
    .facts-grid { grid-template-columns: 1fr 1fr; }
    .fact-value { font-size: 1.4rem; }
    .fact-label { letter-spacing: 0.12em; }
}

/* ================================================================
   Reference-exact structure (Residences analog)
   ================================================================ */

.noise-overlay {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.bg-midnight { background: var(--page); }
.bg-emerald-deep { background: var(--surface); }

/* ---- Header (transparent → solid) ---- */
.site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.scrolled {
    background: rgba(64, 54, 47, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---- Hero (reference hero-section) ---- */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
}
.hero-image {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 1;
    transform: scale(1.04);
    transition: transform 8s var(--ease);
}
body.loaded .hero-image { transform: scale(1); }
.hero-image-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(64, 54, 47, 0.45) 0,
        rgba(64, 54, 47, 0.5) 45%,
        rgba(64, 54, 47, 0.72) 78%,
        rgba(64, 54, 47, 0.94));
    z-index: 2;
}
.hero-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Top: clear the fixed header. Bottom: reserve the scroll cue's lane so the
       vertically-centred content can never come to rest on top of it — which is
       what happened on short laptop viewports. */
    padding: calc(var(--header-h) + 1rem) 24px 11rem;
}
.hero-brand-line { margin: 2rem auto 0; }
.hero-tagline {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-top: 1.5rem;
}
.hero-cta-wrap { margin-top: 3rem; }

.hero-side {
    position: absolute;
    left: 2rem; top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.hero-side-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: var(--sans);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--accent-text);
    text-shadow: 0 1px 8px rgba(64, 54, 47, 0.8);
}
.hero-side-line { width: 1px; height: 4rem; background: linear-gradient(to bottom, hsla(37,34%,74%,0.6), transparent); }

.scroll-indicator {
    position: absolute;
    bottom: 8.5rem; left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    animation: fadeInUp 1s ease 2.2s forwards;
}
.scroll-indicator span {
    font-family: var(--sans);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--accent-text);
    text-shadow: 0 1px 8px rgba(64, 54, 47, 0.8);
}
.scroll-line {
    width: 1px; height: 3rem;
    background: linear-gradient(to bottom, var(--champagne), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes fadeInUp { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

.hero-bottom {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    padding-bottom: 2.5rem;
}
.hr-champagne { border: none; border-top: 1px solid hsla(19, 7%, 53%, 0.35); width: 100%; margin-bottom: 1.5rem; }
.hero-bottom-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero-stats-row { display: flex; gap: 4rem; }
.hero-stat { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.hero-stat-label {
    font-family: var(--sans);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.hero-stat-value { font-family: var(--serif); font-weight: 500; font-stretch: 62.5%; font-size: 1.125rem; color: var(--ink); }
.hero-accepting {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--sans);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---- Case studies (reference case-study-section) ---- */
.case-study-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 62vh;
    overflow: hidden;
}
.case-image-panel { position: relative; overflow: hidden; min-height: 44vh; }
.case-image-panel img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.case-image-panel:hover img { transform: scale(1.03); }
.case-image-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 50%, rgba(78,66,60,0.68)); }

.image-tag {
    position: absolute;
    bottom: 2rem; left: 2rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* This label sits on a photograph, not on the page, so it keeps the dark
       treatment: a scrim behind it, sand type on top. Photos vary too much
       for dark type to stay legible. */
    padding: 0.55rem 1rem;
    background: rgba(64, 54, 47, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.image-tag-dot { width: 6px; height: 6px; background: var(--champagne); border-radius: 50%; flex-shrink: 0; }
.image-tag-text {
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #d3c2a6;
    opacity: 1;
}

.case-story-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.5rem 3rem;
}
.story-inner { max-width: 32rem; }
.story-inner-right { margin-left: auto; }
.case-story-panel .head-row { margin-bottom: 2.5rem; }
.case-story-panel h2 { margin-bottom: 1.5rem; }
.story-paragraphs { display: flex; flex-direction: column; gap: 1.25rem; }
.story-paragraphs p, .story-lead {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--text-soft);
    line-height: 1.8;
}
.story-lead { margin-bottom: 3rem; }
.story-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
}
.story-stat-value { font-family: var(--serif); font-weight: 500; font-stretch: 62.5%; font-size: 2rem; color: var(--accent-text); line-height: 1; }
.stat-label {
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.story-cta { margin-top: 3.5rem; }

.luxury-quote {
    font-family: var(--serif);
    font-weight: 300;
    font-style: normal;
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    line-height: 1.5;
    color: var(--text-primary);
    border-left: 1px solid var(--champagne);
    padding-left: 2rem;
    margin-bottom: 2rem;
}
.quote-attr { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.quote-attr-line { width: 2rem; height: 1px; background: hsla(37, 34%, 74%, 0.4); flex-shrink: 0; }
.quote-attr-name { font-family: var(--sans); font-weight: 600; font-size: 0.85rem; color: hsla(40,26%,91%,0.92); }
.quote-attr-sub { font-family: var(--sans); font-weight: 400; font-size: 0.78rem; color: hsla(40,26%,91%,0.68); }

/* ---- Numerals (reference stat-numeral) ---- */
.numerals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.stat-numeral {
    font-family: var(--serif);
    font-weight: 300;
    color: var(--accent-text);
    line-height: 0.9;
    font-size: clamp(2.2rem, 3.4vw, 3.4rem);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.stat-numeral-unit { font-size: 0.45em; letter-spacing: 0; margin-left: 0.15em; }
.story-source {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
    line-height: 1.7;
}

/* ---- Teaser (reference teaser-section) ---- */
.teaser-section {
    position: relative;
    min-height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 0;
    background: var(--umber);
}
.teaser-section > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}
.teaser-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(64,54,47,0.68) 0, rgba(78,66,60,0.9) 50%, rgba(78,66,60,0.96));
    z-index: 2;
}
.teaser-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 760px;
}
.teaser-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.teaser-label-line { width: 2rem; height: 1px; background: hsla(37, 34%, 74%, 0.5); }
.teaser-title { font-size: clamp(2rem, 4.2vw, 3.2rem); margin-bottom: 1.8rem; }
.teaser-title em { font-style: normal; }
.teaser-p {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--text-soft);
    line-height: 1.8;
    max-width: 560px;
    margin: 0 auto 3rem;
}
.avail-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2.5rem;
}
.avail-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border: 1px solid var(--line);
    background: var(--chip-bg);
    backdrop-filter: blur(6px);
    font-family: var(--sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.avail-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.avail-chip.status-available .avail-dot { background: var(--green); }
.avail-chip.status-reserved .avail-dot { background: var(--champagne); }
.avail-chip.status-sold .avail-dot { background: var(--red); }
.avail-chip.status-sold { opacity: 1; }
.avail-chip.status-sold .avail-label { color: var(--text-muted); }

.teaser-content .request-form {
    max-width: 620px;
    margin: 0 auto 2.5rem;
    text-align: left;
}
.teaser-content .form-alert { max-width: 620px; margin: 0 auto 1.5rem; text-align: left; }
.teaser-content .request-form input,
.teaser-content .request-form select {
    background: rgba(78, 66, 60, 0.72);
    backdrop-filter: blur(6px);
}
.teaser-contacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2rem;
}
.teaser-note {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---- Footer ---- */
.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}
.footer-nav { display: flex; gap: 2rem; }
.footer-nav a {
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.25s;
}
.footer-nav a:hover { color: var(--accent-text); }
.site-footer { padding: 4rem 0 7rem; }
.footer-loc { margin-bottom: 1.2rem; }

/* ---- Reveal directions ---- */
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
    .hero-image { transform: none; transition: none; }
    .scroll-indicator { animation: none; opacity: 1; }
}

/* ---- Responsive (structure) ---- */
@media (max-width: 1024px) {
    .case-study-section { grid-template-columns: 1fr; min-height: auto; }
    .case-story-panel { padding: 4rem 3rem; }
    .order-story { order: 2; }
    .order-image { order: 1; }
    .story-inner-right { margin-left: 0; }
    .hero-side { display: none; }
}

@media (max-width: 768px) {
    .case-story-panel { padding: 3.5rem 2rem; }
    .case-image-panel { min-height: 46vh; }
    .image-tag { bottom: 1.2rem; left: 1.2rem; }
    .hero-bottom { display: none; }
    .scroll-indicator { bottom: 3rem; }
    .hero-section { min-height: 620px; }
    .story-stats { gap: 1.8rem; flex-wrap: wrap; }
    .numerals-grid { gap: 1rem; }
    .stat-numeral { font-size: clamp(1.7rem, 8vw, 2.6rem); }
    .teaser-section { padding: 7rem 0 8rem; }
    .luxury-quote { padding-left: 1.2rem; }
    .footer-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
    .case-story-panel { padding: 3rem 1.5rem; }
    .avail-chips { gap: 8px; }
    .avail-chip { padding: 7px 12px; letter-spacing: 0.12em; }
    .numerals-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .stat-numeral { font-size: 2.4rem; }
    .teaser-title br { display: none; }
}

/* ================================================================
   Light-theme contexts (brandbook: light page, dark feature panels)
   ================================================================ */

/* -- Panels that KEEP the dark umber surface --------------------------------
   Re-declaring the tokens here is what makes the theme work: every rule in
   this file already reads var(--text-primary) / var(--line) / …, so inside a
   dark panel those same rules resolve to the dark-context values instead. */
.teaser-section,
.soldout-page,
.section-statement,
.section-rooftop,
.quote-band,
.hero-section,
.site-header,
.main-nav.open,
#international,
.grounds-figure figcaption,
.rhythm-item figcaption,
.mobile-cta-bar {
    --page:         #4e423c;
    --surface:      #5a4e47;
    --text-primary: #eeeae2;
    --heading:      #d3c2a6;
    --accent-text:  #d3c2a6;   /* 5.6:1 on umber */
    --ink:          #4e423c;
    --line:         hsla(40, 26%, 91%, 0.22);
    --rule:         #d3c2a6;
    --sand:         #5a4e47;
    --chip-bg:      rgba(78, 66, 60, 0.72);
    --text-muted:   #b7b1b1;   /* 4.6:1 on umber */
    --text-soft:    #d0cac3;   /* 6.0:1 on umber */
    --stone:        #b7b1b1;
    color: var(--cream);
}
/* headings already resolve to --heading, which is champagne in dark context */

.bg-emerald-deep .section-label,
.teaser-section .section-label,
.section-rooftop .section-label { color: var(--accent-text); }

.bg-emerald-deep .project-index { color: var(--accent-text); opacity: 0.85; }

.bg-emerald-deep .stat-label,
.teaser-section .stat-label,
.site-footer .footer-loc { color: var(--text-soft); }

.site-footer .brand-name { color: var(--heading); }
.site-footer .footer-nav a { color: var(--text-soft); }
.site-footer .footer-nav a:hover { color: var(--accent-text); }

/* Dark-panel outline buttons: sand, not ink */
.bg-emerald-deep .btn-outline,
.teaser-section .btn-outline,
.soldout-page .btn-outline {
    color: var(--accent-text);
    border-color: var(--champagne);
}
.bg-emerald-deep .btn-outline::before,
.teaser-section .btn-outline::before,
.soldout-page .btn-outline::before { background: var(--champagne); }
.bg-emerald-deep .btn-outline:hover,
.teaser-section .btn-outline:hover,
.soldout-page .btn-outline:hover { color: var(--ink); }

/* Teaser form on dark overlay: cream fields */
.teaser-section .request-form input,
.teaser-section .request-form select {
    background: rgba(238, 234, 226, 0.07);
    color: var(--cream);
    border-color: var(--text-muted);
}
.teaser-section .request-form input:focus,
.teaser-section .request-form select:focus {
    border-color: var(--champagne);
    background: rgba(238, 234, 226, 0.11);
}
.teaser-section .request-form select option { background: #4e423c; color: var(--cream); }
.teaser-section .request-form label > span { color: var(--accent-text); }
.teaser-section .contact-pill { color: var(--text-soft); border-color: var(--text-muted); }
.teaser-section .contact-pill:hover { color: var(--accent-text); border-color: var(--champagne); }

/* Mobile CTA bar (dark) */
.mobile-cta-bar { background: rgba(64, 54, 47, 0.96); }
.mobile-cta-item { color: var(--accent-text); border-color: var(--line); }
.mobile-cta-main { background: var(--champagne); color: var(--ink); }

/* ================================================================
   Floor plans (from project PDF drawings)
   ================================================================ */
.section-plans { padding: 72px 0; background: var(--page); }
.section-plans .section-head { text-align: center; }
.section-plans .head-row { justify-content: center; }
.section-plans .section-sub { margin: 0 auto; }

.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}
.plan-card {
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.plan-card:hover {
    transform: translateY(-4px);
    border-color: var(--champagne);
    box-shadow: 0 18px 40px rgba(78, 66, 60, 0.12);
}
.plan-card a { display: block; }
.plan-card-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #b6b1af;
}
.plan-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.plan-card figcaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 15px 18px;
    border-top: 1px solid var(--line);
    background: var(--page);
}
.plan-card-name {
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
}
.plan-card-area {
    font-family: var(--serif);
    font-weight: 500;
    font-stretch: 62.5%;
    font-size: 0.85rem;
    color: var(--stone);
    white-space: nowrap;
}
.plans-master {
    margin-top: 20px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: #fff;
}
.plans-master img { width: 100%; display: block; }
.plans-master figcaption {
    padding: 15px 18px;
    border-top: 1px solid var(--line);
    background: var(--page);
}
.plans-note {
    margin-top: 26px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

@media (max-width: 900px) {
    .plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .plans-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Brief v1.0 structure — new blocks
   ================================================================ */

/* Hero additions */
.hero-sub-line {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-soft);
    max-width: 620px;
    margin-top: 1.6rem;
    line-height: 1.7;
}
.hero-fact-line {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 1.2rem;
}
.hero-cta-pair { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Rarity */
.section-rare .rare-text {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-soft);
    max-width: 680px;
    margin: 1.6rem auto 2.4rem;
}
.head-row-center { justify-content: center; }

/* Facts table */
.status-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6rem 0 2.4rem; }
.facts-table { border-top: 1px solid var(--line); }
.facts-row {
    display: grid;
    grid-template-columns: minmax(180px, 320px) 1fr;
    gap: 8px 32px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}
.facts-row dt {
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-text);
    padding-top: 3px;
}
.facts-row dd { font-size: 0.95rem; font-weight: 400; line-height: 1.7; }
.facts-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2.2rem; }

/* Light-surface variants of the facts table (living indicators) */
.bg-soft { background: var(--surface); }
#living .facts-row dt { color: var(--accent-text); opacity: 0.85; }
#living .facts-table, #living .facts-row { border-color: var(--line); }

/* Gallery carousels */
.carousel-block { margin-top: 3rem; }
.carousel-title {
    font-size: 1.15rem;
    margin-bottom: 1rem;
    color: var(--accent-text);
}
.carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 max(32px, calc((100vw - var(--container)) / 2 + 32px)) 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--champagne) transparent;
}
.carousel-item {
    flex: 0 0 min(58vw, 460px);
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--line);
}
.carousel-item a { display: block; }
.carousel-item img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
}
.carousel-item-plan { flex-basis: min(42vw, 340px); }
.carousel-item-plan img { aspect-ratio: 3/4; object-fit: cover; object-position: center 40%; background: #b6b1af; }
.carousel-item figcaption {
    padding: 12px 16px;
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6e635b;
    background: #fff;
    border-top: 1px solid rgba(78, 66, 60, 0.15);
}

/* Video */
.video-block { margin-top: 3.5rem; }
.video-frame {
    position: relative;
    aspect-ratio: 16/9;
    max-width: 860px;
    margin: 0 auto;
    border: 1px solid var(--line);
    background: #000;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Location */
.loc-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    margin-top: 2.6rem;
    align-items: stretch;
}
.loc-map { border: 1px solid var(--line); min-height: 380px; }
.loc-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: saturate(0.35) sepia(0.12); }
.loc-points { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.loc-point { background: var(--page); padding: 16px 20px; flex: 1; }
.bg-soft .loc-point { background: var(--surface); }
.loc-point dt {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.loc-point dd { font-size: 0.8rem; color: var(--text-muted); }
#location .btn { margin-top: 1.6rem; }

/* Purchase comparison */
.buy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 3.2rem;
    align-items: stretch;
}
.buy-card {
    display: flex;
    flex-direction: column;
    padding: 40px 36px 36px;
    border: 1px solid var(--line);
    background: rgba(238, 234, 226, 0.03);
}
.buy-card.featured {
    border-color: var(--champagne);
    background: linear-gradient(170deg, hsla(37, 34%, 74%, 0.08), transparent 60%);
}
.buy-name {
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--accent-text);
    margin-top: 0.9rem;
}
.buy-price-label {
    font-family: var(--sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 1.1rem;
}
.buy-price {
    font-family: var(--serif);
    font-weight: 500;
    font-stretch: 62.5%;
    font-size: 2rem;
    color: var(--heading);
    line-height: 1.15;
    /* A rule divider under the price separates it from the action below and
       guarantees the gap even when the flex "auto" margin collapses to zero. */
    margin-top: 1.6rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid var(--line);
}
.buy-state {
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-soft);
    margin-top: 0.5rem;
}
/* Bottom-align the button across cards of unequal text length, while the
   2rem keeps a real gap on the tallest card where "auto" resolves to 0. */
.buy-card > .btn:last-child { margin-top: auto; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.buy-card > .buy-price + .btn,
.buy-card > .buy-state + .btn { margin-top: 2rem; }

/* Investment */
.invest-main { font-size: 1.1rem; line-height: 1.85; color: var(--text-primary); margin: 1.4rem 0 1rem; max-width: 640px; }
.invest-line { font-size: 0.9rem; color: var(--text-muted); max-width: 640px; }
.invest-residence {
    margin-top: 2.2rem;
    padding: 24px 28px;
    border: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.invest-residence p { font-size: 0.9rem; color: var(--text-soft); max-width: 420px; }

/* Contact */
.contact-direct { margin-bottom: 2.4rem; }

@media (max-width: 900px) {
    .buy-grid { grid-template-columns: 1fr; }
    .loc-grid { grid-template-columns: 1fr; }
    .facts-row { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 560px) {
    .carousel-item { flex-basis: 84vw; }
    .hero-cta-pair { flex-direction: column; align-items: stretch; }
}

/* Reference-structure additions */
.case-map-panel { min-height: 44vh; }
.case-map-panel iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    filter: saturate(0.4) sepia(0.15) brightness(0.92);
}
.loc-table { margin-top: 2rem; }
.loc-table .facts-row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
.building-name { letter-spacing: 0.22em; text-indent: 0.22em; }
.hero-sub-line { color: var(--text-soft); text-shadow: 0 1px 10px rgba(64, 54, 47, 0.8); }
.hero-fact-line { color: var(--text-muted); text-shadow: 0 1px 8px rgba(64, 54, 47, 0.8); }
.case-story-panel .facts-table { margin-top: 1.6rem; }
.case-story-panel .facts-row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
.case-story-panel .status-chips { margin: 1.4rem 0 0.4rem; }
.case-story-panel .facts-highlights { margin-top: 1.8rem; }

/* Facts table in two columns on wide screens */
.facts-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    border-top: 1px solid var(--line);
}
.facts-cols .facts-row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
.live-table { margin-top: 2.2rem; }
.live-table .facts-row dt { color: var(--accent-text); opacity: 0.85; }

@media (max-width: 800px) {
    .facts-cols { grid-template-columns: 1fr; }
}

/* ================================================================
   Presentation-plan structure (v2) — new section types
   ================================================================ */

/* Quote band — full-bleed photo, single centered line */
.quote-band {
    position: relative;
    min-height: 42vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.quote-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-band-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(64,54,47,0.75), rgba(64,54,47,0.6) 50%, rgba(64,54,47,0.8));
}
.quote-band-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
    padding: 60px 32px;
}
.quote-band-text {
    font-family: var(--serif);
    font-weight: 500;
    font-stretch: 62.5%;
    font-size: clamp(1.5rem, 3.4vw, 2.5rem);
    color: var(--accent-text);
    max-width: 780px;
    line-height: 1.35;
}

/* Location list inside story panel */
.loc-sub {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-text);
    opacity: 1;
    margin-top: 1.6rem;
}
.loc-list {
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.loc-list li {
    padding: 10px 0;
    font-size: 0.9rem;
    color: var(--text-soft);
    border-bottom: 1px solid var(--line);
}

/* Collection + parameters */
.status-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6rem 0 2.4rem; }
.params-heading {
    font-family: var(--serif);
    font-weight: 500;
    font-stretch: 62.5%;
    font-size: 1.3rem;
    color: var(--accent-text);
    margin-top: 2.6rem;
    margin-bottom: 1rem;
}

/* Interior + planning logic combined story panel */
.story-subhead {
    font-family: var(--serif);
    font-weight: 500;
    font-stretch: 62.5%;
    font-size: 1.2rem;
    color: var(--accent-text);
    margin: 2rem 0 1.2rem;
}

/* ---- Floor-plan viewer: level → description → plan ---- */
.plan-viewer { margin-top: 3rem; }

.plan-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.plan-level {
    flex: 1 1 0;
    min-width: 8.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 1.15rem 1.2rem;
    background: none;
    border: 0;
    border-left: 1px solid var(--line);
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease, background 0.3s ease;
}
.plan-level:first-child { border-left: 0; }
.plan-level-no {
    font-family: var(--serif);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    transition: color 0.3s ease;
}
.plan-level-name {
    font-size: 0.8rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.plan-level:hover { color: var(--text-primary); }
.plan-level.is-active {
    background: var(--surface);
    color: var(--text-primary);
}
.plan-level.is-active .plan-level-no { color: var(--accent-text); }

.plan-panel { display: none; }
.plan-panel.is-active {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 3rem;
    align-items: start;
    padding-top: 2.8rem;
}
.plan-info h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-stretch: 62.5%;
    font-size: 1.45rem;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0 0 1rem;
}
.plan-desc {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--text-soft);
    margin: 0 0 1.4rem;
}
.plan-area {
    font-family: var(--serif);
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    color: var(--accent-text);
    white-space: nowrap;
    margin: 0;
}
.plan-figure {
    margin: 0;
    /* Plans are transparent PNGs — the light card keeps the linework readable
       against the dark section background. The card is capped so one level
       reads at a glance instead of running past the fold. */
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 1.6rem;
}
.plan-figure a { display: block; }
.plan-figure img {
    display: block;
    width: 100%;
    max-height: 74vh;
    object-fit: contain;
}

@media (max-width: 860px) {
    .plan-level { flex: 1 1 33%; min-width: 0; padding: 0.9rem; }
    .plan-level:nth-child(4) { border-left: 0; }
    .plan-panel.is-active {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        padding-top: 2rem;
    }
    .plan-figure { padding: 0.9rem; }
    .plan-figure img { max-height: 62vh; }
}

/* Materials + grounds two-column */
.two-col-item p { font-size: 0.92rem; line-height: 1.85; color: var(--text-soft); }
.grounds-figure {
    margin-top: 3rem;
    border: 1px solid var(--line);
    overflow: hidden;
}
.grounds-figure img { width: 100%; display: block; aspect-ratio: 21/9; object-fit: cover; }
.grounds-figure figcaption {
    padding: 14px 20px;
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-text);
    background: var(--umber);
    border-top: 1px solid var(--line);
}

/* Day / evening / night rhythm grid */
.rhythm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 2.6rem;
}
.rhythm-item { position: relative; overflow: hidden; aspect-ratio: 3/4; }
.rhythm-item img { width: 100%; height: 100%; object-fit: cover; }
.rhythm-item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(64,54,47,0.9));
}
.rhythm-item figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rhythm-name {
    font-family: var(--serif);
    font-weight: 500;
    font-stretch: 62.5%;
    font-size: 1.3rem;
    color: var(--accent-text);
}
.rhythm-text { font-size: 0.8rem; color: var(--text-soft); line-height: 1.5; }

/* Purchase cards v2 (with tag) */
.buy-tag {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 0.8rem;
}
.buy-note { max-width: 720px; margin-top: 2.4rem !important; }

@media (max-width: 900px) {
    .rhythm-grid { grid-template-columns: 1fr; }
    .two-col { grid-template-columns: 1fr; gap: 40px; }
}

/* ================================================================
   QA fixes — accessibility & contrast
   ================================================================ */

/* Visible keyboard focus. :focus-visible keeps it off for mouse clicks,
   so the design is untouched for pointer users but keyboard users can
   always see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--champagne);
    outline-offset: 3px;
    border-radius: 1px;
}
/* On sand-coloured surfaces the sand outline would disappear — use ink. */
.btn-gold:focus-visible,
.mobile-cta-main:focus-visible,
.lang-switch a.active:focus-visible {
    outline-color: var(--ink);
}

/* Contrast: stone (#8e837e) on the dark card measured 2.43:1 and silver
   4.24:1 — both below the 4.5:1 minimum for small text. This clears it. */
.buy-tag { color: var(--text-soft); }

/* Was 4.23:1 — just under the threshold. */
.teaser-note { color: var(--text-soft); }

/* ================================================================
   Vertical rhythm — headings sat directly on their paragraphs (0px gap)
   because the newer sections don't use the old .section-head wrapper.
   One consistent scale, applied everywhere.
   ================================================================ */

/* label row → heading → lead paragraph → content */
.head-row { margin-bottom: 22px; }

.section h2,
.case-story-panel h2,
.section-plans h2 { margin-bottom: 1.5rem; }

.section-sub,
.story-lead { margin-bottom: 2.4rem; }

/* the lead paragraph is a touch larger than body copy so the eye steps down */
.section-sub {
    font-size: 1rem;
    line-height: 1.85;
    max-width: 66ch;
}

/* blocks that follow running text need air above them */
.facts-table,
.facts-cols,
.status-chips,
.buy-grid,
.rhythm-grid,
.loc-list,
.carousel { margin-top: 2.2rem; }

.section-sub + .facts-table,
.section-sub + .facts-cols { margin-top: 0; }

/* fine print should sit clearly apart from the block it annotates */
.fine-print { margin-top: 2rem; }

/* the facts table: give each row room to breathe */
.facts-row { padding: 16px 0; }
.facts-row dt { margin-bottom: 4px; }
.facts-row dd { line-height: 1.75; }

/* the location list */
.loc-list li { padding: 12px 0; }

/* buttons that end a text block */
.story-cta { margin-top: 2.6rem; }

/* quote inside a story panel */
.luxury-quote { margin: 2rem 0 2.2rem; }
.story-subhead { margin: 2.6rem 0 1.2rem; }

/* two-column materials/grounds block */
.two-col-item h2 { margin-bottom: 1.3rem; }
.two-col { gap: 70px 80px; }

/* ================================================================
   Hero scroll cue — on short viewports there is no room for it at all,
   so hide it rather than let it crowd the headline.
   ================================================================ */
@media (max-height: 720px) {
    .hero-content { padding-bottom: 5rem; }
    .scroll-indicator { display: none; }
}
@media (max-height: 860px) and (min-height: 721px) {
    .scroll-indicator { bottom: 5rem; }
    .hero-content { padding-bottom: 8rem; }
}

/* ================================================================
   Type consistency — three elements were mixing the two stacks:
   the display face must always be paired with the condensed width
   (Salma Pro Medium Narrow / Noto Sans Georgian ExtraCondensed) and
   the body face with the normal width (Medium / Regular).
   ================================================================ */

/* The "SV" monogram is display type — condense it like every other. */
.brand-mark { font-stretch: 62.5%; }

/* The hero wordmark is the largest display element on the site; it was
   on the body stack, so on Georgian it rendered Regular instead of
   ExtraCondensed. */
.building-name { font-family: var(--serif); font-weight: 500; }

/* Pull-quotes are display type too. */
.luxury-quote { font-stretch: 62.5%; font-weight: 500; }

/* Both columns of the materials/grounds block now carry several paragraphs. */
.two-col-item p + p { margin-top: 1.25rem; }

/* Lead block for sections whose intro runs to several paragraphs
   (same voice as .section-sub, but able to hold more than one). */
.section-lead { margin-bottom: 2.4rem; max-width: 66ch; }
.section-lead p { font-size: 1rem; line-height: 1.85; color: var(--text-soft); }
.section-lead p + p { margin-top: 1.25rem; }
.section-lead + .facts-table { margin-top: 0; }

/* Closing line of the value section — settles the argument after the pull-quote. */
.invest-closing {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-soft);
    max-width: 66ch;
    margin-top: 2.2rem;
}

/* Footer disclaimer is now two paragraphs. */
.footer-disclaimer p + p { margin-top: 0.7rem; }

/* The rule between the section number and its label read as a long dash.
   Shorten it so "01 – პროექტი" scans like a short dash, not a rule.
   (The lines framing the pull-quote bands keep their original length —
   there they frame the quote rather than join two words.) */
.head-row .champagne-line { width: 1rem; }
.head-row { gap: 12px; }

/* ================================================================
   Footer — the panorama is the background, and nothing is laid over it.
   Not a wash, not a gradient, not a shadow: the photograph is shown as
   it is. The type could not sit on it either way — hero.jpg holds a
   near-black sky and lit windows at L=0.75 in the same frame, so no
   single text colour clears 4.5:1 anywhere on it (the best band manages
   3.2). So the text takes its own warm-white panel instead, and the two
   never overlap.

   --footer-view is the height of the photograph's clear run. The panel's
   offset reads the same variable, so the crop and the type can't drift
   apart. It is a height rather than 100% for a reason: the source is
   landscape (1.79:1) and the footer is portrait, so `cover` on the full
   height would crop the sides and show nothing but sky, whatever
   object-position said.
   ================================================================ */
.site-footer {
    --footer-view: clamp(12rem, 30vh, 20rem);
    position: relative;
    overflow: hidden;
    background: var(--surface);
    padding-top: 0;
}
.footer-bg {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: var(--footer-view);
    object-fit: cover;
    object-position: center 58%;   /* the villa and the city, not the sky */
    filter: saturate(0.96) sepia(0.10);
    z-index: 0;
}
.site-footer .footer-inner {
    position: relative;
    z-index: 2;
    margin-top: var(--footer-view);
    background: var(--surface);
    padding: 3.2rem 2.4rem 1rem;
}

@media (max-width: 768px) {
    .site-footer {
        --footer-view: clamp(9rem, 24vh, 14rem);
    }
    .site-footer .footer-inner { padding: 2.4rem 1.6rem 1rem; }
}

/* ================================================================
   Project section (01) — give the render more room than the copy.
   The photo carries the pitch here; the text only has to support it.
   ================================================================ */
/* Only above the 1024px stacking breakpoint — below it the section becomes a
   single column and an id-level override here would fight that and squash
   the photo into a sliver. */
@media (min-width: 1025px) {
    #project .case-study-section { grid-template-columns: 2fr 1fr; }
    #project .case-story-panel { padding: 3.5rem 2.6rem; }
    #project .story-inner { max-width: 22rem; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
    /* In this band the copy column would get too narrow to read comfortably. */
    #project .case-study-section { grid-template-columns: 1.6fr 1fr; }
    #project .story-inner { max-width: 24rem; }
}

/* Location list now carries a distance per landmark — set them as a
   two-column row so the figures line up down the right edge. */
.loc-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
}
.loc-name { flex: 1; }
.loc-dist {
    flex-shrink: 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--accent-text);
    white-space: nowrap;
}

/* ================================================================
   Restraint pass — per the website feedback:
   "reduce the overall density", "a lighter, airier visual environment",
   "let the key statements carry the presence".

   Two moves only, deliberately narrow so the visual language is unchanged:
   1. Supporting type steps back — lighter weight, less tracking, lower
      contrast — so headings are the only voice raised.
   2. Bigger pauses between blocks, so one idea reads per screen.
   ================================================================ */

/* -- 1 · quieter supporting type ---------------------------------- */

/* Wide-tracked uppercase labels were the main source of visual noise:
   six of them can appear on one screen. Same information, half the shout. */
.section-label,
.micro,
.eyebrow,
.stat-label,
.image-tag-text {
    font-weight: 500;
    letter-spacing: 0.2em;
    /* Quiet through weight and tracking, never through opacity — fading these
       to 0.85 dropped them to 4.2:1, below the 4.5:1 they have to hold. */
    opacity: 1;
}
.eyebrow { letter-spacing: 0.22em; }

/* The same reason: these all carried an opacity that no longer passes. */
.project-index,
.bg-emerald-deep .project-index,
.section-statement .eyebrow,
#living .facts-row dt,
.live-table .facts-row dt { opacity: 1; }

/* Lead paragraphs introduce, they don't compete with the heading. */
.section-sub,
.story-lead,
.section-lead p {
    font-weight: 400;
    color: var(--text-muted);
}

/* Fine print and notes recede furthest. */
.fine-print,
.story-source,
.loc-note { font-weight: 400; opacity: 1; }

/* Sub-headings inside running text: same face, no extra weight. */
.story-subhead,
.two-col-item h3 { font-weight: 500; letter-spacing: 0.01em; }

/* -- 2 · larger pauses between blocks ----------------------------- */

.section { padding: clamp(88px, 8.5vw, 128px) 0; }
.section-head { margin-bottom: 4rem; }
.head-row { margin-bottom: 1.6rem; }

.section h2,
.case-story-panel h2,
.section-plans h2 { margin-bottom: 1.8rem; }

.section-sub,
.story-lead,
.section-lead { margin-bottom: 3rem; }

.facts-table,
.facts-cols,
.status-chips,
.buy-grid,
.rhythm-grid,
.loc-list,
.plan-viewer,
.carousel { margin-top: 3rem; }

.fine-print { margin-top: 2.6rem; }
.story-cta { margin-top: 3rem; }

/* The story panel beside a photo needs the same generosity. */
@media (min-width: 1025px) {
    .case-story-panel { padding: 4rem 3.6rem; }
}

@media (max-width: 700px) {
    .section { padding: 64px 0; }
    .section-head { margin-bottom: 2.6rem; }
    .section-sub, .story-lead { margin-bottom: 2rem; }
}

/* ================================================================
   Colour pass 2 — warmth
   1. Two photographs are lit cool and sat outside the warm palette;
      a light sepia pulls them back in without re-encoding the files.
   2. Sand is introduced as a third light surface so the light half of
      the page carries some colour instead of reading monochrome.
   ================================================================ */

/* -- 1 · the cool photographs -------------------------------------
   villa-card.jpg (contact) measures R−B = −3, hero.jpg (footer) = −20:
   both are blue-grey next to an umber-and-sand page. */

/* The contact overlay was thin at the top (0.68), which is where the cold
   sky sat. Warmer and denser there, unchanged where the form needs contrast. */
.teaser-overlay {
    background: none;
}

/* -- 2 · sand as a surface ----------------------------------------
   Used only where something is already singled out, so it reads as
   emphasis rather than as another background stripe. */
.plan-level.is-active { background: var(--sand); }
.plan-level.is-active { box-shadow: inset 0 2px 0 var(--champagne); }

.purchase-card.featured,
.buy-card.featured {
    background: linear-gradient(165deg, var(--sand), var(--surface) 70%);
    border-color: var(--champagne);
}

/* The plan card itself: sand edge, near-white field, so the linework keeps
   maximum contrast while the block still belongs to the palette. */
.plan-figure { border-color: var(--champagne-dim); }

/* Interactive states get the accent — the one place champagne can carry
   colour on a light page without becoming unreadable type. */
.btn-outline:hover { border-color: var(--champagne); }
.plan-level:hover { background: var(--sand); }
.loc-list li:hover .loc-dist { color: var(--accent-text); }

/* The header floats transparently over the hero. Where the cover photo shows
   sky, the backdrop measures (193,216,242) and the brand fell to 2.7:1 — the
   one place on the page where a photograph, not a colour choice, broke the
   text. A gradient scrim fixes it without turning the header into a solid bar:
   0.55 puts the type at 5.4:1 over the brightest part of that photo. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--header-h) + 26px);
    background: linear-gradient(180deg,
        rgba(64, 54, 47, 0.55) 0,
        rgba(64, 54, 47, 0.34) 62%,
        rgba(64, 54, 47, 0));
    pointer-events: none;
    z-index: -1;
}
.site-header { position: fixed; }
.site-header.scrolled::before { opacity: 0; }

/* Footer contact line — the two numbers and the address, one step above the
   legal note in weight so they are findable without shouting. */
.footer-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin-bottom: 1.4rem;
}
.footer-contact a { border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.footer-contact a:hover { color: var(--accent-text); border-bottom-color: currentColor; }
.footer-contact span { color: var(--stone); }