/* ==========================================================================
   1. CLIENT LOGO STYLING (The Brand Color & Hit-Area Fix)
   ========================================================================== */
.det-client-footer {
    display: flex;
    justify-content: flex-end !important; 
    width: 100%;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.det-client-link {
    display: inline-block !important; 
    text-decoration: none;
    line-height: 0;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: transform 0.4s var(--ease);
}

.det-client-logo {
    height: 40px;
    width: auto;
    display: block;
    filter: grayscale(1) brightness(0.9) sepia(1) hue-rotate(185deg) saturate(10) opacity(0.5); 
    transition: all 0.4s var(--ease);
    pointer-events: none; 
}

.det-client-link:hover .det-client-logo {
    filter: none !important;
    opacity: 1 !important;
}

.det-client-link:hover {
    transform: translateY(-3px);
}

@media (max-width: 1024px) {
    .det-client-footer {
        justify-content: center !important;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .mob-detail-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


/* ==========================================================================
   2. SHARED CORE (Global Variables & Background Engine)
   ========================================================================== */
:root {
    --bg: #050505;
    --accent: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.4);
    --border: rgba(255, 255, 255, 0.1);
    --ease: cubic-bezier(0.19, 1, 0.22, 1);
}

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

body { 
    background-color: var(--bg); 
    color: var(--accent); 
    font-family: 'Inter', sans-serif; 
    height: 100vh; 
    overflow: hidden; 
    transition: background 0.5s ease; 
}


/* Firefox fix */
* { 
    scrollbar-width: thin; 
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent; 
}




#bg-container, .bg-media, video, iframe, #bg-container * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#bg-container::-webkit-scrollbar, .bg-media::-webkit-scrollbar { display: none !important; }

/* BACKGROUND ENGINE - FORCED FULLSCREEN */
#bg-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    height: 100dvh; /* Dynamic viewport for mobile browsers */
    z-index: 1; 
    background: #000; 
    overflow: hidden; 
}

.bg-media { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; /* This removes all black bars */
    filter: brightness(0.4); 
    opacity: 0; 
    transition: opacity 1.2s var(--ease); 
    pointer-events: none; 
}

/* IFRAME: Oversized to hide YouTube player borders/titles */
#bg-iframe {
    width: 300% !important; /* Significantly wider than the screen */
    height: 150% !important; /* Significantly taller than the screen */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}


.bg-media.active { opacity: 1 !important; display: block !important; }
#bg-video { z-index: 6; }
#bg-img { z-index: 4; }
.overlay { position: fixed; inset: 0; z-index: 15; background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.5) 100%); pointer-events: none; }

.nav-zone { position: fixed; top: 0; height: 100%; width: 50%; z-index: 9999; display: none; }
.nav-zone.left { left: 0; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") 16 16, auto; }
.nav-zone.right { right: 0; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") 16 16, auto; }
body.home-active .nav-zone { display: block; }


/* ==========================================================================
   3. DESKTOP VERSION
   ========================================================================== */
/* ==========================================================================
   UNIFIED DESKTOP ARCHITECTURE (min-width: 1025px)
   ========================================================================== */
/* ==========================================================================
   FINAL CONSOLIDATED DESKTOP ARCHITECTURE (min-width: 1025px)
   ========================================================================== */
@media (min-width: 1025px) {
    
    /* 1. HEADER: Logo Top-Left, Nav & Socials Top-Right */
    header { 
        position: fixed; top: 0; width: 100%; padding: 35px 40px; 
        display: flex; justify-content: space-between; 
        align-items: flex-start !important; 
        z-index: 100000; opacity: 0; transition: opacity 1.5s var(--ease); pointer-events: none; 
        background: transparent !important;
    }

    header .brand, header .header-right { pointer-events: auto; }

    .brand { display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; }
    .agency-logo { height: 45px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0; transition: 1s var(--ease); }
    .agency-name { font-size: 11px; letter-spacing: 6px; text-transform: uppercase; font-weight: 600; color: #fff; opacity: 0; transform: translateY(10px); transition: 1s var(--ease); margin-top: 15px; }
    .agency-tagline { font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); opacity: 0; transform: translateY(10px); transition: 1s var(--ease); margin-top: 5px; }
    
    .header-right { 
        display: flex !important; 
        flex-direction: row !important; 
        align-items: center !important; 
        gap: 30px !important; 
        margin-top: 0 !important;
    }
    
    nav { display: flex; gap: 25px; }
    nav a, .header-socials a, .lang-switcher span { font-size: 10px; text-transform: uppercase; letter-spacing: 4px; text-decoration: none; color: #fff; opacity: 0.3; transition: 0.4s; cursor: pointer; }
    nav a.active, nav a:hover, .header-socials a:hover, .lang-switcher span:hover, .lang-switcher span.active { opacity: 1; }
    
    .header-socials { display: flex; gap: 15px; align-items: center; }
    .header-socials a { font-size: 18px !important; opacity: 0.5; } 

    .lang-switcher { display: flex; gap: 12px; border-left: 1px solid var(--border); padding-left: 20px; align-items: center; }

    /* 2. SCROLLBAR ENGINE: Hide until hover */
   /* 1. Chrome, Safari, and Edge: Hide bar but show on hover */
    .list-wrapper::-webkit-scrollbar { 
        width: 3px !important; /* Vertical bar width */
    }

    .list-wrapper::-webkit-scrollbar-thumb { 
        background: transparent !important; /* Invisible by default */
        border-radius: 10px;
        transition: background 0.3s ease !important;
    }

    .list-wrapper:hover::-webkit-scrollbar-thumb { 
        background: rgba(255, 255, 255, 0.2) !important; /* Visible when mouse moves over list */
    }

    /* 2. Firefox: Hide bar but show on hover */
    .list-wrapper { 
        scrollbar-width: none !important; 
    }
    .list-wrapper:hover { 
        scrollbar-width: thin !important; 
    }


    /* 3. LIST WRAPPER: Disappears before tagline */
    .main-content { 
        position: fixed; inset: 0; z-index: 60; height: 100vh; display: flex; align-items: stretch; padding-left: 40px; 
        pointer-events: none; opacity: 0; transition: opacity 0.8s var(--ease); visibility: hidden; 
    }
    body.list-active .main-content { opacity: 1; pointer-events: auto; visibility: visible; }

    .list-wrapper { 
        width: 100% !important; height: 100% !important; 
        display: flex !important; flex-direction: column !important; 
        align-items: flex-start !important; justify-content: flex-start !important; 
        padding-top: 45vh !important; 
        padding-bottom: 15vh !important; padding-right: 40px !important; 
        direction: ltr !important; 
        overflow-y: auto !important; 
        overflow-x: hidden !important;

        /* Mask: List is hidden (0% to 42%) to clear the tagline area */
        -webkit-mask-image: linear-gradient(to bottom, 
            transparent 0%, transparent 42%, 
            black 52%, black 82%, 
            transparent 95%, transparent 100%
        ) !important;
        mask-image: linear-gradient(to bottom, 
            transparent 0%, transparent 42%, 
            black 52%, black 82%, 
            transparent 95%, transparent 100%
        ) !important;
    }

    /* 4. ITEM ROW: Fix clipping with massive padding-left */
    
    .item-row { 
    padding: 22px 0 !important; 
    text-align: left !important; /* FIXED: Text left */
    display: flex !important; 
    flex-direction: column !important; 
    align-items: flex-start !important; /* FIXED: Items left */
    cursor: pointer; 
    width: fit-content !important; 
    padding-right: 100px !important; /* Safety room on the right */
    pointer-events: auto;
    overflow: visible !important;
}

.title-main { 
    font-size: 3vw !important; 
    font-weight: 100 !important;      /* ORIGINAL WEIGHT */
    text-transform: uppercase !important; 
    letter-spacing: -3px !important;  /* ORIGINAL SPACING */
    color: #fff !important; 
    line-height: 1;                   /* ORIGINAL LINE HEIGHT */
    display: inline-block !important;
    transition: transform 1.2s var(--ease), color 0.8s var(--ease) !important; 
}


/* THE HOVER FIX: Slide RIGHT (+30px) instead of left */
.item-row:hover .title-main { 
    color: var(--hover-accent) !important; 
    transform: translateX(30px) !important; 
}

.title-sub { 
    text-align: left !important; /* FIXED: Subtitle left */
    font-size: 3vw !important; 
    opacity: 0.6; 
}

    
    .item-meta { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); opacity: 0; transform: translateY(5px); transition: 0.4s var(--ease); margin-top: 5px; }
    .item-row:hover .item-meta { opacity: 0.8; transform: translateY(0); }

    /* 5. FOOTER: Centered Signature */
    .footer-sig { 
        position: fixed; bottom: 0; left: 0; width: 100vw; height: 50px; 
        display: flex !important; justify-content: center !important; align-items: center !important; 
        padding: 0 40px; z-index: 100000; pointer-events: none !important;
    }
    .footer-left { width: auto !important; }
    .footer-left span { 
        font-size: 8px; letter-spacing: 3px; text-transform: uppercase; 
        color: rgba(255,255,255,0.2); display: block !important; 
    }
    .mob-lang-wrap, .footer-right { display: none !important; }

    /* 6. HUD & DETAIL VIEW */
    #hud { position: fixed; right: 80px; bottom: 80px; text-align: right; z-index: 10; opacity: 0; transition: 0.8s var(--ease); pointer-events: none; }
    #hud.visible { opacity: 1; }

    #hud-metrics { 
    /* 1. Change from grid to flex for a single column */
    display: flex !important; 
    flex-direction: column !important; 
    
    /* 2. Control vertical spacing between each metric */
    gap: 20px !important; 
    
    /* 3. Alignment */
    margin-bottom: 30px; 
    width: max-content; 
    margin-left: auto; /* Keeps it on the right side */
    text-align: right !important;
}

#hud-metrics .m-item { 
    /* Reset item constraints for single column look */
    min-width: unset !important; 
    align-items: flex-end !important; /* Aligns text to the right */
}

    .m-label { font-size: 8px; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 4px; }
    .m-value { font-size: 14px; font-weight: 300; color: #fff; text-transform: uppercase; }
    #hud-desc { width: 320px; font-size: 11px; line-height: 2.2; color: var(--text-dim); text-transform: uppercase; padding-right: 25px; border-right: 1px solid #fff; margin-top: 40px; }

    #detail-view { position: fixed; inset: 0; background: #ffffff; z-index: 90000; display: none; opacity: 0; transition: 0.8s var(--ease); color: #000; padding: 0 80px 0 40px; }
    #detail-view.active { display: block; opacity: 1; }
    .detail-grid { display: grid; grid-template-columns: 25% 45% 30%; gap: 20px; height: 100vh; align-items: center; padding: 0; }
    
    .close-detail { position: fixed; top: 70px; right: 35px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; z-index: 110000; color: #000; opacity: 0.2; transition: transform 0.4s var(--ease), opacity 0.3s ease; }
    .close-detail:hover { opacity: 1; transform: rotate(90deg); }

    .det-title .title-main { font-size: 32px; font-weight: 200; display: block; color: #000 !important; letter-spacing: 2px; text-transform: uppercase; }
    .det-title .title-sub { color: #000 !important; display: block; font-size: 14px; opacity: 0.6; text-align: left; }
    .det-meta { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #999; margin-top: 15px; font-weight: 300; border-top: 1px solid #eee; padding-top: 15px; width: fit-content; }
    .det-metrics-wrap { border-top: 1px solid #eee; padding-top: 30px; display: flex; flex-direction: column; gap: 20px; }
    .det-metrics-item .m-label { font-size: 9px; color: #999; letter-spacing: 2px; text-transform: uppercase; }
    .det-metrics-item .m-value { font-size: 14px; font-weight: 300; color: #000; }
    
    .img-fixed-box, .det-story { height: 320px !important; max-height: 320px !important; }
    #det-main-img { width: 100%; height: 100%; object-fit: cover; background: #ffffff; transition: opacity 0.4s var(--ease); cursor: pointer; }

    /* Theme Changes for white detail view */
    body.detail-open .agency-logo { 

        filter: none !important; opacity: 1 !important; background-color: var(--logo-display-color) !important;
        -webkit-mask-image: var(--logo-mask-url); mask-image: var(--logo-mask-url);
        -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; width: 180px; 
    }
    body.detail-open .agency-name { color: #000 !important; opacity: 1 !important; }
    body.detail-open .agency-tagline { color: #999 !important; opacity: 0.8 !important; }
    body.detail-open nav a, body.detail-open .header-socials a, body.detail-open .lang-switcher span { color: #888 !important; opacity: 0.7; }
    body.detail-open nav a:hover, body.detail-open nav a.active, body.detail-open .header-socials a:hover, body.detail-open .lang-switcher span:hover, body.detail-open .close-detail:hover { color: #000 !important; opacity: 1 !important; }
    body.detail-open .footer-left span { color: #000 !important; opacity: 0.2; }
}

@media (min-width: 1025px) {
    /* 1. BRANDING: Hide name/tagline, reset logo to top-left */
    body.detail-open .agency-name, 
    body.detail-open .agency-tagline { 
        display: none !important; 
    }

    body.detail-open .agency-logo { 
        height: 55px !important;       /* Must match home page exactly */
        width: auto !important;        /* Must match home page exactly */

        filter: none !important; 
        background-color: transparent !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        height: 40px;
    }

    /* 2. THE GRID: Standard padding (No massive top gap) */
    #detail-view { 
        position: fixed; inset: 0; background: #ffffff; z-index: 90000; 
        display: none; opacity: 0; transition: 0.8s var(--ease); color: #000; 
        padding: 0 40px;
    }

    .detail-grid { 
        display: grid; 
        grid-template-columns: 20% 55% 25%; 
        gap: 40px; 
        height: 100vh; 
        align-items: stretch;
    }

    /* 3. THE GAP: Specific margin on the TITLE to avoid the logo */
    .det-title { 
        margin-top: 120px; /* This creates the gap only for the title area */
        margin-bottom: 30px;
        flex-shrink: 0; 
    }
    
    .det-title .title-main { 
        font-size: 2.2vw; font-weight: 100; letter-spacing: -2px; 
        color: #000; line-height: 1; display: block;
    }

    /* TINY SIGNATURE: No rectangle, just minimal text */
    .det-signature {
        font-size: 8px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #bbb;
        margin-top: 5px;
        border: none !important;
        background: none !important;
    }


    /* 4. LEFT SECTION: MAXIMIZED METRICS SPACE */
    .det-col-left {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .det-metrics-wrap { 
        flex: 1; 
        overflow-y: auto; 
        padding-right: 15px;
        display: flex;
        flex-direction: column;
        gap: 15px; /* Tighter gap to show more metrics */
        margin-bottom: 40px;
    }

    .det-metrics-item {
        text-align: right;
        border-top: 1px solid #f8f8f8;
        padding-top: 10px;
    }

    .det-metrics-item .m-label { font-size: 8px; color: #bbb; text-transform: uppercase; letter-spacing: 1px; }
    .det-metrics-item .m-value { font-size: 14px; color: #000; font-weight: 300; }

    /* 5. CENTER SECTION: IMAGE & CENTERED NAV */
    .det-col-center {
        padding-top: 120px; /* Standard clearance */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-fixed-box { width: 100%; height: 60vh; background: none; }
    #det-main-img { width: 100%; height: 100%; object-fit: cover; }

.dots-container {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 25px 0 15px 0;
    }
        .dot {
        width: 6px; /* Slightly larger */
        height: 6px;
        background: #000;
        opacity: 0.15; /* More visible */
        border-radius: 50%;
        cursor: pointer;
        transition: 0.3s;
    }

    .dot.active {
        opacity: 1;
        background: var(--ryad-blue) !important;
        transform: scale(1.4);
    }

    .nav-text-btns { display: flex; justify-content: center; gap: 30px; width: 100%; }
    .nav-text-btns span { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: #000; opacity: 0.3; cursor: pointer; transition: 0.3s; font-weight: 600; }
    .nav-text-btns span:hover { opacity: 1; }

    /* 6. RIGHT SECTION: NARRATIVE */
    /* 1. THE RIGHT COLUMN: Add 60px gap from the screen edge */
.det-col-right {
        padding-top: 120px !important; 
        padding-right: 80px !important; /* THE LOGIC GAP */
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

/* 2. THE STORY TEXT: Internal scrollbar logic */
.det-story {
    flex: 1;
    overflow-y: auto;
    padding-right: 20px; /* Space between text and scrollbar */
    font-size: 14px;
    line-height: 1.8;
    color: #444;
    font-weight: 300;
    text-align: left;
    
    /* Hide scrollbar by default for Firefox */
    scrollbar-width: none; 
}


.dots-container {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 25px 0 15px 0;
    }


/* 3. SCROLLER BAR: Show only on hover */
.det-story::-webkit-scrollbar {
    width: 2px;
}

.det-story::-webkit-scrollbar-thumb {
    background: transparent; /* Hidden by default */
    transition: background 0.3s ease;
}

.det-story:hover::-webkit-scrollbar-thumb {
    background: #eee; /* Visible on hover */
}

    /* THIN SCROLLBARS */
    .det-metrics-wrap::-webkit-scrollbar, .det-story::-webkit-scrollbar { width: 2px; }
    .det-metrics-wrap::-webkit-scrollbar-thumb, .det-story::-webkit-scrollbar-thumb { background: #eee; }



    /* CLIENT LOGO IN RIGHT SECTION */
.det-client-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    justify-content: flex-start; /* Aligns with text */
}

.det-client-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.4s var(--ease);
}

.det-client-logo {
    max-height: 35px; /* Small and elegant */
    width: auto;
    filter: grayscale(1) opacity(0.5); /* Neutral state */
    transition: all 0.4s var(--ease);
}

/* HOVER: Turns the logo into your Brand Color (using CSS filters) */
.det-client-link:hover .det-client-logo {
    filter: none !important; /* Shows original color */
    opacity: 1 !important;
}

.det-client-link:hover {
    transform: translateY(-3px);
}


}


/* ==========================================================================
   4. MOBILE VERSION (Transparent Bars & Full-Screen Flow)
   ========================================================================== */
/* ==========================================================================
   4. MOBILE VERSION (Fixed Missing Items & Scroll Fade)
   ========================================================================== */
/* ==========================================================================
   4. MOBILE VERSION (Center-Focus & No Scrollbars)
   ========================================================================== */


/* ==========================================================================
   FINAL MOBILE ARCHITECTURE (@media max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    :root { 
        --top-bar-h: 18vh;      /* Height of the Agency Logo/Tagline zone */
        --bottom-zone-h: 220px; /* Safe zone for Nav + Socials + Footer */
        --footer-h: 60px;       /* Just the Signature/Language row */
    }

    /* 1. LOCK BACKGROUND (Prevent Bounce/Scroll) */
    html, body { 
        overflow: hidden !important; 
        position: fixed; 
        width: 100%; 
        height: 100%; 
        height: 100dvh; 
        background-color: #000 !important;
        touch-action: none; 
    }

    #bg-container {
        position: fixed !important;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    /* 2. TOP BAR (Logo, Name, Tagline) */
    header {
        position: fixed !important; top: 0; left: 0; width: 100%;
        height: var(--top-bar-h) !important;
        display: flex !important; flex-direction: column !important;
        justify-content: center !important; align-items: center !important;
        background: transparent !important; padding: 0 !important;
        z-index: 100000; pointer-events: none;
    }

    .brand { pointer-events: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; }



.agency-logo { 
    height: var(--logo-height, 26px) !important; /* Uses your JS setting, or 26px as fallback */
    width: auto !important; 
    filter: brightness(0) invert(1) !important; 
    margin-bottom: 6px; 
    margin-top: 20px;
    opacity: 1 !important; 
}   
 .agency-name { font-size: 10px !important; letter-spacing: 4px !important; color: #fff !important; margin: 0 !important; text-transform: uppercase; }


    .agency-tagline { font-size: 7px !important; color: rgba(255,255,255,0.5) !important; margin-top: 2px !important; letter-spacing: 2px; }

    /* 3. MAIN CONTENT: THE SCROLLABLE WINDOW */
    .main-content {
        position: fixed !important; inset: 0 !important;
        width: 100vw !important; height: 100dvh !important;
        z-index: 50; visibility: hidden; opacity: 0; transition: 0.6s ease;
        
        /* SCROLL ENGINE */
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y; 

        /* THE CINEMATIC MASK: Clears Top Bar and Bottom Nav */
        -webkit-mask-image: linear-gradient(to bottom, 
            transparent 0%, 
            transparent 28%,   /* Text is invisible while passing the Tagline */
            black 42%,         /* Text fully visible in this middle window */
            black 62%,         /* Text fully visible in this middle window */
            transparent 78%,   /* Text fades out before hitting the Nav buttons */
            transparent 100%
        );
        mask-image: linear-gradient(to bottom, transparent 0%, transparent 28%, black 42%, black 62%, transparent 78%, transparent 100%);
    }

    body.list-active .main-content { visibility: visible; opacity: 1; pointer-events: auto; }

    /* Padding keeps the first and last items accessible in the center window */
    .list-wrapper { 
        width: 100% !important; 
        padding: 45vh 0 40vh 0 !important; 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
    }

    .item-row { width: 100% !important; padding: 25px 0 !important; text-align: center !important; border: none !important; }
    .title-main { font-size: 24px !important; font-weight: 200 !important; color: #fff !important; line-height: 1.1; letter-spacing: -1px; }
    .title-sub { font-size: 18px !important; opacity: 0.6 !important; }
    .item-meta { font-size: 8px !important; color: rgba(255,255,255,0.3) !important; margin-top: 8px !important; letter-spacing: 2px; }

    /* 4. BOTTOM NAVIGATION & SOCIALS */
    .header-right { 
        position: fixed !important; 
        bottom: var(--footer-h) !important; /* Sits exactly above the signature row */
        left: 0; width: 100%;
        height: 140px !important; 
        display: flex !important; flex-direction: column !important;
        justify-content: flex-end !important; align-items: center !important;
        z-index: 100000; pointer-events: none; padding-bottom: 20px;
    }

    #main-nav { display: flex !important; gap: 20px !important; margin-bottom: 25px !important; pointer-events: auto !important; }
    #main-nav a { font-size: 10px !important; letter-spacing: 2px !important; color: #fff !important; opacity: 0.4 !important; text-transform: uppercase; text-decoration: none; }
    #main-nav a.active { opacity: 1 !important; color: var(--ryad-blue) !important; font-weight: 600; }

    #agency-socials { display: flex !important; gap: 30px !important; pointer-events: auto !important; }
    #agency-socials a { font-size: 24px !important; color: #fff !important; opacity: 0.5 !important; }

    /* 5. FOOTER ROW: SIGNATURE (LEFT) | LANGUAGE (RIGHT) */
    .footer-sig {
        position: fixed !important; 
        bottom: 0 !important; 
        left: 0 !important; 
        width: 100% !important;
        height: var(--footer-h) !important;
        display: flex !important; 
        flex-direction: row !important;
        justify-content: space-between !important; 
        align-items: center !important;
        padding: 0 30px !important; 
        z-index: 1000001 !important; 
        background: transparent !important;
        pointer-events: none !important;
    }

    .footer-left { pointer-events: none !important; }
    .footer-left span { 
        font-size: 8px !important; 
        color: rgba(255, 255, 255, 0.4) !important; /* Visible faint white signature */
        letter-spacing: 1px !important; 
        display: block !important;
    }

    .mob-lang-wrap { 
        display: flex !important; 
        gap: 20px !important; /* Space between EN | AR */
        pointer-events: auto !important; 
        z-index: 1000002 !important;
    }
    .mob-lang-wrap span { 
        font-size: 9px !important; 
        color: #fff !important; 
        opacity: 0.4; 
        text-transform: uppercase; 
        letter-spacing: 1px;
    }
    .mob-lang-wrap span.active { opacity: 1 !important; font-weight: 700 !important; }

    /* 6. DETAIL VIEW FIXES */
    .mob-detail-container { width: 100% !important; padding: 0 30px !important; }
    .mob-short-text { font-size: 14px !important; line-height: 1.8 !important; color: #fff !important; margin-bottom: 35px; }
    .mob-metrics-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px; width: 100%; margin-bottom: 35px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 25px; }
    .mob-m-label { font-size: 8px !important; opacity: 0.4; text-transform: uppercase; }
    .mob-m-val { font-size: 12px !important; color: #fff !important; margin-top: 4px; }
    .mob-gallery-btn { width: 100%; padding: 18px; border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 35px; background: transparent; }
    .mob-long-text { font-size: 13px !important; line-height: 2.2 !important; color: rgba(255,255,255,0.6) !important; text-align: left !important; }
    
    .det-client-link { filter: brightness(0) invert(1) !important; opacity: 0.4 !important; margin: 40px 0; display: block !important; }
    .det-client-logo { height: 32px !important; width: auto !important; }

    /* Hide Desktop HUD */
    #hud, .nav-zone, .lang-switcher { display: none !important; }
}




/* ==========================================================================
   5. LIGHTBOX & FULLSCREEN OVERRIDES
   ========================================================================== */
#hero-cta-container { position: fixed; top: 50%; z-index: 10005; width: fit-content; max-width: 80vw; pointer-events: none; opacity: 0; display: none; flex-direction: column; }
#hero-cta-container.align-center { left: 50%; transform: translate(-50%, -50%); align-items: center; text-align: center; }
#hero-cta-container.align-left { left: 80px; transform: translateY(-50%); align-items: flex-start; text-align: left; }
#hero-cta-container.align-right { right: 80px; transform: translateY(-50%); align-items: flex-end; text-align: right; }
body.home-active #hero-cta-container.visible { opacity: 1; display: flex; pointer-events: auto; }

.hero-big-title { font-weight: 100; text-transform: uppercase; line-height: 1.1; letter-spacing: -2px; margin-bottom: 20px; color: #fff; font-size: 5vw; }
.hero-subtitle { font-size: 14px; text-transform: uppercase; letter-spacing: 4px; opacity: 0.6; margin-bottom: 40px; max-width: 500px; color: #fff; }
.hero-btn { display: inline-block; padding: 20px 40px; border: 1px solid #fff; color: #fff; text-decoration: none; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; transition: 0.4s; cursor: pointer; pointer-events: auto !important; }
.hero-btn:hover { background-color: var(--hover-accent) !important; border-color: var(--hover-accent) !important; color: #fff !important; }

#lightbox-view { position: fixed; inset: 0; background: #000; z-index: 105000; display: none; opacity: 0; transition: opacity 0.6s ease; align-items: center; justify-content: center; overflow: hidden; }
#lightbox-view.active { display: flex !important; opacity: 1; }

/* LIGHTBOX NAVIGATION ZONES & CURSORS */
.lightbox-nav-zone { position: absolute; top: 0; height: 100%; width: 40%; z-index: 110000; display: block; }
.lightbox-nav-zone.left { 
    left: 0; 
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") 16 16, auto; 
}
.lightbox-nav-zone.right { 
    right: 0; 
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") 16 16, auto; 
}


#lightbox-img { 
    height: 100vh !important; 
    width: auto !important; 
    max-width: 100vw;
    object-fit: contain !important; 
    filter: brightness(1) grayscale(0) contrast(1) sepia(0) !important; 
    -webkit-filter: brightness(1) grayscale(0) contrast(1) sepia(0) !important;
    z-index: 105500; 
    opacity: 1 !important;
}


.close-lightbox { position: fixed; top: 16px; right: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; z-index: 120000; color: #ffffff; opacity: 0.8; transition: transform 0.4s var(--ease), opacity 0.3s ease; }
.close-lightbox:hover { opacity: 1; transform: rotate(90deg); }

body.is-fullscreen header { z-index: 110000 !important; opacity: 1 !important; pointer-events: none; }
body.is-fullscreen .footer-sig { z-index: 110000 !important; opacity: 1 !important; color: #ffffff !important; }
body.is-fullscreen .agency-logo { filter: brightness(0) invert(1) !important; opacity: 1 !important; }
body.is-fullscreen .header-right { display: none !important; }

/* BRANDING TURNS WHITE IN FULLSCREEN */
body.is-fullscreen .agency-name, body.is-fullscreen .agency-tagline { color: #fff !important; opacity: 1 !important; }

#a-long {
    line-height: 2;
    letter-spacing: 0.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.7);
}

#det-story-text {
    font-size: 16px;
    line-height: 2;
    font-weight: 300;
    color: #333;
    white-space: pre-wrap; /* Keeps your paragraphs from the dashboard */
}

/* Dark/Professional Map Styling */
iframe {
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Ensure the detail view can scroll if the narrative is long */
#det-story-text {
    overflow-y: auto;
    padding-right: 20px;
    max-height: 70vh;
}

/* Animation for entering the tabs */
.detail-open #detail-view {
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
}

/* Specific styling for About and Contact views */
.list-active #detail-view {
    background: #fff !important; /* Since project detail is white, keep it consistent */
    color: #000 !important;
}


/* About Cinematic Team Grid Fix */
@media (max-width: 1024px) {
    #ab-cin-team {
        grid-template-columns: 1fr !important; /* Stack vertically on mobile */
        bottom: 20px !important;
        max-height: 30vh;
        overflow-y: auto;
    }
    #ab-cin-text {
        font-size: 12px !important;
        line-height: 1.8 !important;
        padding: 0 20px;
    }
}

/* Ensure background image is always under the text */
#bg-img.active {
    z-index: 1;
}
#about-overlay {
    z-index: 10;
}

/* Styling for the members in the cinematic overlay */
.team-card-cinematic {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    transition: 0.4s ease;
}

.team-card-cinematic:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.team-img-cinematic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.8;
}

/* Cinematic About Scroller */
#about-overlay {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
}
#about-overlay::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

/* THE CINEMATIC MASK: Fades content at top and bottom */
.about-scroll-content {
    width: 100%;
    min-height: 100vh;
    -webkit-mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        black 20%, 
        black 80%, 
        transparent 100%
    );
    mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        black 20%, 
        black 80%, 
        transparent 100%
    );
}

/* Luxury Team Cards */
.team-card-cinematic {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.team-img-cinematic {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Mobile Responsive Grid */
@media (max-width: 1024px) {
    #ab-cin-team {
        grid-template-columns: 1fr !important;
    }
    .about-scroll-content {
        -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 15%, black 85%, transparent 95%);
    }
}


/* Perfect centering for the scroll content */
.about-inner-wrap {
    margin: 0 auto;
}

/* Team Hover Logic */
.team-card-cinematic {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    cursor: default;
}

/* On hover: brighten card and border */
.team-card-cinematic:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.team-img-cinematic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1); /* Grayscale by default */
    opacity: 0.6;
    transition: all 0.6s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

/* On hover: Show real color */
.team-card-cinematic:hover .team-img-cinematic {
    filter: grayscale(0); /* Remove grayscale */
    opacity: 1;           /* Full visibility */
    transform: scale(1.05);
}