/* ==========================================================================
           FILE: style.css
           Glodesys Technologies - Earthy Clay Palette (#EFF3F1, #22333B, #5E8B7E, #C7A17A)
           & 3D Claymation Stop-Motion Diorama Styles
           ========================================================================== */
        :root {
            /* New 4-Color Palette from Swatch */
            --bg-primary: #EFF3F1;          /* Alabaster Mist / Soft Sage-White */
            --bg-secondary: #E4ECE8;        /* Deeper Soft Sage Tint for Alternating Sections */
            --bg-surface: #FFFFFF;          /* Crisp Card Surface */
            --primary-sage: #5E8B7E;        /* Muted Eucalyptus Sage */
            --primary-sage-dark: #497165;
            --primary-sage-light: #D7E5E0;
            --primary-sage-soft: #E8F0ED;
            --accent-sand: #C7A17A;         /* Warm Terracotta / Camel Sand */
            --accent-sand-hover: #B38B62;
            --accent-sand-light: #F3E8DC;
            --dark-slate: #22333B;          /* Deep Charcoal Slate */
            --text-heading: #22333B;
            --text-body: #3E525B;
            --text-muted: #627780;
            --border-light: #D5E0DC;
            --border-sage: #B8CEC7;

            /* Claymation Tactile Gradients */
            --grad-brand: linear-gradient(135deg, #22333B 0%, #5E8B7E 100%);
            --grad-accent: linear-gradient(135deg, #5E8B7E 0%, #C7A17A 100%);
            --grad-cta: linear-gradient(145deg, #D1AE8A 0%, #C7A17A 55%, #B0885E 100%);
            --grad-sage-clay: linear-gradient(145deg, #6FA092 0%, #5E8B7E 60%, #486F63 100%);
            --grad-dark-clay: linear-gradient(145deg, #2E444F 0%, #22333B 65%, #172329 100%);

            /* Typography */
            --font-heading: 'Sora', sans-serif;
            --font-body: 'Inter', sans-serif;

            /* Spacing & Rounded Clay Corners */
            --section-py: 6rem;
            --radius-sm: 0.9rem;
            --radius-md: 1.5rem;
            --radius-lg: 2rem;
            --radius-full: 9999px;

            /* Soft 3D Clay Shadows (Outer Drop + Subtle Inner Bevel) */
            --shadow-card: 0 14px 32px -6px rgba(34, 51, 59, 0.08), 0 4px 10px -2px rgba(94, 139, 126, 0.06), inset 0 2px 0 0 rgba(255, 255, 255, 0.85);
            --shadow-card-hover: 0 24px 48px -10px rgba(34, 51, 59, 0.15), 0 8px 20px -4px rgba(94, 139, 126, 0.12), inset 0 2px 0 0 rgba(255, 255, 255, 0.95);
            --shadow-sage: 0 12px 26px -5px rgba(94, 139, 126, 0.38), inset 0 2px 3px rgba(255, 255, 255, 0.35);
            --shadow-sand: 0 12px 26px -5px rgba(199, 161, 122, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(140, 102, 63, 0.35);
        }

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

        html {
            background-color: var(--bg-primary);
            color: var(--text-body);
            font-family: var(--font-body);
            line-height: 1.7;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-body);
            overflow-x: hidden;
            position: relative;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            color: var(--text-heading);
            line-height: 1.18;
            letter-spacing: -0.02em;
        }

        /* Palette Override Mapping for Utility Classes */
        .text-blue-600, .text-blue-700 { color: #5E8B7E !important; }
        .text-orange-500, .text-orange-600, .text-orange-700 { color: #C7A17A !important; }
        .text-slate-900, .text-slate-800 { color: #22333B !important; }
        .text-slate-700, .text-slate-600 { color: #3E525B !important; }
        .bg-blue-600, .bg-blue-700 { background-color: #5E8B7E !important; }
        .bg-blue-50, .bg-blue-100 { background-color: #DDE8E4 !important; }
        .bg-orange-500, .bg-orange-600 { background-color: #C7A17A !important; }
        .bg-orange-100 { background-color: #F3E8DC !important; }
        .border-blue-600 { border-color: #5E8B7E !important; }
        .border-blue-100, .border-blue-200 { border-color: #CEDCD7 !important; }
        .border-orange-200, .border-orange-500 { border-color: #C7A17A !important; }
        .bg-\[\#F5F8FF\] { background-color: #E4ECE8 !important; }
        .bg-\[\#1E3A8A\] { background-color: #22333B !important; }
        .hover\:bg-blue-600:hover { background-color: #5E8B7E !important; }
        .hover\:bg-orange-500:hover { background-color: #C7A17A !important; }
        .hover\:text-blue-600:hover { color: #5E8B7E !important; }
        .hover\:text-orange-400:hover, .hover\:text-orange-500:hover { color: #C7A17A !important; }
        .group:hover .group-hover\:bg-blue-600 { background-color: #5E8B7E !important; }
        .group:hover .group-hover\:bg-orange-500 { background-color: #C7A17A !important; }
        .group:hover .group-hover\:text-blue-600 { color: #5E8B7E !important; }
        .group:hover .group-hover\:text-orange-500 { color: #C7A17A !important; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-primary);
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--primary-sage), var(--accent-sand));
            border-radius: 5px;
        }

        /* Preloader */
        #preloader {
            position: fixed;
            inset: 0;
            background: var(--bg-primary);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        #preloader.loaded {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .loader-ring {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            border: 5px solid var(--primary-sage-light);
            border-top-color: var(--primary-sage);
            border-right-color: var(--accent-sand);
            animation: spin 0.9s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Custom Cursor Glow */
        #cursor-glow {
            position: fixed;
            width: 340px;
            height: 340px;
            background: radial-gradient(circle, rgba(94, 139, 126, 0.10) 0%, rgba(199, 161, 122, 0.07) 40%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            z-index: 40;
            display: none;
        }
        @media (pointer: fine) {
            #cursor-glow {
                display: block;
            }
        }

        /* Tactile Clay-Morphism Cards */
        .text-gradient {
            background: var(--grad-brand);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .glass-card {
            background: var(--bg-surface);
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-card);
            transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease;
        }
        .glass-card:hover {
            transform: translateY(-6px);
            border-color: var(--primary-sage);
            box-shadow: var(--shadow-card-hover);
        }

        /* Navbar Styling */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            background: rgba(239, 243, 241, 0.92);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(213, 224, 220, 0.9);
            transition: all 0.3s ease;
            padding: 1rem 0;
        }
        .site-header.scrolled {
            background: rgba(255, 255, 255, 0.97);
            padding: 0.75rem 0;
            box-shadow: 0 10px 28px -6px rgba(34, 51, 59, 0.09);
        }

        /* Nav Link Animated Underline */
        .nav-link {
            position: relative;
            color: var(--dark-slate);
            font-weight: 600;
            transition: color 0.25s ease;
            padding: 0.35rem 0;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: var(--primary-sage);
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 3px;
        }
        .nav-link:hover,
        .nav-link.active {
            color: var(--primary-sage);
        }
        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        /* 3D Clay Buttons */
        .btn-primary {
            background: var(--grad-cta);
            color: #22333B;
            font-weight: 800;
            font-family: var(--font-heading);
            padding: 0.9rem 1.9rem;
            border-radius: var(--radius-full);
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            box-shadow: var(--shadow-sand);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .btn-primary:hover {
            background: linear-gradient(145deg, #22333B 0%, #2E444F 100%);
            transform: translateY(-3px);
            box-shadow: 0 14px 30px -5px rgba(34, 51, 59, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.25);
            color: #EFF3F1;
        }
        .btn-secondary {
            background: var(--bg-surface);
            color: var(--dark-slate);
            font-weight: 700;
            font-family: var(--font-heading);
            padding: 0.9rem 1.9rem;
            border-radius: var(--radius-full);
            border: 2px solid var(--border-sage);
            box-shadow: inset 0 -3px 5px rgba(94, 139, 126, 0.12);
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            background: var(--primary-sage);
            border-color: var(--primary-sage);
            color: #FFFFFF;
            box-shadow: var(--shadow-sage);
            transform: translateY(-3px);
        }

        /* ==========================================================================
           CINEMATIC MP4 VIDEO HERO SLIDER
           Full-Bleed HTML5 Video Elements with Smooth Crossfading & Fallbacks
           ========================================================================== */
        .hero-slider {
            position: relative;
            width: 100%;
            min-height: 100vh;
            height: 920px;
            overflow: hidden;
            display: flex;
            align-items: center;
            background: #172328;
        }

        /* Multi-Video Background Viewport */
        .hero-video-viewport {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
            background-color: #1a272d;
        }

        .hero-video-item {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 1000ms cubic-bezier(0.65, 0, 0.35, 1), visibility 1000ms cubic-bezier(0.65, 0, 0.35, 1);
            will-change: opacity, transform;
            overflow: hidden;
        }

        .hero-video-item.active {
            opacity: 1;
            visibility: visible;
        }

        .hero-video-item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 35%;
            display: block;
            pointer-events: none;
            filter: contrast(1.05) saturate(1.08) brightness(0.96);
            transform: scale(1.01); /* Prevents subpixel edge bleeding */
        }

        /* Cinematic Atmospheric Lighting & Brand Vignette Overlays */
        .hero-cinema-vignette {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 65% 45%, rgba(94, 139, 126, 0.12) 0%, transparent 55%),
                        radial-gradient(circle at 20% 40%, rgba(34, 51, 59, 0.72) 0%, rgba(24, 37, 43, 0.45) 50%, rgba(18, 28, 33, 0.82) 100%),
                        linear-gradient(180deg, rgba(24, 37, 43, 0.4) 0%, transparent 28%, rgba(24, 37, 43, 0.35) 70%, #172328 100%);
            z-index: 4;
            pointer-events: none;
        }

        /* Text Contrast Card (Cinematic Frosted Glass Shading) */
        .hero-text-backdrop {
            background: rgba(24, 37, 43, 0.74);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(239, 243, 241, 0.22);
            border-radius: 2rem;
            padding: 2.25rem;
            box-shadow: 0 24px 50px -12px rgba(16, 25, 29, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.2);
        }
        @media (min-width: 1024px) {
            .hero-text-backdrop {
                padding: 2.75rem;
            }
        }

        /* Hero Slides Layer */
        .hero-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity 1000ms cubic-bezier(0.65, 0, 0.35, 1), visibility 1000ms cubic-bezier(0.65, 0, 0.35, 1);
            display: flex;
            align-items: center;
            padding-top: 5.5rem;
            padding-bottom: 5rem;
            z-index: 10;
            pointer-events: none;
        }
        .hero-slide.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* Slide Text Stagger Animations */
        .hero-slide .slide-badge,
        .hero-slide .slide-word,
        .hero-slide .slide-desc,
        .hero-slide .slide-btns {
            opacity: 0;
            transform: translateY(26px);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(1, 1, 0.3, 1);
        }
        .hero-slide.active .slide-badge {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.12s;
        }
        .hero-slide.active .slide-word {
            opacity: 1;
            transform: translateY(0);
        }
        .hero-slide.active .slide-desc {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.45s;
        }
        .hero-slide.active .slide-btns {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.58s;
        }

        /* Slider Progress Bar */
        .slider-progress-track {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: rgba(34, 51, 59, 0.6);
            z-index: 30;
        }
        .slider-progress-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--dark-slate), var(--primary-sage), var(--accent-sand));
        }

        /* Inner Page Claymation Light Banners */
        .light-page-banner {
            background: linear-gradient(180deg, #DDE7E3 0%, #EFF3F1 70%, #E4ECE8 100%);
            position: relative;
            overflow: hidden;
        }

        /* Infinite Marquee */
        .marquee-wrapper {
            overflow: hidden;
            user-select: none;
            display: flex;
            gap: 2rem;
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }
        .marquee-track {
            display: flex;
            flex-shrink: 0;
            gap: 2rem;
            min-width: 100%;
            animation: scrollMarquee 28s linear infinite;
        }
        .marquee-wrapper:hover .marquee-track {
            animation-play-state: paused;
        }
        @keyframes scrollMarquee {
            from { transform: translateX(0); }
            to { transform: translateX(calc(-100% - 2rem)); }
        }

        /* Scroll-Reveal Animations */
        .reveal {
            opacity: 0;
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: opacity, transform;
        }
        .reveal.fade-up { transform: translateY(40px); }
        .reveal.fade-left { transform: translateX(-45px); }
        .reveal.fade-right { transform: translateX(45px); }
        .reveal.zoom-in { transform: scale(0.92); }
        .reveal.visible {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }

        /* Floating Labels for Contact Form */
        .floating-group {
            position: relative;
        }
        .floating-input {
            width: 100%;
            background: #FFFFFF;
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-sm);
            padding: 1.35rem 1rem 0.55rem;
            color: var(--text-heading);
            font-size: 0.95rem;
            outline: none;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .floating-input:focus {
            border-color: var(--primary-sage);
            box-shadow: 0 0 0 4px rgba(94, 139, 126, 0.15);
        }
        .floating-input.input-error {
            border-color: #EF4444;
            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
        }
        .floating-label {
            position: absolute;
            left: 1rem;
            top: 0.95rem;
            color: var(--text-muted);
            font-size: 0.95rem;
            pointer-events: none;
            transition: all 0.22s ease;
        }
        .floating-input:focus ~ .floating-label,
        .floating-input:not(:placeholder-shown) ~ .floating-label {
            top: 0.35rem;
            font-size: 0.72rem;
            color: var(--primary-sage);
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        /* Multi-Page View Visibility */
        .page-view {
            display: none;
            animation: pageFadeIn 0.45s ease forwards;
        }
        .page-view.active-page {
            display: block;
        }
        @keyframes pageFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Floating WhatsApp & Back to Top */
        .whatsapp-float {
            position: fixed;
            bottom: 1.75rem;
            right: 1.75rem;
            z-index: 90;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .whatsapp-float:hover {
            transform: translateY(-5px) scale(1.06);
            box-shadow: 0 15px 35px rgba(37, 211, 102, 0.6);
        }
        .whatsapp-pulse {
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid #25D366;
            animation: waPulse 2s infinite;
            pointer-events: none;
        }
        @keyframes waPulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.45); opacity: 0; }
        }

        #back-to-top {
            position: fixed;
            bottom: 1.75rem;
            left: 1.75rem;
            z-index: 90;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #FFFFFF;
            border: 2px solid var(--border-sage);
            color: var(--dark-slate);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-card);
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        #back-to-top.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        #back-to-top:hover {
            background: var(--dark-slate);
            color: #EFF3F1;
            border-color: var(--dark-slate);
        }

        /* Responsive Panoramic Scaling on Mobile */
        @media (max-width: 768px) {
            .panorama-layer svg {
                object-fit: cover;
            }
        }

        /* Reduced Motion Support */
        @media (prefers-reduced-motion: reduce) {
            *, ::before, ::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }
        /* FIX: Fully opaque mobile navigation drawer */
@media (max-width: 1024px) {
    #mobile-drawer {
        position: fixed !important;
        inset: 0 !important;
        z-index: 999999 !important;
        isolation: isolate !important;
        overflow: hidden !important;
    }

    #mobile-backdrop {
        position: absolute !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, 0.65) !important;
        opacity: 1;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #mobile-panel {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        width: min(360px, 88vw) !important;
        max-width: 88vw !important;

        background: #17272b !important;
        background-color: #17272b !important;
        background-image: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        mix-blend-mode: normal !important;

        color: #eff3f1 !important;
        z-index: 2 !important;
        isolation: isolate !important;
        box-shadow: -12px 0 35px rgba(0, 0, 0, 0.35) !important;
    }

    #mobile-panel nav,
    #mobile-panel > div {
        background-color: transparent;
    }

    #mobile-panel .mobile-nav-link {
        color: #eff3f1 !important;
    }

    #mobile-panel .mobile-nav-link.bg-blue-50 {
        background-color: #dce8e3 !important;
        color: #497165 !important;
    }

    #mobile-panel .mobile-nav-link:hover {
        background-color: #2b4146 !important;
    }
}
/* Mobile navigation drawer - structural fix */
@media (max-width: 1023px) {
  #mobile-drawer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 2147483647 !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }

  #mobile-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: none !important;
  }

  #mobile-panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(360px, 88vw) !important;
    max-width: 88vw !important;
    height: 100% !important;
    overflow-y: auto !important;
    background: #17272b !important;
    background-color: #17272b !important;
    color: #eff3f1 !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }

  #mobile-panel a,
  #mobile-panel p,
  #mobile-panel span {
    color: #eff3f1;
  }

  #mobile-panel .mobile-nav-link.bg-blue-50 {
    background: #dce8e3 !important;
    color: #22333b !important;
  }
}