@media (max-width: 767px) {

    .services {
        padding-block: 72px 88px;
    }

    /* HEADER */

    .services__header {
        display: block;

        margin-bottom: 48px;
    }

    .services__eyebrow {
        margin-bottom: 16px;

        font-size: 12px;
    }

    .services__title {
        max-width: none;

        font-size: clamp(3rem, 14vw, 4.5rem);
        line-height: 0.9;
        letter-spacing: -0.055em;
    }

    .services__questions {
        max-width: 340px;

        margin-top: 24px;

        font-size: 17px;
        line-height: 1.4;
    }

    /* INTRO */

    .services__intro {
        margin-top: 36px;
        padding: 0;
    }

    .services__intro p {
        max-width: 330px;

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

    .services__line {
        width: 40px;
        height: 3px;

        margin-top: 18px;
    }

    /* GRID */

    .services__grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 48px;

        margin: 0;
    }

    /* CARD */

    .service-card {
        display: grid;

        grid-template-columns: 42% minmax(0, 1fr);

        grid-template-rows: auto auto 1fr;

        column-gap: 20px;

        align-items: start;
    }

    .service-card__image {
        grid-column: 1;
        grid-row: 1 / 4;

        aspect-ratio: 0.82;

        margin: 0;

        border-radius: 8px;
    }

    .service-card__title {
        grid-column: 2;
        grid-row: 1;

        font-size: 21px;
        line-height: 0.95;
    }

    .service-card__description {
        grid-column: 2;
        grid-row: 2;

        max-width: 240px;

        margin-top: 12px;

        font-size: 14px;
        line-height: 1.4;
    }

    .service-card__arrow {
        grid-column: 2;
        grid-row: 3;

        align-self: end;

        width: 30px;
        height: 30px;

        margin-top: 20px;
    }
}

@media (max-width: 380px) {

    .services {
        padding-block: 64px 72px;
    }

    .services__title {
        font-size: 2.8rem;
    }

    .services__questions {
        font-size: 16px;
    }

    .service-card {
        grid-template-columns: 40% minmax(0, 1fr);

        column-gap: 16px;
    }

    .service-card__title {
        font-size: 18px;
    }

    .service-card__description {
        font-size: 13px;
    }

}

/* ========================================
   HERO - TABLET
======================================== */

@media (max-width: 1024px) {

    .hero__layout {
        grid-template-columns: 1fr 0.9fr;
    }

    .hero__content {
        padding:
            48px
            40px;
    }

    .hero__title {
        font-size: clamp(3rem, 5.5vw, 4.8rem);
    }

    .hero__footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 24px;
    }

}


/* ========================================
   HERO - MOBILE
======================================== */

@media (max-width: 767px) {

    .hero__layout {
        display: flex;
        flex-direction: column;
    }

    .hero__content {
        display: block;

        padding:
            32px
            var(--container-padding-mobile)
            56px;
    }

    .hero__content-inner {
        max-width: none;
    }


    /* EYEBROW */

    .hero__eyebrow {
        margin-bottom: 40px;

        font-size: var(--text-xs);
    }


    /* TITLE */

    .hero__title {
        font-size: clamp(3rem, 14vw, 4.8rem);

        line-height: 0.9;
        letter-spacing: -0.055em;
    }


    /* FOOTER */

    .hero__footer {
        display: flex;
        flex-direction: column;

        align-items: flex-start;

        gap: 24px;

        margin-top: 40px;
    }


    /* DESCRIPTION */

    .hero__description {
        max-width: 330px;

        font-size: var(--text-md);
        line-height: 1.4;
    }


    /* CTA */

    .hero__cta {
        min-height: 50px;

        font-size: var(--text-sm);
    }


    /* VISUAL */

    .hero__visual {
        width: 100%;
    }

    .hero__visual-placeholder {
        min-height: 480px;

        aspect-ratio: 4 / 5;
    }


    /* VISUAL COPY */

    .hero__visual-copy {
        width: 78%;
    }

    .hero__visual-copy span {
        font-size: clamp(2.25rem, 10vw, 4rem);
    }

    .hero__visual-arrow {
        right: 10%;
        bottom: 15%;

        font-size: 4rem;
    }

}


/* ========================================
   HERO - SMALL MOBILE
======================================== */

@media (max-width: 380px) {

    .hero__content {
        padding-inline: 20px;
    }

    .hero__title {
        font-size: 2.8rem;
    }

    .hero__description {
        font-size: 15px;
    }

    .hero__visual-placeholder {
        min-height: 420px;
    }

}

/* ========================================
   HERO - NARROW DESKTOP / TABLET
======================================== */

@media (max-width: 1200px) {

    .hero__layout {
        grid-template-columns: 1fr 0.85fr;
    }

    .hero__content {
        padding-inline: 40px;
    }

    .hero__title {
        font-size: clamp(3.1rem, 5vw, 4.8rem);
    }

    .hero__footer {
        gap: 24px;
    }

    .hero__description {
        max-width: 280px;
    }

}


/* ========================================
   HERO - TABLET
======================================== */

@media (max-width: 900px) {

    .hero__layout {
        grid-template-columns: 1fr;
    }

    .hero__content {
        padding:
            56px
            40px
            64px;
    }

    .hero__content-inner {
        max-width: 760px;
    }

    .hero__title {
        font-size: clamp(3.5rem, 8vw, 5.5rem);
    }

    .hero__footer {
        align-items: flex-start;
    }

    .hero__visual {
        min-height: 560px;
    }

    .hero__visual-placeholder {
        min-height: 560px;
    }

}

/* ========================================
   COMPARISON - DESKTOP
======================================== */

@media (max-width: 1200px) {

    .comparison__layout {
        grid-template-columns:
            minmax(0, 1fr)
            60px
            minmax(0, 1fr);
    }

    .comparison__left {
        padding-right: 32px;
    }

    .comparison__right {
        padding-left: 32px;
    }

    .comparison__main-title {
        font-size: clamp(2.75rem, 4.5vw, 4.5rem);
    }

    .comparison__cost-title {
        font-size: 1.35rem;
    }

    .comparison__trisera-title {
        font-size: clamp(2.25rem, 3.5vw, 3.5rem);
    }

}

/* ========================================
   COMPARISON - MOBILE
======================================== */

@media (max-width: 767px) {

    .comparison {
        padding-block: 72px 88px;
    }


    /* ====================================
       MAIN LAYOUT
    ==================================== */

    .comparison__layout {
        display: flex;
        flex-direction: column;

        width: 100%;

        padding-inline: var(--container-padding-mobile);
    }


    /* ====================================
       LEFT / HIRE ORANG
    ==================================== */

    .comparison__left {
        padding: 0;
    }

    .comparison__left-header {
        margin-bottom: 40px;
    }


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

    .comparison__main-title {
        font-size: clamp(2.8rem, 13vw, 4.5rem);

        line-height: 0.9;
        letter-spacing: -0.055em;
    }

    .comparison__cost-title {
        max-width: 340px;

        margin-top: 16px;

        font-size: 18px;
        line-height: 1.05;
    }


    /* ====================================
       COST GRID
    ==================================== */

    .comparison__cost-grid {
        display: flex;
        flex-direction: column;

        gap: 24px;
    }


    /* ====================================
       COST ITEM
    ==================================== */

    .comparison-item {
        display: grid;

        grid-template-columns: 120px minmax(0, 1fr);

        grid-template-rows: auto auto;

        column-gap: 18px;

        align-items: center;
    }

    .comparison-item__image {
        grid-column: 1;
        grid-row: 1 / 3;

        aspect-ratio: 1 / 0.82;

        margin: 0;

        border-radius: 6px;
    }

    .comparison-item h3 {
        grid-column: 2;
        grid-row: 1;

        align-self: end;

        font-size: 20px;
    }

    .comparison-item p {
        grid-column: 2;
        grid-row: 2;

        align-self: start;

        margin-top: 5px;

        font-size: var(--text-sm);
    }


    /* ====================================
       VS
    ==================================== */

    .comparison__center {
        min-height: 110px;

        margin-block: 48px;
    }

    .comparison__center::before {
        top: 0;
        bottom: 0;

        left: 50%;
    }

    .comparison__vs {
        padding: 12px;

        font-size: 3.5rem;
    }


    /* ====================================
       RIGHT / TRISERA
    ==================================== */

    .comparison__right {
        padding: 0;
    }

    .comparison__right-header {
        min-height: auto;

        margin-bottom: 32px;
    }


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

    .comparison__trisera-title {
        font-size: clamp(2.5rem, 11vw, 4rem);

        line-height: 0.9;
        letter-spacing: -0.05em;
    }

    .comparison__focus {
        margin-top: 18px;

        font-size: 18px;
        line-height: 1.05;
    }


    /* ====================================
       VISUAL
    ==================================== */

    .comparison__visual {
        width: 100%;
    }

    .comparison__visual-placeholder {
        aspect-ratio: 1.15 / 1;

        border-radius: 6px;
    }


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

    .comparison__cta {
        left: 16px;
        bottom: 16px;

        min-height: 48px;

        padding-inline: 20px;

        font-size: var(--text-sm);
    }

}


/* ========================================
   COMPARISON - SMALL MOBILE
======================================== */

@media (max-width: 380px) {

    .comparison {
        padding-block: 64px 76px;
    }

    .comparison__layout {
        padding-inline: 20px;
    }

    .comparison__main-title {
        font-size: 2.8rem;
    }

    .comparison__cost-title {
        font-size: 16px;
    }

    .comparison-item {
        grid-template-columns: 105px minmax(0, 1fr);

        column-gap: 16px;
    }

    .comparison-item h3 {
        font-size: 18px;
    }

    .comparison-item p {
        font-size: 13px;
    }

    .comparison__center {
        min-height: 90px;

        margin-block: 40px;
    }

    .comparison__trisera-title {
        font-size: 2.6rem;
    }

    .comparison__focus {
        font-size: 16px;
    }

}