/* ===================================
   Services Page Styles
   =================================== */

/* Services Mission - First Section */
.services-mission {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 180px 40px 120px;
    text-align: center;
}

.mission-title {
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

/* ===================================
   Service Section
   =================================== */

.service-section {
    padding: 80px 0;
}

.service-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: center;
}

.service-layout.reverse {
    grid-template-columns: 0.8fr 1.2fr;
}

.service-layout.reverse .service-image {
    order: 2;
}

.service-layout.reverse .service-text {
    order: 1;
}

.service-image img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    border-radius: 20px;
}

.service-text h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.service-text p {
    font-size: 20px;
    line-height: 1.7;
    color: var(--text-gray);
}

/* ===================================
   Services Statement
   =================================== */

.services-statement {
    padding: 160px 0;
    text-align: center;
}

.statement-text {
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* ===================================
   Services CTA
   =================================== */

.services-cta {
    padding: 120px 0;
    background: var(--light-green);
    text-align: center;
}

.cta-title {
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: -0.02em;
}

/* ===================================
   Responsive Design
   =================================== */

@media (max-width: 768px) {
    .services-mission {
        min-height: 60vh;
        padding: 140px 20px 100px;
    }

    .service-section {
        padding: 60px 0;
    }

    .service-layout,
    .service-layout.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .service-layout.reverse .service-image,
    .service-layout.reverse .service-text {
        order: unset;
    }

    .service-image img {
        height: 400px;
    }

    .services-statement {
        padding: 100px 0;
    }

    .services-cta {
        padding: 80px 0;
    }
}