[x-cloak] {
            display: none !important;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background: #ffffff;
            color: #111827;
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
            position: relative;
        }

        h1,
        h2,
        h3,
        h4,
        .font-serif {
            font-family: 'Playfair Display', serif;
        }

        ::selection {
            background: #d4af37;
            color: #111827;
        }

        .hero-media {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
        }

        .hero-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Reserve paint space — reduces CLS */
            aspect-ratio: 16 / 9;
            max-height: none;
        }

        #home {
            min-height: 100svh;
            min-height: 100vh;
        }

        /* =====================================================
           HERO
        ====================================================== */

        .hero-overlay {

            background:
                linear-gradient(
                    90deg,
                    rgba(4, 9, 18, 0.88) 0%,
                    rgba(4, 9, 18, 0.62) 42%,
                    rgba(4, 9, 18, 0.18) 100%
                );

        }

        .hero-overlay-mobile {

            background:
                linear-gradient(
                    180deg,
                    rgba(4, 9, 18, 0.65) 0%,
                    rgba(4, 9, 18, 0.55) 45%,
                    rgba(4, 9, 18, 0.92) 100%
                );

        }

        /* =====================================================
           GOLD
        ====================================================== */

        .gold-line {
            width: 55px;
            height: 1px;
            background: #d4af37;
        }

        .gold-gradient {

            background:
                linear-gradient(
                    135deg,
                    #b88a14 0%,
                    #d4af37 45%,
                    #f1dc8a 100%
                );

        }

        .gold-text {

            background:
                linear-gradient(
                    135deg,
                    #b88a14,
                    #d4af37,
                    #f2dc8a
                );

            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;

        }

        /* =====================================================
           GLASS
        ====================================================== */

        .glass {

            background: rgba(15, 23, 42, 0.72);

            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);

        }

        .glass-light {

            background: rgba(255,255,255,0.08);

            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);

        }

        /* =====================================================
           ARCHITECTURAL GRID
        ====================================================== */

        .architectural-grid {

            background-image:
                linear-gradient(
                    rgba(212,175,55,0.08) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(212,175,55,0.08) 1px,
                    transparent 1px
                );

            background-size: 50px 50px;

        }

        /* =====================================================
           CONFIGURATION CARDS
        ====================================================== */

        .config-card {

            transition:
                transform 0.45s cubic-bezier(.2,.8,.2,1),
                box-shadow 0.45s ease,
                border-color 0.45s ease;

        }

        .config-card:hover {

            transform: translateY(-10px);

            box-shadow:
                0 30px 65px rgba(0,0,0,0.13);

            border-color:
                rgba(212,175,55,0.70);

        }

        /* =====================================================
           AMENITY CARDS
        ====================================================== */

        .amenity-card {

            transition:
                background-color 0.3s ease,
                border-color 0.3s ease,
                transform 0.3s ease;

        }

        .amenity-card:hover {

            background:
                rgba(255,255,255,0.06);

            border-color:
                rgba(212,175,55,0.55);

            transform:
                translateY(-4px);

        }

        /* =====================================================
           NAVIGATION
        ====================================================== */

        .nav-link {
            position: relative;
        }

        .nav-link::after {

            content: '';

            position: absolute;

            left: 0;
            bottom: -8px;

            width: 0;
            height: 1px;

            background: #d4af37;

            transition:
                width 0.3s ease;

        }

        .nav-link:hover::after {
            width: 100%;
        }

        .zr-site-header .nav-link,
        .zr-site-header a.nav-link {
            color: #f4f1ea !important;
        }

        .zr-site-header .nav-link:hover,
        .zr-site-header .nav-link:focus-visible {
            color: #ffffff !important;
        }

        .zr-site-header .nav-link::after {
            background: #86efac;
        }

        .zr-site-header .zr-mobile-nav a {
            color: #f4f1ea !important;
        }

        /* =====================================================
           FORM
        ====================================================== */

        .floating-input {
            position: relative;
        }

        .floating-input input,
        .floating-input select {

            width: 100%;

            background:
                rgba(255,255,255,0.04);

            border: 0;

            border-bottom:
                1px solid rgba(255,255,255,0.28);

            border-radius: 0;

            padding:
                18px 0 9px;

            color: white;

            outline: none;

            transition:
                border-color 0.3s ease,
                box-shadow 0.3s ease;

        }

        .floating-input input:focus,
        .floating-input select:focus {

            border-bottom-color:
                #d4af37;

            box-shadow:
                0 1px 0 #d4af37;

        }

        .floating-input label {

            position: absolute;

            left: 0;
            top: 16px;

            color:
                rgba(255,255,255,0.58);

            font-size: 13px;

            pointer-events: none;

            transition:
                all 0.2s ease;

        }

        .floating-input input:focus + label,
        .floating-input input:not(:placeholder-shown) + label {

            top: 0;

            font-size: 9px;

            color: #d4af37;

            letter-spacing:
                0.12em;

            text-transform:
                uppercase;

        }

        .floating-input select {

            appearance: none;
            -webkit-appearance: none;

            cursor: pointer;

        }

        .floating-input select option {

            color: #111827;
            background: #ffffff;

        }

        /* =====================================================
           MODAL SCROLLBAR
        ====================================================== */

        .modal-scroll::-webkit-scrollbar {
            width: 5px;
        }

        .modal-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .modal-scroll::-webkit-scrollbar-thumb {

            background:
                rgba(212,175,55,0.5);

        }

        /* =====================================================
           SCROLL INDICATOR
        ====================================================== */

        .scroll-indicator {

            animation:
                scrollDown 2s infinite;

        }

        @keyframes scrollDown {

            0%,
            100% {

                transform:
                    translateY(0);

                opacity:
                    .45;

            }

            50% {

                transform:
                    translateY(8px);

                opacity:
                    1;

            }

        }

        /* =====================================================
           GOLD PULSE
        ====================================================== */

        .pulse-gold {

            animation:
                pulseGold 2.5s infinite;

        }

        @keyframes pulseGold {

            0%,
            100% {

                box-shadow:
                    0 0 0 0
                    rgba(212,175,55,0.18);

            }

            50% {

                box-shadow:
                    0 0 0 10px
                    rgba(212,175,55,0);

            }

        }

        /* =====================================================
           GALLERY
        ====================================================== */

        .gallery-item img {

            transition:
                transform 0.7s
                cubic-bezier(.2,.8,.2,1);

        }

        .gallery-item:hover img {

            transform:
                scale(1.06);

        }


        /* =====================================================
           HERO MEDIA / FORM OVERHANG (80/20)
        ====================================================== */

        .hero-media {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 0;
        }

        .hero-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-form-wrap {
            position: relative;
            z-index: 20;
        }

        .hero-enquiry {
            background: rgba(15, 31, 10, 0.78);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(74, 222, 128, 0.28);
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
            padding: 1.35rem 1.4rem 1.5rem;
        }

        @media (min-width: 640px) {
            .hero-enquiry {
                padding: 1.6rem 1.75rem 1.75rem;
            }
        }

        .hero-enquiry .floating-input input,
        .hero-enquiry .floating-input select {
            padding: 16px 0 8px;
            font-size: 0.875rem;
        }

        .hero-enquiry .floating-input label {
            top: 14px;
            font-size: 12px;
        }

        .hero-enquiry .floating-input input:focus + label,
        .hero-enquiry .floating-input input:not(:placeholder-shown) + label {
            top: 0;
            font-size: 9px;
        }

        /* Select floating label always elevated */
        .floating-input.select-field label {
            top: 0 !important;
            font-size: 9px !important;
            color: #d4af37 !important;
            letter-spacing: 0.12em !important;
            text-transform: uppercase !important;
        }

        .floating-input select:focus {
            border-bottom-color: #d4af37;
            box-shadow: 0 1px 0 #d4af37;
        }

        .floating-input input:focus-visible,
        .floating-input select:focus-visible,
        .hero-enquiry input[type="checkbox"]:focus-visible,
        button:focus-visible,
        a:focus-visible {
            outline: 2px solid #d4af37;
            outline-offset: 2px;
        }

        @media (min-width: 1024px) {
            .hero-form-wrap {
                transform: translateY(20%);
            }

            #overview {
                padding-top: 11rem;
            }
        }

        /* Short laptop viewports: keep form usable */
        @media (min-width: 1024px) and (max-height: 820px) {
            .hero-enquiry {
                max-height: min(70vh, 560px);
                overflow-y: auto;
            }
        }

        .logo-img {
            height: 2.25rem;
            width: auto;
            max-width: 160px;
            object-fit: contain;
        }

        @media (min-width: 1024px) {
            .logo-img {
                height: 2.75rem;
                max-width: 190px;
            }
        }

        /* =====================================================
           REDUCED MOTION
        ====================================================== */

        @media (prefers-reduced-motion: reduce) {

            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {

                animation-duration:
                    0.01ms !important;

                animation-iteration-count:
                    1 !important;

                transition-duration:
                    0.01ms !important;

            }

        }

/* Captcha honeypot — visually hidden WITHOUT negative offsets (avoids page overflow) */
.zr-hp {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
}

.zr-captcha {
	position: relative;
}

.zr-captcha-panel {
	min-height: 52px;
}

/* =====================================================
   MOBILE / OVERFLOW HARDENING
   Prevents AOS slide transforms + hero overhang from
   pushing the hamburger / content off-screen.
===================================================== */

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

.zr-site-header,
.zr-site-header nav,
main,
footer {
	max-width: 100%;
}

.zr-site-header {
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100vw;
	overflow-x: clip;
}

.zr-nav-bar {
	width: 100%;
	min-width: 0;
	gap: 0.75rem;
}

.zr-nav-brand {
	min-width: 0;
	flex: 1 1 auto;
	max-width: calc(100% - 3.25rem);
}

.zr-nav-brand-text {
	min-width: 0;
	overflow: hidden;
}

.zr-nav-brand-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: 0.12em !important;
	font-size: 0.95rem !important;
}

.zr-nav-toggle {
	flex: 0 0 auto;
	margin-left: auto;
}

#home {
	overflow-x: clip;
	overflow-y: visible;
	max-width: 100%;
}

.hero-form-wrap,
.hero-enquiry,
.zr-hero-grid > * {
	min-width: 0;
	max-width: 100%;
}

.hero-enquiry {
	width: 100%;
	box-sizing: border-box;
	max-height: min(78vh, 680px);
	overflow-y: auto;
	overflow-x: hidden;
}

/* Long RERA / eyebrow strings should wrap, not expand page */
.zr-break-text {
	overflow-wrap: anywhere;
	word-break: break-word;
}

@media (max-width: 1023px) {
	/* Kill horizontal AOS offsets that clip content left and leave a white gap */
	[data-aos^='fade-right'],
	[data-aos^='fade-left'],
	[data-aos='fade-up'],
	[data-aos='fade-down'],
	[data-aos].aos-animate {
		transform: none !important;
	}

	#home {
		overflow: hidden;
	}

	.hero-form-wrap {
		transform: none !important;
		width: 100%;
	}

	.zr-nav-brand-name {
		letter-spacing: 0.1em !important;
		font-size: 0.85rem !important;
	}

	.zr-site-header nav {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media (min-width: 1024px) {
	#home {
		overflow: visible;
	}
}

/* =====================================================
   CINEMATIC PREVIEWS
====================================================== */

.zr-cinematic-card {
	min-width: 0;
}

.zr-cinematic-frame {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.zr-cinematic-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #0a0f1a;
	border: 1px solid rgba(212, 175, 55, 0.18);
	isolation: isolate;
}

.zr-cinematic-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 1.1s ease, transform 8s ease;
	will-change: opacity, transform;
}

.zr-cinematic-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.zr-cinematic-media.is-playing .zr-cinematic-slide.is-active {
	transform: scale(1);
}

.zr-cinematic-shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(4, 9, 18, 0.15) 0%, rgba(4, 9, 18, 0.15) 40%, rgba(4, 9, 18, 0.82) 100%);
}

.zr-cinematic-play {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.zr-cinematic-media:hover .zr-cinematic-play,
.zr-cinematic-media:focus-within .zr-cinematic-play {
	opacity: 1;
}

.zr-cinematic-media:not(.is-playing) .zr-cinematic-play {
	opacity: 1;
}

.zr-cinematic-play-icon {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #b88a14 0%, #d4af37 45%, #f1dc8a 100%);
	color: #0b1220;
	font-size: 1rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.zr-cinematic-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	padding: 1.25rem 1.35rem 1.5rem;
	pointer-events: none;
}

.zr-cinematic-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	height: 2px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.zr-cinematic-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #b88a14, #f1dc8a);
	animation: zrCinematicProgress 4.2s linear infinite;
	animation-play-state: paused;
}

.zr-cinematic-media.is-playing .zr-cinematic-progress span {
	animation-play-state: running;
}

@keyframes zrCinematicProgress {
	from { width: 0; }
	to { width: 100%; }
}

.zr-cinematic-impression {
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.zr-cinematic-slide,
	.zr-cinematic-media.is-playing .zr-cinematic-slide.is-active {
		transition: opacity 0.4s ease;
		transform: none;
	}
	.zr-cinematic-progress span {
		animation: none;
		width: 100%;
	}
}

/* Utpalaa green palette over the Utpalaa layout */
:root {
	--ut-green: #2d5016;
	--ut-green-mid: #16a34a;
	--ut-green-light: #4ade80;
}

::selection {
	background: #2d5016;
	color: #fff;
}

.hero-overlay,
.hero-overlay-mobile {
	display: none !important;
	background: none;
}

.hero-media iframe.hero-youtube {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.78vh;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

.hero-copy {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.gold-gradient {
	background: linear-gradient(135deg, #2d5016, #16a34a) !important;
	color: #ffffff !important;
	border-color: rgba(74, 222, 128, 0.45) !important;
}

.gold-text {
	color: #86efac;
}

section.bg-white .gold-text,
section.bg-white .text-yellow-500 {
	color: #2d5016 !important;
}

.text-yellow-700 {
	color: #166534 !important;
}

.gold-line {
	background: linear-gradient(90deg, #2d5016, #4ade80);
}

.hero-enquiry,
.hero-enquiry .ut-lead-form,
.popup-form-container,
.modal-scroll {
	scrollbar-width: thin;
	scrollbar-color: #4ade80 rgba(255, 255, 255, 0.08);
}

.hero-enquiry::-webkit-scrollbar,
.hero-enquiry .ut-lead-form::-webkit-scrollbar,
.modal-scroll::-webkit-scrollbar {
	width: 8px;
}

.hero-enquiry::-webkit-scrollbar-track,
.modal-scroll::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.06);
}

.hero-enquiry::-webkit-scrollbar-thumb,
.modal-scroll::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #2d5016, #4ade80);
	border-radius: 99px;
}

.ut-gallery-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 180px;
	gap: 12px;
}

.ut-gallery-tile {
	border: 0;
	padding: 0;
	cursor: pointer;
	min-height: 180px;
}

.ut-gallery-tile:first-child {
	grid-column: span 2;
	grid-row: span 2;
	min-height: 372px;
}

.ut-gallery-tile:nth-child(2) {
	grid-column: span 2;
}

@media (max-width: 768px) {
	.ut-gallery-bento {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 140px;
	}
	.ut-gallery-tile:first-child {
		grid-column: span 2;
		grid-row: span 1;
		min-height: 200px;
	}
	.ut-gallery-tile:nth-child(2) {
		grid-column: span 1;
	}
}

.ut-experience {
	background: #f4f7f2;
}

.ut-experience-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	grid-template-rows: 240px 240px;
	gap: 14px;
}

.ut-experience-feature {
	grid-row: span 2;
}

.ut-experience-shot {
	position: relative;
	border: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	background: #111;
}

.ut-experience-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 14px;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
	text-align: left;
}

@media (max-width: 900px) {
	.ut-experience-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 280px 160px 160px;
	}
	.ut-experience-feature {
		grid-column: span 2;
		grid-row: span 1;
	}
}

.hero-enquiry,
.zr-captcha,
#home .text-white\/45 {
	color: rgba(255, 255, 255, 0.85);
}

section.bg-white p.text-slate-500 {
	color: #334155;
}

.zr-site-header.bg-slate-950\/95,
header.zr-site-header {
	--tw-backdrop-blur: blur(16px);
}

.shadow-gold {
	box-shadow: 0 10px 35px rgba(45, 80, 22, 0.35) !important;
}

.hero-enquiry {
	border-color: rgba(74, 222, 128, 0.2);
}

.ut-lead-form .floating-input input,
.ut-lead-form .floating-input select {
	color: inherit;
}

#panchami .hero-enquiry .ut-consent-label,
.hero-enquiry .ut-consent-label {
	color: rgba(255, 255, 255, 0.55) !important;
}