/* SERVICE DETAILS STYLES: ASYMMETRIC GRID - FINAL VERSION */

        :root {
            --bg-primary: #ffffff;
            --bg-secondary: #1a1f3a;
            --accent-main: #00e0ff;
            --accent-secondary: #ff3366;
            --text-light: #f0f0f0;
            --text-muted: #aaaaaa;
            --shadow-base: 0 10px 30px rgba(0, 0, 0, 0.5);
            --shadow-3d: 0 25px 70px rgba(0, 224, 255, 0.4); 
            --orange: #FF8100;
            --dark: #0F2440;
            --teal: #0FA092;
            --white: #ffffff;
            
            /* 10% Increased Sizing & Palette */
            --card-radius: 22.26px;
            --media-height: 362.89px; 
            --media-height-mobile: 250.47px; 
            --cta-font: 1.3915rem;
            --cta-border: 2.783px solid transparent; 
        }
        * , *::before, *::after { box-sizing: border-box; }
        body{
            margin:0;
            padding:0; 
            background:var(--white); 
            color:var(--dark); 
            font-family: 'Montserrat', Arial, sans-serif; 
            -webkit-font-smoothing:antialiased;
        }

        /* Page Header for Consistency */
        .page-header {
            text-align: center;
            padding: 3rem 1rem 2rem;
            max-width: 800px;
            margin: 0 auto;
        }
        .page-header h1 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 800;
            margin-bottom: 0.5rem;
            color: var(--accent-secondary);
        }
        .page-header p {
            font-size: clamp(0.9rem, 1.5vw, 1.1rem);
            color: var(--text-muted);
        }

        /* --- Grid container --- */
        .grid-container{
            display:grid;
            grid-template-columns: 1fr;
            gap:24px;
            width:100%;
            max-width:1452px; 
            margin:40px auto; 
            padding:0 16px; 
            perspective: 1540px;
            margin-left: auto !important; 
            margin-right: auto !important;
        }

        /* Default to 3 columns on wide screens */
        .grid-container {
            grid-template-columns: repeat(3, 1fr);
        }

        .grid-column{ 
            display:flex; 
            flex-direction:column; 
            gap:24px;
        }

        .grid-item{
            background:var(--bg-secondary, #1E293B);
            border-radius:var(--card-radius);
            overflow:hidden;
            position:relative;
            display:flex;
            flex-direction:column;
            border: 1.1px solid rgba(15,36,64,0.066);
            box-shadow: 0 11px 33px rgba(15,36,64,0.044);
            transform-style: preserve-3d;
            transition: transform .495s cubic-bezier(.2,.9,.2,1), box-shadow .495s;
            font-size: 1.265em;
        }

        .card-link{
            text-decoration:none;
            color:inherit;
            display:block;
            border: 1px solid transparent; 
        }

        /* DESKTOP: 3D Hover Effect */
        .grid-item:hover { 
            transform: translateY(-19.8px) rotateX(4.4deg); 
            box-shadow: 0 44px 88px rgba(15,36,64,0.13); 
        }

        .card-link:focus .grid-item, .card-link:focus { 
            outline: 3.3px solid rgba(15,36,64,0.088); 
            outline-offset: 4.4px; 
        }

        .card-media{
            position:relative;
            height: var(--media-height); 
            min-height: var(--media-height);
            max-height: var(--media-height);
            overflow:hidden;
            transition: height 0.33s;
            border-radius: var(--card-radius); 
            background: none;
            box-shadow: none;
        }
        
        .card-media::before { display: none; }
        .card-content { display: none; }

        /* --- Blurry Overlay (Visible by default) --- */
        .card-media::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 35%; 
            pointer-events: none;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 
            transition: opacity 0.4s ease;
            opacity: 1; 
            z-index: 5;
        }

        /* --- Blurry Button Styles --- */
        .view-case-study{
            position: absolute;
            left: 50%;
            bottom: 10%; 
            
            /* Hidden by default on Desktop */
            opacity: 0; 
            transform: translateX(-50%) translateY(30px); 
            
            /* Button Width Fix */
            padding: 12px 50px; 
            max-width: 95%; 
            min-width: 300px; 
            width: fit-content; 
            
            background: rgba(255, 255, 255, 0.15); 
            color: var(--white); 
            border: none; 
            border-radius: 12px; 
            font-weight: 600;
            font-size: var(--cta-font);
            cursor: pointer;
            z-index: 10;
            
            backdrop-filter: blur(15px); 
            -webkit-backdrop-filter: blur(15px);
            
            transition: opacity 0.3s ease, transform 0.3s ease;
            box-shadow: none;
            
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px; 
            
            white-space: nowrap; 
        }
        .view-case-study:hover {
            transform: translateX(-50%) translateY(0) scale(1.03); 
            background: rgba(255, 255, 255, 0.25); 
        }

        /* --- DESKTOP HOVER ACTIONS --- */
        .card-media:hover .view-case-study,
        .grid-item:hover .view-case-study {
            opacity: 1;
            transform: translateX(-50%) translateY(0); 
        }

        .card-media:hover::after {
            opacity: 0; 
        }

        .card-image{
            width:100%;
            height:100%;
            object-fit:cover;
            display: block;
            /* DESKTOP DEFAULT: Grayscale */
            filter: grayscale(1); 
            transition: filter 0.5s, transform .66s ease;
        }

        /* DESKTOP HOVER: Change to Color */
        .grid-item:hover .card-image {
            transform: scale(1.066); 
            filter: grayscale(0); 
        }
        
        /* --- Media Queries --- */

        /* Tablet (701px to 999px) */
        @media (min-width:701px) and (max-width:999px){
            .grid-container{ 
                grid-template-columns: 1fr 1fr; 
                gap:20px; 
            }
            .grid-column{ 
                display:flex; 
                flex-direction:column; 
                gap:20px; 
            }
            
            .column-3{ 
                grid-column: span 2; 
                display:flex; 
                flex-wrap:wrap; 
                gap:20px; 
            }
            .column-3 .grid-item{ 
                width: calc(50% - 10px); 
            }
            .view-case-study {
                min-width: 200px;
                padding: 10px 30px;
            }
        }

        /* Desktop (1000px+) */
        @media (min-width:1000px){
            .grid-container{ 
                grid-template-columns: 1fr 1.2fr 1fr; 
                gap:30px; 
            }
            .grid-column{ 
                display:flex; 
                flex-direction:column; 
                gap:30px; 
            }
            
            .column-2{ 
                transform: translateY(-70px); 
                z-index:6; 
            }
            
            .column-3{ 
                grid-column: auto; 
                display:flex; 
                flex-direction:column; 
                gap:30px; 
            }
            .column-3 .grid-item{ 
                width: auto; 
            }
        }
        
        /* === MOBILE-SPECIFIC STYLES (Max 700px) === */
        @media (max-width: 700px) {
            .grid-container{
                grid-template-columns:1fr;
                max-width:100%;
                padding: 0 16px; 
            }
            .card-media {
                height: var(--media-height-mobile) !important;
                min-height: var(--media-height-mobile) !important;
                max-height: var(--media-height-mobile) !important;
            }
            
            /* ✅ IMAGE COLOR FIX: Keep images colored by default on mobile */
            .card-image {
                 filter: grayscale(0);
            }
            /* Ensure hover doesn't change color (hover doesn't really exist anyway) */
            .grid-item:hover .card-image {
                filter: grayscale(0);
                transform: none; /* Disable zoom */
            }

            /* ✅ BUTTON VISIBILITY FIX: Make button visible by default */
            .view-case-study {
                opacity: 1; 
                transform: translateX(-50%) translateY(0); 
                min-width: 150px;
                padding: 10px 20px;
            }
            /* Keep overlay visible to host the button */
            .card-media::after {
                opacity: 1; 
            }
            
            /* Disable 3D transforms on mobile */
            .grid-item:hover { 
                transform: none; 
                box-shadow: 0 11px 33px rgba(15,36,64,0.044);
            }
        }