html,
        body {
            max-width: 100%;
            overflow-x: clip;
        }

        #home,
        nav,
        section,
        .rera-wrap,
        footer,
        .hero-content,
        .hero-inner,
        .hero-left {
            max-width: 100vw;
            min-width: 0;
        }

        .hero-content {
            padding-left: 6vw;
            padding-right: 6vw;
        }

        :root {
            --gold: #b5811f;
            --gold-light: #d4a13a;
            --gold-dark: #8a5e15;
            --gold-grad: linear-gradient(180deg, #c79430 0%, #9c6c18 100%);
            --gold-dim: rgba(181, 129, 31, .12);
            --ink: #2b2b2b;
            --ink2: #1f2733;
            --mid: #4a4a4a;
            --muted: #8a8a8a;
            --bg: #ffffff;
            --bg-soft: #f7f5f1;
            --bg-alt: #faf8f3;
            --border: rgba(181, 129, 31, .25);
            --line: rgba(0, 0, 0, .08);
            --nav-h: 72px;
            --ease: cubic-bezier(.22, .61, .36, 1);
        }

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

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--ink);
            overflow-x: hidden
        }

        body.menu-open {
            overflow: hidden
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: 'Cormorant Garamond', serif
        }

        a {
            color: inherit;
            text-decoration: none
        }

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

        /* SCROLL PROGRESS */
        .progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0;
            background: var(--gold-grad);
            z-index: 2001;
            transition: width .1s linear
        }

        /* REVEAL — with directional variants */
        .reveal {
            opacity: 0;
            transform: translateY(34px);
            transition: opacity .8s var(--ease), transform .8s var(--ease)
        }

        .reveal.from-left {
            transform: translateX(-46px)
        }

        .reveal.from-right {
            transform: translateX(46px)
        }

        .reveal.visible {
            opacity: 1;
            transform: none
        }

        .reveal[data-delay="1"] {
            transition-delay: .12s
        }

        .reveal[data-delay="2"] {
            transition-delay: .24s
        }

        .reveal[data-delay="3"] {
            transition-delay: .36s
        }

        @media(prefers-reduced-motion:reduce) {
            .reveal {
                opacity: 1;
                transform: none;
                transition: none
            }
        }

        /* word-reveal for titles */
        .wreveal .w {
            display: inline-block;
            opacity: 0;
            transform: translateY(115%);
            transition: opacity .7s var(--ease), transform .7s var(--ease)
        }

        .wreveal {
            overflow: hidden
        }

        .wreveal.visible .w {
            opacity: 1;
            transform: none
        }

        .wreveal.visible .w:nth-child(2) {
            transition-delay: .08s
        }

        .wreveal.visible .w:nth-child(3) {
            transition-delay: .16s
        }

        .wreveal.visible .w:nth-child(4) {
            transition-delay: .24s
        }

        .wreveal.visible .w:nth-child(5) {
            transition-delay: .32s
        }

        /* animated underline divider */
        .divider {
            width: 54px;
            height: 3px;
            background: var(--gold-grad);
            margin-bottom: 2.4rem;
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .7s var(--ease) .2s
        }

        .divider.center {
            margin-left: auto;
            margin-right: auto;
            transform-origin: center
        }

        .reveal.visible .divider,
        .divider.visible {
            transform: scaleX(1)
        }

        /* NAV */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            height: var(--nav-h);
            display: flex;
            align-items: center;
            gap: 2.5rem;
            padding: 0 2.5rem;
            background: #fff;
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--line);
            box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
            transition: height .35s var(--ease), box-shadow .35s
        }

        nav.shrink {
            height: 60px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .09)
        }

        .nav-brand {
            flex-shrink: 0
        }

        .nav-brand img {
            width: 200px;
            transition: width .35s var(--ease)
        }

        nav.shrink .nav-brand img {
            width: 165px
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
            align-items: center;
            margin-left: auto
        }

        .nav-links a {
            font-size: .75rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--mid);
            transition: color .2s;
            font-weight: 500;
            position: relative
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 0;
            height: 1.5px;
            background: var(--gold);
            transition: width .3s var(--ease)
        }

        .nav-links a:hover {
            color: var(--gold)
        }

        .nav-links a:hover::after {
            width: 100%
        }

        .nav-phone {
            font-size: .85rem;
            color: var(--gold);
            margin: 0 1.2rem;
            font-weight: 600
        }

        .nav-cta {
            background: var(--gold-grad);
            color: #fff;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .08em;
            padding: .55rem 1.2rem;
            border: none;
            cursor: pointer;
            border-radius: 6px;
            transition: filter .2s, transform .2s;
            box-shadow: 0 4px 12px rgba(156, 108, 24, .3)
        }

        .nav-cta:hover {
            filter: brightness(1.07);
            transform: translateY(-1px)
        }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 6px;
            background: none;
            border: none
        }

        .hamburger span {
            width: 24px;
            height: 2px;
            background: var(--ink2);
            display: block;
            transition: .3s
        }

        /* MOBILE OVERLAY */
        .mob-overlay {
            position: fixed;
            inset: 0;
            z-index: 1100;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            transform: translateX(100%);
            transition: transform .45s var(--ease)
        }

        .mob-overlay.open {
            transform: none
        }

        .mob-overlay a {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2rem;
            color: var(--ink2);
            opacity: 0;
            transform: translateY(20px);
            transition: opacity .5s var(--ease), transform .5s var(--ease)
        }

        .mob-overlay.open a {
            opacity: 1;
            transform: none
        }

        .mob-overlay.open a:nth-child(2) {
            transition-delay: .08s
        }

        .mob-overlay.open a:nth-child(3) {
            transition-delay: .14s
        }

        .mob-overlay.open a:nth-child(4) {
            transition-delay: .2s
        }

        .mob-overlay.open a:nth-child(5) {
            transition-delay: .26s
        }

        .mob-overlay.open a:nth-child(6) {
            transition-delay: .32s
        }

        .mob-overlay.open a:nth-child(7) {
            transition-delay: .38s
        }

        .mob-overlay.open a:nth-child(8) {
            transition-delay: .44s
        }

        .mob-close {
            position: absolute;
            top: 1.4rem;
            right: 1.6rem;
            font-size: 2rem;
            cursor: pointer;
            background: none;
            border: none;
            color: var(--muted)
        }

        /* HERO */
        #home {
            position: relative;
            height: 100vh;
            min-height: 580px;
            overflow: hidden;
            margin-top: var(--nav-h)
        }

        .hero-carousel {
            position: absolute;
            inset: 0
        }

        .hero-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 1.4s var(--ease)
        }

        .hero-slide.active {
            opacity: 1
        }

        .hero-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.04)
        }

        /* Ken Burns: active slide slowly zooms+drifts */
        .hero-slide.active img {
            animation: kenburns 8s ease-out forwards
        }

        @keyframes kenburns {
            0% {
                transform: scale(1.04) translate(0, 0)
            }

            100% {
                transform: scale(1.16) translate(-1.5%, -1.5%)
            }
        }

        @media(prefers-reduced-motion:reduce) {
            .hero-slide.active img {
                animation: none
            }
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(20, 16, 8, .92) 0%, rgba(20, 16, 8, .5) 45%, rgba(20, 16, 8, .15) 100%)
        }

        /* LIGHTBOX (amenities + gallery) */
        .lightbox {
            position: fixed;
            inset: 0;
            z-index: 1500;
            background: rgba(10, 8, 4, 0.94);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 4rem 1rem;
        }

        .lightbox.open {
            display: flex;
            animation: lb-fade .25s ease;
        }

        @keyframes lb-fade {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .lb-stage {
            max-width: 1200px;
            width: 100%;
            max-height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .8rem;
        }

        .lb-img {
            max-width: 100%;
            max-height: 78vh;
            object-fit: contain;
            border-radius: 6px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
            user-select: none;
        }

        .lb-caption {
            color: #f4ead3;
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.25rem;
            text-align: center;
            letter-spacing: .02em;
        }

        .lb-counter {
            color: rgba(244, 234, 211, .5);
            font-size: .75rem;
            letter-spacing: .15em;
            text-transform: uppercase;
        }

        .lb-close,
        .lb-prev,
        .lb-next {
            position: absolute;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(212, 175, 55, .3);
            color: #f4ead3;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background .2s, border-color .2s;
            font-family: Arial, sans-serif;
            line-height: 1;
            user-select: none;
        }

        .lb-close:hover,
        .lb-prev:hover,
        .lb-next:hover {
            background: rgba(212, 175, 55, .25);
            border-color: #d4af37;
        }

        .lb-close {
            top: 1.2rem;
            right: 1.2rem;
            width: 44px;
            height: 44px;
            font-size: 1.4rem;
        }

        .lb-prev,
        .lb-next {
            top: 50%;
            transform: translateY(-50%);
            width: 52px;
            height: 52px;
            font-size: 2rem;
        }

        .lb-prev {
            left: 1.2rem;
        }

        .lb-next {
            right: 1.2rem;
        }

        /* Make whole gallery + amenity cards visibly clickable */
        .am-card,
        .gal-item {
            cursor: zoom-in;
        }

        .am-card img,
        .gal-item img {
            transition: transform .25s ease;
            pointer-events: none; /* clicks go to the card, not the moving image */
        }

        .am-card:hover img,
        .gal-item:hover img {
            transform: scale(1.02);
        }

        @media (max-width: 600px) {
            .lightbox {
                padding: 3.5rem .5rem;
            }

            .lb-close {
                top: .7rem;
                right: .7rem;
                width: 38px;
                height: 38px;
                font-size: 1.2rem;
            }

            .lb-prev,
            .lb-next {
                width: 42px;
                height: 42px;
                font-size: 1.6rem;
                background: rgba(0, 0, 0, .55);
            }

            .lb-prev {
                left: .4rem;
            }

            .lb-next {
                right: .4rem;
            }

            .lb-caption {
                font-size: 1rem;
            }
        }

        /* Server-error banner shown when PHP fails to save the lead (was previously silent) */
        .form-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1100;
            background: #fff4f0;
            border-bottom: 2px solid #e74c3c;
            color: #6e1e0d;
            padding: .85rem 1.2rem;
            display: flex;
            align-items: center;
            gap: .8rem;
            font-size: .88rem;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
        }

        .form-banner.err .fb-icon {
            color: #e74c3c;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .form-banner .fb-text {
            flex: 1;
            line-height: 1.35;
        }

        .form-banner .fb-close {
            background: transparent;
            border: 0;
            font-size: 1.1rem;
            cursor: pointer;
            color: #6e1e0d;
            padding: .2rem .5rem;
            line-height: 1;
        }

        /* Submit loading overlay — fullscreen feedback during form POST */
        .submit-loader {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(20, 16, 8, 0.78);
            backdrop-filter: blur(6px);
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity .2s ease;
        }

        .submit-loader.show {
            display: flex;
            opacity: 1;
        }

        .sl-card {
            background: #fff;
            border-radius: 12px;
            padding: 2.2rem 2.4rem;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
            max-width: 320px;
            width: 84%;
        }

        .sl-spinner {
            width: 46px;
            height: 46px;
            margin: 0 auto 1rem;
            border: 4px solid #f0e6cc;
            border-top-color: #d4af37;
            border-radius: 50%;
            animation: sl-spin .85s linear infinite;
        }

        @keyframes sl-spin {
            to { transform: rotate(360deg); }
        }

        .sl-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.25rem;
            color: #1a1208;
            font-weight: 600;
            margin-bottom: .3rem;
        }

        .sl-sub {
            font-size: .8rem;
            color: #777;
            letter-spacing: .02em;
        }

        /* Above-fold RERA trust badge — top-right of hero. Whole card is a link to MahaRERA. */
        a.hero-rera, .hero-rera {
            position: absolute;
            top: 88px;
            right: 6vw;
            z-index: 5;
            background: rgba(20, 16, 8, 0.78);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(212, 175, 55, 0.45);
            border-radius: 6px;
            padding: .7rem .85rem;
            display: flex;
            align-items: center;
            gap: .8rem;
            color: #f4ead3;
            max-width: 320px;
            text-decoration: none;
            cursor: pointer;
        }

        a.hero-rera:hover {
            border-color: rgba(212, 175, 55, 0.8);
        }

        /* Prevent dead clicks on hero body text — explicitly disable pointer/cursor */
        .hero-title, .hero-by, .hero-loc, .hero-tag, .hero-stats {
            cursor: default;
            user-select: none;
        }

        /* .hero-price is now a <button> opening the popup (was 5,504 dead clicks as <p>) */
        button.hero-price {
            background: transparent;
            border: 1px dashed transparent;
            padding: 0;
            text-align: left;
            cursor: pointer;
         color: #fff;
  font: inherit;
    font-size: inherit;
  display: block;
  transition: opacity .2s;
  font-size: 18px;
        }

        button.hero-price:hover {
            border-bottom-color: rgba(212, 175, 55, 0.5);
            opacity: .9;
        }

        /* Popup body text should not LOOK clickable (was getting 2,598+ dead clicks) */
        .pbox h3, .pbox .psub, .pbox .pdesc {
            cursor: default;
            user-select: none;
        }

        .hero-rera-label {
            font-size: .58rem;
            letter-spacing: .15em;
            color: #d4af37;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: .15rem;
        }

        .hero-rera-num {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.15rem;
            font-weight: 600;
            line-height: 1.1;
            color: #fff;
        }

        .hero-rera-link {
            font-size: .62rem;
            color: rgba(244, 234, 211, .7);
            text-decoration: none;
            margin-top: .15rem;
            display: inline-block;
        }

        .hero-rera-link:hover {
            color: #d4af37;
        }

        .hero-rera-qr {
            width: 56px;
            height: 56px;
            background: #fff;
            padding: 3px;
            border-radius: 3px;
            flex-shrink: 0;
        }

        /* Mobile-only inline mini-form, hidden by default */
        .hmf-mob {
            display: none;
        }

        .hero-dots {
            position: absolute;
            bottom: 7rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: .6rem;
            z-index: 5
        }

        .hero-dot {
            width: 32px;
            height: 4px;
            border-radius: 3px;
            background: rgba(255, 255, 255, .35);
            cursor: pointer;
            transition: background .3s;
            position: relative;
            overflow: hidden
        }

        .hero-dot.active {
            background: rgba(255, 255, 255, .3)
        }

        .hero-dot.active::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--gold-light);
            transform-origin: left;
            animation: dotfill 5s linear forwards
        }

        @keyframes dotfill {
            from {
                transform: scaleX(0)
            }

            to {
                transform: scaleX(1)
            }
        }

        .hero-content {
            position: absolute;
            inset: 0;
            z-index: 4;
            display: flex;
            align-items: flex-end;
            padding: 0 6vw 5rem
        }

        .hero-inner {
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: 4rem;
            width: 100%;
            align-items: end
        }

        .hero-tag {
            display: inline-block;
            background: var(--gold-grad);
            color: #fff;
            font-size: .65rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            padding: .32rem .9rem;
            margin-bottom: 1rem;
            border-radius: 4px;
            font-weight: 700;
            opacity: 0;
            animation: fadeUp .7s var(--ease) .2s forwards
        }

        .hero-title {
            font-size: clamp(2.6rem, 5.5vw, 4.5rem);
            font-weight: 300;
            line-height: 1.08;
            margin-bottom: .35rem;
            color: #fff
        }

        .hero-title strong {
            font-weight: 600;
            color: var(--gold-light)
        }





        .hero-title {
            opacity: 0;
            animation: fadeUp .8s var(--ease) .3s forwards
        }


        .hero-by,
        .hero-loc,
        .hero-stats,
        .hero-price,
        .hero-cta-row {
            opacity: 0;
            animation: fadeUp .7s var(--ease) forwards
        }

        .hero-by {
            animation-delay: .7s;
            font-size: .95rem;
            color: rgba(255, 255, 255, .75);
            margin-bottom: .25rem
        }

        .hero-loc {
            animation-delay: .8s;
            font-size: .82rem;
            color: rgba(255, 255, 255, .6);
            margin-bottom: 1.8rem
        }

        .hero-stats {
            animation-delay: .9s;
            display: flex;
            gap: 2.2rem;
            margin-bottom: 1.8rem
        }

        .hero-price {
            animation-delay: 1s;
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.3rem, 2.8vw, 2rem);
            margin-bottom: 1.6rem;
            line-height: 1.35;
            color: #fff
        }

        .hero-cta-row {
            animation-delay: 1.1s
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(22px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .stat {
            border-left: 2px solid var(--gold-light);
            padding-left: .75rem
        }

        .stat-l {
            font-size: .62rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .6)
        }

        .stat-v {
            font-size: .95rem;
            font-weight: 600;
            color: #fff
        }

        .hero-price .amt {
            color: var(--gold-light);
            font-weight: 600
        }

        .hero-price .sfx {
            font-size: .85rem;
            color: rgba(255, 255, 255, .6)
        }

        .btn-g {
            display: inline-block;
            background: var(--gold-grad);
            color: #fff;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: .9rem 2.1rem;
            border: none;
            cursor: pointer;
            border-radius: 6px;
            transition: filter .2s, box-shadow .25s, transform .2s;
            box-shadow: 0 5px 16px rgba(156, 108, 24, .35);
            position: relative;
            overflow: hidden
        }

        .btn-g::after {
            content: '';
            position: absolute;
            top: 0;
            left: -120%;
            width: 60%;
            height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .4), transparent);
            transform: skewX(-20deg);
            transition: left .6s var(--ease)
        }

        .btn-g:hover {
            filter: brightness(1.08);
            box-shadow: 0 8px 26px rgba(156, 108, 24, .5);
            transform: translateY(-2px)
        }

        .btn-g:hover::after {
            left: 140%
        }

        .btn-o {
            display: inline-block;
            border: 1px solid var(--gold);
            color: var(--gold);
            font-size: .78rem;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: .85rem 1.8rem;
            background: transparent;
            cursor: pointer;
            border-radius: 6px;
            transition: .25s;
            margin-left: .8rem
        }

        .btn-o:hover {
            background: var(--gold-dim);
            transform: translateY(-2px)
        }

        /* hero mini form */
        .hmf {
            background: #fff;
            border: 1px solid var(--border);
            padding: 2rem 1.8rem;
            border-radius: 10px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
            opacity: 0;
            animation: fadeUp .8s var(--ease) .6s forwards
        }

        .hmf h3 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.45rem;
            margin-bottom: .2rem;
            color: var(--ink2)
        }

        .hmf p {
            font-size: .75rem;
            color: var(--muted);
            margin-bottom: 1.3rem
        }

        .ff {
            position: relative;
            margin-bottom: .9rem
        }

        .ff input {
            width: 100%;
            background: #faf8f3;
            border: 1px solid var(--border);
            color: var(--ink);
            padding: .75rem .95rem;
            font-family: 'DM Sans', sans-serif;
            font-size: .85rem;
            outline: none;
            transition: border .2s, box-shadow .2s;
            border-radius: 6px
        }

        .ff input::placeholder {
            color: #aaa
        }

        .ff input:focus {
            border-color: var(--gold);
            box-shadow: 0 0 0 3px var(--gold-dim)
        }

        .ff input.inv {
            border-color: #e05555
        }

        .ff .er {
            font-size: .7rem;
            color: #e05555;
            margin-top: .28rem;
            display: none
        }

        .ff .er.show {
            display: block
        }

        .consent {
            display: flex;
            align-items: flex-start;
            gap: .45rem;
            margin-bottom: 1rem;
            font-size: .7rem;
            color: var(--muted);
            line-height: 1.4
        }

        .consent input {
            margin-top: 2px;
            accent-color: var(--gold)
        }

        /* SECTIONS */
        section {
            padding: 5rem 6vw
        }

        .sec-label {
            font-size: .65rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: .5rem;
            font-weight: 700
        }

        .sec-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.9rem, 3.8vw, 3rem);
            font-weight: 600;
            line-height: 1.15;
            margin-bottom: .4rem;
            color: var(--gold)
        }

        .sec-soft {
            background: var(--bg-soft)
        }

        .sec-white {
            background: #fff
        }

        .sec-alt {
            background: var(--bg-alt)
        }

        /* OVERVIEW */
        .ov-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center
        }

        .ov-text p {
            font-size: .93rem;
            color: var(--mid);
            line-height: 1.88;
            margin-bottom: 1.1rem
        }

        .ov-img {
            position: relative
        }

        .ov-img img {
            width: 100%;
            height: min(580px, 62vh);
            object-fit: cover;
            border-radius: 8px
        }

        .ov-img::after {
            content: '';
            position: absolute;
            top: -14px;
            right: -14px;
            bottom: 14px;
            left: 14px;
            border: 1px solid var(--border);
            z-index: -1;
            pointer-events: none;
            border-radius: 8px
        }

        /* PRICING — tilt cards */
        .price-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden
        }

        .pc {
            background: #fff;
            padding: 2.2rem 1.5rem;
            text-align: center;
            transition: background .25s, transform .35s var(--ease), box-shadow .35s;
            transform-style: preserve-3d;
            /* Whole card is a <button> — neutralize native button chrome on all viewports */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            width: 100%;
            border: 0;
            border-radius: 0;
            font: inherit;
            color: inherit;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            font-family: inherit;
        }

        .pc:focus {
            outline: 2px solid var(--gold);
            outline-offset: -2px;
        }

        .pc:hover {
            background: var(--bg-alt);
            transform: translateY(-6px);
            box-shadow: 0 16px 36px rgba(0, 0, 0, .1);
            z-index: 2
        }

        .pc .ptype {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.3rem;
            color: var(--gold);
            margin-bottom: .45rem;
            font-weight: 600
        }

        .pc .parea {
            font-size: .78rem;
            color: var(--muted);
            margin-bottom: .75rem;
            line-height: 1.55
        }

        .pc .pprice {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.75rem;
            margin-bottom: 1.2rem;
            color: var(--ink2);
            font-weight: 600
        }

        .pc .pprice sup {
            font-size: .65em;
            color: var(--gold)
        }

        .price-note {
            text-align: center;
            font-size: .73rem;
            color: var(--muted);
            margin-top: 1.4rem
        }

        /* FLOOR PLAN */
        .fp-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2.5rem
        }

        .fp-card {
            border: 1px solid var(--border);
            padding: 2rem;
            text-align: center;
            border-radius: 8px;
            background: #fff;
            transition: transform .35s var(--ease), box-shadow .35s
        }

        .fp-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 36px rgba(0, 0, 0, .1)
        }

        .fp-card h3 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.4rem;
            color: var(--gold);
            margin-bottom: 1.2rem;
            font-weight: 600
        }

        .fp-card img {
            width: 100%;
            max-height: min(340px, 40vh);
            object-fit: contain;
            margin: 0 auto 1.5rem
        }

        /* CAROUSEL (amenities + gallery) */
        .carousel {
            position: relative;
            overflow: hidden
        }


        .carousel-track {
            display: flex;
            gap: 1.2rem;
            width: max-content;
            animation: marquee 40s linear infinite;
        }

        .carousel:hover .carousel-track {
            animation-play-state: paused
        }

        @keyframes marquee {
            from {
                transform: translateX(0)
            }

            to {
                transform: translateX(-50%)
            }
        }

        @media(prefers-reduced-motion:reduce) {
            .carousel-track {
                animation: none
            }
        }




        .am-card {
            position: relative;
            overflow: hidden;
            width: clamp(260px, 30vw, 360px);
            aspect-ratio: 4/3;
            cursor: pointer;
            border-radius: 10px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
            transition: box-shadow .35s, transform .35s var(--ease)
        }

        .am-card:hover {
            box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
            transform: translateY(-4px)
        }

        .am-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .7s var(--ease)
        }

        .am-card:hover img {
            transform: scale(1.08)
        }

        .am-card .am-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.6rem .9rem .8rem;
            background: linear-gradient(transparent, rgba(20, 16, 8, .9));
            font-size: .8rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #fff;
            font-weight: 600;
            transform: translateY(6px);
            transition: transform .35s var(--ease)
        }

        .am-card:hover .am-label {
            transform: none
        }

        .gal-item {
            overflow: hidden;
            width: clamp(240px, 26vw, 320px);
            aspect-ratio: 4/3;
            cursor: pointer;
            border-radius: 10px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
            transition: box-shadow .35s, transform .35s var(--ease)
        }

        .gal-item:hover {
            box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
            transform: translateY(-4px)
        }

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

        .gal-item:hover img {
            transform: scale(1.1)
        }





        .car-btn:hover {
            background: var(--gold-grad);
            color: #fff;
            border-color: transparent;
            transform: scale(1.06)
        }

        .car-btn:disabled {
            opacity: .35;
            cursor: default;
            transform: none;
            background: #fff;
            color: var(--gold)
        }

        /* LOCATION */
        .loc-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: start
        }

        .loc-map img {
            width: 100%;
            max-height: min(460px, 52vh);
            object-fit: cover;
            border: 1px solid var(--border);
            border-radius: 8px
        }

        .tab-btns {
            display: flex;
            margin-bottom: 1.4rem
        }

        .tb {
            padding: .6rem 1.1rem;
            font-size: .72rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            border: 1px solid var(--border);
            cursor: pointer;
            color: var(--muted);
            transition: .2s;
            margin-right: -1px;
            background: #fff;
            font-weight: 600
        }

        .tb.active {
            background: var(--gold-grad);
            color: #fff;
            border-color: var(--gold)
        }

        .tp {
            display: none
        }

        .tp.active {
            display: block;
            animation: fadeUp .5s var(--ease)
        }

        .conn-list {
            list-style: none
        }

        .conn-list li {
            padding: .6rem 0;
            border-bottom: 1px solid var(--line);
            font-size: .87rem;
            color: var(--mid);
            display: flex;
            align-items: center;
            gap: .6rem
        }

        .conn-list li::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gold);
            flex-shrink: 0
        }

        /* CONTACT */
        .ct-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden
        }

        .ct-img {
            overflow: hidden
        }

        .ct-img img {
            width: 100%;
            height: 100%;
            max-height: min(520px, 58vh);
            object-fit: cover;
            transition: transform 6s var(--ease)
        }

        .ct-grid:hover .ct-img img {
            transform: scale(1.06)
        }

        .ct-form {
            padding: 3rem;
            background: #fff
        }

        .ct-form h2 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2rem;
            margin-bottom: .3rem;
            color: var(--ink2);
            font-weight: 600
        }

        .ct-form p {
            font-size: .8rem;
            color: var(--muted);
            margin-bottom: 2rem
        }

        /* RERA */
        .rera-wrap {
            background: var(--bg-soft);
            border-top: 1px solid var(--border);
            padding: 3rem 6vw
        }

        .rera-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1.5rem;
            align-items: center;
            margin-top: 1.5rem
        }

        .ri {
            text-align: center
        }

        .ri .rn {
            font-size: .72rem;
            color: var(--gold);
            margin-bottom: .7rem;
            font-weight: 600;
            word-break: break-all
        }

        .ri img {
            width: 90px;
            height: 90px;
            margin: 0 auto;
            border: 2px solid var(--border);
            padding: 4px;
            background: #fff;
            border-radius: 4px;
            object-fit: contain
        }

        .rera-footer {
            font-size: .76rem;
            color: var(--muted);
            margin-top: 1.6rem;
            text-align: center
        }

        .rera-footer a {
            color: var(--gold)
        }

        /* FOOTER */
        footer {
            background: var(--ink2);
            padding: 2.4rem 6vw;
            border-top: 3px solid var(--gold)
        }

        footer p {
            font-size: .72rem;
            color: rgba(255, 255, 255, .6);
            line-height: 1.75
        }

        footer a {
            color: var(--gold-light)
        }

        /* FLOAT BTNS */
        .floats {
            position: fixed;
            bottom: 5.5rem;
            right: 1.4rem;
            z-index: 900;
            display: flex;
            flex-direction: column;
            gap: .75rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity .4s
        }

        .floats.vis {
            opacity: 1;
            pointer-events: auto
        }

        .fb {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
            transition: transform .2s;
            cursor: pointer
        }

        .fb:hover {
            transform: scale(1.1)
        }

        .fb-wa {
            background: #25d366;
            color: #fff
        }

        .fb-call {
            background: var(--gold-grad);
            color: #fff
        }

        .fb svg {
            width: 22px;
            height: 22px
        }

        .fb-wa {
            animation: pulse 2.4s infinite
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 4px 18px rgba(0, 0, 0, .3), 0 0 0 0 rgba(37, 211, 102, .5)
            }

            70% {
                box-shadow: 0 4px 18px rgba(0, 0, 0, .3), 0 0 0 14px rgba(37, 211, 102, 0)
            }

            100% {
                box-shadow: 0 4px 18px rgba(0, 0, 0, .3), 0 0 0 0 rgba(37, 211, 102, 0)
            }
        }

        /* BACK TOP */
        #btt {
            position: fixed;
            bottom: 1.4rem;
            right: 1.4rem;
            z-index: 900;
            width: 42px;
            height: 42px;
            background: #fff;
            border: 1px solid var(--gold);
            color: var(--gold);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
            font-size: 1.1rem;
            border-radius: 6px;
            box-shadow: 0 3px 12px rgba(0, 0, 0, .12)
        }

        #btt.vis {
            opacity: 1;
            pointer-events: auto
        }

        /* MOB BAR */
        .mob-bar {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 950;
            height: 56px;
            background: #fff;
            border-top: 1px solid var(--line);
            grid-template-columns: 1fr 1fr 1fr;
            box-shadow: 0 -2px 14px rgba(0, 0, 0, .08)
        }

        .mob-bar a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: .65rem;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--mid);
            gap: 2px;
            text-decoration: none;
            font-weight: 600
        }

        .mob-bar a:nth-child(2) {
            background: var(--gold-grad);
            color: #fff
        }

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

        /* POPUP */
        .pb {
            position: fixed;
            inset: 0;
            z-index: 1200;
            background: rgba(20, 16, 8, .72);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s
        }

        .pb.open {
            opacity: 1;
            pointer-events: auto
        }

        .pbox {
            background: #fff;
            border: 1px solid var(--border);
            max-width: 430px;
            width: 92%;
            padding: 2.4rem;
            position: relative;
            border-radius: 10px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
            transform: translateY(24px) scale(.97);
            transition: transform .4s var(--ease)
        }

        .pb.open .pbox {
            transform: none
        }

        .pclose {
            position: absolute;
            top: .9rem;
            right: 1rem;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--muted);
            line-height: 1;
            background: none;
            border: none
        }

        .pbox h3 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.7rem;
            margin-bottom: .25rem;
            color: var(--ink2);
            font-weight: 600
        }

        .pbox .psub {
            font-size: .72rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: .3rem;
            font-weight: 700
        }

        .pbox .pdesc {
            font-size: .8rem;
            color: var(--muted);
            margin-bottom: 1.4rem
        }

        /* TOAST */
        .toast {
            position: fixed;
            top: 1.4rem;
            right: 1.4rem;
            z-index: 2000;
            background: var(--gold-grad);
            color: #fff;
            padding: .9rem 1.5rem;
            font-weight: 700;
            font-size: .82rem;
            transform: translateY(-200%);
            transition: transform .4s var(--ease);
            border-radius: 6px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, .2)
        }

        .toast.show {
            transform: translateY(0)
        }

        /* RESPONSIVE */
        @media(max-width:960px) {
            nav {
                padding: 0 1rem;
                gap: .5rem;
                justify-content: flex-start
            }

            .nav-brand {
                margin-right: auto
            }

            .nav-brand img {
                width: 140px
            }

            nav.shrink .nav-brand img {
                width: 125px
            }

            .nav-links,
            .nav-phone {
                display: none
            }

            /* Hide nav Enquire CTA on mobile — mob-bar already has it (was a duplicate CTA causing confusion) */
            .nav-cta {
                display: none
            }

            .hamburger {
                display: flex;
                margin-left: .1rem
            }

            #home {
                margin-top: 60px
            }

            /* Stronger mobile overlay so headline is readable over the bright building photo */
            .hero-overlay {
                background: linear-gradient(to top, rgba(20, 16, 8, .96) 0%, rgba(20, 16, 8, .75) 55%, rgba(20, 16, 8, .45) 100%)
            }

            .hero-inner {
                display: block;
                width: 100%;
                max-width: 100%;
                gap: 0;
            }


            .hero-left {
                width: 100%;
                min-width: 0;
                overflow-wrap: break-word
            }



            .hmf {
                display: none
            }

            /* Show inline mini-form on mobile — gives 77% of traffic a no-popup conversion path */
            .hmf-mob {
                display: block;
                margin-top: 1.2rem;
                background: rgba(20, 16, 8, 0.78);
                backdrop-filter: blur(4px);
                border: 1px solid rgba(212, 175, 55, 0.3);
                border-radius: 8px;
                padding: 1rem;
            }

            .hmf-mob-title {
                color: #f4ead3;
                font-size: .78rem;
                margin: 0 0 .6rem;
                opacity: .9;
            }

            .hmf-mob .ff {
                margin-bottom: .55rem;
            }

            .hmf-mob input {
                width: 100%;
                padding: .65rem .8rem;
                font-size: .9rem;
                border-radius: 5px;
                border: 1px solid rgba(255, 255, 255, .25);
                background: rgba(255, 255, 255, .95);
                color: #1a1208;
            }

            .hmf-mob input.inv {
                border-color: #e74c3c;
            }

            .hmf-mob .er {
                color: #ffb4a8;
                font-size: .72rem;
                display: none;
            }

            .hmf-mob .er.show {
                display: block;
            }

            /* Shrink RERA badge on mobile and move below nav */
            .hero-rera {
                top: 72px;
                right: 1rem;
                padding: .5rem .6rem;
                gap: .55rem;
                max-width: 230px;
            }

            .hero-rera-label {
                font-size: .5rem;
            }

            .hero-rera-num {
                font-size: .9rem;
            }

            .hero-rera-link {
                font-size: .55rem;
            }

            .hero-rera-qr {
                width: 44px;
                height: 44px;
            }

            .hero-content {
                padding: 0 6vw 4.5rem;
                align-items: center;
                justify-content: flex-start
            }

            .hero-title {
                font-size: clamp(1.9rem, 8.5vw, 3rem);
                white-space: normal;
                word-break: break-word
            }

            .hero-dots {
                bottom: 6rem
            }

            .ov-grid,
            .fp-grid,
            .loc-grid,
            .ct-grid {
                grid-template-columns: 1fr
            }

            .price-grid {
                grid-template-columns: 1fr 1fr;
                background: transparent;
                border: none;
                gap: 1rem
            }

            /* Mobile pricing cards: separate bordered tiles, not a divided grid */
            .pc {
                border: 1px solid var(--border) !important;
                border-radius: 8px !important;
            }

            .rera-grid {
                grid-template-columns: repeat(3, 1fr)
            }

            .floats {
                display: none
            }

            .mob-bar {
                display: grid
            }

            body {
                padding-bottom: 56px
            }

            /* Lift back-to-top above the mob-bar (56px tall, bottom:0) */
            #btt {
                bottom: calc(56px + 1rem);
                right: 1rem;
                width: 38px;
                height: 38px;
            }

            .ct-img {
                display: none
            }

            section {
                padding: 3.5rem 5vw
            }

            .car-btn {
                width: 38px;
                height: 38px;
                font-size: 1.05rem
            }
        }

        @media(max-width:520px) {
            .price-grid {
                grid-template-columns: 1fr
            }

            .rera-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .hero-stats {
                flex-wrap: wrap;
                gap: 1rem
            }
        }