body { font-family: 'Outfit', sans-serif; }
        h1, h2, h3, .heading-font { font-family: 'Poppins', sans-serif; }

         .font-inter {
            font-family: 'Inter', sans-serif;
        }
        /* Mobile Menu Smooth Transition */
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease-in-out;
            opacity: 0;
        }
        .mobile-menu.open {
            max-height: 600px;
            opacity: 1;
        }
        /* Slider Smooth Animation */
        .slide {
            opacity: 0;
            transition: opacity 1s ease-in-out;
            position: absolute;
            inset: 0;
        }
        .slide.active {
            opacity: 1;
            z-index: 10;
        }
        /* Smooth continuous floating for experience badge */
        @keyframes floatEffect {
            0%, 100% { transform: translateY(0px) rotate(-1deg); }
            50% { transform: translateY(-8px) rotate(1deg); }
        }
        .animate-premium-float {
            animation: floatEffect 5s infinite ease-in-out;
        }

        /* Scroll Reveal Initial States (JS updates these) */
        .reveal-element {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-element.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Premium gallery theme */
        :root {
            --accent: #e11d48;
            --muted: #6b7280;
            --bg-soft: linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
            --card-shadow: 0 18px 50px rgba(15,23,42,0.18);
        }

        .gallery-hero {
            background: radial-gradient(1200px 400px at 10% 10%, rgba(225,29,72,0.06), transparent 20%), var(--bg-soft);
            padding: 56px 16px;
            border-bottom: 1px solid rgba(15,23,42,0.04);
            margin-bottom: 28px;
        }
        .gallery-hero h1 { font-size: 2.25rem; margin: 0 0 8px; letter-spacing: -0.02em; }
        .gallery-hero p { color: var(--muted); margin: 0 0 4px; }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 20px;
        }
        .gallery-item {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
            box-shadow: var(--card-shadow);
        }
        .gallery-item img { display:block; width:100%; height:320px; object-fit:cover; transition: transform 0.6s cubic-bezier(.2,.9,.2,1), filter 0.35s ease; }
        .gallery-item:hover img { transform: scale(1.06); filter: saturate(1.05) contrast(1.02); }

        .gallery-item figcaption {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            padding: 14px 16px;
            color: #fff;
            background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.7) 100%);
            transform: translateY(100%);
            transition: transform 0.35s ease;
            font-size: 14px;
        }
        .gallery-item:hover figcaption { transform: translateY(0%); }

        /* Premium lightbox */
        .lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6,8,15,0.88); z-index:2200; padding: 36px; }
        .lightbox.open { display:flex; }
        .lightbox-img { max-width: 92%; max-height: 84%; border-radius: 8px; box-shadow: 0 30px 80px rgba(2,6,23,0.6); }
        .lightbox-close { position:absolute; top:22px; right:26px; background:transparent; color:#fff; border:none; font-size:36px; cursor:pointer; }
        .lightbox-prev, .lightbox-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.45); color:#fff; border:none; width:52px; height:52px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:28px; cursor:pointer; }
        .lightbox-prev { left:28px; }
        .lightbox-next { right:28px; }
        .lightbox-caption { position:absolute; left:0; right:0; bottom:24px; text-align:center; color:#e6eef8; font-size:15px; opacity:0.95; }

        @media (max-width:640px){
            .gallery-item img { height:200px; }
            .lightbox-prev, .lightbox-next { width:44px; height:44px; font-size:22px; }
        }


        /* Photo gallery styles */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
            align-items: stretch;
        }
        .gallery-item { margin: 0; overflow: hidden; border-radius: 8px; }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.35s ease, filter 0.35s ease;
            cursor: zoom-in;
        }
        .gallery-item img:hover { transform: scale(1.04); filter: brightness(0.95); }

        /* Lightbox overlay */
        .lightbox {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.85);
            z-index: 2000;
        }
        .lightbox.open { display:flex; }
        .lightbox-img { max-width: 92%; max-height: 86%; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
        .lightbox-close {
            position: absolute;
            top: 18px;
            right: 20px;
            background: transparent;
            color: #fff;
            border: none;
            font-size: 34px;
            line-height: 1;
            cursor: pointer;
        }


    
        /* Glassmorphic Effect for Card Elements and Badges */
        .glass-badge {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        /* Next-Level 3D Uplift Hover for Dark Theme */
        .premium-card {
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .premium-card:hover {
            transform: translateY(-14px) scale(1.01);
            box-shadow: 0 30px 60px rgba(220, 38, 38, 0.2), 0 10px 20px rgba(0, 0, 0, 0.6);
        }

        /* Dynamic background glow mesh */
        @keyframes meshGlow {
            0%, 100% { transform: translate(0px, 0px) scale(1); }
            50% { transform: translate(40px, -60px) scale(1.2); }
        }
        .animate-mesh {
            animation: meshGlow 10s infinite ease-in-out;
        }

                /* Subtle light pattern for premium texture */
        .light-mesh {
            background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
            background-size: 24px 24px;
        }

button.cursor-pointer span {
    font-size: 14px;
}

 /* Subtle light pattern for premium texture */
        .light-mesh {
            background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
            background-size: 24px 24px;
        }

             
        /* Premium light mesh texture */
        .light-mesh {
            background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
            background-size: 24px 24px;
        }

button.cursor-pointer {
    padding: 16px 20px;
}

 /* Ultra-smooth transition for accordion slide effect */
        .accordion-content {
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

         .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .fade-in-up.active {
            opacity: 1;
            transform: translateY(0);
        }

                /* Smooth Entrance Animations */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        a.relative.group {
    padding: 16px 20px;
}

button.relative {
    padding: 16px 20px;
}

a.inline-flex {
    padding: 16px 20px;
}
        
/* Premium Scrolling reveal helper hooks */
    .reveal-scroll {
        opacity: 0;
        transform: translateY(35px);
        transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .reveal-scroll.active {
        opacity: 1;
        transform: translateY(0);
    }

/* Premium Scrolling Animation Engine */
    .slide-up-view {
        opacity: 0;
        transform: translateY(45px);
        transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .slide-up-view.active {
        opacity: 1;
        transform: translateY(0);
    }

    /* Continuous scroll reveal animation engine */
    .reveal-grid-item {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
    }
    .reveal-grid-item.active {
        opacity: 1;
        transform: translateY(0);
    }

    /* Smooth Scroll Reveal Animations */
        .reveal-view {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-view.active {
            opacity: 1;
            transform: translateY(0);
        }

    /* Smooth Custom Cubic-Bezier Transitions */
        .chat-board-popup {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            pointer-events: none;
        }
        .chat-board-popup.open {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        /* Message scroll styling */
        #chat-stream::-webkit-scrollbar {
            width: 5px;
        }
        #chat-stream::-webkit-scrollbar-track {
            background: transparent;
        }
        #chat-stream::-webkit-scrollbar-thumb {
            background: #e4dec9;
            border-radius: 10px;
        }
        
        /* Premium Architecture Font Setups */
    .hero-font-sans { font-family: 'Plus Jakarta Sans', sans-serif; }
    .hero-font-mono { font-family: 'Space Grotesk', sans-serif; }
    
    /* Elegant Mesh Background Pattern */
    .light-mesh {
        background-color: #ffffff;
        background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
        background-size: 24px 24px;
    }

    @keyframes shimmer {
        100% { transform: translateX(100%); }
    }

/* Premium Floating Bubble Animations for the background */
    @keyframes floatBubble {
        0% { transform: translateY(100%) scale(0.8); opacity: 0; }
        50% { opacity: 0.4; }
        100% { transform: translateY(-100%) scale(1.2); opacity: 0; }
    }
    .bubble {
        position: absolute;
        bottom: -20px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 50%;
        pointer-events: none;
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
    }
    .bubble-1 { width: 40px; hieght: 40px; left: 10%; animation: floatBubble 8s infinite ease-in-out; }
    .bubble-2 { width: 20px; hieght: 20px; left: 40%; animation: floatBubble 6s infinite ease-in-out; animation-delay: 2s; }
    .bubble-3 { width: 60px; hieght: 60px; left: 75%; animation: floatBubble 11s infinite ease-in-out; animation-delay: 1s; }
    .bubble-4 { width: 30px; hieght: 30px; left: 90%; animation: floatBubble 7s infinite ease-in-out; animation-delay: 4s; }

    /* Scroll Entrance Animation */
    .reveal-cta {
        opacity: 0;
        transform: scale(0.96);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal-cta.active {
        opacity: 1;
        transform: scale(1);
    }





    /* Custom Keyframe Animations */
        @keyframes textReveal {
            from { opacity: 0; transform: translateY(40px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes pulseGlow {
            0%, 100% { transform: scale(1); opacity: 0.15; }
            50% { transform: scale(1.1); opacity: 0.3; }
        }
        .animate-text-reveal {
            animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .animate-glow {
            animation: pulseGlow 8s infinite ease-in-out;
        }

        @keyframes smoothFloat {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-10px) rotate(1deg); }
    }
    @keyframes pulseBlob {
        0%, 100% { transform: scale(1); opacity: 0.4; }
        50% { transform: scale(1.1); opacity: 0.6; }
    }
    .animate-premium-float {
        animation: smoothFloat 5s ease-in-out infinite;
    }
    .animate-blob-pulse {
        animation: pulseBlob 8s ease-in-out infinite;
    }
    /* Intersection Observer class hooks */
    .reveal-element {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .reveal-element.active {
        opacity: 1;
        transform: translateY(0);
    }

/* ===== Home hero slider ===== */
.hero-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 1s ease, transform 6s ease-out; }
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-copy { display: none; }
.hero-copy.active { display: block; animation: hero-copy-in .7s ease both; }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hero-progress { from { width: 0; } to { width: 100%; } }
#hero :is(h1, h2, h3), #approach h2, #structures h2 { font-family: 'Poppins', sans-serif; }

/* ===== Service detail page ===== */
.service-v2 :is(h1, h2, h3), footer h3 { font-family: 'Poppins', sans-serif; }
.service-rich a { color: #b8935a; text-decoration: underline; text-underline-offset: 2px; }
.service-v2 details summary::-webkit-details-marker { display: none; }
.tensile-body :is(h2, h3) { font-family: 'Poppins', sans-serif; }
.tensile-body details summary::-webkit-details-marker { display: none; }

/* ===== Admin rich text (Quill output) — the Tailwind typography plugin isn't loaded ===== */
:is(.rich-content, .prose) { color: #475569; line-height: 1.75; }
:is(.rich-content, .prose) > * + * { margin-top: 1rem; }
:is(.rich-content, .prose) :is(h2, h3, h4) { color: #0e1013; font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
:is(.rich-content, .prose) h2 { font-size: 1.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(14, 16, 19, 0.08); }
:is(.rich-content, .prose) h3 { font-size: 1.15rem; margin-top: 2rem; }
:is(.rich-content, .prose) > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
:is(.rich-content, .prose) :is(strong, b) { color: #0e1013; font-weight: 600; }
:is(.rich-content, .prose) a { color: #8a6a3b; text-decoration: underline; text-decoration-color: rgba(184, 147, 90, 0.5); text-underline-offset: 3px; }
:is(.rich-content, .prose) a:hover { color: #b8935a; }
:is(.rich-content, .prose) :is(ul, ol) { padding-left: 0; list-style: none; }
:is(.rich-content, .prose) li { position: relative; padding-left: 1.75rem; margin-top: 0.6rem; }
:is(.rich-content, .prose) :is(ul > li, ol > li[data-list="bullet"])::before { content: ''; position: absolute; left: 0.35rem; top: 0.7em; width: 7px; height: 7px; border-radius: 2px; background: #b8935a; transform: rotate(45deg); }
:is(.rich-content, .prose) ol { counter-reset: rich; }
:is(.rich-content, .prose) ol > li:not([data-list="bullet"]) { counter-increment: rich; }
:is(.rich-content, .prose) ol > li:not([data-list="bullet"])::before { content: counter(rich) '.'; position: absolute; left: 0; color: #b8935a; font-weight: 600; }
:is(.rich-content, .prose) blockquote { border-left: 3px solid #b8935a; padding-left: 1.25rem; color: #0e1013; font-style: italic; }
:is(.rich-content, .prose) .ql-ui { display: none; }
:is(.rich-content--dark, .prose-invert) { color: rgba(255, 255, 255, 0.7); }
:is(.rich-content--dark, .prose-invert) :is(h2, h3, h4, strong, b) { color: #fff; }
:is(.rich-content--dark, .prose-invert) a { color: #c9a46a; }