:root {
    --color-dark: #0A0A1A; /* Deep navy for premium feel */
    --color-light: #f5f5f5;
    --color-primary: #FF6B35; /* Vibrant Orange - more impactful and modern */
    --color-secondary: #FFD23F; /* Warm Yellow - more energetic */
    --color-accent: #4169E1; /* Electric Blue - modern tech feel */
    --color-charcoal: #2D3748; /* Sophisticated dark accent */
    --color-platinum: #E5E5E5; /* Platinum silver */
    --color-copper: #B87333; /* Warm copper */
    --color-glass: rgba(255, 255, 255, 0.1); /* Glass morphism */
    --color-glass-border: rgba(255, 255, 255, 0.2);
    --gradient-primary: linear-gradient(135deg, #FF6B35 0%, #FFD23F 100%);
    --gradient-accent: linear-gradient(135deg, #4169E1 0%, #FF6B35 100%);
    --gradient-dark: linear-gradient(135deg, #0A0A1A 0%, #2D3748 100%);
    --gradient-overlay: linear-gradient(45deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 210, 63, 0.1) 100%);
    --font-heading: 'DM Serif Display', serif;
    --font-body: 'Inter', sans-serif;
    --container-width: 1280px; /* Reduced from 1400px */
    --section-padding: 7rem 0;
    
    /* Theme-specific colors (dark mode default) */
    --bg-primary: #0A0A1A;
    --bg-secondary: #1A1A2E;
    --bg-tertiary: #2A2A3E;
    --text-primary: #F5F5F5;
    --text-secondary: rgba(245, 245, 245, 0.8);
    --text-tertiary: rgba(245, 245, 245, 0.6);
}

/* Light mode theme */
[data-theme="light"] {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F8F8;
    --bg-tertiary: #EFEFEF;
    --text-primary: #0A0A1A;
    --text-secondary: rgba(10, 10, 26, 0.8);
    --text-tertiary: rgba(10, 10, 26, 0.6);
    --color-glass: rgba(0, 0, 0, 0.05);
    --color-glass-border: rgba(0, 0, 0, 0.1);
}

/* Smooth theme transitions */
body, 
.header-stable,
.hero,
.client-logo-bar,
.main-footer,
.work-card,
.insight-card,
.production-card {
    transition: background-color 0.3s ease, color 0.3s ease;
}
    
    /* Modern spacing system */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    
    /* Modern border radius system */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Modern shadow system */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
    
    /* Modern transition system */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-magnetic: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-luxury: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================
   GLOBAL WIDOW/ORPHAN PREVENTION
   Prevents single words on their own line
   ======================================== */

/* Apply to all text elements */
p, h1, h2, h3, h4, h5, h6, li, blockquote, 
.article-excerpt, .subtitle, .section-subtitle,
.page-hero p, .hero p, .insight-highlight-content p,
.work-card-content h3, .case-study-hero p,
.testimonial p, .cta-section p, .btn {
    text-wrap: balance; /* Modern CSS - balances text to prevent widows */
    text-wrap: pretty; /* Alternative property for better browser support */
    orphans: 2; /* Minimum 2 lines at bottom of column */
    widows: 2; /* Minimum 2 lines at top of column */
    hyphens: none; /* Prevent hyphenation which can create awkward breaks */
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
}

/* Use non-breaking spaces for short phrases */
.article-title, .page-hero h1, .hero h1 {
    text-wrap: balance;
    max-width: 100%;
    hyphens: none;
}

/* Ensure buttons don't break awkwardly */
.btn, .btn span {
    white-space: nowrap;
}

/* For longer text blocks, allow some flexibility but prevent single word lines */
.article-body p {
    text-wrap: pretty;
    max-width: 75ch; /* Optimal line length for readability */
    margin-left: auto;
    margin-right: auto;
}

/* Premium Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes floatGentle {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Glass Morphism Effects - Simplified to avoid blur issues */
.glass-effect {
    background: var(--color-glass);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-lg);
}

.glass-effect-strong {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-dark);
    color: var(--color-light);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    opacity: 1 !important;
    animation: none !important;
}

/* Add space for fixed header */
main {
    padding-top: 0 !important;
}

/* Force specific elements to be visible by default - more targeted approach */
h1, h2, h3, h4, h5, h6 {
    opacity: 1 !important;
    animation: none !important;
}

.fade-in, .fade-in-left, .fade-in-right, .scale-in {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-light);
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 400;
}

h1 { 
    font-size: clamp(3rem, 6vw, 4.5rem); /* Reduced from 6rem */
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* animation: fadeInUp 1s ease-out; DISABLED TO FIX FADING */
}
h2 { 
    font-size: clamp(2.5rem, 5vw, 3.5rem); /* Reduced from 4.5rem */
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-light);
    /* animation: fadeInUp 1s ease-out 0.2s both; DISABLED TO FIX FADING */
}
h3 { 
    font-size: clamp(1.5rem, 3vw, 2rem); /* Reduced from 2.5rem */
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-light);
    /* animation: fadeInUp 1s ease-out 0.4s both; DISABLED TO FIX FADING */
}
h4 { font-size: 1.2rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); }
p.lead { font-size: 1.25rem; max-width: 800px; margin: 0 auto 3rem auto; text-align: center; color: rgba(245, 245, 245, 0.8); }

section {
    padding: var(--section-padding);
    position: relative;
    overflow-x: hidden;
}

/* Premium Section Styling */
.section-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    margin-bottom: 3rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* animation: fadeInUp 1s ease-out; DISABLED TO FIX FADING */
}

/* Reveal Animation Classes - SIMPLIFIED TO PREVENT CONFLICTS */
.fade-in {
    opacity: 1 !important; /* Force visibility */
    transform: none !important;
    animation: none !important;
}

.fade-in.visible,
.fade-in.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Fallback for fade-in elements after 2 seconds - DISABLED TO FIX FADING */
/*
@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        animation: fadeInFallback 0.8s ease-out 2s forwards;
    }
}
*/

@keyframes fadeInFallback {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-left {
    opacity: 1 !important; /* Force visibility */
    transform: none !important;
    animation: none !important;
}

.fade-in-left.visible {
    opacity: 1 !important;
    transform: none !important;
}

.fade-in-right {
    opacity: 1 !important; /* Force visibility */
    transform: none !important;
    animation: none !important;
}

.fade-in-right.visible {
    opacity: 1 !important;
    transform: none !important;
}

.scale-in {
    opacity: 1 !important; /* Force visibility */
    transform: none !important;
    animation: none !important;
}

.scale-in.visible {
    opacity: 1 !important;
    transform: none !important;
}

img, video {
    max-width: 100%;
    display: block;
    height: auto;
}

/* Service card images - 7:4 aspect ratio */
.production-card img {
    width: 100%;
    height: 280px; /* 7:4 ratio: 400px * 7/4 = 280px */
    object-fit: cover;
    object-position: center;
}

/* Gallery images - 7:4 aspect ratio */
.gallery-grid img {
    width: 100%;
    height: 280px; /* 7:4 ratio */
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.gallery-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Work card images - 7:4 aspect ratio */
.work-card-media {
    height: 280px; /* 7:4 ratio */
    position: relative;
    overflow: hidden;
}

.work-card-media video,
.work-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Hero/Parallax images - 9:7 aspect ratio */
.image-break-section {
    min-height: 60vh; /* Adjust for 9:7 ratio */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

/* Article images - 7:4 aspect ratio */
.article-image {
    height: 280px; /* 7:4 ratio */
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Modern image optimization */
img {
    content-visibility: auto;
    contain-intrinsic-size: 400px 280px; /* 7:4 ratio */
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem; /* Reduced from 1.2rem 3rem */
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem; /* Added explicit size */
    border-radius: 12px; /* Reduced from 16px */
    transition: all var(--transition-magnetic);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.95rem;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    /* animation: fadeInScale 0.8s ease-out; DISABLED TO FIX FADING */
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

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

.btn:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(232, 180, 74, 0.3);
}
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25), 0 2px 6px rgba(255, 210, 63, 0.15);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3), 0 3px 10px rgba(255, 210, 63, 0.2);
}
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

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

.btn-primary:hover {
    background-color: var(--color-secondary);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 8px 15px rgba(217, 121, 65, 0.3);
}

.btn:active {
    transform: translateY(-2px) scale(0.98);
}
.btn-secondary {
    background: linear-gradient(135deg, var(--color-accent) 0%, #5577ff 100%);
    color: white;
    border: 2px solid transparent;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(65, 105, 225, 0.25), 0 2px 6px rgba(85, 119, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #5577ff 0%, var(--color-accent) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-secondary:hover::before {
    opacity: 1;
}

.btn-secondary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(65, 105, 225, 0.3), 0 3px 10px rgba(85, 119, 255, 0.2);
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 210, 63, 0.1));
    border: 2px solid var(--color-primary);
    border-radius: 50px;
    color: var(--color-light);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.2);
    transition: all 0.3s ease;
}

.btn-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-link:hover::before {
    left: 100%;
}

.btn-link:hover {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 210, 63, 0.2));
    border-color: var(--color-secondary);
    transform: translateX(-5px);
    box-shadow: 0 6px 25px rgba(255, 107, 53, 0.4);
}

.btn-link::after {
    content: '←';
    display: inline-block;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-link:hover::after {
    transform: translateX(-5px);
}

/* Hero Sections */
.hero, .page-hero {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: var(--color-light);
    overflow: hidden;
}
.hero { 
    min-height: 100vh; 
    padding-top: 0;
    position: relative;
    overflow: hidden;
}

/* Animated gradient overlay for visual interest */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 107, 53, 0.15) 0%,
        rgba(10, 10, 26, 0.7) 30%,
        rgba(26, 26, 46, 0.85) 60%,
        rgba(255, 210, 63, 0.1) 100%
    );
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.page-hero { 
    min-height: 60vh; 
    background-image: url('assets/page-hero-background.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}

#hero-video {
    position: absolute;
    top: 0;
    left: 50%;
    min-width: 100%;
    min-height: 100vh;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translateX(-50%);
    object-fit: cover;
}
.hero::before, .page-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 10, 26, 0.85);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1;
}
.hero::after, .page-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(217, 121, 65, 0.1), rgba(232, 180, 74, 0.1));
    mix-blend-mode: overlay;
    z-index: 2;
}
/* Hero logo overlay removed */

/* Logo float animation removed */

.hero-content, .page-hero-content {
    position: relative;
    z-index: 10; /* Above gradient overlay */
    max-width: 900px;
    padding: 3rem 2rem 2rem;
}
/* Page Hero Logo Background - Removed */

/* Logo pulse animation removed */

.hero h1, .page-hero h1 { 
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    position: relative;
    z-index: 4;
    font-size: clamp(4rem, 8vw, 6rem) !important;
    /* animation: fadeInUp 1.2s ease-out; DISABLED TO FIX FADING */
}
.hero p, .page-hero p { 
    font-size: 1.2rem; /* Reduced from 1.5rem */
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.3px;
    margin-bottom: 2.5rem; 
    text-shadow: 0 2px 20px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.5);
    color: rgba(245, 245, 245, 1);
    position: relative;
    z-index: 4;
    max-width: 900px; /* Reduced from 1000px */
    margin-left: auto;
    margin-right: auto;
}

/* General Section Styles */
.section-title {
    text-align: center;
    margin-bottom: 4rem;
    background: linear-gradient(135deg, var(--color-light) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    0% { filter: drop-shadow(0 0 5px rgba(232, 180, 74, 0.3)); }
    100% { filter: drop-shadow(0 0 15px rgba(232, 180, 74, 0.6)); }
}

/* ========================================
   CLIENT LOGO BAR - INSTANT TRUST
   ======================================== */

/* Section Eyebrow - Title */
.section-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem; /* INCREASED: From 0.75rem for better visibility */
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Client Logo Bar Section */
.client-logo-bar {
    background: linear-gradient(180deg, rgba(45, 45, 65, 0.98) 0%, rgba(55, 55, 75, 1) 100%); /* LIGHTER: Even better contrast */
    padding: 8rem 0 7rem 0; /* INCREASED: Much more breathing room */
    position: relative;
    overflow: hidden;
}

.client-logo-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-primary) 50%, 
        transparent 100%);
    opacity: 0.3;
}

/* Logo Scroll Container - TWO ROWS */
.logo-scroll-container {
    margin-top: 4rem;
    overflow: hidden;
    position: relative;
    padding: 4rem 0; /* INCREASED: Even more vertical padding */
    display: flex;
    flex-direction: column;
    gap: 6rem; /* INCREASED: 5rem → 6rem (maximum vertical space between rows) */
}

/* Gradient fade edges for smooth infinity effect */
.logo-scroll-container::before,
.logo-scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.logo-scroll-container::before {
    left: 0;
    background: linear-gradient(90deg, 
        rgba(40, 40, 60, 0.98) 0%, 
        transparent 100%);
}

.logo-scroll-container::after {
    right: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(40, 40, 60, 0.98) 100%);
}

/* Logo Track - Horizontal scrolling container */
.logo-scroll-track {
    display: flex;
    gap: 8rem; /* INCREASED: 6rem → 8rem (more space between logos) */
    animation: infiniteScroll 40s linear infinite; /* SLOWED DOWN: 25s → 40s for smoother, no-jump loop */
    will-change: transform;
}

/* Second row - offset start position for visual interest */
.logo-scroll-track:nth-child(2) {
    animation-delay: -20s; /* OFFSET: Starts halfway through 40s cycle */
}

/* NO HOVER PAUSE - Keep scrolling continuously */

/* Infinite scroll animation - Smooth seamless loop */
@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Individual Logo Items */
.logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 0 4rem; /* INCREASED: Even more space for enhanced magnification */
    transition: var(--transition-normal);
}

.logo-item img {
    max-width: 200px; /* INCREASED: Larger logos */
    max-height: 80px; /* INCREASED: Taller logos */
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1); /* UPDATED: Turn colored logos into clean white icons */
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center; /* ADDED: Scale from center for magnification */
}

/* Exception: Arlington Common (already white, don't filter) */
.logo-item img[src*="ArlingtonCommon"] {
    filter: none; /* Remove filter - keep original colors */
    opacity: 0.9; /* Slightly higher opacity since no filter */
    background: rgba(255, 255, 255, 0.15); /* Subtle light background for visibility */
    padding: 8px;
    border-radius: 8px;
}

/* Exception: Bennington Museum (keep original colors) */
.logo-item img[src*="bennington museum logo"] {
    filter: none; /* Remove filter - keep original colors */
    opacity: 0.9; /* Slightly higher opacity */
}

/* Exception: NDS logo (keep original colors) */
.logo-item img[src*="NDS-Logo"] {
    filter: none; /* Remove filter - keep original colors */
    opacity: 0.9;
}

/* Exception: Inn at Manchester (keep original colors) */
.logo-item img[src*="theInnatManchester"] {
    filter: none; /* Remove filter - keep original colors */
    opacity: 0.9;
}

/* Exception: SVCC logo (keep original colors for visibility) */
.logo-item img[src*="SVCC-logo-Round"] {
    filter: none; /* Remove filter - keep original blue/colors */
    opacity: 0.9;
    min-width: 120px; /* Ensure it doesn't get too small */
    max-width: 240px; /* Allow it to be larger */
}

/* Exception: Kimpton Taconic logo (invert to white) */
.logo-item img[src*="kimpton taconic"] {
    filter: brightness(0) invert(1); /* Invert to white for visibility */
    opacity: 0.9;
}

/* Hover state - increase opacity only (scale handled by magnification effect) */
.logo-item:hover img {
    filter: brightness(0) invert(1); /* Keep white on hover */
    opacity: 1;
}

/* Hover state for exceptions */
.logo-item:hover img[src*="ArlingtonCommon"],
.logo-item:hover img[src*="bennington museum logo"],
.logo-item:hover img[src*="NDS-Logo"],
.logo-item:hover img[src*="theInnatManchester"],
.logo-item:hover img[src*="SVCC-logo-Round"] {
    filter: none; /* Keep no filter on hover */
    opacity: 1;
}

/* Hover state for Kimpton (keep inverted) */
.logo-item:hover img[src*="kimpton taconic"] {
    filter: brightness(0) invert(1); /* Keep inverted on hover */
    opacity: 1;
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
    .client-logo-bar {
        padding: 3rem 0 2rem 0;
    }
    
    .section-eyebrow {
        font-size: 0.65rem;
        letter-spacing: 1.5px;
        padding: 0 1rem;
        margin-bottom: 1.5rem;
    }
    
    .logo-scroll-track {
        gap: 3rem;
        animation: infiniteScroll 60s linear infinite; /* Slower on mobile */
    }
    
    /* Hide second row of logos on mobile */
    .logo-scroll-track:nth-child(2) {
        display: none !important;
    }
    
    .logo-item {
        height: 60px !important; /* Doubled from 30px */
        padding: 0 0.5rem !important;
    }
    
    .logo-item img {
        max-width: 60px !important; /* Doubled from 30px */
        max-height: 28px !important; /* Doubled from 14px */
        width: auto !important;
        height: auto !important;
    }
    
    .logo-scroll-container::before,
    .logo-scroll-container::after {
        width: 80px;
    }
}

/* Tablet breakpoint */
@media (max-width: 1024px) and (min-width: 769px) {
    .logo-scroll-track {
        gap: 3.5rem;
        animation: infiniteScroll 50s linear infinite;
    }
    
    .logo-item img {
        max-width: 120px;
        max-height: 55px;
    }
}

/* ========================================
   BENTO GRID SECTION - SERVICE CATEGORIES
   ======================================== */

.bento-grid-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, rgba(34, 34, 34, 1) 0%, rgba(26, 26, 46, 1) 100%);
    position: relative;
}

.bento-grid-section .section-title {
    text-align: center;
    margin-bottom: 1rem;
}

.bento-grid-section .section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: rgba(245, 245, 245, 0.7);
    margin-bottom: 3rem;
    font-family: var(--font-body);
}

/* Bento Grid Container */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Bento Items */
.bento-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

/* Large item spans 2 columns */
.bento-item-large {
    grid-column: span 2;
    min-height: 500px;
}

/* Background Image Container */
.bento-item-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

/* Semi-transparent Dark Overlay */
.bento-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 26, 0.2) 0%,
        rgba(10, 10, 26, 0.6) 50%,
        rgba(10, 10, 26, 0.9) 100%
    );
    z-index: 2;
    transition: background 0.5s ease;
}

/* Content Container */
.bento-item-content {
    position: relative;
    z-index: 3;
    padding: 2.5rem;
    width: 100%;
}

/* Title Styling */
.bento-item-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: white;
    margin-bottom: 0.75rem;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bento-item-large .bento-item-title {
    font-size: 3rem;
}

/* Description Text */
.bento-item-description {
    font-family: var(--font-body);
    font-size: 1rem;
    color: rgba(245, 245, 245, 0.85);
    line-height: 1.6;
    margin-bottom: 1rem;
    max-width: 600px;
    opacity: 0.9;
    transition: opacity 0.4s ease;
}

/* Arrow Indicator */
.bento-item-arrow {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover Effects */
.bento-item:hover .bento-item-bg {
    transform: scale(1.08);
}

.bento-item:hover .bento-item-overlay {
    background: linear-gradient(
        180deg,
        rgba(10, 10, 26, 0.3) 0%,
        rgba(10, 10, 26, 0.7) 50%,
        rgba(10, 10, 26, 0.95) 100%
    );
}

.bento-item:hover .bento-item-title {
    transform: translateY(-5px);
}

.bento-item:hover .bento-item-description {
    opacity: 1;
}

.bento-item:hover .bento-item-arrow {
    transform: translateX(10px);
    color: var(--color-secondary);
}

/* CTA Button */
.bento-cta {
    text-align: center;
    margin-top: 2rem;
}

/* Responsive Design - Tablet */
@media (max-width: 1024px) {
    .bento-item {
        min-height: 350px;
    }
    
    .bento-item-large {
        min-height: 450px;
    }
    
    .bento-item-title {
        font-size: 2rem;
    }
    
    .bento-item-large .bento-item-title {
        font-size: 2.5rem;
    }
    
    .bento-item-content {
        padding: 2rem;
    }
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
    .bento-grid-section {
        padding: 4rem 0;
    }
    
    .bento-grid-section .section-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }
    
    /* Stack items vertically on mobile */
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .bento-item-large {
        grid-column: span 1;
        min-height: 400px;
    }
    
    .bento-item {
        min-height: 350px;
    }
    
    .bento-item-content {
        padding: 1.75rem;
    }
    
    .bento-item-title {
        font-size: 1.75rem;
    }
    
    .bento-item-large .bento-item-title {
        font-size: 2rem;
    }
    
    .bento-item-description {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
    }
    
    .bento-item-arrow {
        font-size: 1.25rem;
    }
    
    /* Slightly reduce zoom effect on mobile */
    .bento-item:hover .bento-item-bg {
        transform: scale(1.05);
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .bento-item-large {
        min-height: 350px;
    }
    
    .bento-item {
        min-height: 300px;
    }
    
    .bento-item-content {
        padding: 1.5rem;
    }
    
    .bento-item-title {
        font-size: 1.5rem;
    }
    
    .bento-item-large .bento-item-title {
        font-size: 1.75rem;
    }
}

.intro-section {
    background-color: #222;
    position: relative;
    overflow: hidden;
}

.intro-section::before {
    content: '';
    position: absolute;
    top: 20%;
    right: -10%;
    width: 200px;
    height: 200px;
    background-image: url('assets/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.03;
    transform: rotate(15deg);
    z-index: 1;
}
.difference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 4rem;
    container-type: inline-size;
}

@container (min-width: 600px) {
    .difference-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.difference-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.difference-item .icon {
    flex-shrink: 0;
    height: 36px;
    width: 36px;
    color: var(--color-primary);
    margin-top: 5px;
}
.difference-item h3 {
     margin-bottom: 0.5rem;
}

/* Portfolio Preview on Home */
.portfolio-preview-section { 
    background-color: var(--color-dark); 
    padding: 6rem 0; /* Increased padding for more breathing room */
}
.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem; /* Increased from 2rem to 3rem for more breathing room */
    container-type: inline-size;
    margin-bottom: 4rem; /* Increased bottom margin */
}

/* Balanced Grid Layout - Alternating 2-card and 3-card rows */
/* Uses 6-column grid for flexibility: 3-card rows use 2 cols each, 2-card rows use 3 cols each */
.work-grid.balanced-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns for flexibility */
    gap: 3rem;
    grid-auto-flow: dense;
}

/* 3-card rows: each card spans 2 columns (2+2+2 = 6) */
.work-grid.balanced-grid .work-card[data-row-size="3"] {
    grid-column: span 2;
}

/* 2-card rows: each card spans 3 columns (3+3 = 6) */
.work-grid.balanced-grid .work-card[data-row-size="2"] {
    grid-column: span 3;
}

/* 1-card row: spans all 6 columns (centered, full width) */
.work-grid.balanced-grid .work-card[data-row-size="1"] {
    grid-column: span 6;
    max-width: 600px;
    margin: 0 auto;
}

/* Featured Work Separator */
.featured-work-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0 3rem 0;
    opacity: 0.6;
}

.separator-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    flex: 1;
    max-width: 100px;
}

.separator-diamond {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    transform: rotate(45deg);
    margin: 0 1rem;
    box-shadow: 0 0 10px rgba(217, 121, 65, 0.3);
}

/* Featured Work Randomization - Let JavaScript handle this */

/* Featured Work CTA */
.featured-work-cta {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem 0;
}

.featured-work-cta .btn-large {
    font-size: 1.2rem;
    padding: 1rem 2.5rem;
    margin-bottom: 1rem;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.featured-work-cta .btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(217, 121, 65, 0.3);
}

.cta-subtitle {
    color: rgba(245, 245, 245, 0.8);
    font-size: 1rem;
    margin: 0;
    font-style: italic;
}

/* Next Event Button */
.next-event-button {
    position: fixed;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    z-index: 1000;
    background: var(--color-accent);
    color: var(--color-light);
    border: none;
    border-radius: 50px;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 20px rgba(217, 121, 65, 0.3);
    transition: all 0.3s ease;
    opacity: 0.9;
}

.next-event-button:hover {
    transform: translateY(-50%) translateX(-5px);
    box-shadow: 0 6px 25px rgba(217, 121, 65, 0.4);
    opacity: 1;
    color: var(--color-light);
    text-decoration: none;
}

.next-event-button::after {
    content: '→';
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.next-event-button:hover::after {
    transform: translateX(3px);
}

/* Previous Event Button */
.previous-event-button {
    position: fixed;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    z-index: 1000;
    background: var(--color-accent);
    color: var(--color-light);
    border: none;
    border-radius: 50px;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 20px rgba(217, 121, 65, 0.3);
    transition: all 0.3s ease;
    opacity: 0.9;
}

.previous-event-button:hover {
    transform: translateY(-50%) translateX(5px);
    box-shadow: 0 6px 25px rgba(217, 121, 65, 0.4);
    opacity: 1;
    color: var(--color-light);
    text-decoration: none;
}

.previous-event-button::before {
    content: '←';
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.previous-event-button:hover::before {
    transform: translateX(-3px);
}

/* Hide on mobile */
@media (max-width: 768px) {
    .next-event-button,
    .previous-event-button {
        display: none;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATION
======================================== */

/* Lazy loading for images */
img[loading="lazy"] {
    opacity: 1 !important;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Content visibility for better performance */
.work-card, .gallery-grid img, .testimonial-slide {
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}

/* Optimize animations for performance */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Critical CSS for above-the-fold content */
.hero {
    contain: layout style paint;
}

/* ========================================
   MODERN WEB FEATURES 2024-2025
======================================== */

/* 1. Scroll-Triggered Parallax Effects */
.parallax-element {
    transition: transform 0.1s ease-out;
}

/* Production Card Parallax */
.production-card.parallax-element {
    transition: transform 0.6s ease;
}

.production-card.parallax-element img {
    transition: transform 0.8s ease;
}
.parallax-element {
    transform: translateZ(0);
    will-change: transform;
}

.parallax-slow {
    transform: translateY(var(--parallax-offset, 0));
}

.parallax-fast {
    transform: translateY(calc(var(--parallax-offset, 0) * 0.5));
}

/* 2. Morphing Animations */
.morphing-section {
    position: relative;
    overflow: hidden;
}

.morphing-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--color-accent), var(--color-secondary));
    opacity: 0.1;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0);
}

.morphing-shape.active {
    transform: scale(1);
    border-radius: 20%;
}

/* 3. Glassmorphism Cards - REMOVED */

/* 4. Micro-Interactions */
.micro-interaction {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.micro-interaction:hover {
    transform: translateY(-2px) scale(1.02);
}

.micro-interaction:active {
    transform: translateY(0) scale(0.98);
}

/* Button Micro-Interactions */
.btn-micro {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-micro::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-micro:hover::before {
    left: 100%;
}

/* 5. Scroll-Triggered Typography */
.typing-text {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--color-accent);
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--color-accent); }
}

.scroll-reveal {
    opacity: 1 !important;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* 6. Interactive Video Timeline */
.video-timeline {
    position: relative;
    margin: 2rem 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
}

.timeline-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
    border-radius: 2px;
    transition: width 0.1s ease;
}

.timeline-marker {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 4px rgba(217, 121, 65, 0.3);
}

.timeline-marker:hover {
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 0 0 6px rgba(217, 121, 65, 0.5);
}

.timeline-chapter {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.timeline-marker:hover .timeline-chapter {
    opacity: 1;
}

/* 7. Testimonial Carousel */
.testimonial-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.testimonial-slide {
    display: none;
    padding: 3rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.testimonial-slide.active {
    display: block;
    animation: slideIn 0.5s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

.testimonial-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.testimonial-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonial-dot.active {
    background: var(--color-accent);
    transform: scale(1.2);
}

/* 8. Enhanced Work Cards - SIMPLIFIED */
.work-card-enhanced {
    transition: all 0.3s ease;
}

.work-card-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* 9. Floating Elements Animation - REMOVED */

/* 10. Gradient Text Animation - SUBTLE */
.gradient-text {
    background: linear-gradient(45deg, var(--color-light), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Testimonial Section Styling */
.testimonial-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(0, 0, 0, 0.8));
    position: relative;
    overflow: hidden;
}

.testimonial-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.testimonial-section .container {
    position: relative;
    z-index: 1;
}

.testimonial-section blockquote {
    font-size: 1.5rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 2rem;
    color: var(--color-light);
}

.testimonial-section cite {
    font-size: 1rem;
    color: var(--color-accent);
    font-weight: 600;
    font-style: normal;
}

/* ========================================
   SOCIAL SHARING
======================================== */
.social-sharing {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(26, 26, 26, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(232, 180, 74, 0.2);
    backdrop-filter: blur(10px);
}

.social-sharing-label {
    font-weight: 600;
    color: var(--color-light);
    margin-right: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.social-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.social-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.social-share-btn.twitter {
    background: #1DA1F2;
    color: white;
}

.social-share-btn.twitter:hover {
    background: #0d8bd9;
}


.social-share-btn.linkedin {
    background: #0077B5;
    color: white;
}

.social-share-btn.linkedin:hover {
    background: #005885;
}

.social-share-btn.email {
    background: var(--color-secondary);
    color: var(--color-dark);
}

.social-share-btn.email:hover {
    background: var(--color-primary);
    color: white;
}

.social-share-btn.copy {
    background: rgba(245, 245, 245, 0.1);
    color: var(--color-light);
    border-color: var(--color-secondary);
}

.social-share-btn.copy:hover {
    background: var(--color-secondary);
    color: var(--color-dark);
}

@media (max-width: 768px) {
    .social-sharing {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .social-share-btn {
        justify-content: center;
        padding: 0.75rem 1rem;
    }
}

/* ========================================
   ARTICLE NAVIGATION
======================================== */
.article-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    justify-content: space-between;
    width: 100%;
    pointer-events: none; /* Allow clicking through the container */
    padding: 0 2rem;
    opacity: 1; /* ALWAYS VISIBLE */
    visibility: visible; /* ALWAYS VISIBLE */
    transition: all 0.3s ease;
}

.article-nav.visible {
    opacity: 1;
    visibility: visible;
}

.article-nav-btn {
    background: rgba(26, 26, 26, 0.9);
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    padding: 1rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    min-width: 140px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    pointer-events: auto; /* Make buttons clickable */
}

.article-nav-btn:hover {
    background: var(--color-secondary);
    color: var(--color-dark);
    transform: scale(1.05);
}

/* Previous button on the left - slide left on hover */
.article-nav-btn:first-child:hover {
    transform: translateX(-5px) scale(1.05);
}

/* Next button on the right - slide right on hover */
.article-nav-btn:last-child:hover {
    transform: translateX(5px) scale(1.05);
}

.article-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.article-nav-btn:disabled:hover {
    transform: none;
    background: rgba(26, 26, 26, 0.9);
    color: var(--color-secondary);
}

@media (max-width: 768px) {
    .article-nav {
        padding: 0 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        top: auto;
        bottom: 2rem;
        transform: none;
    }
    
    .article-nav-btn {
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
        min-width: auto;
        width: 100%;
    }
    
    /* Reset hover transforms for mobile */
    .article-nav-btn:first-child:hover,
    .article-nav-btn:last-child:hover {
        transform: scale(1.05);
    }
}

/* ========================================
   INSIGHTS HIGHLIGHT SECTION
======================================== */

.insights-highlight-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(26, 26, 26, 0.9));
}

.section-subtitle {
    text-align: center;
    font-size: 1.05rem; /* Reduced from 1.2rem */
    color: rgba(245, 245, 245, 0.8);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.insights-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.insight-highlight-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
}

.insight-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    color: inherit;
}

.insight-highlight-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.insight-highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.insight-highlight-card:hover .insight-highlight-image img {
    transform: scale(1.05);
}

.insight-highlight-content {
    padding: 1.5rem;
}

.insight-category {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.insight-highlight-content h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    color: var(--color-light);
}

.insight-highlight-content p {
    color: rgba(245, 245, 245, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.insights-cta {
    text-align: center;
}

/* Responsive design for insights highlights */
@media (max-width: 768px) {
    .insights-highlight-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .insight-highlight-content {
        padding: 1rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
}

/* ========================================
   INSIGHTS PAGE STYLES
======================================== */

.insights-categories {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.category-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-light);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.category-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.category-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-dark);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.insight-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.insight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(65, 105, 225, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.insight-card:hover::before {
    opacity: 1;
}

.insight-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.2), 0 8px 20px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 107, 53, 0.3);
    text-decoration: none;
    color: inherit;
}

.insight-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.insight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.insight-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.insight-image a:hover img {
    transform: scale(1.05);
}

.insight-card:hover .insight-image img {
    transform: scale(1.1);
}

.insight-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.article-category {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.insight-content h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    color: var(--color-light);
}

.insight-content p {
    color: rgba(245, 245, 245, 0.8);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.article-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: rgba(245, 245, 245, 0.6);
}

.article-date, .read-time {
    display: flex;
    align-items: center;
}

.article-date::before {
    content: '📅';
    margin-right: 0.25rem;
}

.read-time::before {
    content: '';
    margin-right: 0;
}

/* Filter functionality */
.insight-card.hidden {
    display: none;
}

/* Responsive design */
@media (max-width: 768px) {
    .insights-categories {
        gap: 0.5rem;
    }
    
    .category-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .insights-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .insight-content {
        padding: 1rem;
    }
}

/* ========================================
   ARTICLE PAGE STYLES
======================================== */

.article-hero {
    padding: 8rem 0 4rem;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(0, 0, 0, 0.8));
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    display: flex;
    align-items: center;
    background-attachment: fixed; /* PARALLAX: Fixed background */
    background-size: cover;
    background-position: center;
}

.article-hero .container {
    position: relative;
    z-index: 2;
}

.article-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(10, 10, 26, 0.7), rgba(26, 26, 46, 0.6));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1;
}

.article-title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 3;
}

.article-excerpt {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
    position: relative;
    z-index: 3;
}

.article-meta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.article-category {
    background: var(--color-accent);
    color: white; /* CHANGED: Better contrast */
    padding: 0.6rem 1.2rem; /* INCREASED: More presence */
    border-radius: 25px; /* INCREASED: More modern */
    font-size: 0.9rem; /* INCREASED: More visible */
    font-weight: 700; /* INCREASED: Bolder */
    text-transform: uppercase;
    letter-spacing: 1px; /* INCREASED: More dramatic */
    box-shadow: 0 2px 10px rgba(65, 105, 225, 0.3); /* ADDED: Depth */
}

.article-date, .read-time {
    color: rgba(245, 245, 245, 0.8); /* BRIGHTER: More visible */
    font-size: 1rem; /* INCREASED: Better proportion */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500; /* ADDED: More presence */
}

.article-title {
    font-size: 3.5rem; /* Reduced from 4.5rem */
    line-height: 1.1; /* TIGHTENED: More dramatic */
    margin-bottom: 2rem; /* INCREASED: More breathing room */
    color: var(--color-light);
    font-family: var(--font-heading);
    font-weight: 400; /* Elegant weight for serif font */
    letter-spacing: -0.02em; /* Slight negative tracking for impact */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9); /* ENHANCED: Stronger shadow */
}

.article-excerpt {
    font-size: 1.5rem; /* INCREASED: 1.25rem → 1.5rem (20% larger) */
    line-height: 1.7; /* INCREASED: Better readability */
    color: rgba(245, 245, 245, 0.95); /* BRIGHTER: More contrast */
    max-width: 900px; /* NARROWED: Better reading width */
    margin: 0 auto 2.5rem;
    font-weight: 400; /* ADDED: Medium weight for presence */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); /* ENHANCED: Better depth */
}

.article-author {
    color: rgba(245, 245, 245, 0.8); /* BRIGHTER: More visible */
    font-style: italic;
    font-size: 1.1rem; /* INCREASED: Better proportion with larger title */
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.article-content {
    padding: 4rem 0;
}

.article-body {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 1.1rem; /* Reduced from 1.25rem */
    line-height: 1.7; /* Reduced from 1.9 */
    color: rgba(245, 245, 245, 0.95); /* BRIGHTER */
}

/* First paragraph - Make it stand out as a lead */
.article-body > p:first-of-type {
    font-size: 1.5rem; /* LEAD PARAGRAPH: Much larger */
    line-height: 1.8;
    color: var(--color-light);
    font-weight: 400;
    margin-bottom: 2.5rem;
    padding-left: 2rem;
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.05), transparent);
    padding: 1.5rem 2rem;
    border-radius: 0 8px 8px 0;
}

.article-body h2 {
    font-size: 3rem; /* INCREASED: 2rem → 3rem (50% larger!) */
    margin: 4rem 0 2rem 0; /* INCREASED: More breathing room */
    color: var(--color-light);
    font-family: var(--font-heading);
    line-height: 1.2;
    letter-spacing: -0.02em;
    position: relative;
    padding-bottom: 1rem;
}

/* Add decorative underline to H2s */
.article-body h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
}

.article-body h3 {
    font-size: 1.8rem; /* INCREASED: 1.5rem → 1.8rem (20% larger) */
    margin: 2.5rem 0 1.25rem 0;
    color: var(--color-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Add icon/emoji support before H3s (if they start with emoji) */
.article-body h3::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    margin-right: 0.5rem;
}

.article-body h4 {
    font-size: 1.4rem; /* INCREASED: More hierarchy */
    margin: 2rem 0 1rem 0;
    color: rgba(245, 245, 245, 0.9);
    font-weight: 600;
}

.article-body p {
    margin-bottom: 1.75rem; /* INCREASED: More spacing */
}

.article-body ul, .article-body ol {
    margin-bottom: 2rem; /* INCREASED */
    padding-left: 2.5rem;
    font-size: 1.2rem; /* INCREASED: Lists are larger */
}

.article-body li {
    margin-bottom: 0.75rem; /* INCREASED: More breathing room */
    line-height: 1.8;
    position: relative;
}

/* Custom bullet points */
.article-body ul li::marker {
    color: var(--color-primary);
    font-size: 1.2em;
}

.article-body ol li::marker {
    color: var(--color-secondary);
    font-weight: 700;
}

.article-body strong {
    color: var(--color-secondary);
    font-weight: 700; /* INCREASED: Bolder */
}

/* Enhanced blockquotes */
.article-body blockquote {
    margin: 3rem 0;
    padding: 2rem 2.5rem;
    border-left: 6px solid var(--color-primary); /* THICKER */
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.08), rgba(255, 107, 53, 0.02));
    border-radius: 0 12px 12px 0;
    font-family: var(--font-heading);
    font-size: 1.6rem; /* INCREASED */
    font-style: italic;
    line-height: 1.6;
    color: var(--color-light);
    position: relative;
}

.article-body blockquote::before {
    content: '"';
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    font-size: 4rem;
    color: var(--color-primary);
    opacity: 0.3;
    font-family: Georgia, serif;
}

.article-body a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.article-body a:hover {
    border-bottom-color: var(--color-accent);
}

.article-cta {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    margin: 3rem 0;
    text-align: center;
}

.article-cta h3 {
    color: var(--color-light);
    margin-bottom: 1rem;
}

.article-cta p {
    color: rgba(245, 245, 245, 0.8);
    margin-bottom: 1.5rem;
}

.related-articles {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.related-articles h3 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-light);
    font-family: var(--font-heading);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.related-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.related-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    color: inherit;
}

.related-card h4 {
    color: var(--color-light);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.related-card p {
    color: rgba(245, 245, 245, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Responsive design for articles */
@media (max-width: 768px) {
    .article-hero {
        padding: 5rem 0 2.5rem;
    }
    
    .article-title {
        font-size: 2.5rem; /* INCREASED: 2rem → 2.5rem (more impactful on mobile) */
        line-height: 1.15;
        letter-spacing: -0.01em;
    }
    
    .article-excerpt {
        font-size: 1.2rem; /* INCREASED: 1.1rem → 1.2rem (better readability) */
        line-height: 1.6;
    }
    
    .article-hero {
        background-attachment: scroll; /* Disable parallax on mobile for performance */
    }
    
    .article-body {
        font-size: 1.1rem; /* INCREASED: Better mobile readability */
    }
    
    .article-body > p:first-of-type {
        font-size: 1.3rem; /* INCREASED: Lead paragraph on mobile */
        padding: 1rem 1.5rem;
    }
    
    .article-body h2 {
        font-size: 2rem; /* INCREASED: 1.5rem → 2rem */
        margin: 3rem 0 1.5rem 0;
    }
    
    .article-body h3 {
        font-size: 1.5rem; /* INCREASED: 1.25rem → 1.5rem */
    }
    
    .article-body h4 {
        font-size: 1.2rem;
    }
    
    .article-body ul, .article-body ol {
        font-size: 1.1rem;
        padding-left: 1.5rem;
    }
    
    .article-body blockquote {
        font-size: 1.3rem;
        padding: 1.5rem 1.5rem;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: center;
    }
}

@container (min-width: 400px) {
.work-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .work-card:hover {
        transform: translateY(-15px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    }
}
.work-card {
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-light);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    position: relative;
}

.work-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(217, 121, 65, 0.1) 0%, rgba(232, 180, 74, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.work-card:hover::before {
    opacity: 1;
}
.work-card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0,0,0,0.4), 0 0 30px rgba(217, 121, 65, 0.2);
}
.work-card-media {
    height: 250px;
    position: relative;
    overflow: hidden;
}
.work-card-media video,
.work-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.work-card:hover .work-card-media video,
.work-card:hover .work-card-media img {
    transform: scale(1.1);
}
.work-card-content {
    padding: 1.5rem;
    flex-grow: 1;
}
.work-card-content h3 { margin-bottom: 0.25rem; }
.work-card-location, .work-card-category { font-size: 0.9rem; color: rgba(245, 245, 245, 0.7); }
.work-card-date { 
    font-size: 0.85rem; 
    color: rgba(245, 245, 245, 0.6); 
    margin-top: 0.5rem;
    font-weight: 400;
}
.view-all-work { text-align: center; margin-top: 4rem; }

/* Image Break Section */
.image-break-section {
    padding: 10rem 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}
.image-break-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(26, 26, 26, 0.5);
}

/* Story Section on Home */
.story-section-home { background-color: var(--color-dark); }
.story-container-home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.story-image-home img {
    border-radius: 8px;
}
.story-content-home p { margin-bottom: 2rem; color: rgba(245, 245, 245, 0.8); }

/* CTA Section */
.cta-section {
    background-color: var(--color-primary);
    text-align: center;
}
.cta-section h2 { color: var(--color-dark); }
.cta-section p { color: rgba(26,26,26,0.8); margin-bottom: 2rem; }
.cta-section .btn-secondary {
    background-color: var(--color-dark);
    color: var(--color-light);
    border-color: var(--color-dark);
}
.cta-section .btn-secondary:hover {
    background-color: transparent;
    color: var(--color-dark);
}

/* ========================================
   BACK TO TOP BUTTON
   ======================================== */
#back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25), 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

#back-to-top:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3), 0 3px 10px rgba(0, 0, 0, 0.25);
}

#back-to-top:active {
    transform: translateY(-1px) scale(1.05);
}

#back-to-top svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    #back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 45px;
        height: 45px;
    }
    
    #back-to-top svg {
        width: 20px;
        height: 20px;
    }
}


/* Footer */
.main-footer {
    background-color: #111;
    color: rgba(245, 245, 245, 0.7);
    padding: 5rem 0 2rem 0;
    position: relative;
    overflow: hidden;
}

.main-footer::before {
    display: none; /* Removed transparent background logo */
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 3rem;
}
.footer-logo {
    height: 100px; /* Increased from 70px for better visibility */
    margin-bottom: 1rem;
}
.footer-brand p { font-size: 0.9rem; }
.footer-links ul { list-style: none; padding: 0;}
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: rgba(245, 245, 245, 0.7); text-decoration: none; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--color-primary); }
.footer-connect p { font-size: 0.9rem; line-height: 1.8; }
.footer-connect a { color: var(--color-primary); text-decoration: none; }
.footer-connect a:hover { text-decoration: underline; }
.social-links { display: flex; gap: 1.5rem; margin-top: 1rem; }
.social-links a { color: var(--color-light); }
.social-links a:hover { color: var(--color-primary); transform: scale(1.1); }
.footer-bottom {
    border-top: 1px solid rgba(245, 245, 245, 0.2);
    margin-top: 4rem;
    padding-top: 2rem;
    text-align: center;
    font-size: 0.8rem;
}

/* --- Specific Page Styles --- */

/* Case Study Page */
.case-study-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-light);
    overflow: hidden;
    min-height: 100vh;
}

#case-study-hero-video,
.case-study-hero .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.case-study-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15,15,15,0.6);
    z-index: 1;
}

.case-study-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(217, 121, 65, 0.1), rgba(232, 180, 74, 0.1));
    mix-blend-mode: overlay;
    z-index: 2;
}

/* Case study hero logo overlay removed */

.case-study-hero-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    padding: 2rem;
}

.case-study-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem); /* Reduced from 5.5rem */
    color: var(--color-light);
    text-shadow: 
        0 4px 20px rgba(0,0,0,0.9), 
        0 0 60px rgba(0,0,0,0.6),
        0 8px 40px rgba(255, 107, 53, 0.3); /* ADDED: Orange glow */
    margin-bottom: 2rem; /* INCREASED: More breathing room */
    position: relative;
    z-index: 4;
    font-weight: 400;
    letter-spacing: -0.02em; /* ADDED: Tighter tracking for impact */
    line-height: 1.1; /* TIGHTENED: More dramatic */
    text-transform: none; /* Keep natural casing */
}

/* Add subtle animated glow effect to hero titles */
@keyframes heroGlow {
    0%, 100% {
        text-shadow: 
            0 4px 20px rgba(0,0,0,0.9), 
            0 0 60px rgba(0,0,0,0.6),
            0 8px 40px rgba(255, 107, 53, 0.3);
    }
    50% {
        text-shadow: 
            0 4px 20px rgba(0,0,0,0.9), 
            0 0 60px rgba(0,0,0,0.6),
            0 8px 40px rgba(255, 107, 53, 0.5);
    }
}

.case-study-hero h1 {
    animation: heroGlow 4s ease-in-out infinite;
}

.case-study-hero p {
    font-size: 1.2rem; /* Reduced from 1.5rem */
    color: rgba(245, 245, 245, 0.95);
    text-shadow: 0 2px 15px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.5);
    max-width: 700px; /* INCREASED: More room */
    margin: 0 auto;
    position: relative;
    z-index: 4;
    font-weight: 400;
    line-height: 1.6;
}
.case-study-details-section { padding-top: 4rem; }
.case-study-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; }
.case-study-main-content h2 { 
    font-size: 2.5rem; 
    margin-bottom: 2rem; 
    margin-top: 3rem;
}

.case-study-main-content h2:first-child {
    margin-top: 0;
}

/* Make internal links in case study paragraphs blend with text */
.case-study-main-content p a {
    color: inherit; /* Same color as paragraph text */
    text-decoration: none; /* No underline */
    border-bottom: none; /* No border */
    transition: opacity 0.3s ease;
}

.case-study-main-content p a:hover {
    opacity: 0.7; /* Subtle hover effect */
    border-bottom: none; /* Ensure no underline on hover */
}
.sidebar-block { margin-bottom: 2rem; }
.sidebar-block p { color: rgba(245, 245, 245, 0.8); }
.services-list { list-style: none; padding-left: 0; }
.services-list li { margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; }
.services-list li::before { content: '✓'; color: var(--color-secondary); position: absolute; left: 0; }
.case-study-gallery { background-color: #222; }
/* Smart Gallery Layouts - Dynamic based on image count */
.gallery-grid { 
    display: grid; 
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 2 images - Side by side */
.gallery-grid.gallery-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 images - Row of 3 */
.gallery-grid.gallery-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 images - 2x2 grid */
.gallery-grid.gallery-4 {
    grid-template-columns: repeat(2, 1fr);
}

/* 5 images - 2 large on top, 3 smaller below */
.gallery-grid.gallery-5 {
    grid-template-columns: repeat(6, 1fr);
}
.gallery-grid.gallery-5 img:nth-child(1),
.gallery-grid.gallery-5 img:nth-child(2) {
    grid-column: span 3;
}
.gallery-grid.gallery-5 img:nth-child(3),
.gallery-grid.gallery-5 img:nth-child(4),
.gallery-grid.gallery-5 img:nth-child(5) {
    grid-column: span 2;
}

/* 6 images - 2 rows of 3 */
.gallery-grid.gallery-6 {
    grid-template-columns: repeat(3, 1fr);
}

/* 7-9 images - 3 columns */
.gallery-grid.gallery-7,
.gallery-grid.gallery-8,
.gallery-grid.gallery-9 {
    grid-template-columns: repeat(3, 1fr);
}

/* 10-12 images - 3 columns, with last row centered if needed */
.gallery-grid.gallery-10,
.gallery-grid.gallery-11,
.gallery-grid.gallery-12 {
    grid-template-columns: repeat(3, 1fr);
}

/* 13+ images - 4 columns for larger galleries */
.gallery-grid.gallery-large {
    grid-template-columns: repeat(4, 1fr);
}

/* Mobile responsive - stack nicely */
@media (max-width: 1024px) {
    .gallery-grid.gallery-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery-grid.gallery-5 img:nth-child(1),
    .gallery-grid.gallery-5 img:nth-child(2),
    .gallery-grid.gallery-5 img:nth-child(3),
    .gallery-grid.gallery-5 img:nth-child(4),
    .gallery-grid.gallery-5 img:nth-child(5) {
        grid-column: span 1;
    }
    
    .gallery-grid.gallery-large {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .gallery-grid.gallery-2,
    .gallery-grid.gallery-3,
    .gallery-grid.gallery-4,
    .gallery-grid.gallery-5,
    .gallery-grid.gallery-6,
    .gallery-grid.gallery-7,
    .gallery-grid.gallery-8,
    .gallery-grid.gallery-9,
    .gallery-grid.gallery-10,
    .gallery-grid.gallery-11,
    .gallery-grid.gallery-12,
    .gallery-grid.gallery-large {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-grid.gallery-5 img:nth-child(1),
    .gallery-grid.gallery-5 img:nth-child(2),
    .gallery-grid.gallery-5 img:nth-child(3),
    .gallery-grid.gallery-5 img:nth-child(4),
    .gallery-grid.gallery-5 img:nth-child(5) {
        grid-column: span 1;
    }
}

@media (max-width: 480px) {
    .gallery-grid.gallery-2,
    .gallery-grid.gallery-3,
    .gallery-grid.gallery-4,
    .gallery-grid.gallery-5,
    .gallery-grid.gallery-6,
    .gallery-grid.gallery-7,
    .gallery-grid.gallery-8,
    .gallery-grid.gallery-9,
    .gallery-grid.gallery-10,
    .gallery-grid.gallery-11,
    .gallery-grid.gallery-12,
    .gallery-grid.gallery-large {
        grid-template-columns: 1fr;
    }
}
.gallery-grid img { 
    border-radius: 8px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.gallery-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.case-study-testimonial { text-align: center; }
.case-study-testimonial blockquote { font-family: var(--font-heading); font-size: 2rem; line-height: 1.4; max-width: 800px; margin: 0 auto 1.5rem auto; }
.case-study-testimonial cite { font-style: normal; font-weight: 700; color: var(--color-secondary); }
.case-study-nav { 
    padding: 4rem 0; 
    text-align: center;
    background: linear-gradient(135deg, rgba(10, 10, 26, 0.5), rgba(26, 26, 46, 0.3));
}

/* Services Page */
.services-tabs-section { padding: 4rem 0; }
.tabs-wrapper { max-width: 1000px; margin: 0 auto; }
.tab-nav { display: flex; justify-content: center; border-bottom: 1px solid rgba(245,245,245,0.2); margin-bottom: 3rem; }
.tab-button { background: none; border: none; color: rgba(245,245,245,0.7); font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; padding: 1rem 2rem; cursor: pointer; position: relative; }
.tab-button::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: var(--color-primary); transform: scaleX(0); transition: transform 0.3s ease; }
.tab-button.active { color: var(--color-light); }
.tab-button.active::after { transform: scaleX(1); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.service-intro { text-align: center; max-width: 800px; margin: 0 auto 4rem auto; }
.production-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.production-card { 
    background: #222; 
    border-radius: 8px; 
    overflow: hidden;
    position: relative;
    transform: translateY(0);
    transition: transform 0.6s ease;
}

.production-card img { 
    height: 250px; 
    width: 100%; 
    object-fit: cover;
    transform: translateY(0);
    transition: transform 0.8s ease;
}

.production-card:hover {
    transform: translateY(-8px);
}

.production-card:hover img {
    transform: translateY(-5px) scale(1.05);
}

.production-card-content { 
    padding: 2rem;
    position: relative;
    z-index: 2;
}
/* OLD SOLUTIONS GRID - DEPRECATED */
.solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; text-align: center; }
.solution-item { background: #222; padding: 2.5rem; border-radius: 8px; }
.solution-item svg { width: 50px; height: 50px; color: var(--color-primary); margin-bottom: 1rem; }

/* ========================================
   NEW EQUIPMENT SHOWCASE - ENHANCED
   ======================================== */

.intro-highlight {
    font-size: 1.3rem;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
    color: rgba(245, 245, 245, 0.9);
}

.equipment-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin: 4rem 0;
}

.equipment-category {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.equipment-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.equipment-category:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(255, 107, 53, 0.2), 0 10px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 107, 53, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.equipment-category:hover::before {
    opacity: 1;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.category-icon {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.audio-icon {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 107, 53, 0.05));
    border: 1px solid rgba(255, 107, 53, 0.3);
}

.video-icon {
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.2), rgba(65, 105, 225, 0.05));
    border: 1px solid rgba(65, 105, 225, 0.3);
}

.lighting-icon {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.2), rgba(255, 210, 63, 0.05));
    border: 1px solid rgba(255, 210, 63, 0.3);
}

.camera-icon {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(138, 43, 226, 0.05));
    border: 1px solid rgba(138, 43, 226, 0.3);
}

.equipment-category:hover .audio-icon {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 107, 53, 0.1));
    transform: scale(1.05);
}

.equipment-category:hover .video-icon {
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.3), rgba(65, 105, 225, 0.1));
    transform: scale(1.05);
}

.equipment-category:hover .lighting-icon {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.3), rgba(255, 210, 63, 0.1));
    transform: scale(1.05);
}

.equipment-category:hover .camera-icon {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(138, 43, 226, 0.1));
    transform: scale(1.05);
}

.category-icon svg {
    width: 48px;
    height: 48px;
}

.audio-icon svg {
    stroke: var(--color-primary);
}

.video-icon svg {
    stroke: var(--color-accent);
}

.lighting-icon svg {
    stroke: var(--color-secondary);
}

.camera-icon svg {
    stroke: #8A2BE2; /* Blue Violet */
}

.category-header h3 {
    font-size: 2rem;
    margin: 0;
    color: var(--color-light);
    font-family: var(--font-heading);
}

.category-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(245, 245, 245, 0.8);
    margin-bottom: 2rem;
}

.equipment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.equipment-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.equipment-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(8px);
}

.equipment-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-light);
    margin-bottom: 0.5rem;
}

.equipment-specs {
    font-size: 0.95rem;
    color: rgba(245, 245, 245, 0.6);
    font-style: italic;
}

.category-cta {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.equipment-btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
}

.equipment-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.35);
}

/* Single CTA Button Section */
.equipment-cta-section {
    text-align: center;
    margin: 4rem 0 2rem 0;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.equipment-btn-large {
    display: inline-block;
    padding: 1.25rem 3rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.equipment-btn-large:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.4);
}

/* Equipment Highlights Banner */
.equipment-highlights {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 210, 63, 0.05));
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: 20px;
    padding: 3rem;
    margin-top: 4rem;
}

.equipment-highlights h3 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Fixed 2 columns per row */
    gap: 2.5rem;
    max-width: 900px; /* Constrain width for better layout */
    margin: 0 auto; /* Center the grid */
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.highlight-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    flex-shrink: 0;
}

.highlight-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.highlight-text strong {
    font-size: 1.1rem;
    color: var(--color-light);
}

.highlight-text span {
    font-size: 0.95rem;
    color: rgba(245, 245, 245, 0.7);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .equipment-showcase-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .equipment-category {
        padding: 2rem;
    }
    
    .category-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .category-header h3 {
        font-size: 1.75rem;
    }
    
    .equipment-highlights {
        padding: 2rem;
    }
    
    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .equipment-highlights h3 {
        font-size: 2rem;
    }
}
.approach-section { background-color: #222; padding: 4rem 0; }
.approach-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.approach-image img { border-radius: 8px; }
.approach-content h2 { font-size: 2.5rem; }

/* About Page */
.story-section-detailed { 
    background-color: #222; 
    padding: 4rem 0;
}
.story-container-detailed { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: center; }
.story-image-detailed img { border-radius: 8px; }
.team-section { background-color: var(--color-dark); }
/* Founder Section - Modern, Impactful Design */
.team-member.founder { 
    display: grid; 
    grid-template-columns: 400px 1fr; 
    gap: 4rem; 
    align-items: center; 
    text-align: left; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.team-photo-wrapper { 
    width: 100%; 
    height: auto;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.team-photo-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 210, 63, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.team-photo-wrapper:hover::before {
    opacity: 1;
}

.team-photo { 
    width: 100%; 
    height: auto;
    display: block;
    object-fit: cover; 
    transition: transform 0.6s ease, filter 0.4s ease;
    /* Clean, professional look - no heavy filters */
    filter: contrast(1.05) brightness(1.02);
}

.team-photo-wrapper:hover .team-photo { 
    transform: scale(1.05);
    filter: contrast(1.1) brightness(1.05);
}

.team-member-content {
    padding: 2rem 0;
}

.team-member-content h3 {
    font-size: 2.5rem;
    color: var(--color-light);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.team-title { 
    font-weight: 600; 
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    display: block;
    letter-spacing: 0.5px;
}

.team-member-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(245, 245, 245, 0.9);
}
.process-section { background-color: #222; }
.process-steps { max-width: 800px; margin: 4rem auto 0; }
.process-step { display: flex; gap: 2rem; margin-bottom: 3rem; }
.process-number { font-family: var(--font-heading); font-size: 3rem; line-height: 1; color: var(--color-primary); }
.process-content h3 { margin-bottom: 0.5rem; }

/* Insights & Articles */
.insights-grid-section { background-color: #222; }
.insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.article-card { text-decoration: none; color: var(--color-light); background: var(--color-dark); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.article-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.article-image { height: 220px; overflow: hidden; }
.article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.article-card:hover .article-image img { transform: scale(1.1); }
.article-content { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; }
.article-category { color: var(--color-secondary); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
.article-content h3 { margin: 0.5rem 0; font-size: 1.5rem; }
.article-content p { color: rgba(245,245,245,0.7); flex-grow: 1; }
.read-more { margin-top: 1rem; font-weight: 700; color: var(--color-primary); }
.article-hero { min-height: 50vh; background-size: cover; background-position: center; }
.article-hero-content { max-width: 1200px; }
.back-link { color: var(--color-light); text-decoration: none; display: inline-block; margin-bottom: 2rem; font-weight: 700; }
.article-meta { font-size: 1rem; color: rgba(245,245,245,0.8); }
.article-body-section { padding: 5rem 0; }
.article-container { max-width: 1200px; margin: 0 auto; }
.article-container h2 { margin-top: 3rem; margin-bottom: 1.5rem; }
.article-container p, .article-container ul { margin-bottom: 1.5rem; font-size: 1.1rem; line-height: 1.8; color: rgba(245,245,245,0.9); }
.article-container ul { padding-left: 2rem; }
.article-container a { color: var(--color-primary); }
.article-lead { font-size: 1.3rem; font-weight: 500; color: var(--color-light); }
.article-container blockquote { border-left: 4px solid var(--color-primary); padding-left: 2rem; margin: 3rem 0; font-family: var(--font-heading); font-size: 1.5rem; font-style: italic; }

/* Contact Page - Modern Redesign */
.contact-hero-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.contact-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(217, 121, 65, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(232, 180, 74, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.contact-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.contact-hero-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--color-light) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-hero-content p {
    font-size: 1.2rem;
    color: rgba(245, 245, 245, 0.8);
    margin-bottom: 3rem;
    line-height: 1.7;
}

.contact-highlights {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-highlight {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.highlight-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.highlight-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-dark);
}

.contact-highlight h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-light);
}

.contact-highlight p {
    font-size: 0.95rem;
    color: rgba(245, 245, 245, 0.7);
    margin: 0;
}

.contact-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-visual-card {
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.contact-visual-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(217, 121, 65, 0.1) 0%, rgba(232, 180, 74, 0.1) 100%);
    opacity: 0.5;
    pointer-events: none;
}

.contact-visual-header {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
}

.contact-visual-dots {
    display: flex;
    gap: 0.5rem;
}

.contact-visual-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
}

.contact-visual-dots span:nth-child(2) {
    background: var(--color-secondary);
}

.contact-visual-dots span:nth-child(3) {
    background: var(--color-accent);
}

.contact-visual-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.contact-visual-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-light);
}

.contact-visual-content p {
    color: rgba(245, 245, 245, 0.8);
    margin-bottom: 2rem;
}

.contact-form-section {
    background-color: var(--color-dark);
    padding: 6rem 0;
}

.contact-form-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-form-card {
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 20px;
    padding: 3rem;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    position: relative;
}

.contact-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(217, 121, 65, 0.05) 0%, rgba(232, 180, 74, 0.05) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.form-header {
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
}

.form-header h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-light);
}

.form-header p {
    color: rgba(245, 245, 245, 0.8);
    font-size: 1.1rem;
}

.modern-form {
    position: relative;
    z-index: 2;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-light);
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
    color: var(--color-light);
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(217, 121, 65, 0.2);
    background: rgba(0,0,0,0.5);
}

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

.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    width: 100%;
}

.btn-large svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.btn-large:hover svg {
    transform: translateX(3px);
}

.contact-info-card {
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 20px;
    padding: 3rem;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    height: fit-content;
    position: relative;
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(217, 121, 65, 0.05) 0%, rgba(232, 180, 74, 0.05) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.contact-info-header {
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
}

.contact-info-header h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-light);
}

.contact-info-header p {
    color: rgba(245, 245, 245, 0.8);
    line-height: 1.6;
}

.contact-methods {
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

.contact-method {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}

.contact-method:hover {
    background: rgba(0,0,0,0.3);
    border-color: rgba(217, 121, 65, 0.3);
    transform: translateY(-2px);
}

.method-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.method-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-dark);
}

.method-content h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-light);
}

.method-content p,
.method-content a {
    color: rgba(245, 245, 245, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.method-content a:hover {
    color: var(--color-primary);
}

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

.social-section h4 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--color-light);
}

.social-links-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-links-contact a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    color: rgba(245, 245, 245, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links-contact a:hover {
    background: rgba(0,0,0,0.3);
    border-color: rgba(217, 121, 65, 0.3);
    color: var(--color-primary);
    transform: translateX(5px);
}

.social-links-contact svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

#form-status {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 600;
    display: none;
}

#form-status.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    display: block;
}

#form-status.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    display: block;
}

/* Responsive */
@media (max-width: 992px) {
    .story-container-home, .approach-container, .case-study-grid, .story-container-detailed, .team-member.founder { grid-template-columns: 1fr; }
    .story-image-home, .approach-image, .story-image-detailed { order: -1; margin-bottom: 2rem; }
    .story-content-home, .approach-content, .story-content-detailed, .team-member.founder { text-align: center; }
    
    /* Founder section mobile */
    .team-photo-wrapper { 
        margin: 0 auto 2rem auto; 
        max-width: 350px;
    }
    
    .team-member-content h3 {
        font-size: 2rem;
    }
    
    .team-member-content p {
        font-size: 1.1rem;
    }
}

/* Enhanced Mobile Optimization */
@media (max-width: 768px) {
    /* Page Hero Subheaders - Responsive sizing */
    .hero p, .page-hero p {
        font-size: 1.2rem !important;
        line-height: 1.5;
        padding: 0 1rem;
    }
    
    /* Logo and Header - CRITICAL: Much smaller on mobile */
    .logo, img.logo {
        height: 30px !important; /* Dramatically smaller */
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        object-fit: contain;
        aspect-ratio: auto !important; /* Maintain natural aspect ratio */
    }
    .main-header.scrolled .logo {
        height: 35px; /* Same size when scrolled on mobile */
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        object-fit: contain;
        aspect-ratio: auto !important; /* Maintain natural aspect ratio */
    }
    
    /* Mobile Navigation Toggle */
    .mobile-nav-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-around;
        width: 2rem;
        height: 2rem;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
    }
    
    .hamburger {
        width: 2rem;
        height: 3px;
        background: var(--color-light);
        border-radius: 2px;
        transition: transform 300ms ease, top 300ms ease, opacity 300ms ease;
    }
    
    .hamburger::before, .hamburger::after {
        content: '';
        position: absolute;
        width: 2rem;
        height: 3px;
        background: var(--color-light);
        border-radius: 2px;
        transition: transform 300ms ease, top 300ms ease, opacity 300ms ease;
    }
    
    .hamburger::before { top: -8px; }
    .hamburger::after { top: 8px; }
    
    .mobile-nav-toggle[aria-expanded="true"] .hamburger {
        background: transparent;
    }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::before {
        top: 0;
        transform: rotate(45deg);
        background: var(--color-light);
    }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
        top: 0;
        transform: rotate(-45deg);
        background: var(--color-light);
    }
    
    /* Mobile Navigation Menu - Right Side Panel */
    .nav-list {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 60%;
        max-width: 400px;
        height: 100vh;
        background: rgba(20, 20, 40, 0.85);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 1000;
    }
    
    .nav-list[data-visible="true"] {
        transform: translateX(0);
    }
    
    .nav-list a {
        font-size: 1.3rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 1rem 2rem;
        width: 100%;
        text-align: left;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        overflow: hidden;
        color: var(--color-light);
    }
    
    .nav-list a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .nav-list a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-primary);
        transform: translateX(8px);
    }
    
    .nav-list a:hover::before {
        transform: scaleY(1);
    }
    
    .nav-list a.active {
        background: rgba(255, 255, 255, 0.12);
        color: var(--color-primary);
    }
    
    .nav-list a.active::before {
        transform: scaleY(1);
    }
    
    .nav-list .btn-primary {
        font-size: 1.3rem;
        padding: 1rem 2rem;
        border-radius: 12px;
        margin-top: 1rem;
    }
    
    /* Ensure hamburger is properly positioned on mobile */
    .main-header .container {
        padding: 0 1rem; /* Add padding to prevent cutoff */
    }
    
    /* Typography - Better mobile readability */
    h1 { 
        font-size: clamp(4rem, 8vw, 6rem) !important;
        line-height: 1.1;
    }
    h2 { 
        font-size: clamp(2rem, 6vw, 3rem);
        line-height: 1.2;
    }
    h3 { 
        font-size: clamp(1.5rem, 5vw, 2rem);
        line-height: 1.3;
    }
    
    /* Buttons - Touch-friendly sizing */
    .btn {
        padding: 1rem 2rem;
        font-size: 1rem;
        min-height: 48px; /* Minimum touch target size */
        border-radius: 12px;
    }
    
    /* Sections - Better mobile spacing */
    section {
        padding: 4rem 0;
    }
    
    /* Hero sections - Mobile optimized */
    .hero, .page-hero {
        min-height: 60vh;
        padding: 6rem 0 4rem 0;
    }
    
    /* Work cards - Stack nicely on mobile */
    .work-grid,
    .work-grid.balanced-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    
    /* Reset all cards to full width on mobile */
    .work-grid.balanced-grid .work-card[data-row-size="1"],
    .work-grid.balanced-grid .work-card[data-row-size="2"],
    .work-grid.balanced-grid .work-card[data-row-size="3"] {
        grid-column: span 1 !important;
        max-width: 100% !important;
    }
    
    /* Fix difference grid mobile layout */
    .difference-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        margin-top: 2rem;
    }
    
    .difference-item {
        gap: 1rem;
    }
    
    /* Better magnetic effects on touch devices */
    .btn:hover, .work-card:hover {
        transform: translateY(-2px) scale(1.01); /* Reduced for mobile */
    }
    
    /* Floating navigation improvements - More dramatic on mobile */
    .main-header {
        padding: 2rem 0;
    }
    .main-header.scrolled {
        padding: 0.6rem 0;
    }
    }
    .footer-logo {
        height: 80px; /* Smaller footer logo on mobile */
    }
    /* Hero logo removed */
    /* Page hero logo removed */
    .intro-section::before {
        width: 120px;
        height: 120px;
        top: 10%;
        right: -5%;
    }
    .main-footer::before {
        display: none; /* Removed transparent background logo on mobile too */
    }
    
    /* Contact Page Mobile */
    .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .contact-form-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .contact-hero-content h2 {
        font-size: 2rem;
    }
    .contact-form-card,
    .contact-info-card {
        padding: 2rem;
    }
    .contact-method {
        padding: 1rem;
    }
    .social-links-contact a {
        padding: 0.75rem;
    }
    
    /* Mobile image adjustments for 7:4 aspect ratio */
    .production-card img,
    .gallery-grid img,
    .work-card-media,
    .article-image {
        height: 240px; /* Slightly smaller on mobile but maintaining 7:4 ratio */
    }
    
    .nav-list {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 60%;
        max-width: 400px;
        height: auto;
        min-height: min-content;
        max-height: 100vh;
        overflow-y: auto;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.5rem;
        background: rgba(20, 20, 40, 0.85);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
        border-bottom-left-radius: 16px;
        transform: translateX(100%);
        transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 1000;
        padding: 2rem 1.5rem 1.5rem 1.5rem;
    }
    .nav-list[data-visible="true"] {
        transform: translateX(0%);
    }
    
    /* Mobile menu overlay for left side */
    .nav-list::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 40%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 350ms ease;
        z-index: -1;
    }
    
    .nav-list[data-visible="true"]::after {
        opacity: 1;
        pointer-events: auto;
    }
    /* Mobile navigation links styling */
    .nav-list li {
        text-align: center;
        opacity: 1 !important;
        transform: translateY(0);
        transition: all 0.3s ease;
    }
    
    .nav-list[data-visible="true"] li {
        opacity: 1;
        transform: translateY(0);
    }
    
    .nav-list[data-visible="true"] li:nth-child(1) { transition-delay: 0.1s; }
    .nav-list[data-visible="true"] li:nth-child(2) { transition-delay: 0.15s; }
    .nav-list[data-visible="true"] li:nth-child(3) { transition-delay: 0.2s; }
    .nav-list[data-visible="true"] li:nth-child(4) { transition-delay: 0.25s; }
    .nav-list[data-visible="true"] li:nth-child(5) { transition-delay: 0.3s; }
    .nav-list[data-visible="true"] li:nth-child(6) { transition-delay: 0.35s; }
    
    .nav-list a {
        font-size: 1.2rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 1rem 1.5rem;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: block;
        width: 100%;
        position: relative;
        color: var(--color-light);
    }
    
    .nav-list a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .nav-list a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-primary);
        transform: translateX(8px);
    }
    
    .nav-list a:hover::before {
        transform: scaleY(1);
    }
    
    .nav-list a.active {
        background: rgba(255, 255, 255, 0.12);
        color: var(--color-primary);
    }
    
    .nav-list a.active::before {
        transform: scaleY(1);
    }
    
    .nav-list a:not(.btn):hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-secondary);
        transform: scale(1.05);
    }
    
    /* Mobile Menu Footer */
    .mobile-menu-footer {
        position: relative;
        width: 100%;
        margin-top: 1.5rem;
        padding: 1.5rem 0 0.5rem 0;
        background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 26, 0.4) 100%);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
    }
    
    .mobile-menu-footer-content {
        text-align: center;
    }
    
    .mobile-menu-tagline {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-light);
        margin-bottom: 0.5rem;
        letter-spacing: 0.5px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .mobile-menu-location {
        font-size: 0.75rem;
        color: rgba(245, 245, 245, 0.6);
        margin: 0;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
    
    .mobile-nav-toggle {
        display: block;
        position: relative;
        z-index: 9999;
        background: transparent;
        border: 0;
        width: 2.5rem;
        height: 2.5rem;
        cursor: pointer;
        margin-left: auto;
        align-self: center;
    }
    .hamburger, .hamburger::before, .hamburger::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 3px;
        background: var(--color-light);
        border-radius: 2px;
        transition: transform 300ms ease, top 300ms ease, opacity 300ms ease;
    }
    .main-header.scrolled .hamburger, .main-header.scrolled .hamburger::before, .main-header.scrolled .hamburger::after {
        background: var(--color-light);
    }
    .hamburger::before { top: -8px; }
    .hamburger::after { top: 8px; }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger {
        background: transparent;
    }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::before {
        top: 0;
        transform: rotate(45deg);
        background: var(--color-light);
    }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
        top: 0;
        transform: rotate(-45deg);
        background: var(--color-light);
    }
    .services-grid, .production-grid, .solutions-grid { grid-template-columns: 1fr; }
    .contact-container { gap: 3rem; }
    
    /* Case Study Hero Mobile Styles */
    .case-study-hero {
        min-height: 80vh; /* Slightly smaller on mobile */
    }
    
    /* Case study hero logo removed */
    
    .case-study-hero h1 {
        font-size: clamp(2.5rem, 8vw, 3.5rem); /* INCREASED: More impactful on mobile */
        animation: none; /* Disable animation on mobile for performance */
    }
    
    .case-study-hero p {
        font-size: 1.2rem; /* INCREASED: Better readability on mobile */
    }
    
    .btn-link {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }
}


/* ========================================
   CRITICAL HERO FIX (OVERRIDE)
   ======================================== */
section.hero .hero-content,
section.page-hero .hero-content,
section.page-hero .page-hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important; /* Ensure it's full-width */
}


/* ========================================
   SCROLLYTELLING ANIMATIONS
   ======================================== */

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   PRE-LOADER TO PREVENT HEADER/FOOTER FLICKER
   ======================================== */

body {
    opacity: 0; /* Hide the page by default */
    transition: opacity 0.3s ease-in;
}

body.is-loaded {
    opacity: 1; /* Fade the page in when ready */
}

/* ========================================
   TESTIMONIAL SLIDER STYLES
   ======================================== */

.testimonial-slider-section {
    text-align: center;
    padding: 4rem 2rem;
    background-color: #0A0A1A; /* Dark background */
    color: white;
}

.testimonial-slider {
    max-width: 800px;
    margin: 2rem auto 0;
    position: relative;
    overflow: hidden; /* This is the key */
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    flex-shrink: 0;
    width: 100%;
    padding: 1rem 10%; /* 10% padding on sides */
    box-sizing: border-box;
    text-align: center;
}

.slide .quote {
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.4;
}

.slide .author {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 1.5rem;
    color: #FF6B35; /* Brand Orange */
}

.slide .title {
    font-size: 0.9rem;
    opacity: 0.7;
}

.slider-controls {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    pointer-events: none; /* Let clicks go through */
    /* --- NEW STYLES BELOW --- */
    padding: 0 1rem; /* Add padding so arrows aren't on the edge */
    box-sizing: border-box; /* Include padding in width */
}

.slider-arrow {
    pointer-events: all; /* Make buttons clickable */
    background: rgba(255, 255, 255, 0.1); /* Glass background */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    /* NEW - Make them round */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    /* NEW - Better font/icon styling */
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 50px; /* Center the arrow vertically */
    text-align: center;
}

.slider-arrow:hover {
    background: #FF6B35; /* Brand Orange */
    border-color: #FF6B35;
    transform: scale(1.1);
}

/* Remove the old margin rules */
#prev-slide { /* No new rules needed */ }
#next-slide { /* No new rules needed */ }


/* ========================================
   GLOBAL MAIN PADDING (Fix Header Overlap)
   ======================================== */
main {
    padding-top: 120px !important; /* Push ALL content down below the fixed header */
}

/* Exception for Home Page (which has a full-screen hero) */
body.home-page main {
    padding-top: 0 !important;
}


/* ========================================
   STABLE LAYOUT HEADER (Logo Left, Nav Center)
   ======================================== */

/* --- BASE HEADER --- */
.header-stable {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 120px; /* Was 80px - Taller to accommodate massive logo */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    box-sizing: border-box;
    background-color: rgba(10, 10, 26, 0.5);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 9000;
}

/* --- LEFT: BADGE LOGO --- */
.header-left {
    flex: 1; /* Takes up left space */
    display: flex;
    justify-content: flex-start;
}

.logo-badge {
    /* MASSIVE SIZE INCREASE */
    height: 250px !important; /* Was 140px - Approximately 2x larger */
    width: auto !important;
    max-width: none !important; /* Prevent any max-width constraints */
    min-width: auto !important; /* Prevent any min-width constraints */
    
    /* MAINTAIN ASPECT RATIO */
    object-fit: contain !important;
    aspect-ratio: auto !important; /* Preserve natural aspect ratio */
    
    /* REMOVE BADGE STYLING */
    background-color: transparent !important; /* No more white circle */
    box-shadow: none !important; /* Remove the shadow */
    border-radius: 0 !important; /* No formatting */
    padding: 0 !important;
    
    /* SPACING FIX: Push it down further to give it "air" at the top */
    position: relative !important;
    top: 50px !important; /* Increased from 35px - More breathing room */
    
    /* Add a subtle drop shadow to the IMAGE itself so it pops off the glass */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)) !important;
    
    /* ANIMATION FIX: Kill the wobble/scale animation */
    transition: none !important;
    transform: none !important;
}

/* FORCE KILL HOVER - No movement on hover */
.logo-badge:hover {
    transform: none !important; /* Ensure it doesn't move on hover */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)) !important; /* Keep shadow consistent */
}

/* --- CENTER: NAV LINKS --- */
.header-center {
    flex: 2; /* Takes up center space */
    display: flex;
    justify-content: center;
}

.nav-links {
    display: flex;
    gap: 3rem; /* Nice wide spacing */
    list-style: none;
    margin: 0; padding: 0;
}

.nav-links a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px; /* INCREASED: More dramatic spacing */
    font-size: 1.1rem; /* INCREASED: 0.9rem → 1.1rem (22% larger) */
    font-weight: 600; /* INCREASED: 500 → 600 (bolder) */
    white-space: nowrap; /* Prevent wrapping */
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

.nav-links a:hover { 
    color: #FF6B35; 
}

/* Active state indicator */
.nav-links a.active {
    color: var(--color-primary);
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* --- RIGHT: MOBILE TOGGLE --- */
.header-right {
    flex: 1; /* Balances the left side */
    display: flex;
    justify-content: flex-end;
}

.mobile-nav-toggle { display: none; } /* Hidden on desktop */
.mobile-menu-footer { display: none; } /* Hidden on desktop */

/* --- MOBILE OVERRIDES (768px) --- */
@media (max-width: 768px) {
    /* CRITICAL: All H1 titles must fit on mobile */
    h1,
    .page-hero h1,
    .case-study-hero h1,
    .article-hero h1,
    .contact-title-section h1,
    .contact-form-section h1,
    section h1 {
        font-size: 1.4rem !important; /* Extremely reduced for mobile fit */
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .header-stable { 
        padding: 0 15px; 
        height: 60px; 
        overflow: visible; 
    }
    
    /* Hide desktop nav */
    .header-center { display: none; }
    
    /* Shrink Logo for Mobile */
    .logo-badge { 
        height: 42px !important; /* Increased by 40% from 30px */
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        top: 0; 
        box-shadow: none;
        object-fit: contain !important;
        aspect-ratio: auto !important;
    }
    
    /* Show "Equinox Audio Visuals" text on mobile */
    .logo-text-mobile {
        display: inline-block !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        color: #FF6B35 !important; /* Brand Orange */
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-left: 0.5rem !important;
    }
    
    /* Show Hamburger */
    .mobile-nav-toggle { display: block; background: none; border: none; cursor: pointer; }
    /* (Add hamburger icon styles here if needed) */
    .hamburger {
        display: block;
        width: 30px;
        height: 3px;
        background-color: white;
        position: relative;
        transition: background-color 0.3s ease;
    }
    .hamburger::before, .hamburger::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 3px;
        background-color: white;
        transition: transform 0.3s ease;
    }
    .hamburger::before { top: -8px; }
    .hamburger::after { top: 8px; }

    body.nav-open .hamburger { background-color: transparent; }
    body.nav-open .hamburger::before { top: 0; transform: rotate(45deg); }
    body.nav-open .hamburger::after { top: 0; transform: rotate(-45deg); }
    
    /* Mobile Dropdown Logic */
    body.nav-open .header-center {
        display: flex;
        position: fixed;
        top: 80px;
        right: 0;
        left: auto;
        width: 60%;
        max-width: 400px;
        height: calc(100vh - 80px);
        background: rgba(20, 20, 40, 0.85);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
        align-items: flex-start;
        padding: 3rem 2rem;
        z-index: 8999;
    }
    body.nav-open .nav-links {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        align-items: flex-start;
    }
    
    body.nav-open .nav-links a {
        padding: 1rem 1.5rem;
        width: 100%;
        text-align: left;
        border-radius: 12px;
        position: relative;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    body.nav-open .nav-links a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    body.nav-open .nav-links a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-primary);
        transform: translateX(8px);
    }
    
    body.nav-open .nav-links a:hover::before {
        transform: scaleY(1);
    }
    
    /* Mobile menu backdrop overlay */
    body.nav-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 8998;
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* ========================================
   PROJECT NAVIGATION
   ======================================== */
.project-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ========================================
   IMAGE LIGHTBOX
======================================== */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    animation: lightboxZoom 0.3s ease;
}

@keyframes lightboxZoom {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 10001;
}

.lightbox-close:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: rotate(90deg);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.lightbox-nav:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: 2rem;
}

.lightbox-next {
    right: 2rem;
}

.lightbox-counter {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
}

/* Make gallery images clickable */
.gallery-grid img {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-grid img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.3);
}

@media (max-width: 768px) {
    .lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    .lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    .lightbox-prev {
        left: 1rem;
    }
    
    .lightbox-next {
        right: 1rem;
    }
    
    .lightbox-counter {
        bottom: 1rem;
        font-size: 0.8rem;
    }
}

.nav-btn.glass-btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: rgba(10, 10, 26, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-btn.glass-btn:hover {
    border-color: #FF6B35;
    color: #FF6B35;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

@media (max-width: 768px) {
    .project-nav-container {
        flex-direction: column;
        gap: 1rem;
        padding: 2rem 1rem;
    }
    
    .nav-btn.glass-btn {
        width: 100%;
        text-align: center;
    }
}

/* ========================================
   VIDEO TESTIMONIALS
   ======================================== */
.video-testimonials-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, rgba(26, 26, 46, 0.5) 0%, rgba(10, 10, 26, 0.8) 100%);
}

.video-testimonials-section h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.video-testimonials-section .section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 4rem;
}

.video-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.video-testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.video-testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.2), 0 8px 20px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 107, 53, 0.3);
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
    overflow: hidden;
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-testimonial-content {
    padding: 1.5rem;
}

.video-testimonial-content h3 {
    font-size: 1.3rem;
    color: var(--color-secondary);
    margin-bottom: 0.25rem;
}

.video-testimonial-content .client-role {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
    font-style: italic;
}

.video-testimonial-content p:last-child {
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .video-testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .video-testimonials-section h2 {
        font-size: 2rem;
    }
}

/* ========================================
   THEME TOGGLE & ACCESSIBILITY MENU
   ======================================== */

/* Theme Toggle Button */
#theme-toggle {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1000;
}

#theme-toggle:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.15);
}

#theme-toggle svg {
    width: 24px;
    height: 24px;
    fill: var(--color-primary);
    transition: transform 0.5s ease;
}

#theme-toggle.rotating svg {
    transform: rotate(180deg);
}

/* Accessibility Menu Button */
#accessibility-menu-toggle {
    position: fixed;
    bottom: 6rem;
    left: 2rem;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1000;
}

#accessibility-menu-toggle:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.15);
}

#accessibility-menu-toggle svg {
    width: 24px;
    height: 24px;
    fill: var(--color-accent);
}

/* Accessibility Menu Panel */
#accessibility-menu {
    position: fixed;
    bottom: 10rem;
    left: 2rem;
    width: 300px;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
}

#accessibility-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[data-theme="light"] #accessibility-menu {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
}

.accessibility-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .accessibility-menu-header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.accessibility-menu-header h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0;
}

.accessibility-option {
    margin-bottom: 1rem;
}

.accessibility-option label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.accessibility-option label:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .accessibility-option label:hover {
    background: rgba(0, 0, 0, 0.03);
}

.accessibility-option input[type="checkbox"] {
    width: 40px;
    height: 20px;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
}

.accessibility-option input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
}

.accessibility-option input[type="checkbox"]:checked {
    background: var(--color-primary);
}

.accessibility-option input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

.accessibility-option input[type="range"] {
    width: 100%;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    #theme-toggle,
    #accessibility-menu-toggle {
        bottom: 1.5rem;
        left: 1.5rem;
        width: 45px;
        height: 45px;
    }
    
    #accessibility-menu-toggle {
        bottom: 5.5rem;
    }
    
    #accessibility-menu {
        left: 1.5rem;
        right: 1.5rem;
        width: auto;
        bottom: 9rem;
    }
}