/* =========================================================
   Max Estate 105 — landing page
   Palette: basalt slate, steel blue, glacier, mist, fog
   Type: Newsreader (display) + Albert Sans (text)
   ========================================================= */

/* ---------- Fonts (self-hosted, trimmed to the characters the site uses; the rupee sign has its own tiny file) ---------- */

@font-face {
    font-family: "Albert Sans";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/albert-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Albert Sans";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/albert-sans-rupee.woff2") format("woff2");
    unicode-range: U+20B9;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url("fonts/newsreader-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url("fonts/newsreader-rupee.woff2") format("woff2");
    unicode-range: U+20B9;
}

:root {
    --basalt: #2F353D;
    --basalt-deep: #252A31;
    --graphite: #4A525C;
    --steel: #3A7194;
    --harbour: #234F6B;
    --glacier: #9CCBE6;
    --mist: #C7CED4;
    --fog: #EDF0F2;
    --white: #FFFFFF;
    --line: rgba(47, 53, 61, 0.14);
    --line-light: rgba(255, 255, 255, 0.18);

    --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
    --sans: "Albert Sans", "Segoe UI", system-ui, sans-serif;

    /* Classical scale: 13 / 15 / 17 / 21 / 24 / 36–48 / 42–72 */
    --t-xs: 0.8125rem;
    --t-sm: 0.9375rem;
    --t-base: 1.0625rem;
    --t-md: 1.3125rem;
    --t-lg: 1.5rem;
    --t-xl: clamp(2.125rem, 1.5rem + 2.2vw, 3rem);
    --t-2xl: clamp(2.625rem, 1.6rem + 4.2vw, 4.5rem);
    --t-hero: clamp(3rem, 1.7rem + 5.8vw, 6.25rem);

    --wrap: 1200px;
    --gutter: clamp(20px, 5vw, 48px);
    --section-y: clamp(80px, 10vw, 140px);
    --header-h: 84px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Primary actions: harbour navy flowing into steel blue */
    --flow: linear-gradient(-45deg, #0F2C3F, #4EA8DE, #0F2C3F, #4EA8DE);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 8px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--basalt);
    background: var(--fog);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
video,
iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

h1, h2, h3, p, ul, ol, dl, dd, figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--steel);
    outline-offset: 3px;
}

.on-dark :focus-visible,
.on-dark:focus-visible {
    outline-color: var(--glacier);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--white);
    color: var(--basalt);
    border-radius: 3px;
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    top: 16px;
}

.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--section-y);
}

/* ---------- Type ---------- */

.display {
    font-family: var(--serif);
    font-weight: 300;
    font-size: var(--t-2xl);
    line-height: 1.04;
    letter-spacing: -0.018em;
    font-optical-sizing: auto;
    text-wrap: balance;
}

.heading {
    font-family: var(--serif);
    font-weight: 350;
    font-size: var(--t-xl);
    line-height: 1.1;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

.lede {
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--graphite);
    max-width: 34em;
    text-wrap: pretty;
}

.prose p {
    max-width: 36em;
    color: var(--graphite);
    text-wrap: pretty;
}

.prose p + p {
    margin-top: 1em;
}

.prose a {
    color: var(--steel);
    text-underline-offset: 3px;
}

.fine {
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--graphite);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), scale 0.2s var(--ease);
}

.btn:active {
    scale: 0.97;
}

.btn--primary,
.site-header.is-solid .btn--line,
.action-bar .action-bar__primary {
    background: var(--flow);
    background-size: 400% 400%;
    border-color: transparent;
    color: var(--white);
    animation: btn-flow 3s ease infinite;
    text-shadow: 0 1px 2px rgba(8, 24, 36, 0.45);
    transition: box-shadow 0.3s var(--ease), filter 0.3s var(--ease), scale 0.2s var(--ease);
}

.btn--primary:hover,
.site-header.is-solid .btn--line:hover {
    background: var(--flow);
    background-size: 400% 400%;
    border-color: transparent;
    color: var(--white);
    filter: brightness(1.12);
    box-shadow: 0 10px 24px -12px rgba(22, 58, 82, 0.7);
}

@keyframes btn-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn--light {
    background: var(--white);
    color: var(--basalt);
}

.btn--light:hover {
    background: var(--glacier);
}

.btn--line {
    background: transparent;
    border-color: currentColor;
}

.btn--line:hover {
    background: var(--basalt);
    border-color: var(--basalt);
    color: var(--white);
}

.on-dark .btn--line:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--basalt);
}

.btn--small {
    min-height: 42px;
    padding: 0 20px;
}

.btn--block {
    width: 100%;
}

.btn[disabled] {
    opacity: 0.7;
    cursor: progress;
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--header-h);
    color: var(--white);
    transition: background-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 100%;
}

.brand {
    flex: none;
    display: block;
    align-self: flex-start;
    padding: 12px 14px 10px;
    background: var(--white);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 12px 30px -18px rgba(18, 26, 36, 0.5);
}

.brand img {
    width: auto;
    height: 52px;
}

.site-nav {
    margin-left: auto;
}

.site-nav ul {
    display: flex;
    gap: clamp(18px, 2.2vw, 34px);
}

.site-nav a {
    position: relative;
    display: block;
    padding: 6px 0;
    font-size: var(--t-sm);
    font-weight: 500;
    text-decoration: none;
    opacity: 0.86;
    transition: opacity 0.2s;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="true"] {
    opacity: 1;
}

.site-nav a:hover::after,
.site-nav a[aria-current="true"]::after {
    transform: scaleX(1);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.header-phone {
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.header-phone:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-header .btn--line:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--basalt);
}

.site-header.is-solid {
    background: rgba(237, 240, 242, 0.94);
    color: var(--basalt);
    box-shadow: 0 1px 0 var(--line);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 26px;
    height: 1.5px;
    margin: 7px auto;
    background: currentColor;
    transition: transform 0.35s var(--ease);
}

/* =========================================================
   Hero
   A navy stage with the towers framed by The Circuit: a track
   outline draws itself around the photo and a runner laps it.
   ========================================================= */

.hero {
    position: relative;
    isolation: isolate;
    min-height: max(100vh, 620px);
    min-height: max(100svh, 620px);
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-h) + clamp(20px, 3vh, 40px));
    padding-bottom: clamp(88px, 11vh, 120px);
    color: var(--white);
    overflow: hidden;
    background:
        radial-gradient(ellipse 34% 55% at 64% 48%, rgba(156, 203, 230, 0.2), rgba(156, 203, 230, 0) 70%),
        radial-gradient(ellipse 45% 60% at 0% 100%, rgba(78, 168, 222, 0.16), rgba(78, 168, 222, 0) 70%),
        linear-gradient(160deg, #1A4360 0%, #0F2C3F 52%, #0B2232 100%);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.09;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 18vw, 290px) minmax(320px, 380px);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

/* ---------- Copy ---------- */

.hero__title {
    font-weight: inherit;
}

.hero__kicker {
    display: block;
    margin-bottom: 20px;
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #DDF0FB;
    animation: rise 0.8s 0.1s var(--ease) both;
}

.hero__line {
    display: block;
    max-width: 9ch;
    font-family: var(--serif);
    font-size: clamp(2.875rem, 1.2rem + 4vw, 5.25rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.025em;
    font-optical-sizing: auto;
    text-wrap: balance;
    animation: settle 1.1s var(--ease-out) both;
}

.hero__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin-top: clamp(28px, 4vh, 44px);
    padding-top: 22px;
    border-top: 1px solid rgba(156, 203, 230, 0.3);
    animation: rise 0.9s 0.35s var(--ease) both;
}

.hero__terms dt {
    font-size: var(--t-xs);
    color: #B9DCF0;
}

.hero__terms dd {
    margin-top: 2px;
    font-family: var(--serif);
    font-size: clamp(1.125rem, 0.9rem + 0.45vw, 1.375rem);
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

/* ---------- The framed towers ---------- */

.hero__track {
    position: relative;
    height: clamp(380px, calc(100svh - var(--header-h) - 190px), 600px);
}

.hero__media {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    overflow: hidden;
    background: #0B2232;
    box-shadow: 0 50px 90px -40px rgba(3, 12, 20, 0.8);
    animation: frame-rise 1.4s 0.1s var(--ease-out) both;
}

.hero__media picture {
    display: contents;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    filter: brightness(1.06) saturate(1.12);
    scale: 1.12;
    animation: hero-settle 1.8s 0.1s var(--ease-out) both;
}

/* The track: a lane line around the frame, traced up both sides from the ground */
.hero__lane {
    position: absolute;
    inset: -16px;
    border: 1px solid rgba(156, 203, 230, 0.6);
    border-radius: 999px;
    animation: lane-draw 1.6s 0.45s var(--ease-out) both;
    pointer-events: none;
}

/* The runner: one warm dot, the colour of the tower brick, lapping the track */
.hero__runner {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E8A57A;
    box-shadow: 0 0 0 4px rgba(232, 165, 122, 0.22), 0 0 22px 4px rgba(232, 165, 122, 0.55);
    display: none;
}

@supports (offset-path: border-box) {
    .hero__runner {
        display: block;
        offset-path: border-box;
        offset-rotate: 0deg;
        offset-distance: 62%;
        opacity: 0;
        animation:
            rise-in 0.6s 2.1s var(--ease) forwards,
            lap 18s 2.1s linear infinite;
    }
}

.hero.is-away .hero__runner {
    animation-play-state: paused;
}

@keyframes frame-rise {
    from { clip-path: inset(100% 0 0 0 round 999px); }
    to { clip-path: inset(0 0 0 0 round 999px); }
}

@keyframes lane-draw {
    from { clip-path: inset(100% -20px -20px -20px); }
    to { clip-path: inset(-20px -20px -20px -20px); }
}

@keyframes rise-in {
    to { opacity: 1; }
}

@keyframes lap {
    from { offset-distance: 62%; }
    to { offset-distance: 162%; }
}

@keyframes slide-in {
    from { opacity: 0; transform: translateX(36px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Form ---------- */

.hero__form {
    animation: slide-in 1s 0.45s var(--ease-out) both;
}

.hero .lead-card {
    padding: clamp(24px, 2.4vw, 32px);
    box-shadow: 0 50px 90px -40px rgba(3, 12, 20, 0.85);
}

.hero .lead-form {
    gap: 12px;
    margin-top: 18px;
}

.hero .field input {
    height: 46px;
}

/* Short laptop screens: keep the whole card in view */
@media (min-width: 1025px) and (max-height: 780px) {
    .hero .lead-card__intro {
        display: none;
    }

    .hero .lead-form {
        margin-top: 14px;
    }

    .hero .lead-card__rera {
        margin-top: 12px;
        padding-top: 10px;
    }
}

/* =========================================================
   Lead form card (hero, closing section, modal)
   ========================================================= */

.lead-card {
    background: rgba(250, 251, 252, 0.97);
    color: var(--basalt);
    padding: clamp(26px, 3vw, 38px);
    border-radius: 6px;
    box-shadow: 0 40px 80px -30px rgba(18, 26, 36, 0.55);
}

.lead-card__title {
    font-family: var(--serif);
    font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.lead-card__intro {
    margin-top: 10px;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--graphite);
}

.lead-form {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--graphite);
}

.field input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(47, 53, 61, 0.22);
    border-radius: 3px;
    background: var(--white);
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--basalt);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.field input::placeholder {
    color: rgba(74, 82, 92, 0.55);
}

.field input:focus {
    outline: none;
    border-color: var(--steel);
    box-shadow: 0 0 0 3px rgba(58, 113, 148, 0.18);
}

.field input:user-invalid {
    border-color: #A4423A;
}

.field--phone .field__control {
    display: flex;
}

.field--phone .field__prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(47, 53, 61, 0.22);
    border-right: 0;
    border-radius: 3px 0 0 3px;
    background: var(--fog);
    font-size: 1rem;
    color: var(--graphite);
    font-variant-numeric: tabular-nums;
}

.field--phone input {
    border-radius: 0 3px 3px 0;
    font-variant-numeric: tabular-nums;
}

.consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.78125rem;
    line-height: 1.5;
    color: var(--graphite);
}

.consent input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--steel);
}

.lead-form__error {
    font-size: var(--t-xs);
    color: #A4423A;
}

.lead-form__error:empty {
    display: none;
}

.lead-card__rera {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 0.75rem;
    color: var(--graphite);
}

/* =========================================================
   Facts sheet (overlaps hero)
   ========================================================= */

.facts {
    position: relative;
    z-index: 2;
    margin-top: calc(clamp(56px, 6vw, 72px) * -1);
}

.facts__sheet {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--white);
    border-radius: 4px;
    box-shadow: 0 30px 60px -40px rgba(18, 26, 36, 0.45);
}

.fact {
    padding: clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 36px);
}

.fact + .fact {
    border-left: 1px solid var(--line);
}

.fact h2 {
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.fact p {
    margin-top: 10px;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--graphite);
}

/* =========================================================
   Overview
   ========================================================= */

.overview__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(48px, 7vw, 112px);
    align-items: center;
}

.overview .display {
    max-width: 11ch;
}

.overview .prose {
    margin-top: 32px;
}

.overview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}

.overview__images {
    position: relative;
    padding-bottom: 18%;
}

.overview__images .img-main {
    aspect-ratio: 4 / 5;
    border-radius: 4px;
    overflow: hidden;
}

.overview__images .img-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 50%;
}

.overview__images .img-inset {
    position: absolute;
    left: -14%;
    bottom: 0;
    width: 52%;
    aspect-ratio: 1 / 1;
    border: 10px solid var(--fog);
    border-radius: 4px;
    overflow: hidden;
    background: var(--fog);
}

.overview__images .img-inset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   Residences (steel band)
   ========================================================= */

.residences {
    position: relative;
    isolation: isolate;
    color: var(--white);
    overflow: hidden;
    background: #14324A;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* The indoor pool glows through a navy wash: deeper where the copy sits,
   lighter in the middle so the water reads */
.residences__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.residences__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
    filter: saturate(1.15) brightness(1.05);
}

.residences__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 70% at 0% 0%, rgba(156, 203, 230, 0.22), rgba(156, 203, 230, 0) 70%),
        linear-gradient(90deg, rgba(13, 32, 50, 0.7) 0%, rgba(13, 32, 50, 0.32) 40%, rgba(13, 32, 50, 0.18) 68%, rgba(13, 32, 50, 0.38) 100%),
        linear-gradient(180deg, rgba(13, 32, 50, 0.42) 0%, rgba(13, 32, 50, 0) 30%, rgba(13, 32, 50, 0) 78%, rgba(13, 32, 50, 0.5) 100%);
}

/* Prices sit on frosted glass over the water */
.res-panel {
    align-self: start;
    padding: 6px clamp(20px, 2.6vw, 36px);
    border-radius: 6px;
    background: rgba(12, 30, 46, 0.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(4, 12, 20, 0.7);
}

/* Inside the panel, its edges do the framing: no rule above the first row or below the last */
.res-panel .res-list,
.res-panel [data-reveal="rules"] {
    border-top: 0;
}

.res-panel .res-row:last-child {
    border-bottom: 0;
}

.res-panel [data-reveal="rules"]::before,
.res-panel [data-reveal="rules"] > :last-child::after {
    display: none;
}

/* Fine grain so the colour reads as material rather than a flat fill */
.residences::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.1;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.residences__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(48px, 7vw, 104px);
}

.residences__intro {
    text-shadow: 0 1px 18px rgba(8, 20, 32, 0.5);
}

.residences__intro p {
    margin-top: 24px;
    max-width: 26em;
    color: rgba(255, 255, 255, 0.84);
}

.residences__intro .fine {
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.66);
}

.res-list {
    border-top: 1px solid var(--line-light);
}

.res-row {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
    gap: 8px 28px;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-light);
}

.res-row h3 {
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 400;
    line-height: 1.2;
    text-wrap: balance;
}

.res-row__size {
    display: block;
    margin-top: 4px;
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.72);
}

.res-row__price {
    font-family: var(--serif);
    font-size: var(--t-md);
    font-weight: 400;
    font-variant-numeric: lining-nums;
}

.res-row__price:has(small) {
    font-size: var(--t-lg);
    color: #DDF0FB;
}

.res-row__price:not(:has(small)) {
    color: rgba(255, 255, 255, 0.78);
}

.res-row .btn--light {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--white);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.res-row .btn--light:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--basalt);
}

.res-row__price small {
    display: block;
    font-family: var(--sans);
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   Walkthrough (dark)
   ========================================================= */

.walkthrough {
    color: var(--white);
    background: var(--basalt);
}

.walkthrough__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px clamp(48px, 7vw, 104px);
    align-items: end;
}

.walkthrough__head p {
    max-width: 30em;
    color: rgba(255, 255, 255, 0.78);
}

.walkthrough__video {
    position: relative;
    margin-top: clamp(40px, 5vw, 64px);
    aspect-ratio: 16 / 9;
    background: var(--basalt-deep);
    border-radius: 4px;
    overflow: hidden;
}

.walkthrough__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plan-strip {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
    margin-top: clamp(56px, 7vw, 96px);
    padding-top: clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--line-light);
}

.plan-strip__thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #E6EBE1;
    cursor: zoom-in;
}

.plan-strip__thumb img {
    width: 100%;
    height: auto;
    transition: transform 0.6s var(--ease);
}

.plan-strip__thumb:hover img {
    transform: scale(1.025);
}

.plan-strip h3 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    font-weight: 350;
    line-height: 1.15;
}

.plan-strip p {
    margin-top: 16px;
    max-width: 30em;
    color: rgba(255, 255, 255, 0.78);
}

.plan-strip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

/* =========================================================
   Home details
   ========================================================= */

.home {
    background: var(--white);
}

.home__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 7vw, 112px);
    align-items: start;
}

.home__image {
    position: sticky;
    top: calc(var(--header-h) + 32px);
}

.home__frame {
    border-radius: 4px;
    overflow: hidden;
}

.home__image img {
    width: 100%;
    aspect-ratio: 646 / 500;
    object-fit: cover;
    border-radius: 4px;
}

.home__image figcaption {
    margin-top: 12px;
}

.detail-list {
    margin-top: 40px;
    border-top: 1px solid var(--line);
}

.detail-list li {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 6px 28px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.detail-list strong {
    font-family: var(--serif);
    font-size: var(--t-md);
    font-weight: 400;
    line-height: 1.3;
}

.detail-list span {
    font-size: var(--t-sm);
    color: var(--graphite);
}

/* =========================================================
   Amenities
   ========================================================= */

.amenities__head {
    max-width: 40em;
}

.amenities__head .lede {
    margin-top: 24px;
}

.amenities__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 96px);
    margin-top: clamp(48px, 6vw, 80px);
    align-items: start;
}

.amenities__media {
    display: grid;
    gap: 16px;
}

.amenities__media .a-frame {
    border-radius: 4px;
    overflow: hidden;
}

.amenities__media img {
    width: 100%;
    object-fit: cover;
}

.amenities__media .a-wide {
    aspect-ratio: 16 / 10;
}

.amenities__media .a-wide img {
    height: 100%;
}

.amenities__media .a-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.amenities__media .a-pair img {
    aspect-ratio: 1 / 1;
}

.amenity-list {
    border-top: 1px solid var(--line);
}

.amenity-group {
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}

.amenity-group h3 {
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 400;
    line-height: 1.2;
}

.amenity-group p {
    margin-top: 10px;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--graphite);
}

/* =========================================================
   Floor plans
   ========================================================= */

.plans {
    background: var(--white);
}

.plans__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px clamp(48px, 7vw, 104px);
    align-items: end;
}

.plans__head p {
    max-width: 30em;
    color: var(--graphite);
}

/* The two published plans: full sheets on the brochure's own paper tone */
.plan-sheets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
    margin-top: clamp(40px, 5vw, 64px);
}

.plan-sheet {
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #FBF6EC;
    overflow: hidden;
}

.plan-sheet__frame {
    position: relative;
    display: block;
    width: 100%;
    padding: clamp(16px, 2vw, 28px);
    border: 0;
    background: #FAF3E7;
    cursor: zoom-in;
}

.plan-sheet__frame img {
    width: 100%;
    height: auto;
    aspect-ratio: 848 / 600;
    transition: scale 0.8s var(--ease-out);
}

.plan-sheet__frame:hover img {
    scale: 1.03;
}

.plan-sheet__zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 8px 14px;
    border-radius: 3px;
    background: var(--basalt);
    color: var(--white);
    font-size: var(--t-xs);
    font-weight: 600;
    opacity: 0;
    translate: 0 6px;
    transition: opacity 0.35s var(--ease), translate 0.35s var(--ease);
}

.plan-sheet__frame:hover .plan-sheet__zoom,
.plan-sheet__frame:focus-visible .plan-sheet__zoom {
    opacity: 1;
    translate: none;
}

.plan-sheet figcaption {
    padding: clamp(22px, 2.4vw, 32px);
    border-top: 1px solid var(--line);
    background: var(--white);
}

.plan-sheet__name {
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 350;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.plan-sheet__units {
    margin-top: 6px;
    font-size: var(--t-xs);
    color: var(--graphite);
}

.plan-sheet__areas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.plan-sheet__areas dt {
    font-size: var(--t-xs);
    color: var(--graphite);
}

.plan-sheet__areas dd {
    margin-top: 2px;
    font-family: var(--serif);
    font-size: var(--t-md);
    font-weight: 400;
    font-variant-numeric: lining-nums;
    white-space: nowrap;
}

.plan-sheet__areas div:last-child dd {
    color: var(--steel);
}

.plan-sheet__rooms {
    margin-top: 20px;
    border-top: 1px solid var(--line);
}

.plan-sheet__rooms summary,
.spec-sheet summary {
    position: relative;
    display: block;
    padding: 16px 32px 16px 0;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--steel);
    cursor: pointer;
    list-style: none;
}

.plan-sheet__rooms summary::-webkit-details-marker,
.spec-sheet summary::-webkit-details-marker {
    display: none;
}

.plan-sheet__rooms summary::after,
.spec-sheet summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;
    transition: rotate 0.3s var(--ease), margin 0.3s var(--ease);
}

.plan-sheet__rooms[open] summary::after,
.spec-sheet[open] summary::after {
    rotate: 225deg;
    margin-top: -2px;
}

.plan-sheet__rooms ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    padding-bottom: 6px;
}

.plan-sheet__rooms li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-xs);
}

.plan-sheet__rooms li span:last-child {
    color: var(--graphite);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.plans__sub {
    margin-top: clamp(56px, 6vw, 80px);
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 400;
}

.plans__note {
    margin-top: 28px;
    max-width: 60em;
}

/* Specifications in the home section */
.spec-sheet {
    margin-top: 28px;
    border-bottom: 1px solid var(--line);
}

.spec-sheet table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

.spec-sheet th,
.spec-sheet td {
    padding: 12px 0;
    border-top: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.spec-sheet th {
    width: 36%;
    padding-right: 20px;
    font-weight: 600;
}

.spec-sheet td {
    color: var(--graphite);
}

.spec-sheet .fine {
    padding: 4px 0 18px;
}

.amenities__note {
    margin-top: 20px;
}

/* Design team under the developer note */
.developer__team-title {
    margin-top: 28px;
}

.developer__team {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    font-size: var(--t-sm);
    color: var(--graphite);
}

.developer__team li {
    display: grid;
    grid-template-columns: 10.5em minmax(0, 1fr);
    gap: 16px;
}

.developer__team span {
    color: var(--basalt);
    font-weight: 600;
}

.plans__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin-top: clamp(40px, 5vw, 64px);
}

.plan-tile {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.plan-tile__frame {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--fog);
    overflow: hidden;
}

.plan-tile__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(5px) grayscale(0.4);
    opacity: 0.55;
    transform: scale(1.08);
}

.plan-tile__cta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 18px;
    border-radius: 3px;
    background: var(--basalt);
    color: var(--white);
    font-size: var(--t-xs);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.25s var(--ease);
}

.plan-tile:hover .plan-tile__cta {
    background: var(--steel);
}

.plan-tile__name {
    display: block;
    margin-top: 16px;
    font-family: var(--serif);
    font-size: var(--t-md);
    font-weight: 400;
}

.plan-tile__meta {
    display: block;
    margin-top: 2px;
    font-size: var(--t-xs);
    color: var(--graphite);
}

/* =========================================================
   Gallery (dark)
   ========================================================= */

.gallery {
    color: var(--white);
    background: var(--basalt);
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(140px, 15vw, 210px);
    gap: clamp(10px, 1.2vw, 16px);
    margin-top: clamp(40px, 5vw, 64px);
    grid-auto-flow: row dense;
}

.g-item {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--basalt-deep);
    cursor: zoom-in;
}

.g-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ease);
}

.g-item:hover img {
    transform: scale(1.04);
}

.g-item__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 18px 14px;
    background: linear-gradient(0deg, rgba(37, 42, 49, 0.7), rgba(37, 42, 49, 0));
    font-size: var(--t-xs);
    font-weight: 500;
    text-align: left;
}

.g-item--a { grid-column: span 4; grid-row: span 2; }
.g-item--b { grid-column: span 2; grid-row: span 1; }
.g-item--c { grid-column: span 2; grid-row: span 1; }
.g-item--d { grid-column: span 3; grid-row: span 2; }
.g-item--e { grid-column: span 3; grid-row: span 2; }
.g-item--h { grid-column: 3 / span 4; grid-row: span 2; }
.g-item--f { grid-column: span 2; grid-row: span 1; }
.g-item--g { grid-column: span 2; grid-row: span 1; }
.g-item--i { grid-column: span 3; grid-row: span 2; }
.g-item--j { grid-column: span 3; grid-row: span 2; }

/* =========================================================
   Location
   ========================================================= */

.location__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(48px, 7vw, 104px);
    align-items: start;
}

.location .display {
    max-width: 10ch;
}

.journey {
    position: relative;
    margin-top: 40px;
    padding-left: 28px;
}

.journey::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--steel);
    opacity: 0.45;
}

.journey li {
    position: relative;
    display: grid;
    grid-template-columns: 4.5em minmax(0, 1fr);
    gap: 16px;
    padding: 9px 0;
    align-items: baseline;
}

.journey li::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--fog);
    border: 1.5px solid var(--steel);
}

.journey li:first-child::before {
    background: var(--steel);
}

.journey time {
    font-family: var(--serif);
    font-size: var(--t-md);
    font-weight: 400;
    color: var(--steel);
    font-variant-numeric: lining-nums tabular-nums;
}

.journey span {
    font-size: var(--t-sm);
}

.location .fine {
    margin-top: 24px;
}

.location__map {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    aspect-ratio: 5 / 6;
    border-radius: 4px;
    overflow: hidden;
    background: var(--mist);
}

.location__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.7) contrast(0.95) brightness(1.02);
}

/* =========================================================
   FAQ
   ========================================================= */

.faq {
    background: var(--white);
}

.faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(48px, 7vw, 104px);
    align-items: start;
}

.faq__aside {
    position: sticky;
    top: calc(var(--header-h) + 32px);
}

.faq__aside p {
    margin-top: 20px;
    max-width: 22em;
    color: var(--graphite);
}

.faq__aside .btn {
    margin-top: 28px;
}

.faq__list {
    border-top: 1px solid var(--line);
}

.faq__list details {
    border-bottom: 1px solid var(--line);
}

.faq__list summary {
    position: relative;
    display: block;
    padding: 22px 48px 22px 0;
    font-size: var(--t-base);
    font-weight: 500;
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
}

.faq__list summary::-webkit-details-marker {
    display: none;
}

.faq__list summary::before,
.faq__list summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 14px;
    height: 1.5px;
    background: var(--steel);
    transition: transform 0.3s var(--ease);
}

.faq__list summary::after {
    transform: rotate(90deg);
}

.faq__list details[open] summary::after {
    transform: rotate(0deg);
}

.faq__list summary:hover {
    color: var(--steel);
}

.faq__answer {
    padding: 0 48px 26px 0;
    max-width: 40em;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--graphite);
}

/* =========================================================
   Closing (mist band)
   ========================================================= */

.closing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--mist);
}

/* Sunlit gardens behind the call-back card, washed with fog where the copy sits */
.closing__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.closing__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 55%;
}

.closing__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(237, 240, 242, 0.97) 0%, rgba(237, 240, 242, 0.92) 36%, rgba(237, 240, 242, 0.4) 60%, rgba(237, 240, 242, 0.08) 100%),
        linear-gradient(0deg, rgba(237, 240, 242, 0.55) 0%, rgba(237, 240, 242, 0) 30%),
        linear-gradient(180deg, rgba(237, 240, 242, 0.5) 0%, rgba(237, 240, 242, 0) 25%);
}

.closing__circuit {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.closing__circuit path {
    fill: none;
    stroke: var(--steel);
    stroke-width: 1.25;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.4;
    stroke-dasharray: 1;
}

.closing__circuit circle {
    fill: var(--steel);
    opacity: 0.6;
}

.closing__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    gap: clamp(48px, 7vw, 112px);
    align-items: center;
}

.closing .display {
    max-width: 10ch;
}

.closing .lede {
    margin-top: 24px;
    color: var(--basalt);
}

.closing__phone {
    display: inline-block;
    margin-top: 40px;
    font-family: var(--serif);
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    font-variant-numeric: lining-nums;
    color: var(--basalt);
}

.closing__phone:hover {
    color: var(--harbour);
}

.closing__phone-note {
    margin-top: 10px;
    font-size: var(--t-sm);
    color: var(--graphite);
}

.developer {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(47, 53, 61, 0.2);
    max-width: 36em;
}

.developer h3 {
    font-family: var(--serif);
    font-size: var(--t-md);
    font-weight: 400;
}

.developer p {
    margin-top: 10px;
    font-size: var(--t-sm);
    color: var(--graphite);
}

.developer a {
    color: var(--harbour);
    text-underline-offset: 3px;
}

.closing .lead-card {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 50px 90px -40px rgba(18, 26, 36, 0.55);
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
    padding-block: clamp(56px, 7vw, 88px) 40px;
    background: var(--basalt-deep);
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--t-xs);
    line-height: 1.65;
}

.site-footer__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 32px 56px;
    align-items: start;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--line-light);
}

.site-footer__top img {
    width: auto;
    height: 72px;
    padding: 10px 12px;
    background: var(--white);
    border-radius: 4px;
}

.site-footer__rera {
    color: var(--white);
}

.site-footer__rera p + p {
    margin-top: 4px;
}

.site-footer__links {
    display: grid;
    gap: 8px;
    text-align: right;
}

.site-footer__links a {
    color: var(--white);
    text-decoration: none;
}

.site-footer__links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__legal {
    max-width: 72em;
    padding-top: 28px;
}

.site-footer__legal details {
    margin-top: 12px;
}

.site-footer__legal summary {
    display: inline-block;
    color: var(--glacier);
    cursor: pointer;
}

.site-footer__legal details p {
    margin-top: 10px;
}

/* =========================================================
   Mobile action bar
   ========================================================= */

.action-bar {
    display: none;
}

/* =========================================================
   Dialogs
   ========================================================= */

dialog {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
}

dialog::backdrop {
    background: rgba(31, 37, 44, 0.66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

dialog[open] {
    animation: dialog-in 0.45s var(--ease);
}

.enquiry {
    width: 460px;
}

.enquiry .lead-card {
    position: relative;
    box-shadow: 0 40px 100px -30px rgba(10, 16, 24, 0.7);
}

.dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.dialog-close::before,
.dialog-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 1.5px;
    margin-left: -9px;
    background: currentColor;
    transform: rotate(45deg);
}

.dialog-close::after {
    transform: rotate(-45deg);
}

.dialog-close:hover {
    background: var(--fog);
}

.enquiry .lead-card__title {
    padding-right: 36px;
}

.lightbox {
    width: min(1200px, calc(100vw - 32px));
    color: var(--white);
}

.lightbox figure {
    position: relative;
}

.lightbox img {
    width: 100%;
    max-height: calc(100dvh - 120px);
    object-fit: contain;
    border-radius: 4px;
    background: var(--basalt-deep);
}

.lightbox figcaption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    font-size: var(--t-sm);
}

.lightbox__nav {
    display: flex;
    gap: 8px;
}

.lightbox__nav button,
.lightbox .dialog-close {
    position: static;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: transparent;
    color: var(--white);
    cursor: pointer;
}

.lightbox__nav button:hover,
.lightbox .dialog-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

.lightbox .dialog-close {
    position: relative;
    top: auto;
    right: auto;
}

.lightbox__nav svg {
    width: 16px;
    height: 16px;
    margin: auto;
}

/* =========================================================
   Motion
   ========================================================= */

@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes settle {
    from { transform: translateY(22px); }
    to { transform: none; }
}

@keyframes hero-settle {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

@keyframes circuit-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero__runner {
        opacity: 1 !important;
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1180px) {
    .site-nav ul {
        gap: 20px;
    }

    .header-phone {
        display: none;
    }
}

@media (max-width: 1024px) {
    :root {
        --header-h: 72px;
    }

    .brand {
        padding: 9px 11px 8px;
    }

    .brand img {
        height: 42px;
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 2;
    }

    .site-header__actions {
        display: none;
    }

    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        padding: var(--header-h) var(--gutter) 40px;
        background: var(--basalt);
        color: var(--white);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s var(--ease), visibility 0.35s;
    }

    .site-nav ul {
        flex-direction: column;
        gap: 4px;
    }

    .site-nav a {
        font-family: var(--serif);
        font-size: clamp(2rem, 7vw, 2.75rem);
        font-weight: 300;
        line-height: 1.25;
        opacity: 1;
    }

    .site-nav a::after {
        display: none;
    }

    .site-nav__extra {
        display: grid;
        gap: 14px;
        margin-top: 40px;
        max-width: 360px;
    }

    .site-nav__extra .header-phone {
        display: block;
        font-size: var(--t-md);
        color: var(--glacier);
    }

    .nav-open .site-nav {
        opacity: 1;
        visibility: visible;
    }

    .nav-open .site-header,
    .nav-open .site-header.is-solid {
        color: var(--white);
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .nav-open .site-header .brand {
        position: relative;
        z-index: 2;
    }

    .nav-open .menu-toggle span:first-child {
        transform: translateY(4.25px) rotate(45deg);
    }

    .nav-open .menu-toggle span:nth-child(2) {
        transform: translateY(-4.25px) rotate(-45deg);
    }

    .nav-open {
        overflow: hidden;
    }

    .hero {
        min-height: 0;
        padding-bottom: 64px;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1fr) clamp(200px, 30vw, 280px);
        gap: 48px clamp(32px, 6vw, 64px);
    }

    .hero__form {
        grid-column: 1 / -1;
        max-width: 560px;
    }

    .hero__track {
        height: clamp(360px, 52vw, 480px);
    }

    .facts {
        margin-top: 0;
        padding-top: 0;
        background: #0B2232;
    }

    .facts__sheet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 0;
        box-shadow: none;
        margin-inline: calc(var(--gutter) * -1);
    }

    .fact:nth-child(3) {
        border-left: 0;
    }

    .fact:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .overview__grid,
    .residences__grid,
    .home__grid,
    .amenities__grid,
    .location__grid,
    .faq__grid,
    .closing__grid,
    .walkthrough__head,
    .plans__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .overview__images {
        max-width: 560px;
        margin-left: 14%;
    }

    .home__image,
    .location__map,
    .faq__aside {
        position: static;
    }

    .location__map {
        aspect-ratio: 4 / 3;
    }

    .plans__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-sheets {
        grid-template-columns: minmax(0, 1fr);
        max-width: 720px;
    }

    .closing .lead-card {
        max-width: 560px;
    }

    .residences__media {
        bottom: auto;
        height: min(620px, 90vw + 200px);
    }

    .residences__media::after {
        background:
            linear-gradient(180deg, rgba(13, 32, 50, 0.84) 0%, rgba(13, 32, 50, 0.76) 50%, #14324A 100%);
    }

    .closing__media::after {
        background: linear-gradient(180deg, rgba(237, 240, 242, 0.92) 0%, rgba(237, 240, 242, 0.84) 50%, rgba(237, 240, 242, 0.3) 100%);
    }
}

@media (min-width: 1025px) {
    .site-nav__extra {
        display: none;
    }
}

@media (max-width: 760px) {
    body {
        padding-bottom: 64px;
    }

    .closing__circuit {
        display: none;
    }

    .hero {
        padding-top: calc(var(--header-h) + 16px);
        padding-bottom: 56px;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* Phones: the track lies on its side above the headline */
    .hero__track {
        order: -1;
        height: auto;
        aspect-ratio: 16 / 10;
        margin: 16px 16px 0;
    }

    .hero__media img {
        object-position: 50% 55%;
    }

    .hero__lane {
        inset: -12px;
    }

    .hero__line {
        font-size: clamp(2.75rem, 12.5vw, 3.75rem);
    }

    .hero__terms {
        margin-top: 26px;
        padding-top: 18px;
        gap: 16px 28px;
    }

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

    .fact + .fact {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .res-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .res-row .btn {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 10px;
    }

    .res-row__price {
        text-align: right;
    }

    .detail-list li {
        grid-template-columns: minmax(0, 1fr);
    }

    .plan-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 42vw;
    }

    .g-item--a { grid-column: span 2; grid-row: span 1; }
    .g-item--b,
    .g-item--c { grid-column: span 1; grid-row: span 1; }
    .g-item--d,
    .g-item--e,
    .g-item--h,
    .g-item--i,
    .g-item--j { grid-column: span 2; grid-row: span 1; }
    .g-item--f,
    .g-item--g { grid-column: span 1; grid-row: span 1; }

    .site-footer__top {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__links {
        text-align: left;
    }

    .action-bar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 40;
        display: grid;
        grid-template-columns: 1fr 1fr 1.4fr;
        height: 64px;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--basalt-deep);
        box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
    }

    .action-bar a,
    .action-bar button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        background: none;
        color: var(--white);
        font-size: var(--t-sm);
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .action-bar a + a {
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }


    .action-bar svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .plans__grid {
        gap: 14px;
    }

    .plan-sheet__rooms ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .developer__team li {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .spec-sheet th {
        width: 40%;
    }

    .plan-tile__cta {
        padding: 10px 12px;
    }

    .overview__images {
        margin-left: 10%;
    }

    .overview__images .img-inset {
        left: -12%;
    }

    .faq__answer {
        padding-right: 0;
    }
}

/* =========================================================
   Motion layer
   Hidden start states only apply under html.motion, which the
   head script adds when motion is allowed. Without it (reduced
   motion, no JS, script failure) the page renders as-is.
   ========================================================= */

/* ---------- Header: reading progress along the solid bar ---------- */

.scroll-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--steel);
    transform: scaleX(var(--progress, 0));
    transform-origin: left center;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}

.site-header.is-solid .scroll-progress {
    opacity: 1;
}

.nav-open .scroll-progress {
    opacity: 0;
}

/* ---------- Words: headings rise word by word from behind a mask ---------- */

.motion [data-reveal="words"]:not(.is-split) {
    opacity: 0;
}

.motion .is-split .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0.08em 0.05em 0.16em;
    margin: -0.08em -0.05em -0.16em;
}

.motion .is-split .w__i {
    display: inline-block;
}

.motion [data-reveal="words"] .w__i {
    translate: 0 115%;
    transition: translate 1.2s var(--ease-out);
    transition-delay: calc(var(--bd, 0ms) + var(--i, 0) * 55ms);
}

.motion [data-reveal="words"].is-in .w__i {
    translate: none;
}

/* ---------- Rise: text blocks settle into place ---------- */

.motion [data-reveal="rise"] {
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out);
    transition-delay: var(--bd, 0ms);
}

.motion [data-reveal="rise"].is-in {
    opacity: 1;
    translate: none;
}

/* ---------- Stagger: the facts sheet lifts over the hero, then each fact follows ---------- */

.motion .facts__sheet[data-reveal] {
    translate: 0 48px;
    opacity: 0;
    transition: opacity 0.9s var(--ease-out), translate 1.3s var(--ease-out);
    transition-delay: var(--bd, 0ms);
}

.motion [data-reveal="stagger"] > * {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out);
    transition-delay: calc(var(--bd, 0ms) + 250ms + var(--i, 0) * 110ms);
}

.motion .facts__sheet[data-reveal].is-in,
.motion [data-reveal="stagger"].is-in > * {
    opacity: 1;
    translate: none;
}

/* ---------- Curtain: images open from the ground up, like a facade rising ---------- */

.motion [data-reveal="curtain"] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.4s var(--ease-out);
    transition-delay: var(--bd, 0ms);
}

.motion [data-reveal="curtain"].is-in {
    clip-path: inset(0 0 0 0);
}

.motion [data-reveal="curtain"] > img {
    scale: 1.22;
    transition: scale 1.9s var(--ease-out), transform 0.9s var(--ease);
    transition-delay: var(--bd, 0ms), 0s;
}

.motion [data-reveal="curtain"].is-in > img {
    scale: 1;
}

/* Parallax images keep a little extra size so their edges never show */
.motion img[data-parallax],
.motion [data-reveal="curtain"].is-in > img[data-parallax] {
    scale: 1.12;
}

.motion [data-reveal="curtain"]:not(.is-in) > img[data-parallax] {
    scale: 1.3;
}

.motion [data-parallax] {
    translate: 0 var(--py, 0px);
}

/* ---------- Rules: list lines draw across, then each row's content rises ---------- */

.motion [data-reveal="rules"] {
    position: relative;
    border-top-color: transparent;
}

.motion [data-reveal="rules"] > * {
    position: relative;
    border-bottom-color: transparent;
}

.motion [data-reveal="rules"]::before,
.motion [data-reveal="rules"] > *::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--rule, var(--line));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.3s var(--ease-out);
}

.motion [data-reveal="rules"]::before {
    top: 0;
    transition-delay: var(--bd, 0ms);
}

.motion [data-reveal="rules"] > *::after {
    bottom: 0;
    transition-delay: calc(var(--bd, 0ms) + (var(--i, 0) + 1) * 120ms);
}

.motion .on-dark [data-reveal="rules"] {
    --rule: var(--line-light);
}

.motion [data-reveal="rules"].is-in::before,
.motion [data-reveal="rules"].is-in > *::after {
    transform: none;
}

.motion [data-reveal="rules"] > * > * {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 0.8s var(--ease-out), translate 1s var(--ease-out);
    transition-delay: calc(var(--bd, 0ms) + 200ms + var(--i, 0) * 120ms);
}

.motion [data-reveal="rules"].is-in > * > * {
    opacity: 1;
    translate: none;
}

/* ---------- Journey: the route line draws down and each stop lights up as it passes ---------- */

.motion [data-reveal="journey"]::before {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.8s var(--ease-out);
    transition-delay: var(--bd, 0ms);
}

.motion [data-reveal="journey"] li {
    opacity: 0;
    translate: 14px 0;
    transition: opacity 0.7s var(--ease-out), translate 0.9s var(--ease-out);
    transition-delay: calc(var(--bd, 0ms) + 150ms + var(--i, 0) * 150ms);
}

.motion [data-reveal="journey"] li::before {
    scale: 0;
    transition: scale 0.6s var(--ease-out);
    transition-delay: calc(var(--bd, 0ms) + 150ms + var(--i, 0) * 150ms);
}

.motion [data-reveal="journey"].is-in::before {
    transform: none;
}

.motion [data-reveal="journey"].is-in li {
    opacity: 1;
    translate: none;
}

.motion [data-reveal="journey"].is-in li::before {
    scale: 1;
}

/* ---------- Scroll-linked: film frame opens to full width; the closing loop draws itself ---------- */

.motion .walkthrough__video {
    scale: calc(0.88 + 0.12 * var(--p, 1));
    border-radius: calc(4px + 20px * (1 - var(--p, 1)));
}

.motion .closing__circuit path {
    stroke-dashoffset: calc(1 - var(--p, 0));
}

.motion .closing__circuit circle {
    opacity: calc((var(--p, 0) - 0.96) * 15);
}

/* ---------- Film: play button over the poster ---------- */

.film-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    width: 100%;
    padding: 0;
    border: 0;
    background: linear-gradient(0deg, rgba(37, 42, 49, 0.55), rgba(37, 42, 49, 0.15));
    color: var(--white);
    cursor: pointer;
    transition: opacity 0.6s var(--ease), visibility 0.6s;
}

.film-play[hidden] {
    display: none;
}

.film-play__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(72px, 9vw, 104px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: scale 0.6s var(--ease-out), background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.film-play__ring::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: film-breathe 2.8s var(--ease-out) infinite;
}

.film-play__ring svg {
    width: 26%;
    margin-left: 6%;
}

.film-play__label {
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.film-play:hover .film-play__ring,
.film-play:focus-visible .film-play__ring {
    scale: 1.08;
    background: var(--white);
    color: var(--basalt);
}

.walkthrough__video.is-playing .film-play {
    opacity: 0;
    visibility: hidden;
}

@keyframes film-breathe {
    from { scale: 1; opacity: 0.8; }
    to { scale: 1.5; opacity: 0; }
}

/* ---------- Floor plans: tiles lift and the plan comes slightly into focus ---------- */

.plan-tile__frame {
    transition: translate 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.plan-tile__frame img {
    transition: filter 0.7s var(--ease), scale 0.9s var(--ease-out);
}

.plan-tile:hover .plan-tile__frame {
    translate: 0 -6px;
    box-shadow: 0 26px 40px -30px rgba(18, 26, 36, 0.5);
}

.plan-tile:hover .plan-tile__frame img {
    filter: blur(3px) grayscale(0.2);
    scale: 1.04;
}

/* ---------- FAQ: answers slide open instead of snapping ---------- */

.faq__list {
    interpolate-size: allow-keywords;
}

.faq__list details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.5s var(--ease), content-visibility 0.5s allow-discrete;
}

.faq__list details[open]::details-content {
    block-size: auto;
}

.faq__list details[open] .faq__answer {
    transition: opacity 0.5s var(--ease) 0.1s, translate 0.6s var(--ease-out) 0.1s;
}

@starting-style {
    .faq__list details[open] .faq__answer {
        opacity: 0;
        translate: 0 -8px;
    }
}

/* ---------- Lightbox: the open image settles in ---------- */

.lightbox[open] img {
    animation: lightbox-in 0.7s var(--ease-out);
}

@keyframes lightbox-in {
    from { scale: 0.96; opacity: 0; }
    to { scale: 1; opacity: 1; }
}