/* =========================================================
   BRANDCORE ADVERTISING
   RESPONSIVE STYLESHEET
   ========================================================= */


/* =========================================================
   01. LARGE TABLET / SMALL LAPTOP
   1200px
   ========================================================= */

@media (max-width: 1200px) {

    :root {
        --container-padding: 4vw;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .desktop-navigation {
        gap: 0;
        margin-right: 14px;
    }

    .nav-link {
        padding-inline: 9px;
        font-size: 0.7rem;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.75fr);

        gap: 50px;
    }

    .hero-title {
        font-size:
            clamp(4rem, 8vw, 7.5rem);
    }

    .hero-card {
        width: 170px;
        min-height: 145px;
    }

    .hero-card h3 {
        font-size: 1rem;
    }


    /* -----------------------------------------------------
       EXPERTISE
       ----------------------------------------------------- */

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

    .expertise-card {
        min-height: 380px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer-main {
        grid-template-columns:
            1.4fr 1fr 1fr;
    }

    .footer-contact {
        grid-column: 2 / 4;
    }

}


/* =========================================================
   02. TABLET
   991px
   ========================================================= */

@media (max-width: 991px) {

    :root {
        --section-padding: 110px;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .site-header {
        top: 14px;
    }

    .header-inner {
        min-height: 62px;
        padding-left: 20px;
    }

    .desktop-navigation,
    .header-cta {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero-section {
        min-height: auto;

        padding-top: 150px;
    }

    .hero-container {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .hero-content {
        padding-block: 50px 20px;
    }

    .hero-title {
        max-width: 800px;

        font-size:
            clamp(4rem, 12vw, 7.5rem);
    }

    .hero-description {
        max-width: 600px;
    }

    .hero-visual {
        min-height: 600px;

        width: min(100%, 720px);

        margin-inline: auto;
    }


    /* -----------------------------------------------------
       HERO CARDS
       ----------------------------------------------------- */

    .hero-card-one {
        left: 2%;
    }

    .hero-card-two {
        right: 2%;
    }

    .hero-card-three {
        left: 5%;
    }


    /* -----------------------------------------------------
       SECTION GRID
       ----------------------------------------------------- */

    .section-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .section-intro {
        display: flex;

        align-items: center;

        justify-content: space-between;
    }

    .section-number {
        margin-top: 0;
    }


    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */

    .about-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-heading {
        position: static;
    }

    .about-content {
        padding-top: 0;
    }


    /* -----------------------------------------------------
       EXPERTISE
       ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       PROCESS
       ----------------------------------------------------- */

    .process-item {
        min-height: 95px;
    }


    /* -----------------------------------------------------
       WORKFOLIO
       ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       SHOWREEL
       ----------------------------------------------------- */

    .showreel-panel {
        min-height: 420px;
    }


    /* -----------------------------------------------------
       CLIENTS
       ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       CONTACT
       ----------------------------------------------------- */

    .contact-layout {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    /* -----------------------------------------------------
       TEAM
       ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer-main {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 60px;
    }

    .footer-brand {
        grid-column: 1 / 3;
    }

    .footer-contact {
        grid-column: auto;
    }

    .footer-bottom {
        grid-template-columns:
            1fr 1fr;

        row-gap: 18px;
    }

    .footer-copyright {
        grid-column: 1 / 2;
    }

    .footer-credits {
        grid-column: 2 / 3;
        text-align: right;
    }

    .footer-legal {
        grid-column: 1 / 3;

        justify-content: flex-start;
    }

}


/* =========================================================
   03. MOBILE LANDSCAPE / LARGE PHONE
   767px
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --container-padding: 22px;

        --section-padding: 85px;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .site-header {
        top: 10px;
    }

    .header-inner {
        min-height: 58px;

        padding:
            8px 9px 8px 17px;
    }

    .brand-logo-main {
        font-size: 1rem;
    }

    .brand-logo-sub {
        font-size: 0.37rem;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero-section {
        padding-top: 105px;
    }

    .hero-content {
        padding-top: 35px;
    }

    .hero-eyebrow {
        margin-bottom: 24px;
    }

    .hero-title {
        font-size:
            clamp(3.5rem, 17vw, 6.5rem);

        letter-spacing:
            -0.07em;
    }

    .hero-description {
        margin-top: 28px;

        font-size: 0.9rem;

        line-height: 1.7;
    }

    .hero-actions {
        align-items: stretch;

        flex-direction: column;

        width: 100%;

        margin-top: 28px;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }


    /* -----------------------------------------------------
       HERO VISUAL
       ----------------------------------------------------- */

    .hero-visual {
        min-height:
            470px;

        width:
            100%;

        margin-top:
            20px;
    }

    .hero-visual-main {
        inset:
            5% 4% 10% 4%;

        border-radius:
            28px;
    }

    .hero-symbol {
        width:
            125px;
    }

    .hero-symbol span {
        font-size:
            5rem;
    }

    .hero-orbit {
        width:
            78%;
    }

    .hero-orbit-small {
        width:
            54%;
    }

    .hero-visual-caption {
        bottom:
            20px;

        left:
            18px;

        right:
            18px;

        gap:
            7px;

        font-size:
            0.48rem;
    }


    /* -----------------------------------------------------
       HERO FLOATING CARDS
       ----------------------------------------------------- */

    .hero-card {
        width:
            150px;

        min-height:
            120px;

        padding:
            16px;

        border-radius:
            18px;
    }

    .hero-card h3 {
        margin-top:
            20px;

        font-size:
            0.9rem;
    }

    .hero-card-one {
        top:
            2%;

        left:
            -3%;
    }

    .hero-card-two {
        top:
            37%;

        right:
            -3%;
    }

    .hero-card-three {
        bottom:
            1%;

        left:
            2%;
    }

    .hero-card .card-arrow {
        width:
            24px;

        height:
            24px;

        font-size:
            0.7rem;
    }


    /* -----------------------------------------------------
       MARQUEE
       ----------------------------------------------------- */

    .hero-marquee {
        margin-top:
            30px;
    }


    /* -----------------------------------------------------
       SECTION TITLES
       ----------------------------------------------------- */

    .section-title {
        font-size:
            clamp(
                2.8rem,
                13vw,
                5rem
            );
    }


    .section-header-row {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            25px;

        margin-bottom:
            45px;
    }

    .section-header-description {
        width:
            100%;
    }


    /* -----------------------------------------------------
       WHY US
       ----------------------------------------------------- */

    .section-grid {
        gap:
            35px;
    }

    .content-divider {
        margin:
            30px 0 25px;
    }

    .philosophy-pill {
        line-height:
            1.6;
    }


    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */

    .about-lead {
        font-size:
            clamp(
                2rem,
                9vw,
                3.2rem
            );
    }

    .about-description {
        margin-top:
            28px;

        font-size:
            0.9rem;
    }

    .about-values {
        margin-top:
            45px;
    }

    .value-item {
        grid-template-columns:
            45px 1fr;
    }


    /* -----------------------------------------------------
       EXPERTISE
       ----------------------------------------------------- */

    .expertise-grid {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }

    .expertise-card {
        min-height:
            350px;
    }

    .expertise-icon {
        margin-top:
            60px;
    }


    /* -----------------------------------------------------
       PROCESS
       ----------------------------------------------------- */

    .process-heading {
        margin-bottom:
            45px;
    }

    .process-item {
        grid-template-columns:
            42px 1fr 35px;

        min-height:
            85px;

        gap:
            10px;
    }

    .process-item h3 {
        font-size:
            clamp(
                1.7rem,
                8vw,
                2.6rem
            );
    }

    .process-item:hover {
        padding-inline:
            10px;
    }


    /* -----------------------------------------------------
       WORKFOLIO FILTERS
       ----------------------------------------------------- */

    .workfolio-filters {
        flex-wrap:
            nowrap;

        margin-bottom:
            30px;

        padding-bottom:
            8px;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }

    .workfolio-filters::-webkit-scrollbar {
        display:
            none;
    }

    .work-filter {
        flex:
            0 0 auto;

        white-space:
            nowrap;
    }


    /* -----------------------------------------------------
       WORKFOLIO
       ----------------------------------------------------- */

    .workfolio-grid {
        gap:
            10px;
    }

    .workfolio-card {
        min-height:
            390px;
    }

    .work-card-visual {
        min-height:
            230px;
    }

    .work-card-content {
        grid-template-columns:
            1fr 38px;

        gap:
            12px;
    }

    .work-card-content > span {
        grid-column:
            1 / 3;
    }

    .work-card-content h3 {
        grid-column:
            1 / 2;

        font-size:
            1.2rem;
    }


    /* -----------------------------------------------------
       SHOWREEL
       ----------------------------------------------------- */

    .showreel-section {
        padding-top:
            25px;
    }

    .showreel-panel {
        min-height:
            400px;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            space-between;

        padding:
            30px;

        border-radius:
            28px;
    }

    .showreel-panel h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                5rem
            );
    }

    .showreel-play {
        width:
            75px;

        height:
            75px;
    }


    /* -----------------------------------------------------
       CLIENTS
       ----------------------------------------------------- */

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

        gap:
            8px;
    }

    .client-card {
        min-height:
            115px;
    }


    /* -----------------------------------------------------
       CONTACT
       ----------------------------------------------------- */

    .contact-layout {
        gap:
            45px;
    }

    .contact-intro > p {
        font-size:
            0.9rem;
    }

    .contact-form-wrapper {
        padding:
            25px 20px;
    }


    /* -----------------------------------------------------
       TEAM
       ----------------------------------------------------- */

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

    .team-card {
        min-height:
            220px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .site-footer {
        padding-top:
            75px;
    }

    .footer-main {
        grid-template-columns:
            1fr;

        gap:
            45px;

        padding-bottom:
            50px;
    }

    .footer-brand {
        grid-column:
            auto;
    }

    .footer-contact {
        grid-column:
            auto;
    }

    .footer-bottom {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            14px;
    }

    .footer-copyright,
    .footer-credits,
    .footer-legal {
        width:
            100%;

        text-align:
            left;
    }

    .footer-legal {
        flex-wrap:
            wrap;

        justify-content:
            flex-start;
    }

}


/* =========================================================
   04. SMALL MOBILE
   480px
   ========================================================= */

@media (max-width: 480px) {

    :root {
        --container-padding:
            18px;

        --section-padding:
            75px;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .header-inner {
        padding-left:
            15px;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero-title {
        font-size:
            clamp(
                3.1rem,
                17vw,
                5rem
            );
    }

    .hero-description {
        font-size:
            0.86rem;
    }


    /* -----------------------------------------------------
       HERO VISUAL
       ----------------------------------------------------- */

    .hero-visual {
        min-height:
            400px;
    }

    .hero-visual-main {
        border-radius:
            24px;
    }

    .hero-symbol {
        width:
            100px;
    }

    .hero-symbol span {
        font-size:
            4rem;
    }

    .hero-card {
        width:
            125px;

        min-height:
            105px;

        padding:
            13px;
    }

    .hero-card h3 {
        font-size:
            0.76rem;

        line-height:
            1.1;
    }

    .hero-card-one {
        left:
            -6%;
    }

    .hero-card-two {
        right:
            -6%;
    }

    .hero-card-three {
        left:
            -3%;
    }


    /* -----------------------------------------------------
       SECTION TITLES
       ----------------------------------------------------- */

    .section-title {
        font-size:
            clamp(
                2.65rem,
                14vw,
                4.2rem
            );
    }


    /* -----------------------------------------------------
       WHY US
       ----------------------------------------------------- */

    .philosophy-pill {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            3px;

        border-radius:
            18px;

        padding:
            14px 16px;
    }


    /* -----------------------------------------------------
       EXPERTISE
       ----------------------------------------------------- */

    .expertise-card {
        min-height:
            330px;

        padding:
            20px;
    }


    /* -----------------------------------------------------
       PROCESS
       ----------------------------------------------------- */

    .process-item {
        grid-template-columns:
            30px 1fr 28px;
    }

    .process-number {
        font-size:
            0.58rem;
    }

    .process-arrow {
        width:
            30px;

        height:
            30px;
    }


    /* -----------------------------------------------------
       WORKFOLIO
       ----------------------------------------------------- */

    .workfolio-card {
        min-height:
            350px;
    }

    .work-card-visual {
        min-height:
            200px;
    }


    /* -----------------------------------------------------
       SHOWREEL
       ----------------------------------------------------- */

    .showreel-panel {
        min-height:
            350px;

        padding:
            24px;
    }


    /* -----------------------------------------------------
       CLIENTS
       ----------------------------------------------------- */

    .client-card {
        min-height:
            95px;
    }


    /* -----------------------------------------------------
       FORM
       ----------------------------------------------------- */

    .form-field input,
    .form-field textarea {
        font-size:
            0.88rem;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer-brand p {
        font-size:
            0.76rem;
    }

}


/* =========================================================
   05. VERY SMALL DEVICES
   360px
   ========================================================= */

@media (max-width: 360px) {

    :root {
        --container-padding:
            15px;
    }


    .hero-title {
        font-size:
            2.9rem;
    }


    .hero-visual {
        min-height:
            360px;
    }


    .hero-card {
        width:
            112px;

        min-height:
            96px;
    }


    .hero-card h3 {
        font-size:
            0.7rem;
    }


    .hero-card-one {
        left:
            -7%;
    }


    .hero-card-two {
        right:
            -7%;
    }


    .hero-card-three {
        left:
            -4%;
    }


    .expertise-card {
        min-height:
            310px;
    }


    .process-item h3 {
        font-size:
            1.55rem;
    }

}
@media (max-width: 768px) {
    .footer-logo-img {
        width: 150px;
    }
}
@media (max-width: 768px) {

    .why-us-visual {
        left: auto;
        right: 20px;
        bottom: 35px;
        width: auto;
        opacity: .7;
        transform: scale(.65);
        transform-origin: right bottom;
    }

}