/* ================================================================
   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; }
/* Picture-led sections earn more width than the reading columns do. */
.container.container-wide { max-width: 1520px; }
.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;
    /* No backdrop-filter. At 0.96 alpha the blur showed through 4% of the bar
       while costing a full-width filter pass on every scrolled frame — which is
       what made scrolling judder on a phone. */
    background: rgba(78, 66, 60, 0.96);
    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: 0 0 1.6rem;
    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; }
    /* clears the sticky call bar, which only exists at this width */
    .site-footer { padding-bottom: 122px; }
}

@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 {
    /* Same reasoning as the CTA bar: 0.94 alpha leaves the blur 6% of the pixel
       to work with, and the header is on screen for the whole scroll. */
    background: rgba(64, 54, 47, 0.96);
}

/* ---- Hero (reference hero-section) ---- */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    /* On a phone 100vh is the *large* viewport — it ignores the address bar, so
       the hero was taller than the visible screen and the vertically-centred
       block had its top (the h1) pushed off above the fold. 100svh measures the
       viewport with the browser chrome showing, which is what the user actually
       sees on first paint. The 100vh line above stays as the fallback. */
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
}
.hero-section > picture { position: absolute; inset: 0; z-index: 1; }
.hero-image {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Retuned for the studio original, which is a wider frame (1.79:1 against
       the old export's 1.54:1): the sign now spans 5–86% of the width, centred
       on 45%. Anchoring there keeps the whole word in view when a narrow
       viewport crops the sides, instead of slicing it to "VILLA.GE". */
    object-position: 45% 32%;
    z-index: 1;
    /* No scale here: the cover is 1280px wide and already upscaled ~2x on a
       retina hero, so magnifying it further only costs sharpness. */
}
.hero-image-overlay {
    position: absolute; inset: 0;
    /* The photograph stays bright. Earlier this whole band was pushed to
       0.72–0.80 so the type would clear the illuminated sign, which darkened
       the render far more than it needed to. The contrast now comes from a
       scrim confined to the text column (.hero-content::before) instead, so
       the image only carries a light, even wash. */
    background: linear-gradient(180deg,
        rgba(64, 54, 47, 0.30) 0,
        rgba(64, 54, 47, 0.34) 45%,
        rgba(64, 54, 47, 0.70) 82%,
        rgba(64, 54, 47, 0.90));
    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;
    /* An even split, and the picture column keeps the photograph's own
       proportions (see .case-image-panel) so the row grows to fit it whole.
       An `auto` column was tried and is wrong here: two of these sections put
       the story first, so `auto` sized itself to the *text* and left a band of
       dead space beside the picture. */
    grid-template-columns: 1fr 1fr;
    min-height: 62vh;
    overflow: hidden;
    /* A 3:4 column on a very wide monitor would make the section taller than
       two screens; past this the section stops growing and centres. */
    max-width: 1680px;
    margin-inline: auto;
}
.case-image-panel { position: relative; overflow: hidden; min-height: 44vh; }
/* All three photographs in this component are 3:4 portraits, and the panel used
   to be a 1.43 landscape box — `cover` was throwing away 48% of every one of
   them, ceiling and floor both gone. Giving the panel the photograph's own
   proportions leaves cover nothing to crop, with no letterbox bars.
   The height is clamped rather than stretched to the row so a long story column
   cannot inflate the picture; the panel then centres in the taller row. */
.case-image-panel:not(.case-map-panel) {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: auto;
    min-height: 0;
    /* Centred rather than stretched: if a story column ever runs taller than
       the picture, stretching would pull the panel off its ratio and start
       cropping again. */
    align-self: center;
}
.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;
    /* The new frame is a sunset: its brightest band sits at the top, exactly
       where this gradient used to be thinnest. Measured against those pixels,
       0.68 left the section label at 3.8:1. */
    background: linear-gradient(180deg,
        rgba(64, 54, 47, 0.84) 0,
        rgba(78, 66, 60, 0.92) 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-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: 0 0 1.6rem; }
.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,
    .case-study-section.case-study-map { grid-template-columns: 1fr; min-height: auto; }
    /* Stacked, the panel is width-led again: full bleed, height from the ratio. */
    .case-image-panel:not(.case-map-panel) { height: auto; width: 100%; }
    .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;
}
/* The quote sits at the vertical middle of the band, which is exactly where the
   overlay is thinnest and — on a photograph shot towards a window — where the
   picture is brightest. Measured, the champagne type came out at 2.2–2.4:1
   against those pixels, under the 3:1 that 40px text needs.
   Deepening the whole overlay would have fixed it by washing the view out, so
   the darkening is local instead: a soft ellipse behind the line only, fading
   out well before the edges, leaving the rest of the photograph as shot. */
.quote-band-inner::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Wider than the line it sits behind: the inner box shrink-wraps the text,
       so a scrim sized to it had already faded to nothing by the last few
       letters — which is where the worst pixels were. Sized past both ends, a
       much lighter wash is enough: 0.32 over the existing 0.6 composites to
       ~0.73, which measured 3.3:1 — over the 3:1 large text needs, and light
       enough that the view behind it is still the view. */
    width: calc(100% + 300px);
    height: 260px;
    background: radial-gradient(ellipse at center,
        rgba(64, 54, 47, 0.34) 0%,
        rgba(64, 54, 47, 0.30) 60%,
        rgba(64, 54, 47, 0) 92%);
    pointer-events: none;
    z-index: 0;
}
.quote-band-inner > * { position: relative; z-index: 1; }
.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; }

/* Same control language as the gallery's category chips: pills that wrap, with
   the selected one filled rather than merely tinted. */
.plan-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.plan-level {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.62rem 1.15rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    color: var(--text-soft);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.plan-level:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
/* The level number reads as the chip's trailing marker, the way the gallery
   chips carry their count. */
.plan-level-no {
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.72;
}
.plan-level-name { line-height: 1.3; }
.plan-level:hover { border-color: var(--rule); color: var(--text-primary); }
.plan-level.is-active {
    /* The champagne/umber pairing measured 5.6:1, same as the language switcher. */
    background: var(--champagne);
    border-color: var(--champagne);
    color: var(--umber);
}
.plan-level.is-active .plan-level-no { opacity: 0.62; }

/* The levels are slides now: all five sit side by side on a snap track, so a
   finger swipe moves between them and the buttons above just scroll the track. */
.plan-stage { position: relative; margin-inline: -32px; padding-inline: 52px; }
.plan-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    /* Proximity, not mandatory: a mandatory horizontal snap keeps
       re-snapping while the page is scrolled vertically past it, which
       reads as a shudder on a touch screen. */
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.plan-track::-webkit-scrollbar { display: none; }
.plan-panel {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 3rem;
    align-items: start;
    padding-top: 2.8rem;
}
.plan-arrow {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: rgba(28, 23, 20, 0.55);
    border: 1px solid rgba(211, 194, 166, 0.34);
    border-radius: 999px;
    color: #f4f1ea;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.plan-arrow span { position: relative; top: -2px; }
.plan-arrow:hover { background: rgba(28, 23, 20, 0.82); border-color: var(--champagne); }
.plan-arrow:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
.plan-arrow[disabled] { opacity: 0.28; pointer-events: none; }
.plan-arrow-prev { left: 0; }
.plan-arrow-next { right: 0; }
.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) {
    /* Two to a row, like the gallery's chips — which lands the five levels as
       2 · 2 · 1. A grid rather than wrapping, because these labels are whole
       phrases: the shortest still needs 179px against a 171px half-cell, so
       left to wrap on their own they would take a row each. Inside the chip
       the name breaks over two lines instead. */
    .plan-levels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        overflow: visible;
    }
    .plan-level {
        justify-content: space-between;
        align-items: center;
        padding: 0.6rem 0.9rem;
        font-size: 0.66rem;
        line-height: 1.25;
        border-radius: 18px;
    }
    .plan-level-name { hyphens: auto; }
    .plan-level-no { flex: 0 0 auto; }
    /* Same as the gallery: the arrows sit under the slide rather than taking a
       gutter out of a 350px-wide plan. */
    .plan-stage {
        margin-inline: 0;
        padding-inline: 0;
        display: flex;
        flex-wrap: wrap;
    }
    .plan-track { order: 1; flex: 0 0 100%; }
    .plan-arrow {
        order: 2;
        position: static;
        transform: none;
        margin-top: 14px;
        width: 42px;
        height: 42px;
    }
    .plan-arrow-prev { margin-left: auto; }
    .plan-arrow-next { margin-left: 10px; }
    .plan-panel {
        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;
    /* Same card as the floor plans: the site plan is a transparent PNG, and the
       light field keeps its linework readable. It used to be forced into a 21/9
       band with `object-fit: cover`, which cut the drawing off at the villas —
       the plan is very nearly square (0.99), so it is capped by height and
       centred instead of cropped. */
    background: var(--cream);
    border: 1px solid var(--line);
    overflow: hidden;
    /* The card hugs the drawing instead of stretching the full container width,
       which left ~240px of dead cream either side of a square plan. */
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.grounds-figure a { display: block; padding: 1.6rem; }
.grounds-figure img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(74vh, 760px);
    margin: 0 auto;
}
/* Narrow screens: give the drawing back the width the card padding was taking.
   This has to sit after the base rule, not up in the plan-viewer breakpoint —
   same specificity, so source order decides. */
@media (max-width: 860px) {
    .grounds-figure a { padding: 0.9rem; }
}
.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 photograph is the background and stays visible.

   Text laid straight onto a photograph forces a choice: either the image
   is washed out enough for type to survive on it, or the type is
   illegible. At 0.80 the view had a tonal range of 43 out of 255 — it
   had stopped being a picture.

   So the picture is left alone and the type gets its own frosted panel:
   sharp photograph across the whole footer, and a translucent, blurred
   card under the words. The image reads at full strength above, below
   and to the sides of that card; inside it the backdrop is blurred and
   tinted just enough — measured on the pixels actually behind the card.
   ================================================================ */
.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    padding-top: 0;
}
.footer-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    /* Sharp — the only blur is the card's own backdrop, so the photograph
       reads at full definition everywhere it is actually visible. Darkened
       so the light card reads as a lit plane in front of it. */
    transform: scale(1.01);
    filter: brightness(0.72) saturate(1.05);
    z-index: 0;
}
.site-footer .footer-inner {
    position: relative;
    z-index: 2;
    /* The card is inset on every side so the photograph frames it rather
       than merely peeking out above. */
    margin: clamp(5rem, 13vh, 9rem) auto clamp(2.4rem, 6vh, 4rem);
    padding: 2.6rem 2.4rem 1.4rem;
    /* A plain translucent tint — no backdrop-filter, so the photograph
       reads through the card at full sharpness. Deliberately below the
       contrast floor, at the client's request: raising this one value to
       0.80 restores the 4.5:1 standard, nothing else needs to change. */
    background: rgba(251, 250, 247, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Over the photograph the sand accent is too light, so the footer's accent
   darkens a step; everything else runs at full ink. */
.site-footer { --accent-text: #524531; }
.site-footer .footer-label,
.site-footer .footer-loc,
.site-footer .footer-legal,
.site-footer .footer-rights,
.site-footer .footer-top { color: var(--ink); }

@media (max-width: 768px) {
    .site-footer .footer-inner {
        width: calc(100% - 2rem);
        margin: clamp(3.5rem, 10vh, 6rem) auto 2rem;
        padding: 2rem 1.4rem 1.2rem;
    }
}

/* ================================================================
   Footer layout.

   Three earlier attempts each left a hole somewhere, for the same
   reason: blocks of very different length sitting side by side. This
   one is built the other way round — every column is a labelled group
   of roughly equal depth (identity / menu / contact), the menu runs in
   two short sub-columns rather than one long list, and the legal note
   spans the full width instead of leaving the right half bare.
   ================================================================ */
.footer-cols {
    display: grid;
    grid-template-columns: 1.25fr 1.15fr 1fr;
    gap: 2rem 3rem;
    padding-bottom: 1.8rem;
}
.footer-col { display: flex; flex-direction: column; }

/* Group headings — the same quiet uppercase as the section labels. */
.footer-label {
    font-family: var(--sans);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.15rem;
}

.footer-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 1.1rem; }
.footer-loc { margin: 0; font-size: 0.8rem; line-height: 1.9; color: var(--text-muted); }

/* Six links as two columns of three: the block stays as deep as its
   neighbours instead of running twice their length. */
.footer-nav {
    display: block;
    columns: 2;
    column-gap: 2rem;
}
.footer-nav a {
    display: block;
    width: fit-content;
    margin-bottom: 0.62rem;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}
.footer-nav a:hover { color: var(--accent-text); }

.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.62rem; }
.footer-contact a {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
}
.footer-contact a:hover { color: var(--accent-text); border-bottom-color: currentColor; }
/* A quiet link, not a filled button: the page already carries two. */
.footer-contact .footer-cta {
    margin-top: 0.5rem;
    border-bottom: 0;
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.footer-contact .footer-cta:hover { color: var(--ink); }

.footer-legal {
    margin: 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    font-size: 0.72rem;
    line-height: 1.85;
    color: var(--text-muted);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem 2rem;
    margin-top: 1.1rem;
}
.footer-rights { margin: 0; font-size: 0.72rem; letter-spacing: 0.06em; }
.footer-top {
    font-family: var(--sans);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.footer-top:hover { color: var(--accent-text); }

@media (max-width: 900px) {
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .footer-cols { grid-template-columns: 1fr; gap: 1.8rem; }
    .footer-nav { columns: 2; }
}

/* ----------------------------------------------------------------
   Footer type — three roles, nothing else.

   The block had nine sizes and six tracking values in it. Worse, the
   address and the menu links had both inherited a label treatment:
   weight 600, uppercase, 0.25em tracking. Uppercase does nothing for
   Georgian, and that much tracking pulls an address apart into
   separate words, so it read as a heading rather than as information.

   micro  — the group labels only
   body   — everything a visitor reads or clicks
   fine   — legal and copyright
   ---------------------------------------------------------------- */

/* micro */
.footer-label,
.footer-top,
.footer-contact .footer-cta {
    font-family: var(--sans);
    font-size: 0.5625rem;
    font-weight: 500;
    font-stretch: 100%;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.7;
}

/* body */
.footer-loc,
.footer-nav a,
.footer-contact a:not(.footer-cta) {
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 400;
    font-stretch: 100%;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.75;
}
.footer-loc { line-height: 1.85; }

/* fine */
.footer-legal,
.footer-rights {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
}
.footer-legal { line-height: 1.8; }

/* The wordmark keeps the display treatment, just less sprawl. */
.site-footer .brand-name {
    font-size: 0.82rem;
    letter-spacing: 0.26em;
}

/* On phones the hero shows the portrait frame, where the illuminated sign sits
   lower — across the CTA and the scroll cue rather than behind the heading.
   Measured against the sign's brightest pixels those two fell to 4.3 and 3.1,
   so the lower half of the scrim is denser here than on the wide frame. */
@media (max-width: 760px) {
    /* The sign spans 84% of the render's width. A 390px viewport can only hold
       all of it at roughly a fifth of natural scale, which is why the portrait
       frame carries so much sky above the villa — anything shorter and `cover`
       slices the word down to "KYVILLA.GE". Anchor to the bottom so the villa
       stays in view on the wider ratios (small tablets, landscape) where the
       crop runs vertically instead. */
    .hero-image { object-position: 50% 100%; }
    /* Never taller than the screen itself: a fixed 620px floor overflowed the
       visible area on a 667px-tall phone and pushed the heading off the top.
       Portrait only — a landscape phone is barely 390px tall, and letting the
       hero shrink to that would clip the copy against `overflow: hidden`. */
    @media (orientation: portrait) {
        .hero-section { min-height: min(620px, 100svh); }
    }
    .hero-image-overlay {
        /* Rebalanced for the taller frame. The night sky carries the type on its
           own here, so the top stops lift; the villa now sits below every line of
           copy (the last CTA ends at 66%, the sign starts at 82%), so the scrim
           eases off over it instead of crushing it to brown. */
        background: linear-gradient(180deg,
            rgba(64, 54, 47, 0.08) 0,
            rgba(64, 54, 47, 0.14) 45%,
            rgba(64, 54, 47, 0.30) 68%,
            rgba(64, 54, 47, 0.16) 84%,
            rgba(64, 54, 47, 0.34));
    }
    /* The cue landed across the illuminated sign and there is already a fixed
       call-to-action bar at the foot of the screen. */
    .scroll-indicator { display: none; }
}

/* ================================================================
   Gallery — exterior / interior, in the same tab language as the
   floor-plan viewer so the page only teaches the pattern once.

   The set is curated rather than complete: nothing here appears
   elsewhere on the page or repeats a scene the page already shows.

   One tile size for every frame. The renders arrive in three different
   proportions, so each is cropped to a single 3:4 on the way in —
   portrait, because ten of the twelve start that way and cropping them
   to landscape would cut the ceilings that are the point of the
   interiors.
   ================================================================ */
/* Buttons, not a hairline underline. The old tabs were 10px uppercase with a
   2px rule under the active one, which is far too quiet to read as a control —
   the selected category has a filled champagne chip instead. */
.gal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2.6rem;
}
.gal-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.62rem 1.15rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    color: var(--text-soft);
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.gal-tab:hover { border-color: var(--rule); color: var(--text-primary); }
.gal-tab.is-active {
    /* Same pairing as the language switcher, measured at 5.6:1. */
    background: var(--champagne);
    border-color: var(--champagne);
    color: var(--umber);
}
.gal-tab:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
.gal-tab-count {
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.72;
}
.gal-tab.is-active .gal-tab-count { opacity: 0.62; }

/* A horizontal track rather than a wall of tiles: three in view on a desktop,
   one and a peek on a phone. The scrolling is the browser's own, so a finger
   swipe, a trackpad, shift+wheel and the arrow buttons all drive the same
   thing — the buttons only call scrollBy(). */
/* The arrows live in this padding, clear of the pictures. They used to be
   pulled 14px outward from a 46px button, which left two thirds of each one
   sitting on the first and last tile. */
.gal-viewport {
    position: relative;
    margin-top: 2.6rem;
    /* The gutter reaches back across the container's own 32px padding, so the
       arrows cost the pictures 44px rather than 108px of width. The negative
       margin stops at the container's edge, so nothing can overflow the page. */
    margin-inline: -32px;
    padding-inline: 54px;
}
.gal-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Proximity, not mandatory: a mandatory horizontal snap keeps
       re-snapping while the page is scrolled vertically past it, which
       reads as a shudder on a touch screen. */
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* old Edge */
}
.gal-track::-webkit-scrollbar { display: none; }
.gal-item {
    margin: 0;
    position: relative;
    flex: 0 0 calc((100% - 40px) / 3);  /* three across, two 20px gaps */
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--surface);
}
.gal-item[hidden] { display: none; }

/* The arrows sit over the outer edges of the track. Disabled at either end so
   the control never lies about what it will do. */
.gal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: rgba(28, 23, 20, 0.55);
    border: 1px solid rgba(211, 194, 166, 0.34);
    border-radius: 999px;
    color: #f4f1ea;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.gal-arrow span { position: relative; top: -2px; }
.gal-arrow:hover { background: rgba(28, 23, 20, 0.82); border-color: var(--champagne); }
.gal-arrow:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
/* Faded rather than gone: an arrow that disappears at the end of the track
   leaves a hole where a control was a moment ago. */
.gal-arrow[disabled] { opacity: 0.28; pointer-events: none; }
.gal-arrow-prev { left: 0; }
.gal-arrow-next { right: 0; }
.gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s var(--ease);
}
.gal-item:hover img,
.gal-item:focus-visible img { transform: scale(1.04); }
/* Inset, so the ring is not clipped by the track's overflow — the outward ring
   needed padding on the track, and that padding left it resting 4px off zero. */
.gal-item:focus-visible { outline: 2px solid var(--champagne); outline-offset: -3px; }

/* The label sits on the picture rather than under it, so the grid keeps one
   rhythm and the caption still reaches a touch screen, where there is no hover
   state to reveal it. The scrim is only as tall as the line it carries. */
.gal-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2.6rem 14px 12px;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #f4f1ea;
    background: linear-gradient(180deg, rgba(40, 33, 29, 0) 0%, rgba(40, 33, 29, 0.78) 62%, rgba(40, 33, 29, 0.92) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
/* Plans are dark linework on a light card — a light caption would vanish. */
.gal-item.is-plan .gal-caption {
    color: var(--umber-deep);
    background: linear-gradient(180deg, rgba(237, 233, 226, 0) 0%, rgba(237, 233, 226, 0.86) 58%, rgba(237, 233, 226, 0.96) 100%);
}
/* Plans must not be cropped, so they sit whole on their card. */
.gal-item.is-plan img { object-fit: contain; background: var(--cream); }

@media (max-width: 900px) {
    .gal-track { gap: 16px; }
    .gal-item { flex-basis: calc((100% - 16px) / 2); }
}
/* On a phone a side gutter would cost most of the picture's width, so the
   arrows drop below the track instead — the swipe stays the quick way through,
   the buttons are there for anyone who would rather tap. */
@media (max-width: 640px) {
    .gal-viewport {
        margin-inline: 0;
        padding-inline: 0;
        display: flex;
        flex-wrap: wrap;
    }
    .gal-track { order: 1; flex: 0 0 100%; gap: 14px; }
    /* Not quite the full width: the sliver of the next frame at the edge is
       what tells a thumb there is more to the right. */
    .gal-item { flex-basis: 90%; }
    .gal-arrow {
        order: 2;
        position: static;
        transform: none;
        margin-top: 14px;
        width: 42px;
        height: 42px;
    }
    .gal-arrow-prev { margin-left: auto; }
    .gal-arrow-next { margin-left: 10px; }
    .gal-caption { font-size: 0.82rem; }
    .gal-tabs { gap: 8px; }
    .gal-tab { padding: 0.55rem 0.95rem; font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gal-track { scroll-behavior: auto; }
}

/* Lightbox — the full-size render on a near-opaque umber field. */
.lightbox { background: rgba(64, 54, 47, 0.96); }
.lightbox img { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45); }

/* Lightbox: the whole frame, plus a way through the set without closing it. */
.lightbox-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
}
.lightbox-figure img {
    max-width: min(1400px, 92vw);
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
}
.lightbox-caption {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: #efeae1;
}
.lightbox-count {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--champagne);
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    background: rgba(28, 23, 20, 0.55);
    border: 1px solid rgba(211, 194, 166, 0.32);
    border-radius: 999px;
    color: #f4f1ea;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.lightbox-nav:hover { background: rgba(28, 23, 20, 0.8); border-color: var(--champagne); }
.lightbox-nav:focus-visible,
.lightbox-close:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }
.lightbox-nav span { position: relative; top: -3px; }
/* A single-image set has nowhere to go. */
.lightbox.is-single .lightbox-nav { display: none; }

@media (max-width: 700px) {
    .lightbox { padding: 16px; }
    .lightbox-figure img { max-height: 68vh; max-width: 100%; }
    .lightbox-nav { width: 44px; height: 44px; font-size: 1.6rem; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-close { top: 10px; right: 14px; }
}

/* Location list — each landmark carries a distance, set 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;
}