/* Service detail pages — shared layout, unique content per route */
body.pe-service-page {
    background: #ffffff;
}

body.pe-service-page main {
    padding-top: calc(var(--pe-header-offset) + 12px);
    padding-bottom: 0;
}

body.pe-service-page #get-in-touch.pe-contact {
    border-top: 56px solid #ffffff;
    background-clip: padding-box;
}

@media (max-width: 1023px) {
    body.pe-service-page #get-in-touch.pe-contact {
        border-top-width: 40px;
    }
}

@media (max-width: 767px) {
    body.pe-service-page #get-in-touch.pe-contact {
        border-top-width: 28px;
    }
}

.pe-service {
    width: 100%;
    max-width: 1200px;
    /* max-width: 1040px; */
    margin: 0 auto;
    padding-left: var(--pe-container-pad-x);
    padding-right: var(--pe-container-pad-x);
    font-family: var(--pe-font);
}

body.pe-service-page .pe-service__banner {
    margin: 0 0 22px;
    padding: 14px 28px;
    border-radius: 22px;
    background: linear-gradient(90deg, #0F5D46 0%, #1a6e54 34%, #4a9075 56%, #a8cfc0 76%, #eef8f7 100%);
    color: #ffffff;
    font-family: var(--pe-font);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.pe-service__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    grid-template-areas:
        "desc visual"
        "list visual";
    column-gap: 36px;
    row-gap: 16px;
    align-items: start;
}

.pe-service__desc {
    grid-area: desc;
    /* max-width: 420px; */
    color: #3f3f3f;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

.pe-service__list {
    grid-area: list;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pe-service__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2b2b2b;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

.pe-service__list li::before {
    content: "";
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2.75l7.25 2.7v6.35c0 4.55-3.05 7.85-7.25 9.45-4.2-1.6-7.25-4.9-7.25-9.45V5.45L12 2.75z' stroke='%230f5d46' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8.7 12.05l2.25 2.25 4.4-4.55' stroke='%230f5d46' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    /* box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 0 0 1px rgba(16, 24, 40, 0.06); */
}

.pe-service__visual {
    grid-area: visual;
    justify-self: end;
    width: auto;
    max-width: 100%;
    margin: 0;
}

.pe-service .pe-service__image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 480px;
    height: auto;
    margin-left: auto;
    border-radius: 22px;
}

.pe-service__banner,
.pe-service__visual {
    animation: pe-service-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pe-service__visual {
    animation-delay: 0.28s;
}

.pe-service.pe-service-animate .pe-service-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transition-delay: calc(var(--pe-word-index, 0) * 0.05s);
}

.pe-service.pe-service-animate .pe-service__list li {
    opacity: 0;
    transform: translateX(40px);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transition-delay: calc(var(--pe-item-index, 0) * 0.5s);
}

.pe-service.pe-service-animate.is-resetting .pe-service-word,
.pe-service.pe-service-animate.is-resetting .pe-service__list li {
    transition: none;
}

.pe-service.pe-service-animate.is-inview .pe-service-word,
.pe-service.pe-service-animate.is-inview .pe-service__list li {
    opacity: 1;
    transform: none;
}

@keyframes pe-service-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1023px) {
    .pe-service__body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "desc"
            "list"
            "visual";
        row-gap: 20px;
    }

    .pe-service__visual {
        justify-self: stretch;
        width: 100%;
        max-width: 520px;
    }

    .pe-service .pe-service__image {
        width: 100%;
        max-height: none;
        margin-left: 0;
    }

    .pe-service__desc {
        max-width: none;
    }

    body.pe-service-page .pe-service__banner {
        margin-bottom: 18px;
        padding: 12px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pe-service__banner,
    .pe-service__visual,
    .pe-service-word,
    .pe-service__list li {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
}