/*
  =====================================================
  CSS CUSTOM PROPERTIES (VARIABLES)
  =====================================================
*/
/* Safari/iOS Viewport Fix */
@supports (-webkit-touch-callout: none) {
    :root {
        --vh: 1vh;
    }
}

:root {
    /* Colors - Light Mode */
    --color-primary: #000000;
    --color-secondary: #374151;
    --color-text: #000000;
    --color-text-muted: #6B7280;
    --color-text-light: #9CA3AF;
    --color-background: #ffffff;
    --color-background-alt: #F1F1F1;
    --color-border: #CDCDCD;
    --color-border-light: #E5E7EB;
    
    /* Accent Colors */
    --color-accent-orange: #f97316;
    --color-accent-pink: #ec4899;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Layout */
    --container-padding-mobile: 1.5rem;
    --container-padding-tablet: 4rem;
    --container-padding-desktop: 8rem;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-menu: 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    
    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 1000;
    --z-modal: 10000;
    --z-tooltip: 10005;
}

/* Dark Mode Variables */
html.dark {
    --color-primary: #ffffff;
    --color-secondary: #d4d4d4;
    --color-text: #ffffff;
    --color-text-muted: #a3a3a3;
    --color-text-light: #737373;
    --color-background: #000000;
    --color-background-alt: #222222;
    --color-border: #444444;
    --color-border-light: #333333;
}

/*
  =====================================================
  Responsive Breakpoints (Tailwind CSS - Mobile First):
  - Default: <640px (Mobile)
  - sm: >=640px (Tablets)
  - md: >=768px (Laptops)
  - lg: >=1024px (Large Laptops/Desktops)
  - xl: >=1280px (Desktops)
  - 2xl: >=1536px (Large Desktops)
  =====================================================
*/

body {
            font-family: var(--font-family);
            background-color: var(--color-background);
            position: relative;
            padding-top: 0;
            overflow-x: hidden;
            -webkit-text-size-adjust: 100%; /* Prevent font size adjustment on iOS */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Prevent horizontal scrolling on mobile and tablet */
        @media (max-width: 1023px) {
            html {
                overflow-x: hidden !important;
            }
            
            body {
                overflow-x: hidden !important;
            }
            
            #page-wrapper {
                overflow-x: hidden !important;
            }
            
            #page-content {
                overflow-x: hidden !important;
                max-width: 100vw !important;
            }
            
            /* Clip horizontal overflow without creating a nested vertical scroll trap */
            #page-content > section {
                overflow-x: clip !important;
                overflow-y: visible !important;
                max-width: 100% !important;
            }
        }

       
        /* Fix for iOS momentum scrolling */
        .scroll-container {
            -webkit-overflow-scrolling: touch;
        }

        /* Body is the only vertical scroll container (html must not also scroll) */
        html {
            height: 100%;
            overflow: hidden !important;
            overscroll-behavior: none;
        }

        body {
            height: 100%;
            height: 100dvh;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            overscroll-behavior: none;
            -webkit-overflow-scrolling: touch;
        }

        /* Hero Section - Home Page */
        .hero-section {
            padding-top: 50px;
            padding-bottom: 6rem;
        }

        /* Sticky Navigation - Test Transactions Page */
        body.project-page #page-wrapper {
            overflow: visible !important;
            padding-bottom: 3rem;
        }
        
        body.project-page #page-content {
            overflow: visible !important;
        }
        
        body.project-page section:has(#sticky-nav) {
            overflow: visible !important;
        }
        
        body.project-page section:has(#sticky-nav) > div {
            overflow: visible !important;
        }
        
        #sticky-nav {
            position: -webkit-sticky !important;
            position: sticky !important;
            top: 2.5rem !important;
            align-self: flex-start !important;
            height: fit-content !important;
            z-index: 10 !important;
            will-change: position;
        }
        
        @media (min-width: 1024px) {
            #sticky-nav {
                position: -webkit-sticky !important;
                position: sticky !important;
            }

            body.project-page #sticky-nav {
                display: block !important;
                position: -webkit-sticky !important;
                position: sticky !important;
                top: 2.5rem !important;
                align-self: flex-start !important;
                z-index: 10 !important;
            }

            body.project-page section:has(#sticky-nav),
            body.project-page section:has(#sticky-nav) > div {
                overflow: visible !important;
            }
        }

        /* Navigation Link Active State */
        .nav-link.active .nav-text {
            background-image: linear-gradient(to right, var(--color-accent-orange), var(--color-accent-pink));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .nav-link.active .nav-number {
            color: var(--color-accent-orange);
        }

        html {
            overflow: hidden;
        }
        
        body {
            overflow-x: hidden;
            overflow-y: auto;
        }
        
        .video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -3;
            pointer-events: none;
        }

        .gradient-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: radial-gradient(ellipse at center top, 
                #FFF8E7 0%, 
                #FFE5B4 25%, 
                #FFB366 50%, 
                #FF8C42 75%, 
                #FF6B35 100%);
            z-index: -1000;
            pointer-events: none;
        }

        .top-gradient-overlay {
            position: fixed;
            top: 12%;
            right: 200px;
            transform: translateY(-50%);
            width: 65vw;
            height: 35vh;
            max-width: 800px;
            max-height: 500px;
            background: radial-gradient(ellipse at 40% 50%, 
                #FF00FF 0%, 
                #FF1493 15%, 
                #FF1744 30%, 
                #FF4500 50%, 
                #FF6B35 70%, 
                transparent 100%);
            border-radius: 50% 40% 60% 45% / 60% 50% 40% 55%;
            filter: blur(80px);
            z-index: -1000;
            pointer-events: none;
            opacity: 0.6;
        }

        #page-wrapper {
            background-color: #fff;
            position: relative;
            z-index: 100;
            transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
            border-bottom-left-radius: 3rem; /* More rounded */
            border-bottom-right-radius: 3rem; /* More rounded */
            overflow: hidden;
            pointer-events: auto;
        }
        
        /* Allow sticky positioning on project pages - CRITICAL */
        body.project-page #page-wrapper {
            overflow: visible !important;
        }
        
        body.project-page #page-content {
            overflow: visible !important;
        }
        
        body.project-page .content-body {
            overflow: visible !important;
        }
        
        
        /* Ensure sticky nav container allows sticky positioning - only this section */
        body.project-page section:has(#sticky-nav) {
            position: relative !important;
            overflow: visible !important;
            transform: none !important;
            height: auto !important;
            min-height: auto !important;
        }
        
        body.project-page section:has(#sticky-nav) > div {
            overflow: visible !important;
            transform: none !important;
        }
        
        body.project-page section:has(#sticky-nav) > div.flex {
            position: relative !important;
            overflow: visible !important;
            align-items: flex-start !important;
        }

        #page-content {
            position: relative;
            z-index: 1;
            overflow: visible;
        }
        
        /* Global max-width for home page */
        body.home-page #page-content {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Global max-width for header */
        #main-header > div {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }
        
        /* Global max-width for footer */
        footer.bg-black > div:not(.footer-dots-background) {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }
        
        /* Global max-width for projects page and article pages */
        body.project-page #page-content {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Global max-width for about page */
        body.about-page #page-content {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Allow Design Decisions section to break out of max-width on test-transactions page */
        body.test-transactions-page #page-content > section[style*="F5F5F7"] {
            max-width: none !important;
            width: 100vw !important;
            position: relative !important;
            left: 50% !important;
            margin-left: -50vw !important;
            margin-right: -50vw !important;
        }
        
        /* Constrain the content inside Design Decisions section to max-width */
        body.test-transactions-page #page-content > section[style*="F5F5F7"] > div:has(.grid) {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Also constrain the header content div */
        body.test-transactions-page #page-content > section[style*="F5F5F7"] > div:first-child {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Allow slider section to break out of max-width on test-transactions page */
        body.test-transactions-page #page-content > section:has(#image-carousel-track) {
            max-width: none !important;
            width: 100vw !important;
            position: relative !important;
            left: 50% !important;
            margin-left: -50vw !important;
            margin-right: -50vw !important;
        }
        
        /* On desktop (1024px+): align slider track left edge with max content width */
        @media (min-width: 1024px) and (max-width: 1663px) {
            body.test-transactions-page #image-carousel-track {
                padding-left: 8rem !important;
            }
            
            /* Gradually scale down images from 1664px to 1024px */
            /* Formula: Interpolate between 1162px (at 1664px) and smaller size (at 1024px) */
            /* At 1664px: 1162px, at 1024px: ~634px (proportional to content width) */
            body.test-transactions-page #image-carousel-track > div[class*="flex-shrink-0"] {
                width: calc(634px + (1162px - 634px) * (100vw - 1024px) / (1664px - 1024px)) !important;
                min-width: 634px;
                max-width: 1162px;
                border-radius: 0.5rem !important;
            }
        }
        
        /* Override Tailwind's lg:pr-48 to use 10rem instead of 12rem from 1024px */
        @media (min-width: 1024px) {
            body.test-transactions-page .lg\:pr-48,
            body.test-transactions-page div[class*="lg:pr-48"] {
                padding-right: 10rem !important;
            }
        }
        
        /* Show all four info boxes from 950px to 1023px with 70px height */
        @media (min-width: 950px) and (max-width: 1023px) {
            /* Ensure section is visible */
            body.test-transactions-page #page-content > section:has(.info-boxes),
            body.test-transactions-page #page-content > section[class*="hidden"][class*="md:block"]:has(.info-boxes) {
                display: block !important;
            }
            
            body.test-transactions-page .info-boxes {
                grid-template-columns: repeat(4, 1fr) !important;
                height: 70px !important;
            }
            
            /* Ensure all boxes are visible */
            body.test-transactions-page .info-box-role,
            body.test-transactions-page .info-box-tools {
                display: flex !important;
            }
        }
        
        /* Hide anchor links from 1024px to 1175px */
        @media (min-width: 1024px) and (max-width: 1175px) {
            /* Set min-height to 18vh instead of 25vh */
            body.test-transactions-page #page-content > section:first-child {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-height: 18vh !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                margin-top: 0 !important;
            }
            
            body.test-transactions-page #page-content > section:first-child > div {
                width: 100%;
            }
            
            /* Set h1 font size to 36px */
            body.test-transactions-page #page-content > section:first-child h1 {
                font-size: 36px !important;
            }
            
            /* Target the div with hidden lg:flex that contains the anchor links */
            body.test-transactions-page section:has(h1:contains("Test Transactions")) div[class*="hidden"][class*="lg:flex"][class*="space-x-10"],
            body.test-transactions-page section:first-child div[class*="hidden"][class*="lg:flex"][class*="space-x-10"],
            body.test-transactions-page div[class*="hidden"][class*="lg:flex"][class*="space-x-10"][class*="mt-0"] {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
            }
            
            /* Hide individual anchor links directly - most reliable */
            body.test-transactions-page a[href="#gallery-section"],
            body.test-transactions-page a[href="#prototype-section"],
            body.test-transactions-page a[href="#impact-section"] {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
            }
            
            /* Keep the same content width from 1175px - maintain width at 1175px level */
            body.test-transactions-page section:first-child p.text-lg.max-w-lg,
            body.test-transactions-page section:first-child p[class*="text-lg"][class*="max-w-lg"] {
                max-width: 512px !important;
                width: 512px !important;
                padding-left: 4rem !important;
                margin-bottom: 0 !important;
                box-sizing: border-box;
            }
            
            /* Vertically center the text in its container */
            body.test-transactions-page section:first-child div[class*="flex"][class*="flex-col"][class*="justify-start"][class*="items-start"] {
                justify-content: center !important;
                align-items: flex-end !important;
                height: 100% !important;
                display: flex !important;
            }
            
            /* Ensure the parent container has height for centering to work */
            body.test-transactions-page section:first-child > div > div:has(p.text-lg) {
                height: 100% !important;
            }
        }
        
        /* Hide Role info box from 1024px to 1220px and make remaining three fill width */
        @media (min-width: 1024px) and (max-width: 1220px) {
            body.test-transactions-page .info-box-role {
                display: none !important;
            }
            
            /* Change grid to 3 columns instead of 4 */
            body.test-transactions-page .info-boxes {
                grid-template-columns: repeat(3, 1fr) !important;
            }
            
            /* Update borders - Platform should have border-right, Tools should not */
            body.test-transactions-page .info-box-platform {
                border-right: 1px solid #CDCDCD !important;
            }
            
            html.dark body.test-transactions-page .info-box-platform {
                border-right-color: #444 !important;
            }
            
            body.test-transactions-page .info-box-tools {
                border-right: none !important;
            }
        }
        
        /* Ensure content section with flex-1 lg:pr-48 never gets smaller than 432px until tablet */
        /* At 1024px, use a higher min-width to prevent too much shrinking */
        @media (min-width: 1024px) and (max-width: 1200px) {
            body.test-transactions-page .flex-1.lg\:pr-48,
            body.test-transactions-page div[class*="flex-1"][class*="lg:pr-48"] {
                min-width: 500px !important;
            }
        }
        
        @media (min-width: 1201px) and (max-width: 1663px) {
            body.test-transactions-page .flex-1.lg\:pr-48,
            body.test-transactions-page div[class*="flex-1"][class*="lg:pr-48"] {
                min-width: 432px !important;
            }
        }
        
        @media (min-width: 1664px) {
            body.test-transactions-page #image-carousel-track {
                padding-left: calc((100vw - 1664px) / 2 + 8rem) !important;
            }
            
            /* Keep images at full size at 1664px and above */
            body.test-transactions-page #image-carousel-track > div[class*="flex-shrink-0"] {
                width: 1162px !important;
                border-radius: 0.5rem !important;
            }
        }

        .two-boxes-container {
            display: flex;
            gap: 2rem;
            width: 100%;
            position: static;
            align-items: flex-start;
            overflow: visible;
        }

        .right-side-box-link {
            display: block;
            text-decoration: none;
            color: inherit;
            position: relative;
            overflow: visible;
        }

        /* Position right-side-box to align with Trusted By section - positioned relative to section */
        section[class*="px-"] {
            position: relative !important;
            z-index: 200 !important;
            overflow: visible !important;
        }

        section[class*="px-"] .right-side-box-link {
            position: absolute !important;
            right: 1.5rem !important;
            top: 50px !important;
            z-index: 99999 !important;
            margin: 0 !important;
            left: auto !important;
        }

        @media (min-width: 768px) {
            section[class*="px-"] .right-side-box-link {
                right: 4rem !important;
            }
        }

        @media (min-width: 1024px) {
            section[class*="px-"] .right-side-box-link {
                right: 8rem !important;
            }
        }

        .box-left {
            width: 23.75rem;
            min-width: 23.75rem;
            height: 48.8125rem;
            flex-shrink: 1;
            flex-grow: 1;
            background-color: #000;
            border-radius: 3.125rem 0 0 0;
            align-self: flex-start;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        html.dark .box-left {
            background-color: #000;
            border: 1px solid #444;
        }

        @media (max-width: 1300px) {
            .box-left {
                min-width: 158px !important;
                flex-shrink: 1;
                flex-grow: 0;
            }

            .box-middle {
                flex-shrink: 1;
                min-width: 0;
            }

            .content-svg {
                display: none !important;
            }

            .pdx-logo {
                transform: scale(0.8);
            }

            .carpet-content-row {
                justify-content: center !important;
                width: auto;
                align-items: center;
                gap: 0;
            }

            .pdx-carpet-group {
                align-items: center;
                gap: 1rem;
            }
        }

        @media (max-width: 1300px) and (min-width: 1024px) {
            .box-left {
                width: 41.04rem;
                min-width: 41.04rem;
            }

            .pdx-logo {
                width: calc(180px - (1300px - 100vw) * 0.1898) !important;
                height: calc(152.57px - (1300px - 100vw) * 0.1608) !important;
                transform: none !important;
            }

            .autodesk-logo-small {
                transform: scale(0.9317) !important;
            }

            .wells-fargo-logo-small {
                transform: scale(0.51) !important;
            }

            .visa-logo-small {
                transform: scale(0.722) !important;
            }

            .logo-square img[src*="citi"] {
                transform: scale(0.9025) !important;
            }
        }

        @media (max-width: 1012px) and (min-width: 769px) {
            .portfolio-text-content {
                font-size: 1.575rem !important;
            }
        }

        @media (max-width: 960px) {
            .portfolio-gradient-box-wrapper {
                width: calc(100% - 3rem) !important;
                max-width: calc(100% - 3rem) !important;
                margin-left: 1.5rem !important;
                margin-right: 1.5rem !important;
                height: auto !important;
            }

            .portfolio-gradient-box {
                display: flex !important;
                flex-direction: column !important;
                height: auto !important;
                position: relative !important;
            }
            
            .portfolio-right-image {
                position: relative !important;
                width: 100% !important;
                height: 31.2rem !important;
                right: auto !important;
                top: auto !important;
                border-radius: 0.625rem 0.625rem 0 0 !important;
                order: 0 !important;
                margin-bottom: 1.5rem !important;
            }

            .portfolio-ai-design-badge-wrapper {
                display: block !important;
                position: absolute !important;
                left: 2rem !important;
                top: 2rem !important;
                right: auto !important;
                z-index: 2 !important;
            }
            
            .portfolio-ai-design-badge {
                padding: 0.25rem 0.3125rem !important;
                gap: 0.1875rem !important;
                font-size: 0.75rem !important;
            }
            
            .portfolio-ai-design-icon {
                width: 0.75rem !important;
                height: 0.75rem !important;
            }

            .portfolio-visa-logo {
                display: none !important;
            }

            .portfolio-text-group {
                order: 3 !important;
                position: relative !important;
                margin: 2rem 2rem 1.5rem 2rem !important;
                left: auto !important;
                top: auto !important;
                transform: none !important;
                width: auto !important;
                padding: 0 !important;
                align-items: flex-start !important;
            }

            .portfolio-text-content {
                font-size: 1.20rem !important;
                text-align: left !important;
                white-space: nowrap !important;
            }
            
            /* br tags are replaced with spaces via JavaScript on mobile/tablet */
            /* white-space: nowrap keeps text on one line */

            .portfolio-time-content {
                display: none !important;
            }
            
            .portfolio-buttons-container {
                order: 999 !important;
                position: static !important;
                margin: 0.5rem 2rem 2rem 2rem !important;
                margin-top: 0.5rem !important;
                bottom: auto !important;
                left: auto !important;
                top: auto !important;
                right: auto !important;
                transform: none !important;
                width: auto !important;
                display: flex !important;
            }
            
            .portfolio-gradient-box .portfolio-buttons-container {
                order: 999 !important;
                position: static !important;
                margin: 0.5rem 2rem 2rem 2rem !important;
                margin-top: 0.5rem !important;
                bottom: auto !important;
                left: auto !important;
                top: auto !important;
                right: auto !important;
                transform: none !important;
                width: auto !important;
                display: flex !important;
            }
        }

        @media (max-width: 960px) and (min-width: 769px) {
            .portfolio-section-wrapper {
                padding-left: 4rem !important;
                padding-right: 4rem !important;
                box-sizing: border-box !important;
            }

            .portfolio-header {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            .portfolio-gradient-box-wrapper {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                height: auto !important;
            }
        }

        @media (max-width: 1023px) and (min-width: 769px) {
            .pdx-logo {
                width: 153px !important;
                height: 129.684px !important;
                transform: none !important;
            }
        }

        @media (max-width: 1140px) and (min-width: 769px) {
            .image-caption {
                display: none;
            }
        }
        
        /* Show image caption at 769px to 1023px */
        @media (min-width: 769px) and (max-width: 1023px) {
            body.about-page .image-caption {
                display: block !important;
            }
        }

        @media (max-width: 1023px) and (min-width: 769px) {
            .box-left {
                min-width: 158px !important;
                width: auto;
                flex-basis: 23.75rem;
            }

            .box-middle {
                flex-shrink: 1;
                min-width: 0;
            }

            .pdx-logo {
                transform: scale(0.612) !important;
            }

            .pdx-carpet-group {
                gap: 0 !important;
            }

            .carpet-pattern {
                transform: scale(0.85);
            }
        }

        .pdx-carpet-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            pointer-events: none;
        }

        .carpet-content-row {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 1.5rem;
            justify-content: flex-end;
            width: 11.75rem;
        }

        .pdx-logo {
            width: 11.75rem;
            height: 7.94675rem;
            flex-shrink: 0;
            filter: brightness(0) invert(1);
        }

        .left-box-link {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: inherit;
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            z-index: 10;
            cursor: pointer;
        }

        .left-box-label {
            position: relative;
            margin: 30px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #FFF;
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: capitalize;
        }

        .left-box-text {
            width: auto;
            opacity: 1;
            transition: opacity 0.2s ease-in-out;
        }

        .left-box-icon {
            width: 1rem;
            height: 1rem;
            aspect-ratio: 1 / 1;
            display: block;
            color: #FFF;
            opacity: 1;
            transition: opacity 0.2s ease-in-out;
        }

        .left-box-link:hover .left-box-text,
        .left-box-link:hover .left-box-icon {
            opacity: 0.7;
        }

        .box-middle {
            flex-grow: 1;
            flex-shrink: 1;
            min-width: 0;
            height: 48.8125rem;
            background-color: transparent;
            border-radius: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            overflow: visible;
            position: static;
            padding-left: 0;
            padding-top: 0;
            margin-right: calc(9.875rem + 2rem);
        }
        
        .image-wrapper {
            position: relative;
            height: 100%;
            width: 100%;
        }

        .center-box-image {
            height: 100%;
            width: auto;
            object-fit: cover;
            object-position: center center;
            flex-shrink: 0;
            align-self: flex-start;
        }

        .right-column {
            display: flex;
            flex-direction: column;
            gap: 2.1875rem;
            margin-top: 14rem;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow: visible;
        }

        .image-caption {
            position: absolute;
            bottom: 27px;
            right: 35px;
            color: #000;
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            transform: rotate(90deg);
            transform-origin: bottom right;
            white-space: nowrap;
            z-index: 10;
        }

        .image-caption .caption-name {
            font-weight: 700;
        }

        .right-side-box {
            width: 9.875rem;
            height: 48.8125rem;
            flex-shrink: 0;
            border-radius: 0 3.125rem 0 0;
            border: 4px solid #000;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            position: relative;
            z-index: 10000 !important;
            background-color: #fff;
            overflow: visible;
        }

        html:not(.dark) .right-side-box {
            background-color: transparent;
        }


        .gradient-center-image {
            position: absolute !important;
            top: calc(50% - 230px) !important;
            right: -400px !important;
            left: auto !important;
            bottom: auto !important;
            transform: translateY(-50%) !important;
            width: 680px !important;
            height: 680px !important;
            z-index: 101 !important;
            pointer-events: none !important;
            opacity: 0;
            will-change: opacity;
            margin: 0 !important;
            animation: gradientFadeIn 1.5s ease-in 0.1s forwards;
        }

        @keyframes gradientFadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes reorderFade {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .reorder-fade {
            animation: reorderFade 0.5s ease-out forwards;
        }

        @keyframes fadeInFromBottom {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .portfolio-fade-in {
            animation: fadeInFromBottom 0.6s ease-out forwards;
        }

        html.dark .gradient-center-image {
            content: url('../images/dark-mode-gradient.svg');
        }

        @media (min-width: 769px) and (max-width: 1023px) {
            .gradient-center-image {
                right: calc(-400px - 80px) !important;
                opacity: 1 !important; /* Always visible on tablet, no animation */
            }
        }

        @media (max-width: 767px) {
            .gradient-center-image {
                top: calc(50% - 50px) !important;
                right: -400px !important;
                left: auto !important;
                transform: translateY(-50%) !important;
                z-index: 0 !important;
                opacity: 1 !important; /* Always visible on mobile, no animation */
                display: block !important;
                visibility: visible !important;
                max-width: none !important;
                max-height: none !important;
                width: 530px !important;
                height: 530px !important;
            }
        }

        @media only screen and (max-device-width: 767px) {
            .gradient-center-image {
                top: calc(50% - 50px) !important;
                right: -400px !important;
                left: auto !important;
                transform: translateY(-50%) !important;
                z-index: 0 !important;
                opacity: 1 !important; /* Always visible on mobile, no animation */
                display: block !important;
                visibility: visible !important;
            }
        }

        @media (max-width: 393px) {
            .gradient-center-image {
                right: calc(-400px + 100px - 50px) !important;
                width: 340px !important;
                height: 340px !important;
                opacity: 1 !important; /* Always visible on mobile, no animation */
            }
        }

        @media (max-width: 392px) {
            .gradient-center-image {
                right: calc(-400px + 140px) !important;
                opacity: 1 !important; /* Always visible on mobile, no animation */
            }
        }



        @keyframes gradientFadeInLight {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }


        html.dark .right-side-box {
            border-color: #444;
            background-color: transparent;
        }

        html.dark .right-side-box-text {
            color: #FFF;
        }

        html.dark .right-side-box-icon {
            color: #FFF;
        }

        html.dark .ux-corner-text {
            color: #FFF;
        }

        html.dark .right-side-box-link:hover .right-side-box-text {
            color: #CCC;
        }

        html.dark .right-side-box-link:hover .right-side-box-icon {
            color: #CCC;
        }

        .ux-corner-text {
            position: absolute;
            top: 20px;
            left: 20px;
            display: flex;
            width: 3.0625rem;
            height: 4.625rem;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            flex-shrink: 0;
            color: #000;
            font-family: 'Inter', sans-serif;
            font-size: 2rem;
            font-style: normal;
            font-weight: 500;
            line-height: 1;
            text-transform: capitalize;
        }

        .mobile-all-projects-btn,
        .mobile-about-me-btn,
        .mobile-trusted-by {
            display: none;
        }

        /* Duplicate removed - using absolute positioning from earlier definition */

        .right-side-box-text {
            color: #000;
            text-align: center;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: capitalize;
        }

        .right-side-box-icon {
            width: 1rem;
            height: 1rem;
            aspect-ratio: 1 / 1;
            display: block;
            color: #000;
            transition: color 0.2s ease-in-out;
        }

        .right-side-box-link:hover .right-side-box-text {
            color: #374151; /* darker grey */
        }

        .right-side-box-link:hover .right-side-box-icon {
            color: #374151; /* match text hover color */
        }

        .right-lower-box {
            width: 9.875rem;
            height: 16.5625rem;
            flex-shrink: 0;
            flex-grow: 0;
            background-color: #000;
            border-radius: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            position: relative;
            margin-top: 0;
            margin-left: auto;
            min-width: 9.875rem;
            max-width: 9.875rem;
        }

        html.dark .right-lower-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.15) 0%,
                rgba(255, 255, 255, 0.06) 30%,
                transparent 50%,
                rgba(255, 255, 255, 0.04) 70%,
                rgba(255, 255, 255, 0.12) 100%);
            pointer-events: none;
            border-radius: 0;
        }

        .carpet-pattern {
            width: 6.21856rem;
            height: 6.1875rem;
            flex-shrink: 0;
        }

        .content-svg {
            display: flex;
            width: 7.125rem;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.625rem;
            filter: brightness(0) invert(1);
        }

        .trusted-by-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: flex-start;
        }

        .trusted-by-text {
            color: #FFF;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: capitalize;
            text-align: left;
        }

        .trusted-by-dots {
            display: flex;
            align-items: flex-start;
            gap: 0.1875rem;
        }

        .dot-long {
            width: 1rem;
            height: 0.1875rem;
            background-color: #FFF;
            animation: slideInLong 3s ease-in-out infinite;
            transform-origin: left;
        }

        .dot-small {
            width: 0.1875rem;
            height: 0.1875rem;
            background-color: rgba(255, 255, 255, 0.5);
            opacity: 0;
        }

        .dot-small:nth-child(2) {
            animation: fadeInDot 3s ease-in-out infinite;
            animation-delay: 0.5s;
        }

        .dot-small:nth-child(3) {
            animation: fadeInDot 3s ease-in-out infinite;
            animation-delay: 0.75s;
        }

        @keyframes slideInLong {
            0% {
                transform: scaleX(0);
                opacity: 0;
            }
            16.67% {
                transform: scaleX(1);
                opacity: 1;
            }
            70% {
                transform: scaleX(1);
                opacity: 1;
            }
            83.33% {
                transform: scaleX(0);
                opacity: 0;
            }
            100% {
                transform: scaleX(0);
                opacity: 0;
            }
        }

        @keyframes fadeInDot {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            16.67% {
                opacity: 0;
                transform: scale(0);
            }
            25% {
                opacity: 1;
                transform: scale(1);
            }
            70% {
                opacity: 1;
                transform: scale(1);
            }
            83.33% {
                opacity: 0;
                transform: scale(0);
            }
            100% {
                opacity: 0;
                transform: scale(0);
            }
        }

        @keyframes dot-long-animation {
            0% {
                transform: scaleX(0);
                opacity: 0;
            }
            10% {
                transform: scaleX(1);
                opacity: 1;
            }
            100% {
                transform: scaleX(1);
                opacity: 1;
            }
        }

        @keyframes dot-small-animation-1 {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            15% {
                opacity: 0.5;
                transform: scale(1);
            }
            90% {
                opacity: 0.5;
                transform: scale(1);
            }
            100% {
                opacity: 0.5;
                transform: scale(1);
            }
        }

        @keyframes dot-small-animation-2 {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            20% {
                opacity: 0.5;
                transform: scale(1);
            }
            90% {
                opacity: 0.5;
                transform: scale(1);
            }
            100% {
                opacity: 0.5;
                transform: scale(1);
            }
        }

        /* Logos grid to the left of the lower black box */
        .logos-row {
            display: flex;
            align-items: flex-start;
            gap: 30px;
            width: 100%;
            max-width: 100%;
            padding-right: 0;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            box-sizing: border-box;
        }

        .logo-squares-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2.1875rem;
            flex-shrink: 1;
            flex-grow: 1;
            min-width: 0;
            max-width: 100%;
        }

        .logo-row {
            display: flex;
            gap: 2.1875rem;
            flex-wrap: nowrap;
            width: 100%;
            min-width: 0;
        }

        .logo-square {
            width: 18.75rem;
            height: 7.125rem;
            flex-shrink: 1;
            flex-grow: 1;
            aspect-ratio: 50 / 19;
            border: 1px solid #CDCDCD;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
        }

        html.dark .logo-square {
            border-color: #444;
        }

        html.dark .logo-square img {
            filter: brightness(0) invert(1);
        }

        .logo-square img {
            max-width: 70%;
            max-height: 60%;
            object-fit: contain;
            filter: brightness(0) saturate(100%); /* ensure black appearance */
        }

        .visa-logo-small {
            transform: scale(0.8);
        }

        .acorns-logo-small {
            transform: scale(0.85);
        }

        .daimler-logo-small {
            transform: scale(0.9);
        }

        .autodesk-logo-small {
            transform: scale(0.7);
        }

        .wells-fargo-logo-small {
            transform: scale(0.6);
        }

        .right-lower-wrapper {
            display: flex;
            justify-content: flex-end;
            width: 100%;
        }

        .large-dark-section-link {
            display: inline-block;
            text-decoration: none;
            color: inherit;
            position: relative;
            width: 100%;
        }

        .project-1-link {
            display: block;
            width: auto;
        }

        .portfolio-section-wrapper {
            margin-top: 80px;
        }

        /* Projects page specific - match spacing above and below tabs (70px each) */
        body:not(.home-page) .portfolio-section-wrapper {
            margin-top: 0px;
        }

        body:not(.home-page) .portfolio-header {
            padding-top: 50px;
        }

        /* About page - match projects page top spacing */
        body.project-page #page-content > section:first-child {
            margin-top: 32px !important;
            padding-top: 0 !important;
        }

        @media (min-width: 768px) {
            body.project-page #page-content > section:first-child {
                margin-top: 0 !important;
            }
            
            /* Override mt-20 on about.html first section to match projects.html spacing */
            /* Projects page has padding-top: 50px on .portfolio-header, so match that spacing */
            body.about-page #page-content > section:first-child {
                margin-top: 0 !important;
                padding-top: 50px !important;
            }
        }

        .portfolio-header {
            padding-left: 8rem;
            padding-right: 8rem;
            padding-top: 60px;
            padding-bottom: 10px;
        }

        .portfolio-projects-container {
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .portfolio-projects-container > .portfolio-gradient-box-link {
            position: relative;
            width: 100%;
        }
        
        .portfolio-gradient-box-link {
            display: block;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        .portfolio-link-disabled {
            pointer-events: none;
            cursor: default;
            opacity: 0.9;
        }

        .portfolio-link-disabled .portfolio-read-button {
            background: #E5E5E5 !important;
            color: #000 !important;
            cursor: default;
        }

        .portfolio-link-disabled .portfolio-read-button:hover {
            opacity: 1 !important;
        }

        .portfolio-gradient-box-wrapper {
            width: calc(100% - 16rem);
            max-width: calc(100% - 16rem);
            height: 33.75rem;
            margin-left: 8rem;
            margin-right: 8rem;
            margin-top: 0;
            margin-bottom: 94px;
            position: relative;
            border-radius: 0.625rem;
            overflow: hidden;
            pointer-events: none;
        }
        
        /* Re-enable pointer events for the link itself */
        .portfolio-gradient-box-link {
            pointer-events: auto;
        }

        .portfolio-gradient-box-wrapper:first-of-type {
            margin-top: 84px;
        }
        
        .portfolio-gradient-box-wrapper:last-of-type {
            margin-bottom: 0;
        }

        .portfolio-gradient-box {
            width: 100%;
            height: 100%;
            border-radius: 0.625rem;
            background: transparent;
            position: relative;
            pointer-events: none;
        }
        
        /* Re-enable pointer events for interactive elements */
        .portfolio-gradient-box .portfolio-buttons-container,
        .portfolio-gradient-box .portfolio-read-button,
        .portfolio-gradient-box .portfolio-case-studies-button {
            pointer-events: auto;
        }

        .portfolio-right-image {
            position: absolute;
            right: 0;
            top: 0;
            width: 50%;
            height: 100%;
            object-fit: cover;
            border-radius: 0 0.625rem 0.625rem 0;
            z-index: 0;
            pointer-events: none;
        }

        /* Top border with gradient */
        .portfolio-gradient-box-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(to right, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%);
            border-radius: 0.625rem 0.625rem 0 0;
            z-index: 1;
            pointer-events: none;
        }

        /* Bottom border with gradient */
        .portfolio-gradient-box-wrapper::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(to right, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%);
            border-radius: 0 0 0.625rem 0.625rem;
            z-index: 1;
            pointer-events: none;
        }

        /* Left border with gradient */
        .portfolio-gradient-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 1px;
            background: linear-gradient(to bottom, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%);
            border-radius: 0.625rem 0 0 0.625rem;
            z-index: 1;
            pointer-events: none;
        }

        /* Right border with gradient */
        .portfolio-gradient-box::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 1px;
            background: linear-gradient(to bottom, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%);
            border-radius: 0 0.625rem 0.625rem 0;
            z-index: 2;
            pointer-events: none;
        }

        .portfolio-buttons-container {
            display: flex !important;
            flex-direction: row !important;
            align-items: center;
            gap: 0.9375rem;
            position: absolute;
            bottom: 60px;
            left: 60px;
            pointer-events: none;
        }
        
        .portfolio-buttons-container .portfolio-read-button {
            order: -1 !important;
        }
        
        .portfolio-buttons-container .portfolio-case-studies-button {
            order: 1 !important;
        }
        
        .portfolio-buttons-container * {
            pointer-events: auto;
        }

        .portfolio-read-button {
            display: inline-flex;
            padding: 14px 22px;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            background: #ffffff;
            color: #000;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: none;
            border: none;
            cursor: pointer;
            border-radius: 980px;
            transition: opacity 0.3s ease;
            pointer-events: auto;
        }

        .portfolio-read-button:hover {
            opacity: 0.8;
        }

        .portfolio-case-studies-button {
            display: flex;
            padding: 0.625rem 1.25rem;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            border: 0.5px solid #FFF;
            background: transparent;
            color: #FFF;
            font-family: Inter;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            cursor: pointer;
            border-radius: 0;
            transition: background 0.3s ease, color 0.3s ease;
            pointer-events: auto;
            text-decoration: none;
        }

        /* Ensure anchor tags with this class have no default link styling */
        a.portfolio-case-studies-button {
            text-decoration: none;
            color: inherit;
        }

        a.portfolio-case-studies-button:visited {
            color: inherit;
        }

        .portfolio-case-studies-button:hover {
            background: #FFF;
            color: #000;
        }

        .portfolio-text-group {
            position: absolute;
            left: 0;
            width: 50%;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 1rem;
            pointer-events: none;
            padding: 0 60px;
            box-sizing: border-box;
        }
        
        /* Allow text content to be selectable but clicks pass through */
        .portfolio-text-group * {
            pointer-events: auto;
        }

        .portfolio-text-content {
            align-self: stretch;
            color: #FFF;
            font-family: Inter;
            font-size: 2.25rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .portfolio-time-content {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            color: #7A7A7A !important;
            font-family: Inter;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .portfolio-time-icon {
            width: 0.875rem;
            height: 0.875rem;
            filter: brightness(0) invert(0.48) !important;
        }

        .portfolio-time-content span {
            color: #7A7A7A !important;
        }

        .portfolio-time-dot {
            color: #7A7A7A !important;
            font-family: Inter;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            margin-left: 0.5rem;
            margin-right: 0.5rem;
        }

        .portfolio-time-category {
            color: #7A7A7A !important;
            font-family: Inter;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
        }

        .portfolio-time-and {
            color: #7A7A7A !important;
            font-family: Inter;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: lowercase;
        }

        .portfolio-ai-design-badge-wrapper {
            position: absolute;
            left: calc(50% + 60px);
            top: 60px;
            z-index: 2;
            border-radius: 5px;
            padding: 1px;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.15));
            pointer-events: none;
        }
        
        .portfolio-ai-design-badge-wrapper * {
            pointer-events: auto;
        }

        .portfolio-ai-design-badge {
            display: flex;
            padding: 0.375rem 0.4375rem;
            justify-content: center;
            align-items: center;
            gap: 0.25rem;
            border-radius: 4px;
            background: transparent;
            box-sizing: border-box;
            color: #FFF;
            font-family: Inter;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            position: relative;
        }

        .portfolio-ai-design-icon {
            width: 0.875rem;
            height: 0.875rem;
            position: relative;
            z-index: 1;
            filter: brightness(0) invert(1);
            display: block;
            object-fit: contain;
        }

        .portfolio-ai-design-badge span {
            position: relative;
            z-index: 1;
        }

        .portfolio-visa-logo {
            position: absolute;
            left: 60px;
            top: 60px;
            filter: brightness(0) invert(1);
            transform: scale(0.6);
            transform-origin: top left;
            pointer-events: none;
        }

        .portfolio-visa-logo.wells-fargo-logo-small {
            transform: scale(0.225) !important;
        }

        .portfolio-visa-logo[src*="citi"] {
            transform: scale(0.828) !important;
        }

        /* Light mode styles - make text and logo black */
        html:not(.dark) .portfolio-text-content {
            color: #000;
        }

        html:not(.dark) .portfolio-time-content {
            color: #000;
        }

        html:not(.dark) .portfolio-time-category {
            color: #000;
        }

        html:not(.dark) .portfolio-time-and {
            color: #000;
        }

        html:not(.dark) .portfolio-visa-logo {
            filter: brightness(0);
        }

        html:not(.dark) .portfolio-time-icon {
            filter: brightness(0);
        }

        html:not(.dark) .portfolio-time-dot {
            color: #000;
        }

        /* Dark mode - make time content elements white */
        html.dark .portfolio-time-content {
            color: #FFF !important;
        }

        html.dark .portfolio-time-content span {
            color: #FFF !important;
        }

        html.dark .portfolio-time-dot {
            color: #FFF !important;
        }

        html.dark .portfolio-time-category {
            color: #FFF !important;
        }

        html.dark .portfolio-time-and {
            color: #FFF !important;
        }

        html.dark .portfolio-time-icon {
            filter: brightness(0) invert(1) !important;
        }

        /* Light mode - angled gradient border */
        html:not(.dark) .portfolio-gradient-box-wrapper {
            border: none;
            padding: 0;
        }

        html:not(.dark) .portfolio-gradient-box-wrapper::before {
            background: linear-gradient(135deg, #ffffff 0%, #CDCDCD 20%, #CDCDCD 50%, #CDCDCD 80%, #ffffff 100%) !important;
            display: block;
        }

        html:not(.dark) .portfolio-gradient-box-wrapper::after {
            background: linear-gradient(135deg, #ffffff 0%, #CDCDCD 20%, #CDCDCD 50%, #CDCDCD 80%, #ffffff 100%) !important;
            display: block;
        }

        html:not(.dark) .portfolio-gradient-box::before {
            background: linear-gradient(135deg, #ffffff 0%, #CDCDCD 20%, #CDCDCD 50%, #CDCDCD 80%, #ffffff 100%) !important;
            display: block;
        }

        html:not(.dark) .portfolio-gradient-box::after {
            background: linear-gradient(135deg, #ffffff 0%, #CDCDCD 20%, #CDCDCD 50%, #CDCDCD 80%, #ffffff 100%) !important;
            display: block;
        }

        /* Light mode button styles */
        html:not(.dark) .portfolio-read-button {
            background: #262626;
            color: #e5e7eb;
        }

        html:not(.dark) .portfolio-case-studies-button {
            border: 0.5px solid #000;
            color: #000;
        }

        html:not(.dark) .portfolio-case-studies-button:hover {
            background: #000;
            color: #FFF;
        }

        .portfolio-tags-container {
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }

        .portfolio-tag {
            display: flex;
            padding: 0.75rem 1.25rem;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            background: #F1F1F1;
            color: #000;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            width: fit-content;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .portfolio-tag:hover {
            background: #E5E5E5;
        }

        .portfolio-tag.active {
            background: #000;
            color: #FFF;
        }

        .portfolio-tag.active:hover {
            background: #333;
        }

        .portfolio-tag-secondary {
            display: flex;
            padding: 0.75rem 1.25rem;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            background: #F1F1F1;
            color: #000;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .portfolio-tag-secondary:hover {
            background: #E5E5E5;
        }

        .portfolio-tag-secondary.active {
            background: #000;
            color: #FFF;
        }

        html.dark .portfolio-tag:not(.active),
        html.dark .portfolio-tag-secondary:not(.active) {
            background: #222;
            color: #FFF;
        }

        html.dark .portfolio-tag.active,
        html.dark .portfolio-tag-secondary.active {
            background: #FFF;
            color: #000;
        }

        html.dark .portfolio-tag:hover:not(.active),
        html.dark .portfolio-tag-secondary:hover:not(.active) {
            background: #333;
        }

        html.dark .portfolio-icon-box:not(.active) {
            background: #222;
        }

        html.dark .portfolio-icon-box:hover:not(.active) {
            background: #333;
        }

        html.dark .portfolio-icon-box.active {
            background: #FFF;
        }

        html.dark .portfolio-icon-box.active .portfolio-icon {
            filter: brightness(0) invert(1);
        }

        html.dark .portfolio-icon-box:not(.active) .portfolio-icon {
            filter: brightness(0) invert(1);
        }

        html.dark .portfolio-divider {
            background: #444;
        }

        .portfolio-divider {
            width: 0.0625rem;
            height: 1.9375rem;
            background: #CFCFCF;
            flex-shrink: 0;
        }

        .portfolio-icon-box {
            display: flex;
            width: 2.4375rem;
            height: 2.6875rem;
            justify-content: center;
            align-items: center;
            background: #F1F1F1;
            position: relative;
            flex-shrink: 0;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .portfolio-icon-box:hover {
            background: #E5E5E5;
        }

        .portfolio-icon-box.active {
            background: #000;
        }

        .portfolio-icon {
            width: 1.25rem;
            height: 1.25rem;
            flex-shrink: 0;
            aspect-ratio: 1/1;
            display: block;
            object-fit: contain;
            transition: filter 0.2s ease;
        }

        .portfolio-icon-box.active .portfolio-icon {
            filter: brightness(0) invert(1);
        }

        .large-dark-section-link::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0);
            transition: background-color 0.3s ease;
            pointer-events: none;
        }

        .large-dark-section-link:hover::after {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .large-dark-section-link:hover {
            cursor: pointer;
        }

        .projects-row {
            display: flex;
            width: 100%;
            align-items: flex-start;
        }

        .projects-left-column {
            display: flex;
            flex-direction: column;
            width: 50%;
        }

        .projects-left-column .large-dark-section-link {
            width: 100%;
        }

        .large-dark-section-link:has(.project-2),
        .large-dark-section-link:has(.project-3) {
            width: 100%;
        }

        .large-dark-section.project-3 {
            background: #1e1e1e;
            margin-top: 0;
            width: 100%;
        }

        .large-dark-section.project-4 {
            background: #222222;
            margin-top: 0;
            width: 100%;
            height: 67.5rem;
        }

        .large-dark-section-link:has(.project-4) {
            width: 50%;
        }

        .large-dark-section {
            width: 100%;
            height: 33.75rem;
            flex-shrink: 0;
            background: #212121;
            margin-top: 60px;
            display: flex;
            align-items: flex-start;
            padding-left: 8rem;
            padding-right: 8rem;
            padding-top: 80px;
            position: relative;
        }

        .large-dark-section.project-2 {
            background: #1a1a1a;
            margin-top: 0;
            width: 100%;
        }

        .large-dark-section-link:has(.project-2) .large-dark-section {
            width: 100%;
        }

        .dark-section-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 100%;
            height: 100%;
            padding-bottom: 80px;
        }

        .dark-section-text-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ux-design-tag {
            display: inline-flex;
            padding: 0.5rem 0.75rem;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            border-radius: 0.3125rem;
            background: #FFF;
            color: #000;
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            text-transform: capitalize;
            align-self: flex-start;
        }

        .dark-section-title {
            color: #FFF;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: capitalize;
            align-self: stretch;
            margin: 0;
        }

        .dark-section-description {
            color: #AAA;
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            margin: 0;
        }

        .featured-section {
            padding: 6rem 8rem 0 8rem;
            margin-top: 3rem;
            margin-bottom: -10rem;
            background: transparent;
        }

        .featured-section-content {
            max-width: 1400px;
            margin: 0 auto;
        }

        .featured-section-title {
            color: #000;
            font-family: 'Inter', sans-serif;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            margin: 0 0 3rem 0;
        }

        .featured-cards-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .featured-card {
            position: relative;
            background: transparent;
            border-radius: 1rem;
            padding: 0;
            display: flex;
            flex-direction: column;
            text-decoration: none;
        }

        .featured-card-visual {
            width: 100%;
            height: 250px;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .featured-grey-box {
            width: 100%;
            height: 100%;
            border-radius: 0.625rem;
            position: relative;
            overflow: hidden;
            background-position: center center;
            background-size: 165%;
            transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .featured-card:hover .featured-grey-box {
            background-size: 168% !important;
        }

        .featured-card:nth-child(1) .featured-grey-box {
            background-image: url('../images/article-1.jpg');
            background-size: 165%;
            background-position: center center;
            background-repeat: no-repeat;
            transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .featured-card:nth-child(1) .featured-grey-box::before {
            display: none;
        }

        .featured-card:nth-child(2) .featured-grey-box {
            background-image: url('../images/article-2.jpg');
            background-size: 165%;
            background-position: center center;
            background-repeat: no-repeat;
            transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .featured-card:nth-child(2) .featured-grey-box::before {
            display: none;
        }

        .featured-card:nth-child(3) .featured-grey-box {
            background-image: url('../images/article-3.jpg');
            background-size: 165%;
            background-position: center center;
            background-repeat: no-repeat;
            transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .featured-card:nth-child(3) .featured-grey-box::before {
            display: none;
        }

        .featured-card-title {
            color: #000;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.4;
            margin: 0 0 0.75rem 0;
            max-width: 85%;
        }

        .featured-card-date {
            color: #7A7A7A;
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            font-weight: 400;
            margin: 0;
        }

        html.dark .featured-section {
            background: transparent;
        }

        html.dark .featured-section-title {
            color: #FFF;
        }

        html.dark .featured-card-title {
            color: #FFF;
        }

        html.dark .featured-card-date {
            color: rgba(255, 255, 255, 0.7);
        }

        .ipad-knowledge-section {
            padding: 6rem 0;
            margin-top: 200px;
            background: transparent;
            overflow: hidden;
        }

        .ipad-knowledge-content {
            max-width: 100%;
            margin: 0 auto;
        }

        .ipad-knowledge-title {
            color: #FFF;
            font-family: 'Inter', sans-serif;
            font-size: 2.5rem;
            font-style: normal;
            font-weight: 300;
            line-height: 1.1;
            text-align: left;
            margin: 0 0 4rem 0;
            padding: 0 8rem;
        }

        .ipad-features-scroll-wrapper {
            position: relative;
        }

        .ipad-features-scroll-container {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding-left: 8rem;
            padding-right: 0;
            scroll-behavior: smooth;
        }

        .ipad-features-scroll-container::-webkit-scrollbar {
            display: none;
        }

        .ipad-features-scroll {
            display: flex;
            gap: 1.5rem;
            padding-right: 8rem;
            padding-top: 5px;
            padding-bottom: 5px;
            width: max-content;
        }

        .ipad-feature-card {
            width: 380px;
            min-width: 380px;
            height: 700px;
            background-image: url('../images/red-gradient-2.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 2rem;
            padding: 0;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .ipad-feature-card:hover {
            transform: scale(1.01);
        }

        .ipad-feature-card:nth-child(2) {
            background-image: url('../images/green-gradient2.jpg');
        }

        .ipad-feature-card:nth-child(3) {
            background-image: url('../images/blue-gradient-2.jpg');
        }

        .ipad-feature-header {
            padding: 3rem 3rem 2rem 3rem;
            z-index: 2;
        }

        .ipad-feature-label {
            color: rgba(255, 255, 255, 0.6);
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 1rem;
        }

        .ipad-feature-headline {
            color: #FFF;
            font-family: 'Inter', sans-serif;
            font-size: 24px;
            font-style: normal;
            font-weight: 300;
            line-height: 1.2;
            margin: 0;
        }

        .ipad-feature-visual {
            flex: 1;
            position: relative;
            overflow: hidden;
            background: transparent;
        }

        .ipad-feature-image-placeholder {
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        .ipad-feature-expand-btn {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #FFF;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 3;
            transition: transform 0.2s ease, background-color 0.2s ease;
        }

        .revenue-forecast-card {
            position: absolute;
            bottom: 1rem;
            left: 1rem;
            right: 1rem;
            background: transparent;
            border-radius: 0.75rem;
            padding: 1rem 1.25rem;
            z-index: 2;
        }

        .revenue-percentage {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .revenue-number {
            font-family: Inter;
            font-size: 4rem;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            text-transform: capitalize;
            color: #FFF;
        }

        .revenue-arrow {
            margin-top: 0.25rem;
            flex-shrink: 0;
        }

        .revenue-text {
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            text-transform: capitalize;
            color: #FFF;
            margin: 0;
        }

        .ipad-feature-expand-btn:hover {
            transform: translateX(-50%) scale(1.1);
            background: #F5F5F5;
        }

        .ipad-feature-expand-btn svg {
            color: #000;
        }

        .ipad-scroll-controls {
            display: flex;
            gap: 0.5rem;
            justify-content: flex-end;
            margin-top: 3rem;
            padding: 0 8rem;
        }

        .ipad-scroll-btn {
            pointer-events: auto;
        }

        .ipad-scroll-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }

        .ipad-scroll-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .ipad-scroll-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        html.dark .ipad-knowledge-section {
            background: transparent;
        }

        html.dark .ipad-knowledge-title {
            color: #FFF;
        }

        @media (max-width: 768px) {
            .ipad-knowledge-section {
                padding: 4rem 0;
            }

            .ipad-knowledge-title {
                font-size: 2rem;
                margin-bottom: 3rem;
                padding: 0 1.5rem;
            }

            .ipad-features-scroll-container {
                padding-left: 1.5rem;
                padding-right: 0;
            }

            .ipad-features-scroll {
                padding-right: 1.5rem;
            }

            .ipad-feature-card {
                width: 300px;
                min-width: 300px;
                height: 600px;
            }

            .ipad-feature-header {
                padding: 2rem 2rem 1.5rem 2rem;
            }

            .ipad-feature-headline {
                font-size: 20px;
            }

            .ipad-scroll-controls {
                padding: 0 1.5rem;
                margin-top: 2rem;
                justify-content: flex-end;
            }
        }

        @media (max-width: 1200px) {
            .featured-cards-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 769px) and (max-width: 1200px) {
            .featured-grey-box {
                background-size: 200% !important;
            }
            .featured-card:hover .featured-grey-box {
                background-size: 205% !important;
            }
            .featured-card:nth-child(1) .featured-grey-box,
            .featured-card:nth-child(2) .featured-grey-box,
            .featured-card:nth-child(3) .featured-grey-box {
                background-size: 200% !important;
            }
        }

        @media (max-width: 768px) {
            .featured-section {
                padding: 4rem 1.5rem;
                margin-top: 4rem;
            }

            .featured-section-title {
                font-size: 24px;
                margin-bottom: 2rem;
            }

            .featured-cards-container {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .featured-card-visual {
                height: 200px;
            }
        }

        .page-bottom-spacer {
            height: 400px;
        }

        /* Projects page specific - reduce bottom spacing */
        body.project-page .page-bottom-spacer {
            height: 128px;
        }

        .right-vertical-line {
            display: none !important;
            width: 1px;
            height: calc(48.8125rem + 4rem + 16.5625rem + 2.1875rem);
            background-color: #979797;
            flex-shrink: 0;
            margin-left: auto;
            position: relative;
            align-self: flex-start;
            margin-top: 2.8125rem;
            flex-direction: column;
        }

        html.dark .right-vertical-line {
            display: none !important;
            background-color: #444;
        }

        .top-line-box {
            display: none !important;
            width: 0.3125rem;
            height: 2.8125rem;
            flex-shrink: 0;
            background-color: #000;
            position: absolute;
            top: -2.8125rem;
            left: 50%;
            transform: translateX(-50%);
            pointer-events: none;
            z-index: 100;
        }

        html.dark .top-line-box {
            display: none !important;
            background-color: #FFF;
        }

        @media (max-width: 767px) {
            #nav-logo-container {
                transform: translateY(-7.5px);
            }

            #main-header .flex.items-center.gap-8 {
                transform: translateY(-7.5px);
            }

            #main-header a[href="about.html"] {
                display: none !important;
            }
            
            /* Ensure header is not sticky on mobile for all pages */
            #main-header {
                position: relative !important;
            }
            
            /* Hide any sticky header elements on mobile */
            #mobile-sticky-header {
                display: none !important;
                visibility: hidden !important;
            }

            /* Mobile menu overlay - white background in light mode, black in dark mode */
            #mobile-popup-menu {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                height: 100dvh !important; /* Dynamic viewport height for iOS Safari */
                height: -webkit-fill-available !important; /* Fallback for older Safari */
                z-index: 10005 !important;
                background-color: #ffffff !important; /* White in light mode */
                transition: opacity 0.3s ease-in-out;
                pointer-events: none;
                margin: 0 !important;
                padding: 0 !important;
                padding-top: env(safe-area-inset-top, 0) !important;
                padding-bottom: env(safe-area-inset-bottom, 0) !important;
                padding-left: env(safe-area-inset-left, 0) !important;
                padding-right: env(safe-area-inset-right, 0) !important;
                overflow: hidden !important;
                -webkit-overflow-scrolling: touch !important;
            }

            html.dark #mobile-popup-menu {
                background-color: #000000 !important; /* Black in dark mode */
            }

            #mobile-popup-menu:not(.hidden) {
                opacity: 1;
                pointer-events: auto;
                animation: fadeInMenu 0.3s ease-in-out;
            }

            #mobile-popup-menu.hidden {
                opacity: 0;
            }

            @keyframes fadeInMenu {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }

            /* Gradient background in bottom right - static, no animation */
            .mobile-menu-gradient {
                position: absolute !important;
                bottom: -150px !important; /* Moved up 50px from -200px */
                right: -270px !important; /* Moved right 100px more (from -170px) */
                width: 600px !important;
                height: 600px !important;
                z-index: 1 !important;
                pointer-events: none !important;
                opacity: 1 !important; /* Always visible, no fade-in */
            }

            /* Show gradients when menu is open - static in both light and dark mode */
            #mobile-popup-menu:not(.hidden) .mobile-menu-gradient,
            html.dark #mobile-popup-menu:not(.hidden) .mobile-menu-gradient {
                opacity: 1 !important; /* Static, no animation */
            }

            /* Show light mode gradient by default, hide dark mode */
            .mobile-menu-gradient-light {
                display: block !important;
            }

            .mobile-menu-gradient-dark {
                display: none !important;
            }

            /* In dark mode, hide light gradient and show dark gradient */
            html.dark .mobile-menu-gradient-light {
                display: none !important;
            }

            html.dark .mobile-menu-gradient-dark {
                display: block !important;
            }

            /* Close button - same position and size as hamburger menu */
            .mobile-menu-close-btn {
                position: absolute !important;
                top: 39px !important; /* Match header position: 30px (mt-[30px]) + 4px (centered in h-12: (48-40)/2) + 5px down */
                right: 24px !important; /* Match px-6 padding on mobile */
                z-index: 10001 !important; /* Temporary: lower than hamburger to see both */
                background: transparent !important;
                border: none !important;
                cursor: pointer !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 !important;
                width: 40px !important; /* w-10 = 40px - exact match with hamburger button */
                height: 40px !important; /* h-10 = 40px - exact match with hamburger button */
                opacity: 1 !important; /* Temporary: always visible for alignment */
            }

            @media (min-width: 768px) {
                .mobile-menu-close-btn {
                    top: 49px !important; /* Match header position: 32px (md:mt-8) + 12px (centered in md:h-16: (64-40)/2) + 5px down */
                    right: 64px !important; /* Match md:px-16 = 64px */
                }
            }

            @media (min-width: 1024px) {
                .mobile-menu-close-btn {
                    top: 49px !important; /* Match header position: 32px (md:mt-8) + 12px (centered in md:h-16: (64-40)/2) + 5px down */
                    right: 128px !important; /* Match lg:px-32 = 128px */
                }
            }

            .close-x-icon {
                width: 28px !important; /* Larger for better visibility */
                height: 28px !important; /* Larger for better visibility */
                display: block !important;
            }

            /* Light mode mobile: X is black, outline rectangles match tagline color */
            .close-x-icon .x-path {
                fill: #000000 !important; /* Black X in light mode */
            }

            .close-x-icon .corner-rect {
                fill: #9CA3AF !important; /* Match tagline text color in light mode */
            }

            /* Dark mode: X is white, outline rectangles match tagline color */
            html.dark .close-x-icon .x-path {
                fill: #ffffff !important; /* White X in dark mode */
            }

            html.dark .close-x-icon .corner-rect {
                fill: #9CA3AF !important; /* Match tagline text color in dark mode */
            }

            /* Menu content container - left side */
            .mobile-menu-content {
                position: absolute !important;
                top: 120px !important; /* Moved down from 80px */
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                z-index: 10003 !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 32px !important;
                opacity: 0;
                visibility: visible !important;
                pointer-events: auto !important;
                padding-left: 24px !important; /* Left padding for tagline */
                padding-right: 0 !important;
            }

            /* Prevent clicks on menu content from closing the menu */
            .mobile-menu-content,
            .mobile-menu-content * {
                pointer-events: auto !important;
            }

            /* Tagline text */
            .mobile-menu-tagline {
                display: flex !important;
                flex-direction: column !important;
                gap: 4px !important;
            }

            .tagline-line {
                color: #9CA3AF !important;
                font-size: 11px !important;
                font-weight: 300 !important;
                letter-spacing: 0.5px !important;
                text-transform: uppercase !important;
                font-family: 'Inter', sans-serif !important;
                line-height: 1.4 !important;
            }

            /* Navigation links */
            .mobile-menu-nav {
                display: flex !important;
                flex-direction: column !important;
                gap: 0 !important;
                width: 100vw !important;
                margin-left: -24px !important; /* Offset left padding from parent */
                padding: 0 !important;
            }

            .mobile-nav-link {
                color: #000 !important;
                font-family: 'Inter', sans-serif !important;
                font-size: 18px !important;
                font-style: normal !important;
                font-weight: 500 !important;
                line-height: normal !important;
                text-transform: capitalize !important;
                text-decoration: none !important;
                padding: 28px 30px !important; /* More vertical padding for increased space */
                transition: opacity 0.2s ease !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            .mobile-nav-link.active {
                font-weight: 500 !important; /* Keep same weight for active state */
            }

            .mobile-nav-link:active {
                opacity: 0.6 !important;
            }

            html.dark .mobile-nav-link {
                color: #ffffff !important;
            }

            .mobile-nav-divider {
                width: calc(100vw - 60px) !important; /* Full viewport width minus 30px on each side */
                height: 1px !important;
                background-color: #E5E7EB !important;
                margin-left: 30px !important; /* Exactly 30px from left edge */
                margin-right: 30px !important; /* Exactly 30px from right edge */
            }

            html.dark .mobile-nav-divider {
                background-color: #374151 !important;
            }

            /* Header background - white in light mode, black in dark mode */
            #main-header.menu-open {
                background-color: transparent !important;
                transition: background-color 0.3s ease-in-out;
            }

            body.menu-open #main-header {
                background-color: #ffffff !important; /* White in light mode */
                z-index: 10000 !important;
            }

            html.dark body.menu-open #main-header {
                background-color: #000000 !important; /* Black in dark mode */
                z-index: 10000 !important;
            }

            /* Ensure menu content is above header - already set above */

            /* Hide logo and theme toggle when menu is open */
            body.menu-open #nav-logo-container {
                display: none !important;
            }

            body.menu-open .theme-toggle-container {
                display: none !important;
            }

            /* Keep parent flex container visible so hamburger menu doesn't disappear */
            body.menu-open #main-header .flex.items-center.gap-8 {
                display: flex !important;
                visibility: visible !important;
            }

            /* Keep hamburger menu visible temporarily for alignment check - override everything */
            body.menu-open #main-header #menu-toggle,
            body.menu-open #menu-toggle,
            body.menu-open #menu-toggle.md\:hidden {
                display: flex !important; /* Temporary: keep visible for alignment - use flex to match original */
                position: fixed !important; /* Fixed to viewport to stay in exact same position */
                right: 24px !important; /* Match original position */
                top: 34px !important; /* Match original position */
                transform: none !important; /* Prevent any transforms */
                visibility: visible !important;
                opacity: 1 !important;
                z-index: 10006 !important; /* Above everything including mobile menu overlay */
                width: 40px !important; /* Ensure size */
                height: 40px !important; /* Ensure size */
                pointer-events: auto !important;
            }

            /* Ensure hamburger lines are visible */
            body.menu-open #menu-toggle .hamburger-lines,
            body.menu-open #menu-toggle .hamburger-lines .line {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            /* Remove all transitions and animations from hamburger menu */
            #menu-toggle,
            #menu-toggle *,
            .hamburger-lines,
            .hamburger-lines * {
                transition: none !important;
                animation: none !important;
            }

            /* Ensure hamburger menu and X stay on top of gradient overlay */
            #main-header {
                z-index: 10000 !important;
            }

            #menu-toggle {
                z-index: 10002 !important; /* Temporary: higher than X icon to see both */
                position: relative !important;
                transition: none !important; /* Remove all animations */
            }

            /* Temporary: Prevent hamburger menu from transforming into X so both icons are visible */
            body.menu-open #menu-toggle.is-active .hamburger-lines .line1,
            body.menu-open #menu-toggle.is-active .hamburger-lines .line2,
            body.menu-open #menu-toggle.is-active .hamburger-lines .line3 {
                transform: none !important;
                opacity: 1 !important;
            }

            /* Menu content fade-in animation - ensure it stays visible */
            #mobile-popup-menu:not(.hidden) .mobile-menu-content {
                opacity: 1 !important;
                visibility: visible !important;
                display: flex !important;
                animation: fadeInContent 0.4s ease-in-out 0.2s both;
            }

            #mobile-popup-menu:not(.hidden) .mobile-menu-close-btn {
                opacity: 1 !important;
                visibility: visible !important;
                display: flex !important;
                animation: fadeInContent 0.4s ease-in-out 0.2s both;
            }

            @keyframes fadeInContent {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }

            #mobile-popup-menu.hidden .mobile-menu-content,
            #mobile-popup-menu.hidden .mobile-menu-close-btn {
                opacity: 0 !important;
                visibility: hidden !important;
                transition: opacity 0.3s ease-in-out, visibility 0s 0.3s !important;
            }

            /* Ensure content is visible when menu is open - no transitions that could hide it */
            #mobile-popup-menu:not(.hidden) .mobile-menu-tagline {
                opacity: 1 !important;
                visibility: visible !important;
                display: block !important;
                color: #6E6E6E !important;
                transition: none !important;
            }

            #mobile-popup-menu:not(.hidden) .mobile-menu-nav {
                opacity: 1 !important;
                visibility: visible !important;
                display: flex !important;
            }

            #mobile-popup-menu:not(.hidden) .mobile-nav-link {
                opacity: 1 !important;
                visibility: visible !important;
                display: block !important;
            }

            #page-content > section:first-child {
                padding-top: 24px !important;
            }

            .two-boxes-container {
                flex-direction: column;
                gap: 24px;
                order: 1;
            }
            
            .box-left {
                width: 100%;
                height: 4.5rem;
                flex-shrink: 0;
                border-radius: 0;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding-left: 0;
                padding-right: 0;
                gap: 0;
                order: 0;
                position: relative;
            }

            .box-middle {
                width: 100%;
                height: auto;
                overflow: visible;
                order: 1;
                margin-bottom: 3rem;
                display: flex;
                flex-direction: column;
            }

            .center-box-image {
                width: 100%;
                height: 30rem;
                object-fit: cover;
                object-position: center top;
            }

            .image-caption {
                display: block !important;
                bottom: 25px;
                right: 35px;
            }

            .mobile-all-projects-btn {
                display: flex !important;
                padding: 1rem 0.625rem;
                flex-direction: row;
                align-items: center;
                gap: 0.625rem;
                align-self: stretch;
                border: 1px solid #000;
                text-decoration: none;
                justify-content: center;
                width: 100%;
                margin-top: 1.5rem;
                position: relative;
                z-index: 10 !important;
            }

            .mobile-about-me-btn {
                display: none !important;
            }

            .mobile-all-projects-btn span,
            .mobile-about-me-btn span {
                color: #000;
                text-align: center;
                font-family: 'Inter', sans-serif;
                font-size: 1rem;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                text-transform: capitalize;
            }

            .mobile-all-projects-btn svg,
            .mobile-about-me-btn svg {
                width: 1rem;
                height: 1rem;
                color: #000;
                flex-shrink: 0;
            }

            .mobile-about-me-btn {
                background: #000;
                margin-top: 0.5rem;
            }

            .mobile-about-me-btn span {
                color: #FFF;
            }

            .mobile-about-me-btn svg {
                color: #FFF;
            }

            html.dark .mobile-all-projects-btn {
                border-color: #FFF;
            }

            html.dark .mobile-all-projects-btn span {
                color: #FFF;
            }

            html.dark .mobile-all-projects-btn svg {
                color: #FFF;
            }

            html.dark .mobile-about-me-btn {
                background: #FFF;
                border-color: #FFF;
            }

            html.dark .mobile-about-me-btn span {
                color: #000;
            }

            html.dark .mobile-about-me-btn svg {
                color: #000;
            }

            .mobile-trusted-by {
                display: none !important;
            }

            .mobile-trusted-by-text {
                color: #000;
                font-family: 'Inter', sans-serif;
                font-size: 1.25rem;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                text-transform: capitalize;
                white-space: nowrap;
            }

            .mobile-trusted-by-dots {
                display: flex;
                align-items: flex-start;
                gap: 0.1875rem;
            }

            .mobile-trusted-by-dots .dot-long {
                width: 1rem;
                height: 0.1875rem;
                background-color: #000;
                transform-origin: left center;
                animation: dot-long-animation 3s infinite;
            }

            .mobile-trusted-by-dots .dot-small {
                width: 0.1875rem;
                height: 0.1875rem;
                background-color: #000;
                opacity: 0.5;
                border-radius: 50%;
                transform-origin: center;
            }

            .mobile-trusted-by-dots .dot-small:nth-child(2) {
                animation: dot-small-animation-1 3s infinite;
            }

            .mobile-trusted-by-dots .dot-small:nth-child(3) {
                animation: dot-small-animation-2 3s infinite;
            }

            .right-side-box-link {
                display: none !important;
            }


            .logo-squares-container {
                width: 100% !important;
                max-width: 100% !important;
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 1rem !important;
                box-sizing: border-box !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

            .logo-row {
                display: contents;
            }

            .logo-square {
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                height: 0 !important;
                padding-bottom: 38% !important;
                position: relative !important;
                box-sizing: border-box !important;
                aspect-ratio: unset !important;
            }

            .logo-square img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                max-width: 70%;
                max-height: 60%;
            }

            .autodesk-logo-small {
                transform: translate(-50%, -50%) scale(0.6264) !important;
            }

            .logo-square img[src*="citi"] {
                transform: translate(-50%, -50%) scale(0.901) !important;
            }

            .logo-square img[src*="daimler"], .logo-square img[src*="Daimler"] {
                transform: translate(-50%, -50%) scale(0.89) !important;
            }

            .logo-square img[src*="visa"], .logo-square img[src*="Visa"] {
                transform: translate(-50%, -50%) scale(0.689) !important;
            }

            .logo-square img[src*="acorns"], .logo-square img[src*="Acorns"] {
                transform: translate(-50%, -50%) scale(0.847) !important;
            }

            .logo-square img[src*="wells-fargo"], .logo-square img[src*="Wells-Fargo"], .logo-square img[src*="wells_fargo"] {
                transform: translate(-50%, -50%) scale(0.5032) !important;
            }

            @media (max-width: 460px) {
                .logo-square img[src*="acorns"], .logo-square img[src*="Acorns"] {
                    transform: translate(-50%, -50%) scale(0.71995) !important;
                }

                .logo-square img[src*="wells-fargo"], .logo-square img[src*="Wells-Fargo"], .logo-square img[src*="wells_fargo"] {
                    transform: translate(-50%, -50%) scale(0.607614) !important;
                }

                .autodesk-logo-small {
                    transform: translate(-50%, -50%) scale(0.792396) !important;
                }

                .logo-square img[src*="daimler"], .logo-square img[src*="Daimler"] {
                    transform: translate(-50%, -50%) scale(0.83215) !important;
                }

                .logo-square img[src*="visa"], .logo-square img[src*="Visa"] {
                    transform: translate(-50%, -50%) scale(0.58565) !important;
                }

                .logo-square img[src*="citi"] {
                    transform: translate(-50%, -50%) scale(0.76585) !important;
                }
            }

            @media (max-width: 393px) {
                .logo-square img[src*="wells-fargo"], .logo-square img[src*="Wells-Fargo"], .logo-square img[src*="wells_fargo"] {
                    transform: translate(-50%, -50%) scale(0.665482) !important;
                }

                .logo-square img[src*="acorns"], .logo-square img[src*="Acorns"] {
                    transform: translate(-50%, -50%) scale(0.64372) !important;
                }

                .logo-square img[src*="visa"], .logo-square img[src*="Visa"] {
                    transform: translate(-50%, -50%) scale(0.550511) !important;
                }

                .logo-square img[src*="citi"] {
                    transform: translate(-50%, -50%) scale(0.76585) !important;
                }

                .autodesk-logo-small {
                    transform: translate(-50%, -50%) scale(0.9112554) !important;
                }
            }

            .right-lower-wrapper {
                display: none;
            }

            .right-lower-box {
                display: flex !important;
                width: 100%;
                height: auto;
                background-color: transparent;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 0;
                margin: 0 auto 2rem auto;
            }

            .right-lower-box .trusted-by-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
            }

            .right-lower-box .trusted-by-text {
                color: #000;
                font-size: 1.25rem;
                text-align: center;
            }

            .right-lower-box .trusted-by-dots {
                justify-content: center;
            }

            .right-lower-box .trusted-by-dots .dot-long,
            .right-lower-box .trusted-by-dots .dot-small {
                background-color: #000;
            }

            html.dark .right-lower-box .trusted-by-text {
                color: #FFF;
            }

            html.dark .right-lower-box .trusted-by-dots .dot-long,
            html.dark .right-lower-box .trusted-by-dots .dot-small {
                background-color: #FFF;
            }

            html.dark .right-lower-box::before {
                display: none;
            }

            .right-column {
                display: block !important;
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin-top: 0 !important;
                order: 2;
                padding: 70px 0 70px 0 !important;
                box-sizing: border-box !important;
            }

            .logos-row {
                display: flex !important;
                flex-direction: column-reverse !important;
                gap: 1rem !important;
                width: 100% !important;
                max-width: 100% !important;
                padding: 0 !important;
                box-sizing: border-box !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                justify-content: space-between !important;
            }

            .right-column {
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                overflow: visible !important;
            }

            .portfolio-header {
                padding-left: 1.5rem;
                padding-right: 0;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .portfolio-header::-webkit-scrollbar {
                display: none;
            }

            .portfolio-section-wrapper {
                margin-top: 2.5rem !important;
                order: 3;
            }
            
            .portfolio-projects-container {
                margin-top: -1rem !important;
            }
            
            .portfolio-projects-container > .portfolio-gradient-box-link {
                margin-bottom: 1.5px !important;
            }
            
            .portfolio-projects-container > .portfolio-gradient-box-link:last-child {
                margin-bottom: 0 !important;
            }

            .portfolio-gradient-box-wrapper {
                width: calc(100% - 3rem) !important;
                max-width: calc(100% - 3rem) !important;
                margin-left: 1.5rem !important;
                margin-right: 1.5rem !important;
                margin-bottom: 0 !important;
                height: auto !important;
            }

            .portfolio-gradient-box {
                display: flex !important;
                flex-direction: column !important;
                height: auto !important;
                position: relative !important;
            }

            .portfolio-right-image {
                position: relative !important;
                width: 100% !important;
                height: 24rem !important;
                right: auto !important;
                top: auto !important;
                border-radius: 0.625rem 0.625rem 0 0 !important;
                order: 0 !important;
                margin-bottom: 1.5rem !important;
            }

            .portfolio-ai-design-badge-wrapper {
                display: block !important;
                position: absolute !important;
                left: 2rem !important;
                top: 2rem !important;
                right: auto !important;
                z-index: 2 !important;
            }
            
            .portfolio-ai-design-badge {
                padding: 0.25rem 0.3125rem !important;
                gap: 0.1875rem !important;
                font-size: 0.75rem !important;
            }
            
            .portfolio-ai-design-icon {
                width: 0.75rem !important;
                height: 0.75rem !important;
            }

            .portfolio-visa-logo {
                display: none !important;
            }
            
            /* Container that fills space from image bottom to gradient box bottom */
            .portfolio-gradient-box .container {
                order: 1 !important;
                flex: 1 !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: center !important;
                min-height: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
                padding: 1rem 2rem !important;
                gap: 1.5rem !important;
            }

            .portfolio-text-group {
                order: 0 !important;
                position: relative !important;
                margin: 0 !important;
                left: auto !important;
                top: auto !important;
                transform: none !important;
                width: 100% !important;
                padding: 0 !important;
                align-items: center !important;
                text-align: center !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
            }

            .portfolio-buttons-container {
                order: 1 !important;
                position: static !important;
                margin: 0.5rem 0 0 0 !important;
                bottom: auto !important;
                left: auto !important;
                top: auto !important;
                right: auto !important;
                transform: none !important;
                width: 100% !important;
                display: flex !important;
                justify-content: center !important;
                box-sizing: border-box !important;
            }
            
            .portfolio-read-button,
            .portfolio-case-studies-button {
                font-size: 12px !important;
            }

            .portfolio-text-content {
                font-size: 1.20rem !important;
                line-height: normal !important;
                white-space: nowrap !important;
                text-align: center !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
            }
            
            /* br tags are replaced with spaces via JavaScript on mobile/tablet */
            /* white-space: nowrap keeps text on one line */

            .portfolio-time-content {
                display: none !important;
            }

            .projects-row {
                flex-direction: column;
                gap: 1px;
            }

            .projects-left-column {
                flex-direction: column;
                gap: 1px;
                width: 100%;
            }

            .large-dark-section {
                width: 100%;
                height: 32rem;
                flex-shrink: 0;
                margin-bottom: 1px;
            }

            .large-dark-section-link {
                width: 100%;
                margin-bottom: 1px;
            }

            .large-dark-section.project-1,
            .large-dark-section.project-2,
            .large-dark-section.project-3,
            .large-dark-section.project-4 {
                width: 100%;
                height: 32rem;
            }

            .large-dark-section-link:has(.project-4) {
                width: 100%;
            }

            .large-dark-section {
                position: relative;
            }

            .dark-section-content {
                padding: 0;
            }

            .ux-design-tag {
                position: absolute;
                top: 40px;
                left: 40px;
                margin: 0;
            }

            .dark-section-text-group {
                position: absolute;
                bottom: 40px;
                left: 40px;
                margin: 0;
                padding: 0;
            }

            html.dark .large-dark-section {
                background: #212121;
            }

            html.dark .large-dark-section.project-1 {
                background: #212121;
            }

            html.dark .large-dark-section.project-2 {
                background: #1a1a1a;
            }

            html.dark .large-dark-section.project-3 {
                background: #1e1e1e;
            }

            html.dark .large-dark-section.project-4 {
                background: #222222;
            }

            html.dark .dark-section-title {
                color: #FFF;
            }

            html.dark .dark-section-description {
                color: #AAA;
            }

            html.dark .ux-design-tag {
                background: #FFF;
                color: #000;
            }

            .portfolio-tags-container {
                flex-wrap: nowrap;
                gap: 0.75rem;
                padding-right: 1.5rem;
            }

            .portfolio-tag,
            .portfolio-tag-secondary {
                flex-shrink: 0;
                padding: 0.625rem 1rem;
                font-size: 1rem;
            }

            .portfolio-divider {
                display: none;
            }

            .portfolio-icon-box {
                display: none;
            }

            html.dark .portfolio-tag:not(.active),
            html.dark .portfolio-tag-secondary:not(.active) {
                background: #222;
                color: #FFF;
            }

            html.dark .portfolio-tag.active,
            html.dark .portfolio-tag-secondary.active {
                background: #FFF;
                color: #000;
            }

            html.dark .portfolio-tag:hover:not(.active),
            html.dark .portfolio-tag-secondary:hover:not(.active) {
                background: #333;
            }

            .right-vertical-line {
                display: none !important;
            }

            .top-line-box {
                display: none !important;
                display: none;
            }

            .pdx-carpet-group {
                flex-direction: row;
                align-items: center;
                gap: 1rem;
                justify-content: flex-start;
                position: relative;
                z-index: 5;
                pointer-events: none;
                margin-left: 15px;
            }

            .pdx-logo {
                width: 4.9902rem;
                height: 3.375rem;
                flex-shrink: 0;
            }

            .carpet-content-row {
                display: block;
            }

            .carpet-pattern {
                width: 3rem;
                height: 3rem;
                flex-shrink: 0;
            }

            .content-svg {
                display: none;
            }

            .left-box-label {
                display: flex !important;
                margin: 0;
                position: relative;
                z-index: 5;
                gap: 8px;
                font-size: 1rem;
                pointer-events: none;
            }

            .left-box-link {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 1.5rem;
                z-index: 10;
                cursor: pointer;
            }
        }

        .bottom-left-text {
            position: absolute;
            bottom: 40px;
            left: 40px;
            font-size: 16px;
            line-height: 1.5;
            z-index: 10;
            pointer-events: none;
        }

        @media (min-width: 768px) {
            .bottom-left-text {
                left: 64px; /* md:px-16 = 4rem = 64px */
            }
        }

        @media (min-width: 1024px) {
            .bottom-left-text {
                left: 128px; /* lg:px-32 = 8rem = 128px */
            }
        }

        .bottom-left-text .text-light-grey {
            color: #9CA3AF;
        }

        .bottom-left-text .text-black {
            color: #000;
        }

        @media (max-width: 768px) {
            .bottom-left-text {
                left: 20px;
                font-size: 14px;
            }
        }

        .dots-background {
            position: absolute;
            top: 32px;
            left: 0;
            right: 0;
            height: 100px;
            background-image: radial-gradient(circle, #c8c8c8 1px, transparent 1px);
            background-size: 8px 8px;
            background-repeat: repeat;
            pointer-events: none;
            z-index: -1000;
            opacity: 0.4;
        }
        
        /* Match dots position with index.html */

        @media (min-width: 768px) and (max-width: 1023px) {
            .dots-background {
                top: 32px !important;
                height: 110px !important;
                overflow: visible !important;
            }
        }

        @media (max-width: 767px) {
            .dots-background {
                top: 15px;
                height: 90px;
            }
        }

        html.dark .dots-background {
            opacity: 0.2;
        }

        body:not(.menu-open) {
            overflow-y: auto !important;
            overflow-x: hidden;
            position: relative !important;
            height: 100% !important;
            height: 100dvh !important;
        }

        html {
            overflow: hidden !important;
            height: 100% !important;
        }

        body.menu-open {
            overflow: hidden;
            height: 100vh;
            height: 100dvh; /* Dynamic viewport height for iOS Safari */
            height: -webkit-fill-available; /* Fallback for older Safari */
            position: fixed;
            width: 100%;
            touch-action: none;
            -webkit-overflow-scrolling: none;
        }

        #nav-overlay {
            height: 550px; 
            transform: translateY(-100%);
            transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
        }

        #page-backdrop {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s cubic-bezier(0.76, 0, 0.24, 1);
        }

        #page-backdrop.visible {
            opacity: 1;
            pointer-events: auto;
        }

        #nav-overlay.open {
            transform: translateY(0);
        }

        #nav-logo-container.logo-color-white img {
            filter: invert(1); /* Invert black logo to white */
        }
        #nav-logo-container.logo-color-black img {
            filter: none; /* Show original black logo */
        }

        .nav-grid-link {
            padding-top: 3rem;
            padding-bottom: 3rem; 
            font-size: 2rem;
            font-weight: 400;
            text-transform: capitalize;
            color: #FFF;
            transition: background-color 0.3s ease;
            border-color: #4A4A4A;
        }

        .nav-grid-link:hover {
            background-color: #111111;
        }
        
        #close-icon:hover {
            color: #B4B4B4;
        }

        .pl-logo {
            padding-left: var(--logo-indent, 2rem); 
        }

        .social-icon {
            width: 16px;
            height: 16px;
            filter: brightness(0) saturate(100%) invert(81%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(90%) contrast(90%);
            transition: filter 0.2s;
        }
        .social-icon:hover {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(100%) contrast(100%);
        }

        /* Animated Hamburger Icon */
        .hamburger-lines {
            display: block;
            height: 18px;
            width: 24px;
            position: relative;
        }
        .hamburger-lines .line {
            display: block;
            height: 2px;
            width: 100%;
            border-radius: 10px;
            background: #000;
            transition: none !important; /* Remove all animations */
            position: absolute;
            left: 0;
        }
        .hamburger-lines .line1 { top: 0; }
        .hamburger-lines .line2 { top: 8px; }
        .hamburger-lines .line3 { top: 16px; }

        /* Style for the shorter, right-aligned bottom line */
        #menu-toggle:not(.is-active) .hamburger-lines .line3 {
            width: 50%;
            left: 50%;
        }

        /* Color change for open menu */
        #menu-toggle.is-active .hamburger-lines .line {
            background: #fff;
        }
        
        /* Transform into X */
        #menu-toggle.is-active .hamburger-lines .line1 {
            transform: translateY(8px) rotate(45deg);
        }
        #menu-toggle.is-active .hamburger-lines .line2 {
            opacity: 0;
        }
        #menu-toggle.is-active .hamburger-lines .line3 {
            transform: translateY(-8px) rotate(-45deg);
        }

        /* Hover effect for hamburger state */
        #menu-toggle:not(.is-active):hover .hamburger-lines .line {
            background: #B4B4B4;
        }

        /* Hover effect for X state */
        #menu-toggle.is-active:hover .hamburger-lines .line {
            background: #B4B4B4;
        }

        #page-content {
          position: relative;
        }

        #hero-section-placeholder {
            border-radius: 0.9375rem !important; /* 15px */
        }

        /* Removed transform to prevent content from shifting - menu now overlays like Figure.ai */

        #main-header {
            position: relative;
            z-index: 10000;
            background-color: transparent;
            padding: 0.75rem 0;
        }
        
        /* Ensure header and content scroll together on mobile and tablet */
        @media (max-width: 1023px) {
            /* Override Tailwind z-50 class and ensure header is in normal flow */
            #main-header {
                position: relative !important;
                z-index: auto !important;
            }
            
            /* Remove z-index from Tailwind classes on mobile/tablet */
            #main-header.z-50,
            #main-header[class*="z-"] {
                z-index: auto !important;
            }
            
            /* Remove overflow that creates nested scroll containers */
            #page-wrapper {
                position: relative !important;
                z-index: auto !important;
                overflow: visible !important;
                height: auto !important;
                max-height: none !important;
            }
            
            #page-content {
                position: relative !important;
                z-index: auto !important;
                overflow: visible !important;
            }
            
            /* html locks to viewport; body is the scroll container */
            html {
                position: relative !important;
                z-index: auto !important;
                overflow: hidden !important;
                height: 100% !important;
            }

            body {
                position: relative !important;
                z-index: auto !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                height: 100% !important;
                height: 100dvh !important;
            }
            
            /* Remove any transforms or properties that might create stacking contexts */
            #main-header,
            #page-wrapper,
            #page-content {
                transform: none !important;
                will-change: auto !important;
                isolation: auto !important;
            }
        }


        .new-footer {
            background-color: #F6F6EF;
            padding: 4rem 1.5rem 1.5rem;
        }
        .footer-content-wrapper {
            max-width: 1664px;
            margin: 0 auto;
        }
        .footer-main-content {
            display: flex;
            flex-direction: column;
            gap: 4rem;
            padding-bottom: 4rem;
        }
        .footer-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .footer-logo-new {
            width: 48px;
            height: 48px;
            margin-bottom: 2rem;
        }
        .footer-title {
            font-size: 1.5rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        .footer-subtitle {
            font-size: 1rem;
            color: #6A6A6A;
            margin-bottom: 1.5rem;
        }
        .footer-email-container {
            position: relative;
            width: 100%;
            max-width: 300px;
            margin-bottom: 1.5rem;
        }
        .footer-email-input {
            border: 1px solid #C8C8C8;
            padding: 0.75rem 1rem;
            padding-right: 3rem;
            border-radius: 8px;
            width: 100%;
        }
        .footer-send-button {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: #000;
            border: none;
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            color: #FFF;
            transition: all 0.3s ease;
        }
        .footer-send-button:hover {
            background: #333;
            color: #FFF;
        }
        .footer-socials {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .footer-socials img {
            filter: invert(42%) sepia(0%) saturate(14%) hue-rotate(149deg) brightness(94%) contrast(88%);
            transition: filter 0.3s ease;
        }
        .footer-socials img:hover {
            filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
        }
        .footer-projects-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .footer-nav {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .footer-nav-link {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            text-decoration: none;
            color: #000;
            padding-bottom: 1.5rem;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #C8C8C8;
        }
        .footer-nav-link:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
        .footer-nav-number {
            color: #6A6A6A;
            font-size: 1rem;
            font-weight: 500;
            padding-top: 4px;
        }
        .footer-nav-text {
            font-size: 1.5rem;
            font-weight: 400;
            position: relative;
        }
        .footer-nav-link:hover .footer-nav-text::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #000;
        }
        .footer-bottom-bar {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: center;
            padding-top: 2rem;
        }
        .footer-copyright {
            color: #6A6A6A;
        }
        .footer-legal-links a {
            color: #6A6A6A;
            text-decoration: underline;
        }
        .footer-legal-links {
            display: flex;
            gap: 2rem;
        }

        @media (min-width: 1024px) {
            .new-footer {
                padding: 100px 8rem 30px;
            }
            .footer-main-content {
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start;
                gap: 0;
            }
            .footer-left {
                align-items: flex-start;
                text-align: left;
            }
            .footer-logo-new {
                margin-bottom: 90px;
            }
            .footer-title {
                font-size: 24px;
            }
            .footer-subtitle {
                font-size: 16px;
            }
            .footer-nav {
                width: 546px;
            }
            .footer-nav-link {
                padding-bottom: 2rem;
                margin-bottom: 2rem;
            }
            .footer-nav-number {
                font-size: 20px;
            }
            .footer-nav-text {
                font-size: 48px;
            }
            .footer-bottom-bar {
                flex-direction: row;
                justify-content: space-between;
                padding-top: calc(2rem + 20px);
                padding-bottom: 20px;
            }
        }

        .bottom-gradient-bar {
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, #F4DCA8 0%, #F7B15D 31.27%, #FF6F58 52.05%, #FF39BB 100%);
        }

        .cta-section {
            background-color: #000;
        }

        .cta-button:hover {
            background-color: #fff;
            color: #000;
        }

        .logo-grid-item {
            border-color: #E5E7EB; /* border-gray-200 */
        }

        .carousel-arrow-btn {
            width: 3.125rem;
            height: 3.125rem;
            background-color: #EDEDED;
            border-radius: 9999px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            transition: background-color 0.3s ease;
        }

        .carousel-arrow-btn:not([disabled]):hover {
            background-color: #dcdcdc;
        }

        .carousel-arrow-icon {
            width: 1rem;
            height: 1rem;
            color: #6B7280;
            flex-shrink: 0;
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        #projects-carousel::-webkit-scrollbar {
            display: none;
        }

        /* Hide scrollbar for IE, Edge and Firefox */
        #projects-carousel {
            position: relative; /* Set positioning context for cards */
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        .project-card {
            background-color: transparent;
            border: 1px solid #e5e7eb;
        }
        .project-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .project-squares-wrapper {
            width: 100%;
        }

        .project-squares-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1px;
            background-color: #4A4A4A;
        }

        .project-square {
            height: 42.75rem;
            flex-shrink: 0;
            background: #000;
            transition: all 0.3s ease-in-out;
            position: relative;
            overflow: hidden;
        }

        .project-square::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1.5px solid transparent;
            border-radius: 12px;
            background: linear-gradient(57deg, #000 -9.53%, #FBFBFB 51.37%, #000 108.78%) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            z-index: 1;
        }

        .project-square::after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            background: #000;
            z-index: 2;
        }

        .project-square:hover::before {
            opacity: 1;
        }

        .divider-line {
            width: 184px;
            height: 1px;
            background-color: #000;
            margin-bottom: 30px;
        }

        .project-text {
            color: #000;
            font-family: "Articulat CF", sans-serif;
            font-size: 72px;
            font-style: normal;
            font-weight: 500;
            line-height: 120%; /* 86.4px */
        }

        @media (max-width: 767px) {
            .project-text {
                font-size: 48px;
                width: 100%;
            }
        }

        /* Tools Carousel Animation */
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        .animate-scroll {
            animation: scroll 60s linear infinite;
        }

        .tools-carousel-container {
            position: relative;
            width: 100%;
        }

        .tools-carousel-grid {
            display: flex;
            flex-direction: column;
            width: max-content;
        }

        .tools-row {
            display: flex;
            gap: 2rem;
        }

        .tool-card {
            transition: transform 0.3s ease;
        }

        .tool-card:hover {
            transform: translateY(-5px);
        }

        /* About page gradient animation */
        .about-gradient-square {
            position: relative;
            overflow: hidden;
            background-color: #141414;
        }

        .about-gradient-square::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.1), transparent 40%),
                        radial-gradient(circle at 70% 15%, rgba(255, 255, 255, 0.1), transparent 40%),
                        radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.08), transparent 50%);
            background-size: 200% 200%;
            animation: moveGradient 3s ease infinite;
        }

        .about-gradient-square::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39tbW1+fn5oaGhiYmLS0tJycnJ1dXWoqKhXV1dISEjw8PDVaKHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QETBRAKrvZz2AAAAAlwzFlzAAALEwAACxMBAJqcGAAAAAd0SU1fFCEBEwMUCFodBwYAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhARMFEAqq9nPZAAAACXWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QESCxEAdnUDAAAAAAlwFlzAAALEwAACxMBAJqcGAAAAAd0SU1fFCEBEgsRAHZW_gAAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhARMLFgQy6cBhAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTAxLTIxVDEwOjEwOjEwKzAwOjAwR2zP9AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wMS0yMVQxMDoxMDoxMCswMDowMOvjA9UAAADRSURBVEhL7dFBEoAgDATAfceC3P_7nC6tu3gJz6cIt4q1qrZ1nRuO5a+8jmO6ZgZgDEQwDGFwJDAkx0JkPJIHkglJUhKZoGSSnJDFyTiQR5IqSc3giSM5pCQyQckjOCZEcoQMIWkI0i5IkiQuSGdJCZHCxC1JIMhOGJGSJ0kKAlJ0kpCVhKOZGIJkISmJSEpCUEQkCUkS0M2wb9t3f9p281P29jP27jP2djP29jP28jP29jP28jP2djP28jP2djP29T/wBNa0S2b05QjAAAAAASUVORK5CYII=');
            opacity: 0.05;
            animation: moveNoise 2s steps(10, end) infinite;
            pointer-events: none;
        }

        /* About page center box gradient */
        .about-center-gradient {
            position: absolute;
            top: calc(50% - 100px);
            right: calc(5% - 100px);
            transform: translateY(-50%);
            width: 122%;
            height: 122%;
            object-fit: contain;
            object-position: center;
            opacity: 1;
            pointer-events: none;
        }

        /* Mobile fix for about-center-gradient - hide SVG filter artifacts */
        @media (max-width: 767px) {
            .about-center-gradient {
                display: none !important;
            }
            
            /* Add a CSS fallback gradient for mobile */
            .about-center-box::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: radial-gradient(ellipse at 60% 30%, 
                    rgba(3, 80, 132, 0.4) 0%, 
                    rgba(28, 44, 67, 0.3) 40%, 
                    rgba(221, 47, 48, 0.2) 70%,
                    transparent 100%);
                pointer-events: none;
                z-index: 0;
            }
        }

        /* About page center box content container */
        .about-center-content {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 1;
        }

        /* About page center box text */
        .about-center-text {
            color: #FFF;
            font-family: Inter, sans-serif;
            font-size: 3.9375rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            margin-bottom: 0.75rem;
        }

        /* About page center box label */
        .about-center-label {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.375rem;
            color: #FFF;
            font-family: Inter, sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            white-space: nowrap;
        }

        .about-center-label i {
            font-size: 14px;
            line-height: 1;
        }

        /* About page center box role text */
        .about-center-role {
            position: absolute;
            bottom: 17.375rem;
            left: 50%;
            transform: translateX(-50%);
            color: #A4A4A4;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            white-space: nowrap;
            text-align: center;
            z-index: 1;
            margin: 0;
            padding: 0;
            width: max-content;
        }

        /* About page center box line */
        .about-center-line {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 15.6875rem;
            height: 0.0625rem;
            background: #313131;
            z-index: 1;
            margin: 0;
            padding: 0;
        }

        /* About page center box first line (between first and second text) */
        .about-center-line-first {
            bottom: 15.875rem; /* Centered between 17.375rem and 13.375rem, accounting for text baseline */
        }

        /* About page center box second line (between second and third text) */
        .about-center-line-second {
            bottom: 11.875rem; /* Centered between 13.375rem and 9.375rem, accounting for text baseline */
        }

        /* About page center box third line (between third and fourth text) */
        .about-center-line-third {
            bottom: 7.875rem; /* Centered between 9.375rem and 5.375rem, accounting for text baseline */
        }

        /* About page center box second role text */
        .about-center-role-second {
            bottom: 13.375rem;
        }

        /* About page center box third role text */
        .about-center-role-third {
            bottom: 9.375rem;
        }

        /* About page center box fourth role text */
        .about-center-role-fourth {
            bottom: 5.375rem;
        }

        /* Mobile responsive adjustments for about-center-box */
        @media (max-width: 767px) {
            .about-center-box {
                min-height: 420px !important;
                padding-bottom: 40px;
            }

            .about-center-content {
                top: 40px;
                transform: translate(-50%, 0);
            }

            .about-center-text {
                font-size: 3rem;
                margin-bottom: 0.5rem;
            }

            .about-center-label {
                font-size: 12px;
            }

            .about-center-role {
                bottom: auto;
                top: 10.5rem;
                font-size: 0.75rem;
            }

            .about-center-role-second {
                bottom: auto;
                top: 14rem;
            }

            .about-center-role-third {
                bottom: auto;
                top: 17.5rem;
            }

            .about-center-role-fourth {
                bottom: auto;
                top: 21rem;
            }

            .about-center-line-first {
                bottom: auto;
                top: 12.75rem;
            }

            .about-center-line-second {
                bottom: auto;
                top: 16.25rem;
            }

            .about-center-line-third {
                bottom: auto;
                top: 19.75rem;
            }
        }

        /* About page quote text */
        .about-quote-text {
            align-self: stretch;
            color: #9E9E9E;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.125rem;
            text-transform: none;
        }

        /* About page author info */
        .about-author-info {
            position: absolute;
            bottom: 40px;
            left: 40px;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .about-author-line {
            width: 1.25rem;
            height: 0.125rem;
            background: #FFF;
            margin-bottom: 15px;
        }

        .about-author-name {
            color: #FFF;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            text-transform: capitalize;
        }

        .about-author-title {
            color: #686868;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: none;
        }

        /* About page dark mode borders */
        html.dark .about-center-box,
        html.dark .about-top-right-box,
        html.dark .about-bottom-right-box {
            border: none;
            position: relative;
        }

        /* Top border with gradient - dark mode only */
        html.dark .about-top-right-box::before,
        html.dark .about-bottom-right-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(to right, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%);
            border-radius: 1rem 1rem 0 0;
            z-index: 20;
            pointer-events: none;
        }

        /* Top border with angled gradient for center box - dark mode only */
        html.dark .about-center-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(45deg, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%);
            border-radius: 1rem 1rem 0 0;
            z-index: 10;
            pointer-events: none;
        }

        /* Bottom border with gradient - dark mode only */
        html.dark .about-top-right-box::after,
        html.dark .about-bottom-right-box::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(to right, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%);
            border-radius: 0 0 1rem 1rem;
            z-index: 20;
            pointer-events: none;
        }

        /* Bottom border with angled gradient for center box - dark mode only */
        html.dark .about-center-box::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(45deg, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%);
            border-radius: 0 0 1rem 1rem;
            z-index: 10;
            pointer-events: none;
        }

        /* Left and right borders with gradient - dark mode only */
        /* Add left and right borders using background gradient on the box itself */
        html.dark .about-top-right-box,
        html.dark .about-bottom-right-box {
            background-image: 
                linear-gradient(to bottom, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%),
                linear-gradient(to bottom, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%),
                var(--existing-bg, none);
            background-size: 1px 100%, 1px 100%, 100% 100%;
            background-position: left center, right center, center center;
            background-repeat: no-repeat, no-repeat, no-repeat;
        }

        /* Left and right borders with angled gradient for center box - dark mode only */
        html.dark .about-center-box {
            background-image: 
                linear-gradient(to bottom, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%),
                linear-gradient(to bottom, #000000 0%, #444 12%, #444 50%, #444 88%, #000000 100%),
                var(--existing-bg, none);
            background-size: 1px 100%, 1px 100%, 100% 100%;
            background-position: left center, right center, center center;
            background-repeat: no-repeat, no-repeat, no-repeat;
        }

        /* Ensure gradient stays clipped inside */
        .about-top-right-box {
            overflow: hidden;
        }

        /* About page bottom right grey rectangle */
        .about-bottom-right-grey-rectangle {
            position: absolute;
            top: 12px;
            left: 12px;
            right: 12px;
            height: 120px;
            background-image: url('../images/li-bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 8px;
            z-index: 1;
        }

        /* About page LinkedIn icon */
        .about-linkedin-icon {
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 3;
        }

        /* About page online indicator */
        .about-online-indicator {
            position: absolute;
            top: 169px;
            right: 28px;
            display: flex;
            align-items: center;
            gap: 4px;
            z-index: 3;
            transform: translateY(-50%);
        }

        .about-online-circle {
            width: 0.375rem;
            height: 0.375rem;
            aspect-ratio: 1/1;
            background-color: #4CAF50;
            border-radius: 50%;
        }

        .about-online-text {
            color: #7F7F7F;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-weight: 400;
        }

        /* About page topics container */
        .about-topics-container {
            position: absolute;
            top: 225px;
            left: 28px;
            right: 28px;
            display: flex;
            padding: 10px 2.4375rem;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            border-radius: 0.625rem;
            background: #282828;
            z-index: 3;
        }

        @media (max-width: 767px) {
            .about-topics-container {
                display: none;
            }
        }

        /* About page topic container */
        .about-topic-container {
            text-align: center;
        }

        /* About page topic number */
        .about-topic-number {
            color: #FFF;
            text-align: center;
            font-family: Inter, sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            text-transform: capitalize;
        }

        /* About page topic label */
        .about-topic-label {
            color: #7F7F7F;
            text-align: center;
            font-family: Inter, sans-serif;
            font-size: 0.625rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: lowercase;
        }

        /* About page topic divider */
        .about-topic-divider {
            background: #383838;
            width: 0.0625rem;
            height: 1.5625rem;
            align-self: center;
        }

        /* About page connect button */
        .about-connect-button {
            position: absolute;
            bottom: 28px;
            left: 28px;
            right: 28px;
            color: #000;
            font-family: Inter, sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            display: flex;
            padding: 0.75rem 5.375rem;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            align-self: stretch;
            border-radius: 0.625rem;
            background: #FFF;
            border: none;
            cursor: pointer;
            z-index: 3;
            transition: opacity 0.2s ease-in-out;
            white-space: nowrap;
            text-decoration: none;
        }

        .about-connect-button:hover {
            opacity: 0.9;
        }

        /* About page bottom right content container */
        .about-bottom-right-content {
            position: absolute;
            left: 28px;
            top: 105px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        /* About page bottom right image */
        .about-bottom-right-image {
            width: 68px;
            height: 67px;
            object-fit: contain;
            margin-top: -20px;
        }

        /* About page bottom right name container */
        .about-bottom-right-name-container {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .about-bottom-right-name-container .about-verified-icon {
            align-self: center;
            margin-top: 1px;
        }

        /* About page bottom right name */
        .about-bottom-right-name {
            color: #FFF;
            font-family: Inter, sans-serif;
            font-size: 1.125rem;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            text-transform: capitalize;
        }

        /* About page bottom right title */
        .about-bottom-right-title {
            color: #7F7F7F;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
        }

        /* About page verified icon */
        .about-verified-icon {
            width: 0.875rem;
            height: 0.875rem;
            aspect-ratio: 1/1;
        }

        /* About page quote gradient */
        .about-quote-gradient {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 15%;
            background: linear-gradient(to left, 
                #7dd3fc 0%, 
                #a5f3fc 15%, 
                #fef08a 35%, 
                #fbbf24 55%, 
                #f97316 75%, 
                #6366f1 90%,
                transparent 100%);
            background-size: 200% 100%;
            animation: voiceGradient 3s ease-in-out infinite;
            z-index: 1;
        }

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

        /* About page quote top gradient */
        .about-quote-gradient-top {
            position: absolute;
            top: -8px;
            left: 0;
            right: 0;
            width: 100%;
            height: calc(25% - 5px);
            background: linear-gradient(to bottom, 
                #A083C9 0%,
                #A083C9 2%,
                #252A7B 52%,
                transparent 100%);
            background-size: 400% 100%;
            background-repeat: no-repeat;
            animation: subtleWave 2s ease-in-out infinite;
            z-index: 0;
            pointer-events: none;
            border-radius: 1rem 1rem 0 0;
            clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 Q 50,25 100,0 L 100,100 L 0,100 Z' fill='black'/%3E%3C/svg%3E");
        }

        /* Simplified gradient for mobile Safari */
        @media (max-width: 767px) {
            .about-quote-gradient-top {
                clip-path: none;
                border-radius: 1rem 1rem 0 0;
                height: 20%;
                top: 0;
            }
        }

        .about-quote-gradient-top::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background: linear-gradient(to bottom, 
                transparent 0%,
                rgba(0, 0, 0, 0.7) 40%,
                rgba(0, 0, 0, 0.9) 70%,
                rgba(0, 0, 0, 1) 100%);
            animation: fadeInOut 2s ease-in-out infinite;
            pointer-events: none;
            z-index: 2;
        }

        @keyframes subtleWave {
            0%, 100% {
                background-position: 0% 50%;
            }
            25% {
                background-position: 50% 48%;
            }
            50% {
                background-position: 100% 52%;
            }
            75% {
                background-position: 50% 48%;
            }
        }

        @keyframes fadeInOut {
            0%, 100% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }


        /* About page curious section */
        .about-curious-section {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            padding: 40px 0;
            position: relative;
            margin-top: 80px !important;
            margin-bottom: 80px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }
        
        @media (max-width: 767px) {
            .about-curious-section {
                padding-bottom: 0;
            }
        }
        
        @media (min-width: 768px) {
            .about-curious-section {
                flex-direction: row;
                gap: 4rem;
                margin-top: 150px !important;
                margin-bottom: 150px;
                width: fit-content;
            }
        }
        @media (min-width: 1024px) {
            .about-curious-section {
                gap: 8rem;
                padding: 60px 0;
                margin-top: 200px !important;
                margin-bottom: 200px;
            }
        }

        .about-curious-left {
            display: flex;
            width: 100%;
            height: auto;
            flex-direction: column;
            justify-content: center;
            flex-shrink: 0;
            align-items: center;
            text-align: center;
        }
        
        @media (max-width: 767px) {
            .about-curious-left {
                margin-bottom: 80px;
            }
        }
        
        @media (min-width: 768px) {
            .about-curious-left {
                width: 16.75rem;
                height: 10.125rem;
                align-items: flex-start;
                text-align: left;
                margin-bottom: 0;
            }
        }

        .about-curious-text-bold,
        .about-curious-text {
            color: #000;
            font-family: Inter, sans-serif;
            font-size: 2rem;
            font-style: normal;
            font-weight: 500;
            line-height: 1.35;
        }
        
        @media (min-width: 768px) and (max-width: 1023px) {
            .about-curious-text-bold,
            .about-curious-text {
                font-size: 2.5rem;
                line-height: 1.25;
                text-transform: capitalize;
            }
        }
        @media (min-width: 1024px) {
            .about-curious-text-bold,
            .about-curious-text {
                font-size: 3rem;
                line-height: 1.25;
                text-transform: capitalize;
            }
        }

        html.dark .about-curious-text-bold,
        html.dark .about-curious-text {
            color: #FFF;
        }

        .about-curious-right {
            width: 19.0625rem;
            height: 10.5rem;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        
        @media (max-width: 767px) {
            .about-curious-right {
                height: auto;
            }
        }
        
        @media (min-width: 768px) {
            .about-curious-right {
                width: 19.0625rem;
                justify-content: flex-start;
            }
        }

        .about-curious-paragraph {
            color: #959495;
            font-family: Inter, sans-serif;
            font-size: 1.3125rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.47;
            margin: 0;
            text-align: center;
        }
        
        @media (min-width: 768px) {
            .about-curious-paragraph {
                text-align: left;
            }
        }

        /* About page PDX section container */
        /* Allow section to break out of max-width container for image positioning */
        body.about-page .about-pdx-section {
            position: relative;
            width: 100%;
            margin-top: 6rem;
            margin-bottom: 6rem;
            padding-top: 0;
            padding-bottom: 0;
            overflow: visible;
            max-width: none !important;
            width: 100vw !important;
            position: relative !important;
            left: 50% !important;
            margin-left: -50vw !important;
            margin-right: -50vw !important;
        }
        
        /* Constrain the content inside PDX section to max-width and left-align */
        body.about-page .about-pdx-section .about-curious-paragraph-duplicate {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto !important;
            padding-left: 2rem;
            padding-right: 2rem;
            width: 100%;
            box-sizing: border-box;
        }
        
        /* Ensure text container stays within bounds and left-aligned */
        @media (min-width: 1665px) {
            body.about-page .about-pdx-section .about-curious-paragraph-duplicate {
                margin-left: calc((100vw - 1664px) / 2);
                margin-right: calc((100vw - 1664px) / 2);
            }
        }
        
        @media (min-width: 768px) {
            body.about-page .about-pdx-section .about-curious-paragraph-duplicate {
                padding-left: 4rem;
                padding-right: 4rem;
            }
        }
        
        @media (min-width: 1024px) {
            body.about-page .about-pdx-section .about-curious-paragraph-duplicate {
                padding-left: 8rem;
                padding-right: 8rem;
            }
        }
        
        /* Text section above squares */
        .about-pdx-text-above-squares {
            max-width: 950px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 2rem;
            padding-right: 2rem;
            padding-top: 0;
            padding-bottom: 0;
            text-align: center;
            margin-top: 80px !important;
            margin-bottom: 80px;
        }
        
        @media (min-width: 768px) {
            .about-pdx-text-above-squares {
                padding-left: 4rem;
                padding-right: 4rem;
                padding-top: 0;
                padding-bottom: 0;
                margin-top: 150px !important;
                margin-bottom: 150px;
            }
        }
        
        @media (min-width: 1024px) {
            .about-pdx-text-above-squares {
                padding-left: 8rem;
                padding-right: 8rem;
                padding-top: 0;
                padding-bottom: 0;
                margin-top: 200px !important;
                margin-bottom: 200px;
            }
        }
        
        .about-pdx-lorem-text {
            color: #959495;
            font-family: Inter, sans-serif;
            font-size: 1.3125rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.875rem;
            margin: 0;
            text-align: center;
        }
        
        html.dark .about-pdx-lorem-text {
            color: #FFF;
        }
        
        /* Ensure squares container stays within max content width */
        body.about-page .about-pdx-section .about-pdx-squares-container {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 2rem;
            padding-right: 2rem;
        }
        
        @media (min-width: 768px) {
            body.about-page .about-pdx-section .about-pdx-squares-container {
                padding-left: 4rem;
                padding-right: 4rem;
            }
        }
        
        @media (min-width: 1024px) {
            body.about-page .about-pdx-section .about-pdx-squares-container {
                padding-left: 8rem;
                padding-right: 8rem;
            }
        }
        
        /* About page curious paragraph duplicate - container for text and image */
        .about-curious-paragraph-duplicate {
            position: relative;
            display: flex;
            gap: 2rem;
            text-align: left;
            margin-top: 0;
            margin-bottom: 0;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            min-height: 45rem;
            overflow: visible;
        }
        
        /* Allow PDX image to break out of content width */
        body.about-page #page-content > section {
            overflow: visible !important;
        }
        
        body.about-page #page-wrapper {
            overflow: visible !important;
        }
        
        body.about-page #page-content {
            overflow: visible !important;
        }


        .about-curious-paragraph-duplicate .about-curious-paragraph {
            flex-shrink: 0;
        }

        .about-curious-paragraphs-container {
            position: relative;
            left: auto;
            top: auto;
            width: 19.0625rem;
            max-width: 19.0625rem;
            flex-shrink: 0;
        }

        .about-curious-paragraph-scroll {
            position: relative;
            top: auto;
            left: auto;
            width: 100%;
            max-width: 100%;
            color: #959495;
            font-family: Inter, sans-serif;
            font-size: 1.3125rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.875rem;
            opacity: 1;
            box-sizing: border-box;
        }

        html.dark .about-curious-paragraph-scroll {
            color: #FFF;
        }

        /* About page curious rectangle - PDX image */
        .about-curious-rectangle {
            height: 45rem;
            align-self: center;
            border-radius: 1.25rem 0 0 1.25rem;
            opacity: 1;
            background-image: url('../images/pdx-image.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 50vw;
            flex-shrink: 0;
            margin-left: auto;
            position: absolute;
            max-width: none;
        }
        
        /* Circle wrapper for positioning */
        .about-pdx-circle-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            z-index: 10;
            pointer-events: none;
        }
        
        /* Circle design overlay on PDX image */
        .about-pdx-circle-overlay {
            display: block;
            transform: scale(0.5);
            width: 100%;
            height: auto;
        }
        
        /* Stitch pattern circle around PNG image - smaller circle around the image */
        .about-pdx-circle-wrapper::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc((100% - 40px) * 0.70);
            height: calc((100% - 40px) * 0.70);
            border: 2px dashed #D7D7D7;
            border-radius: 50%;
            pointer-events: none;
            z-index: 11;
            box-sizing: border-box;
            border-spacing: 8px;
        }
        
        /* Use SVG for better control over dash spacing */
        .about-pdx-circle-wrapper::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(var(--circle-rotation, 0deg));
            width: calc((100% - 40px) * 0.70);
            height: calc((100% - 40px) * 0.70);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='49%25' fill='none' stroke='%23D7D7D7' stroke-width='2' stroke-dasharray='8 6'/%3E%3C/svg%3E");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            pointer-events: none;
            z-index: 11;
            transition: transform 0.1s ease-out;
        }
        
        /* Hide the border version */
        .about-pdx-circle-wrapper::after {
            display: none;
        }
        
        /* Position PDX image to extend to right edge of viewport, relative to section */
        body.about-page .about-pdx-section {
            position: relative;
        }
        
        body.about-page .about-pdx-section .about-curious-paragraph-duplicate {
            position: relative;
        }
        
        /* Position PDX image to always extend to right edge of viewport */
        /* Section is now full viewport width, so image can extend to edge */
        body.about-page .about-pdx-section .about-curious-rectangle {
            position: absolute;
            width: 50vw;
            right: 0;
            margin-right: 0;
            padding-right: 0;
        }
        
        /* Ensure section and containers don't add padding that prevents edge alignment */
        body.about-page .about-pdx-section {
            padding-right: 0 !important;
        }
        
        
        /* Ensure body/html don't constrain the image on about page only */
        body.about-page {
            overflow-x: visible !important;
        }
        
        html:has(body.about-page) {
            overflow-x: visible !important;
        }
        
        /* Ensure parent containers don't constrain the image */
        body.about-page .about-pdx-section,
        body.about-page .about-pdx-section .about-curious-paragraph-duplicate {
            overflow: visible !important;
        }
        
        /* About page PDX squares container */
        .about-pdx-squares-container {
            display: flex;
            gap: 30px;
            width: 100%;
            margin-top: 0;
            padding-top: 0;
        }
        
        /* Constrain squares container to max content width (already set above, but ensure it applies) */
        body.about-page .about-pdx-section .about-pdx-squares-container {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* About page PDX square wrapper - contains square and text */
        .about-pdx-square-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
            align-items: center;
        }
        
        /* About page PDX square - each takes 50% of content width */
        .about-pdx-square {
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;
            min-height: 0;
            border-radius: 1.25rem;
            background-color: #F5F5F5;
        }
        
        html.dark .about-pdx-square {
            background-color: #1A1A1A;
        }
        
        /* About page PDX square content - text below square */
        .about-pdx-square-content {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            width: 75%;
            text-align: center;
        }
        
        .about-pdx-square-heading {
            font-size: 1.5rem;
            font-weight: 500;
            line-height: 1.75rem;
            color: #000;
            margin: 0;
        }
        
        html.dark .about-pdx-square-heading {
            color: #FFF;
        }
        
        .about-pdx-square-text {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5rem;
            color: #4B5563;
            margin: 0;
        }
        
        html.dark .about-pdx-square-text {
            color: #9CA3AF;
        }
        
        .about-pdx-square-text-bold {
            color: #000;
        }
        
        html.dark .about-pdx-square-text-bold {
            color: #FFF;
        }
        
        /* Stack squares on mobile */
        @media (max-width: 767px) {
            .about-pdx-squares-container {
                flex-direction: column;
                gap: 4rem;
            }
            
            .about-pdx-square-content {
                width: 85%;
                text-align: center;
                align-items: center;
            }
        }
        
        /* Hide tools section on about page - uncomment to show */
        body.about-page .about-tools-section {
            display: none !important;
        }
        
        /* From 1330px down to mobile, show only the image */
        @media (max-width: 1330px) {
            .about-center-box,
            .about-top-right-box,
            .about-bottom-right-box {
                display: none !important;
            }
            
            /* Single column layout - just the image */
            .about-top-section-fade {
                grid-template-columns: 1fr !important;
            }
            
            /* Hide the experience box and third column container */
            .about-top-section-fade > div:nth-child(2),
            .about-top-section-fade > div:last-child {
                display: none !important;
            }
            
            /* Make image container expand to fill available space */
            .about-top-section-fade > div:first-child {
                width: 100% !important;
            }
            
            .about-top-section-fade > div:first-child > div {
                width: 100% !important;
                max-width: none !important;
            }
        }
        
        /* Reorganize layout on tablet */
        @media (min-width: 768px) and (max-width: 1023px) {
            .about-curious-section {
                flex-direction: row;
                gap: 4rem;
                align-items: center;
            }
            
            .about-curious-left {
                width: auto;
                align-items: flex-start;
                text-align: left;
                gap: 0.15rem;
            }
            
            .about-curious-right {
                width: auto;
                flex: 1;
                justify-content: flex-start;
                align-items: center;
                height: auto;
            }
            
            /* Reorganize PDX section on tablet - text left, image right */
            .about-curious-paragraph-duplicate {
                flex-direction: row;
                gap: 4rem;
                align-items: center;
                justify-content: space-between;
            }
            
            .about-curious-paragraphs-container {
                width: auto;
                flex: 1;
                max-width: 19.0625rem;
            }
            
            .about-curious-rectangle {
                display: block !important;
                width: 50%;
                flex-shrink: 0;
            }
            
            .about-curious-paragraph-scroll {
                text-align: left;
            }
            
            /* Reduce circle image and stitching by 15% on tablet */
            .about-pdx-circle-overlay {
                transform: scale(0.425);
            }
            
            .about-pdx-circle-wrapper::before {
                width: calc((100% - 40px) * 0.595);
                height: calc((100% - 40px) * 0.595);
            }
        }

        /* Mobile adjustments for PDX section */
        @media (max-width: 767px) {
            body.about-page .about-pdx-section .about-curious-paragraph-duplicate {
                max-width: 1664px;
                margin-left: auto;
                margin-right: auto;
                padding-left: 2rem;
                padding-right: 2rem;
            }
            
            .about-curious-paragraph-duplicate {
                flex-direction: column;
                gap: 2rem;
            }
            
            .about-curious-rectangle {
                display: block !important;
                position: relative !important;
                width: 100% !important;
                height: auto;
                aspect-ratio: 1 / 1;
                border-radius: 1.25rem;
                overflow: hidden;
                order: 2;
                background-image: url('../images/pdx-image.jpg');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                margin-left: 0;
                margin-right: 0;
                margin-top: 2rem;
                right: auto;
            }
            
            .about-curious-paragraphs-container {
                order: 1;
            }
            
            .about-pdx-circle-wrapper {
                display: none;
            }
            
            /* Hide LinkedIn, Quote, and Experience squares on mobile */
            .about-center-box,
            .about-top-right-box,
            .about-bottom-right-box {
                display: none !important;
            }

            .about-curious-paragraph-duplicate {
                justify-content: center;
                align-items: center;
                min-height: auto;
                padding: 0 1.5rem;
                margin-top: 80px !important;
                margin-bottom: 80px !important;
                text-align: center;
            }

            .about-curious-paragraphs-container {
                position: relative;
                left: auto;
                top: auto;
                width: 100%;
                max-width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
            }

            .about-curious-paragraph-scroll {
                position: relative;
                top: auto;
                left: auto;
                width: 100%;
                max-width: 100%;
                margin-left: auto;
                margin-right: auto;
                font-size: 1.3125rem;
                line-height: 1.47;
                text-align: center;
                padding-left: 2rem;
                padding-right: 2rem;
            }
        }

        /* About page tools section */
        .about-tools-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 6rem;
            gap: 1.5rem;
            padding: 0 1.5rem;
        }
        @media (min-width: 768px) {
            .about-tools-section {
                margin-top: 12rem;
                gap: 2rem;
            }
        }
        @media (min-width: 1024px) {
            .about-tools-section {
                margin-top: 18rem;
                padding: 0;
            }
        }

        .about-tools-heading {
            display: flex;
            width: 100%;
            max-width: 60rem;
            height: auto;
            flex-direction: column;
            justify-content: center;
            color: #000;
            text-align: center;
            font-family: Inter, sans-serif;
            font-size: 1.75rem;
            font-style: normal;
            font-weight: 500;
            line-height: 2.25rem;
            text-transform: capitalize;
            margin: 0;
        }
        @media (min-width: 768px) {
            .about-tools-heading {
                font-size: 2.5rem;
                line-height: 3rem;
            }
        }
        @media (min-width: 1024px) {
            .about-tools-heading {
                font-size: 3rem;
                line-height: 3.75rem;
            }
        }

        html.dark .about-tools-heading {
            color: #FFF;
        }

        .about-tools-heading-line {
            display: block;
            white-space: normal;
        }
        @media (min-width: 768px) {
            .about-tools-heading-line {
                white-space: nowrap;
            }
        }

        .about-tools-ai-gradient {
            background: linear-gradient(to right, #f97316, #ec4899);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: Inter, sans-serif;
            font-size: 1.75rem;
            font-style: normal;
            font-weight: 500;
            line-height: 2.25rem;
            text-transform: capitalize;
        }
        @media (min-width: 768px) {
            .about-tools-ai-gradient {
                font-size: 2.5rem;
                line-height: 3rem;
            }
        }
        @media (min-width: 1024px) {
            .about-tools-ai-gradient {
                font-size: 3rem;
                line-height: 3.75rem;
            }
        }

        .about-tools-subheading {
            width: 100%;
            max-width: 29.125rem;
            height: auto;
            color: #959495;
            text-align: center;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.25rem;
            margin: 0;
        }
        @media (min-width: 768px) {
            .about-tools-subheading {
                font-size: 1rem;
            }
        }

        /* About page tools grid */
        .about-tools-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem 2rem;
            margin-top: 2rem;
            max-width: 60rem;
            width: 100%;
        }
        @media (min-width: 640px) {
            .about-tools-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 3rem 3rem;
            }
        }
        @media (min-width: 768px) {
            .about-tools-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 4rem 5rem;
                margin-top: 3rem;
            }
        }

        .about-tool-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .about-tool-logo {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }

        html.dark .about-tool-logo {
            filter: brightness(0) invert(1);
        }

        .about-tool-title {
            color: #000;
            font-family: Inter, sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 500;
            line-height: 1.5rem;
            text-transform: capitalize;
            text-align: center;
        }

        html.dark .about-tool-title {
            color: #959495;
        }

        /* About page contact section wrapper */
        .about-contact-section-wrapper {
            padding-top: 6rem;
            padding-bottom: 6rem;
        }
        
        @media (min-width: 768px) {
            .about-contact-section-wrapper {
                padding-top: 0;
                padding-bottom: 12rem;
            }
        }
        
        @media (min-width: 1024px) {
            .about-contact-section-wrapper {
                padding-top: 0;
                padding-bottom: 150px;
            }
        }
        
        /* About page contact section */
        .about-contact-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 0;
            margin-bottom: 0;
            gap: 1.5rem;
            padding: 0 1.5rem;
        }
        
        @media (max-width: 767px) {
            .about-contact-section {
                gap: 1rem;
            }
            
            .about-ask-me-button {
                margin-top: 0;
            }
        }
        
        @media (min-width: 768px) {
            .about-contact-section {
                gap: 2rem;
            }
        }
        @media (min-width: 1024px) {
            .about-contact-section {
                padding: 0;
            }
        }
        
        /* Reduce spacing before footer on about page */
        body.about-page .mb-80 {
            margin-bottom: 4rem !important;
        }
        
        @media (min-width: 1024px) {
            body.about-page .mb-80 {
                margin-bottom: 6rem !important;
            }
        }

        .about-contact-logo {
            width: 2.8125rem;
            height: 3.22613rem;
            filter: brightness(0);
            margin-bottom: 2rem;
        }

        .about-contact-heading {
            color: #000;
            text-align: center;
            font-family: Inter, sans-serif;
            font-size: 3rem;
            font-style: normal;
            font-weight: 500;
            line-height: 3.75rem;
            text-transform: capitalize;
            margin: 0;
        }
        
        @media (max-width: 767px) {
            .about-contact-heading {
                font-size: 2rem;
            }
        }
        
        @media (min-width: 768px) and (max-width: 1023px) {
            .about-contact-heading {
                font-size: 2.5rem;
                line-height: 3rem;
            }
        }

        html.dark .about-contact-heading {
            color: #FFF;
        }

        .about-contact-text {
            color: #959495;
            text-align: center;
            font-family: Inter, sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.25rem;
            margin: 0;
            max-width: 24rem;
        }

        .about-ask-me-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 9.3125rem;
            height: 3.375rem;
            border-radius: 1.875rem;
            border: 1px solid transparent;
            background: transparent;
            color: #000;
            font-family: Inter, sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            cursor: pointer;
            position: relative;
            padding: 0;
            margin: 0;
            margin-top: 0.5rem;
        }

        .about-ask-me-icon-right {
            width: 1.125rem;
            height: 1.125rem;
            aspect-ratio: 1/1;
            flex-shrink: 0;
            margin-left: -0.25rem;
        }

        .about-ask-me-button::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 1.875rem;
            padding: 1px;
            background: linear-gradient(135deg, #ffffff, #CFCFCF, #ffffff);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
        }

        .about-ask-me-icon-left {
            width: 2rem;
            height: 2rem;
            aspect-ratio: 1/1;
            flex-shrink: 0;
        }

        .about-ask-me-icon-right {
            width: 1.125rem;
            height: 1.125rem;
            aspect-ratio: 1/1;
            flex-shrink: 0;
            margin-left: -0.25rem;
        }

        html.dark .about-ask-me-button {
            color: #FFF;
            border-color: transparent;
        }

        html.dark .about-ask-me-button::before {
            background: linear-gradient(135deg, #0f0f0f, #3a3a3a, #0f0f0f);
        }

        /* Chat Container */
        .about-chat-wrapper {
            position: fixed;
            right: 35px;
            top: 50%;
            transform: translateY(-50%);
            width: 24.125rem;
            height: 25.375rem;
            z-index: 100;
            overflow: visible;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .about-chat-wrapper.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .about-chat-gradient {
            position: absolute;
            top: calc(50% - 20px);
            left: calc(50% - 5px);
            transform: translate(-50%, -50%) rotate(135deg);
            width: 40rem;
            height: 40rem;
            border-radius: 50%;
            z-index: 0;
            filter: blur(29.450000762939453px);
            pointer-events: none;
            overflow: hidden;
            opacity: 1;
            object-fit: cover;
            animation: gradientBreathe 4s ease-in-out infinite;
        }

        @keyframes gradientBreathe {
            0%, 100% {
                opacity: 0.8;
            }
            50% {
                opacity: 1;
            }
        }

        .about-chat-container {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 1.875rem 1.875rem 0 1.875rem;
            border: 1px solid #EDEDED;
            background: #FFF;
            z-index: 1;
            overflow: hidden;
        }

        html.dark .about-chat-container {
            background: #000;
            border-color: #444;
        }

        .about-chat-top-gradient {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 120px;
            background: linear-gradient(to bottom,
                #FFFFFF 0%,
                #FFFFFF 25%,
                rgba(255, 255, 255, 0.98) 35%,
                rgba(255, 255, 255, 0.95) 45%,
                rgba(255, 255, 255, 0.88) 55%,
                rgba(255, 255, 255, 0.75) 65%,
                rgba(255, 255, 255, 0.58) 72%,
                rgba(255, 255, 255, 0.42) 78%,
                rgba(255, 255, 255, 0.28) 83%,
                rgba(255, 255, 255, 0.18) 87%,
                rgba(255, 255, 255, 0.1) 91%,
                rgba(255, 255, 255, 0.05) 94%,
                rgba(255, 255, 255, 0.02) 97%,
                rgba(255, 255, 255, 0) 100%);
            z-index: 0;
            pointer-events: none;
            transition: z-index 0s 0.3s;
        }

        html.dark .about-chat-top-gradient {
            background: linear-gradient(to bottom,
                #000000 0%,
                #000000 25%,
                rgba(0, 0, 0, 0.98) 35%,
                rgba(0, 0, 0, 0.95) 45%,
                rgba(0, 0, 0, 0.88) 55%,
                rgba(0, 0, 0, 0.75) 65%,
                rgba(0, 0, 0, 0.58) 72%,
                rgba(0, 0, 0, 0.42) 78%,
                rgba(0, 0, 0, 0.28) 83%,
                rgba(0, 0, 0, 0.18) 87%,
                rgba(0, 0, 0, 0.1) 91%,
                rgba(0, 0, 0, 0.05) 94%,
                rgba(0, 0, 0, 0.02) 97%,
                rgba(0, 0, 0, 0) 100%);
        }

        .about-chat-top-gradient.active {
            z-index: 6;
            transition: z-index 0s 0s;
        }

        .about-chat-scroll-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: calc(1.25rem + 2.625rem + 20px + 0.0625rem);
            overflow-y: hidden;
            overflow-x: hidden;
            padding: 82px 25px 300px 25px;
            z-index: 5;
        }

        .about-chat-scroll-container.scrollable {
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
        }

        /* Hide scrollbar but keep functionality */
        .about-chat-scroll-container::-webkit-scrollbar {
            display: none;
        }
        
        .about-chat-scroll-container {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .about-chat-scroll-overlay {
            display: none;
        }

        .about-chat-ask-me-icon {
            position: absolute;
            top: 18px;
            left: 25px;
            width: 45px;
            height: 45px;
            aspect-ratio: 52.17/52.17;
            z-index: 8;
        }

        .about-chat-circle {
            position: absolute;
            top: 27px;
            left: 64px;
            width: 1.6875rem;
            height: 1.6875rem;
            z-index: 8;
        }

        html.dark .about-chat-circle circle {
            fill: #000;
            stroke: #333;
        }

        .about-chat-sparkle-icon {
            position: absolute;
            top: calc(27px + 0.84375rem);
            left: calc(64px + 0.84375rem);
            width: 17px;
            height: 17px;
            object-fit: contain;
            transform: translate(-50%, -50%);
            z-index: 8;
            transform-origin: center center;
        }

        .about-chat-wrapper.active .about-chat-sparkle-icon {
            animation: sparkleSpin 2.2s cubic-bezier(0.2, 0, 0, 1) 0.6s 1 forwards;
        }

        @keyframes sparkleSpin {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            40% {
                transform: translate(-50%, -50%) rotate(90deg);
            }
            50% {
                transform: translate(-50%, -50%) rotate(90deg);
            }
            100% {
                transform: translate(-50%, -50%) rotate(180deg);
            }
        }

        /* Header star icon animation - quarter spin on first visit */
        .header-star-icon.animate {
            animation: headerStarSpin 2.2s cubic-bezier(0.2, 0, 0, 1) 0.6s 1 forwards;
        }

        /* =====================================================
           TEMPORARILY HIDDEN: AI STAR ICON IN HEADER
           To restore: Comment out or delete this entire section
           ===================================================== */
        .header-star-icon {
            display: none !important;
        }
        .w-10.h-10.bg-white.border:has(> .header-star-icon),
        .w-10.h-10:has(> .header-star-icon) {
            display: none !important;
        }
        /* Ensure theme toggle container is visible and clickable */
        #main-header .flex.items-center.gap-8,
        #main-header .flex.items-center.gap-4 {
            pointer-events: auto !important;
        }
        /* ===================================================== */

        @keyframes headerStarSpin {
            0% {
                transform: rotate(0deg);
            }
            40% {
                transform: rotate(90deg);
            }
            50% {
                transform: rotate(90deg);
            }
            100% {
                transform: rotate(180deg);
            }
        }

        /* Dark mode: Change ai-star.svg to ai-star-dark-mode.svg */
        /* This is handled via JavaScript in main.js */

        .about-chat-badge {
            position: absolute;
            top: 40.5px;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            padding: 0.5rem 0.75rem;
            justify-content: center;
            align-items: center;
            gap: 0.375rem;
            border-radius: 1.875rem;
            border: 1px dashed #A9A9A9;
            color: #000;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            background: transparent;
            z-index: 8;
        }

        html.dark .about-chat-badge {
            color: #FFF;
        }

        .about-chat-badge-bold {
            font-weight: 500;
        }

        .about-chat-badge-icon {
            width: 1rem;
            height: 1rem;
            border-radius: 0.3125rem;
            background: #000;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        html.dark .about-chat-badge-icon {
            background: #FFF;
        }

        .about-chat-badge-logo {
            width: 0.5625rem;
            height: 0.625rem;
            filter: brightness(0) invert(1);
        }

        html.dark .about-chat-badge-logo {
            filter: none;
        }

        .about-chat-get-started {
            margin-top: 0;
            margin-bottom: 20px;
            background: linear-gradient(to right, #f97316, #ec4899);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

        .about-chat-question {
            display: flex;
            padding: 0.5rem 0.75rem;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            border-radius: 0.9375rem;
            background: #F3F3F3;
            color: #585858;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s ease;
            margin-bottom: 12px;
        }

        .about-chat-question:hover {
            background: #E8E8E8;
        }

        html.dark .about-chat-question {
            background: #222;
            color: #FFF;
        }

        html.dark .about-chat-question:hover {
            background: #333;
        }

        .about-chat-question-second {
            margin-bottom: 0;
        }

        .about-chat-message-group {
            display: none;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.375rem;
            opacity: 0;
            margin-bottom: 15px;
        }

        .about-chat-message-group.fade-in {
            display: flex;
            animation: fadeIn 0.3s ease-in-out forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .about-chat-message-label {
            color: #585858;
            font-family: Inter, sans-serif;
            font-size: 12px;
            font-weight: 400;
        }

        .about-chat-message-bubble {
            border-radius: 0.5rem 0.5rem 0.5rem 0;
            background: #000;
            color: #FFF;
            padding: 0.5rem 0.75rem;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-weight: 400;
            max-width: 18rem;
        }

        .about-chat-loading {
            display: none;
            flex-direction: row;
            width: 2.25rem;
            padding: 0.5rem 0.625rem;
            justify-content: flex-end;
            align-items: flex-end;
            gap: 0.1875rem;
            border-radius: 0.5rem;
            border: 1px solid #EDEDED;
            background: #FFF;
            opacity: 0;
            margin-left: auto;
            margin-bottom: 0;
        }

        .about-chat-loading.fade-in {
            display: flex;
            animation: fadeIn 0.3s ease-in-out 0.2s forwards;
        }

        .about-chat-loading-icon {
            width: 120%;
            height: auto;
            display: block;
        }

        .about-chat-response-group {
            display: none;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.375rem;
            opacity: 0;
            margin-left: auto;
        }

        .about-chat-response-group.fade-in {
            display: flex;
            animation: fadeIn 0.3s ease-in-out forwards;
        }

        .about-chat-response-label {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            color: #585858;
            font-family: Inter, sans-serif;
            font-size: 0.75rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .about-chat-response-avatar {
            width: 0.875rem;
            height: 0.875rem;
            aspect-ratio: 1/1;
            object-fit: cover;
        }

        .about-chat-response-bubble {
            padding: 0.5rem 0.5rem 0.5rem 0.75rem;
            border-radius: 0.5rem 0.5rem 0 0.5rem;
            border: 1px solid #EDEDED;
            background: #FFF;
            color: #000;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-weight: 400;
            width: 316px !important;
            max-width: none !important;
            text-align: left;
            word-wrap: break-word;
            white-space: normal;
        }

        .about-chat-loading-icon .loading-rect-1,
        .about-chat-loading-icon .loading-rect-3 {
            animation: loadingRectExpand 1.2s ease-in-out infinite;
            transform-origin: center center;
            transform-box: fill-box;
        }

        .about-chat-loading-icon .loading-rect-2 {
            animation: loadingRectShrink 1.2s ease-in-out infinite;
            transform-origin: center center;
            transform-box: fill-box;
        }

        @keyframes loadingRectExpand {
            0%, 100% {
                transform: scaleY(1);
            }
            50% {
                transform: scaleY(1.545);
            }
        }

        @keyframes loadingRectShrink {
            0%, 100% {
                transform: scaleY(1);
            }
            50% {
                transform: scaleY(0.647);
            }
        }

        .about-chat-close-btn {
            position: absolute;
            top: 21px;
            right: 21px;
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            z-index: 8;
        }

        .about-chat-close-icon {
            width: 1rem;
            height: 1rem;
            aspect-ratio: 1/1;
            display: block;
        }

        /* Light mode: X is black, corner rectangles match mobile menu */
        .about-chat-close-icon .chat-x-path {
            fill: #000000;
            transition: fill 0.3s ease;
        }

        .about-chat-close-icon .chat-corner-rect {
            fill: #9CA3AF;
            transition: fill 0.3s ease;
        }

        /* Dark mode: X is white, corner rectangles match mobile menu */
        html.dark .about-chat-close-icon .chat-x-path {
            fill: #999;
            transition: fill 0.3s ease;
        }

        html.dark .about-chat-close-icon .chat-corner-rect {
            fill: #999;
            transition: fill 0.3s ease;
        }

        /* Hover: X and rectangles turn black */
        .about-chat-close-btn:hover .about-chat-close-icon .chat-x-path,
        .about-chat-close-btn:hover .about-chat-close-icon .chat-corner-rect {
            fill: #000000;
        }

        html.dark .about-chat-close-btn:hover .about-chat-close-icon .chat-x-path,
        html.dark .about-chat-close-btn:hover .about-chat-close-icon .chat-corner-rect {
            fill: #ffffff;
        }

        .about-chat-divider {
            position: absolute;
            bottom: calc(1.25rem + 2.625rem + 20px);
            left: 50%;
            transform: translateX(-50%);
            width: 21.25rem;
            height: 0.0625rem;
            background: #EDEDED;
            z-index: 9;
        }

        html.dark .about-chat-divider {
            background: #222;
        }

        .about-chat-input-wrapper {
            position: absolute;
            bottom: 1.25rem;
            left: 50%;
            transform: translateX(-50%);
            width: 21.25rem;
            z-index: 9;
        }

        .about-chat-input {
            display: flex;
            width: 100%;
            padding: 0.875rem 11.625rem 0.875rem 1.25rem;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            border-radius: 1.875rem;
            border: 1px solid #ECECEC;
            background: #FFF;
            color: #959495;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            outline: none;
        }

        .about-chat-input::placeholder {
            color: #959495;
            font-family: Inter, sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        html.dark .about-chat-input {
            background: #222;
            color: #FFF;
            border-color: #333;
        }

        html.dark .about-chat-input::placeholder {
            color: #999;
        }

        .about-chat-send-icon {
            position: absolute;
            right: calc(1.1875rem - 2px);
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            aspect-ratio: 1/1;
            z-index: 10;
        }

        html.dark .about-chat-send-icon {
            filter: brightness(0) invert(1);
        }

        .about-contact-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #000;
            text-align: center;
            font-family: Inter, sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 600;
            line-height: 1.25rem;
            text-decoration: none;
        }

        html.dark .about-contact-link {
            color: #FFF;
        }

        .about-contact-chevron {
            width: 16px;
            height: 16px;
        }

        html.dark .about-contact-chevron {
            fill: #FFF;
        }

        /* About page top section fade-in animation */
        @keyframes aboutFadeIn {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .about-top-section-fade {
            animation: aboutFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
        }

        /* Projects page top section fade-in animation */
        @keyframes projectsFadeIn {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .projects-top-section-fade {
            animation: projectsFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
        }

        .pause-button-container {
            position: absolute;
            bottom: 40px;
            left: 40px;
        }

        .logo-grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border: 1px solid #C8C8C8;
        }

        .logo-grid-cell {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            border-right: 1px solid #C8C8C8;
            border-bottom: 1px solid #C8C8C8;
        }

        .logo-grid-cell:nth-child(4n) {
            border-right: none;
        }

        .logo-grid-cell:nth-child(n+5) {
            border-bottom: none;
        }

        /* Mobile-specific styles for consistent borders */
        @media (max-width: 767px) {
            .logo-grid-container {
                display: flex;
                flex-direction: column;
                border: 1px solid #C8C8C8;
            }
            
            .logo-grid-cell {
                border-right: none;
                border-bottom: 1px solid #C8C8C8;
            }
            
            /* Override the grid-based rules that remove borders from bottom 4 logos */
            .logo-grid-cell:nth-child(n+5) {
                border-bottom: 1px solid #C8C8C8;
            }
            
            .logo-grid-cell:last-child {
                border-bottom: none;
            }
        }

        #projects-carousel-wrapper, #carousel-controls {
            display: none;
        }

        .gradient-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('../images/gradient.svg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: -1;
            opacity: 0.1; /* Adjust opacity as needed */
        }

        .text-gradient {
            background-image: linear-gradient(to right, var(--tw-gradient-stops));
            --tw-gradient-from: #f97316;
            --tw-gradient-to: #ec4899;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        #projects-carousel {
            /* Mobile first padding */
            padding-left: 4rem; /* Matches px-16 */
        }
        @media (min-width: 640px) { /* sm */
            #projects-carousel {
                padding-left: calc((100vw - 640px) / 2 + 4rem);
            }
        }
        @media (min-width: 768px) { /* md */
            #projects-carousel {
                padding-left: calc((100vw - 768px) / 2 + 4rem);
            }
        }
        @media (min-width: 1024px) { /* lg */
            #projects-carousel {
                padding-left: calc((100vw - 1024px) / 2 + 8rem); /* Matches lg:px-32 */
            }
        }
        @media (min-width: 1280px) { /* xl */
            #projects-carousel {
                padding-left: calc((100vw - 1280px) / 2 + 8rem);
            }
        }
        @media (min-width: 1536px) { /* 2xl */
            #projects-carousel {
                padding-left: calc((100vw - 1536px) / 2 + 8rem);
            }
        }

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

        .animate-float {
          animation: float 2.5s ease-in-out infinite;
        }

        .fade-in-section {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }

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

.gradient-button {
    display: flex;
    height: 51px;
    padding: 14px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 30px;
    border: 2px solid #C8C8C8;
    background: linear-gradient(84deg, #1A1A1A -11.01%, #2E2E2E 74.96%);
    color: #FFF;
    font-family: "Articulat CF", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    transition: all 0.3s ease-in-out;
}

.gradient-button:hover {
    border-color: #FFF;
    background: linear-gradient(90deg, #1A1A1A -11.01%, #202020 74.96%);
}

.gradient-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
} 

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

#nav-logo-container a:hover img,
.footer-logo-new:hover {
    animation: spin 2s linear infinite;
}

.hero-link {
    color: #373737;
    text-decoration: none;
    border-bottom: 1px solid #a9a9a9;
    padding-bottom: 2px;
    font-weight: 500;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.hero-link:hover {
    color: #000;
    border-bottom-color: #000;
}

/* Theme Toggle */
.theme-toggle-container {
    display: flex !important;
    align-items: center;
    padding: 1px;
    background-color: #e5e7eb;
    border-radius: 8px;
    position: relative;
    z-index: 1000 !important;
    pointer-events: auto !important;
    border: 1px solid #d1d5db;
    visibility: visible !important;
    opacity: 1 !important;
}


html.dark .theme-toggle-container {
    background-color: #262626;
    border-color: #404040;
}

.theme-toggle-btn {
    padding: 2px;
    border: none;
    background-color: transparent;
    border-radius: 6px;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 1001 !important;
    color: #6b7280;
    line-height: 0;
    transition: all 0.2s ease-in-out;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure buttons are clickable on home page */
html.dark .theme-toggle-btn {
    color: #a3a3a3;
}

.theme-toggle-btn.active {
    background-color: white !important;
    color: #111827 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

html.dark .theme-toggle-btn.active {
    background-color: #404040 !important;
    color: #f5f5f5 !important;
}

/* Moon icon (dark theme button) hover - black when not active */
.theme-toggle-btn[data-theme="dark"]:not(.active):hover {
    color: #000 !important;
}

/* No hover effect when moon icon is active (clicked) */
.theme-toggle-btn[data-theme="dark"].active:hover {
    color: inherit;
}

/* Light theme button hover */
.theme-toggle-btn[data-theme="light"]:not(.active):hover {
    color: #f5f5f5;
}

/* Page Specific Styles */
.dots-background {
    opacity: 0.6;
}

/* Project/article pages - reduce dots height to eliminate half-dots at the bottom */
body.project-page .dots-background {
    height: 88px;
}

/* Test Transactions page - remove duplicate top offset */
body.test-transactions-page .dots-background {
    top: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.project-page .dots-background {
        height: 96px !important;
    }
    body.test-transactions-page .dots-background {
        top: 32px !important;
    }
}

@media (max-width: 767px) {
    body.project-page .dots-background {
        height: 88px;
    }
    body.test-transactions-page .dots-background {
        top: 15px !important;
    }
}

/* Center Test Transactions content vertically within the section */
/* Tablet sizes: 768px to 1023px - match desktop centering approach from dots to slider */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Show the slider section on tablet sizes */
    body.test-transactions-page #page-content > section:has(#image-carousel-track) {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Make slider images slightly smaller on tablet with smooth transition to mobile */
    /* At 768px: 85vw (matches mobile), at 1023px: 87vw (slightly smaller than 90vw) */
    body.test-transactions-page #image-carousel-track > div[class*="flex-shrink-0"] {
        width: calc(85vw + (87vw - 85vw) * (100vw - 768px) / (1023px - 768px)) !important;
        border-radius: 0.5rem !important;
    }
    
    /* Apply border-radius to slider images on all sizes */
    body.test-transactions-page #image-carousel-track > div[class*="flex-shrink-0"] img,
    body.test-transactions-page #mobile-carousel-track > div[class*="flex-shrink-0"] img {
        border-radius: 0.5rem !important;
    }
    
    /* Apply border-radius to mobile carousel containers */
    body.test-transactions-page #mobile-carousel-track > div[class*="flex-shrink-0"] {
        border-radius: 0.5rem !important;
    }
    
    /* Create container that spans from bottom of dots to top of slider */
    body.test-transactions-page #page-content > section:first-child {
        position: relative !important;
        min-height: 14vh !important; /* Reduced height for tablet */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Keep the relative div in normal flow */
    body.test-transactions-page #page-content > section:first-child > div.relative {
        position: relative !important;
        width: 100% !important;
    }
    
    /* Hide the entire left div that contains h1 in normal flow */
    body.test-transactions-page #page-content > section:first-child > div.relative > div > div:first-child {
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Position only the h1 absolutely, aligned to the left edge of the section */
    body.test-transactions-page #page-content > section:first-child h1 {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important; /* Align to the left edge of the section */
        right: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        text-align: left !important;
    }
    
    /* Hide the subtitle from the first section on tablet */
    body.test-transactions-page #page-content > section:first-child p.text-lg.max-w-lg,
    body.test-transactions-page #page-content > section:first-child p[class*="text-lg"][class*="max-w-lg"] {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Position subtitle after slider section using ::after on the slider section */
    body.test-transactions-page #page-content > section:has(#image-carousel-track) {
        position: relative !important;
    }
    
    
    body.test-transactions-page #page-content > section:has(#image-carousel-track)::after {
        content: "Building a scalable Test Transaction experience to power Visa's evolving compliance requirements." !important;
        display: block !important;
        font-size: 1.125rem !important; /* text-lg = 18px */
        line-height: 1.75rem !important;
        max-width: 48rem !important; /* Larger content width for tablet - 768px */
        color: #6B7280 !important; /* text-gray-500 */
        margin-top: 2rem !important; /* Equal spacing on top */
        margin-bottom: 2rem !important; /* Equal spacing on bottom */
        padding-left: 4rem !important; /* md:px-16 */
        padding-right: 4rem !important;
        box-sizing: border-box !important;
        font-weight: 400 !important;
        width: 100% !important;
    }
    
    html.dark body.test-transactions-page #page-content > section:has(#image-carousel-track)::after {
        color: #A3A3A3 !important; /* dark:text-neutral-400 */
    }
    
    /* Hide arrows on tablet sizes */
    body.test-transactions-page #page-content > section:has(#image-carousel-track) > div:has(#carousel-prev-btn) {
        display: none !important;
    }
    
    /* Position dots above subtitle text, right-aligned with content width */
    body.test-transactions-page #page-content > section:has(#image-carousel-track) > div:has(.carousel-dot[data-index="0"]) {
        position: relative !important;
        display: flex !important;
        justify-content: flex-end !important; /* Align to right */
        gap: 0.5rem !important; /* gap-2 */
        margin-top: 1.5rem !important; /* mt-6 - spacing above dots */
        margin-bottom: 0 !important;
        padding-right: 4rem !important; /* md:px-16 = 4rem - align with content width */
        padding-left: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Remove margin-top from section with mt-10 lg:mt-20 classes on tablet */
    body.test-transactions-page #page-content > section.px-6.md\:px-16.lg\:px-32.mt-10.lg\:mt-20,
    body.test-transactions-page #page-content > section[class*="px-6"][class*="md:px-16"][class*="lg:px-32"][class*="mt-10"][class*="lg:mt-20"],
    body.test-transactions-page #page-content > section.mt-10.lg\:mt-20,
    body.test-transactions-page section.px-6.md\:px-16.lg\:px-32.mt-10.lg\:mt-20,
    body.test-transactions-page section[class*="px-6"][class*="md:px-16"][class*="lg:px-32"][class*="mt-10"][class*="lg:mt-20"],
    body.test-transactions-page section.mt-10.lg\:mt-20 {
        margin-top: 0 !important;
    }
}

/* Mobile sizes: align dots to right side of content width */
@media (max-width: 767px) {
    /* Apply border-radius to mobile carousel images and containers */
    body.test-transactions-page #mobile-carousel-track > div[class*="flex-shrink-0"] {
        border-radius: 0.5rem !important;
    }
    
    body.test-transactions-page #mobile-carousel-track > div[class*="flex-shrink-0"] img {
        border-radius: 0.5rem !important;
    }
    
    /* Align mobile carousel dots to right side of content width */
    body.test-transactions-page .lg\:hidden > div:has(.carousel-dot[data-index="0"]) {
        justify-content: flex-end !important;
        padding-right: 1.5rem !important; /* px-6 = 1.5rem */
        padding-left: 0 !important;
    }
    
    body.test-transactions-page #page-content > section:has(#image-carousel-track) {
        position: relative !important;
        padding-bottom: 0 !important;
    }
    
    /* Keep the flex container in normal flow */
    body.test-transactions-page #page-content > section:first-child > div.relative > div {
        position: relative !important;
        width: 100% !important;
    }
    
    /* Remove padding-bottom from section with px-6 md:px-16 lg:px-32 classes */
    body.test-transactions-page #page-content > section.px-6.md\:px-16.lg\:px-32,
    body.test-transactions-page #page-content > section[class*="px-6"][class*="md:px-16"][class*="lg:px-32"] {
        padding-bottom: 0 !important;
    }
    
    body.test-transactions-page #page-content > section:first-child > div {
        width: 100% !important;
    }
    
    body.test-transactions-page #page-content > section:first-child > div {
        width: 100% !important;
    }
    
    /* Set h1 font size to 36px (matching 1024px-1175px) - override Tailwind classes */
    body.test-transactions-page #page-content > section:first-child h1.text-3xl,
    body.test-transactions-page #page-content > section:first-child h1[class*="text-3xl"],
    body.test-transactions-page #page-content > section:first-child h1[class*="md:text-"],
    body.test-transactions-page #page-content > section:first-child h1 {
        font-size: 36px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }
    
    /* Keep the same content width from 1175px - maintain width at 1175px level */
    /* Target the specific paragraph element to remove margin-bottom completely */
    body.test-transactions-page section:first-child > div > div[class*="flex-col"] > p.text-lg.max-w-lg.text-gray-500.dark\:text-neutral-400.mb-0.lg\:mb-6,
    body.test-transactions-page section:first-child > div > div[class*="flex-col"][class*="justify-start"] > p[class*="text-lg"][class*="max-w-lg"],
    body.test-transactions-page section:first-child p.text-lg.max-w-lg.text-gray-500,
    body.test-transactions-page section:first-child p[class*="text-lg"][class*="max-w-lg"] {
        max-width: 512px !important;
        width: 512px !important;
        padding-left: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    
    /* Vertically center the text in its container */
    body.test-transactions-page section:first-child div[class*="flex"][class*="flex-col"][class*="justify-start"][class*="items-start"] {
        justify-content: center !important;
        align-items: flex-end !important;
        height: 100% !important;
        display: flex !important;
    }
    
    /* Ensure the parent container has height for centering to work */
    body.test-transactions-page section:first-child > div > div:has(p.text-lg) {
        height: 100% !important;
    }
    
    /* Ensure parent flex container has height for centering */
    body.test-transactions-page section:first-child > div.flex.flex-col.lg\:flex-row.justify-between.items-start.gap-16.lg\:gap-0,
    body.test-transactions-page section:first-child > div[class*="flex"][class*="flex-col"][class*="lg:flex-row"] {
        height: 100% !important;
    }
}

/* Desktop sizes: 1024px and above */
@media (min-width: 1024px) {
    body.test-transactions-page #page-content > section:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 25vh;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
    }
    
    body.test-transactions-page #page-content > section:first-child > div {
        width: 100%;
    }
    
    /* Ensure h1 title stays on one line and is vertically centered */
    body.test-transactions-page #page-content > section:first-child h1 {
        white-space: nowrap;
        line-height: 1;
    }
    
    /* Center items vertically in the flex-row layout */
    body.test-transactions-page .lg\:flex-row {
        align-items: center;
    }
    
    /* Adjust arrow positioning for visual centering */
    body.test-transactions-page #carousel-prev-btn img {
        transform: translateX(-1px);
    }
    
    body.test-transactions-page #carousel-next-btn img {
        transform: translateX(1px) rotate(180deg);
    }
    
    /* Style arrow circles to match title box border - no fill, border only */
    /* Info boxes use border class which is typically 1px, matching it exactly */
    body.test-transactions-page .carousel-prev-btn-desktop,
    body.test-transactions-page .carousel-next-btn-desktop {
        background-color: transparent !important;
        border-width: 1px !important;
        border-style: solid !important;
        border-color: #CDCDCD !important;
    }
    
    body.test-transactions-page .carousel-prev-btn-desktop:hover,
    body.test-transactions-page .carousel-next-btn-desktop:hover {
        background-color: transparent !important;
        border-color: #CDCDCD !important;
    }
    
    /* Dark mode arrow circles */
    html.dark body.test-transactions-page .carousel-prev-btn-desktop,
    html.dark body.test-transactions-page .carousel-next-btn-desktop {
        border-color: #444 !important;
    }
    
    html.dark body.test-transactions-page .carousel-prev-btn-desktop:hover,
    html.dark body.test-transactions-page .carousel-next-btn-desktop:hover {
        border-color: #444 !important;
    }
    
    /* Position arrows on their own line beneath the slider, within content width */
    body.test-transactions-page #page-content > section:has(#image-carousel-track) {
        overflow-x: hidden !important;
        overflow-y: visible;
    }
    
    body.test-transactions-page #page-content > section:has(#image-carousel-track) > div:has(#carousel-prev-btn) {
        position: static;
        max-width: 1664px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        display: flex;
        justify-content: flex-end;
        margin-top: 1.5rem;
        box-sizing: border-box;
    }
    
    /* Match section padding: md:px-16 (4rem) and lg:px-32 (8rem) */
    @media (min-width: 768px) {
        body.test-transactions-page #page-content > section:has(#image-carousel-track) > div:has(#carousel-prev-btn) {
            padding-left: 4rem;
            padding-right: 4rem;
        }
    }
    
    
    /* On tablet: extend info boxes to full content width (above 950px) */
    @media (min-width: 951px) and (max-width: 1023px) {
        body.test-transactions-page #page-content > section:has(.info-boxes) {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 4rem;
            padding-right: 4rem;
            width: 100%;
            box-sizing: border-box;
            overflow-x: hidden !important;
        }
        
        /* Ensure container takes full width */
        body.test-transactions-page #page-content > section:has(.info-boxes) > div {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
            display: block !important;
            overflow-x: hidden !important;
        }
        
        /* Make info boxes expand to full width of their container */
        body.test-transactions-page .info-boxes {
            width: 100% !important;
            max-width: 100% !important;
            flex: none !important;
            min-width: 100% !important;
            box-sizing: border-box;
        }
        
        /* Hide arrows on tablet so info boxes can take full width */
        body.test-transactions-page .carousel-arrows-desktop {
            display: none !important;
        }
    }
    
    
    @media (min-width: 1024px) {
        /* On desktop: put info boxes and arrows on same line */
        body.test-transactions-page #page-content > section:has(.info-boxes) {
            max-width: 1664px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 8rem;
            padding-right: 8rem;
            position: relative;
        }
        
        /* Container already has flex from HTML */
        body.test-transactions-page #page-content > section:has(.info-boxes) > div {
            align-items: center;
        }
        
        /* Hide original arrows in slider section on desktop */
        body.test-transactions-page #page-content > section:has(#image-carousel-track) > div:has(#carousel-prev-btn) {
            display: none !important;
        }
        
        /* Allow info boxes to expand wider - leave 30px gap from arrows */
        body.test-transactions-page .info-boxes {
            flex: 1 1 auto;
            min-width: 0;
            margin-right: 30px;
        }
        
        @media (max-width: 1664px) {
            body.test-transactions-page #page-content > section:has(#image-carousel-track) > div:has(#carousel-prev-btn) {
                right: 8rem;
            }
        }
    }
}

html.dark .dots-background {
    opacity: 0.2;
}

html.dark body {
    background: #000;
}

html.dark body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 50vw;
    height: 50vh;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1000;
}

html.dark #page-wrapper {
    background: #000;
}

/* Dark Mode Overrides */
html.dark .new-footer {
    background-color: #171717;
}

html.dark .footer-title,
html.dark .footer-nav-text,
html.dark .footer-projects-link {
    color: #f5f5f5;
}

html.dark .footer-subtitle,
html.dark .footer-copyright,
html.dark .footer-legal-links a {
    color: #a3a3a3;
}

html.dark .footer-nav-number {
    color: #737373;
}

html.dark .footer-nav-link {
    border-bottom-color: #262626;
}

html.dark .footer-nav-link:hover .footer-nav-text::after {
    background-color: #f5f5f5;
}

html.dark .footer-email-input {
    background-color: #262626;
    border-color: #404040;
    color: #f5f5f5;
}

html.dark .footer-send-button {
    background: #404040;
    color: #f5f5f5;
}

html.dark .footer-socials img {
    filter: brightness(0) invert(1);
}

html.dark #menu-toggle:not(.is-active) .hamburger-lines .line {
    background: #fff;
}

html.dark #nav-logo-container img,
html.dark .footer-logo-new {
    filter: brightness(0) invert(1);
}

html.dark .hero-link {
    color: #d4d4d4;
    border-bottom-color: #737373;
}

html.dark .hero-link:hover {
    color: #fff;
    border-bottom-color: #fff;
} 

.project-info-row {
    display: flex;
    justify-content: space-between;
    padding: 60px 1.5rem;
    gap: 2rem;
    flex-direction: column;
}
@media (min-width: 768px) {
    .project-info-row {
        padding: 60px 4rem;
        flex-direction: row;
    }
}
@media (min-width: 1024px) {
    .project-info-row {
        padding: 60px 8rem;
    }
}
.project-info-left {
    flex-basis: 100%;
}
@media (min-width: 768px) {
    .project-info-left {
        flex-basis: 60%;
    }
}
.project-label {
    margin-bottom: 2rem;
}
.project-logo {
    height: 24px;
}
.project-info-right {
    flex-basis: 100%;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    height: fit-content;
}
@media (min-width: 768px) {
    .project-info-right {
        flex-basis: 35%;
        padding: 2rem;
    }
}
.info-block {
    margin-bottom: 1.5rem;
}
.info-label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
}
.info-value {
    display: block;
    font-size: 0.875rem;
    color: #6B7280;
} 

/* Mobile Carousel Styles */
.carousel-dot {
    transition: all 0.3s ease;
    cursor: pointer;
}

.carousel-dot.active {
    background-color: #6B7280;
}

html.dark .carousel-dot.active {
    background-color: #9CA3AF;
}

@media (max-width: 767px) {
    .theme-toggle-container {
        transform: scale(1.2);
    }
    #menu-toggle {
        transform: scale(1.2);
    }
}

/* Tablet-specific navigation positioning */
@media (min-width: 768px) and (max-width: 1023px) {
    #main-header {
        margin-top: 2rem !important; /* Match desktop md:mt-8 (32px) */
    }
    
    /* Center title better between dots and carousel on tablet */
    .content-body h1 {
        margin-top: 0 !important; /* Reset to default */
    }
    
    /* Target only the specific title on Project-Page-One.html */
    body.project-page .content-body h1 {
        margin-top: -3rem !important; /* Move only the title up to center it */
    }
}

footer.bg-black {
    background-color: #141414; /* Dark base */
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    margin-top: -3rem; /* Match new radius */
    z-index: 0;
    /* overflow: hidden; <- Temporarily removed to allow sticky nav */
}

footer.bg-black::before,
footer.bg-black::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    animation: pulseLight 3s infinite ease-in-out;
}

footer.bg-black::before {
    background-image: radial-gradient(ellipse at 15% 25%, rgba(65, 65, 65, 0.7) 0%, transparent 50%);
}

footer.bg-black::after {
    background-image: radial-gradient(ellipse at 85% 75%, rgba(55, 55, 55, 0.5) 0%, transparent 40%);
    animation-delay: -1.5s; /* Offset the animation */
}

/* The content wrapper inside the footer */
footer.bg-black > div {
    position: relative;
    z-index: 1;
}

@keyframes pulseLight {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

.footer-dots-background {
    position: absolute;
    bottom: -20px; /* Move the pattern lower */
    left: 0;
    right: 0;
    height: 100px;
    background-image: radial-gradient(circle, #888 1px, transparent 1px);
    background-size: 8px 8px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0; /* Sit with the animation, behind content */
    opacity: 0.2; /* Making it more subtle for the footer */
}

html.dark .footer-dots-background {
    opacity: 0.05;
}
  
/* Ensure mobile carousel is positioned correctly */
@media (max-width: 1023px) {
    .lg\:hidden {
        order: 2;
    }
    html, body {
        overflow-x: hidden;
    }
} 

        html {
            scroll-behavior: smooth;
        }

        /* Hide scroll indicator - hide the moving box but keep the line for layout */
        #mouse-scroll-icon,
        #mouse-scroll-line,
        .mouse-scroll-icon,
        .mouse-scroll-line,
        .top-line-box {
            display: none !important;
        }

#about-section, #vision-section, #success-section, #brief-section, #gallery-section, #prototype-section {
    scroll-margin-top: 4rem; /* 64px */
}

.grey-box-section {
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: 0;
    position: relative;
}

.grey-box {
    width: 100%;
    height: 700px;
    background-color: #E5E5E5;
    border-radius: 0 0 3.125rem 3.125rem;
    margin: 0;
    padding: 0;
}

html.dark .grey-box {
    background-color: #2a2a2a;
}

/* Latest page - ensure consistent spacing between date and title across all breakpoints */
@media (min-width: 768px) and (max-width: 1023px) {
    body.project-page #page-content section:first-child h1 {
        margin-top: 0 !important;
    }
    
    /* Override for test-transactions page - remove margin-bottom */
    body.test-transactions-page #page-content section:first-child p {
        margin-bottom: 0 !important;
    }
}


.portfolio-projects-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.portfolio-gradient-box-link {
    order: 999;
    transition: order 0.4s ease;
}

/* =====================================================
   PROJECT PAGE SPECIFIC STYLES
   ===================================================== */

/* Icon animations */
.icon-spin {
    animation: spinIn 1.5s ease-out 0.5s forwards;
    transform-origin: 36.5px 36.5px;
}

.icon-shine {
    animation: shineEffect 1.2s ease-out 0.3s both;
}

@keyframes spinIn {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes shineEffect {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.3;
        transform: scale(1);
    }
}

/* Floating button gradients */
.floating-gradient-1 {
    background-image: radial-gradient(ellipse at 15% 25%, rgba(34, 211, 238, 0.9) 0%, rgba(236, 72, 153, 0.7) 30%, transparent 70%);
    animation: floatingPulse 4s infinite ease-in-out;
    filter: blur(1px);
}

.floating-gradient-2 {
    background-image: radial-gradient(ellipse at 85% 75%, rgba(255, 255, 255, 1) 0%, rgba(168, 85, 247, 0.4) 40%, transparent 60%);
    animation: floatingPulse 4s infinite ease-in-out -2s;
    filter: blur(1.5px);
}

@keyframes floatingPulse {
    0% { opacity: 0.2; }
    25% { opacity: 0.6; }
    50% { opacity: 0.8; }
    75% { opacity: 0.4; }
    100% { opacity: 0.2; }
}

/* Shape shifting animation */
#floating-footer button {
    animation: shapeShift 6s infinite ease-in-out;
    border-radius: 50%;
}

@keyframes shapeShift {
    0% { border-radius: 50%; }
    33% { border-radius: 49% 51% 51% 49%; }
    66% { border-radius: 51% 49% 49% 51%; }
    100% { border-radius: 50%; }
}

#floating-footer button > div {
    border-radius: 50%;
}

/* Hover effects */
.circle-bg {
    transition: fill var(--transition-base);
}

.circle-gradient {
    transition: fill var(--transition-base);
}

button:hover .circle-bg {
    fill: #1a1a1a;
}

button:hover .circle-gradient {
    fill: url(#paint0_linear_761_155_hover);
}

/* =====================================================
   BUILD-SAME-AS PAGE RESPONSIVE STYLES
   ===================================================== */

.hero-text-row {
    display: flex;
    flex-direction: column;
    padding: 0 1.5rem;
    gap: 2rem;
}
@media (min-width: 768px) {
    .hero-text-row {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 4rem;
    }
}
@media (min-width: 1024px) {
    .hero-text-row {
        padding: 0 8rem;
    }
}

.hero-title h1 {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.1;
}
@media (min-width: 768px) {
    .hero-title h1 {
        font-size: 4rem;
    }
}
@media (min-width: 1024px) {
    .hero-title h1 {
        font-size: 5rem;
    }
}

.hero-desc {
    max-width: 100%;
}
@media (min-width: 768px) {
    .hero-desc {
        max-width: 400px;
    }
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    font-size: 0.875rem;
    transition: background-color 0.2s ease;
    min-height: 44px;
}
.hero-btn:hover {
    background-color: #f5f5f5;
}
html.dark .hero-btn {
    border-color: #444;
}
html.dark .hero-btn:hover {
    background-color: #222;
}

.viewport-peek {
    display: flex;
    gap: 1rem;
    padding: 2rem 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
    .viewport-peek {
        padding: 2rem 4rem;
        gap: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .viewport-peek {
        padding: 2rem 8rem;
    }
}

.peek-img {
    flex-shrink: 0;
    width: 85vw;
    aspect-ratio: 16/9;
    background-color: #f5f5f5;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    .peek-img {
        width: 70vw;
    }
}
@media (min-width: 1024px) {
    .peek-img {
        width: calc(100% - 200px);
    }
}
html.dark .peek-img {
    background-color: #262626;
}

.peek-img-half {
    width: 200px;
}
@media (max-width: 767px) {
    .peek-img-half {
        width: 85vw;
    }
}

.bottom-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem 1.5rem;
}
@media (min-width: 768px) {
    .bottom-row {
        flex-direction: row;
        padding: 3rem 4rem;
    }
}
@media (min-width: 1024px) {
    .bottom-row {
        padding: 3rem 8rem;
    }
}

.bottom-col {
    flex: 1;
}
.bottom-col h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.bottom-col p {
    color: #6B7280;
}
html.dark .bottom-col p {
    color: #9CA3AF;
}

.brief-solution-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem 1.5rem;
}
@media (min-width: 768px) {
    .brief-solution-row {
        flex-direction: row;
        padding: 3rem 4rem;
    }
}
@media (min-width: 1024px) {
    .brief-solution-row {
        padding: 3rem 8rem;
    }
}

.brief-block, .solution-block {
    flex: 1;
}

.brief-title {
    font-size: 1.75rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.brief-desc {
    color: #6B7280;
}
html.dark .brief-desc {
    color: #9CA3AF;
}

.solution-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.solution-desc {
    color: #6B7280;
}
html.dark .solution-desc {
    color: #9CA3AF;
}

.content-image-row {
    padding: 0 1.5rem;
}
@media (min-width: 768px) {
    .content-image-row {
        padding: 0 4rem;
    }
}
@media (min-width: 1024px) {
    .content-image-row {
        padding: 0 8rem;
    }
}

.content-image-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #f5f5f5;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
html.dark .content-image-placeholder {
    background-color: #262626;
}

.content-image-row-bottom {
    margin-bottom: 3rem;
}

.dark-section {
    background-color: #1a1a1a;
    color: #fff;
    padding: 3rem 1.5rem;
}
@media (min-width: 768px) {
    .dark-section {
        padding: 4rem 4rem;
    }
}
@media (min-width: 1024px) {
    .dark-section {
        padding: 5rem 8rem;
    }
}

.dark-section-inner {
    max-width: 800px;
}

.dark-section-inner h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    margin-top: 2rem;
}
.dark-section-inner h2:first-child {
    margin-top: 0;
}

.dark-section-inner p {
    color: #9CA3AF;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.img-center-icon {
    color: #9CA3AF;
}

.light-grid-bg {
    background-color: #fafafa;
}
html.dark .light-grid-bg {
    background-color: #1a1a1a;
    border-color: #444 !important;
}

.related-case-studies {
    padding: 3rem 1.5rem;
}
@media (min-width: 768px) {
    .related-case-studies {
        padding: 3rem 4rem;
    }
}
@media (min-width: 1024px) {
    .related-case-studies {
        padding: 3rem 8rem;
    }
}

.related-case-studies h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.section-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin-bottom: 2rem;
}
html.dark .section-divider {
    border-top-color: #333;
}

.case-studies-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .case-studies-row {
        flex-direction: row;
    }
}

.case-study {
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.case-study-img {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: #f5f5f5;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
html.dark .case-study-img {
    background-color: #262626;
}

.case-study-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.site-footer {
    background-color: #141414;
    color: #9CA3AF;
    padding: 0 1.5rem;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 768px) {
    .site-footer {
        padding: 0 4rem;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}
@media (min-width: 1024px) {
    .site-footer {
        padding: 0 8rem;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 0;
}

.footer-divider {
    border: none;
    border-top: 1px solid #333;
    margin-bottom: 1.5rem;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}
@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.footer-center {
    display: flex;
    gap: 1.5rem;
}

.footer-center a {
    color: #9CA3AF;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-center a:hover {
    color: #fff;
}

.footer-right a {
    color: #9CA3AF;
    transition: color 0.2s ease;
}
.footer-right a:hover {
    color: #fff;
}

.footer-logo {
    width: 32px;
    height: 32px;
    background-image: url('../images/logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
}

.top-radial-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 400px;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 100, 50, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
html.dark .top-radial-gradient {
    opacity: 0.5;
} 

/* Project Info Icons - White in Dark Mode */
html.dark .project-info-icon {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* Info boxes - mobile: 2 columns, only Visa + Platform */
.info-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.info-box-visa {
    border-right: 1px solid #CDCDCD;
}
html.dark .info-box-visa {
    border-right-color: #444;
}
.info-box-role,
.info-box-tools {
    display: none;
}

/* Info boxes - above 950px: all 4 columns with dividers */
@media (min-width: 951px) {
    .info-boxes {
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
    }
    .info-box-visa,
    .info-box-platform,
    .info-box-role {
        border-right: 1px solid #CDCDCD;
    }
    .info-box-role,
    .info-box-tools {
        display: flex;
    }
}
@media (min-width: 951px) {
    html.dark .info-box-visa,
    html.dark .info-box-platform,
    html.dark .info-box-role {
        border-right-color: #444;
    }
}

/* Hide info boxes section from 768px to 1023px - placed at end to override Tailwind */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Override Tailwind's md:block which shows the section at 768px+ */
    /* Use multiple selectors to ensure we catch the section */
    body.test-transactions-page #page-content > section.hidden.md\:block:has(.info-boxes),
    body.test-transactions-page #page-content > section[class*="hidden"][class*="md:block"]:has(.info-boxes),
    body.test-transactions-page #page-content > section:has(.info-boxes),
    body.test-transactions-page section.hidden.md\:block.px-6.md\:px-16.lg\:px-32.mt-8.lg\:mt-20:has(.info-boxes) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}