<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Results - groundstate.ai</title>
    <meta name="description" content="Real transformations and social impact - see how groundstate.ai delivers business ROI while creating positive change through our 1:1 nonprofit model.">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* Body and Base Styles */
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            color: #ffffff;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            font-size: 16px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* Hero Section Styles */
        .hero {
            background-image: url('hero-back.jpeg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding: 120px 0 80px;
        }

        
        .hero-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        .hero-content {
            animation: slideInLeft 0.8s ease-out;
            text-align: center;
            width: 100%;
            max-width: 800px;
        }
        
        .hero-title {
            font-size: clamp(1.6rem, 3.5vw, 2.3rem);
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 1.25rem;
            background: linear-gradient(135deg, #ffffff 0%, #e5e5e5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero-subtitle {
            font-size: 1.1rem;
            color: #d1d5db;
            font-weight: 500;
            margin-bottom: 1.25rem;
            line-height: 1.5;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* Navigation Styles - Match Services page */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
            transition: all 0.3s ease;
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0.5rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .nav-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .logo-image {
            height: 32px;
            width: auto;
        }
        
        .logo-text {
            font-size: 1.1rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.5px !important;
            color: #ffffff !important;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
            margin: 0;
            padding: 0;
        }
        
        .nav-link {
            color: #ffffff !important;
            text-decoration: none !important;
            font-weight: 500 !important;
            font-size: 1rem !important;
            transition: all 0.3s ease;
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .nav-link:hover {
            color: #22d3ee;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: linear-gradient(90deg, #4ade80, #22d3ee);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .contact-btn {
            padding: 0.5rem 1.5rem;
            background: transparent;
            border: 2px solid #22d3ee;
            border-radius: 12px;
            color: #22d3ee;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .contact-btn:hover {
            background: #22d3ee;
            color: #000;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(34, 211, 238, 0.3);
        }
        
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }
        
        .bar {
            width: 25px;
            height: 3px;
            background: #ffffff;
            margin: 3px 0;
            transition: 0.3s;
        }
        
        /* Results Section Styles */
        .results-section {
            padding: 40px 0;
            background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
        }
        
        .results-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 0;
        }
        
        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .section-description {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.8);
            max-width: 600px;
            margin: 0 auto 0.25rem auto;
            line-height: 1.6;
        }
        
        .results-grid {
            display: flex;
            gap: 1.5rem;
            margin-top: 1.5rem;
            overflow-x: auto; /* Allow scrolling for navigation */
            padding: 1rem 0;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            position: relative;
            width: 100%; /* Full width to allow scrolling */
            max-width: calc(100% - 100px); /* Account for arrow space */
            margin-left: auto;
            margin-right: auto;
            mask: linear-gradient(90deg, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
            -webkit-mask: linear-gradient(90deg, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
        }

        .results-grid::-webkit-scrollbar {
            height: 6px;
        }

        .results-grid::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            margin: 0 20px;
        }

        .results-grid::-webkit-scrollbar-thumb {
            background: linear-gradient(90deg, #4ade80, #22d3ee);
            border-radius: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
        }

        .results-grid::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(90deg, #22d3ee, #4ade80);
            box-shadow: 0 4px 12px rgba(34, 211, 238, 0.4);
            transform: scaleY(1.2);
        }
        
        /* Smooth scroll momentum */
        .results-grid {
            scroll-padding: 0 1.5rem;
            overscroll-behavior-x: contain;
        }

        /* Scroll indicators */
        .scroll-indicators {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(74, 222, 128, 0.1);
            border: 1px solid rgba(74, 222, 128, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
            opacity: 0;
            pointer-events: none;
        }

        .scroll-indicators:hover {
            background: rgba(74, 222, 128, 0.2);
            transform: translateY(-50%) scale(1.1);
        }

        .scroll-left {
            left: 10px;
        }

        .scroll-right {
            right: 10px;
        }

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

        .results-grid {
            display: flex;
            gap: 2rem;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 2rem 0;
            scrollbar-width: none;
            -ms-overflow-style: none;
            width: 100%;
            max-width: 100%;
            flex-wrap: nowrap;
        }

        .results-grid::-webkit-scrollbar {
            display: none;
        }

        .case-study-card {
            flex-shrink: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            padding: 1.8rem;
            width: 300px;
            min-width: 300px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(20px);
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .case-study-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #4ade80, #22d3ee, #a855f7);
            border-radius: 24px 24px 0 0;
            opacity: 0.8;
            transition: all 0.4s ease;
            pointer-events: none;
        }

        .case-study-card:hover {
            transform: translateY(-12px) scale(1.03);
            box-shadow: 0 32px 64px rgba(0, 0, 0, 0.2), 0 0 40px rgba(74, 222, 128, 0.3);
            border-color: rgba(74, 222, 128, 0.5);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
        }

        .case-study-card:hover::before {
            opacity: 1;
            height: 6px;
            background: linear-gradient(90deg, #4ade80, #22d3ee, #a855f7, #f59e0b);
        }

        /* Case Study Preview/Full Content Display */
        .case-study-preview {
            display: block;
        }

        .case-study-full {
            display: none !important;
        }

        .case-study-card.expanded .case-study-preview {
            display: none;
        }

        .case-study-card.expanded .case-study-full {
            display: block !important;
        }

        /* Case Studies Scroll Container */
        .case-studies-scroll-container {
            position: relative;
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0 100px; /* Adequate padding for arrows */
        }

        .scroll-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(34, 211, 238, 0.2));
            border: 2px solid rgba(74, 222, 128, 0.4);
            color: #ffffff;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 100;
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 24px rgba(74, 222, 128, 0.3);
        }

        .scroll-btn:hover {
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.4), rgba(34, 211, 238, 0.4));
            border-color: rgba(74, 222, 128, 0.7);
            transform: translateY(-50%) scale(1.15);
            box-shadow: 0 12px 32px rgba(74, 222, 128, 0.5);
        }

        .scroll-btn:active {
            transform: translateY(-50%) scale(0.95);
        }

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

        .scroll-btn svg {
            width: 20px;
            height: 20px;
        }

        .scroll-left {
            left: 20px;
            pointer-events: auto !important;
            position: absolute !important;
            display: block !important;
        }

        .scroll-right {
            right: 20px;
            pointer-events: auto !important;
            position: absolute !important;
            display: block !important;
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 768px) {
            .scroll-left {
                left: 10px;
            }
            
            .scroll-right {
                right: 10px;
            }
            
            .case-studies-scroll-container {
                padding: 0 80px;
            }
        }

        /* Modal styles */
        .case-study-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .case-study-modal.active {
            display: flex;
        }

        .modal-content {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            padding: 3rem;
            max-width: 900px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            backdrop-filter: blur(20px);
            position: relative;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        }

        .modal-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 50%;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1.2rem;
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }
        
        .preview-content {
            text-align: center;
        }
        
        .preview-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 0.8rem;
            line-height: 1.3;
            background: linear-gradient(135deg, #ffffff, #e5e7eb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .preview-subtitle {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 1rem;
        }

        .preview-description {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.5;
            margin-bottom: 1.5rem;
        }
        
        .expand-indicator {
            color: #22d3ee;
            font-size: 0.95rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1.5rem;
            padding: 1rem 1.5rem;
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(74, 222, 128, 0.1));
            border: 1px solid rgba(34, 211, 238, 0.4);
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(34, 211, 238, 0.2);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .expand-indicator:hover {
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.25), rgba(74, 222, 128, 0.2));
            border-color: rgba(34, 211, 238, 0.6);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(34, 211, 238, 0.3);
        }

        .expand-indicator:hover::after {
            transform: translateX(3px);
        }
        
        .expand-indicator::after {
            content: '→';
            transition: transform 0.3s ease;
            font-weight: bold;
        }
        
        .case-study-card.expanded .expand-indicator::after {
            transform: rotate(180deg);
        }
        
        .case-study-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #4ade80 0%, #22d3ee 100%);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        
        .case-study-card:hover::before {
            transform: scaleX(1);
        }
        
        .case-study-card:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(74, 222, 128, 0.1);
            border-color: rgba(74, 222, 128, 0.3);
        }
        
        .company-info {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            margin-bottom: 2rem;
        }
        
        .company-logo {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #4ade80, #22d3ee, #a855f7);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: #ffffff;
            font-size: 1.2rem;
            box-shadow: 0 8px 24px rgba(74, 222, 128, 0.4);
            transition: all 0.3s ease;
        }
        
        .case-study-card:hover .company-logo {
            transform: scale(1.1);
            box-shadow: 0 12px 32px rgba(74, 222, 128, 0.6);
        }
        
        .company-details h3 {
            font-size: 1.2rem;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 0.2rem;
            background: linear-gradient(135deg, #ffffff, #e5e7eb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .case-study-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
            justify-content: center;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }

        .badge-industry {
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(34, 211, 238, 0.2));
            border: 1px solid rgba(74, 222, 128, 0.4);
            color: #4ade80;
        }

        .badge-company-size {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(245, 158, 11, 0.2));
            border: 1px solid rgba(168, 85, 247, 0.4);
            color: #a855f7;
        }

        .badge-project-type {
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(245, 158, 11, 0.2));
            border: 1px solid rgba(34, 211, 238, 0.4);
            color: #22d3ee;
        }

        .case-study-card:hover .badge {
            transform: scale(1.05);
        }

        .case-study-card:hover .badge-industry {
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.3), rgba(34, 211, 238, 0.3));
            border-color: rgba(74, 222, 128, 0.6);
            box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
        }

        .case-study-card:hover .badge-company-size {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(245, 158, 11, 0.3));
            border-color: rgba(168, 85, 247, 0.6);
            box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
        }

        .case-study-card:hover .badge-project-type {
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(245, 158, 11, 0.3));
            border-color: rgba(34, 211, 238, 0.6);
            box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3);
        }

        /* Social Proof Section Styles */
        .social-proof-section {
            padding: 60px 0;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
        }

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

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            margin-top: 3rem;
        }

        .testimonial-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 2rem;
            transition: all 0.3s ease;
            backdrop-filter: blur(20px);
        }

        .testimonial-card:hover {
            transform: translateY(-8px);
            border-color: rgba(74, 222, 128, 0.4);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(74, 222, 128, 0.2);
        }

        .testimonial-content {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .testimonial-quote {
            font-size: 1.1rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
            font-style: italic;
            position: relative;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        .testimonial-quote::before {
            content: '"';
            font-size: 2rem;
            color: rgba(74, 222, 128, 0.8);
            position: absolute;
            top: -5px;
            left: -5px;
            font-family: Georgia, serif;
            font-weight: bold;
        }

        .testimonial-quote::after {
            content: '"';
            font-size: 2rem;
            color: rgba(74, 222, 128, 0.8);
            position: absolute;
            bottom: -5px;
            right: -5px;
            font-family: Georgia, serif;
            font-weight: bold;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .author-role {
            font-size: 0.95rem;
            font-weight: 600;
            color: #4ade80;
            background: linear-gradient(135deg, #4ade80, #22d3ee);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @media (max-width: 768px) {
            .social-proof-section {
                padding: 40px 0;
            }
            
            .testimonials-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                margin-top: 2rem;
            }
            
            .testimonial-card {
                padding: 1.5rem;
            }
            
            .testimonial-quote {
                font-size: 1rem;
            }
        }

        .linkedin-note {
            text-align: center;
            margin-top: 2rem;
            padding: 1.5rem;
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(34, 211, 238, 0.1) 100%);
            border: 1px solid rgba(74, 222, 128, 0.3);
            border-radius: 16px;
            backdrop-filter: blur(20px);
        }

        .linkedin-note p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.95rem;
            margin-bottom: 0.5rem;
        }

        .linkedin-note a {
            color: #4ade80;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .linkedin-note a:hover {
            color: #22d3ee;
            text-decoration: underline;
        }

        
        .company-stats {
            display: flex;
            gap: 0.75rem;
            margin-top: 0.5rem;
        }
        
        .stat-badge {
            background: rgba(74, 222, 128, 0.1);
            color: #4ade80;
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .case-study-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 1rem;
            line-height: 1.3;
        }
        
        .challenge, .shift, .outcome, .deliverables {
            margin-bottom: 1.5rem;
        }
        
        .challenge h5, .shift h5, .outcome h5, .deliverables h5 {
            font-size: 1.2rem;
            font-weight: 700;
            background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }
        
        .challenge p, .shift p {
            color: #e5e7eb;
            line-height: 1.7;
            margin-bottom: 0;
        }
        
        .outcome-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .outcome-stat {
            text-align: center;
            padding: 1rem;
            background: rgba(34, 211, 238, 0.1);
            border-radius: 12px;
            border: 1px solid rgba(34, 211, 238, 0.2);
        }
        
        .outcome-stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: #22d3ee;
            display: block;
            margin-bottom: 0.25rem;
        }
        
        .outcome-stat-label {
            font-size: 0.8rem;
            color: #94a3b8;
            font-weight: 500;
        }
        
        .deliverables-list {
            list-style: none;
            padding: 0;
        }
        
        .deliverables-list li {
            color: #e5e7eb;
            padding: 0.5rem 0;
            position: relative;
            padding-left: 1.5rem;
        }
        
        .deliverables-list li::before {
            content: '✓';
            color: #4ade80;
            position: absolute;
            left: 0;
            font-weight: 600;
        }
        
        /* Footer Styles */
        .footer {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            padding: 3rem 0 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 2fr;
            gap: 3rem;
            margin-bottom: 2rem;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .footer-description {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }
        
        .footer-social {
            display: flex;
            gap: 1rem;
        }
        
        .social-link {
            color: rgba(255, 255, 255, 0.7);
            transition: color 0.3s ease;
        }
        
        .social-link:hover {
            color: #4ade80;
        }
        
        .footer-title {
            color: #4ade80;
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 1rem;
        }
        
        .footer-links {
            list-style: none;
            padding: 0;
        }
        
        .footer-links li {
            margin-bottom: 0.5rem;
        }
        
        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-links a:hover {
            color: #4ade80;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }
        
        .newsletter-description {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 1rem;
            line-height: 1.5;
        }
        
        .newsletter-form {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .newsletter-input {
            flex: 1;
            padding: 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.05);
            color: #ffffff;
            font-size: 0.9rem;
        }
        
        .newsletter-input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        
        .newsletter-btn {
            padding: 0.75rem 1.5rem;
            background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
            color: #000;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .newsletter-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
        }
        
        .company-section {
            margin-left: 2rem;
        }
        
        /* Hide Services and Company sections in footer on mobile */
        @media screen and (max-width: 768px) {
            .footer-links-section {
                display: none !important;
            }
            
            .company-section {
                display: none !important;
            }
            
            /* Hide contact buttons on mobile */
            .contact-btn {
                display: none !important;
            }
            
            /* Make hero subtitle more concise on mobile */
            .hero-subtitle {
                font-size: 0 !important;
            }
            
            .hero-subtitle::after {
                content: "Measurable business value delivered";
                display: block !important;
                font-size: 1rem !important;
                color: #d1d5db !important;
                font-weight: 500 !important;
                margin-bottom: 1.25rem !important;
                line-height: 1.5 !important;
            }
            
            /* Fix footer layout on mobile */
            .footer-brand {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                margin-bottom: 1rem !important;
                gap: 1rem !important;
            }
            
            .footer-logo {
                margin-bottom: 0 !important;
                display: flex !important;
                align-items: center !important;
                gap: 0.5rem !important;
            }
            
            .footer-description {
                margin: 0 !important;
                font-size: 0.9rem !important;
                color: rgba(255, 255, 255, 0.8) !important;
            }
            
            .footer-logo {
                margin-bottom: 0 !important;
            }
            
            .footer-social {
                margin-bottom: 0 !important;
            }
            
            /* Make hamburger menu visible on mobile */
            .hamburger {
                display: flex !important;
                flex-direction: column !important;
                cursor: pointer !important;
                padding: 0.5rem !important;
            }
            
            .hamburger .bar {
                width: 25px !important;
                height: 3px !important;
                background-color: #ffffff !important;
                margin: 1px 0 !important;
                transition: 0.3s !important;
                border-radius: 2px !important;
            }
            
            /* Fix mobile navigation menu spacing */
            .nav-menu {
                padding: 1rem 0 !important;
                gap: 0.5rem !important;
            }
            
            .nav-menu li {
                margin: 0 !important;
                padding: 0.5rem 0 !important;
            }
            
            .nav-link {
                padding: 0.5rem 1rem !important;
                display: block !important;
                text-align: center !important;
            }
            
            /* Fix mobile scrolling */
            html {
                -webkit-overflow-scrolling: touch;
            }
            
            body {
                position: relative;
                height: auto;
                min-height: 100vh;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            /* Ensure main content can scroll */
            main, .hero {
                position: relative;
                z-index: 1;
            }
            
            .navbar {
                position: fixed;
                top: 0;
                z-index: 1000;
            }
            
            /* Active hamburger menu styles */
            .hamburger.active .bar:nth-child(1) {
                transform: rotate(-45deg) translate(-5px, 6px) !important;
            }
            
            .hamburger.active .bar:nth-child(2) {
                opacity: 0 !important;
            }
            
            .hamburger.active .bar:nth-child(3) {
                transform: rotate(45deg) translate(-5px, -6px) !important;
            }
            
            .nav-menu.active {
                display: flex !important;
                flex-direction: column !important;
                position: absolute !important;
                top: 100% !important;
                left: 0 !important;
                right: 0 !important;
                background: rgba(10, 10, 10, 0.98) !important;
                backdrop-filter: blur(10px) !important;
                border-radius: 0 0 16px 16px !important;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
                z-index: 1000 !important;
            }
        }
        
        .footer-links a {
            white-space: nowrap;
        }
        
        .social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            background: rgba(74, 222, 128, 0.2);
            transform: translateY(-2px);
        }
        
        /* Responsive Design */
        @media screen and (max-width: 768px) {
            .hero {
                padding: 100px 0 60px;
            }
            
            .results-section {
                padding: 30px 0;
            }
            
            .results-grid {
                gap: 1rem;
                padding: 0.5rem 0;
                margin-top: 1rem;
                width: 100%;
                max-width: calc(100% - 80px);
                overflow-x: auto;
            }
            
            .case-study-card {
                width: 260px;
                padding: 1.3rem;
            }
            
            .results-container {
                padding: 0 2rem;
            }
            
            .scroll-indicators {
                width: 35px;
                height: 35px;
            }
            
            .scroll-left {
                left: 10px;
            }
            
            .scroll-right {
                right: 10px;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
                gap: 2rem;
                text-align: center;
            }
            
            .company-stats {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .outcome-stats {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Mobile Responsive Styles for Results Page */
        @media screen and (max-width: 768px) {
            .results-grid {
                display: block !important;
                overflow-x: visible !important;
                gap: 1.5rem !important;
                padding: 1rem !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .case-study-card {
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                padding: 1.5rem !important;
                border-radius: 16px !important;
                margin-bottom: 1.5rem !important;
                flex-shrink: 1 !important;
            }

            .case-study-header {
                margin-bottom: 1rem !important;
            }

            .case-study-title {
                font-size: 1.3rem !important;
                line-height: 1.3 !important;
            }

            .case-study-meta {
                flex-direction: column !important;
                gap: 0.5rem !important;
                align-items: flex-start !important;
            }

            .case-study-description {
                font-size: 1rem !important;
                line-height: 1.5 !important;
            }

            .case-study-outcomes {
                margin-top: 1rem !important;
            }

            .outcomes-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
            }

            .outcome-stat {
                padding: 0.75rem !important;
                text-align: center !important;
            }

            .outcome-stat .stat-number {
                font-size: 1.5rem !important;
            }

            .outcome-stat .stat-label {
                font-size: 0.8rem !important;
            }

            .case-study-tags {
                flex-wrap: wrap !important;
                gap: 0.5rem !important;
            }

            .case-study-tag {
                font-size: 0.75rem !important;
                padding: 0.25rem 0.75rem !important;
            }
            
            /* Hide scroll buttons on mobile */
            .scroll-btn {
                display: none !important;
            }
            
            /* Adjust case studies container */
            .case-studies-scroll-container {
                padding: 0 1rem !important;
            }

            .testimonial-card {
                padding: 1.5rem !important;
                margin: 1rem 0;
            }

            .testimonial-text {
                font-size: 1rem;
                line-height: 1.5;
            }

            .testimonial-author {
                margin-top: 1rem;
            }

            .testimonial-author-name {
                font-size: 1rem;
            }

            .testimonial-author-title {
                font-size: 0.9rem;
            }

            .scroll-btn {
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
            }

            .scroll-indicators {
                width: 35px;
                height: 35px;
            }

            .modal-content {
                padding: 2rem;
                margin: 1rem;
                max-height: 85vh;
            }

            .modal-close {
                width: 40px;
                height: 40px;
                font-size: 1.5rem;
            }

            .expand-indicator {
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
            }
        }

        @media screen and (max-width: 480px) {
            .case-study-card {
                padding: 1rem;
            }

            .case-study-title {
                font-size: 1.2rem;
            }

            .outcome-stat .stat-number {
                font-size: 1.3rem;
            }

            .testimonial-card {
                padding: 1rem;
            }

            .modal-content {
                padding: 1.5rem;
                margin: 0.5rem;
            }

            .scroll-btn {
                width: 45px;
                height: 45px;
            }

            .scroll-indicators {
                width: 30px;
                height: 30px;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <img src="groundstatelogo.png" alt="groundstate" class="logo-image">
                <span class="logo-text">groundstate</span>
            </div>
            <ul class="nav-menu">
                <li class="nav-item"><a href="index.html" class="nav-link">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
                        <path d="M9 22V12H15V22" stroke="white" stroke-width="2" stroke-linejoin="round"/>
                    </svg>
                </a></li>
                <li class="nav-item"><a href="services.html" class="nav-link">Services</a></li>
                <li class="nav-item"><a href="story.html" class="nav-link">Story</a></li>
                <li class="nav-item"><a href="results.html" class="nav-link">Results</a></li>
                <li class="nav-item"><a href="score.html" class="nav-link">AI Score</a></li>
            </ul>
            <a href="https://mail.google.com/mail/?view=cm&fs=1&to=dan@groundstate.ai&su=Contact%20from%20Website" class="contact-btn" target="_blank">Contact</a>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </div>
    </nav>

    <!-- Results Hero -->
    <section class="hero">
        <div class="hero-container">
            <div class="hero-content">
                <h1 class="hero-title">Results</h1>
                <div class="hero-subtitle">
                    See how we deliver measurable business value.
                </div>
            </div>
        </div>
    </section>

    <!-- Results Section -->
    <section class="results-section">
        <div class="results-container">
            <div class="section-header">
                <h2 class="section-title">Case Studies</h2>
                <p class="section-description">
                    Real experience. Bold ideas. Real results.
                </p>
            </div>
            <div class="case-studies-scroll-container">
                <button class="scroll-btn scroll-left" onclick="console.log('Left button clicked'); scrollLeftCards();" aria-label="Scroll left" style="background: rgba(74, 222, 128, 0.3); border: 2px solid #4ade80;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            <div class="results-grid">
                <!-- ZenSense Startup Case Study -->
                <div class="case-study-card" onclick="openCaseStudy('zensense')">
                    <!-- Preview Content -->
                    <div class="case-study-preview">
                        <div class="preview-content">
                            <h2 class="preview-title">From Idea to Product: Launching ZenSense, a Mindful AI App</h2>
                            <div class="case-study-badges">
                                <span class="badge badge-industry">Startup</span>
                                <span class="badge badge-project-type">Internal</span>
                                </div>
                            <p class="preview-description">Rapid prototyping & user testing transformed ZenSense to a Chrome extension in weeks.</p>
                            <div class="expand-indicator">View Case Study</div>
                        </div>
                    </div>
                    
                    <!-- Full Content -->
                    <div class="case-study-full">
                        <h2 class="case-study-title">From Idea to Product: Launching ZenSense, a Mindful AI App</h2>
                        <p class="company-info"><strong>Solo Founder — Early-Stage Startup</strong></p>
                    
                    <div class="challenge">
                        <h5>The Challenge</h5>
                        <p>How can AI be harnessed to enhance focus and intention rather than distraction? As a solopreneur, Dan needed to validate the concept quickly while balancing limited time and resources.</p>
                        </div>

                    <div class="shift">
                        <h5>The Shift</h5>
                        <p>Through rapid prototyping and user testing, ZenSense evolved from concept to functional Chrome extension in weeks. Early pilots measured real user behavior and informed future feature design.</p>
                        </div>

                    <div class="outcome">
                        <h5>The Outcome</h5>
                        <ul class="results-list">
                            <li>1,000+ hours of hands-on AI research embedded into product design</li>
                            <li>A functional MVP live-tested with early adopters</li>
                            <li>Proof of concept validating market need for mindful AI tools</li>
                        </ul>
                    </div>

                    <div class="deliverables">
                        <h5>Deliverables</h5>
                        <ul class="deliverables-list">
                            <li>AI-Backed Productivity Tracker</li>
                            <li>User Behavior & Engagement Dashboard</li>
                            <li>Early-Adopter Pilot Program</li>
                            <li>Future Feature Roadmap</li>
                            </ul>
                    </div>
                    
                    <div class="expand-indicator">Click to collapse</div>
                    </div>
                </div>

                <!-- Nonprofit Case Study -->
                <div class="case-study-card" onclick="openCaseStudy('nonprofit')">
                    <!-- Preview Content -->
                    <div class="case-study-preview">
                        <div class="preview-content">
                            <h2 class="preview-title">From Unclear AI Potential to a Practical Nonprofit Strategy</h2>
                            <div class="case-study-badges">
                                <span class="badge badge-industry">Nonprofit</span>
                                <span class="badge badge-project-type">Client</span>
                                </div>
                            <p class="preview-description">Focused AI sprint identified high-value opportunities aligned to mission & budget.</p>
                            <div class="expand-indicator">View Case Study</div>
                        </div>
                    </div>
                    
                    <!-- Full Content -->
                    <div class="case-study-full">
                        <h2 class="case-study-title">From Unclear AI Potential to a Practical Nonprofit Strategy</h2>
                        <p class="company-info"><strong>Second Harvest Northland — Regional Nonprofit</strong></p>
                    
                    <div class="challenge">
                        <h5>The Challenge</h5>
                        <p>Leaders wanted to understand how AI could support food access and donor engagement but faced limited resources, overwhelming vendor noise, and uncertainty about where to begin.</p>
                    </div>
                    
                    <div class="shift">
                        <h5>The Shift</h5>
                        <p>Through a focused AI strategy sprint, we identified the most relevant use cases for food distribution, community outreach, and reporting. Ideas were stress-tested against budget and capacity constraints, prioritizing only what could deliver real impact.</p>
                    </div>
                    
                    <div class="outcome">
                        <h5>The Outcome</h5>
                        <ul class="results-list">
                            <li>Clear roadmap of high-value AI opportunities aligned to mission</li>
                            <li>Confidence to avoid vendor traps and shiny-object distractions</li>
                            <li>Early experiments designed to scale sustainably within nonprofit limits</li>
                        </ul>
                    </div>
                    
                    <div class="deliverables">
                        <h5>Deliverables</h5>
                        <ul class="deliverables-list">
                            <li>AI Readiness & Opportunity Assessment</li>
                            <li>Prioritized AI Roadmap for Nonprofit Impact</li>
                            <li>Executive Briefing for Board & Donors</li>
                            <li>Pilot Concept for AI Agent</li>
                        </ul>
                    </div>
                    
                    <div class="expand-indicator">Click to collapse</div>
                    </div>
                </div>

                <!-- Fortune 50 Technology Company -->
                <div class="case-study-card" onclick="openCaseStudy('fortune50')">
                    <!-- Preview Content -->
                    <div class="case-study-preview">
                        <div class="preview-content">
                            <h2 class="preview-title">From Fragmented Dashboards to Scalable, AI-Powered People Insights</h2>
                            <div class="case-study-badges">
                                <span class="badge badge-industry">Tech</span>
                                <span class="badge badge-company-size">F50</span>
                                <span class="badge badge-project-type">Client</span>
                                </div>
                            <p class="preview-description">Unified AI-powered analytics. Reduced time-to-insight from weeks to hours.</p>
                            <div class="expand-indicator">View Case Study</div>
                        </div>
                    </div>
                    
                    <!-- Full Content -->
                    <div class="case-study-full">
                        <h2 class="case-study-title">From Fragmented Dashboards to Scalable, AI-Powered People Insights</h2>
                        <p class="company-info"><strong>Fortune 50 Technology Company — $6B Revenue | 25,000 Employees</strong></p>
                    
                    <div class="challenge">
                        <h5>The Challenge</h5>
                            <p>The People Analytics function was buried in disconnected dashboards and reactive reporting. Teams struggled to scale insights across a global workforce.</p>
                    </div>
                    
                    <div class="shift">
                        <h5>The Shift</h5>
                        <p>Dan led the design and rollout of a unified People Analytics strategy, combining advanced AI, a centralized data stack, and a new enterprise-wide intake model co-developed with the Chief Data Officer.</p>
                    </div>
                    
                    <div class="outcome">
                        <h5>The Outcome</h5>
                        <ul class="results-list">
                            <li>AI-powered insights delivered across business units</li>
                            <li>Global alignment on analytics priorities and governance</li>
                            <li>A scalable operating model for HR decision support</li>
                        </ul>
            </div>

                    <div class="deliverables">
                        <h5>Deliverables</h5>
                        <ul class="deliverables-list">
                            <li>Unified People Analytics Playbook</li>
                            <li>AI-Driven Intake System</li>
                            <li>Enterprise Analytics Stack</li>
                            <li>Modern Governance Framework</li>
                        </ul>
                    </div>
                    
                    <div class="expand-indicator">Click to collapse</div>
                    </div>
                </div>

                <!-- Fortune 500 E-Commerce Company -->
                <div class="case-study-card" onclick="openCaseStudy('fortune500')">
                    <!-- Preview Content -->
                    <div class="case-study-preview">
                        <div class="preview-content">
                            <h2 class="preview-title">From Gut-Feel Talent Strategy to Predictive, Data-Led Engagement</h2>
                            <div class="case-study-badges">
                                <span class="badge badge-industry">E-Com</span>
                                <span class="badge badge-company-size">F500</span>
                                <span class="badge badge-project-type">Client</span>
                                </div>
                            <p class="preview-description">AI-powered talent acquisition automation. Reduced manual work 60%.</p>
                            <div class="expand-indicator">View Case Study</div>
                        </div>
                    </div>
                    
                    <!-- Full Content -->
                    <div class="case-study-full">
                        <h2 class="case-study-title">From Gut-Feel Talent Strategy to Predictive, Data-Led Engagement</h2>
                        <p class="company-info"><strong>Fortune 500 E-Commerce Company — $8B Revenue | 20,000 Employees</strong></p>
                    
                    <div class="challenge">
                        <h5>The Challenge</h5>
                        <p>The company needed a faster, smarter way to understand employee sentiment, attrition risk, and hiring dynamics — at scale.</p>
                    </div>
                    
                    <div class="shift">
                        <h5>The Shift</h5>
                        <p>We introduced predictive attrition models, a real-time sentiment tool, and monthly data-to-exec briefings that transformed talent decisions from reactive to proactive.</p>
                    </div>
                    
                    <div class="outcome">
                        <h5>The Outcome</h5>
                        <ul class="results-list">
                            <li>15% lift in engagement and productivity</li>
                            <li>Accelerated hiring through candidate AI outreach</li>
                            <li>Monthly exec insights driving strategic HR investments</li>
                        </ul>
                    </div>
                    
                    <div class="deliverables">
                        <h5>Deliverables</h5>
                        <ul class="deliverables-list">
                            <li>People Analytics Playbook</li>
                            <li>AI Sentiment & Attrition Tools</li>
                            <li>Talent Analytics Dashboard</li>
                            <li>Capability-Building Labs</li>
                            <li>AI-Supported Hiring Experiments</li>
                        </ul>
                    </div>
                    
                    <div class="expand-indicator">Click to collapse</div>
                    </div>
                </div>

                <!-- Fortune 50 Food & Beverage Company -->
                <div class="case-study-card" onclick="openCaseStudy('fortune50-food')">
                    <!-- Preview Content -->
                    <div class="case-study-preview">
                        <div class="preview-content">
                            <h2 class="preview-title">From Slow Reports to Real-Time, DE&I-Driven Workforce Decisions</h2>
                            <div class="case-study-badges">
                                <span class="badge badge-industry">F&B</span>
                                <span class="badge badge-company-size">F50</span>
                                <span class="badge badge-project-type">Internal</span>
                                </div>
                            <p class="preview-description">AI-powered compliance management. Automated tracking across all regions.</p>
                            <div class="expand-indicator">View Case Study</div>
                        </div>
                    </div>
                    
                    <!-- Full Content -->
                    <div class="case-study-full">
                        <h2 class="case-study-title">From Slow Reports to Real-Time, DE&I-Driven Workforce Decisions</h2>
                        <p class="company-info"><strong>Fortune 50 Food & Beverage Company — $130B Revenue | 155,000 Employees</strong></p>
                    
                    <div class="challenge">
                        <h5>The Challenge</h5>
                        <p>Lagging data systems made workforce decisions reactive and DE&I planning difficult to track in real time.</p>
                    </div>
                    
                    <div class="shift">
                        <h5>The Shift</h5>
                        <p>We reengineered the analytics backbone using AWS and Cloudera, built a live Organizational Health dashboard, and introduced forecasting tools that spotlighted DE&I risks early.</p>
                    </div>
                    
                    <div class="outcome">
                        <h5>The Outcome</h5>
                        <ul class="results-list">
                            <li>40× faster analytics delivery</li>
                            <li>DE&I progress tracked in real time</li>
                            <li>Leaders empowered with nudging-based decision tools</li>
                        </ul>
                    </div>
                    
                    <div class="deliverables">
                        <h5>Deliverables</h5>
                        <ul class="deliverables-list">
                            <li>Real-Time State of Talent Dashboard</li>
                            <li>Behavioral Nudging App</li>
                            <li>Modernized Data Warehouse</li>
                            <li>Chatbot for Internal Talent Queries</li>
                            <li>DE&I Forecasting Tools</li>
                        </ul>
                    </div>
                    
                    <div class="expand-indicator">Click to collapse</div>
                    </div>
                </div>


                                </div>
                <button class="scroll-btn scroll-right" onclick="scrollRight()" aria-label="Scroll right">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
                            </div>
                        </div>
    </section>

    <!-- Social Proof Section -->
    <section class="social-proof-section">
        <div class="social-proof-container">
            <div class="section-header">
                <h2 class="section-title">What Leaders Say</h2>
                <p class="section-description">
                    Trusted by forward-thinking organizations.
                </p>
                            </div>
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <div class="testimonial-quote">
                            Dan is one of the few leaders who can seamlessly bridge technology, business, and people. He raised the level of People Analytics with creative solutions that delivered tangible results.
                        </div>
                        <div class="testimonial-author">
                            <div class="author-role">⭐ Director, People Tech & Analytics</div>
                    </div>
                    </div>
                    </div>
                    
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <div class="testimonial-quote">
                            Beyond his role leading People Analytics, Dan helped shape enterprise analytics strategy. He's solution-oriented, creative, and empowers teams across the organization.
                            </div>
                        <div class="testimonial-author">
                            <div class="author-role">⭐ Director, Analytics, Global Tech</div>
                            </div>
                        </div>
                    </div>
                    
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <div class="testimonial-quote">
                            Dan combines deep technical expertise with clear strategic vision. He has a rare ability to translate complex ideas into inspiring possibilities that drive action.
                        </div>
                        <div class="testimonial-author">
                            <div class="author-role">⭐ AI & Analytics Leader</div>
                        </div>
                    </div>
                    </div>
                    
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <div class="testimonial-quote">
                            Dan is a big thinker who pushes for better processes and technologies. He's a forward-looking leader with genuine care for his people.
                    </div>
                        <div class="testimonial-author">
                            <div class="author-role">⭐ People Analytics Leader</div>
                </div>
                </div>
                </div>
            </div>
            <div class="linkedin-note">
                <p>These testimonials are drawn from <a href="https://www.linkedin.com/in/djhouston/" target="_blank">LinkedIn recommendations</a> by colleagues and internal clients, thoughtfully refined for clarity.</p>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-content">
                <div class="footer-brand">
                    <div class="footer-logo">
                        <img src="groundstatelogo.png" alt="groundstate" style="height: 32px; width: auto;">
                        <span style="font-size: 1.1rem; font-weight: 700; color: #ffffff;">groundstate</span>
                    </div>
                    <p class="footer-description" style="white-space: normal;">
                        <span style="white-space: nowrap;">We help organizations redefine AI maturity,</span><br>
                        from scaled technology to scaled thinking.
                    </p>
                    <div class="footer-social">
                        <a href="https://www.linkedin.com/in/djhouston/" class="social-link" aria-label="LinkedIn">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                            </svg>
                        </a>
                    </div>
                </div>
                
                <div class="footer-links-section">
                    <h4 class="footer-title">Services</h4>
                    <ul class="footer-links">
                        <li><a href="services.html">groundstate Score</a></li>
                        <li><a href="services.html">groundstate Strategy</a></li>
                        <li><a href="services.html">groundstate Sprint</a></li>
                    </ul>
                </div>
                
                <div class="footer-links-section company-section">
                    <h4 class="footer-title">Resources</h4>
                    <ul class="footer-links">
                        <li><a href="https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7384303785218801664">Newsletter</a></li>
                        <li><a href="services.html#how-we-deliver">Pricing</a></li>
                        <li><a href="#faq">FAQ</a></li>
                    </ul>
                </div>
                
                <!-- Contact -->
                <div class="footer-section">
                    <h4 class="footer-title">CONTACT US</h4>
                    <p class="newsletter-description" style="white-space: nowrap;">
                        Have a question? Send us a message directly.
                    </p>
                    <div style="margin-top: 1rem;">
                        <p style="color: #4ade80; font-size: 0.9rem; font-weight: 600; margin: 0;">dan@groundstate.ai</p>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2025 Ground State LLC. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Floating AI Score Button -->
    <div id="floatingAIScore" class="floating-ai-score" style="position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.5s ease;">
        <a href="score.html?start=survey" class="floating-ai-score-btn" style="background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%); color: #000; border: none; border-radius: 50px; padding: 1rem 1.5rem; font-weight: 700; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; text-decoration: none; box-shadow: 0 8px 25px rgba(74, 222, 128, 0.4); transition: all 0.3s ease;">
            <span class="floating-ai-score-text">Unlock Your Free AI Score Now</span>
            <span class="floating-ai-score-arrow" style="font-size: 1.2rem; transition: transform 0.3s ease;">→</span>
        </a>
    </div>

    <!-- Case Study Modal -->
    <div id="caseStudyModal" class="case-study-modal">
        <div class="modal-backdrop" onclick="closeCaseStudy()"></div>
        <div class="modal-content">
            <button class="modal-close" onclick="closeCaseStudy()">&times;</button>
            <div id="modalCaseStudyContent">
                <!-- Case study content will be populated here -->
            </div>
        </div>
    </div>

    <script>
        function toggleCaseStudy(card) {
            card.classList.toggle('expanded');
        }

        function openCaseStudy(studyId) {
            const modal = document.getElementById('caseStudyModal');
            const modalContent = document.getElementById('modalCaseStudyContent');
            
            // Find the case study card with the matching ID
            const caseStudyCard = document.querySelector(`[onclick="openCaseStudy('${studyId}')"]`);
            if (caseStudyCard) {
                // Get the full content from the case study card
                const fullContent = caseStudyCard.querySelector('.case-study-full');
                if (fullContent) {
                    modalContent.innerHTML = fullContent.innerHTML;
                    modal.classList.add('active');
                    document.body.style.overflow = 'hidden'; // Prevent background scrolling
                }
            }
        }

        function closeCaseStudy() {
            const modal = document.getElementById('caseStudyModal');
            modal.classList.remove('active');
            document.body.style.overflow = 'auto'; // Restore scrolling
        }

        // Close modal with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeCaseStudy();
            }
        });

        let currentSet = 0; // Track which set of 3 cards we're showing

        function scrollLeftCards() {
            console.log('=== LEFT SCROLL CLICKED ===');
            const resultsGrid = document.querySelector('.results-grid');
            if (!resultsGrid) {
                console.error('Results grid not found');
                return;
            }
            
            console.log('Before scroll - position:', resultsGrid.scrollLeft);
            console.log('Scroll width:', resultsGrid.scrollWidth);
            console.log('Client width:', resultsGrid.clientWidth);
            console.log('Max scroll:', resultsGrid.scrollWidth - resultsGrid.clientWidth);
            
            // Multiple scroll methods for maximum compatibility
            const currentScroll = resultsGrid.scrollLeft;
            const scrollStep = 400;
            const newPosition = Math.max(0, currentScroll - scrollStep);
            
            console.log('Scrolling from', currentScroll, 'to', newPosition);
            
            // Method 1: Try scrollTo with smooth behavior
            try {
                resultsGrid.scrollTo({
                    left: newPosition,
                    behavior: 'smooth'
                });
            } catch (e) {
                console.log('Method 1 failed, trying method 2');
                // Method 2: Direct assignment
                resultsGrid.scrollLeft = newPosition;
            }
            
            // Force scroll if needed
            setTimeout(() => {
                if (resultsGrid.scrollLeft === currentScroll) {
                    console.log('Scroll not working, forcing scroll');
                    resultsGrid.scrollLeft = newPosition;
                }
            }, 10);
            
            // Method 3: Fallback using scrollBy
            setTimeout(() => {
                console.log('After scroll - position:', resultsGrid.scrollLeft);
                if (Math.abs(resultsGrid.scrollLeft - newPosition) > 10) {
                    console.log('Using fallback scroll method');
                    resultsGrid.scrollLeft = newPosition;
                }
            }, 50);
            
            // Update buttons after a short delay
            setTimeout(updateScrollButtons, 200);
        }

        function scrollRight() {
            console.log('=== RIGHT SCROLL CLICKED ===');
            const resultsGrid = document.querySelector('.results-grid');
            if (!resultsGrid) {
                console.error('Results grid not found');
                return;
            }
            
            console.log('Before scroll - position:', resultsGrid.scrollLeft);
            
            // Simple and reliable scroll method
            const currentScroll = resultsGrid.scrollLeft;
            const scrollStep = 400; // Fixed scroll amount
            const maxScroll = resultsGrid.scrollWidth - resultsGrid.clientWidth;
            const newPosition = Math.min(maxScroll, currentScroll + scrollStep);
            
            console.log('Scrolling from', currentScroll, 'to', newPosition);
            
            resultsGrid.scrollTo({
                left: newPosition,
                behavior: 'smooth'
            });
            
            // Update buttons after a short delay
            setTimeout(updateScrollButtons, 100);
        }

        // Update scroll button states
        function updateScrollButtons() {
            const resultsGrid = document.querySelector('.results-grid');
            const leftBtn = document.querySelector('.scroll-left');
            const rightBtn = document.querySelector('.scroll-right');
            
            if (!resultsGrid || !leftBtn || !rightBtn) return;
            
            const maxScroll = resultsGrid.scrollWidth - resultsGrid.clientWidth;
            const scrollLeft = resultsGrid.scrollLeft;
            
            // Enable/disable buttons based on scroll position
            leftBtn.disabled = scrollLeft <= 10;
            rightBtn.disabled = scrollLeft >= maxScroll - 10;
            
            // Update opacity for visual feedback
            leftBtn.style.opacity = scrollLeft > 10 ? '1' : '0.3';
            rightBtn.style.opacity = scrollLeft < maxScroll - 10 ? '1' : '0.3';
        }

        // Simple scroll functionality
        document.addEventListener('DOMContentLoaded', function() {
            const resultsGrid = document.querySelector('.results-grid');
            console.log('=== DOM LOADED ===');
            console.log('Results grid found:', !!resultsGrid);
            
            if (!resultsGrid) {
                console.error('Results grid not found on DOM load!');
                return;
            }
            
            console.log('Grid scroll width:', resultsGrid.scrollWidth);
            console.log('Grid client width:', resultsGrid.clientWidth);
            console.log('Grid current scroll:', resultsGrid.scrollLeft);

            // Update indicators on scroll
            resultsGrid.addEventListener('scroll', updateScrollButtons);
            
            // Initial update
            updateScrollButtons();

            // Add keyboard navigation
            resultsGrid.addEventListener('keydown', function(e) {
                if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
                    e.preventDefault();
                    if (e.key === 'ArrowLeft') {
                        scrollLeftCards();
                    } else {
                        scrollRight();
                    }
                }
            });

            // Make the grid focusable for keyboard navigation
            resultsGrid.setAttribute('tabindex', '0');
            resultsGrid.setAttribute('role', 'region');
            resultsGrid.setAttribute('aria-label', 'Case studies carousel');
        });
    </script>

    <script>
        // Floating AI Score Button Visibility Control
        document.addEventListener('DOMContentLoaded', function() {
            const floatingButton = document.getElementById('floatingAIScore');
            const whatLeadersSaySection = document.querySelector('.social-proof-section');
            
            if (floatingButton && whatLeadersSaySection) {
                function checkScrollPosition() {
                    const sectionRect = whatLeadersSaySection.getBoundingClientRect();
                    const windowHeight = window.innerHeight;
                    
                    // Show button when user reaches the "What Leaders Say" section
                    if (sectionRect.top < windowHeight * 0.7) {
                        floatingButton.style.opacity = '1';
                        floatingButton.style.visibility = 'visible';
                    } else {
                        floatingButton.style.opacity = '0';
                        floatingButton.style.visibility = 'hidden';
                    }
                }
                
                // Check on scroll
                window.addEventListener('scroll', checkScrollPosition);
                
                // Initial check
                checkScrollPosition();
            }
        });
    </script>

    <!-- Custom Cursor -->
    <div class="cursor"></div>
    <div class="cursor-follower"></div>

    <script>
        // Custom Cursor JavaScript
        document.addEventListener('DOMContentLoaded', function() {
            const cursor = document.querySelector('.cursor');
            const cursorFollower = document.querySelector('.cursor-follower');

            // Debug: Check if elements exist
            console.log('Cursor element found:', !!cursor);
            console.log('Cursor follower element found:', !!cursorFollower);

            if (cursor && cursorFollower) {
                // Make sure they're visible initially
                cursor.style.opacity = '1';
                cursorFollower.style.opacity = '1';
                
                // Set initial position to center of screen with essential styling
                cursor.style.left = '50vw';
                cursor.style.top = '50vh';
                cursor.style.position = 'fixed';
                cursor.style.width = '24px';
                cursor.style.height = '24px';
                cursor.style.background = '#4ade80';
                cursor.style.borderRadius = '50%';
                cursor.style.zIndex = '9999';
                cursor.style.pointerEvents = 'none';
                cursor.style.transform = 'translate(-50%, -50%)';
                cursor.style.transition = 'all 0.2s ease';
                
                cursorFollower.style.left = '50vw';
                cursorFollower.style.top = '50vh';
                cursorFollower.style.position = 'fixed';
                cursorFollower.style.zIndex = '9998';
                cursorFollower.style.pointerEvents = 'none';
                cursorFollower.style.transform = 'translate(-50%, -50%)';
                cursorFollower.style.transition = 'all 0.15s ease';
                
                // Update cursor position - both elements move together
                document.addEventListener('mousemove', (e) => {
                    const mouseX = e.clientX;
                    const mouseY = e.clientY;
                    
                    cursor.style.left = mouseX + 'px';
                    cursor.style.top = mouseY + 'px';
                    
                    cursorFollower.style.left = mouseX + 'px';
                    cursorFollower.style.top = mouseY + 'px';
                    
                    console.log('Mouse moved to:', mouseX, mouseY);
                });

                // Expand cursor on hover over clickable elements
                const clickableElements = document.querySelectorAll('a, button, .cta-primary, .cta-secondary, .contact-btn, .metric-card, .score-card, .hamburger, .video-preview, .comparison-card, .layer-card, .principle-tab, .detail-title, .impact-feature, .final-cta-button, .modal-close, .demo-btn, .rating-option, .option-item, .checklist-item, .action-item, .popup-close');

                clickableElements.forEach(element => {
                    element.addEventListener('mouseenter', () => {
                        cursor.classList.add('expand');
                        cursorFollower.classList.add('expand');
                        
                        // Apply expand styling directly
                        cursor.style.width = '6px';
                        cursor.style.height = '6px';
                        cursor.style.background = '#22d3ee';
                        cursorFollower.style.width = '40px';
                        cursorFollower.style.height = '40px';
                        cursorFollower.style.borderColor = 'rgba(255, 255, 255, 0.8)';
                        
                        console.log('Cursor expanded on hover');
                    });
                    
                    element.addEventListener('mouseleave', () => {
                        cursor.classList.remove('expand');
                        cursorFollower.classList.remove('expand');
                        
                        // Restore normal styling
                        cursor.style.width = '24px';
                        cursor.style.height = '24px';
                        cursor.style.background = '#4ade80';
                        cursorFollower.style.width = '32px';
                        cursorFollower.style.height = '32px';
                        cursorFollower.style.borderColor = 'rgba(255, 255, 255, 0.5)';
                        
                        console.log('Cursor normal size');
                    });
                });

                // Hide cursor when leaving the page
                document.addEventListener('mouseleave', () => {
                    cursor.style.opacity = '0';
                    cursorFollower.style.opacity = '0';
                });

                // Show cursor when entering the page  
                document.addEventListener('mouseenter', () => {
                    cursor.style.opacity = '1';
                    cursorFollower.style.opacity = '1';
                });
                
                console.log('Custom cursor initialized successfully on results page');
                console.log('Cursor position:', cursor.style.left, cursor.style.top);
                console.log('Cursor display:', getComputedStyle(cursor).display);
                console.log('Cursor opacity:', getComputedStyle(cursor).opacity);
            } else {
                console.log('Custom cursor elements not found on results page');
            }
        });
    </script>

    <script src="script.js"></script>
    <script>
        // Debug hamburger menu
        document.addEventListener('DOMContentLoaded', function() {
            const hamburger = document.querySelector('.hamburger');
            const navMenu = document.querySelector('.nav-menu');
            
            console.log('Hamburger element:', hamburger);
            console.log('Nav menu element:', navMenu);
            
            if (hamburger) {
                hamburger.addEventListener('click', function() {
                    console.log('Hamburger clicked!');
                    hamburger.classList.toggle('active');
                    navMenu.classList.toggle('active');
                });
            }
        });
    </script>

    <!-- Survey Save Functionality -->
    <script src="/saveSurvey.js"></script>
</body>
</html>