/* =========================================================
   OUR WORK - BRAND PAIDS
========================================================= */

.brand-paids-section {

    width: 100%;

    background: #ffffff;

    overflow: hidden;

    padding: 38px 0 35px;

    color: #050505;
}


.brand-paids-container {

    width: min(1230px, calc(100% - 110px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: start;

}


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

.brand-paids-title {

    padding-top: 2px;
}


.brand-paids-title h2 {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(58px, 5.5vw, 78px);

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 900;

    color: #050505;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.brand-paids-content {

    padding-top: 0;

    max-width: 590px;
}


.brand-paids-content p {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 21px;

    line-height: 1.42;

    font-weight: 400;

    color: #111111;

    overflow: hidden;
}


/* =========================================================
   INDIVIDUAL LINES
========================================================= */

/* =========================================================
   YELLOW LINE-BY-LINE HIGHLIGHT
========================================================= */

.brand-paids-content p {
    margin: 0;
}


/* Each line remains visible */

.brand-line {

    position: relative;

    display: block;

    width: fit-content;

    max-width: 100%;

    opacity: 1;

    transform: none;

    overflow: hidden;

    z-index: 1;

}


/* Yellow highlight */

.brand-line::before {

    content: "";

    position: absolute;

    z-index: -1;

    left: 0;

    top: 8%;

    width: 0%;

    height: 84%;

    background: #ffe000;

    transition: width 0.8s cubic-bezier(.65, 0, .35, 1);

}


/* =========================================================
   LINE-BY-LINE TIMING
========================================================= */

.brand-paids-section.is-visible
.brand-line:nth-child(1)::before {

    width: 100%;

    transition-delay: 0.2s;

}


.brand-paids-section.is-visible
.brand-line:nth-child(2)::before {

    width: 100%;

    transition-delay: 1.1s;

}


.brand-paids-section.is-visible
.brand-line:nth-child(3)::before {

    width: 100%;

    transition-delay: 2s;

}


.brand-paids-section.is-visible
.brand-line:nth-child(4)::before {

    width: 100%;

    transition-delay: 2.9s;

}


.brand-paids-section.is-visible
.brand-line:nth-child(5)::before {

    width: 100%;

    transition-delay: 3.8s;

}

/* =========================================================
   LINE-BY-LINE DELAY
========================================================= */

.brand-paids-section.is-visible
.brand-line:nth-child(1) {

    transition-delay: 0.15s;

}


.brand-paids-section.is-visible
.brand-line:nth-child(2) {

    transition-delay: 0.55s;

}


.brand-paids-section.is-visible
.brand-line:nth-child(3) {

    transition-delay: 0.95s;

}


.brand-paids-section.is-visible
.brand-line:nth-child(4) {

    transition-delay: 1.35s;

}


.brand-paids-section.is-visible
.brand-line:nth-child(5) {

    transition-delay: 1.75s;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .brand-paids-container {

        width: calc(100% - 60px);

        grid-template-columns: 45% 55%;

    }


    .brand-paids-title h2 {

        font-size: 58px;

    }


    .brand-paids-content p {

        font-size: 17px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .brand-paids-section {

        padding: 35px 0 30px;

    }


    .brand-paids-container {

        width: calc(100% - 35px);

        display: block;

    }


    .brand-paids-title {

        margin-bottom: 25px;

    }


    .brand-paids-title h2 {

        font-size: clamp(48px, 14vw, 65px);

        line-height: .95;

        letter-spacing: -2px;

    }


    .brand-paids-content {

        max-width: 100%;

    }


    .brand-paids-content p {

        font-size: 17px;

        line-height: 1.45;

    }


    .brand-paids-section.is-visible
    .brand-line {

        max-height: 60px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .brand-paids-container {

        width: calc(100% - 25px);

    }


    .brand-paids-title h2 {

        font-size: 46px;

    }


    .brand-paids-content p {

        font-size: 15px;

    }

}


/* =========================================================
   OUR WORK FILTER
========================================================= */

.work-filter-section {

    width: 100%;

    background: #ffffff;

    padding: 35px 0 60px;

    overflow: hidden;
}


.work-filter-container {

    width: min(1155px, calc(100% - 80px));

    margin: 0 auto;
}


/* =========================================================
   FILTER MENU
========================================================= */

.work-filter-menu {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    flex-wrap: wrap;

    margin-bottom: 70px;
}


.work-filter {

    position: relative;

    padding: 0;

    border: none;

    outline: none;

    background: transparent;

    color: #111111;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;

    font-weight: 800;

    cursor: pointer;

    white-space: nowrap;

    transition:
        color .25s ease;
}


.work-filter::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 3px;

    background: #ed1c24;

    transition:
        width .3s ease;
}


.work-filter:hover {

    color: #ed1c24;
}


.work-filter.active {

    color: #ed1c24;
}


.work-filter.active::after {

    width: 100%;
}


/* =========================================================
   WORK GRID
========================================================= */

.work-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 32px;
}


/* =========================================================
   WORK CARD
========================================================= */

.work-card {

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #eeeeee;

    text-decoration: none;

    opacity: 1;

    transform: scale(1);

    transition:
        opacity .35s ease,
        transform .35s ease;
}


.work-card img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

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


.work-card:hover img {

    transform: scale(1.04);
}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.work-card.hide {

    opacity: 0;

    transform: scale(.92);

    pointer-events: none;

    display: none;
}


.work-card.show {

    display: block;

    animation:
        workCardIn .45s ease forwards;
}


@keyframes workCardIn {

    from {

        opacity: 0;

        transform: scale(.92) translateY(10px);

    }

    to {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .work-filter-container {

        width: calc(100% - 40px);
    }


    .work-filter-menu {

        gap: 20px;

        margin-bottom: 45px;
    }


    .work-filter {

        font-size: 15px;
    }


    .work-grid {

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

        gap: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .work-filter-section {

        padding: 25px 0 40px;
    }


    .work-filter-container {

        width: calc(100% - 24px);
    }


    .work-filter-menu {

        justify-content: flex-start;

        gap: 18px 20px;

        margin-bottom: 35px;
    }


    .work-filter {

        font-size: 12px;
    }


    .work-filter::after {

        bottom: -5px;

        height: 2px;
    }


    .work-grid {

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

        gap: 12px;
    }


    .work-card {

        aspect-ratio: 1 / 1;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .work-filter-menu {

        gap: 15px;
    }


    .work-filter {

        font-size: 11px;
    }


    .work-grid {

        gap: 9px;
    }

}