/* Base Layout - Full Width with Golden Ratio - v13 */


:root {
    --golden-ratio: 1.618;
    --golden-ratio-small: 0.618;
    --container-width: 100%;
    --section-padding: 2rem;
    --grid-gap: 2rem;
    --base-font: 1rem;
    --base-spacing: 1rem;
    --accent-color: #666666;
    
    /* Swiss Design System Variables */
    --grid-unit: 24px; /* Base grid unit for Swiss-style spacing */
    --type-scale-small: 0.75rem;   /* 12px */
    --type-scale-body: 1rem;       /* 16px */
    --type-scale-h3: 1.25rem;      /* 20px */
    --type-scale-h2: 1.5rem;       /* 24px */
    --type-scale-h1: 2rem;         /* 32px */
    --type-scale-display: 3rem;    /* 48px */
    --type-scale-hero: 4rem;       /* 64px */
    
    /* Swiss spacing based on grid units */
    --space-xs: calc(var(--grid-unit) * 0.5);  /* 12px */
    --space-sm: var(--grid-unit);              /* 24px */
    --space-md: calc(var(--grid-unit) * 2);    /* 48px */
    --space-lg: calc(var(--grid-unit) * 3);    /* 72px */
    --space-xl: calc(var(--grid-unit) * 4);    /* 96px */
    --space-2xl: calc(var(--grid-unit) * 6);   /* 144px */
    
    /* Swiss color system */
    --color-primary: #ffffff;
    --color-secondary: #cccccc;
    --color-tertiary: #666666;
    --color-accent-red: #ff0000;
    --color-background: #1a1a1a;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background: #000000;
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Full Page Rothko Background */
.page-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    /* Hide behind video sections */
    pointer-events: none;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --scroll-y: 0;
    --primary-hue: 0;
    --primary-sat: 80;
    --primary-light: 30;
    --secondary-hue: 15;
    --secondary-sat: 70;
    --secondary-light: 25;
    --accent-hue: 350;
    --accent-sat: 60;
    --accent-light: 35;
    --rect1-x: 20%;
    --rect1-y: 15%;
    --rect1-w: 60%;
    --rect1-h: 70%;
    --rect2-x: 25%;
    --rect2-y: 20%;
    --rect2-w: 50%;
    --rect2-h: 60%;
}

.page-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light));
    z-index: 1;
    /* Optimized transition - reduced from 10s to 6s */
    transition: background 6s cubic-bezier(0.618, 0, 0.382, 1);
    /* Simplified texture - removed heavy blur */
    background-image: 
        radial-gradient(circle at 30% 70%, rgba(255,255,255,0.015) 0%, transparent 40%);
    /* Use transform instead of filter for better performance */
    will-change: background;
}

.page-background::after {
    content: '';
    position: absolute;
    top: var(--rect1-y);
    left: var(--rect1-x);
    width: var(--rect1-w);
    height: var(--rect1-h);
    background: hsl(var(--secondary-hue), var(--secondary-sat), var(--secondary-light));
    z-index: 2;
    /* Reduced transition time and properties */
    transition: background 6s cubic-bezier(0.618, 0, 0.382, 1), 
                top 6s cubic-bezier(0.618, 0, 0.382, 1),
                left 6s cubic-bezier(0.618, 0, 0.382, 1),
                width 6s cubic-bezier(0.618, 0, 0.382, 1),
                height 6s cubic-bezier(0.618, 0, 0.382, 1);
    /* Soft painted edges */
    filter: blur(1px);
    box-shadow: 
        inset 0 0 30px rgba(0, 0, 0, 0.15),
        0 0 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    will-change: background, top, left, width, height;
}

/* Third layer for accent color - optimized */
.page-background .accent-layer {
    position: absolute;
    top: var(--rect2-y);
    left: var(--rect2-x);
    width: var(--rect2-w);
    height: var(--rect2-h);
    background: hsl(var(--accent-hue), var(--accent-sat), var(--accent-light));
    z-index: 3;
    /* Reduced transition scope */
    transition: background 6s cubic-bezier(0.618, 0, 0.382, 1),
                top 6s cubic-bezier(0.618, 0, 0.382, 1),
                left 6s cubic-bezier(0.618, 0, 0.382, 1),
                width 6s cubic-bezier(0.618, 0, 0.382, 1),
                height 6s cubic-bezier(0.618, 0, 0.382, 1);
    /* Soft painted edges with blur */
    filter: blur(1.5px);
    box-shadow: 
        inset 0 0 20px rgba(0, 0, 0, 0.2),
        0 0 12px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    will-change: background, top, left, width, height;
}

/* Header - Full Width */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    background: rgba(0, 0, 0, 0.475) !important;
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 1rem 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    box-sizing: border-box;
}

.header-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    background: transparent !important;
    box-sizing: border-box;
}

.logo-text {
    font-size: 1.25rem;
    font-weight: 400;
    color: #ffffff !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.nav {
    display: flex;
    gap: 2rem;
    background: transparent !important;
    flex-wrap: wrap;
}

.nav-link {
    color: #ffffff !important;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
    background: transparent !important;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--accent-color) !important;
}

.nav-link.active {
    color: var(--accent-color) !important;
    font-weight: 600;
}

/* ===== FEATURED VIDEO SECTION ===== */
.featured-video-section {
    padding: 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.featured-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 70vh;
    width: 100%;
}

.featured-intro h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.featured-intro h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.featured-intro p {
    font-size: 1.125rem;
    color: #cccccc;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.featured-video {
    position: relative;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    background: #000;
}

.featured-video > div {
    height: 100% !important;
    padding: 0 !important;
    position: relative !important;
}

.featured-video iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    object-fit: cover !important;
    border-radius: 0;
}

.featured-intro {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

/* Responsive design for featured video */
@media (max-width: 768px) {
    .featured-container {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .featured-intro {
        padding: 2rem;
        text-align: center;
        min-height: 50vh;
    }
    
    .featured-video {
        min-height: 50vh;
    }
}

@media (max-width: 480px) {
    .featured-intro {
        padding: 1.5rem;
    }
}

/* Hero Section - Full Width with Golden Ratio */
.hero {
    min-height: 70vh;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Hero Video Background */
/* VIDEO BACKGROUND - SIMPLIFIED FULL COVERAGE */
.hero-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.5;
    transition: opacity 1s ease-in-out;
    overflow: hidden;
}

.hero-video-background.hidden {
    opacity: 0;
}

.hero-video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: brightness(0.64) contrast(1.1) saturate(0.8);
}

/* Hero Carousel Dots - Hidden since only video is shown */
.hero-carousel-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: none; /* Hidden since we only show video now */
    gap: 12px;
    z-index: 20;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-dot:hover {
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

.carousel-dot.active {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
}


.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 6rem;
    position: relative;
    z-index: 10;
    color: white;
}

.hero-logo {
    text-align: center;
    position: relative;
    z-index: 10;
    grid-column: 1 / 2;
    justify-self: start;
}

.logo-image {
    max-width: 400px;
    height: auto;
    opacity: 0.9;
    position: relative;
    z-index: 10;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.hero-subtitle {
    grid-column: 2 / 3;
    align-self: center;
    position: relative;
    text-align: left;
    justify-self: start;
}

.subtitle-divider {
    width: 60%;
    height: 1px;
    background: white;
    margin: 0 0 2rem 0;
}

.video-portfolio-title {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 1rem 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
}

.video-portfolio-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60%;
    height: 4px;
    background: var(--accent-color, #ff6b35);
}

/* Water animation container should allow interaction */
.hero {
    cursor: pointer;
}

/* Mobile responsiveness for water animation */
@media (max-width: 768px) {
    .logo-image {
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .logo-image {
        max-width: 120px;
    }
}


.hero-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.8;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    font-feature-settings: "liga" 1, "kern" 1;
    grid-column: 1 / 2;
    align-self: center;
    position: relative;
}

.hero-title::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    left: 0;
    width: 60%;
    height: 8px;
    background: var(--accent-color);
}


.subtitle-label {
    font-size: var(--type-scale-small);
    font-weight: 500; /* Medium weight for Swiss hierarchy */
    color: var(--color-tertiary);
    letter-spacing: 0.15em; /* More controlled spacing */
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    display: block;
    font-feature-settings: "liga" 1, "kern" 1;
}

.subtitle-label::after {
    content: '';
    display: block;
    width: 2rem;
    height: 2px;
    background: var(--accent-color);
    margin-top: 0.5rem;
}

.subtitle-text {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
    font-feature-settings: "liga" 1, "kern" 1;
}

.subtitle-note {
    font-size: 1rem;
    color: #cccccc;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.02em;
    font-feature-settings: "liga" 1, "kern" 1;
}

/* Video Section - Full Width with 3-Column Grid */
.video-section {
    padding: 6rem 0;
    background: #000000;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 10;
}



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

.video-item {
    cursor: pointer;
    /* Fibonacci-based transition timing: 0.618s feels most natural */
    transition: transform 0.618s cubic-bezier(0.618, 0, 0.382, 1);
    position: relative;
    overflow: hidden;
    background: #000000;
    /* Soft painted borders */
    border-radius: 3px;
    filter: contrast(1.02);
    /* Force square aspect ratio */
    aspect-ratio: 1 / 1;
    width: 100%;
}

.video-item:hover {
    /* Simplified hover - removed rotation and filter for performance */
    transform: translateY(-6px) scale(1.02);
    /* Single shadow for performance */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.video-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(102, 102, 102, 0.1) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.video-item:hover::before {
    opacity: 1;
}

.video-media-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Faster transition for responsiveness */
    transition: transform 0.4s cubic-bezier(0.618, 0, 0.382, 1);
    display: block;
    background: #000000;
    border-radius: 2px;
    will-change: transform;
}

.video-gif {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.618, 0, 0.382, 1);
    display: block;
    background: #000000;
    border-radius: 2px;
    will-change: transform;
    cursor: pointer;
    position: relative;
}

.video-gif::after {
    content: attr(data-title);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 5;
    max-width: 80%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-gif:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.video-media-container:hover .video-gif {
    /* Simplified scaling - removed rotation */
    transform: scale(1.03);
}

.video-item:hover .video-gif {
    /* Simple scale only */
    transform: scale(1.03);
}

/* Elegant title overlay with dimming effect */
.video-media-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
    pointer-events: none;
}

.video-media-container:hover::before {
    background: rgba(0, 0, 0, 0.35);
    opacity: 1;
}

.video-media-container::after {
    content: attr(data-title);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 30px));
    color: white;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.3;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    max-width: 85%;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.video-media-container:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.video-title {
    font-size: 1rem;
    font-weight: 400;
    color: #ffffff;
    margin: 1rem 0 0.5rem 0;
    letter-spacing: 0.02em;
    line-height: 1.3;
    font-feature-settings: "liga" 1, "kern" 1;
    position: relative;
    z-index: 3;
    opacity: 0; /* Hide titles initially, show on hover */
    transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.video-description {
    font-size: 0.875rem;
    color: #ffffff;
    line-height: 1.6;
    transform: translateY(100%);
    /* Faster transition */
    transition: transform 0.4s cubic-bezier(0.618, 0, 0.382, 1);
    z-index: 3;
    font-weight: 400;
    letter-spacing: 0.02em;
    /* Simplified background */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%);
    padding: 1rem;
    border-radius: 6px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Reduced blur for performance */
    backdrop-filter: blur(8px);
    display: none; /* Hide descriptions for tiled layout */
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    will-change: transform;
}

.video-item:hover .video-description {
    /* Simple reveal - removed scale and filter */
    transform: translateY(0);
}

.video-item:hover .video-title {
    /* Fade in title on hover */
    opacity: 1;
}

.video-role {
    font-size: 0.75rem;
    color: #cccccc;
    line-height: 1.4;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.618, 0, 0.382, 1);
    opacity: 0.8;
    margin: 8px 0 0 0;
    padding: 0;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.03em;
    will-change: transform;
}

.video-item:hover .video-role {
    transform: translateY(0);
}

/* Category Sections */
.category-section {
    margin: 4rem 0;
    width: 100%;
}

.category-header {
    width: 100%;
    text-align: center;
    margin-bottom: 3rem;
    padding: 1rem 0;
    position: relative;
}

.category-title {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0;
    position: relative;
}

.category-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 1rem auto 0 auto;
    max-width: 200px;
}

.category-video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
}

/* Mobile touch interactions - simulate hover effects */
.mobile-active .video-gif {
    transform: scale(1.03);
}

.mobile-active .video-gif::after {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.mobile-active::before {
    background: rgba(0, 0, 0, 0.35);
    opacity: 1;
}

.mobile-active::after {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    /* Make GIF titles always visible on mobile to indicate interactivity */
    .video-media-container::after {
        opacity: 0.7;
        transform: translate(-50%, -50%);
        font-size: 0.9rem;
    }
    
    .mobile-active .video-media-container::after,
    .video-media-container:hover::after {
        opacity: 1;
    }
    .category-section {
        margin: 3rem 0;
    }
    
    .category-header {
        margin-bottom: 2rem;
        padding: 1rem 0;
    }
    
    .category-title {
        font-size: 0.7rem;
        margin: 0;
    }
    
    .category-video-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .video-gif::after {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
        max-width: 85%;
        transform: translate(-50%, calc(-50% + 15px));
    }
    
    .video-gif:hover::after {
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 480px) {
    .category-section {
        margin: 2rem 0;
    }
    
    .category-header {
        margin-bottom: 1.5rem;
        padding: 0.75rem 0;
    }
    
    .category-title {
        font-size: 0.65rem;
        margin: 0;
    }
    
    .category-video-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .video-section {
        padding: 1.5rem 0;
    }
    
    .video-grid {
        max-width: 100%;
        padding: 0 1rem;
        gap: 1.5rem;
    }
    
    .video-item {
        max-width: 100%;
        width: 100%;
    }
    
    .portfolio-hero-content {
        padding: 0 1rem;
    }
}

/* CTA Section - Full Width with Gray Accents */
.cta-section {
    padding: 6rem 0;
    background: transparent;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 10;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: var(--accent-color);
}


.cta-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.cta-text {
}

.cta-subtitle .subtitle-label {
    color: var(--accent-color);
    font-weight: 700;
    letter-spacing: 0.2em;
}

.cta-subtitle .subtitle-text {
    color: #ffffff;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

.cta-description {
    font-size: 1.125rem;
    color: #cccccc;
    margin-bottom: 3rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.02em;
    border-left: 4px solid var(--accent-color);
    padding-left: 2rem;
}

.cta-button {
    background: var(--color-primary);
    color: var(--color-background);
    border: 2px solid var(--color-primary);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--type-scale-body);
    font-weight: 500; /* Medium weight */
    letter-spacing: 0.05em; /* Swiss controlled spacing */
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-feature-settings: "liga" 1, "kern" 1;
    position: relative;
    text-decoration: none;
    display: inline-block;
    border-radius: 0; /* Sharp edges */
    font-family: inherit;
}

.cta-button:hover {
    background: transparent; /* Swiss inversion */
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.cta-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(102, 102, 102, 0.2);
}

/* Sparkle button specific styling */
.sparkle-button {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 25%, #667eea 50%, #764ba2 75%, #667eea 100%);
    background-size: 400% 400%;
    animation: iridescent-glow 4s ease infinite;
    color: #ffffff;
    border: none;
    padding: 1.5rem 3rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-feature-settings: "liga" 1, "kern" 1;
    position: relative;
    overflow: visible;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.sparkle-button:hover {
    animation: iridescent-glow 2s ease infinite;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.6), 
                0 0 40px rgba(118, 75, 162, 0.4), 
                0 8px 25px rgba(102, 126, 234, 0.3);
}

/* Iridescent Glow Animation */
@keyframes iridescent-glow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Footer */
.footer {
    padding: 60px 2rem 40px;
    background: #1a1a1a;
    text-align: center;
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
}

.footer-text {
    margin-bottom: 2rem;
}

.footer-text p {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid #ddd;
}

.footer-bottom p {
    color: #ccc;
    font-size: 0.9rem;
}

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

.social-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: #ccc;
}

/* Video Modal */
.video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    overflow: auto;
}

/* Custom scrollbar styling for video modal */
.video-modal::-webkit-scrollbar {
    width: 12px;
}

.video-modal::-webkit-scrollbar-track {
    background: #000000;
}

.video-modal::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 6px;
}

.video-modal::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

.modal-content {
    position: relative;
    width: 80%;
    max-width: 1200px;
    margin: 5% auto;
    background: #000;
    overflow: visible;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    max-height: 90vh;
}

.close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, background 0.3s ease;
    opacity: 1;
}

.close-button:hover {
    background: rgba(0, 0, 0, 0.8);
}



/* Sync close button with video controls - fade out after delay */
.modal-content .close-button {
    transition: opacity 0.5s ease 2s; /* Fade out after 2 second delay */
}

.modal-content:hover .close-button,
.modal-content:focus-within .close-button {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease; /* Quick fade in */
}

.modal-content:not(:hover):not(:focus-within) .close-button {
    opacity: 0;
    pointer-events: none;
}

.video-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    width: 100%;
    min-height: 60vh;
}

/* Ensure iframes (Vimeo embeds) are properly sized */
.video-container iframe {
    width: 100% !important;
    height: 80vh !important;
    min-height: 600px !important;
    max-width: 90vw !important;
    border: none;
    border-radius: 8px;
    aspect-ratio: 16/9;
}

/* Simple Loading Text */
.loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
    z-index: 10;
    pointer-events: none;
}

#modalVideo {
    width: 100%;
    max-width: 90vw;
    height: auto;
    max-height: 80vh;
    min-height: 60vh;
    display: block;
    border: none;
    outline: none;
    filter: brightness(1.2) contrast(1.1);
    margin: 0 auto;
    object-fit: contain;
}


/* Modal navigation buttons */
.modal-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #000000;
    color: #666666;
    border: 2px solid #333333;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10001;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.modal-nav-button:hover {
    background: #111111;
    color: #999999;
    transform: translateY(-50%) scale(1.1);
}

.modal-nav-button.prev-button {
    left: -80px;
}

.modal-nav-button.next-button {
    right: -80px;
}

.modal-nav-button svg {
    width: 24px;
    height: 24px;
}

/* Video position indicator */
.video-position-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

/* Reposition navigation on mobile - below video area */
@media (max-width: 768px) {
    .modal-nav-button {
        position: fixed !important;
        bottom: 20px !important;
        top: auto !important;
        transform: none !important;
        width: 50px !important;
        height: 50px !important;
        background: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        z-index: 10002 !important;
    }
    
    .modal-nav-button.prev-button {
        left: 20px !important;
    }
    
    .modal-nav-button.next-button {
        right: 20px !important;
    }
    
    .video-position-indicator {
        display: none !important;
    }
    
    /* Auto-hide video controls on mobile */
    #modalVideo {
        position: relative !important;
    }
    
    /* Hide controls initially after load */
    #modalVideo::-webkit-media-controls {
        opacity: 1 !important;
        transition: opacity 0.3s ease !important;
    }
    
    /* Hide controls when video has the hiding class */
    #modalVideo.hide-controls::-webkit-media-controls {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Show controls when video has the show-controls class */
    #modalVideo.show-controls::-webkit-media-controls {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}


/* Prevent hover effects from affecting the modal video */
.video-modal #modalVideo:hover {
    transform: none !important;
    filter: brightness(1.2) contrast(1.1) !important;
}

.video-modal .video-item:hover {
    transform: none !important;
}

/* Remove default video player borders and styling */
#modalVideo::-webkit-media-controls {
    border: none;
    outline: none;
}

#modalVideo::-webkit-media-controls-panel {
    border: none;
    outline: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1), transparent);
}

#modalVideo::-webkit-media-controls-play-button {
    border: none;
    outline: none;
}

#modalVideo::-webkit-media-controls-timeline {
    border: none;
    outline: none;
}

#modalVideo::-webkit-media-controls-current-time-display,
#modalVideo::-webkit-media-controls-time-remaining-display {
    border: none;
    outline: none;
}

.video-info {
    padding: 2rem;
    background: #000;
}

.video-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ccc;
}

.video-info p {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.6;
}

/* Autoplay fallback overlays */
.unmute-overlay,
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2002;
    backdrop-filter: blur(5px);
}

.unmute-message,
.play-message {
    background: rgba(0, 0, 0, 0.9);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    max-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Error overlay styles */
.error-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2002;
    backdrop-filter: blur(5px);
}

.error-message {
    background: rgba(139, 69, 19, 0.9);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    max-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 69, 0, 0.5);
}

.play-button,
.retry-button {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.play-button:hover,
.retry-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.play-button:active,
.retry-button:active {
    transform: translateY(0);
}

.unmute-message p,
.play-message p {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #fff;
}

.unmute-button {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s ease;
}

.unmute-button:hover {
    background: #0056b3;
}

.play-button {
    background: #007bff;
    color: #fff;
    border: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.2s ease;
    margin: 0 auto;
}

.play-button:hover {
    background: #0056b3;
    transform: scale(1.1);
}

.play-button svg {
    width: 32px;
    height: 32px;
    margin-left: 4px; /* Offset for play icon */
}



/* Mobile-First Responsive Design */

/* Tablet and Small Desktop */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 0 2rem;
        gap: 2rem;
    }
    
    .hero-title {
        grid-column: 1;
        margin-bottom: 2rem;
    }
    
    .hero-subtitle {
        grid-column: 1;
        padding-left: 0;
    }
    
    .hero-subtitle::before {
        display: none;
    }
    
    .video-section {
        padding: 4rem 2rem;
    }
    
    .cta-section {
        padding: 4rem 2rem;
    }
    
    .cta-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Mobile Landscape and Small Tablets */
@media (max-width: 768px) {
    .hero {
        min-height: 60vh;
        padding: 3rem 1.5rem 2.5rem 1.5rem;
        padding-top: 100px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .hero-carousel-dots {
        bottom: 20px;
        gap: 10px;
    }
    
    .carousel-dot {
        width: 10px;
        height: 10px;
    }
    
    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    
    .hero-logo {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 2rem;
        margin-top: 2rem;
    }
    
    .hero-title {
        margin-top: 2rem;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    
    .logo-image {
        width: 180px;
        height: auto;
        max-width: 100%;
    }
    
    .hero-subtitle {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    
    .subtitle-label {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .subtitle-text {
        font-size: clamp(1.2rem, 4vw, 1.6rem);
        line-height: 1.3;
        margin-bottom: 1rem;
        width: 100%;
        text-align: center;
    }
    
    .subtitle-note {
        font-size: 0.9rem;
        margin-top: 1rem;
        width: 100%;
        text-align: center;
        line-height: 1.4;
    }
    
    .video-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 0 1rem;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .video-section {
        padding: 2rem 1rem;
        width: 100%;
        box-sizing: border-box;
    }
    
    .video-item {
        border-radius: 8px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
    
    .video-media-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .video-thumbnail {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: cover;
    }
    
    .video-title {
        font-size: 1.1rem;
        margin: 0.75rem 0 0.5rem 0;
    }
    
    .video-description {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .video-role {
        font-size: 0.7rem;
        margin: 6px 0 0 0;
    }
    
    .cta-section {
        padding: 2.5rem 1.5rem;
    }
    
    .cta-subtitle .subtitle-text {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: 1.5rem;
    }
    
    .cta-description {
        font-size: 1rem;
        margin-bottom: 2rem;
        padding-left: 1.5rem;
    }
    
    .cta-button {
        padding: 1.25rem 2.5rem;
        font-size: 0.9rem;
    }
    
    .about-section {
        padding: 2.5rem 1.5rem;
    }
    
    .contact-section {
        padding: 2.5rem 1.5rem;
    }
    
    .header-content {
        padding: 0.75rem 1.5rem;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
    
    .logo-text {
        font-size: 1rem;
        text-align: center;
    }
    
    .nav {
        gap: 1.25rem;
        justify-content: center;
        width: 100%;
    }
    
    .nav-link {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding: 1rem 1.5rem;
    }
    
    /* Ensure modal is truly full screen - most aggressive approach */
    .video-modal {
        position: fixed !important;
        width: 100vw !important;
        height: 100vh !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transform: translateZ(0) !important;
    }
    
    /* Prevent body scroll when modal is open and ensure no margins */
    body:has(.video-modal[style*="display: block"]) {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    html:has(.video-modal[style*="display: block"]) {
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .modal-content {
        width: 100% !important;
        height: auto !important;
        max-height: 100vh !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    .video-container {
        width: 100% !important;
        height: auto !important;
        min-height: 70vh !important;
        max-height: 80vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 20px !important;
    }
    
    #modalVideo {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        object-fit: contain !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
    }
    
    /* Hide video info on mobile for full screen experience */
    .video-info {
        display: none;
    }
    
    /* Position close button over video */
    .close-button {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 10001 !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 50% !important;
        width: 3rem !important;
        height: 3rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .close-button:hover,
    .close-button:active {
        background: rgba(0, 0, 0, 0.9) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }
    
    /* Make YouTube and Vimeo embeds full screen on mobile */
    #youtubeContainer,
    #vimeoContainer {
        width: 100% !important;
        height: 100vh !important;
        padding: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    #youtubeContainer iframe,
    #vimeoContainer iframe {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    

        line-height: 1.4;
    }
    
    /* Mobile overlay adjustments */
    .unmute-message,
    .play-message {
        padding: 1.5rem;
        max-width: 250px;
    }
    
    .unmute-message p,
    .play-message p {
        font-size: 0.9rem;
    }
    
    .play-button {
        width: 60px;
        height: 60px;
    }
    
    .play-button svg {
        width: 24px;
        height: 24px;
    }
    

}

/* Mobile Portrait */
@media (max-width: 480px) {
    .hero {
        min-height: 50vh;
        padding: 2rem 1rem;
        padding-top: 80px;
    }
    
    .hero-content {
        padding: 0 1rem;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .portfolio-hero {
        min-height: 50vh;
        padding: 1.5rem 0.5rem;
        width: 100%;
        box-sizing: border-box;
    }
    
    .portfolio-hero-content {
        padding: 0 1rem;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
        gap: 1.5rem;
    }
    
    .portfolio-logo {
        margin-top: 1.5rem;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .portfolio-logo-image {
        width: 120px;
        max-width: 100%;
    }
    
    .portfolio-title {
        font-size: 1rem;
        width: 100%;
        box-sizing: border-box;
        line-height: 1.3;
    }
    
    .portfolio-subtitle {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .portfolio-note {
        font-size: 0.8rem;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Index page hero improvements for mobile */
    .hero {
        min-height: 50vh;
        padding: 2.5rem 1rem 2rem 1rem;
        padding-top: 90px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .hero-content {
        padding: 0 1rem;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .hero-logo {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .hero-title {
        margin-top: 1.5rem;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    
    .logo-image {
        width: 140px;
        height: auto;
        max-width: 100%;
    }
    
    .hero-subtitle {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    
    .subtitle-label {
        font-size: 0.7rem;
        margin-bottom: 0.75rem;
        display: block;
        width: 100%;
        text-align: center;
        letter-spacing: 0.05em;
    }
    
    .subtitle-text {
        font-size: clamp(1rem, 3.5vw, 1.3rem);
        line-height: 1.2;
        margin-bottom: 0.75rem;
        width: 100%;
        text-align: center;
    }
    
    .subtitle-note {
        font-size: 0.8rem;
        margin-top: 0.75rem;
        width: 100%;
        text-align: center;
        line-height: 1.3;
    }
    
    .video-section {
        padding: 1.5rem 0.5rem;
    }
    
    .video-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
        padding: 0 0.5rem;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .video-item {
        border-radius: 6px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
    
    .video-media-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .video-thumbnail {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: cover;
    }
    
    .video-title {
        font-size: 1rem;
        margin: 0.5rem 0 0.25rem 0;
    }
    
    .video-description {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    .video-role {
        font-size: 0.65rem;
        margin: 4px 0 0 0;
    }
    
    .cta-section {
        padding: 2rem 1rem;
    }
    
    .cta-subtitle .subtitle-text {
        font-size: clamp(1.2rem, 4vw, 1.5rem);
        margin-bottom: 1rem;
    }
    
    .cta-description {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
        padding-left: 1rem;
        border-left-width: 2px;
    }
    
    .cta-button {
        padding: 1rem 2rem;
        font-size: 0.85rem;
    }
    
    .about-section,
    .contact-section {
        padding: 2rem 1rem;
    }
    
    .header {
        padding: 0.5rem 0;
    }
    
    .header-content {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .logo-text {
        font-size: 0.9rem;
    }
    
    .nav {
        gap: 0.75rem;
    }
    
    .nav-link {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }
    
    .footer {
        padding: 1rem 0.5rem;
    }
    
    .footer-bottom {
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .modal-content {
        width: 98%;
        margin: 0.5rem auto;
        padding: 0.75rem;
    }
    
    #modalVideo {
        max-height: 75vh;
        max-width: 95vw;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    
    
    .close-button {
        top: 0.25rem;
        right: 0.25rem;
        font-size: 1.25rem;
        width: 1.75rem;
        height: 1.75rem;
    }
    

    
    .video-info {
        padding: 0.75rem 0;
    }
    
    .video-info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
    
    .video-info p {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    /* Small mobile overlay adjustments */
    .unmute-message,
    .play-message {
        padding: 1rem;
        max-width: 200px;
    }
    
    .unmute-message p,
    .play-message p {
        font-size: 0.8rem;
    }
    
    .play-button {
        width: 50px;
        height: 50px;
    }
    
    .play-button svg {
        width: 20px;
        height: 20px;
    }
    

}

/* Mobile Portrait - Single Column Grid */
@media (max-width: 480px) {
    .video-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
}

/* Latest Work Section */
.featured-section {
    padding: 100px 0;
    background: #0f0f0f;
}

.featured-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.featured-header {
    text-align: center;
    margin-bottom: 60px;
}

.featured-header h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin: 20px 0 15px;
    color: #ffffff;
    letter-spacing: -0.02em;
    font-feature-settings: "liga" 1, "kern" 1;
}

.featured-header p {
    font-size: 1.25rem;
    color: #e0e0e0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.featured-item {
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.featured-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

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

.featured-item:hover .featured-image img {
    transform: scale(1.05);
}

.featured-info {
    padding: 30px;
}

.featured-info h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    letter-spacing: -0.01em;
    font-feature-settings: "liga" 1, "kern" 1;
}

.featured-info p {
    color: #e0e0e0;
    margin-bottom: 20px;
    line-height: 1.7;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.featured-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.featured-link:hover {
    color: #ff6b6b;
}

/* Services Section */
.services-section {
    padding: 100px 0;
    background: #1a1a1a;
}

.services-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.services-header {
    text-align: center;
    margin-bottom: 60px;
}

.services-header h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin: 20px 0 15px;
    color: #ffffff;
    letter-spacing: -0.02em;
    font-feature-settings: "liga" 1, "kern" 1;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.service-item {
    background: #2a2a2a;
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
    background: #333333;
}

.service-item h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    letter-spacing: -0.01em;
    font-feature-settings: "liga" 1, "kern" 1;
}

.service-item p {
    color: #e0e0e0;
    line-height: 1.7;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Contact Section */
.contact-section {
    padding: 89px 0; /* Close to Fibonacci 89 */
    background: transparent;
    position: relative;
    z-index: 10;
}

.contact-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 21px; /* Fibonacci number */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px; /* Fibonacci number */
    margin-top: 34px; /* Fibonacci number */
}

.contact-info h2,
.contact-form h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 34px; /* Fibonacci number */
    color: #ffffff;
    letter-spacing: -0.02em;
    font-feature-settings: "liga" 1, "kern" 1;
    line-height: 1.618; /* Golden ratio */
}

.contact-item {
    margin-bottom: 34px; /* Fibonacci number */
}

.contact-item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 13px; /* Fibonacci number */
    color: #ffffff;
    letter-spacing: -0.01em;
    font-feature-settings: "liga" 1, "kern" 1;
}

.contact-item p,
.contact-item a {
    color: #e0e0e0;
    text-decoration: none;
    line-height: 1.618; /* Golden ratio */
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.contact-item a:hover {
    color: #ff6b6b;
}

.social-links-contact {
    display: flex;
    gap: 20px;
}

.social-links-contact .social-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.social-links-contact .social-link:hover {
    color: #ff6b6b;
}

/* Contact Form */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #333333;
    border-radius: 6px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #ff6b6b;
}

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

.submit-button {
    background: #ff6b6b;
    color: #ffffff;
    border: none;
    padding: 1.25rem 2.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-feature-settings: "liga" 1, "kern" 1;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    position: relative;
    overflow: visible;
}

.submit-button:hover {
    background: #ff5252;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

/* Contact Form Messages */
.form-message {
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
    font-weight: 500;
}

.form-message-success {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.form-message-error {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

/* LinkedIn Contact Styles */
.linkedin-contact {
    max-width: 600px;
    margin: 0 auto;
}

.contact-intro {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    text-align: center;
}

.contact-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.linkedin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 119, 181, 0.3);
    width: 280px;
}

.linkedin-button:hover {
    background: linear-gradient(135deg, #005885 0%, #004065 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 119, 181, 0.4);
    color: #ffffff;
    text-decoration: none;
}

.linkedin-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.book-call-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    width: 280px;
}

.book-call-button:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    color: #ffffff;
    text-decoration: none;
}

.calendar-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.contact-note {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.contact-note a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
}

.contact-note a:hover {
    color: #5a6fd8;
    text-decoration: underline;
}

.project-info {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.project-info h3 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: center;
}

.project-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-info li {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.project-info li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #667eea;
    font-weight: bold;
}

/* Leadership Section */
.leadership-section {
    padding: 100px 0;
    background: transparent;
    position: relative;
    z-index: 10;
}

.leadership-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.leadership-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.leadership-text h2 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    color: #ffffff;
}

.leadership-text h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 2rem 0 1rem 0;
    color: #ffffff;
}

.leadership-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

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

.highlight-item {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.highlight-item h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

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

/* Explorations Section */
.explorations-section {
    padding: 100px 0;
    background: transparent;
    position: relative;
    z-index: 10;
}

.explorations-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.explorations-content h2 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
    color: #ffffff;
    text-align: center;
}

.explorations-intro {
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

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

.exploration-item {
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.exploration-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.exploration-icon {
    font-size: 3rem;
    margin-bottom: 0;
    display: block;
    position: relative;
    z-index: 2;
}

.exploration-item h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
}

.exploration-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 2rem 0;
}

/* Enhanced visual elements for service cards */
.exploration-visual {
    position: relative;
    margin-bottom: 1.5rem;
}

.exploration-gradient {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0.2;
    z-index: 1;
    transition: all 0.3s ease;
}

.exploration-item:hover .exploration-gradient {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.1);
}

.ai-gradient {
    background: radial-gradient(circle, #00d4ff, #0066ff);
}

.experience-gradient {
    background: radial-gradient(circle, #ff6b6b, #ff3d71);
}

.interactive-gradient {
    background: radial-gradient(circle, #4ecdc4, #44a08d);
}

.strategy-gradient {
    background: radial-gradient(circle, #feca57, #ff9ff3);
}

.service-connect-btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.service-connect-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* Services Section - Swiss Design */
.services-section {
    padding: 120px 0;
    background: transparent;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Section Header */
.services-header {
    text-align: center;
    margin-bottom: 80px;
}

.services-header h2 {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.services-header p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
    font-weight: 300;
}

/* Primary Service */
.primary-service {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    padding: 60px;
    margin-bottom: 60px;
    position: relative;
    transition: all 0.3s ease;
}

.primary-service:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
}

.service-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}


.primary-service h3 {
    font-size: 2.25rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.primary-service p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    font-weight: 300;
}

.service-benefits {
    list-style: none;
    padding: 0;
    margin: 2rem 0 3rem 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.service-benefits li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 400;
    position: relative;
    padding-left: 1rem;
}

.service-benefits li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffffff;
}

.primary-cta {
    display: inline-block;
    background: #ffffff;
    color: #000000;
    padding: 1rem 2.5rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.primary-cta:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

/* Secondary Service */
.secondary-service {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    padding: 50px 60px;
    transition: all 0.3s ease;
}

.secondary-service:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
}

.secondary-service .service-content {
    text-align: center;
}

.secondary-service h4 {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.secondary-service p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
    font-weight: 300;
}

.secondary-cta {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.secondary-cta:hover {
    border-bottom-color: #ffffff;
    color: #ffffff;
}

/* Section Separator */
.section-separator {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .services-header h2 {
        font-size: 2rem;
    }
    
    .primary-service {
        padding: 40px 30px;
    }
    
    .primary-service h3 {
        font-size: 1.75rem;
    }
    
    .service-benefits {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .secondary-service {
        padding: 40px 30px;
    }
    
    .secondary-service h4 {
        font-size: 1.5rem;
    }
}

/* Impact Section */
.impact-section {
    padding: 100px 0;
    background: transparent;
    position: relative;
    z-index: 10;
}

.impact-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.impact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.impact-text h2 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    color: #ffffff;
}

.impact-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

.experience-timeline {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.timeline-item {
    padding: 1.5rem 0;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 2rem;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 2rem;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
}

.timeline-item h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.timeline-role {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    display: block;
    margin-bottom: 0.5rem;
}

.timeline-item p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.impact-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.impact-stats .stat-item {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.impact-stats .stat-item h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.impact-stats .stat-item p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Portfolio Hero Styling */
.portfolio-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.portfolio-hero-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
    box-sizing: border-box;
}

    .portfolio-logo {
        margin-bottom: 2rem;
        margin-top: 2rem;
        display: flex;
        justify-content: center;
        width: 100%;
    }

.portfolio-logo-image {
    width: 200px;
    height: auto;
    filter: brightness(1.1);
    max-width: 100%;
}

.portfolio-subtitle {
    text-align: center;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
}

.portfolio-title {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 1rem;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.portfolio-note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
    width: 100%;
    box-sizing: border-box;
}

/* Add horizontal line above subtitle like in homepage */
.portfolio-subtitle .subtitle-label::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -2rem;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.portfolio-subtitle .subtitle-label {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .leadership-grid,
    .impact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .explorations-grid {
        grid-template-columns: 1fr;
    }
    
    .leadership-text h2,
    .explorations-content h2,
    .impact-text h2 {
        font-size: 2rem;
    }
    
    .leadership-highlights,
    .impact-stats {
        margin-top: 2rem;
    }
    
    .portfolio-logo-image {
        width: 150px;
        max-width: 100%;
    }
    
    .portfolio-title {
        font-size: 1.2rem;
        width: 100%;
        box-sizing: border-box;
    }
    
    .portfolio-hero {
        min-height: 60vh;
        padding: 2rem 1rem;
        width: 100%;
        box-sizing: border-box;
    }
    
    .portfolio-hero-content {
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .portfolio-subtitle {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .video-section {
        padding: 2rem 1rem;
        width: 100%;
        box-sizing: border-box;
    }
    
    .video-grid {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        box-sizing: border-box;
    }
    
    .video-item {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
    
    .video-media-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .video-thumbnail {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: cover;
    }
}

/* About Section */
.about-section {
    padding: 100px 0;
    background: #000000;
    position: relative;
}

.about-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    margin-top: 40px;
}

.about-text h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -0.02em;
    font-feature-settings: "liga" 1, "kern" 1;
}

.about-text h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 30px 0 15px;
    color: #ffffff;
    letter-spacing: -0.01em;
    font-feature-settings: "liga" 1, "kern" 1;
}

.about-text p,
.about-text li {
    color: #e0e0e0;
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.about-text ul {
    list-style: none;
    padding: 0;
}

.about-text li {
    position: relative;
    padding-left: 20px;
}

.about-text li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #ff6b6b;
}

.about-stats {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.stat-item {
    text-align: center;
    padding: 30px;
    background: #1a1a1a;
    border-radius: 12px;
}

.stat-number {
    display: block;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    color: #ff6b6b;
    margin-bottom: 10px;
    letter-spacing: -0.03em;
    font-feature-settings: "liga" 1, "kern" 1;
}

.stat-label {
    font-size: 1.125rem;
    color: #e0e0e0;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Active Navigation Link */
.nav-link.active {
    color: #ff6b6b;
    font-weight: 600;
}

/* Enhanced Mobile Support for All Sections */
@media (max-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .featured-item {
        margin: 0 1rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .service-item {
        margin: 0 1rem;
        padding: 2rem 1.5rem;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Reorder contact sections on mobile - AI audit first */
    .contact-form {
        order: 1 !important;
        text-align: center;
    }
    
    .contact-info {
        order: 2 !important;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .about-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-item {
        padding: 1.5rem;
        min-width: auto;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .submit-button {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .about-stats {
        margin-top: 2rem;
    }
    
    .stat-item {
        padding: 1rem;
        text-align: center;
    }
    
    .stat-number {
        font-size: clamp(2rem, 8vw, 3rem);
    }
    
    .stat-label {
        font-size: 0.9rem;
    }
    
    /* Reorder contact sections on small mobile - AI audit first */
    .contact-form {
        order: 1 !important;
        text-align: center;
    }
    
    .contact-info {
        order: 2 !important;
    }
} 

/* Remove Rothko background on video pages for clean portfolio view */
body.video-page .page-background {
    display: none; /* Hide background completely for clean portfolio */
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    .video-item {
        transform: none;
        transition: transform 0.2s ease;
    }
    
    .video-item:active {
        transform: scale(0.98);
    }
    
    .cta-button:active {
        transform: scale(0.95);
    }
    
    .nav-link:active {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    
    .close-button:active {
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* Improve touch targets */
    .nav-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .cta-button {
        min-height: 48px;
        min-width: 120px;
    }
    
    .close-button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Ensure proper viewport handling */
@media screen and (max-width: 768px) {
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Modern Swiss Design - New Page Sections */

/* Typography System */
.about-section,
.work-section,
.final-cta-section {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.02em;
}

/* About Section - Minimalist Swiss Style */
.about-section {
    padding: 8rem 2rem;
    background: #000000;
    position: relative;
    overflow: visible;
}

.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #ffffff 50%, transparent 100%);
    opacity: 0.3;
}

.about-container {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
    position: relative;
    z-index: 10;
}

.about-container p {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
    font-weight: 300;
    letter-spacing: -0.03em;
    /* Add text shadow for better contrast against red shapes */
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(0, 0, 0, 0.4);
    /* Add semi-transparent background for better readability */
    background: rgba(0, 0, 0, 0.7);
    padding: 2rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    /* Ensure text is above the spray paint animation */
    position: relative;
    z-index: 20;
}

/* Work Section - Grid-based Swiss Layout */
.work-section {
    padding: 8rem 2rem;
    background: #111111;
    position: relative;
    overflow: visible;
}

.work-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #ffffff 50%, transparent 100%);
    opacity: 0.2;
}

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

.work-container h2 {
    text-align: left;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: #ffffff;
    margin-bottom: 6rem;
    font-weight: 200;
    letter-spacing: -0.04em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.work-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    align-items: start;
}

.work-card {
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
}

.work-card::before {
    position: absolute;
    top: -3rem;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    opacity: 0.8;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

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

.work-card::after {
    content: attr(data-title);
    position: absolute;
    top: -4.5rem;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.work-card:hover::after {
    opacity: 1;
}

.work-card:nth-child(1)::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z'/%3E%3Cpath d='M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z'/%3E%3Cpath d='M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4'/%3E%3Cpath d='M17.599 6.5a3 3 0 0 0 .399-1.375'/%3E%3Cpath d='M6.003 5.125A3 3 0 0 0 6.401 6.5'/%3E%3Cpath d='M3.477 10.896a4 4 0 0 1 .585-.396'/%3E%3Cpath d='M19.938 10.5a4 4 0 0 1 .585.396'/%3E%3Cpath d='M6 18a4 4 0 0 1-1.967-.516'/%3E%3Cpath d='M19.967 17.484A4 4 0 0 1 18 18'/%3E%3C/svg%3E");
}

.work-card:nth-child(2)::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.9 5.8L4.3 9.6l4.9 4.2L7.5 20l4.5-2.7L16.5 20l-1.7-6.2 4.9-4.2-5.8-.8L12 3z'/%3E%3Cpath d='M5 3v4'/%3E%3Cpath d='M19 17v4'/%3E%3Cpath d='M3 5h4'/%3E%3Cpath d='M17 19h4'/%3E%3C/svg%3E");
}

.work-card:nth-child(3)::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}

.work-card h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: #ffffff;
    margin-bottom: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.2;
}

.work-card p {
    color: #cccccc;
    line-height: 1.5;
    margin-bottom: 2rem;
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: -0.01em;
}

.work-cta {
    color: #ffffff;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 0.25rem;
    transition: all 0.3s ease;
}

.work-cta::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.work-cta:hover::after {
    transform: scaleX(1);
}

/* Final CTA Section - Bold Swiss Statement */
.final-cta-section {
    padding: 10rem 2rem;
    background: #000000;
    text-align: center;
    position: relative;
}

.final-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #ffffff 50%, transparent 100%);
    opacity: 0.3;
}

.final-cta-content h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: #ffffff;
    margin-bottom: 3rem;
    font-weight: 200;
    letter-spacing: -0.04em;
    line-height: 1.1;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.final-cta-button {
    display: inline-block;
    background: #ffffff;
    color: #000000;
    padding: 1.5rem 3rem;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: all 0.3s ease;
    border: 1px solid #ffffff;
    position: relative;
    overflow: hidden;
}

.final-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #000000;
    transition: left 0.3s ease;
    z-index: 1;
}

.final-cta-button:hover::before {
    left: 0;
}

.final-cta-button span {
    position: relative;
    z-index: 2;
}

/* Footer - Clean Swiss Footer */
.site-footer {
    background: #000000;
    padding: 3rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-social {
    display: flex;
    gap: 3rem;
}

.footer-social a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 400;
    transition: opacity 0.3s ease;
    position: relative;
}

.footer-social a::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.footer-social a:hover::after {
    transform: scaleX(1);
}

.footer-copyright p {
    color: #888888;
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 300;
}

/* Mobile responsive adjustments */
@media (max-width: 1024px) {
    .work-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .about-section,
    .work-section,
    .final-cta-section {
        padding: 6rem 1.5rem;
    }
    
    /* Improve text readability on mobile */
    .about-container p {
        background: rgba(0, 0, 0, 0.85);
        padding: 1.5rem;
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
    
    .work-cards {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    
    .work-card::before {
        top: -2.5rem;
        width: 1.8rem;
        height: 1.8rem;
    }

    .work-card::after {
        top: -4rem;
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
    
    .work-container h2 {
        text-align: center;
        margin-bottom: 4rem;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .footer-social {
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .about-section,
    .work-section,
    .final-cta-section {
        padding: 4rem 1rem;
    }
    
    .work-cards {
        gap: 3rem;
    }
    
         .final-cta-button {
         padding: 1.25rem 2rem;
         font-size: 0.8rem;
     }
 }

/* Three.js 3D Background Containers */
.about-background,
.work-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* Strict clipping to section bounds */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.about-background canvas,
.work-background canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    /* Reduce opacity of background animations for better text readability */
    opacity: 0.6 !important;
}

/* Ensure content stays above background */
.about-container,
.work-container {
    position: relative;
    z-index: 10;
}

/* Process Section */
.process-section {
    padding: 8rem 2rem;
    background: #000000;
    position: relative;
}

.process-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #ffffff 50%, transparent 100%);
    opacity: 0.2;
}

.process-container {
    max-width: 1200px;
    margin: 0 auto;
}

.process-container h2 {
    text-align: left;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: #ffffff;
    margin-bottom: 6rem;
    font-weight: 300;
}

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

.process-step {
    text-align: center;
    position: relative;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 50%;
    margin-bottom: 2rem;
}

.process-step h3 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 500;
}

.process-step p {
    font-size: 1.1rem;
    color: #cccccc;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .process-section {
        padding: 6rem 1.5rem;
    }
    
    .process-steps {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .step-number {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }
}


/* Social Proof Section */
.social-proof-section {
    padding: 8rem 2rem;
    background: #0a0a0a;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.social-proof-container {
    max-width: 1200px;
    margin: 0 auto;
}

.credentials-block h2 {
    text-align: center;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: #ffffff;
    margin-bottom: 6rem;
    font-weight: 300;
}

.credentials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    margin-bottom: 6rem;
}

.credential-item {
    text-align: center;
    position: relative;
}

.credential-number {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 600;
    color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    padding: 1rem 2rem;
    border-radius: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(102, 126, 234, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.credential-item p {
    font-size: 1.1rem;
    color: #cccccc;
    line-height: 1.6;
    max-width: 280px;
    margin: 0 auto;
}

.experience-statement {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.experience-statement blockquote {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: #ffffff;
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
    margin: 0;
    position: relative;
}

.experience-statement blockquote::before,
.experience-statement blockquote::after {
    content: """;
    font-size: 3rem;
    color: #667eea;
    position: absolute;
    opacity: 0.6;
}

.experience-statement blockquote::before {
    top: -1rem;
    left: -2rem;
}

.experience-statement blockquote::after {
    content: """;
    bottom: -2rem;
    right: -2rem;
}

@media (max-width: 768px) {
    .social-proof-section {
        padding: 6rem 1.5rem;
    }
    
    .credentials-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-bottom: 4rem;
    }
    
    .credential-number {
        font-size: 1.1rem;
        padding: 0.75rem 1.5rem;
    }
    
    .experience-statement blockquote::before,
    .experience-statement blockquote::after {
        font-size: 2rem;
    }
    
    .experience-statement blockquote::before {
        top: -0.5rem;
        left: -1rem;
    }
    
    .experience-statement blockquote::after {
        bottom: -1rem;
        right: -1rem;
    }
}


/* Streamlined About Section with Inline Credentials */
.about-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--space-md); /* Swiss grid spacing */
}

.about-intro {
    margin-bottom: 3rem;
}

.about-intro p {
    letter-spacing: 0.02em;
}

.lead-text {
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #667eea;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.credentials-inline {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.credential-badge {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    border: 1px solid rgba(102, 126, 234, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Compact Services + Process Grid */
.services-process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
}

.services-column h2,
.process-column h2 {
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: #ffffff;
    margin-bottom: 3rem;
    font-weight: 300;
}

/* Compact Work Cards */
.work-cards-compact {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.work-card-compact {
    text-align: left;
}

.work-card-compact h3 {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.work-card-compact p {
    font-size: 1rem;
    color: #cccccc;
    line-height: 1.5;
}

/* Compact Process Steps */
.process-steps-compact {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.process-step-compact {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.step-number-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.step-content p {
    font-size: 1rem;
    color: #cccccc;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .credentials-inline {
        gap: 1rem;
    }
    
    .credential-badge {
        font-size: 0.8rem;
        padding: 0.6rem 1.2rem;
    }
    
    .services-process-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    
    .work-cards-compact,
    .process-steps-compact {
        gap: 2rem;
    }
    
    .step-number-small {
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
    }
}


/* Epic Sparkle CTA Button with Fire & Particles */
.epic-sparkle-button {
    position: relative;
    display: inline-block;
    padding: 2rem 3rem;
    background: linear-gradient(135deg, 
        #667eea 0%, 
        #764ba2 25%, 
        #f093fb 50%, 
        #f5576c 75%, 
        #4facfe 100%);
    background-size: 300% 300%;
    color: white;
    text-decoration: none;
    border-radius: 3rem;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 30px rgba(102, 126, 234, 0.4),
        0 0 60px rgba(118, 75, 162, 0.3),
        0 15px 35px rgba(0, 0, 0, 0.3);
    animation: epic-gradient-shift 4s ease-in-out infinite,
               epic-float 3s ease-in-out infinite;
}

/* Gradient Animation */
@keyframes epic-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Floating Animation */
@keyframes epic-float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-5px) scale(1.02); }
}

/* Particle Effects */
.button-particles {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(2px 2px at 20px 30px, rgba(102, 126, 234, 0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(245, 87, 108, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(75, 172, 254, 0.6), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(240, 147, 251, 0.7), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(118, 75, 162, 0.6), transparent);
    animation: epic-particles-flow 6s linear infinite;
    pointer-events: none;
    opacity: 0.8;
}

@keyframes epic-particles-flow {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Outer Glow Effect */
.button-glow {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.3) 0%, 
        rgba(118, 75, 162, 0.3) 25%,
        rgba(240, 147, 251, 0.3) 50%,
        rgba(245, 87, 108, 0.3) 75%,
        rgba(75, 172, 254, 0.3) 100%);
    border-radius: 4rem;
    filter: blur(20px);
    animation: epic-glow-pulse 2s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

@keyframes epic-glow-pulse {
    0% { opacity: 0.5; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1.05); }
}

/* Fire Overlay Effect */
.button-fire-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 107, 107, 0.2) 40%,
        rgba(255, 154, 0, 0.3) 50%,
        rgba(255, 206, 84, 0.2) 60%,
        transparent 70%);
    background-size: 200% 200%;
    border-radius: 3rem;
    animation: epic-fire-flow 3s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
}

@keyframes epic-fire-flow {
    0% { background-position: -200% -200%; opacity: 0.3; }
    50% { background-position: 200% 200%; opacity: 0.7; }
    100% { background-position: -200% -200%; opacity: 0.3; }
}

/* Button Text Styling */
.button-text {
    position: relative;
    z-index: 2;
    display: block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.button-text small {
    display: block;
    font-size: 0.85em;
    font-weight: 400;
    margin-top: 0.25rem;
    opacity: 0.9;
}

/* Hover Effects */
.epic-sparkle-button:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 
        0 0 50px rgba(102, 126, 234, 0.6),
        0 0 100px rgba(118, 75, 162, 0.4),
        0 25px 50px rgba(0, 0, 0, 0.4);
    animation-duration: 2s; /* Speed up animations on hover */
}

.epic-sparkle-button:hover .button-particles {
    animation-duration: 3s;
    opacity: 1;
}

.epic-sparkle-button:hover .button-glow {
    animation-duration: 1s;
}

.epic-sparkle-button:hover .button-fire-overlay {
    animation-duration: 1.5s;
    opacity: 0.8;
}

/* Active/Click Effect */
.epic-sparkle-button:active {
    transform: translateY(-4px) scale(1.02);
    transition: transform 0.1s ease;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .epic-sparkle-button {
        padding: 1.5rem 2rem;
        font-size: 1rem;
    }
    
    .button-glow {
        top: -15px;
        left: -15px;
        right: -15px;
        bottom: -15px;
    }
}

/* Video Hero Section */
.video-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.video-hero-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-hero-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    z-index: 2;
    padding: var(--space-lg); /* Swiss grid-based padding */
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
}

.hero-logo {
    margin-bottom: 3rem;
}

.logo-image {
    width: 200px;
    height: auto;
    filter: brightness(1.2);
}

.hero-name {
    font-size: var(--type-scale-hero);
    font-weight: 300; /* Lighter weight for Swiss minimalism */
    letter-spacing: 0.15em; /* More controlled spacing */
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin-bottom: var(--space-xs);
    text-align: center;
    line-height: 1.1; /* Tighter leading typical of Swiss design */
    text-transform: uppercase;
}

.hero-subtitle {
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 var(--space-md);
    grid-row: 2; /* Center in the grid */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm); /* Swiss-style consistent spacing */
}

.subtitle-divider {
    width: 60px;
    height: 1px; /* Thinner, more minimal */
    background: var(--color-primary);
    opacity: 0.6; /* Subtle Swiss-style treatment */
    margin: 0; /* Remove margin as gap handles spacing */
}

.video-hero .subtitle-label {
    font-size: var(--type-scale-small);
    font-weight: 500; /* Swiss medium weight */
    letter-spacing: 0.15em; /* Controlled Swiss spacing */
    text-transform: uppercase;
    color: var(--color-secondary);
    opacity: 0.9;
    display: block;
    margin: 0; /* Removed as flex gap handles spacing */
}

.subtitle-label {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e0e0e0;
    display: block;
    margin-bottom: 0.8rem;
}

.subtitle-text {
    font-size: var(--type-scale-display);
    font-weight: 300;
    line-height: 1.25; /* Swiss design prefers slightly more breathing room */
    margin-bottom: var(--space-sm);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    max-width: 60ch; /* Swiss principle: optimal reading width */
    margin-left: auto;
    margin-right: auto;
}

.video-hero .subtitle-note {
    font-size: var(--type-scale-small);
    font-weight: 400;
    color: var(--color-secondary);
    opacity: 0.8; /* Swiss subtle hierarchy */
    margin: 0; /* Flex gap handles spacing */
    letter-spacing: 0.02em; /* Minimal Swiss spacing */
    max-width: 600px; /* Optimal reading width */
    text-align: center;
}

.subtitle-note {
    font-size: 1.1rem;
    font-weight: 400;
    color: #d0d0d0;
    margin-bottom: 0;
    margin-top: 0.3rem;
    letter-spacing: 0.5px;
}

/* Portfolio Section */
.portfolio-section {
    padding: var(--space-2xl) 0; /* Swiss grid-based spacing */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
}

.portfolio-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md); /* Use Swiss grid spacing */
    text-align: center;
}

.portfolio-intro h2 {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.portfolio-intro p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #cccccc;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.portfolio-cta {
    margin-top: 3rem;
}

.portfolio-link {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-primary);
    color: var(--color-background);
    text-decoration: none;
    border-radius: 0; /* Swiss design prefers sharp edges */
    font-weight: 500;
    font-size: var(--type-scale-body);
    letter-spacing: 0.05em; /* Minimal letter spacing */
    text-transform: uppercase;
    transition: all 0.2s ease; /* Shorter transitions */
    box-shadow: none; /* Clean, no shadows */
    border: 2px solid var(--color-primary);
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

.portfolio-link .button-text {
    position: relative;
    z-index: 2;
}

.portfolio-link:hover {
    background: transparent; /* Swiss inversion effect */
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    transform: none; /* No vertical movement */
}

/* Particle Container */
.particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    border-radius: 8px;
}

/* Particle Effect */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(99, 102, 241, 0.8) 50%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    animation: particle-eruption 1.2s ease-out forwards;
    opacity: 0;
}

@keyframes particle-eruption {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
    }
    50% {
        opacity: 0.8;
        transform: translate(var(--dx), var(--dy)) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--dx) * 1.5), calc(var(--dy) * 1.5)) scale(0.8);
    }
}

.particle:nth-child(odd) {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(139, 92, 246, 0.8) 50%, transparent 100%);
}

.particle:nth-child(3n) {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(168, 85, 247, 0.8) 50%, transparent 100%);
    animation-duration: 1.5s;
}

.particle:nth-child(5n) {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(236, 72, 153, 0.8) 50%, transparent 100%);
    animation-duration: 1.8s;
}

/* Mobile Responsiveness for Video Hero */
@media (max-width: 768px) {
    .logo-image {
        width: 150px;
    }
    
    .hero-name {
        font-size: 2.5rem;
        letter-spacing: 2px;
        margin-bottom: 0.3rem;
    }
    
    .subtitle-text {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        padding: 0 1rem;
    }
    
    .portfolio-intro h2 {
        font-size: 2.5rem;
    }
    
    .portfolio-intro p {
        font-size: 1.1rem;
    }
    
    /* Mobile optimization for particle effects */
    .portfolio-link {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    .particle {
        width: 3px;
        height: 3px;
    }
    
    .particle-container {
        border-radius: 6px;
    }
}

/* Reduce particle effects on touch devices for performance */
@media (hover: none) and (pointer: coarse) {
    .particle {
        animation-duration: 0.8s;
    }
    
    /* Simplify particle eruption for mobile */
    .portfolio-link:active .particle-container {
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
        animation: mobile-flash 0.3s ease-out;
    }
    
    @keyframes mobile-flash {
        0% { opacity: 0; }
        50% { opacity: 1; }
        100% { opacity: 0; }
    }
}


/* Video Admin Interface Styles */
.admin-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-toggle button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #6366f1;
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.admin-toggle button:hover {
    background: #4f46e5;
}

.import-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.import-modal-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    text-align: center;
}

.import-modal-content h3 {
    margin-bottom: 1rem;
    color: #333;
}

.import-modal-content textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    height: 200px;
    resize: vertical;
    font-family: monospace;
}

.import-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.import-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s ease;
}

.import-buttons button:first-child {
    background: #6366f1;
    color: white;
}

.import-buttons button:first-child:hover {
    background: #4f46e5;
}

.import-buttons button:last-child {
    background: #e5e7eb;
    color: #666;
}

.import-buttons button:last-child:hover {
    background: #d1d5db;
}

.video-item[draggable="true"] {
    cursor: move !important;
    transition: opacity 0.2s ease;
}

.video-item[draggable="true"]:hover {
    opacity: 0.8;
}

.order-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #6366f1;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 10;
    font-size: 14px;
}

@media (max-width: 768px) {
    .admin-toggle {
        bottom: 10px;
        right: 10px;
        flex-direction: column;
    }
    
    .admin-toggle button {
        font-size: 11px;
        padding: 6px 12px;
    }
    
    .import-modal-content {
        padding: 1.5rem;
        margin: 0 10px;
    }
}

/* Update Selected Works Section Styling */
.portfolio-section .section-title {
    font-size: var(--type-scale-display);
    font-weight: 400; /* Medium weight for Swiss hierarchy */
    letter-spacing: 0.1em; /* More controlled letter spacing */
    color: white;
    margin-bottom: var(--space-sm);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    text-transform: uppercase;
}

.portfolio-section .section-subtitle {
    margin-bottom: var(--space-lg);
}

.portfolio-section .subtitle-label {
    font-size: var(--type-scale-small);
    font-weight: 500; /* Medium weight for hierarchy */
    letter-spacing: 0.15em; /* Swiss controlled spacing */
    text-transform: uppercase;
    color: var(--color-secondary);
    opacity: 0.8; /* Subtle hierarchy with opacity */
    display: block;
    margin-bottom: 1rem;
}

.portfolio-section .section-description {
    font-size: var(--type-scale-body);
    line-height: 1.5; /* Swiss standard line-height */
    color: var(--color-secondary);
    max-width: 65ch; /* Swiss principle: optimal reading width */
    margin: 0 auto var(--space-md);
    font-weight: 400;
}

.portfolio-intro {
    text-align: center;
    margin-bottom: 3rem;
}


/* Swiss-style responsive design for video hero */
@media (max-width: 768px) {
    .video-hero-overlay {
        padding: var(--space-md); /* Reduce padding on mobile */
    }
    
    .hero-subtitle {
        max-width: 100%;
        padding: 0;
        gap: var(--space-xs); /* Tighter spacing on mobile */
    }
    
    .hero-name {
        font-size: clamp(2.5rem, 8vw, 4rem); /* Swiss responsive scaling */
    }
    
    .subtitle-text {
        font-size: clamp(1.5rem, 6vw, 3rem); /* Swiss responsive scaling */
    }
    
    .video-hero .subtitle-note {
        font-size: var(--type-scale-small);
        max-width: 90%;
    }
}

/* Hero Layout matching the provided design */
.hero-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

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

.hero-logo .logo-image {
    width: 200px;
    height: auto;
    filter: invert(1);
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-name {
    font-size: 4rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: white;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
}

.hero-role {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #cccccc;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.2;
}

.hero-description {
    font-size: 1.25rem;
    font-weight: 300;
    color: white;
    margin: 1rem 0;
    line-height: 1.4;
}

.hero-skills {
    font-size: 1rem;
    font-weight: 300;
    color: #999999;
    margin: 0;
    line-height: 1.4;
}

/* Responsive design */
@media (max-width: 968px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .hero-logo .logo-image {
        width: 150px;
    }
    
    .hero-name {
        font-size: 3rem;
    }
    
    .hero-role {
        font-size: 1.25rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .hero-layout {
        gap: 1.5rem;
    }
    
    .hero-logo .logo-image {
        width: 120px;
    }
    
    .hero-name {
        font-size: 2.5rem;
    }
    
    .hero-role {
        font-size: 1.1rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-skills {
        font-size: 0.9rem;
    }
}

/* Video Hero Section Styles */
.video-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.video-hero-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-hero-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3); /* Single overlay - reduced by 30% from 0.4 */
}

/* Update hero-content for video hero */
.video-hero .hero-content {
    width: 100%;
    max-width: none;
    padding: 0 2rem;
}

/* Override hero layout for video hero */
.video-hero .hero-layout {
    max-width: 1400px;
    margin: 0 auto;
}

/* Remove - will be consolidated */

.hero-name {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.hero-role {
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8) !important;
}

.hero-description {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
}

.hero-skills {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
}

/* Fix hero text design to match clean layout */
.video-hero .hero-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.video-hero .hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-hero .hero-logo .logo-image {
    width: 200px;
    height: auto;
    filter: invert(1);
}

.video-hero .hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.video-hero .hero-name {
    font-size: 4rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: white;
    margin: 0;
    text-transform: uppercase;
    line-height: 0.9;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.video-hero .hero-role {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: white;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    line-height: 1.2;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8) !important;
}

.video-hero .hero-description {
    font-size: 1.1rem;
    font-weight: 300;
    color: white;
    margin: 0 0 1rem 0;
    line-height: 1.3;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
}

.video-hero .hero-skills {
    font-size: 0.9rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.4;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
}

/* Responsive adjustments for text */
@media (max-width: 968px) {
    .video-hero .hero-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .video-hero .hero-text {
        text-align: center;
    }
    
    .video-hero .hero-name {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .video-hero .hero-name {
        font-size: 2.5rem;
    }
    
    .video-hero .hero-role {
        font-size: 1rem;
    }
}

/* Fix logo visibility and name alignment */
.video-hero .hero-logo .logo-image {
    width: 200px;
    height: auto;
    filter: invert(1) brightness(1.2) !important; /* Make logo white and brighter */
}

.video-hero .hero-name {
    text-align: left !important; /* Force left alignment for name */
}

.video-hero .hero-text {
    text-align: left !important; /* Ensure all text is left aligned */
}

/* Override any centering on mobile for name only */
@media (max-width: 968px) {
    .video-hero .hero-name {
        text-align: left !important; /* Keep name left-aligned even on mobile */
    }
    
    .video-hero .hero-text {
        text-align: left !important; /* Keep text left-aligned on mobile */
    }
    
    .video-hero .hero-layout {
        text-align: center; /* Center the overall layout container */
    }
}

/* Force logo to be white with highest specificity */
.video-hero .hero-logo .logo-image,
.video-hero-overlay .hero-logo .logo-image,
.hero-content .hero-logo .logo-image {
    filter: invert(1) brightness(2) contrast(1) !important;
    opacity: 1 !important;
}

/* Ultimate logo fix - make it white no matter what */
img.logo-image {
    filter: invert(1) brightness(1.5) !important;
}

.video-hero img.logo-image {
    filter: invert(1) brightness(1.5) !important;
}

/* Try different approach - make logo completely white */
.video-hero .hero-logo .logo-image,
.video-hero-overlay .hero-logo .logo-image,
.hero-content .hero-logo .logo-image,
img.logo-image {
    filter: brightness(0) invert(1) !important;
    /* This makes it black first, then inverts to white */
}

/* Alternative approach if above doesn not work */
.video-hero .hero-logo {
    background: white;
    padding: 10px;
    border-radius: 8px;
}

.video-hero .hero-logo .logo-image {
    filter: none !important;
}

/* Remove all invert filters - logo is already white */
.video-hero .hero-logo .logo-image,
.video-hero-overlay .hero-logo .logo-image,
.hero-content .hero-logo .logo-image,
img.logo-image {
    filter: none !important;
    /* Keep original white logo */
}

/* Remove the white background too since logo is already white */
.video-hero .hero-logo {
    background: none !important;
    padding: 0 !important;
}

/* Remove columns and center text for better readability */
.video-hero .hero-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 2rem !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

.video-hero .hero-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
}

.video-hero .hero-name {
    text-align: center !important;
}

.video-hero .hero-logo {
    order: -1 !important; /* Put logo at top */
}

/* Remove - will be consolidated */

.video-hero .hero-content {
    background: none !important; /* No background - only use the single overlay */
    padding: 3rem 2rem !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    border: none !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

.video-hero .hero-name {
    text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.9) !important;
    font-weight: 400 !important;
}

.video-hero .hero-role {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9) !important;
    opacity: 0.9 !important;
}

.video-hero .hero-description {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) !important;
    font-weight: 400 !important;
}

.video-hero .hero-skills {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) !important;
    opacity: 0.8 !important;
}

/* Match the reference layout exactly - logo left, text right */
.video-hero .hero-content {
    background: none !important; /* Remove dark background */
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    border: none !important;
    max-width: 100% !important;
    width: 100% !important;
}

.video-hero .hero-layout {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 4rem !important;
    text-align: left !important;
}

.video-hero .hero-logo {
    order: 0 !important;
    justify-self: start !important;
}

.video-hero .hero-logo .logo-image {
    width: 300px !important; /* Larger logo to match reference */
    height: auto !important;
}

.video-hero .hero-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 0.5rem !important;
    justify-self: start !important;
}

.video-hero .hero-name {
    font-size: 4.5rem !important;
    text-align: left !important;
    margin: 0 !important;
    line-height: 0.9 !important;
}

.video-hero .hero-role {
    font-size: 1.3rem !important;
    text-align: left !important;
    margin: 0 0 1.5rem 0 !important;
}

.video-hero .hero-description {
    font-size: 1.2rem !important;
    text-align: left !important;
    margin: 0 0 1rem 0 !important;
    line-height: 1.3 !important;
}

.video-hero .hero-skills {
    font-size: 1rem !important;
    text-align: left !important;
    margin: 0 !important;
}

/* Fix alignment to match reference exactly */
.video-hero-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.video-hero .hero-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

.video-hero .hero-layout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

.video-hero .hero-logo {
    flex-shrink: 0 !important;
}

.video-hero .hero-logo .logo-image {
    width: 280px !important;
    height: auto !important;
}

.video-hero .hero-text {
    flex: 1 !important;
    display: block !important;
    text-align: left !important;
}

.video-hero .hero-name {
    font-size: 5rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.02em !important;
    line-height: 0.85 !important;
    margin: 0 0 0.5rem 0 !important;
}

.video-hero .hero-role {
    font-size: 1.4rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 2rem 0 !important;
    line-height: 1.2 !important;
}

.video-hero .hero-description {
    font-size: 1.3rem !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    margin: 0 0 1.5rem 0 !important;
    max-width: 600px !important;
}

.video-hero .hero-skills {
    font-size: 1.1rem !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    opacity: 0.9 !important;
}

/* Reset and match reference exactly - logo LEFT, text RIGHT */
.video-hero .hero-layout {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 4rem !important;
    height: auto !important;
}

.video-hero .hero-logo {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
}

.video-hero .hero-text {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    display: block !important;
}

.video-hero .hero-logo .logo-image {
    width: 280px !important;
    height: auto !important;
    display: block !important;
}

/* FINAL OVERRIDE - Clear all conflicts and match reference exactly */
.video-hero .hero-content,
.video-hero .hero-layout,
.video-hero .hero-logo,
.video-hero .hero-text {
    all: unset !important;
}

.video-hero .hero-content {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    z-index: 10 !important;
}

.video-hero .hero-layout {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 4rem !important;
    height: 100vh !important;
    gap: 4rem !important;
}

.video-hero .hero-logo {
    display: block !important;
    flex-shrink: 0 !important;
}

.video-hero .hero-logo .logo-image {
    width: 280px !important;
    height: auto !important;
    display: block !important;
}

.video-hero .hero-text {
    display: block !important;
    color: white !important;
    text-align: left !important;
}

.video-hero .hero-name {
    font-family: inherit !important;
    font-size: 5rem !important;
    font-weight: 300 !important;
    color: white !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    line-height: 0.85 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    display: block !important;
}

.video-hero .hero-role {
    font-family: inherit !important;
    font-size: 1.4rem !important;
    font-weight: 300 !important;
    color: white !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block !important;
}

.video-hero .hero-description {
    font-family: inherit !important;
    font-size: 1.3rem !important;
    font-weight: 300 !important;
    color: white !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    display: block !important;
    max-width: 600px !important;
}

.video-hero .hero-skills {
    font-family: inherit !important;
    font-size: 1.1rem !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* NUCLEAR OPTION - Override everything with maximum specificity */
section.video-hero div.video-hero-overlay div.hero-content div.hero-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4rem !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 4rem !important;
    height: 100vh !important;
    box-sizing: border-box !important;
}

section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-logo {
    order: 1 !important;
    flex: 0 0 280px !important;
    width: 280px !important;
}

section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text {
    order: 2 !important;
    flex: 1 !important;
    text-align: left !important;
}

section.video-hero img.logo-image {
    width: 280px !important;
    height: auto !important;
    max-width: 280px !important;
}

/* Increase font sizes for hero text */
section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text h1.hero-name {
    font-size: 6rem !important;
    line-height: 0.8 !important;
}

section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text h2.hero-role {
    font-size: 1.8rem !important;
    line-height: 1.1 !important;
}

section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text p.hero-description {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
}

section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text p.hero-skills {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
}

/* Increase font size specifically for the hero description */
section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text p.hero-description {
    font-size: 2rem !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
}

/* Import Instrument Sans font */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");

/* Set Instrument Sans as the main font for the entire site */
body,
html,
* {
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Specifically target hero elements with Instrument Sans */
section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text h1.hero-name,
section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text h2.hero-role,
section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text p.hero-description,
section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text p.hero-skills {
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Increase width of hero description text */
section.video-hero div.video-hero-overlay div.hero-content div.hero-layout div.hero-text p.hero-description {
    max-width: 800px !important;
    width: 100% !important;
}

/* ==========================================
   ZEN MINIMALIST HEADER - Videos Page
   ========================================== */

.zen-portfolio-header {
    padding: 34px 0 21px 0; /* Fibonacci numbers */
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.zen-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.zen-breathe-space {
    height: 21px; /* Fibonacci number */
}

/* Title Block - Swiss Typography */
.zen-title-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.zen-title-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.zen-main-title {
    font-family: "Instrument Sans", sans-serif;
    font-size: var(--type-scale-display);
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin: 0;
    text-align: center;
    position: relative;
}

/* Description - Golden Ratio Spacing */
.zen-description {
    text-align: center;
    margin-top: 21px; /* Fibonacci number */
    margin-bottom: 34px; /* Fibonacci number */
}

.zen-description p {
    font-size: var(--type-scale-h3);
    color: var(--color-secondary);
    margin: 0;
    font-weight: 300;
    line-height: 1.618; /* Golden ratio */
    max-width: 600px;
    margin: 0 auto;
}

/* Controls Section */
.zen-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

/* Search Container */
.zen-search-container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.zen-search-icon {
    position: absolute;
    left: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-tertiary);
    z-index: 2;
}

.zen-search-input {
    width: 100%;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) calc(var(--space-sm) * 2.5);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--color-primary);
    font-size: var(--type-scale-body);
    font-family: "Instrument Sans", sans-serif;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.zen-search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.zen-search-input::placeholder {
    color: var(--color-tertiary);
    font-weight: 300;
}

/* Filter Grid */
.zen-filter-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    max-width: 800px;
}

.zen-filter-tag {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--color-secondary);
    font-size: var(--type-scale-small);
    font-family: "Instrument Sans", sans-serif;
    font-weight: 300;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.zen-filter-tag:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-primary);
}

.zen-filter-tag.zen-active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-primary);
    font-weight: 400;
}

/* Responsive Design */
@media (max-width: 768px) {
    .zen-portfolio-header {
        padding: var(--space-sm) 0 var(--space-xs) 0;
    }
    
    .zen-container {
        padding: 0 var(--space-sm);
    }
    
    .zen-breathe-space {
        height: var(--space-xs);
    }
    
    .zen-main-title {
        font-size: var(--type-scale-h1);
        letter-spacing: 0.1em;
    }
    
    .zen-title-line {
        width: 40px;
    }
    
    .zen-description p {
        font-size: var(--type-scale-body);
    }
    
    .zen-controls {
        gap: var(--space-sm);
    }
    
    .zen-filter-grid {
        gap: var(--space-xs);
    }
    
    .zen-filter-tag {
        font-size: 0.7rem;
        padding: 6px var(--space-xs);
    }
}

/* =============================================================================
   ZEN CONSULTING PAGE STYLES - DESKTOP SECURE + MOBILE OPTIMIZED
   ============================================================================= */

/* Desktop-first consulting page styles */
body.consulting-page {
    overflow-x: hidden;
    width: 100%;
}

/* Secure desktop layouts */
@media (min-width: 769px) {
    .consulting-page .zen-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        width: 100%;
    }
    
    .consulting-page .zen-hero-video {
        width: 100%;
        overflow: hidden;
    }
}

/* Zen Hero Video Section */
.zen-hero-video {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    width: 100%;
}

.zen-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 2;
}

.zen-hero-content {
    text-align: center;
    max-width: 800px;
    padding: 34px; /* Fibonacci number */
}

/* Zen Title System - Golden Ratio Spacing */
.zen-title-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 21px; /* Fibonacci number */
    margin-bottom: 34px; /* Fibonacci number */
}

.zen-title-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(147, 51, 234, 0.5) 20%, 
        rgba(79, 70, 229, 0.5) 50%, 
        rgba(236, 72, 153, 0.5) 80%, 
        transparent 100%
    );
}

.zen-main-title {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-display);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}

.zen-description {
    text-align: center;
    margin-top: var(--space-md);
}

.zen-description p {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-body);
    font-weight: 300;
    color: var(--color-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Zen Container System */
.zen-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.zen-breathe-space {
    height: var(--space-md);
}

/* Zen Section Headers - Golden Ratio Spacing */
.zen-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 21px; /* Fibonacci number */
    margin-bottom: 55px; /* Fibonacci number */
}

.zen-section-title {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-h2);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}

/* Featured Section */
.zen-featured-section,
.zen-experiential-section {
    padding: calc(var(--space-lg) * 0.6) 0;
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.03) 0%, 
        transparent 50%, 
        rgba(79, 70, 229, 0.03) 100%
    );
}

/* What We Do Section - Neuroscience: Deep blues/purples reduce cortisol, increase trust */
.zen-services-section {
    padding: calc(var(--space-lg) * 0.6) 0;
    background: rgba(8, 12, 25, 0.06);
    position: relative;
    overflow: hidden;
    min-height: 70vh;
}

.zen-services-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    background: 
        radial-gradient(circle at 25% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 75% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 45% 45%, rgba(139, 69, 193, 0.03) 0%, transparent 38%);
    animation: soothingServicesFloat1 38s ease-in-out infinite;
}

.zen-services-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    background: 
        radial-gradient(circle at 65% 70%, rgba(79, 70, 229, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(124, 58, 237, 0.03) 0%, transparent 42%);
    animation: soothingServicesFloat2 52s ease-in-out infinite reverse;
}

/* How We Work Section - Neuroscience: Warm purples activate reward centers, increase engagement */
.zen-process-section {
    padding: calc(var(--space-lg) * 0.6) 0;
    background: rgba(12, 8, 20, 0.05) !important;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
}

/* Make all containers inside process section transparent */
.zen-process-section .zen-container,
.zen-process-section .zen-process-grid,
.zen-process-section .zen-process-step {
    background: transparent !important;
}

.zen-process-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    background: 
        radial-gradient(circle at 30% 70%, rgba(147, 51, 234, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 70% 30%, rgba(168, 85, 247, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 50% 90%, rgba(192, 132, 252, 0.04) 0%, transparent 35%);
    animation: soothingProcessFloat1 42s ease-in-out infinite;
}

.zen-process-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    background: 
        radial-gradient(circle at 80% 80%, rgba(139, 69, 193, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 20% 20%, rgba(147, 51, 234, 0.03) 0%, transparent 45%);
    animation: soothingProcessFloat2 58s ease-in-out infinite reverse;
}

/* Neuroscience-optimized animations: Slow, organic movement reduces stress hormones */
@keyframes soothingServicesFloat1 {
    0%, 100% {
        transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateX(35px) translateY(-25px) rotate(1.2deg) scale(1.08);
        opacity: 0.9;
    }
    50% {
        transform: translateX(-30px) translateY(20px) rotate(-0.8deg) scale(0.94);
        opacity: 0.85;
    }
    75% {
        transform: translateX(25px) translateY(-15px) rotate(0.6deg) scale(1.06);
        opacity: 0.95;
    }
}

@keyframes soothingServicesFloat2 {
    0%, 100% {
        transform: translateX(5px) translateY(8px) rotate(0deg) scale(1);
        opacity: 0.7;
    }
    33% {
        transform: translateX(-22px) translateY(-18px) rotate(-0.6deg) scale(1.06);
        opacity: 0.85;
    }
    66% {
        transform: translateX(28px) translateY(22px) rotate(0.9deg) scale(0.95);
        opacity: 0.8;
    }
}

@keyframes soothingProcessFloat1 {
    0%, 100% {
        transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translateX(40px) translateY(-30px) rotate(1.5deg) scale(1.12);
        opacity: 0.9;
    }
    50% {
        transform: translateX(-35px) translateY(25px) rotate(-1.2deg) scale(0.92);
        opacity: 0.8;
    }
    75% {
        transform: translateX(32px) translateY(-20px) rotate(0.8deg) scale(1.08);
        opacity: 0.95;
    }
}

@keyframes soothingProcessFloat2 {
    0%, 100% {
        transform: translateX(8px) translateY(12px) rotate(0deg) scale(1);
        opacity: 0.6;
    }
    33% {
        transform: translateX(-25px) translateY(-20px) rotate(-0.8deg) scale(1.09);
        opacity: 0.85;
    }
    66% {
        transform: translateX(38px) translateY(28px) rotate(1.3deg) scale(0.93);
        opacity: 0.75;
    }
}

.zen-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
    max-width: 1200px;
    margin: 0 auto;
}

.zen-service-card {
    padding: var(--space-md);
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(147, 51, 234, 0.15);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.zen-service-card:hover {
    background: rgba(147, 51, 234, 0.05);
    border-color: rgba(147, 51, 234, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(147, 51, 234, 0.1);
}

.zen-service-title {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-h3);
    font-weight: 500;
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.zen-service-description {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-body);
    font-weight: 300;
    color: var(--color-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Process Grid */
.zen-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    max-width: 1000px;
    margin: 0 auto;
}

.zen-process-step {
    text-align: center;
    padding: var(--space-md);
}

.zen-step-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.2), 
        rgba(79, 70, 229, 0.2)
    );
    border: 2px solid rgba(147, 51, 234, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-h2);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 auto var(--space-sm) auto;
    transition: all 0.3s ease;
}

.zen-process-step:hover .zen-step-number {
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.4), 
        rgba(79, 70, 229, 0.4)
    );
    border-color: rgba(147, 51, 234, 0.5);
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
}

.zen-step-title {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-h3);
    font-weight: 500;
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.zen-step-description {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-body);
    font-weight: 300;
    color: var(--color-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Featured Work Grid */
.zen-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    max-width: none;
    margin: 0;
    min-height: 60vh;
}

.zen-featured-content {
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
}

.zen-featured-video {
    padding: 0;
    display: flex;
    align-items: center;
}

.zen-featured-title {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-display);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.2;
}

.zen-featured-description {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-body);
    font-weight: 300;
    color: var(--color-secondary);
    line-height: 1.7;
    margin: 0 0 var(--space-sm) 0;
}

.zen-featured-description:last-child {
    margin-bottom: 0;
}

.zen-video-container {
    position: relative;
    width: 100%;
    height: 60vh;
    padding-top: 0;
    background: #000;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.zen-video-container iframe,
.zen-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* CTA Section */
.zen-cta-dynamic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.cta-gradient-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.7) 0%,
        rgba(147, 51, 234, 0.13) 20%,
        rgba(79, 70, 229, 0.11) 40%,
        rgba(236, 72, 153, 0.09) 60%,
        rgba(147, 51, 234, 0.12) 80%,
        rgba(0, 0, 0, 0.8) 100%
    );
    animation: gentle-color-shift 8s ease-in-out infinite;
}

.cta-particle-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(147, 51, 234, 0.45), transparent),
        radial-gradient(1px 1px at 80% 20%, rgba(79, 70, 229, 0.35), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(236, 72, 153, 0.35), transparent),
        radial-gradient(1px 1px at 90% 80%, rgba(147, 51, 234, 0.25), transparent),
        radial-gradient(2px 2px at 10% 90%, rgba(79, 70, 229, 0.45), transparent),
        radial-gradient(1px 1px at 60% 15%, rgba(236, 72, 153, 0.3), transparent),
        radial-gradient(1px 1px at 25% 85%, rgba(147, 51, 234, 0.4), transparent);
    animation: enhanced-particle-drift 12s ease-in-out infinite;
}

.zen-cta-section {
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    min-height: auto;
    padding: var(--space-xl) 0;
}

.zen-cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.zen-cta-title {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-display);
    font-weight: 400;
    color: var(--color-primary);
    margin: var(--space-sm) 0 var(--space-lg) 0;
    line-height: 1.3;
    text-shadow: 
        3px 3px 12px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(147, 51, 234, 0.5),
        0 0 60px rgba(79, 70, 229, 0.3) !important;
}

.zen-subtitle-label {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-small);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-secondary);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    display: block;
    text-shadow: 
        2px 2px 8px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(147, 51, 234, 0.7) !important;
}

/* CTA Button */
.zen-cta-button {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(147, 51, 234, 0.3);
    transition: all 0.4s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    color: var(--color-primary);
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-body);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
}

.zen-cta-button:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(147, 51, 234, 0.5);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(147, 51, 234, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

.zen-cta-subtitle {
    font-size: var(--type-scale-small);
    font-weight: 300;
    opacity: 0.7;
    text-transform: none;
}

/* Subtle particle system */
.zen-particle {
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, 
        rgba(147, 51, 234, 0.6) 0%, 
        transparent 100%
    );
    opacity: 0;
    transition: all 0.8s ease;
}

.zen-cta-button-container:hover .zen-particle {
    opacity: 0.7;
    transform: translateY(-15px);
}

/* Animations */
@keyframes gentle-color-shift {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1);
    }
    33% {
        filter: hue-rotate(15deg) brightness(1.05);
    }
    66% {
        filter: hue-rotate(-15deg) brightness(0.95);
    }
}

@keyframes enhanced-particle-drift {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.7;
    }
    25% {
        transform: translateY(-15px) translateX(8px) rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-25px) translateX(-5px) rotate(180deg);
        opacity: 0.9;
    }
    75% {
        transform: translateY(-10px) translateX(12px) rotate(270deg);
        opacity: 0.8;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .zen-featured-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .zen-featured-content {
        padding: var(--space-md);
        order: 2;
    }
    
    .zen-featured-video {
        order: 1;
    }
    
    .zen-video-container {
        height: 50vh;
    }
    
    .zen-services-grid,
    .zen-process-grid {
        grid-template-columns: 1fr;
    }
    
    .zen-hero-video {
        height: 50vh;
        min-height: 400px;
    }
    
    .zen-featured-title {
        font-size: var(--type-scale-h1);
    }
    
    .zen-cta-title {
        font-size: var(--type-scale-h1);
    }
}

@media (max-width: 480px) {
    .zen-hero-content {
        padding: var(--space-sm);
    }
    
    .zen-service-card,
    .zen-process-step {
        padding: var(--space-sm);
    }
}


/* ================================================
   CONTACT PAGE ZEN CONVERSION OPTIMIZATION
   ================================================ */

/* Contact Section with Dynamic Background */
.zen-contact-section {
    position: relative;
    min-height: 100vh;
    background: var(--color-background);
    overflow: hidden;
}

.zen-contact-dynamic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.contact-gradient-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 20%, rgba(255, 50, 100, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(50, 255, 150, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(100, 150, 255, 0.08) 0%, transparent 50%);
    animation: contactGradientShift 20s ease-in-out infinite;
}

.contact-particle-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1px 1px at 90% 40%, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, 0.15), transparent);
    background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px;
    animation: contactParticleFloat 25s linear infinite;
}

@keyframes contactGradientShift {
    0%, 100% { 
        background: radial-gradient(ellipse at 30% 20%, rgba(255, 50, 100, 0.15) 0%, transparent 50%),
                    radial-gradient(ellipse at 70% 80%, rgba(50, 255, 150, 0.1) 0%, transparent 50%),
                    radial-gradient(ellipse at 50% 50%, rgba(100, 150, 255, 0.08) 0%, transparent 50%);
    }
    33% { 
        background: radial-gradient(ellipse at 70% 30%, rgba(150, 100, 255, 0.12) 0%, transparent 50%),
                    radial-gradient(ellipse at 20% 70%, rgba(255, 150, 50, 0.1) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(50, 200, 255, 0.08) 0%, transparent 50%);
    }
    66% { 
        background: radial-gradient(ellipse at 50% 80%, rgba(100, 255, 200, 0.1) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(255, 100, 150, 0.12) 0%, transparent 50%),
                    radial-gradient(ellipse at 20% 50%, rgba(200, 100, 255, 0.08) 0%, transparent 50%);
    }
}

@keyframes contactParticleFloat {
    0% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-20px) translateX(10px); }
    50% { transform: translateY(-10px) translateX(-5px); }
    75% { transform: translateY(-30px) translateX(15px); }
    100% { transform: translateY(0px) translateX(0px); }
}

/* Value Proposition */
.zen-value-proposition {
    text-align: center;
    margin: var(--space-md) 0;
}

.zen-value-text {
    font-size: var(--type-scale-h3);
    color: var(--color-secondary);
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
}

/* Contact Grid Layout */
.zen-contact-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-2xl);
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* Primary CTA Section */
.zen-primary-cta {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: var(--space-lg);
    backdrop-filter: blur(20px);
}

.zen-cta-title {
    font-size: var(--type-scale-h1);
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    text-align: center;
}

.zen-value-props {
    margin: var(--space-md) 0;
    space-y: var(--space-xs);
}

.zen-value-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
    font-size: var(--type-scale-body);
    color: var(--color-secondary);
}

.zen-check {
    color: #4ade80;
    font-weight: bold;
    font-size: 1.1em;
}

/* Urgency (subtle) */
.zen-urgency {
    text-align: center;
    margin: var(--space-sm) 0;
}

.zen-urgency-text {
    font-size: var(--type-scale-small);
    color: #fbbf24;
    font-style: italic;
}

/* Primary Button Enhancement */
.zen-primary-button {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--type-scale-h3);
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin: var(--space-sm) 0;
}

/* Trust Signals */
.zen-trust-signals {
    text-align: center;
    margin-top: var(--space-sm);
}

.zen-trust-text {
    font-size: var(--type-scale-small);
    color: var(--color-tertiary);
}

/* Alternative Contact */
.zen-alternative-contact {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: var(--space-lg);
}

.zen-section-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.zen-subtitle-line {
    width: 40px;
    height: 1px;
    background: var(--color-tertiary);
}

.zen-subtitle-text {
    font-size: var(--type-scale-h3);
    font-weight: 400;
    color: var(--color-primary);
    margin: 0;
}

/* Contact Methods */
.zen-contact-methods {
    space-y: var(--space-md);
    margin-bottom: var(--space-lg);
}

.zen-contact-method {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.zen-method-icon {
    font-size: 1.5em;
    width: 40px;
    text-align: center;
}

.zen-method-content {
    flex: 1;
}

.zen-method-title {
    font-size: var(--type-scale-h3);
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.zen-method-desc {
    font-size: var(--type-scale-small);
    color: var(--color-tertiary);
    margin: 0 0 8px 0;
}

.zen-method-link {
    color: var(--color-secondary);
    text-decoration: none;
    font-size: var(--type-scale-body);
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.zen-method-link:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Project Guidance */
.zen-project-guidance {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: var(--space-md);
}

.zen-guidance-title {
    font-size: var(--type-scale-h3);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.zen-guidance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
}

.zen-guidance-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--type-scale-small);
    color: var(--color-secondary);
}

.zen-guidance-icon {
    font-size: 1em;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .zen-contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .zen-primary-button {
        font-size: var(--type-scale-body);
        padding: var(--space-sm) var(--space-md);
    }
    
    .zen-guidance-grid {
        grid-template-columns: 1fr;
    }
    
    .zen-section-title {
        font-size: var(--type-scale-h1);
    }
}


/* Enhanced Zen Contact Page Styling */
.zen-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.zen-breathe-space {
    height: var(--space-2xl);
}

.zen-section-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.zen-section-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-display);
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
}

.zen-title-line {
    width: 80px;
    height: 1px;
    background: var(--color-primary);
    opacity: 0.4;
}

/* Override contact grid for better zen layout */
.zen-contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-2xl);
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
    padding: 0;
}

/* Enhanced primary CTA zen styling */
.zen-primary-cta {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: var(--space-2xl);
    backdrop-filter: blur(30px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.zen-cta-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-h1);
    font-weight: 300;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
    text-align: center;
    letter-spacing: 0.02em;
}

/* Value proposition enhancement */
.zen-value-proposition {
    text-align: center;
    margin: var(--space-lg) 0 var(--space-2xl) 0;
}

.zen-value-text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-h3);
    color: var(--color-secondary);
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Enhanced value props */
.zen-value-props {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.zen-value-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: var(--type-scale-body);
    color: var(--color-secondary);
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 300;
}

.zen-value-item:last-child {
    margin-bottom: 0;
}

/* Enhanced alternative contact */
.zen-alternative-contact {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 24px;
    padding: var(--space-xl);
    backdrop-filter: blur(20px);
}

.zen-subtitle-text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-h2);
    font-weight: 300;
    color: var(--color-primary);
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.zen-subtitle-line {
    width: 60px;
    height: 1px;
    background: var(--color-tertiary);
    opacity: 0.6;
}

/* Enhanced contact methods */
.zen-contact-method {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.01);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
}

.zen-contact-method:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.zen-method-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-h3);
    color: var(--color-primary);
    margin: 0 0 6px 0;
    font-weight: 400;
}

.zen-method-desc {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-small);
    color: var(--color-tertiary);
    margin: 0 0 8px 0;
    font-weight: 300;
}

/* Mobile responsive enhancements */
@media (max-width: 1024px) {
    .zen-contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .zen-section-title {
        font-size: var(--type-scale-h1);
        letter-spacing: 0.05em;
    }
    
    .zen-primary-cta,
    .zen-alternative-contact {
        padding: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .zen-container {
        padding: 0 var(--space-sm);
    }
    
    .zen-breathe-space {
        height: var(--space-xl);
    }
    
    .zen-section-title {
        font-size: var(--type-scale-display);
    }
    
    .zen-value-text {
        font-size: var(--type-scale-body);
    }
}


/* Clean Zen Contact Page - Better Layout */
.zen-primary-action {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-2xl) auto;
}

.zen-cta-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-display);
    font-weight: 300;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
    letter-spacing: 0.02em;
}

.zen-value-highlights {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.zen-highlight {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-body);
    color: var(--color-secondary);
    font-weight: 300;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    white-space: nowrap;
}

.zen-cta-button-wrapper {
    margin: var(--space-xl) 0;
}

.zen-primary-cta-button {
    padding: var(--space-md) var(--space-2xl);
    font-size: var(--type-scale-h3);
    font-weight: 500;
    letter-spacing: 0.05em;
    border-radius: 16px;
    min-width: 400px;
}

.zen-trust-note {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-small);
    color: var(--color-tertiary);
    font-weight: 300;
    margin-top: var(--space-sm);
}

/* Alternative Contact Options */
.zen-contact-alternatives {
    max-width: 1000px;
    margin: 0 auto;
}

.zen-contact-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.zen-contact-option {
    text-align: center;
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.zen-contact-option:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-4px);
}

.zen-option-icon {
    font-size: 2.5em;
    margin-bottom: var(--space-sm);
}

.zen-option-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-h3);
    font-weight: 400;
    color: var(--color-primary);
    margin: 0 0 var(--space-xs) 0;
}

.zen-option-link {
    color: var(--color-secondary);
    text-decoration: none;
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-body);
    font-weight: 300;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.zen-option-link:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.zen-option-text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-body);
    color: var(--color-tertiary);
    font-weight: 300;
    margin: 0;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .zen-cta-title {
        font-size: var(--type-scale-h1);
    }
    
    .zen-primary-cta-button {
        min-width: auto;
        width: 100%;
        font-size: var(--type-scale-body);
        padding: var(--space-sm) var(--space-md);
    }
    
    .zen-value-highlights {
        flex-direction: column;
        align-items: center;
    }
    
    .zen-contact-options-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .zen-contact-option {
        padding: var(--space-md);
    }
}


/* NEUROSCIENCE & CONVERSION OPTIMIZED CONTACT PAGE */
.zen-contact-section {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.zen-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    width: 100%;
}

/* Compact header - Neuroscience: Clear hierarchy */
.zen-section-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.zen-section-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
}

.zen-title-line {
    width: 60px;
    height: 1px;
    background: var(--color-primary);
    opacity: 0.4;
}

/* Two-column layout - Fits viewport */
.zen-contact-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-2xl);
    align-items: center;
}

/* Primary section - Neuroscience: Single focal point */
.zen-primary-section {
    max-width: 100%;
}

.zen-cta-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.zen-value-text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--color-secondary);
    font-weight: 300;
    margin-bottom: var(--space-md);
    line-height: 1.4;
}

/* Compact value list - Neuroscience: Chunking for memory */
.zen-value-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.zen-value-list span {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--color-secondary);
    font-weight: 300;
}

/* CTA Button - Neuroscience: Action-oriented, prominent */
.zen-cta-button {
    width: 100%;
    max-width: 400px;
    padding: var(--space-sm) var(--space-lg);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 12px;
    margin: var(--space-md) 0 var(--space-sm) 0;
    display: inline-block;
}

.zen-trust-note {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.75rem;
    color: var(--color-tertiary);
    font-weight: 300;
    margin: 0;
    text-align: center;
}

/* Secondary section - Compact contact methods */
.zen-secondary-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: var(--space-lg);
    backdrop-filter: blur(20px);
    height: fit-content;
}

.zen-contact-methods {
    space-y: var(--space-md);
}

.zen-method {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.zen-method:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.zen-method-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 4px;
}

.zen-method-icon {
    font-size: 1.2em;
}

.zen-method h4 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-primary);
    margin: 0;
}

.zen-method a {
    color: var(--color-secondary);
    text-decoration: none;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    transition: color 0.2s ease;
}

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

.zen-method p {
    color: var(--color-tertiary);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    margin: 0;
}

/* Mobile - Stack vertically, maintain viewport fit */
@media (max-width: 768px) {
    .zen-contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .zen-section-title {
        font-size: 1.5rem;
        letter-spacing: 0.05em;
        white-space: normal !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }
    
    .zen-cta-title {
        font-size: 1.25rem;
    }
    
    .zen-value-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    
    .zen-secondary-section {
        padding: var(--space-md);
    }
    
    .zen-method {
        margin-bottom: var(--space-sm);
    }
}

@media (max-width: 480px) {
    .zen-container {
        padding: 0 var(--space-sm);
    }
    
    .zen-section-title {
        font-size: 1.2rem;
        white-space: normal !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }
    
    .zen-cta-button {
        font-size: 0.9rem;
        padding: var(--space-xs) var(--space-md);
    }
}


/* ================================================
   WORLD-CLASS ZEN CONTACT PAGE
   ================================================ */

/* Contact Section with Dynamic Background */
.zen-contact-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--color-background);
    overflow: hidden;
    padding: var(--space-2xl) 0;
}

.zen-contact-dynamic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.contact-gradient-layer {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 25% 75%, rgba(147, 51, 234, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 75% 25%, rgba(79, 70, 229, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 45% 55%, rgba(236, 72, 153, 0.04) 0%, transparent 38%),
        radial-gradient(circle at 65% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 42%);
    animation: soothingContactFloat1 40s ease-in-out infinite;
}

.contact-particle-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 90% 40%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, 0.25), transparent);
    background-size: 250px 250px, 350px 350px, 180px 180px, 280px 280px;
    animation: contactParticleFloat 30s linear infinite;
}

@keyframes contactGradientShift {
    0%, 100% { 
        background: radial-gradient(ellipse at 25% 20%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
                    radial-gradient(ellipse at 75% 80%, rgba(236, 72, 153, 0.12) 0%, transparent 50%),
                    radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
    }
    33% { 
        background: radial-gradient(ellipse at 70% 30%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
                    radial-gradient(ellipse at 20% 70%, rgba(251, 146, 60, 0.1) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(34, 197, 94, 0.08) 0%, transparent 50%);
    }
    66% { 
        background: radial-gradient(ellipse at 50% 80%, rgba(52, 211, 153, 0.1) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(239, 68, 68, 0.12) 0%, transparent 50%),
                    radial-gradient(ellipse at 20% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
    }
}

@keyframes contactParticleFloat {
    0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    25% { transform: translateY(-30px) translateX(15px) rotate(90deg); }
    50% { transform: translateY(-15px) translateX(-10px) rotate(180deg); }
    75% { transform: translateY(-45px) translateX(20px) rotate(270deg); }
    100% { transform: translateY(0px) translateX(0px) rotate(360deg); }
}

/* Container and Layout */
.zen-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    width: 100%;
}

.zen-section-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.zen-section-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
}

.zen-title-line {
    width: 80px;
    height: 1px;
    background: var(--color-primary);
    opacity: 0.4;
}

/* Contact Grid */
.zen-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-2xl);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Left Side - Contact Info */
.zen-contact-info {
    padding: var(--space-lg);
}

.zen-connection-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-display);
    font-weight: 300;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    letter-spacing: 0.02em;
}

.zen-connection-subtitle {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-h3);
    color: var(--color-secondary);
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: var(--space-xl);
}

.zen-contact-methods {
    space-y: var(--space-lg);
}

.zen-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.zen-contact-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.zen-item-icon {
    font-size: 1.5em;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.zen-item-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-h3);
    font-weight: 400;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.zen-item-link {
    color: var(--color-secondary);
    text-decoration: none;
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-body);
    font-weight: 300;
    transition: color 0.2s ease;
}

.zen-item-link:hover {
    color: var(--color-primary);
}

.zen-item-text {
    color: var(--color-secondary);
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-body);
    font-weight: 300;
    margin: 0;
    line-height: 1.4;
}

/* Right Side - CTA Section */
.zen-cta-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: var(--space-2xl);
    backdrop-filter: blur(30px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.zen-cta-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-h1);
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    text-align: center;
    line-height: 1.3;
}

.zen-cta-subtitle {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-body);
    color: var(--color-tertiary);
    font-weight: 300;
    text-align: center;
    margin-bottom: var(--space-xl);
}

/* STUNNING HERO BUTTON */
.zen-primary-cta {
    margin: var(--space-xl) 0;
    text-align: center;
}

.zen-hero-button {
    position: relative;
    display: inline-block;
    padding: var(--space-md) var(--space-2xl);
    text-decoration: none;
    border-radius: 16px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-h3);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #ffffff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid transparent;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.button-aurora {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 18px;
    background: linear-gradient(45deg, 
        #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, 
        #feca57, #ff9ff3, #54a0ff, #5f27cd);
    background-size: 400% 400%;
    animation: aurora 4s ease infinite;
    z-index: -1;
}

.button-glow-ring {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 20px;
    background: radial-gradient(circle, 
        rgba(147, 51, 234, 0.3) 0%, 
        rgba(236, 72, 153, 0.2) 50%, 
        transparent 70%);
    animation: pulse 2s ease-in-out infinite;
    z-index: -2;
}

.button-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

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

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: particleFloat 3s ease-in-out infinite;
}

.particle:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }
.particle:nth-child(2) { top: 80%; left: 80%; animation-delay: 0.5s; }
.particle:nth-child(3) { top: 30%; left: 70%; animation-delay: 1s; }
.particle:nth-child(4) { top: 70%; left: 30%; animation-delay: 1.5s; }
.particle:nth-child(5) { top: 50%; left: 10%; animation-delay: 2s; }
.particle:nth-child(6) { top: 10%; left: 90%; animation-delay: 2.5s; }

.zen-hero-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 35px rgba(147, 51, 234, 0.4);
}

.zen-hero-button:hover .button-aurora {
    animation-duration: 2s;
}

.zen-hero-button:active {
    transform: translateY(-1px) scale(0.98);
}

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

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

@keyframes particleFloat {
    0%, 100% { transform: translateY(0px) opacity(0.8); }
    50% { transform: translateY(-10px) opacity(1); }
}

/* Secondary Elements */
.zen-alternatives {
    margin-top: var(--space-xl);
}

.zen-divider {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.zen-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.zen-divider-text {
    font-family: 'Instrument Sans', sans-serif;
    color: var(--color-tertiary);
    font-size: var(--type-scale-small);
    font-weight: 300;
}

.zen-secondary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--color-secondary);
    text-decoration: none;
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-body);
    font-weight: 400;
    transition: all 0.3s ease;
}

.zen-secondary-button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.zen-trust-signal {
    margin-top: var(--space-lg);
    text-align: center;
}

.zen-trust-signal p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-small);
    color: var(--color-tertiary);
    font-weight: 300;
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .zen-contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .zen-cta-section {
        padding: var(--space-xl);
    }
}

@media (max-width: 768px) {
    .zen-container {
        padding: 0 var(--space-md);
    }
    
    .zen-section-title {
        font-size: 2rem;
        letter-spacing: 0.05em;
    }
    
    .zen-hero-button {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--type-scale-body);
    }
    
    .zen-contact-item {
        padding: var(--space-sm);
    }
    
    .zen-cta-section {
        padding: var(--space-lg);
    }
}



/* Value Props Styling */
.zen-value-props {
    margin: var(--space-lg) 0 var(--space-xl) 0;
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.zen-prop-item {
    font-family: 'Instrument Sans', sans-serif;
    font-size: var(--type-scale-body);
    color: var(--color-secondary);
    font-weight: 300;
    display: flex;
    align-items: center;
    padding: var(--space-xs);
}

.zen-prop-item::before {
    content: attr(data-check);
    color: #4ade80;
    font-weight: 600;
    margin-right: var(--space-xs);
}

@media (max-width: 768px) {
    .zen-value-props {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }
}



/* Button text styling for multi-line content */
.book-call-button .button-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.book-call-button .main-text {
    font-size: inherit;
    font-weight: inherit;
}

.book-call-button .sub-text {
    font-size: 0.8em;
    opacity: 0.8;
    margin-top: 2px;
    font-weight: 300;
}

.book-call-button {
    padding: 18px 24px !important;
}



/* Make button bigger to prevent text wrapping */
.book-call-button {
    padding: 18px 40px !important;
    min-width: 420px;
    font-size: 1.1em;
}

.book-call-button .main-text {
    white-space: nowrap;
}



/* Contact Page Font Consistency - Match Consulting Page */
.contact-section h2,
.contact-section h3,
.contact-section p,
.contact-section a,
.contact-section ul,
.contact-section li {
    font-family: 'Instrument Sans', sans-serif;
}

.contact-section h2 {
    font-weight: 300;
    letter-spacing: 0.02em;
}

.contact-section h3 {
    font-weight: 400;
}

.contact-section p,
.contact-section a {
    font-weight: 300;
}

.contact-section .book-call-button {
    font-family: 'Instrument Sans', sans-serif !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}



/* Fix zen title line alignment - ensure perfect centering */
.zen-title-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.zen-title-line {
    width: 60px;
    height: 1px;
    background: var(--color-primary);
    opacity: 0.4;
    flex-shrink: 0; /* Prevent lines from shrinking */
}

.zen-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

/* Ensure consistent line widths across all pages */
.zen-title-line,
.zen-subtitle-line {
    width: 60px !important;
    height: 1px;
    background: var(--color-primary);
    opacity: 0.4;
    flex-shrink: 0;
}



/* Fix zen title alignment - compensate for letter spacing */
.zen-main-title {
    margin: 0;
    padding: 0;
    text-align: center;
    /* Remove letter spacing that causes visual offset */
    letter-spacing: 0.05em !important;
}

.zen-section-title {
    margin: 0;
    padding: 0;
    text-align: center;
    letter-spacing: 0.05em !important;
}

/* Force perfect centering for title blocks */
.zen-title-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    text-align: center;
    width: 100%;
}

.zen-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
    text-align: center;
    width: 100%;
}



/* SPECIFIC FIX for zen title line alignment issue */
.zen-portfolio-header .zen-title-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px; /* Use exact pixel value instead of variable */
    margin-bottom: var(--space-sm);
    width: 100%;
}

.zen-portfolio-header .zen-title-line {
    width: 60px !important;
    height: 1px !important;
    background: var(--color-primary) !important;
    opacity: 0.4 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.zen-portfolio-header .zen-main-title {
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap;
}

/* Force equal spacing */
.zen-portfolio-header .zen-title-block .zen-title-line:first-child {
    margin-right: 0;
}

.zen-portfolio-header .zen-title-block .zen-title-line:last-child {
    margin-left: 0;
}



/* Fix consulting page subtitle alignment */
.zen-hero-content .zen-description {
    text-align: center !important;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.zen-hero-content .zen-description p {
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 0 var(--space-md);
    line-height: 1.4;
}

/* Ensure hero content container is centered */
.zen-hero-content {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--grid-unit);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



/* ================================================
   SOOTHING AMORPHOUS BLOBS - NEUROSCIENCE DESIGN
   ================================================ */

/* Process Section Background */
.zen-process-section {
    position: relative;
    overflow: hidden;
    background: var(--color-background);
}

.zen-process-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* Amorphous Blobs - Psychology: Organic shapes reduce stress */
.amorphous-blob {
    position: absolute;
    border-radius: 50% 40% 60% 30%;
    filter: blur(60px);
    opacity: 0.15;
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Blob 1 - Warm calming color */
.blob-1 {
    width: 400px;
    height: 300px;
    top: 10%;
    left: -10%;
    background: radial-gradient(circle, rgba(147, 197, 253, 0.8) 0%, rgba(59, 130, 246, 0.6) 70%);
    animation: sootheFloat1 25s ease-in-out infinite;
}

/* Blob 2 - Cool relaxing color */
.blob-2 {
    width: 350px;
    height: 400px;
    top: 50%;
    right: -15%;
    background: radial-gradient(circle, rgba(167, 243, 208, 0.7) 0%, rgba(34, 197, 94, 0.5) 70%);
    animation: sootheFloat2 20s ease-in-out infinite reverse;
}

/* Blob 3 - Gentle purple */
.blob-3 {
    width: 300px;
    height: 350px;
    bottom: 20%;
    left: 20%;
    background: radial-gradient(circle, rgba(196, 181, 253, 0.6) 0%, rgba(147, 51, 234, 0.4) 70%);
    animation: sootheFloat3 30s ease-in-out infinite;
}

/* Blob 4 - Soft pink */
.blob-4 {
    width: 250px;
    height: 300px;
    top: 30%;
    left: 70%;
    background: radial-gradient(circle, rgba(249, 168, 212, 0.5) 0%, rgba(236, 72, 153, 0.3) 70%);
    animation: sootheFloat4 22s ease-in-out infinite reverse;
}

/* Soothing Float Animations - Neuroscience: Slow movements reduce anxiety */
@keyframes sootheFloat1 {
    0%, 100% { 
        transform: translate(0px, 0px) rotate(0deg) scale(1);
        border-radius: 50% 40% 60% 30%;
    }
    25% { 
        transform: translate(30px, -20px) rotate(3deg) scale(1.1);
        border-radius: 40% 60% 30% 50%;
    }
    50% { 
        transform: translate(-10px, -40px) rotate(-2deg) scale(0.9);
        border-radius: 60% 30% 50% 40%;
    }
    75% { 
        transform: translate(-25px, 15px) rotate(1deg) scale(1.05);
        border-radius: 30% 50% 40% 60%;
    }
}

@keyframes sootheFloat2 {
    0%, 100% { 
        transform: translate(0px, 0px) rotate(0deg) scale(1);
        border-radius: 40% 50% 60% 30%;
    }
    33% { 
        transform: translate(-20px, 25px) rotate(-2deg) scale(1.08);
        border-radius: 60% 30% 40% 50%;
    }
    66% { 
        transform: translate(15px, -30px) rotate(2.5deg) scale(0.95);
        border-radius: 30% 60% 50% 40%;
    }
}

@keyframes sootheFloat3 {
    0%, 100% { 
        transform: translate(0px, 0px) rotate(0deg) scale(1);
        border-radius: 60% 40% 30% 50%;
    }
    40% { 
        transform: translate(25px, 35px) rotate(4deg) scale(1.12);
        border-radius: 40% 30% 50% 60%;
    }
    80% { 
        transform: translate(-35px, -25px) rotate(-3deg) scale(0.88);
        border-radius: 50% 60% 40% 30%;
    }
}

@keyframes sootheFloat4 {
    0%, 100% { 
        transform: translate(0px, 0px) rotate(0deg) scale(1);
        border-radius: 30% 60% 50% 40%;
    }
    50% { 
        transform: translate(-40px, 20px) rotate(-4deg) scale(1.15);
        border-radius: 60% 40% 30% 50%;
    }
}

/* Process Particles - Subtle movement for depth */
.zen-process-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 15% 25%, rgba(255, 255, 255, 0.1), transparent),
        radial-gradient(1px 1px at 35% 75%, rgba(255, 255, 255, 0.08), transparent),
        radial-gradient(2px 2px at 85% 45%, rgba(255, 255, 255, 0.12), transparent),
        radial-gradient(1px 1px at 65% 15%, rgba(255, 255, 255, 0.06), transparent);
    background-size: 300px 300px, 200px 200px, 400px 400px, 250px 250px;
    animation: gentleParticleFloat 40s linear infinite;
}

@keyframes gentleParticleFloat {
    0% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-15px) translateX(10px); }
    50% { transform: translateY(-8px) translateX(-5px); }
    75% { transform: translateY(-20px) translateX(8px); }
    100% { transform: translateY(0px) translateX(0px); }
}

/* Enhanced Process Steps with subtle interaction */
.zen-process-step {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 2;
}

.zen-process-step:hover {
    transform: translateY(-5px);
}

/* Scroll-reactive effects will be added via JavaScript */
.zen-process-section.in-view .blob-1 {
    animation-duration: 20s;
    opacity: 0.25;
}

.zen-process-section.in-view .blob-2 {
    animation-duration: 15s;
    opacity: 0.25;
}

.zen-process-section.in-view .blob-3 {
    animation-duration: 25s;
    opacity: 0.25;
}

.zen-process-section.in-view .blob-4 {
    animation-duration: 18s;
    opacity: 0.25;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .amorphous-blob {
        filter: blur(40px);
        opacity: 0.08;
    }
    
    .blob-1, .blob-2, .blob-3, .blob-4 {
        width: 250px;
        height: 200px;
    }
}



/* ================================================
   RESTORE BRIGHT CTA SECTION STYLING
   ================================================ */

/* CTA Section Background */
.zen-cta-section {
    background: rgba(255, 255, 255, 0.02) !important;
    position: relative;
    min-height: auto;
    padding: var(--space-xl) 0 !important;
}

.zen-cta-dynamic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.cta-gradient-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.7) 0%,
        rgba(147, 51, 234, 0.13) 20%,
        rgba(79, 70, 229, 0.11) 40%,
        rgba(236, 72, 153, 0.09) 60%,
        rgba(147, 51, 234, 0.12) 80%,
        rgba(0, 0, 0, 0.8) 100%
    );
    animation: gentle-color-shift 8s ease-in-out infinite;
}

.cta-particle-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 25% 35%, rgba(147, 51, 234, 0.4), transparent),
        radial-gradient(3px 3px at 75% 25%, rgba(79, 70, 229, 0.3), transparent),
        radial-gradient(2px 2px at 45% 75%, rgba(236, 72, 153, 0.35), transparent),
        radial-gradient(1px 1px at 60% 15%, rgba(236, 72, 153, 0.3), transparent),
        radial-gradient(1px 1px at 25% 85%, rgba(147, 51, 234, 0.4), transparent);
    background-size: 300px 300px, 400px 400px, 350px 350px, 200px 200px, 250px 250px;
    animation: enhanced-particle-drift 12s ease-in-out infinite;
}

/* CTA Content */
.zen-cta-content {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.zen-subtitle-label {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: var(--type-scale-small) !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    color: var(--color-secondary) !important;
    text-transform: uppercase !important;
    margin-bottom: var(--space-sm) !important;
    display: block !important;
    text-shadow: 
        2px 2px 8px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(147, 51, 234, 0.7) !important;
}

.zen-cta-title {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: var(--type-scale-display) !important;
    font-weight: 400 !important;
    color: var(--color-primary) !important;
    margin: var(--space-sm) 0 var(--space-lg) 0 !important;
    line-height: 1.3 !important;
    text-shadow: 
        3px 3px 12px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(147, 51, 234, 0.5),
        0 0 60px rgba(79, 70, 229, 0.3) !important;
}

/* Enhanced CTA Button */
.zen-cta-button {
    position: relative !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    transition: all 0.4s ease !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-xs) !important;
    padding: var(--space-md) var(--space-lg) !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: var(--type-scale-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

.zen-cta-button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(147, 51, 234, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0 8px 25px rgba(147, 51, 234, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.zen-cta-subtitle {
    font-size: var(--type-scale-small) !important;
    font-weight: 300 !important;
    opacity: 0.7 !important;
    text-transform: none !important;
}

/* Animations */
@keyframes gentle-color-shift {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1);
    }
    33% {
        filter: hue-rotate(15deg) brightness(1.05);
    }
    66% {
        filter: hue-rotate(-15deg) brightness(0.95);
    }
}

@keyframes enhanced-particle-drift {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.7;
    }
    25% {
        transform: translateY(-15px) translateX(8px) rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-25px) translateX(-5px) rotate(180deg);
        opacity: 0.9;
    }
    75% {
        transform: translateY(-20px) translateX(12px) rotate(270deg);
        opacity: 0.8;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .zen-cta-title {
        font-size: var(--type-scale-h1) !important;
    }
}



/* SPECIFIC FIX for SELECTED WORK title line offset */
.zen-portfolio-header .zen-title-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important; /* Exact pixel value */
    margin-bottom: var(--space-sm) !important;
    width: 100% !important;
    text-align: center !important;
}

.zen-portfolio-header .zen-title-line {
    width: 60px !important;
    height: 1px !important;
    background: var(--color-primary) !important;
    opacity: 0.4 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.zen-portfolio-header .zen-main-title {
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* Force equal distribution */
.zen-portfolio-header .zen-title-block > * {
    flex: 0 0 auto !important;
}

.zen-portfolio-header .zen-title-block .zen-title-line:first-child,
.zen-portfolio-header .zen-title-block .zen-title-line:last-child {
    width: 60px !important;
}



/* Make SELECTED WORK title bigger and fix alignment */
.zen-portfolio-header .zen-main-title {
    font-size: clamp(2.5rem, 6vw, 4rem) !important; /* Bigger than before */
    font-weight: 300 !important;
    letter-spacing: 0.1em !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* Adjust lines to match bigger text */
.zen-portfolio-header .zen-title-line {
    width: 80px !important; /* Slightly longer for bigger text */
    height: 1px !important;
    background: var(--color-primary) !important;
    opacity: 0.4 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Increase gap slightly for bigger text */
.zen-portfolio-header .zen-title-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px !important; /* Bigger gap for bigger text */
    margin-bottom: var(--space-sm) !important;
    width: 100% !important;
    text-align: center !important;
}



/* Make consulting page subtitle bigger to match */
.zen-hero-content .zen-description p {
    font-size: clamp(1.2rem, 3vw, 1.8rem) !important; /* Bigger subtitle text */
    font-weight: 300 !important;
    color: var(--color-secondary) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 var(--space-md) !important;
}

/* Ensure proper spacing with bigger subtitle */
.zen-hero-content .zen-description {
    margin-top: var(--space-lg) !important;
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}



/* REVERT - Keep SELECTED WORK at original size, just fix alignment */
.zen-portfolio-header .zen-main-title {
    font-size: var(--type-scale-display) !important; /* Back to original size */
    font-weight: 300 !important;
    letter-spacing: 0.08em !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* Keep original line size */
.zen-portfolio-header .zen-title-line {
    width: 60px !important; /* Back to original width */
    height: 1px !important;
    background: var(--color-primary) !important;
    opacity: 0.4 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep original gap */
.zen-portfolio-header .zen-title-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important; /* Back to original gap */
    margin-bottom: var(--space-sm) !important;
    width: 100% !important;
    text-align: center !important;
}



/* FORCE PERFECT CENTERING for SELECTED WORK title lines */
.zen-portfolio-header .zen-title-block {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 24px !important;
    margin-bottom: var(--space-sm) !important;
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.zen-portfolio-header .zen-title-line:first-child {
    justify-self: end !important;
    width: 60px !important;
    height: 1px !important;
    background: var(--color-primary) !important;
    opacity: 0.4 !important;
}

.zen-portfolio-header .zen-main-title {
    justify-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.zen-portfolio-header .zen-title-line:last-child {
    justify-self: start !important;
    width: 60px !important;
    height: 1px !important;
    background: var(--color-primary) !important;
    opacity: 0.4 !important;
}



/* REMOVE LETTER SPACING to fix visual offset */
.zen-portfolio-header .zen-main-title {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: var(--type-scale-display) !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important; /* Remove letter spacing completely */
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    color: var(--color-primary) !important;
}

/* Force perfect pixel alignment */
.zen-portfolio-header .zen-title-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    margin: 0 auto var(--space-sm) auto !important;
    width: fit-content !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}



/* NUCLEAR OPTION - Force perfect alignment for SELECTED WORK */
.zen-portfolio-header .zen-title-block {
    display: table !important;
    margin: 0 auto !important;
    text-align: center !important;
    table-layout: fixed !important;
    width: auto !important;
}

.zen-portfolio-header .zen-title-line:first-child,
.zen-portfolio-header .zen-main-title,
.zen-portfolio-header .zen-title-line:last-child {
    display: table-cell !important;
    vertical-align: middle !important;
    text-align: center !important;
}

.zen-portfolio-header .zen-title-line:first-child {
    width: 60px !important;
    padding-right: 24px !important;
    text-align: right !important;
}

.zen-portfolio-header .zen-title-line:last-child {
    width: 60px !important;
    padding-left: 24px !important;
    text-align: left !important;
}

.zen-portfolio-header .zen-main-title {
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* Reset any inherited margins/padding */
.zen-portfolio-header .zen-title-block * {
    box-sizing: border-box !important;
    margin: 0 !important;
}



/* RESTORE ORIGINAL LETTER SPACING for SELECTED WORK */
.zen-portfolio-header .zen-main-title {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: var(--type-scale-display) !important;
    font-weight: 300 !important;
    letter-spacing: 0.08em !important; /* Restore original letter spacing */
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    color: var(--color-primary) !important;
}



/* Fix zen-description alignment in portfolio header */
.zen-portfolio-header .zen-description {
    text-align: center !important;
    margin: var(--space-md) auto !important;
    max-width: 800px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.zen-portfolio-header .zen-description p {
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 var(--space-md) !important;
    max-width: 600px !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: var(--type-scale-body) !important;
    color: var(--color-secondary) !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
}



/* Remove gray blocks and restore proper zen title lines */
.zen-portfolio-header .zen-title-line {
    width: 60px !important;
    height: 1px !important;
    background: var(--color-primary) !important;
    opacity: 0.4 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any background or styling that's creating gray blocks */
.zen-portfolio-header .zen-title-line:first-child,
.zen-portfolio-header .zen-title-line:last-child {
    background: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Ensure table cell styling doesn't add backgrounds */
.zen-portfolio-header .zen-title-line:first-child {
    width: 60px !important;
    padding-right: 24px !important;
    text-align: right !important;
    background-color: transparent !important;
}

.zen-portfolio-header .zen-title-line:last-child {
    width: 60px !important;
    padding-left: 24px !important;
    text-align: left !important;
    background-color: transparent !important;
}



/* Reduce vertical spacing between portfolio sections */
.zen-portfolio-header {
    padding: var(--space-lg) 0 var(--space-md) 0 !important;
}

.zen-portfolio-header .zen-breathe-space {
    height: var(--space-md) !important; /* Reduce from xl to md */
}

.zen-portfolio-header .zen-title-block {
    margin-bottom: var(--space-sm) !important; /* Reduce spacing after title */
}

.zen-portfolio-header .zen-description {
    margin: var(--space-sm) auto var(--space-md) auto !important; /* Reduce top/bottom margins */
}

.zen-portfolio-header .zen-controls {
    margin-top: var(--space-sm) !important; /* Less space before controls */
}

/* Reduce space between header and video grid */
.video-section {
    padding-top: var(--space-md) !important; /* Less space above video grid */
}

/* Tighten up the overall header container */
.zen-container {
    padding: 0 var(--space-md) !important;
}



/* CONSULTING PAGE ONLY - Apply portfolio button style to CTA */
.consulting-page .zen-cta-button {
    /* Copy the exact styling from zen-portfolio-cta-button */
    display: inline-block !important;
    padding: var(--space-md) var(--space-xl) !important;
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.1) 0%, 
        rgba(79, 70, 229, 0.1) 50%, 
        rgba(147, 51, 234, 0.1) 100%) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    border-radius: 8px !important;
    color: var(--color-primary) !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: var(--type-scale-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.consulting-page .zen-cta-button:hover {
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.15) 0%, 
        rgba(79, 70, 229, 0.15) 50%, 
        rgba(147, 51, 234, 0.15) 100%) !important;
    border-color: rgba(147, 51, 234, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(147, 51, 234, 0.2) !important;
}

/* Make sure this doesn't affect other pages */
.consulting-page .zen-cta-button .zen-cta-subtitle {
    font-size: var(--type-scale-small) !important;
    font-weight: 300 !important;
    opacity: 0.7 !important;
    text-transform: none !important;
    display: block !important;
    margin-top: 4px !important;
}



/* REPLACE consulting CTA button with exact portfolio button style */
.consulting-page .zen-cta-button {
    display: inline-block !important;
    padding: 18px 32px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    color: var(--color-primary) !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: var(--type-scale-h3) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

.consulting-page .zen-cta-button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Style the subtitle within the button */
.consulting-page .zen-cta-button .zen-cta-subtitle {
    font-size: 0.8em !important;
    font-weight: 300 !important;
    opacity: 0.8 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

/* Remove any conflicting styles */
.consulting-page .zen-cta-button * {
    pointer-events: none !important;
}



/* MATCH exact portfolio button colors on consulting CTA */
.consulting-page .zen-cta-button {
    display: inline-block !important;
    padding: 18px 32px !important;
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.1) 0%, 
        rgba(79, 70, 229, 0.1) 50%, 
        rgba(147, 51, 234, 0.1) 100%) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    border-radius: 12px !important;
    color: var(--color-primary) !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: var(--type-scale-h3) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

.consulting-page .zen-cta-button:hover {
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.15) 0%, 
        rgba(79, 70, 229, 0.15) 50%, 
        rgba(147, 51, 234, 0.15) 100%) !important;
    border-color: rgba(147, 51, 234, 0.5) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(147, 51, 234, 0.2) !important;
}



/* Make the subtitle text more visible on consulting CTA button */
.consulting-page .zen-cta-button .zen-cta-subtitle {
    font-size: 0.8em !important;
    font-weight: 300 !important;
    opacity: 0.9 !important; /* Increase from 0.8 to 0.9 for better visibility */
    color: rgba(255, 255, 255, 0.9) !important; /* Explicit white color instead of grey */
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; /* Add subtle shadow for readability */
}

/* Ensure button has proper contrast */
.consulting-page .zen-cta-button {
    color: var(--color-primary) !important; /* Ensure main text is white */
}



/* ================================================
   INDEX PAGE ZEN DESIGN APPLICATION
   ================================================ */

/* Index page specific zen styling - won't affect other pages */
body:not(.consulting-page):not(.video-page) .zen-about-section {
    background: rgba(5, 5, 15, 0.3);
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 60vh;
}

/* Soothing moving background for about section - more visible */
body:not(.consulting-page):not(.video-page) .zen-about-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    background: 
        radial-gradient(circle at 20% 80%, rgba(147, 51, 234, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(79, 70, 229, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.04) 0%, transparent 35%);
    animation: soothingFloat1 35s ease-in-out infinite;
}

body:not(.consulting-page):not(.video-page) .zen-about-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    background: 
        radial-gradient(circle at 60% 70%, rgba(147, 51, 234, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 90% 10%, rgba(79, 70, 229, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 30% 60%, rgba(168, 85, 247, 0.04) 0%, transparent 40%);
    animation: soothingFloat2 50s ease-in-out infinite reverse;
}

@keyframes soothingFloat1 {
    0%, 100% {
        transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateX(30px) translateY(-20px) rotate(1deg) scale(1.1);
        opacity: 1;
    }
    50% {
        transform: translateX(-25px) translateY(15px) rotate(-1deg) scale(0.95);
        opacity: 0.9;
    }
    75% {
        transform: translateX(20px) translateY(-10px) rotate(0.5deg) scale(1.05);
        opacity: 1;
    }
}

@keyframes soothingFloat2 {
    0%, 100% {
        transform: translateX(10px) translateY(5px) rotate(0deg) scale(1);
        opacity: 0.7;
    }
    33% {
        transform: translateX(-20px) translateY(-15px) rotate(-0.5deg) scale(1.08);
        opacity: 0.9;
    }
    66% {
        transform: translateX(35px) translateY(20px) rotate(1deg) scale(0.92);
        opacity: 0.8;
    }
}

/* Make text containers transparent to show moving background */
body:not(.consulting-page):not(.video-page) .zen-container,
body:not(.consulting-page):not(.video-page) .about-container,
body:not(.consulting-page):not(.video-page) .zen-about-content {
    background: transparent !important;
}

body:not(.consulting-page):not(.video-page) .zen-about-content p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.6rem;
    color: var(--color-secondary);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: var(--space-md);
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
}

body:not(.consulting-page):not(.video-page) .zen-credentials {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    flex-wrap: wrap;
}

/* Index page featured section zen styling */
body:not(.consulting-page):not(.video-page) .zen-featured-section {
    background: transparent;
    position: relative;
    z-index: 1;
}

/* Make featured text much larger on index page */
body:not(.consulting-page):not(.video-page) .zen-featured-title {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
}

body:not(.consulting-page):not(.video-page) .zen-featured-description {
    font-size: 1.3rem;
    line-height: 1.6;
    font-weight: 300;
}

/* INDEX PAGE ONLY - Apply consulting page CTA button styling */
body:not(.consulting-page):not(.video-page) .zen-cta-button {
    display: inline-block !important;
    padding: 18px 32px !important;
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.1) 0%, 
        rgba(79, 70, 229, 0.1) 50%, 
        rgba(147, 51, 234, 0.1) 100%) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    border-radius: 12px !important;
    color: var(--color-primary) !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: var(--type-scale-h3) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

body:not(.consulting-page):not(.video-page) .zen-cta-button:hover {
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.15) 0%, 
        rgba(79, 70, 229, 0.15) 50%, 
        rgba(147, 51, 234, 0.15) 100%) !important;
    border-color: rgba(147, 51, 234, 0.5) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(147, 51, 234, 0.2) !important;
}

/* Style the subtitle within the button for index page */
body:not(.consulting-page):not(.video-page) .zen-cta-button .zen-cta-subtitle {
    font-size: 0.8em !important;
    font-weight: 300 !important;
    opacity: 0.9 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* INDEX PAGE ZEN HERO - Make it work with Vimeo iframe background */
body:not(.consulting-page):not(.video-page) .zen-hero-video {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

body:not(.consulting-page):not(.video-page) .video-hero-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

body:not(.consulting-page):not(.video-page) .zen-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
}

body:not(.consulting-page):not(.video-page) .zen-hero-content {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--grid-unit);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Style the zen title for index page */
body:not(.consulting-page):not(.video-page) .zen-main-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Style the zen role subtitle for index page - Fibonacci spacing with name */
body:not(.consulting-page):not(.video-page) .zen-role-subtitle p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 400;
    color: var(--color-secondary);
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 13px 0 21px 0; /* Fibonacci: 13px top, 21px bottom */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    opacity: 0.9;
}

/* Style the zen description for index page - Fibonacci spacing */
body:not(.consulting-page):not(.video-page) .zen-description p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    font-weight: 300;
    color: var(--color-secondary);
    line-height: 1.618; /* Golden ratio */
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    margin-top: 34px; /* Fibonacci number */
    margin-bottom: 55px; /* Fibonacci number */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Style the zen hero logo for index page */
body:not(.consulting-page):not(.video-page) .zen-hero-logo {
    text-align: center;
    margin-top: var(--space-lg);
}

body:not(.consulting-page):not(.video-page) .zen-logo-image {
    width: 200px;
    height: auto;
    opacity: 0.9;
    filter: none;
}

/* Ensure video backgrounds are preserved */
body:not(.consulting-page):not(.video-page) .video-hero {
    /* Keep all existing video hero styling intact */
    position: relative;
    z-index: 2;
}

body:not(.consulting-page):not(.video-page) .page-background {
    /* Keep all existing background styling intact */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Index page CTA inherits existing zen-cta styling but preserve uniqueness */
body:not(.consulting-page):not(.video-page) .zen-cta-section {
    /* Zen CTA styling already exists - just ensure it doesn't conflict */
    position: relative;
    z-index: 1;
}

/* ===============================================
   MOBILE BREAKPOINT FOR PHONES
   Optimizes layout for phone screens (768px and below)
   =============================================== */
@media (max-width: 768px) {
    /* Mobile-first adjustments for phone screens */
    
    /* Body adjustments for mobile - critical containment */
    body {
        overflow-x: hidden;
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    /* Universal mobile centering and containment */
    * {
        box-sizing: border-box;
        max-width: 100%;
    }
    
    /* Center all major content areas */
    section,
    .zen-container,
    .container,
    .hero-content,
    .about-container,
    .featured-container {
        text-align: center;
        padding: 2rem 1rem;
        margin: 0 auto;
        width: 100%;
        max-width: 100vw;
    }
    
    /* Center all text elements */
    h1, h2, h3, h4, h5, h6, p, div, span {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Improve typography for mobile readability */
    h1 {
        font-size: clamp(2rem, 6vw, 3rem);
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
        line-height: 1.3;
        margin-bottom: 1rem;
    }
    
    h3 {
        font-size: clamp(1.25rem, 3vw, 1.5rem);
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }
    
    p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
        padding: 0 1rem;
    }
    
    /* Container adjustments with centering */
    .zen-container {
        padding: 0 1rem;
        max-width: 100%;
        text-align: center;
    }
    
    /* Center all images and media */
    img, video, iframe {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }
    
    /* Button improvements for mobile - centered */
    .sparkle-button,
    .zen-cta-button,
    .epic-sparkle-button,
    .zen-primary-cta-button {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
        width: 100%;
        max-width: 300px;
        margin: 1rem auto;
        display: block;
        text-align: center;
    }
    
    /* Video containers responsive and centered */
    .zen-video-container,
    .video-container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Grid adjustments - centered columns */
    .zen-featured-grid,
    .zen-services-grid,
    .about-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
    }
    
    /* Zen-specific elements centering */
    .zen-title-block,
    .zen-hero-content,
    .zen-featured-content,
    .zen-about-content {
        text-align: center;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    /* Navigation adjustments (if mobile nav exists) */
    .nav, .navigation {
        text-align: center;
        width: 100%;
    }
    
    /* Footer centering */
    .site-footer,
    .footer-content,
    .footer-social,
    .footer-copyright {
        text-align: center;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    /* Credentials and inline elements */
    .credentials-inline,
    .zen-credentials {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        text-align: center;
    }
    
    /* Card elements */
    .zen-service-card,
    .credential-badge {
        margin: 0 auto;
        text-align: center;
        max-width: 300px;
    }
    
    /* ===== MOBILE HERO SECTION FIXES ===== */
    
    /* Hero section - full viewport background */
    .zen-hero-video,
    .video-hero {
        position: relative !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hero overlay - properly centered without offset */
    .zen-hero-video .zen-hero-overlay,
    .video-hero .video-hero-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4rem 1rem 2rem 1rem !important; /* Account for header */
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Vimeo iframe - simple full coverage */
    .zen-hero-video iframe,
    .video-hero iframe,
    .video-hero-container iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1 !important;
    }
    
    /* Force video container to full size */
    .video-hero-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }
    
    /* HTML5 video elements - simple full coverage */
    .hero-video-background,
    .zen-hero-video .hero-video-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        overflow: hidden !important;
    }
    
    .hero-video-background video,
    .zen-hero-video video {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1 !important;
    }
    
    /* Mobile video scaling - centered and properly positioned */
    @media (max-width: 768px) {
        .zen-hero-video iframe,
        .video-hero iframe,
        .video-hero-container iframe {
            width: 100% !important;
            height: 100% !important;
            left: 0 !important;
            top: 0 !important;
            object-fit: cover !important;
            transform: none !important;
        }
        
        .hero-video-background video,
        .zen-hero-video video {
            width: 100% !important;
            height: 100% !important;
            left: 0 !important;
            top: 0 !important;
            object-fit: cover !important;
            transform: none !important;
        }
    }
    
    /* Mobile HTML5 video fixes */
    @media (max-width: 768px) {
        .hero-video-background video,
        .zen-hero-video video {
            /* Force autoplay on mobile */
            -webkit-playsinline: true !important;
            playsinline: true !important;
            /* Ensure loading */
            preload: auto !important;
            /* Mobile performance */
            will-change: transform !important;
        }
        
        /* Fallback poster for mobile if video fails */
        .hero-video-background::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            z-index: 0;
        }
    }
    
    /* Hero overlay - ensure proper positioning */
    .zen-hero-overlay,
    .video-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        padding: 2rem 1rem;
    }
    
    /* Hero content - properly contained and centered */
    .zen-hero-content,
    .hero-content {
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
        text-align: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ===== TEXT CONTAINMENT FIXES ===== */
    
    /* Hero title - allow full name display */
    .zen-main-title,
    .hero-title {
        font-size: clamp(1.1rem, 3.5vw, 1.6rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        max-width: calc(100vw - 2rem) !important;
        width: auto !important;
        padding: 0 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow: visible !important;
    }
    
    /* Hero role/subtitle - ultra-constrained text */
    .zen-role-subtitle,
    .hero-role,
    .hero-subtitle {
        font-size: clamp(0.7rem, 2vw, 0.9rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        max-width: calc(100vw - 3rem) !important;
        width: calc(100vw - 3rem) !important;
        padding: 0 1.5rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Hero description - ultra-constrained text */
    .zen-description,
    .hero-description {
        font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 1.5rem !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        max-width: calc(100vw - 3rem) !important;
        width: calc(100vw - 3rem) !important;
        padding: 0 1.5rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Hero logo - center and size appropriately */
    .zen-hero-logo,
    .hero-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem auto;
        max-width: 120px;
    }
    
    .zen-logo-image,
    .hero-logo img {
        max-width: 100px;
        height: auto;
        display: block;
    }
    
    /* ===== COMPREHENSIVE MOBILE TEXT CONTAINMENT ===== */
    
    /* Global containment - force everything to fit */
    * {
        box-sizing: border-box !important;
        max-width: 100vw !important;
    }
    
    /* Body and html - strict viewport containment */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Force all containers to viewport width */
    body > * {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* All text elements - aggressive overflow prevention */
    h1, h2, h3, h4, h5, h6, p, span, div, a {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    
    /* Headers and navigation - compact mobile */
    .header {
        padding: 0.5rem 0 !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    .header-content {
        padding: 0 1rem !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    .logo-text {
        font-size: 1rem !important;
        letter-spacing: 0.1em !important;
    }
    
    /* Hide desktop navigation on mobile */
    .desktop-nav {
        display: none !important;
    }
    
    /* Mobile hamburger button - ensure visibility */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 30px !important;
        height: 30px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 5px !important;
        gap: 4px !important;
        z-index: 1001 !important;
        position: relative !important;
    }
    
    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .hamburger-line {
        width: 20px !important;
        height: 2px !important;
        background-color: #ffffff !important;
        transition: all 0.3s ease !important;
        display: block !important;
    }
    
    /* Mobile navigation overlay */
    .mobile-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 1) !important;
        z-index: 2000 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-nav.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .mobile-nav-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
        position: relative !important;
    }
    
    .mobile-menu-close {
        position: absolute !important;
        top: 2rem !important;
        right: 2rem !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        font-size: 2rem !important;
        cursor: pointer !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mobile-nav-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    .mobile-nav-link {
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 1.1rem !important;
        font-weight: 300 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        transition: all 0.3s ease !important;
        padding: 0.75rem 1.5rem !important;
    }
    
    .mobile-nav-link:hover {
        color: #cccccc !important;
        transform: translateY(-2px) !important;
    }
    
    /* Portfolio page header - balanced mobile */
    .zen-portfolio-header {
        padding: 1.5rem 0 1rem 0 !important;
        margin-top: 3.5rem !important; /* Account for fixed header */
        min-height: auto !important;
        height: auto !important;
        text-align: center !important;
    }
    
    .zen-container {
        padding: 0 1rem !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    .zen-breathe-space {
        height: 0.75rem !important;
    }
    
    .zen-title-block {
        margin-bottom: 1rem !important;
        gap: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .zen-main-title {
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    .zen-title-line {
        width: 30px !important;
        flex-shrink: 0 !important;
    }
    
    .zen-description {
        margin-bottom: 1.5rem !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 1rem !important;
    }
    
    .zen-controls {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: center !important;
        padding: 0 1rem !important;
    }
    
    .zen-search-container {
        width: 100% !important;
        max-width: 280px !important;
    }
    
    .zen-filter-grid {
        justify-content: center !important;
        gap: 0.5rem !important;
    }
    
    .zen-filter-tag {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.75rem !important;
    }
    
    /* All sections and containers */
    section, .container, .content {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Zen-specific elements */
    .zen-container,
    .zen-content,
    .zen-section,
    .zen-services-section,
    .zen-about-section {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        padding: 0 1rem !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Service cards and content blocks */
    .zen-service-card,
    .zen-service-title,
    .zen-service-description,
    .contact-item {
        width: 100% !important;
        max-width: calc(100vw - 4rem) !important;
        padding: 0 1rem !important;
        margin: 0 auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Mobile about section - DEBUG NARROW WIDTH */
    .about-content {
        min-width: 100px !important;
        max-width: 350px !important;
        margin: 0 auto !important;
        padding: 0 1rem;
        background: transparent;
        border: none;
    }
}

/* NEW ABOUT SECTION - CLEAN CENTERED STRUCTURE */

/* Desktop styles (inherit existing about section design) */
.new-about-section {
    padding: 8rem 2rem;
    background: rgba(5, 5, 15, 0.3);
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 60vh;
    text-align: center;
}

/* Desktop background animations (preserve existing) */
.new-about-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    background: 
        radial-gradient(circle at 20% 80%, rgba(147, 51, 234, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(79, 70, 229, 0.06) 0%, transparent 45%);
    animation: float 20s ease-in-out infinite;
}

.new-about-header {
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.new-about-title {
    font-size: 2rem;
    color: #ffffff;
    margin: 0;
    font-weight: 300;
    letter-spacing: 0.2em;
}

.new-about-content {
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.new-about-content p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.6rem;
    color: var(--color-secondary);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: center;
}

.new-about-credentials {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* NEW FEATURED SECTION - CLEAN CENTERED STRUCTURE */

/* Desktop styles - preserve existing grid layout */
.new-featured-section {
    padding: 8rem 2rem;
    background: #000000;
    position: relative;
    z-index: 1;
}

.new-featured-header {
    margin-bottom: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.new-featured-title {
    font-size: 2rem;
    color: #ffffff;
    margin: 0;
    font-weight: 300;
    letter-spacing: 0.2em;
}

.new-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.new-featured-content {
    padding: 2rem;
}

.new-featured-subtitle {
    font-size: 2.5rem;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.new-featured-description {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.new-featured-video {
    width: 100%;
}

.new-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 8px;
}

/* NEW CTA SECTION - CLEAN CENTERED STRUCTURE */

/* Desktop styles - preserve existing design */
.new-cta-section {
    padding: 8rem 2rem;
    background: #000000;
    position: relative;
    text-align: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.cta-gradient-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(79, 70, 229, 0.1) 100%);
}

.new-cta-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.new-cta-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.new-cta-title {
    font-size: 3rem;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.new-cta-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-cta-button {
    display: inline-block;
    padding: 1.5rem 3rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.new-cta-subtitle {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    margin-top: 0.5rem;
    opacity: 0.9;
}

/* SIMPLE FOOTER - GROUND UP RECODE */

/* Desktop styles - Match consulting page layout */
.simple-footer {
    padding: 3rem 2rem;
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Desktop layout - social left, copyright right */
@media (min-width: 769px) {
    .simple-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        max-width: 1400px;
        margin: 0 auto;
        padding: 3rem 2rem;
    }
    
    .footer-social-group {
        display: flex;
        gap: 3rem;
    }
    
    .footer-copy-group {
        text-align: right;
    }
}

.footer-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 400;
    transition: opacity 0.3s ease;
    position: relative;
}

/* Hover effect with underline animation */
.footer-link::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.footer-link:hover::after {
    transform: scaleX(1);
}

.footer-copy {
    color: #888888;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 300;
    margin: 0;
}

/* HERO VIDEO BACKGROUND - FULL HEIGHT */
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: #000;
}

/* Ensure video fills viewport on mobile */
@media screen and (max-width: 768px) {
    .video-hero-container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .hero-video-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }
}

/* FRESH HEADER - GROUND UP MOBILE MENU */

/* Base header styles */
.fresh-header {
    background: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 9999;
}

.fresh-header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fresh-logo-link {
    text-decoration: none;
    display: block;
}

.fresh-logo-image {
    height: 32px;
    width: auto;
    object-fit: contain;
}

/* Desktop Navigation */
.fresh-desktop-nav {
    display: flex;
    gap: 3rem;
}

.fresh-nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.fresh-nav-link:hover {
    opacity: 0.7;
}

/* Mobile Menu Button - Show on all screens for debugging */
.fresh-mobile-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 9999;
    -webkit-tap-highlight-color: transparent;
    touch-action: auto;
}

.fresh-mobile-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.fresh-mobile-btn:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.98);
}

/* Hamburger icon */
.fresh-hamburger {
    width: 24px;
    height: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fresh-hamburger span {
    width: 100%;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
    transition: all 0.3s ease;
}

/* Mobile Menu Overlay - Hidden on desktop */
.fresh-mobile-menu {
    display: none;
}

/* DESKTOP RESPONSIVE STYLES */
@media (min-width: 769px) {
    /* Hide mobile button on desktop */
    .fresh-mobile-btn {
        display: none !important;
    }
}

/* MOBILE RESPONSIVE STYLES - AGGRESSIVE OVERRIDE */  
@media screen and (max-width: 768px) {
    /* Mobile header layout - constrained width */
    .fresh-header {
        background: #000000 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    .fresh-header-content {
        padding: 1rem !important;
        max-width: 100vw !important;
        width: 100vw !important;
        justify-content: space-between !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Force logo to left with debug */
    .fresh-logo {
        order: 1 !important;
        flex-shrink: 0 !important;
        background: rgba(0, 255, 0, 0.3) !important; /* GREEN DEBUG */
        padding: 5px !important;
        border: 2px solid lime !important;
    }
    
    /* Debug logo image */
    .fresh-logo-image {
        background: yellow !important;
        border: 2px solid orange !important;
    }
    
    /* Force hamburger to right with debug */
    .fresh-mobile-btn {
        order: 3 !important;
        margin-left: auto !important;
        background: transparent;
        border: none;
    }
    
    /* Completely hide desktop nav on mobile */
    .fresh-desktop-nav {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Force show hamburger menu on mobile only */
    .fresh-mobile-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Ensure hamburger shows on mobile with enhanced visibility */
    .fresh-mobile-btn {
        display: flex !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 8px !important;
    }
    
    /* Mobile logo sizing */
    .fresh-logo-image {
        height: 28px;
    }
    
    /* Mobile Menu Overlay */
    .fresh-mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        display: block;
    }
    
    .fresh-mobile-menu.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Animate to X when active */
    .fresh-mobile-btn.active .fresh-hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .fresh-mobile-btn.active .fresh-hamburger span:nth-child(2) {
        opacity: 0;
    }
    
    .fresh-mobile-btn.active .fresh-hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Mobile Menu Overlay */
    .fresh-mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .fresh-mobile-menu.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Mobile Navigation */
    .fresh-mobile-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        gap: 2rem;
        padding: 2rem;
    }
    
    .fresh-mobile-link {
        color: #ffffff;
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: 300;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        transition: all 0.3s ease;
        padding: 1rem 2rem;
        border-radius: 4px;
    }
    
    .fresh-mobile-link:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(1.05);
    }
}

/* ============================================================================ */
/* MOBILE HEADER V2 - COMPLETELY NEW SYSTEM - NO CONFLICTS */
/* ============================================================================ */

/* Base Header V2 */
.mobile-header-v2 {
    background: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 10;
    width: 100%;
}

/* DEBUG BORDERS REMOVED */
body {
    border: none;
    box-sizing: border-box;
}

.mobile-container-v2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo V2 */
.mobile-logo-v2 {
    flex-shrink: 0;
}

.mobile-logo-link-v2 {
    text-decoration: none;
    display: block;
}

.mobile-logo-img-v2 {
    height: 32px;
    width: auto;
}

/* Desktop Nav V2 */
.desktop-nav-v2 {
    display: flex;
    gap: 3rem;
}

.desktop-link-v2 {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.desktop-link-v2:hover {
    opacity: 0.7;
}

/* Hamburger Button V2 - Hidden on Desktop */
.hamburger-btn-v2 {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    z-index: 10001;
}

.hamburger-line-v2 {
    width: 24px;
    height: 2px;
    background: #ffffff;
    margin: 2px 0;
    transition: all 0.3s ease;
    border-radius: 1px;
}

/* Mobile Overlay V2 */
.mobile-overlay-v2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: none;
}

.mobile-overlay-v2.active {
    opacity: 1;
    visibility: visible;
    display: block;
}

.mobile-nav-v2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 2rem;
}

.mobile-nav-link-v2 {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1rem 2rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.mobile-nav-link-v2:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* MOBILE BREAKPOINT V2 */
@media screen and (max-width: 768px) {
    .mobile-container-v2 {
        padding: 1rem;
    }
    
    .mobile-logo-img-v2 {
        height: 28px;
    }
    
    /* Hide desktop nav completely on mobile */
    .desktop-nav-v2 {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Show hamburger on mobile */
    .hamburger-btn-v2 {
        display: flex !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
}

/* MOBILE RESPONSIVE - PERFECT CENTERING */
@media screen and (max-width: 768px) {
    
    /* New About Section - Mobile Perfect Centering */
    .new-about-section {
        padding: 4rem 1rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }
    
    .new-about-header {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
        text-align: center !important;
    }
    
    .new-about-title {
        font-size: 1.5rem !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    .new-about-content {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        margin: 0 auto 2rem auto !important;
        padding: 0 1rem !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    
    .new-about-content p {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        margin: 0 auto 1.5rem auto !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
    }
    
    .new-about-credentials {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    /* Fix all h3 elements to center properly on mobile */
    h3, .new-featured-subtitle {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* New Featured Section - Mobile Perfect Centering */
    .new-featured-section {
        padding: 4rem 1rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }
    
    .new-featured-header {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    
    .new-featured-title {
        font-size: 1.5rem !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    .new-featured-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        margin: 0 auto !important;
        align-items: center !important;
    }
    
    .new-featured-content {
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .new-featured-subtitle {
        font-size: 1.5rem !important;
        text-align: center !important;
        margin: 0 auto 1.5rem auto !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        display: block !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        padding: 0 1rem !important;
        box-sizing: border-box !important;
    }
    
    .new-featured-description {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin: 0 auto 1rem auto !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        display: block !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        padding: 0 1rem !important;
        box-sizing: border-box !important;
    }
    
    .new-featured-video {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    .new-video-wrapper {
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* New CTA Section - Mobile Perfect Centering */
    .new-cta-section {
        padding: 4rem 1rem !important;
        text-align: center !important;
        min-height: auto !important;
    }
    
    .new-cta-content {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        padding: 0 !important;
    }
    
    .new-cta-label {
        font-size: 0.75rem !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    .new-cta-title {
        font-size: 1.75rem !important;
        text-align: center !important;
        margin: 0 auto 2rem auto !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 0 1rem !important;
    }
    
    .new-cta-button-wrapper {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 1rem !important;
    }
    
    .new-cta-button {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        max-width: 350px !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    .new-cta-subtitle {
        font-size: 0.75rem !important;
        margin-top: 0.5rem !important;
    }
    
    /* Simple Footer - Mobile Perfect Centering */
    .simple-footer {
        padding: 2rem 1rem !important;
        background: #000000 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    .footer-social-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    .footer-link {
        display: block !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-decoration: none !important;
        font-size: 1rem !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
        text-align: center !important;
        width: auto !important;
    }
    
    .footer-copy-group {
        width: 100% !important;
        text-align: center !important;
    }
    
    .footer-copy {
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 0.75rem !important;
        margin: 0 !important;
        padding: 0 1rem !important;
        text-align: center !important;
        word-wrap: break-word !important;
    }
    
    /* Target other problematic elements that were offset */
    .zen-hero-content,
    .zen-hero-overlay,
    .zen-title-block,
    .zen-main-title,
    .zen-role-subtitle p,
    .zen-description p {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Hide header title to prevent duplication */
    .header .logo-text,
    .header-content .logo-text {
        display: none !important;
    }
    
    /* Center the header layout - but allow mobile menu to function */
    .header {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 1rem !important;
        z-index: 100 !important;
    }
    
    .header-content {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    /* Clean mobile menu positioning */
    .clean-mobile-toggle {
        position: absolute !important;
        right: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 1002 !important;
    }
    
    /* Center all hero elements properly */
    .zen-hero-content,
    .zen-hero-overlay,
    .zen-title-block,
    .zen-main-title,
    .zen-role-subtitle,
    .zen-description,
    .zen-hero-logo {
        text-align: center !important;
        margin: 0 auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure text wraps properly */
    .zen-main-title,
    .zen-role-subtitle p,
    .zen-description p {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
    
    /* Apply perfect centering to the artist/director line - same as logo */
    .zen-role-subtitle,
    .zen-role-subtitle p {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Apply same perfect centering to about section - same as logo */
    .about-section,
    .zen-about-section,
    .zen-container,
    .about-container,
    .about-intro,
    .zen-about-content,
    .about-text,
    .about-text p,
    .credentials-inline,
    .credential-badge {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
    /* Fix minimum width constraints */
    #modalVideo {
        min-width: 100px !important;
    }
    
    /* Override buttons with large min-widths */
    .book-call-button,
    .zen-primary-cta-button,
    .zen-cta-button {
        min-width: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
    }
    
    /* About content responsive */
    .about-content {
        max-width: none !important;
        padding: 0 1rem;
    }
    
    /* Universal text wrapping fix */
    * {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
        white-space: normal !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Override specific nowrap rules on zen elements */
    .zen-main-title,
    .zen-role-subtitle,
    .zen-role-subtitle p,
    .zen-description,
    .zen-description p,
    .book-call-button,
    .book-call-button .main-text {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Clean mobile container styles - centered alignment */
    .zen-hero-content,
    .zen-hero-overlay,
    .about-section,
    .zen-about-section,
    .zen-container,
    .about-container,
    .final-cta-section,
    .zen-cta-section {
        margin: 0 auto !important;
        padding: 0 1rem !important;
        max-width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Force center alignment */
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Reset all positioning issues */
    .video-hero,
    .zen-hero-video,
    .video-hero-container,
    .zen-hero-content,
    .zen-hero-overlay {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    .about-stats {
        width: 100% !important;
        display: flex !important;
        justify-content: space-around !important;
        margin: 2rem 0 !important;
        padding: 0 1rem !important;
    }
    
    .stat-item {
        text-align: center !important;
        flex: 1 !important;
        max-width: 100px !important;
    }
    
    /* CTA section mobile fixes */
    .cta-section {
        padding: 1rem 0.5rem !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    .cta-content {
        width: 100% !important;
        max-width: calc(100vw - 1rem) !important;
        margin: 0 auto !important;
        padding: 0 0.5rem !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    
    .cta-subtitle {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    .subtitle-label {
        display: block !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .subtitle-text {
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
        margin: 0 auto 1rem auto !important;
        padding: 0 !important;
        text-align: center !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        line-height: 1.3 !important;
    }
    
    .cta-description {
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
        margin: 0 auto 2rem auto !important;
        padding: 0 !important;
        text-align: center !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .cta-button {
        display: inline-block !important;
        max-width: calc(100vw - 4rem) !important;
        margin: 0 auto !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ===============================================
   MINIMAL DESKTOP BREAKPOINT PROTECTION
   Only hides mobile elements - preserves all existing desktop design
   =============================================== */
@media (min-width: 769px) {
    /* Hide mobile-only navigation elements */
    .mobile-menu-toggle,
    .mobile-menu-close,
    .mobile-nav,
    .mobile-nav-content,
    .mobile-nav-links,
    .mobile-nav-link {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Ensure desktop navigation remains visible and functional */
    .desktop-nav,
    .nav, 
    .navigation, 
    .header-nav {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Desktop nav link styles */
    .nav-link {
        color: #ffffff !important;
        font-size: 0.75rem !important;
        font-weight: 400 !important;
        letter-spacing: 0.2em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        padding: 0.5rem 0 !important;
        position: relative !important;
    }
    
    .nav-link:hover {
        color: #cccccc !important;
    }
    
    .nav-link.active {
        color: #ffffff !important;
    }
}



/* ============================================================================ */
/* CLEAN HEADER - DESKTOP NAV, MOBILE DROPDOWN */
/* ============================================================================ */

.clean-header {
    background: transparent;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 99999;
    position: relative;
}

.clean-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Mobile container - position menu button in upper right */
@media (max-width: 768px) {
    .clean-container {
        justify-content: flex-end;
        position: relative;
    }
}

.clean-nav {
    position: relative;
    text-align: center;
}

.nav-toggle {
    display: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 20px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 0 auto;
    font-weight: 300;
}

.nav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-links {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.clean-link {
    color: #ffffff;
    font-size: 0.9rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px;
    border-radius: 3px;
    transition: background 0.2s ease;
    font-weight: 300;
}

.clean-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile - Show dropdown */
@media (max-width: 768px) {
    .nav-toggle {
        display: block;
    }
    
    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 100px;
        gap: 0;
        z-index: 9999999;
    }
    
    .nav-links::before {
        content: '';
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: auto;
        background: rgba(0, 0, 0, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        z-index: -1;
    }
    
    .clean-nav.active .nav-links {
        display: flex;
    }
    
    .clean-link {
        padding: 16px 32px;
        border-radius: 8px;
        border-bottom: none;
        font-size: 1.2rem;
        font-weight: 300;
        transition: all 0.2s ease;
        margin: 4px 0;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        min-width: 180px;
        text-align: center;
    }
    
    .clean-link:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
    }
}

/* SLIDE-OUT MENU STYLES */
/* Desktop Navigation */
.desktop-nav .nav-links {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 300;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 1);
}

/* Backdrop Overlay */
.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Slide-out Menu */
.slide-out-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1001;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 60px 0 40px 0;
    display: flex;
    flex-direction: column;
}

.menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.menu-close button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    cursor: pointer;
    padding: 12px;
    transition: color 0.3s ease;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.menu-close button:hover {
    color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.menu-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 40px;
}

.menu-items a {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    text-decoration: none;
    text-transform: uppercase;
    padding: 20px 40px;
    display: block;
    background: transparent;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    font-weight: 300;
    letter-spacing: 0.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.menu-items a:hover {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 1);
}

.menu-items a:last-child {
    border-bottom: none;
}

/* Show menu when active */
.slide-menu-open .slide-out-menu {
    right: 0;
}

.slide-menu-open .menu-backdrop {
    opacity: 1;
    visibility: visible;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
}

/* =============================================================================
   CONSULTING PAGE MOBILE OPTIMIZATIONS - CLEAN & CENTERED
   ============================================================================= */
@media (max-width: 768px) {
    /* Mobile consulting page base */
    body.consulting-page {
        overflow-x: hidden !important;
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hero section - full width, simple */
    .consulting-page .zen-hero-video {
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Hero video background - properly centered */
    .consulting-page .hero-video-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important;
    }
    
    .consulting-page .hero-video-background video {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        width: auto !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
        object-fit: cover !important;
    }
    
    /* Hero overlay - centered content */
    .consulting-page .zen-hero-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2rem 1rem !important;
        z-index: 2 !important;
    }
    
    /* Hero content - clean centering */
    .consulting-page .zen-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Hero title - responsive sizing */
    .consulting-page .zen-main-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin: 1rem 0 !important;
        padding: 0 1rem !important;
        text-align: center !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Hero description - readable */
    .consulting-page .zen-description {
        margin: 1rem 0 !important;
        padding: 0 1rem !important;
        text-align: center !important;
    }
    
    .consulting-page .zen-description p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        word-wrap: break-word !important;
    }
    
    /* All containers - centered and full width */
    .consulting-page .zen-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
        text-align: center !important;
    }
    
    /* Section titles - responsive */
    .consulting-page .zen-section-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin: 1rem 0 !important;
        padding: 0 1rem !important;
    }
    
    /* Service cards - stacked and centered */
    .consulting-page .zen-services-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        margin: 2rem 0 !important;
        padding: 0 !important;
    }
    
    .consulting-page .zen-service-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem 1rem !important;
        text-align: center !important;
    }
    
    .consulting-page .zen-service-title {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    .consulting-page .zen-service-description {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    /* Process steps - simple stack */
    .consulting-page .zen-process-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        margin: 2rem 0 !important;
        padding: 0 !important;
    }
    
    .consulting-page .zen-process-step {
        width: 100% !important;
        text-align: center !important;
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
    }
    
    /* Featured content - stacked */
    .consulting-page .zen-featured-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        margin: 2rem 0 !important;
    }
    
    .consulting-page .zen-featured-content,
    .consulting-page .zen-featured-video {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Video containers - responsive */
    .consulting-page .zen-video-container {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16/9 !important;
        margin: 0 !important;
    }
    
    .consulting-page .zen-video-container iframe {
        width: 100% !important;
        height: 100% !important;
    }
}

/* ================================================================
   CONSULTING PAGE - PERFECTLY CENTERED ZEN DESIGN REPLICA  
   (EXACT COPY OF ORIGINAL ZEN STYLES WITH PERFECT CENTERING)
   ================================================================ */

/* Zen Hero Video Section - EXACT COPY */
.zen-hero-video-perfect {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    width: 100%;
}

/* Hero Video Background - EXACT COPY + Perfect Centering */
.hero-video-background-perfect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.5;
    transition: opacity 1s ease-in-out;
    overflow: hidden;
}

.hero-video-background-perfect video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: brightness(0.64) contrast(1.1) saturate(0.8);
}

.zen-hero-overlay-perfect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 2;
}

.zen-hero-content-perfect {
    text-align: center;
    max-width: 800px;
    padding: 34px; /* Fibonacci number */
}

/* Zen Title System - Golden Ratio Spacing - EXACT COPY */
.zen-title-block-perfect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.zen-title-line-perfect {
    width: 60px;
    height: 2px;
    background: var(--color-primary);
    opacity: 0.8;
}

.zen-main-title-perfect {
    font-family: "Inter", sans-serif;
    font-size: var(--type-scale-display);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}

.zen-description-perfect {
    margin-top: var(--space-lg);
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.zen-description-perfect p {
    font-size: var(--type-scale-body);
    font-weight: 300;
    color: var(--color-secondary);
    line-height: 1.7;
    margin: 0;
    text-align: center;
    max-width: 700px;
    padding: 0 var(--space-md);
    line-height: 1.4;
}

/* Zen Container - EXACT COPY */
.zen-container-perfect {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    text-align: center;
}

.zen-breathe-space-perfect {
    height: var(--space-xl);
}

/* Zen Section Headers - EXACT COPY */
.zen-section-header-perfect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.zen-section-title-perfect {
    font-size: var(--type-scale-h2);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}

/* Zen Services Section - EXACT COPY */
.zen-services-section-perfect {
    padding: var(--space-xxl) 0;
    background: var(--color-background);
}

.zen-services-grid-perfect {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin: 0 auto;
    align-items: start;
}

.zen-service-card-perfect {
    background: transparent;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    transition: transform 0.3s ease;
}

.zen-service-card-perfect:hover {
    transform: translateY(-5px);
}

.zen-service-title-perfect {
    font-size: var(--type-scale-h3);
    font-weight: 500;
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.zen-service-description-perfect {
    font-size: var(--type-scale-body);
    font-weight: 300;
    color: var(--color-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Zen Process Section - EXACT COPY (keeping boxes for mobile) */
.zen-process-section-perfect {
    position: relative;
    background: #1a1a2e;
    padding: var(--space-xxl) 0;
    overflow: hidden;
}

.zen-process-background-perfect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.amorphous-blob-perfect {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

.amorphous-blob-perfect.blob-1 {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #6b73ff, #9999ff);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.amorphous-blob-perfect.blob-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, #f093fb, #f5576c);
    top: 20%;
    right: 10%;
    animation-delay: 5s;
}

.amorphous-blob-perfect.blob-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(45deg, #4facfe, #00f2fe);
    bottom: 20%;
    left: 20%;
    animation-delay: 10s;
}

.amorphous-blob-perfect.blob-4 {
    width: 180px;
    height: 180px;
    background: linear-gradient(45deg, #43e97b, #38f9d7);
    bottom: 10%;
    right: 20%;
    animation-delay: 15s;
}

.zen-process-section-perfect .zen-container-perfect {
    position: relative;
    z-index: 2;
}

.zen-process-section-perfect .zen-section-title-perfect {
    color: white;
}

.zen-process-grid-perfect {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xl);
    margin: 0 auto;
    align-items: start;
}

.zen-process-step-perfect {
    background: rgba(255, 255, 255, 0.05);
    padding: var(--space-lg);
    border-radius: 8px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.zen-process-step-perfect:hover {
    transform: translateY(-5px);
}

.zen-step-number-perfect {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-accent), #764ba2);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--type-scale-h2);
    font-weight: 600;
    margin: 0 auto var(--space-md) auto;
}

.zen-step-title-perfect {
    font-size: var(--type-scale-h3);
    font-weight: 600;
    color: white;
    margin: 0 0 var(--space-sm) 0;
}

.zen-step-description-perfect {
    font-size: var(--type-scale-body);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
}

/* Zen Featured Work Section - EXACT COPY */
.zen-featured-section-perfect {
    background: var(--color-background);
    padding: var(--space-xxl) 0;
}

.zen-experiential-section-perfect {
    background: var(--color-background);
    padding: var(--space-xxl) 0;
}

.zen-featured-grid-perfect {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxl);
    align-items: center;
    margin: 0 auto;
}

.zen-featured-content-perfect {
    text-align: left;
}

.zen-featured-title-perfect {
    font-size: var(--type-scale-h2);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 auto var(--space-sm) auto;
    transition: all 0.3s ease;
}

.zen-featured-description-perfect {
    font-size: var(--type-scale-body);
    color: var(--color-secondary);
    line-height: 1.7;
    margin: 0 0 var(--space-md) 0;
    font-weight: 300;
}

.zen-featured-video-perfect {
    text-align: center;
}

.zen-video-container-perfect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.zen-video-container-perfect iframe,
.zen-video-container-perfect video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Zen CTA Section - ORIGINAL BACKGROUND FROM BACKUP */
.zen-cta-section-perfect {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: var(--space-xxl) 0;
    overflow: hidden;
}

.zen-cta-dynamic-background-perfect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.cta-gradient-layer-perfect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
}

.zen-cta-section-perfect .zen-container-perfect {
    position: relative;
    z-index: 2;
}

.zen-cta-content-perfect {
    text-align: center;
    color: white;
}

.zen-subtitle-label-perfect {
    font-size: var(--type-scale-small);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-sm);
    opacity: 0.8;
}

.zen-cta-title-perfect {
    font-size: var(--type-scale-display);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: white;
    margin-bottom: var(--space-lg);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.25;
}

.zen-cta-button-container-perfect {
    position: relative;
    display: inline-block;
}

.zen-cta-button-perfect {
    display: inline-block;
    background: #1a0b2e;
    color: white;
    padding: var(--space-md) var(--space-xl);
    border-radius: 8px;
    text-decoration: none;
    font-size: var(--type-scale-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.4;
    border: 2px solid #1a0b2e;
    box-shadow: 0 4px 12px rgba(26, 11, 46, 0.5);
}

.zen-cta-button-perfect:hover {
    background: #2d1b69;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26, 11, 46, 0.7);
}

.zen-cta-subtitle-perfect {
    display: block;
    font-size: var(--type-scale-small);
    opacity: 0.9;
    font-weight: 300;
    margin-top: var(--space-xs);
}

.zen-particle-system-perfect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.zen-particle-perfect {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: sparkle 2s ease-in-out infinite;
}

.zen-particle-perfect:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.zen-particle-perfect:nth-child(2) { top: 30%; right: 15%; animation-delay: 0.4s; }
.zen-particle-perfect:nth-child(3) { bottom: 25%; left: 20%; animation-delay: 0.8s; }
.zen-particle-perfect:nth-child(4) { bottom: 35%; right: 10%; animation-delay: 1.2s; }
.zen-particle-perfect:nth-child(5) { top: 50%; left: 50%; animation-delay: 1.6s; }

/* Mobile Responsive - PERFECTLY CENTERED LIKE INDEX PAGE */
@media (max-width: 768px) {
    /* Global mobile fixes - matching index page */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    * {
        box-sizing: border-box;
    }
    
    /* Perfect centering for all sections - copying index page technique */
    .zen-services-section-perfect,
    .zen-process-section-perfect,
    .zen-featured-section-perfect,
    .zen-experiential-section-perfect,
    .zen-cta-section-perfect {
        padding: 4rem 1rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }
    
    .zen-hero-video-perfect {
        height: 50vh;
        min-height: 400px;
    }
    
    .zen-hero-content-perfect {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        text-align: center !important;
        padding: 0 1rem !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .zen-container-perfect {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        margin: 0 auto 2rem auto !important;
        padding: 0 1rem !important;
        box-sizing: border-box !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .zen-breathe-space-perfect {
        height: var(--space-lg);
    }
    
    .zen-main-title-perfect {
        font-size: var(--type-scale-h1);
        letter-spacing: 0.1em;
    }
    
    .zen-title-line-perfect {
        width: 40px;
    }
    
    .zen-description-perfect p {
        font-size: var(--type-scale-body);
    }
    
    /* Content grids - perfect centering like index page */
    .zen-featured-grid-perfect,
    .zen-services-grid-perfect,
    .zen-process-grid-perfect {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
        box-sizing: border-box !important;
        text-align: center !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
        display: grid !important;
    }
    
    .zen-featured-content-perfect {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    .zen-featured-title-perfect {
        font-size: var(--type-scale-h1) !important;
        text-align: center !important;
        margin: 0 auto 1rem auto !important;
    }
    
    .zen-cta-title-perfect {
        font-size: var(--type-scale-h1) !important;
        text-align: center !important;
        margin: 0 auto 1rem auto !important;
    }
    
    /* Section headers - perfect centering with horizontal layout */
    .zen-section-header-perfect {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    
    .zen-section-title-perfect {
        text-align: center !important;
        margin: 0 !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }
    
    .zen-cta-button-perfect {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--type-scale-small);
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    /* Ensure all perfect sections don't overflow on mobile */
    .zen-services-section-perfect,
    .zen-process-section-perfect,
    .zen-featured-section-perfect,
    .zen-experiential-section-perfect,
    .zen-cta-section-perfect {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .zen-hero-content-perfect {
        padding: var(--space-sm);
    }
    
    .zen-service-card-perfect,
    .zen-process-step-perfect {
        padding: var(--space-sm);
    }
    
    .zen-services-section-perfect,
    .zen-process-section-perfect,
    .zen-featured-section-perfect,
    .zen-experiential-section-perfect,
    .zen-cta-section-perfect {
        padding: var(--space-xl) 0;
    }
    
    /* Prevent process step stretching on mobile */
    .zen-process-grid-perfect {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        max-width: 320px;
        margin: 0 auto;
    }
    
    .zen-process-step-perfect {
        max-width: 280px;
        width: 100%;
        margin: 0 auto;
        padding: var(--space-md);
    }
    
    .zen-step-number-perfect {
        width: 50px;
        height: 50px;
        font-size: var(--type-scale-h3);
        flex-shrink: 0;
    }
}

/* Process Number - Simple text above titles */
.zen-process-badge {
    display: block;
    font-size: var(--type-scale-h1);
    font-weight: 300;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
    text-align: left;
    line-height: 1;
}