/* =====================================================
   SERVICES PAGE - PREMIUM DESIGN
   About Page Green + Gold + Cream Theme
===================================================== */

.services-page {
    --service-green: #075c48;
    --service-dark: #073d32;
    --service-gold: #a77b32;
    --service-light-gold: #f1dfb5;
    --service-cream: #fbf7ed;
    --service-orange: #d18b55;
    --service-text: #4c5d54;
    --service-white: #ffffff;
    overflow: hidden;
    background: #ffffff;
    color: #183b32;
}


    /* =====================================================
   HERO SECTION - SAME AS ABOUT PAGE
===================================================== */

    .services-page .inner-page-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 105px 20px 100px;
        text-align: center;
        background: radial-gradient(circle at 15% 20%, rgba(214,173,96,.20), transparent 28%), radial-gradient(circle at 85% 80%, rgba(7,92,72,.13), transparent 30%), linear-gradient(125deg, #e6f0e8, #f2eee2, #dcebe2);
    }

        .services-page .inner-page-hero::before,
        .services-page .inner-page-hero::after {
            content: "";
            position: absolute;
            z-index: -1;
            border: 1px solid rgba(7,92,72,.13);
            border-radius: 50%;
            pointer-events: none;
        }

        .services-page .inner-page-hero::before {
            width: 380px;
            height: 380px;
            top: -220px;
            left: -100px;
            animation: serviceCircleFloat 12s ease-in-out infinite;
        }

        .services-page .inner-page-hero::after {
            width: 300px;
            height: 300px;
            right: -100px;
            bottom: -190px;
            animation: serviceCircleFloat 10s ease-in-out infinite reverse;
        }

        .services-page .inner-page-hero .container {
            position: relative;
            max-width: 900px;
            margin: auto;
        }

        .services-page .inner-page-hero .inner-page-tag {
            display: inline-block;
            margin-bottom: 18px;
            color: #92651f;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 2.5px;
            text-transform: uppercase;
        }

        .services-page .inner-page-hero h1 {
            max-width: 850px;
            margin: auto;
            color: #073d32;
            font-size: clamp(34px, 5vw, 57px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -1.5px;
        }

        .services-page .inner-page-hero p {
            max-width: 700px;
            margin: 22px auto 0;
            color: #405b4e;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.9;
        }


    /* =====================================================
   INTRODUCTION
===================================================== */

    .services-page .services-page-section {
        padding: 95px 20px;
        background: radial-gradient(circle at 95% 10%, rgba(220,190,132,.13), transparent 25%), #fbfaf6;
    }

    .services-page .services-intro {
        max-width: 760px;
        margin: 0 auto 50px;
        text-align: center;
    }

        .services-page .services-intro .section-tag {
            display: inline-block;
            margin-bottom: 13px;
            color: #92651f;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 2px;
        }

        .services-page .services-intro h2 {
            margin: 0 0 17px;
            color: #073d32;
            font-size: clamp(27px, 3.5vw, 39px);
            line-height: 1.3;
            font-weight: 800;
        }

        .services-page .services-intro p {
            margin: 0;
            color: #52685d;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.85;
        }


    /* =====================================================
   SERVICE CARDS
===================================================== */

    .services-page .services-page-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 26px;
    }

    .services-page .service-page-card {
        position: relative;
        overflow: hidden;
        padding: 35px 28px;
        background: #ffffff;
        border: 1px solid #e5e5d9;
        border-radius: 17px;
        box-shadow: 0 8px 28px rgba(5,46,43,.06);
        transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
    }

        .services-page .service-page-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 4px;
            background: linear-gradient(90deg, #b98a3d, #f1d99d, #d18b55);
            transition: width .45s ease;
        }

        .services-page .service-page-card::after {
            content: "";
            position: absolute;
            width: 120px;
            height: 120px;
            top: -70px;
            right: -70px;
            border-radius: 50%;
            background: rgba(225,194,130,.14);
            transition: transform .5s ease;
        }

        .services-page .service-page-card:hover {
            transform: translateY(-11px);
            border-color: #d8bd82;
            box-shadow: 0 20px 42px rgba(107,83,40,.13);
        }

            .services-page .service-page-card:hover::before {
                width: 100%;
            }

            .services-page .service-page-card:hover::after {
                transform: scale(2.2);
            }

    .services-page .service-number {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        margin-bottom: 23px;
        color: #80591f;
        background: linear-gradient(135deg, #fbf1d7, #efdfb6);
        border: 1px solid #ead6a7;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 800;
        transition: transform .4s ease, background .4s ease;
    }

    .services-page .service-page-card:hover .service-number {
        transform: rotate(-8deg) scale(1.12);
        background: linear-gradient(135deg, #f4dfaa, #e8c77d);
    }

    .services-page .service-page-card h3 {
        position: relative;
        z-index: 1;
        margin: 0 0 14px;
        color: #075c48;
        font-size: 20px;
        line-height: 1.4;
        font-weight: 800;
    }

    .services-page .service-page-card p {
        position: relative;
        z-index: 1;
        margin: 0 0 20px;
        color: #52685d;
        font-size: 14.5px;
        font-weight: 500;
        line-height: 1.8;
    }

    .services-page .service-page-card ul {
        position: relative;
        z-index: 1;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .services-page .service-page-card li {
        position: relative;
        margin-top: 11px;
        padding-left: 23px;
        color: #40564b;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.65;
    }

        .services-page .service-page-card li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            color: #9b712c;
            font-weight: 900;
        }


    /* =====================================================
   WORKING PROCESS
===================================================== */

    .services-page .services-process-section {
        position: relative;
        overflow: hidden;
        padding: 95px 20px;
        background: radial-gradient(circle at 10% 20%, rgba(218,177,94,.18), transparent 28%), radial-gradient(circle at 90% 80%, rgba(209,139,85,.12), transparent 25%), linear-gradient(130deg, #f6f0e2, #fbf8ef);
    }

    .services-page .services-process-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;
        margin-top: 50px;
    }

    .services-page .process-step {
        position: relative;
        padding: 28px 20px;
        background: #ffffff;
        border: 1px solid #e9ddc3;
        border-top: 4px solid #c49a4b;
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(102,82,43,.06);
        transition: transform .4s ease, box-shadow .4s ease;
    }

        .services-page .process-step:hover {
            transform: translateY(-9px);
            box-shadow: 0 17px 32px rgba(130,100,45,.13);
        }

        .services-page .process-step > span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 43px;
            height: 43px;
            margin-bottom: 18px;
            color: #ffffff;
            background: linear-gradient(135deg, #a77b32, #d7ad61);
            border-radius: 50%;
            font-size: 15px;
            font-weight: 800;
            box-shadow: 0 5px 14px rgba(177,133,54,.2);
            transition: transform .4s ease;
        }

        .services-page .process-step:hover > span {
            transform: scale(1.15) rotate(10deg);
        }

        .services-page .process-step h3 {
            margin: 0 0 10px;
            color: #075c48;
            font-size: 18px;
            font-weight: 800;
        }

        .services-page .process-step p {
            margin: 0;
            color: #52685d;
            font-size: 13.5px;
            font-weight: 500;
            line-height: 1.8;
        }


    /* =====================================================
   CTA SECTION - EXACT ABOUT PAGE COLOR THEME
===================================================== */

    .services-page .about-cta {
        position: relative;
        overflow: hidden;
        padding: 85px 20px;
        text-align: center;
        background: radial-gradient(circle at 10% 20%, rgba(214,173,96,.18), transparent 30%), linear-gradient(120deg, #dcebe2, #e9e5d6, #d3e5da);
    }

        .services-page .about-cta .container {
            position: relative;
            max-width: 800px;
            margin: auto;
        }

        .services-page .about-cta .inner-page-tag {
            display: inline-block;
            margin-bottom: 18px;
            color: #92651f;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 2.5px;
        }

        .services-page .about-cta h2 {
            margin: 0 0 18px;
            color: #073d32;
            font-size: clamp(28px, 3.5vw, 42px);
            font-weight: 800;
            line-height: 1.3;
        }

        .services-page .about-cta p {
            max-width: 650px;
            margin: 16px auto 26px;
            color: #405b4e;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.9;
        }

        .services-page .about-cta .cta-button {
            display: inline-block;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            .services-page .about-cta .cta-button:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 28px rgba(7,92,72,.18);
            }


    /* =====================================================
   SCROLL REVEAL ANIMATION
===================================================== */

    .services-page.js-reveal .reveal-item {
        opacity: 0;
        transform: translateY(45px);
        transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
        will-change: opacity, transform;
    }

        .services-page.js-reveal .reveal-item.revealed {
            opacity: 1;
            transform: translateY(0);
        }

    .services-page.js-reveal .reveal-left {
        transform: translateX(-55px);
    }

    .services-page.js-reveal .reveal-right {
        transform: translateX(55px);
    }

    .services-page.js-reveal .reveal-zoom {
        transform: scale(.88);
    }

    .services-page.js-reveal .reveal-left.revealed,
    .services-page.js-reveal .reveal-right.revealed {
        transform: translateX(0);
    }

    .services-page.js-reveal .reveal-zoom.revealed {
        transform: scale(1);
    }

    /* Staggered card delays */

    .services-page .service-page-card:nth-child(2),
    .services-page .process-step:nth-child(2) {
        transition-delay: .10s;
    }

    .services-page .service-page-card:nth-child(3),
    .services-page .process-step:nth-child(3) {
        transition-delay: .18s;
    }

    .services-page .service-page-card:nth-child(4),
    .services-page .process-step:nth-child(4) {
        transition-delay: .26s;
    }

    .services-page .service-page-card:nth-child(5) {
        transition-delay: .34s;
    }

    .services-page .service-page-card:nth-child(6) {
        transition-delay: .42s;
    }

    /* Preserve hover effects with scroll reveal */

    .services-page.js-reveal .service-page-card.revealed:hover {
        transform: translateY(-11px);
    }

    .services-page.js-reveal .process-step.revealed:hover {
        transform: translateY(-9px);
    }


/* =====================================================
   HERO ANIMATIONS
===================================================== */

@keyframes serviceCircleFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(20px) rotate(8deg);
    }
}


/* =====================================================
   RESPONSIVE DESIGN
===================================================== */

@media (max-width: 992px) {
    .services-page .services-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-page .services-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .services-page .inner-page-hero {
        padding: 75px 18px;
    }

    .services-page .services-page-section,
    .services-page .services-process-section {
        padding: 65px 16px;
    }

    .services-page .services-page-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .services-page .service-page-card {
        padding: 28px 23px;
    }

    .services-page .services-process-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 35px;
    }

    .services-page .process-step {
        padding: 24px;
    }

    .services-page .about-cta {
        padding: 65px 18px;
    }
}

@media (max-width: 600px) {
    .services-page .inner-page-hero h1 {
        font-size: 34px;
    }

    .services-page .inner-page-hero p {
        font-size: 15px;
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {
    .services-page *,
    .services-page *::before,
    .services-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .services-page.js-reveal .reveal-item {
        opacity: 1;
        transform: none;
    }
}