/* ═══════════════════════════════════════════════════════════
   VARIABLES — Design Tokens & Color System
   The complete Unity Square palette and typography config.
   Edit these to change the entire look of the site.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Earth Tone Scale (sage green palette) ── */
    --earth-900: #2A3326;
    --earth-800: #354030;
    --earth-700: #404E3B;
    --earth-600: #5A6B54;
    --earth-500: #6C8480;
    --earth-400: #7B9669;
    --earth-300: #9DB38E;
    --earth-200: #BAC8B1;
    --earth-100: #D4DED0;
    --earth-50:  #E6E6E6;
    --earth-25:  #F0F2EE;
    --earth-0:   #F7F8F6;

    /* ── Green Accent Scale ── */
    --gold-700: #3E5435;
    --gold-600: #4A6342;
    --gold-500: #5A7A4E;
    --gold-400: #7B9669;
    --gold-300: #93AC80;
    --gold-200: #BAC8B1;
    --gold-100: #DDE5D8;

    /* ── Sage Green Scale ── */
    --sage-600: #404E3B;
    --sage-500: #5A6B54;
    --sage-400: #6B8F5E;
    --sage-300: #7B9669;
    --sage-200: #9DB38E;

    /* ── Suite Type Colors (sage green palette) ── */
    --salon-fill: #7B9669;
    --salon-top: #93AC80;
    --salon-side: #5A6B54;
    --salon-hover: #BAC8B1;

    --office-fill: #6C8480;
    --office-top: #85A09C;
    --office-side: #4E6360;
    --office-hover: #A8BDB9;

    --deluxe-fill: #8FA055;
    --deluxe-top: #A8B870;
    --deluxe-side: #6B7A40;
    --deluxe-hover: #C4D0A0;

    --barber-fill: #404E3B;
    --barber-top: #5A6B54;
    --barber-side: #2A3326;
    --barber-hover: #7B9669;

    --beautician-fill: #6C8480;
    --beautician-top: #7B9669;
    --beautician-side: #5A6B54;
    --beautician-hover: #9DB38E;

    /* ── Typography (sans-serif primary, serif for accents) ── */
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Warm Accent ── */
    --copper-500: #7B9669;
    --copper-400: #93AC80;
    --copper-300: #BAC8B1;

    /* ── Border Radius Scale (larger = more modern) ── */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-full: 50px;

    /* ── Spacing Scale ── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 72px;
    --space-4xl: 120px;

    /* ── Transitions ── */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.22, 0.68, 0, 1.2);
}
/* ═══════════════════════════════════════════════════════════
   BASE — Reset, Typography & Shared Elements
   Modern design system: clean sans-serif, generous spacing,
   grain texture, glass effects.
   ═══════════════════════════════════════════════════════════ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    color: var(--earth-600);
    background: var(--earth-0);
    overflow-x: hidden;
    line-height: 1.7;
    font-weight: 400;
}

/* ── Animations ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes subtleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.fade-up {
    animation: fadeUp 0.9s var(--ease-out-expo) both;
}

/* ── Grain Texture Overlay (modern depth) ── */
.un-section-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* ── Shared Typography ── */
.un-tag {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 3px;
    color: #FFFFFF;
    text-transform: uppercase;
    display: inline-block;
    padding: 6px 16px;
    background: rgba(90, 122, 78, 0.08);
    border-radius: var(--radius-full);
    border: 1px solid rgba(90, 122, 78, 0.12);
    font-weight: 500;
}

.un-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 600;
    color: var(--gold-100);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.un-title em {
    font-weight: 700;
    color: var(--gold-300);
    font-style: normal;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-200));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* On light sections, use darker gradient for em */
.un-section-alt .un-title em {
    background: linear-gradient(135deg, var(--gold-600), var(--gold-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.un-desc {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--earth-300);
    max-width: 580px;
    line-height: 1.8;
    font-weight: 300;
}

.un-divider {
    width: 48px;
    height: 3px;
    background: var(--gold-500);
    border-radius: 3px;
}

/* ── Section Layouts ── */
.un-section {
    padding: 120px 32px;
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.un-section-dark {
    background: var(--earth-800);
    position: relative;
}

.un-section-alt {
    background: var(--earth-0);
    position: relative;
}

/* Fix text colors on light sections */
.un-section-alt .un-desc {
    color: var(--earth-400);
}

.un-section-alt .un-tag {
    background: var(--earth-900);
    border-color: var(--earth-900);
    color: #FFFFFF;
}

/* ── Buttons ── */
.un-btn {
    background: var(--gold-500);
    color: #FFF;
    border: none;
    padding: 16px 40px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--ease-out-expo);
    box-shadow: 0 4px 24px rgba(90, 122, 78, 0.2);
    position: relative;
    overflow: hidden;
}

.un-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(90, 122, 78, 0.3);
    background: var(--gold-400);
}

.un-btn:active {
    transform: translateY(0);
}

/* ── Button Shimmer Effect ── */
.un-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    transition: none;
    pointer-events: none;
}

.un-btn:hover::after {
    animation: btnShimmer 0.6s ease forwards;
}

@keyframes btnShimmer {
    from { left: -100%; }
    to   { left: 120%; }
}

.un-btn-outline {
    background: transparent;
    color: var(--gold-400);
    border: 1.5px solid rgba(90, 122, 78, 0.3);
    padding: 15px 36px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--ease-out-expo);
}

.un-btn-outline:hover {
    background: rgba(90, 122, 78, 0.08);
    border-color: var(--gold-400);
    color: var(--gold-100);
    transform: translateY(-2px);
}

/* ── Scroll Reveal ── */
.un-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.un-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Staggered Reveal Delays ── */
.un-reveal-d1 { transition-delay: 0.05s; }
.un-reveal-d2 { transition-delay: 0.1s; }
.un-reveal-d3 { transition-delay: 0.15s; }
.un-reveal-d4 { transition-delay: 0.2s; }
.un-reveal-d5 { transition-delay: 0.25s; }
.un-reveal-d6 { transition-delay: 0.3s; }
.un-reveal-d7 { transition-delay: 0.35s; }
.un-reveal-d8 { transition-delay: 0.4s; }

/* ── Skip to Content Link ── */
.un-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 100000;
    padding: 12px 24px;
    background: var(--gold-500);
    color: #FFF;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: top 0.2s ease;
}

.un-skip-link:focus {
    top: 12px;
}

/* ── Screen Reader Only ── */
.un-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Global Focus Styles ── */
:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ── Toast Notifications ── */
.un-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.un-toast {
    pointer-events: auto;
    padding: 16px 22px;
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    max-width: 380px;
    animation: slideUp 0.4s var(--ease-out-expo);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.un-toast-error {
    background: rgba(70, 20, 20, 0.9);
    color: #F5B8B8;
    border: 1px solid rgba(192, 57, 43, 0.25);
}

.un-toast-success {
    background: rgba(20, 50, 20, 0.9);
    color: #B8F5B8;
    border: 1px solid rgba(107, 143, 94, 0.25);
}

/* ── SVG Icon Spin ── */
@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.un-icon-spin {
    display: inline-block;
    animation: iconSpin 1s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   SKELETON LOADING STATES
   ═══════════════════════════════════════════════════════════ */

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

.un-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.un-skeleton-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.un-skeleton-iso {
    height: 108px;
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}

.un-skeleton-badge {
    height: 20px;
    width: 80px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.un-skeleton-title {
    height: 22px;
    width: 60%;
    border-radius: 4px;
    margin-bottom: 8px;
}

.un-skeleton-meta {
    height: 14px;
    width: 40%;
    border-radius: 4px;
    margin-bottom: 20px;
}

.un-skeleton-price {
    height: 30px;
    width: 50%;
    border-radius: 4px;
}

/* Light section skeletons */
.un-section-alt .un-skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.un-section-alt .un-skeleton-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}


/* ═══════════════════════════════════════════════════════════
   ENHANCED SCROLL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

.un-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.un-reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

.un-reveal-slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.un-reveal-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.un-reveal-slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.un-reveal-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}


/* ═══════════════════════════════════════════════════════════
   EXIT-INTENT POPUP
   ═══════════════════════════════════════════════════════════ */

.un-exit-popup {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.3s ease;
}

.un-exit-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.un-exit-popup-card {
    position: relative;
    z-index: 2;
    background: var(--earth-800);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    max-width: 440px;
    width: 100%;
    box-shadow: 0 48px 120px rgba(0, 0, 0, 0.6);
    animation: slideUp 0.5s var(--ease-out-expo);
}

.un-exit-popup-content {
    padding: 48px 40px;
    text-align: center;
}

.un-exit-popup-icon {
    font-size: 40px;
    color: #FFD700;
    margin-bottom: 16px;
}

.un-exit-popup-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.un-exit-popup-desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--earth-300);
    line-height: 1.7;
    margin-bottom: 24px;
    font-weight: 300;
}

.un-exit-popup-dismiss {
    background: none;
    border: none;
    color: var(--earth-500);
    font-family: var(--font-body);
    font-size: 12px;
    cursor: pointer;
    margin-top: 16px;
    padding: 8px;
    transition: color 0.2s;
}

.un-exit-popup-dismiss:hover {
    color: var(--earth-300);
}


/* ═══════════════════════════════════════════════════════════
   STICKY TOUR CTA BAR
   ═══════════════════════════════════════════════════════════ */

.un-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(42, 51, 38, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(90, 122, 78, 0.15);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s var(--ease-out-expo);
}

.un-sticky-bar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.un-sticky-bar-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--earth-200);
    font-weight: 400;
}

.un-sticky-bar-btn {
    padding: 10px 28px;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .un-sticky-bar-text { display: none; }
    .un-sticky-bar-btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   INLINE FORM VALIDATION
   ═══════════════════════════════════════════════════════════ */

.un-field-error {
    font-family: var(--font-body);
    font-size: 12px;
    color: #e74c3c;
    margin-top: 4px;
    animation: slideUp 0.3s var(--ease-out-expo);
}

.un-input-valid {
    border-color: var(--sage-400) !important;
}

.un-input-invalid {
    border-color: #c0392b !important;
}


/* ── Print Styles ── */
@media print {
    .un-nav, .un-hamburger, .un-mobile-menu, .un-hero-buttons,
    .un-filter-row, .un-toast-container, #quoteModal,
    .un-map-container iframe { display: none !important; }

    body { background: #FFF; color: #000; }

    .un-section-dark, .un-section-alt {
        background: #FFF !important;
    }

    .un-title, .un-card-name, .un-contact-val {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }

    .un-desc, .un-card-meta, .un-contact-label {
        color: #444 !important;
    }

    .un-card {
        background: #FFF !important;
        border: 1px solid #CCC !important;
        break-inside: avoid;
    }

    .un-hero-fp {
        min-height: auto;
        background: #FFF !important;
        padding: 24px !important;
    }
}
/* ═══════════════════════════════════════════════════════════
   NAVIGATION — Modern glass nav, clean links
   ═══════════════════════════════════════════════════════════ */

/* ── Desktop Nav ── */
.un-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(42, 51, 38, 1);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-bottom: 1px solid rgba(90, 122, 78, 0.06);
    transition: all 0.5s var(--ease-out-expo);
}

/* ── Scrolled State ── */
.un-nav.scrolled {
    background: rgba(42, 51, 38, 0.95);
    backdrop-filter: blur(48px) saturate(1.5);
    -webkit-backdrop-filter: blur(48px) saturate(1.5);
    border-bottom: 1px solid rgba(90, 122, 78, 0.1);
    box-shadow: 0 4px 48px rgba(0, 0, 0, 0.3);
}

/* ── Scroll Progress Bar ── */
.un-scroll-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #B8860B, #D4A830, #FFD700);
    box-shadow: 0 0 8px rgba(212, 168, 48, 0.6), 0 0 20px rgba(255, 215, 0, 0.3);
    transition: width 0.05s linear;
    z-index: 10;
    border-radius: 0 1px 1px 0;
}

.un-nav-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
}

.un-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.un-logo-icon {
    flex-shrink: 0;
}

.un-logo-main {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--gold-100);
    letter-spacing: 4px;
    line-height: 1;
}

.un-logo-sub {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 4px;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-top: 2px;
    font-weight: 400;
}

.un-nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
    align-items: center;
}

.un-nav-link {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    background: none;
    border: none;
    padding: 6px 0;
    position: relative;
    font-weight: 400;
}

.un-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #FFD700;
    transition: width 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
    border-radius: 2px;
    box-shadow: none;
}

.un-nav-link:hover,
.un-nav-link.active {
    color: #FFD700;
    text-shadow:
        0 0 8px rgba(255, 215, 0, 0.6),
        0 0 20px rgba(212, 175, 55, 0.3),
        0 0 40px rgba(212, 175, 55, 0.15);
}

.un-nav-link:hover::after,
.un-nav-link.active::after {
    width: 100%;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6), 0 0 16px rgba(212, 175, 55, 0.3);
}

/* ── Sign In Button ── */
.un-nav-signin {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--earth-900);
    background: var(--gold-400);
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 20px;
    cursor: pointer;
    transition: all 0.35s var(--ease-out-expo);
    font-weight: 600;
}

.un-nav-signin:hover {
    background: #FFD700;
    transform: translateY(-1px);
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.6),
        0 0 25px rgba(212, 175, 55, 0.35),
        0 0 50px rgba(212, 175, 55, 0.15);
}

/* ── Apply Now Button ── */
.un-nav-apply {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    background: transparent;
    border: 1.5px solid #FFFFFF;
    border-radius: var(--radius-sm);
    padding: 7px 18px;
    cursor: pointer;
    transition: all 0.35s var(--ease-out-expo);
    font-weight: 600;
}

.un-nav-apply:hover {
    background: #FFD700;
    border-color: #FFD700;
    color: var(--earth-900);
    transform: translateY(-1px);
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.6),
        0 0 25px rgba(212, 175, 55, 0.35),
        0 0 50px rgba(212, 175, 55, 0.15);
}

/* ── Mobile Apply ── */
.un-mobile-apply {
    margin-top: 16px;
    background: transparent;
    border: 2px solid var(--gold-500);
    border-radius: var(--radius-md);
    padding: 14px 40px;
    font-size: 18px;
    color: var(--gold-400);
    font-weight: 600;
}

/* ── Mobile Sign In ── */
.un-mobile-signin {
    margin-top: 16px;
    background: var(--gold-500);
    border: none;
    border-radius: var(--radius-md);
    padding: 14px 40px;
    font-size: 18px;
    color: #FFF;
    font-weight: 600;
}

/* ── Hamburger Button ── */
.un-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.un-hamburger span {
    width: 22px;
    height: 2px;
    background: var(--gold-100);
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* ── Hamburger → X Animation ── */
.un-hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.un-hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.un-hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Mobile Menu Overlay ── */
.un-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(22, 18, 16, 0.98);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
    pointer-events: none;
}

.un-mobile-menu.open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

.un-mobile-link {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--earth-100);
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: 1px;
    transition: color 0.3s ease, transform 0.3s var(--ease-out-expo);
    opacity: 0;
    transform: translateY(20px);
}

.un-mobile-menu.open .un-mobile-link {
    opacity: 1;
    transform: translateY(0);
    transition: color 0.3s ease, transform 0.4s var(--ease-out-expo), opacity 0.4s ease;
}

/* Staggered entrance for menu items */
.un-mobile-menu.open .un-mobile-link:nth-child(2) { transition-delay: 0.03s; }
.un-mobile-menu.open .un-mobile-link:nth-child(3) { transition-delay: 0.06s; }
.un-mobile-menu.open .un-mobile-link:nth-child(4) { transition-delay: 0.09s; }
.un-mobile-menu.open .un-mobile-link:nth-child(5) { transition-delay: 0.12s; }
.un-mobile-menu.open .un-mobile-link:nth-child(6) { transition-delay: 0.15s; }
.un-mobile-menu.open .un-mobile-link:nth-child(7) { transition-delay: 0.18s; }
.un-mobile-menu.open .un-mobile-link:nth-child(8) { transition-delay: 0.21s; }
.un-mobile-menu.open .un-mobile-link:nth-child(9) { transition-delay: 0.24s; }
.un-mobile-menu.open .un-mobile-link:nth-child(10) { transition-delay: 0.27s; }

.un-mobile-link:hover {
    color: var(--gold-400);
    transform: translateX(4px);
}

.un-mobile-close {
    position: absolute;
    top: 20px;
    right: 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--earth-300);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.un-mobile-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFF;
}
/* ═══════════════════════════════════════════════════════════
   3D SNOW — Green & gold falling particles across full page
   ═══════════════════════════════════════════════════════════ */

.un-snow {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
    perspective: 800px;
    transform-style: preserve-3d;
}

.un-flake {
    position: absolute;
    width: var(--s);
    height: var(--s);
    left: var(--x);
    top: -10px;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: snowFall var(--d) linear infinite;
    animation-delay: var(--del);
}

.un-flake-green {
    background: radial-gradient(circle, #B8D4A8 0%, #93AC80 40%, #7B9669 100%);
    box-shadow:
        0 0 8px rgba(123, 150, 105, 0.8),
        0 0 18px rgba(123, 150, 105, 0.5),
        0 0 35px rgba(123, 150, 105, 0.3),
        0 0 60px rgba(147, 172, 128, 0.15);
}

.un-flake-gold {
    background: radial-gradient(circle, #FFE44D 0%, #FFD700 40%, #D4AF37 100%);
    box-shadow:
        0 0 8px rgba(255, 215, 0, 0.8),
        0 0 18px rgba(212, 175, 55, 0.5),
        0 0 35px rgba(212, 175, 55, 0.3),
        0 0 60px rgba(255, 215, 0, 0.15);
}

@keyframes snowFall {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, var(--z)) scale(0.4);
    }
    5% {
        opacity: 1;
        transform: translate3d(calc(var(--drift) * 0.1), 5vh, var(--z)) scale(1);
    }
    25% {
        opacity: 0.9;
        transform: translate3d(calc(var(--drift) * 0.5), 25vh, var(--z)) scale(0.95);
    }
    50% {
        opacity: 0.7;
        transform: translate3d(var(--drift), 50vh, var(--z)) scale(0.85);
    }
    75% {
        opacity: 0.45;
        transform: translate3d(calc(var(--drift) * 0.7), 75vh, var(--z)) scale(0.7);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(var(--drift) * 0.4), 105vh, var(--z)) scale(0.5);
    }
}

/* Larger flakes shimmer */
.un-flake-gold[style*="--s:5px"],
.un-flake-gold[style*="--s:6px"] {
    animation: snowFall var(--d) linear infinite, snowShimmer 2s ease-in-out infinite;
    animation-delay: var(--del), 0s;
}

.un-flake-green[style*="--s:5px"],
.un-flake-green[style*="--s:6px"] {
    animation: snowFall var(--d) linear infinite, snowShimmer 3s ease-in-out infinite;
    animation-delay: var(--del), 0s;
}

@keyframes snowShimmer {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 3px currentColor); }
    50%      { filter: brightness(1.8) drop-shadow(0 0 8px currentColor); }
}

/* Accessibility — respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .un-snow { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   HERO — Modern dark hero with ambient glow & dot grid
   ═══════════════════════════════════════════════════════════ */

/* ── Hero Background Video ── */
.un-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.un-hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(42, 51, 38, 0.85) 0%, rgba(42, 51, 38, 0.6) 40%, rgba(42, 51, 38, 0.85) 100%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
    .un-hero-video { display: none; }
}

/* ── Hero Container ── */
.un-hero-fp {
    min-height: 100vh;
    background: var(--earth-900);
    padding: 110px 24px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* ── Ambient gradient blobs ── */
.un-hero-fp::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px circle at 25% 25%, rgba(90, 122, 78, 0.05) 0%, transparent 60%),
        radial-gradient(500px circle at 75% 65%, rgba(90, 122, 78, 0.03) 0%, transparent 50%),
        radial-gradient(800px circle at 50% 90%, rgba(90, 122, 78, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ── Modern dot grid (replaces line grid) ── */
.un-hero-fp-grid {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image: radial-gradient(rgba(90, 122, 78, 0.15) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════════════════════════
   3D OVERLAY — Floating orbs, particles & light rays
   ══════════════════════════════════════════════════════════ */

.un-3d-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    perspective: 1200px;
}

/* ── Floating Gradient Orbs ── */
.un-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    will-change: transform, opacity;
    animation: orbFloat linear infinite, orbFade ease-in-out infinite;
}

.un-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(90, 122, 78, 0.18) 0%, rgba(90, 122, 78, 0) 70%);
    top: 10%;
    left: -5%;
    animation-duration: 20s, 8s;
    animation-delay: 0s, 0s;
}

.un-orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(196, 125, 78, 0.15) 0%, rgba(196, 125, 78, 0) 70%);
    top: 60%;
    right: -8%;
    animation-duration: 25s, 10s;
    animation-delay: -5s, -3s;
}

.un-orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(166, 138, 99, 0.12) 0%, rgba(166, 138, 99, 0) 70%);
    bottom: 15%;
    left: 30%;
    animation-duration: 22s, 12s;
    animation-delay: -8s, -2s;
}

.un-orb-4 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(212, 168, 48, 0.14) 0%, rgba(212, 168, 48, 0) 70%);
    top: 25%;
    right: 20%;
    animation-duration: 18s, 9s;
    animation-delay: -12s, -4s;
}

@keyframes orbFloat {
    0%   { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
    25%  { transform: translate3d(60px, -40px, 30px) rotateX(5deg) rotateY(-5deg); }
    50%  { transform: translate3d(-30px, 50px, -20px) rotateX(-3deg) rotateY(8deg); }
    75%  { transform: translate3d(-50px, -30px, 40px) rotateX(7deg) rotateY(-3deg); }
    100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
}

@keyframes orbFade {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* ── Ambient Light Rays ── */
.un-ray {
    position: absolute;
    width: 2px;
    background: linear-gradient(180deg, rgba(90, 122, 78, 0.15) 0%, transparent 100%);
    opacity: 0;
    animation: rayPulse ease-in-out infinite;
    transform-origin: top center;
}

.un-ray-1 {
    height: 60%;
    top: -5%;
    left: 25%;
    transform: rotate(-15deg);
    animation-duration: 6s;
    animation-delay: 0s;
}

.un-ray-2 {
    height: 50%;
    top: -5%;
    right: 30%;
    transform: rotate(12deg);
    animation-duration: 8s;
    animation-delay: -3s;
}

@keyframes rayPulse {
    0%, 100% { opacity: 0; transform: rotate(var(--ray-rot, 0deg)) scaleY(0.6); }
    50%      { opacity: 0.4; transform: rotate(var(--ray-rot, 0deg)) scaleY(1); }
}

.un-ray-1 { --ray-rot: -15deg; }
.un-ray-2 { --ray-rot: 12deg; }

/* ── Drifting Particles ── */
.un-particles {
    position: absolute;
    inset: 0;
}

.un-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--gold-500);
    border-radius: 50%;
    left: var(--x);
    bottom: -10px;
    opacity: 0;
    animation: particleDrift var(--d) ease-in-out infinite;
    animation-delay: var(--del);
    box-shadow: 0 0 6px rgba(90, 122, 78, 0.4);
}

.un-particle:nth-child(odd) {
    width: 2px;
    height: 2px;
    background: var(--gold-400);
}

.un-particle:nth-child(3n) {
    width: 4px;
    height: 4px;
    box-shadow: 0 0 10px rgba(90, 122, 78, 0.5);
}

@keyframes particleDrift {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.5);
    }
    10% {
        opacity: 0.7;
        transform: translate3d(10px, -60px, 20px) scale(1);
    }
    50% {
        opacity: 0.4;
        transform: translate3d(-20px, -50vh, 10px) scale(0.8);
    }
    90% {
        opacity: 0.1;
        transform: translate3d(15px, -90vh, -10px) scale(0.4);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, -100vh, 0) scale(0.2);
    }
}

/* ── Floorplan 3D Tilt Effect ── */
.un-floorplan-container {
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

.un-floorplan-container.un-tilt-active {
    will-change: transform;
    transition: none;
}

/* ── Reduce motion for accessibility ── */
@media (prefers-reduced-motion: reduce) {
    .un-orb,
    .un-ray,
    .un-particle {
        animation: none !important;
        opacity: 0 !important;
    }
    .un-floorplan-container {
        transform: none !important;
    }
}

/* ── Hero Header ── */
.un-hero-header {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 36px;
}

.un-hero-header .un-tag { margin-bottom: 16px; }
.un-hero-header .un-title { margin-bottom: 16px; }


/* ══════════════════════════════════════════════════════════
   INTERACTIVE FLOOR PLAN
   ══════════════════════════════════════════════════════════ */

/* ── Floor Plan Container ── */
.un-floorplan-container {
    background: var(--earth-900);
    border-radius: var(--radius-2xl);
    padding: 32px 20px;
    border: 1px solid rgba(90, 122, 78, 0.15);
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: visible;
    position: relative;
    z-index: 2;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(90, 122, 78, 0.1) inset;
}

.un-fp-svg {
    width: 100%;
    max-width: 960px;
    display: block;
    margin: 0 auto;
    overflow: visible;
}

/* ── Suite Groups — Base State ── */
.un-fp-suite {
    cursor: pointer;
    transition: transform 0.35s var(--ease-out-expo),
                filter 0.35s ease;
    transform-origin: center center;
    will-change: transform, filter;
}

.un-fp-suite .un-fp-top,
.un-fp-suite .un-fp-right,
.un-fp-suite .un-fp-front {
    transition: fill 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
}

.un-fp-suite .un-fp-label-price {
    transition: opacity 0.25s ease;
}

/* ── Suite Groups — Hover State ── */
.un-fp-suite:not(.un-fp-leased):hover {
    transform: translate(0, -5px);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
    z-index: 10;
}

.un-fp-suite:not(.un-fp-leased):hover .un-fp-top {
    fill: var(--fp-hover);
}

.un-fp-suite:not(.un-fp-leased):hover .un-fp-right {
    fill: var(--fp-hover);
    opacity: 0.7;
}

.un-fp-suite:not(.un-fp-leased):hover .un-fp-label-price {
    opacity: 0.9;
}

.un-fp-suite:not(.un-fp-leased):hover .un-fp-label-sqft {
    opacity: 0;
}

/* ── Suite Groups — Selected State ── */
.un-fp-selected {
    transform: translate(0, -7px) !important;
    filter: drop-shadow(0 0 18px var(--fp-glow)) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45)) !important;
}

.un-fp-selected .un-fp-top {
    fill: var(--fp-hover) !important;
    stroke: var(--gold-100) !important;
    stroke-width: 2 !important;
}

.un-fp-selected .un-fp-right {
    fill: var(--fp-hover) !important;
    opacity: 0.75;
}

.un-fp-selected .un-fp-label-price {
    opacity: 1 !important;
}

.un-fp-selected .un-fp-label-sqft {
    opacity: 0 !important;
}

/* ── Leased Suites ── */
.un-fp-leased {
    opacity: 0.3;
    cursor: pointer;
}

.un-fp-leased:hover {
    opacity: 0.5;
    transform: translate(0, -2px);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
}

/* ── Common Areas ── */
.un-fp-common { pointer-events: none; }
.un-fp-label-common { pointer-events: none; }


/* ══════════════════════════════════════════════════════════
   TOOLTIP — Clean floating card
   ══════════════════════════════════════════════════════════ */

.un-fp-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100;
    background: linear-gradient(145deg, rgba(42, 31, 20, 0.96), rgba(26, 19, 16, 0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 12px;
    padding: 16px 18px;
    min-width: 170px;
    max-width: 220px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(184, 134, 11, 0.08) inset;
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.un-fp-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.un-fp-tooltip-badge {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-bottom: 10px;
    font-weight: 500;
}

.un-fp-tooltip-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--gold-100);
    margin-bottom: 2px;
    line-height: 1.2;
}

.un-fp-tooltip-sqft {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--earth-300);
    margin-bottom: 10px;
}

.un-fp-tooltip-price {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--gold-400);
    line-height: 1;
}

.un-fp-tooltip-price span {
    font-size: 11px;
    color: var(--earth-400);
    font-family: var(--font-body);
    font-weight: 400;
}

.un-fp-tooltip-leased {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--earth-400);
    text-transform: uppercase;
    padding: 6px 0 2px;
    border-top: 1px solid rgba(184, 134, 11, 0.1);
    margin-top: 6px;
}

.un-fp-tooltip-cta {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--gold-500);
    margin-top: 8px;
    letter-spacing: 0.5px;
    padding-top: 8px;
    border-top: 1px solid rgba(184, 134, 11, 0.1);
}


/* ══════════════════════════════════════════════════════════
   LEGEND, STATS, CTA BUTTONS
   ══════════════════════════════════════════════════════════ */

.un-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 24px 0;
    position: relative;
    z-index: 2;
}

.un-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--earth-400);
    font-weight: 400;
}

.un-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.un-stat-row {
    display: flex;
    gap: 48px;
    justify-content: center;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(90, 122, 78, 0.1);
    position: relative;
    z-index: 2;
}

.un-stat-num {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    color: var(--gold-400);
    line-height: 1;
    letter-spacing: -0.02em;
}

.un-stat-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--earth-400);
    margin-top: 6px;
    font-weight: 400;
}

.un-hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}


/* ══════════════════════════════════════════════════════════
   SCROLL INDICATOR
   ══════════════════════════════════════════════════════════ */

.un-scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: heroBounce 2.5s ease-in-out infinite;
    opacity: 0.5;
    transition: opacity 0.4s ease;
    cursor: pointer;
}

.un-scroll-indicator:hover { opacity: 1; }

.un-scroll-indicator-text {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--earth-400);
    font-weight: 400;
}

.un-scroll-indicator svg {
    color: var(--gold-500);
}

@keyframes heroBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

.un-scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ── Dark Video Hero Overrides ── */
.un-hero-fp .un-hero-fp-grid {
    opacity: 0.06;
}

.un-hero-fp .un-title {
    color: #FFF;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.un-hero-fp .un-title em {
    background: linear-gradient(135deg, #FFD700, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.un-hero-fp .un-desc {
    color: var(--earth-200);
}

.un-hero-fp .un-tag {
    color: #FFFFFF;
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.3);
}

.un-hero-fp .un-stat-num {
    color: #FFD700;
}

.un-hero-fp .un-stat-label {
    color: var(--earth-300);
}

.un-hero-fp .un-stat-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.un-hero-fp .un-scroll-indicator-text {
    color: var(--earth-300);
}

.un-hero-fp .un-btn-outline {
    color: #FFF;
    border-color: rgba(255, 255, 255, 0.3);
}

.un-hero-fp .un-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFF;
    border-color: rgba(255, 255, 255, 0.5);
}
/* ═══════════════════════════════════════════════════════════
   ABOUT — Clean two-column layout with visual card
   ═══════════════════════════════════════════════════════════ */

.un-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 64px;
}

/* ── Visual Card (modern gradient) ── */
.un-about-visual {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: linear-gradient(160deg, var(--earth-600) 0%, var(--earth-700) 50%, var(--earth-800) 100%);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15);
    will-change: transform;
}

.un-about-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.4;
    transition: opacity 0.6s ease;
}

.un-about-photo[src*="firebase"] {
    opacity: 0.6;
}

.un-about-visual-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 40px;
    text-align: center;
}

.un-about-visual-ornament {
    font-size: 48px;
    color: rgba(90, 122, 78, 0.2);
    margin-bottom: 20px;
}

.un-about-visual-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--gold-100);
    line-height: 1.2;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.un-about-visual-title em {
    font-weight: 700;
    color: var(--gold-400);
    font-style: normal;
}

.un-about-visual-subtitle {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--earth-400);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
}

.un-about-visual-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 70%, rgba(90, 122, 78, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(90, 122, 78, 0.04) 0%, transparent 50%);
}

/* ── Feature Grid ── */
.un-about-feats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
}

.un-about-feat {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(90, 122, 78, 0.04);
    border: 1px solid rgba(90, 122, 78, 0.06);
    transition: all 0.3s ease;
}

.un-about-feat:hover {
    background: rgba(90, 122, 78, 0.07);
    border-color: rgba(90, 122, 78, 0.12);
}

.un-about-feat-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--gold-500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 11px;
    flex-shrink: 0;
}

.un-about-feat-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--earth-600);
    font-weight: 500;
    line-height: 1.3;
}
/* ═══════════════════════════════════════════════════════════
   SUITES — Modern glass cards with clean typography
   ═══════════════════════════════════════════════════════════ */

/* ── Filter Row ── */
.un-filter-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.un-filter-btn {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 10px 22px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(90, 122, 78, 0.15);
    background: rgba(255, 255, 255, 0.03);
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
    font-weight: 400;
}

.un-filter-btn.active,
.un-filter-btn:hover {
    background: var(--gold-500);
    color: #FFFFFF;
    border-color: var(--gold-500);
    font-weight: 600;
}

/* ── Card Grid ── */
.un-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* ── Individual Card (glass morphism) ── */
.un-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s var(--ease-out-expo);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.un-card:hover {
    transform: translateY(-6px);
    border-color: rgba(90, 122, 78, 0.2);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(90, 122, 78, 0.05) inset;
    background: rgba(255, 255, 255, 0.06);
}

/* ── Card Elements ── */
.un-card-dot {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.un-dot-avail {
    background: var(--sage-400);
    box-shadow: 0 0 8px rgba(107, 143, 94, 0.5);
}

.un-dot-leased {
    background: var(--earth-400);
}

/* ── 3D Isometric Preview ── */
.un-card-iso {
    background: rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-md);
    padding: 14px 10px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.un-card-iso svg {
    width: 100%;
    max-width: 200px;
    height: 80px;
}

/* ── Tier Badge (Silver / Gold / Platinum / Premium) ── */
.un-card-tier-badge {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-bottom: 8px;
    font-weight: 600;
}

.un-card-badge {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-bottom: 12px;
    font-weight: 500;
}

.un-badge-salon      { background: rgba(123,150,105,0.2); color: #fff; }
.un-badge-office     { background: rgba(108,132,128,0.2); color: #fff; }
.un-badge-deluxe     { background: rgba(143,160,85,0.2); color: #fff; }
.un-badge-barber     { background: rgba(64,78,59,0.2); color: #fff; }
.un-badge-beautician { background: rgba(108,132,128,0.2); color: #fff; }

.un-card-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: #FFF;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.un-card-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--earth-400);
    margin-bottom: 20px;
    font-weight: 300;
}

.un-card-price {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--gold-400);
    letter-spacing: -0.02em;
}

.un-card-price span {
    font-size: 13px;
    color: var(--earth-400);
    font-family: var(--font-body);
    font-weight: 400;
}

.un-card-starting {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--earth-300);
    margin-bottom: 2px;
}

.un-card-leased-label {
    position: absolute;
    bottom: 24px;
    right: 24px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--earth-500);
    text-transform: uppercase;
    font-weight: 400;
}

/* ── Light Section Overrides ── */
.un-section-alt .un-title {
    color: #1A1A1A;
}

.un-section-alt .un-title em {
    background: linear-gradient(135deg, var(--gold-600), var(--gold-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.un-section-alt .un-desc {
    color: #555555;
}

/* ── Glass Card Base (gradient glass + inset trim) ── */
.un-section-alt .un-card {
    background: linear-gradient(160deg, #2F3B2A 0%, var(--earth-900) 50%, #252E21 100%);
    border: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 36px 28px;
    box-shadow:
        0 24px 80px rgba(42, 51, 38, 0.3),
        inset 0 0 0 5px #000,
        inset 0 0 0 9px #FFFFFF;
    transition: all 0.4s var(--ease-out-expo);
}

.un-section-alt .un-card:hover {
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 0 0 5px #000,
        inset 0 0 0 9px #FFFFFF;
    background: linear-gradient(160deg, #354030 0%, var(--earth-800) 50%, #2F3B2A 100%);
}

/* ── Type-Colored Hover Glow (preserve inset trim) ── */
.un-section-alt .un-card-type-salon:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 30px rgba(123,150,105,0.15), inset 0 0 0 5px #000, inset 0 0 0 9px #FFFFFF;
}
.un-section-alt .un-card-type-office:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 30px rgba(108,132,128,0.15), inset 0 0 0 5px #000, inset 0 0 0 9px #FFFFFF;
}
.un-section-alt .un-card-type-deluxe:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 30px rgba(143,160,85,0.15), inset 0 0 0 5px #000, inset 0 0 0 9px #FFFFFF;
}
.un-section-alt .un-card-type-barber:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 30px rgba(64,78,59,0.2), inset 0 0 0 5px #000, inset 0 0 0 9px #FFFFFF;
}
.un-section-alt .un-card-type-beautician:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 30px rgba(108,132,128,0.15), inset 0 0 0 5px #000, inset 0 0 0 9px #FFFFFF;
}

/* ── Tinted Iso Preview Boxes ── */
.un-section-alt .un-card-iso {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
}
.un-card-type-salon .un-card-iso { background: rgba(123,150,105,0.08) !important; border-color: rgba(123,150,105,0.12) !important; }
.un-card-type-office .un-card-iso { background: rgba(108,132,128,0.08) !important; border-color: rgba(108,132,128,0.12) !important; }
.un-card-type-deluxe .un-card-iso { background: rgba(143,160,85,0.08) !important; border-color: rgba(143,160,85,0.12) !important; }
.un-card-type-barber .un-card-iso { background: rgba(64,78,59,0.1) !important; border-color: rgba(64,78,59,0.15) !important; }
.un-card-type-beautician .un-card-iso { background: rgba(108,132,128,0.08) !important; border-color: rgba(108,132,128,0.12) !important; }

.un-section-alt .un-card-name {
    color: #FFFFFF;
}

.un-section-alt .un-card-meta {
    color: var(--earth-300);
}

.un-section-alt .un-card-price {
    color: var(--gold-400);
}

.un-section-alt .un-card-price span {
    color: var(--earth-400);
}

.un-section-alt .un-filter-btn {
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    color: #1A1A1A;
}

.un-section-alt .un-filter-btn.active,
.un-section-alt .un-filter-btn:hover {
    background: var(--gold-500);
    color: #FFFFFF;
    border-color: var(--gold-500);
}

.un-section-alt .un-card-leased-label {
    color: var(--earth-500);
}

.un-section-alt .un-divider {
    background: var(--gold-500);
}
/* ═══════════════════════════════════════════════════════════
   AMENITIES — Clean card grid with modern hover effects
   ═══════════════════════════════════════════════════════════ */

.un-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 56px;
}

.un-amenity {
    display: flex;
    gap: 16px;
    padding: 22px 20px;
    border-radius: var(--radius-lg);
    background: #FFF;
    border: 1px solid var(--earth-50);
    transition: all 0.4s var(--ease-out-expo);
}

.un-amenity:hover {
    border-color: var(--earth-100);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
}

.un-amenity-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--earth-900);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    color: var(--gold-400);
}

.un-amenity-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--earth-800);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.un-amenity-desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--earth-400);
    font-weight: 300;
    line-height: 1.6;
}
/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS — Social proof section with glass cards
   ═══════════════════════════════════════════════════════════ */

.un-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.un-testimonial {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.4s var(--ease-out-expo);
}

.un-testimonial:hover {
    transform: translateY(-4px);
    border-color: rgba(90, 122, 78, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.06);
}

.un-testimonial-quote {
    font-size: 32px;
    color: var(--gold-500);
    line-height: 1;
    margin-bottom: 16px;
    opacity: 0.5;
}

.un-testimonial-text {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--earth-200);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 24px;
    font-style: italic;
}

.un-testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.un-testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-600), var(--gold-400));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #FFF;
    flex-shrink: 0;
}

.un-testimonial-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: #FFF;
    line-height: 1.3;
}

.un-testimonial-role {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--earth-400);
    font-weight: 300;
}

.un-testimonial-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    color: #FFD700;
    font-size: 14px;
}

/* ── Mobile horizontal scroll ── */
@media (max-width: 600px) {
    .un-testimonials-grid {
        grid-template-columns: 1fr;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 16px;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .un-testimonial {
        min-width: 300px;
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}
/* ═══════════════════════════════════════════════════════════
   FAQ — CSS-only accordion with details/summary
   ═══════════════════════════════════════════════════════════ */

.un-faq-list {
    max-width: 800px;
    margin: 48px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.un-faq-item {
    border: 1px solid rgba(90, 122, 78, 0.1);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    transition: all 0.3s ease;
}

.un-faq-item[open] {
    border-color: rgba(90, 122, 78, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.un-faq-item summary {
    padding: 20px 24px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--earth-100);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color 0.3s ease;
}

.un-faq-item summary::-webkit-details-marker {
    display: none;
}

.un-faq-item summary::after {
    content: '+';
    font-size: 22px;
    font-weight: 300;
    color: var(--gold-400);
    flex-shrink: 0;
    transition: transform 0.3s var(--ease-out-expo);
    line-height: 1;
}

.un-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.un-faq-item summary:hover {
    color: #FFF;
}

.un-faq-answer {
    padding: 0 24px 20px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--earth-300);
    line-height: 1.8;
    font-weight: 300;
    animation: faqSlideDown 0.3s var(--ease-out-expo);
}

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

/* ── Light section overrides ── */
.un-section-alt .un-faq-item {
    border-color: #e0e0e0;
    background: #fff;
}

.un-section-alt .un-faq-item[open] {
    border-color: var(--gold-400);
    background: #fafafa;
}

.un-section-alt .un-faq-item summary {
    color: var(--earth-800);
}

.un-section-alt .un-faq-item summary:hover {
    color: var(--gold-600);
}

.un-section-alt .un-faq-answer {
    color: var(--earth-600);
}
/* ═══════════════════════════════════════════════════════════
   CONTACT — Modern forms, pricing cards & map frame
   ═══════════════════════════════════════════════════════════ */

.un-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 56px;
    align-items: start;
}

.un-contact-item {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

.un-contact-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(90, 122, 78, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-400);
    font-size: 14px;
    flex-shrink: 0;
}

.un-contact-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--earth-400);
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 400;
}

.un-contact-val {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--earth-100);
    font-weight: 500;
    line-height: 1.5;
}

/* ── Contact Tabs ── */
.un-contact-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.un-contact-tab {
    flex: 1;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    background: transparent;
    color: var(--earth-400);
}

.un-contact-tab.active {
    background: var(--gold-500);
    color: #fff;
}

.un-contact-tab:not(.active):hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--earth-200);
}

/* Light section overrides */
.un-section-alt .un-contact-tabs {
    border-color: #d0d0d0;
}

.un-section-alt .un-contact-tab {
    color: #666;
}

.un-section-alt .un-contact-tab.active {
    background: var(--gold-500);
    color: #fff;
}

.un-section-alt .un-contact-tab:not(.active):hover {
    background: rgba(0, 0, 0, 0.03);
    color: #333;
}

/* ── Tour Calendar Picker ── */
.un-tour-calendar {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 12px;
}

.un-tour-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.un-tour-cal-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--gold-100);
}

.un-tour-cal-nav {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--earth-200);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.un-tour-cal-nav:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--gold-500);
    color: var(--gold-400);
}

.un-tour-cal-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.un-tour-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 4px;
}

.un-tour-cal-weekdays span {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--earth-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0;
}

.un-tour-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.un-tour-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--earth-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.un-tour-day:hover:not(.un-tour-day-past):not(.un-tour-day-empty):not(.un-tour-day-disabled) {
    background: rgba(90, 122, 78, 0.15);
    border-color: var(--gold-500);
    color: var(--gold-100);
}

.un-tour-day-selected {
    background: var(--gold-500) !important;
    color: #fff !important;
    border-color: var(--gold-400) !important;
    font-weight: 700;
}

.un-tour-day-today {
    color: var(--gold-400);
    font-weight: 700;
}

.un-tour-day-past,
.un-tour-day-disabled {
    opacity: 0.25;
    cursor: default;
}

.un-tour-day-empty {
    cursor: default;
}

/* ── Time Slot Picker ── */
.un-tour-time-slots {
    margin-bottom: 12px;
}

.un-tour-time-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--earth-300);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.un-tour-time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.un-tour-time-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
    color: var(--earth-200);
}

.un-tour-time-btn strong {
    font-size: 13px;
    font-weight: 600;
}

.un-tour-time-btn small {
    font-size: 11px;
    color: var(--earth-400);
    font-weight: 300;
}

.un-tour-time-btn:hover {
    border-color: var(--gold-500);
    background: rgba(90, 122, 78, 0.1);
}

.un-tour-time-btn.active {
    border-color: var(--gold-500);
    background: rgba(90, 122, 78, 0.15);
    box-shadow: 0 0 0 1px var(--gold-500);
}

.un-tour-time-btn.active strong {
    color: var(--gold-400);
}

/* Light section calendar overrides */
.un-section-alt .un-tour-calendar {
    background: #f8f8f6;
    border-color: #d0d0d0;
}

.un-section-alt .un-tour-cal-title {
    color: #1A1A1A;
}

.un-section-alt .un-tour-cal-nav {
    background: #fff;
    border-color: #d0d0d0;
    color: #333;
}

.un-section-alt .un-tour-cal-nav:hover:not(:disabled) {
    border-color: var(--gold-500);
    color: var(--gold-500);
}

.un-section-alt .un-tour-cal-weekdays span {
    color: #888;
}

.un-section-alt .un-tour-day {
    color: #333;
}

.un-section-alt .un-tour-day:hover:not(.un-tour-day-past):not(.un-tour-day-empty):not(.un-tour-day-disabled) {
    background: rgba(90, 122, 78, 0.1);
    border-color: var(--gold-500);
}

.un-section-alt .un-tour-day-today {
    color: var(--gold-600);
}

.un-section-alt .un-tour-time-label {
    color: #555;
}

.un-section-alt .un-tour-time-btn {
    background: #fff;
    border-color: #d0d0d0;
    color: #333;
}

.un-section-alt .un-tour-time-btn small {
    color: #888;
}

.un-section-alt .un-tour-time-btn:hover {
    border-color: var(--gold-500);
    background: rgba(90, 122, 78, 0.06);
}

.un-section-alt .un-tour-time-btn.active {
    border-color: var(--gold-500);
    background: rgba(90, 122, 78, 0.1);
}

/* ── Form Inputs (modern, clean) ── */
.un-input {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    color: var(--gold-100);
    font-family: var(--font-body);
    font-size: 14px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    outline: none;
    font-weight: 400;
}

.un-input:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(90, 122, 78, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.un-input::placeholder {
    color: var(--earth-500);
    font-weight: 300;
}

/* ── Light Section Form Overrides ── */
.un-section-alt .un-input {
    background: #fff;
    border: 1.5px solid #d0d0d0;
    color: #1A1A1A;
}

.un-section-alt .un-input:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(90, 122, 78, 0.1);
    background: #fff;
}

.un-section-alt .un-input::placeholder {
    color: #888;
}

.un-section-alt select.un-input {
    color: #1A1A1A;
}

.un-section-alt select.un-input option {
    color: #1A1A1A;
    background: #fff;
}

.un-section-alt .un-contact-val {
    color: #1A1A1A;
}

.un-section-alt .un-contact-label {
    color: var(--gold-600);
}

/* ── Apply Section — Black Text ── */
#apply .un-desc {
    color: #1A1A1A;
}

#apply .un-contact-val {
    color: #1A1A1A;
}

#apply .un-contact-label {
    color: #333333;
}

/* ── Application Type Picker ── */
.un-app-type-picker {
    margin-bottom: 16px;
}

.un-app-type-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--earth-700, #404E3B);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.un-app-type-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.un-app-type-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(90, 107, 84, 0.04);
    border: 2px solid var(--earth-200, #BAC8B1);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--earth-700, #404E3B);
}

.un-app-type-btn:hover {
    border-color: var(--gold-400, #7B9669);
    background: rgba(90, 107, 84, 0.08);
}

.un-app-type-btn.active {
    border-color: var(--gold-400, #7B9669);
    background: rgba(90, 107, 84, 0.1);
    box-shadow: 0 0 0 1px var(--gold-400, #7B9669);
}

.un-app-type-icon {
    font-size: 22px;
}

.un-app-type-name {
    font-weight: 600;
}

/* ── File Upload Labels ── */
.un-file-upload {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.un-file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(90, 107, 84, 0.06);
    border: 1px dashed var(--earth-300, #9DB38E);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: var(--earth-700, #404E3B);
}

.un-file-label:hover {
    border-color: var(--gold-400, #7B9669);
    background: rgba(90, 107, 84, 0.1);
}

.un-file-label.has-file {
    border-style: solid;
    border-color: var(--gold-400, #7B9669);
    background: rgba(90, 107, 84, 0.08);
}

.un-file-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.un-file-text {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Success State ── */
.un-form-success {
    text-align: center;
    padding: 48px;
    background: rgba(107, 143, 94, 0.06);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(107, 143, 94, 0.12);
    animation: fadeIn 0.5s ease;
}

.un-form-success-icon {
    font-size: 40px;
    color: var(--sage-400);
    margin-bottom: 16px;
}

.un-form-success-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--gold-100);
    margin-bottom: 8px;
}

.un-form-success-desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--earth-400);
    font-weight: 300;
}

/* ── Google Maps Frame ── */
.un-map-frame {
    margin-top: 72px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(90, 122, 78, 0.12);
    background: var(--earth-800);
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.3);
}

.un-map-frame-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.un-map-frame-info {
    flex: 1;
}

.un-map-frame-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: #FFF;
    line-height: 1.2;
}

.un-map-frame-address {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--earth-400);
    margin-top: 2px;
    font-weight: 300;
}

.un-map-frame-directions {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--gold-400);
    text-decoration: none;
    padding: 8px 18px;
    border: 1px solid rgba(90, 122, 78, 0.2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: all 0.3s ease;
    font-weight: 500;
}

.un-map-frame-directions:hover {
    background: rgba(90, 122, 78, 0.08);
    border-color: var(--gold-400);
    color: var(--gold-100);
}

.un-map-container {
    overflow: hidden;
    background: var(--earth-900);
}

.un-map-container iframe {
    display: block;
    filter: saturate(0.5) brightness(0.8);
}

/* ═══════════════════════════════════════════════════════════
   PRICING — Modern card grid with featured highlight
   ═══════════════════════════════════════════════════════════ */

.un-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.un-pricing-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: 36px 24px;
    text-align: center;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.un-pricing-card:hover {
    border-color: rgba(90, 122, 78, 0.2);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.06);
}

/* Featured card highlight */
.un-pricing-card:nth-child(3) {
    border-color: rgba(90, 122, 78, 0.25);
    background: rgba(90, 122, 78, 0.06);
}

.un-pricing-card:nth-child(3)::before {
    content: 'POPULAR';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--earth-900);
    background: var(--gold-400);
    padding: 4px 16px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.un-pricing-badge {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-bottom: 24px;
}

.un-pricing-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: #fff;
    margin-bottom: 4px;
    font-weight: 300;
}

.un-pricing-price {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}

.un-pricing-price span {
    font-size: 16px;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0;
}

.un-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    text-align: left;
}

.un-pricing-features li {
    font-family: var(--font-body);
    font-size: 13px;
    color: #fff;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-left: 20px;
    position: relative;
    font-weight: 300;
}

.un-pricing-features li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-500);
}

.un-pricing-card .un-btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.un-pricing-card .un-btn-outline:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}
/* ══════════════════════════════════════════════════════════
   MODAL — Modern glass overlay with clean form
   ══════════════════════════════════════════════════════════ */

.un-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.un-modal-overlay.visible {
    pointer-events: all;
    opacity: 1;
}

/* ── Backdrop ── */
.un-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── Modal Card ── */
.un-modal-card {
    position: relative;
    z-index: 2;
    background: var(--earth-800);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 48px 120px rgba(0, 0, 0, 0.6);
    transform: translateY(24px) scale(0.96);
    transition: transform 0.5s var(--ease-out-expo);
}

.un-modal-overlay.visible .un-modal-card {
    transform: translateY(0) scale(1);
}

/* ── Close Button ── */
.un-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--earth-300);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.un-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFF;
}

/* ── Info Side (Left) ── */
.un-modal-info {
    padding: 44px 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.un-modal-type-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.un-modal-type-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.un-modal-type-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
}

.un-modal-avail-badge {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--sage-300);
    background: rgba(107, 143, 94, 0.12);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-weight: 600;
}

.un-modal-leased-badge {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--earth-400);
    background: rgba(92, 74, 53, 0.2);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-weight: 600;
}

.un-modal-suite-name {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 700;
    color: #FFF;
    margin-bottom: 28px;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* ── Stats Row ── */
.un-modal-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 28px;
}

.un-modal-stat-val {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--gold-400);
    line-height: 1;
}

.un-modal-stat-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--earth-400);
    margin-top: 4px;
    font-weight: 400;
}

.un-modal-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
}

/* ── Features ── */
.un-modal-features-title {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--earth-300);
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 600;
}

.un-modal-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
}

.un-modal-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--earth-100);
    font-weight: 300;
}

.un-modal-feat-icon {
    font-size: 7px;
    flex-shrink: 0;
    color: var(--gold-500);
}

.un-modal-note {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--earth-400);
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-weight: 300;
    display: flex;
    align-items: flex-start;
}

.un-modal-note svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Form Side (Right) ── */
.un-modal-form-side {
    padding: 44px 40px;
    background: rgba(0, 0, 0, 0.15);
}

.un-modal-form-header {
    margin-bottom: 32px;
}

.un-modal-form-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: #FFF;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.un-modal-form-subtitle {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--earth-300);
    line-height: 1.6;
    font-weight: 300;
}

/* ── Form Fields ── */
.un-modal-field { margin-bottom: 18px; }

.un-modal-label {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--earth-300);
    margin-bottom: 6px;
    font-weight: 500;
}

.un-modal-label span { color: var(--gold-500); }

.un-modal-optional {
    font-size: 10px;
    color: var(--earth-500);
    font-weight: 300;
}

.un-modal-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    color: var(--gold-100);
    font-family: var(--font-body);
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
    font-weight: 400;
}

.un-modal-input:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(90, 122, 78, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.un-modal-input::placeholder { color: var(--earth-500); font-weight: 300; }

.un-modal-input-error {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.12) !important;
    animation: shakeInput 0.4s ease;
}

@keyframes shakeInput {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
}

.un-modal-textarea { resize: vertical; min-height: 70px; }

/* ── Chair Toggle ── */
.un-modal-chair-toggle { display: flex; gap: 10px; }

.un-modal-chair-opt {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.un-modal-chair-opt:hover {
    border-color: rgba(90, 122, 78, 0.2);
    background: rgba(90, 122, 78, 0.04);
}

.un-modal-chair-opt.active {
    border-color: var(--gold-500);
    background: rgba(90, 122, 78, 0.08);
    box-shadow: 0 0 0 3px rgba(90, 122, 78, 0.1);
}

.un-modal-chair-icon {
    font-size: 18px;
    color: var(--gold-400);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.un-modal-chair-text { display: flex; flex-direction: column; gap: 1px; }
.un-modal-chair-text strong { font-family: var(--font-body); font-size: 13px; color: #FFF; font-weight: 500; }
.un-modal-chair-text small { font-family: var(--font-body); font-size: 11px; color: var(--earth-400); font-weight: 300; }

/* ── Submit Button ── */
.un-modal-submit {
    width: 100%;
    padding: 17px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--gold-500);
    color: #FFF;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--ease-out-expo);
    box-shadow: 0 4px 20px rgba(90, 122, 78, 0.2);
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.un-modal-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(90, 122, 78, 0.3);
    background: var(--gold-400);
}

.un-modal-submit:active { transform: translateY(0); }
.un-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Success State ── */
.un-modal-success {
    text-align: center;
    padding: 48px 24px;
    animation: fadeUp 0.5s var(--ease-out-expo);
}

.un-modal-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(107, 143, 94, 0.1);
    border: 2px solid rgba(107, 143, 94, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--sage-300);
    margin: 0 auto 24px;
    line-height: 1;
}

.un-modal-success-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.un-modal-success-desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--earth-300);
    line-height: 1.7;
    max-width: 340px;
    margin: 0 auto 32px;
    font-weight: 300;
}

.un-modal-success-btn {
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(90, 122, 78, 0.25);
    background: transparent;
    color: var(--gold-400);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.un-modal-success-btn:hover {
    background: rgba(90, 122, 78, 0.08);
    border-color: var(--gold-400);
}

/* ── Tenant Login Error ── */
.un-tenant-login-error {
    display: none;
    font-family: var(--font-body);
    font-size: 13px;
    color: #F5B8B8;
    background: rgba(192, 57, 43, 0.1);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 14px;
    text-align: center;
}

/* ── Tenant Resend Button ── */
.un-tenant-resend-btn {
    background: none;
    border: none;
    color: var(--gold-400);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s ease;
}

.un-tenant-resend-btn:hover:not(:disabled) { color: #FFF; text-decoration: underline; }
.un-tenant-resend-btn:disabled { color: var(--earth-500); cursor: default; }

/* ── Tenant Back Button ── */
.un-tenant-back-btn {
    background: none;
    border: none;
    color: var(--earth-400);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 300;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s ease;
}

.un-tenant-back-btn:hover { color: var(--gold-400); }
/* ═══════════════════════════════════════════════════════════
   BOOKING — Modern calendar & mini floor plan
   ═══════════════════════════════════════════════════════════ */

/* ── 2-Column Layout ── */
.un-booking-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    margin-top: 48px;
    align-items: start;
}

/* ══════════════════════════════════════
   CALENDAR (glass card)
   ══════════════════════════════════════ */
.un-booking-calendar {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Month Header ── */
.un-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.un-cal-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: #FFF;
    letter-spacing: -0.01em;
}

.un-cal-nav {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--gold-400);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.un-cal-nav:hover {
    background: rgba(90, 122, 78, 0.1);
    border-color: rgba(90, 122, 78, 0.2);
    color: var(--gold-100);
}

.un-cal-nav:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ── Weekday Headers ── */
.un-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}

.un-cal-weekday {
    font-family: var(--font-body);
    font-size: 10px;
    color: #FFFFFF;
    text-align: center;
    padding: 6px 0;
    font-weight: 500;
}

/* ── Day Grid ── */
.un-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.un-cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--earth-100);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1.5px solid transparent;
    gap: 3px;
}

.un-cal-day:hover:not(.un-cal-day-past):not(.un-cal-day-empty):not(.un-cal-day-full) {
    background: rgba(90, 122, 78, 0.08);
    border-color: rgba(90, 122, 78, 0.2);
}

.un-cal-day-empty { cursor: default; }
.un-cal-day-past { color: var(--earth-500); opacity: 0.4; cursor: default; }
.un-cal-day-today { border-color: rgba(90, 122, 78, 0.4); }

.un-cal-day-selected {
    background: var(--gold-500);
    color: #FFF;
    border-color: var(--gold-400);
    box-shadow: 0 4px 16px rgba(90, 122, 78, 0.3);
    font-weight: 600;
}

.un-cal-day-selected:hover {
    background: var(--gold-500);
}

.un-cal-day-full { color: var(--earth-400); opacity: 0.5; cursor: default; }

/* ── Availability Dots ── */
.un-cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.un-cal-dot-partial { background: var(--gold-400); }
.un-cal-dot-full { background: #c0392b; }

/* ── Price Badge ── */
.un-cal-price-badge {
    text-align: center;
    margin-top: 16px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-family: var(--font-body);
    font-size: 14px;
    color: #FFFFFF;
    font-weight: 300;
}

.un-cal-price-badge strong {
    color: var(--gold-400);
    font-weight: 600;
}

/* ══════════════════════════════════════
   MINI FLOOR PLAN (glass card)
   ══════════════════════════════════════ */
.un-booking-minimap {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.un-booking-date-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--earth-300);
    margin-bottom: 16px;
    font-weight: 400;
    text-align: center;
}

.un-booking-date-label strong {
    color: var(--gold-400);
    font-weight: 600;
}

.un-booking-minimap-svg { width: 100%; overflow: visible; }

.un-booking-chair-daily { cursor: pointer; transition: all 0.25s ease; }
.un-booking-chair-daily:hover .un-fp-top { fill: var(--fp-hover) !important; }
.un-booking-chair-daily:hover { filter: url(#fpShadow); transform: translateY(-1px); }
.un-booking-chair-booked { opacity: 0.35; pointer-events: none; }
.un-booking-chair-monthly { opacity: 0.15; pointer-events: none; }
.un-booking-chair-selected { filter: url(#bkGlow); }

/* ── Legend ── */
.un-booking-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.un-booking-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: #FFFFFF;
    font-weight: 300;
}

.un-booking-legend-dot { width: 10px; height: 10px; border-radius: 3px; }

/* ══════════════════════════════════════
   BOOKING MODAL
   ══════════════════════════════════════ */
.un-booking-confirm-details {
    background: rgba(90, 122, 78, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    margin-bottom: 24px;
}

.un-booking-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.un-booking-confirm-row:last-child { border-bottom: none; }

.un-booking-confirm-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--earth-400);
    font-weight: 400;
}

.un-booking-confirm-value {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: #FFF;
}

.un-booking-confirm-price {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--gold-400);
}

.un-booking-modal-card {
    grid-template-columns: 1fr;
    max-width: 520px;
}
/* ═══════════════════════════════════════════════════════════
   FOOTER — Clean modern footer
   ═══════════════════════════════════════════════════════════ */

.un-footer {
    background: var(--earth-900);
    padding: 72px 32px 28px;
}

.un-footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 64px;
}

.un-footer-heading {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--gold-400);
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 600;
}

.un-footer-desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--earth-400);
    line-height: 1.8;
    max-width: 360px;
    font-weight: 300;
}

.un-footer-link {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--earth-400);
    display: block;
    margin-bottom: 14px;
    cursor: pointer;
    transition: color 0.3s ease;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    text-decoration: none;
    font-weight: 300;
}

.un-footer-link:hover {
    color: #FFF;
}

.un-footer-bottom {
    max-width: 1320px;
    margin: 48px auto 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 24px;
    font-family: var(--font-body);
    font-size: 12px;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 300;
}
/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile & tablet breakpoints
   ═══════════════════════════════════════════════════════════ */

/* ── Safe Area for Notched Devices ── */
@supports (padding-top: env(safe-area-inset-top)) {
    .un-nav { padding-top: env(safe-area-inset-top); }
    .un-toast-container { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ── Tablet & Small Desktop (≤ 900px) ── */
@media (max-width: 900px) {
    .un-nav-links { display: none; }
    .un-hamburger { display: flex; }

    .un-about-grid,
    .un-contact-grid,
    .un-footer-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .un-section { padding: 80px 20px; }
    .un-cards { grid-template-columns: 1fr; }
    .un-stat-row { gap: 24px; }
    .un-hero-fp { padding: 90px 16px 50px; }

    .un-fp-tooltip { display: none !important; }
    .un-fp-suite { cursor: pointer; }

    .un-pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .un-map-container iframe { height: 280px; }

    .un-booking-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .un-booking-calendar {
        max-width: 400px;
        margin: 0 auto;
    }

    .un-modal-card {
        grid-template-columns: 1fr;
        max-height: 95vh;
    }

    .un-modal-info {
        padding: 28px 24px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .un-modal-form-side { padding: 24px; }
    .un-modal-features { grid-template-columns: 1fr; }

    .un-modal-overlay {
        padding: 12px;
        align-items: flex-start;
        padding-top: 40px;
    }
}

/* ── Small Tablet (≤ 600px) ── */
@media (max-width: 600px) {
    .un-section { padding: 64px 16px; }
    .un-cards { grid-template-columns: 1fr; gap: 14px; }
    .un-amenities-grid { grid-template-columns: 1fr; }
    .un-pricing-grid { grid-template-columns: 1fr; }
    .un-hero-header .un-desc br { display: none; }
    .un-map-container iframe { height: 240px; }
    .un-footer-bottom { flex-direction: column; text-align: center; }

    .un-faq-item summary { font-size: 14px; padding: 16px 20px; }
    .un-faq-answer { padding: 0 20px 16px; font-size: 13px; }

    .un-exit-popup-content { padding: 32px 24px; }
    .un-exit-popup-title { font-size: 20px; }

    .un-tour-time-grid { grid-template-columns: 1fr; }
    .un-tour-time-btn { flex-direction: row; justify-content: center; gap: 8px; }
    .un-contact-tab { font-size: 12px; padding: 10px 12px; }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .un-nav-inner { padding: 12px 16px; }
    .un-logo-main { font-size: 17px; letter-spacing: 2px; }
    .un-hero-fp { padding: 80px 12px 36px; }
    .un-stat-row { flex-wrap: wrap; gap: 16px; }
    .un-stat-num { font-size: 32px; }
    .un-legend { gap: 12px; }
    .un-about-feats { grid-template-columns: 1fr; }
    .un-floorplan-container { padding: 16px 8px; border-radius: var(--radius-lg); }

    .un-map-container iframe { height: 220px; }

    .un-modal-overlay {
        padding: 8px;
        padding-top: calc(20px + env(safe-area-inset-top, 0px));
    }
    .un-modal-card { border-radius: var(--radius-lg); }
    .un-modal-info { padding: 24px 20px 16px; }
    .un-modal-form-side { padding: 20px; }
    .un-modal-stats { gap: 12px; flex-wrap: wrap; }
    .un-modal-suite-name { font-size: 26px; }
    .un-modal-chair-toggle { flex-direction: column; gap: 8px; }

    .un-toast-container { left: 16px; right: 16px; }
    .un-toast { max-width: 100%; }

    .un-booking-calendar { padding: 20px 16px; }
    .un-cal-day { font-size: 12px; }
    .un-booking-minimap { padding: 16px; }
    .un-booking-legend { gap: 12px; flex-wrap: wrap; }

    .un-pricing-price { font-size: 38px; }
    .un-title { letter-spacing: -0.01em; }
}