/* =========================================================
   DOORWAY SOLUTION
   BRANDS PAGE
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --brand-blue: #3f4198;
    --brand-blue-light: #5558bd;
    --brand-blue-dark: #292b72;

    --charcoal: #242124;

    --white: #ffffff;

    --light: #f5f5f7;
    --light-alt: #eeeeF2;

    --text-muted: #6d6e77;

    --border:
        rgba(36, 33, 36, .12);

    --heading:
        "Manrope",
        sans-serif;

    --body:
        "Inter",
        sans-serif;

    --container:
        1400px;
}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    overflow-x: hidden;

    color:
        var(--charcoal);

    background:
        var(--light);

    font-family:
        var(--body);
}


img {
    display: block;

    max-width: 100%;
}


a {
    color: inherit;

    text-decoration: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.brands-container {
    width:
        min(
            calc(100% - 64px),
            var(--container)
        );

    margin:
        0 auto;
}


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

.brands-hero {
    position: relative;

    padding:
        180px 0
        110px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f7f7f9,
            #eeeeF2
        );
}


.brands-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(36,33,36,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(36,33,36,.025) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;
}


.brands-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items:
        end;

    gap:
        70px;
}


.brands-hero-content {
    max-width:
        950px;
}


/* Eyebrow */

.brands-eyebrow {
    display: flex;

    align-items: center;

    gap:
        13px;

    color:
        var(--brand-blue);
}


.brands-eyebrow > span {
    width:
        36px;

    height:
        1px;

    background:
        var(--brand-blue);
}


.brands-eyebrow strong {
    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


/* Hero heading */

.brands-hero h1 {
    max-width:
        930px;

    margin:
        42px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            64px,
            7vw,
            108px
        );

    font-weight:
        500;

    line-height:
        .91;

    letter-spacing:
        -.065em;
}


.brands-hero h1 span {
    display: block;

    color:
        var(--brand-blue);
}


.brands-hero-content > p {
    max-width:
        570px;

    margin:
        34px 0 0;

    color:
        var(--text-muted);

    font-size:
        16px;

    line-height:
        1.75;
}


/* Hero side */

.brands-hero-side {
    padding-bottom:
        9px;

    display: flex;

    align-items: center;

    gap:
        10px;

    color:
        rgba(36,33,36,.48);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


.brands-hero-side i {
    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--brand-blue);
}


/* =========================================================
   BRAND SECTION
========================================================= */

.brand-section {
    padding:
        115px 0;

    background:
        #ffffff;
}


.brand-section-alt {
    background:
        var(--light);
}


/* =========================================================
   BRAND HEADER
========================================================= */

.brand-section-header {
    padding-bottom:
        45px;

    display: grid;

    grid-template-columns:
        .55fr
        1.45fr;

    gap:
        70px;

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


.brand-section-index {
    padding-top:
        8px;

    color:
        var(--brand-blue);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.brand-section-heading {
    max-width:
        760px;
}


.brand-section-heading h2 {
    margin:
        0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            48px,
            5vw,
            76px
        );

    font-weight:
        500;

    line-height:
        .95;

    letter-spacing:
        -.055em;
}


.brand-section-heading p {
    max-width:
        520px;

    margin:
        25px 0 0;

    color:
        var(--text-muted);

    font-size:
        15px;

    line-height:
        1.75;
}


/* =========================================================
   WINDOW GRID
========================================================= */

.brand-window-grid {
    margin-top:
        58px;

    display: grid;

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

    gap:
        42px 20px;
}


/*
   First row:
   3 equal cards
*/

.brand-window-card:nth-child(1) {
    grid-column:
        1 / span 2;
}


.brand-window-card:nth-child(2) {
    grid-column:
        3 / span 2;
}


.brand-window-card:nth-child(3) {
    grid-column:
        5 / span 2;
}


/*
   Second row:
   2 centered cards
*/

.brand-window-card:nth-child(4) {
    grid-column:
        2 / span 2;
}


.brand-window-card:nth-child(5) {
    grid-column:
        4 / span 2;
}


/* =========================================================
   WINDOW CARD
========================================================= */

.brand-window-card {
    min-width: 0;
}


/* Image */

.brand-window-image {
    position: relative;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    overflow: hidden;

    background:
        #eeeeF2;

    border:
        1px solid
        rgba(36,33,36,.07);
}


.brand-section-alt
.brand-window-image {
    background:
        #ffffff;
}


.brand-window-image img {
    width:
        100%;

    height:
        100%;

    display: block;

    object-fit:
        fill;

    object-position:
        center;

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


/* =========================================================
   WINDOW INFORMATION
========================================================= */

.brand-window-info {
    margin-top:
        17px;

    padding-top:
        15px;

    display: grid;

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

    align-items:
        start;

    gap:
        13px;

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


.brand-window-info span {
    padding-top:
        4px;

    color:
        var(--brand-blue);

    font-size:
        12px;

    font-weight:
        700;
}


.brand-window-info h3 {
    margin:
        0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            21px,
            2vw,
            28px
        );

    font-weight:
        500;

    line-height:
        1.1;

    letter-spacing:
        -.035em;
}


/* =========================================================
   CARD HOVER
========================================================= */

@media (hover:hover) and (pointer:fine) {

    .brand-window-card:hover
    .brand-window-image img {
        transform:
            scale(1.025);
    }


    .brand-window-card:hover
    .brand-window-info {
        border-color:
            var(--brand-blue);
    }

}


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

.brands-cta {
    padding:
        115px 0;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #11131a,
            #151823 55%,
            #0e1017
        );
}


.brands-cta-grid {
    padding-top:
        35px;

    display: grid;

    grid-template-columns:
        minmax(0,1.3fr)
        minmax(280px,.7fr);

    align-items:
        end;

    gap:
        80px;

    border-top:
        1px solid
        rgba(255,255,255,.12);
}


.brands-cta-label {
    color:
        var(--brand-blue-light);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.brands-cta h2 {
    max-width:
        850px;

    margin:
        40px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            50px,
            5.6vw,
            86px
        );

    font-weight:
        500;

    line-height:
        .94;

    letter-spacing:
        -.06em;
}


.brands-cta h2 span {
    display: block;

    color:
        var(--brand-blue-light);
}


.brands-cta-right p {
    max-width:
        380px;

    margin:
        0;

    color:
        rgba(255,255,255,.55);

    font-size:
        14px;

    line-height:
        1.75;
}


.brands-cta-right a {
    min-height:
        58px;

    margin-top:
        28px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #ffffff;

    background:
        var(--brand-blue);

    font-size:
        12px;

    font-weight:
        650;

    transition:
        background .25s ease;
}


.brands-cta-right a:hover {
    background:
        var(--brand-blue-light);
}


.brands-cta-right a strong {
    font-size:
        17px;
}


/* =========================================================
   TABLET
   UP TO 1024PX
========================================================= */

@media (max-width: 1024px) {

    .brands-container {
        width:
            calc(100% - 48px);
    }


    .brands-hero {
        padding:
            155px 0
            90px;
    }


    .brands-hero-grid {
        grid-template-columns:
            minmax(0,1fr);

        gap:
            40px;
    }


    .brands-hero-side {
        flex-wrap:
            wrap;
    }


    .brand-section {
        padding:
            90px 0;
    }


    .brand-section-header {
        grid-template-columns:
            minmax(0,1fr);

        gap:
            28px;
    }


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

        gap:
            40px 18px;
    }


    .brand-window-card:nth-child(n) {
        grid-column:
            auto;
    }


    .brands-cta {
        padding:
            90px 0;
    }


    .brands-cta-grid {
        grid-template-columns:
            minmax(0,1fr);

        gap:
            40px;
    }


    .brands-cta-right {
        max-width:
            520px;
    }

}


/* =========================================================
   MOBILE
   UP TO 767PX
========================================================= */

@media (max-width: 767px) {

    .brands-container {
        width:
            calc(100% - 34px);
    }


    .brands-hero {
        padding:
            125px 0
            70px;
    }


    .brands-hero-grid {
        gap:
            32px;
    }


    .brands-hero-side {
        gap:
            8px;
    }


    .brand-section {
        padding:
            72px 0;
    }


    .brand-section-header {
        padding-bottom:
            32px;

        gap:
            23px;
    }


    .brand-window-grid {
        margin-top:
            38px;

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

        gap:
            38px;
    }


    .brand-window-card:nth-child(n) {
        grid-column:
            auto;
    }


    .brand-window-image {
        aspect-ratio:
            4 / 3;
    }


    .brand-window-info {
        margin-top:
            13px;

        padding-top:
            13px;

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

        gap:
            10px;
    }


    .brands-cta {
        padding:
            72px 0;
    }


    .brands-cta-grid {
        padding-top:
            28px;

        gap:
            32px;
    }


    .brands-cta-right {
        width:
            100%;

        max-width:
            none;
    }


    .brands-cta-right a {
        width:
            100%;
    }

}


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

@media (max-width: 390px) {

    .brands-container {
        width:
            calc(100% - 28px);
    }

}