/* :root {
            --primary: #0a9d46;
            --primary-dark: #0a9d46;
            --secondary: #0a9d46;
            --primary-soft: color-mix(in srgb, var(--primary) 8%, white);
            --primary-soft-2: color-mix(in srgb, var(--primary) 15%, white);
            --primary-muted: color-mix(in srgb, var(--primary) 30%, white);
            --accent: #f59e0b;
            --light: #f8fafc;
            --lighter: #f1f5f9;
        } */
        :root {
            --primary: #0a9d46;           /* Forest Green from logo */
            --primary-dark: #067231;      /* Darker green (or use #000000) */
            --secondary: #0a9d46;         /* Lighter green for contrast */
            --primary-soft: color-mix(in srgb, var(--primary) 8%, white);
            --primary-soft-2: color-mix(in srgb, var(--primary) 15%, white);
            --primary-muted: color-mix(in srgb, var(--primary) 30%, white);
            --accent: #f59e0b;            /* Warm amber/gold for CTAs */
            --light: #f8fafc;
            --lighter: #f1f5f9;
        }

        * {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #ffffff;
            color: #1e293b;
        }

        /* Animations */
        @keyframes soft-glow {

            0%,
            100% {
                box-shadow: 0 10px 25px color-mix(in srgb, var(--primary) 10%, transparent);
            }

            50% {
                box-shadow: 0 15px 35px color-mix(in srgb, var(--primary) 20%, transparent);
            }
        }

        @keyframes slide-up {
            from {
                transform: translateY(30px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes float-gentle {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-15px);
            }
        }

        @keyframes shimmer-light {
            0% {
                background-position: -1000px 0;
            }

            100% {
                background-position: 1000px 0;
            }
        }

        @keyframes gradient-flow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes bounce-soft {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes scale-in {
            from {
                transform: scale(0.95);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .soft-glow {
            animation: soft-glow 2s ease-in-out infinite;
        }

        .slide-up {
            animation: slide-up 0.6s ease-out;
        }

        .float-gentle {
            animation: float-gentle 3s ease-in-out infinite;
        }

        .bounce-soft {
            animation: bounce-soft 2s ease-in-out infinite;
        }

        .scale-in {
            animation: scale-in 0.6s ease-out;
        }

        /* Buttons */
        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 0.875rem 2rem;
            border-radius: 0.75rem;
            font-weight: 700;
            transition: all 0.3s ease;
            display: inline-block;
            border: none;
            cursor: pointer;
            box-shadow: 0 10px 25px color-mix(in srgb, var(--primary) 20%, transparent);
            position: relative;
            overflow: hidden;
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px color-mix(in srgb, var(--primary) 30%, transparent);
        }

        .btn-primary:active {
            transform: translateY(-1px);
        }

        .btn-secondary {
            background: white;
            color: var(--primary);
            padding: 0.875rem 2rem;
            border: 2px solid var(--primary);
            border-radius: 0.75rem;
            font-weight: 700;
            transition: all 0.3s ease;
            display: inline-block;
            cursor: pointer;
            box-shadow: 0 4px 15px color-mix(in srgb, var(--primary) 10%, transparent);
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 15px 35px color-mix(in srgb, var(--primary) 20%, transparent);
        }

        /* Cards */
        .card-light {
            background: white;
            border-radius: 1.25rem;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
            border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
        }

        .card-light:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px color-mix(in srgb, var(--primary) 15%, transparent);
            border-color: var(--primary);
        }

        /* Service Card */
        .service-card {
            background: white;
            border-radius: 1.25rem;
            padding: 2.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
            border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.6s ease;
            z-index: 0;
        }

        .service-card:hover::before {
            left: 100%;
        }

        .service-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px color-mix(in srgb, var(--primary) 15%, transparent);
            border-color: var(--secondary);
        }

        .service-icon {
            width: 4.5rem;
            height: 4.5rem;
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent) 0%, color-mix(in srgb, var(--secondary) 10%, transparent) 100%);
            border: 2px solid var(--primary);
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 2rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px color-mix(in srgb, var(--primary) 10%, transparent);
        }

        .service-card:hover .service-icon {
            transform: scale(1.15) rotate(-10deg);
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            box-shadow: 0 10px 25px color-mix(in srgb, var(--primary) 20%, transparent);
        }

        /* Gradient Text */
        .gradient-text {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            background-size: 200% 200%;
            /* animation: gradient-flow 3s ease infinite; */
        }

        /* Section Label */
        .section-label {
            color: var(--primary);
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .section-label::before {
            content: '';
            width: 24px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 2px;
        }

        /* Navigation */
        .nav-item {
            color: #334155;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            padding-bottom: 5px;
        }

        .nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transition: width 0.3s ease;
        }

        .nav-item:hover {
            color: var(--primary);
        }

        .nav-item:hover::after {
            width: 100%;
        }

        /* Stat Card */
        .stat-card {
            background: white;
            border-radius: 1.25rem;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 5%, transparent), transparent);
            transition: left 0.8s ease;
            z-index: 0;
        }

        .stat-card:hover::before {
            left: 100%;
        }

        .stat-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px color-mix(in srgb, var(--primary) 15%, transparent);
            border-color: var(--secondary);
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        /* Feature List */
        .feature-item {
            display: flex;
            align-items: start;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
            transition: all 0.3s ease;
        }

        .feature-item:last-child {
            border-bottom: none;
        }

        .feature-item:hover {
            padding-left: 0.5rem;
            color: var(--primary);
        }

        .feature-icon {
            color: var(--primary);
            font-size: 1.3rem;
            min-width: 24px;
            text-align: center;
        }

        /* Pricing Card */
        .pricing-card {
            background: white;
            border: 2px solid color-mix(in srgb, var(--primary) 10%, transparent);
            border-radius: 1.25rem;
            padding: 2.5rem;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
            position: relative;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        }

        .pricing-card:hover {
            transform: translateY(-12px);
            border-color: var(--primary);
            box-shadow: 0 25px 50px color-mix(in srgb, var(--primary) 15%, transparent);
        }

        .pricing-card.featured {
            border: 2px solid var(--primary);
            transform: scale(1.05);
            box-shadow: 0 20px 50px color-mix(in srgb, var(--primary) 20%, transparent);
            background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--primary) 2%, transparent) 100%);
        }

        .pricing-card.featured:hover {
            transform: scale(1.12) translateY(-12px);
            box-shadow: 0 30px 60px color-mix(in srgb, var(--primary) 25%, transparent);
        }

        /* FAQ Card */
        .faq-card {
            background: white;
            border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
            border-radius: 1rem;
            padding: 1.5rem;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
        }

        .faq-card:hover {
            border-color: var(--primary);
            background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--primary) 2%, transparent) 100%);
            box-shadow: 0 8px 25px color-mix(in srgb, var(--primary) 10%, transparent);
        }

        .faq-card input[type="checkbox"] {
            display: none;
        }

        .faq-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: 600;
            color: #1e293b;
            user-select: none;
        }

        .faq-card input[type="checkbox"]:checked+.faq-label .toggle-icon {
            transform: rotate(180deg);
            color: var(--primary);
        }

        .faq-card input[type="checkbox"]:checked~.faq-content {
            max-height: 500px;
            opacity: 1;
            margin-top: 1rem;
        }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.3s ease;
            color: #64748b;
            line-height: 1.6;
        }

        .toggle-icon {
            transition: all 0.3s ease;
            color: var(--primary);
        }

        /* Team Card */
        .team-card {
            background: white;
            border-radius: 1.25rem;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
            transition: all 0.4s ease;
        }

        .team-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 20px 45px color-mix(in srgb, var(--primary) 15%, transparent);
            border-color: var(--primary);
        }

        .team-image {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent) 0%, color-mix(in srgb, var(--secondary) 8%, transparent) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: var(--primary);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
        }

        .team-card:hover .team-image {
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, transparent) 0%, color-mix(in srgb, var(--secondary) 15%, transparent) 100%);
        }

        .team-info {
            padding: 1.5rem;
        }

        /* Process Step */
        .process-step {
            background: white;
            border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
            border-radius: 1.25rem;
            padding: 2rem;
            text-align: center;
            position: relative;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .process-step:hover {
            border-color: var(--primary);
            box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 15%, transparent);
            transform: translateY(-6px);
        }

        .step-number {
            width: 3.5rem;
            height: 3.5rem;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 900;
            color: white;
            margin: 0 auto 1.5rem;
            box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 25%, transparent);
        }

        /* Hero Visual */
        .hero-visual {
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent) 0%, color-mix(in srgb, var(--secondary) 5%, transparent) 100%);
            border: 2px solid color-mix(in srgb, var(--primary) 15%, transparent);
            border-radius: 1.5rem;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 10%, transparent);
        }

        .hero-visual::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, color-mix(in srgb, var(--primary) 8%, transparent) 0%, transparent 70%);
            animation: float-gentle 8s ease-in-out infinite;
        }

        .hero-visual i {
            font-size: 12rem;
            color: var(--primary);
            opacity: 0.2;
            animation: float-gentle 4s ease-in-out infinite;
            z-index: 1;
        }

        /* Badge */
        .badge-light {
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent) 0%, color-mix(in srgb, var(--secondary) 10%, transparent) 100%);
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 0.5rem 1.25rem;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.85rem;
            display: inline-block;
            box-shadow: 0 4px 15px color-mix(in srgb, var(--primary) 10%, transparent);
            transition: all 0.3s ease;
        }

        .badge-light:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 15%, transparent);
        }

        /* Testimonial */
        .testimonial {
            background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--primary) 2%, transparent) 100%);
            border-left: 4px solid var(--primary);
            border-radius: 1rem;
            padding: 2rem;
            position: relative;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .testimonial:hover {
            transform: translateX(8px);
            box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 12%, transparent);
            border-left-color: var(--secondary);
        }

        .testimonial::before {
            content: '"';
            position: absolute;
            top: -10px;
            right: 20px;
            font-size: 4rem;
            color: color-mix(in srgb, var(--primary) 10%, transparent);
        }

        /* Offer Banner */
        .offer-banner {
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent) 0%, color-mix(in srgb, var(--secondary) 8%, transparent) 100%);
            border: 2px solid var(--primary);
            border-radius: 1.25rem;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 25px color-mix(in srgb, var(--primary) 10%, transparent);
        }

        /* Warranty Section */
        .warranty-box {
            background: white;
            border-top: 4px solid var(--primary);
            border-radius: 1.25rem;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            text-align: center;
            transition: all 0.3s ease;
        }

        .warranty-box:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px color-mix(in srgb, var(--primary) 15%, transparent);
        }

        @media (max-width: 768px) {
            .pricing-card.featured {
                transform: scale(1);
            }

            .pricing-card.featured:hover {
                transform: scale(1.05) translateY(-12px);
            }
        }

/* Mobile AOS horizontal-scroll fix: keep animations inside the viewport. */
html, body {
    max-width: 100%;
}

@media (max-width: 767px) {
    [data-aos="fade-left"],
    [data-aos="fade-right"] {
        transform: translate3d(0, 28px, 0) !important;
    }

    [data-aos="fade-left"].aos-animate,
    [data-aos="fade-right"].aos-animate {
        transform: translate3d(0, 0, 0) !important;
    }

    [data-aos] {
        max-width: 100%;
    }
}


/* =========================================================
   BRAND COLOUR SYSTEM
   Change these values in :root to rebrand the site globally.
   ========================================================= */
.text-green-400,.text-green-500,.text-green-600,.text-green-700 { color: var(--primary) !important; }
.bg-green-500,.bg-green-600,.bg-green-700 { background-color: var(--primary) !important; }
.bg-green-50 { background-color: var(--primary-soft) !important; }
.bg-green-100 { background-color: var(--primary-soft-2) !important; }
.border-green-300,.border-green-400,.border-green-500,.border-green-600,.border-green-700 { border-color: var(--primary) !important; }
.hover\:text-green-600:hover,.hover\:text-green-700:hover { color: var(--primary-dark) !important; }
.hover\:bg-green-50:hover { background-color: var(--primary-soft) !important; }
.hover\:bg-green-600:hover,.hover\:bg-green-700:hover { background-color: var(--primary-dark) !important; }
.from-green-50 { --tw-gradient-from: var(--primary-soft) var(--tw-gradient-from-position) !important; --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; }
.via-green-50 { --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from),var(--primary-soft) var(--tw-gradient-via-position),var(--tw-gradient-to) !important; }
.to-green-50 { --tw-gradient-to: var(--primary-soft) var(--tw-gradient-to-position) !important; }
.from-green-500,.from-green-600 { --tw-gradient-from: var(--primary) var(--tw-gradient-from-position) !important; --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; }
.via-green-500,.via-green-600 { --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from),var(--primary) var(--tw-gradient-via-position),var(--tw-gradient-to) !important; }
.to-green-500,.to-green-600 { --tw-gradient-to: var(--primary-dark) var(--tw-gradient-to-position) !important; }

/* Primary -> dark-primary gradient. No white gradient stop. */
.brand-gradient { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%) !important; }

/* Detailed service page content */
.service-detail-section {
    background: #f7faf8;
    padding: 4.5rem 1rem 5rem;
    overflow-x: clip;
}
.service-detail-wrap {
    width: 100%;
    max-width: 76rem;
    margin: 0 auto;
}
.service-detail-content {
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, #e5e7eb);
    border-radius: 1.5rem;
    box-shadow: 0 18px 50px rgba(15,23,42,.07);
    color: #475569;
    font-size: 1.04rem;
    line-height: 1.82;
    padding: 2.5rem 3rem;
    overflow-wrap: anywhere;
}
.service-detail-content > p:first-child { display: none; }
.service-detail-content h2 {
    color: #172033;
    font-size: 1.8rem;
    line-height: 1.25;
    font-weight: 800;
    margin: 2.8rem 0 1.1rem;
    padding: .85rem 1rem .85rem 1.15rem;
    border-left: 5px solid var(--primary);
    border-radius: 0 .75rem .75rem 0;
    background: var(--primary-soft);
}
.service-detail-content h2:first-of-type { margin-top: 0; }
.service-detail-content h3 {
    color: #172033;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 750;
    margin: 2rem 0 .75rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, #e5e7eb);
}
.service-detail-content p { margin: .72rem 0; }
.service-detail-content strong { color: #263548; font-weight: 700; }
.service-detail-content ul {
    margin: 1rem 0 1.4rem;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .65rem .85rem;
}
.service-detail-content li {
    position: relative;
    min-height: 2.7rem;
    display: flex;
    align-items: center;
    padding: .55rem .8rem .55rem 2.35rem;
    border: 1px solid color-mix(in srgb, var(--primary) 13%, #e5e7eb);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--primary) 4%, white);
}
.service-detail-content li::before {
    content: '✓';
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-weight: 900;
}
.service-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--primary) 35%,transparent), transparent);
    margin: 2.65rem 0;
}
@media (max-width: 767px) {
    .service-detail-section { padding: 3rem .85rem 4rem; }
    .service-detail-content { padding: 1.35rem 1rem; border-radius: 1rem; font-size: 1rem; line-height: 1.75; }
    .service-detail-content h2 { font-size: 1.45rem; margin-top: 2.15rem; padding: .75rem .85rem; }
    .service-detail-content h3 { font-size: 1.15rem; }
    .service-detail-content ul { grid-template-columns: 1fr; }
    [data-aos="fade-left"],[data-aos="fade-right"] { transform: translate3d(0,28px,0) !important; }
    [data-aos="fade-left"].aos-animate,[data-aos="fade-right"].aos-animate { transform: translate3d(0,0,0) !important; }
}

/* Detailed page enhanced content blocks */
.service-card-grid,.area-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.25rem 0 1.75rem}
.service-info-card,.area-info-card{position:relative;border:1px solid color-mix(in srgb,var(--primary) 16%,#e5e7eb);border-radius:1rem;background:#fff;padding:1.15rem 1.15rem 1.1rem;box-shadow:0 8px 24px rgba(15,23,42,.05);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.service-info-card:hover,.area-info-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,23,42,.09);border-color:var(--primary)}
.service-info-card::before{content:'';display:block;width:2.6rem;height:.22rem;border-radius:999px;background:var(--primary);margin-bottom:.8rem}
.area-info-card::before{content:'\f3c5';font-family:'Font Awesome 6 Free','Font Awesome 5 Free';font-weight:900;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.7rem;background:var(--primary-soft);color:var(--primary);margin-bottom:.75rem}
.service-detail-content .service-info-card h3,.service-detail-content .area-info-card h3{margin:0 0 .45rem;padding:0;border:0;color:#172033;font-size:1.08rem}
.service-info-card p,.area-info-card p{margin:0!important;font-size:.96rem;line-height:1.65;color:#64748b}
.faq-list{margin:1.2rem 0 1.8rem;display:grid;gap:.75rem}
.faq-item{border:1px solid color-mix(in srgb,var(--primary) 16%,#e5e7eb);border-radius:.9rem;background:#fff;overflow:hidden;box-shadow:0 5px 18px rgba(15,23,42,.035)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;background:#fff;border:0;text-align:left;color:#172033;font-size:1.05rem;font-weight:750;cursor:pointer;transition:background .2s ease,color .2s ease}
.faq-question:hover,.faq-item.is-open .faq-question{background:var(--primary-soft);color:var(--primary-dark)}
.faq-icon{flex:0 0 auto;width:1.8rem;height:1.8rem;border-radius:999px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;transition:transform .25s ease}
.faq-item.is-open .faq-icon{transform:rotate(45deg)}
.faq-answer{display:none;padding:.1rem 1.15rem 1.15rem;color:#64748b}
.faq-item.is-open .faq-answer{display:block}
.faq-answer p:first-child{margin-top:.6rem}.faq-answer ul{margin-bottom:.4rem}
@media(max-width:991px){.service-card-grid,.area-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.service-card-grid,.area-card-grid{grid-template-columns:1fr}.service-info-card,.area-info-card{padding:1rem}.faq-question{font-size:1rem;padding:.9rem 1rem}.faq-answer{padding:.05rem 1rem 1rem}}

/* =========================================================
   SERVICE DETAIL UI V3
   ========================================================= */
.service-detail-section{background:linear-gradient(180deg,#f7faf8 0%,#fff 100%);padding:3.5rem 1rem 5rem}
.service-detail-wrap{max-width:78rem}
.service-detail-content{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible;display:grid;gap:1.25rem}
.detail-block{position:relative;background:#fff;border:1px solid #e4eee8;border-radius:1.35rem;padding:2rem 2.1rem;box-shadow:0 12px 35px rgba(15,23,42,.055);overflow:hidden}
.detail-block::after{content:'';position:absolute;right:-70px;top:-70px;width:170px;height:170px;border-radius:999px;background:var(--primary-soft);pointer-events:none}
.detail-block-alt{background:linear-gradient(135deg,#fff 0%,color-mix(in srgb,var(--primary) 3%,white) 100%)}
.service-detail-content .detail-block h2{position:relative;z-index:1;margin:0 0 1.15rem;padding:0 0 .9rem;background:transparent;border:0;border-radius:0;color:#122033;font-size:1.75rem;font-weight:800}
.service-detail-content .detail-block h2::after{content:'';display:block;width:54px;height:4px;margin-top:.65rem;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary-dark))}
.service-detail-content .detail-block h3{position:relative;z-index:1;color:#172033}
.service-detail-content .detail-block>p{position:relative;z-index:1}
.service-detail-content .detail-block>ul{position:relative;z-index:1}
.service-detail-content ul{gap:.7rem}
.service-detail-content li{background:#fff;border-color:#e4eee8;box-shadow:0 3px 12px rgba(15,23,42,.025);transition:.2s ease}
.service-detail-content li:hover{border-color:color-mix(in srgb,var(--primary) 45%,#e5e7eb);transform:translateY(-1px)}
.service-detail-content li::before{content:'✓';display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;left:.7rem;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);font-size:.78rem}

.service-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;position:relative;z-index:1}
.service-info-card{padding:1.25rem;border:1px solid #e3ece6;border-radius:1rem;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.045)}
.service-info-card::before{height:3px;width:42px;background:linear-gradient(90deg,var(--primary),var(--primary-dark))}
.service-info-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px rgba(10,157,70,.11)}

.area-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;position:relative;z-index:1}
.area-info-card{padding:1.1rem;display:grid;grid-template-columns:42px 1fr;column-gap:.8rem;align-items:start}
.area-info-card::before{grid-row:1 / span 2;margin:0;width:42px;height:42px;border-radius:.8rem;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}
.service-detail-content .area-info-card h3{align-self:center;margin:.15rem 0 .25rem}
.area-info-card p{grid-column:2}

.process-grid{counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;position:relative;z-index:1}
.process-card{counter-increment:step;position:relative;padding:1.25rem 1.15rem 1.15rem 4rem;background:#fff;border:1px solid #e3ece6;border-radius:1rem;box-shadow:0 7px 20px rgba(15,23,42,.04)}
.process-card::before{content:counter(step);position:absolute;left:1rem;top:1.1rem;width:2.25rem;height:2.25rem;border-radius:.7rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-weight:800}
.service-detail-content .process-card h3{margin:0 0 .45rem;padding:0;border:0;font-size:1.08rem}
.process-card p{margin:.3rem 0!important;font-size:.96rem;line-height:1.65}
.process-card ul{display:block;margin:.6rem 0 0}.process-card li{margin:.4rem 0}

.faq-list{position:relative;z-index:1;gap:.7rem;margin:0}
.faq-item{border:1px solid #dce9e1;border-radius:1rem;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}
.faq-item.is-open{border-color:color-mix(in srgb,var(--primary) 45%,#dce9e1);box-shadow:0 8px 24px rgba(10,157,70,.08)}
.faq-question{padding:1rem 1.15rem;font-size:1.02rem}
.faq-question:hover,.faq-item.is-open .faq-question{background:var(--primary-soft);color:var(--primary-dark)}
.faq-icon{background:linear-gradient(135deg,var(--primary),var(--primary-dark));font-weight:700}
.faq-answer{display:grid;grid-template-rows:0fr;padding:0 1.15rem;color:#53657a;transition:grid-template-rows .28s ease,padding .28s ease}
.faq-answer>*{overflow:hidden}
.faq-item.is-open .faq-answer{display:block;padding:.35rem 1.15rem 1.15rem}
.faq-answer ul{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;margin:.75rem 0!important}

@media(max-width:991px){.service-card-grid,.area-card-grid,.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .service-detail-section{padding:2.5rem .75rem 4rem}
 .service-detail-content{gap:1rem}
 .detail-block{padding:1.3rem 1rem;border-radius:1rem}
 .service-detail-content .detail-block h2{font-size:1.4rem}
 .service-card-grid,.area-card-grid,.process-grid{grid-template-columns:1fr}
 .area-info-card{grid-template-columns:38px 1fr}.area-info-card::before{width:38px;height:38px}
 .faq-answer ul{grid-template-columns:1fr!important}
 .faq-question{font-size:.98rem;padding:.9rem 1rem}
}