/* ==========================================================================
           00-global.css
           Shared design tokens, reset, base typography, utilities, orb/heading
           logic, animations, and scrollbar. Load this FIRST on every page.
           ========================================================================== */

        /* 1. SHARED ROOT DESIGN TOKENS */
        :root {
            --primaryFont: "Be Vietnam Pro", sans-serif;
            --secondaryFont: "Inter", "Neue Montreal", sans-serif;
            --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

            --primaryColor: #111111;
            --secondaryColor: #FF6200;
            --accentOrbColor: #FF6A00;
            --bgColor: #FFF4E6;
            --whiteColor: #FFFFFF;
            --footerColor: #111111;

            --borderColor: #11111126;
            --borderColorLight: #1111111A;
            --offwhiteColor: #FFFFFFB3;
            --mutedWhiteColor: #FFFFFF4D;

            --fontSize: 16px;
            --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            --transition-fast: all 0.3s ease;
            
            /* Legacy Mappings to ensure current preview stays exactly the same */
            --bg: var(--bgColor);
            --black: var(--primaryColor);
            --accent: var(--secondaryColor);
            --white: var(--whiteColor);
            --font-heading: var(--primaryFont);
            --font-body: var(--secondaryFont);
        }

        /* 2. GLOBAL RESET & BASE */
        html { scroll-behavior: smooth; }
        html.lenis { height: auto; }
        .lenis.lenis-smooth { scroll-behavior: auto; }
        .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
        .lenis.lenis-stopped { overflow: hidden; }

        body {
            background-color: var(--bgColor);
            color: var(--primaryColor);
            font-family: var(--secondaryFont);
            font-size: var(--fontSize);
            line-height: 1.65;
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin: 0;
            padding: 0;
            cursor: default;
            -webkit-tap-highlight-color: transparent;
        }
        @media (min-width: 768px) {
            body { font-size: 1.125rem; }
        }

        a { text-decoration: none; color: inherit; }
        ul { list-style: none; padding: 0; margin: 0; }
        p { font-family: var(--secondaryFont); margin-bottom: 0; }
        button { font-family: var(--primaryFont); border: none; background: none; padding: 0; cursor: pointer; }

        /* Typography */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--primaryFont);
            text-transform: uppercase;
            margin-bottom: 0;
            font-weight: 900;
        }

        /* 3. UTILITIES & REUSABLE COMPONENTS */
        .hairline-t { border-top: 1px solid var(--borderColor); }
        .hairline-b { border-bottom: 1px solid var(--borderColor); }
        .hairline-l { border-left: 1px solid var(--borderColor); }
        .hairline-r { border-right: 1px solid var(--borderColor); }

        .px-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
        @media (min-width: 768px) { .px-fluid { padding-left: 3rem; padding-right: 3rem; } }

        .py-section { padding-top: 8rem; padding-bottom: 8rem; }
        @media (min-width: 768px) { .py-section { padding-top: 8rem; padding-bottom: 8rem; } }

        /* Standardized Orb Logic anchored to the first word */
        .orb-relative { position: relative; display: inline-block; z-index: 1; }
        .orb-text-front { position: relative; z-index: 10; }

        .common-orb {
            position: absolute;
            background-color: var(--accentOrbColor);
            border-radius: 50%;
            z-index: -1;
            width: 3rem; height: 3rem;
            top: -0.5rem; left: -0.75rem;
        }
        @media (min-width: 768px) {
            .common-orb {
                width: 4.5rem; height: 4.5rem;
                top: -1rem; left: -1rem;
            }
        }

        /* Animations */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }

        /* Minimal scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bgColor); }
        ::-webkit-scrollbar-thumb { background: var(--primaryColor); }

        /* Global mobile tweak (shared padding rule) */
        @media (max-width: 767px) {
            .py-section {
                padding-top: 5rem;
                padding-bottom: 5rem;
            }
        }

        /* Core sizing and typography for main section headings (H2) */
        .global-h2 {
            font-family: var(--primaryFont);
            font-size: clamp(2rem, 3.5vw + 1rem, 4.5rem) !important;
            line-height: 1.1em !important;
            letter-spacing: -0.05em !important;
            text-transform: uppercase;
            font-weight: 900 !important;
            margin-bottom: 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
            hyphens: none;
            max-width: 65rem;
        }
        /* Subheadings directly under H2s */
        .global-h2-sub {
            font-size: clamp(1.1rem, 3vw + 0.5rem, 1.5rem);
            font-weight: 500;
            color: rgba(17, 17, 17, 0.7);
            margin-top: 1.5rem;
            max-width: 48rem;
        }
        /* Standardized sizing for inner section headings (H3) */
        .global-h3 {
            font-family: var(--primaryFont);
            font-size: clamp(1.5rem, 2.5vw + 1rem, 2.75rem) !important;
            line-height: 1.1em !important;
            letter-spacing: -0.05em !important;
            text-transform: uppercase;
            font-weight: 900 !important;
            margin-bottom: 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }
        /* Text/paragraphs directly under H3s */
        .global-h3-sub {
            font-size: clamp(0.9rem, 1.5vw + 0.6rem, 1.125rem) !important;
            font-weight: 500 !important;
            color: rgba(17, 17, 17, 0.7);
            margin-top: 1rem;
            margin-bottom: 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
            line-height: 1.65 !important;
        }

        .hero-title { font-size: clamp(2.2rem, 5vw + 1rem, 6rem) !important; }
        .hero-title {
            line-height: 1.1em !important;
            letter-spacing: -0.05em !important;
            margin-bottom: 0;
            font-weight: 900 !important;
        }

        /* ==========================================================================
           END: 00-global.css
           ========================================================================== */

        /* Core Colors */
        .bg-bg { background-color: var(--bg) !important; }
        .bg-black { background-color: var(--black) !important; }
        .bg-accent { background-color: var(--accent) !important; }
        .bg-white { background-color: var(--white) !important; }
        .text-black { color: var(--black) !important; }
        .text-accent { color: var(--accent) !important; }
        .text-white { color: var(--white) !important; }

        /* Typography Utilities */
        .font-heading { font-family: var(--font-heading); }
        .font-body { font-family: var(--font-body); }
        .font-mono { font-family: var(--font-mono); }
        
        .font-black { font-weight: 900; }
        .font-bold { font-weight: 700; }
        .font-light { font-weight: 300; }
        
        .uppercase { text-transform: uppercase; }
        .tracking-tighter { letter-spacing: -0.05em; }
        .tracking-widest { letter-spacing: 0.1em; }
        .tracking-widest-lg { letter-spacing: 0.2em; }

        /* Text sizes */
        .text-xs { font-size: 0.75rem; line-height: 1rem; }
        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
        .text-base { font-size: 1rem; line-height: 1.5rem; }
        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        
        /* Max Widths */
        .max-w-1440 { max-width: 100%; }
        .max-w-7xl { max-width: 80rem; }
        .max-w-6xl { max-width: 72rem; }
        .max-w-5xl { max-width: 64rem; }
        .max-w-4xl { max-width: 56rem; }
        .max-w-3xl { max-width: 48rem; }
        .max-w-2xl { max-width: 42rem; }
        .max-w-xl { max-width: 36rem; }
        .max-w-lg { max-width: 32rem; }
        .max-w-md { max-width: 28rem; }
        
        /* Opacity Colors */
        .text-black-30 { color: rgba(17,17,17,0.3); }
        .text-black-40 { color: rgba(17,17,17,0.4); }
        .text-black-50 { color: rgba(17,17,17,0.5); }
        .text-black-60 { color: rgba(17,17,17,0.6); }
        .text-black-70 { color: rgba(17,17,17,0.7); }
        .text-black-80 { color: rgba(17,17,17,0.8); }
        .text-black-90 { color: rgba(17,17,17,0.9); }
        
        .border-black-10 { border-color: rgba(17,17,17,0.1) !important; }
        .border-black-15 { border-color: rgba(17,17,17,0.15) !important; }
        .border-black-20 { border-color: rgba(17,17,17,0.2) !important; }
        
        /* Layout Utilities */
        .min-vh-90 { min-height: 90vh; }
        .z-0 { z-index: 0; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-50 { z-index: 50; }
        .mix-blend-difference { mix-blend-mode: difference; }
        .pointer-events-none { pointer-events: none; }
        .pointer-events-auto { pointer-events: auto; }
        .hw-accel { will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden; }
        
        /* Hardware acceleration for mobile performance */
        .gsap-fade-up, .reveal, .service-hover-row, .process-card, .fail-accordion-row, .tech-roster-row, .standard-row, .plan-row, .bento-card, .premium-stack-card {
            transform: translateZ(0);
            backface-visibility: hidden;
            will-change: transform, opacity;
        }
        
        /* Fluid Spacing & Typography */
        /* Moved to 00-global.css block */

        /* Gaps */
        .gap-12px { gap: 0.75rem; }
        
        /* Custom Button */
        .btn-custom {
            display: inline-flex; align-items: center; gap: 1rem;
            font-family: var(--font-heading); font-weight: 900; text-transform: uppercase;
            letter-spacing: 0.1em; font-size: 0.875rem; color: var(--white);
            background-color: var(--black); padding: 1.5rem 2.5rem;
            border: 1px solid var(--black); transition: all 0.5s; text-decoration: none;
        }
        .btn-custom:hover { background-color: transparent; color: var(--black) !important; }
        .btn-hero { padding: 1.15rem 2rem; font-size: 0.75rem; }
        .btn-hero:hover { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--black) !important; }

        
        /* Service Hover Row */
        .service-hover-row {
            padding: 1.5rem 1.5rem; margin-left: -1.5rem; margin-right: -1.5rem;
            cursor: pointer; display: flex; flex-direction: column; position: relative; z-index: 10;
            transition: all 0.5s;
        }
        @media (min-width: 768px) {
            .service-hover-row { padding: 2.5rem 3rem; margin-left: -3rem; margin-right: -3rem; }
        }
        .service-hover-row:hover { background-color: var(--black); }
        .service-hover-title { transform-origin: left; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
        .service-hover-row:hover .service-hover-title { transform: scale(1.05); color: var(--white) !important; }
        
        .service-hover-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
        .service-hover-row:hover .service-hover-grid { grid-template-rows: 1fr; }
        .service-hover-inner { overflow: hidden; min-height: 0; }
        
        .service-hover-content { opacity: 0; transition: opacity 0.7s; transition-delay: 100ms; }
        .service-hover-row:hover .service-hover-content { opacity: 1; }
        .service-hover-desc { color: rgba(17,17,17,0.6); transition: color 0.5s; }
        .service-hover-row:hover .service-hover-desc { color: rgba(255,255,255,0.8); }
        
        /* Service List Hover Color Fix */
        .service-list { color: var(--black); transition: color 0.5s; }
        .service-hover-row:hover .service-list { color: var(--bg); }
        
        /* Architectural Line Grid (Replaces Premium Stack Grid) */
        .arch-grid {
            display: grid;
            grid-template-columns: 1fr;
            border-top: 1px solid rgba(17, 17, 17, 0.15);
            border-left: 1px solid rgba(17, 17, 17, 0.15);
            width: 100%;
        }
        @media (min-width: 768px) {
            .arch-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (min-width: 1024px) {
            .arch-grid { grid-template-columns: repeat(4, 1fr); }
        }

        .arch-card {
            position: relative;
            background-color: var(--bg);
            border-right: 1px solid rgba(17, 17, 17, 0.15);
            border-bottom: 1px solid rgba(17, 17, 17, 0.15);
            padding: 3rem 2.5rem;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            min-height: 400px;
            cursor: default;
            z-index: 1;
        }

        /* Top Accent Sweep */
        .arch-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 10;
        }

        .arch-card:hover {
            background-color: rgba(17, 17, 17, 0.03); /* Subtle darkening, strictly no white */
        }

        .arch-card:hover::before {
            transform: scaleX(1);
        }

        .arch-bg-num {
            position: absolute;
            bottom: -1.5rem;
            right: -1rem;
            font-family: var(--font-heading);
            font-size: 10rem;
            font-weight: 900;
            line-height: 1;
            color: rgba(17, 17, 17, 0.03);
            z-index: 0;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
        }
        
        .arch-card:hover .arch-bg-num {
            color: rgba(255, 98, 0, 0.06);
            transform: translate(-1rem, -1rem) scale(1.05);
        }

        .arch-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .arch-kicker {
            font-family: var(--font-mono);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--black);
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            opacity: 0.5;
            transition: opacity 0.4s ease;
        }
        
        .arch-card:hover .arch-kicker {
            opacity: 1;
        }

        .arch-kicker::before {
            content: '';
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--black);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .arch-card:hover .arch-kicker::before {
            background-color: var(--accent);
            transform: scale(1.5);
        }

        .arch-title {
            font-family: var(--font-heading);
            font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
            font-weight: 900;
            line-height: 1.2;
            text-transform: uppercase;
            color: var(--black);
            margin-bottom: 1.25rem;
            transition: color 0.5s ease;
        }
        
        .arch-card:hover .arch-title {
            color: var(--accent);
        }

        .arch-desc {
            color: rgba(17, 17, 17, 0.6);
            font-size: 1rem;
            line-height: 1.65;
            margin: 0;
            margin-top: auto;
            transition: color 0.5s ease;
        }
        
        .arch-card:hover .arch-desc {
            color: rgba(17, 17, 17, 0.9);
        }

        /* The Tikz Standard (Used for "What You Get") */
        .standard-row {
            padding: 2.5rem 0; border-bottom: 1px solid rgba(17,17,17,0.15);
            cursor: pointer; position: relative; overflow: hidden; background-color: var(--bg); display: flex; flex-direction: column; justify-content: center;
        }
        @media (min-width: 768px) { .standard-row { padding: 4rem 0; } }
        
        .standard-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); z-index: 20; }
        .standard-row:hover .standard-line { transform: scaleX(1); }
        
        .standard-num { transition: color 0.5s; display: block; }
        .standard-row:hover .standard-num { color: var(--accent) !important; }
        
        .standard-title { transition: all 0.85s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: left; color: var(--black); }
        .standard-row:hover .standard-title { transform: translateX(0.75rem); }
        @media (min-width: 768px) { .standard-row:hover .standard-title { transform: translateX(2rem); } }
        
        .standard-bg-num { position: absolute; right: 0; top: 50%; transform: translateY(-50%) translateX(3rem); z-index: 0; pointer-events: none; opacity: 0; transition: all 0.85s cubic-bezier(0.16, 1, 0.3, 1); font-size: 150px; line-height: 1; color: var(--black); }
        @media (min-width: 768px) { .standard-bg-num { right: 3rem; font-size: 200px; } }
        .standard-row:hover .standard-bg-num { transform: translateY(-50%) translateX(0); opacity: 0.05; }

        /* Premium Mosaic Grid (Replaces old Specialty Grid) */
        .premium-mosaic-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            width: 100%;
        }
        @media (min-width: 768px) {
            .premium-mosaic-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (min-width: 1024px) {
            .premium-mosaic-grid {
                grid-template-columns: repeat(4, 1fr);
                grid-auto-rows: 200px; /* Fixed height to create interlocking blocks */
            }
            /* Creative Box Sizing */
            .mosaic-item-1 { grid-column: span 2; grid-row: span 2; } /* Large Square */
            .mosaic-item-2 { grid-column: span 2; grid-row: span 1; } /* Wide Rectangle */
            .mosaic-item-3 { grid-column: span 2; grid-row: span 1; } /* Wide Rectangle */
            .mosaic-item-4 { grid-column: span 1; grid-row: span 2; } /* Tall Rectangle */
            .mosaic-item-5 { grid-column: span 1; grid-row: span 2; } /* Tall Rectangle */
            .mosaic-item-6 { grid-column: span 2; grid-row: span 1; } /* Wide Rectangle */
            .mosaic-item-7 { grid-column: span 1; grid-row: span 1; } /* Small Square */
            .mosaic-item-8 { grid-column: span 1; grid-row: span 1; } /* Small Square */
        }

        .mosaic-card {
            position: relative;
            background-color: transparent;
            border: 1px solid rgba(17, 17, 17, 0.15);
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            overflow: hidden;
            transition: border-color 0.6s ease;
            cursor: default;
            min-height: 200px;
        }

        /* Subtle Dark Hover Overlay (No White) */
        .mosaic-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(17, 17, 17, 0.04);
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 0;
        }

        .mosaic-card:hover {
            border-color: var(--black);
        }
        .mosaic-card:hover::before {
            transform: scaleY(1);
        }

        .mosaic-content {
            position: relative;
            z-index: 10;
        }

        .mosaic-num {
            font-family: var(--font-mono);
            font-size: 0.875rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: var(--accent);
            margin-bottom: 1rem;
            display: block;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .mosaic-card:hover .mosaic-num {
            transform: translateX(10px);
        }

        .mosaic-title {
            font-family: var(--font-heading);
            font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
            font-weight: 900;
            text-transform: uppercase;
            color: var(--black);
            margin: 0;
            line-height: 1.1;
            transition: color 0.4s ease;
        }
        .mosaic-item-1 .mosaic-title {
            font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.75rem);
        }
        .mosaic-card:hover .mosaic-title {
            color: var(--accent);
        }

        .mosaic-icon {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            font-size: 1.5rem;
            font-weight: 300;
            color: var(--black);
            line-height: 1;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
            z-index: 10;
            opacity: 0.3;
        }
        .mosaic-card:hover .mosaic-icon {
            transform: rotate(90deg);
            color: var(--accent);
            opacity: 1;
        }

        .tech-roster-label::before { display: none; }
        .tech-roster-label::after { content: ''; display: block; width: 2rem; height: 2px; background-color: var(--accent); }
    }
    
    .tech-roster-desc { color: rgba(255, 244, 230, 0.7); font-size: 1.125rem; line-height: 1.6; margin: 0; }

    /* Bento Asymmetrical Grid (No White) */
    .bento-service-card {
        background-color: transparent;
        border: 1px solid rgba(17, 17, 17, 0.15);
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        min-height: 400px;
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: default;
        position: relative;
        overflow: hidden;
    }
    @media (min-width: 768px) {
        .bento-service-card { padding: 3rem; }
        .bento-service-card.wide { min-height: 350px; }
    }

    .bento-service-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-color: var(--black); /* Default hover fill */
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: -1;
    }
    
    .bento-service-card.hover-accent::before {
        background-color: var(--accent);
    }
    
    .bento-service-card.hover-black::before {
        background-color: var(--black);
    }

    .bento-service-card:hover {
        border-color: rgba(17, 17, 17, 0.3);
        transform: translateY(-5px);
    }
    .bento-service-card:hover::before {
        transform: scaleY(1);
    }

    .bento-service-num {
        font-family: var(--font-mono);
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--accent);
        text-transform: uppercase;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
        display: inline-block;
    }
    .bento-service-card:hover .bento-service-num {
        transform: translateX(10px);
        color: var(--bg) !important;
    }

    .bento-service-desc {
        font-family: var(--font-body);
        color: rgba(17, 17, 17, 0.6);
        font-size: 1.125rem;
        line-height: 1.6;
        transition: color 0.4s ease;
    }
    .bento-service-card:hover .bento-service-desc {
        color: var(--bg) !important;
    }

    .bento-service-title {
        font-family: var(--font-heading);
        font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
        font-weight: 900;
        line-height: 1.1;
        text-transform: uppercase;
        color: var(--black);
        margin: 0;
        transition: color 0.4s ease;
    }
    .bento-service-card:hover .bento-service-title {
        color: var(--bg) !important;
    }

    /* Specific hover text colors for accent (orange) backgrounds */
    .bento-service-card.hover-accent:hover .bento-service-num,
    .bento-service-card.hover-accent:hover .bento-service-desc,
    .bento-service-card.hover-accent:hover .bento-service-title {
        color: var(--black) !important;
    }

    /* Premium Expanding Accordion Columns (For Specialties) */
    .specialty-acc-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }
    @media (min-width: 992px) {
        .specialty-acc-container {
            flex-direction: row;
            height: 550px;
        }
    }

    .specialty-acc-col {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex: 1;
        transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @media (min-width: 992px) {
        .specialty-acc-col:hover {
            flex: 2.5;
        }
    }

    .specialty-acc-card {
        flex: 1;
        border: 1px solid rgba(17, 17, 17, 0.15);
        border-radius: 0; /* Changed to edge corners */
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        background-color: transparent;
        cursor: default;
        position: relative;
        overflow: hidden;
        min-height: 180px;
    }

    .specialty-acc-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--black); /* Filled color animation */
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 0;
    }

    .specialty-acc-card:hover {
        border-color: rgba(17, 17, 17, 0.4);
    }
    .specialty-acc-card:hover::before {
        transform: scaleY(1);
    }

    .specialty-acc-num {
        font-family: var(--font-mono);
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--accent);
        position: relative;
        z-index: 1;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
    }
    
    .specialty-acc-card:hover .specialty-acc-num {
        transform: translateX(10px);
        color: var(--bg);
    }

    .specialty-acc-title {
        font-family: var(--font-heading);
        font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
        font-weight: 900;
        text-transform: uppercase;
        color: var(--black);
        margin: 0;
        position: relative;
        z-index: 1;
        transition: color 0.4s ease;
        line-height: 1.1;
    }

    .specialty-acc-card:hover .specialty-acc-title {
        color: var(--bg);
    }
    
    .specialty-acc-icon {
        position: absolute;
        top: 2rem;
        right: 2rem;
        font-size: 1.5rem;
        color: var(--black);
        opacity: 0;
        transform: rotate(-45deg);
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1;
    }
    
    .specialty-acc-card:hover .specialty-acc-icon {
        opacity: 1;
        transform: rotate(0deg);
        color: var(--accent);
    }

    /* Premium Typographic List (For Specialties) */
    .specialty-list-container {
        border-top: 1px solid rgba(17, 17, 17, 0.15);
        display: flex;
        flex-direction: column;
    }
    .specialty-item {
        padding: 2rem 1rem;
        border-bottom: 1px solid rgba(17, 17, 17, 0.15);
        display: flex;
        align-items: center;
        gap: 1.5rem;
        cursor: default;
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        background-color: transparent;
        overflow: hidden;
    }
    @media (min-width: 768px) {
        .specialty-item { padding: 3rem 2rem; gap: 3rem; }
    }
    .specialty-item:hover {
        background-color: rgba(17, 17, 17, 0.03);
    }
    @media (min-width: 768px) {
        .specialty-item:hover { padding-left: 4rem; }
    }
    .specialty-num {
        font-family: var(--font-mono);
        color: var(--accent);
        font-size: 1rem;
        font-weight: 700;
        opacity: 0.5;
        transition: opacity 0.5s;
        flex-shrink: 0;
    }
    .specialty-item:hover .specialty-num {
        opacity: 1;
    }
    .specialty-title {
        font-family: var(--font-heading);
        font-size: clamp(1.5rem, 3.5vw + 1rem, 4.5rem);
        font-weight: 900;
        text-transform: uppercase;
        color: transparent;
        -webkit-text-stroke: 1px var(--black);
        margin: 0;
        line-height: 1;
        transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1), -webkit-text-stroke-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .specialty-item:hover .specialty-title {
        color: var(--black);
        -webkit-text-stroke-color: transparent;
    }
    .specialty-arrow {
        margin-left: auto;
        font-family: var(--font-mono);
        font-size: 2rem;
        line-height: 1;
        color: var(--accent);
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .specialty-item:hover .specialty-arrow {
        opacity: 1;
        transform: translateX(0);
    }

    /* Architectural Data Pillars (Case Study) */
    .case-pillar-container {
        display: grid;
        grid-template-columns: 1fr;
        border-top: 1px solid rgba(17, 17, 17, 0.15);
        border-left: 1px solid rgba(17, 17, 17, 0.15);
        width: 100%;
        margin-top: 2rem;
    }
    @media (min-width: 768px) {
        .case-pillar-container { grid-template-columns: repeat(2, 1fr); margin-top: 3rem; }
    }
    @media (min-width: 1024px) {
        .case-pillar-container { grid-template-columns: repeat(4, 1fr); margin-top: 4rem; }
    }
    
    .case-pillar {
        position: relative;
        padding: 3rem 2rem;
        border-right: 1px solid rgba(17, 17, 17, 0.15);
        border-bottom: 1px solid rgba(17, 17, 17, 0.15);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 320px;
        overflow: hidden;
        transition: border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        background-color: transparent;
        cursor: default;
    }
    @media (min-width: 1024px) {
        .case-pillar { min-height: 420px; padding: 4rem 2.5rem; }
    }

    /* Dark Hover Sweep (No White) */
    .case-pillar::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-color: rgba(17, 17, 17, 0.04);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 0;
    }
    .case-pillar:hover {
        border-color: rgba(17, 17, 17, 0.3);
    }
    .case-pillar:hover::before {
        transform: scaleY(1);
    }

    .case-pillar-content {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
    }

    .case-pillar-num {
        font-family: var(--font-heading);
        font-size: clamp(4rem, 6vw, 6.5rem);
        font-weight: 900;
        line-height: 1;
        color: var(--black); /* Solid fill */
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        margin: 0;
    }
    
    .case-pillar:hover .case-pillar-num {
        color: var(--accent);
        transform: translateY(-8px);
    }

    .case-pillar-label {
        font-family: var(--font-heading); /* Updated to theme font */
        font-size: 1.125rem !important; /* Adjusted for theme font */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: rgba(17, 17, 17, 0.6);
        margin: 0;
        transition: color 0.6s ease;
        max-width: 200px;
    }
    
    .case-pillar:hover .case-pillar-label {
        color: var(--black);
    }

    .case-pillar-icon {
        position: absolute;
        top: 2.5rem;
        right: 2.5rem;
        font-size: 1.5rem;
        font-weight: 300;
        color: var(--black);
        opacity: 0.3;
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        line-height: 1;
    }
    
    .case-pillar:hover .case-pillar-icon {
        opacity: 1;
        color: var(--accent);
        transform: rotate(45deg);
    }

    /* Premium Dual-Pane FAQ (Redesign) */
    .premium-faq-container {
        display: flex;
        flex-direction: column;
        border-top: 1px solid rgba(17, 17, 17, 0.15);
    }
    .premium-faq-item {
        border-bottom: 1px solid rgba(17, 17, 17, 0.15);
        background-color: transparent;
        transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: default;
    }
    .premium-faq-item:hover {
        background-color: rgba(17, 17, 17, 0.03); /* Strictly no white, subtle dark tint */
    }
    .premium-faq-btn {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 3rem 1.5rem;
        cursor: pointer;
        outline: none;
    }
    @media (min-width: 768px) {
        .premium-faq-btn { padding: 4rem 2.5rem; }
    }
    .premium-faq-num {
        font-family: var(--font-mono);
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--accent);
        letter-spacing: 0.1em;
        margin-bottom: 1.5rem;
        display: block;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .premium-faq-item:hover .premium-faq-num {
        transform: translateX(10px);
    }
    .premium-faq-title {
        font-family: var(--font-heading);
        font-size: clamp(1.25rem, 2.5vw + 0.5rem, 2.25rem);
        font-weight: 900;
        text-transform: uppercase;
        color: var(--black);
        line-height: 1.2;
        margin: 0;
        max-width: 90%;
        transition: color 0.4s ease;
    }
    .premium-faq-item:hover .premium-faq-title {
        color: var(--accent);
    }
    .premium-faq-icon-wrap {
        width: 3.5rem;
        height: 3.5rem;
        border: 1px solid rgba(17, 17, 17, 0.15);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .premium-faq-icon {
        font-family: var(--font-mono);
        font-size: 2rem;
        font-weight: 300;
        color: var(--black);
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        line-height: 1;
        margin-top: -2px;
    }
    .premium-faq-item:hover .premium-faq-icon-wrap {
        border-color: var(--accent);
        background-color: var(--accent);
    }
    .premium-faq-item:hover .premium-faq-icon {
        color: var(--black);
    }
    .premium-faq-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .premium-faq-inner {
        padding: 0 1.5rem 3rem 1.5rem;
    }
    @media (min-width: 768px) {
        .premium-faq-inner { padding: 0 2.5rem 4rem 2.5rem; }
    }
    .premium-faq-desc {
        font-family: var(--font-body);
        font-size: 1.125rem;
        line-height: 1.65;
        color: rgba(17, 17, 17, 0.7);
        margin: 0;
        max-width: 45rem;
        border-left: 2px solid var(--accent);
        padding-left: 1.5rem;
        transform: translateY(20px);
        opacity: 0;
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Active State Classes */
    .premium-faq-item.is-open .premium-faq-icon-wrap {
        border-color: var(--black);
        background-color: var(--black);
        transform: rotate(45deg);
    }
    .premium-faq-item.is-open .premium-faq-icon {
        color: var(--bg); /* Using beige theme color instead of white */
    }
    .premium-faq-item.is-open .premium-faq-desc {
        transform: translateY(0);
        opacity: 1;
        transition-delay: 0.1s;
    }
    .premium-faq-item.is-open .premium-faq-title {
        color: var(--black); 
    }