/* ============================================================
   ECOARC-STUDIO
   SERVICES PAGE
   ============================================================ */


/* ============================================================
   01. BASE
   ============================================================ */

.services-page {
    --services-bg: #f7f7f4;
    --services-surface: #ffffff;
    --services-text: #151515;
    --services-muted: #6f6f6a;
    --services-line: #dcdcd6;
    --services-dark: #151515;

    width: 100%;
    min-height: 100vh;

    background: var(--services-bg);
    color: var(--services-text);

    direction: inherit;

    overflow: hidden;
}

.services-container {
    width: min(1320px, calc(100% - 64px));
    margin-inline: auto;
}

.services-page *,
.services-page *::before,
.services-page *::after {
    box-sizing: border-box;
}

.services-page a {
    color: inherit;
    text-decoration: none;
}

.services-page img {
    display: block;
    max-width: 100%;
}

.services-page h1,
.services-page h2,
.services-page h3,
.services-page p {
    margin-top: 0;
}

.services-page p {
    margin-bottom: 0;
}


/* ============================================================
   02. HERO
   ============================================================ */

.services-hero {
    padding-top: 190px;
    padding-bottom: 130px;
}

.services-hero .services-container {
    display: grid;
    grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
    column-gap: 80px;
}

.services-hero-content {
    max-width: 1050px;
}

.services-hero-title {
    margin: 0;

    font-size: clamp(52px, 7vw, 108px);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.055em;

    color: var(--services-text);
}

.services-hero-description {
    max-width: 620px;

    margin-top: 42px;

    font-size: 17px;
    line-height: 1.75;
    color: var(--services-muted);
}


/* ============================================================
   03. SECTION LABEL
   ============================================================ */

.services-section-label {
    display: flex;
    align-items: flex-start;

    padding-top: 8px;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: var(--services-muted);
}

.services-section-label span {
    position: relative;

    display: inline-block;

    padding-inline-start: 18px;
}

.services-section-label span::before {
    content: "";

    position: absolute;
    inset-inline-start: 0;
    top: 50%;

    width: 8px;
    height: 1px;

    background: currentColor;

    transform: translateY(-50%);
}


/* ============================================================
   04. SERVICES HEADING
   ============================================================ */

.services-list-section {
    padding-bottom: 150px;
}

.services-section-heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
    column-gap: 80px;

    padding-bottom: 54px;

    border-bottom: 1px solid var(--services-line);
}

.services-section-intro {
    max-width: 680px;

    font-size: 21px;
    line-height: 1.65;
    letter-spacing: -0.015em;

    color: var(--services-text);
}


/* ============================================================
   05. SERVICES LIST
   ============================================================ */

.services-list {
    width: 100%;
}

.service-item {
    border-bottom: 1px solid var(--services-line);
}

.service-item-link {
    position: relative;

    display: grid;
    grid-template-columns: 70px minmax(280px, 0.82fr) minmax(0, 1.18fr) 60px;
    align-items: center;
    column-gap: 42px;

    min-height: 330px;

    padding-block: 42px;

    transition:
        background-color 0.35s ease,
        padding-inline 0.35s ease;
}

.service-item-link:hover {
    padding-inline: 18px;

    background: rgba(255, 255, 255, 0.72);
}


/* ============================================================
   06. SERVICE NUMBER
   ============================================================ */

.service-item-number {
    align-self: flex-start;

    padding-top: 5px;

    font-size: 12px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.08em;

    color: var(--services-muted);
}


/* ============================================================
   07. SERVICE IMAGE
   ============================================================ */

.service-item-image {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #e9e9e4;
}

.service-item-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}

.service-item-link:hover .service-item-image img {
    transform: scale(1.035);
}


/* ============================================================
   08. SERVICE CONTENT
   ============================================================ */

.service-item-content {
    max-width: 620px;

    padding-inline-end: 20px;
}

.service-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-bottom: 26px;

    border: 1px solid var(--services-line);

    font-size: 14px;

    color: var(--services-muted);
}

.service-item-title {
    margin: 0;

    font-size: clamp(30px, 3.1vw, 48px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.045em;

    color: var(--services-text);

    transition: transform 0.35s ease;
}

.service-item-link:hover .service-item-title {
    transform: translateX(5px);
}

.service-item-description {
    max-width: 540px;

    margin-top: 24px;

    font-size: 16px;
    line-height: 1.75;

    color: var(--services-muted);
}


/* ============================================================
   09. SERVICE ARROW
   ============================================================ */

.service-item-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border: 1px solid var(--services-line);

    font-size: 20px;
    line-height: 1;

    color: var(--services-text);

    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease,
        border-color 0.35s ease;
}

.service-item-link:hover .service-item-arrow {
    color: #ffffff;
    background: var(--services-dark);
    border-color: var(--services-dark);

    transform: translate(4px, -4px);
}


/* ============================================================
   10. EMPTY STATE
   ============================================================ */

.services-empty {
    padding-block: 100px;

    border-bottom: 1px solid var(--services-line);
}

.services-empty p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--services-muted);
}


/* ============================================================
   11. PROCESS
   ============================================================ */

.services-process-section {
    padding-block: 140px;

    background: var(--services-surface);
}

.services-process-section .services-container {
    display: grid;
    grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
    column-gap: 80px;
}

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

    border-top: 1px solid var(--services-line);
}

.services-process-item {
    min-height: 300px;

    padding: 28px 30px 30px;

    border-inline-start: 1px solid var(--services-line);
}

.services-process-item:first-child {
    border-inline-start: 0;
}

.services-process-number {
    display: block;

    margin-bottom: 70px;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 0.08em;

    color: var(--services-muted);
}

.services-process-item h3 {
    margin: 0;

    font-size: 27px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.services-process-item p {
    max-width: 280px;

    margin-top: 20px;

    font-size: 15px;
    line-height: 1.75;

    color: var(--services-muted);
}


/* ============================================================
   12. STATEMENT
   ============================================================ */

.services-statement-section {
    padding-block: 170px;
}

.services-statement {
    display: grid;
    grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
    column-gap: 80px;
}

.services-statement h2 {
    max-width: 1050px;

    margin: 0;

    font-size: clamp(42px, 5.5vw, 82px);
    font-weight: 450;
    line-height: 1.02;
    letter-spacing: -0.055em;

    color: var(--services-text);
}


/* ============================================================
   13. CTA
   ============================================================ */

.services-cta-section {
    padding-block: 120px;

    background: var(--services-dark);
    color: #ffffff;
}

.services-cta {
    display: grid;
    grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
    column-gap: 80px;
}

.services-cta .services-section-label {
    color: rgba(255, 255, 255, 0.5);
}

.services-cta-content {
    max-width: 1000px;
}

.services-cta-content h2 {
    margin: 0;

    font-size: clamp(42px, 6vw, 92px);
    font-weight: 450;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.services-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    margin-top: 60px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

    font-size: 15px;
    line-height: 1;

    transition:
        gap 0.35s ease,
        border-color 0.35s ease;
}

.services-cta-link:hover {
    gap: 26px;

    border-color: #ffffff;
}


/* ============================================================
   14. RTL SUPPORT
   ============================================================ */

.services-page[dir="rtl"],
[dir="rtl"] .services-page {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .services-hero-title,
[dir="rtl"] .services-section-intro,
[dir="rtl"] .service-item-title,
[dir="rtl"] .service-item-description,
[dir="rtl"] .services-statement h2,
[dir="rtl"] .services-cta-content h2 {
    letter-spacing: 0;
}

[dir="rtl"] .service-item-link:hover .service-item-title {
    transform: translateX(-5px);
}

[dir="rtl"] .service-item-link:hover .service-item-arrow {
    transform: translate(-4px, -4px);
}

[dir="rtl"] .services-cta-link {
    direction: rtl;
}


/* ============================================================
   15. TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .services-container {
        width: min(100% - 48px, 900px);
    }

    .services-hero {
        padding-top: 160px;
        padding-bottom: 100px;
    }

    .services-hero .services-container,
    .services-section-heading,
    .services-process-section .services-container,
    .services-statement,
    .services-cta {
        grid-template-columns: 180px minmax(0, 1fr);
        column-gap: 45px;
    }

    .services-hero-title {
        font-size: clamp(52px, 8vw, 82px);
    }

    .service-item-link {
        grid-template-columns: 50px minmax(220px, 0.8fr) minmax(0, 1.2fr) 50px;
        column-gap: 25px;

        min-height: 280px;
    }

    .service-item-title {
        font-size: clamp(28px, 4vw, 40px);
    }

    .services-process-item {
        padding-inline: 20px;
    }

    .services-statement-section {
        padding-block: 130px;
    }

}


/* ============================================================
   16. MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .services-container {
        width: calc(100% - 40px);
    }

    .services-hero {
        padding-top: 135px;
        padding-bottom: 80px;
    }

    .services-hero .services-container,
    .services-section-heading,
    .services-process-section .services-container,
    .services-statement,
    .services-cta {
        display: block;
    }

    .services-hero .services-section-label,
    .services-section-heading .services-section-label,
    .services-process-section .services-section-label,
    .services-statement .services-section-label,
    .services-cta .services-section-label {
        margin-bottom: 38px;
    }

    .services-hero-title {
        font-size: clamp(48px, 14vw, 72px);
        line-height: 0.96;
    }

    .services-hero-description {
        margin-top: 32px;

        font-size: 16px;
        line-height: 1.7;
    }

    .services-list-section {
        padding-bottom: 90px;
    }

    .services-section-heading {
        padding-bottom: 35px;
    }

    .services-section-intro {
        font-size: 18px;
        line-height: 1.65;
    }


    /* Service items become editorial rows */

    .service-item-link {
        grid-template-columns: 40px minmax(0, 1fr) 42px;
        grid-template-areas:
            "number image arrow"
            "number content arrow";

        align-items: start;

        column-gap: 16px;

        min-height: auto;

        padding-block: 30px;
    }

    .service-item-link:hover {
        padding-inline: 0;
    }

    .service-item-number {
        grid-area: number;

        padding-top: 3px;
    }

    .service-item-image {
        grid-area: image;

        aspect-ratio: 16 / 10;
    }

    .service-item-content {
        grid-area: content;

        padding-inline-end: 0;
        padding-top: 24px;
    }

    .service-item-arrow {
        grid-area: arrow;

        width: 40px;
        height: 40px;

        font-size: 17px;
    }

    .service-item-link:hover .service-item-arrow {
        transform: translate(0, -3px);
    }

    [dir="rtl"] .service-item-link:hover .service-item-arrow {
        transform: translate(0, -3px);
    }

    .service-item-icon {
        width: 30px;
        height: 30px;

        margin-bottom: 18px;

        font-size: 12px;
    }

    .service-item-title {
        font-size: clamp(27px, 8vw, 40px);
        line-height: 1.04;
    }

    .service-item-description {
        margin-top: 18px;

        font-size: 15px;
        line-height: 1.7;
    }


    /* Process */

    .services-process-section {
        padding-block: 90px;
    }

    .services-process-grid {
        display: block;
    }

    .services-process-item {
        min-height: auto;

        padding: 30px 0;

        border-inline-start: 0;
        border-bottom: 1px solid var(--services-line);
    }

    .services-process-item:last-child {
        border-bottom: 0;
    }

    .services-process-number {
        margin-bottom: 45px;
    }

    .services-process-item h3 {
        font-size: 25px;
    }


    /* Statement */

    .services-statement-section {
        padding-block: 100px;
    }

    .services-statement h2 {
        font-size: clamp(38px, 10vw, 58px);
        line-height: 1.02;
    }


    /* CTA */

    .services-cta-section {
        padding-block: 90px;
    }

    .services-cta-content h2 {
        font-size: clamp(40px, 11vw, 62px);
    }

    .services-cta-link {
        margin-top: 45px;
    }

}


/* ============================================================
   17. SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .services-container {
        width: calc(100% - 32px);
    }

    .services-hero {
        padding-top: 120px;
        padding-bottom: 65px;
    }

    .services-hero-title {
        font-size: 45px;
    }

    .services-hero-description {
        font-size: 15px;
    }

    .services-section-intro {
        font-size: 17px;
    }

    .service-item-link {
        grid-template-columns: 30px minmax(0, 1fr) 38px;
        column-gap: 12px;

        padding-block: 24px;
    }

    .service-item-title {
        font-size: 27px;
    }

    .service-item-description {
        font-size: 14px;
    }

    .service-item-arrow {
        width: 36px;
        height: 36px;
    }

    .services-statement-section {
        padding-block: 80px;
    }

    .services-statement h2 {
        font-size: 37px;
    }

    .services-cta-section {
        padding-block: 75px;
    }

    .services-cta-content h2 {
        font-size: 39px;
    }

}


/* ============================================================
   18. REDUCED MOTION
   ============================================================ */

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

    .services-page *,
    .services-page *::before,
    .services-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }

}