/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   HOME PAGE RESPONSIVE
   ========================================================= */


/* =========================================================
   01. LARGE LAPTOP
   <= 1280px
   ========================================================= */

@media (max-width: 1280px) {

    /* HERO */
    .home-hero__content {
        grid-template-columns:
            minmax(0, 1.5fr) minmax(240px, 0.5fr);

        gap:
            50px;
    }

    .nav-brand img {
        height: 55px;
    }

    .home-hero__title {
        font-size:
            clamp(3.8rem, 7.6vw, 7.4rem);
    }


    /* STATEMENT */
    .home-statement__visual {
        width:
            min(42vw, 520px);
    }

    .home-statement__title {
        font-size:
            clamp(3.8rem, 7.6vw, 7.6rem);
    }


    /* SERVICES */
    .service-row {
        grid-template-columns:
            65px minmax(0, 1fr) minmax(170px, 0.26fr) 46px;
    }


    /* PROJECT */
    .project-grid {
        gap:
            18px;
    }


    /* ABOUT */
    .home-about__grid {
        grid-template-columns:
            minmax(0, 1fr) minmax(340px, 0.72fr);

        gap:
            70px;
    }

    .home-about__content,
    .home-about__media {
        min-height:
            620px;
    }

}


/* =========================================================
   02. TABLET / SMALL LAPTOP
   <= 1024px
   ========================================================= */

@media (max-width: 1024px) {

    /* =======================================================
     HERO
     ======================================================= */

    .home-hero {
        min-height:
            auto;
    }

    .nav-brand img {
        height: 52px;
    }

    .home-hero__frame {
        min-height:
            760px;
    }

    .home-hero__content {
        grid-template-columns:
            1fr;

        align-items:
            end;

        gap:
            28px;
    }

    .home-hero__title {
        max-width:
            850px;

        font-size:
            clamp(3.8rem, 9vw, 7rem);
    }

    .home-hero__side {
        max-width:
            520px;

        gap:
            18px;
    }

    .home-hero__description {
        max-width:
            500px;
    }

    .hero-scroll {
        left:
            auto;

        right:
            28px;

        transform:
            none;
    }


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

    .home-statement {
        min-height:
            900px;
    }

    .home-statement__visual {
        width:
            min(48vw, 460px);
    }

    .home-statement__title {
        margin-top:
            140px;

        font-size:
            clamp(3.5rem, 8.8vw, 7rem);
    }

    .home-statement__title .line-left {
        transform:
            translateX(-4%);
    }

    .home-statement__title .line-right {
        transform:
            translateX(4%);
    }

    .home-statement__footer {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            30px;
    }

    .home-statement__meaning {
        grid-template-columns:
            repeat(2, auto);

        gap:
            14px 30px;
    }


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

    .home-services__heading {
        grid-template-columns:
            1fr;

        gap:
            28px;
    }

    .home-services__description {
        max-width:
            570px;
    }

    .service-row {
        grid-template-columns:
            55px minmax(0, 1fr) 46px;

        gap:
            20px;
    }

    .service-row__meta {
        display:
            none;
    }

    .service-row__name {
        font-size:
            clamp(2.3rem, 5.3vw, 4.5rem);
    }


    /* =======================================================
     PARTNERS
     ======================================================= */

    .home-partners__header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            22px;
    }

    .home-partners__copy {
        max-width:
            520px;
    }

    .partner-logo {
        width:
            clamp(200px, 27vw, 260px);

        height:
            125px;

        padding:
            22px;
    }


    /* =======================================================
     FEATURED WORK
     ======================================================= */

    .home-work__header {
        grid-template-columns:
            1fr;

        gap:
            28px;
    }

    .home-work__all {
        margin-bottom:
            0;
    }

    .project-card--large {
        grid-column:
            span 7;
    }

    .project-card--medium {
        grid-column:
            span 5;
    }

    .project-card--wide {
        grid-column:
            span 7;
    }

    .project-card--small {
        grid-column:
            span 5;
    }

    .project-card--medium .project-card__media,
    .project-card--small .project-card__media {
        aspect-ratio:
            4 / 5;
    }


    /* =======================================================
     APPROACH
     ======================================================= */

    .home-approach__header {
        grid-template-columns:
            1fr;

        gap:
            32px;
    }

    .home-approach__copy {
        max-width:
            570px;
    }

    .approach-item {
        grid-template-columns:
            60px minmax(200px, 0.7fr) minmax(0, 1fr);

        gap:
            35px;
    }


    /* =======================================================
     ABOUT
     ======================================================= */

    .home-about__grid {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }

    .home-about__content {
        min-height:
            auto;
    }

    .home-about__bottom {
        margin-top:
            80px;
    }

    .home-about__media {
        min-height:
            600px;

        aspect-ratio:
            16 / 10;
    }


    /* =======================================================
     VALUES
     ======================================================= */

    .abpe-values {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .abpe-value:nth-child(2) {
        border-right:
            1px solid var(--line);
    }

    .abpe-value:nth-child(3),
    .abpe-value:nth-child(4) {
        border-top:
            1px solid var(--line);
    }


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

    .home-cta__main {
        align-items:
            flex-end;
    }

    .home-cta__title {
        font-size:
            clamp(4rem, 10vw, 8rem);
    }

}


/* =========================================================
   03. TABLET PORTRAIT / MOBILE
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

    /* =======================================================
     HERO
     ======================================================= */

    .home-hero {
        padding:
            0 16px 16px;
    }

    .nav-brand img {
        height: 54px;
    }

    .home-hero__frame {
        min-height:
            calc(100svh - 78px);

        max-height:
            850px;
    }

    .home-hero__media img {
        height:
            106%;

        transform:
            translate3d(0, -3%, 0);
    }

    .home-hero__media::after {
        background:
            linear-gradient(180deg,
                rgba(6, 23, 47, 0.05) 0%,
                rgba(6, 23, 47, 0.08) 35%,
                rgba(6, 23, 47, 0.72) 100%);
    }

    .home-hero__content {
        left:
            22px;

        right:
            22px;

        bottom:
            28px;

        gap:
            22px;
    }

    .home-hero__eyebrow {
        margin-bottom:
            16px;
    }

    .home-hero__title {
        max-width:
            100%;

        font-size:
            clamp(3.25rem, 15vw, 6rem);

        line-height:
            0.84;
    }

    .home-hero__description {
        max-width:
            430px;

        font-size:
            0.88rem;

        line-height:
            1.55;
    }

    .home-hero__side {
        gap:
            15px;
    }

    .hero-scroll {
        display:
            none;
    }


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

    .home-statement {
        min-height:
            auto;

        padding:
            100px 20px;
    }

    .home-statement__header {
        gap:
            24px;
    }

    .home-statement__corner {
        width:
            14px;

        height:
            14px;
    }

    .home-statement__visual {
        top:
            48%;

        width:
            min(70vw, 420px);

        opacity:
            0.96;

        transform:
            translate(-50%, -50%);
    }

    .home-statement__title {
        margin:
            110px auto 320px;

        font-size:
            clamp(3rem, 13.2vw, 6.4rem);

        line-height:
            0.86;
    }

    .home-statement__title .line-left,
    .home-statement__title .line-right {
        transform:
            none;
    }

    .home-statement__footer {
        position:
            relative;

        left:
            auto;

        right:
            auto;

        bottom:
            auto;

        gap:
            28px;
    }

    .home-statement__copy {
        max-width:
            480px;
    }

    .home-statement__meaning {
        width:
            100%;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            16px;
    }


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

    .home-services {
        padding:
            100px 20px;
    }

    .home-services__heading {
        margin-bottom:
            60px;
    }

    .home-services__title {
        font-size:
            clamp(2.8rem, 12vw, 5.2rem);
    }

    .service-row {
        grid-template-columns:
            34px minmax(0, 1fr) 38px;

        min-height:
            100px;

        gap:
            12px;
    }

    .service-row__number {
        font-size:
            0.58rem;
    }

    .service-row__name {
        font-size:
            clamp(1.8rem, 8vw, 3rem);

        line-height:
            0.92;
    }

    .service-row:hover .service-row__name {
        transform:
            none;
    }

    .service-row__arrow {
        width:
            38px;

        height:
            38px;
    }

    .service-row__soon {
        margin-left:
            6px;

        padding:
            4px 6px;

        font-size:
            0.48rem;
    }

    .service-preview {
        display:
            none;
    }


    /* =======================================================
     PARTNERS
     ======================================================= */

    .home-partners {
        padding:
            90px 0;
    }

    .home-partners__header {
        padding:
            0 20px;

        margin-bottom:
            55px;
    }

    .home-partners__title {
        font-size:
            clamp(2.3rem, 10vw, 4.2rem);
    }

    .partner-marquees {
        gap:
            14px;
    }

    .partner-marquee {
        --partner-gap:
            14px;
    }

    .partner-marquee__track {
        animation-duration:
            28s;
    }

    .partner-marquee--left .partner-marquee__track {
        animation-duration:
            31s;
    }

    .partner-logo {
        width:
            210px;

        height:
            115px;

        padding:
            20px;
    }


    /* =======================================================
     FEATURED WORK
     ======================================================= */

    .home-work {
        padding:
            100px 20px;
    }

    .home-work__header {
        margin-bottom:
            55px;
    }

    .home-work__title {
        font-size:
            clamp(2.8rem, 11vw, 5rem);
    }

    .project-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            45px 14px;
    }

    .project-card--large,
    .project-card--medium,
    .project-card--wide,
    .project-card--small {
        grid-column:
            span 1;
    }

    .project-card--large:first-child {
        grid-column:
            1 / -1;
    }

    .project-card--large .project-card__media,
    .project-card--medium .project-card__media,
    .project-card--wide .project-card__media,
    .project-card--small .project-card__media {
        aspect-ratio:
            4 / 5;
    }

    .project-card--large:first-child .project-card__media {
        aspect-ratio:
            4 / 3;
    }

    .project-card__media img {
        height:
            104%;

        transform:
            translate3d(0, -2%, 0);
    }

    .project-card__info {
        grid-template-columns:
            1fr;

        gap:
            6px;

        padding-top:
            12px;
    }

    .project-card__year {
        text-align:
            left;
    }

    .project-card__overlay {
        display:
            none;
    }


    /* =======================================================
     APPROACH
     ======================================================= */

    .home-approach {
        padding:
            100px 20px;
    }

    .home-approach__header {
        margin-bottom:
            65px;
    }

    .home-approach__title {
        font-size:
            clamp(2.8rem, 12vw, 5.2rem);
    }

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

        gap:
            10px 18px;

        padding:
            34px 0;
    }

    .approach-item__number {
        grid-column:
            1;

        grid-row:
            1 / span 2;
    }

    .approach-item__title {
        grid-column:
            2;

        font-size:
            clamp(1.7rem, 7vw, 2.8rem);
    }

    .approach-item__description {
        grid-column:
            2;

        margin-top:
            12px;
    }


    /* =======================================================
     ABOUT
     ======================================================= */

    .home-about {
        padding:
            100px 20px;
    }

    .home-about__grid {
        gap:
            45px;
    }

    .home-about__title {
        font-size:
            clamp(3.1rem, 13.5vw, 6rem);
    }

    .home-about__bottom {
        grid-template-columns:
            1fr;

        align-items:
            start;

        gap:
            28px;

        margin-top:
            60px;
    }

    .home-about__media {
        min-height:
            0;

        aspect-ratio:
            4 / 5;
    }

    .home-about__media img {
        height:
            106%;

        transform:
            translateY(-3%);
    }


    /* =======================================================
     VALUES
     ======================================================= */

    .abpe-values {
        margin-top:
            70px;
    }

    .abpe-value {
        min-height:
            200px;

        padding:
            24px 20px;
    }

    .abpe-value__number {
        margin-bottom:
            55px;
    }

    .abpe-value__title {
        font-size:
            clamp(1.5rem, 6vw, 2.5rem);
    }


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

    .home-cta {
        padding:
            90px 20px;
    }

    .home-cta::before {
        top:
            5%;

        right:
            -35%;

        width:
            100vw;

        height:
            100vw;
    }

    .home-cta__header {
        flex-direction:
            column;

        margin-bottom:
            75px;
    }

    .home-cta__main {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            45px;
    }

    .home-cta__title {
        max-width:
            100%;

        font-size:
            clamp(3.4rem, 15vw, 6.5rem);

        line-height:
            0.84;
    }

    .home-cta__action {
        width:
            90px;

        height:
            90px;
    }


    /* =======================================================
     DECORATION
     ======================================================= */

    .decorative-grid {
        background-size:
            42px 42px;
    }

    .cursor-label {
        display:
            none;
    }

}


/* =========================================================
   04. SMALL MOBILE
   <= 560px
   ========================================================= */

@media (max-width: 560px) {

    /* =======================================================
     HERO
     ======================================================= */

    .home-hero {
        padding:
            0 10px 10px;
    }

    .nav-brand img {
        height: 48px;
    }

    .home-hero__frame {
        min-height:
            calc(100svh - 72px);
    }

    .home-hero__content {
        left:
            16px;

        right:
            16px;

        bottom:
            20px;
    }

    .home-hero__eyebrow {
        font-size:
            0.62rem;
    }

    .home-hero__title {
        font-size:
            clamp(2.85rem, 14.7vw, 4.6rem);
    }

    .home-hero__description {
        font-size:
            0.82rem;
    }


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

    .home-statement {
        padding:
            80px 16px;
    }

    .home-statement__label {
        font-size:
            0.62rem;
    }

    .home-statement__visual {
        width:
            min(82vw, 390px);
    }

    .home-statement__title {
        margin:
            90px auto 280px;

        font-size:
            clamp(2.7rem, 13vw, 4.6rem);
    }

    .home-statement__copy {
        font-size:
            0.82rem;
    }

    .home-statement__meaning {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }


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

    .home-services {
        padding:
            80px 16px;
    }

    .home-services__heading {
        margin-bottom:
            48px;
    }

    .home-services__description {
        font-size:
            0.84rem;
    }

    .service-row {
        grid-template-columns:
            26px minmax(0, 1fr) 34px;

        min-height:
            88px;

        gap:
            8px;
    }

    .service-row__number {
        font-size:
            0.5rem;
    }

    .service-row__name {
        font-size:
            clamp(1.55rem, 7.7vw, 2.5rem);
    }

    .service-row__arrow {
        width:
            34px;

        height:
            34px;
    }

    .service-row__soon {
        display:
            block;

        width:
            fit-content;

        margin:
            7px 0 0;
    }


    /* =======================================================
     PARTNERS
     ======================================================= */

    .home-partners {
        padding:
            75px 0;
    }

    .home-partners__header {
        padding:
            0 16px;

        margin-bottom:
            45px;
    }

    .partner-marquee {
        --partner-gap:
            12px;
    }

    .partner-logo {
        width:
            190px;

        height:
            105px;

        padding:
            18px;
    }


    /* =======================================================
     FEATURED WORK
     ======================================================= */

    .home-work {
        padding:
            80px 16px;
    }

    .project-grid {
        display:
            flex;

        flex-direction:
            column;

        gap:
            48px;
    }

    .project-card__media,
    .project-card--large .project-card__media,
    .project-card--medium .project-card__media,
    .project-card--wide .project-card__media,
    .project-card--small .project-card__media,
    .project-card--large:first-child .project-card__media {
        aspect-ratio:
            4 / 3;
    }

    .project-card:nth-child(even) .project-card__media {
        aspect-ratio:
            4 / 5;
    }

    .project-card__title {
        font-size:
            1.05rem;
    }


    /* =======================================================
     APPROACH
     ======================================================= */

    .home-approach {
        padding:
            80px 16px;
    }

    .home-approach__header {
        margin-bottom:
            50px;
    }

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

        gap:
            8px 14px;

        padding:
            30px 0;
    }

    .approach-item__number {
        font-size:
            0.58rem;
    }

    .approach-item__description {
        font-size:
            0.84rem;
    }


    /* =======================================================
     ABOUT
     ======================================================= */

    .home-about {
        padding:
            80px 16px;
    }

    .home-about__title {
        font-size:
            clamp(2.9rem, 14vw, 4.8rem);
    }

    .home-about__bottom {
        margin-top:
            50px;
    }

    .home-about__copy {
        font-size:
            0.84rem;
    }


    /* =======================================================
     VALUES
     ======================================================= */

    .abpe-values {
        grid-template-columns:
            1fr;

        margin-top:
            55px;

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

    .abpe-value {
        min-height:
            auto;

        padding:
            28px 0;

        border:
            0 !important;

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

    .abpe-value__number {
        margin-bottom:
            26px;
    }


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

    .home-cta {
        padding:
            75px 16px;
    }

    .home-cta__header {
        margin-bottom:
            60px;
    }

    .home-cta__meta {
        font-size:
            0.72rem;
    }

    .home-cta__title {
        font-size:
            clamp(3rem, 15vw, 5rem);
    }

    .home-cta__action {
        width:
            78px;

        height:
            78px;
    }

}


/* =========================================================
   05. TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .service-preview,
    .cursor-label {
        display:
            none !important;
    }

    .service-row:hover::before {
        transform:
            scaleY(0);
    }

    .service-row:hover .service-row__name {
        color:
            var(--text-heading);

        transform:
            none;
    }

    .project-card:hover .project-card__media img {
        transform:
            translate3d(0, -2%, 0) scale(1.01);
    }

    

}


/* =========================================================
   06. LANDSCAPE MOBILE
   ========================================================= */

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {

    .home-hero__frame {
        min-height:
            620px;
    }

    .home-hero__title {
        font-size:
            clamp(3rem, 9vw, 5rem);
    }

    .home-hero__side {
        display:
            none;
    }

}