/* -----------------------
   DEENG RESPONSIVE STICKY NAVBAR
   ----------------------- */

.deeng-navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 72px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Completely transparent on hero */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    box-shadow: none;

    transition:
        background 0.35s ease,
        backdrop-filter 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        height 0.35s ease;
}

/* Added after scrolling */
.deeng-navbar.deeng-navbar-scrolled {
    height: 68px;
    background: rgba(11, 17, 32, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
}

.deeng-logo {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffffff;
    text-decoration: none;
    z-index: 1001;
}

.deeng-nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 38px;
    padding: 0;
    margin: 0;
}

.deeng-nav-links li a {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.deeng-nav-links li a:hover {
    opacity: 0.7;
}

.deeng-btn-nav {
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 10px 12px 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deeng-btn-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
}

.deeng-btn-icon-dark {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #000000;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 10px;
}

.deeng-btn-icon-dark i {
    transform: rotate(-45deg);
}

/* Hamburger */
.deeng-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.deeng-menu-toggle span {
    width: 18px;
    height: 2px;
    background: #000000;
    border-radius: 20px;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.deeng-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.deeng-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.deeng-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Overlay */
.deeng-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.55);
    z-index: 990;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.deeng-mobile-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile */
@media (max-width: 900px) {
    .deeng-navbar {
        height: 70px;
        padding: 0 22px;
    }

    .deeng-navbar.deeng-navbar-scrolled {
        height: 66px;
    }

    .deeng-menu-toggle {
        display: flex;
    }

    .deeng-btn-nav {
        display: none;
    }

    .deeng-nav-links {
        position: fixed;
        top: 82px;
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        width: calc(100% - 32px);
        max-width: 430px;
        background: rgba(11, 17, 32, 0.98);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 22px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
        z-index: 1000;
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    }

    .deeng-nav-links.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .deeng-nav-links li {
        width: 100%;
    }

    .deeng-nav-links li a {
        width: 100%;
        display: flex;
        padding: 15px 16px;
        border-radius: 14px;
        font-size: 15px;
        background: rgba(255, 255, 255, 0.04);
    }

    .deeng-nav-links li a:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1);
    }

    .deeng-nav-links::after {
        content: "Get in touch";
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        padding: 15px 18px;
        border-radius: 999px;
        background: #ffffff;
        color: #000000;
        font-size: 14px;
        font-weight: 800;
    }
}

/* -----------------------
       Hero Section & Slider
       ----------------------- */
    .hero-section {
        position: relative;
        width: 100vw;
        height: 100vh;
        min-height: 800px;
        display: flex;
        align-items: flex-end; 
        overflow: hidden;
    }

    .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('/images/hero.jpeg');
        background-size: cover;
        background-position: center;
        z-index: 0;
    }

    .bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(13,18,25,0.4) 0%, rgba(13,18,25,0.8) 60%, rgba(13,18,25,1) 100%);
        z-index: 1;
    }

    .bg-text {
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 28vw;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.2);
        line-height: 1;
        z-index: 1;
        pointer-events: none;
        letter-spacing: -5px;
    }

    .grid-lines {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px);
        background-size: 20% 100%;
        z-index: 2;
        pointer-events: none;
    }

    .hero-content {
        position: relative;
        z-index: 10;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0 5% 60px 5%;
    }

    .hero-left { max-width: 650px; }

    .subtitle {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 20px;
        letter-spacing: 0.5px;
    }

    .title {
        font-size: clamp(48px, 5vw, 72px);
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: -1.5px;
        margin-bottom: 50px;
    }

    .hero-left-bottom {
        display: flex;
        align-items: flex-start;
        gap: 50px;
    }

    .btn-main {
        background-color: var(--primary-accent);
        color: #000;
        border: none;
        padding: 12px 16px 12px 28px;
        border-radius: 40px;
        font-family: var(--font-main);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 16px;
        transition: transform 0.3s ease;
        white-space: nowrap;
        text-decoration: none;
    }

    .btn-main:hover { transform: translateY(-2px); }

    .desc-text {
        font-size: 14px;
        line-height: 1.6;
        color: var(--text-muted);
        max-width: 380px;
    }

    .hero-right {
        display: flex;
        justify-content: flex-end;
    }

    .glass-slider {
        width: 360px;
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 30px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        position: relative;
    }

    .slider-viewport {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .slides-container {
        display: flex;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .slide {
        min-width: 100%;
        display: flex;
        flex-direction: column;
    }

    .slide-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .slide-subtitle {
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 25px;
        line-height: 1.4;
    }

    .slide-img-wrapper {
        width: 100%;
        height: 160px;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .slide-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .slide-img-wrapper:hover .slide-img { transform: scale(1.05); }

    .slider-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 25px;
    }

    .dots {
        display: flex;
        gap: 6px;
    }

    .dot {
        width: 20px;
        height: 4px;
        background-color: rgba(255,255,255,0.3);
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease, width 0.3s ease;
    }

    .dot.active {
        background-color: var(--primary-accent);
        width: 30px;
    }

    .arrows {
        display: flex;
        gap: 15px;
    }

    .arrow-btn {
        background: transparent;
        border: none;
        color: rgba(255,255,255,0.5);
        font-size: 16px;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    .arrow-btn:hover { color: #ffffff; }


    /* -----------------------
       Stats & Intro Section
       ----------------------- */
    .intro-section {
        background-color: #ffffff;
        color: #000000;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        width: 100vw;
    }

    .intro-container {
        display: grid;
        grid-template-columns: 4fr 6fr;
        width: 100%;
    }

    .intro-left {
        padding: 120px 40px 120px 5vw;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .intro-left h2 {
        font-size: clamp(64px, 8vw, 90px);
        font-weight: 600;
        line-height: 1;
        letter-spacing: -3px;
        margin-bottom: 10px;
    }

    .intro-left .sub-text {
        font-size: 15px;
        color: #4b5563;
        margin-bottom: 50px;
        font-weight: 500;
    }

    .trusted-block {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .avatar-group { display: flex; }
    .avatar-group img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        margin-left: -12px;
        object-fit: cover;
    }
    .avatar-group img:first-child { margin-left: 0; }

    .trusted-text {
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .trusted-text i { color: #f59e0b; font-size: 12px; }

    .intro-right {
        padding: 120px 5vw 120px 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .intro-right h3 {
        font-size: clamp(28px, 3.5vw, 42px);
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -1px;
        margin-bottom: 30px;
        max-width: 750px;
    }

    .intro-right p {
        font-size: 15px;
        line-height: 1.8;
        color: #6b7280;
        max-width: 750px;
    }


    /* -----------------------
       Masterpiece Showcase (Animated)
       ----------------------- */
    .showcase-section {
        padding: 120px 5vw;
        background-color: #ffffff;
        overflow: hidden; /* Important for hiding cards off-canvas during animation */
        width: 100vw;
    }

    .showcase-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        max-width: 1400px;
        margin: 0 auto;
        position: relative;
    }

    .sc-card {
        border-radius: 20px;
        height: 480px;
        position: relative;
        overflow: hidden;
        /* Animation Base */
        transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
        will-change: transform, opacity;
    }

    /* Initial Hidden/Stacked State */
    .sc-card:nth-child(1) {
        z-index: 3;
        opacity: 0;
        transform: translateY(40px); /* Base card fades up */
    }

    .sc-card:nth-child(2) {
        z-index: 2;
        /* Pull completely left to hide exactly behind Card 1 */
        transform: translateX(calc(-100% - 30px)) scale(0.92);
        opacity: 0;
    }

    .sc-card:nth-child(3) {
        z-index: 1;
        /* Pull completely left to hide exactly behind Card 1 */
        transform: translateX(calc(-200% - 60px)) scale(0.85);
        opacity: 0;
    }

    /* Unstacked Animated State (Triggered via JS class) */
    .showcase-section.is-visible .sc-card:nth-child(1) {
        transform: translateY(0);
        opacity: 1;
        transition-delay: 0s;
    }

    .showcase-section.is-visible .sc-card:nth-child(2) {
        transform: translateX(0) scale(1);
        opacity: 1;
        transition-delay: 0.15s;
    }

    .showcase-section.is-visible .sc-card:nth-child(3) {
        transform: translateX(0) scale(1);
        opacity: 1;
        transition-delay: 0.3s;
    }

    /* Card 1: Video Styles */
    .sc-video .sc-bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .sc-play-btn {
        position: absolute;
        bottom: 30px;
        left: 30px;
        width: 55px;
        height: 55px;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        cursor: pointer;
        transition: transform 0.3s ease, background 0.3s ease;
    }
    .sc-play-btn:hover {
        transform: scale(1.1);
        background: rgba(255, 255, 255, 0.4);
    }

    /* Card 2: Dark Styles */
    .sc-dark {
        background-color: #0b1120;
        color: white;
        padding: 50px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .sc-title {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.3;
    }
    .sc-desc {
        color: #94a3b8;
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 40px;
    }
    .sc-btn {
        background-color: white;
        color: black;
        padding: 10px 14px 10px 20px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: transform 0.3s ease;
    }
    .sc-btn:hover { transform: translateY(-3px); }
    .sc-btn-icon {
        background-color: black;
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    /* Card 3: Light Styles */
    .sc-light {
        background-color: #f8f9fa;
        padding: 20px;
        display: flex;
        flex-direction: column;
    }
    .sc-light-img-wrap {
        width: 100%;
        height: 280px;
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 30px;
    }
    .sc-light-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .sc-light-text h4 {
        font-size: 24px;
        font-weight: 700;
        color: #000;
        line-height: 1.3;
        padding: 0 10px;
    }

    /* Mobile Responsive Breakpoints */
    @media (max-width: 1024px) {
        .bg-text { font-size: 35vw; top: 25%; }
        .hero-content {
            flex-direction: column;
            align-items: flex-start;
            gap: 60px;
            padding-bottom: 40px;
            padding-top: 120px;
        }
        .hero-left-bottom {
            flex-direction: column;
            gap: 30px;
        }
        .glass-slider { width: 100%; max-width: 400px; }
        
        .intro-container { grid-template-columns: 1fr; }
        .intro-left {
            border-right: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding: 80px 5vw;
        }
        .intro-right { padding: 80px 5vw; }

        .showcase-grid { grid-template-columns: 1fr; gap: 40px; }
        
        /* Disable complex stacking animation on mobile, convert to simple fade-up */
        .sc-card:nth-child(2), .sc-card:nth-child(3) {
            transform: translateY(40px) scale(0.95);
        }
        .showcase-section.is-visible .sc-card:nth-child(2),
        .showcase-section.is-visible .sc-card:nth-child(3) {
            transform: translateY(0) scale(1);
        }
    }

    .outcomes-section {
        position: relative;
        background-color: #fcfcfc;
        padding: 150px 0;
        overflow: hidden; 
        display: flex;
        align-items: center;
        min-height: 900px; /* Increased to accommodate taller image */
    }

    /* Background Marquee Logic */
    .marquee-background {
        position: absolute;
        top: 30%; /* Higher position */
        left: 0;
        width: 100%;
        pointer-events: none;
        z-index: 1;
        white-space: nowrap;
    }

    .marquee-inner {
        display: inline-block;
        font-family: 'Syne', sans-serif;
        font-size: 10rem;
        font-weight: 400; /* Not bold */
        color: rgba(0, 0, 0, 0.04);
        animation: marquee-scroll 40s linear infinite; /* Slower */
    }

    @keyframes marquee-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }

    /* Foreground Content Layout */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 2; }
    
    .content-wrapper {
        display: flex;
        align-items: center;
        gap: 100px;
    }

    .text-block { flex: 1; }
    .text-block h2 { font-size: 48px; font-weight: 700; margin-bottom: 25px; line-height: 1.1; color: #000; }
    .text-block p { font-size: 15px; color: #030303; margin-bottom: 30px; line-height: 1.6; max-width: 450px; }
    
    .view-btn {
        background: #0b1120;
        color: white;
        padding: 12px 25px;
        border-radius: 30px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
    }

    .image-block {
        flex: 1;
        height: 650px; /* Taller image */
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }
    .image-block img { width: 100%; height: 100%; object-fit: cover; }

/* Capability Section Scoped Styles */
    :root { --cap-bg: #0f1d34; --cap-panel: #283852; --cap-text: #ffffff; --cap-muted: rgba(255, 255, 255, 0.55); --cap-line: rgba(255, 255, 255, 0.22); --cap-cream: #fff4e5; --cap-radius: 18px; }

    .capability-section {
        min-height: 100vh;
        background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.045), transparent 28%), linear-gradient(135deg, #0f1d34 0%, #101f38 60%, #0c182d 100%);
        display: flex;
        align-items: center;
        padding: 90px 24px;
        overflow: hidden;
        color: var(--cap-text);
    }

    .capability-container { width: min(1320px, 100%); margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.25fr; gap: 90px; align-items: center; }
    .left-content { position: relative; min-height: 610px; }
    .left-content h1 { font-size: clamp(34px, 4vw, 58px); line-height: 0.98; letter-spacing: -2.8px; max-width: 480px; margin-bottom: 55px; font-weight: 800; }
    
    /* Image Stage */
    .image-stage { position: relative; width: min(430px, 100%); height: 360px; border-radius: var(--cap-radius); overflow: hidden; background: rgba(255, 255, 255, 0.08); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.33); isolation: isolate; }
    .image-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.14) 45%, transparent 65%); transform: translateX(-130%); transition: transform 0.9s cubic-bezier(.22,1,.36,1); z-index: 3; pointer-events: none; }
    .image-stage.is-changing::after { transform: translateX(130%); }
    .service-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08) translateY(20px); filter: blur(9px) saturate(0.9); transition: opacity 0.75s cubic-bezier(.22,1,.36,1), transform 1.15s cubic-bezier(.22,1,.36,1), filter 0.85s cubic-bezier(.22,1,.36,1); }
    .service-image.active { opacity: 1; transform: scale(1) translateY(0); filter: blur(0) saturate(1.05); z-index: 2; }

    /* Captions */
    .image-caption-wrap { position: relative; width: min(430px, 100%); margin-top: 28px; min-height: 105px; }
    .service-caption { position: absolute; inset: 0; opacity: 0; transform: translateY(22px); filter: blur(5px); transition: opacity 0.55s ease, transform 0.75s cubic-bezier(.22,1,.36,1), filter 0.65s ease; }
    .service-caption.active { opacity: 1; transform: translateY(0); filter: blur(0); }
    .service-caption h3 { font-size: 18px; margin-bottom: 10px; font-weight: 800; }
    .service-caption p { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.88); font-weight: 600; }

    /* Right List */
    .project-btn { border: none; background: #ffffff; color: #08101d; border-radius: 999px; padding: 12px 14px 12px 22px; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 13px; cursor: pointer; transition: transform 0.35s ease, box-shadow 0.35s ease; }
    .project-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
    .project-btn span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #000; color: #fff; font-size: 14px; transition: transform 0.35s ease; }
    .project-btn:hover span { transform: rotate(45deg); }

    .service-list { border-top: 1px solid var(--cap-line); }
    .service-row { position: relative; height: 92px; display: grid; grid-template-columns: 90px 1fr 70px; align-items: center; border-bottom: 1px solid var(--cap-line); cursor: pointer; padding: 0 30px; isolation: isolate; }
    .service-row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.13), rgba(255,255,255,0.07)); transform: scaleX(0); transform-origin: left; transition: transform 0.55s cubic-bezier(.22,1,.36,1); z-index: -1; }
    .service-row:hover::before, .service-row.active::before { transform: scaleX(1); }
    .arrow-circle { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.26); display: grid; place-items: center; color: var(--cap-muted); font-size: 29px; transition: all 0.45s cubic-bezier(.22,1,.36,1); }
    .service-row.active .arrow-circle, .service-row:hover .arrow-circle { background: var(--cap-cream); border-color: var(--cap-cream); color: #121212; transform: translateX(-7px) rotate(180deg); }
    .service-title { font-size: clamp(19px, 2vw, 23px); font-weight: 800; color: var(--cap-muted); justify-self: center; transition: color 0.45s ease, transform 0.45s ease; }
    .service-row.active .service-title, .service-row:hover .service-title { color: #ffffff; transform: translateX(-8px); }
    .service-number { font-size: 29px; font-weight: 900; color: var(--cap-muted); letter-spacing: -1px; transition: color 0.45s ease, transform 0.45s ease; justify-self: end; }
    .service-row.active .service-number, .service-row:hover .service-number { color: #ffffff; transform: translateX(6px); }

    @media (max-width: 1000px) {
      .capability-container { grid-template-columns: 1fr; }
      .left-content { min-height: auto; }
    }

    /* -----------------------
       ARCHITECTURAL DESIGN SECTION
       ----------------------- */
    .arch-section {
        position: relative;
        width: 100vw;
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 100px 5vw;
        overflow: hidden;
    }

    /* Video Background */
    .arch-video-bg {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    .arch-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.4); /* Darkens video for text readability */
        z-index: 2;
    }

    /* Layout Container */
    .arch-container {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
        max-width: 1400px;
        margin: 0 auto;
    }

    /* Left Side Text */
    .arch-text h2 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: clamp(40px, 5vw, 64px);
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: 20px;
    }

    .arch-text p {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.8);
        max-width: 400px;
    }

    /* Glassmorphism Cards Container */
    .arch-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-content: start;
    }

    .glass-card {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 30px;
        color: white;
    }

    /* Specific Grid Arrangement for Staggered Look */
    .glass-card:nth-child(2) { margin-top: 60px; } /* Staggers the middle card */

    .glass-card h4 { font-size: 18px; margin-bottom: 15px; }
    .glass-card p { font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.6; }

    /* Button Style */
    .discover-btn {
        margin-top: 20px;
        background: white;
        color: black;
        padding: 10px 20px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 700;
        display: inline-block;
        text-decoration: none;
    }

    @media (max-width: 1024px) {
        .arch-container { grid-template-columns: 1fr; }
        .arch-cards { margin-top: 40px; }
    }

  /* 1. SECTION WRAPPER */
    .stats-section { width: 100%; padding: 91px 20px 84px; background: #ffffff; }
    .section-title { max-width: 660px; margin: 0 auto 38px; text-align: center; font-size: 34px; line-height: 1.14; letter-spacing: -1.55px; font-weight: 700; color: #111111; }
    .stats-wrapper { width: min(1320px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); background: #f8f8f8; border-radius: 14px; overflow: hidden; }

    /* 2. CARD STATES (The Color Inversion Logic) */
    .stat-card {
        height: 391px; padding: 28px 36px 39px; border-right: 1px solid #c9c9c9;
        display: flex; flex-direction: column; justify-content: space-between;
        position: relative;
        /* Default: Light Background, Dark Text */
        background: #f8f8f8; 
        color: #111111; 
        transition: background-color 0.45s ease, color 0.45s ease;
    }

    /* Hover & Featured: Dark Background, White Text */
    .stat-card.featured,
    .stat-card:hover {
        background: #0f1e35; 
        color: #ffffff; 
    }

    .stat-card:last-child { border-right: none; }

    /* 3. ELEMENTS (Inherit parent color) */
    .number { font-size: clamp(58px, 5vw, 63px); line-height: 0.92; letter-spacing: -4.4px; font-weight: 400; color: inherit; }
    
    .divider { width: 100%; height: 1px; background: #c9c9c9; margin-top: 12px; transition: background-color 0.45s ease; }
    .stat-card.featured .divider,
    .stat-card:hover .divider { background: rgba(255,255,255,0.42); }

    .card-bottom { min-height: 93px; }
    .card-title { font-size: 16px; line-height: 1.25; font-weight: 700; letter-spacing: -0.45px; margin-bottom: 22px; color: inherit; }
    .card-text { max-width: 260px; font-size: 12px; line-height: 1.52; letter-spacing: -0.28px; font-weight: 500; color: inherit; opacity: 0.8; }

    /* Responsive */
    @media (max-width: 1100px) {
        .stats-wrapper { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
        .stat-card { border-bottom: 1px solid #c9c9c9; }
        .stat-card:nth-child(2) { border-right: none; }
        .stat-card:nth-child(3), .stat-card:nth-child(4) { border-bottom: none; }
    }
    @media (max-width: 640px) {
        .stats-wrapper { grid-template-columns: 1fr; }
        .stat-card { border-right: none; border-bottom: 1px solid #c9c9c9; }
    }

        :root {
            --font-main: 'Inter', sans-serif;
            --text-color: #ffffff;
            --text-muted: rgba(255, 255, 255, 0.7);
            --bg-color: #0d1219;
            --primary-accent: #ffffff;
            --glass-bg: rgba(255, 255, 255, 0.08);
            --glass-border: rgba(255, 255, 255, 0.15);
        }

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

        body {
            font-family: var(--font-main);
            color: var(--text-color);
            background-color: var(--bg-color);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* -----------------------
           Navbar (Global Layout)
           ----------------------- */
        .navbar {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 5%;
            width: 100%;
        }

        .logo {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--text-color);
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 40px;
        }

        .nav-links li a {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-color);
            text-decoration: none;
            transition: opacity 0.3s ease;
            letter-spacing: 0.5px;
        }

        .nav-links li a:hover {
            opacity: 0.7;
        }

        .btn-nav {
            background-color: var(--primary-accent);
            color: #000;
            border: none;
            padding: 10px 14px 10px 24px;
            border-radius: 40px;
            font-family: var(--font-main);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: transform 0.3s ease;
            text-decoration: none;
        }

        .btn-nav:hover {
            transform: translateY(-2px);
        }

        .btn-icon-dark {
            background-color: #000;
            color: #fff;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }

        /* Responsive Nav */
        @media (max-width: 1024px) {
            .nav-links { display: none; }
        }



/* =========================================================
   ABOUT PAGE STYLES - CLEANED FOR MAIN style.css
   Paste this at the bottom of public/assets/css/style.css
   ========================================================= */
/* -----------------------
       ABOUT HERO SECTION
       ----------------------- */
    .about-hero {
        position: relative;
        background-color: var(--bg-dark, #0f1115);
        color: #ffffff;
        padding: 160px 5vw 80px; /* Accounts for fixed navbar */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        overflow: hidden;
    }

    /* Top Badge */
    .about-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 8px 16px;
        border-radius: 40px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 30px;
    }

    .about-badge .about-badge-dot {
        width: 6px;
        height: 6px;
        background-color: #ffffff;
        border-radius: 50%;
    }

    /* Main Title */
    .about-title {
        font-family: 'Syne', sans-serif;
        font-size: clamp(40px, 6vw, 76px);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -2px;
        max-width: 900px;
        margin-bottom: 70px;
    }

    /* Image Showcase & Wrapper */
    .about-showcase {
        position: relative;
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
    }

    .about-main-img {
        width: 100%;
        height: 600px; /* Fixed height for consistent aspect ratio */
        object-fit: cover;
        border-radius: 30px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    }

    /* Glassmorphism Floating Cards */
    .about-glass-floating-card {
        position: absolute;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 20px;
        padding: 20px 24px;
        display: flex;
        align-items: center;
        gap: 15px;
        color: #ffffff;
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        z-index: 10;
        animation: about-float 6s ease-in-out infinite;
    }

    /* Left Card: Vision */
    .about-card-left {
        top: 25%;
        left: -40px; /* Overlaps the edge */
    }

    .about-card-left .about-avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255,255,255,0.2);
    }

    .about-card-left .about-text-group {
        text-align: left;
    }

    .about-card-left .about-text-group span {
        display: block;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
    }

    .about-card-left .about-arrow-icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-left: 10px;
    }

    /* Right Card: 20+ Years */
    .about-card-right {
        bottom: 15%;
        right: -40px; /* Overlaps the edge */
        animation-delay: -3s; /* Desync the floating animation */
    }

    .about-card-right .about-star-icon {
        background-color: var(--accent, #c5a880);
        color: #000;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .about-card-right .about-card-stats {
        text-align: left;
    }

    .about-card-right .about-card-stats h4 {
        font-size: 24px;
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        margin: 0;
        line-height: 1;
    }

    .about-card-right .about-card-stats p {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        margin: 5px 0 0 0;
        font-weight: 500;
    }

    /* Floating Animation Keyframes */
    @keyframes about-float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
        100% { transform: translateY(0px); }
    }

    /* Responsive Adjustments */
    @media (max-width: 1024px) {
        .about-main-img { height: 500px; }
        .about-card-left { left: 20px; top: -30px; }
        .about-card-right { right: 20px; bottom: -30px; }
    }

    @media (max-width: 768px) {
        .about-main-img { height: 400px; border-radius: 20px; }
        .about-title { font-size: 36px; margin-bottom: 50px; }
        .about-card-left, .about-card-right {
            position: relative;
            top: auto; left: auto; right: auto; bottom: auto;
            margin: -20px auto 20px auto;
            width: 90%;
            justify-content: center;
        }
        .about-showcase { display: flex; flex-direction: column; }
    }

  /* -----------------------
       ABOUT: STRATEGY SECTION
       ----------------------- */
    .strategy-section {
        background-color: #ffffff;
        padding: 120px 5vw;
        color: #000000;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .strategy-container {
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 split */
        gap: 60px;
        align-items: stretch;
    }

    /* --- Left Column --- */
    .strategy-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 60px;
    }

    /* Top Text & Stats */
    .strategy-text-content h2 {
        font-family: 'Syne', sans-serif;
        font-size: clamp(36px, 4vw, 48px);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -1px;
        margin-bottom: 20px;
        max-width: 550px;
    }

    .strategy-text-content p {
        font-size: 14px;
        line-height: 1.6;
        color: #6b7280;
        margin-bottom: 40px;
        max-width: 500px;
    }

    /* Button and Stats Inline Row */
    .strategy-actions-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 40px;
    }

    .about-btn-dark {
        background-color: #0f172a;
        color: #ffffff;
        padding: 12px 16px 12px 24px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        transition: transform 0.3s ease;
    }

    .about-btn-dark:hover { transform: translateY(-2px); }

    .about-btn-icon-light {
        background-color: #ffffff;
        color: #0f172a;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    /* Inline Stats */
    .strategy-inline-stats {
        display: flex;
        align-items: center;
    }

    .strategy-inline-stat-item {
        padding: 0 25px;
        border-right: 1px solid #e5e7eb;
    }

    .strategy-inline-stat-item:first-child { padding-left: 0; }
    .strategy-inline-stat-item:last-child { border-right: none; padding-right: 0; }

    .strategy-inline-stat-item h4 {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -1px;
        margin-bottom: 4px;
    }

    .strategy-inline-stat-item span {
        font-size: 11px;
        color: #6b7280;
        display: block;
    }

    /* Horizontal Video Wrapper */
    .strategy-video-wrapper {
        position: relative;
        width: 100%;
        height: 250px;
        border-radius: 20px;
        overflow: hidden;
    }

    .strategy-video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pause-overlay-btn {
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: none;
        border-radius: 50%;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .pause-overlay-btn:hover { background: rgba(0, 0, 0, 0.7); }

    /* --- Right Column --- */
    .strategy-right {
        width: 100%;
        height: 100%;
    }

    .strategy-tall-img {
        width: 100%;
        height: 100%;
        min-height: 600px;
        object-fit: cover;
        border-radius: 20px;
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .strategy-container { grid-template-columns: 1fr; gap: 40px; }
        .strategy-tall-img { min-height: 400px; }
    }

    @media (max-width: 640px) {
        .strategy-actions-row { flex-direction: column; align-items: flex-start; gap: 30px; }
        .strategy-inline-stats { flex-wrap: wrap; gap: 20px; }
        .strategy-inline-stat-item { border-right: none; padding: 0; }
    }

    /* -----------------------
       BUILT AROUND EXPERIENCE SECTION
       ----------------------- */
    .experience-section {
        background-color: #0b1120; /* Dark navy background matching the design */
        color: #ffffff;
        padding: 120px 5vw;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .exp-container {
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 Layout */
        gap: 80px;
        align-items: center;
    }

    /* --- Left Column: Main Image & Glass Panel --- */
    .exp-left {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .exp-image-wrapper {
        position: relative;
        width: 100%;
        height: 650px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    }

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

    /* Floating Glassmorphism Overlay */
    .exp-glass-panel {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 20px;
        padding: 40px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        z-index: 10;
    }

    .exp-glass-panel h3 {
        font-family: 'Syne', sans-serif;
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 15px;
        line-height: 1.2;
    }

    .exp-glass-panel p {
        font-size: 13px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 25px;
        max-width: 350px;
    }

    /* --- Right Column: Text & Cards --- */
    .exp-right {
        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    .exp-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .exp-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 0.9);
    }

    .exp-title {
        font-family: 'Syne', sans-serif;
        font-size: clamp(38px, 4.5vw, 52px);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -1.5px;
        margin-bottom: 20px;
        max-width: 500px;
    }

    .exp-subtitle {
        font-size: 14px;
        line-height: 1.6;
        color: #94a3b8; /* Muted gray text */
        margin-bottom: 35px;
        max-width: 400px;
    }

    /* Reusable White Button */
    .exp-btn-light {
        background-color: #ffffff;
        color: #000000;
        padding: 12px 16px 12px 24px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        transition: transform 0.3s ease;
    }

    .exp-btn-light:hover {
        transform: translateY(-3px);
    }

    .exp-icon-dark {
        background-color: #000000;
        color: #ffffff;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    /* Cream Cards Grid */
    .exp-cards-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .exp-cream-card {
        background-color: #fdf8f4; /* Cream/Off-white */
        border-radius: 20px;
        padding: 30px 24px;
        color: #111111;
        display: flex;
        flex-direction: column;
        transition: transform 0.3s ease;
    }

    .exp-cream-card:hover {
        transform: translateY(-5px);
    }

    .exp-cream-card h4 {
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 12px;
    }

    .exp-cream-card p {
        font-size: 13px;
        line-height: 1.6;
        color: #4b5563;
        margin-bottom: 25px;
        flex-grow: 1; /* Pushes image to bottom uniformly */
    }

    .exp-cream-card img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        border-radius: 12px;
    }

    /* --- Responsive Adjustments --- */
    @media (max-width: 1024px) {
        .exp-container { grid-template-columns: 1fr; gap: 60px; }
        .exp-image-wrapper { height: 500px; }
    }

    @media (max-width: 640px) {
        .experience-section { padding: 80px 5vw; }
        .exp-cards-grid { grid-template-columns: 1fr; }
        .exp-image-wrapper { height: 450px; }
        .exp-glass-panel { padding: 30px 20px; }
    }

    /* -----------------------
       SITE ANALYSIS SECTION
       ----------------------- */
    .site-analysis-section {
        background-color: #ffffff;
        color: #000000;
        padding: 140px 5vw;
        font-family: 'Plus Jakarta Sans', sans-serif;
        overflow: hidden;
    }

    .analysis-container {
        max-width: 1300px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 0.85fr 1.15fr; /* Matches the slight asymmetry in the image */
        gap: 80px;
        align-items: center;
    }

    /* --- Left Column: Text & Features --- */
    .analysis-left {
        display: flex;
        flex-direction: column;
    }

    .analysis-title {
        font-family: 'Syne', sans-serif;
        font-size: clamp(36px, 4vw, 44px);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -1px;
        margin-bottom: 40px;
        color: #111111;
        max-width: 450px;
    }

    .analysis-features {
        list-style: none;
        padding: 0;
        margin: 0 0 45px 0;
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .analysis-feat-item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .analysis-feat-icon {
        color: #000000;
        font-size: 20px;
        margin-top: 2px;
    }

    .analysis-feat-text h4 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #111111;
    }

    .analysis-feat-text p {
        font-size: 13px;
        line-height: 1.6;
        color: #4b5563; /* Muted gray */
        max-width: 380px;
    }

    /* Reusing your dark pill button style */
    .about-btn-dark {
        background-color: #0f172a;
        color: #ffffff;
        padding: 12px 16px 12px 24px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        align-self: flex-start;
    }
    .about-btn-dark:hover { 
        transform: translateY(-2px); 
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2); 
    }
    .about-btn-icon-light {
        background-color: #ffffff;
        color: #0f172a;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    /* --- Right Column: Overlapping Images --- */
    .analysis-right {
        position: relative;
        width: 100%;
        height: 550px;
    }

    /* Main Background Image (Right aligned) */
    .analysis-img-wrapper-main {
        position: absolute;
        right: 0;
        top: 0;
        width: 80%;
        height: 100%;
        border-radius: 20px;
        overflow: hidden;
        z-index: 1;
    }

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

    /* Overlapping Foreground Image (Left aligned, vertically centered) */
    .analysis-img-wrapper-sub {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 50%;
        height: 380px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 30px 60px rgba(0,0,0,0.15); /* Strong shadow to separate layers */
        z-index: 2;
        border: 6px solid #ffffff; /* White border creates a clean cutout effect */
    }

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

    /* -----------------------
       SCROLL ANIMATIONS 
       ----------------------- */
    /* Hidden states */
    .about-reveal-up {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    .about-reveal-img-main {
        opacity: 0;
        transform: scale(1.05);
        transition: opacity 1.2s ease, transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .about-reveal-img-sub {
        opacity: 0;
        transform: translateY(-30%); /* Starts slightly lower than its -50% center */
        transition: opacity 1s ease, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; /* Delay for staggered effect */
    }

    /* Active states triggered by JS */
    .about-is-revealed .about-reveal-up { opacity: 1; transform: translateY(0); }
    .about-is-revealed .about-reveal-img-main { opacity: 1; transform: scale(1); }
    .about-is-revealed .about-reveal-img-sub { opacity: 1; transform: translateY(-50%); }

    /* Staggering delays for left column items */
    .about-is-revealed .about-delay-1 { transition-delay: 0.1s; }
    .about-is-revealed .about-delay-2 { transition-delay: 0.2s; }
    .about-is-revealed .about-delay-3 { transition-delay: 0.3s; }

    /* --- Responsive --- */
    @media (max-width: 1024px) {
        .analysis-container { grid-template-columns: 1fr; gap: 60px; }
        .analysis-right { height: 450px; max-width: 700px; margin: 0 auto; }
        .analysis-left { align-items: center; text-align: center; }
        .analysis-title { max-width: 100%; }
        .analysis-feat-item { flex-direction: column; align-items: center; }
        .analysis-feat-text p { text-align: center; }
        .about-btn-dark { align-self: center; }
    }
    @media (max-width: 640px) {
        .site-analysis-section { padding: 80px 5vw; }
        .analysis-right { height: 350px; }
        .analysis-img-wrapper-sub { width: 60%; height: 250px; }
    }

    /* -----------------------
       BUILDING DOCUMENTATION SECTION
       ----------------------- */
    .docs-section {
        background-color: #FAF4EC; /* Soft cream/beige background */
        padding: 120px 5vw;
        color: #111111;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .docs-container {
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1.2fr 1fr; /* 3-Column Layout */
        gap: 50px;
        align-items: stretch;
    }

    /* --- Left Column --- */
    .docs-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .docs-text h2 {
        font-family: 'Syne', sans-serif;
        font-size: clamp(32px, 3.5vw, 42px);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -1px;
        margin-bottom: 20px;
    }

    .docs-text p {
        font-size: 13px;
        line-height: 1.6;
        color: #4b5563;
        margin-bottom: 35px;
        max-width: 300px;
    }

    .docs-sub-img-wrapper {
        width: 100%;
        height: 220px;
        border-radius: 20px;
        overflow: hidden;
        margin-top: 40px;
    }

    .docs-sub-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.4s ease, transform 0.8s ease;
    }

    /* --- Center Column --- */
    .docs-center {
        width: 100%;
        height: 600px; /* Fixed height for consistent layout */
        border-radius: 20px;
        overflow: hidden;
    }

    .docs-main-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.4s ease, transform 0.8s ease;
    }

    /* --- Right Column (Interactive List) --- */
    .docs-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
    }

    .about-doc-item {
        padding: 30px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        border-bottom: 1px solid rgba(0,0,0,0.05); /* Faint separator */
    }

    .about-doc-item:last-child {
        border-bottom: none;
    }

    /* Active/Hover State for List Items */
    .about-doc-item.active {
        background-color: #ffffff;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
        border-bottom: 1px solid transparent; /* Remove separator when active */
        transform: translateX(-10px); /* Slight bump to the left to stand out */
    }

    .about-doc-icon {
        font-size: 24px;
        margin-bottom: 15px;
        color: #111111;
    }

    .about-doc-item h4 {
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .about-doc-item p {
        font-size: 13px;
        line-height: 1.6;
        color: #6b7280;
    }

    /* Button Styling */
    .about-btn-dark {
        background-color: #0f172a;
        color: #ffffff;
        padding: 12px 16px 12px 24px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        transition: transform 0.3s ease;
    }
    .about-btn-dark:hover { transform: translateY(-2px); }
    .about-btn-icon-light {
        background-color: #ffffff;
        color: #0f172a;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    /* Animation Classes */
    .about-img-fade-out { opacity: 0; transform: scale(1.03); }
    .about-img-fade-in { opacity: 1; transform: scale(1); }

    /* Responsive */
    @media (max-width: 1100px) {
        .docs-container { grid-template-columns: 1fr 1fr; }
        .docs-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .about-doc-item.active { transform: translateY(-10px); }
        .about-doc-item { border-bottom: none; border-right: 1px solid rgba(0,0,0,0.05); padding: 20px; }
        .about-doc-item:last-child { border-right: none; }
    }

    @media (max-width: 768px) {
        .docs-container { grid-template-columns: 1fr; }
        .docs-right { grid-template-columns: 1fr; }
        .about-doc-item { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.05); }
        .docs-center { height: 400px; }
    }

    .about-brand-slider-section {
        background-color: #0b1120; /* Matching your dark nav background */
        padding: 60px 0;
        overflow: hidden;
    }

    .about-brand-slider-container {
        width: 100%;
        margin: 0 auto;
        /* This creates the fade effect at both edges */
        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);
    }

    .about-brand-track {
        display: flex;
        gap: 30px;
        width: max-content;
        animation: about-brand-scroll 30s linear infinite;
    }

    .about-brand-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 24px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.03);
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    .about-brand-card:hover {
        border-color: rgba(255, 255, 255, 0.4);
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }

    .about-brand-card span {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.5px;
    }

    /* Animation Logic */
    @keyframes about-brand-scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } /* Loops exactly halfway through track */
    }

    /* Pause animation on hover */
    .about-brand-track:hover {
        animation-play-state: paused;
    }

    .about-brand-logo {
        width: 24px;   /* Consistent logo size */
        height: 24px;
        object-fit: contain;
        filter: grayscale(1) brightness(1.5); /* Makes random logos look uniform */
        transition: filter 0.3s ease;
    }

    .about-brand-card:hover .about-brand-logo {
        filter: grayscale(0) brightness(1); /* Returns to full color on hover */
    }

    /* Adjusting card gap to ensure images aren't crowded */
    .about-brand-track {
        display: flex;
        gap: 40px; /* Increased gap slightly for aesthetic */
        width: max-content;
        animation: about-brand-scroll 30s linear infinite;
    }


    /* -----------------------
       PROJECTS HERO SECTION
       ----------------------- */
    .srv-hero-section {
        position: relative;
        width: 100vw;
        height: 100vh;
        min-height: 700px;
        display: flex;
        align-items: flex-end; /* Aligns content to the bottom */
        padding-bottom: 80px;
        overflow: hidden;
        color: #ffffff;
        background-color: #0b1120;
    }

    /* Cinematic Background Image */
    .srv-hero-bg-wrapper {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 1;
        overflow: hidden;
    }

    .srv-hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Smooth zoom-out transition on load */
        animation: srvZoomOut 10s ease-out forwards;
    }

    /* Gradient overlay for text readability */
    .srv-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.8) 100%);
        z-index: 2;
    }

    /* Content Layout */
    .srv-hero-container {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 5vw;
        display: grid;
        grid-template-columns: 0.8fr 1.2fr; /* Pushes content to the right/center */
        align-items: end;
    }

    .srv-hero-content {
        display: flex;
        flex-direction: column;
        /* Smooth fade-up transition on load */
        opacity: 0;
        animation: srvFadeUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
    }

    .srv-hero-label {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 0.9);
    }

    .srv-hero-title {
        font-family: 'Syne', sans-serif;
        font-size: clamp(42px, 5vw, 76px);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -2px;
        margin-bottom: 40px;
        color: #ffffff;
    }

    /* Bottom Row: Button and Paragraph */
    .srv-hero-action-row {
        display: flex;
        align-items: flex-start;
        gap: 50px;
    }

    .srv-hero-desc {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 14px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.85);
        max-width: 480px;
        margin: 0;
    }

    /* White Pill Button */
    .srv-hero-btn {
        background-color: #ffffff;
        color: #000000;
        padding: 12px 14px 12px 28px;
        border-radius: 40px;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 14px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        white-space: nowrap;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .srv-hero-btn:hover {
        transform: translateY(-3px);
        background-color: #f3f4f6;
    }

    .srv-btn-icon {
        background-color: #000000;
        color: #ffffff;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    /* Keyframe Animations */
    @keyframes srvZoomOut {
        0% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

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

    /* Responsive Design */
    @media (max-width: 1024px) {
        .srv-hero-container {
            grid-template-columns: 1fr;
        }
        .srv-hero-content {
            max-width: 800px;
        }
    }

    @media (max-width: 640px) {
        .srv-hero-section {
            padding-bottom: 50px;
        }
        .srv-hero-title {
            margin-bottom: 30px;
        }
        .srv-hero-action-row {
            flex-direction: column;
            gap: 30px;
        }
    }
    /* =========================================
   SERVICES FEATURE SECTION (srv-feat)
   ========================================= */
.srv-feat-section {
    background-color: #ffffff;
    color: #111111;
    padding: 120px 5vw;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.srv-feat-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* Ratio to match image proportions */
    gap: 80px;
    align-items: start;
}

/* --- Left Side: Image --- */
.srv-feat-left {
    display: flex;
    flex-direction: column;
}

.srv-feat-label {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #000;
}

.srv-feat-image-wrapper {
    width: 100%;
    height: 550px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #f3f4f6; /* Placeholder color during load */
}

.srv-feat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out, transform 0.6s ease;
}

/* Image Fade Animation Classes */
.srv-feat-fade-in { opacity: 1; transform: scale(1); }
.srv-feat-fade-out { opacity: 0; transform: scale(1.02); }

/* --- Right Side: Content & Grid --- */
.srv-feat-right {
    display: flex;
    flex-direction: column;
}

.srv-feat-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(34px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 50px;
    color: #000;
}

.srv-feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* --- Generic Card Styling --- */
.srv-feat-card {
    border-radius: 20px;
    padding: 30px;
    display: flex;
    background-color: #f8f9fa; /* Default Light Gray */
}

/* Top Small Cards */
.srv-feat-card-small {
    flex-direction: row;
    align-items: center;
    gap: 15px;
    height: 110px;
}

.srv-feat-number {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
}

.srv-feat-desc {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #444;
}

/* Avatars specifically */
.srv-feat-avatar-card {
    padding: 20px;
}

.srv-feat-avatars {
    display: flex;
    align-items: center;
}

.srv-feat-avatars img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #f8f9fa;
    margin-left: -12px;
    object-fit: cover;
}

.srv-feat-avatars img:first-child {
    margin-left: 0;
}

/* --- Interactive Bottom Cards --- */
.srv-feat-interactive-card {
    flex-direction: column;
    align-items: flex-start;
    height: 280px;
    cursor: pointer;
    /* CSS Transition ensures the color interchange is smooth */
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.3s ease;
}

.srv-feat-interactive-card:hover {
    transform: translateY(-5px);
}

.srv-feat-icon-box {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: auto; /* Pushes text to the bottom */
    transition: background-color 0.4s ease, color 0.4s ease;
}

.srv-feat-interactive-card h3 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 12px;
}

.srv-feat-interactive-card p {
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

/* Interactive States Logic */
/* 1. Default Light State (Inactive) */
.srv-feat-interactive-card {
    background-color: #f8f9fa;
    color: #111111;
}
.srv-feat-interactive-card .srv-feat-icon-box {
    background-color: #0b1120;
    color: #ffffff;
}
.srv-feat-interactive-card p {
    color: #4b5563;
}

/* 2. Active Dark State (Hovered / Selected) */
.srv-feat-interactive-card.active {
    background-color: #0b1120;
    color: #ffffff;
}
.srv-feat-interactive-card.active .srv-feat-icon-box {
    background-color: #ffffff;
    color: #0b1120;
}
.srv-feat-interactive-card.active p {
    color: #94a3b8;
}

/* --- Responsive Layout --- */
@media (max-width: 1024px) {
    .srv-feat-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .srv-feat-image-wrapper {
        height: 400px;
    }
}

@media (max-width: 640px) {
    .srv-feat-section { padding: 80px 5vw; }
    .srv-feat-grid { grid-template-columns: 1fr; }
    .srv-feat-card-small { height: auto; padding: 20px; }
    .srv-feat-interactive-card { height: 240px; }
}

/* =========================================
   SERVICES: CONTEMPORARY RETREAT (srv-retreat)
   ========================================= */
.srv-retreat-section {
    background-color: #FAF4EC; /* Soft beige matching the screenshot */
    padding: 100px 5vw;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: flex;
    justify-content: center;
}

.srv-retreat-container {
    width: 100%;
    max-width: 1200px;
}

.srv-retreat-image-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
}

/* Background Image with Hover Transition */
.srv-retreat-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.srv-retreat-image-wrapper:hover .srv-retreat-bg {
    transform: scale(1.05); /* Smooth zoom-in effect on hover */
}

/* Glassmorphism Panel */
.srv-retreat-glass-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 75%;
    background: rgba(15, 23, 42, 0.45); /* Dark transparent tint */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: background 0.4s ease;
}

.srv-retreat-image-wrapper:hover .srv-retreat-glass-panel {
    background: rgba(15, 23, 42, 0.55); /* Darkens slightly on hover */
}

/* --- Panel Top Section --- */
.srv-retreat-glass-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.srv-retreat-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.5px;
}

.srv-retreat-desc-box {
    text-align: left;
    max-width: 320px;
}

.srv-retreat-desc-box p {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.srv-retreat-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* --- Panel Bottom Section --- */
.srv-retreat-glass-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.srv-retreat-bottom-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.srv-retreat-tag {
    background-color: #ffffff;
    color: #000000;
    font-size: 10px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.srv-retreat-subtitle {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Circular Arrow Button */
.srv-retreat-circle-btn {
    width: 65px;
    height: 65px;
    background-color: #ffffff;
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.srv-retreat-circle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .srv-retreat-glass-panel {
        width: 90%;
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .srv-retreat-image-wrapper {
        height: 500px;
    }
    .srv-retreat-glass-panel {
        height: 85%;
        padding: 30px 20px;
    }
    .srv-retreat-glass-top {
        flex-direction: column;
        gap: 20px;
    }
    .srv-retreat-desc-box {
        max-width: 100%;
    }
    .srv-retreat-glass-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    .srv-retreat-circle-btn {
        width: 50px;
        height: 50px;
        font-size: 16px;
    }
}

/* =========================================
   SERVICES: OUR PROJECTS (srv-projects)
   ========================================= */
.srv-projects-section {
    background-color: #FAF4EC; /* Soft beige/cream to match the design */
    padding: 120px 5vw;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.srv-projects-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Header Styling --- */
.srv-projects-header {
    text-align: center;
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.srv-projects-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #4b5563; /* Muted gray */
    margin-bottom: 15px;
}

.srv-projects-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(38px, 4.5vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: #111111;
    margin: 0;
}

/* --- Grid & Cards Styling --- */
.srv-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.srv-project-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    cursor: pointer;
}

/* Image Wrapper with hidden overflow for zoom effect */
.srv-project-img-wrapper {
    width: 100%;
    height: 550px; /* Tall vertical aspect ratio */
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 25px;
    /* Very subtle shadow to give depth against the beige background */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
}

.srv-project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover Zoom Effect */
.srv-project-card:hover .srv-project-img {
    transform: scale(1.06);
}

/* Meta Info (Date & Title) */
.srv-project-info {
    display: flex;
    flex-direction: column;
    padding: 0 10px; /* Slight inset so text doesn't touch the absolute edge */
}

.srv-project-date {
    font-size: 13px;
    color: #6b7280; /* Muted gray matching the image */
    margin-bottom: 8px;
    font-weight: 500;
}

.srv-project-name {
    font-family: 'Syne', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #111111;
    margin: 0;
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}

/* Optional hover color change for the title */
.srv-project-card:hover .srv-project-name {
    color: #4b5563;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1100px) {
    .srv-projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .srv-project-img-wrapper {
        height: 450px;
    }
}

@media (max-width: 768px) {
    .srv-projects-section {
        padding: 80px 5vw;
    }
    .srv-projects-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .srv-projects-header {
        margin-bottom: 50px;
    }
    .srv-project-img-wrapper {
        height: 400px;
    }
}

/* =========================================
   CONTACT / CTA SECTION (cnt-)
   ========================================= */
.cnt-section {
    background-color: #0b1120; /* Dark premium navy matching Linoxa brand */
    /* Optional subtle radial glow for depth */
    background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    padding: 120px 5vw;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cnt-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* Form column slightly wider */
    gap: 100px;
    align-items: center;
}

/* --- Left Column: Typography --- */
.cnt-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cnt-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 25px;
    color: #ffffff;
    max-width: 500px;
}

.cnt-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #94a3b8; /* Slate gray text */
    margin-bottom: 40px;
    max-width: 450px;
    font-weight: 500;
}

.cnt-email {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

/* Custom underline hover effect for the email */
.cnt-email::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    transition: background-color 0.3s ease;
}

.cnt-email:hover {
    color: #c5a880; /* Linoxa gold accent */
}
.cnt-email:hover::after {
    background-color: #c5a880;
}

/* --- Right Column: Form Styling --- */
.cnt-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cnt-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cnt-form-group {
    width: 100%;
}

/* Frosted glass style inputs */
.cnt-input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    padding: 18px 24px;
    border-radius: 16px;
    outline: none;
    transition: all 0.3s ease;
}

.cnt-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.cnt-input:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Textarea specific */
.cnt-textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.6;
}

/* White Pill Submit Button */
.cnt-submit-btn {
    align-self: flex-start;
    margin-top: 10px;
    background-color: #ffffff;
    color: #000000;
    padding: 12px 14px 12px 28px;
    border: none;
    border-radius: 40px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cnt-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.cnt-btn-icon {
    background-color: #000000;
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.cnt-submit-btn:hover .cnt-btn-icon {
    transform: rotate(45deg); /* Arrow spin effect on hover */
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .cnt-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .cnt-title {
        max-width: 100%;
    }
    .cnt-desc {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .cnt-section {
        padding: 80px 5vw;
    }
    .cnt-input-row {
        grid-template-columns: 1fr; /* Stack Name and Email on mobile */
    }
    .cnt-submit-btn {
        width: 100%; /* Full width button on mobile */
        justify-content: space-between;
    }
}

/* -----------------------
   CONTACT PAGE HERO SECTION
   ----------------------- */

.contact-hero-section {
    position: relative;
    width: 100%;
    height: 430px;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #0b1120;
}

/* Background Image */
.contact-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2000&q=85');
    background-size: cover;
    background-position: center 48%;
    z-index: 1;
    transform: scale(1.02);
}

/* Dark Overlay */
.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(11, 17, 32, 0.82) 0%,
            rgba(11, 17, 32, 0.45) 45%,
            rgba(11, 17, 32, 0.18) 100%
        ),
        linear-gradient(
            90deg,
            rgba(11, 17, 32, 0.18) 0%,
            rgba(11, 17, 32, 0.05) 50%,
            rgba(11, 17, 32, 0.2) 100%
        );
    z-index: 2;
}

/* Vertical Grid Lines */
.contact-hero-grid-lines {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0.22) 1px,
            transparent 1px
        );
    background-size: 25% 100%;
    opacity: 0.45;
}

/* Content */
.contact-hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    padding: 0 20px;
    margin-top: 35px;
}

.contact-hero-content h1 {
    font-family: 'Inter', 'Plus Jakarta Sans', Arial, sans-serif;
    font-size: clamp(54px, 5vw, 78px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -4px;
    color: #ffffff;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-hero-section {
        height: 380px;
        min-height: 380px;
    }

    .contact-hero-content h1 {
        font-size: clamp(46px, 7vw, 64px);
        letter-spacing: -3px;
    }
}

@media (max-width: 640px) {
    .contact-hero-section {
        height: 320px;
        min-height: 320px;
    }

    .contact-hero-bg {
        background-position: center center;
    }

    .contact-hero-grid-lines {
        background-size: 50% 100%;
    }

    .contact-hero-content {
        margin-top: 20px;
    }

    .contact-hero-content h1 {
        font-size: 44px;
        letter-spacing: -2px;
    }
}

/* -----------------------
   CONTACT INFO + FORM SECTION
   ----------------------- */

.contact-info-section {
    width: 100%;
    background: #fbf1e7;
    padding: 105px 5vw;
    color: #111111;
    font-family: 'Inter', 'Plus Jakarta Sans', Arial, sans-serif;
}

.contact-info-container {
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    align-items: center;
}

/* Left Side */
.contact-info-left {
    padding-top: 20px;
}

.contact-info-heading {
    margin-bottom: 42px;
}

.contact-info-heading h2 {
    font-size: 25px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.8px;
    margin: 0 0 16px;
    color: #111111;
}

.contact-info-heading p {
    max-width: 330px;
    font-size: 12.5px;
    line-height: 1.65;
    font-weight: 500;
    color: #575757;
    margin: 0;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.contact-info-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 22px;
    align-items: flex-start;
}

.contact-info-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #000000;
    font-size: 18px;
    padding-top: 2px;
}

.contact-info-text h4 {
    font-size: 14.5px;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 9px;
    color: #111111;
}

.contact-info-text p {
    font-size: 12.5px;
    line-height: 1.65;
    font-weight: 500;
    color: #575757;
    margin: 0;
}

/* Right Form Card */
.contact-info-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 38px 56px 45px;
    min-height: 538px;
    box-shadow: none;
}

.contact-info-card-header {
    text-align: center;
    margin-bottom: 33px;
}

.contact-info-card-header h3 {
    font-size: 25px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.7px;
    margin: 0 0 12px;
    color: #111111;
}

.contact-info-card-header p {
    font-size: 12px;
    line-height: 1.55;
    font-weight: 500;
    color: #111111;
    margin: 0;
}

.contact-info-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-info-field {
    width: 100%;
    margin-bottom: 18px;
}

.contact-info-field input,
.contact-info-field textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cfcfcf;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #111111;
    padding: 8px 0 11px;
    resize: vertical;
}

.contact-info-field textarea {
    height: 122px;
    line-height: 1.5;
}

.contact-info-field input::placeholder,
.contact-info-field textarea::placeholder {
    color: #626262;
    opacity: 1;
}

.contact-info-field input:focus,
.contact-info-field textarea:focus {
    border-bottom-color: #111111;
}

/* Submit Button */
.contact-info-submit {
    margin-top: 17px;
    border: none;
    background: #000000;
    color: #ffffff;
    border-radius: 999px;
    padding: 9px 10px 9px 18px;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-info-submit span {
    width: 22px;
    height: 22px;
    background: #ffffff;
    color: #000000;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    transition: transform 0.3s ease;
}

.contact-info-submit span i {
    transform: rotate(-45deg);
}

.contact-info-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 28px rgba(0, 0, 0, 0.16);
}

.contact-info-submit:hover span {
    transform: rotate(45deg);
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-info-container {
        grid-template-columns: 1fr;
        gap: 55px;
        width: min(720px, 100%);
    }

    .contact-info-left {
        padding-top: 0;
    }

    .contact-info-heading,
    .contact-info-list {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .contact-info-heading {
        text-align: center;
    }

    .contact-info-heading p {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .contact-info-section {
        padding: 75px 5vw;
    }

    .contact-info-card {
        padding: 34px 24px 38px;
        min-height: auto;
        border-radius: 14px;
    }

    .contact-info-card-header h3 {
        font-size: 24px;
    }

    .contact-info-card-header p br {
        display: none;
    }

    .contact-info-item {
        grid-template-columns: 24px 1fr;
        gap: 18px;
    }

    .contact-info-list {
        gap: 28px;
    }
}

/* =========================================================
   HOME PAGE MOBILE RESPONSIVE PATCH
   Add this at the very bottom of style.css.
   It keeps existing desktop styling and JS class names intact.
   ========================================================= */

/* Prevent horizontal overflow caused by older 100vw sections */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
}

/* Tablet and small laptop adjustments */
@media (max-width: 1200px) {
    .hero-content {
        gap: 40px;
    }

    .glass-slider {
        width: 330px;
    }

    .capability-container {
        gap: 60px;
    }

    .content-wrapper {
        gap: 60px;
    }

    .stats-wrapper {
        width: min(1040px, 100%);
    }
}

/* Main mobile/tablet layout */
@media (max-width: 1024px) {
    .hero-section,
    .intro-section,
    .showcase-section,
    .arch-section {
        width: 100%;
    }

    .hero-section {
        height: auto;
        min-height: 100svh;
        align-items: flex-start;
    }

    .hero-content {
        min-height: 100svh;
        justify-content: flex-end;
        padding: 120px 5vw 50px;
    }

    .hero-left {
        max-width: 760px;
        width: 100%;
    }

    .title {
        font-size: clamp(44px, 9vw, 68px);
        margin-bottom: 34px;
    }

    .hero-left-bottom {
        max-width: 720px;
    }

    .hero-right {
        width: 100%;
        justify-content: flex-start;
    }

    .glass-slider {
        width: min(420px, 100%);
    }

    .intro-left,
    .intro-right {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .showcase-section {
        padding: 90px 5vw;
    }

    .showcase-grid {
        max-width: 620px;
        margin: 0 auto;
    }

    .sc-card {
        height: 420px;
    }

    .arch-section {
        min-height: auto;
        padding: 95px 5vw;
    }

    .arch-container {
        width: 100%;
    }

    .arch-text h2 {
        max-width: 760px;
    }

    .capability-section {
        min-height: auto;
        padding: 85px 5vw;
    }

    .capability-container {
        grid-template-columns: 1fr;
        gap: 45px;
        align-items: start;
    }

    .left-content {
        min-height: auto;
    }

    .left-content h1 {
        margin-bottom: 34px;
    }

    .image-stage,
    .image-caption-wrap {
        width: min(520px, 100%);
    }

    .right-content {
        width: 100%;
    }

    .top-action {
        justify-content: flex-start !important;
        margin-bottom: 34px !important;
    }

    .outcomes-section {
        min-height: auto;
        padding: 95px 0;
    }

    .content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 46px;
    }

    .text-block,
    .image-block {
        width: 100%;
        flex: none;
    }

    .image-block {
        height: 520px;
    }

    .marquee-background {
        top: 18%;
    }

    .marquee-inner {
        font-size: clamp(4rem, 14vw, 8rem);
    }
}

/* Mobile phones */
@media (max-width: 768px) {
    .hero-section {
        min-height: 100svh;
    }

    .bg-text {
        top: 22%;
        font-size: 34vw;
        letter-spacing: -2px;
        opacity: 0.8;
    }

    .grid-lines {
        background-size: 50% 100%;
    }

    .hero-content {
        padding: 105px 22px 38px;
        gap: 34px;
    }

    .subtitle {
        font-size: 11px;
        margin-bottom: 14px;
    }

    .title {
        font-size: clamp(42px, 12vw, 58px);
        letter-spacing: -2px;
        line-height: 0.98;
        margin-bottom: 28px;
    }

    .hero-left-bottom {
        gap: 22px;
    }

    .btn-main {
        padding: 11px 14px 11px 22px;
        font-size: 13px;
        gap: 12px;
    }

    .desc-text {
        font-size: 13px;
        line-height: 1.65;
        max-width: 100%;
    }

    .glass-slider {
        width: 100%;
        padding: 22px;
        border-radius: 18px;
    }

    .slide-title {
        font-size: 17px;
    }

    .slide-img-wrapper {
        height: 190px;
    }

    .intro-left,
    .intro-right {
        padding: 70px 22px;
    }

    .intro-left h2 {
        font-size: 64px;
        letter-spacing: -3px;
    }

    .trusted-block {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .intro-right h3 {
        font-size: clamp(28px, 8vw, 40px);
    }

    .intro-right p {
        font-size: 14px;
        line-height: 1.75;
    }

    .showcase-section {
        padding: 75px 22px;
    }

    .showcase-grid {
        gap: 26px;
    }

    .sc-card {
        height: auto;
        min-height: 360px;
    }

    .sc-video {
        height: 380px;
    }

    .sc-dark {
        min-height: 360px;
        padding: 42px 28px;
    }

    .sc-light {
        min-height: auto;
    }

    .sc-light-img-wrap {
        height: 260px;
    }

    .arch-section {
        padding: 80px 22px;
    }

    .arch-container {
        gap: 38px;
    }

    .arch-text h2 {
        font-size: clamp(36px, 10vw, 50px);
    }

    .arch-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .glass-card,
    .glass-card:nth-child(2),
    .glass-card[style] {
        grid-column: auto !important;
        margin-top: 0;
    }

    .glass-card {
        padding: 24px;
        border-radius: 18px;
    }

    .capability-section {
        padding: 76px 22px;
    }

    .left-content h1 {
        font-size: clamp(36px, 10vw, 48px);
        letter-spacing: -2px;
    }

    .image-stage {
        height: 320px;
        border-radius: 18px;
    }

    .image-caption-wrap {
        min-height: 135px;
    }

    .service-row {
        height: auto;
        min-height: 82px;
        grid-template-columns: 56px 1fr 48px;
        padding: 16px 12px;
        gap: 12px;
    }

    .arrow-circle {
        width: 42px;
        height: 42px;
        font-size: 24px;
    }

    .service-title {
        justify-self: start;
        font-size: 17px;
        line-height: 1.25;
    }

    .service-number {
        font-size: 21px;
    }

    .outcomes-section {
        padding: 80px 0;
    }

    .container {
        padding: 0 22px;
    }

    .text-block h2 {
        font-size: clamp(34px, 9vw, 46px);
    }

    .text-block p {
        font-size: 14px;
        color: #333333;
    }

    .image-block {
        height: 420px;
        border-radius: 24px;
    }

    .stats-section {
        padding: 75px 22px;
    }

    .section-title {
        font-size: clamp(28px, 8vw, 36px);
        letter-spacing: -1.2px;
        margin-bottom: 32px;
    }

    .section-title br {
        display: none;
    }

    .stat-card {
        height: auto;
        min-height: 300px;
        padding: 28px 28px 34px;
    }

    .number {
        font-size: 58px;
        letter-spacing: -3.5px;
    }

    .card-bottom {
        min-height: auto;
    }

    .card-title {
        margin-bottom: 14px;
    }
}

/* Small mobile phones */
@media (max-width: 480px) {
    .hero-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .title {
        font-size: 42px;
    }

    .glass-slider {
        padding: 18px;
    }

    .slide-img-wrapper {
        height: 165px;
    }

    .slider-controls {
        margin-top: 20px;
    }

    .intro-left,
    .intro-right,
    .showcase-section,
    .arch-section,
    .capability-section,
    .stats-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .sc-video {
        height: 330px;
    }

    .sc-dark {
        padding: 34px 22px;
    }

    .sc-title {
        font-size: 23px;
    }

    .image-stage {
        height: 280px;
    }

    .service-row {
        grid-template-columns: 46px 1fr 38px;
        padding: 14px 8px;
    }

    .arrow-circle {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .service-title {
        font-size: 15.5px;
    }

    .service-number {
        font-size: 18px;
    }

    .image-block {
        height: 350px;
    }

    .stat-card {
        min-height: 270px;
        padding: 26px 24px 30px;
    }
}

/* Better touch behavior for mobile capability rows */
@media (hover: none) {
    .service-row:hover::before {
        transform: scaleX(0);
    }

    .service-row.active::before {
        transform: scaleX(1);
    }

    .service-row:hover .arrow-circle {
        background: transparent;
        border-color: rgba(255,255,255,0.26);
        color: var(--cap-muted);
        transform: none;
    }

    .service-row.active .arrow-circle {
        background: var(--cap-cream);
        border-color: var(--cap-cream);
        color: #121212;
        transform: translateX(-7px) rotate(180deg);
    }

    .service-row:hover .service-title,
    .service-row:hover .service-number {
        color: var(--cap-muted);
        transform: none;
    }

    .service-row.active .service-title {
        color: #ffffff;
        transform: translateX(-8px);
    }

    .service-row.active .service-number {
        color: #ffffff;
        transform: translateX(6px);
    }
}

/* -----------------------
   DEENG FOOTER
   ----------------------- */

.deeng-footer {
    background-color: #000000;
    color: #ffffff;
    padding: 100px 5vw 40px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #1a1a1a;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.deeng-footer-watermark {
    position: absolute;
    right: 0;
    bottom: 100px;
    font-family: 'Syne', sans-serif;
    font-size: 15vw;
    font-weight: 800;
    color: #0a0a0a;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    white-space: nowrap;
}

.deeng-footer-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.deeng-footer-top {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 60px;
    margin-bottom: 80px;
}

.deeng-footer-left h2 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.deeng-footer-left p {
    color: #94a3b8;
    margin-bottom: 30px;
    max-width: 300px;
    font-size: 15px;
    line-height: 1.6;
}

.deeng-footer-btn {
    background: #ffffff;
    color: #000000;
    padding: 14px 28px;
    border-radius: 40px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deeng-footer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(255, 255, 255, 0.08);
}

.deeng-footer-btn i {
    font-size: 12px;
    transform: rotate(-45deg);
}

.deeng-footer-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.deeng-footer-column h5 {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
}

.deeng-footer-column p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 40px;
}

.deeng-footer-heading-spaced {
    margin-top: 10px;
}

.deeng-footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.deeng-footer-column ul li {
    margin-bottom: 10px;
}

.deeng-footer-column ul li a {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.deeng-footer-column ul li a:hover {
    color: #ffffff;
}

.deeng-footer-contact-block {
    margin-bottom: 30px;
}

.deeng-footer-contact-block span {
    display: block;
    font-size: 12px;
    color: #666666;
    margin-bottom: 5px;
}

.deeng-footer-contact-block p {
    font-size: 14px;
    color: #ffffff;
    margin: 0;
    line-height: 1.7;
}

.deeng-footer-contact-block a {
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
}

.deeng-footer-contact-block a:hover {
    text-decoration: underline;
}

/* Bottom Bar */
.deeng-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #1a1a1a;
    color: #666666;
    font-size: 13px;
    gap: 20px;
}

.deeng-footer-bottom p {
    margin: 0;
}

.deeng-footer-socials {
    display: flex;
    align-items: center;
    gap: 15px;
}

.deeng-footer-socials a {
    color: #666666;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.deeng-footer-socials a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

/* Tablet */
@media (max-width: 1024px) {
    .deeng-footer {
        padding: 80px 5vw 36px;
    }

    .deeng-footer-top {
        grid-template-columns: 1fr;
        gap: 55px;
        margin-bottom: 65px;
    }

    .deeng-footer-left h2 {
        font-size: 42px;
        max-width: 520px;
    }

    .deeng-footer-left p {
        max-width: 460px;
    }

    .deeng-footer-right {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .deeng-footer-watermark {
        font-size: 20vw;
        bottom: 160px;
        opacity: 0.8;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .deeng-footer {
        padding: 70px 24px 32px;
    }

    .deeng-footer-watermark {
        font-size: 26vw;
        right: -20px;
        bottom: auto;
        top: 40px;
        opacity: 0.75;
    }

    .deeng-footer-top {
        gap: 48px;
        margin-bottom: 55px;
    }

    .deeng-footer-left h2 {
        font-size: 34px;
        line-height: 1.08;
        letter-spacing: -1px;
        max-width: 340px;
    }

    .deeng-footer-left p {
        font-size: 14px;
        max-width: 320px;
        margin-bottom: 26px;
    }

    .deeng-footer-btn {
        padding: 13px 22px;
        font-size: 14px;
    }

    .deeng-footer-right {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .deeng-footer-column p {
        margin-bottom: 30px;
    }

    .deeng-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        font-size: 12.5px;
    }

    .deeng-footer-socials {
        gap: 18px;
    }

    .deeng-footer-socials a {
        font-size: 15px;
    }
}

/* Small Mobile */
@media (max-width: 420px) {
    .deeng-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .deeng-footer-left h2 {
        font-size: 31px;
    }

    .deeng-footer-watermark {
        font-size: 30vw;
    }
}

.deeng-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.deeng-logo img {
    width: 130px;
    height: auto;
    max-height: 90px;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .deeng-logo img {
        width: 110px;
        max-height: 50px;
    }
}