/* ========================================================
   SERVICES
   ======================================================== */

.services-section {
    padding: 120px 5% 85px;
    background: #f1ede5;
}

.services-inner {
    max-width: 1450px;
    margin: auto;
}


/* ========================================================
   HEADING
   ======================================================== */

.services-heading {
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 72px;
}

.services-heading h2 {
    max-width: 760px;
    font-family: var(--serif);
    font-size: clamp(44px,4.7vw,72px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -2px;
}

.services-heading h2 em {
    display: block;
    color: var(--champagne);
    font-weight: 500;
}

.services-intro {
    max-width: 520px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
}


/* ========================================================
   EDITORIAL SERVICES
   ======================================================== */

.services-editorial {
    display: flex;
    flex-direction: column;
    gap: 88px;
}

.service-item {
    position: relative;
    display: grid;
    grid-template-columns: .12fr .95fr .85fr;
    gap: 45px;
    align-items: center;
}

.service-item-reverse {
    grid-template-columns: .12fr .85fr .95fr;
}

.service-item-reverse .service-image-wrap {
    order: 3;
}

.service-item-reverse .service-copy {
    order: 2;
}

.service-item-reverse .service-number {
    order: 1;
}


/* ========================================================
   NUMBER
   ======================================================== */

.service-number {
    align-self: start;
    padding-top: 6px;
    font-family: var(--serif);
    font-size: 52px;
    color: rgba(145,123,94,.42);
}


/* ========================================================
   EDITORIAL IMAGE SYSTEM
   ======================================================== */

.service-image-wrap {
    position: relative;
    overflow: visible;
    min-height: 480px;
    isolation: isolate;
}

.service-image {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;
    min-height: 480px;

    object-fit: cover;

    filter: saturate(.86) contrast(.98);

    transition:
        transform 1.1s cubic-bezier(.22,.61,.36,1),
        filter .8s ease;

    will-change: transform;

    clip-path: inset(0);
}


/* ========================================================
   SERVICE 01
   ======================================================== */

.service-item:nth-child(1) .service-image-wrap {
    max-width: 520px;
}

.service-item:nth-child(1) .service-image {
    border-radius: 0 70px 0 0;
}

.service-item:nth-child(1) .service-image-wrap::before {
    content: "";

    position: absolute;

    top: 18px;
    left: 18px;
    right: -18px;
    bottom: -18px;

    border: 1px solid rgba(145,123,94,.38);

    border-radius: 0 70px 0 0;

    z-index: 0;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1);
}


/* ========================================================
   SERVICE 02
   ======================================================== */

.service-item:nth-child(2) .service-image-wrap {
    min-height: 430px;
}

.service-item:nth-child(2) .service-image {
    min-height: 430px;

    border-radius: 0 0 0 65px;
}

.service-item:nth-child(2) .service-image-wrap::before {
    content: "";

    position: absolute;

    top: -17px;
    left: -17px;
    right: 17px;
    bottom: 17px;

    border: 1px solid rgba(145,123,94,.38);

    border-radius: 0 0 0 65px;

    z-index: 0;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1);
}


/* ========================================================
   SERVICE 03
   ======================================================== */

.service-item:nth-child(3) .service-image-wrap {
    max-width: 500px;
    min-height: 520px;
}

.service-item:nth-child(3) .service-image {
    min-height: 520px;

    border-radius: 55px 0 55px 0;
}

.service-item:nth-child(3) .service-image-wrap::before {
    content: "";

    position: absolute;

    top: 18px;
    left: 18px;
    right: -18px;
    bottom: -18px;

    border: 1px solid rgba(145,123,94,.38);

    border-radius: 55px 0 55px 0;

    z-index: 0;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1);
}


/* ========================================================
   IMAGE OVERLAY
   ======================================================== */

.service-image-overlay {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(35,33,29,0) 55%,
            rgba(35,33,29,.10) 100%
        );
}

.service-item:nth-child(1) .service-image-overlay {
    border-radius: 0 70px 0 0;
}

.service-item:nth-child(2) .service-image-overlay {
    border-radius: 0 0 0 65px;
}

.service-item:nth-child(3) .service-image-overlay {
    border-radius: 55px 0 55px 0;
}


/* ========================================================
   IMAGE HOVER
   ======================================================== */

.service-item:hover .service-image {
    transform: translateY(-5px) scale(1.025);

    filter: saturate(.96) contrast(1);
}

.service-item:nth-child(1):hover .service-image-wrap::before,
.service-item:nth-child(3):hover .service-image-wrap::before {
    transform: translate(6px,6px);
}

.service-item:nth-child(2):hover .service-image-wrap::before {
    transform: translate(-6px,-6px);
}


/* ========================================================
   SERVICE COPY
   ======================================================== */

.service-copy {
    max-width: 500px;
}

.service-copy h3 {
    margin-bottom: 22px;

    font-family: var(--serif);

    font-size: clamp(34px,3vw,50px);

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -1px;
}

.service-copy p {
    margin-bottom: 30px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.9;
}


/* ========================================================
   SERVICE LINKS
   Text + large arrow + animated underline
   ======================================================== */

.service-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 18px;

    width: fit-content;

    padding-bottom: 7px;

    color: var(--ink);

    font-family: var(--sans);

    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    text-decoration: none;

    cursor: pointer;
}


/* Large arrow */

.service-link-arrow {
    display: inline-block;

    font-size: 27px;
    font-weight: 400;

    line-height: 1;

    transform: translateY(-1px);

    transition:
        transform .3s ease;
}


/* Animated underline */

.service-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: var(--champagne);

    transform: scaleX(0);

    transform-origin: right;

    transition:
        transform .38s cubic-bezier(.77,0,.18,1);
}


/* Hover */

.service-link:hover::after,
.service-link:focus-visible::after {
    transform: scaleX(1);

    transform-origin: left;
}

.service-link:hover .service-link-arrow,
.service-link:focus-visible .service-link-arrow {
    transform:
        translateX(7px)
        translateY(-1px);
}

.service-link:focus-visible {
    outline: none;
}


/* ========================================================
   EDITORIAL STATEMENT
   ======================================================== */

.editorial-statement {
    position: relative;

    /* Antes: 150px 5% */
    padding: 120px 5%;

    background: var(--olive);

    color: white;

    overflow: hidden;
}

.editorial-inner {
    position: relative;

    z-index: 2;

    max-width: 1050px;

    margin: auto;

    text-align: center;
}


/* ========================================================
   EYEBROW
   ======================================================== */

.editorial-small {
    margin-bottom: 26px;

    color: rgba(255,255,255,.58);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 3.5px;
}


/* ========================================================
   TITLE
   ======================================================== */

.editorial-inner h2 {
    font-family: var(--serif);

    font-size: clamp(46px,6vw,88px);

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -2.5px;
}

.editorial-inner h2 span,
.editorial-inner h2 em {
    display: block;
}

.editorial-inner h2 em {
    margin-top: 6px;

    color: #d7c3a6;

    font-weight: 500;
}


/* ========================================================
   DESCRIPTION
   ======================================================== */

.editorial-description {
    max-width: 680px;

    /* Antes: 38px */
    margin: 30px auto 0;

    color: rgba(255,255,255,.70);

    font-size: 14px;

    line-height: 1.9;
}


/* ========================================================
   DECORATIVE CIRCLES
   ======================================================== */

.editorial-line {
    position: absolute;

    width: 270px;
    height: 270px;

    border: 1px solid rgba(214,195,166,.17);

    border-radius: 50%;

    pointer-events: none;
}

.editorial-line-left {
    left: -145px;

    top: 50%;

    transform: translateY(-50%);
}

.editorial-line-right {
    right: -145px;

    top: 50%;

    transform: translateY(-50%);
}


/* ========================================================
   RESPONSIVE — TABLET
   ======================================================== */

@media (max-width: 980px) {

    .services-heading {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .service-item,
    .service-item-reverse {
        grid-template-columns: .12fr 1fr;
        gap: 28px;
    }

    .service-item .service-image-wrap,
    .service-item-reverse .service-image-wrap {
        order: 2;
    }

    .service-item .service-copy,
    .service-item-reverse .service-copy {
        grid-column: 2;
        order: 3;
        margin-top: 10px;
    }

    .service-number {
        grid-row: span 2;
    }

}


/* ========================================================
   RESPONSIVE — MOBILE
   ======================================================== */

@media (max-width: 620px) {

    /* ====================================================
       SERVICES
       ==================================================== */

    .services-section {
        padding: 62px 6% 55px;
    }

    .services-heading {
        margin-bottom: 28px;
    }

    /*
       Reduced vertical separation between
       service 01, 02 and 03 on mobile.
    */
    .services-editorial {
        gap: 22px;
    }

    .service-item,
    .service-item-reverse {
        display: block;
    }

    .service-number {
        margin-bottom: 12px;
        font-size: 38px;
    }

    .service-copy {
        margin-top: 28px;
    }

    .service-link {
        gap: 15px;
    }

    .service-link-arrow {
        font-size: 25px;
    }


    /* Service image corners */

    .service-item:nth-child(1) .service-image,
    .service-item:nth-child(1) .service-image-overlay {
        border-radius: 0 45px 0 0;
    }

    .service-item:nth-child(2) .service-image,
    .service-item:nth-child(2) .service-image-overlay {
        border-radius: 0 0 0 45px;
    }

    .service-item:nth-child(3) .service-image,
    .service-item:nth-child(3) .service-image-overlay {
        border-radius: 40px 0 40px 0;
    }


    /* Service image height */

    .service-item:nth-child(1) .service-image-wrap,
    .service-item:nth-child(2) .service-image-wrap,
    .service-item:nth-child(3) .service-image-wrap,
    .service-item:nth-child(1) .service-image,
    .service-item:nth-child(2) .service-image,
    .service-item:nth-child(3) .service-image {
        min-height: 400px;
    }


    /* ====================================================
       EDITORIAL STATEMENT
       ==================================================== */

    .editorial-statement {
        padding: 70px 6%;
    }

    .editorial-small {
        margin-bottom: 22px;
    }

    .editorial-inner h2 {
        font-size: clamp(42px, 12vw, 58px);
        letter-spacing: -1.5px;
    }

    .editorial-description {
        margin-top: 26px;
        font-size: 13px;
        line-height: 1.8;
    }

    .editorial-line {
        width: 190px;
        height: 190px;
    }

    .editorial-line-left {
        left: -125px;
    }

    .editorial-line-right {
        right: -125px;
    }

}


/* ========================================================
   ACCESSIBILITY
   ======================================================== */

@media (prefers-reduced-motion: reduce) {

    .service-image,
    .service-image-wrap::before,
    .service-link::after,
    .service-link-arrow {
        transition: none !important;
    }

}