/* ====================================================
           LUXURY DESIGN SYSTEM - Premium Desert Travel
           Inspired by: Mamounia, Aman, Royal Mansour
           ==================================================== */
        :root {
            /* Desert Luxury Color Palette */
            --color-primary: #C4956F;           /* Desert sand - primary actions */
            --color-primary-dark: #A77448;      /* Darker sand - hover states */
            --color-primary-light: #E6CFB6;     /* Light sand - highlights */
            --color-gold: #D4AF37;              /* Luxury gold - accents */
            --color-earth: #8B7355;             /* Warm earth - secondary */
            --color-night: #1A1612;             /* Deep charcoal - dark sections */
            --color-night-light: #2B2217;       /* Lighter charcoal */
            
            /* Text Colors */
            --color-text-primary: #2B2217;      /* Dark warm brown */
            --color-text-secondary: #6B5D50;    /* Medium brown */
            --color-text-light: #8A7A6A;        /* Light brown */
            --color-text-on-dark: rgba(240, 228, 214, 0.95);
            --color-text-on-dark-muted: rgba(240, 228, 214, 0.7);
            
            /* Luxury Text Color System */
            --ink-strong: #3b2f24;              /* Deep warm brown - titles */
            --ink-medium: #5a4633;              /* Clean elegant brown - subtitles */
            --ink-muted: #8b7d6c;               /* Soft sand-gray - supporting text */
            --ink-light: #f5f2ed;               /* High-contrast light ink for dark backgrounds */
            --ink-light-muted: rgba(245, 242, 237, 0.85);
            --link-accent: #c2a46d;             /* Gold - links and CTAs */
            
            /* Surface Colors */
            --color-sand: #F0E4D6;              /* Light background */
            --color-sand-light: #F6EEE4;        /* Lightest background */
            --color-sand-dark: #E8D6C1;         /* Darker sand */
            --color-overlay: rgba(26, 22, 18, 0.75);      /* Dark overlay */
            --color-overlay-light: rgba(26, 22, 18, 0.5); /* Light overlay */
            --color-glass: rgba(240, 228, 214, 0.08);     /* Glass morphism */
            --color-glass-border: rgba(196, 149, 111, 0.2);
            
            /* Premium Typography */
            --font-heading: 'Cormorant Garamond', Georgia, serif;
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-ar: 'Noto Kufi Arabic', 'Inter', sans-serif;
            
            /* Typography Scale (Luxury Proportions) */
            --font-size-xs: 0.875rem;          /* 14px - captions */
            --font-size-sm: 0.9375rem;         /* 15px - small text */
            --font-size-base: 1.0625rem;       /* 17px - body (luxury readability) */
            --font-size-lg: 1.25rem;           /* 20px - large text */
            --font-size-xl: 1.5rem;            /* 24px - subheadings */
            --font-size-2xl: 2rem;             /* 32px - section titles */
            --font-size-3xl: 2.5rem;           /* 40px - large titles */
            --font-size-4xl: 3.5rem;           /* 56px - hero */
            --font-size-5xl: 5rem;             /* 80px - hero large */
            
            /* Fluid Type Scale (Premium Responsive) */
            --text-xs: clamp(0.80rem, 0.25vw + 0.76rem, 0.88rem);
            --text-sm: clamp(0.92rem, 0.35vw + 0.88rem, 1.02rem);
            --text-md: clamp(1.06rem, 0.45vw + 0.95rem, 1.18rem);
            --text-lg: clamp(1.28rem, 0.7vw + 1.05rem, 1.46rem);
            --text-xl: clamp(1.6rem, 1.0vw + 1.2rem, 2.0rem);
            --text-xxl: clamp(2.2rem, 1.6vw + 1.6rem, 3.0rem);
            
            /* Line Heights (Luxury Readability) */
            --line-height-tight: 1.2;
            --line-height-snug: 1.4;
            --line-height-normal: 1.6;
            --line-height-relaxed: 1.8;
            --line-height-loose: 2;
            
            /* Letter Spacing (Elegant) */
            --letter-spacing-tight: -0.02em;    /* Headings */
            --letter-spacing-normal: 0;
            --letter-spacing-wide: 0.02em;      /* Captions, uppercase */
            --letter-spacing-wider: 0.05em;     /* Buttons, labels */
            
            /* Spacing Scale (Generous Luxury) */
            --spacing-xs: 0.5rem;              /* 8px */
            --spacing-sm: 1rem;                /* 16px */
            --spacing-md: 2rem;                /* 32px */
            --spacing-lg: 3rem;                /* 48px */
            --spacing-xl: 4rem;                /* 64px */
            --spacing-2xl: 6rem;               /* 96px */
            --spacing-3xl: 8rem;               /* 128px - section spacing */
            
            /* Luxury Spacing System */
            --space-xxs: 0.25rem;
            --space-xs: 0.5rem;
            --space-sm: 0.75rem;
            --space-md: 1rem;
            --space-lg: 1.5rem;
            --space-xl: 2.25rem;
            
            /* Border Radius (Soft & Premium) */
            --radius-sm: 12px;
            --radius-md: 16px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            --radius-full: 999px;
            
            /* Shadows (Luxury Depth) */
            --shadow-sm: 0 2px 8px rgba(26, 22, 18, 0.08);
            --shadow-md: 0 8px 24px rgba(26, 22, 18, 0.12);
            --shadow-lg: 0 16px 48px rgba(26, 22, 18, 0.16);
            --shadow-xl: 0 24px 64px rgba(26, 22, 18, 0.2);
            --shadow-luxury: 0 20px 60px rgba(0, 0, 0, 0.2);
            
            /* Transitions (Smooth & Cinematic) */
            --transition-fast: 0.2s ease;
            --transition-base: 0.3s ease;
            --transition-smooth: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            --transition-slow: 1s cubic-bezier(0.19, 1, 0.22, 1);
            --transition-luxury: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            
            /* Z-Index Scale */
            --z-base: 1;
            --z-nav: 1000;
            --z-overlay: 9999;
            --z-preloader: 10000;
        }
        
        /* ====================================================
           Reset & Base
           ==================================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
            font-size: 16px;
            scroll-padding-top: 64px;
            background-color: var(--color-sand);
            background-image: linear-gradient(
                180deg,
                var(--color-sand-light) 0%,
                var(--color-sand) 55%,
                #E9D6C1 100%
            );
            position: relative;
            /* Cinematic smooth scrolling */
            scroll-snap-type: y proximity;
            overflow-y: scroll;
        }

        html::before {
            content: '';
            position: fixed;
            inset: 0;
            background: none;
            opacity: 0;
            pointer-events: none;
            z-index: 0;
        }
        
        body {
            font-family: 'Inter', system-ui, 'Segoe UI', 'Roboto', sans-serif;
            font-size: var(--text-sm);
            color: var(--ink-medium);
            line-height: 1.6;
            background-color: #2B2217;
            background-image: var(--dynamic-bg-image, url('assets/images/desert-background.png'));
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            z-index: 1;
            min-height: var(--safe-h);
        }
        
        /* Base text color for normal (light) sections */
        body, p, li, a, small { color: var(--ink-medium); }
        h1, h2, h3 { color: var(--ink-strong); }
        
        /* On dark background override - light ink for readability */
        .on-dark,
        .on-dark p, .on-dark li, .on-dark small { color: var(--ink-light-muted); }
        .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--ink-light); }
        .on-dark a { color: var(--ink-light); }
        .on-dark .btn--primary { color: #0a0a0a; background: var(--link-accent); }
        .on-dark .btn--ghost { color: var(--ink-light); border-color: rgba(255, 255, 255, 0.35); }
        .on-dark .hero-cta-btn { color: #0a0a0a; background: var(--link-accent); }
        .on-dark .elevate-text { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28); }
        .on-dark svg[stroke] { stroke: currentColor; }
        .on-dark svg[fill] { fill: currentColor; }
        @media (prefers-contrast: more) {
            .on-dark p, .on-dark li { color: #fff; }
            .on-dark a { text-decoration: underline; text-underline-offset: 2px; }
        }
        
        /* Cards keep original ink (light-bg colors) when inside dark sections */
        .card, .card *,
        .tour-card, .tour-card *,
        .why-card, .why-card *,
        .info-card, .info-card * { color: inherit; }
        .card, .tour-card, .why-card, .info-card { color: var(--ink-medium); }
        .card h1, .card h2, .card h3,
        .tour-card h1, .tour-card h2, .tour-card h3,
        .why-card h1, .why-card h2, .why-card h3,
        .info-card h1, .info-card h2, .info-card h3 { color: var(--ink-strong); }
        
        /* FORCE background to cover ENTIRE page height */
        /* Remove top margin/padding from first section */
        main > section:first-of-type {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                180deg,
                rgba(26, 22, 18, 0.5) 0%,
                rgba(43, 34, 23, 0.6) 50%,
                rgba(26, 22, 18, 0.55) 100%
            );
            backdrop-filter: blur(0.5px);
            -webkit-backdrop-filter: blur(0.5px);
            z-index: -1;
            pointer-events: none;
        }

        section {
            scroll-margin-top: 64px;
            scroll-snap-align: start;
            scroll-snap-stop: normal;
            padding-block: clamp(2.25rem, 2.5vw + 1.5rem, 4rem);
        }
        
        /* Major sections with generous spacing - Luxury rhythm */
        .luxury-slider,
        .experiences,
        .about,
        .why-section,
        .contact,
        .footer {
            position: relative;
        }
        
        /* Hero gets tighter padding for compact above-fold experience */
        .hero {
            padding: clamp(1.25rem, 2vw, 2.5rem) 0;
            position: relative;
        }
        
        /* Desert-inspired section overlays - sand tones, warm beige, sunset gold */
        .experiences {
            background: linear-gradient(
                180deg,
                rgba(246, 238, 228, 0.75) 0%,
                rgba(237, 220, 195, 0.85) 50%,
                rgba(246, 238, 228, 0.75) 100%
            ) !important;
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
        }
        
        
        .about,
        .why-section {
            background: linear-gradient(
                180deg,
                rgba(235, 215, 190, 0.80) 0%,
                rgba(220, 195, 165, 0.90) 50%,
                rgba(235, 215, 190, 0.80) 100%
            ) !important;
            backdrop-filter: blur(2px);
        }
        
        .contact {
            background: linear-gradient(
                180deg,
                rgba(215, 190, 160, 0.85) 0%,
                rgba(205, 175, 140, 0.92) 100%
            );
            backdrop-filter: blur(2px);
        }
        
        @media (max-width: 900px) {
            html {
                scroll-padding-top: 56px;
            }
            
            section {
                scroll-margin-top: 56px;
            }
            
            .navbar {
                height: 56px;
            }
            
            .hero {
                min-height: 52vh;
            }
        }

        @media (max-width: 768px) {
            .luxury-slider,
            .experiences,
            .about,
            .why-section,
            .contact,
            .footer {
                padding: var(--spacing-2xl) 0;
            }
            
            .hero {
                padding: clamp(1rem, 1.5vw, 1.75rem) 0;
            }
            
            .hero-content {
                padding: clamp(1.25rem, 2vw, 2rem) 1rem;
            }
        }

        body::before {
            content: '';
            position: fixed;
            inset: -20%;
            /* Subtle paper texture for premium feel */
            background-image: radial-gradient(rgba(139, 107, 74, 0.06) 1px, transparent 1px);
            background-size: 60px 60px;
            opacity: 0.5;
            pointer-events: none;
            z-index: -1;
            animation: grainDrift 90s linear infinite;
            mix-blend-mode: soft-light;
        }
        
        @keyframes grainDrift {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(5%, 5%);
            }
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        a {
            text-decoration: none;
            color: inherit;
        }
        
        /* ====================================================
           LUXURY TYPOGRAPHY SYSTEM
           Elegant Serif + Modern Sans-Serif Pairing
           ==================================================== */
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Cormorant Garamond', serif;
            color: var(--ink-strong);
            letter-spacing: 0.3px;
            margin: 0 0 var(--space-md) 0;
        }
        
        h1 {
            font-size: var(--text-xxl);
            font-weight: 300;
            line-height: 1.1;
        }
        
        h2 {
            font-size: var(--text-xl);
            font-weight: 600;
            line-height: 1.2;
        }
        
        h3 {
            font-size: var(--text-lg);
            font-weight: 600;
            line-height: 1.25;
        }
        
        p, li {
            font-size: var(--text-sm);
            color: var(--ink-medium);
            line-height: 1.6;
            margin: 0 0 0.6rem 0;
        }
        
        .small-muted {
            font-size: var(--text-xs);
            color: var(--ink-muted);
            letter-spacing: 0.2px;
        }

        html[lang="ar"] body {
            font-family: var(--font-ar);
            line-height: 1.85;
        }

        html[lang="ar"] h1,
        html[lang="ar"] h2,
        html[lang="ar"] h3 {
            font-family: var(--font-ar);
            letter-spacing: 0;
            line-height: 1.35;
        }

        #pageContent.lang-ready {
            transition: opacity 0.25s ease, transform 0.25s ease;
            will-change: opacity, transform;
        }

        #pageContent.lang-transition {
            opacity: 0;
            transform: translateY(6px);
        }

        .lang-loading #pageContent {
            opacity: 0;
            transform: translateY(6px);
        }

        .section-intro,
        .about-text {
            max-width: 760px;
        }

        .section-transition {
            text-align: center;
            font-size: 0.98rem;
            color: var(--color-text-light);
            margin: 0.35rem auto var(--spacing-xl);
            max-width: 720px;
        }

        /* Supporting microcopy - Mobile-first */
        .microcopy {
            /* Mobile: Comfortable reading size */
            font-size: 0.8125rem;
            font-weight: 400;
            line-height: 1.55;
            letter-spacing: 0.015em;
            color: rgba(240, 228, 214, 0.82);
            margin-top: 0.875rem;
            max-width: 100%;
            text-shadow: 
                0 1px 3px rgba(0, 0, 0, 0.45),
                0 2px 6px rgba(0, 0, 0, 0.35);
        }
        
        /* Tablet+ enhancement */
        @media (min-width: 769px) {
            .microcopy {
                font-size: 0.875rem;
                line-height: 1.6;
                letter-spacing: 0.02em;
                margin-top: 1rem;
                text-shadow: 
                    0 1px 3px rgba(0, 0, 0, 0.4),
                    0 2px 6px rgba(0, 0, 0, 0.3),
                    0 3px 10px rgba(0, 0, 0, 0.2);
            }
        }

        .footer .lang-btn {
            border-color: rgba(139, 107, 74, 0.45);
        }

        html[dir="rtl"] body {
            text-align: right;
        }

        html[dir="rtl"] .nav-container {
            flex-direction: row-reverse;
        }

        html[dir="rtl"] .nav-menu {
            flex-direction: row-reverse;
        }

        html[dir="rtl"] .nav-link::after {
            left: auto;
            right: 0;
        }

        html[dir="rtl"] .trust-signals {
            text-align: right;
        }

        html[dir="rtl"] .trust-item {
            flex-direction: row-reverse;
        }

        html[dir="rtl"] .tour-actions {
            justify-content: flex-end;
        }

        html[dir="rtl"] .tour-list li {
            flex-direction: row-reverse;
            text-align: right;
        }

        html[dir="rtl"] .tour-info {
            text-align: right;
        }

        html[dir="rtl"] .journey-text {
            text-align: right;
        }

        html[dir="rtl"] .footer-bottom {
            flex-direction: row-reverse;
        }

        html[dir="rtl"] .footer-bottom-right {
            justify-content: flex-start;
        }

        html[dir="rtl"] .footer-phone {
            flex-direction: row-reverse;
        }
        
        /* ====================================================
           Navigation - Premium & Clean - Compact Header
           ==================================================== */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 64px;
            background: rgba(14, 13, 12, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 0;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
            transition: all 0.3s ease;
            border-bottom: 1px solid rgba(196, 149, 111, 0.1);
            display: flex;
            align-items: center;
        }
        
        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            height: inherit;
            width: 100%;
        }
        
        .logo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            line-height: 0;
            padding: 0.5rem 0;
        }
        
        .logo-image {
            height: 50px;
            width: auto;
            max-width: none;
            object-fit: contain;
            display: block;
            /* Enhanced clarity and sharpness */
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            /* Subtle shadow for depth without blur */
            filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25));
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        }
        
        .logo:hover .logo-image {
            filter: drop-shadow(0 6px 20px rgba(212, 175, 55, 0.6)) brightness(1.08);
            transform: scale(1.03);
        }
        
        .logo:hover {
            letter-spacing: 0.18em;
            text-shadow: 
                0 1px 2px rgba(26, 22, 18, 0.6),
                0 2px 6px rgba(26, 22, 18, 0.4),
                0 4px 12px rgba(26, 22, 18, 0.3),
                0 8px 24px rgba(26, 22, 18, 0.2),
                0 0 60px rgba(212, 175, 55, 0.25);
        }
        
        .mobile-menu-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            z-index: 1001;
        }
        
        .mobile-menu-toggle span {
            width: 26px;
            height: 2px;
            background: var(--color-white);
            transition: all 0.3s ease;
            border-radius: 2px;
        }
        
        .nav-menu {
            display: flex;
            align-items: center;
            gap: 2.5rem;
            list-style: none;
        }

        .lang-switcher {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .lang-btn {
            border: 1px solid rgba(196, 149, 111, 0.25);
            background: rgba(26, 22, 18, 0.3);
            color: rgba(240, 228, 214, 0.7);
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            padding: 0.4rem 0.7rem;
            border-radius: 6px;
            text-transform: uppercase;
            transition: var(--transition-base);
            cursor: pointer;
        }

        .lang-btn:hover {
            border-color: var(--color-gold);
            background: rgba(212, 175, 55, 0.1);
            color: var(--color-gold);
            transform: translateY(-1px);
        }

        .lang-btn.is-active {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(196, 149, 111, 0.2));
            border-color: var(--color-gold);
            color: var(--color-gold);
            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
        }
        
        .nav-link {
            color: rgba(240, 228, 214, 0.92);
            font-weight: 500;
            font-size: 0.9375rem;
            transition: all 0.3s ease;
            padding: 0.5rem 0;
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--color-primary);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover {
            color: var(--color-white);
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        /* ====================================================
           HERO SECTION - MOBILE-FIRST LUXURY COMPOSITION
           Inspired by Mamounia's cinematic layered aesthetic
           ==================================================== */
        
        /* MOBILE BASE (320px+) - Foundation styles - Compact Hero */
        .hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: clamp(1.25rem, 2vw, 2.5rem) 0;
            color: #f5f2ee;
            text-align: center;
        }
        
        /* Static Hero Background with Desert Gradient */
        .hero-background {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            background: linear-gradient(
                135deg,
                #C4956F 0%,
                #B8895C 25%,
                #8B6B4A 50%,
                #A77448 75%,
                #C4956F 100%
            );
            /* Optional: subtle texture */
            background-image: 
                linear-gradient(135deg, 
                    rgba(196, 149, 111, 0.9) 0%,
                    rgba(184, 137, 92, 0.95) 25%,
                    rgba(139, 107, 74, 1) 50%,
                    rgba(167, 116, 72, 0.95) 75%,
                    rgba(196, 149, 111, 0.9) 100%
                ),
                radial-gradient(circle at 30% 40%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(139, 107, 74, 0.2) 0%, transparent 50%);
        }
        
        /* Hero media - ensure proper filling without extra space */
        .hero-media {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
        
        .hero-media img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        
        /* Legacy support - hide old elements */
        .hero-bg {
            display: none;
        }
        
        /* Dark overlay for text readability on slider */
        .hero-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            overflow: hidden;
        }
        
        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));
            z-index: 1;
        }
        
        /* Atmospheric warm gradient - preserves image texture */
        .hero-overlay::before {
            content: '';
            position: absolute;
            inset: 0;
            /* Subtle gradient for perfect text readability */
            background: linear-gradient(
                to bottom,
                rgba(26, 22, 18, 0.4) 0%,         /* Gentle top darkening */
                rgba(62, 46, 30, 0.2) 25%,        /* Warm transition */
                rgba(26, 22, 18, 0.1) 50%,        /* Nearly transparent center */
                rgba(62, 46, 30, 0.35) 75%,       /* Text zone contrast */
                rgba(26, 22, 18, 0.7) 100%        /* Strong grounded bottom */
            );
            z-index: 1;
        }

        /* Refined vignette for elegant depth */
        .hero-overlay::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(
                ellipse at center 45%,
                rgba(212, 175, 55, 0.04) 0%,      /* Very subtle gold glow */
                rgba(139, 107, 74, 0.1) 35%,      /* Warm mid-tone */
                rgba(62, 46, 30, 0.25) 65%,       /* Edge darkening */
                rgba(26, 22, 18, 0.45) 100%       /* Subtle vignette */
            );
            z-index: 2;
        }
        
        /* Hero text content - layered above slider */
        .hero-content {
            position: relative;
            z-index: 10;
            text-align: center;
            /* Compact padding for reduced spacing */
            padding: clamp(1.5rem, 2vw, 3rem) 1.25rem;
            max-width: 100%;
            width: 100%;
            margin: 0 auto;
        }

        /* ===== LUXURY HOTEL HERO HIERARCHY - Mamounia Inspired ===== */
        
        /* Brand Line - Elegant, refined identifier */
        .hero-brand {
            font-family: "Cormorant Garamond", serif;
            text-transform: uppercase;
            letter-spacing: 0.3em;
            font-weight: 400;
            font-size: 0.9rem;
            opacity: 0.85;
            margin-bottom: 24px;
            color: #f5f2ee;
            animation: fadeInUp 0.8s ease-out 0.1s forwards;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* Main Headline - Elegant serif, balanced lines */
        .hero-headline {
            font-family: "Cormorant Garamond", serif;
            font-weight: 500;
            font-size: clamp(2.5rem, 5vw, 4rem);
            line-height: 1.25;
            letter-spacing: 0.04em;
            margin-top: 0;
            margin-bottom: 28px;
            color: #f5f2ee;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            text-shadow: 
                0 3px 8px rgba(0, 0, 0, 0.65),
                0 8px 20px rgba(0, 0, 0, 0.55),
                0 15px 35px rgba(0, 0, 0, 0.45);
            animation: fadeInUp 0.9s ease-out 0.2s forwards;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .hero-headline-line {
            display: block;
        }
        
        /* Primary Description - Elegant serif */
        .hero-description {
            font-family: "Cormorant Garamond", serif;
            font-weight: 300;
            font-size: 1.15rem;
            line-height: 1.8;
            letter-spacing: 0.05em;
            max-width: 720px;
            margin: 0 auto 48px;
            opacity: 0.9;
            color: #f5f2ee;
            text-shadow: 
                0 2px 5px rgba(0, 0, 0, 0.55),
                0 4px 14px rgba(0, 0, 0, 0.45);
            animation: fadeInUp 0.9s ease-out 0.3s forwards;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* Supporting Line - Light serif */
        .hero-supporting {
            font-family: "Cormorant Garamond", serif;
            font-weight: 300;
            font-size: 1.15rem;
            line-height: 1.8;
            letter-spacing: 0.05em;
            max-width: 720px;
            margin: 0 auto 48px;
            opacity: 0.9;
            color: #f5f2ee;
            text-shadow: 
                0 2px 4px rgba(0, 0, 0, 0.5),
                0 3px 10px rgba(0, 0, 0, 0.4);
            animation: fadeInUp 0.9s ease-out 0.4s forwards;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* Primary CTA Button */
        .hero-cta-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: "Inter", sans-serif;
            font-size: 0.9rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 18px 48px;
            border-radius: 10px;
            background: #c39263;
            color: #ffffff;
            border: none;