.elementor-10690 .elementor-element.elementor-element-5d442454{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-78cc8110{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-1589e780{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-9bbe247{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-7047d15b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-60a84a33{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-6b884d66{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-c5bdf55{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-76c766e1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-15783a5f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-57a5c1be{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-4abc0bc8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-31750994{--display:flex;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-4e2ebaac{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-46419206{--display:flex;}.elementor-10690 .elementor-element.elementor-element-7c27701b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-17b6e11e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-725979aa{--display:flex;}.elementor-10690 .elementor-element.elementor-element-38bed1ae{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-5841509a{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-7b4c4218{--display:flex;}.elementor-10690 .elementor-element.elementor-element-7a638215{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-3a8aad8{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-583992c7{--display:flex;}.elementor-10690 .elementor-element.elementor-element-37533fdc{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-5786a689{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-3189125{--display:flex;}.elementor-10690 .elementor-element.elementor-element-75c5da14{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-49a682bd{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-209b12fb{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-24c56218{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-5c5920da{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-63ef6e79{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-7060b342{--display:flex;}.elementor-10690 .elementor-element.elementor-element-42263e97{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-2ee60574{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-7d60ca72{--display:flex;}.elementor-10690 .elementor-element.elementor-element-6497ef04{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-12623e8{--display:flex;--position:absolute;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-10690 .elementor-element.elementor-element-12623e8{left:0px;}body.rtl .elementor-10690 .elementor-element.elementor-element-12623e8{right:0px;}.elementor-10690 .elementor-element.elementor-element-4e80426f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-15287c36{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-2ecb2e16{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-7f6062ef{--display:flex;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-34d2870b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-78752e8c{--display:flex;}.elementor-10690 .elementor-element.elementor-element-67278066{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-6a1741a7{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-3100d0ca{--display:flex;}.elementor-10690 .elementor-element.elementor-element-301ce44a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-3b6560c1{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-3d875c73{--display:flex;}.elementor-10690 .elementor-element.elementor-element-6c48aff9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-e69d496{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-21277a7a{--display:flex;}.elementor-10690 .elementor-element.elementor-element-162ceae5{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-71f23355{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-132235a9{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-6172cc4a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-67350b2e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-7f04d93b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-324c075e{--display:flex;}.elementor-10690 .elementor-element.elementor-element-79c8f0f2{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-14bffaef{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-2c4bb79a{--display:flex;}.elementor-10690 .elementor-element.elementor-element-155fda72{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-1eaf0b53{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-671d49dc{--display:flex;}.elementor-10690 .elementor-element.elementor-element-6aab8efe{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-e0e8081{--display:flex;--position:absolute;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-10690 .elementor-element.elementor-element-e0e8081{left:0px;}body.rtl .elementor-10690 .elementor-element.elementor-element-e0e8081{right:0px;}.elementor-10690 .elementor-element.elementor-element-23ae6fde{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-7195e97{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-58916e0f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-58916e0f.e-con{--align-self:flex-start;}.elementor-10690 .elementor-element.elementor-element-38d919c0{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-5398ca0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-12642d0b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10690 .elementor-element.elementor-element-2e1b141f{--display:flex;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-2e1b141f.e-con{--align-self:center;}.elementor-10690 .elementor-element.elementor-element-13f709f1{--display:flex;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-13f709f1.e-con{--align-self:center;}.elementor-10690 .elementor-element.elementor-element-12a0ab01{--display:flex;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10690 .elementor-element.elementor-element-12a0ab01.e-con{--align-self:center;}.elementor-10690 .elementor-element.elementor-element-210b6816{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* ==========================================================================
   01. GLOBAL CONFIGURATION & CORE CANVAS VARIABLES
   ========================================================================== */
body {  
    background-color: #111111 !important;  
    margin: 0; 
    padding: 0;
    -webkit-font-smoothing: antialiased;

    /* --- CENTRAL CONTROL PANEL FOR RESPONSIVE WIDTH ENGINE --- */
    --grid-gap: clamp(2px, 0.30vw, 10px);  
    --main-canvas-width: clamp(75vw, 40vw + 600px, calc(100% - (var(--grid-gap) * 2)));
}

/* ==========================================================================
   02. MAIN SITE WRAPPER (PROPORTIONAL FRAME CANVAS)
   ========================================================================== */
.main-wrapper {  
    display: flex !important;
    flex-direction: column !important;
    gap: var(--grid-gap) !important;  
    
    /* Tied to central layout variable */
    width: var(--main-canvas-width) !important; 
    
    margin: clamp(20px, 4vh, 60px) auto var(--grid-gap) auto !important;
    background: #0A0A0A !important;  
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    min-height: calc(100vh - (var(--grid-gap) * 2));  
    
    box-shadow: 0px 40px 100px rgba(0, 0, 0, 0.6),  
                0px 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   03. ROW LAYOUTS & GRID ARCHITECTURE
   ========================================================================== */
.row-top, .second-row, .third-row, .fourth-row, .fifth-row {   
    display: grid !important;   
    gap: var(--grid-gap) !important;   
    padding: 0 !important; 
    margin: 0 !important;
    width: 100% !important;   
    align-items: stretch !important;
    position: relative !important;
    overflow: hidden !important; 
}

.row-top    { grid-template-columns: 3fr 1fr; }
.second-row { grid-template-columns: 1.4fr 3.3fr; }

/* FIXED: Clean percentage split prevents layout collapse and scales the poster cleanly */
.third-row  { grid-template-columns: 67% 33% !important; }

.fourth-row { grid-template-columns: repeat(5, 1fr); }  
.fifth-row  { grid-template-columns: repeat(5, 1fr); }



/* ==========================================================================
   03b. STUDIO MONOLITH BANNER ROW
   ========================================================================== */
.studio-banner-row {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.studio-monolith-photo {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

/* ==========================================================================
   04. NESTED GRID ENGINES & COLUMN SPANNING
   ========================================================================== */
.drawer-parent-box {  
    display: grid !important;  
    grid-template-columns: repeat(4, 1fr) !important;  
    gap: var(--grid-gap) !important;  
    position: static !important; 
    overflow: visible !important; 
}

.fourth-row > .drawer-parent-box { grid-column: span 3; }
.fourth-row > .big-poster-column { grid-column: span 2; }

/* ==========================================================================
   05. BRANDING & STATIC LOGO HERO BOX
   ========================================================================== */
.box-logo {  
    background: #FFD84A !important;  
    display: flex !important;  
    align-items: center !important;  
    justify-content: center !important;
    padding: 10% !important;  
    box-sizing: border-box !important;
    position: relative !important; 
    cursor: pointer !important;
}

.box-logo .elementor-widget,
.box-logo .elementor-widget-container {
    position: static !important;
    width: 100% !important; /* Fixes the collapsed 0px width bug in Firefox */
}

.box-logo .project-data-backpack {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 0 !important; height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important; padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.box-logo img {  
    width: 100% !important;  
    height: auto !important;  
    display: block !important;  
}

/* MASTER TEXT TRACK CONFIGURATION (CONVERTED TO OUTLINE BUTTON) */
.logo-about-text {
    position: absolute !important;
    bottom: clamp(15px, 3vh, 35px) !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-block !important;
    
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(1rem, 1.3vw, 1.9rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important; 
    line-height: normal !important;
    white-space: nowrap !important;
    pointer-events: auto !important; /* Enabled to allow direct hover scaling */
    
    /* Transparent Outline Style Modifications */
    background-color: transparent !important;
    color: #000000 !important; 
    border: 1.5px solid #000000 !important;
    padding: 6px 20px !important;
    border-radius: 0px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    
    z-index: 5 !important; 
    opacity: 1 !important;
    transition: letter-spacing 0.3s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* THE DUPLICATE WHITE LAYER (Sits inside the drawer column) */
.logo-about-white {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important; /* Matches outline color for internal tracking */
    z-index: 105 !important;
    bottom: calc(clamp(15px, 3vh, 35px) + 2px) !important; 
}

/* RESPONDS TO HOVER STATES SHARPLY */
.box-logo:hover .logo-about-text,
body:has(.logo-drawer:hover) .logo-about-text,
.logo-about-text.transition-hover-guard {
    letter-spacing: 0.25em !important;
}

/* BUTTON-SPECIFIC HOVER SCALING */
/*.logo-about-text:hover {*/
/*    transform: translateX(-50%) scale(1.04) !important;*/
/*    background-color: rgba(0, 0, 0, 0.03) !important;*/
/*}*/

/* Global state track switches text and outline to white when open */
body:has(.logo-drawer.is-open) .logo-about-text {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

/* Enforces hand mouse pointer window when the open drawer panel captures layer focus */
.logo-drawer,
.logo-drawer .drawer-content-static,
.logo-drawer .drawer-content-target {
    cursor: pointer !important;
}

/* FORCES VISIBLE LOGO TO PURE BLACK WITHOUT TOUCHING DRAWER COPIES */
img.box-logo-visible {
    filter: brightness(0) !important;
}


/* ==========================================================================
   06. THE BRANDING LOGO DRAWER (SPLIT-SLIDE ENGINE)
   ========================================================================== */
.logo-drawer {
    position: absolute !important; 
    top: 0 !important; bottom: 0 !important; 
    left: -2px !important; right: -2px !important; 
    width: auto !important; height: auto !important;
    background: transparent !important; 
    z-index: 100 !important;
    overflow: hidden !important; pointer-events: none;
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0, 1) !important;
    container-type: inline-size !important;
}

.logo-drawer.is-open {
    transform: translateX(0%) !important;
    pointer-events: auto !important;
}

.logo-drawer .drawer-content-static {
    position: absolute !important; 
    top: -2px !important; bottom: -2px !important;      
    left: 0 !important; right: 0 !important;        
    width: auto !important; height: auto !important;
    padding: 0 !important; box-sizing: border-box !important;
    display: flex !important; flex-direction: column !important;
    
    /* Base configuration + Mobile Portrait fallback image */
    background: url('https://roiberstudio.com/wp-content/uploads/BODY_MOB.webp') 55% bottom / auto 85% no-repeat, #111111 !important;
    
    transform: translateX(-100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0, 1) !important;
    overflow: hidden !important;
    box-shadow: 0px 0px 0px 10px #191919 !important; 
}

.logo-drawer.is-open .drawer-content-static {
    transform: translateX(0%) !important;
}

.logo-drawer .drawer-content-target {
    width: 100% !important;
    height: 100% !important;
}

.drawer-logo-layout {
    display: grid !important;
    grid-template-columns: 3fr 1fr !important;
    gap: var(--grid-gap) !important; 
    width: calc(100% - 4px) !important; 
    margin-left: 2px !important;         
    height: 100% !important;
    margin-top: 0 !important; margin-bottom: 0 !important;
    padding: 0 !important;
}

/* BIOGRAPHY COLUMN TYPOGRAPHY & SAFE ZONE */
.drawer-logo-bio {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: flex-start !important;
    box-sizing: border-box !important;
    color: #FFFFFF !important;
    max-width: 40cqw !important;  
    padding: 3.5cqw 5cqw 3.5cqw 4.5cqw !important; 
}

.drawer-logo-bio p {
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.35 !important; 
    text-align: left !important; 
    color: #DDDDDD !important; 
    letter-spacing: 0.01em !important; 
    font-size-adjust: none !important;
    font-size: 1.25cqw !important; 
    margin: 0 0 2.2cqw 0 !important; 
}

.drawer-logo-bio p:last-child {
    margin-bottom: 0 !important; 
}

/* UNIVERSAL BOLD KEYWORDS SUBTLE BRIGHTNESS BOOST */
.drawer-logo-bio strong,
.services-drawer-inner-content strong {
    font-weight: 700 !important; 
    color: #E0E0E0 !important; 
    text-shadow: none !important; 
}

/* White Logo Container Alignment */
.drawer-logo-mask {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 10% !important; 
    position: relative !important; 
}

.drawer-logo-mask img {
    width: 98% !important; 
    height: auto !important;
    display: block !important;
    filter: brightness(0) invert(1) !important; 
}

/* Responsive WebP Image Swaps */
@media (min-width: 1025px) {
    .logo-drawer .drawer-content-static {
        background-image: url('https://roiberstudio.com/wp-content/uploads/BODY_LOW.webp') !important;
    }
}

@media (min-width: 1821px) {
    .logo-drawer .drawer-content-static {
        background-image: url('https://roiberstudio.com/wp-content/uploads/BODY_MED.webp') !important;
    }
}

@media (min-width: 2461px) {
    .logo-drawer .drawer-content-static {
        background-image: url('https://roiberstudio.com/wp-content/uploads/BODY_HIGH.webp') !important;
    }
}

@media (min-width: 3801px) {
    .logo-drawer .drawer-content-static {
        background-image: url('https://roiberstudio.com/wp-content/uploads/BODY_MAX.webp') !important;
    }
}

/* ==========================================================================
   07. GRID LAYOUT VARIATIONS & INTERACTION STATES
   ========================================================================== */

/* --- INTERACTIVE DRAWER HANDLES (LEFT & RIGHT FIXES) --- */
.left-box,
.right-box {  
    background: #111111 !important;  
    position: relative !important; 
    z-index: 10 !important;
    overflow: visible !important;  
    transition: z-index 0.4s step-end !important; 
    cursor: pointer !important;
}

.left-box.is-open,
.right-box.is-open {
    z-index: 999 !important;      
    transition: z-index 0.4s step-start !important;
}

.left-box .elementor-widget,
.left-box .elementor-widget-container,
.right-box .elementor-widget,
.right-box .elementor-widget-container {
    position: static !important;
    overflow: visible !important;
}

/* --- POSTER CONTAINER MODULES --- */
.right-info-box {  
    background: #191919 !important;  
    position: relative !important;  
    aspect-ratio: 5/7 !important;  
    overflow: hidden !important;
    padding: 0 !important;          
}

.right-info-box.big-box-poster {  
    padding: 0 !important; 
    background: transparent !important; 
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.box-poster         { aspect-ratio: 5/7 !important; height: auto !important; background: #1a1a1a !important; overflow: hidden !important; cursor: pointer !important; }
.big-poster-stretch { height: 100% !important; aspect-ratio: auto !important; background: #1a1a1a !important; overflow: hidden !important; cursor: pointer !important; }
.wide-poster        { grid-column: span 2 !important; height: 100% !important; background: #1a1a1a !important; overflow: hidden !important; cursor: pointer !important; }

.big-box-poster .elementor-widget,
.big-box-poster .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- CINEMATIC POSTER IMAGE HOVER ENGINE --- */
.box-poster img,  
.big-poster-stretch img,  
.wide-poster img,
.big-box-poster img {
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important;
    filter: grayscale(100%) brightness(0.6) !important;
    transition: filter 0.3s cubic-bezier(0.2, 1, 0.3, 1), transform 0.3s ease !important;
}

.box-poster:hover img,  
.big-poster-stretch:hover img,  
.wide-poster:hover img,
.big-box-poster:hover img {
    filter: grayscale(0%) brightness(1) !important;
}

/* Forces internal Elementor wrappers to span full height inside the stretched column */
.big-poster-stretch .elementor-widget,
.big-poster-stretch .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- EXTRA FIX: NEUTRALIZES ELEMENTOR LEFT-ALIGNMENT OVERRIDES --- */
.big-poster-stretch .elementor-widget-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.big-poster-stretch img {
    object-position: center center !important;
}

/* ==========================================================================
   08. VECTOR GRAPHICS STYLING & SUBPIXEL ALIGNMENT FIXES
   ========================================================================== */
.info-svg-graphic {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    width: 72% !important; 
    height: auto !important; 
    display: block !important;
    filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 1))  
            drop-shadow(0px 20px 35px rgba(0, 0, 0, 1))  
            drop-shadow(0px 40px 60px rgba(0, 0, 0, 1));
    will-change: filter;
}

.info-svg-graphic.drawer-revealed-colored path {
    fill: #FFFFFF !important;
}

/* Stabilizes the subpixel subrounding rendering drift on high density displays */
.info-svg-graphic.drawer-revealed-colored {
    transform: translate(calc(-50% - 0.5px), -50%) !important;
    image-rendering: -webkit-optimize-contrast !important;
    backface-visibility: hidden !important;
}

/* Removes the nudge entirely to achieve dead-center alignment for the 3rd row */
.right-box .info-svg-graphic.drawer-revealed-colored {
    transform: translate(-50%, -50%) !important;
}

/* ==========================================================================
   09. SERVICES BOX EXPANDABLE DRAWER WINDOW MASK
   ========================================================================== */
.e-con:has(> .left-box), .e-container:has(.left-box), .elementor-section:has(.left-box),
.e-con:has(> .right-box), .e-container:has(.right-box), .elementor-section:has(.right-box) {
    overflow-x: hidden !important;
    overflow-y: hidden !important; 
}

.services-drawer-engine {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; height: 100% !important;
}

.services-front-pane {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.services-expanded-drawer {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    height: 100% !important;
    width: calc(335.714% + var(--grid-gap) + 2px) !important; 
    z-index: 6 !important; 
    background: #111111 !important;
    clip-path: inset(0 100% 0 0) !important; 
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0, 1) !important;
    will-change: clip-path;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
    container-type: inline-size !important;
}

.left-box.is-open .services-expanded-drawer {
    clip-path: inset(0 -40px 0 0) !important; 
}

.services-drawer-masked-pane {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: calc((100% - var(--grid-gap) - 2px) * (1.4 / 4.7)) !important; 
    height: 100% !important;
    pointer-events: none !important;
}

.services-drawer-content-clip {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    left: calc(((100% - var(--grid-gap) - 2px) * (1.4 / 4.7)) + var(--grid-gap)) !important; 
    right: 0 !important;
}

.left-box.is-open .services-drawer-content-clip {
    position: absolute !important;
}

.left-box .info-svg-graphic.drawer-revealed-colored {
    transform: translate(-50%, -50%) !important;
}

.services-svg-storage { 
    display: none !important; 
}

/* ==========================================================================
   10 & 12. UNIFIED SERVICES EXPANDED CANVAS & ROW-LOCKED GRID ENGINE
   ========================================================================== */
.services-drawer-inner-content {
    box-sizing: border-box !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important; 
    padding: 2.5cqw 4cqw 2.5cqw 2cqw !important; 
}

/* MASTER 2D GRID CONFIGURATION - ROW-LOCKED & PERFECTLY CENTERED */
.services-grid {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1fr !important;          /* Balanced column proportions */
    grid-template-rows: repeat(3, auto) !important;            /* Lets rows size naturally to content */
    gap: 2.5cqw 4.5cqw !important;                              /* Perfect horizontal and vertical spacing */
    width: 100% !important;
    max-width: 95cqw !important; 
    align-content: center !important;                           /* Centers the entire 3-row block vertically */
    align-items: start !important;                              /* Flawlessly aligns column baselines */
}

/* UNIFIED COMPONENT SHAPE RULES */
.service-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
}

/* FEATURED COLUMN (Left-aligned text, balanced between yellow lines) */
.service-item.col-featured {
    grid-column: 1 !important;
    grid-row: span 3 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;                         /* Centers text vertically inside the lines */
    align-items: stretch !important;                            /* Lets text fill the column naturally */
    box-sizing: border-box !important;
    padding: 0 3.5cqw !important;                               /* Clean, symmetrical side padding */
    border-left: 2px solid #FFD84A !important;                  /* Converted to yellow */
    border-right: 2px solid #FFD84A !important;                 /* Converted to yellow */
}

@media (max-width: 767px) {
    .service-item.col-featured {
        /* Drops the border thickness from 2px to 1px for smaller resolutions */
        border-left-width: 1px !important;
        border-right-width: 1px !important;
    }
}

.service-text-block {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* CRISP, EM-SCALED TYPOGRAPHY PROPORTIONS */
.service-item h3 {
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 700 !important;
    color: #FFD84A !important;                                  /* Converted to yellow */
    line-height: 1.2 !important;
    margin: 0 0 0.5cqw 0 !important;
    font-size: 1.5cqw !important;                               
    
    /* ANTI-INDENTATION STATE DESTRUCTION */
    text-indent: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Distinct prominent header sizing for Column 1 */
.col-featured .service-item h3 {
    font-size: 1.8cqw !important;                               
}

/* UNIFIED PARAGRAPH VALUES */
.service-item p {
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.45 !important; 
    text-align: left !important; 
    color: #FFFFFF !important; 
    letter-spacing: 0.01em !important;
    margin: 0 !important;
    font-size: 0.92cqw !important; 
}

/* FORCES CLEAN LEFT ALIGNMENT INSIDE THE COL-FEATURED BLOCK */
.col-featured h3,
.col-featured p {
    text-align: left !important;
}

/* ==========================================================================
   11. HOVER LABELS TIMING & TEXT STYLES (WHAT WE DO?)
   ========================================================================== */
.services-about-text {
    position: absolute !important;
    bottom: clamp(15px, 3vh, 35px) !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-block !important;
    z-index: 7 !important; 
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(1rem, 1.3vw, 1.9rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important; 
    line-height: normal !important;
    white-space: nowrap !important;
    pointer-events: auto !important; /* Enabled to match button hover interactivity */
    
    /* White Outline Button Style Modifications */
    background-color: transparent !important;
    color: #FFD84A !important; 
    border: 1px solid #FFD84A !important;
    padding: 8px 20px !important;
    border-radius: 0px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    
    transition: letter-spacing 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, border-color 0.2s ease !important;
}

/* COMBINED HOVER EFFECT FOR BOTH DRAWERS */
.left-box:hover .services-about-text,
.right-box:hover .services-about-text {
    letter-spacing: 0.25em !important;
}

/* BUTTON-SPECIFIC HOVER SCALING */
/*.services-about-text:hover {*/
/*    transform: translateX(-50%) scale(1.04) !important;*/
/*    background-color: rgba(255, 255, 255, 0.05) !important;*/
/*}*/

.left-box.is-open .services-about-text {
    color: #FFD84A !important;
    z-index: 7 !important; 
}

/* ==========================================================================
   13. CINEMATIC SHOWREEL PLAYER COMPONENT
   ========================================================================== */
.showreel-box { 
    position: relative; 
    width: 100% !important; 
    aspect-ratio: 16/9 !important; 
    background: transparent !important; 
    line-height: 0; 
    overflow: hidden; 
    isolation: isolate !important; 
}

.sr-preview { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover; 
    display: block !important; 
}

.sr-player { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    z-index: 10; 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.8s ease; 
}

.sr-player iframe { width: 100%; height: 100%; display: block; }

.sr-overlay { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    display: flex; justify-content: center; align-items: center; 
    pointer-events: none; 
}

.btn-burn-trigger {
    width: clamp(150px, 20%, 450px) !important; 
    aspect-ratio: 1/1;
    color: #FFD700 !important; 
    mix-blend-mode: overlay !important;
    display: flex; justify-content: center; align-items: center;
    pointer-events: auto; 
    cursor: pointer; 
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0px 4px 35px rgba(0, 0, 0, 0.7)) !important;
}

.btn-burn-trigger:hover { transform: scale(1.08); }
.btn-burn-trigger svg { width: 100%; height: auto; display: block; }
.btn-burn-trigger svg path { fill: currentColor !important; }

.sr-tag {
    position: absolute; 
    bottom: clamp(25px, 2vh, 80px); 
    right: clamp(5px, 1.2vw, 50px);  
    font-family: 'Satoshi', sans-serif !important; 
    font-weight: 900 !important; 
    font-size: clamp(1rem, 2vw, 2.5rem) !important;  
    color: #FFD84A;                                             /* Converted to yellow */
    text-transform: uppercase; 
    letter-spacing: 0.15em; 
    z-index: 6; 
    pointer-events: none; 
    opacity: 0.8; 
}

.showreel-box.is-active .sr-player { opacity: 1; pointer-events: auto; }
.showreel-box.is-active .sr-preview, 
.showreel-box.is-active .sr-overlay { opacity: 0; pointer-events: none; }

/* ==========================================================================
   14. STANDARD FILM DRAWERS ENGINE & INTERACTIVE FRAMEWORKS
   ========================================================================== */
.project-drawer {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 100 !important;
    overflow: hidden !important; pointer-events: none;
    transform: translateX(-100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0, 1) !important;
    background: #090909 !important; 
}

.project-drawer.is-open {
    transform: translateX(0%) !important;
    pointer-events: auto !important;
}

.project-drawer .drawer-content-static {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    padding: 0 !important; 
    box-sizing: border-box !important;
    display: flex !important; flex-direction: column !important;
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0, 1) !important;
    overflow: hidden !important; 
}

.project-drawer.is-open .drawer-content-static {
    transform: translateX(0%) !important;
}

.box-poster .project-data-backpack,
.big-poster-stretch .project-data-backpack,
.wide-poster .project-data-backpack {
    display: none !important;
}

.drawer-content-target {
    flex-grow: 1;
    overflow: hidden !important; 
    height: 100%;
}

.drawer-content-target::-webkit-scrollbar { display: none; }
.drawer-content-target { -ms-overflow-style: none; scrollbar-width: none; }

.drawer-content-target video,
.drawer-content-target iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9; 
    border-radius: 4px; 
}

.project-drawer .drawer-content-target,
.project-drawer .drawer-content-target .elementor-widget,
.project-drawer .drawer-content-target .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    background: #090909 !important;
}

.project-view-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important; 
    width: 100% !important;
    height: 100% !important; 
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #090909 !important;
    container-type: inline-size !important;
}

.project-view-info {
    background: #111111 !important; 
    box-sizing: border-box !important;
    width: 25% !important; 
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; 
    overflow: hidden !important; 
    scrollbar-width: none !important; 
    padding: 2.5cqw 1.8cqw 2.5cqw 1.8cqw !important;
}

.project-view-info::-webkit-scrollbar {
    display: none !important;
}

.project-view-media {
    background: #090909 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 75% !important; 
    height: 100% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.project-view-media img {
    width: 100% !important;
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important;
}

/* --- ROW 3 DRAWER ANCHOR DIRECTIVES --- */
.third-row .project-drawer {
    transform: translateX(100%) !important; 
}

.third-row .project-drawer.is-open {
    transform: translateX(0%) !important;
}

.third-row .project-drawer .drawer-content-static {
    transform: translateX(-100%) !important; 
}

.third-row .project-drawer.is-open .drawer-content-static {
    transform: translateX(0%) !important;
}

.third-row .project-view-container {
    flex-direction: row-reverse !important;
}

.project-drawer,
.project-drawer .drawer-content-static,
.project-drawer .drawer-content-target,
.project-view-media,
.project-view-info {
    cursor: pointer !important;
}

/* ==========================================================================
   15. PROJECT DRAWER METADATA TYPOGRAPHY (REVERTED TO CENTRALIZED LINES)
   ========================================================================== */
.project-view-container {
    --p-title-size: 3.8cqw;
    --p-subtitle-size: 1.1cqw; 
    --p-label-size: 0.75cqw;
    --p-value-size: 1.1cqw;
    --p-desc-size: 1.25cqw;
}

.project-meta-title {
    font-family: 'Satoshi', sans-serif !important;
    color: #FFFFFF !important;
    font-size: var(--p-title-size) !important; 
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    letter-spacing: 0.02em !important;
    margin: 0 0 0.4cqw 0 !important; 
}

/* Yellow accent subtitle block sitting directly below the title */
.project-meta-subtitle {
    font-family: 'Satoshi', sans-serif !important;
    color: #FFD84A !important;
    font-size: var(--p-subtitle-size) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    display: block !important;
    margin: 0 !important; 
}

/* CENTRALIZED LINE & SPACING CONTROLLER CONTAINER */
.project-meta-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5cqw !important;

    /* --- VISUAL LINES --- */
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;

    /* --- INTERNAL DISTANCES (Inside the lines) --- */
    padding-top: 1.2cqw !important;       /* Space between top line and first data label */
    padding-bottom: 1.2cqw !important;    /* Space between last data value and bottom line */

    /* --- EXTERNAL DISTANCES (Outside the lines) --- */
    margin-top: 1.2cqw !important;        /* Space between subtitle text and top line */
    margin-bottom: 1.2cqw !important;     /* Space between bottom line and description text */
}

.meta-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.project-view-info .meta-label {
    font-family: 'Satoshi', sans-serif !important;
    color: #FFD84A !important; 
    font-size: var(--p-label-size) !important; 
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.project-view-info .meta-value {
    font-family: 'Satoshi', sans-serif !important;
    color: #FFFFFF !important;
    font-size: var(--p-value-size) !important; 
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.project-meta-description {
    font-family: 'Satoshi', sans-serif !important;
    color: #dbdbdb !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: var(--p-desc-size) !important; 
}

/* ==========================================================================
   16. INNER GALLERY CONTROLLERS SLIDER
   ========================================================================== */
.gallery-slider-engine {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #090909 !important;
    isolation: isolate !important; 
}

.gallery-slide {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 0 !important;
    z-index: 1 !important;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.gallery-slide.is-active {
    opacity: 1 !important;
    z-index: 2 !important;
}

.gallery-arrow {
    position: absolute !important;
    top: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #FFFFFF !important; 
    font-weight: 200 !important; 
    -webkit-text-stroke: 0px !important; 
    width: clamp(100px, 12cqw, 180px) !important;
    height: clamp(100px, 12cqw, 180px) !important;
    font-size: clamp(4rem, 6cqw, 8rem) !important; 
    cursor: pointer !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    mix-blend-mode: normal !important; 
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.40)) !important; 
    will-change: transform, opacity !important;
    transform: translateY(-50%) translateZ(0) !important;
    opacity: 1 !important; 
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease !important;
}

.gallery-arrow:hover {
    opacity: 1.0 !important; 
    transform: translateY(-50%) scale(1.1) translateZ(0) !important; 
}

.arrow-left  { left: 20px !important; }
.arrow-right { right: 20px !important; }

.gallery-arrow:focus,
.gallery-arrow:focus-visible,
.gallery-arrow:active {
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .gallery-arrow {
        /* Lowers the minimum floor from 100px to 44px (ideal for mobile touch targets) */
        width: clamp(44px, 10cqw, 64px) !important;
        height: clamp(44px, 10cqw, 64px) !important;
        font-size: clamp(2rem, 5cqw, 3rem) !important;
    }
    
    /* Slightly shifts them closer to the edges on narrow screens */
    .arrow-left  { left: 10px !important; }
    .arrow-right { right: 10px !important; }
}

/* ==========================================================================
   17. SEAMLESS VERTICAL MONOLITHIC SITE FOOTER (DARK THEME)
   ========================================================================== */
.custom-site-footer,
.elementor-element.custom-site-footer,
.custom-site-footer > .e-con-inner {
    background-color: #FFD84A !important;                       /* Converted to yellow */
    background: #111111 !important;
    width: 100% !important;
    padding: 1cqw 0 0cqw 0 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    container-type: inline-size !important;
}

.footer-inner-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.8cqw !important;
    width: 100% !important;
}

.footer-heading {
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 900 !important;
    font-size: 3.2cqw !important; 
    letter-spacing: 0em !important;
    color: #FFD84A !important;                                  /* Converted to yellow */
    margin: 0 !important;
    line-height: 1 !important;
}

.footer-email-protected {
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.45cqw !important;
    color: #FFD84A !important;                                  /* Converted to yellow */
    letter-spacing: 0.06em !important;
    user-select: none !important; 
    margin-bottom: 0.5cqw !important;
}

.copy-email-btn {
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.9cqw !important;
    letter-spacing: 0.08em !important;
    color: #000000 !important;
    background: #FFD84A !important;                             /* Converted to yellow */
    border: none !important;
    padding: 0.8cqw 2cqw !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0, 1) !important;
}

.copy-email-btn:hover {
    transform: translateY(-2px) !important;
    background: #ffffff !important;
}

.copy-email-btn.copied-active {
    background: #ffffff !important;
    color: #000000 !important;
}

/* ==========================================================================
   18. RESPONSIVE MEDIA QUERIES & TABLET/MOBILE STACKS
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .main-wrapper {
        width: calc(100% - (var(--grid-gap) * 2)) !important; 
        margin: var(--grid-gap) !important;
        min-height: calc(100vh - (var(--grid-gap) * 2)) !important;
        box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.5) !important;
    }

    body {
        overflow-x: hidden !important;
        position: relative;
    }
}

/* TARGETED MOBILE VIEWPORT FIXES (767px and below) */
@media screen and (max-width: 767px) {
    
    /* 1. Play Button Scale Calibration */
    .btn-burn-trigger {
        width: clamp(65px, 18vw, 110px) !important;
    }

    /* 2. ABOUT Button Perfect Scale Calibration */
    .logo-about-text {
        font-size: 14px !important; 
        padding: 6px 16px !important; 
        bottom: 10px !important; 
        
        /* Calibrated to 0.5 size */
        transform: translateX(-50%) scale(0.5) !important; 
        transform-origin: bottom center !important; 
    }
    .logo-about-white {
        /* Syncs duplicate alignment with the 0.5 scaling transformation */
        bottom: 12px !important; 
    }

    /* 3. WHAT WE DO? Button Perfect Scale Calibration */
    .services-about-text {
        font-size: 14px !important; 
        padding: 6px 16px !important; 
        bottom: 10px !important; 
        
        /* Calibrated to 0.5 size */
        transform: translateX(-50%) scale(0.5) !important; 
        transform-origin: bottom center !important;
    }

    /* 4 & 5. Banner/Marquee Cropping Fixes */
    .main-wrapper .elementor-widget-heading,
    .main-wrapper .elementor-text-editor,
    .main-wrapper h2,
    .main-wrapper h3,
    .main-wrapper p {
        line-height: normal !important; 
    }
}

/* ==========================================================================
   19. MIRRORED RIGHT-BOX EXPANDABLE DRAWER ENGINE (FULL-WIDTH IMAGE BACKGROUND)
   ========================================================================== */
/* Triggers the clipping path reveal to the left side */
.right-box.is-open .services-expanded-drawer {
    clip-path: inset(0 0 0 -40px) !important;
}

/* Anchors the main drawer frame to the right edge of the row */
.right-box .services-expanded-drawer {
    left: auto !important;
    right: 0 !important;
    clip-path: inset(0 0 0 100%) !important;
}

/* Shifts the hollow mask preview area to the right and forces it to sit ON TOP of the image */
.right-box .services-drawer-masked-pane {
    left: auto !important;
    right: 0 !important;
    z-index: 2 !important; 
}

/* Blows the image container up to 100% full width and sends it to the background layer */
.right-box .services-drawer-content-clip {
    left: 0 !important;
    right: 0 !important;
    z-index: 1 !important; 
}

/* Forces the custom studio background image to fill the entire drawer beautifully */
.studio-drawer-bg-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}/* End custom CSS */