:root {
            /* GDKC Brand Colors - Your Brand System */
            --gdkc-blue: #2c2977;
            --gdkc-blue-rgb: 44, 41, 119;
            --gdkc-light-purple: #a08cff;
            --gdkc-light-purple-rgb: 160, 140, 255;
            --gdkc-teal: #07edbe;
            --gdkc-teal-rgb: 7, 237, 190;
            --gdkc-medium-blue: #477ed6;
            --gdkc-light-blue: #a0c7ff;
            --gdkc-soft-lilac: #f1e0ff;
            --gdkc-pink: #ff7ec0;
            --gdkc-electric-purple: #9945FF;
            --gdkc-electric-purple-rgb: 153, 69, 255;
            --gdkc-white: #FFFFFF;
            --gdkc-dark-background: #0A091A;
            --gdkc-light-text: #e0e0e0;
            --gdkc-lighter-text: #f0f0f0;
            
            /* Additional colors for gradient border variants */
            --gdkc-mid-teal-blue: rgba(7, 200, 230, 1);
            --gdkc-mid-purple: #c77dff;
            --gdkc-soft-blue-lilac: rgba(220, 230, 255, 1);

            /* Layout Variables */
            /* Nav - lower mins to fit 393px, add wrap potential */
            --navbar-height: clamp(60px, 6vh, 75px) !important;  /* Better height for content */
            --navbar-top-offset: clamp(0.75rem, 1.5vh, 1rem) !important;  /* More space from screen edge */
            --navbar-container-width: clamp(320px, 90vw, 36rem) !important;  /* Larger max for bigger screens */
            --navbar-padding: clamp(0.5rem, 1vw, 0.75rem) !important;  /* Better padding for content */

            /* Hero - higher mins for image/space, prevent push-down */
            --hero-font-size: clamp(2.5rem, 8vw + 0.5rem, 7rem);  /* Larger min for impact */
            --hero-paragraph-size: clamp(1.1rem, 3vw + 0.3rem, 1.375rem);
            --hero-line-height: clamp(1.1, 1.2, 1.3);  /* Increased spacing between "Kansas City's" and "Best Dog Training" */
            
            --hero-section-padding-block: clamp(1rem, 2vh, 2rem);  /* Reduced bottom padding to close gap with social proof */
            --hero-section-padding-inline: clamp(1rem, 4vw, 2.5rem);
            --hero-content-gap: clamp(0.2rem, 1vh, 1rem);  /* ULTRA tight spacing to match target */
            --hero-element-spacing: clamp(1rem, 2vh, 1.5rem);  /* Reduced spacing between image and CTA button */
            --hero-buttons-gap: clamp(0.75rem, 2.5vw, 1.5rem);
            
            --hero-image-container-width: 100%;  /* Full width without overflow */
            --hero-min-height: clamp(600px, 85vh - var(--navbar-height), 900px);  /* Conservative for real Safari UI */

            /* Progress ring - increased thickness for better visibility */
            --progress-ring-stroke-width: clamp(12px, 2.2vw, 18px);  /* Increased thickness for better visibility */

            /* Gradients */
            --gdkc-consultation-gradient: linear-gradient(135deg, var(--gdkc-light-purple) 0%, var(--gdkc-medium-blue) 100%);
            --gdkc-master-card-flow-gradient: linear-gradient(135deg, var(--gdkc-light-purple) 0%, var(--gdkc-medium-blue) 100%);

            /* Glow Effects for Social Proof */
            --gdkc-light-purple-glow: rgba(160, 140, 255, 0.35);
            --gdkc-mid-gradient-glow: rgba(115, 133, 234, 0.35);
            --gdkc-medium-blue-glow: rgba(71, 126, 214, 0.35);
            --gdkc-white-text-glow-low: 0 0 5px rgba(255, 255, 255, 0.35);
            --gdkc-white-text-glow-medium: 0 0 8px rgba(255, 255, 255, 0.5);
            --gdkc-white-text-glow-high: 0 0 12px rgba(255, 255, 255, 0.65);
            --gdkc-white-element-glow-low: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
            --gdkc-white-element-glow-medium: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
            --gdkc-white-element-glow-high: drop-shadow(0 0 6px rgba(255, 255, 255, 0.75));
        }

        /* Unified Container System for Consistent Width Across All Sections */
        .site-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px !important;
            width: 100%;
        }
        
        @media (max-width: 768px) {
            .site-container {
                padding: 0 15px !important;
            }
        }

        /* Ensure about section respects container padding */
        .about-section .site-container {
            padding: 0 20px !important;
            max-width: 1200px;
            margin: 0 auto;
            box-sizing: border-box;
            overflow: hidden !important;
        }
        
        /* Constrain grid to prevent overflow */
        .about-section .site-container > div {
            max-width: 95%;
            margin: 0 auto;
            box-sizing: border-box;
        }
        
        .about-section div[style*="grid"] {
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        
        /* Grid wrapper constraint */
        .about-grid-wrapper {
            max-width: 90%;
            margin: 0 auto;
            box-sizing: border-box;
        }
        
        @media (max-width: 768px) {
            .about-section .site-container {
                padding: 0 15px !important;
            }
        }
        
        .about-section > * {
            box-sizing: border-box;
        }

        /* Navigation responsive text - xs breakpoint for very small screens */
        @media (min-width: 380px) {
            .xs\:hidden { display: none !important; }
            .hidden.xs\:inline { display: inline !important; }
        }

        /* Global Styles */
        html {
            /* Hide scrollbar for Firefox */
            scrollbar-width: none;
            /* Hide scrollbar for IE and Edge */
            -ms-overflow-style: none;
        }

        html::-webkit-scrollbar {
            display: none; /* WebKit browsers */
        }

        body {
            font-family: 'Cera Round', sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            padding-top: calc(var(--navbar-top-offset) + var(--navbar-height) - 1rem);
            /* Hide scrollbar for all browsers */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }

        body::-webkit-scrollbar {
            display: none; /* WebKit browsers */
        }

        body.menu-open {
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }

        /* Navbar Styles */
        #navbar-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            pointer-events: none;
            overflow: visible;
        }

        #navbar-container {
            position: relative;
            top: var(--navbar-top-offset) !important;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            pointer-events: auto;
            max-width: 32rem;
            overflow: visible;
        }

        @media (min-width: 640px) { #navbar-container { width: 82%; } }
        @media (min-width: 768px) { #navbar-container { width: 68%; } }
        @media (min-width: 1024px) { #navbar-container { width: 48%; } }

        .solid-white-navbar {
            background-color: white;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0,0,0,0.08);
            position: relative;
            z-index: 1002;
            padding: var(--navbar-padding) !important;
            flex-wrap: wrap;  /* Wrap if <393px */
            justify-content: space-between;
            gap: clamp(0.5rem, 1vw, 1rem);  /* Space if wrapped */
            min-height: var(--navbar-height) !important;
        }

        #progress-ring-svg {
            position: absolute;
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            pointer-events: none;
        }

        #progress-ring-svg.initialized {
            opacity: 1;
            visibility: visible;
        }


        /* Loading state management */
        body.navbar-loading .solid-white-navbar {
            transition: opacity 0.2s ease-in-out;
        }

        body.navbar-ready .solid-white-navbar {
            opacity: 1;
        }

        /* Ensure navbar looks good even before JavaScript */
        .solid-white-navbar {
            opacity: 1;
            transform: none;
        }

        @keyframes callNowTransition {
            0% { background-color: var(--gdkc-light-purple); }
            50% { background-color: var(--gdkc-teal); }
            100% { background-color: var(--gdkc-light-purple); }
        }

        .animate-call-now {
            animation: callNowTransition 6s ease-in-out infinite;
            color: white !important;
        }

        /* Dynamic Get Started Button Styles */
        .dynamic-get-started {
            /* Base button styles */
            padding: 1.125rem 2.5rem;
            border-radius: 9999px;
            font-weight: 600;
            font-size: 1.125rem;
            transition: all 0.3s ease, transform 0.2s ease;
            text-align: center;
            width: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            text-decoration: none !important;
            cursor: pointer;
            
            /* Default state: White background with gradient border */
            background: linear-gradient(white, white) padding-box,
                        linear-gradient(135deg, var(--gdkc-blue) 0%, var(--gdkc-electric-purple) 50%, var(--gdkc-pink) 100%) border-box;
            border: 4px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .dynamic-get-started .button-text {
            background: linear-gradient(135deg, var(--gdkc-blue) 0%, var(--gdkc-electric-purple) 50%, var(--gdkc-pink) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-block;
        }

        .dynamic-get-started::before {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            bottom: 4px;
            background: var(--dynamic-button-gradient, linear-gradient(135deg, var(--gdkc-blue) 0%, var(--gdkc-electric-purple) 50%, var(--gdkc-pink) 100%));
            border-radius: 9999px;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        .dynamic-get-started:hover::before {
            opacity: 1;
        }

        .dynamic-get-started:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(153, 69, 255, 0.35), 0 5px 12px rgba(44, 41, 119, 0.2);
        }

        .dynamic-get-started:hover .button-text {
            -webkit-text-fill-color: var(--gdkc-white) !important;
            color: var(--gdkc-white) !important;
            background: none;
        }



        .menu-icon-button .line {
            display: block;
            height: 3px;
            width: 26px;
            border-radius: 9999px;
            background-image: linear-gradient(to right, var(--gdkc-light-purple), var(--gdkc-teal));
            transition: all 0.3s ease-in-out;
        }

        .menu-icon-button.open .line1 { transform: translateY(9px) rotate(45deg); }
        .menu-icon-button.open .line2 { opacity: 0; }
        .menu-icon-button.open .line3 { transform: translateY(-9px) rotate(-45deg); }

        /* Curtain Menu */
        #curtain-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,248,255,0.98) 100%);
            backdrop-filter: blur(10px);
            transform: translateY(-100%);
            opacity: 0;
            transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.35s ease-out;
            z-index: 990;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #curtain-menu.menu-active {
            transform: translateY(0);
            opacity: 1;
        }

        .curtain-menu-content {
            padding-top: calc(var(--navbar-top-offset) + var(--navbar-height) + 4rem);
            padding-left: 1rem;
            padding-right: 1rem;
            padding-bottom: 3rem;
            width: 100%;
            max-width: 560px;
            min-height: calc(100vh - var(--navbar-height) - var(--navbar-top-offset));
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .curtain-menu-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: clamp(0.5rem, 2.5vw + 0.25rem, 1.2rem) clamp(0.8rem, 3vw + 0.2rem, 1.5rem);
            margin-bottom: 0;
            margin-top: 0.75rem;
            min-height: 48px;
            font-size: clamp(1.3rem, 4vw + 0.3rem, 1.6rem);
            font-weight: 700;
            color: var(--gdkc-blue);
            text-decoration: none;
            opacity: 0;
            transform: translateY(15px) scale(0.98);
            border-radius: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .curtain-menu-content > .curtain-menu-item:first-child {
            margin-top: 0;
        }

        #curtain-menu.menu-active .curtain-menu-item {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        #curtain-menu.menu-active .curtain-menu-item:nth-child(1) { transition-delay: 0.1s; }
        #curtain-menu.menu-active .curtain-menu-item:nth-child(2) { transition-delay: 0.15s; }
        #curtain-menu.menu-active .curtain-menu-item:nth-child(3) { transition-delay: 0.2s; }
        #curtain-menu.menu-active .curtain-menu-item:nth-child(4) { transition-delay: 0.25s; }
        #curtain-menu.menu-active .curtain-menu-item:nth-child(5) { transition-delay: 0.3s; }
        #curtain-menu.menu-active .curtain-menu-item:nth-child(6) { transition-delay: 0.35s; }

        .curtain-menu-item:hover {
            background: linear-gradient(135deg, var(--gdkc-teal), var(--gdkc-light-purple));
            color: white;
            box-shadow: 0 8px 25px rgba(64, 224, 208, 0.3);
            transform: translateY(-2px) scale(1.02);
        }

        .menu-item-icon {
            margin-right: 1rem;
            width: clamp(18px, 4vw + 2px, 24px);
            height: clamp(18px, 4vw + 2px, 24px);
            stroke-width: 1.5;
            color: currentColor;
            transition: all 0.3s ease;
        }
        
        .curtain-menu-item:hover .menu-item-icon {
            filter: drop-shadow(0 2px 4px rgba(255,255,255,0.3));
            transform: scale(1.1);
        }

        /* Gentle bounce animation for SVG */
        @keyframes gentleBounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-8px);
            }
            60% {
                transform: translateY(-4px);
            }
        }

        /* Hero Section */
        .hero-section {
            background-color: var(--gdkc-dark-background);
            color: var(--gdkc-light-text);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            padding: var(--hero-section-padding-block) var(--hero-section-padding-inline);
            min-height: var(--hero-min-height);  /* Prevents CTA cut-off */
            position: relative;
            margin-top: 0;
        }

        /* Ensure full dark background coverage */
        body {
            background-color: var(--gdkc-dark-background);
        }

        .hero-content-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px !important;
            gap: var(--hero-content-gap);
        }
        
        @media (max-width: 768px) {
            .hero-content-wrapper {
                padding: 0 15px !important;
            }
        }

        .hero-section h1 {
            font-size: var(--hero-font-size);
            line-height: var(--hero-line-height);
            font-weight: 900;
            color: var(--gdkc-white);
            margin-bottom: 0.3rem;
            margin-top: clamp(1rem, 4vh, 2.5rem);  /* Reduced space between navbar and H1 */
            max-width: 95%;
            letter-spacing: -0.02em;
            text-align: center;
            text-shadow: 0 0 4px rgba(255, 255, 255, 0.3), 0 0 8px rgba(255, 255, 255, 0.2);
        }

        .hero-highlight-text {
            color: var(--gdkc-white);
        }

        .hero-section p {
            font-size: var(--hero-paragraph-size);
            line-height: 1.4;
            font-weight: 700;
            color: var(--gdkc-teal);
            max-width: 95%;
            margin-bottom: var(--hero-element-spacing);  /* Use consistent spacing variable */
            opacity: 1;
            background: rgba(0, 0, 0, 0.3);
            padding: 0.3rem 1rem;
            border-radius: 50px;
            backdrop-filter: blur(10px);
        }

        .mobile-break {
            display: none;
        }

        /* Tablet Optimizations */
        @media (min-width: 641px) and (max-width: 1023px) {
            .hero-section {
                padding: 3rem 1.5rem 4rem;
            }

            .hero-section h1 {
                max-width: 85%;
                margin-top: clamp(0.5rem, 3vh, 1.5rem);
                margin-bottom: 2rem;
            }

            .hero-section p {
                font-size: 1.125rem;
                max-width: 80%;
                margin-bottom: 2rem;
            }

            .hero-image-container {
                max-width: 750px;
                margin-bottom: 1.5rem;
            }

            .hero-buttons-container {
                flex-direction: row;
                max-width: 480px;
                gap: 1rem;
            }

            .hero-cta-button {
                flex: 1;
                padding: 1rem 1.5rem;
                font-size: 1rem;
            }
        }

        /* Desktop Optimizations */
        @media (min-width: 1024px) {
            .hero-section {
                padding: 4rem 2rem 5rem;
                min-height: 100vh;
            }

            .hero-section h1 {
                font-size: var(--hero-font-size-desktop);
                max-width: 900px;
                margin-top: clamp(0.5rem, 2vh, 1rem);
                margin-bottom: 2.5rem;
                line-height: 1.25;
                letter-spacing: -0.04em;
            }

            .hero-section p {
                font-size: 1.25rem;
                max-width: 700px;
                margin-bottom: 2.5rem;
                line-height: 1.7;
            }

            .hero-image-container {
                max-width: 850px;
                margin-bottom: 2.5rem;
            }

            .hero-buttons-container {
                flex-direction: row;
                max-width: 520px;
                gap: 1.5rem;
            }

            .hero-cta-button {
                flex: 1;
                padding: 1.125rem 2.5rem;
                font-size: 1.125rem;
                font-weight: 700;
            }

            .hero-cta-button:hover {
                transform: translateY(-3px) scale(1.02);
            }
        }

        /* Large Desktop Optimizations */
        @media (min-width: 1440px) {
            .hero-section {
                padding: 5rem 2rem 6rem;
            }

            .hero-section h1 {
                font-size: 7rem;
                max-width: 1000px;
                margin-top: clamp(0.5rem, 2vh, 1rem);
                margin-bottom: 3rem;
            }

            .hero-section p {
                font-size: 1.375rem;
                max-width: 800px;
                margin-bottom: 3rem;
            }

            .hero-image-container {
                max-width: 950px;
                margin-bottom: 3rem;
            }
        }

        .hero-image-container {
            margin-bottom: var(--hero-element-spacing);  /* Consistent spacing to CTA buttons */
            margin-top: 0;  /* Remove negative margin hack */
            width: var(--hero-image-container-width);  /* Full width */
            max-width: 100%;  /* Prevent overflow */
            margin-left: auto;  /* Center */
            margin-right: auto;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: visible;  /* Allow full image to show */
        }

        .hero-image {
            width: 100%;
            height: clamp(300px, 45vh, 500px);  /* FORCE large height - overrides auto */
            border-radius: 0;
            box-shadow: none;
            display: block;
            transform: translateX(-5%);  /* Move image slightly left */
            object-fit: contain;  /* Keep full image visible without cropping */
            object-position: center;  /* Center the image within container */
        }

        /* iPhone 15 Pro and smaller screens - reduce image height to ensure CTA visibility */
        @media (max-width: 393px) {
            .hero-image {
                height: clamp(220px, 20vh, 320px);  /* Ultra aggressive - 20vh for maximum CTA space */
            }
            
            /* About section padding adjustments */
            .about-section {
                padding-bottom: 5rem !important;
            }
        }
        
        /* Additional mobile padding for very small screens */
        @media (max-width: 320px) {
            .about-section {
                padding-bottom: 5rem !important;
            }
        }

        .hero-buttons-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--hero-buttons-gap);
            width: 100%;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 6rem;
        }

        .hero-cta-button {
            padding: 1rem 2rem;
            border-radius: 9999px;
            font-weight: 700;
            font-size: 1rem;
            transition: all 0.3s ease, transform 0.2s ease;
            text-align: center;
            width: 100%;
            border: 2px solid transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            text-decoration: none !important;
            cursor: pointer;
        }

        .hero-cta-button:link,
        .hero-cta-button:visited,
        .hero-cta-button:hover,
        .hero-cta-button:active {
            text-decoration: none !important;
        }

        .hero-cta-button-primary {
            background: linear-gradient(var(--gdkc-dark-background), var(--gdkc-dark-background)) padding-box,
                        linear-gradient(135deg, var(--gdkc-blue) 0%, var(--gdkc-electric-purple) 50%, var(--gdkc-pink) 100%) border-box;
            border: 3px solid transparent;
            border-radius: 9999px;
            color: var(--gdkc-white);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .hero-cta-button-primary::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            right: 3px;
            bottom: 3px;
            background: linear-gradient(135deg, var(--gdkc-blue) 0%, var(--gdkc-electric-purple) 50%, var(--gdkc-pink) 100%);
            border-radius: 9999px;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        .hero-cta-button-primary:hover::before {
            opacity: 1;
        }

        .hero-cta-button-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(153, 69, 255, 0.35), 0 5px 12px rgba(44, 41, 119, 0.2);
            color: var(--gdkc-white);
        }

        /* Consultation Button Hover Effects */
        #inhome-content .consultation-btn-board::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            right: 3px;
            bottom: 3px;
            background: linear-gradient(90deg, var(--gdkc-light-purple) 0%, var(--gdkc-teal) 100%) !important;
            border-radius: 9999px;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        #inhome-content .consultation-btn-board:hover::before {
            opacity: 1 !important;
        }

        #inhome-content .consultation-btn-board:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 20px rgba(7, 237, 190, 0.35), 0 5px 12px rgba(44, 41, 119, 0.2) !important;
            color: var(--gdkc-white) !important;
        }

        #board-content .consultation-btn-inhome::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            right: 3px;
            bottom: 3px;
            background: linear-gradient(90deg, var(--gdkc-medium-blue) 0%, var(--gdkc-pink) 100%) !important;
            border-radius: 9999px;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        #board-content .consultation-btn-inhome:hover::before {
            opacity: 1 !important;
        }

        #board-content .consultation-btn-inhome:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 20px rgba(160, 140, 255, 0.35), 0 5px 12px rgba(241, 224, 255, 0.2) !important;
            color: var(--gdkc-white) !important;
        }

        @keyframes linearGradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .hero-cta-button-secondary {
            background: transparent;
            color: var(--gdkc-teal);
            border: 2px solid var(--gdkc-teal);
        }

        .hero-cta-button-secondary:hover {
            background: var(--gdkc-teal);
            color: var(--gdkc-dark-background);
            transform: translateY(-2px);
        }

        /* Social Proof Section - Direct gradient approach with grey middle */
        .social-proof-fade-transition {
            position: relative;
            background: linear-gradient(to bottom, 
                #0A091A 0%, 
                #0A091A 10%, 
                #3A3A4A 35%, 
                #6A6A7A 55%, 
                #AAAAAA 75%, 
                #FFFFFF 100%);
            margin-top: -3rem;
            padding-top: 3rem;
        }

        .social-proof-content-container {
            padding-top: 0.5rem;
            padding-bottom: 3rem;
            position: relative;
            z-index: 1;
        }

        .social-proof-main-container {
            padding: 0 1rem;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .counter-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            width: 100%;
            justify-content: center;
            align-items: center;
        }

        @media (min-width: 640px) {
            .counter-grid {
                gap: 1rem;
            }
        }

        @media (min-width: 1024px) {
            .social-proof-main-container {
                padding: 0 2rem;
            }
            .counter-grid {
                gap: 1.5rem;
            }
        }

        /* Social Proof Grid - Back to reasonable size */
        .social-proof-grid {
            position: relative;
            width: 100%;
            max-width: 500px;
            height: 900px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease-out;
        }

        .social-proof-grid.fade-in-up {
            opacity: 1;
            transform: translateY(0);
        }

        .proof-item {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Alternating Left-Right positioning */
        .proof-item:nth-child(1) {
            top: -50px;
            left: 10px;
            transform: rotate(-3deg);
        }

        .proof-item:nth-child(2) {
            top: 160px;
            right: 10px;
            transform: rotate(5deg);
        }

        .proof-item:nth-child(3) {
            top: 430px;
            left: 10px;
            transform: rotate(-5deg);
        }

        .star-with-text {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .proof-star-icon {
            width: 240px;
            height: 240px;
            opacity: 0;
            transform: scale(0.3) rotate(-180deg);
            transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
        }

        /* Star-specific glow effects - reduced to eliminate lines */
        .proof-item:nth-child(1) .proof-star-icon {
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)) drop-shadow(0 0 8px rgba(160, 199, 255, 0.2));
        }

        .proof-item:nth-child(2) .proof-star-icon {
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)) drop-shadow(0 0 8px rgba(160, 140, 255, 0.2));
        }

        .proof-item:nth-child(3) .proof-star-icon {
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)) drop-shadow(0 0 8px rgba(7, 237, 190, 0.2));
        }

        .proof-star-icon.animate {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        /* Text animation classes */
        .proof-text {
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.6s ease;
        }

        .proof-text.animate {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Pawsome logo initial state - off screen left, no transition */
        .proof-item:nth-child(4) img {
            opacity: 0;
            transform: translateX(-500px);
            transition: none !important; /* Remove any transitions that conflict with animation */
        }

        .proof-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Cera Round', sans-serif;
            font-size: 1.3rem;
            font-weight: 600;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            opacity: 0;
            transition: all 0.6s ease-out;
            text-align: center;
            line-height: 1.1;
            pointer-events: none;
            max-width: 150px;
            letter-spacing: 0.02em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            z-index: 10; /* Keep text in front of rotating stars */
        }

        /* Adjust first star text positioning */
        .proof-item:nth-child(1) .proof-text {
            transform: translate(-55%, -50%);
        }

        /* Adjust purple star text positioning - CRITICAL FIX */
        .proof-item:nth-child(2) .proof-text {
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 1.2;
            max-width: 140px;
        }

        /* Adjust teal star text positioning */
        .proof-item:nth-child(3) .proof-text {
            transform: translate(-50%, -45%);
        }

        /* Pawesome logo positioning - follows alternating pattern */
        .proof-item:nth-child(4) {
            top: 630px;
            right: 2%;
            transform: rotate(3deg);
        }


        .proof-text.animate {
            opacity: 1;
        }

        @media (min-width: 640px) {
            .social-proof-grid {
                height: 1000px;
                max-width: 600px;
            }

            .proof-item:nth-child(1) {
                left: 0px;
                top: -80px;
            }

            .proof-item:nth-child(2) {
                top: 230px;
                right: 0px;
            }

            .proof-item:nth-child(3) {
                top: 510px;
                left: 0px;
            }

            .proof-item:nth-child(4) {
                top: 730px;
                right: 4%;
            }

            .proof-star-icon {
                width: 280px;
                height: 280px;
            }
            
            .proof-text {
                font-size: 1.6rem;
                max-width: 160px;
            }
            
            /* Purple star responsive text width */
            .proof-item:nth-child(2) .proof-text {
                max-width: 160px;
            }
        }

        @media (min-width: 768px) {
            .social-proof-grid {
                height: 1100px;
                max-width: 700px;
            }

            .proof-item:nth-child(1) {
                left: -10px;
                top: -100px;
            }

            .proof-item:nth-child(2) {
                top: 280px;
                right: -10px;
            }

            .proof-item:nth-child(3) {
                top: 600px;
                left: -10px;
            }

            .proof-item:nth-child(4) {
                top: 830px;
                right: 2%;
            }

            .proof-star-icon {
                width: 320px;
                height: 320px;
            }
            
            .proof-text {
                font-size: 1.8rem;
                max-width: 180px;
            }
            
            /* Purple star responsive text width - tablet */
            .proof-item:nth-child(2) .proof-text {
                max-width: 180px;
            }
        }

        @media (min-width: 1024px) {
            .social-proof-grid {
                height: 1000px;
                max-width: 700px;
            }

            .proof-item:nth-child(1) {
                left: -10px;
                top: -120px;
            }

            .proof-item:nth-child(2) {
                top: 250px;
                right: -10px;
            }

            .proof-item:nth-child(3) {
                top: 530px;
                left: -10px;
            }

            .proof-item:nth-child(4) {
                top: 760px;
                right: 2%;
            }
            
            .proof-star-icon {
                width: 300px;
                height: 300px;
            }
            
            .proof-text {
                font-size: 1.7rem;
                max-width: 200px;
            }
            
            /* Purple star responsive text width - desktop */
            .proof-item:nth-child(2) .proof-text {
                max-width: 200px;
            }
        }

        /* Card Specific Glows and Background Positions */
        .counter-item#item1 .counter-number,
        .counter-item#item1 .counter-text {
            text-shadow: var(--gdkc-white-text-glow-low);
        }
        .counter-item#item1 .counter-icon svg {
            filter: var(--gdkc-white-element-glow-low);
        }

        .counter-item#item2 .counter-number,
        .counter-item#item2 .counter-text {
            text-shadow: var(--gdkc-white-text-glow-medium);
        }
        .counter-item#item2 .counter-icon svg {
            filter: var(--gdkc-white-element-glow-medium);
        }

        .counter-item#item3 .counter-text {
            text-shadow: var(--gdkc-white-text-glow-high);
        }

        .counter-item:nth-child(1) {
            background-position: 0% 0%;
            box-shadow: 0 10px 25px -5px var(--gdkc-light-purple-glow), 0 6px 10px -6px var(--gdkc-light-purple-glow);
        }
        .counter-item:nth-child(1):hover {
            box-shadow: 0 15px 35px -5px var(--gdkc-light-purple-glow), 0 8px 15px -6px var(--gdkc-light-purple-glow);
        }

        .counter-item:nth-child(2) {
            background-position: 50% 50%;
            box-shadow: 0 10px 25px -5px var(--gdkc-mid-gradient-glow), 0 6px 10px -6px var(--gdkc-mid-gradient-glow);
        }
        .counter-item:nth-child(2):hover {
            box-shadow: 0 15px 35px -5px var(--gdkc-mid-gradient-glow), 0 8px 15px -6px var(--gdkc-mid-gradient-glow);
        }

        .counter-item:nth-child(3) {
            background-position: 100% 100%;
            box-shadow: 0 10px 25px -5px var(--gdkc-medium-blue-glow), 0 6px 10px -6px var(--gdkc-medium-blue-glow);
        }
        .counter-item:nth-child(3):hover {
            box-shadow: 0 15px 35px -5px var(--gdkc-medium-blue-glow), 0 8px 15px -6px var(--gdkc-medium-blue-glow);
        }

        .counter-item:hover {
            transform: translateY(-3px) scale(1.02);
        }

        .counter-top-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.25rem;
            min-height: auto;
        }

        .counter-icon {
            height: 18px;
            width: 18px;
            display: inline-block;
            transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease-out;
            color: var(--gdkc-white);
        }

        .counter-item:nth-child(3) .counter-icon { display: none; }

        .counter-icon svg:hover {
            transform: scale(1.1);
        }

        .counter-number {
            font-family: 'Cera Round', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1;
            color: var(--gdkc-white);
        }

        .counter-item#item3 .counter-number {
            font-size: 1.125rem;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: transparent;
            text-shadow: none;
        }

        .star-char {
            display: inline-block;
            opacity: 0;
            transform: translateX(-15px);
        }

        .counter-item#item3 .star-char {
            text-shadow: 0 0 0 var(--gdkc-white), var(--gdkc-white-text-glow-high);
        }

        @media (min-width: 768px) {
            .counter-item {
                padding: 1.75rem;
            }
            .counter-top-row {
                min-height: 55px;
            }
            .counter-icon {
                height: 36px;
                width: 36px;
                padding: 8px;
            }
            .counter-number {
                font-size: 2rem;
            }
            .counter-item#item3 .counter-number {
                font-size: 1.75rem;
            }
        }

        @media (min-width: 1024px) {
            .counter-icon {
                height: 40px;
                width: 40px;
                padding: 8px;
            }
            .counter-number {
                font-size: 2.25rem;
            }
            .counter-item#item3 .counter-number {
                font-size: 2rem;
            }
            .counter-top-row {
                gap: 0.875rem;
            }
        }

        .counter-text {
            font-family: 'Cera Round', sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: 0.02em;
            color: var(--gdkc-white);
            opacity: 0.9;
            text-align: center;
        }

        @media (min-width: 640px) {
            .counter-text {
                font-size: 0.8rem;
            }
        }

        @media (min-width: 768px) {
            .counter-text {
                font-size: 0.85rem;
            }
        }

        /* Testimonials Section */
        .testimonials-section {
            background-color: white;
            padding: 1.25rem 0 1rem 0;
            position: relative;
        }

        .testimonials-content-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px !important;
            width: 100%;
        }
        
        @media (max-width: 768px) {
            .testimonials-content-container {
                padding: 0 15px !important;
            }
        }

        .testimonials-main-container {
            width: 100%;
        }

        .testimonials-section .gdkc-heading-2 {
            text-align: center;
            margin-top: 4rem;
            margin-bottom: 1rem;
        }

        .testimonials-section .gdkc-subtitle {
            text-align: center;
            margin-bottom: 2.5rem;
            opacity: 0.7;
        }
        
        /* Responsive line breaks */
        .title-break-large {
            display: none;
        }
        .subtitle-break-small {
            display: inline;
        }
        
        @media (min-width: 768px) {
            .title-break-large {
                display: inline;
            }
            .subtitle-break-small {
                display: none;
            }
        }

        .testimonials-scroll-container {
            position: relative;
            overflow: hidden;
            max-width: 100%;
            margin: 0 auto;
            padding: 0;
        }

        .testimonials-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            width: 100%;
            align-items: stretch;
            justify-content: center;
            transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* Tablet: 2 column layout */
        @media (min-width: 768px) and (max-width: 1024px) {
            .testimonials-scroll-container {
                overflow: visible;
                max-width: 100%;
                padding: 0;
            }
            
            .testimonials-grid {
                display: flex;
                flex-wrap: wrap;
                gap: 1.5rem;
                justify-content: center;
                transform: none !important;
                max-width: 100%;
                margin: 0;
            }
            
            .impact-quote {
                display: flex !important;
                flex: 1;
                min-width: 300px;
                max-width: 380px;
                margin: 0;
            }
        }

        /* Desktop: Show all testimonials in grid */
        @media (min-width: 1025px) {
            .testimonials-scroll-container {
                overflow: visible;
                max-width: 100%;
                padding: 0;
            }
            
            .testimonials-grid {
                display: flex;
                flex-wrap: wrap;
                gap: 1.5rem;
                justify-content: center;
                transform: none !important;
                max-width: 100%;
                margin: 0;
            }
            
            .impact-quote {
                display: flex !important;
                flex: 1;
                min-width: 300px;
                max-width: 380px;
                margin: 0;
            }
            
            .testimonials-pagination {
                display: none;
            }
        }

        .testimonials-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .pagination-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(44, 41, 119, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }

        .pagination-dot:hover {
            background: rgba(44, 41, 119, 0.4);
            border: none;
            transform: scale(1.1);
        }

        /* Active dots show their specific gradient colors */
        .pagination-dot[data-slide="0"].active {
            background: var(--gdkc-light-purple);
            border: none;
            transform: scale(1.2);
        }
        
        .pagination-dot[data-slide="1"].active {
            background: var(--gdkc-soft-lilac);
            border: none;
            transform: scale(1.2);
        }

        .pagination-dot[data-slide="2"].active {
            background: var(--gdkc-teal);
            border: none;
            transform: scale(1.2);
        }

        /* Testimonial Card Styles from the experiments */
        .impact-quote {
            background: #ffffff;
            padding: 2.5rem 3rem;
            border-radius: 24px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
            transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                        box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            z-index: 1;
            text-align: center;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 380px;
            min-height: 320px;
        }
        
        /* Desktop: Ensure consistent card sizing in grid */
        @media (min-width: 1025px) {
            .impact-quote {
                min-height: 380px;
                height: 100%;
                margin: 0;
            }
        }

        .impact-quote:hover {
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
        }

        .impact-quote .gdkc-quote {
            margin-bottom: 0.4rem;
            position: relative;
            overflow-wrap: break-word;
            word-wrap: break-word;
            flex-grow: 1;
        }

        .impact-quote .gdkc-quote::before {
            content: "\201C";
            display: inline;
            font-size: 1.8em;
            font-weight: bold;
            margin-right: 0.05em;
            vertical-align: -0.2em;
            line-height: 0;
            opacity: 0.6;
            color: inherit;
        }

        .star-rating {
            font-size: 1.2rem;
            margin-bottom: 0.05rem;
            line-height: 1;
        }

        .impact-quote .gdkc-quote-attribution {
            display: inline-block;
            margin-bottom: 0;
            padding: 0.5em 1.5em;
            border-radius: 50px;
            text-align: center;
        }

        .impact-quote .gdkc-caption {
            margin: 1rem 0 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
            opacity: 0.8;
        }

        /* Static Gradient Border Variants 4, 5, 6 - NO GLOW */
        
        /* V4: Static Gradient Border (Purple-Pink) - NO GLOW */
        .impact-quote--variant4 { background: linear-gradient(white, white) padding-box, linear-gradient(135deg, var(--gdkc-light-purple) 0%, var(--gdkc-mid-purple) 50%, var(--gdkc-pink) 100%) border-box; border: 6px solid transparent; padding: calc(2.5rem - 6px) calc(3rem - 6px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); }
        .impact-quote--variant4:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); }
        .impact-quote--variant4 .gdkc-quote { color: var(--gdkc-blue); }
        .impact-quote--variant4 .gdkc-quote::before { color: var(--gdkc-electric-purple); opacity: 0.6; }
        .impact-quote--variant4 .gdkc-quote-attribution { background-color: var(--gdkc-pink); color: white; }
        .impact-quote--variant4 .star-rating { color: var(--gdkc-light-purple); }
        .impact-quote--variant4 .gdkc-caption { color: var(--gdkc-medium-blue); }

        /* V5: Static Pastel Gradient Border - NO GLOW */
        .impact-quote--variant5 {
            background: linear-gradient(white, white) padding-box, 
                        linear-gradient(135deg, var(--gdkc-soft-lilac) 0%, var(--gdkc-soft-blue-lilac) 50%, var(--gdkc-light-blue) 100%) border-box; 
            border: 6px solid transparent; 
            padding: calc(2.5rem - 6px) calc(3rem - 6px); 
            color: var(--gdkc-blue); 
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
        }
        .impact-quote--variant5:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); }
        .impact-quote--variant5 .gdkc-quote { color: var(--gdkc-blue); } 
        .impact-quote--variant5 .gdkc-quote::before { color: var(--gdkc-medium-blue); opacity: 0.6; }
        .impact-quote--variant5 .gdkc-quote-attribution { background-color: var(--gdkc-medium-blue); color: var(--gdkc-white); } 
        .impact-quote--variant5 .gdkc-caption { color: var(--gdkc-medium-blue); } 
        .impact-quote--variant5 .star-rating { color: var(--gdkc-soft-lilac); } 

        /* V6: Static Teal-Blue Gradient Border - NO GLOW */
        .impact-quote--variant6 { background: linear-gradient(white, white) padding-box, linear-gradient(135deg, var(--gdkc-teal) 0%, var(--gdkc-mid-teal-blue) 40%, var(--gdkc-medium-blue) 100%) border-box; border: 6px solid transparent; padding: calc(2.5rem - 6px) calc(3rem - 6px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); }
        .impact-quote--variant6:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); }
        .impact-quote--variant6 .gdkc-quote { color: var(--gdkc-blue); }
        .impact-quote--variant6 .gdkc-quote::before { color: var(--gdkc-medium-blue); opacity: 0.6; }
        .impact-quote--variant6 .gdkc-quote-attribution { background-color: var(--gdkc-teal); color: var(--gdkc-blue); }
        .impact-quote--variant6 .star-rating { color: var(--gdkc-blue); }
        .impact-quote--variant6 .gdkc-caption { color: var(--gdkc-medium-blue); }

        /* Mobile and tablet responsive testimonials */
        @media (max-width: 1024px) {
            .testimonials-scroll-container {
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;
                scrollbar-width: none;
                -ms-overflow-style: none;
                max-width: 100%;
                padding: 0;
                margin: 0;
            }

            .testimonials-scroll-container::-webkit-scrollbar {
                display: none;
            }

            .testimonials-grid {
                display: flex;
                gap: 0;
                width: max-content;
                padding: 0;
                justify-content: flex-start;
                transform: none;
            }
            
            .impact-quote {
                display: flex !important;
                flex-shrink: 0;
                width: calc(100vw - 4rem);
                scroll-snap-align: center;
                padding: 2rem 2.5rem;
                min-height: 280px;
                margin: 0 2rem;
            }

            .impact-quote--variant4,
            .impact-quote--variant5,
            .impact-quote--variant6 {
                padding: calc(2rem - 6px) calc(2.5rem - 6px);
            }
        }

        @media (max-width: 640px) {
            .impact-quote {
                width: calc(100vw - 3rem);
                padding: 1.5rem 2rem;
                min-height: 260px;
                margin: 0 1.5rem;
            }

            .impact-quote--variant4,
            .impact-quote--variant5,
            .impact-quote--variant6 {
                padding: calc(1.5rem - 6px) calc(2rem - 6px);
            }

            .impact-quote .gdkc-quote-attribution { padding: 0.4em 1.2em; }
            .star-rating { font-size: 1rem; }
            .star-rating { font-size: 0.9rem; }
        }

        /* Animations */
        .fade-in-up {
            animation: fadeInUp 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes revealStarFromLeft {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* CRITICAL: Missing keyframe animations for social proof stars */
        @keyframes star-spin {
            0% {
                transform: scale(0.8) rotate(0deg);
                opacity: 0.7;
            }
            50% {
                transform: scale(1.1) rotate(180deg);
                opacity: 1;
            }
            100% {
                transform: scale(1) rotate(360deg);
                opacity: 1;
            }
        }

        /* CRITICAL: Missing keyframe animation for Pawsome SVG slide-in */
        @keyframes slide-in {
            0% {
                opacity: 0;
                transform: translateX(-500px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Animation classes for social proof stars */
        .star-spin {
            animation: star-spin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        /* Animation class for slide-in elements */
        .slide-in {
            animation: slide-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        /* Mobile Optimizations */
        @media (max-width: 640px) {
            body {
                padding-top: calc(var(--navbar-top-offset) + var(--navbar-height) - 1rem);
            }

            .mobile-break {
                display: inline;
            }

            .counter-item {
                padding: 0.8rem;
                min-width: 90px;
                max-width: 130px;
            }

            .counter-number {
                font-size: 1.3rem;
            }

            .counter-text {
                font-size: 0.7rem;
            }
        }

        /* Critical Modal CSS - Inline for Mobile Compatibility */
        .consultation-modal {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            min-height: 100vh !important;
            z-index: 9999 !important;
            display: none !important; /* CRITICAL: Hide by default to prevent loading flash */
            align-items: stretch !important;
            justify-content: stretch !important;
            padding: 0 !important;
            background: rgba(0, 0, 0, 0.5) !important;
            opacity: 0 !important;
            visibility: hidden !important;
            transition: opacity 0.35s ease-out, visibility 0.35s ease-out !important;
        }

        .consultation-modal[aria-hidden="false"] {
            display: flex !important; /* Show when active */
            opacity: 1 !important;
            visibility: visible !important;
        }

        .consultation-modal[aria-hidden="true"] {
            display: none !important; /* Ensure hidden when closed */
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        .consultation-modal-backdrop {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: rgba(0, 0, 0, 0.5) !important;
        }

        .consultation-modal-content {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            height: 100vh !important;
            height: 100dvh !important; /* Modern browsers with dynamic viewport */
            margin: 0 !important;
            padding: 0 !important;
            background: white !important;
            border-radius: 0 !important;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
            border: 4px solid transparent !important;
            overflow: hidden !important;
            
            /* CSS Grid Layout - Mobile First Approach */
            display: grid !important;
            grid-template-rows: auto 1fr auto !important; /* header, scrollable-content, buttons */
            grid-template-columns: 1fr !important;
            gap: 0 !important;
            
            background-image: linear-gradient(white, white), linear-gradient(90deg, #a08cff 0%, #07edbe 50%, #ff7ec0 100%) !important;
            background-origin: border-box !important;
            background-clip: padding-box, border-box !important;
            z-index: 10000 !important;
            transform: translateY(100%) !important;
            transition: transform 0.35s ease-out !important;
            overscroll-behavior: contain !important;
            touch-action: pan-y !important;
            
            /* Container queries support */
            container-type: inline-size !important;
        }

        /* Modal Header Area - Grid Row 1 */
        .modal-header-area {
            /* Grid positioning - top row (header elements) */
            grid-row: 1 !important;
            grid-column: 1 !important;
            
            /* Layout for close button and step indicator */
            position: relative !important;
            padding: 1.5rem 1.5rem 0 !important;
            background: white !important;
            z-index: 102 !important;
        }

        .modal-scroll-content {
            /* Grid positioning - middle row (scrollable content) */
            grid-row: 2 !important;
            grid-column: 1 !important;
            
            /* Scrollable behavior */
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            
            /* Padding for content */
            padding: 2rem 2rem 2rem !important;
            
            /* Ensure proper scrolling behavior */
            min-height: 0 !important;
            overscroll-behavior: contain !important;
            
            /* Scroll padding to prevent content from hiding behind sticky footer */
            scroll-padding-bottom: 120px !important;
        }

        /* Scroll indicator floating above navigation footer */
        .scroll-indicator {
            position: fixed !important;
            bottom: 90px !important; /* Closer to navigation footer */
            left: 50% !important;
            transform: translateX(-50%) !important;
            background: var(--gdkc-light-purple) !important;
            color: white !important;
            padding: 8px 16px !important;
            border-radius: 20px !important;
            font-size: 0.75rem !important;
            font-weight: 600 !important;
            opacity: 0 !important; /* Hidden by default */
            visibility: hidden !important; /* Hidden by default */
            transition: all 0.4s ease !important;
            white-space: nowrap !important;
            z-index: 102 !important;
            box-shadow: 0 4px 12px rgba(160, 140, 255, 0.4) !important;
            cursor: pointer !important; /* Make it clickable */
        }

        .scroll-indicator:hover {
            background: var(--gdkc-medium-blue) !important;
            transform: translateX(-50%) translateY(-2px) !important; /* Slight lift on hover */
            box-shadow: 0 6px 16px rgba(160, 140, 255, 0.6) !important;
        }

        .scroll-indicator.show {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .modal-navigation-footer {
            /* Grid positioning - bottom row (buttons) */
            grid-row: 3 !important;
            grid-column: 1 !important;
            
            /* Sticky positioning for better mobile behavior */
            position: sticky !important;
            bottom: 0 !important;
            
            /* Visual styling */
            background: white !important;
            border-top: 4px solid transparent !important;
            border-image: linear-gradient(90deg, var(--gdkc-light-purple) 0%, var(--gdkc-teal) 50%, var(--gdkc-pink) 100%) 1 !important;
            
            /* Layout */
            display: flex !important;
            gap: 1rem !important;
            justify-content: center !important; /* Center the button group */
            align-items: center !important;
            padding: 1.5rem max(2rem, env(safe-area-inset-right) + 1rem) 1.5rem max(2rem, env(safe-area-inset-left) + 1rem) !important;
            min-height: 100px !important;
            
            /* Ensure it's always visible */
            z-index: 101 !important;
        }

        /* Universal button sizing for all mobile devices */
        .modal-navigation-footer .nav-btn {
            padding: 1rem 1.5rem !important;
            font-size: 1rem !important;
            min-height: 48px !important;
            min-width: 100px !important;
            flex: 0 0 auto !important; /* Don't grow/shrink, use content width */
            max-width: 200px !important;
        }
        
        /* Button spacing and positioning */
        .modal-navigation-footer .back-btn {
            margin-right: auto !important; /* Push back button to left */
        }
        
        .modal-navigation-footer .next-btn {
            margin-left: auto !important; /* Push next button to right */
        }
        
        /* Step 1 specific: Only Next button visible, align to right */
        .consultation-modal:has(#step-1.active) .modal-navigation-footer {
            justify-content: flex-end !important;
        }
        
        /* Steps 2-6: Both buttons visible, symmetrical spacing */
        .modal-navigation-footer {
            gap: 1rem !important; /* Add consistent gap between buttons */
        }

        /* Error Icon Styling */
        .error-icon {
            position: absolute !important;
            right: 1rem !important;
            top: 50% !important;
            transform: translateY(25%) !important;
            color: var(--gdkc-pink) !important;
            z-index: 10 !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        /* Error icon positioning for select elements - move further right to avoid dropdown arrow */
        select + .error-icon,
        .form-group:has(select) .error-icon {
            right: 2.5rem !important;
        }

        .error-icon svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        .error-tooltip {
            position: absolute;
            bottom: 100%;
            right: 0;
            margin-bottom: 0.5rem;
            padding: 0.5rem 0.75rem;
            background: var(--gdkc-pink);
            color: white;
            border-radius: 6px;
            font-size: 0.875rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 100;
        }

        .error-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            right: 10px;
            border: 5px solid transparent;
            border-top-color: var(--gdkc-pink);
        }

        .error-icon:hover .error-tooltip {
            opacity: 1;
            visibility: visible;
        }

        /* Ensure form groups have relative positioning for error icon */
        .form-group {
            position: relative;
        }

        /* Old responsive styles removed - now using comprehensive mobile-first approach above */

        .consultation-modal[aria-hidden="false"] .consultation-modal-content {
            transform: translateY(0) !important;
        }

        .consultation-modal[aria-hidden="true"] .consultation-modal-content {
            transform: translateY(100%) !important;
        }

        .consultation-modal-close {
            position: absolute !important;
            top: 1.5rem !important;
            left: 1.5rem !important;
            width: 44px !important;
            height: 44px !important;
            background: var(--gdkc-dark-background) !important;
            border: none !important;
            border-radius: 50% !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            z-index: 10001 !important;
            color: white !important;
        }
        
        .consultation-modal-close:focus {
            outline: none !important;
        }
        
        .consultation-modal-close::after {
            content: '' !important;
            position: absolute !important;
            top: -6px !important;
            left: -6px !important;
            right: -6px !important;
            bottom: -6px !important;
            border-radius: 50% !important;
            background: linear-gradient(90deg, #a08cff 0%, #07edbe 50%, #ff7ec0 100%) !important;
            z-index: -1 !important;
            padding: 3px !important;
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 3px)) !important;
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 3px)) !important;
        }

        /* Modal sections layout */
        .consultation-modal-header {
            flex-shrink: 0 !important;
        }

        .consultation-modal-call-section {
            flex-shrink: 0 !important;
        }

        .consultation-gradient-separator {
            flex-shrink: 0 !important;
        }

        .consultation-modal-form-section {
            flex-grow: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: visible !important;
        }

        .consultation-form-heading {
            text-align: center !important;
            margin: 1rem 0 1.5rem !important;
            font-size: 1.25rem !important; /* Smaller font to fit better */
            font-weight: 700 !important;
            color: var(--gdkc-dark-background) !important; /* Correct dark color */
            padding: 0 2rem !important; /* Reduced padding to prevent cutoff */
            line-height: 1.2 !important;
            white-space: nowrap !important; /* Keep title on one line */
            display: none !important; /* Hidden by default */
            overflow: hidden !important; /* Prevent overflow */
        }
        
        .consultation-form-heading.show {
            display: block !important; /* Show when step 1 */
        }
        
        .consultation-modal-close {
            display: none !important; /* Hidden by default */
        }
        
        .consultation-modal-close.show {
            display: flex !important; /* Show when step 1 */
        }
        
        /* Add spacing for pages 2-6 content */
        .form-step:not(#step-1).active {
            margin-top: 3rem !important; /* Space for pages 2-6 */
        }

        .consultation-form-container {
            flex-grow: 1 !important;
            min-height: 0 !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }

        .consultation-form-container iframe {
            width: 100% !important;
            height: 100% !important;
            border: none !important;
            border-radius: 16px !important;
            touch-action: pan-y !important;
            overscroll-behavior: contain !important;
        }

        .consultation-form-note {
            flex-shrink: 0 !important;
            margin-top: 1rem !important;
        }

        /* Mobile First Responsive Design */
        @media (max-width: 768px) {
            .consultation-modal {
                align-items: stretch !important;
                padding: 0 !important;
            }
            
            /* Mobile modal content - grid is already defined above */
            .consultation-modal-content {
                height: 100vh !important;
                height: 100dvh !important; /* Fallback for older browsers */
                border-radius: 0 !important;
            }
            
            /* Mobile header area adjustments */
            .modal-header-area {
                padding: 1rem 1rem 0 !important;
            }

            /* Mobile scroll content adjustments */
            .modal-scroll-content {
                padding: 1.5rem 1rem 1rem !important;
            }
            
            /* Mobile navigation footer adjustments */
            .modal-navigation-footer {
                padding: 1rem max(1rem, env(safe-area-inset-right) + 0.5rem) 1rem max(1rem, env(safe-area-inset-left) + 0.5rem) !important;
                gap: 0.75rem !important;
                min-height: 80px !important;
            }

            /* Mobile close button */
            .consultation-modal-close {
                width: 40px !important;
                height: 40px !important;
                top: 1rem !important;
                left: 1rem !important;
            }
        }

        /* Extra Small Mobile Devices */
        @media (max-width: 480px) {
            .modal-scroll-content {
                padding: 1rem 0.75rem 1rem !important;
            }
            
            .modal-navigation-footer {
                padding: 0.75rem max(0.75rem, env(safe-area-inset-right) + 0.5rem) 0.75rem max(0.75rem, env(safe-area-inset-left) + 0.5rem) !important;
                gap: 0.75rem !important;
                min-height: 70px !important;
            }
            
            .modal-navigation-footer .nav-btn {
                padding: 0.75rem 1rem !important;
                font-size: 0.9rem !important;
                min-height: 44px !important;
                min-width: 80px !important;
                max-width: 140px !important;
                flex: 0 1 auto !important;
            }
        }

        /* Very Small Mobile Devices */
        @media (max-width: 380px) {
            .modal-header-area {
                padding: 0.75rem 0.75rem 0 !important;
            }
            
            .modal-scroll-content {
                padding: 1rem 0.5rem 1rem !important;
            }
            
            .modal-navigation-footer {
                padding: 0.5rem max(0.5rem, env(safe-area-inset-right) + 0.25rem) 0.5rem max(0.5rem, env(safe-area-inset-left) + 0.25rem) !important;
                min-height: 65px !important;
                gap: 0.25rem !important;
            }
            
            .modal-navigation-footer .nav-btn {
                padding: 0.625rem 0.75rem !important;
                font-size: 0.85rem !important;
                min-height: 40px !important;
                min-width: 70px !important;
                max-width: 110px !important;
                flex: 0 1 auto !important;
            }
            
            .consultation-modal-close {
                width: 36px !important;
                height: 36px !important;
                top: 0.75rem !important;
                left: 0.75rem !important;
            }
        }

        /* Tablet Responsive Design */
        @media (min-width: 769px) and (max-width: 1024px) {
            .consultation-modal {
                align-items: stretch !important;
            }
            
            .consultation-modal-content {
                height: 100vh !important;
                height: 100dvh !important;
            }
            
            /* Tablet adjustments for better spacing */
            .modal-scroll-content {
                padding: 2rem 1.5rem 1.5rem !important;
            }
            
            .modal-navigation-footer {
                padding: 1.25rem 1.5rem !important;
            }
        }

        /* Body scroll prevention when modal is open - modified for dynamic height */
        body.modal-open {
            overflow-x: hidden !important;
            position: relative !important;
            width: 100% !important;
        }

        /* Desktop Responsive Design */
        @media (min-width: 1025px) {
            .consultation-modal {
                align-items: stretch !important;
            }
            
            .consultation-modal-content {
                height: 100vh !important;
                border-radius: 0 !important;
            }
            
            /* Desktop spacing adjustments */
            .modal-scroll-content {
                padding: 2.5rem 2rem 2rem !important;
            }
            
            .modal-navigation-footer {
                padding: 1.5rem 2rem !important;
                min-height: 100px !important;
            }
        }

        /* Legal Modal Styles */
        .legal-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .legal-modal[aria-hidden="false"] {
            opacity: 1;
            visibility: visible;
        }

        .legal-modal-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .legal-modal-content {
            position: relative;
            background: white;
            border-radius: 8px;
            max-width: 90vw;
            max-height: 90vh;
            width: 800px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .legal-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem;
            border-bottom: 1px solid #e5e5e5;
            background: var(--gdkc-blue, #4169E1);
            color: white;
            border-radius: 8px 8px 0 0;
        }

        .legal-modal-header h2 {
            margin: 0;
            font-family: 'Cera Round', Arial, sans-serif;
            font-size: 1.5rem;
            color: white;
        }

        .legal-modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: white;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.2s ease;
        }

        .legal-modal-close:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .legal-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
            max-height: calc(90vh - 100px);
        }

        .legal-modal-body h2 {
            color: var(--gdkc-blue, #4169E1);
            font-family: 'Cera Round', Arial, sans-serif;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        .legal-modal-body h2:first-child {
            margin-top: 0;
        }

        .legal-modal-body h3 {
            color: var(--gdkc-medium-blue, #477ED6);
            font-family: 'Cera Round', Arial, sans-serif;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
        }

        .legal-modal-body p {
            color: var(--gdkc-dark-blue, #2c2977);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .legal-modal-body ul {
            color: var(--gdkc-dark-blue, #2c2977);
            margin-bottom: 1rem;
            padding-left: 1.5rem;
        }

        .legal-modal-body a {
            color: var(--gdkc-teal, #40E0D0);
            text-decoration: underline;
        }

        .legal-modal-body a:hover {
            color: var(--gdkc-blue, #4169E1);
        }

        /* Mobile adjustments */
        @media (max-width: 768px) {
            .legal-modal-content {
                max-width: 95vw;
                max-height: 95vh;
                margin: 1rem;
            }

            .legal-modal-header {
                padding: 1rem 1.5rem;
            }

            .legal-modal-body {
                padding: 1.5rem;
            }
        }

        /* Thank You Modal Styles */
        .thankyou-modal {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 10000 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: rgba(0, 0, 0, 0.7) !important;
            opacity: 0 !important;
            visibility: hidden !important;
            transition: opacity 0.4s ease-out, visibility 0.4s ease-out !important;
        }

        .thankyou-modal[aria-hidden="false"] {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .thankyou-modal-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
        }

        .thankyou-modal-content {
            position: relative;
            background: linear-gradient(white, white) padding-box, 
                       linear-gradient(to right, var(--gdkc-light-purple, #A08CFF) 0%, var(--gdkc-teal, #40E0D0) 100%) border-box;
            border: 4px solid transparent;
            border-radius: 16px;
            max-width: 90vw;
            max-height: 90vh;
            width: 480px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: scale(0.9);
            transition: transform 0.4s ease-out;
        }

        .thankyou-modal[aria-hidden="false"] .thankyou-modal-content {
            transform: scale(1);
        }

        .thankyou-modal-body {
            padding: 3rem 2rem 2rem;
        }

        .thankyou-content {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }

        .thankyou-icon-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 1rem;
        }

        .thankyou-dog {
            width: 240px !important;
            height: 240px !important;
            max-width: 240px !important;
            max-height: 240px !important;
        }

        .thankyou-text {
            max-width: 380px;
        }

        .thankyou-heading {
            color: var(--gdkc-dark-background, #2c2977) !important;
            font-family: 'Cera Round', Arial, sans-serif !important;
            font-size: 2.5rem !important;
            font-weight: 700 !important;
            margin: 0 0 1rem 0 !important;
            line-height: 1.2 !important;
        }

        .thankyou-message {
            color: var(--gdkc-dark-background, #2c2977) !important;
            font-family: 'Proxima Nova', Arial, sans-serif !important;
            font-size: 1.25rem !important;
            line-height: 1.5 !important;
            margin: 0 0 2rem 0 !important;
        }

        .thankyou-close-btn {
            background: linear-gradient(to right, var(--gdkc-light-purple, #A08CFF) 0%, var(--gdkc-teal, #40E0D0) 100%);
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 50px;
            font-family: 'Cera Round', Arial, sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: none;
            min-width: 180px;
        }

        .thankyou-close-btn:hover {
            transform: translateY(-2px);
            box-shadow: none;
        }

        .thankyou-close-btn:active {
            transform: translateY(0);
        }
        .thankyou-close-btn:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        /* Mobile adjustments */
        @media (max-width: 768px) {
            .thankyou-modal-content {
                width: 95vw;
                max-width: 380px;
            }

            .thankyou-modal-body {
                padding: 2rem 1.5rem 1.5rem;
            }

            .thankyou-dog {
                width: 180px !important;
                height: 180px !important;
            }

            .thankyou-heading {
                font-size: 2rem !important;
            }

            .thankyou-message {
                font-size: 1.1rem !important;
            }

            .thankyou-close-btn {
                padding: 0.875rem 1.5rem;
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .thankyou-modal-body {
                padding: 1.5rem 1rem 1rem;
            }

            .thankyou-content {
                gap: 1.5rem;
            }

            .thankyou-dog {
                width: 160px !important;
                height: 160px !important;
            }

            .thankyou-heading {
                font-size: 1.75rem !important;
            }

            .thankyou-message {
                font-size: 1rem !important;
            }
        }