/* NeoLiv palette + Montserrat. Grand Forest's own language: arches, rounded panels, chip labels. */
:root {
    --navy: #102755;
    --navy-2: #17366f;
    --navy-3: #0c1d40;
    --blue: #1e3a8a;
    /* primary */
    --blue-2: #3557a3;
    /* secondary */
    --blue-deep: #172f6e;
    --sky: #9fb3df;
    --mist: #dbe2ef;
    --pale: #eef2fb;
    --off: #f5f7fb;
    --white: #ffffff;
    --ink: #112247;
    --muted: #63708b;
    --line: #d8dfec;
    --line-dark: rgba(255, 255, 255, .14);
    --avail: #2f9e5f;
    --hold: #a9c8f5;   /* master plan: on hold = light blue */
    --sold: #295ec9;   /* master plan: sold = theme blue */
    /* green is used for master-plan plots only */
    --danger: #c2412d;
    --sans: Montserrat, Arial, sans-serif;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --gutter: clamp(16px, 5vw, 64px);
    --inset: clamp(8px, 1.2vw, 16px);
    --sec-y: clamp(56px, 6.5vw, 96px);
    --blk: clamp(32px, 4vw, 56px);
    --r-xl: clamp(22px, 2.6vw, 36px);
    --r-lg: 22px;
    --r-md: 16px;
    --arch: 999px 999px 24px 24px;
    --shadow: 0 18px 44px rgba(16, 39, 85, .12);
    --mbar-h: 0px;
    /* aliases used by the hero, Why and master-plan blocks */
    --cobalt: var(--blue);
    --cobalt-deep: var(--blue-deep);
    --ivory: #f5f7fb;
    --paper: #ffffff;
    --sand: var(--pale);
    --serif: var(--sans);
    --radius: 18px;
    --r-ctl: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
em { font-style: normal; color: var(--blue-2); }
.on-dark em { color: var(--sky); }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* Sections: white bands and inset rounded panels (pale or navy), one vertical rhythm for all */
.sec { position: relative; padding: var(--sec-y) 0; }
.panel { margin: 0 var(--inset); border-radius: var(--r-xl); background: var(--pale); }
.panel--navy { background: var(--navy); color: var(--white); }

/* Section intro: chip label, heading, then the line of text underneath */
.head { max-width: 720px; margin-bottom: var(--blk); }
.head--c { margin-left: auto; margin-right: auto; text-align: center; }
.label {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px 6px 10px;
    border-radius: 999px; background: var(--pale); color: var(--blue-2); font-size: 12px; font-weight: 600;
}
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.panel .label { background: var(--white); }
.on-dark .label { background: rgba(255, 255, 255, .1); color: var(--sky); }
.h2 { font-size: clamp(28px, calc(3.5vw - 2px), 46px); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; }
.lead { margin-top: 16px; font-size: clamp(15px, 1.1vw, 17px); color: var(--muted); max-width: 58ch; }
.head--c .lead { margin-left: auto; margin-right: auto; }
.on-dark .lead { color: rgba(255, 255, 255, .7); }
.fine { margin-top: 18px; font-size: 12px; color: var(--muted); }
/* Plot bands & pricing: one compact table */
.ptable__wrap { border: 1px solid var(--line); border-radius: 18px; background: var(--off); overflow: hidden; }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { padding: 15px clamp(10px, 1.6vw, 22px); border-bottom: 1px solid rgba(30, 58, 138, .12); text-align: left; vertical-align: middle; }
.ptable tbody tr:last-child > * { border-bottom: 0; }
.ptable thead th { padding-top: 12px; padding-bottom: 12px; font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: rgba(30, 58, 138, .06); }
.ptable tbody th b { display: block; font-size: calc(clamp(16px, 1.2vw, 20px) + 1px); font-weight: 600; line-height: 1.2; color: var(--blue); }
.ptable tbody th b small { font-size: .72em; font-weight: 500; }
.ptable tbody th > span:not(.ptable__plot) { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; line-height: 1.35; color: var(--muted); }
.ptable__price { font-size: calc(clamp(16px, 1.2vw, 20px) + 1px); font-weight: 600; line-height: 1.2; color: var(--blue); white-space: nowrap; }
.ptable__price em { display: block; width: max-content; margin-top: 5px; padding: 3px 7px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 9.8px; font-weight: 600; font-style: normal; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
/* "Request price": prices are never shown; this opens the lead form for the band */
.plock__btn { display: flex; align-items: center; gap: 6px; width: max-content; margin: 0; padding: 5px 10px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .25s; }
.plock__btn svg { width: 12px; height: 12px; flex: none; }
.plock__btn .pl-sm { display: none; }
.plock__btn:hover { background: var(--blue-2); }
.ptable__avail { font-size: 14.6px; font-weight: 600; line-height: 1.2; color: var(--blue-2); white-space: nowrap; }
.ptable__go { text-align: right !important; }
.ptable__go button { padding: 8px 14px; border: 1px solid rgba(30, 58, 138, .35); border-radius: 999px; background: #fff; color: var(--blue); font-size: 11.9px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: background-color .25s, color .25s; }
.ptable__go button:hover { background: var(--blue); color: #fff; }
.ptable tbody tr { transition: background-color .2s; }
.ptable tbody tr:hover { background: rgba(30, 58, 138, .05); }
.ptable__cta { margin-top: 28px; display: flex; justify-content: center; }
@media (max-width: 767.98px) {
    iframe{
        height: 400px;
    }
    .ptable th, .ptable td { padding: 12px 8px; }
    .ptable th:first-child, .ptable td:first-child { padding-left: 14px; }
    /* phones: no "See plots" column; Plot size · Price · Available */
    .ptable th:last-child, .ptable td:last-child { display: none; }
    .ptable th:nth-last-child(2), .ptable td:nth-last-child(2) { padding-right: 14px; }
    .ptable tbody th > span:not(.ptable__plot) { display: none; }
    .ptable tbody th b, .ptable__avail { white-space: nowrap; }
    .ptable thead th { font-size: 10.5px; letter-spacing: .1em; }
    .ptable__price .plock__btn { padding: 6px 9px; font-size: 10px; letter-spacing: .05em; }
    .ptable__price .plock__btn .pl-lg { display: none; }
    .ptable__price .plock__btn .pl-sm { display: inline; }
}
.on-dark .fine { color: rgba(255, 255, 255, .5); }

/* Buttons: pill with an arrow badge. Video call is always the filled primary. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 8px 0 24px;
    border-radius: 999px; border: 1px solid transparent; background: var(--blue); color: #fff;
    font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .3s var(--ease), color .3s, border-color .3s;
}
.btn::after {
    content: ""; width: 38px; height: 38px; border-radius: 50%; flex: none; background: #fff center / 16px no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
    transition: transform .35s var(--ease);
}
.btn:hover { background: var(--blue-deep); }
.btn:hover::after { transform: rotate(45deg); }
.btn svg { width: 18px; height: 18px; flex: none; margin-right: -4px; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost::after { background-color: var(--pale); }
.btn--ghost:hover { background: var(--white); border-color: var(--blue); }
.on-dark .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
.on-dark .btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.btn--plain { padding: 0 24px; }
.btn--plain::after { display: none; }
.btn--sm { min-height: 44px; padding: 0 6px 0 18px; font-size: 13px; }
.btn--sm::after { width: 32px; height: 32px; background-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ---------- Header: floating white capsule, chip-style active link ---------- */
.hdr { position: fixed; inset: 12px 0 auto; z-index: 60; pointer-events: none; }
.hdr__in {
    pointer-events: auto; display: flex; align-items: center; gap: 16px; width: calc(100% - 2 * var(--inset) - 8px); max-width: 1240px; height: 64px;
    margin: 0 auto; padding: 0 8px 0 22px; border-radius: 999px;
    /* frosted glass */
    background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 32px rgba(16, 39, 85, .14), inset 0 1px 0 rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: height .4s var(--ease), background .4s, box-shadow .4s;
}
.hdr.scrolled .hdr__in { height: 58px; background: rgba(255, 255, 255, .9); box-shadow: 0 10px 30px rgba(16, 39, 85, .12), inset 0 1px 0 rgba(255, 255, 255, .8); }
.logo { display: flex; flex-direction: column; flex: none; line-height: 1; }
.logo img { width: 104px; height: auto; }
.logo span { margin-top: 5px; font-size: 8.5px; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--blue); }
.nav { display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 999px; background: rgba(238, 242, 251, .6); font-size: 13px; font-weight: 500; }
.nav a { padding: 8px 14px; border-radius: 999px; color: var(--blue); font-weight: 600; transition: background .25s, color .25s; }
.nav a:hover { color: var(--navy); background: rgba(255, 255, 255, .7); }
.nav a.active { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(30, 58, 138, .3); }
.hdr .btn { min-height: 48px; font-size: 13px; padding-left: 18px; }
.hdr .btn::after { width: 34px; height: 34px; }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .6); position: relative; }
.burger span { position: absolute; left: 15px; right: 15px; height: 1.6px; background: var(--ink); transition: transform .35s var(--ease); }
.burger span:nth-child(1) { top: 20px; }
.burger span:nth-child(2) { top: 27px; }
.menu-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.mnav {
    position: fixed; inset: 0; z-index: 55; background: var(--pale); display: flex; flex-direction: column; justify-content: center;
    padding: 96px var(--gutter) calc(32px + var(--mbar-h)); gap: 4px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .35s, transform .35s var(--ease), visibility 0s .35s;
}
.menu-open .mnav { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s var(--ease); }
.mnav a { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: clamp(20px, 5.5vw, 26px); font-weight: 500; letter-spacing: -.02em; }
.mnav a small { font-size: 12px; font-weight: 600; color: var(--blue); }

/* Full glass navbar with white text: clear glass over the hero, navy-tinted glass once scrolled */
.hdr__in { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 8px 32px rgba(9, 22, 50, .22), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hdr.scrolled .hdr__in { background: rgba(255, 255, 255, .96); border-color: rgba(16, 39, 85, .06); box-shadow: 0 10px 30px rgba(16, 39, 85, .1); }
.logo img { filter: brightness(0) invert(1); }
.logo span { color: #fff; opacity: .85; }
.nav { background: none; border: 0; padding: 0; }
.nav a { color: rgba(255, 255, 255, .88); font-weight: 500; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.nav a.active { background: #fff; color: var(--blue); box-shadow: 0 2px 10px rgba(9, 22, 50, .2); font-weight: 600; }
.hdr .btn { background: #fff; color: var(--blue); }
.hdr .btn:hover { background: var(--pale); }
.hdr .btn::after { background-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); }
.burger { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); }
.burger span { background: #fff; }
/* after scrolling: solid white bar, blue text, colour logo */
.hdr.scrolled .logo img { filter: none; }
.hdr.scrolled .logo span { color: var(--blue); opacity: 1; }
.hdr.scrolled .nav a { color: var(--blue); }
.hdr.scrolled .nav a:hover { color: var(--navy); background: var(--pale); }
.hdr.scrolled .nav a.active { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(30, 58, 138, .3); }
.hdr.scrolled .btn { background: var(--blue); color: #fff; }
.hdr.scrolled .btn:hover { background: var(--blue-deep); }
.hdr.scrolled .btn::after { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); }
.hdr.scrolled .burger { background: var(--pale); border-color: transparent; }
.hdr.scrolled .burger span { background: var(--ink); }
.menu-open .hdr.scrolled .hdr__in { background: transparent; border-color: transparent; box-shadow: none; }
.menu-open .hdr.scrolled .logo img { filter: brightness(0) invert(1); }
.menu-open .hdr.scrolled .logo span { color: #fff; }
/* Project logo: white over the hero / menu, navy once the bar turns white */
.hdr .logo--gf { display: block; position: relative; line-height: 0; }
.hdr .logo--gf img { width: auto !important; height: 42px; filter: none !important; transition: height .4s var(--ease), opacity .3s; }
.hdr .logo--gf .logo__d { position: absolute; left: 0; top: 0; opacity: 0; }
.hdr.scrolled .logo--gf img { height: 38px; }
.hdr.scrolled .logo--gf .logo__w { opacity: 0; }
.hdr.scrolled .logo--gf .logo__d { opacity: 1; }
.menu-open .hdr.scrolled .logo--gf .logo__w { opacity: 1; }
.menu-open .hdr.scrolled .logo--gf .logo__d { opacity: 0; }
@media (max-width: 720px) { .hdr .logo--gf img { height: 36px; } .hdr.scrolled .logo--gf img { height: 32px; } }
.menu-open .hdr.scrolled .burger { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.menu-open .hdr.scrolled .burger span { background: #fff; }
/* mobile menu matches: navy glass panel, white links */
.mnav { background: rgba(16, 39, 85, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.mnav a { color: #fff; border-bottom-color: rgba(255, 255, 255, .14); }
.mnav a small { color: var(--sky); }
.menu-open .hdr__in { background: transparent; border-color: transparent; box-shadow: none; }

/* ---------- Hero: exactly one screen on every device ---------- */
.hero {
    position: relative; height: 100vh; height: 100svh; min-height: 0; color: var(--ivory); background: var(--navy-3);
    display: flex; flex-direction: column; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media img { animation: drift 22s ease-out forwards; transform-origin: 55% 60%; }
@keyframes drift { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero__media video { opacity: 0; transition: opacity 1.2s; }
.hero__media video.playing { opacity: 1; }
.hero__shade {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(12, 29, 64, .6) 0%, rgba(12, 29, 64, 0) 26%),
        linear-gradient(90deg, rgba(12, 29, 64, .72) 0%, rgba(12, 29, 64, .25) 55%, rgba(12, 29, 64, 0) 100%),
        linear-gradient(0deg, rgba(12, 29, 64, .9) 0%, rgba(12, 29, 64, 0) 45%);
}
.hero__body {
    position: relative; z-index: 2; flex: 1; min-height: 0; width: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: 96px; padding-bottom: calc(clamp(20px, 3.5vh, 40px) + var(--mbar-h));
}
.hero__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; align-items: end; }
.hero h1 { font-family: var(--serif); font-size: clamp(42px, min(8vw, 11vh), 120px); line-height: .95; letter-spacing: -.015em; max-width: 11ch; }
.hero h1 em { font-weight: 500; }
.hero__sub { margin-top: clamp(12px, 2vh, 22px); font-size: clamp(14px, 1.2vw, 17px); max-width: 46ch; color: rgba(255, 255, 255, .82); }
.hero__cta { margin-top: clamp(16px, 3vh, 32px); }
.hero .chip-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px; border-radius: var(--r-ctl);
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(12, 29, 64, .35); color: var(--ivory);
    font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .chip-btn[aria-pressed="true"] { background: var(--ivory); color: var(--navy); }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.eq i { width: 3px; height: 14px; background: currentColor; border-radius: 2px; transform-origin: bottom; transform: scaleY(.29); }
[aria-pressed="true"] .eq i { animation: eq .9s ease-in-out infinite alternate; }
[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.3s; }
[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { to { transform: scaleY(1); } }   /* transform, not height: no layout per frame */

/* ---------- Why: tall image cards ---------- */
.why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; color: var(--ivory); background: var(--navy); isolation: isolate; }
.why-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); z-index: -2; }
.why-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 29, 64, .1) 25%, rgba(12, 29, 64, .92) 100%); }
.why-card:hover img { transform: scale(1.06); }
.why-card__body { position: absolute; inset: auto 0 0; padding: clamp(20px, 2.2vw, 30px); }
.why__sub { margin: 18px 0 10px; font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; letter-spacing: -.01em; color: var(--blue); }
.head .lead + .lead { margin-top: 10px; }
/* desktop: card titles stay on one line and descriptions reserve two lines, so all three cards line up */
@media (min-width: 1081px) {
    .why-card h3 { white-space: nowrap; font-size: clamp(19px, 1.55vw, 22px); }
    .head--wide { max-width: none; }     /* section heading on one line */
    .head--wide .lead { max-width: 760px; }
    .why-card p { line-height: 1.6; min-height: 3.2em; }   /* exactly two lines reserved in every card, so titles and text line up */
}
.why-card__no { font-family: var(--serif); font-size: 18px; color: var(--sky); }
.why-card h3 { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 38px); margin: 6px 0 10px; }
.why-card p { font-size: 14.5px; color: rgba(255, 255, 255, .8); }
.why-card ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.why-card li { font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .3); }


@keyframes chProg { to { width: 100%; } }

.hero .eyebrow { display: block; margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sky); }
.hero h1 { font-weight: 300; letter-spacing: -.035em; line-height: 1.02; }
.hero h1 em { font-weight: 300; }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.why-card h3 { font-weight: 400; letter-spacing: -.02em; }
.why-card h3 { font-size: clamp(22px, 2vw, 28px); }
.why-card__no { font-size: 12px; font-weight: 600; letter-spacing: .12em; }

/* ---------- Master plan ---------- */
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--sand); color: var(--navy-2); }
.tag.available { background: rgba(53, 87, 163, .12); color: var(--cobalt-deep); }
.tag.hold { background: rgba(159, 179, 223, .3); color: var(--navy-2); }
.tag.sold { background: rgba(219, 226, 239, .6); color: var(--muted); }

/* Master plan UX fixes: nothing sticky, no nested scroll areas, map always fits its column */

/* ---------- Pricing: cards with a to-scale plot footprint ---------- */
.pblock { display: none; margin-top: var(--blk); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 40px); background: var(--pale); }
[data-purpose="investment"] .pblock--invest, [data-purpose="weekend"] .pblock--weekend { display: block; }
.pblock h3 { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 10px; }
.pblock p { color: var(--muted); max-width: 70ch; }
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.steps4 div { background: var(--white); border-radius: var(--r-md); padding: 18px; }
.steps4 b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.04em; color: var(--blue); }
.steps4 span { font-size: 13px; color: var(--muted); }
/* Payment plan: proportional bar + milestone cards with live amounts */
.plan { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.plan__foot { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.plan__foot .plan__total { margin-top: 0; flex: 0 1 380px; }
.pblock--invest .plan__foot .btn-row { margin-top: 0; }
@media (max-width: 720px) { .plan__foot .plan__total { flex: 1 1 100%; } .plan__foot .btn-row .btn { flex: 1 1 100%; justify-content: space-between; } }
.plan__bar { display: flex; gap: 4px; height: 12px; margin-bottom: 14px; }
.plan__bar i { display: block; height: 100%; border-radius: 999px; }
.plan__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.plan__steps li { position: relative; padding: 18px 16px; border-radius: var(--r-md); background: var(--white); display: flex; flex-direction: column; gap: 4px; min-height: 168px; }
.plan__steps li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-bottom: 10px; }
.plan__pct { font-size: clamp(28px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--navy); }
.plan__when { font-size: 13px; color: var(--muted); line-height: 1.4; }
.plan__note { margin-top: 12px; font-size: 12px; color: var(--muted); }

.pblock__list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; font-size: 14px; }
.pblock__list li { padding: 12px 14px 12px 40px; position: relative; border-radius: 12px; background: var(--white); }
.pblock__list li::before { content: ""; position: absolute; left: 14px; top: 17px; width: 14px; height: 14px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 9px no-repeat; }
.pblock .btn-row { margin-top: 24px; }

/* ---------- Video call steps ---------- */
.vc { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.vc .head { margin-bottom: 28px; }
.vgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; counter-reset: v; }
.vgrid li { position: relative; padding: 22px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); }
.vgrid b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue); font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.vgrid h4 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.vgrid p { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .68); }
.vc__live { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.vc__live i { width: 8px; height: 8px; border-radius: 50%; background: #d64536; box-shadow: 0 0 0 4px rgba(214, 69, 54, .25); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* Video-call panel on pale */
#videocall .vgrid li { background: var(--white); border: 0; }
#videocall .vgrid b { color: #fff; }
#videocall .vgrid p, #videocall .vc__live { color: var(--muted); }
.panel + .panel { margin-top: var(--inset); }

/* ---------- Amenities: numbered list + large image ---------- */
.am-wrap { display: grid; grid-template-columns: 340px 1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.tabs { display: flex; flex-direction: column; }
.tabs button {
    display: grid; grid-template-columns: 44px 1fr; align-items: baseline; text-align: left; gap: 8px;
    padding: 18px 0; border: 0; border-bottom: 1px solid var(--line-dark); background: none; color: rgba(255, 255, 255, .55); transition: color .3s;
}
.tabs button:first-child { border-top: 1px solid var(--line-dark); }
.tabs button small { font-family: var(--serif); font-size: 18px; }
.tabs button span { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; }
.tabs button[aria-selected="true"] { color: var(--ivory); }
.tabs button[aria-selected="true"] small { color: var(--sky); }
.am { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 480px; color: var(--ivory); isolation: isolate; }
.am img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: amIn .8s var(--ease); }
@keyframes amIn { from { opacity: .3; transform: scale(1.04); } }
.am::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(12, 29, 64, .9)); }
.am__copy { position: absolute; inset: auto 0 0; padding: clamp(20px, 3vw, 36px); }
.am__copy h3 { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 40px); margin-bottom: 8px; }
.am__copy p { color: rgba(255, 255, 255, .8); max-width: 52ch; }
.am__chips { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.am__chips li { font-size: 12.5px; padding: 7px 13px; border-radius: 99px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.am__tag { position: absolute; right: 16px; top: 16px; font-size: 11px; background: rgba(12, 29, 64, .55); padding: 4px 10px; border-radius: 99px; }

.tabs button span { font-weight: 400; letter-spacing: -.02em; font-size: clamp(19px, 1.7vw, 24px); }
.tabs button small { font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.am__copy h3 { font-weight: 400; letter-spacing: -.02em; }
.am-wrap .tabs button { border-radius: 0; }

.am-wrap .tabs button { position: relative; }
.am-wrap .tabs button::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--sky); }
.am-wrap.auto.tick .tabs button[aria-selected="true"]::after { animation: chProg 6s linear forwards; }
@media (max-width: 1024px) { .am-wrap .tabs button::after { display: none; } }
/* ---------- Location: map with a floating drive-time card ---------- */
.loc { position: relative; }
.map { position: relative; height: clamp(420px, 46vw, 600px); border-radius: var(--r-lg); overflow: hidden; background: var(--mist); }
.drives { position: absolute; right: 16px; top: 16px; bottom: 16px; width: min(380px, 40%); z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); overflow-y: auto; }
/* Imagicaa: highlighted landmark next door */
.drive--hl { grid-template-columns: 72px 1fr auto; gap: 14px; padding: 10px 14px 10px 10px; background: var(--navy); color: #fff; margin-bottom: 4px; }
.drive--hl:hover { background: var(--navy-2); }
.drive--hl img { width: 72px; height: 60px; border-radius: 10px; object-fit: cover; }
.drive--hl small { color: var(--sky) !important; }
.drive--hl b { font-size: 17px; }
.drive--hl em { display: block; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .65); }
.drive--hl .t { color: #fff !important; }
.drive--hl .t span { color: rgba(255, 255, 255, .65) !important; }
.drive--hl[aria-pressed="true"] { background: var(--blue); }
.hero__sub strong { color: #fff; font-weight: 600; }
.drives__t { padding: 6px 8px 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.drive { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--off); transition: background .2s; }
.drive:hover { background: var(--pale); }
.drive small { display: block; font-size: 11.5px; color: var(--muted); }
.drive b { font-size: 15px; font-weight: 600; }
.drive .t { font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--navy); }
.drive .t span { font-size: 11px; font-weight: 600; letter-spacing: 0; margin-left: 3px; color: var(--muted); }
.drive[aria-pressed="true"] { background: var(--navy); color: #fff; }
.drive[aria-pressed="true"] small, .drive[aria-pressed="true"] .t span { color: rgba(255, 255, 255, .65); }
.drive[aria-pressed="true"] .t { color: #fff; }
.drives .btn { margin-top: auto; justify-content: space-between; }
.drives .fine { margin: 4px 8px 0; }

/* Location, redesigned: map and panel side by side, Imagicaa banner, divided drive list */
.loc { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.loc .map { height: auto; min-height: 560px; }
.drives { position: static; width: auto; inset: auto; padding: 18px; gap: 0; border-radius: var(--r-lg); background: var(--white); box-shadow: none; overflow: visible; }
.drives__t { padding: 18px 4px 6px; font-size: 12px; letter-spacing: .04em; }
.drive { position: relative; grid-template-columns: 1fr auto; padding: 14px 6px 14px 14px; border-radius: 0; background: none; border-bottom: 1px solid var(--line); }
.drive:hover { background: var(--off); }
.drive::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: transparent; transition: background .25s; }
.drive[aria-pressed="true"] { background: var(--pale); color: var(--ink); }
.drive[aria-pressed="true"]::before { background: var(--blue); }
.drive[aria-pressed="true"] small, .drive[aria-pressed="true"] .t span { color: var(--muted); }
.drive[aria-pressed="true"] .t { color: var(--blue); }
.drives .btn { margin-top: 18px; }
.drive--hl { display: block; position: relative; height: 150px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; color: #fff; background: var(--navy); }
.drive--hl::before { display: none; }
.drive--hl:hover { background: var(--navy); }
.drive--hl img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; transition: transform 1s var(--ease); }
.drive--hl:hover img { transform: scale(1.05); }
.drive--hl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 29, 64, .05) 30%, rgba(12, 29, 64, .85)); }
.drive--hl .hl__txt { position: absolute; left: 16px; bottom: 14px; z-index: 1; text-align: left; }
.drive--hl .t { position: absolute; right: 16px; bottom: 14px; z-index: 1; color: #fff !important; }
.drive--hl[aria-pressed="true"] { background: var(--navy); outline: 2px solid var(--blue); outline-offset: 2px; }
.drive--hl[aria-pressed="true"] .t { color: #fff !important; }
.drive--hl, .drive--hl[aria-pressed="true"] { color: #fff; }
.drive--hl b { color: #fff; font-size: 18px; }
.drive--hl small { color: var(--sky) !important; }
.drive--hl em { display: block; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .75); }
@media (max-width: 1024px) {
    .loc { grid-template-columns: 1fr; }
    .loc .map { min-height: 340px; }
    .drives { margin-top: 0; background: var(--white); }
}
@media (max-width: 720px) { .loc .map { min-height: 300px; } .drive--hl { height: 130px; } }

/* ---------- Compare: highlighted Grand Forest column ---------- */

/* ---------- Gallery + progress ---------- */
/* heading left, filter tabs right on one row */
.gal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: var(--blk); }
.gal-head .head { margin-bottom: 0; }
.gal-tabs { display: inline-flex; flex: none; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.gal-tabs button { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: none; color: var(--muted); transition: background .2s, color .2s; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.gal-tabs button[aria-pressed="true"] { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.gal { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 10px; }
.gal button { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--sand); }
.gal button img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gal button:hover img { transform: scale(1.05); }
/* enlarge icon: a small glass button in the corner; turns brand blue on hover */
.gal button::after { content: ""; position: absolute; right: 10px; top: 10px; z-index: 1; width: 36px; height: 36px; border-radius: 999px; background: rgba(12, 29, 64, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .35); transition: transform .3s var(--ease), background-color .3s; }
.gal button:hover::after, .gal button:focus-visible::after { transform: scale(1.12); background-color: #295ec9; }
.gal button span { position: absolute; left: 10px; bottom: 10px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(12, 29, 64, .6); padding: 4px 10px; border-radius: 99px; }
.gal { grid-auto-flow: dense; }
.gal.is-filtered button { grid-column: auto; grid-row: auto; }
.gal.is-filtered { grid-auto-rows: 240px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Artist's impressions tab: one large image with four beside it */
.gal.is-filtered.is-render { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; }
.gal.is-render button:not([hidden]):first-of-type { grid-column: span 2; grid-row: span 2; }
.gal .w2 { grid-column: span 2; }
.gal .h2 { grid-row: span 2; }
/* Site progress: line fills, milestones appear in turn, overall bar counts up */
/* Site progress markers: the NeoLiv infinity mark instead of dots */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; }
.lightbox::backdrop { background: rgba(8, 18, 40, .92); }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 12px; margin: 0 auto; }
.lightbox p { color: #fff; text-align: center; margin-top: 10px; font-size: 14px; }
.lightbox__close { position: fixed; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; font-size: 26px; line-height: 1; }


/* ---------- About ---------- */


/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.faq-side { position: sticky; top: 100px; }
.help { margin-top: 8px; padding: 24px; border-radius: var(--r-lg); background: var(--navy); color: #fff; }
.help h3 { font-size: 20px; margin-bottom: 8px; }
.help p { font-size: 14px; color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
.faqs { display: grid; gap: 8px; }
.faqs details { border-radius: var(--r-md); background: var(--off); transition: background .25s; }
.faqs details[open] { background: var(--pale); }
.faqs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-size: 16px; font-weight: 600; min-height: 60px; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--white) center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); transition: transform .3s var(--ease); }
.faqs details[open] summary::after { transform: rotate(45deg); }
.faqs details > div { padding: 0 20px 20px; color: var(--muted); max-width: 70ch; font-size: 15px; }
.faqs details > div p + p { margin-top: 10px; }
.faq-badge { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 99px; background: var(--white); font-size: 10.5px; font-weight: 700; color: var(--blue); vertical-align: middle; }

/* ---------- Final CTA ---------- */
.cta-band { position: relative; overflow: hidden; color: #fff; background: var(--navy); isolation: isolate; }
.cta-band > img { position: absolute; top: 0; bottom: 0; right: 0; width: 46%; height: 100%; object-fit: cover; z-index: -2; border-radius: 999px 0 0 999px; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--navy) 50%, rgba(16, 39, 85, 0) 72%); }
.cta-band .wrap { max-width: 1280px; }
.cta-band .head { max-width: 600px; margin-bottom: 0; }
.cta-band h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; font-size: 15px; }
.ticks li { display: flex; gap: 10px; align-items: center; color: rgba(255, 255, 255, .85); }
.ticks svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--sky); }
.cta-band .btn-row { margin-top: 30px; }

/* ---------- Footer ---------- */
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Floating actions + mobile bar ---------- */
.frail { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; gap: 10px; align-items: center; transition: transform .4s var(--ease), opacity .4s; }
.frail.hide { transform: translateY(120%); opacity: 0; pointer-events: none; }
.frail .btn { box-shadow: 0 12px 30px rgba(30, 58, 138, .35); }
.round { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 26px rgba(16, 39, 85, .25); }
.round svg { width: 24px; height: 24px; }
.round--wa { background: var(--navy); }
/* WhatsApp: sticky on the right edge, rounded-square icon; the label slides out on hover */
.wa-float {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 50;
    display: flex; align-items: center; flex-direction: row-reverse; height: 54px; padding: 0 13px; gap: 0;
    border-radius: 16px 0 0 16px; background: #25d366; color: #fff; box-shadow: -6px 10px 26px rgba(37, 211, 102, .35);
    transition: gap .35s var(--ease), padding .35s var(--ease), box-shadow .3s;
}
.wa-float svg { width: 28px; height: 28px; flex: none; }
.wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 14px; font-weight: 600; opacity: 0; transition: max-width .4s var(--ease), opacity .3s; }
.wa-float:hover, .wa-float:focus-visible { gap: 10px; padding: 0 16px 0 18px; box-shadow: 0 14px 34px rgba(37, 211, 102, .45); }
.wa-float:hover span, .wa-float:focus-visible span { max-width: 160px; opacity: 1; }
.mbar { display: none; }

/* ---------- Enquiry sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(9, 22, 50, .55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.sheet.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s; }
.sheet__card { position: relative; width: min(620px, 100%); max-height: min(92vh, 900px); display: flex; flex-direction: column; background: var(--white); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, .3); transform: translateY(24px); transition: transform .4s var(--ease); }
.sheet.open .sheet__card { transform: none; }
.sheet__top { padding: 22px 70px 16px 26px; background: var(--pale); flex: none; }   /* right padding keeps the title clear of the close button */
.sheet__top .eyebrow { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--blue); }
.sheet__top h2 { font-size: clamp(24px, 3vw, 30px); }
.sheet__close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--white); font-size: 22px; line-height: 1; z-index: 2; }
.prog { display: flex; gap: 6px; margin-top: 14px; }
.prog i { flex: 1; height: 4px; border-radius: 4px; background: var(--white); transition: background .3s; }
.prog i.on { background: var(--blue); }
.sheet__body { padding: 22px 26px; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.sheet__foot { padding: 14px 26px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 10px; flex: none; background: var(--white); }
.sheet__foot .btn { flex: 1; padding: 0 24px; }
.sheet__foot .btn::after { display: none; }
.sheet__foot .btn--back { flex: 0 0 auto; background: var(--off); color: var(--ink); }
.sheet__foot .btn--back:hover { background: var(--pale); }
.sheet__ctx { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sheet__ctx:empty { display: none; }
.step { display: none; }
.step.on { display: grid; gap: 20px; animation: stepIn .35s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(12px); } }
.f { display: grid; gap: 8px; }
.f > label, .f > .f__l { font-size: 13px; font-weight: 600; }
.opt { font-weight: 500; color: var(--muted); }
.req { color: var(--danger); }
.inp, .sel { width: 100%; min-height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--white); font-size: 16px; transition: border-color .2s; }
.inp:focus, .sel:focus { outline: none; border-color: var(--blue); }
.sel { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 40px; }
.phone-open-div { display: block; }
.otp-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.otp-row .btn { min-height: 54px; border-radius: 14px; padding: 0 18px; }
.otp-row .btn::after { display: none; }
.otp-note { font-size: 12px; color: var(--muted); }
.otp-note.ok { color: var(--blue); font-weight: 600; }
.otp-demo { font-size: 12px; background: var(--pale); border-radius: 10px; padding: 8px 12px; }
.f.invalid .inp, .f.invalid .sel { border-color: var(--danger); }
.err { display: none; font-size: 12.5px; color: var(--danger); font-weight: 500; }
.f.invalid .err { display: block; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.opts--3 { grid-template-columns: repeat(3, 1fr); }
.opt-c { position: relative; }
.opt-c input { position: absolute; opacity: 0; pointer-events: none; }
.opt-c span { display: flex; align-items: center; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); font-size: 14px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: border-color .2s, background .2s; user-select: none; }
.opt-c input:checked + span { border-color: var(--blue); background: var(--pale); font-weight: 600; }
.opt-c input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.f.invalid .opt-c span { border-color: rgba(194, 65, 45, .5); }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 13px; color: var(--muted); line-height: 1.55; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--blue); }
.consent button { color: var(--blue); font-weight: 600; }
.f.invalid .consent { color: var(--danger); }
.partner-tag { font-size: 13px; padding: 10px 14px; border-radius: 12px; background: var(--pale); }
.done__mark { width: 64px; height: 64px; border-radius: 50%; background: var(--pale); color: var(--blue); display: grid; place-items: center; margin-bottom: 6px; }
.done__mark svg { width: 32px; height: 32px; }
.done h3 { font-size: 26px; }
.done p { color: var(--muted); }
.done .btn { padding: 0 22px; }
.done .btn::after { display: none; }
.tailored { border-radius: 16px; background: var(--pale); padding: 18px 20px; display: grid; gap: 10px; font-size: 14px; }
.tailored h4 { font-size: 16px; font-weight: 600; }
.tailored ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.who { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--off); font-size: 14px; }
.who b { display: block; font-size: 15px; }
.who button { background: none; border: 0; color: var(--blue); font-weight: 600; font-size: 13px; min-height: 40px; }
.nri { font-size: 13px; padding: 12px 14px; border-radius: 12px; background: var(--pale); color: var(--blue-deep); }
.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.days::-webkit-scrollbar { display: none; }
.day { flex: none; width: 74px; min-height: 78px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--white); display: grid; place-content: center; text-align: center; scroll-snap-align: start; }
.day small { font-size: 11px; font-weight: 600; color: var(--muted); }
.day b { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.day[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.day[aria-pressed="true"] small { color: rgba(255, 255, 255, .7); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { min-height: 50px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); font-size: 14px; font-weight: 600; display: grid; place-content: center; line-height: 1.2; }
.slot small { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.slot[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
.slot[aria-pressed="true"] small { color: rgba(255, 255, 255, .8); }
.slot:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.tz { font-size: 12px; color: var(--muted); }
.privacy { border: 0; border-radius: 24px; padding: 0; max-width: min(620px, 94vw); }
.privacy::backdrop { background: rgba(9, 22, 50, .55); }
.privacy__in { padding: 28px; font-size: 14px; color: var(--muted); }
.privacy h3 { font-size: 24px; color: var(--ink); margin-bottom: 12px; }
.privacy ul { padding-left: 18px; margin: 12px 0; display: grid; gap: 6px; }
.privacy .btn { margin-top: 18px; padding: 0 24px; }
.privacy .btn::after { display: none; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--mbar-h)); transform: translate(-50%, 20px); z-index: 120; background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ---------- Motion ---------- */
.hdr { animation: hdrIn .9s var(--ease) both .1s; }
@keyframes hdrIn { from { transform: translateY(-130%); opacity: 0; } }
.hero .eyebrow, .hero h1, .hero__sub, .hero__cta { animation: heroUp 1s var(--ease) both; }
.hero .eyebrow { animation-delay: .25s; padding-left: 5px; }
.hero h1 { animation-delay: .38s; }
.hero__sub { animation-delay: .52s; }
.hero__cta { animation-delay: .64s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } }
.hero__media { will-change: transform; }
/* staggered reveals: children of grids come in one after another */
.rv { transition-delay: calc(var(--si, 0) * 90ms); }
/* image reveal: a curtain wipes away top to bottom while the photo settles from a zoom */
.ir img { clip-path: inset(0 0 100% 0); transform: scale(1.18); transition: clip-path 1.5s cubic-bezier(.77, 0, .18, 1), transform 2s var(--ease), opacity .7s var(--ease); }
.ir.ir-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
.why-card.ir.ir-in:hover img { transform: scale(1.06); }
/* no coloured block behind images while they reveal: the page shows through, overlays and text follow the image */
.ir { background: transparent !important; }
.why-card.ir::after, .am.ir::after { opacity: 0; transition: opacity .8s var(--ease) .5s; }
.why-card.ir.ir-in::after, .am.ir.ir-in::after { opacity: 1; }
.why-card.ir .why-card__body, .am.ir .am__copy, .am.ir .am__tag { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) .8s, transform .7s var(--ease) .8s; }
.why-card.ir.ir-in .why-card__body, .am.ir.ir-in .am__copy, .am.ir.ir-in .am__tag { opacity: 1; transform: none; }

.why-card.rv:not(.in), .gal .rv:not(.in), .vgrid .rv:not(.in) { transform: translateY(34px) scale(.98); }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
    .hdr, .hero .eyebrow, .hero h1, .hero__sub, .hero__cta { animation: none; }
    .ir img { clip-path: none !important; transform: none !important; }
}

/* ---------- Propstory chatbot: smaller badge, parked above the page's own actions ---------- */
.propbot-bubble-container { transform: scale(.74) !important; transform-origin: 100% 100% !important; right: 20px !important; bottom: 20px !important; }
.propbot-popup-message { transform: scale(.82) !important; transform-origin: 100% 100% !important; right: 20px !important; bottom: 92px !important; min-width: 0 !important; width: 300px !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .nav { display: none; }
    .burger { display: block; }
    .hdr__in > .btn { display: none; }
}
@media (max-width: 1024px) {
    .am-wrap { grid-template-columns: 1fr; }
    .tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs button, .tabs button:first-child { flex: none; display: flex; gap: 8px; align-items: baseline; padding: 0 18px; min-height: 46px; border: 1px solid var(--line-dark); border-radius: 999px !important; }
    .tabs button span { font-size: 13px; font-weight: 600; }
    .tabs button small { font-size: 12px; }
    .tabs button[aria-selected="true"] { background: #fff; color: var(--navy); border-color: #fff; }
    .tabs button[aria-selected="true"] small { color: var(--blue); }
    .drives { position: static; width: auto; margin-top: 14px; box-shadow: none; background: var(--off); }
    .drive { background: var(--white); }
}
@media (max-width: 900px) {
    .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
    .am { min-height: 420px; }
    .hero__main { grid-template-columns: 1fr; }
    .why-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
    .why-cards::-webkit-scrollbar { display: none; }
    .why-card { flex: 0 0 min(78%, 360px); scroll-snap-align: start; }
    .plan { grid-template-columns: 1fr; }
    .plan__steps { grid-template-columns: repeat(2, 1fr); }
    .vc, .faq-wrap { grid-template-columns: 1fr; }
    .faq-side { position: static; }
    .cta-band > img { width: 100%; height: 46%; top: auto; border-radius: 999px 999px 0 0; opacity: .9; }
    .cta-band::before { background: linear-gradient(180deg, var(--navy) 52%, rgba(16, 39, 85, .2) 100%); }
    .cta-band .wrap { padding-bottom: 180px; }
    .steps4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .am { min-height: 0; background: var(--navy-2); }
    .am img { position: relative; height: 230px; z-index: 0; }
    .am::after { display: none; }
    .am__copy { position: static; padding: 20px; }
    .am__chips li { background: rgba(255, 255, 255, .06); }
    .gal { grid-auto-rows: 130px; gap: 8px; }
    /* amenity tabs: wrap into chips so all five are visible, labels centred */
    .am-wrap .tabs { flex-wrap: wrap; overflow: visible; gap: 6px; }
    .am-wrap .tabs button, .am-wrap .tabs button:first-child { align-items: center; min-height: 40px; padding: 0 14px; gap: 6px; }
    .am-wrap .tabs button span { font-size: 12.5px; line-height: 1; }
    .am-wrap .tabs button small { font-size: 11px; line-height: 1; }
    /* gallery: swipe slider on phones, like the Why cards */
    .gal, .gal.is-filtered { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
    .gal::-webkit-scrollbar { display: none; }
    .gal button, .gal.is-filtered button { flex: 0 0 80%; height: 300px; scroll-snap-align: start; border-radius: var(--r-lg) !important; }
    .wa-float, .call-float { display: none; }
    .mbar .mbar__wa svg { color: #25d366; }
    .hero__body { padding-top: 84px; }
    .hero__cta .btn { flex: 1 1 100%; justify-content: space-between; }
    .hero__cta .btn--ghost { display: none; }
    .why-card { aspect-ratio: 3 / 4; }
    .why-card ul { display: none; }
    .why-card::after { background: linear-gradient(180deg, rgba(12, 29, 64, .05) 30%, rgba(12, 29, 64, .95) 100%); }
    /* plot details open as a sheet above the bottom bar, so they're always in view */
    .plan__steps li { min-height: 150px; padding: 16px 14px; }
    :root { --mbar-h: calc(64px + env(safe-area-inset-bottom)); --r-lg: 18px; }
    .frail { display: none; }
    .mbar {
        display: grid; grid-template-columns: 1.8fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        height: var(--mbar-h); padding: 6px 8px env(safe-area-inset-bottom); gap: 6px; background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--line);
    }
    .mbar a, .mbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--ink); min-height: 52px; }
    .mbar svg { width: 22px; height: 22px; }
    .mbar .mbar__primary { background: var(--blue); color: #fff; flex-direction: row; gap: 8px; font-size: 13px; }
    .propbot-bubble-container { transform: scale(.62) !important; right: 10px !important; bottom: calc(var(--mbar-h) + 10px) !important; }
    .propbot-popup-message { display: none !important; }
    .hdr__in { height: 58px; padding-left: 18px; }
    .logo img { width: 92px; }
    .burger { width: 44px; height: 44px; }
    .burger span { left: 13px; right: 13px; }
    .burger span:nth-child(1) { top: 18px; }
    .burger span:nth-child(2) { top: 25px; }
    .vgrid { grid-template-columns: 1fr; }
    .vgrid li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 18px; }
    .vgrid b { margin: 0; grid-row: span 2; }
    .map { height: 320px; }
    .pblock__list { grid-template-columns: 1fr; }
    .sheet { padding: 0; align-items: end; }
    .sheet__card { width: 100%; max-height: 100%; height: 100%; border-radius: 0; transform: translateY(100%); }
    .sheet__top { padding: 18px 64px 14px 18px; }
    .sheet__body { padding: 18px; }
    .sheet__foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
    .opts--3 { grid-template-columns: repeat(2, 1fr); }
    .slots { grid-template-columns: repeat(2, 1fr); }
}
/* Short screens (small phones, landscape): keep the hero inside one screen */
@media (max-height: 720px) { .hero__sub { display: none; } }
@media (max-height: 560px) { .hero h1 { font-size: clamp(32px, 12vh, 64px); } }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
    html { scroll-behavior: auto; }
    .rv { opacity: 1; transform: none; transition: none; }
}


/* ---------- Welcome screen ("Enter with Sound", first on every visit; its click starts the music) ---------- */
.hg-intro {
    position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; padding: 24px 16px; text-align: center; color: #fff;
    background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .6)), url("../images/intro-aerial-1440.webp") center / cover no-repeat, var(--navy);
    transition: opacity .7s var(--ease), visibility .7s;
}
@media (max-width: 767.98px) { .hg-intro { background-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .6)), url("../images/intro-aerial-800.webp"); } }   /* phones: 800px photo */
.hg-intro[hidden] { display: none; }
.intro-seen .hg-intro { display: none; }
.hg-intro.is-leaving { opacity: 0; visibility: hidden; }
.gf-intro__logo { margin: 0; }
/* intro logo: the butterfly is lifted out of the logo (masked from the base image, shown again in a
   clipped copy on top) so it can flap its wings and drift gently */
.gfl { position: relative; display: inline-block; width: clamp(200px, 24vw, 290px); line-height: 0; }
.gfl__base { display: block; width: 100%; height: auto; }
.gfl__fly { position: absolute; inset: 0; pointer-events: none; }
.gfl__fly i { position: absolute; inset: 0; background: url("../images/gf-logo-white.webp") 0 0 / 100% 100% no-repeat; clip-path: polygon(87.50% 25.19%, 88.94% 25.81%, 89.51% 29.23%, 89.80% 34.83%, 90.52% 37.31%, 90.37% 42.29%, 89.80% 44.15%, 87.93% 44.78%, 86.49% 43.22%, 84.91% 40.73%, 84.63% 38.56%, 85.29% 36.07%, 85.34% 32.96%, 85.92% 31.09%, 86.21% 28.61%, 87.07% 26.12%); }
@media all {
    .gfl__base { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 290 134' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H290V134H0Z M253.75 33.75 L257.92 34.58 L259.58 39.17 L260.42 46.67 L262.50 50.00 L262.08 56.67 L260.42 59.17 L255.00 60.00 L250.83 57.92 L246.25 54.58 L245.42 51.67 L247.33 48.33 L247.50 44.17 L249.17 41.67 L250.00 38.33 L252.50 35.00Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 290 134' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H290V134H0Z M253.75 33.75 L257.92 34.58 L259.58 39.17 L260.42 46.67 L262.50 50.00 L262.08 56.67 L260.42 59.17 L255.00 60.00 L250.83 57.92 L246.25 54.58 L245.42 51.67 L247.33 48.33 L247.50 44.17 L249.17 41.67 L250.00 38.33 L252.50 35.00Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
    .gfl__fly { animation: flyBob 3.2s ease-in-out infinite; transform-origin: 85.52% 35.07%; }
    .gfl__fly i { transform-origin: 85.52% 35.07%; animation: flyFlap 2.4s ease-in-out infinite; }
}
/* two quick wing beats, then a rest */
@keyframes flyFlap { 0%, 40%, 100% { transform: scaleX(1); } 10%, 30% { transform: scaleX(.28) skewY(-6deg); } 20% { transform: scaleX(1); } }
@keyframes flyBob { 0%, 100% { transform: translate(0, 0) rotate(0); } 35% { transform: translate(1px, -3px) rotate(-3deg); } 70% { transform: translate(-1px, 1px) rotate(2deg); } }
.hg-intro__tag { margin: 0 0 12px; font-size: calc(clamp(11.5px, .85vw, 14.5px) + 1px); line-height: 1.4; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.hg-intro__enter {
    display: inline-flex; align-items: center; gap: 10px; padding: 16px 38px; border: 0; border-radius: 999px;
    background: #fff; color: var(--blue); font: 700 13.8px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
    position: relative; isolation: isolate; transition: background-color .25s;
}
/* pulse ring: a scaled pseudo-element (GPU) instead of an animated box-shadow (repaint every frame) */
.hg-intro__enter::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .45); animation: hgIntroPulse 2s ease-out infinite; pointer-events: none; }
.hg-intro__enter:hover { background: rgba(255, 255, 255, .85); }
@keyframes hgIntroPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.12, 1.7); opacity: 0; } }
.hg-intro :focus-visible { outline-color: #fff; }
.hg-intro__mute {
    padding: 6px; border: 0; background: none; color: rgba(255, 255, 255, .85); font: 400 12.5px/1 var(--sans); letter-spacing: .08em;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.hg-intro__mute:hover { color: #fff; }
html.hg-intro-open { overflow: hidden; }

/* ---------- Background music toggle (bottom-left) ---------- */
.hg-music {
    position: fixed; z-index: 65; left: 16px; bottom: calc(16px + var(--mbar-h) + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: var(--blue); color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22); cursor: pointer; transition: background-color .25s;
}
.hg-music[hidden] { display: none; }
.hg-music:hover { background: var(--blue-2); }
.hg-music__on, .hg-music[aria-pressed="true"] .hg-music__off { display: none; }
.hg-music[aria-pressed="true"] .hg-music__on { display: block; }
/* equaliser bars: moving while music plays, flat when muted */
.hg-music__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.hg-music__bars i { width: 3px; height: 14px; border-radius: 2px; background: currentColor; transform-origin: bottom; transform: scaleY(.29); }
.hg-music[aria-pressed="true"] .hg-music__bars i { animation: hgMusicBar 1.1s ease-in-out infinite; }
.hg-music[aria-pressed="true"] .hg-music__bars i:nth-child(2) { animation-delay: -.4s; }
.hg-music[aria-pressed="true"] .hg-music__bars i:nth-child(3) { animation-delay: -.75s; }
@keyframes hgMusicBar { 0%, 100% { transform: scaleY(.29); } 50% { transform: scaleY(1); } }
@media (max-width: 767.98px) { .hg-music { left: 14px; height: 38px; padding: 0 11px; } }


/* ---------- Site progress: meter + milestone timeline with NeoLiv-mark markers ---------- */
.prog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.prog__intro .h2 { margin-bottom: 0; }
.meter { margin-top: 28px; padding: 20px 22px; border-radius: 20px; background: rgba(41, 94, 201, .04); border: 1px solid rgba(41, 94, 201, .14); }
.meter__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 14.6px; font-weight: 600; color: var(--navy); }
.meter__top b { font-size: 35px; font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--blue); font-variant-numeric: tabular-nums; }
.meter__bar { height: 10px; border-radius: 999px; background: rgba(41, 94, 201, .15); overflow: hidden; }
.meter__bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--blue-2)); transition: width 1.6s var(--ease); }
.meter small { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.prog__btn { margin-top: 24px; }
.ptl { list-style: none; margin: 0; padding: 0; }
.ptl li { position: relative; padding: 0 0 26px 44px; }
/* rail */
.ptl li::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: -6px; width: 2px; background: rgba(41, 94, 201, .2); }
.ptl li:last-child::before { display: none; }
.ptl li.is-done::before { background: #295ec9; }
/* marker: the NeoLiv infinity mark (done = blue ring, in progress = light ring, upcoming = faded) */
.ptl li::after { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(41, 94, 201, .25); background: #fff url("../images/neoliv-mark.svg") center / 18px auto no-repeat; opacity: .45; }
.ptl li.is-done::after { border-color: #295ec9; opacity: 1; }
.ptl li.is-now::after { border-color: rgba(41, 94, 201, .45); box-shadow: 0 0 0 5px rgba(41, 94, 201, .12); opacity: 1; }
.ptl h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 3px 0 5px; font-size: calc(clamp(16px, 1.1vw, 19px) + 1px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--navy); }
.ptl p { margin: 0; font-size: 15.4px; line-height: 1.5; color: var(--muted); }
.ptag { display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(41, 94, 201, .12); color: #295ec9; font-size: 11.9px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.ptag.is-done { background: rgba(41, 94, 201, .14); color: #295ec9; }
.ptag.is-now { background: rgba(41, 94, 201, .18); color: #111; }
/* animation (main.js): markers light one by one, the line drawing down to the next */
.ptl--anim li::before { background: rgba(41, 94, 201, .15) linear-gradient(#295ec9, #295ec9) top / 100% 0% no-repeat; transition: background-size .6s linear; }
.ptl--anim li.is-done.is-run::before { background-size: 100% 100%; }
.ptl--anim li.is-now.is-run::before { background-size: 100% 50%; } /* work under way: half the line */
.ptl--anim li.is-done::after, .ptl--anim li.is-now::after { border-color: rgba(41, 94, 201, .25); box-shadow: none; opacity: .45; transition: opacity .3s, border-color .3s, box-shadow .3s; }
.ptl--anim li.is-lit::after { border-color: #295ec9; opacity: 1; animation: markPop .45s var(--ease); }
.ptl--anim li.is-now.is-lit::after { border-color: rgba(41, 94, 201, .45); animation: markPop .45s var(--ease), markPulse 1.8s .45s ease-out infinite; }
.ptl--anim li.is-done > *, .ptl--anim li.is-now > * { opacity: .4; transition: opacity .4s; }
.ptl--anim li.is-lit > * { opacity: 1; }
@keyframes markPop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes markPulse { 0% { box-shadow: 0 0 0 0 rgba(41, 94, 201, .35); } 100% { box-shadow: 0 0 0 10px rgba(41, 94, 201, 0); } }
@media (max-width: 900px) { .prog { grid-template-columns: 1fr; } }

/* ---------- Loader (after the welcome screen): infinity mark draws with progress, a light races the loop ---------- */
body.loading { overflow: hidden; }
.loader { position: fixed; inset: 0; z-index: 1900; display: flex; align-items: center; justify-content: center; background: #fdfdfe; color: var(--ink); transition: transform 1.1s cubic-bezier(.77, 0, .18, 1), visibility 1.1s; }
.loader.done { transform: translateY(-100%); visibility: hidden; }
.loader__in { position: relative; text-align: center; transition: opacity .5s ease, transform 1.1s cubic-bezier(.77, 0, .18, 1); }
.loader.done .loader__in { opacity: 0; transform: translateY(80px); }
.loader__inf { display: block; width: clamp(150px, 16vw, 210px); height: auto; margin: 0 auto 28px; overflow: visible; }
.loader__inf path { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.inf-base { stroke: #295ec9; opacity: .12; }
.inf-draw { stroke: #295ec9; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s linear; }
.inf-comet { stroke: #9db8ff; stroke-width: 10; stroke-dasharray: .14 .86; filter: drop-shadow(0 0 6px #6f95ff); animation: inf-run 1.7s linear infinite; }
.loader.done .inf-comet { opacity: 0; transition: opacity .3s; }
.loader__logo { display: flex; justify-content: center; line-height: 1; }
.gl-mark { display: inline-flex; flex-direction: column; align-items: center; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(34px, 4.6vw, 54px); line-height: 1; text-transform: uppercase; color: #295ec9; animation: ld-fade 1s .5s ease both; }
.gl-mark small { display: block; font-size: .36em; letter-spacing: .32em; margin-right: -.32em; }
.gl-mark b { display: block; margin-top: .12em; font-weight: 500; font-size: 1em; letter-spacing: .06em; white-space: nowrap; }
.loader__line { width: min(280px, 60vw); height: 1px; margin: 34px auto 0; background: rgba(17, 34, 71, .14); overflow: hidden; animation: ld-fade 1s .7s ease both; }
.loader__line span { display: block; height: 100%; background: #295ec9; transform-origin: left; transform: scaleX(0); }
.loader__meta { visibility: hidden; display: flex; justify-content: space-between; width: min(280px, 60vw); margin: 14px auto 0; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; }
@keyframes inf-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ld-fade { from { opacity: 0; } }
/* header and hero copy wait for the loader to lift, then animate in */
body.loading .hdr, body.loading .hero .eyebrow, body.loading .hero h1, body.loading .hero__sub, body.loading .hero__cta { animation-play-state: paused; }

/* ---------- Interactive master plan: header stats, filter card, plan with hover preview, details drawer ---------- */
/* filter card */
.mp__dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.mp__dot.available { background: var(--avail); }
.mp__dot.hold { background: var(--hold); }
.mp__dot.sold { background: var(--sold); }
/* plan */
.mp__stage { position: relative; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
/* the whole plan fits one screen: the card is capped at the viewport height (under the fixed header)
   and the drawing scales inside it, centred on the white sheet */
.mp__scroll { overflow: hidden; height: calc(100vh - 124px); height: calc(100svh - 124px); min-height: 520px; max-height: 980px; }
.mp__svg { display: block; width: 100%; height: 100%; }
/* the plan as a surveyor's drawing */
.mp__svg text { pointer-events: none; }
.mp__svg .sv-boundary { fill: none; stroke: #111; stroke-width: 4; }
.mp__svg .sv-road-case { fill: none; stroke: #111; stroke-width: 19; stroke-linecap: round; stroke-linejoin: round; }
.mp__svg .sv-road { fill: none; stroke: #fff; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.mp__svg .sv-line { fill: none; stroke: #111; stroke-width: 1.4; }
.mp__svg .sv-contour { fill: none; stroke: #9a9a9a; stroke-width: 1.2; }
.mp__svg .sv-forest { fill: rgba(45, 106, 79, .06); stroke: #111; stroke-width: 1.6; }
.mp__svg .sv-tree { fill: none; stroke: #8fa79a; stroke-width: 1; }
.mp__svg .sv-bldg { fill: #fff; stroke: #111; stroke-width: 2.5; }
.mp__svg .sv-lbl { font-family: "Times New Roman", Georgia, serif; font-size: 17px; letter-spacing: .12em; fill: #111; }
.mp__svg .sv-lbl--sm { font-size: 12px; }
/* plots: outline + number + status dot; hover lights the lot */
.mp__svg .plot { cursor: pointer; outline: none; transition: opacity .3s; }
.mp__svg .plot__shape { fill: #fff; stroke: #111; stroke-width: 1.1; transition: fill .3s, stroke .3s, stroke-width .3s; }
.mp__svg .plot__no { font-family: "Times New Roman", Georgia, serif; font-size: 11px; fill: #111; }
.mp__svg .plot__dot { stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.mp__svg .plot.available .plot__dot { fill: var(--avail); }
.mp__svg .plot.hold .plot__dot { fill: var(--hold); }
.mp__svg .plot.sold .plot__dot { fill: var(--sold); }
.mp__svg .plot__glow { fill: rgba(41, 94, 201, .35); opacity: 0; transition: opacity .3s; }
.mp__svg .plot:hover .plot__shape, .mp__svg .plot:focus-visible .plot__shape { fill: rgba(41, 94, 201, .14); stroke: #295ec9; stroke-width: 2.5; }
.mp__svg .plot:hover .plot__glow, .mp__svg .plot:focus-visible .plot__glow, .mp__svg .plot.sel .plot__glow { opacity: 1; }
.mp__svg .plot:hover .plot__dot, .mp__svg .plot:focus-visible .plot__dot, .mp__svg .plot.sel .plot__dot { transform: scale(1.4); }
.mp__svg .plot.sel .plot__shape { fill: rgba(16, 39, 85, .16); stroke: #102755; stroke-width: 3; }
.mp__svg .plot.dim { opacity: .18; }
.mp__svg .plot.dim:hover { opacity: .5; }
.mp__stage.is-waiting .plot__dot { opacity: 0; }
.mp__stage.is-arriving .plot__dot { animation: dotIn .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0ms); }
.mp__stage.is-arriving .plot__glow { animation: glowPulse 1.6s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes dotIn { from { opacity: 0; transform: scale(0); } 60% { transform: scale(1.6); } }
@keyframes glowPulse { 0%, 30% { opacity: 0; } 50% { opacity: .9; } 100% { opacity: 0; } }
.mp__sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 38%, rgba(41, 94, 201, .35) 50%, transparent 62%); transform: translateX(-110%); }
.mp__stage.is-arriving .mp__sweep { animation: mpSweep 2.2s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes mpSweep { 0% { transform: translateX(-110%); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(110%); opacity: 0; } }
/* hover preview */
.mp__preview { position: absolute; left: 0; top: 0; z-index: 3; width: 250px; padding: 16px; border: 1px solid rgba(159, 179, 223, .35); border-radius: 14px; background: rgba(12, 29, 64, .95); backdrop-filter: blur(8px); color: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); pointer-events: none; }
.mp__preview[hidden] { display: none; }
.mp__pv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mp__pv-top small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.mp__pv-top small.is-available { color: #7fd3a4; }
.mp__pv-top small.is-hold { color: #c4d8fb; }
.mp__pv-top small.is-sold { color: #7aa2f0; }
.mp__pv-top > div > b { display: block; margin-top: 4px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.mp__pv-size { text-align: right; }
.mp__pv-size b { display: block; font-size: 18px; font-weight: 500; color: var(--sky); }
.mp__pv-size small { color: rgba(255, 255, 255, .6); }
.mp__preview dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(159, 179, 223, .25); font-size: 13px; }
.mp__preview dt { color: rgba(255, 255, 255, .55); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; align-self: center; }
.mp__preview dd { margin: 0; text-align: right; }
.mp__pv-go { margin-top: 12px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); text-align: right; }
.mp__legend, .mp__north { position: absolute; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 8px 12px; border: 1px solid rgba(159, 179, 223, .3); border-radius: 12px; background: rgba(12, 29, 64, .75); backdrop-filter: blur(6px); color: rgba(255, 255, 255, .85); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.mp__legend { left: 14px; bottom: 14px; }
.mp__legend span { display: flex; align-items: center; gap: 6px; }
.mp__north { right: 14px; top: 14px; gap: 6px; }
.mp__north svg { width: 14px; height: 14px; fill: var(--sky); }
/* list */
.mp__all { margin-top: 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .05); }
.mp__all summary { padding: 16px 18px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75); cursor: pointer; }
.mp__all summary:hover { color: #fff; }
.mp__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; max-height: 340px; overflow: auto; padding: 0 18px 16px; }
.mp__li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border: 0; background: none; color: rgba(255, 255, 255, .85); font-size: 13px; text-align: left; cursor: pointer; }
.mp__li:hover { color: var(--sky); }
.mp__li b { font-weight: 600; }
.mp__li span { color: rgba(255, 255, 255, .5); font-size: 12px; }
.mp__empty { grid-column: 1 / -1; padding: 20px 0; color: rgba(255, 255, 255, .7); }
/* details drawer */
.pdrawer { position: fixed; inset: 0; z-index: 80; }
.pdrawer[hidden] { display: none; }
.pdrawer__bg { position: absolute; inset: 0; background: rgba(9, 22, 50, .55); opacity: 0; transition: opacity .3s; }
.pdetail { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); overflow-y: auto; padding: 32px 28px calc(28px + env(safe-area-inset-bottom)); background: var(--white); color: var(--ink); box-shadow: -20px 0 50px rgba(0, 0, 0, .25); transform: translateX(100%); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.pdrawer.open .pdrawer__bg { opacity: 1; }
.pdrawer.open .pdetail { transform: none; }
.pdetail__close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--off); color: var(--navy); font-size: 26px; line-height: 1; cursor: pointer; }
.pdetail__eyebrow { margin-bottom: 18px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pdetail h3 { margin: 10px 0 6px; font-size: 34px; font-weight: 500; letter-spacing: -.02em; color: var(--navy); }
.pdetail dl { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 18px 0; font-size: 15px; }
.pdetail dt, .pdetail dd { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pdetail dt { color: var(--muted); }
.pdetail dd { margin: 0; font-weight: 600; text-align: right; color: var(--navy); }
.pdetail dd .plock__btn { margin: 0 0 0 auto; }
.pdetail__cta { display: grid; gap: 10px; }
.pdetail__cta .btn { width: 100%; justify-content: space-between; }
.pdetail__sold { padding: 14px 16px; border-radius: 14px; background: var(--off); color: var(--muted); font-size: 14px; }
.pdetail .tag.available { background: rgba(47, 158, 95, .14); color: #1f7a46; }
.pdetail .tag.hold { background: rgba(169, 200, 245, .4); color: #1e3a8a; }
.pdetail .tag.sold { background: rgba(41, 94, 201, .14); color: #295ec9; }
@media (max-width: 720px) {
    .mp__scroll { height: auto; min-height: 0; max-height: none; }
    .mp__svg { height: auto; }
    .mp__legend { left: 10px; bottom: 10px; gap: 10px; font-size: 9px; }
    .mp__north { display: none; }
    .pdetail { top: auto; width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; transform: translateY(100%); }
}

/* ---------- Key figures (Why section): four columns, thin dividers, numbers count up ---------- */
.kstats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.kstat { padding: 32px 16px 0; text-align: center; }
.kstat + .kstat { border-left: 1px solid var(--line); }
.kstat b { display: block; font-size: clamp(38px, 4vw, 58px); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; }
.kstat span { display: block; margin-top: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 720px) {
    .kstats { grid-template-columns: repeat(2, 1fr); }
    .kstat { padding: 24px 10px 20px; }
    .kstat:nth-child(3) { border-left: 0; }
    .kstat:nth-child(n+3) { border-top: 1px solid var(--line); }
    .kstat b { font-size: 36px; }
    .kstat span { letter-spacing: .2em; }
}

/* ---------- Why Khopoli: the rise of Mumbai 3.0 (dark, over the Atal Setu photo) ---------- */
.growth { position: relative; overflow: hidden; background: #131c3a; color: #fff; }
.growth__bg { position: absolute; inset: 0; }
.growth__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.growth__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 21, 44, .55), rgba(13, 21, 44, .92) 70%); }
.growth .wrap { position: relative; }
.growth__head { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end; margin-bottom: var(--blk); }
.growth__eyebrow { display: flex; align-items: center; gap: 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #9fb8ec; }
.growth__eyebrow::before { content: ""; width: 28px; height: 1px; background: #9fb8ec; }
.growth .h2 { margin-top: 26px; color: #fff; }
.growth .h2 em { color: #9fb8ec; }
.growth .lead { color: rgba(255, 255, 255, .75); }
.growth__fine { margin-top: 18px; font-size: 10.5px; line-height: 1.6; color: rgba(255, 255, 255, .5); }
@media (max-width: 900px) {
    .growth__head { grid-template-columns: 1fr; }
    .growth__head { gap: 20px; }
}

/* master plan layout (Le Capitan): heading + stats row, then filter card (3 cols) beside the plan (9 cols) */
.mp__head { margin-bottom: var(--blk); }
.mp__head .head { margin-bottom: 0; }
/* header stats: three equal tiles */
.mp__stats { display: grid; gap: 10px; margin-bottom: 14px; }
.mp__stats > div { padding: 16px 20px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: rgba(255, 255, 255, .05); }
.mp__stats b { display: flex; align-items: center; gap: 10px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp__stats > div > span { display: block; margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.mp__stats .is-live { border-color: rgba(127, 211, 164, .35); }
.mp__stats .is-live i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #7fd3a4; box-shadow: 0 0 0 0 rgba(127, 211, 164, .6); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 9px rgba(127, 211, 164, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 211, 164, 0); } }
.mp { display: grid; grid-template-columns: minmax(250px, 3fr) minmax(0, 9fr); gap: 24px; align-items: start; }
/* left column (stats + filters) stays beside the plan while scrolling */
.mp__aside { position: sticky; top: 104px; }
.mp__ftoggle { display: none; width: 100%; align-items: center; justify-content: space-between; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .05); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.mp__ftoggle svg { width: 16px; height: 16px; transition: transform .25s; }
.mp__ftoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mp__filters { padding: 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .88); }
.mp__fhead { display: flex; justify-content: space-between; align-items: center; }
.mp__fhead span { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sky); }
.mp__reset { padding: 0; border: 0; background: none; color: var(--sky); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.mp__reset:hover { color: #fff; }
.mp__fs { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
.mp__fs legend { margin-bottom: 4px; padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.mp__check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; cursor: pointer; transition: color .2s; }
.mp__check:hover { color: #fff; }
.mp__check > span { display: flex; align-items: center; gap: 9px; flex: 1; }
.mp__check > b { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.mp__check input { appearance: none; -webkit-appearance: none; flex: none; width: 17px; height: 17px; margin: 0; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 4px; background: transparent; cursor: pointer; transition: background .2s, border-color .2s; }
.mp__check input:checked { border-color: var(--sky); background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102755' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.mp__check input:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.mp__fsel { display: block; margin-top: 20px; }
.mp__fsel > span { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.mp__fsel select { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; padding: 0 38px 0 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; color: #fff; font: 500 14px var(--sans); cursor: pointer; transition: border-color .2s; }
.mp__fsel select:hover { border-color: rgba(159, 179, 223, .6); }
.mp__fsel select:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.mp__fsel select option { color: var(--ink); background: #fff; }
.mp__showing { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.mp__showing > span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.mp__showing b { font-size: 28px; font-weight: 400; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.mp__showing small { font-size: 15px; color: rgba(255, 255, 255, .6); }
/* the organic plan's extra drawing bits */
.mp__svg .sv-lbl--lg { font-size: 22px; letter-spacing: .16em; fill: #2d5a45; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.mp__svg .sv-lbl--n { font-size: 44px; letter-spacing: 0; }
.mp__svg .plot__no { font-size: 15px; }
@media (max-width: 1080px) {
    .mp { grid-template-columns: 1fr; }
    .mp__aside { position: static; }
    .mp__scroll { height: auto; min-height: 0; max-height: none; }
    .mp__svg { height: auto; }
    .mp__ftoggle { display: flex; }
    .mp__filters { position: static; display: none; margin-top: 10px; }
    .mp__filters.open { display: block; }
}
@media (max-width: 720px) {
    .mp__stats > div { padding: 14px; }
    .mp__stats b { font-size: 20px; gap: 7px; }
    .mp__stats > div > span { font-size: 9.5px; letter-spacing: .08em; }
}

/* ---------- Location: Google Maps embed, branded ---------- */
.loc .map { position: relative; overflow: hidden; border-radius: 24px; background: #e8edf6; box-shadow: 0 1px 0 rgba(16, 39, 85, .04), 0 22px 50px rgba(16, 39, 85, .14); isolation: isolate; }
.map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.9) contrast(1.03); }
/* halo around Google's pin (its tip sits at the map centre; the head is ~22px above) */
.map__halo { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; pointer-events: none; transition: opacity .4s; }
/* NeoLiv pin laid over Google's marker: navy teardrop with the infinity mark, tip on the exact spot,
   with a pulsing shadow on the ground */
.map__halo i { position: absolute; left: -26px; top: -9px; width: 52px; height: 18px; border-radius: 50%; border: 2px solid rgba(41, 94, 201, .7); background: rgba(41, 94, 201, .18); animation: mapHalo 2.4s ease-out infinite; }
.map__pin { position: absolute; left: -26px; top: -64px; width: 52px; max-width: none; height: 66px; overflow: visible; filter: drop-shadow(0 6px 10px rgba(16, 39, 85, .45)); animation: pinDrop .8s cubic-bezier(.34, 1.56, .64, 1) both; }
.map__pin-body { fill: var(--navy); stroke: #fff; stroke-width: 3; }
.map__pin-mark { fill: none; stroke: #fff; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pinDrop { from { transform: translateY(-40px); opacity: 0; } }
.map__halo i + i { animation-delay: 1.2s; }
@keyframes mapHalo { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.map__halo { opacity: 0; }
.map.is-site .map__halo { opacity: 1; }
.map.is-site.is-used .map__halo { opacity: 0; }
.map__actions { position: absolute; right: 16px; top: 66px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.map__dir, .map__reset { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 22px rgba(16, 39, 85, .25); transition: transform .2s, background .2s; }
.map__dir { background: #295ec9; color: #fff; }
.map__reset { background: #fff; color: var(--navy); }
.map__reset[hidden] { display: none; }
.map__dir:hover, .map__reset:hover { transform: translateY(-2px); }
.map__dir svg, .map__reset svg { width: 16px; height: 16px; }
@media (max-width: 720px) {
    .map__actions { right: 10px; bottom: 14px; }
    .map__dir, .map__reset { height: 38px; padding: 0 14px; font-size: 12px; }
}

/* ---------- Footer ---------- */
.ftr { margin: var(--inset) var(--inset) 0; padding: clamp(44px, 5vw, 64px) 0 calc(36px + var(--mbar-h)); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--off); color: var(--muted); font-size: 14px; }
.ftr a:hover { color: var(--blue); }
.ftr__top { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: clamp(24px, 3.5vw, 48px); padding-bottom: 32px; }
.ftr__logo { display: block; width: 300px; max-width: 100%; margin: 0 0 18px; }
.ftr__logo img { width: 100%; height: auto; }
.ftr__addr { display: flex; gap: 10px; max-width: 34ch; line-height: 1.6; }
.ftr__addr svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--blue); }
.ftr__brand .btn { margin-top: 20px; }
.ftr__map { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--blue); }
.ftr__h { margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.ftr__col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ftr__ct { display: flex; align-items: center; gap: 12px; }
.ftr__ct svg { width: 36px; height: 36px; flex: none; padding: 9px; border-radius: 50%; background: var(--white); color: var(--blue); border: 1px solid var(--line); transition: background .2s, color .2s; }
.ftr__ct:hover svg { background: var(--blue); color: #fff; }
.ftr__ct small { display: block; font-size: 11px; color: var(--muted); }
.ftr__ct span { color: var(--ink); font-weight: 500; line-height: 1.3; }
.ftr__rera { display: flex; gap: 16px; align-items: flex-start; align-self: start; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.ftr__rera img { width: 96px; height: 96px; flex: none; border-radius: 8px; }
.ftr__rera .ftr__h { margin-bottom: 6px; }
.ftr__rera b { display: block; font-size: 16px; font-weight: 600; letter-spacing: .02em; color: var(--navy); }
.ftr__rera a { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.ftr__rera small { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.45; }
.ftr__disc { border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.ftr__disc summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; list-style: none; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 600; }
.ftr__disc summary::-webkit-details-marker { display: none; }
.ftr__disc summary > svg:first-child { width: 18px; height: 18px; color: var(--blue); }
.ftr__disc summary em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--blue); }
.ftr__chev { width: 16px; height: 16px; color: var(--blue); transition: transform .25s; }
.ftr__disc[open] .ftr__chev { transform: rotate(180deg); }
.ftr__disc[open] summary em { visibility: hidden; }
.ftr__disc-body { padding: 0 18px 18px; font-size: 11.5px; line-height: 1.75; text-align: justify; }
.ftr__disc-body p + p { margin-top: 8px; }
/* centred, so it sits between the floating music button (left) and the chat icon (right) */
.ftr__bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; gap: 6px 28px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
.ftr__bar .linkish { font-size: inherit; }
.ftr__credit { font-weight: 600; color: var(--blue); }
@media (max-width: 1080px) {
    .ftr__top { grid-template-columns: 1fr 1fr; }
    .ftr__rera { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 720px) {
    .ftr__top { grid-template-columns: 1fr; gap: 28px; }
    .ftr__rera img { width: 80px; height: 80px; }
    .ftr__disc-body { text-align: left; }
    .ftr__bar { flex-direction: column; gap: 6px; }
}
/* map interactions: view toggle, nearby chips, loading veil */
.map__type { position: absolute; right: 16px; top: 16px; z-index: 3; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: 0 8px 22px rgba(16, 39, 85, .2); }
.map__type button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--navy); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.map__type button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.map__near { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 32px); padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: 0 8px 22px rgba(16, 39, 85, .2); overflow-x: auto; scrollbar-width: none; }
.map__near::-webkit-scrollbar { display: none; }
.map__near-t { flex: none; padding: 0 6px 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.map__chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--off); color: var(--navy); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.map__chip svg { width: 15px; height: 15px; color: #295ec9; transition: color .2s; }
.map__chip:hover { background: var(--pale); }
.map__chip[aria-pressed="true"] { background: #295ec9; color: #fff; }
.map__chip[aria-pressed="true"] svg { color: #fff; }
.map__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(100deg, rgba(232, 237, 246, 0) 30%, rgba(232, 237, 246, .85) 50%, rgba(232, 237, 246, 0) 70%) 0 0 / 250% 100%, rgba(232, 237, 246, .55); transition: opacity .3s; }
.map.is-loading .map__veil { opacity: 1; animation: mapVeil 1.2s linear infinite; }
@keyframes mapVeil { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } }
@media (max-width: 720px) {
    .map__type { right: 10px; top: 10px; }
    .map__type button { height: 30px; padding: 0 11px; font-size: 11.5px; }
    .map__near { left: 10px; right: 10px; bottom: 14px; max-width: none; }
    .map__actions { top: 58px; right: 10px; }
}

/* the three figures as cards */
/* six reasons: one slim row of figure tiles */
.growth__infra { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.gcard { padding: 18px 18px 16px; border-radius: 16px; background: rgba(16, 39, 85, .82); border: 1px solid rgba(255, 255, 255, .14); transition: border-color .3s, transform .3s var(--ease); }
.gcard:hover { border-color: rgba(159, 184, 236, .5); transform: translateY(-3px); }
.gcard b { display: block; font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gcard span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .7); }
.greasons__t { margin-bottom: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
@media (max-width: 900px) {
    .growth__infra { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .growth__infra { grid-template-columns: 1fr 1fr; gap: 8px; }
    .gcard { padding: 14px; }
}

/* master plan hidden: the pricing table drops the columns that depend on it */
.no-mp .ptable__avail, .no-mp .ptable__go, .no-mp .ptable thead th:nth-child(3), .no-mp .ptable thead th:nth-child(4) { display: none; }
/* while the master plan is hidden, Why NeoLiv and Pricing (both white) sit together: one gap, not two */

/* master plan hidden: two-column table, size on the left, price button on the right edge */
.no-mp .ptable thead th:nth-child(2), .no-mp .ptable td.ptable__price { text-align: right; width: 1%; white-space: nowrap; }
.no-mp .ptable td.ptable__price .plock__btn { margin-left: auto; }
/* plot table: compact width, centred, with the fine print and button centred under it */
.ptable__wrap { max-width: 820px; margin-left: auto; margin-right: auto; }
.ptable__wrap + .fine { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
.ptable__cta { justify-content: center; }

/* ---------- Plot table, redesigned: navy header, scaled plot icon, sq. m., outlined price pill ---------- */
.ptable__wrap { border: 1px solid rgba(30, 58, 138, .14); border-radius: 22px; background: var(--white); box-shadow: 0 18px 44px rgba(16, 39, 85, .08); }
.ptable thead th { padding-top: 16px; padding-bottom: 16px; background: var(--navy); color: rgba(255, 255, 255, .78); font-size: 11px; letter-spacing: .18em; }
.ptable th, .ptable td { padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(30, 58, 138, .08); }
.ptable tbody tr { position: relative; transition: background-color .25s; }
.ptable tbody tr:nth-child(even) { background: rgba(41, 94, 201, .025); }
.ptable tbody tr:hover { background: rgba(41, 94, 201, .06); }
.ptable tbody tr > :first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .25s; }
.ptable tbody tr:hover > :first-child { box-shadow: inset 3px 0 0 #295ec9; }
.ptable tbody th .ptable__plot { display: flex; align-items: center; gap: 16px; }
.ptable__plot > span { display: block; }
.ptable__ico { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--pale); }
.ptable__ico::after { content: ""; width: calc(22px * var(--s, 1)); height: calc(22px * var(--s, 1)); border: 2px solid #295ec9; border-radius: 3px; background: rgba(41, 94, 201, .12); }
.ptable tbody th b { font-size: calc(clamp(17px, 1.3vw, 21px) + 1px); color: var(--navy); }
.ptable tbody th b small { color: var(--muted); font-weight: 500; }
.ptable tbody th em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.ptable__price .plock__btn { padding: 9px 16px; border: 1.5px solid #295ec9; background: transparent; color: #295ec9; font-size: 11px; transition: background .25s, color .25s; }
.ptable__price .plock__btn:hover { background: #295ec9; color: #fff; }
@media (max-width: 767.98px) {
    .ptable tbody th .ptable__plot { gap: 12px; }
    .ptable__ico { width: 28px; height: 28px; border-radius: 7px; }
    .ptable__ico::after { width: calc(18px * var(--s, 1)); height: calc(18px * var(--s, 1)); }
    .ptable tbody th em { font-size: 11px; }
    .ptable__price .plock__btn { padding: 7px 11px; font-size: 10px; }
}
/* narrow desktops (1081–1199px): slightly smaller card text keeps every description to two lines */
@media (min-width: 1081px) and (max-width: 1199.98px) { .why-card p { font-size: 13.5px; } }

/* ---- Performance: smooth scrolling ----
   Phones: no live blur behind fixed/overlay elements (a solid tint looks the same and costs nothing per frame). */
@media (max-width: 900px) {
    .hdr__in, .hdr.scrolled .hdr__in, .mnav, .hero .chip-btn, .am__chips li { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .hdr__in { background: rgba(16, 39, 85, .55); }
    .hdr.scrolled .hdr__in { background: rgba(255, 255, 255, .97); }
    .mnav { background: rgba(16, 39, 85, .98); }
    .hero .chip-btn { background: rgba(12, 29, 64, .55); }
    .am__chips li { background: rgba(12, 29, 64, .45); }
}
/* looping animations pause while their section is off screen (main.js adds .is-off) */
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* ---- Propstory lead form (name, email, phone) ---- */
.enq_form .success_msg, .enq_form .error_msg, .enq_form .form_error { display: none; }
.enq_form .success_msg { padding: 28px 8px; text-align: center; }
.enq_form .success_msg h4, .enq_form .error_msg h4 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--navy); }
.enq_form .error_msg h4 { color: #b42318; font-size: 14px; }
.enq_form .error_msg { margin-bottom: 14px; }
.enq_form .form_error { margin: -4px 0 14px; font-size: 13px; color: #b42318; }
.enq_form .submit_button { width: 100%; margin-top: 6px; }
.enq_form .intl-tel-input { display: block; width: 100%; }
/* country list: English names only, full field width, one line per country */
.enq_form .intl-tel-input .country-list { z-index: 5; width: min(calc(100vw - 36px), 520px); max-width: none; white-space: nowrap; overflow-x: hidden; }
.enq_form .intl-tel-input .country-list .country { display: flex; align-items: center; }
.enq_form .intl-tel-input .country-list .country-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.enq_form .intl-tel-input .country-list .dial-code { flex: none; }
.enq_form .sidenav_form .f { margin-bottom: 16px; }

/* ======================= Amenities: auto slider ======================= */
.amx { position: relative; }
.amx__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 880px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 22px; }
.amx__track::-webkit-scrollbar { display: none; }
.amx__track:focus-visible { outline: 2px solid #9fb8ec; outline-offset: 4px; }
.amx__slide { position: relative; margin: 0; scroll-snap-align: start; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #0c1d40; }
.amx__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s ease-out; }
.amx__slide.is-on img { transform: scale(1); }
.amx__slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 34px); padding-top: 90px; background: linear-gradient(180deg, rgba(6, 16, 38, 0), rgba(6, 16, 38, .55) 45%, rgba(6, 16, 38, .88)); color: #fff; }
.amx__slide small { display: inline-block; margin-bottom: 10px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.amx__slide h3 { margin: 0 0 6px; font-size: clamp(22px, 2.3vw, 32px); font-weight: 500; line-height: 1.15; color: #fff; }
.amx__slide p { margin: 0; max-width: 52ch; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.amx__slide:not(.is-on) figcaption { opacity: .55; transition: opacity .4s; }
.amx__bar { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); margin-top: 22px; }
.amx__count { flex: none; font-size: 13px; letter-spacing: .08em; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.amx__count b { font-size: 18px; font-weight: 600; color: #fff; }
.amx__dots { flex: 1; display: flex; gap: 6px; }
.amx__dots button { position: relative; flex: 1; max-width: 64px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.amx__dots button::before, .amx__dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.amx__dots button::before { background: rgba(255, 255, 255, .22); }
.amx__dots button::after { background: #fff; transform: scaleX(0); transform-origin: left; }
.amx__dots button.on::after { transform: scaleX(1); }
.amx.is-auto .amx__dots button.on::after { animation: amxFill var(--amx-dur, 5s) linear both; }
@keyframes amxFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.amx__nav { flex: none; display: flex; gap: 8px; }
.amx__arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.amx__arrow svg { width: 20px; height: 20px; }
.amx__arrow:hover { background: #fff; border-color: #fff; color: var(--navy); }
/* amenity zones, from the client brochure */
.amz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(30px, 4vw, 46px); }
.amz__card { padding: 20px 20px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.amz__card h4 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9fb8ec; }
.amz__card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.amz__card li { padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12.5px; line-height: 1.2; color: rgba(255, 255, 255, .88); }
@media (max-width: 1080px) { .amz { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .amx__track { grid-auto-columns: 88%; gap: 10px; }
    .amx__slide { aspect-ratio: 4 / 5; }
    .amx__slide p { font-size: 13.5px; }
    .amx__nav { display: none; }
    .amz { grid-template-columns: 1fr; }
}

/* ======================= Plot table (v2): dark card, relative-size bars ======================= */
.pt2__wrap { max-width: 900px; margin: 0 auto; padding: 8px clamp(18px, 3vw, 34px) 10px; border-radius: 26px; background: radial-gradient(120% 140% at 100% 0, #1d3f86 0, #102755 45%, #0b1a3a 100%); box-shadow: 0 30px 60px rgba(16, 39, 85, .22); color: #fff; }
.pt2 { width: 100%; border-collapse: collapse; }
.pt2 th, .pt2 td { padding: 18px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.pt2 tbody tr:last-child > * { border-bottom: 0; }
.pt2 thead th { padding: 18px 0 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5); border-bottom-color: rgba(255, 255, 255, .16); }
.pt2__scale-h { padding-left: 6% !important; }
.pt2__price-h, .pt2__price { text-align: right !important; }
.pt2 tbody th { width: 34%; white-space: nowrap; }
.pt2__no { display: inline-block; width: 34px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #9fb8ec; font-variant-numeric: tabular-nums; }
.pt2__size b { font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; }
.pt2__size small { margin-left: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .6); }
.pt2__scale { padding-left: 6% !important; padding-right: 6% !important; }
.pt2__bar { display: block; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pt2__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, #4f7fdc, #9fb8ec 70%, #fff); transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.pt2__wrap.in .pt2__bar i { transform: scaleX(1); }
.pt2 tbody tr:nth-child(2) .pt2__bar i { transition-delay: .08s; } .pt2 tbody tr:nth-child(3) .pt2__bar i { transition-delay: .16s; }
.pt2 tbody tr:nth-child(4) .pt2__bar i { transition-delay: .24s; } .pt2 tbody tr:nth-child(5) .pt2__bar i { transition-delay: .32s; }
.pt2 tbody tr:nth-child(6) .pt2__bar i { transition-delay: .4s; }
.pt2__btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px; background: #fff; color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.pt2__btn svg { width: 14px; height: 14px; flex: none; }
.pt2__btn:hover { background: #9fb8ec; transform: translateY(-1px); }
.pt2 tbody tr { transition: background-color .25s; }
.pt2 tbody tr:hover .pt2__bar { background: rgba(255, 255, 255, .14); }
.pt2 tbody tr:hover .pt2__size b { color: #cfe0ff; }
.pt2__fine { margin-top: 16px; text-align: center; }
@media (max-width: 640px) {
    .pt2__wrap { padding: 4px 16px 6px; border-radius: 20px; }
    .pt2 thead { display: none; }
    .pt2, .pt2 tbody { display: block; }
    .pt2 tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "size btn" "bar btn"; align-items: center; column-gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
    .pt2 tbody tr:last-child { border-bottom: 0; }
    .pt2 th, .pt2 td { padding: 0 !important; border: 0 !important; }
    .pt2 tbody th { grid-area: size; width: auto; }
    .pt2__scale { grid-area: bar; padding-top: 10px !important; }
    .pt2__price { grid-area: btn; }
    .pt2__no { width: 28px; }
    .pt2__size b { font-size: 22px; }
    .pt2__btn { padding: 10px 14px; font-size: 11px; }
}

/* ---- Amenities slider v2: 2½ slides on desktop, expand button, lightbox arrows ---- */
.amx__track { --amx-gap: 16px; gap: var(--amx-gap); grid-auto-columns: calc((100% - 2 * var(--amx-gap)) / 2.5); }
.amx__slide { aspect-ratio: 4 / 5; }
.amx__slide img { transform: none; transition: transform .8s var(--ease); }
.amx__slide:hover img { transform: scale(1.04); }
.amx__slide:not(.is-on) figcaption { opacity: 1; }
.amx__slide figcaption { padding: 22px; padding-top: 80px; }
.amx__slide h3 { font-size: clamp(20px, 1.7vw, 26px); }
.amx__slide p { font-size: 13.5px; }
.amx__expand { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(8, 20, 46, .45); color: #fff; cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.amx__expand svg { width: 17px; height: 17px; }
.amx__expand:hover { background: #fff; color: var(--navy); transform: scale(1.06); }
.lightbox__nav { position: fixed; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--navy); cursor: pointer; }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
@media (max-width: 1080px) { .amx__track { grid-auto-columns: calc((100% - var(--amx-gap)) / 1.5); } }
@media (max-width: 640px) {
    .amx__track { --amx-gap: 12px; grid-auto-columns: 84%; }
    .amx__slide { aspect-ratio: 4 / 5; }
    .amx__slide figcaption { padding: 18px; padding-top: 70px; }
    .amx__expand { width: 38px; height: 38px; top: 12px; right: 12px; }
    .amx__bar { gap: 12px; }
    .amx__dots { gap: 4px; }
    .lightbox__nav { width: 42px; height: 42px; margin-top: -21px; }
    .lightbox__nav--prev { left: 8px; }
    .lightbox__nav--next { right: 8px; }
}

/* ---- Amenities slider v3: landscape slides, the whole image visible (16:10, same as the renders), caption below ---- */
.amx__slide, .amx__slide:hover { aspect-ratio: auto !important; overflow: visible; background: none; border-radius: 0; }
.amx__slide img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; background: #0c1d40; transform: none !important; transition: filter .4s; }
.amx__slide:hover img { filter: brightness(1.06); }
.amx__slide figcaption { position: static; padding: 16px 4px 0 !important; background: none; }
.amx__slide small { margin-bottom: 8px; }
.amx__slide h3 { font-size: clamp(19px, 1.5vw, 23px); }
.amx__slide p { font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.amx__track { border-radius: 0; align-items: start; }
@media (max-width: 640px) {
    .amx__slide img { border-radius: 14px; }
    .amx__slide figcaption { padding-top: 12px !important; }
}

/* ======================= Why Khopoli (v2): photo + five figures ======================= */
.kh { background: var(--white, #fff); }
.kh__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.kh__intro .h2 { margin-bottom: clamp(22px, 3vw, 32px); }
.kh__img { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 11; background: var(--pale); box-shadow: 0 24px 50px rgba(16, 39, 85, .14); }
.kh__img img { width: 100%; height: 100%; object-fit: cover; }
.kh__img figcaption { position: absolute; left: 14px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(8, 20, 46, .55); color: #fff; font-size: 10.5px; letter-spacing: .06em; }
.kh__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(30, 58, 138, .14); }
.kh__list li { display: grid; grid-template-columns: 44px clamp(170px, 17vw, 230px) 1fr; align-items: baseline; column-gap: 18px; padding: clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid rgba(30, 58, 138, .14); position: relative; }
.kh__list li::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: #295ec9; transition: width .5s var(--ease); }
.kh__list li:hover::before { width: 100%; }
.kh__n { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #295ec9; font-variant-numeric: tabular-nums; }
.kh__list b { font-size: clamp(34px, 3.6vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kh__list p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.kh__fine { margin-top: clamp(22px, 3vw, 34px); font-size: 10.5px; }
@media (max-width: 900px) {
    .kh__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .kh__list li { grid-template-columns: 32px 1fr; grid-template-areas: "n b" "n p"; row-gap: 6px; column-gap: 12px; }
    .kh__n { grid-area: n; padding-top: 8px; }
    .kh__list b { grid-area: b; font-size: 34px; }
    .kh__list p { grid-area: p; font-size: 13.5px; }
    .kh__img { border-radius: 18px; }
}

/* Why NeoLiv stats: three equal, centred columns (desktop and mobile) */
.kstats { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin-left: auto; margin-right: auto; }
.kstat { display: flex; flex-direction: column; align-items: center; padding: 32px 16px 4px; }
.kstat span { line-height: 1.6; max-width: 22ch; }
@media (max-width: 760px) {
    .kstats { grid-template-columns: repeat(3, 1fr); }
    .kstat { padding: 22px 6px 4px; }
    .kstat:nth-child(3) { border-left: 1px solid var(--line); }
    .kstat:nth-child(n+3) { border-top: 0; }
    .kstat b { font-size: clamp(24px, 7vw, 34px); }
    .kstat span { margin-top: 8px; font-size: 9.5px; letter-spacing: .12em; }
}
/* longer card headings (e.g. "Master Planning & Architecture") wrap instead of running off the card */
.why-card h3 { white-space: normal !important; }

/* Location: shorter map on desktop */
@media (min-width: 901px) { .loc .map { min-height: 440px; height: 440px; } }

/* ======================= Plot Selection & Pricing (v3): facts + CTA | plot tiles ======================= */
#pricing { background: linear-gradient(180deg, var(--pale, #eef3fb) 0, #fff 100%); }
.pq { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 84px); align-items: center; }
.pq__intro .lead { margin-top: 14px; }
.pq__facts { list-style: none; margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; display: grid; gap: 12px; }
.pq__facts li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink, #14213d); }
.pq__facts svg { flex: none; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(41, 94, 201, .12); color: #295ec9; }
.pq__cta { margin-top: clamp(26px, 3.4vw, 36px); }
.pq__intro .fine { margin-top: 14px; }
.pq__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pq__tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-height: 168px; padding: 22px 22px 20px; border: 1px solid rgba(30, 58, 138, .14); border-radius: 22px; background: #fff; color: var(--navy); text-align: left; cursor: pointer; box-shadow: 0 10px 28px rgba(16, 39, 85, .06); transition: background .3s, color .3s, transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.pq__tile:hover, .pq__tile:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-4px); box-shadow: 0 22px 44px rgba(16, 39, 85, .22); }
.pq__no { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: #295ec9; transition: color .3s; }
.pq__size { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.pq__size b { font-size: clamp(30px, 3vw, 40px); font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pq__size small { font-size: 13px; font-weight: 500; color: var(--muted); transition: color .3s; }
.pq__go { display: inline-flex; align-items: center; gap: 6px; padding-top: 14px; width: 100%; border-top: 1px solid rgba(30, 58, 138, .12); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #295ec9; transition: color .3s, border-color .3s; }
.pq__go svg { width: 14px; height: 14px; margin-left: auto; transition: transform .3s var(--ease); }
.pq__tile:hover .pq__no, .pq__tile:hover .pq__go, .pq__tile:focus-visible .pq__no, .pq__tile:focus-visible .pq__go { color: #9fb8ec; }
.pq__tile:hover .pq__size small, .pq__tile:focus-visible .pq__size small { color: rgba(255, 255, 255, .65); }
.pq__tile:hover .pq__go, .pq__tile:focus-visible .pq__go { border-top-color: rgba(255, 255, 255, .16); }
.pq__tile:hover .pq__go svg { transform: translate(2px, -2px); }
@media (max-width: 900px) {
    .pq { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .pq__grid { gap: 10px; }
    .pq__tile { min-height: 132px; padding: 16px 14px 14px; gap: 12px; border-radius: 18px; }
    .pq__size { flex-direction: column; gap: 2px; }
    .pq__size b { font-size: 28px; }
    .pq__go { padding-top: 10px; font-size: 10px; letter-spacing: .06em; }
    .pq__facts li { font-size: 14px; }
    .pq__cta .btn { width: 100%; justify-content: center; }
}

/* ======================= Why Khopoli (v3): full-bleed photo, brochure-style figures ======================= */
.kh2 { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #0b1a3a; padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(48px, 6vw, 72px); }
.kh2__bg { position: absolute; inset: 0; z-index: -1; }
.kh2__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.kh2__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 18, 42, .78) 0, rgba(8, 18, 42, .35) 45%, rgba(8, 18, 42, .88) 100%); }
.kh2__in { display: flex; flex-direction: column; min-height: clamp(520px, 62vw, 680px); }
.kh2__eyebrow { margin: 0 0 18px; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #9fb8ec; }
.kh2__title { margin: 0; max-width: 18ch; font-size: clamp(32px, 4.4vw, 60px); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; color: #fff; }
.kh2__title em { font-style: normal; color: #cfdcfa; }
.kh2__stats { list-style: none; margin: auto 0 0; padding: clamp(48px, 7vw, 90px) 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px); }
.kh2__stats li { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .55); transition-delay: calc(var(--si, 0) * 90ms); }
.kh2__stats b { display: block; font-size: clamp(34px, 3.6vw, 54px); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kh2__stats p { margin: 12px 0 0; max-width: 22ch; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.kh2__fine { margin: clamp(28px, 4vw, 44px) 0 0; font-size: 10.5px; color: rgba(255, 255, 255, .5); }
@media (max-width: 1000px) {
    .kh2__stats { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
}
@media (max-width: 640px) {
    .kh2__in { min-height: 0; }
    .kh2__stats { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; padding-top: 56px; }
    .kh2__stats li:last-child { grid-column: 1 / -1; }
    .kh2__stats b { font-size: 34px; }
    .kh2__stats p { font-size: 12.5px; }
}

/* Location: drive-times panel matches the map height on desktop; the list scrolls inside it */
@media (min-width: 901px) {
    .loc { align-items: stretch; }
    .loc .drives { height: 440px; display: flex; flex-direction: column; overflow: hidden; }
    .drives__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgba(41, 94, 201, .45) transparent; }
    .drives__list::-webkit-scrollbar { width: 6px; }
    .drives__list::-webkit-scrollbar-track { background: transparent; }
    .drives__list::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(41, 94, 201, .35); }
    .drives__list::-webkit-scrollbar-thumb:hover { background: rgba(41, 94, 201, .6); }
    .drives__list:focus-visible { outline: 2px solid #295ec9; outline-offset: 2px; border-radius: 8px; }
    .drives .drive--hl { flex: none; }
    .drives .btn { flex: none; margin-top: 14px; }
    .drives .fine { flex: none; }
}

/* Why NeoLiv cards: every heading reserves two lines (text sits on the lower one) and every paragraph two lines,
   so numbers, headings and descriptions line up across all three cards even when one title wraps */
.why-card h3 { display: flex; align-items: flex-end; min-height: 2.3em; line-height: 1.15; margin: 8px 0 10px; }
.why-card p { line-height: 1.6; min-height: 3.2em; margin: 0; }
.why-card__no { display: block; }

/* Why NeoLiv stats: labels on one line on desktop; on phones every label gets the same two-line space */
.kstat span { max-width: none; letter-spacing: .2em; }
@media (min-width: 761px) { .kstat span { white-space: nowrap; } }
@media (max-width: 760px) { .kstat span { min-height: 3.2em; letter-spacing: .1em; } }

/* Why Khopoli: more room above the heading, no big empty gap before the figures */
.kh2 { padding-top: clamp(96px, 10vw, 140px); }
.kh2__in { min-height: 0; }
.kh2__stats { margin-top: 0; padding-top: clamp(56px, 7vw, 96px); }

/* Why NeoLiv cards: all three headings on one line on desktop (font scales with the card width) */
@media (min-width: 1001px) {
    .why-card h3 { white-space: nowrap !important; min-height: 0; font-size: clamp(17px, 1.36vw, 19px); letter-spacing: -.01em; }
}

/* Space between the Amenities panel and Why Khopoli */
.kh2 { margin-top: clamp(28px, 4vw, 56px); }
/* Why Khopoli: the photo stays fixed while the section scrolls over it (desktop; clip-path keeps it inside the
   section and on the GPU, so it does not cost a repaint per frame). Touch devices keep a normal background. */
@media (min-width: 901px) and (hover: hover) {
    .kh2 { clip-path: inset(0); }
    .kh2__bg { position: fixed; inset: 0; }
}

/* ======================= Plot Selection & Pricing (v4): centred, six tiles in a row ======================= */
.pz__head { max-width: 760px; margin: 0 auto; text-align: center; }
.pz__head .label { margin-left: auto; margin-right: auto; }
.pz__head .lead { margin: 14px auto 0; }
.pz__facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pz__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(30, 58, 138, .12); font-size: 13px; font-weight: 600; color: var(--navy); }
.pz__facts svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: #295ec9; color: #fff; flex: none; box-sizing: content-box; }
.pz__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.pz__tile { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 12px 18px; border: 1px solid rgba(30, 58, 138, .14); border-radius: 22px; background: #fff; color: var(--navy); text-align: center; cursor: pointer; box-shadow: 0 10px 26px rgba(16, 39, 85, .06); transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease), box-shadow .35s; transition-delay: 0s; }
.pz__tile.rv { transition-delay: calc(var(--si, 0) * 70ms); }
.pz__tile:hover, .pz__tile:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-6px); box-shadow: 0 24px 44px rgba(16, 39, 85, .22); transition-delay: 0s; }
.pz__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--pale, #eef3fb); transition: background .3s; }
.pz__ico::after { content: ""; width: calc(44px * var(--s, 1)); height: calc(44px * var(--s, 1)); border: 2px solid #295ec9; border-radius: 4px; background: rgba(41, 94, 201, .12); transition: border-color .3s, background .3s; }
.pz__tile:hover .pz__ico, .pz__tile:focus-visible .pz__ico { background: rgba(255, 255, 255, .1); }
.pz__tile:hover .pz__ico::after, .pz__tile:focus-visible .pz__ico::after { border-color: #9fb8ec; background: rgba(159, 184, 236, .2); }
.pz__size { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pz__size b { font-size: clamp(24px, 2.1vw, 30px); font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pz__size small { font-size: 12px; color: var(--muted); transition: color .3s; }
.pz__go { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding-top: 12px; border-top: 1px solid rgba(30, 58, 138, .12); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #295ec9; transition: color .3s, border-color .3s; }
.pz__go svg { width: 13px; height: 13px; }
.pz__tile:hover .pz__size small, .pz__tile:focus-visible .pz__size small { color: rgba(255, 255, 255, .65); }
.pz__tile:hover .pz__go, .pz__tile:focus-visible .pz__go { color: #9fb8ec; border-top-color: rgba(255, 255, 255, .16); }
.pz__foot { margin-top: clamp(28px, 3.6vw, 40px); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pz__foot .fine { margin: 0; }
@media (max-width: 1080px) { .pz__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
    .pz__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pz__tile { padding: 20px 10px 14px; border-radius: 18px; gap: 10px; }
    .pz__ico { width: 54px; height: 54px; }
    .pz__ico::after { width: calc(36px * var(--s, 1)); height: calc(36px * var(--s, 1)); }
    .pz__facts li { font-size: 12px; }
    .pz__foot .btn { width: 100%; justify-content: center; }
}
.pz__head { max-width: 920px; }
.pz__head .lead { max-width: 640px; }

/* Amenities slider: the zone tag (e.g. "Serenity zone") sits on the image, top-left; the expand button stays top-right */
.amx__slide figcaption small { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; background: rgba(8, 20, 46, .55); border-color: rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.amx__slide figcaption { padding-top: 14px !important; }
@media (max-width: 640px) { .amx__slide figcaption small { top: 12px; left: 12px; font-size: 9.5px; padding: 4px 9px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 20, 46, .65); } }

/* Amenities slider: arrows on the left of the progress bar (no counter); arrows visible on phones too */
.amx__bar { gap: clamp(14px, 2vw, 22px); }
.amx__nav { display: flex !important; flex: none; }
@media (max-width: 640px) { .amx__arrow { width: 40px; height: 40px; } .amx__arrow svg { width: 18px; height: 18px; } }

/* Location on phones: the grid column may not grow to the Nearby chips' width (that pushed the panel past the
   screen edge); the chips scroll sideways inside the map instead, and the panel keeps the same side padding */
@media (max-width: 900px) {
    .loc { grid-template-columns: minmax(0, 1fr); }
    .loc .map, .loc .drives { min-width: 0; max-width: 100%; }
    .map__near { max-width: calc(100% - 20px); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .map__near::-webkit-scrollbar { display: none; }
    .map__near > * { flex: none; }
}
@media (max-width: 640px) {
    #location .wrap { padding-left: 18px; padding-right: 18px; }
    .loc .drives { padding: 14px; }
}

/* Hide the injected third-party badge iframe */
#nl-badge-frame { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; pointer-events: none !important; }

/* Header over the hero: no band, it sits seamlessly on the photo (the white bar only appears after scrolling) */
.hdr:not(.scrolled) .hdr__in { background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hdr:not(.scrolled) .nav a, .hdr:not(.scrolled) .logo span { text-shadow: 0 1px 10px rgba(6, 16, 38, .45); }
.hdr:not(.scrolled) .logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(6, 16, 38, .4)); }
.hdr:not(.scrolled) .logo--gf img { filter: drop-shadow(0 1px 8px rgba(6, 16, 38, .4)) !important; }

/* Header is not sticky: it stays on the hero and scrolls away with the page */
.hdr { position: absolute; }
html { scroll-padding-top: 24px; }

/* Hero: Club Forest render; on phones keep the glass entrance and the fountain drive in frame */
.hero__media img { object-position: 50% 50%; }
@media (max-width: 720px) { .hero__media img { object-position: 56% 50%; } }

/* ======================= Plot Selection & Pricing (v5): plot size selector, no boxes ======================= */
.ps { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.ps__intro .lead { margin-top: 14px; }
.ps__facts { display: flex; flex-wrap: wrap; gap: 6px 0; margin: clamp(20px, 2.6vw, 28px) 0 0; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.ps__facts span { display: inline-flex; align-items: center; }
.ps__facts span + span::before { content: ""; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: #295ec9; opacity: .6; }
.ps__pick { --ps-k: .775; --ps-t: .333; position: relative; }
.ps__read { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(30px, 4vw, 52px) 0 clamp(26px, 3vw, 40px); }
.ps__orb { position: absolute; z-index: -1; left: 50%; top: 50%; width: clamp(220px, 26vw, 340px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(var(--ps-k)); background: radial-gradient(circle at 50% 45%, rgba(41, 94, 201, .16), rgba(41, 94, 201, .05) 62%, transparent 72%); transition: transform .6s var(--ease); }
.ps__orb::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(41, 94, 201, .28); }
.ps__kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #295ec9; }
.ps__num { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0; color: var(--navy); }
.ps__num b { font-size: clamp(64px, 8.4vw, 124px); font-weight: 300; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ps__num small { font-size: clamp(14px, 1.3vw, 18px); font-weight: 500; color: var(--muted); }
.ps__conv { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ps__track { position: relative; height: 64px; margin: 0 18px; }
.ps__line { position: absolute; left: 0; right: 0; top: 14px; height: 2px; border-radius: 2px; background: rgba(30, 58, 138, .14); }
.ps__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #9fb8ec, #295ec9); transform-origin: left; transition: transform .5s var(--ease); }
.ps__stop { position: absolute; top: 0; left: calc(var(--p) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 4px; border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit; }
.ps__stop i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(30, 58, 138, .28); transition: transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s; }
.ps__stop span { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: color .3s; white-space: nowrap; }
.ps__stop.is-past i { background: #295ec9; border-color: #295ec9; }
.ps__stop[aria-checked="true"] i { transform: scale(1.5); background: #fff; border-color: #295ec9; border-width: 3px; box-shadow: 0 0 0 6px rgba(41, 94, 201, .14); }
.ps__stop[aria-checked="true"] span { color: var(--navy); }
.ps__stop:hover i { border-color: #295ec9; }
.ps__stop:hover span { color: var(--navy); }
.ps__stop:focus-visible { outline: none; }
.ps__stop:focus-visible i { box-shadow: 0 0 0 4px rgba(41, 94, 201, .35); }
.ps__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin-top: clamp(22px, 3vw, 32px); }
.ps__cta .btn span { font-variant-numeric: tabular-nums; }
.ps__link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; border-bottom: 1px solid rgba(41, 94, 201, .35); background: none; font: inherit; font-size: 14px; font-weight: 600; color: #295ec9; cursor: pointer; transition: border-color .25s, color .25s; }
.ps__link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.ps__link:hover { color: var(--navy); border-bottom-color: var(--navy); }
.ps__link:hover svg { transform: translate(2px, -2px); }
.ps__fine { margin: 16px 0 0; text-align: center; }
@media (max-width: 900px) {
    .ps { grid-template-columns: 1fr; gap: 12px; }
    .ps__intro { text-align: center; }
    .ps__intro .label { margin-left: auto; margin-right: auto; }
    .ps__intro .lead { margin-left: auto; margin-right: auto; }
    .ps__facts { justify-content: center; }
}
@media (max-width: 640px) {
    .ps__facts { flex-direction: column; align-items: center; gap: 6px; font-size: 13px; }
    .ps__facts span + span::before { display: none; }
    .ps__track { margin: 0 14px; }
    .ps__stop span { font-size: 11px; }
    .ps__cta { flex-direction: column; gap: 14px; }
    .ps__cta .btn { width: 100%; justify-content: center; }
}
/* facts as a short stacked list with a thin rule marker (no chips) */
.ps__facts { flex-direction: column; align-items: flex-start; gap: 10px; }
.ps__facts span::before, .ps__facts span + span::before { display: block; border-radius: 0; opacity: 1; content: ""; width: 18px; height: 1px; margin: 0 12px 0 0; background: #295ec9; }
@media (max-width: 900px) { .ps__facts { align-items: center; } }

/* ======================= Plot Selection & Pricing (v6): image + plot-size rows with area bars ======================= */
#pricing { background: #fff; }
.pv { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.pv__media { position: relative; margin: 0; height: 100%; min-height: 560px; border-radius: 28px; overflow: hidden; background: var(--pale); }
.pv__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8, 18, 42, .72)); }
.pv__media figcaption { position: absolute; z-index: 1; left: clamp(20px, 2.6vw, 32px); right: 20px; bottom: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 6px; color: #fff; }
.pv__media figcaption b { font-size: clamp(34px, 3.4vw, 48px); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.pv__media figcaption span { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.pv__body .lead { margin-top: 14px; }
.pv__list { list-style: none; margin: clamp(24px, 3vw, 34px) 0 0; padding: 0; border-top: 1px solid rgba(30, 58, 138, .12); }
.pv__list li { border-bottom: 1px solid rgba(30, 58, 138, .12); }
.pv__row { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2vw, 26px); width: 100%; padding: 15px 4px; border: 0; background: none; font: inherit; color: var(--navy); text-align: left; cursor: pointer; }
.pv__size { display: flex; align-items: baseline; gap: 6px; }
.pv__size b { font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: color .3s; }
.pv__size small { font-size: 12px; color: var(--muted); }
.pv__bar { position: relative; height: 6px; border-radius: 6px; background: rgba(30, 58, 138, .07); overflow: hidden; }
.pv__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, #9fb8ec, #295ec9); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(var(--si) * 90ms + .2s), filter .3s; }
.pv__list.in .pv__bar i, .no-js .pv__bar i { transform: none; }
.pv__go { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #295ec9; white-space: nowrap; }
.pv__go svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.pv__row:hover .pv__size b, .pv__row:focus-visible .pv__size b { color: #295ec9; }
.pv__row:hover .pv__go svg, .pv__row:focus-visible .pv__go svg { transform: translateX(4px); }
.pv__row:hover .pv__bar i { filter: saturate(1.4) brightness(.95); }
.pv__row:focus-visible { outline: 2px solid #295ec9; outline-offset: 2px; border-radius: 8px; }
.pv__legend { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); }
.pv__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(24px, 3vw, 32px); }
.pv__foot .fine { margin: 0; line-height: 1.6; }
@media (max-width: 900px) {
    .pv { grid-template-columns: 1fr; gap: 28px; }
    .pv__media { min-height: 0; aspect-ratio: 16 / 10; height: auto; border-radius: 22px; }
}
@media (max-width: 640px) {
    .pv__row { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; padding: 14px 2px; }
    .pv__size { flex-direction: column; gap: 2px; }
    .pv__size b { font-size: 22px; }
    .pv__go { font-size: 0; gap: 0; }
    .pv__go svg { width: 18px; height: 18px; }
    .pv__foot { flex-direction: column; align-items: stretch; }
    .pv__foot .btn { justify-content: center; }
}

/* Pricing v6.1: no area bars, sizes in two columns, whole section fits one screen */
#pricing { padding-top: clamp(48px, 7vh, 80px); padding-bottom: clamp(48px, 7vh, 80px); }
.pv { align-items: stretch; }
.pv__media { min-height: 0; height: auto; max-height: calc(100svh - 2 * clamp(48px, 7vh, 80px)); }
.pv__body { display: flex; flex-direction: column; justify-content: center; }
.pv__body .h2 { margin-bottom: 0; }
.pv__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 40px); margin-top: clamp(18px, 2.6vh, 28px); border-top: 0; }
.pv__list li { border-top: 1px solid rgba(30, 58, 138, .12); border-bottom: 0; }
.pv__list li:nth-last-child(-n+2) { border-bottom: 1px solid rgba(30, 58, 138, .12); }
.pv__row { grid-template-columns: auto 1fr; padding: clamp(10px, 1.6vh, 15px) 2px; }
.pv__go { justify-self: end; }
.pv__foot { margin-top: clamp(18px, 2.6vh, 28px); }
@media (max-width: 900px) {
    .pv__media { max-height: none; }
}
@media (max-width: 640px) {
    .pv__list { grid-template-columns: 1fr; }
    .pv__list li:nth-last-child(2) { border-bottom: 0; }
    .pv__row { grid-template-columns: auto 1fr; }
    .pv__size { flex-direction: row; gap: 6px; }
    .pv__go { font-size: 11px; gap: 6px; }
    .pv__go svg { width: 15px; height: 15px; }
}
.pv__body > .label { align-self: flex-start; }
.pv__size, .pv__size small, .pv__go { white-space: nowrap; }
.pv__go svg { flex: none; }
@media (max-width: 640px) {
    .pv { gap: 20px; }
    .pv__media { aspect-ratio: 2 / 1; border-radius: 18px; }
    .pv__media figcaption b { font-size: 28px; }
    .pv__row { padding: 11px 2px; }
    .pv__size b { font-size: 20px; }
    .pv__body .lead { font-size: 14px; }
}
/* plots image: keep the tree-lined plot avenue (top) and the greens in frame */
.pv__media img { object-position: 50% 20%; }

/* Hero: a light overlay (about half the original strength) plus a soft text shadow keeps the white text readable */
.hero__shade { display: block; background:
    linear-gradient(180deg, rgba(12, 29, 64, .35) 0%, rgba(12, 29, 64, 0) 22%),
    linear-gradient(90deg, rgba(12, 29, 64, .45) 0%, rgba(12, 29, 64, .12) 55%, rgba(12, 29, 64, 0) 100%),
    linear-gradient(0deg, rgba(12, 29, 64, .55) 0%, rgba(12, 29, 64, 0) 40%); }
.hero .eyebrow, .hero h1, .hero__sub { text-shadow: 0 2px 18px rgba(6, 14, 32, .55), 0 1px 3px rgba(6, 14, 32, .35); }

/* FAQ "Still have a question?": plain text and button, no box */
.help { padding: 0; border-radius: 0; background: none; color: var(--navy); }
.help p { color: var(--muted); }

/* Pricing (v6.2): "Request price" labels removed; sizes sit in an even 3-column grid (2 on phones), each still opens the price form */
.pv__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv__list li:nth-last-child(-n+2) { border-bottom: 0; }
.pv__list li:nth-last-child(-n+3) { border-bottom: 1px solid rgba(30, 58, 138, .12); }
.pv__row { display: flex; align-items: baseline; justify-content: flex-start; padding: clamp(14px, 2vh, 20px) 2px; }
@media (max-width: 640px) {
    .pv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
    .pv__list li:nth-last-child(-n+3) { border-bottom: 0; }
    .pv__list li:nth-last-child(-n+2) { border-bottom: 1px solid rgba(30, 58, 138, .12); }
}

/* Pricing (v6.3): decluttered - no image caption or fade, one "sq. ft." unit line, sizes as a clean number grid without rules */
.pv__media::after { display: none; }
.pv__unit { margin: clamp(22px, 3vh, 32px) 0 0; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pv__list, .pv__list li, .pv__list li:nth-last-child(-n+2), .pv__list li:nth-last-child(-n+3) { border: 0; }
.pv__list { margin-top: 10px; row-gap: 4px; }
.pv__row { padding: 10px 0; }
.pv__size b { font-size: clamp(30px, 2.8vw, 40px); font-weight: 300; position: relative; }
.pv__size b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.pv__row:hover .pv__size b::after, .pv__row:focus-visible .pv__size b::after { transform: scaleX(1); }
@media (max-width: 640px) {
    .pv__list, .pv__list li, .pv__list li:nth-last-child(-n+2), .pv__list li:nth-last-child(-n+3) { border: 0; }
    .pv__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
    .pv__size b { font-size: 26px; }
}

/* ======================= Plot Selection & Pricing (v7): heading + intro row, wide render, sizes in one divided row ======================= */
.pr7__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; }
.pr7__head .label { margin-bottom: 0; }
.pr7__head .h2 { margin-top: 14px; }
.pr7__intro .lead { margin: 0; max-width: 46ch; }
.pr7__intro .btn { margin-top: 20px; }
.pr7__media { margin: clamp(26px, 4vh, 44px) 0 0; width: 100%; aspect-ratio: 1600 / 640; max-height: 38svh; border-radius: 28px; overflow: hidden; background: var(--pale); }
.pr7__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pr7__sizes { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px clamp(28px, 4vw, 56px); margin-top: clamp(22px, 3.4vh, 36px); }
.pr7__unit { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pr7__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pr7__list li + li { border-left: 1px solid rgba(30, 58, 138, .14); }
.pr7__size { display: block; width: 100%; padding: 6px 0; border: 0; background: none; font: inherit; font-size: clamp(26px, 2.7vw, 40px); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--navy); text-align: center; cursor: pointer; transition: color .3s; }
.pr7__size:hover, .pr7__size:focus-visible { color: #295ec9; }
.pr7__size:focus-visible { outline: 2px solid #295ec9; outline-offset: 2px; border-radius: 8px; }
@media (max-width: 900px) {
    .pr7__head { grid-template-columns: 1fr; }
    .pr7__media { aspect-ratio: 16 / 9; max-height: none; border-radius: 22px; }
    .pr7__sizes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .pr7__intro .btn { width: 100%; justify-content: center; }
    .pr7__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
    .pr7__list li:nth-child(4) { border-left: 0; }
    .pr7__size { font-size: 26px; }
}

/* ======================= Plot Selection & Pricing (v8): text beside an uncropped render, sizes as a full-width tap row ======================= */
#pricing { background: linear-gradient(180deg, #fff 0%, #f3f6fc 100%); }
.pr8 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text media" "sizes sizes"; gap: clamp(28px, 4.4vh, 48px) clamp(32px, 5vw, 80px); align-items: center; }
.pr8__text { grid-area: text; }
.pr8__text .h2 { margin-top: 14px; }
.pr8__text .lead { margin: 16px 0 0; max-width: 40ch; }
.pr8__text .btn { margin-top: 26px; }
.pr8__media { grid-area: media; margin: 0; aspect-ratio: 16 / 10; border-radius: 26px; overflow: hidden; background: var(--pale); box-shadow: 0 30px 60px -36px rgba(12, 29, 64, .45); }
.pr8__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pr8__sizes { grid-area: sizes; }
.pr8__unit { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.pr8__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(30, 58, 138, .16); border-bottom: 1px solid rgba(30, 58, 138, .16); }
.pr8__list li + li { border-left: 1px solid rgba(30, 58, 138, .16); }
.pr8__size { display: block; width: 100%; padding: clamp(16px, 2.6vh, 24px) 0; border: 0; background: transparent; font: inherit; font-size: clamp(24px, 2.4vw, 36px); font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--navy); text-align: center; cursor: pointer; transition: background .3s, color .3s; }
.pr8__size:hover, .pr8__size:focus-visible { background: var(--navy); color: #fff; }
.pr8__size:focus-visible { outline: none; }
@media (max-width: 900px) {
    .pr8 { grid-template-columns: 1fr; grid-template-areas: "text" "media" "sizes"; }
    .pr8__media { border-radius: 20px; }
}
@media (max-width: 640px) {
    .pr8__text .btn { width: 100%; justify-content: center; }
    .pr8__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pr8__list li:nth-child(4) { border-left: 0; }
    .pr8__list li:nth-child(n+4) { border-top: 1px solid rgba(30, 58, 138, .16); }
    .pr8__size { font-size: 24px; padding: 18px 0; }
}

/* Pricing (v8) on mobile: "Get Cost Sheet" moves below the plot sizes */
@media (max-width: 900px) {
    .pr8 { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .pr8__text { display: contents; }
    .pr8__text .label { align-self: flex-start; }
    .pr8__media { order: 1; margin-top: 28px; }
    .pr8__sizes { order: 2; margin-top: 28px; }
    .pr8__cta { order: 3; margin-top: 24px; }
    .pr8__text .btn { margin-top: 0; }
}

/* Hero headline: "Is Home" in white like the rest of the line */
.hero h1 em { color: #fff; }

/* Desktop navbar menu items: 1px larger (13px -> 14px); the nav is hidden below 1181px */
@media (min-width: 1181px) { .nav { font-size: 14px; } }

/* Header logo: bigger (was 42px desktop / 36px phones) */
.hdr .logo--gf img, .hdr.scrolled .logo--gf img { height: 54px; }
@media (max-width: 720px) { .hdr .logo--gf img, .hdr.scrolled .logo--gf img { height: 42px; } }

/* Pricing sizes: "sq. ft." small after each number */
.pr8__size small { margin-left: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); transition: color .3s; }
.pr8__size:hover small, .pr8__size:focus-visible small { color: rgba(255, 255, 255, .75); }
@media (max-width: 640px) {
    .pr8__size { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 22px; }
    .pr8__size small { margin-left: 0; font-size: 11px; }
}

/* Call: sticky on the right edge just above WhatsApp, same shape; the number slides out on hover */
.call-float {
    position: fixed; right: 0; top: calc(50% - 64px); transform: translateY(-50%); z-index: 50;
    display: flex; align-items: center; flex-direction: row-reverse; height: 54px; padding: 0 14px; gap: 0;
    border-radius: 16px 0 0 16px; background: var(--navy); color: #fff; box-shadow: -6px 10px 26px rgba(12, 29, 64, .3);
    transition: gap .35s var(--ease), padding .35s var(--ease), box-shadow .3s;
}
.call-float svg { width: 26px; height: 26px; flex: none; }
.call-float span { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 14px; font-weight: 600; opacity: 0; transition: max-width .4s var(--ease), opacity .3s; }
.call-float:hover, .call-float:focus-visible { gap: 10px; padding: 0 16px 0 18px; box-shadow: 0 14px 34px rgba(12, 29, 64, .4); }
.call-float:hover span, .call-float:focus-visible span { max-width: 180px; opacity: 1; }

/* Header: MahaRERA details at the top right, as plain white text with the QR beside it (like the NeoLiv Grand Park site) */
.hdr__rera { display: flex; align-items: center; gap: 12px; margin-left: auto; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, .7); }
.hdr__rera p { margin: 0; font-size: 12px; line-height: 1.45; text-align: right; }
.hdr__rera-l, .hdr__rera b { white-space: nowrap; }
.hdr__rera b { font-weight: 600; }
.hdr__rera-w { display: block; white-space: nowrap; }
.hdr__rera a { color: #fff; }
.hdr__rera a:hover { text-decoration: underline; }
.hdr__rera img { width: 64px; height: 64px; flex: none; border: 2px solid #fff; border-radius: 5px; }
@media (max-width: 1180px) { .hdr__rera { margin-right: 12px; } .hdr__rera + .burger { margin-left: 0; } }
@media (max-width: 720px) {
    .wa-float, .call-float { display: none; }
    .hdr__in { gap: 10px; }
    .hdr__rera { gap: 8px; margin-right: 0; }
    .hdr__rera p { font-size: 9px; line-height: 1.35; }
    .hdr__rera-l { display: block; }
    .hdr__rera-w { display: none; }
    .hdr__rera img { width: 44px; height: 44px; border-radius: 4px; }
}
.burger { flex: none; }
@media (max-width: 440px) {
    .hdr__in { gap: 8px; padding-left: 14px; padding-right: 6px; }
    .hdr .logo--gf img, .hdr.scrolled .logo--gf img { height: 34px; }
    .hdr__rera { gap: 6px; }
    .hdr__rera p { font-size: 8px; }
    .hdr__rera img { width: 38px; height: 38px; }
    .burger { width: 40px; height: 40px; }
    .burger span { left: 12px; right: 12px; }
    .burger span:nth-child(1) { top: 16px; }
    .burger span:nth-child(2) { top: 23px; }
}

/* Header MahaRERA: text on top, QR code below it, pinned to the top right corner */
.hdr__rera { flex-direction: column; align-items: flex-end; align-self: flex-start; gap: 10px; margin-top: 12px; }
.hdr__rera img { width: 72px; height: 72px; }
@media (max-width: 720px) {
    .hdr__rera { gap: 6px; margin-top: 10px; }
    .hdr__rera img { width: 48px; height: 48px; }
}
@media (max-width: 440px) { .hdr__rera img { width: 42px; height: 42px; } }

/* Phones: MahaRERA block sits below the menu button, right-aligned */
@media (max-width: 720px) {
    .hdr__in { position: relative; }
    .hdr__rera { position: absolute; top: calc(100% + 6px); right: 8px; margin: 0; }
    .hdr__rera + .burger { margin-left: auto; }
}
@media (max-width: 440px) { .hdr__rera { right: 6px; } }

/* WhatsApp hidden for now: the call button takes its place on the right edge, the phone bar has two actions */
.call-float { top: 50%; }
/* Video Call also hidden in the phone bar: one full-width Call button */
@media (max-width: 720px) { .mbar { grid-template-columns: 1fr; } }

/* Why NeoLiv stats now sit above the three cards: line below the intro text, space before the cards */
.kstats { margin-top: 0; margin-bottom: clamp(40px, 5vw, 64px); }

/* Footer MahaRERA block hidden: brand on the left, contact on the right */


/* ======================= Footer v2: logo + call button / location row / disclaimer / bar ======================= */
.ftr__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; padding-bottom: clamp(28px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.ftr__logo { width: 320px; margin: 0; }
.ftr__call { display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; border-radius: 999px; background: var(--navy); color: #fff; transition: background .25s, transform .25s var(--ease); }
.ftr__call svg { width: 44px; height: 44px; flex: none; padding: 12px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ftr__call span { font-size: 18px; font-weight: 600; letter-spacing: .01em; line-height: 1.2; }
.ftr__call small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.ftr a.ftr__call:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.ftr__loc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 22px 0; }
.ftr__loc .ftr__addr { max-width: none; margin: 0; align-items: center; color: var(--ink); }
.ftr__loc .ftr__addr svg { margin-top: 0; }
.ftr__loc .ftr__map { display: inline-block; margin: 0; }
.ftr__bar { justify-content: space-between; margin-top: 24px; }
@media (max-width: 720px) {
    .ftr__top { flex-direction: column; align-items: flex-start; }
    .ftr__logo { width: 260px; }
    .ftr__call { width: 100%; }
    .ftr__loc { flex-direction: column; align-items: flex-start; }
    .ftr__loc .ftr__addr { align-items: flex-start; }
    .ftr__loc .ftr__map { margin-left: 28px; }
    .ftr__bar { justify-content: center; }
}

/* ======================= Footer v3: compact, logo · location · call in one row ======================= */
.ftr { padding-top: clamp(28px, 3vw, 36px); padding-bottom: calc(18px + var(--mbar-h)); }
.ftr__top { flex-wrap: nowrap; gap: 20px 36px; padding-bottom: 22px; }
.ftr__logo { width: 210px; flex: none; }
.ftr__loc { flex: 1; justify-content: center; gap: 4px 18px; padding: 0; font-size: 13.5px; }
.ftr__call { flex: none; gap: 10px; padding: 6px 18px 6px 6px; }
.ftr__call svg { width: 34px; height: 34px; padding: 9px; }
.ftr__call span { font-size: 15px; }
.ftr__call small { display: none; }
.ftr__disc { margin-top: 18px; border-radius: 12px; }
.ftr__disc summary { min-height: 42px; padding: 0 14px; font-size: 12.5px; }
.ftr__bar { margin-top: 14px; padding-top: 0; border-top: 0; font-size: 12px; }
@media (max-width: 960px) {
    .ftr__top { flex-wrap: wrap; }
    .ftr__loc { order: 3; flex-basis: 100%; justify-content: flex-start; }
}
@media (max-width: 720px) {
    .ftr__top { flex-direction: row; align-items: center; gap: 16px; padding-bottom: 18px; }
    .ftr__logo { width: 170px; }
    .ftr__call { width: auto; }
    .ftr__call span { font-size: 0; }
    .ftr__call { padding: 6px; }
    .ftr__loc .ftr__map { margin-left: 28px; }
}

/* ======================= Amenities (v3): photo collage, then the full list by zone ======================= */
.amp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 210px); grid-auto-flow: row dense; gap: 10px; }
.amp__t { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #0b1735; }
.amp__t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.amp__t::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6, 14, 34, .78)); }
.amp__t figcaption { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 13px; font-size: 15px; font-weight: 600; color: #fff; }
.amp__t:hover img { transform: scale(1.05); }
.amp__t--xl { grid-column: span 2; grid-row: span 2; }
.amp__t--xl figcaption { font-size: clamp(18px, 1.7vw, 24px); left: 20px; bottom: 18px; }
.amp__t--w { grid-column: span 2; }
.aml { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid rgba(255, 255, 255, .14); }
.aml h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.aml h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--z); }
.aml ul { margin: 0; padding: 0; list-style: none; }
.aml li { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.aml__z--club { --z: #e2b878; }
.aml__z--active { --z: #7fb4ff; }
.aml__z--ser { --z: #c5a8f0; }
.aml__z--green { --z: #7fd39a; }
.aml__z--orch { --z: #f2a65a; }
#amenities .aml + .fine { margin-top: 24px; }
@media (max-width: 1000px) { .aml { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .amp { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; gap: 8px; }
    .amp__t { border-radius: 14px; }
    .amp__t figcaption { left: 12px; bottom: 10px; font-size: 13px; }
    .aml { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .aml li { font-size: 13px; padding: 7px 0; }
}
.amp__t--xl img { object-position: 22% 50%; }   /* keeps the "Club Forest" sign in the crop */

/* Amenities list (v3.1): zone cards with pill chips */
.aml { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 0; border-top: 0; margin-top: 12px; }
.aml__z { padding: clamp(18px, 2vw, 24px); border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-top: 3px solid var(--z); }
.aml__z--club { grid-column: span 2; }
.aml h3 { justify-content: space-between; margin: 0 0 16px; font-size: 12px; letter-spacing: .16em; }
.aml h3::before { display: none; }
.aml h3 span { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: none; color: rgba(255, 255, 255, .5); }
.aml ul { display: flex; flex-wrap: wrap; gap: 8px; }
.aml li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .04); font-size: 13.5px; line-height: 1.2; color: #fff; transition: background .25s, border-color .25s; }
.aml li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--z); }
.aml li:hover { background: rgba(255, 255, 255, .1); border-color: var(--z); }
@media (max-width: 1000px) { .aml { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aml__z--club { grid-column: span 2; } }
@media (max-width: 720px) {
    .aml { grid-template-columns: 1fr; gap: 10px; }
    .aml__z--club { grid-column: auto; }
    .aml__z { padding: 16px; border-radius: 14px; }
    .aml ul { gap: 6px; }
    .aml li { padding: 7px 12px 7px 10px; font-size: 12.5px; }
}

/* Amenities (v3.2, compact): shorter photo rows; the list is one panel, one row per zone */
.amp { grid-auto-rows: clamp(118px, 10.5vw, 150px); gap: 8px; }
.aml { display: block; margin-top: 10px; padding: 4px clamp(16px, 2vw, 22px); border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.aml__z, .aml__z--club { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 16px; grid-column: auto; padding: 11px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: none; }
.aml__z:last-child { border-bottom: 0; }
.aml h3 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; margin: 0; padding-left: 14px; position: relative; font-size: 11px; }
.aml h3::before { display: block; position: absolute; left: 0; top: 4px; }
.aml h3 span { font-size: 10.5px; letter-spacing: .04em; }
.aml ul { gap: 6px; }
.aml li { padding: 5px 11px 5px 9px; gap: 6px; font-size: 12.5px; }
.aml li::before { width: 5px; height: 5px; }
@media (max-width: 720px) {
    .amp { grid-auto-rows: 96px; gap: 6px; }
    .aml { padding: 2px 14px; border-radius: 14px; }
    .aml__z, .aml__z--club { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
    .aml h3 { flex-direction: row; align-items: baseline; gap: 8px; }
    .aml li { padding: 4px 9px 4px 8px; font-size: 11.5px; }
}
/* Phones: the photos become one swipeable row, so the section stays short */
@media (max-width: 720px) {
    .aml h3 { justify-content: flex-start; }
    .amp { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
    .amp::-webkit-scrollbar { display: none; }
    .amp__t, .amp__t--xl, .amp__t--w { flex: 0 0 72%; height: 190px; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
    .amp__t--xl figcaption { font-size: 16px; left: 12px; bottom: 10px; }
}

/* ======================= Architects: intro + two logo cards ======================= */
.arch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.arch .head { margin-bottom: 0; }
.arch__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.arch__card { margin: 0; border-radius: 22px; overflow: hidden; background: var(--white); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.arch__card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(16, 32, 80, .35); }
.arch__logo { display: grid; place-items: center; height: clamp(150px, 14vw, 190px); padding: 20px; background: #fff; border-bottom: 1px solid var(--line); }
.arch__logo img { max-width: 78%; max-height: 100%; object-fit: contain; }
.arch__mark { color: var(--navy); font-weight: 700; text-align: left; }
.arch__mark--hc { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.05; letter-spacing: -.01em; }
.arch__mark--hc small { display: block; margin-top: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.arch__mark--bdp { font-size: clamp(40px, 4vw, 56px); letter-spacing: -.02em; }
.arch__card figcaption { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.arch__card figcaption small { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.arch__card figcaption b { font-size: 15px; font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .arch { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 520px) { .arch__cards { gap: 10px; } .arch__logo { height: 130px; padding: 14px; } .arch__card figcaption { padding: 12px 14px 14px; } .arch__card figcaption b { font-size: 13.5px; } .arch__card figcaption small { font-size: 9px; } }
/* Amenities list on phones: a preview with a fade, "View all 66 amenities" expands it */
.aml__more { display: none; }
@media (max-width: 720px) {
    .aml { position: relative; max-height: 380px; overflow: hidden; }
    .aml::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(180deg, rgba(20, 38, 92, 0), #14265c); pointer-events: none; }
    .aml.is-open { max-height: none; }
    .aml.is-open::after { display: none; }
    .aml__more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
}
.arch__logo img { width: auto; height: 62%; max-width: 72%; }
.arch__logo .arch__img--bdp { height: auto; width: 46%; }
/* Amenities photos: small expand button, top right */
.amp__expand { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(8, 20, 46, .45); color: #fff; cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.amp__expand svg { width: 13px; height: 13px; }
.amp__expand:hover, .amp__expand:focus-visible { background: #fff; color: var(--navy); transform: scale(1.08); }
@media (max-width: 720px) { .amp__expand { top: 8px; right: 8px; width: 28px; height: 28px; } }
/* Desktop: amenity photo captions 2px smaller */
@media (min-width: 721px) {
    .amp__t figcaption { font-size: 13px; }
    .amp__t--xl figcaption { font-size: clamp(16px, calc(1.7vw - 2px), 22px); }
}

/* Desktop call button: the phone icon rings ("tring tring") every few seconds, with a soft pulse ring */
@keyframes gfRing {
    0%, 60%, 100% { transform: rotate(0); }
    4%, 12%, 20%, 28% { transform: rotate(-16deg); }
    8%, 16%, 24%, 32% { transform: rotate(16deg); }
    36% { transform: rotate(0); }
}
@keyframes gfRingPulse {
    0% { box-shadow: 0 0 0 0 rgba(41, 94, 201, .55); }
    35% { box-shadow: 0 0 0 12px rgba(41, 94, 201, 0); }
    100% { box-shadow: 0 0 0 0 rgba(41, 94, 201, 0); }
}
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
    .call-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: gfRingPulse 3s ease-out infinite; }
    .call-float svg { transform-origin: 50% 50%; animation: gfRing 3s ease-in-out infinite; }
    .call-float:hover::before, .call-float:hover svg, .call-float:focus-visible::before, .call-float:focus-visible svg { animation: none; }
}
/* Phones: architect captions on two lines ("International / Landscape Consultant") */
@media (max-width: 520px) {
    .arch__card figcaption small { letter-spacing: .08em; }
    .arch__br { display: block; }
}
@media (max-width: 520px) {
    .arch__card figcaption { padding: 12px 10px 13px; }
    .arch__card figcaption small { font-size: 8.5px; letter-spacing: .03em; }
}
@media (max-width: 340px) { .arch__card figcaption { padding: 11px 8px 12px; } .arch__card figcaption small { font-size: 7.5px; letter-spacing: 0; } }

/* Enquiry form: consent line */
.enq_form .consent { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.enq_form .consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
.enq_form .consent .linkish { font: inherit; color: var(--navy); }

/* Hero (desktop): a darker wash behind the headline and buttons, bottom-left, so the text reads on the busy render */
@media (min-width: 901px) {
    .hero__shade { background:
        radial-gradient(ellipse 62% 58% at 14% 86%, rgba(8, 20, 46, .62) 0%, rgba(8, 20, 46, .3) 55%, rgba(8, 20, 46, 0) 100%),
        linear-gradient(180deg, rgba(12, 29, 64, .35) 0%, rgba(12, 29, 64, 0) 22%),
        linear-gradient(90deg, rgba(12, 29, 64, .5) 0%, rgba(12, 29, 64, .14) 55%, rgba(12, 29, 64, 0) 100%),
        linear-gradient(0deg, rgba(12, 29, 64, .62) 0%, rgba(12, 29, 64, 0) 42%); }
}

/* ======================= Amenities v4 (client design reference): collage, tabs / accordion, all-66 sheet ======================= */
#amenities { --am-gold: #c9a76b; --am-card: #1b3466; --am-line: rgba(255, 255, 255, .12); }
.amh { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.4vw, 44px); }
.amh .h2 { margin: 14px 0 0; }
.amh__stats { display: flex; margin: 0; }
.amh__stats > p { display: flex; flex-direction: column; margin: 0; align-items: flex-end; padding: 0 0 0 clamp(20px, 2.6vw, 36px); }
.amh__stats > p + p { margin-left: clamp(20px, 2.6vw, 36px); border-left: 1px solid var(--am-line); }
.amh__stats span { max-width: 19ch; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: rgba(255, 255, 255, .6); text-align: right; }
.amh__stats b { margin: 0 0 6px; font-size: clamp(34px, 3.2vw, 44px); font-weight: 300; line-height: 1; color: var(--am-gold); }

/* collage: Club Forest large, four tiles beside it */
.amp.amp--v4 { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, clamp(150px, 15vw, 210px)); grid-auto-rows: auto; gap: 12px; margin: 0; padding: 0; overflow: visible; }
.amp--v4 .amp__t { border-radius: 14px; }
.amp--v4 .amp__t--xl { grid-column: 1; grid-row: 1 / span 2; }
.amp--v4 .amp__t, .amp--v4 .amp__t--xl { flex: none; height: auto; }
.amp--v4 .amp__t figcaption { left: 16px; bottom: 14px; font-size: 15px; font-weight: 500; }
.amp--v4 .amp__t--xl figcaption { left: 20px; bottom: 18px; font-size: clamp(17px, 1.5vw, 21px); }
.amp__dots { display: none; }

/* tabs (desktop) */
.amt { margin-top: clamp(30px, 3.6vw, 48px); }
.amt__tabs { display: flex; gap: clamp(18px, 2.4vw, 34px); border-bottom: 1px solid var(--am-line); }
.amt__tab { position: relative; padding: 0 0 14px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .62); white-space: nowrap; cursor: pointer; transition: color .2s; }
.amt__tab b { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--am-gold); }
.amt__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--am-gold); transform: scaleX(0); transition: transform .3s var(--ease); }
.amt__tab:hover, .amt__tab[aria-selected="true"] { color: #fff; }
.amt__tab[aria-selected="true"]::after { transform: none; }
.amt__s { display: none; }
.amt__acc { display: none; }
.amt__p { display: none; }
.amt__p.is-on { display: block; animation: amtIn .45s var(--ease); }
@keyframes amtIn { from { opacity: 0; transform: translateY(8px); } }
.amt__b { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 64px); padding-top: clamp(24px, 2.6vw, 32px); align-items: start; }
.amt__img { position: relative; margin: 0; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; background: var(--am-card); }
.amt__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amt__copy h3 { margin: 0 0 18px; font-size: clamp(22px, 2vw, 28px); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; color: #fff; }
.amt__copy h4 { margin: 22px 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--am-gold); }
.amt__copy ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.amt__copy li { padding: 10px 0; border-bottom: 1px solid var(--am-line); font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .88); }

/* footer row */
.amf { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: clamp(30px, 3.6vw, 48px); padding-top: 22px; border-top: 1px solid var(--am-line); }
.amf__all { padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--am-gold); cursor: pointer; }
.amf__all span { display: inline-block; transition: transform .25s var(--ease); }
.amf__all:hover span { transform: translateX(4px); }
.amf .fine { margin: 0; }

/* all-66 sheet */
.amall { width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 12px; background: #f6f2ea; color: var(--navy); }
.amall::backdrop { background: rgba(10, 20, 44, .82); }
.amall__in { padding: clamp(24px, 4.4vw, 60px); }
.amall__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); }
.amall__eb { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a6a35; }
.amall h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; color: var(--navy); }
.amall__x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(16, 39, 85, .2); background: none; font-size: 24px; line-height: 1; color: var(--navy); cursor: pointer; }
.amall__x:hover { background: var(--navy); color: #fff; }
.amall__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.amall__g + .amall__g { margin-top: 26px; }
.amall h3 { margin: 0 0 8px; padding-bottom: 9px; border-bottom: 1px solid rgba(16, 39, 85, .14); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; color: #8a6a35; }
.amall ul { margin: 0; padding: 0; list-style: none; }
.amall li { padding: 4px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.amall__foot { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin: clamp(24px, 3vw, 40px) 0 0; padding-top: 16px; border-top: 1px solid rgba(16, 39, 85, .14); font-size: 12px; color: var(--muted); }

@media (max-width: 1100px) {
    .amall__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
}
@media (max-width: 900px) {
    .amt__tabs { overflow-x: auto; scrollbar-width: none; }
    .amt__tabs::-webkit-scrollbar { display: none; }
    .amt__b { grid-template-columns: 1fr; }
}

/* phones: swipe strip with dots, chips, accordion */
@media (max-width: 720px) {
    .amh { display: block; }
    .amh__stats { display: block; margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, .78); }
    .amh__stats > p { display: inline; padding: 0; margin: 0; border: 0; }
    .amh__stats > p + p::before { content: " · "; }
    .amh__stats b, .amh__stats span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: inherit; max-width: none; text-align: left; }
    .amh__stats b { font-weight: 500; color: var(--am-gold); }
    .amh__stats b::after { content: " "; }
    .amh__stats span { text-transform: lowercase; }
    .amp.amp--v4 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
    .amp.amp--v4::-webkit-scrollbar { display: none; }
    .amp--v4 .amp__t, .amp--v4 .amp__t--xl { flex: 0 0 84%; height: 220px; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
    .amp--v4 .amp__t figcaption, .amp--v4 .amp__t--xl figcaption { left: 16px; bottom: 14px; font-size: 17px; }
    .amp__dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
    .amp__dots button { width: 6px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .3); transition: width .3s var(--ease), background .3s; }
    .amp__dots button.on { width: 22px; background: var(--am-gold); }
    .amt { margin-top: 22px; }
    .amt__tabs { gap: 8px; margin: 0 calc(-1 * var(--gutter)) 8px; padding: 0 var(--gutter) 4px; border: 0; }
    .amt__tab { flex: none; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; font-size: 13px; color: rgba(255, 255, 255, .85); }
    .amt__tab::after, .amt__tab b, .amt__l { display: none; }
    .amt__s { display: inline; }
    .amt__tab[aria-selected="true"] { background: var(--am-gold); border-color: var(--am-gold); color: var(--navy); font-weight: 600; }
    .amt__p, .amt__p.is-on { display: block; animation: none; border-bottom: 1px solid var(--am-line); }
    .amt__acc { display: flex; align-items: center; width: 100%; padding: 18px 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; color: #fff; text-align: left; cursor: pointer; }
    .amt__acc b { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--am-gold); }
    .amt__acc i { position: relative; flex: none; width: 12px; height: 12px; margin-left: auto; }
    .amt__acc i::before, .amt__acc i::after { content: ""; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1px; background: var(--am-gold); transition: transform .3s var(--ease); }
    .amt__acc i::after { transform: rotate(90deg); }
    .amt__acc[aria-expanded="true"] i::after { transform: rotate(0); }
    .amt__b { display: none; padding: 0 0 18px; gap: 4px; }
    .amt__p.is-open .amt__b { display: grid; animation: amtIn .4s var(--ease); }
    .amt__img { aspect-ratio: 16 / 10; margin-bottom: 6px; }
    .amt__copy h3 { display: none; }
    .amt__copy ul { grid-template-columns: 1fr; }
    .amt__copy li { padding: 11px 0; font-size: 14.5px; }
    .amt__copy li:last-child { border-bottom: 0; }
    .amf { display: grid; justify-items: center; gap: 12px; padding-top: 0; border: 0; text-align: center; }
    .amf__all { width: 100%; padding: 14px 20px; border: 1px solid rgba(201, 167, 107, .6); border-radius: 999px; }
    .amf__all span { display: none; }
    .amall { width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
    .amall__in { padding: 22px 18px 28px; }
    .amall__cols { grid-template-columns: 1fr; }
}

/* Amenities v4, phones: tidy stats line, accordion headers wrap with the count, full-width button */
@media (max-width: 720px) {
    .amh__stats > p + p { margin-left: 0; border-left: 0; }
    .amh__stats > p { white-space: nowrap; }
    .amt__acc { display: block; position: relative; padding-right: 32px; }
    .amt__acc i { position: absolute; right: 0; top: 50%; margin-top: -6px; }
    .amf__all { justify-self: stretch; }
}
@media (max-width: 720px) { .amh__stats > p { display: block; } .amh__stats > p + p::before { content: none; } }
@media (max-width: 360px) { .amt__acc { font-size: 15px; } }

/* Amenities v4: footer actions ("View all 66") and the sheet's close button */
.amf__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.amall__acts { display: flex; align-items: center; gap: 12px; flex: none; }
@media (max-width: 720px) { .amf { justify-items: stretch; } .amf__acts { display: flex; flex-direction: column; align-items: stretch; text-align: center; } }
@media (max-width: 720px) { .amf { display: block; text-align: center; } .amf__acts { width: 100%; } .amf__all { width: 100%; box-sizing: border-box; } .amf .fine { margin-top: 12px; } }

/* Architects: captions centred under the centred logos */
.arch__card figcaption { align-items: center; text-align: center; }
/* Amenities: disclaimer just under the photos, no divider line */
.amp__note { margin: 10px 0 0; text-align: right; }
@media (max-width: 720px) { .amp__note { margin-top: 8px; text-align: center; } }