/* ==========================================================================
   Estate Skyvue Mobile Master Stylesheet (Uncompromised Authentic Mobile Build)
   ========================================================================== */

/* 1. Global Reset & Variables */
:root {
    --color-bg-darker: #060a08;
    --color-bg-dark: #0d1510;
    --color-bg-card: #121c18;
    --color-bg-glass: rgba(12, 18, 15, 0.92);
    
    --color-primary: #0a3d34;     /* Forest Teal */
    --color-primary-light: #12574c;
    --color-primary-dark: #04221c;
    
    --color-gold: #c5a059;        /* Champagne Gold */
    --color-gold-light: #e0c07e;
    --color-gold-dark: #9f7d3a;
    --color-gold-gradient: linear-gradient(135deg, #e0c07e 0%, #c5a059 50%, #9f7d3a 100%);
    
    --color-text-light: #f5f8f6;
    --color-text-muted: #b8cec3;
    --color-text-body: #ccddd5;
    
    --border-gold: 1px solid rgba(197, 160, 89, 0.4);
    --border-glass: 1px solid rgba(255, 255, 255, 0.08);
    
    --shadow-luxury: 0 12px 32px rgba(0, 0, 0, 0.7);
    --shadow-gold: 0 4px 18px rgba(197, 160, 89, 0.2);
    
    --font-headings: 'Cinzel', serif;
    --font-body: 'Outfit', sans-serif;
    --transition-smooth: all 0.3s ease;
    
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 18px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    font-size: 15px;
    background-color: var(--color-bg-darker);
    color: var(--color-text-light);
    font-family: var(--font-body);
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
    line-height: 1.6;
    padding-bottom: max(75px, env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
}

/* Buttons and fields use the site's font (browsers give them their own system font by default: the tower,
   flat, tab and BHK buttons were showing in Arial/Roboto) */
button, input, select, textarea {
    font-family: inherit;
}

/* Typography & Layout */
h1, h2, h3, h4 {
    font-family: var(--font-headings);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-light);
}

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

.container {
    width: 92%;
    margin: 0 auto;
    max-width: 540px;
}

.section {
    padding: 45px 0;
    position: relative;
}

.alt-bg {
    background-color: var(--color-bg-dark);
}

.section-header {
    text-align: center;
    margin-bottom: 28px;
}

.section-subtitle {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-gold);
    letter-spacing: 3px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.section-title {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.header-divider {
    width: 45px;
    height: 2px;
    background: var(--color-gold-gradient);
    margin: 10px auto 0;
    border-radius: 2px;
}

.lead-text {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 14px;
}

p {
    color: var(--color-text-body);
    font-size: 0.88rem;
    line-height: 1.65;
    margin-bottom: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
    min-height: 44px;
    text-align: center;
    width: 100%;
}

.btn-primary {
    background: var(--color-gold-gradient);
    color: var(--color-bg-darker);
    box-shadow: var(--shadow-gold);
}

/* ==========================================================================
   OPTION 2: Pure Green-Tinted Beveled Glassmorphic Header (Zero Glow, Zero Gray)
   - Zero outer glows, zero white/gray border lines
   - Pure green-tinted 3D inward-tucking bevel contour
   - High optical glassmorphic refraction
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border: none; /* Absolutely no borders */
    
    /* Reconstructed Courtyard Scene layered with Pure Green Glassmorphism */
    background: 
        /* Layer 1: Inward Curving Green-Tinted Vignette (Edges roll in naturally) */
        radial-gradient(ellipse at 50% 50%, 
            rgba(10, 48, 36, 0.15) 0%, 
            rgba(6, 32, 24, 0.45) 75%, 
            rgba(2, 16, 12, 0.80) 100%
        ),
        /* Layer 2: Pure Emerald Glass Glaze */
        linear-gradient(180deg, 
            rgba(10, 48, 36, 0.35) 0%, 
            rgba(6, 30, 22, 0.55) 50%, 
            rgba(3, 18, 13, 0.70) 100%
        ),
        /* Layer 3: Contrast Balancer for Logo & Controls */
        linear-gradient(90deg, 
            rgba(2, 14, 10, 0.55) 0%, 
            transparent 30%, 
            transparent 70%, 
            rgba(2, 14, 10, 0.55) 100%
        ),
        /* Layer 4: Reconstructed Panoramic Courtyard Photographic Scene */
        url('assets/courtyard_header_strip.jpg') center center / cover no-repeat;
    
    /* High Optical Glassmorphic Blur & Saturation */
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    
    /* Pure 3D Inward-Tucking Bevel (Zero White, Zero Gray, Zero Outer Glow) */
    box-shadow: 
        /* Top inward-rolling bevel contour */
        inset 0 6px 12px -3px rgba(0, 0, 0, 0.55),
        /* Bottom inward-tucking bevel contour */
        inset 0 -6px 12px -3px rgba(0, 0, 0, 0.75),
        /* Lateral inward-rolling corners */
        inset 8px 0 14px -4px rgba(0, 0, 0, 0.50),
        inset -8px 0 14px -4px rgba(0, 0, 0, 0.50),
        /* Ambient floor drop shadow */
        0 14px 35px rgba(0, 0, 0, 0.70);
    
    transition: var(--transition-smooth);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 66px;
    padding: 0 4.5%;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 2px 4px;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.brand-logo:active {
    transform: scale(0.97);
    opacity: 0.9;
}

.brand-logo-img {
    height: 38px;
    width: auto;
    max-width: 145px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.85));
    transition: filter 0.3s ease;
}

/* Tactile 3D Frosted Glass Capsule Toggle (Zero Gray, Zero Glow) */
.mobile-toggle {
    background: rgba(4, 24, 18, 0.50);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4.5px;
    width: 38px;
    height: 36px;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.50),
        inset 0 -3px 6px rgba(0, 0, 0, 0.70),
        0 4px 12px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mobile-toggle:active {
    transform: scale(0.93);
    background: rgba(2, 16, 12, 0.70);
}

.mobile-toggle .bar {
    width: 100%;
    height: 2px;
    background: var(--color-gold-light);
    transition: var(--transition-smooth);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.navbar.menu-open .mobile-toggle .bar:nth-child(1) {
    transform: rotate(45deg) translate(4.5px, 4.5px);
}
.navbar.menu-open .mobile-toggle .bar:nth-child(2) {
    opacity: 0;
}
.navbar.menu-open .mobile-toggle .bar:nth-child(3) {
    transform: rotate(-45deg) translate(4.5px, -4.5px);
}

.nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(6, 22, 17, 0.96) 0%, rgba(4, 14, 11, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 24px 6% 30px;
    gap: 16px;
    border-bottom: 2px solid rgba(197, 160, 89, 0.5);
    box-shadow: 0 24px 45px rgba(0, 0, 0, 0.85);
}

.navbar.menu-open .nav-menu {
    display: flex;
    animation: slideDown 0.3s ease forwards;
}

.nav-link {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-link.active, .nav-link:hover {
    color: var(--color-gold-light);
    font-weight: 600;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hero Section */
.hero-section {
    min-height: 85vh;
    padding: 90px 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--color-bg-darker);
}

.video-background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.65;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(12, 18, 15, 0.2) 0%, rgba(6, 10, 8, 0.95) 90%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 4;
    width: 100%;
    padding: 0 10px;
}

.hero-title {
    font-size: 2.1rem;
    letter-spacing: 3px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.gold-text {
    color: var(--color-gold-light);
    background: var(--color-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-underline {
    width: 60px;
    height: 2px;
    background: var(--color-gold-gradient);
    margin: 10px auto 14px;
}

.hero-tagline {
    font-size: 0.85rem;
    letter-spacing: 3px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 24px;
}

.scroll-indicator {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
}

.scroll-indicator .mouse {
    width: 20px;
    height: 32px;
    border: 2px solid var(--color-text-muted);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.scroll-indicator .wheel {
    width: 3px;
    height: 6px;
    background: var(--color-gold);
    border-radius: 2px;
    animation: scrollMouse 1.5s infinite;
}

@keyframes scrollMouse {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(8px); opacity: 0; }
}

/* Slide 2 / Overview Section - FULL-WIDTH BIG RENDER IMAGE (NO BORDER) */
.overview-hero-slide {
    padding: 40px 0;
}


.slide2-poetic-heading {
    font-size: 1.75rem;
    line-height: 1.3;
    margin-bottom: 14px;
}

.overview-full-image-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 20px;
}

.overview-full-render-mobile {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    filter: contrast(1.05) brightness(1.02);
}

.metrics-mobile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 20px;
}

.metric-pill-mobile {
    background: rgba(18, 28, 24, 0.85);
    border: var(--border-gold);
    border-radius: var(--border-radius-md);
    padding: 12px 6px;
    text-align: center;
}

.metric-pill-mobile .num {
    display: block;
    font-family: var(--font-headings);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-gold-light);
}

.metric-pill-mobile .lbl {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
}

/* Green Certification Section */
.green-certification-section {
    position: relative;
    overflow: hidden;
    padding-top: 24px;
}

.green-certification-section .video-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.green-cert-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.green-cert-bg-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(6, 10, 8, 0.82) 0%, rgba(6, 10, 8, 0.08) 25%, rgba(6, 10, 8, 0.08) 75%, rgba(6, 10, 8, 0.88) 100%);
    z-index: 2;
    pointer-events: none;
}

.relative-z {
    position: relative;
    z-index: 4;
}

.gc-header-top {
    margin-bottom: 28px;
}

.cert-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(18, 87, 76, 0.45);
    border: 1px solid rgba(224, 192, 126, 0.5);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-gold-light);
    margin-bottom: 8px;
}

.green-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: stretch;
}


/* ==========================================================================
   AUTHENTIC DESKTOP GREEN METRICS (Seamlessly Merged 2x2 Glassmorphic Canvas)
   ========================================================================== */

/* Master Unified Container - Continuous Ambient Gradient Mesh & 3D Beveled Rim */
.gc-merged-metrics-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    /* Continuous blended atmospheric canvas across all 4 quadrants (NO HARD EDGES) */
    background: 
        radial-gradient(circle at 18% 22%, rgba(14, 165, 233, 0.42) 0%, rgba(2, 132, 199, 0.18) 42%, transparent 72%),
        radial-gradient(circle at 82% 22%, rgba(34, 197, 94, 0.38) 0%, rgba(5, 46, 22, 0.20) 45%, transparent 72%),
        radial-gradient(circle at 18% 78%, rgba(197, 160, 89, 0.24) 0%, rgba(24, 18, 6, 0.35) 50%, transparent 75%),
        radial-gradient(circle at 82% 78%, rgba(220, 240, 255, 0.22) 0%, rgba(186, 230, 253, 0.10) 45%, transparent 75%),
        linear-gradient(135deg, rgba(6, 28, 45, 0.90) 0%, rgba(4, 30, 18, 0.90) 50%, rgba(16, 20, 24, 0.94) 100%);
    /* Master 3D Beveled Edge Lighting (Outer Rim ONLY, zero interior borders) */
    border-top: 1.5px solid rgba(255, 255, 255, 0.42);
    border-left: 1.5px solid rgba(255, 255, 255, 0.26);
    border-right: 1.5px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 18px 42px rgba(0, 0, 0, 0.65), 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.48), 
        inset 0 -2px 4px 0 rgba(0, 0, 0, 0.55),
        inset 1.5px 0 3px 0 rgba(255, 255, 255, 0.2),
        inset -1.5px 0 3px 0 rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    margin: 16px 0 20px 0;
}

/* Strictly Disallow Any Center Dividing Lines or Pseudo-elements */
.gc-merged-metrics-box::before,
.gc-merged-metrics-box::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Seamless Quadrant Cells: Zero borders, zero lines, zero inset shadows */
.gc-merged-metrics-box .gc-metric-row,
.gc-merged-metrics-box .gc-metric-water,
.gc-merged-metrics-box .gc-metric-forest,
.gc-merged-metrics-box .gc-metric-platinum,
.gc-merged-metrics-box .gc-metric-clean {
    position: relative !important;
    border: none !important;
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
    margin: 0 !important;
    min-height: 88px !important;
    padding: 14px 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
}

.gc-merged-metrics-box .gc-metric-row:hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Crisp Metric Typography */
.gc-merged-metrics-box .gc-metric-num {
    font-size: 1.45rem !important;
    margin-bottom: 3px !important;
    line-height: 1.1 !important;
    position: relative;
    z-index: 5;
}

.gc-merged-metrics-box .gc-metric-label {
    font-size: 0.58rem !important;
    letter-spacing: 0.5px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    color: rgba(226, 237, 231, 0.86) !important;
    position: relative;
    z-index: 5;
    text-transform: uppercase;
    font-weight: 600;
}

/* ==========================================================================
   1. WATER QUADRANT (Top-Left): Dual Waves, Caustics, Rising Bubbles
   ========================================================================== */
.gc-merged-metrics-box .gc-metric-water {
    background: transparent !important;
}

.gc-merged-metrics-box .gc-metric-water .water-effects-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(circle at 35% 45%, black 45%, rgba(0,0,0,0.6) 75%, transparent 100%);
    mask-image: radial-gradient(circle at 35% 45%, black 45%, rgba(0,0,0,0.6) 75%, transparent 100%);
}

.gc-merged-metrics-box .gc-metric-water .gc-metric-num {
    background: linear-gradient(135deg, #f0f9ff 0%, #7dd3fc 40%, #38bdf8 70%, #0284c7 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.55)) !important;
}

.gc-merged-metrics-box .water-surface-waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px !important;
    overflow: hidden;
    z-index: 2;
}

.gc-merged-metrics-box .water-wave-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
}

.gc-merged-metrics-box .water-submerged-flow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 38px !important;
}

.gc-merged-metrics-box .water-svg-accent {
    position: absolute;
    top: 8px !important;
    right: 10px !important;
    width: 16px !important;
    height: 16px !important;
    z-index: 3;
}

/* ==========================================================================
   2. FOREST QUADRANT (Top-Right): Tree Silhouettes, Mist, Floating Leaves
   ========================================================================== */
.gc-merged-metrics-box .gc-metric-forest {
    background: transparent !important;
}

.gc-merged-metrics-box .gc-metric-forest .forest-effects-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(circle at 65% 45%, black 45%, rgba(0,0,0,0.6) 75%, transparent 100%);
    mask-image: radial-gradient(circle at 65% 45%, black 45%, rgba(0,0,0,0.6) 75%, transparent 100%);
}

.gc-merged-metrics-box .gc-metric-forest .gc-metric-num {
    background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 35%, #4ade80 70%, #16a34a 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(74, 222, 128, 0.45)) !important;
}


/* ==========================================================================
   3. PLATINUM QUADRANT (Bottom-Left): Authentic Desktop Gold-Platinum Shine
   ========================================================================== */
.gc-merged-metrics-box .gc-metric-platinum {
    background: radial-gradient(circle at 35% 55%, rgba(197, 160, 89, 0.18) 0%, rgba(20, 15, 6, 0.40) 65%, transparent 90%) !important;
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
}

/* Authentic Desktop Platinum Shimmering Word */
.gc-merged-metrics-box .gc-platinum-word {
    font-family: var(--font-headings) !important;
    font-size: 1.32rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    background: linear-gradient(90deg, #9f7d3a 0%, #c5a059 20%, #f5e6b4 40%, #e0c07e 50%, #f5e6b4 60%, #c5a059 80%, #9f7d3a 100%) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: platinumShine 3.5s linear infinite !important;
    filter: drop-shadow(0 2px 10px rgba(197, 160, 89, 0.45)) !important;
    display: block !important;
    margin-bottom: 2px !important;
}

@keyframes platinumShine {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Subtle Specular Ambient Sweep across Platinum */
.gc-merged-metrics-box .gc-metric-platinum::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 75%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(245, 230, 180, 0.14) 50%, transparent 100%);
    transform: skewX(-25deg);
    animation: platinumSweepMobile 6.5s infinite ease-in-out;
    pointer-events: none;
    z-index: 2;
}

@keyframes platinumSweepMobile {
    /* was left: -100% -> 200% of the card (a layout on every frame); the same path, 3 card widths = 4 own widths */
    0%, 25% { transform: translateX(0) skewX(-25deg); }
    65%, 100% { transform: translateX(400%) skewX(-25deg); }
}

/* ==========================================================================
   4. CLEAN AIR / 0% CFC (Bottom-Right): Authentic Desktop Frosted Glass
   ========================================================================== */
.gc-merged-metrics-box .gc-metric-clean {
    background: linear-gradient(135deg, rgba(220, 240, 255, 0.12) 0%, rgba(180, 220, 255, 0.04) 100%) !important;
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: blur(24px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(130%) !important;
}

/* Frosted crystal luminous radiance */
.gc-merged-metrics-box .gc-metric-clean::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 65% 55%, rgba(255, 255, 255, 0.28) 0%, rgba(186, 230, 253, 0.12) 42%, transparent 75%);
    pointer-events: none;
    z-index: 1;
}

/* Authentic Desktop Frosted Clean Metric Number */
.gc-merged-metrics-box .gc-metric-clean .gc-metric-num,
.gc-merged-metrics-box .gc-metric-clean .gc-metric-zero {
    font-family: var(--font-headings) !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 60%, #bae6fd 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 10px rgba(186, 230, 253, 0.70)) !important;
    display: block !important;
    margin-bottom: 2px !important;
}

/* Base Desktop Metrics Effects & Keyframes */
.water-effects-wrap {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.water-full-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.water-body-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(56, 189, 248, 0.28) 0%, 
        rgba(14, 165, 233, 0.42) 18%, 
        rgba(2, 132, 199, 0.58) 55%, 
        rgba(7, 48, 76, 0.82) 100%);
    mix-blend-mode: hard-light;
}

.water-light-shafts {
    position: absolute;
    inset: -30%;
    background: repeating-linear-gradient(118deg, 
        rgba(255, 255, 255, 0.08) 0px, 
        rgba(255, 255, 255, 0.08) 14px, 
        transparent 14px, 
        transparent 36px);
    opacity: 0.85;
    animation: waterSunRays 8s ease-in-out infinite alternate;
}

@keyframes waterSunRays {
    0% { transform: rotate(0deg) scale(1); opacity: 0.45; }
    50% { transform: rotate(4deg) scale(1.05) translate(2%, 2%); opacity: 0.85; }
    100% { transform: rotate(-3deg) scale(0.98) translate(-2%, -2%); opacity: 0.55; }
}

.water-caustics {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 20%, rgba(186, 230, 253, 0.3) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(56, 189, 248, 0.25) 0%, transparent 65%);
    animation: waterCausticPulse 6s ease-in-out infinite alternate;
}

@keyframes waterCausticPulse {
    0% { transform: scale(0.98) rotate(0deg); opacity: 0.5; }
    50% { transform: scale(1.1) rotate(6deg) translate(2%, -3%); opacity: 0.85; }
    100% { transform: scale(1.02) rotate(-4deg) translate(-2%, 2%); opacity: 0.6; }
}

.water-surface-waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 38px;
    overflow: hidden;
    z-index: 2;
}

.water-wave-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
}

.water-wave-layer.wave-top-back {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 50' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L600,0 L600,20 C450,-5 250,35 0,15 Z' fill='%2338bdf8' fill-opacity='0.45'/%3E%3C/svg%3E");
    background-size: 300px 38px;
    animation: waveFlowBack 5.5s linear infinite;
    opacity: 0.85;
}

.water-wave-layer.wave-top-front {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 50' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L600,0 L600,28 C420,8 200,42 0,22 Z' fill='%23bae6fd' fill-opacity='0.55'/%3E%3C/svg%3E");
    background-size: 300px 38px;
    animation: waveFlowFront 3.4s linear infinite;
    opacity: 0.95;
}

.water-submerged-flow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 55px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C150,15 350,55 600,35 L600,60 L0,60 Z' fill='%230284c7' fill-opacity='0.35'/%3E%3C/svg%3E");
    background-size: 300px 55px;
    animation: waveFlowBack 7s linear infinite;
}

.water-surface-rim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 15%, 
        rgba(186, 230, 253, 0.95) 50%, 
        rgba(255, 255, 255, 0.4) 85%, 
        transparent 100%);
    box-shadow: 0 1px 8px rgba(56, 189, 248, 0.8), 0 0 15px rgba(255, 255, 255, 0.6);
    z-index: 3;
}

@keyframes waveFlowBack {
    0% { transform: translateX(0); }
    100% { transform: translateX(-300px); }
}

@keyframes waveFlowFront {
    0% { transform: translateX(0); }
    100% { transform: translateX(-300px); }
}

.water-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, rgba(186, 230, 253, 0.9) 45%, rgba(2, 132, 199, 0.3) 100%);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.75), inset 0 0 2px #fff;
    pointer-events: none;
    z-index: 2;
}

.water-bubble.b1 { width: 6px; height: 6px; left: 16%; bottom: -8px; animation: bubbleRiseFull 3.8s ease-in infinite 0.2s; }
.water-bubble.b2 { width: 9px; height: 9px; left: 62%; bottom: -8px; animation: bubbleRiseFull 4.6s ease-in infinite 1s; }
.water-bubble.b3 { width: 5px; height: 5px; left: 38%; bottom: -8px; animation: bubbleRiseFull 3.2s ease-in infinite 1.8s; }
.water-bubble.b4 { width: 8px; height: 8px; left: 82%; bottom: -8px; animation: bubbleRiseFull 5s ease-in infinite 0.5s; }
.water-bubble.b5 { width: 6px; height: 6px; left: 28%; bottom: -8px; animation: bubbleRiseFull 4.1s ease-in infinite 2.3s; }
.water-bubble.b6 { width: 10px; height: 10px; left: 74%; bottom: -8px; animation: bubbleRiseFull 4.9s ease-in infinite 1.5s; }

@keyframes bubbleRiseFull {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    15% { opacity: 0.9; }
    85% { opacity: 0.9; transform: translateY(-115px) translateX(8px) scale(1); }
    100% { transform: translateY(-145px) translateX(-4px) scale(1.3); opacity: 0; }
}

.water-svg-accent {
    position: absolute;
    top: 10px;
    right: 12px;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.7));
    animation: dropPulse 3.5s ease-in-out infinite alternate;
}

@keyframes dropPulse {
    0% { transform: translateY(0) scale(1); filter: drop-shadow(0 2px 6px rgba(56, 189, 248, 0.6)); }
    100% { transform: translateY(-3px) scale(1.1); filter: drop-shadow(0 3px 12px rgba(186, 230, 253, 0.95)); }
}

.gc-metric-forest {
    background: transparent;
    border: none !important;
    box-shadow: none !important;
}

.gc-metric-forest:hover {
    background: transparent;
    border: none !important;
    box-shadow: none !important;
}

.gc-metric-forest .gc-metric-num {
    background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 35%, #4ade80 70%, #16a34a 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(74, 222, 128, 0.4));
}

.forest-effects-wrap {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}


/* Residences Section */
.residence-card {
    background: var(--color-bg-card);
    border: var(--border-glass);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--shadow-luxury);
}

.residence-img-holder {
    height: 200px;
    position: relative;
    overflow: hidden;
}

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

.residence-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-gold-gradient);
    color: var(--color-bg-darker);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 4px;
}

.residence-details {
    padding: 18px;
}

.residence-details h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.residence-specs {
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    margin-top: 12px;
    margin-bottom: 16px;
}

.residence-specs li {
    font-size: 0.8rem;
    margin-bottom: 6px;
    color: var(--color-text-body);
}

.residence-specs li strong {
    color: var(--color-gold-light);
}

/* Interactive Project Guide / Sizing Explorer */

.explorer-tab-btn {
    padding: 12px 14px;
    font-size: 0.82rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
}

.explorer-tab-btn.active {
    background: var(--color-primary);
    border-color: var(--color-gold);
    color: var(--color-gold-light);
    font-weight: 600;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.btn-grid-toggle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.flat-btn {
    padding: 10px 4px;
    font-size: 0.72rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.flat-btn.active {
    background: var(--color-gold-gradient);
    color: #000;
    font-weight: 700;
}


.specs-unified-card {
    background: rgba(18, 28, 24, 0.9);
    border: 1px solid rgba(197, 160, 89, 0.28);
    border-radius: var(--border-radius-lg, 12px);
    padding: 4px 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.spec-row {
    padding: 12px 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
}

.spec-row:first-child {
    padding-top: 10px;
}

.spec-row:last-child {
    border-bottom: none;
    padding-bottom: 10px;
}

.spec-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.spec-icon {
    font-size: 1.15rem;
    line-height: 1;
    margin-bottom: 0;
    flex-shrink: 0;
}

.spec-row h4 {
    font-size: 0.92rem;
    color: var(--color-gold-light);
    margin: 0;
    line-height: 1.3;
}

.spec-row p {
    font-size: 0.78rem;
    line-height: 1.42;
    margin: 0;
    color: rgba(226, 237, 231, 0.85);
}

.tab-pane-header {
    text-align: center;
    margin-bottom: 14px;
    padding: 0 4px;
}

.tab-pane-header h3 {
    font-size: 1.05rem;
    font-family: var(--font-heading, inherit);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.3;
}

.tab-pane-header p {
    font-size: 0.78rem;
    color: rgba(226, 237, 231, 0.75);
    line-height: 1.4;
    margin: 0 auto;
}


/* --- Consultants & Partners Grid (Strict Sub-Pixel Uniform Alignment) --- */
/* Consultants Tab Header */
.cons-tab-header {
    text-align: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.cons-prestige-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(228, 202, 150, 0.1);
    border: 1px solid rgba(228, 202, 150, 0.28);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 12px rgba(228, 202, 150, 0.1);
    margin-bottom: 8px;
}

.cons-prestige-badge .badge-icon {
    font-size: 0.82rem;
    line-height: 1;
}

.cons-prestige-badge .badge-text {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #e4ca96;
}

.cons-tab-header h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.18rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px 0;
    letter-spacing: 0.3px;
}

.cons-tab-header p {
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(200, 218, 209, 0.85);
    margin: 0;
}

.consultants-flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: stretch;
}

.consultant-card {
    background: radial-gradient(135% 120% at 50% 0%, rgba(20, 32, 26, 0.95) 0%, rgba(10, 16, 13, 0.98) 100%);
    border: 1px solid rgba(197, 160, 89, 0.22);
    border-top: 1.5px solid rgba(228, 202, 150, 0.5);
    border-radius: 13px;
    padding: 12px 6px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 134px;
    min-height: 134px;
    max-height: 134px;
    box-sizing: border-box;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.consultant-card:hover {
    border-color: rgba(228, 202, 150, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 18px rgba(197, 160, 89, 0.12);
}

.consultant-card:active {
    transform: scale(0.98);
}

/* Row 1: Role Badge (Guaranteed Single Line, No Wrap) */
.cons-role {
    font-size: 0.60rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: var(--color-gold-light, #e0c07e);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    line-height: 16px;
    margin: 0 0 4px 0;
}

/* Row 2: Firm Name (STARTS AT LINE 2 - TOP-ALIGNED FOR ALL BOXES) */
.consultant-card h4 {
    font-size: 0.80rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.22;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.25px;
    padding: 0 2px;
}

/* Row 3 (Second-to-Last Line): Person Name (Right after Firm with clean 8px gap) */
.cons-names {
    font-size: 0.69rem;
    font-weight: 500;
    line-height: 18px;
    color: rgba(215, 230, 222, 0.9);
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin: 0 0 8px 0;
    padding: 0 2px;
}

/* Row 4 (Last Line): Location Badge (Anchored at Bottom) */
.cons-loc {
    margin: 0;
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.45px;
    background: rgba(197, 160, 89, 0.08);
    border: 1px solid rgba(197, 160, 89, 0.22);
    color: var(--color-gold-light, #e0c07e);
    padding: 0 9px;
    height: 22px;
    min-height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
}

/* Proven Track Record Section Divider */
.landmark-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    width: 100%;
}

.landmark-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.35), transparent);
}

.landmark-divider-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-gold-light, #e0c07e);
    white-space: nowrap;
}

.landmark-divider-label .divider-icon {
    font-size: 0.75rem;
    line-height: 1;
}

/* --- Flagship Past Landmark Showcase (Ultra-Luxurious Obsidian-Gold Glass) --- */
.past-project-card {
    position: relative;
    background: radial-gradient(135% 110% at 15% 0%, rgba(228, 202, 150, 0.12) 0%, rgba(197, 160, 89, 0.03) 55%, rgba(9, 15, 12, 0.98) 100%), rgba(9, 15, 12, 0.96);
    border: 1px solid rgba(197, 160, 89, 0.28);
    border-top: 2px solid transparent;
    border-radius: 18px;
    padding: 18px 16px 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 32px rgba(197, 160, 89, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}

.past-proj-top-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(197, 160, 89, 0.3) 15%, #f5e6c8 50%, rgba(197, 160, 89, 0.3) 85%, transparent 100%);
}

.past-proj-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.past-proj-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(228, 202, 150, 0.18) 0%, rgba(197, 160, 89, 0.08) 100%);
    border: 1px solid rgba(228, 202, 150, 0.38);
    color: #f3e2ba;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.badge-crown {
    font-size: 0.75rem;
    line-height: 1;
}


.past-proj-brand {
    margin-bottom: 14px;
}

.past-proj-brand h4 {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffffff 20%, #f3e2ba 65%, #c5a059 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.past-proj-brand .lead-text {
    font-size: 0.79rem;
    line-height: 1.45;
    color: rgba(210, 226, 218, 0.88);
    margin: 0;
}

.past-proj-accolades {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 14px;
}

.accolade-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: rgba(14, 23, 19, 0.65);
    border: 1px solid rgba(197, 160, 89, 0.18);
    border-radius: 11px;
    padding: 10px 12px;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.accolade-row:hover {
    border-color: rgba(228, 202, 150, 0.35);
    background: rgba(18, 29, 24, 0.8);
}

.accolade-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: radial-gradient(circle at center, rgba(228, 202, 150, 0.2) 0%, rgba(197, 160, 89, 0.05) 100%);
    border: 1px solid rgba(228, 202, 150, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.accolade-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.accolade-content {
    flex: 1;
    min-width: 0;
}

.accolade-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}

.accolade-title-wrap strong {
    font-size: 0.82rem;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.accolade-tag {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-gold-light, #e0c07e);
    background: rgba(197, 160, 89, 0.12);
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

.accolade-content p {
    font-size: 0.74rem;
    line-height: 1.35;
    color: rgba(200, 218, 209, 0.82);
    margin: 0;
}

/* Past Project Assurance Metrics */
.past-proj-metrics {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(197, 160, 89, 0.14);
}

.past-metric-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.63rem;
    font-weight: 600;
    color: rgba(228, 202, 150, 0.92);
    background: rgba(197, 160, 89, 0.07);
    border: 1px solid rgba(197, 160, 89, 0.18);
    border-radius: 6px;
    padding: 4px 2px;
    text-align: center;
    white-space: nowrap;
}

.past-metric-check {
    color: #4ade80;
    font-size: 0.68rem;
    font-weight: 800;
}

/* Amenities Section Spacing & Tight Header Alignment */
#m-amenities {
    scroll-margin-top: 75px;
    padding-top: 24px;
}

#m-amenities .section-header {
    margin-bottom: 16px;
    text-align: center;
}

#m-amenities .section-title {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.25;
}

.amenities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.amenity-card,
.lookbook-card {
    background: linear-gradient(180deg, rgba(20, 32, 27, 0.95) 0%, rgba(13, 20, 17, 0.98) 100%);
    border: 1px solid rgba(197, 160, 89, 0.28);
    border-radius: var(--border-radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    position: relative;
    transition: transform 0.18s ease, border-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.amenity-card:active,
.lookbook-card:active {
    transform: scale(0.985);
    border-color: rgba(197, 160, 89, 0.65);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 16px rgba(197, 160, 89, 0.2);
}

.amenity-img-holder {
    width: 100%;
    height: 190px;
    position: relative;
    overflow: hidden;
    background: #080f0c;
}

.amenity-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
    display: block;
}

@media (hover: hover) {
    .amenity-card:hover .amenity-img,
    .lookbook-card:hover .amenity-img {
        transform: scale(1.03);
    }
}

/* Cinematic Bottom Vignette on Card Image */
.lookbook-img-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(10, 18, 14, 0.85) 100%);
}

.amenity-content {
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.amenity-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.amenity-header-row h4 {
    color: var(--color-gold-light, #f7edd6);
    font-family: var(--font-heading, 'Cinzel', serif);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
    letter-spacing: 0.3px;
}

.lookbook-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-gold, #c5a059);
    background: rgba(197, 160, 89, 0.08);
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.amenity-card:active .lookbook-explore-btn,
.lookbook-card:active .lookbook-explore-btn {
    background: rgba(197, 160, 89, 0.22);
    border-color: var(--color-gold, #c5a059);
    color: #fff;
}

/* Authentic Golden Badges Grid (Multi-badge: 3-4 points) */
.amenity-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
}

.amenity-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(197, 160, 89, 0.08);
    border: 1px solid rgba(197, 160, 89, 0.26);
    color: #e5c98d;
    font-size: 0.67rem;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: 0.2px;
    line-height: 1.25;
}

/* Gallery Section */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.gallery-item {
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius-md, 8px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    background: #080f0c;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.gallery-item:active {
    transform: scale(0.97);
    border-color: rgba(197, 160, 89, 0.5);
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Grand Cinematic Fullscreen Lightbox Modal */
.lightbox-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lightbox-modal.open {
    display: flex;
    animation: lbFadeIn 0.22s ease-out forwards;
}

@keyframes lbFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 6, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 1;
}

.lightbox-viewport {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
}

/* Sleek Top Controls Bar */
.lightbox-top-bar {
    height: 52px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: linear-gradient(180deg, rgba(8, 14, 11, 0.96) 0%, rgba(8, 14, 11, 0.7) 100%);
    border-bottom: 1px solid rgba(197, 160, 89, 0.22);
    z-index: 10;
}

.lightbox-kicker-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lightbox-kicker-icon {
    font-size: 0.85rem;
}

.lightbox-kicker-text {
    font-family: var(--font-heading, 'Cinzel', serif);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-gold, #c5a059);
}

.lightbox-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(10, 18, 14, 0.85);
    border: 1px solid rgba(197, 160, 89, 0.45);
    color: #f7edd6;
    font-size: 1.45rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.lightbox-close:active {
    transform: scale(0.92);
    background: rgba(197, 160, 89, 0.25);
    border-color: var(--color-gold, #c5a059);
}

/* Grand Central Visual Canvas - Dominant, expansive, edge-to-edge render */
.lightbox-hero-canvas {
    position: relative;
    flex: 1;
    min-height: 200px;
    max-height: 52vh;
    width: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y;
}

.lightbox-hero-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: auto;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.18s ease;
}

/* Edge Floating Navigation Arrows on Canvas */
.lightbox-canvas-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(10, 18, 14, 0.75);
    border: 1px solid rgba(197, 160, 89, 0.45);
    color: #f5eedb;
    font-size: 1.8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 8;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s, transform 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: 2px;
}

.lightbox-canvas-nav.prev {
    left: 12px;
}

.lightbox-canvas-nav.next {
    right: 12px;
}

.lightbox-canvas-nav:active {
    transform: translateY(-50%) scale(0.92);
    background: rgba(197, 160, 89, 0.35);
    border-color: var(--color-gold, #c5a059);
}

/* Slide-up Frosted Details Drawer */
.lightbox-drawer {
    background: linear-gradient(180deg, rgba(16, 26, 21, 0.98) 0%, rgba(9, 15, 12, 0.99) 100%);
    border-top: 1px solid rgba(197, 160, 89, 0.35);
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 48vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.75);
    z-index: 10;
}

.lightbox-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lightbox-title {
    font-family: var(--font-heading, 'Cinzel', serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-gold-light, #f7edd6);
    margin: 0;
    line-height: 1.25;
    letter-spacing: 0.3px;
}

.lightbox-counter-pill {
    display: none;
}

.lightbox-drawer .lightbox-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.lightbox-drawer .amenity-badge {
    background: rgba(197, 160, 89, 0.12);
    border: 1px solid rgba(197, 160, 89, 0.32);
    color: #f5dfa8;
    font-size: 0.68rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
}

.lightbox-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.55;
    margin: 2px 0 6px 0;
    font-family: var(--font-body, system-ui, sans-serif);
}

.lightbox-nav-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.lightbox-btn-nav {
    background: rgba(197, 160, 89, 0.12);
    border: 1px solid rgba(197, 160, 89, 0.35);
    color: #f7edd6;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.lightbox-btn-nav:active {
    background: rgba(197, 160, 89, 0.3);
    border-color: var(--color-gold, #c5a059);
}

.lightbox-swipe-hint {
    font-size: 0.66rem;
    color: rgba(197, 160, 89, 0.75);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
}

/* Certificate Modal Specifics */
.cert-modal {
    padding: 16px;
    align-items: center;
    justify-content: center;
}

.cert-modal .cert-modal-img {
    max-width: 94%;
    max-height: 86vh;
    border-radius: var(--border-radius-md, 8px);
    border: 1px solid rgba(197, 160, 89, 0.4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
    display: block;
}

/* Links to the contact section open the form itself (data-land, js/layout.js), just under the 66px header */
#m-contact .booking-form-suite {
    scroll-margin-top: 78px;
}

/* Contact & Booking Section (Sleek Luxury Overhaul) */
.booking-card {
    background: rgba(18, 28, 24, 0.95);
    border: var(--border-gold);
    border-radius: var(--border-radius-lg);
    padding: 18px;
}

/* Sleek Unified Contact Information Card */
.sleek-contact-card {
    background: linear-gradient(180deg, rgba(16, 26, 22, 0.95) 0%, rgba(10, 16, 13, 0.95) 100%);
    border: 1px solid rgba(197, 160, 89, 0.35);
    border-radius: var(--border-radius-lg);
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sleek-contact-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}

.sleek-contact-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--color-gold-light);
    margin: 0;
    letter-spacing: 0.5px;
}

.contact-entry {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.contact-entry-icon {
    font-size: 1.15rem;
    line-height: 1.2;
    padding-top: 1px;
}

.contact-entry-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contact-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.contact-entry-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #ffffff;
    text-transform: uppercase;
}

.entry-map-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-gold);
    text-decoration: none;
    background: rgba(197, 160, 89, 0.12);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 12px;
    padding: 3px 9px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.entry-map-link:active {
    background: rgba(197, 160, 89, 0.25);
    color: #ffffff;
}

.contact-entry-val {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0;
}

.contact-entry-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 12px 0;
}

.compact-hotlines-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 5px;
}

.compact-hotline-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    background: rgba(197, 160, 89, 0.1);
    border: 1px solid rgba(197, 160, 89, 0.35);
    border-radius: var(--border-radius-sm);
    color: var(--color-gold-light);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.compact-hotline-pill:active {
    background: rgba(197, 160, 89, 0.25);
    color: #ffffff;
}

.compact-email-link {
    display: inline-block;
    color: var(--color-gold-light);
    font-size: 0.82rem;
    text-decoration: none;
    font-weight: 600;
    margin-top: 2px;
}

.compact-email-link:active {
    color: #ffffff;
}

/* Luxury Booking Form Suite */
.booking-form-suite {
    position: relative;
    background: linear-gradient(180deg, rgba(16, 26, 22, 0.98) 0%, rgba(8, 14, 11, 0.98) 100%);
    border: 1px solid rgba(197, 160, 89, 0.4);
    border-radius: var(--border-radius-lg);
    padding: 20px 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}


.booking-card-header {
    margin-bottom: 18px;
    text-align: center;
}

.booking-card-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.5px;
}

.luxury-inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-gold-light);
    margin-bottom: 6px;
}

.form-label .req {
    color: #e74c3c;
}

.form-label .opt {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-transform: none;
}

.form-row {
    display: flex;
    gap: 10px;
}

@media (max-width: 360px) {
    .form-row {
        flex-direction: column;
        gap: 14px;
    }
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 12px;
    font-size: 0.95rem;
    pointer-events: none;
    opacity: 0.8;
}

.luxury-form-control {
    width: 100%;
    padding: 12px 14px 12px 38px;
    background: rgba(6, 10, 8, 0.85);
    border: 1px solid rgba(197, 160, 89, 0.28);
    border-radius: var(--border-radius-sm);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
}

.luxury-form-control:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.25);
    background: rgba(8, 14, 11, 0.95);
}

.luxury-form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
}

.luxury-textarea {
    padding-left: 14px;
    resize: vertical;
    min-height: 70px;
    line-height: 1.4;
}

/* Segmented Configuration Pills */
.config-pills-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.config-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: rgba(10, 16, 13, 0.7);
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: var(--border-radius-sm);
    padding: 9px 12px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
}

.config-pill:active {
    transform: scale(0.99);
}

.config-pill.active {
    background: linear-gradient(90deg, rgba(197, 160, 89, 0.22) 0%, rgba(26, 92, 79, 0.25) 100%);
    border: 1.5px solid var(--color-gold);
    box-shadow: 0 2px 10px rgba(197, 160, 89, 0.2);
}

.pill-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(197, 160, 89, 0.3);
    color: transparent;
    font-size: 0.7rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.config-pill.active .pill-check {
    background: var(--color-gold);
    border-color: var(--color-gold-light);
    color: #060a08;
}

.pill-text-wrap {
    display: flex;
    flex-direction: column;
}

.pill-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.config-pill.active .pill-title {
    color: var(--color-gold-light);
}

.pill-sub {
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

/* Submit Button */
.btn-submit-request {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #c5a059 0%, #d4af37 50%, #9a7836 100%);
    border: 1px solid #f7d58b;
    border-radius: var(--border-radius-sm);
    color: #060a08;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 4px;
    -webkit-appearance: none;
}

.btn-submit-request:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(197, 160, 89, 0.2);
}

.btn-submit-request .btn-arrow {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Confirmation State */
.inquiry-success-box {
    text-align: center;
    padding: 20px 10px;
    animation: fadeInSuccess 0.4s ease forwards;
}

@keyframes fadeInSuccess {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.success-icon-ring {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.15);
    border: 2px solid #2ecc71;
    color: #2ecc71;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
}

.success-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.success-desc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 16px 0;
}


.btn-success-reset {
    background: transparent;
    border: 1px solid rgba(197, 160, 89, 0.4);
    border-radius: var(--border-radius-sm);
    color: var(--color-gold-light);
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

/* Official RERA Accreditation Seal & Luxury Footer */
.luxury-mobile-footer {
    background: #030605;
    padding: 35px 0 95px;
    text-align: center;
    border-top: 1px solid rgba(197, 160, 89, 0.2);
    position: relative;
}

.rera-accreditation-box {
    background: linear-gradient(180deg, rgba(16, 26, 22, 0.9) 0%, rgba(6, 10, 8, 0.95) 100%);
    border: 1.5px solid rgba(197, 160, 89, 0.45);
    border-radius: var(--border-radius-md);
    padding: 16px;
    margin-bottom: 28px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.rera-seal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.rera-shield {
    font-size: 1.8rem;
}

.rera-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rera-govt-tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--color-gold);
    text-transform: uppercase;
}

.rera-reg-num {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
}

.rera-seal-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 12px 0;
}

.rera-verify-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--color-gold-light);
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

.rera-verify-btn:active {
    color: #ffffff;
}

.footer-brand-section {
    margin-bottom: 22px;
}

.footer-brand-logo {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    letter-spacing: 3px;
    color: var(--color-gold-light);
    margin: 0 0 8px 0;
}

.footer-brand-strapline {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
}

.footer-credits-card {
    background: rgba(10, 16, 13, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--border-radius-sm);
    padding: 12px 14px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.credit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    gap: 8px;
}

.credit-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    white-space: nowrap;
}

.credit-val {
    color: #ffffff;
    text-align: right;
    font-weight: 500;
}

.credit-val.gold {
    color: var(--color-gold-light);
    font-weight: 700;
}

.footer-legal-section {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}

.footer-copyright {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 8px 0;
}

.footer-disclaimer {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.32);
    line-height: 1.45;
    margin: 0;
    text-align: justify;
}

/* Floating Aria AI Concierge Widget */
.chatbot-widget {
    position: fixed;
    bottom: max(75px, env(safe-area-inset-bottom));
    right: 14px;
    z-index: 1400;
}

.chatbot-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a5c4f 0%, #0a3d34 60%, #c5a059 100%);
    border: 1.5px solid rgba(197, 160, 89, 0.5);
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.chatbot-toggle svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.chatbot-box {
    display: none;
    position: fixed;
    bottom: max(135px, env(safe-area-inset-bottom));
    right: 10px;
    width: calc(100vw - 20px);
    height: min(460px, 70vh);
    background: rgba(10, 16, 13, 0.96);
    backdrop-filter: blur(20px);
    border: var(--border-gold);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
    flex-direction: column;
    z-index: 1500;
    overflow: hidden;
}

.chat-header {
    background: rgba(18, 87, 76, 0.4);
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(197, 160, 89, 0.3);
}

.chat-messages {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-msg {
    max-width: 85%;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    line-height: 1.5;
}

.chat-msg.bot {
    background: rgba(18, 87, 76, 0.35);
    border: 1px solid rgba(197, 160, 89, 0.25);
    align-self: flex-start;
}

.chat-msg.user {
    background: var(--color-gold-gradient);
    color: #000;
    font-weight: 600;
    align-self: flex-end;
}

.chat-input-area {
    padding: 10px;
    display: flex;
    gap: 8px;
    background: rgba(6, 10, 8, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 10px;
    border-radius: 8px;
    color: #fff;
    font-size: 0.82rem;
}

/* Sticky Mobile Bottom Bar */
.sticky-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1200;
    background: rgba(6, 10, 8, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: var(--border-gold);
    display: flex;
    padding: 10px 4% max(10px, env(safe-area-inset-bottom));
    gap: 10px;
}

.sticky-bar-btn {
    flex: 1;
    padding: 11px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    cursor: pointer;
}

.sticky-btn-primary {
    background: var(--color-gold-gradient);
    color: #000;
}

.sticky-btn-secondary {
    background: rgba(18, 87, 76, 0.6);
    color: #fff;
    border: 1px solid rgba(224, 192, 126, 0.4);
}
/* ==========================================================================
   PREMIUM BEVELED CERTIFICATE PLAQUE (Mobile Modern Presentation)
   ========================================================================== */
.premium-cert-container {
    position: relative;
    width: 100%;
    margin: 16px auto 24px;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    overflow: hidden;
    padding: 4px;
    border: 1.5px solid transparent;
    box-shadow:
        0 6px 16px -2px rgba(0, 0, 0, 0.45),
        0 14px 30px -4px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Thin Flat Layer of Green-Hued Glass along the edge (Active Only) */
.premium-cert-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.premium-cert-container:active {
    transform: scale(0.98);
    border: 1.5px solid rgba(46, 125, 78, 0.45);
    border-top-color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(6, 36, 20, 0.65);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
}

.premium-cert-container:active::before {
    opacity: 1;
    box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.9),
        inset -1px -1px 0px rgba(8, 42, 24, 0.5),
        inset 0 0 0 4px rgba(20, 105, 68, 0.42),
        inset 0 0 0 5px rgba(134, 239, 172, 0.65);
}

.premium-cert-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
}


/* Minimalist Certificate Modal for Mobile */
.cert-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 10, 7, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 3000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 16px;
    cursor: zoom-out;
}

.cert-modal .cert-modal-img {
    max-width: 95vw;
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #ffffff;
    border-radius: 8px;
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.9),
        0 0 0 2px rgba(197, 160, 89, 0.4);
}

.cert-modal .lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3010;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

#m-walkthrough {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

#m-walkthrough::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 18, 15, 0.4); /* Brighter overlay */
    z-index: -1;
    border-radius: 0;
    animation: none;
}


/* .specs-grid replaced by .specs-unified-card */

.eco-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.consultants-flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    align-items: stretch;
}

#m-tab-specifications, #m-tab-eco-green, #m-tab-consultants {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Green Certification Compact Pillars */
.gc-pillar-compact {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(14, 72, 60, 0.30) 0%, rgba(8, 48, 40, 0.42) 50%, rgba(4, 28, 22, 0.55) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-top: 1.5px solid rgba(255, 255, 255, 0.38);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 10px 8px 12px 8px;
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    box-shadow: 
        inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 4px 0 rgba(0, 0, 0, 0.5),
        inset 1.5px 0 3px 0 rgba(255, 255, 255, 0.18),
        inset -1.5px 0 3px 0 rgba(0, 0, 0, 0.3),
        0 14px 40px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(16, 120, 95, 0.22);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    box-sizing: border-box;
}

.gc-pillar-header-line {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 4px 10px 4px;
    margin-bottom: 12px;
    position: relative;
}

.gc-pillar-header-line::before,
.gc-pillar-header-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: calc(50% - 15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.gc-pillar-header-line::before { left: 0; }
.gc-pillar-header-line::after { right: 0; }

.gc-pillar-icon-center {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    font-size: 1.05rem;
    opacity: 0.95;
    line-height: 1;
    z-index: 2;
}

.gc-pillar-header-line h4 {
    font-size: 0.82rem;
    line-height: 1.25;
    color: #e2ede7;
    margin: 0;
    font-weight: 600;
    text-align: center;
}


.gc-pillar-strong-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    /* the points sit as one left-aligned block in the middle of the card, bullets beside their words
       (they were centred lines with the bullets stuck at the card's left edge) */
    align-self: center;
    text-align: left;
}

/* Pillar 3 (Waste & Circularity): Lower the 2 points and add balanced spacing */
.gc-pillar-compact:nth-child(3) .gc-pillar-strong-list {
    margin-top: 6px;
    padding-top: 4px;
    gap: 10px;
    justify-content: flex-end;
}

/* Pillar 4 (Healthy Living & Infrastructure): Move points down so last point aligns with Pillar 3 */
.gc-pillar-compact:nth-child(4) .gc-pillar-strong-list {
    justify-content: flex-end;
    gap: 6px;
}

.gc-pillar-strong-list li {
    font-size: 0.8rem;
    color: var(--color-text-light);
    padding-left: 10px;
    position: relative;
    line-height: 1.3;
}

.gc-pillar-strong-list li::before {
    content: "\2022";
    position: absolute;
    left: 0px;
    color: var(--color-gold);
    font-weight: bold;
}


/* Interactive Explorer Table Styles */
.specs-styled-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(197, 160, 89, 0.15);
    border-radius: var(--border-radius-md, 8px);
    overflow: hidden;
    /* min-width removed to fit on mobile */
}

.specs-styled-table th {
    color: var(--color-gold-light);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 5px 4px;
    white-space: nowrap;
    text-align: center;
    font-weight: 700;
    background: rgba(197, 160, 89, 0.05);
    border-bottom: 1px solid rgba(197, 160, 89, 0.3);
}

.specs-styled-table td {
    padding: 5px 4px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.7rem;
    text-align: center;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
}

.specs-styled-table tbody tr:last-child td {
    border-bottom: none;
}

.specs-styled-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
}


/* Walkthrough Video Styles Ported From Desktop */
.video-container-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.55),
                inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.6),
                inset 0 0 1px 1px rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(3px) saturate(160%) brightness(105%);
    -webkit-backdrop-filter: blur(3px) saturate(160%) brightness(105%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-top: 1.5px solid rgba(255, 255, 255, 0.55);
    transition: var(--transition-smooth);
}

.liquid-edge-refraction {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-lg);
    pointer-events: none;
    z-index: 3;
    padding: 1.5px;
    background: conic-gradient(
        from var(--refract-angle, 60deg) at 50% 50%,
        rgba(255, 255, 255, 0.95) 0deg,
        rgba(175, 220, 255, 0.75) 45deg,
        rgba(255, 255, 255, 0.15) 120deg,
        rgba(255, 225, 170, 0.65) 190deg,
        rgba(255, 255, 255, 0.2) 260deg,
        rgba(175, 220, 255, 0.75) 315deg,
        rgba(255, 255, 255, 0.95) 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    box-shadow: 
        inset 0 0 16px rgba(255, 255, 255, 0.22),
        inset 0 0 4px rgba(175, 220, 255, 0.35);
    transition: opacity 0.5s ease;
}

.liquid-glass-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--glare-angle, 125deg), rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.02) 35%, transparent 60%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.5s ease;
    mix-blend-mode: overlay;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.video-overlay:hover {
    background: rgba(255, 255, 255, 0.03);
}

.play-btn-circle {
    width: 60px;
    height: 60px;
    background: var(--color-gold-gradient);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    box-shadow: 0 0 30px rgba(197, 160, 89, 0.4);
    transition: var(--transition-smooth);
}

.video-overlay:hover .play-btn-circle {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(197, 160, 89, 0.6);
}

.play-triangle {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid var(--color-bg-darker);
    margin-left: 6px;
}

.video-overlay-text {
    font-family: var(--font-headings);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.walkthrough-video-player {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    border-radius: var(--border-radius-md);
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 5;
}

.video-container-wrapper.playing .walkthrough-video-player {
    opacity: 1;
    pointer-events: auto;
}

.video-container-wrapper.playing .video-overlay,
.video-container-wrapper.playing .liquid-glass-glare,
.video-container-wrapper.playing .liquid-edge-refraction {
    opacity: 0;
    pointer-events: none;
}


/* Mobile Interactive Guide Tabs Dropdown */
.mobile-tabs-dropdown-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    z-index: 50; 
}
.mobile-tab-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(197, 160, 89, 0.1);
    border: 1px solid rgba(197, 160, 89, 0.4);
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--color-gold-light);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}
.dropdown-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}
.mobile-tabs-dropdown-container.open .dropdown-icon {
    transform: rotate(180deg);
}
.mobile-tab-menu {
    position: absolute;
    top: 100%; /* Expands downwards for natural flow, if they want upwards it can be bottom: 100% but downwards covers less UI */
    left: 0;
    width: 100%;
    background: #0a110e;
    border: 1px solid rgba(197, 160, 89, 0.4);
    border-radius: 8px;
    margin-top: 8px;
    display: none;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    overflow: hidden;
}
.mobile-tabs-dropdown-container.open .mobile-tab-menu {
    display: flex;
}
.mobile-tab-menu .explorer-tab-btn {
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #fff;
    text-align: left;
    font-size: 0.9rem;
    width: 100%;
    border-radius: 0;
}
.mobile-tab-menu .explorer-tab-btn:last-child {
    border-bottom: none;
}
.mobile-tab-menu .explorer-tab-btn.active {
    background: rgba(197, 160, 89, 0.15);
    color: var(--color-gold-light);
}


.isometric-img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6));
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}


/* Watermark Icons for Green Pillars */


.section-tagline { line-height: 1.4; font-style: italic; color: rgba(226, 237, 231, 0.95); margin: 12px auto 20px; font-size: 0.9rem; text-align: center; }

/* Green Certification Section Flow (Header -> Quote -> Certificate -> 4 Pillars -> Metrics Box) */
#m-green-certification #m-legal-cert-card {
    margin: 14px auto 20px;
}

#m-green-certification .gc-pillars-wrap {
    margin-top: 0;
    margin-bottom: 0;
}

#m-green-certification .gc-merged-metrics-box {
    margin-top: 24px;
    margin-bottom: 12px;
}

/* Smooth mobile tab scrolling & custom slim scrollbar */
#m-tab-specifications, #m-tab-eco-green, #m-tab-consultants {
    max-height: 480px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 5px;
}

#m-tab-specifications::-webkit-scrollbar,
#m-tab-eco-green::-webkit-scrollbar,
#m-tab-consultants::-webkit-scrollbar {
    width: 4px;
}

#m-tab-specifications::-webkit-scrollbar-thumb,
#m-tab-eco-green::-webkit-scrollbar-thumb,
#m-tab-consultants::-webkit-scrollbar-thumb {
    background: rgba(197, 160, 89, 0.4);
    border-radius: 4px;
}

#m-tab-specifications::-webkit-scrollbar-track,
#m-tab-eco-green::-webkit-scrollbar-track,
#m-tab-consultants::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}


/* The flat table: a band across the card from border to border (Oct 2026: it used to run past the card
   and the screen edges), with all seven columns fitting a 360px phone without sideways scrolling */
.specs-table-container {
    margin-left: -17px;    /* the card's 18px padding, inside its 1px border */
    margin-right: -17px;
    padding-left: 4px;
    padding-right: 4px;
    background: linear-gradient(90deg, rgba(197,160,89,0.02) 0%, rgba(197,160,89,0.08) 50%, rgba(197,160,89,0.02) 100%);
    border-top: 1px solid rgba(197, 160, 89, 0.2);
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    padding-top: 10px;
    padding-bottom: 5px;
}
.specs-styled-table {
    border-radius: 0;
    border: none;
    background: transparent;
}
.specs-styled-table th {
    padding: 8px 2px;
    letter-spacing: 0.3px;
    background: transparent;
    border-bottom: 1px solid rgba(197, 160, 89, 0.4);
}
.specs-styled-table td {
    padding: 8px 2px;
}

/* Tower buttons full width */
.btn-grid-toggle .flat-btn {
    flex: 1;
    padding: 11px 4px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Flat number selector - All 8 in one window side-by-side */
#m-flat-selector-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 2px 0 6px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

#m-flat-selector-grid .flat-btn {
    flex: 1 1 0;
    max-width: 44px;
    min-width: 0;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(197, 160, 89, 0.25);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#m-flat-selector-grid .flat-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(197, 160, 89, 0.5);
}

#m-flat-selector-grid .flat-btn.active {
    background: var(--color-gold-gradient, linear-gradient(135deg, #e0c07e, #b8860b));
    color: #061611;
    font-weight: 700;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(197, 160, 89, 0.35);
    transform: translateY(-1px);
}

/* Eco Prestige Badge & Header */
.eco-prestige-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(134, 191, 158, 0.1);
    border: 1px solid rgba(134, 191, 158, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 12px rgba(134, 191, 158, 0.12);
    margin-bottom: 8px;
}

.eco-prestige-badge .badge-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.eco-prestige-badge .badge-text {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #a4d7ba;
}

/* Eco Pills Navigation */
.eco-pills-nav {
    display: flex;
    gap: 7px;
    margin: 12px 0 16px;
    width: 100%;
}

.eco-pill-btn {
    flex: 1;
    padding: 10px 4px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.25px;
    border-radius: 9px;
    background: rgba(18, 28, 24, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(226, 237, 231, 0.85);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    box-sizing: border-box;
}

/* Inactive subtle accents */
.eco-pill-btn[data-eco="energy"] {
    border-color: rgba(228, 202, 150, 0.2);
}
.eco-pill-btn[data-eco="energy"]:hover {
    background: rgba(228, 202, 150, 0.1);
    border-color: rgba(228, 202, 150, 0.35);
}

.eco-pill-btn[data-eco="water"] {
    border-color: rgba(147, 197, 216, 0.2);
}
.eco-pill-btn[data-eco="water"]:hover {
    background: rgba(147, 197, 216, 0.1);
    border-color: rgba(147, 197, 216, 0.35);
}

.eco-pill-btn[data-eco="waste"] {
    border-color: rgba(134, 191, 158, 0.2);
}
.eco-pill-btn[data-eco="waste"]:hover {
    background: rgba(134, 191, 158, 0.1);
    border-color: rgba(134, 191, 158, 0.35);
}

/* Active Themed States - Frosted Mineral Silk */
.eco-pill-btn[data-eco="energy"].active {
    background: linear-gradient(135deg, #e4ca96 0%, #c5a059 100%);
    color: #0a120e;
    font-weight: 700;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(228, 202, 150, 0.25);
    transform: translateY(-1px);
}

.eco-pill-btn[data-eco="water"].active {
    background: linear-gradient(135deg, #b5dce9 0%, #7aaec2 100%);
    color: #06141a;
    font-weight: 700;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(147, 197, 216, 0.25);
    transform: translateY(-1px);
}

.eco-pill-btn[data-eco="waste"].active {
    background: linear-gradient(135deg, #a4d7ba 0%, #68a683 100%);
    color: #061611;
    font-weight: 700;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(134, 191, 158, 0.25);
    transform: translateY(-1px);
}

/* Eco Panes */
.eco-pane {
    display: none;
    animation: ecoFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.eco-pane.active {
    display: block;
}

@keyframes ecoFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Base Unified Glassmorphic Card */
.eco-unified-card {
    border-radius: 16px;
    padding: 16px 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.35s ease;
    box-sizing: border-box;
}

.eco-card-header {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 4px;
}

.eco-card-header h4 {
    font-size: 0.92rem;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.eco-feature-row {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.eco-feature-row:first-child {
    padding-top: 6px;
}

.eco-feature-row:last-child {
    border-bottom: none !important;
    padding-bottom: 4px;
}

.eco-feature-title {
    font-size: 0.88rem;
    color: #f1f5f3;
    font-weight: 600;
    margin-bottom: 3px;
    line-height: 1.32;
}

.eco-feature-row p {
    font-size: 0.78rem;
    line-height: 1.48;
    margin: 0;
    color: rgba(200, 218, 209, 0.82);
}

/* --- THEME 1: ENERGY (Warm Champagne Bronze Glass) --- */
.eco-unified-card.theme-energy {
    background: radial-gradient(130% 90% at 10% 0%, rgba(228, 202, 150, 0.08) 0%, rgba(197, 160, 89, 0.02) 60%, rgba(12, 18, 15, 0.95) 100%), rgba(12, 18, 15, 0.94);
    border: 1px solid rgba(228, 202, 150, 0.18);
    border-top: 1.5px solid rgba(228, 202, 150, 0.55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 25px rgba(228, 202, 150, 0.05);
}
.eco-unified-card.theme-energy .eco-card-header {
    border-bottom: 1px solid rgba(228, 202, 150, 0.15);
}
.eco-unified-card.theme-energy .eco-card-header h4 {
    color: #e4ca96;
}

/* --- THEME 2: WATER (Tranquil Glacier Azure Glass) --- */
.eco-unified-card.theme-water {
    background: radial-gradient(130% 90% at 10% 0%, rgba(147, 197, 216, 0.09) 0%, rgba(107, 163, 184, 0.02) 60%, rgba(8, 16, 21, 0.95) 100%), rgba(8, 15, 20, 0.94);
    border: 1px solid rgba(147, 197, 216, 0.18);
    border-top: 1.5px solid rgba(147, 197, 216, 0.55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 25px rgba(147, 197, 216, 0.05);
}
.eco-unified-card.theme-water .eco-card-header {
    border-bottom: 1px solid rgba(147, 197, 216, 0.15);
}
.eco-unified-card.theme-water .eco-card-header h4 {
    color: #b5dce9;
}

/* --- THEME 3: WASTE & ECO (Botanical Sage Jade Glass) --- */
.eco-unified-card.theme-waste {
    background: radial-gradient(130% 90% at 10% 0%, rgba(134, 191, 158, 0.09) 0%, rgba(88, 156, 118, 0.02) 60%, rgba(8, 18, 14, 0.95) 100%), rgba(8, 16, 13, 0.94);
    border: 1px solid rgba(134, 191, 158, 0.18);
    border-top: 1.5px solid rgba(134, 191, 158, 0.55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 25px rgba(134, 191, 158, 0.05);
}
.eco-unified-card.theme-waste .eco-card-header {
    border-bottom: 1px solid rgba(134, 191, 158, 0.15);
}
.eco-unified-card.theme-waste .eco-card-header h4 {
    color: #a4d7ba;
}

/* Enquiry form spam trap (Sep 2026): invisible to people, filled in by bots. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
/* ==========================================================================
   Trees-to-be-planted tile · "Forest light" (design option 4E, Sep 2026)
   Tree trunks and canopy silhouettes, drifting sun rays and falling leaves.
   ========================================================================== */
.gc-metric-forest {
  background: linear-gradient(180deg, #2a5a3c 0%, #1a4128 55%, #0e2617 100%);
  border-color: rgba(163, 207, 160, 0.38);
  border-left-color: #8fbf7f;
  box-shadow:
    0 6px 26px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(94, 140, 80, 0.2),
    inset 0 1.5px 3px rgba(220, 240, 210, 0.2);
}
.gc-metric-forest:hover {
  background: linear-gradient(180deg, #316643 0%, #1e4a2e 55%, #102b1a 100%);
  border-color: rgba(185, 216, 168, 0.75);
  border-left-color: #b9d8a8;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(143, 191, 127, 0.4),
    inset 0 2px 4px rgba(220, 240, 210, 0.3);
}
.gc-metric-forest .gc-metric-num {
  background: linear-gradient(135deg, #fbfbef 0%, #e6f1d8 40%, #b9d8a8 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}
.gc-metric-forest .gc-metric-label {
  color: #eef5f0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.woods-trees {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.woods-rays {
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(112deg, rgba(255, 244, 205, 0.1) 0 9px, transparent 9px 30px);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 55% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 55% 20%, #000 0%, transparent 75%);
  animation: woodsRays 9s ease-in-out infinite alternate;
}
@keyframes woodsRays {
  from { transform: translateX(-4%); opacity: 0.7; }
  to { transform: translateX(4%); opacity: 1; }
}
.woods-leaf {
  position: absolute;
  z-index: 2;
  width: clamp(6px, 0.45vw, 10px);
  height: clamp(6px, 0.45vw, 10px);
  border-radius: 0 70% 0 70%;
  background: #b9d8a8;
  opacity: 0;
  animation: woodsFall 7s linear infinite;
}
@keyframes woodsFall {
  0% { transform: translate(0, -10px) rotate(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.7; }
  100% { transform: translate(-30px, 150px) rotate(300deg); opacity: 0; }
}
.gc-metric-forest:hover .woods-rays {
  animation-duration: 5s;
}
@media (prefers-reduced-motion: reduce) {
  .woods-leaf { display: none; }
}


/* ##########################################################################
   PHONE PARITY PASS (Sep 2026) - the desktop changes, adapted for phones
   ########################################################################## */

/* ==========================================================================
   Line icons in tinted glass chips (desktop design 2B) - replaces the emoji
   ========================================================================== */
.line-ico {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}
.ico-chip {
    --c: 224, 192, 126;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    color: rgb(var(--c));
    background: rgba(var(--c), 0.1);
    border: 1px solid rgba(var(--c), 0.42);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), 0 0 10px rgba(var(--c), 0.12);
    line-height: 1;
}
.ico-chip .line-ico { width: 55%; height: 55%; }
.tint-gold   { --c: 240, 217, 164; }
.tint-yellow { --c: 250, 204, 21; }
.tint-blue   { --c: 56, 189, 248; }
.tint-green  { --c: 74, 222, 128; }
.tint-mint   { --c: 134, 239, 172; }
.ico-inline {
    width: 1.9em;
    height: 1.9em;
    margin-right: 0.55em;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.ico-pill {
    width: 1.55em;
    height: 1.55em;
    margin-right: 0.4em;
    vertical-align: middle;
}
.eco-pill-btn { display: inline-flex; align-items: center; justify-content: center; }

/* placement of the chips that replaced single emoji */
.leaf-icon,
.badge-icon,
.divider-icon,
.badge-crown,
.lightbox-kicker-icon {
    display: inline-flex;
    width: 1.15em;
    height: 1.15em;
    color: currentColor;
    vertical-align: middle;
}
.cert-status-badge .leaf-icon { color: #86efac; }
.gc-pillar-icon-center {
    font-size: 1rem;
    opacity: 1;
}
.gc-pillar-icon-center .ico-chip {
    width: 2em;
    height: 2em;
    background-color: rgba(8, 16, 12, 0.92);
}
.spec-icon.ico-chip {
    font-size: 1rem;
    width: 1.9em;
    height: 1.9em;
}
.accolade-icon.ico-chip {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.rera-shield.ico-chip {
    font-size: 1.35rem;
    width: 1.9em;
    height: 1.9em;
}
.contact-entry-icon .ico-chip { font-size: 0.95rem; }
.input-icon.ico-chip {
    font-size: 0.85rem;
    opacity: 1;
    width: 1.75em;
    height: 1.75em;
    left: 9px;
}
.luxury-form-control { padding-left: 44px; }
.luxury-textarea { padding-left: 14px; }
.sticky-bar-btn .line-ico {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
}
.compact-hotline-pill .line-ico,
.compact-email-link .line-ico {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
}

/* ==========================================================================
   Pill buttons & corner system (desktop design 3B)
   ========================================================================== */
:root { --border-radius-lg: 22px; }
.btn,
.btn-primary,
.btn-submit-request,
.btn-success-reset,
.explorer-tab-btn,
.flat-btn,
.eco-pill-btn,
.lookbook-explore-btn,
.amenity-badge,
.lightbox-badges .amenity-badge,
.residence-tag,
.past-proj-badge,
.cons-loc,
.entry-map-link,
.compact-hotline-pill,
.sticky-bar-btn,
.rera-verify-btn,
.lightbox-btn-nav {
    border-radius: 999px;
}
.luxury-form-control,
.config-pill,
.mobile-tab-selected {
    border-radius: 12px;
}
.amenity-card,
.lookbook-card,
.residence-card,
.booking-card,
.video-container-wrapper,
.premium-cert-container {
    border-radius: 22px;
}
.spec-row,
.eco-unified-card,
.consultant-card,
.past-project-card,
.gc-pillar-compact {
    border-radius: 14px;
}
.gallery-item { border-radius: 16px; }

/* ==========================================================================
   Readability & touch: nothing under ~10.5px, tap targets of at least 40px,
   16px form text (so iPhones don't zoom into a field), zoom allowed again
   ========================================================================== */
.metrics-mobile-grid .metric-pill-mobile .lbl,
.gc-merged-metrics-box .gc-metric-label,
.residence-img-holder .residence-tag,
.specs-table-container th,
.specs-table-container td {
    font-size: 10.5px;
}
.cert-status-badge,
.section-subtitle { font-size: 0.7rem; }
.mobile-toggle { min-width: 44px; min-height: 44px; }
.flat-btn { min-height: 42px; min-width: 42px; }
.entry-map-link { padding: 7px 12px; font-size: 0.72rem; }
.rera-verify-btn { padding-top: 10px; padding-bottom: 10px; }
.luxury-form-control,
.luxury-form-control::placeholder,
.chat-input {
    font-size: 16px;
}
@media (max-width: 480px) {
    /* phone + email side by side were only ~160px each: stack them like the desktop form */
    .form-row { flex-direction: column; gap: 14px; }
}

/* ==========================================================================
   Photos are <picture> (AVIF with WebP fallback): keep every layout as before
   ========================================================================== */
.overview-full-image-wrapper > picture,
.residence-img-holder > picture,
.amenity-img-holder > picture,
.gallery-item > picture {
    display: contents;
}

/* ==========================================================================
   Hero: phone cut of the film + text captions
   ========================================================================== */
.hero-section { background: #060a08 url('assets/video/hero-phone-poster.webp?v=4') center / cover no-repeat; }
.hero-video-bg { opacity: 0.78; }
.hero-bg-overlay {
    background:
        linear-gradient(180deg, rgba(6, 10, 8, 0.55) 0%, rgba(6, 10, 8, 0) 22%),
        linear-gradient(0deg, #060a08 0%, rgba(6, 10, 8, 0.72) 16%, rgba(6, 10, 8, 0) 42%),
        radial-gradient(ellipse at 50% 42%, rgba(12, 18, 15, 0) 0%, rgba(6, 10, 8, 0.45) 100%);
}
.hero-captions {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 76px;
    z-index: 4;
    pointer-events: none;
    min-height: 3.6em;
}
.hero-cap {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    color: #fff;
    text-align: left;
    line-height: 1.25;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.55s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-cap.on { opacity: 1; transform: none; }
.hero-cap .hc-s {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}
.hero-cap .hc-l {
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: reduce) {
    .hero-cap { transition: none; transform: none; }
}

/* ==========================================================================
   Green certification: the blur is baked into the video, no live blur
   ========================================================================== */
.green-cert-bg-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.green-certification-section { background: #0b1a12; }

/* ==========================================================================
   Amenities heading (desktop 1A): kicker, title and a soft gold glow line
   ========================================================================== */
.amenities-glow-lines {
    position: relative;
    height: 14px;
    width: min(78%, 320px);
    margin: 10px auto 0;
}
.amenities-glow-lines span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    border-radius: 1px;
}
.agl-main {
    top: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(224, 192, 126, 0.95), transparent);
    box-shadow: 0 0 10px 1px rgba(224, 192, 126, 0.45);
}
.agl-sub {
    top: 7px;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.8), transparent);
    box-shadow: 0 0 8px rgba(125, 211, 252, 0.4);
}

/* ==========================================================================
   Gallery: 12 renders; four full-width, the rest in pairs, each with its name
   ========================================================================== */
.gallery-grid { gap: 10px; }
.gallery-item { aspect-ratio: 4 / 3; }
.gallery-item.g-wide {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}
.gallery-item::after {
    content: "";
    position: absolute;
    inset: 45% 0 0 0;
    background: linear-gradient(0deg, rgba(6, 10, 8, 0.85) 0%, rgba(6, 10, 8, 0) 100%);
    pointer-events: none;
}
.gallery-cap {
    position: absolute;
    left: 10px;
    right: 8px;
    bottom: 9px;
    z-index: 1;
    padding-left: 8px;
    border-left: 2px solid var(--color-gold);
    font-family: var(--font-headings);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.gallery-item.g-wide .gallery-cap { font-size: 0.82rem; left: 12px; bottom: 11px; }

/* ==========================================================================
   Walkthrough: dusk still behind the player (fixed backgrounds jank on phones),
   tap-to-load player, swipeable chapter strip
   ========================================================================== */
#m-walkthrough {
    background-image: url('assets/video/walkthrough-dusk-poster-1920.webp');
    background-attachment: scroll;
    background-position: 58% center;
}
.video-container-wrapper { background: rgba(6, 10, 8, 0.35); }
.video-container-wrapper.yt-external .play-btn-circle { box-shadow: 0 0 0 6px rgba(197, 160, 89, 0.18), 0 0 30px rgba(197, 160, 89, 0.4); }
/* Chapters (Oct 2026): one slim row of chips under the player, time + name, no pictures (they were
   cards with photos, about 300px tall). The row scrolls sideways and fades out at the right edge. */
.wt-chapters-m {
    margin-top: 12px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
.wt-chapters-m .wt-chapter-list {
    list-style: none;
    margin: 0;
    padding: 0 32px 0 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.wt-chapters-m .wt-chapter-list::-webkit-scrollbar { display: none; }
.wt-chapters-m .wt-chapter-list li { flex: 0 0 auto; scroll-snap-align: start; }
.wt-chapters-m .wt-chapter {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 15px 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(224, 192, 126, 0.32);
    background: rgba(8, 14, 11, 0.62);
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.wt-chapters-m .wt-ch-time {
    font-size: 0.74rem;
    color: var(--color-gold-light);
    font-variant-numeric: tabular-nums;
}
.wt-chapters-m .wt-chapter.on {
    border-color: rgba(224, 192, 126, 0.85);
    background: rgba(224, 192, 126, 0.16);
}

/* ==========================================================================
   Contact (desktop look, stacked for phones): the rebuilt render behind a glass
   callback form and a glass coordinates card; no section heading
   ========================================================================== */
.m-contact-stage {
    position: relative;
    overflow: hidden;
    padding: 0 0 36px;
    background: #060a08;
    isolation: isolate;
}
.m-cs-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100vw * 1.858);
    max-height: 1500px;
    z-index: -1;
    background-color: #1a1420;
    background-image: url('assets/contact_bg_phone_1000.webp');
    background-image: image-set(url('assets/contact_bg_phone_1000.avif') type('image/avif'), url('assets/contact_bg_phone_1000.webp') type('image/webp'));
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
@media (max-width: 480px) and (max-resolution: 2.2dppx) {
    .m-cs-bg {
        background-image: url('assets/contact_bg_phone_720.webp');
        background-image: image-set(url('assets/contact_bg_phone_720.avif') type('image/avif'), url('assets/contact_bg_phone_720.webp') type('image/webp'));
    }
}
.m-cs-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, #060a08 0%, rgba(6, 10, 8, 0.4) 5%, rgba(6, 10, 8, 0) 12%),
        linear-gradient(0deg, #060a08 0%, rgba(6, 10, 8, 0.8) 12%, rgba(6, 10, 8, 0) 34%);
}
.m-cs-logo {
    position: relative;
    padding: calc(100vw * 0.2) 0 0;
    margin-bottom: calc(100vw * 0.62);
    text-align: center;
}
.m-cs-monogram {
    display: block;
    width: 108px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 22px rgba(224, 192, 126, 0.25));
}
.m-cs-pedestal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px auto 4px;
    color: var(--color-gold-light);
    font-size: 0.55rem;
}
.m-cs-pedestal span {
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224, 192, 126, 0.85));
}
.m-cs-pedestal span:last-child { transform: scaleX(-1); }
.m-cs-pedestal i { font-style: normal; }
.m-cs-wordmark {
    text-transform: uppercase;
    font-family: var(--font-headings);
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    color: #f6ecd6;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.m-glass {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.04) 100%),
        rgba(10, 18, 14, 0.5);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(224, 192, 126, 0.34);
    border-top-color: rgba(255, 255, 255, 0.42);
    border-radius: 22px;
    box-shadow: 0 24px 50px -14px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.16);
}
.m-contact-stage .booking-form-suite { padding: 22px 18px 20px; overflow: visible; }
.m-contact-stage .booking-card-header { margin-bottom: 16px; }
.m-contact-stage .booking-card-header .section-subtitle { display: block; margin-bottom: 6px; }
.m-contact-stage .booking-card-title {
    font-family: var(--font-headings);
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
}
.booking-card-desc {
    margin: 6px auto 0;
    max-width: 30ch;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.m-contact-stage .luxury-form-control {
    background: rgba(6, 10, 8, 0.55);
    border-color: rgba(224, 192, 126, 0.3);
}
.m-contact-stage .config-pill { background: rgba(6, 10, 8, 0.45); }
.m-coords { margin-top: 16px; margin-bottom: 0; padding: 16px 16px 18px; }
.m-coords .sleek-contact-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.m-coords-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 8px rgba(224, 192, 126, 0.8);
}
.m-coords .sleek-contact-title {
    font-family: var(--font-headings);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.m-coords-loc {
    flex-basis: 100%;
    padding-left: 14px;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.m-coords .contact-entry-icon { padding-top: 0; }
.compact-hotline-pill,
.compact-email-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.compact-hotline-pill { min-height: 40px; }
.compact-email-link {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(197, 160, 89, 0.1);
    border: 1px solid rgba(197, 160, 89, 0.35);
    align-self: flex-start;
}
.hp-field + .form-group { margin-top: 0; }

/* ==========================================================================
   Soft section transitions (desktop 5A): gentle fades instead of hard cuts
   ========================================================================== */
.overview-hero-slide { background: linear-gradient(180deg, #060a08 0%, rgba(13, 21, 16, 0) 90px), var(--color-bg-dark); }
.residences-section { background: linear-gradient(180deg, #060a08 0%, rgba(13, 21, 16, 0) 90px), var(--color-bg-dark); }
.amenities-section { background: linear-gradient(180deg, var(--color-bg-dark) 0%, rgba(6, 10, 8, 0) 70px), #060a08; }
#m-gallery { background: linear-gradient(180deg, #060a08 0%, rgba(13, 21, 16, 0) 90px), var(--color-bg-dark); }
#m-walkthrough::before {
    background:
        linear-gradient(180deg, var(--color-bg-dark) 0%, rgba(13, 21, 16, 0) 110px),
        linear-gradient(0deg, #060a08 0%, rgba(6, 10, 8, 0) 110px),
        rgba(12, 18, 15, 0.42);
}

.gc-merged-metrics-box .gc-metric-row .gc-metric-label {
    font-size: 10.5px !important;
}
.m-cs-monogram { width: clamp(100px, 28vw, 190px); }

/* Backgrounds further down the page load only when the reader gets near them (mobile.js adds .bg-ready) */
#m-walkthrough:not(.bg-ready) { background-image: none; }
.m-contact-stage:not(.bg-ready) .m-cs-bg { background-image: none; }

/* ==========================================================================
   Overview (Sep 2026): heading on the top of the aerial render, no badge/lines
   ========================================================================== */
.m-overview.overview-hero-slide { padding-top: 0 !important; scroll-margin-top: 66px; }
.m-ov-stage {
    margin-top: 0;
    margin-bottom: 0;
    aspect-ratio: 1 / 1;
    max-height: 640px;
}
.m-ov-stage .overview-full-render-mobile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 10% 100%;
}
.m-ov-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, #060a08 0%, rgba(6, 10, 8, 0.82) 14%, rgba(6, 10, 8, 0.35) 34%, rgba(6, 10, 8, 0) 50%),
        linear-gradient(0deg, var(--color-bg-dark) 0%, rgba(13, 21, 16, 0) 18%);
}
.m-ov-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    padding: 26px 6% 0;
    text-align: center;
}
.m-ov-title .slide2-poetic-heading {
    margin: 0;
    font-size: clamp(1.55rem, 7.4vw, 2.1rem);
    line-height: 1.22;
    text-wrap: balance;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75));
}

/* ==========================================================================
   Amenity cards come alive on phones: after a card rests in view for a moment
   its short film fades in over the photo; any scroll fades back to the photo
   ========================================================================== */
.amenity-img-holder { position: relative; }
.amenity-live {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.amenity-img-holder .lookbook-img-gradient { z-index: 2; }
.amenity-card.is-live .amenity-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .amenity-live { display: none; }
}

/* ==========================================================================
   Overview heading: design options (Sep 2026) - try on a phone with ?ov=a|b|c|d
   Geometry is in vw because the stage is a full-width square (100vw x 100vw):
   right tower roof ~37vw down at 71-98vw across, middle tower roof ~43vw at 31-54vw.
   ========================================================================== */
.m-ov-title .ov-l1, .m-ov-title .ov-l2 { display: inline; }

/* A · Written in the sky (refined): the render with its twilight sky continued above it (clouds
   growing larger towards the zenith), the words set in that sky, lit from the glowing horizon on the
   left, a veil of cloud drifting across them, and a gentle "the sky clears" reveal. */
.m-ov-skyimg, .m-ov-wisps { display: none; }
#m-overview.ov-a .m-ov-stage { aspect-ratio: 1638 / 2129; max-height: none; overflow: hidden; }
#m-overview.ov-a .m-ov-stage > picture:not(.m-ov-skypic) { display: none; }
#m-overview.ov-a .m-ov-skyimg {
    display: block;
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
}
#m-overview.ov-a .m-ov-shade {
    background:
        linear-gradient(180deg, #060a08 0%, rgba(6, 10, 8, 0.72) 4%, rgba(6, 10, 8, 0.2) 11%, rgba(6, 10, 8, 0) 17%),
        radial-gradient(ellipse 80% 16% at 50% 17%, rgba(12, 14, 40, 0.38) 0%, rgba(12, 14, 40, 0) 100%),
        linear-gradient(0deg, var(--color-bg-dark) 0%, rgba(13, 21, 16, 0) 12%);
}
#m-overview.ov-a .m-ov-title {
    padding-top: 10.5vw;
    transform: translate3d(0, var(--ov-drift, 0px), 0);
    will-change: transform;
}
#m-overview.ov-a .m-ov-title .slide2-poetic-heading {
    background: none; -webkit-text-fill-color: currentColor; color: #f6ecd8;
    font-weight: 600; line-height: 1.08; letter-spacing: 0.01em;
    filter: drop-shadow(0 2px 8px rgba(8, 10, 34, 0.55)) drop-shadow(0 0 26px rgba(150, 170, 255, 0.28));
}
#m-overview.ov-a .ov-l1, #m-overview.ov-a .ov-l2 { display: block; }
#m-overview.ov-a .ov-l1 {
    font-size: 5.1vw; letter-spacing: 0.3em; font-weight: 500;
    color: #e3e6f7; -webkit-text-fill-color: #e3e6f7;
    margin-bottom: 1.6vw; padding-left: 0.3em;
}
#m-overview.ov-a .ov-l2 {
    font-size: 9.4vw; font-weight: 700;
    /* lit from the bright horizon on the left */
    background: linear-gradient(100deg, #fff8e8 0%, #f8e3b4 30%, #ecc987 62%, #d6a95e 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#m-overview.ov-a .m-ov-wisps {
    display: block;
    position: absolute; left: -12%; top: 0; width: 124%; height: auto;
    z-index: 3; pointer-events: none;
    opacity: 0.42;
    mix-blend-mode: screen;
    animation: ovWisps 46s ease-in-out infinite alternate;
}
@keyframes ovWisps { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(4%, 0, 0); } }
/* the sky clears: the words come out of the haze once, when the section arrives */
#m-overview.ov-a .m-ov-title .ov-l1,
#m-overview.ov-a .m-ov-title .ov-l2 {
    opacity: 0; filter: blur(7px); transform: translateY(6px);
    transition: opacity 1.4s ease, filter 1.6s ease, transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1), letter-spacing 1.8s ease;
}
#m-overview.ov-a .m-ov-title .ov-l1 { letter-spacing: 0.42em; }
#m-overview.ov-a .m-ov-title .ov-l2 { transition-delay: 0.25s; }
#m-overview.ov-a.ov-in .m-ov-title .ov-l1,
#m-overview.ov-a.ov-in .m-ov-title .ov-l2 { opacity: 1; filter: none; transform: none; }
#m-overview.ov-a.ov-in .m-ov-title .ov-l1 { letter-spacing: 0.3em; }
@media (prefers-reduced-motion: reduce) {
    #m-overview.ov-a .m-ov-wisps { animation: none; }
    #m-overview.ov-a .m-ov-title .ov-l1, #m-overview.ov-a .m-ov-title .ov-l2 { transition: none; opacity: 1; filter: none; transform: none; }
}


/* Walkthrough (Sep 2026): "Virtual Tour" is the section's only heading. It is an <h2> for screen
   readers but keeps the gold kicker look it had as a <span>. */
.section-header h2.wt-heading {
    font-family: var(--font-body);
    font-weight: 600;
    line-height: normal;
    color: var(--color-gold);
}

/* ==========================================================================
   Aria concierge v2 (Sep 2026): the chat opens (it had no open state), chips,
   action buttons, typing dots and a dictation mic
   ========================================================================== */
.chatbot-box.active { display: flex; }
.chatbot-box .chat-header h4 { margin: 0; }
.chat-msg { white-space: normal; overflow-wrap: anywhere; }
.chat-msg.bot { color: rgba(255, 255, 255, 0.92); }
.chat-msg a { color: var(--color-gold-light); text-decoration: underline; text-underline-offset: 2px; }
.chat-msg.typing { display: flex; gap: 5px; align-items: center; padding: 12px 14px; }
.chat-msg.typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(197, 160, 89, 0.7);
    animation: ariaDot 1.2s infinite;
}
.chat-msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-msg.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ariaDot { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.chat-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    scrollbar-width: none;
    flex-shrink: 0;
}
.chat-chips::-webkit-scrollbar { display: none; }
.chat-chip {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(197, 160, 89, 0.3);
    background: rgba(197, 160, 89, 0.07);
    color: var(--color-gold-light);
    font-family: inherit;
    font-size: 0.74rem;
    line-height: 1.2;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.chat-chip:active { background: var(--color-gold-gradient); color: #000; }
.chat-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-actions .chat-chip { white-space: normal; flex-shrink: 1; background: rgba(197, 160, 89, 0.12); }
.chat-mic {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(197, 160, 89, 0.35);
    background: rgba(197, 160, 89, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.chat-mic[hidden] { display: none; }
.chat-mic svg { width: 18px; height: 18px; fill: var(--color-gold-light); }
.chat-mic.listening { background: var(--color-gold-gradient); animation: ariaMic 1.2s ease-in-out infinite; }
.chat-mic.listening svg { fill: #000; }
@keyframes ariaMic { 0%, 100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(197, 160, 89, 0); } }
@media (prefers-reduced-motion: reduce) {
    .chat-msg.typing span, .chat-mic.listening { animation: none; }
}

/* ==========================================================================
   Walkthrough fills the screen like the hero (Sep 2026): one full screen between the
   top bar and the Book Meeting / Call Sales bar, with the heading, player and chapter
   strip centred in it
   ========================================================================== */
#m-walkthrough.m-walkthrough {
    min-height: 100vh;
    min-height: 100svh;
    padding: 78px 0 calc(82px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#m-walkthrough.m-walkthrough > .container { flex: 0 0 auto; width: 92%; }

/* ==========================================================================
   Aria, the concierge: premium look (Sep 2026, owner's pick: a mix of options 9A, 9B and 9C)
   Phones: the gold-ringed ESV monogram button, and a glass bottom sheet with a small dusk-photo
   header and a time-of-day greeting
   ========================================================================== */
.chatbot-widget {
    --aria-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.015) 40%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.035) 100%), rgba(8, 14, 11, 0.8);
    --aria-gold: linear-gradient(135deg, #f0d69a 0%, #c5a059 55%, #9c7a3c 100%);
    --aria-ring: conic-gradient(from 210deg, #8a6a30, #f3dfae, #c5a059, #6b5024, #e0c07e, #8a6a30);
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    right: 14px;
}
.chatbot-widget .chatbot-toggle {
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 22px rgba(224, 192, 126, 0.28);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.aria-trig-mono,
.chatbot-box .chat-avatar {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2px;
    background: var(--aria-ring);
}
.aria-trig-mono::before,
.chatbot-box .chat-avatar::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url("assets/aria/esv-mono-96.webp") 52% 52% / 70% auto no-repeat, radial-gradient(circle at 40% 30%, #174035, #081a15 72%);
}
.aria-trig-dot,
.chatbot-box .avatar-status-dot {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3ddc84;
    border: 2px solid #0b1511;
}
.chatbot-widget:has(.chatbot-box.active) .chatbot-toggle { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* the sheet */
.chatbot-widget .chatbot-box {
    left: 0;
    right: 0;
    bottom: 0;
    top: max(64px, 9svh);
    width: auto;
    height: auto;
    border-radius: 24px 24px 0 0;
    border: 1px solid rgba(224, 192, 126, 0.34);
    border-bottom: none;
    border-top-color: rgba(255, 255, 255, 0.4);
    background: var(--aria-glass);
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.65);
    z-index: 1500;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.chatbot-widget .chatbot-box.active { animation: ariaSheetIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes ariaSheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.aria-grab {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.4);
    z-index: 2;
}

/* header: small dusk photo + greeting */
.chatbot-box .chat-header.aria-hero {
    position: relative;
    gap: 12px;
    justify-content: flex-start;
    padding: 18px 12px 14px 16px;
    min-height: 80px;
    flex-shrink: 0;
    background:
        linear-gradient(180deg, rgba(6, 10, 8, 0.25) 0%, rgba(6, 10, 8, 0.35) 45%, rgba(8, 14, 11, 0.94) 100%),
        url("assets/aria/aria-header-480.webp") 60% 42% / cover;
    border-bottom: 1px solid rgba(224, 192, 126, 0.18);
}
.chatbot-box .chat-avatar { width: 42px; height: 42px; }
.chatbot-box .chat-header-text { flex: 1; min-width: 0; }
.chatbot-box .chat-header-text h4 {
    margin: 0;
    font-family: var(--font-headings);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.chatbot-box .chat-status {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: rgba(243, 223, 174, 0.9);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.chatbot-box .chat-close-btn {
    flex-shrink: 0;
    align-self: flex-start;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(6, 10, 8, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
}
.chatbot-box .chat-close-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* messages */
.chatbot-box .chat-messages { padding: 14px 14px 10px; gap: 12px; }
.chatbot-box .chat-msg { max-width: 88%; font-size: 0.86rem; line-height: 1.5; }
.chatbot-box .chat-msg.bot {
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-left: 2px solid rgba(224, 192, 126, 0.75);
    border-radius: 6px 18px 18px 18px;
}
.chatbot-box .chat-msg.user {
    padding: 10px 14px;
    background: var(--aria-gold);
    color: #1a1408;
    font-weight: 500;
    border-radius: 18px 18px 6px 18px;
}
.chatbot-box .chat-actions .chat-chip { color: #f3dfae; border-color: rgba(224, 192, 126, 0.45); background: rgba(224, 192, 126, 0.08); }

/* chips + input */
.chatbot-box .chat-chips { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 8px 14px 6px; }
.chatbot-box .chat-input-area { gap: 8px; padding: 8px 12px 12px; background: transparent; border-top: none; align-items: center; }
.chatbot-box .chat-input {
    height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(224, 192, 126, 0.28);
    font-size: 16px;   /* 16px keeps iPhones from zooming in on the field */
    font-family: inherit;
    min-width: 0;
    color: #fff;
}
.chatbot-box .chat-input:focus { outline: none; border-color: rgba(224, 192, 126, 0.7); box-shadow: 0 0 0 3px rgba(224, 192, 126, 0.12); }
.chatbot-box .chat-mic { width: 46px; height: 46px; }
.chatbot-box .chat-send {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--aria-gold);
    color: #1a1408;
    box-shadow: 0 6px 18px rgba(197, 160, 89, 0.35);
}
.chatbot-box .chat-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
    .chatbot-widget .chatbot-box.active { animation: none; }
}

/* ==========================================================================
   Round 18 · 10A "Flat gold, no glow" (owner's pick, 29 Sep 2026)
   Removes what read as "AI-made": metallic gradient fills, gradient text,
   gold glows and endlessly looping shimmers. Same colours, same layout.
   To undo, delete this block.
   ========================================================================== */

/* 1. One flat gold instead of the 3-stop metallic gradient.
      Every button, tag, divider and gold word that used the gradient goes flat. */
:root {
  --color-gold-gradient: linear-gradient(#c5a059, #c5a059);
  --shadow-gold: none;
}
.chatbot-widget {
  --aria-gold: linear-gradient(#c5a059, #c5a059);
  --aria-ring: linear-gradient(#c5a059, #c5a059);
}

/* 2. Buttons: flat fill, a plain shadow for depth, no gold halo */
.btn-primary,
.explorer-tab-btn.active,
.flat-btn.active,
.mode-pill-btn.active,
.aria-modes .mode-pill-btn.active { box-shadow: none !important; }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important; filter: none; background: #d1ae6c; }
.play-btn-circle { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; }
.video-overlay:hover .play-btn-circle { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5) !important; }
.config-pill.active {
  background: rgba(197, 160, 89, 0.16) !important;
  box-shadow: none !important;
}

/* 3. Gradient text becomes solid colour */
.gold-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: #c9a760 !important; }
.gc-metric-num,
.gc-platinum-word,
.gc-metric-zero {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}
.gc-metric-water .gc-metric-num { color: #ffffff !important; }
.gc-metric-forest .gc-metric-num { color: #f3f7ee !important; }
.gc-metric-clean .gc-metric-num { color: #ffffff !important; }
.gc-metric-platinum .gc-metric-num,
.gc-platinum-word { color: #e3cc93 !important; }

/* 4. No glows: gold halos on text and boxes are removed; dark legibility shadows stay */
.hero-title { animation: none !important; }
.slide2-poetic-heading { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55) !important; }
.gc-metric-platinum { box-shadow: none !important; }
.pill-title { text-shadow: none !important; }
.chatbot-widget .chatbot-toggle { box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.65) !important; }
.aria-trig-mono, .chatbot-box .chat-avatar { box-shadow: none !important; padding: 1.5px !important; }
.aria-trig-dot, .chatbot-box .avatar-status-dot { box-shadow: none !important; }


/* 6. The green pillar cards: a flat tint instead of a 3-stop gradient */
.gc-pillar-compact { background: rgba(8, 44, 36, 0.45) !important; }
.gc-pillar-compact:hover { background: rgba(10, 58, 48, 0.58) !important; }

/* phone-only parts of 10A */
.btn-submit-request { background: #c5a059 !important; border-color: #c5a059 !important; box-shadow: none !important; }
.sticky-btn-primary { box-shadow: none !important; }
#m-flat-selector-grid .flat-btn.active { box-shadow: none !important; transform: none !important; }
.video-container-wrapper.yt-external .play-btn-circle { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important; }
.m-coords-dot { box-shadow: none !important; }
.chatbot-widget .chatbot-toggle { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6) !important; }
#m-overview.ov-a .ov-l2, .ov-l2 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #ecd29a !important;
}
.past-proj-brand h4 { background: none !important; -webkit-text-fill-color: currentColor !important; color: #f3e2ba !important; }
.past-proj-top-shimmer { display: none !important; }

/* ==========================================================================
   Round 20 · 12A "Capitals only for the big titles" (owner's pick, 29 Sep 2026)
   Cinzel stays for the section titles, the hero and the logo. Card names,
   captions and small labels use the body font in normal case.
   To undo, delete this block.
   ========================================================================== */
.amenity-header-row h4,
.gc-pillar-compact h4,
.residence-details h3,
.spec-header h4,
.eco-card-header h4,
.gallery-cap,
.booking-card-title,
.sleek-contact-title {
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
  font-weight: 500 !important;
}
.amenity-header-row h4 { font-size: 1.02rem !important; color: #efe6d2 !important; }
.residence-details h3 { font-size: 1.3rem !important; }
.gallery-cap { font-size: 0.86rem !important; }
.booking-card-title { font-size: 1.45rem !important; font-weight: 400 !important; }
.sleek-contact-title { font-size: 0.95rem !important; }
.lookbook-explore-btn,
.metric-pill-mobile .lbl,
.gc-metric-label,
.form-label { text-transform: none !important; letter-spacing: 0.02em !important; }
.video-overlay-text { font-family: var(--font-body) !important; text-transform: none !important; letter-spacing: 0.02em !important; font-size: 0.95rem !important; }

/* Round 22 (30 Sep 2026): four stats on the overview (21,000 sq ft landscape added), laid out 2 x 2 */
.metrics-mobile-grid { grid-template-columns: repeat(2, 1fr); }

/* Round 23 (30 Sep 2026): the photo follows the finger when swiped (js/lightbox-motion.js) */
.lightbox-viewport { touch-action: pan-y; }
.lightbox-hero-img { -webkit-user-drag: none; }

/* ==========================================================================
   Round 24 (30 Sep 2026): Voice mode on phones, the same as the desktop.
   A Chat / Voice switch under the header; Voice is a hands-free conversation
   with the orb. The chat mic stays in Chat.
   ========================================================================== */
.aria-modes { padding: 10px 14px 2px; flex-shrink: 0; }
.aria-modes .mode-toggle-pill {
    display: flex;
    width: 100%;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.aria-modes .mode-pill-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
}
.aria-modes .mode-pill-btn svg { width: 14px; height: 14px; fill: currentColor; }
.aria-modes .mode-pill-btn.active { background: #c5a059; color: #1a1408; font-weight: 600; }

.chatbot-box .chat-mode-panel { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
.chatbot-box .chat-mode-panel.active { display: flex; }

.voice-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    gap: 14px;
    padding: 18px 18px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.voice-orb-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    flex-shrink: 0;
}
.voice-orb-rings { position: absolute; inset: 0; pointer-events: none; }
.vor {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(224, 192, 126, 0.3);
    opacity: 0;
    animation: ariaOrbRing 3s ease-in-out infinite;
}
.vor2 { animation-delay: 1s; }
.vor3 { animation-delay: 2s; }
@keyframes ariaOrbRing { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.8); opacity: 0; } }
.voice-orb-container.listening .vor { border-color: rgba(34, 197, 94, 0.45); animation-duration: 1.2s; }
.voice-orb-container.speaking .vor { border-color: rgba(224, 192, 126, 0.55); animation-duration: 0.8s; }
.voice-orb-btn {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(224, 192, 126, 0.6);
    background: radial-gradient(circle at 35% 30%, #2a7a66, #0c3d33 60%, #082a23);
    box-shadow: 0 0 0 6px rgba(224, 192, 126, 0.07), 0 10px 28px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.voice-orb-btn:active { transform: scale(0.95); }
.voice-orb-btn svg { width: 34px; height: 34px; fill: #fff; }
.voice-orb-btn:disabled { opacity: 0.45; }
.voice-orb-btn.listening {
    background: radial-gradient(circle at 35% 30%, #22a35a, #15803d 60%, #166534);
    border-color: rgba(34, 197, 94, 0.6);
    animation: ariaOrbPulse 1.5s ease-in-out infinite;
}
.voice-orb-btn.speaking {
    background: radial-gradient(circle at 35% 30%, #d9b877, #a8813f 60%, #7c5a22);
    border-color: rgba(224, 192, 126, 0.8);
}
@keyframes ariaOrbPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1), 0 10px 28px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0.14), 0 10px 28px rgba(0, 0, 0, 0.5); }
}
.voice-waveform { display: flex; align-items: center; gap: 4px; height: 32px; }
.voice-waveform span { display: block; width: 4px; height: 8px; border-radius: 3px; background: rgba(197, 160, 89, 0.3); }
.voice-waveform.active span { background: #c5a059; animation: ariaWave 0.8s ease-in-out infinite alternate; }
.voice-waveform.active span:nth-child(2) { animation-delay: 0.1s; }
.voice-waveform.active span:nth-child(3) { animation-delay: 0.2s; }
.voice-waveform.active span:nth-child(4) { animation-delay: 0.15s; }
.voice-waveform.active span:nth-child(5) { animation-delay: 0.05s; }
.voice-waveform.active span:nth-child(6) { animation-delay: 0.25s; }
.voice-waveform.active span:nth-child(7) { animation-delay: 0.1s; }
.voice-waveform.active span:nth-child(8) { animation-delay: 0.2s; }
@keyframes ariaWave { from { height: 6px; opacity: 0.5; } to { height: 26px; opacity: 1; } }
.voice-hint-text {
    margin: 0;
    text-align: center;
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    color: rgba(243, 223, 174, 0.8);
}
.voice-hint-text.listening { color: #4ade80; }
.voice-hint-text.speaking { color: #f3dfae; }
.voice-transcript {
    min-height: 20px;
    padding: 0 10px;
    text-align: center;
    font-size: 0.84rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.65);
    overflow-wrap: anywhere;
}
.voice-reply-card {
    display: none;
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(224, 192, 126, 0.22);
    border-left: 2px solid rgba(224, 192, 126, 0.75);
    border-radius: 6px 16px 16px 16px;
}
.voice-reply-card.visible { display: block; }
.voice-reply-label {
    margin-bottom: 6px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #e0c07e;
}
.voice-reply-text { font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); overflow-wrap: anywhere; }
.voice-reply-text a { color: var(--color-gold-light); text-decoration: underline; text-underline-offset: 2px; }
.voice-reply-card .chat-actions { justify-content: center; margin-top: 10px; }
.voice-footer { display: flex; justify-content: center; padding: 8px 16px 14px; flex-shrink: 0; }
.voice-interrupt-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.12);
    color: #f87171;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
}
.voice-interrupt-btn svg { width: 14px; height: 14px; fill: #f87171; }
.voice-interrupt-btn:disabled { opacity: 0.35; }
@media (max-height: 640px) {
    .voice-body { gap: 10px; padding-top: 12px; }
    .voice-orb-container { width: 104px; height: 104px; }
    .voice-orb-btn { width: 72px; height: 72px; }
    .voice-orb-btn svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .vor, .voice-orb-btn.listening, .voice-waveform.active span { animation: none; }
}


/* ##########################################################################
   POLISH (Oct 2026)
   ########################################################################## */

/* Photos arrive with a soft fade, as on the desktop (js/phone.js marks each one once it is decoded;
   without the script nothing is hidden) */
#lay-phone.sv-reveal img.amenity-img:not(.is-in),
#lay-phone.sv-reveal img.residence-img:not(.is-in),
#lay-phone.sv-reveal img.gallery-img:not(.is-in) {
    opacity: 0;
}
#lay-phone.sv-reveal img.amenity-img.is-in {
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.4s ease;
}
#lay-phone.sv-reveal img.residence-img.is-in,
#lay-phone.sv-reveal img.gallery-img.is-in {
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The explorer's panels fade in when chosen, like the green-feature panels */
.tab-pane.active {
    animation: ecoFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    #lay-phone.sv-reveal img.amenity-img.is-in { transition: transform 0.4s ease; }
    #lay-phone.sv-reveal img.residence-img.is-in,
    #lay-phone.sv-reveal img.gallery-img.is-in { transition: none; }
    .tab-pane.active { animation: none; }
}

/* ==========================================================================
   Request form: "Request Submitted" (Oct 2026)
   After a successful send the card's heading and form give way to this panel,
   at the same card size, with the brochure download below.
   ========================================================================== */
.booking-form-suite.is-done { display: flex; flex-direction: column; justify-content: center; }
.inquiry-success-box {
    flex-direction: column;
    align-items: center;
    padding: 14px 6px 6px;
    animation: fadeInSuccess 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.inquiry-success-box .success-icon-ring {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    background: radial-gradient(circle at 50% 35%, rgba(224, 192, 126, 0.28), rgba(224, 192, 126, 0.06) 70%);
    border: 1px solid rgba(224, 192, 126, 0.75);
    box-shadow: 0 0 0 7px rgba(224, 192, 126, 0.08), 0 0 24px rgba(224, 192, 126, 0.28);
}
.inquiry-success-box .success-icon-ring svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #f3dfae;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    animation: requestTick 0.6s 0.25s ease-out forwards;
}
@keyframes requestTick { to { stroke-dashoffset: 0; } }
.inquiry-success-box .success-kicker { display: block; margin: 0 0 6px; }
.inquiry-success-box .success-title { font-size: 1.45rem; margin: 0 0 8px; outline: none; }
.inquiry-success-box .success-desc { font-size: 0.88rem; max-width: 19rem; margin: 0 auto 20px; }
.inquiry-success-box .request-brochure-btn { text-decoration: none; margin-top: 0; }
.request-dl-ico {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.inquiry-success-box .request-brochure-note {
    margin: 10px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.inquiry-success-box .btn-success-reset { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
    .inquiry-success-box, .inquiry-success-box .success-icon-ring svg { animation: none; stroke-dashoffset: 0; }
}

/* About the Developer (contact card, Oct 2026). data-pending = shown but not clickable (no address yet) */
.compact-dev-link .coords-dev-arrow { margin-left: 4px; opacity: 0.75; }
.compact-dev-link[data-pending] { pointer-events: none; cursor: default; }

/* Developer logo under the credits card (Oct 2026): opens the Estate Buildcon website */
.luxury-mobile-footer .dev-logo-link {
    display: block;
    width: 140px;
    margin: 0 auto 22px;
    border-radius: 4px;
    line-height: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.25s ease;
}
.luxury-mobile-footer .dev-logo-link:active { transform: scale(0.97); }
.luxury-mobile-footer .dev-logo-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

/* Enquiry form checks (Oct 2026, js/contact-checks.js): a field with a mistake, and the "Did you mean …?" buttons */
.luxury-form-control[aria-invalid="true"] {
    border-color: rgba(224, 108, 117, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(224, 108, 117, 0.4) !important;
}
.form-feedback-phone .form-feedback-btn {
    display: inline-block;
    margin: 8px 4px 0;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    -webkit-tap-highlight-color: transparent;
}
.form-feedback-phone .form-feedback-btn:active { background: rgba(224, 192, 126, 0.16); }

/* ==========================================================================
   Request form: "couldn't send" panel (Oct 2026)
   Shown in place of the heading and form when a request can't be sent (no
   connection, server or email trouble): our phone numbers and email, the
   brochure, and "Try Again". Same look as "Request Submitted".
   ========================================================================== */
.inquiry-failed-box .success-icon-ring { width: 54px; height: 54px; margin-bottom: 14px; }
.inquiry-failed-box .success-icon-ring svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.7;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
}
.inquiry-failed-box .success-title { text-wrap: balance; }
.inquiry-failed-box .success-desc { margin-bottom: 16px; }
.request-contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0 0 16px;
}
.request-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(224, 192, 126, 0.45);
    border-radius: var(--border-radius-sm);
    background: rgba(255, 255, 255, 0.04);
    color: #f3dfae;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.request-contact:active { background: rgba(224, 192, 126, 0.16); }
.request-contact svg {
    width: 17px;
    height: 17px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.inquiry-success-box .request-brochure-size {
    margin: 8px 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}
.request-brochure-size[hidden],
.request-brochure-note[hidden] { display: none; }

/* "*Isometric view shown for EVEN floors." under the floor plan (Oct 2026): the same small italic
   as "*All areas in Sq. Ft." under the table */
.iso-figure { width: 100%; }
.iso-floor-note {
  margin: 6px 0 0;
  text-align: right;
  font-size: 0.6rem;
  font-style: italic;
  line-height: 1.4;
  text-wrap: balance;
  color: var(--color-text-muted);
}