:root {
            --primary-gradient: radial-gradient(circle at center, #7B886B 0%, #667459 46%, #566041 100%);
            --primary-gradient-soft: radial-gradient(circle at center, rgba(123, 136, 107, 0.96) 0%, rgba(102, 116, 89, 0.98) 46%, rgba(86, 96, 65, 1) 100%);
            --mindara-sans: 'Inter', sans-serif;
            --mindara-serif: 'Tinos', serif;
        }

        body {
            font-family: var(--mindara-sans);
            font-size: 16px;
            line-height: 1.55;
            letter-spacing: -0.02em;
        }

        blockquote,
        .font-headline,
        .font-display {
            font-family: var(--mindara-serif);
            font-weight: 400;
            letter-spacing: -0.04em;
        }

        p,
        a,
        button,
        input,
        textarea,
        select,
        label,
        li,
        .font-body,
        .font-label {
            font-family: var(--mindara-sans);
            letter-spacing: -0.02em;
        }

        .font-label {
            font-size: 14px;
        }

        h1 {
            font-family: var(--mindara-serif);
            font-size: 48px !important;
            line-height: 1.1 !important;
            letter-spacing: -0.04em !important;
            font-weight: 400 !important;
        }

        h2,
        main h2.font-headline,
        main h2.font-display {
            font-family: var(--mindara-serif);
            font-size: 42px !important;
            line-height: 1.12 !important;
            letter-spacing: -0.04em !important;
            font-weight: 400 !important;
        }

        h3,
        main h3.font-headline {
            font-family: var(--mindara-serif);
            font-size: 24px !important;
            line-height: 1.18 !important;
            letter-spacing: -0.03em !important;
            font-weight: 400 !important;
        }

        .font-body,
        main p:not(.font-label):not(.quote-text) {
            font-size: 16px !important;
            line-height: 1.55 !important;
            letter-spacing: -0.02em !important;
            font-weight: 500 !important;
        }

        .font-body.text-lg,
        .font-body.text-xl {
            font-size: 18px !important;
            line-height: 1.5 !important;
        }

        .font-label,
        main .font-label,
        main span[class*="uppercase"],
        main p[class*="uppercase"] {
            font-size: 14px !important;
            line-height: 1.35 !important;
            letter-spacing: -0.02em !important;
            font-weight: 500 !important;
        }

        a.inline-flex.font-label,
        button.font-label,
        main a[class*="bg-primary"].font-label,
        main a[class*="bg-secondary"].font-label,
        main a[class*="bg-white"].font-label {
            font-size: 16px !important;
            line-height: 1.4 !important;
        }

        @media (min-width: 1024px) {
            h1 {
                font-size: 64px !important;
            }

            h2,
            main h2.font-headline,
            main h2.font-display {
                font-size: 56px !important;
            }

            h3,
            main h3.font-headline {
                font-size: 26px !important;
            }
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .script-accent {
            font-family: 'Allison', cursive;
            line-height: 0.6;
        }
        .script-alt-accent {
            font-family: 'Clicker Script', cursive;
        }
        /* No-Line Rule: Replacing borders with backgrounds */
        .card-accent-peach { background-color: rgba(230, 155, 151, 0.08); }
        .card-accent-sage { background-color: rgba(168, 181, 164, 0.08); }
        .card-accent-olive { background-color: rgba(195, 185, 155, 0.08); }
        .card-accent-gray { background-color: rgba(181, 184, 188, 0.08); }
        .soft-pillow {
            border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%;
            transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
        }
        
        @keyframes bubbleWobble {
            0% { border-radius: 60% 40% 40% 60% / 50% 60% 40% 50%; }
            33% { border-radius: 50% 50% 60% 40% / 40% 50% 50% 60%; }
            66% { border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; }
            100% { border-radius: 60% 40% 40% 60% / 50% 60% 40% 50%; }
        }

        @keyframes echoMove {
            0% { transform: translate(0, 0); }
            25% { transform: translate(4px, 4px); }
            50% { transform: translate(0, 8px); }
            75% { transform: translate(-4px, 4px); }
            100% { transform: translate(0, 0); }
        }

        .bubble-step {
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .bubble-step:hover {
            animation: echoMove 4s infinite linear, bubbleWobble 6s infinite ease-in-out;
            box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
        }

        .soft-pillow:hover {
            transform: scale(1.08);
            animation: bubbleWobble 3s ease-in-out infinite alternate;
            box-shadow: 0 15px 35px -5px rgba(0,0,0,0.05); /* Slight shadow to enhance hover */
        }

        /* Services Hub Styles */
        .service-list:hover .service-item {
            opacity: 0.4;
            filter: blur(3px);
        }
        .service-list .service-item:hover {
            opacity: 1;
            filter: blur(0);
        }
        .service-description {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
            opacity: 0;
        }
        .service-item:hover .service-description {
            max-height: 400px;
            opacity: 1;
            margin-top: 1rem;
        }
        .image-stack img {
            transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
            transform: scale(1.1);
        }
        .service-item-1:hover ~ .left-display .img-1 { opacity: 1; transform: scale(1); }
        .service-item-2:hover ~ .left-display .img-2 { opacity: 1; transform: scale(1); }
        .service-item-3:hover ~ .left-display .img-3 { opacity: 1; transform: scale(1); }
        
        .left-display .img-1 { opacity: 1; transform: scale(1); }
        .service-list:hover ~ .left-display .img-1 { opacity: 0; transform: scale(1.1); }
        
        .service-item-1:hover ~ .left-display .img-1 { opacity: 1 !important; transform: scale(1) !important; }
        .service-item-2:hover ~ .left-display .img-2 { opacity: 1 !important; transform: scale(1) !important; }
        .service-item-3:hover ~ .left-display .img-3 { opacity: 1 !important; transform: scale(1) !important; }

        /* Testimonial Animations */
        @keyframes subtleMove {
            0% { transform: translate(-50%, -50%) translateX(0); }
            50% { transform: translate(-50%, -50%) translateX(-2%); }
            100% { transform: translate(-50%, -50%) translateX(0); }
        }
        .parallax-text {
            white-space: nowrap;
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 15vw;
            font-weight: 700;
            color: rgba(230, 155, 151, 0.05);
            pointer-events: none;
            z-index: 0;
            user-select: none;
            animation: subtleMove 20s ease-in-out infinite;
        }

        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-scroll {
            display: inline-flex;
            animation: scroll 120s linear infinite;
        }

        /* Specialty section additions */
        .editorial-shadow {
            text-shadow: 0 4px 12px rgba(92, 89, 76, 0.05);
        }
        .specialty-pill:hover {
            transform: translateY(-2px);
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* Loading & Reveal Animations */
        @keyframes slowReveal {
            0% { opacity: 0; transform: translateY(20px); filter: blur(10px); }
            100% { opacity: 1; transform: translateY(0); filter: blur(0); }
        }
        @keyframes preloaderFadeOut {
            0% { opacity: 1; visibility: visible; }
            80% { opacity: 1; visibility: visible; }
            100% { opacity: 0; visibility: hidden; }
        }
        @keyframes breatheText {
            0% { opacity: 0; transform: scale(0.95); letter-spacing: -2px; }
            40% { opacity: 1; transform: scale(1); letter-spacing: 2px; }
            80% { opacity: 0; transform: scale(1.05); letter-spacing: 6px; }
            100% { opacity: 0; transform: scale(1.05); }
        }
        .animate-reveal {
            opacity: 0;
            animation: slowReveal 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }
        .delay-100 { animation-delay: 2.4s; }
        .delay-200 { animation-delay: 2.6s; }
        .delay-300 { animation-delay: 2.8s; }
        .delay-400 { animation-delay: 3.0s; }
        .delay-500 { animation-delay: 3.2s; }

        @keyframes subtlePulse {
            0%, 100% { opacity: 0.4; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); }
        }
        .animate-pulse-slow {
            animation: subtlePulse 4s ease-in-out infinite;
        }

        main p.stat-value {
            font-family: var(--mindara-serif) !important;
            font-size: 56px !important;
            line-height: 1 !important;
            letter-spacing: -0.04em !important;
            font-weight: 400 !important;
        }

        @media (min-width: 768px) {
            main p.stat-value {
                font-size: 72px !important;
            }
        }

        .about-reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 900ms ease, transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .about-reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .about-parallax {
            --parallax-y: 0px;
            transform: translate3d(0, var(--parallax-y), 0);
            transition: transform 120ms linear;
            will-change: transform;
        }

        .about-value-card,
        .about-credential-card {
            transition: transform 350ms ease, box-shadow 350ms ease, background-color 350ms ease;
        }

        .about-value-card:hover,
        .about-credential-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 22px 60px rgba(86, 96, 65, 0.12);
        }

        .about-value-card .material-symbols-outlined {
            font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48;
            transition: transform 350ms ease;
        }

        .about-value-card:hover .material-symbols-outlined {
            transform: scale(1.08);
        }

        @media (prefers-reduced-motion: reduce) {
            .about-reveal,
            .about-parallax,
            .about-value-card,
            .about-credential-card {
                transition: none;
                transform: none !important;
            }

        }