:root {
                /* --terracotta: #D4775C;
      --warm-black: #1A1616;
      --cream: #F5F1E8;
      --teal: #2A7A8C;
      --rust: #A85D47;
      --light-rust: #E8A896;
      --warm-gray: #4A4444; */
                --terracotta: #0057B8;
                /* primary blue */
                --warm-black: #0B1B2B;
                /* deep navy */
                --cream: #F4F7FB;
                /* cool white */
                --teal: #0A66D6;
                /* secondary blue */
                --rust: #003E8A;
                /* dark blue */
                --light-rust: #D6E6FA;
                /* light blue tint */
                --warm-gray: #5F6E82;
                /* neutral blue-gray */
            }
            
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            body {
                font-family: 'Bricolage Grotesque', sans-serif;
                background: var(--cream);
                color: var(--warm-black);
                line-height: 1.6;
                overflow-x: hidden;
            }
            /* Navigation */
            
            nav {
                position: fixed;
                top: 0;
                width: 100%;
                padding: 1.5rem 3rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: var(--cream);
                backdrop-filter: blur(10px);
                z-index: 1000;
                border-bottom: 2px solid var(--terracotta);
            }
            
            .logo {
                font-family: 'Space Mono', monospace;
                font-weight: 700;
                font-size: 1.2rem;
                color: var(--warm-black);
                letter-spacing: -0.02em;
            }
            
            .nav-links {
                display: flex;
                gap: 2rem;
                list-style: none;
            }
            
            .nav-links a {
                font-family: 'Space Mono', monospace;
                text-decoration: none;
                color: var(--warm-black);
                font-size: 0.9rem;
                position: relative;
                transition: color 0.3s;
            }
            
            .nav-links a::after {
                content: '';
                position: absolute;
                bottom: -4px;
                left: 0;
                width: 0;
                height: 2px;
                background: var(--terracotta);
                transition: width 0.3s;
            }
            
            .nav-links a:hover::after {
                width: 100%;
            }
            /* Hero Section */
            
            .hero {
                min-height: 100vh;
                padding: 10rem 3rem 6rem;
                display: grid;
                grid-template-columns: 1.2fr 1fr;
                gap: 4rem;
                align-items: center;
                position: relative;
                overflow: hidden;
            }
            
            .hero::before {
                content: '';
                position: absolute;
                top: -50%;
                right: -20%;
                width: 800px;
                height: 800px;
                background: radial-gradient(circle, rgba(212, 119, 92, 0.15) 0%, transparent 70%);
                border-radius: 50%;
                animation: float 20s ease-in-out infinite;
            }
            
            @keyframes float {
                0%,
                100% {
                    transform: translate(0, 0) rotate(0deg);
                }
                50% {
                    transform: translate(-50px, 50px) rotate(5deg);
                }
            }
            
            .hero-content {
                position: relative;
                z-index: 1;
            }
            
            .hero-eyebrow {
                font-family: 'Space Mono', monospace;
                font-size: 0.9rem;
                color: var(--terracotta);
                text-transform: uppercase;
                letter-spacing: 0.15em;
                margin-bottom: 1.5rem;
                opacity: 0;
                animation: fadeInUp 0.8s ease forwards 0.2s;
            }
            
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .hero h1 {
                font-weight: 800;
                font-size: 4rem;
                line-height: 1.1;
                margin-bottom: 2rem;
                color: var(--warm-black);
                opacity: 0;
                animation: fadeInUp 0.8s ease forwards 0.4s;
            }
            
            .hero h1 .highlight {
                background: linear-gradient(120deg, var(--terracotta) 0%, var(--rust) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            
            .hero-subhead {
                font-size: 1.3rem;
                color: var(--warm-gray);
                margin-bottom: 2.5rem;
                line-height: 1.6;
                opacity: 0;
                animation: fadeInUp 0.8s ease forwards 0.6s;
            }
            
            .hero-tags {
                display: flex;
                gap: 1rem;
                flex-wrap: wrap;
                opacity: 0;
                animation: fadeInUp 0.8s ease forwards 0.8s;
            }
            
            .tag {
                font-family: 'Space Mono', monospace;
                font-size: 0.85rem;
                padding: 0.5rem 1rem;
                background: var(--warm-black);
                color: var(--cream);
                border-radius: 2px;
                position: relative;
                overflow: hidden;
            }
            
            .tag::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: var(--terracotta);
                transition: left 0.3s;
            }
            
            .tag:hover::before {
                left: 0;
            }
            
            .tag span {
                position: relative;
                z-index: 1;
            }
            /* Stats Grid */
            
            .stats-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
                opacity: 0;
                animation: fadeInUp 0.8s ease forwards 1s;
            }
            
            .stat-card {
                background: white;
                padding: 2rem;
                border-radius: 4px;
                border: 2px solid var(--terracotta);
                position: relative;
                overflow: hidden;
                transition: transform 0.3s, box-shadow 0.3s;
            }
            
            .stat-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 4px;
                height: 100%;
                background: var(--terracotta);
            }
            
            .stat-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 40px rgba(212, 119, 92, 0.2);
            }
            
            .stat-number {
                font-family: 'Space Mono', monospace;
                font-size: 3rem;
                font-weight: 700;
                color: var(--terracotta);
                line-height: 1;
                margin-bottom: 0.5rem;
            }
            
            .stat-label {
                font-size: 0.95rem;
                color: var(--warm-gray);
                line-height: 1.4;
            }
            /* Case Studies Section */
            
            .case-studies {
                padding: 8rem 3rem;
                background: white;
            }
            
            .section-header {
                max-width: 1200px;
                margin: 0 auto 5rem;
                text-align: center;
            }
            
            .section-title {
                font-family: 'Space Mono', monospace;
                font-size: 0.9rem;
                color: var(--terracotta);
                text-transform: uppercase;
                letter-spacing: 0.15em;
                margin-bottom: 1rem;
            }
            
            .section-headline {
                font-weight: 800;
                font-size: 3rem;
                color: var(--warm-black);
                margin-bottom: 1.5rem;
            }
            
            .section-description {
                font-size: 1.2rem;
                color: var(--warm-gray);
                max-width: 700px;
                margin: 0 auto;
            }
            
            .case-study-grid {
                max-width: 1400px;
                margin: 0 auto;
                display: grid;
                gap: 4rem;
            }
            
            .case-study {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 4rem;
                align-items: center;
                position: relative;
            }
            
            .case-study:nth-child(even) {
                direction: rtl;
            }
            
            .case-study:nth-child(even)>* {
                direction: ltr;
            }
            
            .case-image {
                position: relative;
                aspect-ratio: 4/3;
                background: linear-gradient(135deg, var(--light-rust) 0%, var(--terracotta) 100%);
                border-radius: 4px;
                overflow: hidden;
                border: 3px solid var(--warm-black);
            }
            
            .case-image::before {
                content: '';
                position: absolute;
                inset: 0;
                background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(26, 22, 22, 0.03) 10px, rgba(26, 22, 22, 0.03) 20px);
            }
            
            .case-number {
                position: absolute;
                top: 1.5rem;
                left: 1.5rem;
                font-family: 'Space Mono', monospace;
                font-size: 5rem;
                font-weight: 700;
                color: rgba(255, 255, 255, 0.3);
                line-height: 1;
                z-index: 1;
            }
            
            .case-content h3 {
                font-size: 2.2rem;
                font-weight: 800;
                color: var(--warm-black);
                margin-bottom: 1rem;
                line-height: 1.2;
            }
            
            .case-meta {
                font-family: 'Space Mono', monospace;
                font-size: 0.85rem;
                color: var(--terracotta);
                margin-bottom: 1.5rem;
                text-transform: uppercase;
                letter-spacing: 0.1em;
            }
            
            .case-description {
                font-size: 1.1rem;
                color: var(--warm-gray);
                margin-bottom: 2rem;
                line-height: 1.7;
            }
            
            .case-metrics {
                display: flex;
                gap: 2rem;
                margin-bottom: 2rem;
                flex-wrap: wrap;
            }
            
            .metric {
                flex: 1;
                min-width: 120px;
            }
            
            .metric-value {
                font-family: 'Space Mono', monospace;
                font-size: 2rem;
                font-weight: 700;
                color: var(--terracotta);
                line-height: 1;
            }
            
            .metric-label {
                font-size: 0.85rem;
                color: var(--warm-gray);
                margin-top: 0.5rem;
            }
            
            .case-link {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                font-family: 'Space Mono', monospace;
                font-size: 0.9rem;
                color: var(--warm-black);
                text-decoration: none;
                padding: 0.75rem 1.5rem;
                border: 2px solid var(--warm-black);
                border-radius: 2px;
                transition: all 0.3s;
            }
            
            .case-link:hover {
                background: var(--warm-black);
                color: var(--cream);
                transform: translateX(4px);
            }
            /* About Section */
            
            .about {
                padding: 8rem 3rem;
                background: var(--cream);
            }
            
            .about-container {
                max-width: 1200px;
                margin: 0 auto;
                display: grid;
                grid-template-columns: 1fr 1.5fr;
                gap: 5rem;
                align-items: start;
            }
            
            .about-image {
                position: relative;
                aspect-ratio: 3/4;
                background: linear-gradient(135deg, var(--teal) 0%, var(--terracotta) 100%);
                border-radius: 4px;
                border: 4px solid var(--warm-black);
                overflow: hidden;
            }
            
            .about-image::after {
                content: 'BASED IN HONG KONG';
                position: absolute;
                bottom: 1.5rem;
                left: 1.5rem;
                right: 1.5rem;
                font-family: 'Space Mono', monospace;
                font-size: 0.75rem;
                color: white;
                letter-spacing: 0.15em;
                background: rgba(26, 22, 22, 0.8);
                padding: 0.75rem;
                text-align: center;
            }
            
            .about-content h2 {
                font-size: 3rem;
                font-weight: 800;
                margin-bottom: 2rem;
                color: var(--warm-black);
            }
            
            .about-text {
                font-size: 1.15rem;
                color: var(--warm-gray);
                line-height: 1.8;
                margin-bottom: 2rem;
            }
            
            .about-text strong {
                color: var(--terracotta);
                font-weight: 600;
            }
            
            .capabilities {
                margin-top: 3rem;
            }
            
            .capabilities h3 {
                font-family: 'Space Mono', monospace;
                font-size: 0.9rem;
                color: var(--warm-black);
                text-transform: uppercase;
                letter-spacing: 0.15em;
                margin-bottom: 1.5rem;
            }
            
            .capability-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
            
            .capability {
                padding: 1.5rem;
                background: white;
                border-left: 4px solid var(--terracotta);
                border-radius: 2px;
            }
            
            .capability h4 {
                font-size: 1.1rem;
                font-weight: 700;
                color: var(--warm-black);
                margin-bottom: 0.5rem;
            }
            
            .capability p {
                font-size: 0.95rem;
                color: var(--warm-gray);
                line-height: 1.6;
            }
            /* Contact Section */
            
            .contact {
                padding: 8rem 3rem;
                background: var(--warm-black);
                color: var(--cream);
                text-align: center;
            }
            
            .contact h2 {
                font-size: 3.5rem;
                font-weight: 800;
                margin-bottom: 1.5rem;
            }
            
            .contact p {
                font-size: 1.2rem;
                color: var(--light-rust);
                margin-bottom: 3rem;
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
            }
            
            .contact-links {
                display: flex;
                gap: 2rem;
                justify-content: center;
                flex-wrap: wrap;
            }
            
            .contact-btn {
                font-family: 'Space Mono', monospace;
                font-size: 1rem;
                padding: 1rem 2.5rem;
                background: var(--terracotta);
                color: white;
                border: none;
                border-radius: 2px;
                text-decoration: none;
                display: inline-block;
                transition: all 0.3s;
                cursor: pointer;
            }
            
            .contact-btn:hover {
                background: var(--rust);
                transform: translateY(-4px);
                box-shadow: 0 8px 30px rgba(212, 119, 92, 0.4);
            }
            
            .contact-btn.secondary {
                background: transparent;
                border: 2px solid var(--cream);
                color: var(--cream);
            }
            
            .contact-btn.secondary:hover {
                background: var(--cream);
                color: var(--warm-black);
            }
            /* Footer */
            
            footer {
                padding: 2rem 3rem;
                background: var(--warm-black);
                border-top: 2px solid var(--terracotta);
                text-align: center;
            }
            
            footer p {
                font-family: 'Space Mono', monospace;
                font-size: 0.85rem;
                color: var(--light-rust);
            }
            /* Responsive */
            
            @media (max-width: 968px) {
                nav {
                    padding: 1rem 1.5rem;
                }
                .nav-links {
                    gap: 1rem;
                }
                .hero {
                    grid-template-columns: 1fr;
                    padding: 8rem 1.5rem 4rem;
                    gap: 3rem;
                }
                .hero h1 {
                    font-size: 2.5rem;
                }
                .stats-grid {
                    grid-template-columns: 1fr;
                }
                .case-studies {
                    padding: 5rem 1.5rem;
                }
                .case-study {
                    grid-template-columns: 1fr;
                    gap: 2rem;
                }
                .case-study:nth-child(even) {
                    direction: ltr;
                }
                .section-headline {
                    font-size: 2rem;
                }
                .about-container {
                    grid-template-columns: 1fr;
                    gap: 3rem;
                }
                .capability-grid {
                    grid-template-columns: 1fr;
                }
                .contact h2 {
                    font-size: 2.5rem;
                }
            }
            /* Scroll animations */
            
            .scroll-reveal {
                opacity: 0;
                transform: translateY(50px);
                transition: opacity 0.8s ease, transform 0.8s ease;
            }
            
            .scroll-reveal.revealed {
                opacity: 1;
                transform: translateY(0);
            }
            /* :root {
       --terracotta: #D4775C;
       --warm-black: #1A1616;
       --cream: #F5F1E8;
       --teal: #2A7A8C;
       --rust: #A85D47;
       --light-rust: #E8A896;
       --warm-gray: #4A4444;
   } */
            
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            body {
                font-family: 'Bricolage Grotesque', sans-serif;
                background: var(--cream);
                color: var(--warm-black);
                line-height: 1.6;
            }
            /* nav {
              position: fixed;
              top: 0;
              width: 100%;
              padding: 1.5rem 3rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              background: rgba(245, 241, 232, 0.95);
              backdrop-filter: blur(10px);
              z-index: 1000;
              border-bottom: 2px solid var(--terracotta);
          } */
            
            .back-link {
                font-family: 'Space Mono', monospace;
                text-decoration: none;
                color: var(--warm-black);
                font-size: 0.9rem;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                transition: transform 0.3s;
            }
            
            .back-link:hover {
                transform: translateX(-4px);
            }
            
            .logo {
                font-family: 'Space Mono', monospace;
                font-weight: 700;
                font-size: 1.2rem;
                color: var(--warm-black);
            }
            
            .case-hero {
                padding: 8rem 3rem 4rem;
                max-width: 1400px;
                margin: 0 auto;
            }
            
            .case-meta {
                font-family: 'Space Mono', monospace;
                font-size: 0.9rem;
                color: var(--terracotta);
                text-transform: uppercase;
                letter-spacing: 0.15em;
                margin-bottom: 1.5rem;
            }
            
            .case-hero h1 {
                font-size: 4rem;
                font-weight: 800;
                line-height: 1.1;
                margin-bottom: 2rem;
                max-width: 900px;
            }
            
            .case-intro {
                font-size: 1.4rem;
                color: var(--warm-gray);
                max-width: 700px;
                margin-bottom: 3rem;
                line-height: 1.6;
            }
            
            .stats-row {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 2rem;
                margin-bottom: 4rem;
            }
            
            .stat-box {
                padding: 2rem;
                background: white;
                border-left: 4px solid var(--terracotta);
                border-radius: 2px;
            }
            
            .stat-number {
                font-family: 'Space Mono', monospace;
                font-size: 2.5rem;
                font-weight: 700;
                color: var(--terracotta);
                line-height: 1;
                margin-bottom: 0.5rem;
            }
            
            .stat-label {
                font-size: 0.9rem;
                color: var(--warm-gray);
            }
            
            .hero-image {
                width: 100%;
                height: 600px;
                background: linear-gradient(135deg, var(--teal) 0%, var(--terracotta) 100%);
                border-radius: 4px;
                border: 4px solid var(--warm-black);
                margin-bottom: 4rem;
                position: relative;
                overflow: hidden;
            }
            
            .hero-image::before {
                content: 'REPLACE WITH WORKFLOW DIAGRAM OR DASHBOARD SCREENSHOT';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-family: 'Space Mono', monospace;
                font-size: 1.2rem;
                color: rgba(255, 255, 255, 0.6);
                letter-spacing: 0.1em;
                text-align: center;
                padding: 2rem;
            }
            
            .content-section {
                max-width: 900px;
                margin: 0 auto 5rem;
                padding: 0 3rem;
            }
            
            .content-section h2 {
                font-size: 2.5rem;
                font-weight: 800;
                margin-bottom: 1.5rem;
                color: var(--warm-black);
            }
            
            .content-section h3 {
                font-size: 1.8rem;
                font-weight: 700;
                margin: 3rem 0 1rem;
                color: var(--warm-black);
            }
            
            .content-section p {
                font-size: 1.15rem;
                line-height: 1.8;
                color: var(--warm-gray);
                margin-bottom: 1.5rem;
            }
            
            .content-section strong {
                color: var(--terracotta);
                font-weight: 600;
            }
            
            .content-section ul {
                margin: 1.5rem 0;
                padding-left: 2rem;
            }
            
            .content-section li {
                font-size: 1.15rem;
                line-height: 1.8;
                color: var(--warm-gray);
                margin-bottom: 1rem;
            }
            
            .highlight-box {
                background: white;
                padding: 2.5rem;
                border-left: 6px solid var(--terracotta);
                margin: 3rem 0;
                border-radius: 2px;
            }
            
            .highlight-box h4 {
                font-family: 'Space Mono', monospace;
                font-size: 0.85rem;
                text-transform: uppercase;
                letter-spacing: 0.15em;
                color: var(--terracotta);
                margin-bottom: 1rem;
            }
            
            .highlight-box p {
                font-size: 1.2rem;
                line-height: 1.7;
                color: var(--warm-black);
                font-weight: 600;
            }
            
            .image-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
                margin: 3rem 0;
            }
            
            .image-placeholder {
                aspect-ratio: 4/3;
                background: linear-gradient(135deg, var(--teal) 0%, var(--terracotta) 100%);
                border-radius: 4px;
                border: 3px solid var(--warm-black);
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: 'Space Mono', monospace;
                font-size: 0.9rem;
                color: rgba(255, 255, 255, 0.7);
                text-align: center;
                padding: 2rem;
            }
            
            .full-width-image {
                width: 100%;
                aspect-ratio: 16/9;
                background: linear-gradient(135deg, var(--rust) 0%, var(--terracotta) 100%);
                border-radius: 4px;
                border: 3px solid var(--warm-black);
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: 'Space Mono', monospace;
                font-size: 1.2rem;
                color: rgba(255, 255, 255, 0.7);
                margin: 3rem 0;
            }
            
            .process-steps {
                margin: 3rem 0;
            }
            
            .step {
                display: grid;
                grid-template-columns: 80px 1fr;
                gap: 2rem;
                margin-bottom: 3rem;
                align-items: start;
            }
            
            .step-number {
                font-family: 'Space Mono', monospace;
                font-size: 3rem;
                font-weight: 700;
                color: var(--terracotta);
                line-height: 1;
            }
            
            .step-content h4 {
                font-size: 1.5rem;
                font-weight: 700;
                color: var(--warm-black);
                margin-bottom: 0.75rem;
            }
            
            .step-content p {
                font-size: 1.1rem;
                line-height: 1.7;
                color: var(--warm-gray);
            }
            
            .before-after {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 3rem;
                margin: 3rem 0;
            }
            
            .before-after-card {
                background: white;
                padding: 2.5rem;
                border-radius: 4px;
                border: 3px solid var(--warm-black);
            }
            
            .before-after-card h4 {
                font-family: 'Space Mono', monospace;
                font-size: 0.85rem;
                text-transform: uppercase;
                letter-spacing: 0.15em;
                color: var(--terracotta);
                margin-bottom: 1.5rem;
            }
            
            .before-after-card ul {
                list-style: none;
                padding: 0;
            }
            
            .before-after-card li {
                font-size: 1.1rem;
                line-height: 1.7;
                color: var(--warm-gray);
                margin-bottom: 1rem;
                padding-left: 1.5rem;
                position: relative;
            }
            
            .before-after-card li::before {
                content: '→';
                position: absolute;
                left: 0;
                color: var(--terracotta);
                font-weight: 700;
            }
            
            .lessons {
                background: var(--warm-black);
                color: var(--cream);
                padding: 5rem 3rem;
                margin-top: 5rem;
            }
            
            .lessons-content {
                max-width: 900px;
                margin: 0 auto;
            }
            
            .lessons h2 {
                font-size: 2.5rem;
                font-weight: 800;
                color: var(--light-rust);
                margin-bottom: 2rem;
            }
            
            .lessons p {
                font-size: 1.2rem;
                line-height: 1.8;
                color: var(--cream);
                margin-bottom: 1.5rem;
            }
            
            .related {
                padding: 5rem 3rem;
                background: white;
            }
            
            .related-content {
                max-width: 1200px;
                margin: 0 auto;
            }
            
            .related h2 {
                font-size: 2.5rem;
                font-weight: 800;
                margin-bottom: 3rem;
                text-align: center;
            }
            
            .related-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 2rem;
            }
            
            .related-card {
                background: var(--cream);
                padding: 2rem;
                border-radius: 4px;
                border: 2px solid var(--warm-black);
                text-decoration: none;
                display: block;
                transition: transform 0.3s, box-shadow 0.3s;
            }
            
            .related-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 40px rgba(212, 119, 92, 0.2);
            }
            
            .related-card h3 {
                font-size: 1.4rem;
                font-weight: 700;
                color: var(--warm-black);
                margin-bottom: 0.75rem;
            }
            
            .related-card p {
                font-size: 1rem;
                color: var(--warm-gray);
                line-height: 1.6;
            }
            
            .related-card .arrow {
                font-family: 'Space Mono', monospace;
                color: var(--terracotta);
                margin-top: 1rem;
                display: inline-block;
            }
            
            @media (max-width: 968px) {
                .case-hero h1 {
                    font-size: 2.5rem;
                }
                .stats-row {
                    grid-template-columns: repeat(2, 1fr);
                }
                .image-grid,
                .before-after {
                    grid-template-columns: 1fr;
                }
                .related-grid {
                    grid-template-columns: 1fr;
                }
                nav {
                    padding: 1rem 1.5rem;
                }
                .content-section {
                    padding: 0 1.5rem;
                }
            }