/* =========================================
           SERVICES PAGE — Premium Showcase Layout
           ========================================= */

        /* --- Page Header --- */
        .page-header {
            position: relative;
            background: linear-gradient(135deg, #1C2541 0%, #0F172A 50%, #0a1628 100%);
            padding: calc(80px + 64px) 0 64px;
            text-align: center;
            color: #fff;
            overflow: hidden;
            margin-bottom: 0;
        }

        /* Remove the global white gradient overlay between header and content */
        .page-header+section::before,
        .page-header+.section::before {
            display: none !important;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(circle at 20% 80%, rgba(91, 192, 190, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(91, 192, 190, 0.08) 0%, transparent 40%);
            pointer-events: none;
        }

        .page-header::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(91, 192, 190, 0.15) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            animation: pulseGlow 8s ease-in-out infinite;
            pointer-events: none;
        }

        .page-header .container {
            position: relative;
            z-index: 1;
        }

        .page-breadcrumb {
            display: inline-block;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #5BC0BE;
            margin-bottom: 24px;
            font-weight: 500;
        }

        .page-title {
            font-size: clamp(2.2rem, 5vw, 3.5rem);
            font-weight: 700;
            margin-bottom: 16px;
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.85) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* --- Service Showcase --- */
        .service-showcase {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-top: -1px;
            /* Close any sub-pixel gap from page-header */
        }

        .service-showcase-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: clamp(360px, 34vw, 460px);
            overflow: hidden;
            position: relative;
            border-bottom: 1px solid var(--clr-border);
        }

        /* First row — image side blends with dark header, content side stays clean */
        .service-showcase-item:first-child {
            background: transparent;
        }

        .service-showcase-item:first-child .showcase-content {
            background: #fff;
        }

        .service-showcase-item:first-child .showcase-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background: linear-gradient(180deg, #0a1628, transparent);
            z-index: 1;
            pointer-events: none;
        }

        /* Alternate: reverse even rows */
        .service-showcase-item:nth-child(even) {
            direction: rtl;
        }

        .service-showcase-item:nth-child(even)>* {
            direction: ltr;
        }

        /* Alternate background tint on even items */
        .service-showcase-item:nth-child(even) {
            background: var(--clr-off-white);
        }

        /* --- Image Side --- */
        .showcase-image {
            position: relative;
            overflow: hidden;
        }

        .showcase-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .service-showcase-item:hover .showcase-image img {
            transform: scale(1.04);
        }

        /* Subtle gradient overlay on image edge */
        .showcase-image::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 80px;
            height: 100%;
            background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
            pointer-events: none;
        }

        .service-showcase-item:nth-child(even) .showcase-image::after {
            right: auto;
            left: 0;
            background: linear-gradient(to right, rgba(248, 250, 252, 0.15), transparent);
        }

        /* --- Content Side --- */
        .showcase-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 48px 44px;
        }

        .showcase-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--gradient-accent);
            color: white;
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 20px;
            box-shadow: 0 4px 14px rgba(91, 192, 190, 0.35);
        }

        .showcase-icon {
            font-size: 2.4rem;
            margin-bottom: 16px;
            display: block;
            line-height: 1;
        }

        .showcase-title {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--clr-navy);
            margin-bottom: 16px;
            line-height: 1.25;
        }

        .showcase-desc {
            color: var(--clr-text-muted);
            font-size: 1.05rem;
            line-height: 1.75;
            margin-bottom: 28px;
            max-width: 460px;
        }

        .showcase-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--clr-navy);
            color: white;
            padding: 14px 28px;
            border-radius: var(--radius-full);
            font-weight: 600;
            font-size: 0.95rem;
            text-decoration: none;
            transition: var(--transition-base);
            width: fit-content;
        }

        .showcase-cta:hover {
            background: var(--clr-teal);
            transform: translateX(4px);
            box-shadow: var(--shadow-md);
        }

        .showcase-cta svg {
            width: 18px;
            height: 18px;
            transition: transform 0.3s ease;
        }

        .showcase-cta:hover svg {
            transform: translateX(4px);
        }

        /* --- Responsive --- */
        @media (max-width: 1280px) {
            .service-showcase-item {
                min-height: 380px;
            }

            .showcase-content {
                padding: 36px 32px;
            }

            .showcase-title {
                font-size: 1.45rem;
            }

            .showcase-desc {
                font-size: 0.98rem;
                line-height: 1.65;
            }
        }

        @media (max-width: 1024px) {
            .service-showcase-item {
                grid-template-columns: minmax(130px, 42%) 1fr;
                min-height: clamp(220px, 42vw, 300px);
            }

            .showcase-image {
                min-height: 100%;
            }

            .showcase-image::after {
                display: none;
            }

            .showcase-content {
                padding: 28px 24px;
            }

            .showcase-title {
                font-size: 1.35rem;
            }

            .showcase-desc {
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 20px;
                max-width: none;
            }

            .showcase-icon {
                font-size: 1.8rem;
                margin-bottom: 10px;
            }

            .showcase-number {
                width: 36px;
                height: 36px;
                font-size: 0.95rem;
                margin-bottom: 14px;
            }

            .showcase-cta {
                width: 100%;
                justify-content: center;
                padding: 10px 20px;
                font-size: 0.85rem;
            }
        }

        @media (max-width: 600px) {
            .service-showcase-item {
                grid-template-columns: minmax(120px, 40%) 1fr;
                min-height: clamp(190px, 48vw, 250px);
            }

            .showcase-image {
                min-height: 100%;
            }

            .showcase-content {
                padding: 20px 16px;
            }

            .showcase-title {
                font-size: 1.15rem;
                margin-bottom: 8px;
            }

            .showcase-desc {
                font-size: 0.85rem;
                line-height: 1.5;
                margin-bottom: 16px;
            }

            .showcase-icon {
                font-size: 1.4rem;
                margin-bottom: 6px;
            }

            .showcase-number {
                width: 30px;
                height: 30px;
                font-size: 0.8rem;
                margin-bottom: 10px;
            }

            .showcase-cta {
                padding: 10px 16px;
                font-size: 0.8rem;
            }
        }