/* ==========================================================================
   BNANA Portfolio — Core Styling System
   Premium, Minimal, Cinematic, Swiss Grid Design
   ========================================================================== */

/* Design Tokens & Theme Configuration */
:root {
    --bg-primary: #000000;
    --bg-secondary: #050505;
    --bg-tertiary: #0a0a0a;
    
    --fg-primary: #ffffff;
    --fg-secondary: #a8a8a8;
    --fg-tertiary: #666666;
    
    --accent: #ffffff;
    --accent-muted: rgba(255, 255, 255, 0.4);
    
    --border-light: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    
    --font-heading: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    
    --header-height: 80px;
}

/* Reset & Global Rules */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    background-color: var(--bg-primary);
    color: var(--fg-primary);
    font-family: var(--font-body);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--fg-tertiary);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--fg-secondary);
}

body {
    overflow-x: clip;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
}

p {
    color: var(--fg-secondary);
    font-weight: 300;
    line-height: 1.75;
    text-wrap: pretty;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

/* Base Component: Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 50px; /* Rounded pill buttons */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    gap: 12px;
    z-index: 1;
    background-color: transparent;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    will-change: transform;
}

.btn:hover {
    transform: scale(1.025);
}

.btn:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

.btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #ffffff;
    border-radius: inherit; /* Inherit rounded corners */
    transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.btn:hover::before {
    height: 100%;
}

.btn-primary {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-primary:hover {
    color: #000000;
    border-color: #ffffff;
}

.btn-secondary {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.08); /* Semi-transparent frosted background */
    backdrop-filter: blur(10px); /* Frosted blur glass effect */
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.btn-secondary:hover {
    color: #000000;
    border-color: #ffffff;
}

/* ==========================================================================
   WORK WITH US Button — Moving Luminous Perimeter Beam
   ========================================================================== */
@keyframes rotateMovingBeam {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(360deg);
    }
}

#hero-start-project-btn,
#original-film-work-btn,
#samay-connect-button {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(10, 10, 10, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.12), 0 0 40px rgba(255, 255, 255, 0.05), 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    border-radius: 50px;
    z-index: 1;
    min-height: 54px;
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#hero-start-project-btn > *,
#original-film-work-btn > *,
#samay-connect-button > * {
    position: relative;
    z-index: 3;
    pointer-events: none;
}

/* The Continuous Rotating Outer Luminous Beam */
#hero-start-project-btn::after,
#original-film-work-btn::after,
#samay-connect-button::after {
    content: '';
    position: absolute;
    top: -200%;
    left: -100%;
    width: 300%;
    height: 500%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent 190deg,
        rgba(255, 255, 255, 0.03) 220deg,
        rgba(255, 255, 255, 0.12) 255deg,
        rgba(255, 255, 255, 0.35) 285deg,
        rgba(255, 255, 255, 0.7) 320deg,
        rgba(255, 255, 255, 0.95) 345deg,
        #ffffff 358deg,
        rgba(255, 255, 255, 0.4) 360deg
    );
    animation: rotateMovingBeam 4s linear infinite;
    transform-origin: center center;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.2));
    transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), animation-duration 0.4s ease;
}

/* The Inner Core Mask (Leaves glowing perimeter channel) */
#hero-start-project-btn::before,
#original-film-work-btn::before,
#samay-connect-button::before {
    content: '';
    position: absolute;
    inset: 1.5px;
    border-radius: 48px;
    background: rgba(12, 12, 12, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
    height: auto;
    width: auto;
    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#hero-start-project-btn:hover::before,
#original-film-work-btn:hover::before,
#samay-connect-button:hover::before {
    background: #ffffff;
    background-color: #ffffff;
}

#hero-start-project-btn:hover,
#original-film-work-btn:hover,
#samay-connect-button:hover {
    color: #000000;
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.35), 0 0 60px rgba(255, 255, 255, 0.15), 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

#hero-start-project-btn:hover::after,
#original-film-work-btn:hover::after,
#samay-connect-button:hover::after {
    animation-duration: 2.4s;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 35px rgba(255, 255, 255, 0.3));
}

.hero-btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#hero-start-project-btn:hover .hero-btn-arrow {
    transform: translate3d(4px, 0, 0);
}

/* Day Mode / Light Theme Adaptations */
body.day-mode #hero-start-project-btn,
body.light-theme #hero-start-project-btn,
body.day-mode #original-film-work-btn,
body.light-theme #original-film-work-btn,
body.day-mode #samay-connect-button,
body.light-theme #samay-connect-button {
    border-color: rgba(0, 0, 0, 0.2);
    background: rgba(240, 240, 240, 0.7);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08), 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}

body.day-mode #hero-start-project-btn::after,
body.light-theme #hero-start-project-btn::after,
body.day-mode #original-film-work-btn::after,
body.light-theme #original-film-work-btn::after,
body.day-mode #samay-connect-button::after,
body.light-theme #samay-connect-button::after {
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent 190deg,
        rgba(0, 0, 0, 0.04) 220deg,
        rgba(0, 0, 0, 0.12) 255deg,
        rgba(0, 0, 0, 0.35) 285deg,
        rgba(0, 0, 0, 0.7) 320deg,
        rgba(0, 0, 0, 0.95) 345deg,
        #000000 358deg,
        rgba(0, 0, 0, 0.4) 360deg
    );
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
}

body.day-mode #hero-start-project-btn::before,
body.light-theme #hero-start-project-btn::before,
body.day-mode #original-film-work-btn::before,
body.light-theme #original-film-work-btn::before {
    background: rgba(245, 245, 245, 0.94);
}

body.day-mode #hero-start-project-btn:hover::before,
body.light-theme #hero-start-project-btn:hover::before,
body.day-mode #original-film-work-btn:hover::before,
body.light-theme #original-film-work-btn:hover::before {
    background: #000000;
    background-color: #000000;
}

body.day-mode #hero-start-project-btn:hover,
body.light-theme #hero-start-project-btn:hover,
body.day-mode #original-film-work-btn:hover,
body.light-theme #original-film-work-btn:hover {
    color: #ffffff;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.25), 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* Reduced Motion Configuration */
@media (prefers-reduced-motion: reduce) {
    #hero-start-project-btn::after,
    #original-film-work-btn::after {
        animation: none !important;
        transform: none !important;
        background: rgba(255, 255, 255, 0.3) !important;
    }
}

/* Header & Navigation */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(62px, 6.5vh, 86px);
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    padding-top: env(safe-area-inset-top, 0px);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 300ms cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-backdrop-filter 300ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                height 300ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: background-color, backdrop-filter, transform;
}

.header.scrolled {
    height: clamp(58px, 6vh, 76px);
    background-color: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.header-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.logo-image {
    height: clamp(28px, 3.2vw, 40px);
    display: block;
    width: auto;
    max-width: clamp(96px, 14vw, 150px);
    object-fit: contain;
    flex-shrink: 0;
}

.header, .nav {
    cursor: default;
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.2vw, 40px);
}

.nav-link {
    font-size: clamp(0.75rem, 0.9vw, 0.88rem);
    font-weight: 400;
    letter-spacing: clamp(0.06em, 0.1vw, 0.12em);
    text-transform: uppercase;
    color: var(--fg-secondary);
    white-space: nowrap;
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

/* Subtle focus interaction across menu headings */
.nav:hover .nav-link {
    opacity: 0.92;
    filter: blur(0.4px);
}

.nav .nav-link:hover,
.nav .nav-link:focus-visible {
    color: var(--accent);
    opacity: 1;
    filter: blur(0px);
}

.cta-nav {
    font-size: clamp(0.72rem, 0.85vw, 0.82rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: clamp(6px, 1vh, 10px) clamp(12px, 1.4vw, 20px);
    white-space: nowrap;
    border: 1px solid var(--border-strong);
}

.cta-nav:hover {
    border-color: var(--accent);
    background-color: var(--accent);
    color: var(--bg-primary);
}

/* Mobile Toggle Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 210;
    padding: 0;
    position: relative;
    touch-action: manipulation;
}

.menu-line {
    display: block;
    width: 24px;
    height: 1.5px;
    background-color: var(--fg-primary);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, opacity 0.3s ease;
    transform-origin: center center;
    border-radius: 1px;
}

.mobile-menu-btn.active .menu-line:nth-child(1) {
    transform: translateY(3.75px) rotate(45deg);
}

.mobile-menu-btn.active .menu-line:nth-child(2) {
    transform: translateY(-3.75px) rotate(-45deg);
}

/* Full-Screen Cinematic Film-Clapper Mobile Overlay Nav */
.mobile-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    background: radial-gradient(circle at 50% 15%, rgba(22, 26, 34, 0.96) 0%, rgba(5, 5, 5, 0.99) 75%);
    backdrop-filter: blur(36px) saturate(190%);
    -webkit-backdrop-filter: blur(36px) saturate(190%);
    z-index: 190;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(75px, 10vh, 95px) clamp(20px, 6vw, 40px) clamp(24px, 4vh, 36px);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu.active {
    opacity: 1;
    pointer-events: auto;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* 1. Film-Clapper Animated Slate Header */
.clapper-slate-header {
    width: 100%;
    max-width: 500px;
    margin: 0 auto clamp(16px, 3vh, 28px);
    position: relative;
    border-radius: 8px;
    background: rgba(15, 15, 15, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}

.clapper-top-arm {
    width: 100%;
    height: 22px;
    position: relative;
    transform-origin: 0% 100%;
    transform: rotate(-10deg) translateY(-4px);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: #111111;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.9);
}

.mobile-menu.active .clapper-top-arm {
    transform: rotate(0deg) translateY(0);
    transition-delay: 0.15s;
}

.clapper-stripes {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, #ffffff 0px, #ffffff 18px, #121212 18px, #121212 36px);
    opacity: 0.92;
}

.clapper-hinge {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #666666;
    box-shadow: inset 0 0 2px #000000, 0 0 2px rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.clapper-slate-board {
    padding: 10px 14px;
    background: rgba(10, 10, 10, 0.85);
}

.clapper-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(4px, 1.8vw, 8px);
    flex-wrap: nowrap;
}

.clapper-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.clapper-tag {
    font-family: var(--font-heading);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    text-transform: uppercase;
}

.clapper-val {
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-color, #ffffff);
    text-transform: uppercase;
}

.clapper-val.timecode-val {
    font-family: 'Geist Mono', 'SF Mono', monospace;
    font-size: 0.76rem;
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
    letter-spacing: 0.05em;
}

.clapper-flare-streak {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(100, 220, 255, 0.8) 50%, transparent 100%);
    opacity: 0;
    transform: scaleX(0);
    transition: transform 0.6s ease 0.25s, opacity 0.5s ease 0.25s;
    pointer-events: none;
}

.mobile-menu.active .clapper-flare-streak {
    opacity: 1;
    transform: scaleX(1);
}

/* 2. Flowing Water Smooth Endless Motion Navigation List */
.mobile-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(12px, 2.4vh, 20px);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    flex: 1;
}

@keyframes waterFlowFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-5px) rotate(0.35deg);
    }
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: clamp(14px, 2.2vh, 20px) clamp(16px, 4vw, 28px);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(32px) scale(0.96);
    filter: blur(6px);
    transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.5s ease,
                filter 0.5s ease;
    will-change: transform, opacity, filter, box-shadow;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu.active .mobile-nav-link {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
    animation: waterFlowFloat 6s ease-in-out infinite;
}

.mobile-menu.active .mobile-nav-link:nth-child(1) { transition-delay: 0.16s; animation-delay: 0s; }
.mobile-menu.active .mobile-nav-link:nth-child(2) { transition-delay: 0.22s; animation-delay: 0.8s; }
.mobile-menu.active .mobile-nav-link:nth-child(3) { transition-delay: 0.28s; animation-delay: 1.6s; }
.mobile-menu.active .mobile-nav-link:nth-child(4) { transition-delay: 0.34s; animation-delay: 2.4s; }
.mobile-menu.active .mobile-nav-link:nth-child(5) { transition-delay: 0.40s; animation-delay: 3.2s; }

.mobile-nav-text {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 7.5vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--text-color, #ffffff);
    line-height: 1;
    text-align: center;
    transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
                letter-spacing 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.3s ease,
                text-shadow 0.35s ease;
}

/* Fluid Shimmer Wave on Hover / Drag */
.mobile-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.7s ease;
    pointer-events: none;
}

/* POP Animation while Hovering / Dragging Cursor Over Link */
.mobile-nav-link:hover,
.mobile-nav-link:active,
.mobile-nav-link.is-popped {
    animation-play-state: paused !important;
    transform: scale(1.08) translateY(-4px) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6),
                0 0 28px rgba(255, 255, 255, 0.15),
                inset 0 0 16px rgba(255, 255, 255, 0.08) !important;
}

.mobile-nav-link:hover::before,
.mobile-nav-link:active::before,
.mobile-nav-link.is-popped::before {
    transform: translateX(100%);
}

.mobile-nav-link:hover .mobile-nav-text,
.mobile-nav-link:active .mobile-nav-text,
.mobile-nav-link.is-popped .mobile-nav-text {
    letter-spacing: 0.035em;
    color: #ffffff;
    transform: scale(1.04);
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
}

.mobile-nav-link.mobile-cta {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin-top: 4px;
}

.mobile-nav-link.mobile-cta:hover,
.mobile-nav-link.mobile-cta:active,
.mobile-nav-link.mobile-cta.is-popped {
    background: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 18px 45px rgba(255, 255, 255, 0.25), 0 0 30px rgba(255, 255, 255, 0.3) !important;
}

.mobile-nav-link.mobile-cta:hover .mobile-nav-text,
.mobile-nav-link.mobile-cta:active .mobile-nav-text,
.mobile-nav-link.mobile-cta.is-popped .mobile-nav-text {
    color: #000000 !important;
    text-shadow: none;
}

/* 3. Mobile Overlay Footer */
.mobile-menu-footer {
    width: 100%;
    max-width: 500px;
    margin: clamp(16px, 3vh, 24px) auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateY(16px);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, opacity 0.5s ease 0.3s;
}

.mobile-menu.active .mobile-menu-footer {
    opacity: 1;
    transform: translateY(0);
}

.mobile-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88;
    animation: statusPulse 2s infinite ease-in-out;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.6; }
}

.status-text {
    font-family: var(--font-heading);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

.mobile-social-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-heading);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    text-decoration: none;
    transition: all 0.3s ease;
}

.mobile-social-btn:hover,
.mobile-social-btn:active {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

/* Day Mode / Light Theme Adaptations for Mobile Menu */
body.day-mode .mobile-menu,
body.light-theme .mobile-menu {
    background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.98) 0%, rgba(244, 244, 246, 0.99) 75%);
}

body.day-mode .clapper-slate-header,
body.light-theme .clapper-slate-header {
    background: rgba(235, 235, 238, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

body.day-mode .clapper-stripes,
body.light-theme .clapper-stripes {
    background: repeating-linear-gradient(135deg, #000000 0px, #000000 18px, #e2e2e5 18px, #e2e2e5 36px);
}

body.day-mode .clapper-slate-board,
body.light-theme .clapper-slate-board {
    background: rgba(245, 245, 247, 0.9);
}

body.day-mode .clapper-tag,
body.light-theme .clapper-tag {
    color: rgba(0, 0, 0, 0.45);
}

body.day-mode .clapper-val,
body.light-theme .clapper-val {
    color: #0a0a0a;
}

body.day-mode .clapper-val.timecode-val,
body.light-theme .clapper-val.timecode-val {
    color: #008844;
    text-shadow: none;
}

body.day-mode .mobile-nav-link,
body.light-theme .mobile-nav-link {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.07);
}

body.day-mode .mobile-nav-text,
body.light-theme .mobile-nav-text {
    color: #0a0a0a;
}

body.day-mode .mobile-nav-link:hover,
body.day-mode .mobile-nav-link:active,
body.day-mode .mobile-nav-link.is-popped,
body.light-theme .mobile-nav-link:hover,
body.light-theme .mobile-nav-link:active,
body.light-theme .mobile-nav-link.is-popped {
    background: rgba(0, 0, 0, 0.07) !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1),
                0 0 24px rgba(0, 0, 0, 0.05),
                inset 0 0 16px rgba(0, 0, 0, 0.03) !important;
}

body.day-mode .mobile-nav-link:hover .mobile-nav-text,
body.day-mode .mobile-nav-link:active .mobile-nav-text,
body.day-mode .mobile-nav-link.is-popped .mobile-nav-text,
body.light-theme .mobile-nav-link:hover .mobile-nav-text,
body.light-theme .mobile-nav-link:active .mobile-nav-text,
body.light-theme .mobile-nav-link.is-popped .mobile-nav-text {
    color: #000000;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

body.day-mode .mobile-nav-link.mobile-cta,
body.light-theme .mobile-nav-link.mobile-cta {
    background: #0a0a0a;
    border-color: #0a0a0a;
}

body.day-mode .mobile-nav-link.mobile-cta .mobile-nav-text,
body.light-theme .mobile-nav-link.mobile-cta .mobile-nav-text {
    color: #ffffff;
}

body.day-mode .mobile-nav-link.mobile-cta:hover,
body.day-mode .mobile-nav-link.mobile-cta:active,
body.day-mode .mobile-nav-link.mobile-cta.is-popped,
body.light-theme .mobile-nav-link.mobile-cta:hover,
body.light-theme .mobile-nav-link.mobile-cta:active,
body.light-theme .mobile-nav-link.mobile-cta.is-popped {
    background: #000000 !important;
    border-color: #000000 !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25), 0 0 30px rgba(0, 0, 0, 0.15) !important;
}

body.day-mode .mobile-menu-footer,
body.light-theme .mobile-menu-footer {
    border-top-color: rgba(0, 0, 0, 0.08);
}

body.day-mode .status-text,
body.light-theme .status-text {
    color: rgba(0, 0, 0, 0.55);
}

body.day-mode .mobile-social-btn,
body.light-theme .mobile-social-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.65);
}

body.day-mode .mobile-social-btn:hover,
body.day-mode .mobile-social-btn:active,
body.light-theme .mobile-social-btn:hover,
body.light-theme .mobile-social-btn:active {
    color: #000000;
    border-color: rgba(0, 0, 0, 0.35);
    background: rgba(0, 0, 0, 0.08);
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: clamp(90px, 12vh, 140px) clamp(16px, 6vw, 8%) clamp(40px, 6vh, 80px);
    overflow: hidden;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* Subtle Film Grain Overlay (3-5% Opacity, Perfectly Color/Brightness Preserving) */
.hero-video-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.04; /* 4% opacity */
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4) contrast(1.1);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 30%, rgba(5, 5, 5, 0.7) 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 1050px;
    width: 100%;
}

.hero-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--fg-secondary);
    margin-bottom: 24px;
}

/* Hero entrance load animations */
.hero-label.fade-in-up {
    opacity: 0;
    animation: heroElementLoad 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
}

.hero-title {
    font-size: clamp(2.2rem, 7.8vw, 8rem);
    line-height: 1.05;
    margin-bottom: 24px;
    text-transform: uppercase;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Hero Headline Word Sliding/Fading Entry Animation */
.hero-word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.hero-word-inner {
    display: inline-block;
    transform: translateY(115%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    will-change: transform, opacity;
}

.hero-title.revealed .hero-word-inner {
    transform: translateY(0);
    opacity: 1;
}

.hero-subheading {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 2.2vw, 1.65rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    opacity: 0;
    animation: heroElementLoad 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards;
}

.hero-subtitle.fade-in-up {
    opacity: 0;
    animation: heroElementLoad 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.hero-ctas.fade-in-up {
    opacity: 0;
    animation: heroElementLoad 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.38s forwards;
}

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

.hero-subtitle {
    font-size: clamp(0.85rem, 1.1vw, 0.98rem);
    margin-top: 0;
    margin-bottom: 36px;
    max-width: 1050px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.hero-sub-break {
    display: block;
}

@media (max-width: 820px) {
    .hero-sub-break {
        display: inline;
    }
}

.hero-ctas {
    display: flex;
    gap: 20px;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 5vh;
    left: 8%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scroll-text {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}

.scroll-line {
    width: 1px;
    height: 60px;
    background-color: var(--border-strong);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background-color: var(--accent);
    animation: scrollAnimation 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scrollAnimation {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(350%); }
}

/* Sections Global Structure */
.section-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 120px 4%;
}

.section-header {
    margin-bottom: 80px;
}

.section-label {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--fg-tertiary);
    display: block;
    margin-bottom: 16px;
}

.section-label.center {
    text-align: center;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    text-transform: uppercase;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* Section 1: Portfolio (Selected Work) */
.work-section {
    background-color: var(--bg-primary);
    border-top: none;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 60px 40px;
}

.project-card {
    grid-column: span 12;
    cursor: pointer;
}

.project-card:nth-child(even) {
    grid-column: 2 / span 10;
}

.project-media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: var(--bg-secondary);
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05) brightness(0.8);
    transition: var(--transition-smooth);
}

.project-hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.2);
    transition: var(--transition-fast);
}

.project-meta {
    margin-top: 24px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
}

.project-name {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    text-transform: uppercase;
    color: var(--fg-primary);
    transition: var(--transition-fast);
}

.project-tags {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--fg-secondary);
}

/* Card Interaction Details */
.project-card:hover .project-image {
    transform: scale(1.02);
    filter: grayscale(0%) contrast(1) brightness(0.9);
}

.project-card:hover .project-hover-video {
    opacity: 1;
}

.project-card:hover .project-name {
    color: var(--accent);
}

/* Section 1: BNANA Originals Grid Redesign */
.originals-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    width: 100%;
}

.originals-section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--fg-primary);
    margin: 0;
    text-transform: uppercase;
    line-height: 0.95;
}

.originals-view-all {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    position: relative;
    padding-bottom: 6px;
    transition: color 0.3s ease;
}

.originals-view-all:hover {
    color: #fff;
}

.originals-view-all .underline-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0.4);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.originals-view-all:hover .underline-line {
    transform: scaleX(1);
    transform-origin: left;
}

/* BNANA Originals 3-Column Column Layout (matching reference design) */
.originals-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    width: 100%;
    margin-top: 20px;
}

.originals-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.originals-lower {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    width: 100%;
    margin-top: 32px;
}

.originals-anchor {
    width: 100%;
    margin-top: 32px;
}

/* Card Styles */
.original-card {
    display: block;
    position: relative;
    width: 100%;
    border-radius: 24px !important; /* 22-26px as requested */
    overflow: hidden !important;
    background-color: #000;
    text-decoration: none;
    cursor: pointer;
    will-change: transform;
    isolation: isolate; /* Force WebKit clipping bounds */
    transform: translate3d(0, 0, 0);
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Absolute fix for Safari clipping bugs */
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
}

.original-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
}

/* Square vs Landscape vs Lower vs Featured Card Heights */
.original-card.original-square,
.original-card.original-portrait {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
}

.original-card.original-landscape {
    height: clamp(260px, 20vw, 300px);
}

.originals-lower .original-card {
    height: clamp(300px, 25vw, 380px);
}

.original-card.original-featured {
    height: clamp(320px, 26vw, 420px);
}

/* Media wrapper */
.original-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    border-radius: inherit !important; /* Align with parent rounded corners */
}

.original-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: inherit !important;
}

/* Pen Fight Club Cinemascope compensation - scale up to remove black letterbox bars and ensure visible rounded corners */
.original-card[data-project="pen-fight-club"] .original-video {
    transform: scale(1.18);
    transform-origin: center center;
}

/* Vignette bottom gradient overlay matching reference */
.original-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.05) 100%);
    opacity: 1;
    transition: background 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: inherit !important;
}

/* Title Metadata positioned bottom-left */
.original-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 28px 30px;
    z-index: 5;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.original-title {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.4vw, 1.55rem);
    color: #fff;
    opacity: 0.85;
    transform: translateY(4px);
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    margin: 0;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.original-title-bold {
    font-weight: 800; /* Bold title */
    letter-spacing: -0.01em;
}

.original-title-sub {
    font-family: var(--font-body);
    font-weight: 400; /* Normal weight tagline hook */
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0.78rem, 0.9vw, 0.88rem);
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-transform: none;
}

/* Hover Interaction */
.original-card:hover .original-video {
    filter: blur(4px);
}

.original-card:hover .original-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.25) 100%);
}

.original-card:hover .original-title {
    opacity: 1;
    transform: translateY(0);
}

/* Tablet (2 Columns) */
@media (max-width: 1024px) {
    .originals-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .originals-col {
        gap: 24px;
    }
    .originals-lower {
        gap: 24px;
        margin-top: 24px;
    }
    .originals-anchor {
        margin-top: 24px;
    }
    .original-card.original-square,
    .original-card.original-portrait {
        aspect-ratio: 1 / 1;
        height: auto;
    }
    .original-card.original-landscape {
        height: 240px;
    }
    .originals-lower .original-card {
        height: 280px;
    }
    .original-card.original-featured {
        height: 320px;
    }
    .originals-section-title {
        font-size: 3rem;
    }
}

/* Mobile (1 Column) */
@media (max-width: 768px) {
    .originals-masonry {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .originals-col {
        gap: 20px;
    }
    .originals-lower {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 20px;
    }
    .originals-anchor {
        margin-top: 20px;
    }
    .original-card.original-square,
    .original-card.original-portrait {
        aspect-ratio: 1 / 1;
        height: auto;
    }
    .original-card.original-landscape,
    .originals-lower .original-card,
    .original-card.original-featured {
        height: clamp(240px, 58vw, 320px);
    }
    .originals-section-title {
        font-size: 2.2rem;
    }
    .originals-header {
        margin-bottom: 28px;
    }
    .original-meta {
        padding: 22px;
    }
    .original-title {
        opacity: 0.95;
        transform: translateY(0);
        font-size: 1.25rem;
    }
}

/* Bnana Originals Custom Hero Layout Styles */
.originals-hero {
    width: 100%;
    aspect-ratio: 21 / 9; /* Widescreen movie ratio proportion */
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 0;
    overflow: hidden;
    background-color: #000;
}

.originals-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 50px 70px; /* Proportionate padding inside frame */
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    z-index: 5;
    box-sizing: border-box;
}

.originals-hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 90%;
}

.originals-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6.2vw, 5.8rem); /* Scaled title */
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #fff;
    text-transform: none; /* Keep requested casing */
    line-height: 0.9;
    margin: 0 0 16px 0;
}

.originals-hero-desc {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.8vw, 1.45rem);
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
    opacity: 0.9;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Tablet responsiveness */
@media (max-width: 1024px) {
    .originals-hero {
        aspect-ratio: 16 / 8; /* Proportion adjustment for tablets */
    }
    .originals-hero-content {
        padding: 40px 40px;
    }
    .originals-hero-title {
        font-size: 3.8rem;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .originals-hero {
        aspect-ratio: 16 / 9; /* Mobile movie aspect ratio */
    }
    .originals-hero-content {
        padding: 24px 20px;
    }
    .originals-hero-title {
        font-size: 2.5rem;
        margin-bottom: 8px;
    }
    .originals-hero-desc {
        font-size: 1.05rem;
    }
}

/* Section 2: Expertise (What We Create) */
.services-section {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-light);
}

.services-section .section-container {
    position: relative;
    z-index: 2;
}

/* Full-Screen Cinematic Background Layer */
.section-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.section-bg-img {
    position: absolute;
    top: -10%;
    left: -5%;
    width: 110%;
    height: 120%;
    object-fit: cover;
    filter: saturate(0.65) contrast(1.15);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.services-section.bg-active .section-bg-img {
    opacity: 0.55;
    animation: sectionBgFloat 16s ease-in-out infinite alternate;
}

@keyframes sectionBgFloat {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    50% { transform: scale(1.03) translate3d(0, -6px, 0); }
    100% { transform: scale(1) translate3d(0, 0, 0); }
}

.section-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.55);
    z-index: 2;
}

.section-bg-vignette {
    display: none;
}

/* Widescreen category slider layout */
.services-slider-wrapper {
    position: relative;
    width: 100%;
    margin-top: 60px;
    padding-bottom: 40px;
}

.services-slider-container {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    padding: 20px 0;
    width: 100%;
}

.services-slider-container::-webkit-scrollbar {
    display: none; /* Safari/Chrome */
}

.services-slider-container .service-card {
    flex: 0 0 clamp(320px, 30vw, 420px);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    background-color: #050505;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-slider-container .service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
    pointer-events: none;
}

.services-slider-container .service-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) brightness(0.2) contrast(1.1);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.services-slider-container .service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.2);
}

.services-slider-container .service-card:hover .service-card-bg {
    transform: scale(1.08);
    filter: grayscale(0%) brightness(0.55) contrast(1.05);
}

.services-slider-container .service-card-content {
    position: relative;
    z-index: 2;
}

.services-slider-container .service-number {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    color: var(--fg-secondary);
    margin-bottom: 20px;
    display: block;
}

.services-slider-container .service-name {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 12px;
}

.services-slider-container .service-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #a8a8a8;
}

/* Progress bar at the bottom */
.services-slider-progress-bar {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.05);
    margin-top: 40px;
    position: relative;
}

.services-slider-progress-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #ffffff;
    transition: width 0.1s ease-out;
}

.service-card:hover .service-number {
    color: var(--accent);
}

/* Section 3: About Us (Philosophy) */
.about-section {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-light);
}

.about-section .section-container {
    position: relative;
    z-index: 2;
    padding: 160px 8%;
}

.about-header {
    margin-bottom: 80px;
    max-width: 900px;
}

.about-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 3.8rem);
    text-transform: uppercase;
    color: var(--fg-primary);
    margin-top: 32px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.about-left {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.about-stat-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 24px;
}

.about-stat-number {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.about-stat-label {
    font-size: 0.95rem;
    color: var(--fg-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.about-right {
    position: relative;
}

.about-visuals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.about-photo-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-photo-card:nth-child(2) {
    margin-top: 60px;
}

.about-photo {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.75) contrast(1.1);
    transition: filter 0.6s ease, transform 0.6s ease;
    border: 1px solid var(--border-light);
}

.about-photo:hover {
    filter: grayscale(0%) brightness(0.9) contrast(1.05);
    transform: scale(1.02);
}

.about-photo-caption {
    font-size: 0.8rem;
    color: var(--fg-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Subtle background animation */
.about-section.bg-active .section-bg-img {
    opacity: 0.45;
    animation: sectionBgFloat 16s ease-in-out infinite alternate;
}

/* Section 4: Process Timeline */
.process-section {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
}

.process-layout {
    display: flex;
    gap: 80px;
    align-items: flex-start;
    margin-top: 60px;
}

.process-nav-list {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.process-nav-item {
    display: flex;
    align-items: baseline;
    gap: 24px;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-nav-item:hover {
    opacity: 0.7;
}

.process-nav-item.active {
    opacity: 1;
}

.process-step-num {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
}

.process-step-title-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.process-step-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--fg-primary);
    transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-nav-item.active .process-step-title {
    color: var(--fg-primary);
}

.process-underline {
    width: 0;
    height: 1px;
    background-color: var(--accent);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-nav-item.active .process-underline {
    width: 100%;
}

.process-content-panel {
    flex: 1;
    position: relative;
    min-height: 580px;
}

.process-content-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.process-content-card.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 5;
}

.process-media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-light);
}

.process-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%) brightness(0.6) contrast(1.1);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.process-content-card:hover .process-media {
    transform: scale(1.04);
}

.process-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(5,5,5,0) 50%, rgba(5,5,5,0.7) 100%);
    z-index: 2;
}

.process-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.process-phase-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-tertiary);
}

.process-explanation {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--fg-primary);
    font-weight: 400;
}

.process-supporting {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--fg-secondary);
    font-weight: 300;
}

/* Responsiveness media overrides for Process section */
@media (max-width: 990px) {
    .process-layout {
        flex-direction: column;
        gap: 48px;
    }
    
    .process-nav-list {
        flex: none;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px 24px;
    }
    
    .process-nav-item {
        flex: 1 1 calc(33% - 16px);
        min-width: 130px;
    }
    
    .process-content-panel {
        min-height: auto;
        position: static;
        width: 100%;
    }
    
    .process-content-card {
        position: relative;
        top: auto;
        left: auto;
        display: none;
        height: auto;
        transform: translateY(15px);
    }
    
    .process-content-card.active {
        display: flex;
    }
}

@media (max-width: 550px) {
    .process-nav-item {
        flex: 1 1 calc(50% - 12px);
    }
}

/* Section 5: Clients & Recognition (Marquee Shuttle) */
.clients-section {
    background-color: var(--bg-primary);
    padding: 85px 0 95px 0;
    overflow: hidden;
}

.clients-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.clients-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--fg-tertiary, #666666);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 40px;
}

/* Viewport contains the scroll path and hides overflow */
.marquee-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 30px 0;
    border-top: none;
    border-bottom: none;
}

/* Track holds the flex container of logo sets */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-shuttle 22s linear infinite;
    will-change: transform;
}

/* Logo Set - contains the 4 logos */
.marquee-set {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 100vw;
    padding: 0 40px;
}

/* Individual Logo Wrapper */
.marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.8;
    user-select: none;
    -webkit-user-select: none;
}

/* Logo Image style */
.logo-img {
    width: auto;
    max-width: 180px;
    object-fit: contain;
    mix-blend-mode: screen; /* Removes any dark background cleanly */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* Individual Logo Sizing for optical balance */
.logo-microagi {
    height: 46px;
}

.logo-digitek {
    height: 58px;
}

.logo-olens {
    height: 72px; /* Square/inset layout: scaled up for optical size matching */
}

.logo-tin {
    height: 52px; /* Serif block: slightly scaled up for visibility */
}

.logo-crewhouse {
    height: 44px; /* Optical sizing for Crew House Media lockup */
}

/* Hover Pausing & Pop Visuals */
.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-item:hover {
    transform: translateY(-3px) scale(1.15);
    opacity: 1;
}

/* Infinite loop from left to right */
@keyframes marquee-shuttle {
    0% {
        transform: translate3d(-33.3333%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* Accessibility: prefers-reduced-motion option */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    .marquee-set {
        min-width: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
        padding: 20px;
    }
    .marquee-set:not(:first-child) {
        display: none; /* Hide duplicates when static */
    }
}

/* Responsive Scaling details */
@media (max-width: 1024px) {
    .marquee-item {
        padding: 0 40px;
    }
    .logo-microagi { height: 36px; }
    .logo-digitek { height: 46px; }
    .logo-olens { height: 56px; }
    .logo-tin { height: 40px; }
    .logo-crewhouse { height: 34px; }
}

@media (max-width: 768px) {
    .marquee-item {
        padding: 0 30px;
    }
    .logo-microagi { height: 28px; }
    .logo-digitek { height: 36px; }
    .logo-olens { height: 44px; }
    .logo-tin { height: 32px; }
    .logo-crewhouse { height: 26px; }
    .clients-title {
        font-size: 0.85rem;
        margin-bottom: 30px;
    }
    .marquee-viewport {
        padding: 30px 0;
    }
}

/* ==========================================================================
   Section: Key Metrics / Credibility Strip (Below BNANA Originals)
   ========================================================================== */
.trust-stats-section {
    background-color: var(--bg-primary, #080808);
    padding: clamp(65px, 8vw, 105px) 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    contain: paint layout;
}

.trust-stats-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 clamp(20px, 4vw, 40px);
}

/* Subtle ambient gold horizon glow line on continuous loop */
.trust-stats-inner::after {
    content: '';
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(260px, 50vw, 560px);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(200, 169, 110, 0.04) 15%,
        rgba(200, 169, 110, 0.5) 50%,
        rgba(200, 169, 110, 0.04) 85%,
        transparent 100%
    );
    opacity: 0.6;
    animation: trustHorizonPulse 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes trustHorizonPulse {
    0% {
        opacity: 0.25;
        transform: translateX(-50%) scaleX(0.8);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) scaleX(1.15);
    }
    100% {
        opacity: 0.35;
        transform: translateX(-50%) scaleX(0.9);
    }
}

.trust-stats-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(12px, 2.5vw, 36px);
}

/* Precision Hairline Divider */
.trust-stat-divider {
    width: 1px;
    height: clamp(48px, 6vw, 68px);
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 30%,
        rgba(200, 169, 110, 0.25) 50%,
        rgba(255, 255, 255, 0.12) 70%,
        transparent 100%
    );
    flex-shrink: 0;
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-stats-section.revealed .trust-stat-divider {
    opacity: 1;
    transform: scaleY(1);
}

.trust-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 18px 12px;
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(8px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
    cursor: default;
    border-radius: 12px;
}

/* Initial Scroll Reveal with Blur-Up Physics */
.trust-stats-section.revealed .trust-stat-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0px);
}

.trust-stats-section.revealed .trust-stat-item:nth-child(1) {
    transition-delay: 0.04s;
}
.trust-stats-section.revealed .trust-stat-divider:nth-child(2) {
    transition-delay: 0.14s;
}
.trust-stats-section.revealed .trust-stat-item:nth-child(3) {
    transition-delay: 0.18s;
}
.trust-stats-section.revealed .trust-stat-divider:nth-child(4) {
    transition-delay: 0.28s;
}
.trust-stats-section.revealed .trust-stat-item:nth-child(5) {
    transition-delay: 0.32s;
}
.trust-stats-section.revealed .trust-stat-divider:nth-child(6) {
    transition-delay: 0.42s;
}
.trust-stats-section.revealed .trust-stat-item:nth-child(7) {
    transition-delay: 0.46s;
}

/* Luminous Aura on Hover & Breathing */
.trust-stat-aura {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(200, 169, 110, 0.14) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 72%);
    filter: blur(22px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-stat-item:hover .trust-stat-aura {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.35);
}

/* Interactive Hover Feedback */
.trust-stat-item:hover {
    transform: translate3d(0, -4px, 0);
}

.trust-stat-item:hover .trust-stat-number {
    text-shadow: 0 0 28px rgba(255, 255, 255, 0.35),
                 0 0 50px rgba(200, 169, 110, 0.2);
}

.trust-stat-item:hover .trust-stat-label {
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.32em;
}

.trust-stat-num-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
}

.trust-stat-number {
    font-family: var(--font-heading, 'Geist', 'Inter', -apple-system, sans-serif);
    font-size: clamp(2.8rem, 5.2vw, 4.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.05em;
    color: #ffffff;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1, "ss01" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    transition: text-shadow 0.4s ease, transform 0.4s ease;
}

.trust-stat-number .stat-digit {
    display: inline-block;
    transition: transform 0.08s cubic-bezier(0.2, 0.8, 0.4, 1);
    will-change: transform;
}

.trust-stat-number .stat-digit.tick {
    transform: scale(1.06) translateY(-1px);
}

.trust-stat-number .stat-suffix {
    font-size: 0.58em;
    font-weight: 500;
    margin-left: 3px;
    color: var(--accent-gold, #C8A96E);
    transform: translateY(-0.16em);
    letter-spacing: normal;
    display: inline-block;
    animation: goldSuffixGlow 4s ease-in-out infinite alternate;
}

@keyframes goldSuffixGlow {
    0%, 100% {
        color: #C8A96E;
        text-shadow: 0 0 0px rgba(200, 169, 110, 0);
    }
    50% {
        color: #E6CE9C;
        text-shadow: 0 0 12px rgba(200, 169, 110, 0.5);
    }
}

.trust-stat-label {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.72rem, 0.85vw, 0.82rem);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.46);
    margin-top: 10px;
    display: block;
    transition: color 0.4s ease, letter-spacing 0.4s ease;
    white-space: nowrap;
}

/* Day Mode / Light Theme Compatibility */
body.theme-day .trust-stats-section,
body.light-theme .trust-stats-section {
    background-color: var(--bg-primary, #ffffff);
}

body.theme-day .trust-stat-divider,
body.light-theme .trust-stat-divider {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 30%,
        rgba(154, 123, 56, 0.25) 50%,
        rgba(0, 0, 0, 0.08) 70%,
        transparent 100%
    );
}

body.theme-day .trust-stat-number,
body.light-theme .trust-stat-number {
    color: #111111;
}

body.theme-day .trust-stat-label,
body.light-theme .trust-stat-label {
    color: #666666;
}

body.theme-day .trust-stat-number .stat-suffix,
body.light-theme .trust-stat-number .stat-suffix {
    color: #9A7B38;
}

/* Tablet Adjustments */
@media (max-width: 1024px) {
    .trust-stats-section {
        padding: 55px 0 65px 0;
    }
    .trust-stats-container {
        padding: 0 16px;
        gap: 12px;
    }
    .trust-stat-number {
        font-size: clamp(2.4rem, 4.4vw, 3.4rem);
    }
}

/* Mobile Adjustments */
@media (max-width: 680px) {
    .trust-stats-section {
        padding: 44px 0 54px 0;
    }
    .trust-stats-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 16px;
        padding: 0 16px;
    }
    .trust-stat-divider {
        display: block;
        height: 1px;
        width: 60%;
        margin: 0 auto;
        opacity: 0.2;
    }
    .trust-stat-number {
        font-size: clamp(2.2rem, 9.5vw, 2.9rem);
    }
    .trust-stat-label {
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        margin-top: 6px;
    }
}

/* Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
    .trust-stat-item,
    .trust-stat-divider {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
    .trust-stats-inner::after,
    .trust-stat-number .stat-suffix {
        animation: none !important;
    }
}

/* ==========================================================================
   Section 6: 06 / PERSPECTIVES — Client Praise
   ========================================================================== */
.perspectives-section {
    background-color: #050505;
    border-top: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
    padding: 140px 0 160px;
    min-height: 85vh;
    display: flex;
    align-items: center;
}

.perspectives-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4%;
    position: relative;
}

.perspectives-header {
    margin-bottom: 60px;
}

.perspectives-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    display: inline-block;
}

/* Editorial Giant Typography Composition */
.perspectives-composition {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.35em;
    row-gap: 0.05em;
    width: 100%;
    user-select: none;
}

.perspective-item {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(3.2rem, 11vw, 10.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    text-align: left;
    display: inline-flex;
    align-items: baseline;
    transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    position: relative;
}

.perspective-item .perspective-comma,
.perspective-item .perspective-period {
    color: rgba(255, 255, 255, 0.18);
    transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover & Active / Focus States */
.perspective-item:hover,
.perspective-item:focus-visible,
.perspective-item.active {
    color: #ffffff;
    text-shadow: 0 0 50px rgba(255, 255, 255, 0.28);
}

.perspective-item:hover .perspective-comma,
.perspective-item:focus-visible .perspective-comma,
.perspective-item.active .perspective-comma,
.perspective-item:hover .perspective-period,
.perspective-item:focus-visible .perspective-period,
.perspective-item.active .perspective-period {
    color: rgba(255, 255, 255, 0.6);
}

.perspective-item:focus-visible {
    border-radius: 8px;
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 6px;
}

/* Desktop Floating Cursor Panel */
.perspective-floating-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: clamp(320px, 25vw, 400px);
    background: rgba(12, 12, 12, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    padding: 16px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9), 0 0 1px rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 120;
    opacity: 0;
    transform: scale(0.96) translate3d(0, 0, 0);
    transform-origin: center center;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    display: block;
}

.perspective-floating-panel.visible {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
}

.perspective-panel-media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
}

.perspective-panel-media-wrapper img,
.perspective-panel-media-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.perspective-panel-content {
    padding: 14px 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.perspective-panel-content.fade {
    opacity: 0.3;
    transform: translateY(4px);
}

.perspective-panel-quote {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-style: italic;
}

.perspective-panel-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
}

.perspective-panel-person {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.perspective-panel-role {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Mobile & Touch Inline Panel Fallback */
.perspective-mobile-panel {
    display: none;
    width: 100%;
    margin-top: 40px;
    background: rgba(14, 14, 14, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

@media (max-width: 900px) {
    .perspectives-section {
        padding: 100px 0;
    }
    .perspectives-header {
        margin-bottom: 40px;
    }
    .perspective-item {
        font-size: clamp(2.6rem, 11vw, 5.5rem);
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .perspective-floating-panel {
        display: none !important;
    }
    .perspective-mobile-panel {
        display: block;
    }
    .perspective-item {
        font-size: clamp(2.4rem, 12vw, 4.2rem);
        line-height: 1.05;
    }
    .perspective-composition {
        column-gap: 0.25em;
        row-gap: 0.15em;
    }
    .perspectives-section {
        padding: 80px 0;
        min-height: auto;
    }
}

/* Final CTA Section */
.cta-section {
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-light);
}

.cta-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(20px, 3vh, 40px) clamp(20px, 4vw, 40px);
    box-sizing: border-box;
}

.cta-title {
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    margin: 0 0 clamp(32px, 4.5vw, 52px);
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Premium Form Design */
.contact-form {
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    text-align: left;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 36px);
}

.form-group {
    margin-bottom: clamp(28px, 3.2vw, 38px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-label {
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-secondary);
}

.form-input, .form-textarea, .form-select {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border-strong);
    color: var(--fg-primary);
    padding: 14px 0;
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 300;
    transition: var(--transition-fast);
    border-radius: 0;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 24px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0px center;
    background-size: 20px;
}

.form-select option {
    background-color: #0d0d0d;
    color: var(--fg-primary);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--accent);
    outline: none;
}

/* Autofill overrides for dark theme */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover, 
.form-input:-webkit-autofill:focus,
.form-textarea:-webkit-autofill,
.form-textarea:-webkit-autofill:hover,
.form-textarea:-webkit-autofill:focus,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--fg-primary);
    -webkit-box-shadow: 0 0 0px 1000px #0a0a0a inset;
    transition: background-color 5000s ease-in-out 0s;
}

.form-submit-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: clamp(16px, 2.5vw, 24px);
    position: relative;
}

.form-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    min-height: 56px;
    height: 56px;
    padding: 0 36px;
    border-radius: 9999px;
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease,
                color 0.35s ease,
                letter-spacing 0.35s ease;
    will-change: transform, box-shadow;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}

.form-submit-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #ffffff;
    border-radius: inherit;
    transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.form-submit-btn:hover,
.form-submit-btn:focus-visible {
    color: #000000;
    border-color: #ffffff;
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 28px rgba(255, 255, 255, 0.25), 0 14px 36px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.18em;
}

.form-submit-btn:hover::before {
    height: 100%;
}

.form-submit-btn:active {
    transform: translateY(1px) scale(0.985);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 16px rgba(255, 255, 255, 0.35);
    transition-duration: 0.1s;
}

/* Primary CTA full-width on mobile */
@media (max-width: 640px) {
    .form-submit-wrapper {
        width: 100%;
    }

    .form-submit-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 54px;
        height: 54px;
        padding: 0 24px;
        font-size: 0.92rem;
    }
}

body.day-mode .form-submit-btn,
body.light-theme .form-submit-btn {
    color: #000000;
    border-color: rgba(0, 0, 0, 0.35);
}

body.day-mode .form-submit-btn::before,
body.light-theme .form-submit-btn::before {
    background-color: #000000;
}

body.day-mode .form-submit-btn:hover,
body.light-theme .form-submit-btn:hover {
    color: #ffffff;
    border-color: #000000;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 28px rgba(0, 0, 0, 0.2), 0 14px 36px rgba(0, 0, 0, 0.15);
}

.contact-reassurance-note {
    font-family: var(--font-body);
    font-size: clamp(0.82rem, 1.05vw, 0.92rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 16px auto 0;
    line-height: 1.5;
    letter-spacing: 0.01em;
    max-width: 520px;
}

body.day-mode .contact-reassurance-note,
body.light-theme .contact-reassurance-note {
    color: rgba(0, 0, 0, 0.6);
}

.form-status {
    margin-top: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    opacity: 0;
    transition: var(--transition-fast);
}

.form-status.success {
    opacity: 1;
    color: #4cd964;
}

.form-status.error {
    opacity: 1;
    color: #ff3b30;
}

/* Footer styles defined in Section: Minimal Cinematic Editorial Footer */

/* Immersive Modal Case Study Overlays */
.case-study-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    background-color: var(--bg-primary);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
}

.case-study-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.close-overlay-btn {
    position: fixed;
    top: 30px;
    right: 4%;
    z-index: 1020;
    background: transparent;
    border: none;
    color: var(--fg-primary);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
}

.close-overlay-btn:hover {
    transform: rotate(90deg);
    color: var(--accent);
}

.overlay-scroll-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.case-study-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: flex-end;
    padding: 0 8% 80px;
    overflow: hidden;
}

.case-study-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4) contrast(1.05);
}

.case-study-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bg-primary) 0%, rgba(5, 5, 5, 0.4) 60%, transparent 100%);
    z-index: 1;
}

.case-study-title-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1000px;
}

.case-study-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--fg-secondary);
    margin-bottom: 16px;
}

.case-study-title {
    font-size: clamp(3rem, 6vw, 5rem);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.case-study-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 300;
    color: var(--fg-secondary);
}

.case-study-content {
    background-color: var(--bg-primary);
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 4% 120px;
}

.case-study-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 80px;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-title {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-tertiary);
}

.meta-value {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--fg-primary);
}

.case-study-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px 60px;
    margin-bottom: 100px;
}

.detail-section h2 {
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--fg-primary);
}

.detail-section p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--fg-secondary);
}

.case-study-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.gallery-image {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    filter: grayscale(20%) contrast(1.05);
}
/* Custom white dot cursor */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: #ffffff; /* Solid white dot */
    border: 0px solid transparent;
    border-radius: 50%;
    backdrop-filter: none; 
    -webkit-backdrop-filter: none;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    mix-blend-mode: normal;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                height 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cursor-banana {
    display: none !important; /* Hide banana icon completely */
}

.cursor-text {
    font-family: var(--font-body);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    pointer-events: none;
}

/* Cursor Hover states over videos */
.custom-cursor.hovering-view,
.custom-cursor.hovering-play {
    width: 90px;
    height: 90px;
    background-color: rgba(255, 255, 255, 0.08); /* Frosted glass */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Soft frosted border */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.custom-cursor.hovering-view .cursor-text,
.custom-cursor.hovering-play .cursor-text {
    opacity: 1;
}

/* Hide cursor on touchscreen devices */
@media (hover: none) and (pointer: coarse) {
    .custom-cursor {
        display: none !important;
    }
}

/* Global Vignette and Film Grain */
.vignette-overlay {
    display: none;
}

@keyframes grain-animation {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-0.1%, -0.1%); }
    20% { transform: translate(-0.2%, 0.1%); }
    30% { transform: translate(0.1%, -0.2%); }
    40% { transform: translate(-0.1%, 0.2%); }
    50% { transform: translate(-0.2%, 0.1%); }
    60% { transform: translate(0.2%, -0.1%); }
    70% { transform: translate(0, 0.1%); }
    80% { transform: translate(-0.2%, -0.2%); }
    90% { transform: translate(0.1%, 0.1%); }
}

.film-grain {
    display: none;
}

/* Global Scroll Reveal Animation (Subtle 350ms fade & slide) */

/* Global Scroll Reveal Animation (Subtle 350ms fade & slide) */
.scroll-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll reveals */
.fade-in-up {
    opacity: 1;
    transform: none;
}

/* Images slide reveal */
.project-media-wrapper, .about-image-wrapper {
    overflow: hidden;
}

.project-image, .about-image {
    transform: scale(1);
    transition: filter 0.3s ease;
}

/* Restrained project scaling and details reveal on hover */
.project-card {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover {
    transform: translateY(-4px) scale(1.015);
}

/* Premium sliding mask reveals */
.line-mask {
    display: block;
    overflow: hidden;
}

.line-inner {
    display: block;
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.revealed .line-inner {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Respect user prefers-reduced-motion config */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .scroll-reveal, 
    .fade-in-up, 
    .hero-title, 
    .hero-subheading, 
    .hero-subtitle, 
    .hero-ctas, 
    .hero-word-inner,
    .line-inner,
    .project-image, 
    .about-image {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .original-card:hover, 
    .portfolio-card:hover, 
    .project-card:hover, 
    .btn:hover, 
    .btn:active, 
    .work-view-btn:hover, 
    .work-view-btn:active {
        transform: none !important;
    }
}

/* Responsive Media Queries */
@media (max-width: 1200px) {
    .process-step {
        flex: 0 0 calc(50% - 15px);
    }
    
    .services-grid {
        grid-template-columns: repeat(12, 1fr);
    }
    
    .service-card {
        grid-column: span 6;
    }
    
    .service-card:nth-child(7n) {
        grid-column: span 12;
    }
    
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .header-container {
        padding: 0 6%;
    }
    
    .nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .mobile-menu-btn.active .menu-line:nth-child(1) {
        transform: translateY(4px) rotate(45deg);
    }
    
    .mobile-menu-btn.active .menu-line:nth-child(2) {
        transform: translateY(-3px) rotate(-45deg);
    }
    
    .cta-nav {
        display: none;
    }
    
    .projects-grid {
        gap: 40px;
    }
    
    .project-card:nth-child(even) {
        grid-column: span 12;
    }
    
    .grid-about {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .about-text-column, .about-image-column {
        grid-column: span 12;
    }
    
    .case-study-meta-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .case-study-details {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 0 6%;
    }
    
    .section-container {
        padding: 80px 6%;
    }
    
    .service-card {
        grid-column: span 12;
        min-height: auto;
    }
    
    .service-card:nth-child(7n) {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .service-card:nth-child(7n) .service-number {
        margin-bottom: 20px;
    }
    
    .service-card:nth-child(7n) .service-name {
        flex: none;
    }
    
    .service-card:nth-child(7n) .service-description {
        flex: none;
    }
    
    .process-step {
        flex: 0 0 100%;
    }
    
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .case-study-gallery {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   Dedicated Dynamic Portfolio Views
   ========================================================================== */

#portfolio-app-view {
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-primary);
    color: var(--fg-primary);
    position: relative;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}

#portfolio-app-view.view-visible {
    opacity: 1;
}

/* Category & Project Hero Section */
.portfolio-hero {
    position: relative;
    width: 100%;
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bg-primary);
}

.portfolio-hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.portfolio-hero-media img,
.portfolio-hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.65);
    z-index: 2;
}

.portfolio-hero-vignette {
    display: none;
}

.portfolio-hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    width: 90%;
    max-width: 800px;
    padding: 0 20px;
}

.portfolio-hero-label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 24px;
}

.portfolio-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    text-transform: uppercase;
    color: var(--fg-primary);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    overflow: hidden;
}

.portfolio-hero-intro {
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.6;
    color: var(--fg-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Category Grid & Cards */
.portfolio-grid-section {
    padding: 100px 8%;
    background-color: var(--bg-primary);
}

.portfolio-projects-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 60px 40px;
}

.portfolio-card {
    grid-column: span 6;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
}

.portfolio-card:hover {
    transform: translateY(-4px) scale(1.015);
}

.portfolio-card:nth-child(3n+1) {
    grid-column: span 7;
}

.portfolio-card:nth-child(3n+2) {
    grid-column: span 5;
}

.portfolio-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden !important;
    border-radius: 16px; /* Subtle professional radius */
    isolation: isolate; /* WebKit clipping bounds */
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Fix Safari overflow bugs */
    background-color: var(--bg-secondary);
    margin-bottom: 24px;
    border: 1px solid var(--border-light);
    transform: translate3d(0, 0, 0);
}

.portfolio-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.portfolio-card:hover .portfolio-card-img {
    transform: scale(1.03);
}

.portfolio-card-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: rgba(5, 5, 5, 0.4);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

.portfolio-card:hover .portfolio-card-hover-overlay {
    opacity: 1;
}

.video-play-indicator {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(10, 10, 10, 0.65);
    backdrop-filter: blur(5px);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s;
}

.video-play-indicator::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 3px;
}

.portfolio-card:hover .video-play-indicator {
    transform: scale(1.1);
    border-color: #ffffff;
}

.portfolio-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-family: var(--font-heading);
    letter-spacing: 0.05em;
    color: var(--fg-tertiary);
}

.portfolio-card-title {
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--fg-primary);
    transition: color 0.4s;
}

.portfolio-card:hover .portfolio-card-title {
    color: var(--accent);
}

/* Project Detail Page Top Nav / Back Navigation */
.project-page-top-nav {
    position: absolute;
    top: clamp(80px, 8vw, 110px);
    left: 0;
    width: 100%;
    padding: 0 clamp(20px, 6vw, 8%);
    z-index: 10;
    display: flex;
    align-items: center;
}

.project-page-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    transition: color 0.3s ease, transform 0.3s ease;
}

.project-page-back-link:hover {
    color: #ffffff;
    transform: translateX(-4px);
}

body.day-mode .project-page-back-link:hover,
body.light-theme .project-page-back-link:hover {
    color: #000000;
}

.project-back-arrow {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.project-page-back-link:hover .project-back-arrow {
    transform: translateX(-3px);
}

/* Project Detail View */
.project-details-section {
    padding: 100px 8%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 80px;
    border-bottom: 1px solid var(--border-light);
}

.project-desc-col {
    grid-column: span 7;
}

.project-meta-col {
    grid-column: span 5;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.project-detail-desc-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.project-detail-desc-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--fg-secondary);
}

.project-meta-row {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.project-meta-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-secondary);
}

.project-meta-val {
    font-size: 1rem;
    text-align: right;
    max-width: 60%;
}

/* Project Gallery Section */
.project-gallery-section {
    padding: 100px 8%;
    background-color: var(--bg-primary);
}

.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 40px;
}

.gallery-item {
    grid-column: span 6;
    position: relative;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden !important;
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    background-color: var(--bg-primary);
    transform: translate3d(0, 0, 0);
}

.gallery-item.full-width {
    grid-column: span 12;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border-radius: inherit;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item img:hover {
    transform: scale(1.03);
}

.gallery-item video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
}

.gallery-item iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: none;
    border-radius: inherit;
}

/* Next Project CTA section */
.next-project-section {
    position: relative;
    padding: 140px 8%;
    text-align: center;
    background-color: var(--bg-primary);
    cursor: pointer;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid var(--border-light);
}

.next-project-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.15;
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s;
}

.next-project-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.next-project-section:hover .next-project-bg {
    transform: scale(1.05);
    opacity: 0.25;
}

.next-project-content {
    position: relative;
    z-index: 2;
}

.next-project-subtitle {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 16px;
}

.next-project-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.8rem);
    text-transform: uppercase;
    color: var(--fg-primary);
    margin-bottom: 8px;
    transition: color 0.4s;
}

.next-project-section:hover .next-project-title {
    color: var(--accent);
}

/* Lightbox Modal Overlay */
.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(5, 5, 5, 0.95);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}

.lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    display: block;
}

.lightbox-close-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(5px);
    cursor: pointer;
    color: #ffffff;
    font-size: 1.5rem;
    transition: background-color 0.4s, border-color 0.4s, transform 0.4s;
}

.lightbox-close-btn:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
    transform: scale(1.05);
}

/* Fix service cards visual identity as dynamic link cards */
a.service-card {
    text-decoration: none;
    color: inherit;
}

/* Responsiveness for Portfolio layout grids */
@media (max-width: 900px) {
    .portfolio-projects-grid {
        gap: 30px;
    }
    
    .portfolio-card,
    .portfolio-card:nth-child(3n+1),
    .portfolio-card:nth-child(3n+2) {
        grid-column: span 12;
    }
    
    .project-details-section {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .project-desc-col,
    .project-meta-col {
        grid-column: span 12;
    }
    
    .gallery-item {
        grid-column: span 12;
    }
}

/* Section: Featured Reel */
.featured-reel-section {
    padding: 140px 0;
    background-color: #000000;
    border-top: 1px solid var(--border-light);
}

.reel-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    background-color: #050505;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-light);
}

.reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6) contrast(1.05);
    transition: filter 0.8s ease, transform 0.8s ease;
}

.reel-wrapper:hover .reel-video {
    filter: brightness(0.7) contrast(1.02);
    transform: scale(1.01);
}

.reel-control-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
}

.reel-play-btn {
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s, border-color 0.4s;
}

.reel-play-btn::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 4px;
    transition: border-color 0.4s;
}

.reel-wrapper.playing .reel-play-btn::before {
    border-style: double;
    border-width: 0px 0px 0px 14px;
    border-color: double;
    border-left: 14px double #ffffff;
    width: 12px;
    height: 16px;
    margin-left: 0;
}

.reel-play-btn:hover {
    transform: scale(1.1);
    background-color: #ffffff;
    border-color: #ffffff;
}

.reel-play-btn:hover::before {
    border-left-color: #000000;
}

.reel-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reel-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--fg-secondary);
}

.reel-title {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 500;
    color: #ffffff;
}

/* Section: Insights */
.insights-section {
    padding: 140px 0;
    background-color: #050505;
    border-top: 1px solid var(--border-light);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.insight-card {
    padding: 40px;
    background-color: #000000;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s;
}

.insight-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.2);
}

.insight-date {
    font-size: 0.8rem;
    color: var(--fg-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.insight-title {
    font-size: 1.4rem;
    line-height: 1.35;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
}

.insight-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--fg-secondary);
}

.insight-link {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.insight-link::after {
    content: '→';
    transition: transform 0.3s ease;
}

.insight-card:hover .insight-link::after {
    transform: translateX(4px);
}

/* Footer Section CTA updates */
.footer-cta {
    margin-bottom: 80px;
}

.footer-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 6.5rem);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: #ffffff;
}

/* Timeline grid responsive fix */
@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .about-photo-card:nth-child(2) {
        margin-top: 0;
    }
    
    .insights-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .reel-wrapper {
        aspect-ratio: 16 / 9;
    }
}

/* What We Create — Split Columns Layout */
.services-split-layout {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    margin-top: 60px;
}

.services-list-nav {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.services-nav-item {
    display: flex;
    position: relative;
    padding-left: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.nav-indicator-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: var(--border-light);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.services-nav-item.active .nav-indicator-line {
    transform: scaleY(1);
    background-color: var(--fg-primary);
}

.nav-item-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-item-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--fg-secondary);
    margin: 0;
    transform: scale(1.0);
    transform-origin: left center;
    transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, color;
}

.services-nav-item.active .nav-item-title {
    color: var(--fg-primary);
    transform: scale(1.04); /* ~4% size increase */
    font-weight: 700;
}

.nav-item-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--fg-secondary);
    margin: 0;
    opacity: 0.35;
    transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity;
    padding-top: 4px;
}

.services-nav-item.active .nav-item-desc {
    opacity: 0.8;
}

.nav-item-explore {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-primary);
    margin-top: 4px;
    opacity: 0;
    transform: translate3d(-6px, 0, 0);
    transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

.services-nav-item.active .nav-item-explore {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.explore-arrow {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.services-nav-item:hover .explore-arrow {
    transform: translate3d(4px, 0, 0);
}

/* Right side Media Viewport */
.services-media-viewport {
    flex: 0 0 60%;
    position: sticky;
    top: 180px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--bg-secondary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, box-shadow;
}

.services-media-viewport:hover {
    transform: scale(1.01);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.services-media-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    transform: scale(1.015);
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                z-index 0.5s step-end;
    will-change: opacity, transform;
}

.services-media-item.active {
    opacity: 1;
    z-index: 2;
    transform: scale(1.00);
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                z-index 0s step-start;
}

.services-viewport-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.95);
    transition: filter 0.35s ease;
    will-change: filter;
    pointer-events: none;
}

.services-media-viewport:hover .services-viewport-img {
    filter: brightness(1.0);
}

/* Custom Scroll reveal for this section, inspired by Apple */
.services-section.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.services-section.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 968px) {
    .services-split-layout {
        flex-direction: column-reverse;
        gap: 40px;
    }
    
    .services-list-nav {
        width: 100%;
        flex: none;
    }
    
    .services-media-viewport {
        width: 100%;
        position: relative;
        top: 0;
        flex: none;
    }
}

/* About Overlay Space */
.about-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1200; /* Higher z-index to overlay on top of everything */
    background-color: var(--bg-primary);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
}

.about-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.about-overlay-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.close-about-btn {
    position: fixed;
    top: 30px;
    right: 4%;
    z-index: 1220;
    background: transparent;
    border: none;
    color: var(--fg-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-about-btn svg {
    transition: var(--transition-fast);
}

.close-about-btn:hover svg {
    transform: rotate(90deg);
}

/* About Layout and Sections */
.about-hero-section {
    position: relative;
    width: 100%;
    height: 60vh;
    display: flex;
    align-items: flex-end;
    padding: 0 8% 80px 8%;
    overflow: hidden;
}

.about-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.about-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6) grayscale(100%);
}

.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);
}

.about-hero-content {
    position: relative;
    z-index: 2;
}

.about-tag {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    color: var(--fg-secondary);
    display: block;
    margin-bottom: 12px;
}

.about-title {
    font-size: clamp(2rem, 5vw, 4.5rem);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
}

/* ==========================================================================
   Editorial About Space & Manifesto Typography
/* ==========================================================================
   FilmLaab Style About Section & Team Layout
   ========================================================================== */

/* 1. Hero Section */
.filmlaab-hero {
    position: relative;
    width: 100%;
    height: 88vh;
    min-height: 580px;
    max-height: 920px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.filmlaab-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    z-index: 1;
}

.filmlaab-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.32) 0%,
        rgba(0, 0, 0, 0.04) 45%,
        rgba(0, 0, 0, 0.88) 100%
    );
    z-index: 2;
}

.filmlaab-hero-bottom {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 6% 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.filmlaab-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3.2rem, 7.5vw, 6.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #ffffff;
    margin: 0;
}

.filmlaab-scroll-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
    padding-bottom: 8px;
}

.filmlaab-scroll-icon {
    animation: bounceDown 2s infinite ease-in-out;
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* 2. Two-Column Statement Section */
.filmlaab-statement-section {
    width: 100%;
    background-color: #000000;
    padding: 90px 6% 110px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.filmlaab-statement-grid {
    width: 100%;
    max-width: 1400px;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    text-align: left;
}

.filmlaab-statement-col p {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.15vw, 1.18rem);
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 24px;
    text-wrap: pretty;
}

.filmlaab-statement-col p:last-child {
    margin-bottom: 0;
}

.filmlaab-statement-col .filmlaab-punchline {
    color: #ffffff;
    font-weight: 600;
    font-size: clamp(1.1rem, 1.3vw, 1.3rem);
    line-height: 1.5;
    margin-top: 32px;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Cinematic Circular Lens Orbit & Stage Deck Experience
   ========================================================================== */
.filmlaab-process-section {
    width: 100%;
    background-color: #000000;
    padding: 120px 6% 140px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

/* Background Atmospheric Glow */
.filmlaab-process-section::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 25%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.filmlaab-process-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.filmlaab-process-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 64px;
    gap: 32px;
    flex-wrap: wrap;
}

.filmlaab-process-header-left {
    max-width: 680px;
}

.filmlaab-process-badge {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    display: inline-block;
    margin-bottom: 14px;
}

.filmlaab-process-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5.5vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 12px;
}

.filmlaab-process-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
}

/* Process Controls in Header */
.filmlaab-process-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 18px;
    border-radius: 40px;
    backdrop-filter: blur(12px);
}

.process-orbit-prev,
.process-orbit-next {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.process-orbit-prev:hover,
.process-orbit-next:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
    transform: scale(1.08);
}

.process-orbit-phase-indicator {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    min-width: 55px;
    text-align: center;
}

.orbit-current {
    color: #ffffff;
    font-size: 1rem;
}

/* Circular Orbit Stage Layout (2-Column Grid) */
.process-orbit-stage {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 20px;
}

/* Left: Rotating Circular Dial & Nodes */
.process-orbit-dial-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 460px;
}

.process-circle-dial {
    position: relative;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.process-orbit-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Start at top */
}

.orbit-track-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 3;
    stroke-dasharray: 4 6;
}

.orbit-track-glow {
    fill: none;
    stroke: rgba(255, 255, 255, 0.03);
    stroke-width: 12;
}

.orbit-track-progress {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-dasharray: 879.64;
    stroke-dashoffset: 659.73; /* 25% */
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* Center Shutter Hub */
.process-shutter-center {
    position: relative;
    width: 185px;
    height: 185px;
    border-radius: 50%;
    background: radial-gradient(circle, #161616 0%, #070707 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.9), inset 0 0 24px rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.process-shutter-center:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.4);
}

.shutter-inner-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 6;
    padding: 0 14px;
}

.shutter-active-num {
    font-family: var(--font-heading);
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #ffffff;
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.55);
    transition: all 0.25s ease;
}

.shutter-phase-name {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 6px;
    line-height: 1.2;
    max-width: 150px;
}

.shutter-pulse-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    animation: rotateSlow 24s linear infinite;
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.shutter-crosshair-h {
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.shutter-crosshair-v {
    position: absolute;
    height: 100%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

/* 5 Orbit Nodes positioned around circle (0°, 72°, 144°, 216°, 288°) */
.orbit-node {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0e0e0e;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* 5 Node precise orbital locations */
.orbit-node.node-1 {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-node.node-2 {
    top: 96px;
    right: 14px;
}

.orbit-node.node-3 {
    bottom: 44px;
    right: 50px;
}

.orbit-node.node-4 {
    bottom: 44px;
    left: 50px;
}

.orbit-node.node-5 {
    top: 96px;
    left: 14px;
}

/* Node Active and Hover States */
.orbit-node:hover,
.orbit-node.active {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
    box-shadow: 0 0 26px rgba(255, 255, 255, 0.9);
    transform: scale(1.18);
}
.orbit-node.node-1.active, .orbit-node.node-1:hover { transform: translateX(-50%) scale(1.18); }
.orbit-node.node-2.active, .orbit-node.node-2:hover { transform: scale(1.18); }
.orbit-node.node-3.active, .orbit-node.node-3:hover { transform: scale(1.18); }
.orbit-node.node-4.active, .orbit-node.node-4:hover { transform: scale(1.18); }
.orbit-node.node-5.active, .orbit-node.node-5:hover { transform: scale(1.18); }

.orbit-node.active .node-label,
.orbit-node:hover .node-label {
    opacity: 1;
    color: #ffffff;
}

/* Right: Phase Reveal Stage Deck */
.process-phase-display-deck {
    position: relative;
    min-height: 480px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 48px;
    backdrop-filter: blur(16px);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

.process-stage-card {
    display: none;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-stage-card.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: popStageCard 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes popStageCard {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.stage-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.stage-tag {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #000000;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
}

.stage-cinema-badge {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}

.stage-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 18px;
}

.stage-desc {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 36px;
    max-width: 680px;
    text-wrap: pretty;
}

/* Deliverables Grid inside Stage Card */
.stage-deliverables-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.stage-deliv-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 18px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.stage-deliv-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.06);
}

.deliv-icon {
    font-size: 1.1rem;
    color: #ffffff;
    opacity: 0.8;
}

.stage-deliv-item h4 {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
}

.stage-deliv-item p {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 1080px) {
    .process-orbit-stage {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .process-orbit-dial-wrapper {
        min-height: 380px;
    }
    .process-phase-display-deck {
        padding: 36px 28px;
    }
    .stage-deliverables-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .filmlaab-process-section {
        padding: 70px 6% 90px;
    }
    .process-circle-dial {
        width: 300px;
        height: 300px;
    }
    .process-shutter-center {
        width: 140px;
        height: 140px;
    }
    .shutter-active-num {
        font-size: 2.4rem;
    }
    .orbit-node {
        width: 36px;
        height: 36px;
    }
    .process-phase-display-deck {
        padding: 28px 20px;
    }
}

/* ==========================================================================
   ABOUT SPACE — ORIGIN SECTION ("Why BNANA" / The Missing 'A')
   ========================================================================== */
.about-origin-section {
    width: 100%;
    background-color: #000000;
    padding: 90px 6% 100px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

.about-origin-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.about-origin-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.about-origin-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-origin-header .about-section-eyebrow {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-gold, #C8A96E);
    display: inline-block;
    margin-bottom: 4px;
}

.about-origin-title {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: #ffffff;
    margin: 0;
}

.about-origin-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
}

.about-origin-lead {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(1.15rem, 1.6vw, 1.42rem);
    font-weight: 400;
    line-height: 1.65;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.about-origin-sub {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    font-weight: 350;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

body.theme-day .about-origin-section {
    background-color: #f7f7f7;
    border-color: rgba(0, 0, 0, 0.08);
}

body.theme-day .about-origin-title {
    color: #0c0c0c;
}

body.theme-day .about-origin-lead {
    color: #111111;
}

body.theme-day .about-origin-sub {
    color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 900px) {
    .about-origin-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .about-origin-section {
        padding: 60px 6% 70px;
    }
}

/* 4. Team Section */
.filmlaab-team-section {
    width: 100%;
    background-color: #000000;
    padding: 100px 6% 130px;
}

.filmlaab-team-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.filmlaab-team-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 48px;
}

.filmlaab-team-grid {
    display: flex;
    gap: clamp(28px, 4vw, 44px);
    flex-wrap: wrap;
    align-items: flex-start;
}

.filmlaab-team-card {
    width: clamp(260px, 24vw, 320px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.filmlaab-team-image-box {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background-color: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.filmlaab-team-card:hover .filmlaab-team-image-box {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
}

.filmlaab-team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(100%) contrast(1.05);
    transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.filmlaab-team-card:hover .filmlaab-team-img {
    transform: scale(1.03);
}

.filmlaab-team-meta {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.filmlaab-member-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0;
}

.filmlaab-member-role {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--accent-gold, #C8A96E);
    margin: 0;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.filmlaab-member-voice {
    display: none !important;
}

body.theme-day .filmlaab-member-role {
    color: #8c6e30;
}

body.theme-day .filmlaab-member-voice {
    color: rgba(0, 0, 0, 0.7);
}

/* Cinematic Video Quote Banner in Footer */
.footer-quote-video-banner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto clamp(36px, 5vh, 56px);
    padding: 0 clamp(16px, 5vw, 70px) clamp(24px, 3.5vh, 40px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.footer-quote-video-wrap {
    position: relative;
    width: 100%;
    min-height: 200px;
    height: clamp(220px, 32vw, 420px);
    border-radius: clamp(12px, 2vw, 20px);
    overflow: hidden;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.footer-quote-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.55) contrast(1.18);
    pointer-events: none;
    transition: filter 0.6s ease;
}

.footer-quote-video-wrap:hover .footer-quote-video {
    filter: grayscale(60%) brightness(0.65) contrast(1.2);
}

.footer-quote-video-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.78) 100%);
    pointer-events: none;
}

.footer-quote-video-content {
    position: relative;
    z-index: 2;
    padding: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 32px);
    max-width: min(860px, 92%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.4vh, 12px);
    box-sizing: border-box;
}

.footer-quote-title {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 3.6vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
    word-break: normal;
    overflow-wrap: break-word;
}

.footer-quote-sub {
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1.2vw, 1.2rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    line-height: 1.45;
}

/* ==========================================================================
   Section: Minimal Cinematic Editorial Footer (Vevo Reference Proportions)
   ========================================================================== */
.about-footer,
.footer {
    width: 100%;
    background-color: var(--bg-primary, #050505);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: clamp(80px, 9vw, 130px) 0 clamp(28px, 3.5vw, 44px);
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.about-footer .footer-inner,
.footer .footer-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* TOP AREA: Logo (Left) & Nav Links (Right, in one horizontal row) */
.about-footer .footer-top,
.footer .footer-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}

.about-footer .footer-logo-wrap,
.footer .footer-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    order: 1;
}

.about-footer .footer-logo-link,
.footer .footer-logo-link {
    display: inline-block;
    text-decoration: none;
    line-height: 1;
}

.about-footer .footer-logo,
.footer-logo {
    display: block;
    height: clamp(22px, 2.2vw, 30px);
    width: auto;
    max-width: 120px;
    object-fit: contain;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

.about-footer .footer-logo:hover,
.footer-logo:hover {
    opacity: 1;
}

.about-footer .footer-nav,
.footer .footer-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(16px, 2.2vw, 36px);
    flex-wrap: wrap;
    order: 2;
}

.about-footer .footer-nav-link,
.footer .footer-nav-link {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.74rem, 0.85vw, 0.82rem);
    font-weight: 450;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.25s ease, opacity 0.25s ease;
    cursor: pointer;
}

.about-footer .footer-nav-link:hover,
.footer .footer-nav-link:hover {
    color: #ffffff;
}

/* COMPACT CLEAN SPACE (Save Vertical Space) */
.about-footer .footer-spacer,
.footer .footer-spacer {
    height: clamp(40px, 6vh, 80px);
    width: 100%;
    pointer-events: none;
}

/* THIN HORIZONTAL DIVIDER */
.about-footer .footer-divider,
.footer .footer-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.08);
    margin: 0;
    border: none;
    transition: background-color 0.4s ease;
}

/* BOTTOM INFORMATION BAR */
.about-footer .footer-bottom-bar,
.footer .footer-bottom-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: clamp(20px, 2.6vh, 32px);
    gap: 20px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* LEFT SIDE: Social Icons */
.about-footer .footer-social-row,
.about-footer .footer-social-row,
.footer .footer-social-row,
.about-footer .footer-social-wrap,
.footer .footer-social-wrap {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 22px);
}

.about-footer .footer-social-icon,
.footer .footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    background: none;
    border: none;
    padding: 6px;
    border-radius: 50%;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
    cursor: pointer;
}

.about-footer .footer-social-icon svg,
.footer .footer-social-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.about-footer .footer-social-icon:hover,
.footer .footer-social-icon:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

/* RIGHT SIDE: Small Copyright Line */
.about-footer .footer-legal-wrap,
.footer .footer-legal-wrap {
    display: flex;
    align-items: center;
}

.about-footer .footer-copyright,
.footer .footer-copyright {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.72rem, 0.85vw, 0.82rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1.4;
    transition: color 0.4s ease;
}

/* Day Mode / Light Theme Compatibility */
body.theme-day .about-footer,
body.theme-day .footer,
body.light-theme .about-footer,
body.light-theme .footer {
    background-color: var(--bg-primary, #ffffff);
    border-top-color: rgba(0, 0, 0, 0.07);
}

body.theme-day .footer-nav-link,
body.light-theme .footer-nav-link {
    color: rgba(0, 0, 0, 0.65);
}

body.theme-day .footer-nav-link:hover,
body.light-theme .footer-nav-link:hover {
    color: #000000;
}

body.theme-day .footer-divider,
body.light-theme .footer-divider {
    background-color: rgba(0, 0, 0, 0.08);
}

body.theme-day .footer-social-icon,
body.light-theme .footer-social-icon {
    color: rgba(0, 0, 0, 0.5);
}

body.theme-day .footer-social-icon:hover,
body.light-theme .footer-social-icon:hover {
    color: #000000;
}

body.theme-day .footer-copyright,
body.light-theme .footer-copyright {
    color: rgba(0, 0, 0, 0.42);
}

/* Responsive Rules */
@media (max-width: 768px) {
    .about-footer,
    .footer {
        padding: clamp(60px, 8vw, 84px) 0 28px;
    }
    .about-footer .footer-inner,
    .footer .footer-inner {
        padding: 0 24px;
    }
    .about-footer .footer-spacer,
    .footer .footer-spacer {
        height: clamp(80px, 12vh, 130px);
    }
    .about-footer .footer-bottom-bar,
    .footer .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding-top: 20px;
    }
    .about-footer .footer-social-row,
    .footer .footer-social-row {
        gap: 20px;
    }
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .filmlaab-statement-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .filmlaab-hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .filmlaab-team-grid {
        gap: 28px;
    }
    
    .filmlaab-team-card {
        width: calc(50% - 14px);
        min-width: 240px;
    }
}

@media (max-width: 600px) {
    .filmlaab-hero {
        height: 75vh;
        min-height: 460px;
    }
    
    .filmlaab-statement-section {
        padding: 60px 6% 70px;
    }
    
    .filmlaab-team-section {
        padding: 70px 6% 90px;
    }
    
    .filmlaab-team-card {
        width: 100%;
    }
}

/* ==========================================================================
   Work Space Portfolio Showcase & Category Pop/Blur Physics
   ========================================================================== */
.work-portfolio-wrapper {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 120px 4% 80px;
    box-sizing: border-box;
}

.work-portfolio-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 56px;
}

.work-category-headline-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 1120px;
}

.work-category-headline {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.28;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: baseline;
    margin: 0;
}

.work-cat-item {
    display: inline-block;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    position: relative;
    will-change: transform, filter, opacity;
}

.work-cat-item.active {
    color: #ffffff;
    font-weight: 800;
}

/* Cursor Pop & Blur Physics on Category Hover / Drag */
.work-category-headline:hover .work-cat-item {
    filter: blur(2px);
    opacity: 0.25;
    transform: scale(0.98);
}

.work-category-headline:hover .work-cat-item:hover {
    filter: blur(0px);
    opacity: 1;
    color: #ffffff;
    transform: scale(1.05) translateY(-2px);
    text-shadow: 0 4px 20px rgba(255, 255, 255, 0.4);
}

.work-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
    padding-top: 10px;
}

.work-view-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 2px 4px;
    transition: color 0.2s ease;
}

.work-view-btn:hover,
.work-view-btn.active {
    color: #ffffff;
    font-weight: 700;
}

.work-view-separator {
    color: rgba(255, 255, 255, 0.25);
}

/* 3-Column Dynamic Work Masonry Layout (Vertical, Horizontal & Square Packing) */
.work-grid {
    column-count: 3;
    column-gap: 24px;
    width: 100%;
    transition: opacity 0.3s ease;
}

.work-card {
    break-inside: avoid;
    margin-bottom: 24px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0c0c0c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s ease, opacity 0.3s ease;
}

.work-card.aspect-portrait {
    aspect-ratio: 4 / 5;
}

.work-card.aspect-landscape {
    aspect-ratio: 16 / 9;
}

.work-card.aspect-square {
    aspect-ratio: 1 / 1;
}

.work-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.85);
}

.work-card-media-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #111111;
}

.work-card-video,
.work-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05);
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.work-card:hover .work-card-video,
.work-card:hover .work-card-img {
    transform: scale(1.04);
    filter: contrast(1.08) brightness(1.04);
}

.work-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.88) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.work-card-meta {
    position: absolute;
    bottom: 16px;
    left: 18px;
    right: 18px;
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    pointer-events: none;
}

.work-card-client {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.work-card-title {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.01em;
}

/* List View Layout */
.work-list-view {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.work-list-item {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 60px;
    align-items: center;
    padding: 26px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-list-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
    padding-left: 24px;
}

.work-list-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.work-list-cat {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.work-list-year {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
}

.work-list-arrow {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
    transition: transform 0.3s ease, color 0.2s ease;
}

.work-list-item:hover .work-list-arrow {
    transform: translateX(6px);
    color: #ffffff;
}

@media (max-width: 1080px) {
    .work-grid {
        column-count: 2;
        column-gap: 20px;
    }
    .work-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .work-portfolio-wrapper {
        padding: 100px 5% 60px;
    }
    .work-category-headline {
        font-size: 1.55rem;
        gap: 6px 10px;
    }
    .work-list-item {
        grid-template-columns: 1fr auto;
        grid-template-areas: 
            "title arrow"
            "meta arrow";
        row-gap: 6px;
        column-gap: 12px;
        padding: 16px 10px;
    }
    .work-list-title {
        grid-area: title;
        font-size: clamp(0.95rem, 3.2vw, 1.15rem);
    }
    .work-list-cat {
        grid-area: meta;
        font-size: 0.74rem;
        opacity: 0.7;
    }
    .work-list-year {
        display: inline-block;
        font-size: 0.74rem;
        margin-left: 8px;
        opacity: 0.55;
    }
    .work-list-arrow {
        grid-area: arrow;
    }
}

@media (max-width: 600px) {
    .work-grid {
        column-count: 1;
        column-gap: 16px;
    }
    .work-card {
        margin-bottom: 16px;
    }
}

/* ==========================================================================
   Section 2: CAPABILITIES — Minimal Cinematic Studio Ident Sequential Reveal
   ========================================================================== */
.capabilities-section {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
    padding: clamp(90px, 12vw, 160px) 0;
    width: 100%;
    overflow: hidden;
}

/* 1. Full-Bleed Dynamic Backdrop System */
.capabilities-backdrop-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    user-select: none;
    background-color: transparent;
    contain: paint layout;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 5%,
        rgba(0, 0, 0, 0.45) 12%,
        rgba(0, 0, 0, 0.88) 22%,
        #000000 32%,
        #000000 68%,
        rgba(0, 0, 0, 0.88) 78%,
        rgba(0, 0, 0, 0.45) 88%,
        rgba(0, 0, 0, 0.08) 95%,
        transparent 100%
    );
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 5%,
        rgba(0, 0, 0, 0.45) 12%,
        rgba(0, 0, 0, 0.88) 22%,
        #000000 32%,
        #000000 68%,
        rgba(0, 0, 0, 0.88) 78%,
        rgba(0, 0, 0, 0.45) 88%,
        rgba(0, 0, 0, 0.08) 95%,
        transparent 100%
    );
}

.cap-backdrop-layer {
    position: absolute;
    top: -4%;
    left: -4%;
    width: 108%;
    height: 108%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.03);
    filter: brightness(0.44) contrast(1.15) saturate(1.12);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    pointer-events: none;
    backface-visibility: hidden;
    perspective: 1000px;
    z-index: 1;
}

.cap-backdrop-layer.previous {
    opacity: 0.54;
    z-index: 2;
    transform: translate3d(0, 0, 0) scale(1.0);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.02s,
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.cap-backdrop-layer.active {
    opacity: 0.54;
    z-index: 3;
    transform: translate3d(0, 0, 0) scale(1.0);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light / Day mode subtle backdrop tuning */
body.day-mode .cap-backdrop-layer.active,
body.day-mode .cap-backdrop-layer.previous,
body.light-theme .cap-backdrop-layer.active,
body.light-theme .cap-backdrop-layer.previous {
    opacity: 0.20;
    filter: brightness(0.72) contrast(1.1) saturate(1.0);
}

/* Feathered Upper & Lower Edge Diffusion Blur */
.cap-edge-blur-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(90px, 15vw, 200px);
    pointer-events: none;
    z-index: 4;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.cap-edge-blur-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(90px, 15vw, 200px);
    pointer-events: none;
    z-index: 4;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

/* 2. Minimal Ambient Glow Layer */
.cap-anamorphic-flare-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: screen;
    overflow: hidden;
    opacity: 0.7;
    transition: opacity 0.6s ease;
}

.cap-anamorphic-streak {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, 
        rgba(0, 160, 255, 0) 0%, 
        rgba(0, 190, 255, 0.2) 25%, 
        rgba(255, 255, 255, 0.75) 50%, 
        rgba(255, 190, 80, 0.2) 75%, 
        rgba(255, 120, 0, 0) 100%
    );
    box-shadow: 0 0 24px 2px rgba(0, 190, 255, 0.4),
                0 0 60px 8px rgba(255, 180, 60, 0.15);
    transform: translateY(-50%);
    animation: anamorphicPulse 8s ease-in-out infinite alternate;
}

.cap-anamorphic-streak-sub {
    display: none;
}

.cap-anamorphic-core-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 45vw, 600px);
    height: clamp(150px, 22vw, 280px);
    background: radial-gradient(ellipse at center, 
        rgba(255, 255, 255, 0.25) 0%, 
        rgba(0, 190, 255, 0.15) 40%, 
        transparent 75%
    );
    filter: blur(32px);
    animation: anamorphicCoreGlow 9s ease-in-out infinite alternate;
}

.cap-anamorphic-bokeh-glow {
    display: none;
}

@keyframes anamorphicPulse {
    0% { opacity: 0.4; transform: translateY(-50%) scaleY(0.9); }
    100% { opacity: 0.7; transform: translateY(-50%) scaleY(1.1); }
}

@keyframes anamorphicCoreGlow {
    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.75; }
}

/* 3. 35mm Real Film Grain Overlay */
.cap-film-grain-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.14;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
    animation: grainFlicker 0.3s steps(2) infinite;
}

@keyframes grainFlicker {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-1px, 1px); }
    100% { transform: translate(1px, -1px); }
}

/* 4. Deep Filmic Vignette & Soft Feathered Atmosphere */
.cap-filmic-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background: 
        /* Ultra-soft progressive top feather */
        linear-gradient(180deg, 
            #080808 0%, 
            rgba(8, 8, 8, 0.96) 6%, 
            rgba(8, 8, 8, 0.78) 14%, 
            rgba(8, 8, 8, 0.45) 24%, 
            rgba(8, 8, 8, 0.15) 35%, 
            rgba(8, 8, 8, 0) 48%
        ),
        /* Ultra-soft progressive bottom feather */
        linear-gradient(0deg, 
            #080808 0%, 
            rgba(8, 8, 8, 0.96) 6%, 
            rgba(8, 8, 8, 0.78) 14%, 
            rgba(8, 8, 8, 0.45) 24%, 
            rgba(8, 8, 8, 0.15) 35%, 
            rgba(8, 8, 8, 0) 48%
        ),
        /* Soft lateral feather */
        linear-gradient(90deg, 
            #080808 0%, 
            rgba(8, 8, 8, 0.6) 8%, 
            rgba(8, 8, 8, 0) 18%, 
            rgba(8, 8, 8, 0) 82%, 
            rgba(8, 8, 8, 0.6) 92%, 
            #080808 100%
        ),
        /* Central organic radial vignette */
        radial-gradient(circle at center, 
            rgba(8, 8, 8, 0.02) 0%, 
            rgba(8, 8, 8, 0.35) 55%, 
            #080808 92%
        );
}

body.day-mode .cap-filmic-vignette,
body.light-theme .cap-filmic-vignette {
    background: 
        linear-gradient(180deg, #f4f4f4 0%, rgba(244, 244, 244, 0.95) 8%, rgba(244, 244, 244, 0.4) 25%, rgba(244, 244, 244, 0) 45%),
        linear-gradient(0deg, #f4f4f4 0%, rgba(244, 244, 244, 0.95) 8%, rgba(244, 244, 244, 0.4) 25%, rgba(244, 244, 244, 0) 45%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.0) 0%, rgba(250, 250, 250, 0.6) 65%, #f4f4f4 98%);
}

/* 5. Minimal Capabilities Typography Stage */
.capabilities-stage {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 60px);
    position: relative;
    box-sizing: border-box;
    z-index: 6;
}

.capabilities-header {
    margin-bottom: clamp(32px, 4.5vw, 56px);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 6;
}

.capabilities-label {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    display: inline-block;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.capabilities-ident-container {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.8vw, 52px);
    width: 100%;
    position: relative;
    z-index: 6;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.capabilities-section,
.capabilities-section *,
.cap-ident-item,
.cap-ident-inner,
.cap-ident-word-wrap,
.cap-ident-title {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.capabilities-section ::selection,
.capabilities-section *::selection,
.cap-ident-item ::selection,
.cap-ident-title ::selection,
.capabilities-section ::-moz-selection,
.capabilities-section *::-moz-selection,
.cap-ident-item ::-moz-selection,
.cap-ident-title ::-moz-selection {
    background: transparent !important;
    color: inherit !important;
    text-shadow: none !important;
}

.cap-ident-item {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: 6px 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.28;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.cap-ident-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.cap-ident-word-wrap {
    overflow: hidden;
    position: relative;
    display: inline-block;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.cap-ident-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5.8vw, 5.0rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--text-color, #ffffff);
    display: block;
    margin: 0;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
    transition: color 0.4s ease,
                text-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: color, text-shadow;
    backface-visibility: hidden;
}

/* Sequential Smooth Reveal on Viewport Entry */
.capabilities-section:not(.revealed) .cap-ident-item {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    pointer-events: none;
}

.capabilities-section.revealed .cap-creative {
    animation: capSmoothItemReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

.capabilities-section.revealed .cap-production {
    animation: capSmoothItemReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.16s forwards;
}

.capabilities-section.revealed .cap-storytelling {
    animation: capSmoothItemReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.27s forwards;
}

.capabilities-section.revealed .cap-post {
    animation: capSmoothItemReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.38s forwards;
}

@keyframes capSmoothItemReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }
    100% {
        opacity: 0.28;
        transform: translate3d(0, 0, 0);
    }
}

/* Active & Hover Item Highlighting */
.cap-ident-item:hover,
.cap-ident-item:focus-visible,
.cap-ident-item.active {
    opacity: 1 !important;
    transform: translate3d(20px, 0, 0) !important;
}

.cap-ident-item:hover .cap-ident-title,
.cap-ident-item:focus-visible .cap-ident-title,
.cap-ident-item.active .cap-ident-title {
    color: #ffffff;
    text-shadow: 0 0 32px rgba(255, 255, 255, 0.3), 
                0 0 60px rgba(0, 200, 255, 0.2), 
                0 4px 20px rgba(0, 0, 0, 0.95);
}

body.day-mode .cap-ident-item .cap-ident-title,
body.light-theme .cap-ident-item .cap-ident-title {
    text-shadow: none;
}

body.day-mode .cap-ident-item:hover .cap-ident-title,
body.day-mode .cap-ident-item:focus-visible .cap-ident-title,
body.day-mode .cap-ident-item.active .cap-ident-title,
body.light-theme .cap-ident-item:hover .cap-ident-title,
body.light-theme .cap-ident-item:focus-visible .cap-ident-title,
body.light-theme .cap-ident-item.active .cap-ident-title {
    color: #000000;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .capabilities-section {
        padding: clamp(60px, 10vw, 100px) 0;
    }
    .capabilities-ident-container {
        gap: clamp(20px, 4.5vw, 32px);
    }
    .cap-ident-title {
        font-size: clamp(1.85rem, 8.2vw, 2.75rem);
    }
    .cap-ident-item:hover,
    .cap-ident-item:focus-visible,
    .cap-ident-item.active {
        transform: translate3d(12px, 0, 0) !important;
    }
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .capabilities-section:not(.revealed) .cap-ident-item,
    .capabilities-section .cap-ident-item {
        opacity: 1 !important;
        pointer-events: auto !important;
        animation: none !important;
    }
    .capabilities-section .cap-ident-title {
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
        clip-path: none !important;
        filter: none !important;
    }
}

/* ==========================================================================
   Section: OUR PROCESS — Precision Cinematic Shutter-Dial Motion System
   ========================================================================== */
.process-scroll-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 5vh, 60px) 0;
}

.process-sticky-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 10;
}

.process-inner-stage {
    width: 100%;
    max-width: 1500px;
    height: 100%;
    max-height: 900px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 6%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

/* 1. Header Label */
.process-header-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 5;
}

.process-eyebrow-label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    display: inline-block;
}

/* 2. Main Mechanism Stage */
.process-mechanism-stage {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 3. Circular Shutter-Dial Optical Assembly */
.process-dial-assembly {
    --dial-radius: calc(clamp(340px, 44vw, 540px) * 0.476);
    position: relative;
    width: clamp(340px, 44vw, 540px);
    height: clamp(340px, 44vw, 540px);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* Outer Static Bezel SVG */
.process-dial-bezel-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    transform: rotate(-90deg); /* Start progress at 12 o'clock */
}

.dial-track-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.09);
    stroke-width: 1.5;
}

.dial-inner-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.dial-progress-arc {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 1495.4;
    stroke-dashoffset: 1495.4;
    opacity: 0.85;
}

.dial-tick-mark {
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 1;
}

.dial-tick-mark.major {
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 1.5;
}

/* 4. Rotating Rotor Carrier (5 Nodes) */
.process-dial-rotor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 4;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
}

.dial-orbit-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    margin-left: -19px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.35;
}

.dial-orbit-node.node-0 { transform: rotate(0deg) translateY(calc(-1 * var(--dial-radius))) rotate(0deg); }
.dial-orbit-node.node-1 { transform: rotate(72deg) translateY(calc(-1 * var(--dial-radius))) rotate(-72deg); }
.dial-orbit-node.node-2 { transform: rotate(144deg) translateY(calc(-1 * var(--dial-radius))) rotate(-144deg); }
.dial-orbit-node.node-3 { transform: rotate(216deg) translateY(calc(-1 * var(--dial-radius))) rotate(-216deg); }
.dial-orbit-node.node-4 { transform: rotate(288deg) translateY(calc(-1 * var(--dial-radius))) rotate(-288deg); }

.orbit-node-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.orbit-node-num {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-color, #ffffff);
}

.dial-orbit-node:hover,
.dial-orbit-node.active {
    opacity: 1;
}

.dial-orbit-node.active .orbit-node-dot {
    transform: scale(1.6);
    background: #ffffff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 1);
}

/* 5. Cinematic Glowing Optical Lens / Dynamic Background Imagery */
.process-circle-media-glow {
    position: absolute;
    width: 76%;
    height: 76%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-ambient-bloom {
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 175, 50, 0.32) 0%, rgba(245, 175, 50, 0.08) 50%, transparent 72%);
    filter: blur(36px);
    opacity: 0.9;
    transition: background 0.6s ease, opacity 0.5s ease;
    will-change: background, opacity;
    pointer-events: none;
    z-index: 0;
}

.process-media-viewport {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #030303;
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.95), 0 0 50px rgba(0, 0, 0, 0.85), 0 0 1px 1px rgba(255, 255, 255, 0.12);
    z-index: 1;
}

.process-media-layer {
    position: absolute;
    inset: -12px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.12);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
    filter: blur(4px) brightness(0.66) contrast(1.25) saturate(1.22);
}

.process-media-layer.active {
    opacity: 1;
    transform: scale(1.05);
}

.process-media-vignette {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(3, 3, 3, 0.15) 0%, rgba(3, 3, 3, 0.62) 52%, rgba(2, 2, 2, 0.94) 86%, #020202 100%);
    pointer-events: none;
    z-index: 2;
}

.process-media-grain {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    opacity: 0.4;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 3;
}

.process-media-streak {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    margin-top: -1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 20%, rgba(120, 200, 255, 0.35) 50%, rgba(255, 255, 255, 0.04) 80%, transparent 100%);
    box-shadow: 0 0 14px rgba(120, 200, 255, 0.45);
    opacity: 0.65;
    pointer-events: none;
    z-index: 4;
}

/* 6. Minimalist Abstract Aperture / Shutter Blades */
.process-shutter-iris {
    position: absolute;
    width: 78%;
    height: 78%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transform: scale(var(--shutter-scale, 1)) rotate(var(--shutter-rot, 0deg));
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.shutter-blade {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    margin-top: -70%;
    margin-left: -70%;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    pointer-events: none;
}

.blade-1 { transform: rotate(0deg) translate(22%, -22%); }
.blade-2 { transform: rotate(60deg) translate(22%, -22%); }
.blade-3 { transform: rotate(120deg) translate(22%, -22%); }
.blade-4 { transform: rotate(180deg) translate(22%, -22%); }
.blade-5 { transform: rotate(240deg) translate(22%, -22%); }
.blade-6 { transform: rotate(300deg) translate(22%, -22%); }

/* 6. Active Optical Index Pointer at 12 o'clock */
.process-index-pointer {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}

.pointer-line {
    width: 2px;
    height: 12px;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.pointer-triangle {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #ffffff;
}

/* 7. Center Focal Stage Content */
.process-focal-core {
    position: relative;
    width: 82%;
    height: 82%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    text-align: center;
    pointer-events: none;
}

.process-stage-item {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    filter: blur(4px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.5s ease;
    will-change: transform, opacity, filter;
    pointer-events: none;
}

.process-stage-item.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
    pointer-events: auto;
}

.process-stage-digit {
    font-family: var(--font-heading);
    font-size: clamp(0.9rem, 1.8vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    margin-bottom: 8px;
    display: block;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.process-stage-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--text-color, #ffffff);
    margin: 0 0 14px 0;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.98), 0 0 20px rgba(255, 255, 255, 0.12);
}

.process-stage-desc {
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1.15vw, 0.98rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 380px;
    margin: 0 auto;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}

.process-stage-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 12px;
    text-transform: uppercase;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95);
}

/* Extra Stage Details Below Heads (Clean & Center Aligned) */
.process-stage-extra-details {
    width: 100%;
    max-width: 860px;
    margin: 22px auto 0;
    text-align: center;
    position: relative;
    min-height: 48px;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
}

.process-extra-panel {
    display: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    text-align: center;
}

.process-extra-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.process-extra-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 22px;
    text-align: center;
}

.process-extra-list li {
    font-family: var(--font-body);
    font-size: clamp(0.82rem, 1.05vw, 0.92rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.process-extra-list li::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

/* 8. Minimal Horizontal Quick Selector Strip */
.process-selector-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.8vw, 20px);
    margin-top: clamp(24px, 3.5vw, 40px);
    z-index: 6;
    flex-wrap: wrap;
}

.process-strip-btn {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.45);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-strip-btn .btn-step-num {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    opacity: 0.6;
}

.process-strip-btn .btn-step-name {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.process-strip-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.process-strip-btn.active {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.05);
}

/* Day Mode / Light Theme Tuning */
body.day-mode .dial-track-ring,
body.light-theme .dial-track-ring {
    stroke: rgba(0, 0, 0, 0.12);
}

body.day-mode .dial-inner-ring,
body.light-theme .dial-inner-ring {
    stroke: rgba(0, 0, 0, 0.06);
}

body.day-mode .dial-progress-arc,
body.light-theme .dial-progress-arc {
    stroke: #000000;
}

body.day-mode .dial-tick-mark,
body.light-theme .dial-tick-mark {
    stroke: rgba(0, 0, 0, 0.25);
}

body.day-mode .pointer-line,
body.day-mode .pointer-triangle,
body.light-theme .pointer-line,
body.light-theme .pointer-triangle {
    background: #000000;
    border-top-color: #000000;
}

body.day-mode .orbit-node-dot,
body.light-theme .orbit-node-dot {
    background: #000000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

body.day-mode .process-stage-desc,
body.light-theme .process-stage-desc {
    color: rgba(0, 0, 0, 0.65);
}

body.day-mode .process-strip-btn,
body.light-theme .process-strip-btn {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.55);
}

body.day-mode .process-strip-btn.active,
body.light-theme .process-strip-btn.active {
    color: #000000;
    border-color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.08);
}

body.day-mode .process-extra-list li,
body.light-theme .process-extra-list li {
    color: rgba(0, 0, 0, 0.72);
}

body.day-mode .process-extra-list li::before,
body.light-theme .process-extra-list li::before {
    background: rgba(0, 0, 0, 0.35);
}

/* About Overlay Process Wheel Wrapper */
.about-process-wheel-wrap {
    width: 100%;
    background-color: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.about-process-wheel-wrap .process-scroll-section {
    min-height: auto;
    padding: clamp(60px, 8vh, 100px) 0;
}

.about-process-wheel-wrap .process-inner-stage {
    max-height: none;
    height: auto;
}

body.day-mode .about-process-wheel-wrap,
body.light-theme .about-process-wheel-wrap {
    background-color: #f7f7f7;
    border-color: rgba(0, 0, 0, 0.08);
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 768px) {
    .process-scroll-section {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 24px 0;
    }

    .process-dial-assembly {
        --dial-radius: calc(clamp(290px, 86vw, 360px) * 0.476);
        width: clamp(290px, 86vw, 360px);
        height: clamp(290px, 86vw, 360px);
    }

    .process-selector-strip {
        gap: 6px;
        margin-top: 18px;
    }

    .process-strip-btn {
        padding: 6px 10px;
        gap: 5px;
    }

    .process-strip-btn .btn-step-name {
        font-size: 0.7rem;
    }

    .process-stage-desc {
        font-size: 0.82rem;
        max-width: 250px;
    }

    .process-stage-title {
        font-size: clamp(1.35rem, 5.5vw, 1.85rem);
        margin-bottom: 8px;
    }

    .process-stage-extra-details {
        margin-top: 16px;
        min-height: 64px;
        padding: 0 16px;
    }

    .process-extra-list {
        flex-direction: column;
        gap: 6px;
    }

    .process-extra-list li {
        font-size: 0.78rem;
        line-height: 1.4;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .process-scroll-section {
        height: auto !important;
    }
    .process-sticky-container {
        position: relative !important;
        height: auto !important;
        padding: 80px 0;
    }
    .process-dial-rotor,
    .process-shutter-iris,
    .process-stage-item {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   Dedicated Capability Page Styles (No Video + WHY BNANA Manifesto)
   ========================================================================== */
.capability-page-hero {
    background-color: var(--bg-color, #050505);
    min-height: 100vh;
    padding: clamp(120px, 15vw, 180px) 0 clamp(80px, 10vw, 140px);
    width: 100%;
}

.capability-page-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 6%);
    display: flex;
    flex-direction: column;
}

.capability-page-top-nav {
    margin-bottom: clamp(30px, 4vw, 50px);
}

.capability-page-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.capability-page-back-link:hover {
    color: var(--text-color, #ffffff);
    transform: translateX(-4px);
}

.capability-page-header {
    margin-bottom: clamp(50px, 7vw, 90px);
    border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
    padding-bottom: clamp(40px, 6vw, 70px);
}

.capability-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    margin-bottom: clamp(14px, 2vw, 24px);
}

.capability-badge-num {
    color: var(--text-color, #ffffff);
}

.capability-page-title {
    font-family: var(--font-heading);
    font-size: clamp(3.2rem, 9vw, 8.5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--text-color, #ffffff);
    margin: 0 0 clamp(16px, 2.5vw, 28px);
}

.capability-page-statement {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.5vw, 2.4rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text-color, rgba(255, 255, 255, 0.95));
    margin: 0 0 clamp(24px, 3vw, 36px);
    max-width: 900px;
}

.capability-page-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.capability-page-tag {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-light, rgba(255, 255, 255, 0.14));
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: clamp(0.78rem, 0.9vw, 0.88rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-color, rgba(255, 255, 255, 0.85));
}

body.day-mode .capability-page-tag,
body.light-theme .capability-page-tag {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

/* WHY BNANA Manifesto Block */
.capability-why-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light, rgba(255, 255, 255, 0.12));
    border-radius: 24px;
    padding: clamp(32px, 5vw, 60px);
    margin-bottom: clamp(60px, 8vw, 100px);
    position: relative;
    overflow: hidden;
}

body.day-mode .capability-why-section,
body.light-theme .capability-why-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.1);
}

.capability-why-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: clamp(20px, 3vw, 32px);
}

.capability-why-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    white-space: nowrap;
}

.capability-why-line {
    height: 1px;
    background: var(--border-light, rgba(255, 255, 255, 0.12));
    width: 100%;
}

.capability-why-text {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 1.8vw, 1.7rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-color, #ffffff);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Works Grid in Capability View */
.capability-works-section {
    margin-bottom: clamp(60px, 8vw, 100px);
}

.capability-works-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(30px, 4vw, 45px);
    border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
    padding-bottom: 18px;
}

.capability-works-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
}

.capability-works-count {
    font-family: var(--font-heading), monospace;
    font-size: 0.82rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    letter-spacing: 0.1em;
}

/* Footer CTA */
.capability-page-footer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding-top: clamp(30px, 4vw, 50px);
    border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
}

/* ==========================================================================
   FilmLaab Cinematic Services Showcase
   ========================================================================== */
.services-cinematic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    width: 100%;
}

.service-cinematic-card {
    display: flex;
    flex-direction: column;
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    cursor: pointer;
}

.service-cinematic-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.85);
}

.service-cinematic-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #030303;
}

.service-cinematic-video,
.service-cinematic-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-cinematic-card:hover .service-cinematic-video,
.service-cinematic-card:hover .service-cinematic-img {
    transform: scale(1.06);
}

.service-cinematic-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.2) 60%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.service-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    z-index: 2;
}

.service-cinematic-info {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #080808;
    position: relative;
    z-index: 2;
}

.service-cinematic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.service-cinematic-title {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.01em;
}

.service-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.35s ease, color 0.35s ease;
    flex-shrink: 0;
}

.service-cinematic-card:hover .service-arrow-icon {
    transform: translate(3px, -3px);
    color: #ffffff;
}

.service-cinematic-desc {
    font-family: var(--font-body);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--fg-secondary);
    margin-bottom: 16px;
    flex-grow: 1;
}

.service-cinematic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.service-cinematic-tags span {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: var(--fg-secondary);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.service-cinematic-card:hover .service-cinematic-tags span {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.services-spec-strip {
    margin-top: 50px;
    padding: 18px 24px;
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.services-spec-item {
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

.services-spec-item span.spec-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--accent, #ffffff);
    display: inline-block;
}

/* Responsive adjustments for Services Showcase */
@media (max-width: 1100px) {
    .services-cinematic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

@media (max-width: 768px) {
    .services-statement-section {
        padding-bottom: 40px;
    }
    .services-cinematic-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .service-cinematic-card {
        border-radius: 16px;
    }
    .service-cinematic-title {
        font-size: 1.15rem;
    }
    .service-cinematic-info {
        padding: 20px 18px 22px;
    }
}

/* ==========================================================================
   FilmLaab Cinematic People Section & Filmmakers Roster
   ========================================================================== */
.people-section {
    padding: 120px 0 100px 0;
    background-color: #000000;
    width: 100%;
}

.people-statement-section {
    padding: 0 0 70px 0;
}

.people-roster-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    width: 100%;
    margin-bottom: 48px;
}

.people-leader-card {
    display: flex;
    flex-direction: column;
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.people-leader-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.85);
}

.people-leader-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background-color: #030303;
}

.people-leader-img,
.people-leader-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.people-leader-card:hover .people-leader-img,
.people-leader-card:hover .people-leader-video {
    transform: scale(1.05);
}

.people-leader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(8, 8, 8, 0.95) 0%, rgba(8, 8, 8, 0.2) 60%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

.people-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    z-index: 2;
}

.people-leader-info {
    padding: 26px 26px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #080808;
}

.people-leader-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.people-leader-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.people-leader-role {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fg-accent, #e5e5e5);
    letter-spacing: 0.02em;
}

.people-leader-desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--fg-secondary);
    margin-bottom: 22px;
    flex-grow: 1;
}

.people-leader-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.people-leader-tags span {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: var(--fg-secondary);
    transition: all 0.3s ease;
}

.people-leader-card:hover .people-leader-tags span {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.people-disciplines-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .people-roster-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .people-section {
        padding: 80px 0 60px 0;
    }
    .people-statement-section {
        padding-bottom: 40px;
    }
    .people-leader-info {
        padding: 20px 20px 24px;
    }
    .people-leader-name {
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   Comprehensive Adaptive & Responsive System
   Intelligently scales grids, typography, overlays, videos, and navigation
   across mobile, tablet, laptop, desktop, ultra-wide, and landscape displays.
   ========================================================================== */

/* 1. Global Box Sizing & Fluid Constraints */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

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

/* 2. Navigation & Header Fluid Adaptation */
.header {
    height: clamp(62px, 6.5vh, 86px);
}

.header.scrolled {
    height: clamp(58px, 6vh, 76px);
}

.header-container {
    padding: 0 clamp(16px, 4vw, 56px);
    max-width: 1600px;
}

.logo-image {
    height: clamp(28px, 3.2vw, 40px);
    max-width: clamp(96px, 14vw, 150px);
}

.nav {
    gap: clamp(14px, 2.2vw, 40px);
}

.nav-link {
    font-size: clamp(0.75rem, 0.9vw, 0.88rem);
    letter-spacing: clamp(0.06em, 0.1vw, 0.12em);
}

@media (max-width: 960px) {
    .nav {
        display: none !important;
    }
    .mobile-menu-btn {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
}

@media (max-height: 520px) {
    .header {
        height: 52px;
    }
    .header.scrolled {
        height: 46px;
    }
    .clapper-slate-header {
        margin-bottom: 8px;
    }
    .clapper-top-arm {
        height: 18px;
    }
    .clapper-slate-board {
        padding: 6px 10px;
    }
    .mobile-nav {
        gap: 6px;
    }
    .mobile-nav-link {
        padding: 6px 10px;
    }
    .mobile-nav-text {
        font-size: 1.2rem;
    }
}

/* 3. Hero Section Fluid Scaling & Viewport Height Protection */
.hero-section {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    height: auto;
    padding: clamp(90px, 12vh, 140px) clamp(16px, 6vw, 8%) clamp(40px, 6vh, 80px);
}

.hero-content {
    max-width: 900px;
    width: 100%;
}

.hero-title {
    font-size: clamp(2.2rem, 7.8vw, 8rem);
    line-height: 1.05;
    word-break: normal;
    overflow-wrap: break-word;
}

.hero-subheading {
    font-size: clamp(1.05rem, 2.2vw, 1.65rem);
    line-height: 1.35;
    margin-bottom: clamp(4px, 0.8vw, 8px);
}

.hero-subtitle {
    font-size: clamp(0.82rem, 1.1vw, 0.98rem);
    line-height: 1.55;
    max-width: min(1050px, 100%);
    text-wrap: balance;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 2vw, 20px);
}

.btn {
    padding: clamp(12px, 1.6vw, 16px) clamp(22px, 2.8vw, 32px);
    font-size: clamp(0.78rem, 1vw, 0.85rem);
    touch-action: manipulation;
}

@media (max-height: 700px) {
    .hero-section {
        min-height: 520px;
        padding-top: 80px;
        padding-bottom: 30px;
    }
    .hero-scroll-indicator {
        display: none !important;
    }
    .hero-title {
        font-size: clamp(2rem, 6vw, 4.5rem);
        margin-bottom: 14px;
    }
    .hero-subtitle {
        font-size: clamp(0.88rem, 1.4vw, 1.1rem);
        margin-bottom: 24px;
    }
}

/* 4. WORK Section Intelligent Reflow */
.work-portfolio-wrapper {
    padding: clamp(60px, 9vw, 120px) clamp(16px, 5vw, 5%) clamp(40px, 6vw, 80px);
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.work-portfolio-header {
    gap: clamp(16px, 3vw, 32px);
    margin-bottom: clamp(28px, 4.5vw, 56px);
}

.work-category-headline-wrapper {
    max-width: 100%;
    width: 100%;
}

.work-category-headline {
    font-size: clamp(1.15rem, 2.2vw, 2.1rem);
    line-height: 1.34;
    gap: clamp(6px, 1vw, 10px) clamp(8px, 1.4vw, 16px);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.work-cat-item {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 4px 2px;
    touch-action: manipulation;
}

@media (min-width: 1101px) {
    .work-grid {
        column-count: 3;
        column-gap: clamp(20px, 1.8vw, 28px);
        width: 100%;
    }
}

@media (max-width: 1100px) and (min-width: 641px) {
    .work-grid {
        column-count: 2;
        column-gap: 20px;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .work-grid {
        column-count: 1;
        column-gap: 16px;
        width: 100%;
    }
    .work-card {
        margin-bottom: 16px;
    }
}

.work-card {
    margin-bottom: clamp(16px, 1.8vw, 24px);
    border-radius: clamp(12px, 1.5vw, 16px);
    width: 100%;
}

.work-card-meta {
    bottom: clamp(12px, 1.6vw, 18px);
    left: clamp(12px, 1.6vw, 18px);
    right: clamp(12px, 1.6vw, 18px);
}

.work-card-client {
    font-size: clamp(0.78rem, 1vw, 0.84rem);
}

.work-card-title {
    font-size: clamp(0.7rem, 0.9vw, 0.76rem);
}

@media (max-width: 768px) {
    .work-list-item {
        grid-template-columns: 1fr auto;
        grid-template-areas: 
            "title arrow"
            "meta arrow";
        row-gap: 6px;
        column-gap: 12px;
        padding: 16px 12px;
    }
    .work-list-title {
        grid-area: title;
        font-size: 1.1rem;
    }
    .work-list-cat {
        grid-area: meta;
    }
    .work-list-year {
        display: inline-block;
        margin-left: 8px;
    }
    .work-list-arrow {
        grid-area: arrow;
    }
}

/* 5. Capabilities Section Fluid Scaling */
.capabilities-section {
    padding: clamp(80px, 10vw, 150px) 0 clamp(90px, 11vw, 160px);
    width: 100%;
}

.capabilities-container,
.capabilities-stage {
    padding: 0 clamp(20px, 5vw, 6%);
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* 6. Philosophy & Manifesto Statement */
.filmlaab-statement-section {
    padding: clamp(60px, 8vw, 100px) clamp(16px, 6%, 80px) clamp(70px, 9vw, 110px);
    width: 100%;
}

.filmlaab-statement-grid {
    gap: clamp(32px, 5vw, 80px);
    width: 100%;
    max-width: 1400px;
}

@media (max-width: 900px) {
    .filmlaab-statement-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.filmlaab-statement-col p {
    font-size: clamp(0.95rem, 1.15vw, 1.18rem);
    line-height: 1.8;
}

.filmlaab-statement-col .filmlaab-punchline {
    font-size: clamp(1.08rem, 1.3vw, 1.3rem);
}

/* 7. Process Orbit Dial & Stage Deck */
.filmlaab-process-section {
    padding: clamp(70px, 9vw, 120px) clamp(16px, 6%, 80px) clamp(80px, 10vw, 140px);
    width: 100%;
}

.filmlaab-process-container {
    width: 100%;
    max-width: 1400px;
}

@media (min-width: 1101px) {
    .process-orbit-stage {
        grid-template-columns: min(460px, 36vw) 1fr;
        gap: clamp(32px, 4vw, 60px);
        align-items: center;
    }
}

@media (max-width: 1100px) {
    .process-orbit-stage {
        grid-template-columns: 1fr;
        gap: 40px;
        justify-items: center;
    }
}

@media (max-width: 600px) {
    .process-orbit-dial-wrapper {
        min-height: auto;
        padding: 10px 0;
        width: 100%;
    }
    .process-circle-dial {
        width: min(320px, 86vw);
        height: min(320px, 86vw);
    }
    .process-shutter-center {
        width: min(150px, 42vw);
        height: min(150px, 42vw);
    }
    .shutter-active-num {
        font-size: clamp(2rem, 7vw, 3.2rem);
    }
    .shutter-phase-name {
        font-size: clamp(0.62rem, 2vw, 0.72rem);
        max-width: min(130px, 35vw);
    }
    .orbit-node {
        width: clamp(36px, 8vw, 42px);
        height: clamp(36px, 8vw, 42px);
        font-size: clamp(0.7rem, 2vw, 0.78rem);
    }
}

.process-phase-display-deck {
    padding: clamp(20px, 4vw, 48px);
    border-radius: clamp(16px, 2.5vw, 28px);
    width: 100%;
    box-sizing: border-box;
}

.stage-title {
    font-size: clamp(1.5rem, 3.2vw, 2.8rem);
}

.stage-desc {
    font-size: clamp(0.92rem, 1.2vw, 1.2rem);
    max-width: 100%;
}

.stage-deliverables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(10px, 1.5vw, 18px);
    width: 100%;
}

/* 8. People Roster & Services */
.services-cinematic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(18px, 2vw, 28px);
    width: 100%;
}

.people-roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(20px, 2.5vw, 32px);
    width: 100%;
}

.filmlaab-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    gap: clamp(16px, 2vw, 28px);
    width: 100%;
}

.filmlaab-team-card {
    width: 100%;
}

/* 9. Footer & Video Quote Banner */
.footer-quote-video-banner {
    padding: 0 clamp(16px, 5vw, 70px) clamp(24px, 3.5vh, 40px);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto clamp(36px, 5vh, 56px);
}

.footer-quote-video-wrap {
    min-height: 200px;
    height: clamp(220px, 32vw, 420px);
    border-radius: clamp(12px, 2vw, 20px);
    width: 100%;
}

.footer-quote-title {
    font-size: clamp(1.35rem, 3.6vw, 3.2rem);
    line-height: 1.18;
}

.footer-quote-sub {
    font-size: clamp(0.85rem, 1.2vw, 1.15rem);
    line-height: 1.45;
}


/* 10. Case Study Overlays & YouTube Embed Responsiveness */
.case-study-overlay,
.about-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
}

.close-overlay-btn,
.close-about-btn {
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.case-study-hero {
    min-height: 280px;
    height: clamp(280px, 50vh, 680px);
    width: 100%;
    padding: 0 clamp(16px, 6%, 80px) clamp(30px, 5vw, 80px);
}

.case-study-content {
    padding: clamp(36px, 6vw, 90px) clamp(16px, 6%, 60px);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.case-study-title {
    font-size: clamp(2rem, 6vw, 5rem);
}

.case-study-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: clamp(14px, 2vw, 28px);
    width: 100%;
}

.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(14px, 2.5vw, 40px);
    width: 100%;
}

@media (max-width: 768px) {
    .gallery-item {
        grid-column: span 12 !important;
    }
}

.gallery-item iframe,
.gallery-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: inherit;
    border: none;
}

/* 11. Touch Pointer Adaptation */
@media (hover: none), (pointer: coarse) {
    .custom-cursor {
        display: none !important;
    }
    * {
        cursor: auto !important;
    }
}

/* ==========================================================================
   Refined BNANA Originals, Fullwidth Video Banner, Modals & Form Shuttle
   ========================================================================== */

/* 1. Refined BNANA Originals Cards */
.original-card {
    border-radius: clamp(18px, 1.8vw, 24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    background-color: #070707;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.45s ease !important;
}

.original-card:hover {
    transform: translateY(-5px) scale(1.012) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 25px rgba(255, 255, 255, 0.05) !important;
}

.original-card .original-video {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
    filter: none !important;
}

.original-card:hover .original-video {
    transform: scale(1.04);
}

.original-card[data-project="pen-fight-club"]:hover .original-video {
    transform: scale(1.22) !important;
}

.original-title-bold {
    font-family: var(--font-headline, 'Geist', sans-serif);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #ffffff;
}

.original-title-sub {
    font-size: clamp(0.78rem, 0.9vw, 0.88rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.35;
}

/* 2. Full-Screen Viewport Footer Video Banner (GREY) */
.footer-quote-video-banner.fullwidth-video-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #000000;
}

.footer-quote-video-banner.fullwidth-video-banner .footer-quote-video-wrap {
    width: 100% !important;
    height: clamp(340px, 48vw, 680px) !important;
    min-height: 320px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
}

.footer-quote-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 125vw;
    height: 125vh;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: none;
    opacity: 0.85;
    filter: brightness(0.68) contrast(1.15);
}

.footer-quote-video-banner.fullwidth-video-banner:hover .footer-quote-iframe {
    opacity: 0.95;
    filter: brightness(0.78) contrast(1.18);
}

/* 3. Dedicated BNANA Originals Film Modal */
/* 3. Dedicated BNANA Originals Film Modal (Minimal Cinema Experience) */
.original-film-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(4, 4, 4, 0.94);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.44s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.44s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-overflow-scrolling: touch;
    cursor: default;
    padding: clamp(24px, 4vw, 52px) clamp(16px, 3.5vw, 36px);
}

.original-film-modal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.original-film-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: transparent;
    cursor: pointer;
}

.original-film-modal-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 980px;
    margin: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.original-film-modal.is-active .original-film-modal-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.original-film-modal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 8px;
}

.original-film-back-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-headline, 'Geist', sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.original-film-back-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    transform: translateX(-3px);
}

.original-film-modal-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.original-film-modal-close:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: rotate(90deg) scale(1.05);
}

/* 1. Main Cinema Video Player */
.original-film-player-wrap {
    width: 100%;
    border-radius: clamp(10px, 1.2vw, 16px);
    overflow: hidden;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 255, 255, 0.02);
    margin-bottom: 18px;
    position: relative;
}

.original-film-player-aspect {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Cinema Aspect Ratio */
    background: #000000;
}

.original-film-player-aspect iframe,
.original-film-player-aspect video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #000000;
    object-fit: contain;
}

/* 2. Minimal Film Info & 2-Line Synopsis */
.original-film-info-minimal {
    padding: 6px 4px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.original-film-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.original-film-modal-title {
    font-family: var(--font-headline, 'Geist', sans-serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.original-film-modal-type {
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.original-film-synopsis {
    font-size: clamp(0.92rem, 1.05vw, 1rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 820px;
}

/* Focused Card Smooth Forward Transition */
.originals-tunnel-stage.is-tunnel-focusing .originals-tunnel-card:not(.is-selected-film) {
    opacity: 0.14 !important;
    filter: blur(10px) brightness(0.35) !important;
    transform: scale(0.86) !important;
    transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 0.38s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
}

.originals-flow-card.originals-tunnel-card.is-selected-film,
.originals-flow-card.originals-tunnel-card.is-expanding-to-view {
    transform: scale(1.18) translateZ(90px) !important;
    filter: blur(0px) brightness(1.12) !important;
    opacity: 1 !important;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 0.38s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10000 !important;
}

/* Ensure custom cursor dot is hidden in Originals View All and Film Modal */
.originals-view-all-section ~ .custom-cursor,
.original-film-modal ~ .custom-cursor,
.original-film-modal.is-active ~ .custom-cursor,
body:has(.originals-view-all-section) .custom-cursor,
body:has(#originals-gallery-view) .custom-cursor,
body:has(.original-film-modal.is-active) .custom-cursor {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 4. Dedicated Capability Modal */
.capability-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.capability-modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

.capability-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 3, 3, 0.92);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}

.capability-modal-container {
    position: relative;
    z-index: 2;
    width: min(840px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: clamp(18px, 2vw, 28px);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.9);
    padding: clamp(32px, 5vw, 60px);
}

.capability-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.capability-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg) scale(1.05);
}

.capability-modal-tag {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #f59e0b;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px;
}

.capability-modal-title {
    font-family: var(--font-headline, 'Geist', sans-serif);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0;
}

.capability-modal-statement {
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    margin: 18px 0 20px;
    line-height: 1.35;
}

.capability-modal-copy {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 36px;
    max-width: 640px;
}

.capability-modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* 5. Contact Form Shuttle Streak Animation & Confirmation State */

.btn-shuttle-streak {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), #f59e0b, transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
}

.form-submit-btn.is-shuttle-launching .btn-shuttle-streak {
    opacity: 1;
    animation: shuttleStreak 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes shuttleStreak {
    0% {
        left: -80%;
    }
    100% {
        left: 140%;
    }
}

.form-shuttle-streak {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #ffffff, #f59e0b);
    border-radius: 2px;
    margin-bottom: 24px;
    animation: shuttleLinePulse 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shuttleLinePulse {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    50% {
        transform: scaleX(1);
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        opacity: 0.7;
    }
}

.form-success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(36px, 5vw, 64px) 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.form-success-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(76, 217, 100, 0.15);
    border: 1px solid rgba(76, 217, 100, 0.4);
    color: #4cd964;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.form-success-headline {
    font-family: var(--font-headline, 'Geist', sans-serif);
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0 0 10px;
}

.form-success-subline {
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    color: rgba(255, 255, 255, 0.7);
    max-width: 480px;
    margin: 0 0 24px;
    line-height: 1.5;
}

.form-success-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #f59e0b;
    text-transform: uppercase;
}

/* ==========================================================================
   BNANA ORIGINALS → VIEW ALL (Minimal 3D Cinematic Image Tunnel)
   ========================================================================== */
.originals-view-all-section {
    padding: clamp(100px, 12vh, 140px) 20px 60px;
    background-color: var(--bg-primary);
    position: relative;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* 1. Minimal Header (Title only) */
.originals-minimal-header {
    text-align: center;
    margin: 0 auto clamp(30px, 5vh, 50px) auto;
    max-width: 900px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
    pointer-events: none;
}

.originals-minimal-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.05;
    animation: originalsTitleFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* 2. 3D Cylindrical Tunnel Viewport & Stage */
.originals-tunnel-viewport {
    position: relative;
    width: 100%;
    height: clamp(520px, 64vh, 760px);
    max-width: 1600px;
    margin: 0 auto;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.originals-tunnel-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    cursor: grab;
    will-change: transform;
}

.originals-tunnel-stage:active {
    cursor: grabbing;
}

/* 3. 3D Tunnel Film Cards */
.originals-flow-card.originals-tunnel-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(230px, 20vw, 300px);
    aspect-ratio: 16 / 9;
    margin-left: calc(clamp(230px, 20vw, 300px) * -0.5);
    margin-top: calc(clamp(230px, 20vw, 300px) * (9 / 16) * -0.5);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 9px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, filter, opacity;
    pointer-events: auto;
    cursor: pointer;
    transition: 
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.originals-flow-media {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 9px;
    overflow: hidden !important;
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.originals-flow-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    transform: scale(1.002);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.originals-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(12, 12, 12, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0.85;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.3s ease, 
                background 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.35s ease;
    pointer-events: none;
    z-index: 4;
}

.originals-play-badge svg {
    margin-left: 2px;
    width: 18px;
    height: 18px;
    fill: #ffffff;
    transition: transform 0.3s ease;
}

.originals-flow-meta {
    padding: 6px 2px 0 2px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.originals-flow-title {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
    opacity: 0.88;
    transition: opacity 0.3s ease;
}

/* 4. Center Highlight / Active Card */
.originals-tunnel-card.is-tunnel-center .originals-flow-media,
.originals-tunnel-card:hover .originals-flow-media {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.65);
}

.originals-tunnel-card.is-tunnel-center .originals-flow-img,
.originals-tunnel-card:hover .originals-flow-img {
    transform: scale(1.04);
}

.originals-tunnel-card.is-tunnel-center .originals-play-badge,
.originals-tunnel-card:hover .originals-play-badge {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.28), 0 8px 28px rgba(0, 0, 0, 0.65);
}

.originals-tunnel-card:active .originals-play-badge {
    transform: translate(-50%, -50%) scale(0.95);
}

.originals-tunnel-card.is-tunnel-center .originals-flow-title,
.originals-tunnel-card:hover .originals-flow-title {
    opacity: 1;
}

/* Responsive Scaling */
@media (max-width: 768px) {
    .originals-view-all-section {
        padding: 90px 16px 40px;
    }
    .originals-minimal-header {
        margin-bottom: 25px;
    }
    .originals-minimal-title {
        font-size: 2.2rem;
    }
    .originals-tunnel-viewport {
        height: clamp(440px, 60vh, 560px);
        perspective: 750px;
    }
    .originals-flow-card.originals-tunnel-card {
        width: clamp(190px, 48vw, 240px);
        margin-left: calc(clamp(190px, 48vw, 240px) * -0.5);
        margin-top: calc(clamp(190px, 48vw, 240px) * (9 / 16) * -0.5);
    }
}

/* 5. Two-Row Compact Square Archive Grid Below 3D Tunnel */
.originals-archive-section {
    width: 100%;
    max-width: 1280px;
    margin: clamp(40px, 6vh, 60px) auto 0 auto;
    padding: 0 clamp(16px, 3vw, 32px);
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.originals-archive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.originals-archive-label {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    opacity: 0.88;
}

.originals-archive-count {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    opacity: 0.6;
}

.originals-two-row-grid,
.originals-two-col-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 14px 10px;
    width: 100%;
    box-sizing: border-box;
}

.originals-square-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: transform 0.25s ease, opacity 0.25s ease;
    min-width: 0;
}

.originals-square-card:hover {
    transform: translateY(-3px);
}

.originals-square-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.originals-square-card:hover .originals-square-media {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

.originals-square-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    transform: scale(1.002);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.originals-square-card:hover .originals-square-img {
    transform: scale(1.06);
}

.originals-square-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.originals-square-card:hover .originals-square-overlay {
    opacity: 1;
}

.originals-square-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(12, 12, 12, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.originals-square-play-badge svg {
    margin-left: 2px;
    width: 11px;
    height: 11px;
    fill: #ffffff;
}

.originals-square-card:hover .originals-square-play-badge {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.85);
}

.originals-square-info {
    padding: 6px 1px 0 1px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.originals-square-title {
    font-family: var(--font-heading);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.originals-square-type {
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    opacity: 0.65;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

@media (max-width: 1024px) {
    .originals-two-row-grid,
    .originals-two-col-grid {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(8, minmax(105px, 1fr));
        overflow-x: auto;
        padding-bottom: 12px;
        gap: 12px 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .originals-two-row-grid::-webkit-scrollbar,
    .originals-two-col-grid::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 480px) {
    .originals-archive-section {
        max-width: 100%;
        padding: 0 12px;
        margin-top: 32px;
    }
    .originals-two-row-grid,
    .originals-two-col-grid {
        grid-template-columns: repeat(8, minmax(90px, 1fr));
        gap: 10px 8px;
    }
    .originals-square-play-badge {
        width: 24px;
        height: 24px;
    }
    .originals-square-play-badge svg {
        width: 9px;
        height: 9px;
    }
    .originals-square-title {
        font-size: 8.5px;
    }
    .originals-square-type {
        font-size: 7.5px;
    }
}

/* 6. Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
    .originals-minimal-title {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .originals-tunnel-viewport {
        height: auto !important;
        perspective: none !important;
        overflow: visible !important;
    }
    .originals-tunnel-stage {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        gap: 20px !important;
        transform: none !important;
        cursor: default !important;
    }
    .originals-flow-card.originals-tunnel-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   ABOUT SPACE — CREATIVE REFINEMENTS, OUR PROCESS, TRUSTED BY & SAMAY QUOTE
   ========================================================================== */

/* Section Headers & Badges in About */
.about-section-header {
    margin-bottom: 40px;
}

.about-section-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    display: inline-block;
    margin-bottom: 12px;
}

/* Creative Narrative Statements */
.filmlaab-statement-tag {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    display: block;
    margin-bottom: 12px;
}

.filmlaab-statement-lead {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(1.22rem, 2.0vw, 1.78rem) !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    line-height: 1.52 !important;
    margin: 0 !important;
    letter-spacing: -0.015em !important;
    text-align: left !important;
    max-width: 1350px !important;
}

.services-statement-lead {
    font-size: clamp(1.22rem, 2.0vw, 1.78rem) !important;
    line-height: 1.52 !important;
    max-width: 1350px !important;
    text-align: left !important;
    margin: 0 !important;
}

/* 4. About Our Process Section (5 Deliberate Stages) */
.about-process-section {
    width: 100%;
    background-color: #000000;
    padding: 120px 6% 130px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.about-process-container {
    max-width: 1400px;
    margin: 0 auto;
}

.about-process-header {
    max-width: 650px;
    margin-bottom: 56px;
}

.about-process-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 12px;
}

.about-process-subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.15vw, 1.15rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.55;
    margin: 0;
}

.about-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.about-process-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 310px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
}

.about-process-card:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.035);
    transform: translateY(-4px);
}

.about-process-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.about-process-num {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.22);
    letter-spacing: -0.03em;
    transition: color 0.3s ease;
}

.about-process-card:hover .about-process-num {
    color: #ffffff;
}

.about-process-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.about-process-card:hover .about-process-dot {
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.about-process-name {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 12px;
}

.about-process-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    margin: 0 0 24px;
    font-weight: 300;
}

.about-process-tag {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.35);
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    align-self: flex-start;
    margin-top: auto;
}

/* 5. About Trusted By Section */
.about-clients-section {
    width: 100%;
    background: #000000;
    padding: 100px 6% 110px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    text-align: center;
}

.about-clients-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about-clients-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center !important;
    margin: 0 auto 44px !important;
    width: 100%;
    display: block;
}

/* 6. Samay Visual Showcase + Cinematic Quote + Glowing Connect Button */
.about-quote-visual-section {
    position: relative;
    width: 100%;
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 120px 6%;
    background: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.about-quote-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.about-quote-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    filter: brightness(0.38) contrast(1.18) saturate(0.92);
    transform: scale(1.03);
    animation: cinematicSlowZoom 22s ease-in-out infinite alternate;
}

.about-quote-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 72%, #000000 100%);
}

.about-quote-flare {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(280px, 60vw, 700px);
    max-width: 100%;
    height: clamp(100px, 20vw, 180px);
    background: radial-gradient(ellipse at center, rgba(120, 190, 255, 0.14) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    filter: blur(35px);
}

.about-quote-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.045'/%3E%3C/svg%3E");
    pointer-events: none;
}

.about-quote-content {
    position: relative;
    z-index: 3;
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-quote-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 20px;
    border-radius: 40px;
    margin-bottom: 28px;
    backdrop-filter: blur(12px);
}

.badge-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px #ffffff;
    animation: pulseBeacon 2s infinite ease-in-out;
}

.about-quote-text {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    font-weight: 500;
    line-height: 1.28;
    color: #ffffff;
    margin: 0 0 18px;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 30px rgba(0,0,0,0.85);
}

.about-quote-subtext {
    font-family: var(--font-body);
    font-size: clamp(0.92rem, 1.15vw, 1.1rem);
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 40px;
    font-weight: 300;
    letter-spacing: 0.02em;
}

.about-connect-cta-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   ULTRA-SMOOTH GLOWING OUTLINE CONNECT BUTTON
   ========================================================================== */
@property --glow-deg {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes rotateGlow {
    0% { --glow-deg: 0deg; }
    100% { --glow-deg: 360deg; }
}

@keyframes cinematicSlowZoom {
    0% { transform: scale(1.02); }
    100% { transform: scale(1.08); }
}

@keyframes pulseBeacon {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.7); }
}

.btn-glow-connect {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    isolation: isolate;
    overflow: visible;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-glow-connect:hover {
    transform: translateY(-3px) scale(1.02);
}

.btn-glow-connect:active {
    transform: translateY(0) scale(0.98);
}

/* Sharp Rotating Luminous Border Outline */
.glow-border-effect {
    position: absolute;
    inset: -1.5px;
    border-radius: 50px;
    background: conic-gradient(from var(--glow-deg, 0deg) at 50% 50%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,1) 25%, rgba(140,215,255,0.95) 50%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0.05) 100%);
    animation: rotateGlow 4s linear infinite;
    z-index: -1;
    pointer-events: none;
}

/* Outer Diffused Glowing Light Field */
.glow-surface-light {
    position: absolute;
    inset: -6px;
    border-radius: 60px;
    background: conic-gradient(from var(--glow-deg, 0deg) at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 25%, rgba(130,210,255,0.55) 50%, rgba(255,255,255,0) 100%);
    filter: blur(12px);
    opacity: 0.55;
    animation: rotateGlow 4s linear infinite;
    z-index: -2;
    pointer-events: none;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.btn-glow-connect:hover .glow-surface-light {
    opacity: 0.95;
    filter: blur(18px);
}

/* Inner Pill Core */
.btn-glow-content {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 44px;
    background: #080808;
    border-radius: 48px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.btn-glow-connect:hover .btn-glow-content {
    background: #0f0f0f;
    border-color: rgba(255, 255, 255, 0.28);
}

.btn-glow-text {
    font-family: var(--font-heading);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffffff;
}

.btn-glow-icon {
    color: #ffffff;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-glow-connect:hover .btn-glow-icon {
    transform: translateX(5px);
}

/* Responsive Rules for About Space */
@media (max-width: 1100px) {
    .about-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .about-process-section {
        padding: 80px 6% 90px;
    }

    .about-process-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .about-process-card {
        min-height: auto;
        padding: 24px 20px;
    }

    .about-clients-section {
        padding: 70px 6% 80px;
    }

    .about-quote-visual-section {
        min-height: 65vh;
        padding: 80px 6%;
    }

    .btn-glow-content {
        padding: 14px 34px;
    }

    .btn-glow-text {
        font-size: 0.78rem;
    }
}

/* ==========================================================================
   Outer Ring Draggable Styling for Our Process
   ========================================================================== */
.process-dial-assembly {
    touch-action: none;
}

.process-dial-assembly.is-draggable {
    cursor: grab;
}

.process-dial-assembly.is-dragging {
    cursor: grabbing;
}

.about-process-thumb {
    width: 100%;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 18px;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.about-process-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.72) contrast(1.1);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.about-process-card:hover .about-process-img {
    filter: grayscale(20%) brightness(0.9) contrast(1.05);
    transform: scale(1.04);
}

/* ==========================================================================
   SAMAY Video Section (Immediately Preceding Footer)
   ========================================================================== */
.samay-footer-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.samay-video-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.samay-bg-video,
.samay-youtube-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(1.04);
    border: none;
    pointer-events: none;
    filter: brightness(0.72) contrast(1.15) saturate(1.05);
}

.samay-video-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0.88) 100%);
    pointer-events: none;
}

.samay-video-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.95), inset 0 0 200px rgba(0, 0, 0, 0.85);
    pointer-events: none;
}

.samay-video-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.35;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.samay-content-stage {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(24px, 5vw, 60px);
    pointer-events: auto;
}

.samay-benchmark-title {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-shadow: 0 4px 36px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.85);
    margin: 0 0 clamp(28px, 4.2vh, 44px) 0;
    max-width: 920px;
}

.samay-cta-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.samay-connect-btn {
    padding: 18px 52px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ==========================================================================
   BECOME A BNANA Section & Button
   ========================================================================== */
.become-bnana-section {
    padding: clamp(50px, 7vh, 80px) 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: clamp(40px, 6vh, 60px);
}

.become-bnana-container {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.5vh, 26px);
}

.become-bnana-title {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
}

.become-bnana-desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.92rem, 1.1vw, 1.05rem);
    font-weight: 350;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 580px;
}

.become-bnana-cta-wrap {
    margin-top: 10px;
}

.btn-be-a-bnana {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 18px 48px;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(20px) saturate(190%);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 9999px;
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden !important;
    isolation: isolate;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15),
                0 0 40px rgba(255, 255, 255, 0.08),
                0 8px 32px 0 rgba(0, 0, 0, 0.4);
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease,
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.4s ease,
                color 0.3s ease;
    z-index: 1;
}

.btn-be-a-bnana > * {
    position: relative;
    z-index: 3;
}

/* Continuous Rotating Outer Luminous Beam (matching LET'S BUILD) */
.btn-be-a-bnana::after {
    content: '';
    position: absolute;
    top: -200%;
    left: -100%;
    width: 300%;
    height: 500%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent 190deg,
        rgba(255, 255, 255, 0.03) 220deg,
        rgba(255, 255, 255, 0.12) 255deg,
        rgba(255, 255, 255, 0.35) 285deg,
        rgba(255, 255, 255, 0.7) 320deg,
        rgba(255, 255, 255, 0.95) 345deg,
        #ffffff 358deg,
        rgba(255, 255, 255, 0.4) 360deg
    );
    animation: rotateMovingBeam 4s linear infinite;
    transform-origin: center center;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.2));
    transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), animation-duration 0.4s ease;
}

/* Inner Core Mask (Leaves glowing perimeter channel) */
.btn-be-a-bnana::before {
    content: '';
    position: absolute;
    inset: 1.5px;
    border-radius: 9999px;
    background: rgba(12, 12, 12, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
    height: auto;
    width: auto;
    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-be-a-bnana-glow {
    display: none;
}

.btn-be-a-bnana:hover {
    color: #000000;
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8),
                0 0 30px rgba(255, 255, 255, 0.4),
                0 0 60px rgba(255, 255, 255, 0.2),
                0 8px 32px 0 rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

.btn-be-a-bnana:hover::before {
    background: #ffffff;
    background-color: #ffffff;
}

.btn-be-a-bnana:hover::after {
    animation-duration: 2.4s;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 35px rgba(255, 255, 255, 0.3));
}

@media (prefers-reduced-motion: reduce) {
    .btn-be-a-bnana::after {
        animation: none !important;
        transform: none !important;
        background: rgba(255, 255, 255, 0.3) !important;
    }
}

/* ==========================================================================
   PEOPLE SECTION REDESIGN: JOIN BNANA, OUR VALUE, LEADERSHIP
   ========================================================================== */
.people-statement-lead {
    max-width: 1350px !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(1.22rem, 2.0vw, 1.78rem) !important;
    line-height: 1.52 !important;
}

@media (max-width: 768px) {
    .people-statement-break {
        display: none;
    }
}

/* JOIN BNANA Section */
.join-bnana-section {
    padding: clamp(60px, 8vh, 100px) 6%;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background-color: #000000;
}

.join-bnana-container {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.join-bnana-title {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #ffffff;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.join-bnana-desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.98rem, 1.25vw, 1.15rem);
    font-weight: 350;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 auto clamp(28px, 4vh, 40px);
    max-width: 820px;
    text-align: center;
}

@media (max-width: 768px) {
    .join-desc-break {
        display: none;
    }
}

.join-bnana-media-wrap {
    width: 100%;
    max-width: 980px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 200, 80, 0.06);
    aspect-ratio: 16 / 9;
    margin-bottom: clamp(32px, 5vh, 48px);
    background: #0d0d0d;
}

.join-bnana-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
}

.join-bnana-media-wrap:hover .join-bnana-img {
    transform: scale(1.03);
}

/* OUR VALUE Section */
.people-values-section {
    padding: clamp(80px, 10vh, 130px) 6%;
    width: 100%;
    background-color: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.people-values-container {
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}

.people-values-eyebrow {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    display: block;
    margin-bottom: 12px;
}

.people-values-title {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 20px;
    text-transform: uppercase;
}

.people-values-desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 auto clamp(44px, 6vh, 64px);
    max-width: 820px;
}

@media (max-width: 768px) {
    .values-desc-break {
        display: none;
    }
}

.people-values-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    text-align: left;
}

@media (max-width: 1200px) {
    .people-values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .people-values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.people-value-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 30px 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.people-value-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 255, 255, 0.05);
}

.people-value-num {
    font-family: var(--font-heading, 'Geist', monospace);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.36);
    margin-bottom: 18px;
}

.people-value-name {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(1.15rem, 1.4vw, 1.32rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0 0 10px;
}

.people-value-detail {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.88rem;
    font-weight: 350;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* LEADERSHIP Section in People */
.people-leadership-section {
    padding: clamp(80px, 10vh, 120px) 6%;
    width: 100%;
    background-color: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.people-leadership-section .filmlaab-member-voice {
    display: none;
}

/* Leader Name Interactive Trigger */
.leader-name-trigger {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-align: left;
    display: inline-flex;
    align-items: center;
    transition: color 0.25s ease;
}

.leader-name-trigger:hover {
    color: #ffde59;
}

.leader-tap-badge {
    display: none !important;
}

/* Leader Bio Modal */
.leader-bio-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
}

.leader-bio-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.leader-bio-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.leader-bio-card {
    position: relative;
    z-index: 2;
    background: rgba(14, 14, 14, 0.96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 222, 89, 0.35);
    border-radius: 20px;
    padding: clamp(28px, 4vh, 40px);
    max-width: 540px;
    width: 100%;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.95),
                0 0 50px rgba(255, 222, 89, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: scale(0.92) translateY(12px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.leader-bio-modal.active .leader-bio-card {
    transform: scale(1) translateY(0);
}

.leader-bio-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.leader-bio-close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: scale(1.08);
}

.leader-bio-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.leader-bio-avatar-wrap {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 222, 89, 0.5);
    box-shadow: 0 0 20px rgba(255, 222, 89, 0.25);
}

.leader-bio-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.leader-bio-eyebrow {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 222, 89, 0.9);
    display: block;
    margin-bottom: 6px;
}

.leader-bio-name {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0 0 4px;
}

.leader-bio-role {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.leader-bio-voice {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.65;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 20px;
}

.leader-bio-footer {
    display: flex;
    justify-content: flex-end;
}

.leader-bio-tag {
    font-family: var(--font-heading, 'Geist', monospace);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

body.day-mode .join-bnana-section,
body.light-theme .join-bnana-section,
body.day-mode .people-leadership-section,
body.light-theme .people-leadership-section {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

body.day-mode .people-values-section,
body.light-theme .people-values-section {
    background-color: #f7f7f7;
    border-color: rgba(0, 0, 0, 0.08);
}

body.day-mode .join-bnana-title,
body.light-theme .join-bnana-title,
body.day-mode .people-values-title,
body.light-theme .people-values-title,
body.day-mode .people-value-name,
body.light-theme .people-value-name {
    color: #000000;
}

body.day-mode .join-bnana-desc,
body.light-theme .join-bnana-desc,
body.day-mode .people-values-desc,
body.light-theme .people-values-desc,
body.day-mode .people-value-detail,
body.light-theme .people-value-detail {
    color: rgba(0, 0, 0, 0.68);
}

body.day-mode .people-values-eyebrow,
body.light-theme .people-values-eyebrow,
body.day-mode .people-value-num,
body.light-theme .people-value-num {
    color: rgba(0, 0, 0, 0.4);
}

body.day-mode .people-value-card,
body.light-theme .people-value-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

body.day-mode .people-value-card:hover,
body.light-theme .people-value-card:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   BRAND TESTIMONIALS POPUP (TRUSTED BY SECTION HOVER INTERACTION)
   ========================================================================== */
.brand-testimonial-popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
    max-width: 440px;
    width: max-content;
    min-width: 320px;
    box-sizing: border-box;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}

.brand-testimonial-popup.active {
    opacity: 1;
    visibility: visible;
}

.testimonial-popup-inner {
    background: rgba(12, 12, 12, 0.96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    padding: 16px 20px 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95),
                0 0 35px rgba(255, 222, 89, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transform: scale(0.92);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-testimonial-popup.active .testimonial-popup-inner {
    transform: scale(1);
}

.testimonial-popup-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.testimonial-popup-brand {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
}

.testimonial-popup-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-heading);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #ffde59;
    text-transform: uppercase;
    background: rgba(255, 222, 89, 0.12);
    padding: 2px 7px;
    border-radius: 100px;
    border: 1px solid rgba(255, 222, 89, 0.25);
}

.testimonial-popup-badge svg {
    width: 9px;
    height: 9px;
}

.testimonial-popup-quotes {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    padding-left: 14px;
}

.testimonial-popup-quote-mark {
    position: absolute;
    top: -3px;
    left: 0;
    font-family: Georgia, serif;
    font-size: 1.4rem;
    line-height: 1;
    color: #ffde59;
    opacity: 0.9;
}

.testimonial-line-1,
.testimonial-line-2 {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
    letter-spacing: -0.005em;
}

.testimonial-line-1 {
    color: #ffffff;
}

.testimonial-line-2 {
    color: rgba(255, 255, 255, 0.85);
}

.testimonial-popup-author {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-top: 3px;
}

.testimonial-popup-arrow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(12, 12, 12, 0.96);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.brand-testimonial-popup.flipped .testimonial-popup-arrow {
    bottom: auto;
    top: -6px;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 600px) {
    .brand-testimonial-popup {
        max-width: calc(100vw - 32px);
        min-width: 280px;
    }
    .testimonial-line-1,
    .testimonial-line-2 {
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   OUR COLLECTIVE - People Section Trigger Card & Dedicated Overlay
   ========================================================================== */

/* People Section Card Trigger */
.people-collective-section {
    width: 100%;
    padding: clamp(30px, 4vh, 50px) 0 clamp(20px, 3vh, 30px);
}

.people-collective-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}

.people-collective-card {
    position: relative;
    background: radial-gradient(120% 120% at 50% 0%, rgba(30, 30, 30, 0.5) 0%, rgba(12, 12, 12, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: clamp(28px, 4vw, 44px);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    text-align: left;
    outline: none;
}

.people-collective-card:hover,
.people-collective-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 255, 255, 0.06);
}

.people-collective-card-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.people-collective-card:hover .people-collective-card-bg {
    opacity: 1;
}

.people-collective-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.people-collective-badge {
    display: inline-block;
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.people-collective-title {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0;
}

.people-collective-desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(1.02rem, 1.25vw, 1.18rem);
    line-height: 1.55;
    font-weight: 350;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 680px;
}

.people-collective-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    transition: gap 0.3s ease;
}

.people-collective-card:hover .people-collective-action {
    gap: 14px;
}

.people-collective-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease, transform 0.3s ease;
}

.people-collective-card:hover .people-collective-action-icon {
    background: #ffffff;
    color: #000000;
    transform: scale(1.08);
}

/* Dedicated Collective Overlay Page */
.collective-top-nav-bar {
    position: relative;
    z-index: 15;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px clamp(20px, 4vw, 60px) 0;
}

.collective-back-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.collective-back-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.collective-hero {
    margin-top: -30px;
}

.collective-hero-eyebrow {
    display: block;
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(0.72rem, 0.9vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

/* Collective Statement Section */
.collective-statement-section {
    padding: clamp(60px, 9vh, 100px) clamp(20px, 5vw, 60px);
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.collective-statement-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.collective-statement-lead {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(1.45rem, 2.6vw, 2.2rem);
    line-height: 1.4;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.collective-statement-sub {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.98rem, 1.2vw, 1.12rem);
    line-height: 1.7;
    font-weight: 350;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 820px;
}

/* Disciplines Grid */
.collective-disciplines-section {
    padding: 0 clamp(20px, 5vw, 60px) clamp(60px, 8vh, 100px);
    max-width: 1200px;
    margin: 0 auto;
}

.collective-disciplines-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .collective-disciplines-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.collective-discipline-card {
    background: rgba(18, 18, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: clamp(24px, 3.5vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.collective-discipline-card:hover {
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

.collective-card-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.collective-card-num {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.1em;
}

.collective-card-title {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.collective-card-desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.94rem;
    line-height: 1.65;
    font-weight: 350;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    flex-grow: 1;
}

.collective-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.collective-tag {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.75);
}

/* Join the Collective Section */
.collective-join-section {
    padding: clamp(60px, 8vh, 90px) clamp(20px, 5vw, 60px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: radial-gradient(50% 50% at 50% 0%, rgba(30, 30, 30, 0.4) 0%, transparent 100%);
    text-align: center;
}

.collective-join-container {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.collective-join-eyebrow {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.collective-join-title {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.collective-join-desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.96rem;
    line-height: 1.6;
    font-weight: 350;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 540px;
}

.collective-join-cta {
    margin-top: 10px;
}

/* ==========================================================================
   SERVICES OFFERINGS DIRECTORY (01 - 07)
   ========================================================================== */
.services-offerings-section {
    width: 100%;
    background-color: #000000;
    padding: clamp(40px, 6vh, 80px) 6% clamp(80px, 10vh, 120px);
}

.services-offerings-container {
    width: 100%;
    max-width: 1400px;
    margin: 0;
    text-align: left;
}

.services-offerings-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.service-offering-item {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: clamp(20px, 4vw, 60px);
    align-items: baseline;
    padding: clamp(28px, 4vh, 44px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    transition: padding-left 0.25s ease;
}

.service-offering-item:hover {
    padding-left: 8px;
}

.service-offering-title {
    font-family: var(--font-heading, 'Geist', sans-serif);
    font-size: clamp(1.2rem, 1.75vw, 1.55rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0;
    line-height: 1.35;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.service-offering-item:hover .service-offering-title {
    color: #ffde59;
}

.service-offering-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-offering-sub {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(1.02rem, 1.25vw, 1.18rem);
    font-weight: 450;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    margin: 0;
}

.service-offering-desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.92rem, 1.1vw, 1.02rem);
    font-weight: 350;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 768px) {
    .service-offering-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 0;
    }
    .service-offering-item:hover {
        padding-left: 0;
    }
}

body.day-mode .services-offerings-section,
body.light-theme .services-offerings-section {
    background-color: #ffffff;
}

body.day-mode .services-offerings-list,
body.light-theme .services-offerings-list,
body.day-mode .service-offering-item,
body.light-theme .service-offering-item {
    border-color: rgba(0, 0, 0, 0.09);
}

body.day-mode .service-offering-title,
body.light-theme .service-offering-title {
    color: #111111;
}

body.day-mode .service-offering-sub,
body.light-theme .service-offering-sub {
    color: rgba(0, 0, 0, 0.88);
}

body.day-mode .service-offering-desc,
body.light-theme .service-offering-desc {
    color: rgba(0, 0, 0, 0.58);
}

/* ==========================================================================
   UNIVERSAL SCREEN COMPATIBILITY & FLUID RESPONSIVE SYSTEM
   Provides seamless adaptation across all screen ratios (16:9, 16:10, 3:2,
   4:3, 5:4, 21:9, 32:9), viewports (320px up to 5120px+), orientations,
   short heights, and foldable devices.
   ZERO ELEMENT LOSS • ZERO REDESIGN • ONE LIQUID WEBSITE
   ========================================================================== */

/* 1. Universal Safe Area & Viewport Dynamic Resiliency */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
}

/* Prevent accidental horizontal overflow globally while letting media scale */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    min-width: 320px;
    padding-left: var(--sal);
    padding-right: var(--sar);
}

/* 2. Ultrawide & Super-Ultrawide Monitor Support (21:9, 32:9, 2560px–5120px) */
@media (min-width: 1800px) {
    .section-container,
    .hero-container,
    .work-portfolio-wrapper,
    .capabilities-container,
    .capabilities-stage,
    .filmlaab-statement-grid,
    .filmlaab-process-container,
    .footer-container,
    .services-offerings-container,
    .people-collective-container,
    .join-bnana-container,
    .people-values-container,
    .collective-disciplines-section,
    .collective-statement-section,
    .collective-top-nav-bar,
    .capability-page-container,
    .footer-quote-video-banner:not(.fullwidth-video-banner) {
        max-width: min(1680px, 86vw) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .header-container {
        max-width: min(1780px, 92vw) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .work-grid {
        column-count: 4 !important;
        column-gap: 28px !important;
    }
}

@media (min-width: 2560px) {
    .work-grid {
        column-count: 4 !important;
        column-gap: 32px !important;
    }

    .people-values-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 28px !important;
    }

    .original-card {
        border-radius: 24px !important;
    }
}

/* 3. Short Screen & Landscape Height Resiliency (e.g., 320x480, 768x600, 1280x600) */
@media (max-height: 640px) {
    .header {
        height: max(50px, calc(46px + var(--sat))) !important;
    }

    .header.scrolled {
        height: max(44px, calc(40px + var(--sat))) !important;
    }

    .hero-section {
        min-height: 100dvh !important;
        padding-top: max(70px, calc(60px + var(--sat))) !important;
        padding-bottom: max(24px, calc(20px + var(--sab))) !important;
    }

    .hero-title {
        font-size: clamp(2rem, 5.5vw, 3.8rem) !important;
        margin-bottom: 8px !important;
        line-height: 1.08 !important;
    }

    .hero-subheading {
        font-size: clamp(0.95rem, 1.8vw, 1.25rem) !important;
        margin-bottom: 6px !important;
    }

    .hero-subtitle {
        font-size: clamp(0.8rem, 1.1vw, 0.92rem) !important;
        margin-bottom: 16px !important;
    }

    .hero-scroll-indicator {
        display: none !important;
    }

    /* Modal dialogs on short viewports */
    .original-film-modal,
    .case-study-overlay,
    .about-overlay,
    .collective-overlay,
    .leader-bio-modal {
        align-items: flex-start !important;
        padding-top: max(20px, var(--sat)) !important;
        padding-bottom: max(20px, var(--sab)) !important;
    }

    .leader-bio-card {
        margin: auto !important;
        max-height: calc(100dvh - 40px) !important;
        overflow-y: auto !important;
        padding: 20px !important;
    }

    .leader-bio-avatar-wrap {
        width: 54px !important;
        height: 54px !important;
    }

    .process-dial-assembly {
        --dial-radius: calc(min(260px, 60vh) * 0.476) !important;
        width: min(260px, 60vh) !important;
        height: min(260px, 60vh) !important;
    }
}

/* 4. Fluid Intrinsic Grids & Adaptive Containers */
.people-roster-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: clamp(16px, 2.5vw, 32px) !important;
    width: 100% !important;
}

.services-cinematic-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: clamp(16px, 2.5vw, 32px) !important;
    width: 100% !important;
}

/* Intelligent People Values Grid scaling from 5 -> 3 -> 2 -> 1 without dropping items */
@media (max-width: 1280px) and (min-width: 861px) {
    .people-values-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 18px !important;
    }
}

@media (max-width: 860px) and (min-width: 561px) {
    .people-values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}

@media (max-width: 560px) {
    .people-values-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .people-value-card {
        padding: 22px 18px 20px !important;
    }
}

/* Collective Disciplines Grid Reflow */
@media (max-width: 720px) {
    .collective-disciplines-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Join BNANA Media Wrapper Intrinsic Aspect Framing */
.join-bnana-media-wrap {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    max-width: min(980px, 100%) !important;
}

.join-bnana-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* "BE A BNANA" Button Fluidity */
.btn-be-a-bnana {
    padding: clamp(14px, 2vh, 20px) clamp(28px, 4vw, 44px) !important;
    font-size: clamp(0.85rem, 1.2vw, 1.05rem) !important;
    letter-spacing: clamp(0.12em, 0.18vw, 0.22em) !important;
    max-width: min(440px, 92vw) !important;
    box-sizing: border-box !important;
}

/* 5. Services Directory (01–07) Reflow */
@media (max-width: 820px) {
    .service-offering-item {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: clamp(20px, 3vh, 32px) 0 !important;
    }

    .service-offering-title {
        font-size: clamp(1.15rem, 3.8vw, 1.35rem) !important;
    }

    .service-offering-sub {
        font-size: clamp(0.95rem, 2.8vw, 1.08rem) !important;
    }

    .service-offering-desc {
        font-size: clamp(0.86rem, 2.4vw, 0.95rem) !important;
    }
}

/* 6. BNANA Originals Film Modal & Leader Bio Overlay Intrinsic Viewport Containment */
.original-film-modal-container {
    width: min(980px, 92vw) !important;
    max-height: min(92dvh, 860px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.original-film-video-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
    border-radius: clamp(10px, 1.8vw, 18px) !important;
    overflow: hidden !important;
}

.original-film-video-wrap iframe,
.original-film-video-wrap video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.leader-bio-card {
    width: min(540px, 92vw) !important;
    box-sizing: border-box !important;
}

/* 7. Fullwidth Video Banner & Footer Safe Reflow */
.footer-quote-video-banner.fullwidth-video-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.footer-quote-video-banner.fullwidth-video-banner .footer-quote-video-wrap {
    width: 100% !important;
    height: clamp(260px, 42vw, 640px) !important;
    min-height: 240px !important;
}

/* 8. Process Orbit Dial Container & Touch Responsiveness */
@media (max-width: 1100px) {
    .filmlaab-process-section .process-orbit-stage {
        grid-template-columns: 1fr !important;
        gap: clamp(28px, 4vh, 48px) !important;
        justify-items: center !important;
    }

    .process-phase-display-deck {
        max-width: 720px !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .process-circle-dial {
        width: min(280px, 84vw) !important;
        height: min(280px, 84vw) !important;
    }

    .process-shutter-center {
        width: min(130px, 40vw) !important;
        height: min(130px, 40vw) !important;
    }

    .shutter-active-num {
        font-size: 2.2rem !important;
    }

    .shutter-phase-name {
        font-size: 0.65rem !important;
    }

    .stage-deliverables-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* 9. Header & Mobile Menu Safe Area Alignments */
.header {
    padding-top: var(--sat) !important;
}

.mobile-menu {
    padding-top: max(20px, var(--sat)) !important;
    padding-bottom: max(20px, var(--sab)) !important;
    padding-left: max(20px, var(--sal)) !important;
    padding-right: max(20px, var(--sar)) !important;
    min-height: 100dvh !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.close-overlay-btn,
.close-about-btn,
.leader-bio-close {
    top: max(16px, var(--sat)) !important;
    right: max(16px, var(--sar)) !important;
}