/* =========================================================
   DOORWAY SOLUTION
   ABOUT PAGE
========================================================= */


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

:root {

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

    --charcoal: #242124;

    --dark: #101219;
    --dark-soft: #151823;

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

    --text-muted: #6d6e77;

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

    --dark-border:
        rgba(255,255,255,.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);

    -webkit-font-smoothing:
        antialiased;
}


img {
    display: block;

    max-width: 100%;
}


figure {
    margin: 0;
}


a {
    color: inherit;

    text-decoration: none;
}


button {
    font: inherit;
}


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

    margin:
        0 auto;
}


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

.about-hero {
    position: relative;

    margin-top: 42px;

    padding:
        clamp(48px,6vh,74px)
        0
        clamp(70px,8vh,100px);

    background:
        var(--light);
}

.about-hero-grid {
    min-height:
        calc(100svh - 210px);

    display: grid;

    grid-template-columns:
        minmax(0,1.18fr)
        minmax(360px,.82fr);

    align-items: center;

    gap:
        clamp(55px,7vw,110px);
}


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

.about-hero-slider {
    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 11;

    overflow: hidden;

    background:
        #e5e6ea;
}


.about-hero-slides {
    position: absolute;

    inset: 0;
}


.about-hero-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .7s ease,
        visibility .7s ease;
}


.about-hero-slide.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* NO ZOOM */

.about-hero-slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: none !important;
    transition: none !important;
}
.about-hero-slider {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 11;

    overflow: hidden;

    background: #e5e6ea;
}

.about-hero-slider-overlay {
    position: absolute;

    z-index: 2;

    right: 0;
    bottom: 0;
    left: 0;

    height: 34%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(8,9,12,.05) 30%,
            rgba(8,9,12,.58) 100%
        );
}


/* Label */

.about-slider-label {
    position: absolute;

    z-index: 5;

    top: 20px;
    left: 20px;

    padding:
        10px 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    color:
        var(--charcoal);

    background:
        rgba(255,255,255,.88);

    font-size: 7px;
    font-weight: 650;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.about-slider-label span + span::before {
    content: "";

    display: inline-block;

    width: 3px;
    height: 3px;

    margin-right: 10px;

    vertical-align: middle;

    border-radius: 50%;

    background:
        var(--blue);
}


/* Slider Controls */

.about-hero-slider-meta {
    position: absolute;

    z-index: 6;

    right: 20px;
    bottom: 18px;
    left: 20px;

    display: flex;
    align-items: center;

    gap: 13px;
}


.about-slider-counter {
    display: flex;
    align-items: center;

    gap: 5px;

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

    font-size: 8px;
    font-weight: 700;

    letter-spacing:
        .08em;
}


.about-slider-counter span:nth-child(2) {
    opacity: .45;
}


.about-slider-progress {
    position: relative;

    width: 105px;
    height: 1px;

    overflow: hidden;

    background:
        rgba(255,255,255,.3);
}


.about-slider-progress > span {
    position: absolute;

    inset: 0;

    background:
        #ffffff;

    transform:
        scaleX(0);

    transform-origin:
        left center;
}


.about-slider-progress > span.playing {
    animation:
        aboutSliderProgress
        5.5s
        linear
        forwards;
}


@keyframes aboutSliderProgress {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


.about-slider-arrows {
    margin-left: auto;

    display: flex;

    gap: 5px;
}


.about-slider-arrows button {
    width: 37px;
    height: 37px;

    padding: 0;

    display: grid;
    place-items: center;

    color:
        #ffffff;

    background:
        rgba(8,9,12,.28);

    border:
        1px solid
        rgba(255,255,255,.28);

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease;
}


.about-slider-arrows button:hover {
    background:
        var(--blue);

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


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

.about-hero-content {
    max-width:
        520px;
}


.about-eyebrow {
    display: flex;
    align-items: center;

    gap: 13px;

    color:
        var(--blue);
}


.about-eyebrow > span {
    width: 35px;
    height: 1px;

    background:
        var(--blue);
}


.about-eyebrow strong {
    font-size: 7px;
    font-weight: 700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}


.about-hero-content h1 {
    margin:
        45px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            55px,
            5.2vw,
            82px
        );

    font-weight: 500;

    line-height:
        .94;

    letter-spacing:
        -.06em;
}


.about-hero-content h1 span {
    display: block;

    color:
        var(--blue);
}


.about-hero-lead {
    max-width:
        460px;

    margin:
        34px 0 0;

    font-family:
        var(--heading);

    font-size:
        18px;

    font-weight:
        500;

    line-height:
        1.45;
}


.about-hero-description {
    max-width:
        430px;

    margin:
        20px 0 0;

    color:
        var(--text-muted);

    font-size:
        17px;

    line-height:
        1.75;
}


.about-hero-tags {
    margin-top:
        26px;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    color:
        var(--blue);

    font-size: 15px;
    font-weight: 700;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.about-hero-tags i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        rgba(36,33,36,.28);
}


.about-main-link {
    width:
        min(100%,250px);

    margin-top:
        30px;

    padding-bottom:
        12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

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

    font-size:
        14px;
    font-weight:
        650;
}


.about-main-link strong {
    color:
        var(--blue);

    font-size: 15px;
}
/* =========================================================
   WHO WE ARE / STORY
========================================================= */

.about-story {
    position: relative;

    padding:
        clamp(85px, 9vw, 140px)
        0;

    overflow: hidden;

    background:
        #ffffff;
}



/* =========================================================
   MAIN TWO COLUMN LAYOUT
========================================================= */

.about-story-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(480px, 1.12fr);

    align-items: center;

    gap:
        clamp(
            65px,
            8vw,
            130px
        );
}



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

.about-story-content {
    max-width:
        610px;
}


.about-story-content h2 {
    margin:
        45px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            48px,
            4.6vw,
            72px
        );

    font-weight:
        500;

    line-height:
        .98;

    letter-spacing:
        -.055em;

    color:
        var(--charcoal);
}


.about-story-content h2 span {
    display: block;

    color:
        var(--blue);
}



/* Lead text */

.about-story-lead {
    max-width:
        540px;

    margin:
        34px 0 0;

    font-family:
        var(--heading);

    font-size:
        17px;

    font-weight:
        500;

    line-height:
        1.55;

    color:
        var(--charcoal);
}



/* Supporting paragraph */

.about-story-text {
    max-width:
        520px;

    margin:
        20px 0 0;

    color:
        var(--text-muted);

    font-size:
        13px;

    line-height:
        1.8;
}



/* =========================================================
   LINK
========================================================= */

.about-story-link {
    width:
        min(
            100%,
            290px
        );

    margin-top:
        36px;

    padding-bottom:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        rgba(
            36,
            33,
            36,
            .18
        );

    color:
        var(--charcoal);

    font-size:
        14px;

    font-weight:
        650;

    transition:
        border-color .25s ease,
        color .25s ease;
}


.about-story-link strong {
    color:
        var(--blue);

    font-size:
        16px;

    transition:
        transform .25s ease;
}


.about-story-link:hover {
    color:
        var(--blue);

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


.about-story-link:hover strong {
    transform:
        translate(
            3px,
            -3px
        );
}



/* =========================================================
   IMAGE
========================================================= */

.about-story-image {
    position: relative;

    width: 100%;

    aspect-ratio:
        1.18 / 1;

    margin: 0;

    overflow: hidden;

    background:
        #ececf0;
}


.about-story-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center;
}



/* Slight bottom readability gradient */

.about-story-image::after {
    content: "";

    position: absolute;

    z-index: 1;

    inset:
        auto 0 0;

    height:
        32%;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(
                8,
                9,
                12,
                .52
            )
        );
}



/* Image caption */

.about-story-image figcaption {
    position: absolute;

    z-index: 2;

    right:
        22px;

    bottom:
        20px;

    left:
        22px;

    padding-top:
        13px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        20px;

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

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

    font-size:
        12px;

    font-weight:
        650;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}



/* =========================================================
   BOTTOM PRINCIPLES
========================================================= */

.about-story-principles {
    margin-top:
        clamp(
            60px,
            6vw,
            90px
        );

    display: grid;

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

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

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


.about-story-principles article {
    min-height:
        150px;

    padding:
        27px 30px;

    display: grid;

    grid-template-columns:
        35px 1fr;

    align-content:
        center;

    gap:
        20px;
}


.about-story-principles article +
article {
    border-left:
        1px solid
        var(--border);
}


.about-story-principles
article > span {
    padding-top:
        5px;

    color:
        var(--blue);

    font-size:
        8px;

    font-weight:
        700;
}


.about-story-principles h3 {
    margin: 0;

    font-family:
        var(--heading);

    font-size:
        22px;

    font-weight:
        500;

    letter-spacing:
        -.025em;
}


.about-story-principles p {
    max-width:
        300px;

    margin:
        10px 0 0;

    color:
        var(--text-muted);

    font-size:
        15px;

    line-height:
        1.7;
}



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

@media (max-width: 1024px) {

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

        gap:
            50px;
    }


    .about-story-content {
        max-width:
            720px;
    }


    .about-story-content h2 {
        max-width:
            700px;
    }


    .about-story-lead,
    .about-story-text {
        max-width:
            620px;
    }


    .about-story-image {
        aspect-ratio:
            16 / 9;
    }


    .about-story-principles {
        margin-top:
            55px;
    }


    .about-story-principles article {
        padding:
            25px 20px;
    }

}



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

@media (max-width: 767px) {

    .about-story {
        padding:
            75px 0;
    }


    .about-story-layout {
        display: flex;

        flex-direction:
            column;

        gap:
            38px;
    }


    .about-story-content {
        width: 100%;

        max-width:
            none;
    }


    .about-story-content h2 {
        margin-top:
            32px;

        font-size:
            clamp(
                40px,
                11.5vw,
                52px
            );
    }


    .about-story-lead {
        margin-top:
            26px;

        font-size:
            15px;

        line-height:
            1.55;
    }


    .about-story-text {
        margin-top:
            16px;

        font-size:
            15px;

        line-height:
            1.75;
    }


    .about-story-link {
        margin-top:
            27px;
    }



    /* Image */

    .about-story-image {
        width: 100%;

        aspect-ratio:
            4 / 3;
    }


    .about-story-image figcaption {
        right:
            13px;

        bottom:
            13px;

        left:
            13px;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            4px;
    }



    /* Principles */

    .about-story-principles {
        margin-top:
            45px;

        grid-template-columns:
            1fr;

        border-bottom:
            0;
    }


    .about-story-principles article {
        min-height:
            125px;

        padding:
            24px 0;

        grid-template-columns:
            35px 1fr;
    }


    .about-story-principles article +
    article {
        border-left:
            0;

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


    .about-story-principles h3 {
        font-size:
            21px;
    }


    .about-story-principles p {
        font-size:
           15px;
    }

}

/* =========================================================
   COMMON SECTION LABEL
========================================================= */

.about-section-label {
    display: flex;
    align-items: center;

    gap: 16px;

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


.about-section-label > span {
    color:
        var(--blue);

    font-size: 14px;
    font-weight: 700;
}


.about-section-label p {
    margin: 0;

    font-size: 15px;
    font-weight: 700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.about-section-label.light {
    color:
        rgba(255,255,255,.45);
}


.about-section-label.light > span {
    color:
        var(--blue-light);
}

/* =========================================================
   BRANDS
========================================================= */

.about-brands {
    padding:
        120px 0;

    color:
        #ffffff;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(85,88,189,.17),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #11131a 0%,
            #141722 50%,
            #0e1017 100%
        );
}


.about-brands-heading {
    display: grid;

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

    gap: 50px;
}


.about-brands-heading > div:last-child {
    max-width:
        740px;
}


.about-brands-heading h2 {
    margin: 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            44px,
            4.5vw,
            68px
        );

    font-weight: 500;

    line-height:
        1;

    letter-spacing:
        -.05em;
}


.about-brands-heading
> div:last-child > p {
    max-width:
        500px;

    margin:
        25px 0 0;

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

    font-size:
        15px;

    line-height:
        1.75;
}


.about-brand-list {
    margin-top:
        70px;

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


.about-brand-list a {
    min-height:
        110px;

    display: grid;

    grid-template-columns:
        70px 1fr .65fr 35px;

    align-items: center;

    gap: 25px;

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

    transition:
        padding .3s ease,
        background .3s ease;
}


.about-brand-index {
    color:
        rgba(255,255,255,.35);

    font-size: 13px;
}


.about-brand-list h3 {
    margin: 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            24px,
            2.2vw,
            34px
        );

    font-weight: 500;
}


.about-brand-type {
    color:
        rgba(255,255,255,.38);

    font-size: 12px;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.about-brand-list strong {
    color:
        var(--blue-light);

    font-size: 16px;
}


.about-brand-list a:hover {
    padding:
        0 18px;

    background:
        rgba(85,88,189,.06);
}


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

.about-approach {
    padding:
        125px 0;

    background:
        var(--light);
}


.about-approach-grid {
    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        clamp(
            70px,
            10vw,
            170px
        );
}


.about-approach-intro {
    position: sticky;

    top: 40px;

    align-self: start;
}


.about-approach-intro h2 {
    max-width:
        540px;

    margin:
        47px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            42px,
            4.5vw,
            68px
        );

    font-weight: 500;

    line-height:
        .98;

    letter-spacing:
        -.055em;
}


.about-approach-intro > p {
    max-width:
        380px;

    margin:
        26px 0 0;

    color:
        var(--text-muted);

    font-size:
        15px;

    line-height:
        1.75;
}


.about-approach-list {
    border-top:
        1px solid
        var(--border);
}


.about-approach-list article {
    min-height:
        160px;

    padding:
        31px 0;

    display: grid;

    grid-template-columns:
        60px 1fr;

    gap: 20px;

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


.about-approach-list
article > span {
    color:
        var(--blue);

    font-size: 8px;

    font-weight:
        700;
}


.about-approach-list h3 {
    margin: 0;

    font-family:
        var(--heading);

    font-size: 28px;

    font-weight: 500;
}


.about-approach-list p {
    max-width:
        430px;

    margin:
        12px 0 0;

    color:
        var(--text-muted);

    font-size: 15px;

    line-height:
        1.7;
}


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

.about-values {
    padding:
        120px 0;

    background:
        #ffffff;
}


.about-values-intro {
    margin-top:
        52px;
}


.about-values-intro h2 {
    max-width:
        790px;

    margin: 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            45px,
            4.7vw,
            72px
        );

    font-weight:
        500;

    line-height:
        .98;

    letter-spacing:
        -.055em;
}


 
    margin-top:
        70px;

    display: grid;

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

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

    border-left:
        1px solid
        var(--border);


/* =========================================================
   WHY DOORWAY — VALUE CARDS
========================================================= */

.about-values-grid {
    margin-top: 64px;

    display: grid;

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

    gap: 14px;
}


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

.about-values-grid article {
    position: relative;

    min-height: 210px;

    padding:
        28px 30px
        30px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        #f6f6f8;

    border:
        1px solid
        rgba(36, 33, 36, 0.09);

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* Indigo line */

.about-values-grid article::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--blue);

    transform:
        scaleX(.18);

    transform-origin:
        left center;

    transition:
        transform .35s ease;
}


/* Small arrow */

.about-values-grid article::after {
    content: "↗";

    position: absolute;

    top: 27px;
    right: 28px;

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

    font-size: 18px;

    transition:
        color .3s ease,
        transform .3s ease;
}


/* =========================================================
   NUMBER
========================================================= */

.about-values-grid article > span {
    width: fit-content;

    min-width: 34px;

    padding:
        6px 9px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color:
        var(--blue);

    background:
        rgba(63, 65, 152, .07);

    border:
        1px solid
        rgba(63, 65, 152, .12);

    font-size: 8px;

    font-weight: 700;

    letter-spacing:
        .08em;
}


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

.about-values-grid h3 {
    max-width: 420px;

    margin:
        auto 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            24px,
            2vw,
            31px
        );

    font-weight: 500;

    line-height: 1.1;

    letter-spacing:
        -.035em;

    color:
        var(--charcoal);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.about-values-grid p {
    max-width: 460px;

    margin:
        14px 0 0;

    color:
        var(--text-muted);

    font-size: 11px;

    line-height: 1.7;
}


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

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

    .about-values-grid article:hover {
        transform:
            translateY(-5px);

        background:
            #ffffff;

        border-color:
            rgba(63, 65, 152, .20);

        box-shadow:
            0 18px 45px
            rgba(23, 25, 40, .07);
    }


    .about-values-grid article:hover::before {
        transform:
            scaleX(1);
    }


    .about-values-grid article:hover::after {
        color:
            var(--blue);

        transform:
            translate(3px, -3px);
    }

}


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

@media (max-width: 767px) {

    .about-values-grid {
        margin-top: 42px;

        grid-template-columns:
            1fr;

        gap: 10px;
    }


    .about-values-grid article {
        min-height: 190px;

        padding:
            24px 22px
            25px;
    }


    .about-values-grid article::after {
        top: 23px;
        right: 21px;

        font-size: 16px;
    }


    .about-values-grid h3 {
        font-size: 25px;
    }


    .about-values-grid p {
        font-size: 15px;
    }

}

/* =========================================================
   FULL WIDTH IMAGE
========================================================= */

.about-project-break {
    width: 100%;
}


.about-project-break figure {
    position: relative;

    width: 100%;

    height:
        min(76vh,760px);

    overflow: hidden;

    background:
        #11131a;
}


.about-project-break img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.about-project-break figure::after {
    content: "";

    position: absolute;

    inset: 50% 0 0;

    background:
        linear-gradient(
            transparent,
            rgba(8,9,12,.52)
        );
}


.about-project-break figcaption {
    position: absolute;

    z-index: 2;

    right: 40px;
    bottom: 35px;
    left: 40px;

    padding-top:
        16px;

    display: flex;
    justify-content: space-between;

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

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

    font-size: 12px;
    font-weight: 650;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


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

.about-cta {
    padding:
        115px 0;

    background:
        var(--light);
}


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

    display: grid;

    grid-template-columns:
        1.3fr .7fr;

    align-items: end;

    gap:
        clamp(60px,8vw,140px);

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


.about-cta-label {
    color:
        var(--blue);

    font-size: 12px;
    font-weight: 700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.about-cta h2 {
    max-width:
        820px;

    margin:
        40px 0 0;

    font-family:
        var(--heading);

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

    font-weight: 500;

    line-height:
        .94;

    letter-spacing:
        -.06em;
}


.about-cta-right p {
    max-width:
        370px;

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        18px;

    line-height:
        1.7;
}


.about-cta-right a {
    min-height:
        56px;

    margin-top:
        28px;

    padding:
        0 19px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color:
        #ffffff;

    background:
        var(--blue);

    font-size: 10px;
    font-weight: 650;

    transition:
        background .25s ease;
}


.about-cta-right a:hover {
    background:
        var(--blue-dark);
}

/* =========================================================
   ABOUT PAGE — TABLET / SMALL LAPTOP
   768px - 1024px

   LAYOUT ONLY
   NO FONT SIZE CHANGES
========================================================= */

@media (max-width: 1024px) {


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

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

        margin:
            0 auto;
    }



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

    .about-hero {
        margin-top:
            32px;

        padding:
            56px 0
            82px;
    }


    .about-hero-grid {
        min-height:
            auto;

        display:
            grid;

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

        gap:
            48px;
    }


    .about-hero-content {
        width:
            100%;

        max-width:
            760px;

        order:
            -1;
    }


    .about-hero-lead,
    .about-hero-description {
        max-width:
            620px;
    }


    .about-hero-slider {
        width:
            100%;

        max-width:
            none;

        aspect-ratio:
            16 / 10;
    }



    /* =====================================================
       WHO WE ARE
    ===================================================== */

    .about-story {
        padding:
            95px 0;
    }


    .about-story-layout {
        display:
            grid;

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

        gap:
            48px;
    }


    .about-story-content {
        width:
            100%;

        max-width:
            760px;
    }


    .about-story-content h2 {
        max-width:
            720px;
    }


    .about-story-lead,
    .about-story-text {
        max-width:
            640px;
    }


    .about-story-image {
        width:
            100%;

        aspect-ratio:
            16 / 9;
    }


    .about-story-principles {
        margin-top:
            55px;

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


    .about-story-principles article {
        padding:
            24px 18px;

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

        gap:
            14px;
    }



    /* =====================================================
       BRANDS
    ===================================================== */

    .about-brands {
        padding:
            95px 0;
    }


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

        gap:
            34px;
    }


    .about-brands-heading > div:last-child {
        max-width:
            720px;
    }


    .about-brand-list {
        margin-top:
            52px;
    }



    /* =====================================================
       OUR PROCESS
    ===================================================== */

    .about-approach {
        padding:
            95px 0;
    }


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

        gap:
            52px;
    }


    .about-approach-intro {
        position:
            static;

        width:
            100%;

        max-width:
            700px;
    }


    .about-approach-list {
        width:
            100%;
    }



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

    .about-values {
        padding:
            95px 0;
    }


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

        gap:
            12px;
    }



    /* =====================================================
       PROJECT IMAGE
    ===================================================== */

    .about-project-break figure {
        height:
            clamp(
                480px,
                62vh,
                680px
            );
    }



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

    .about-cta {
        padding:
            95px 0;
    }


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

        gap:
            38px;
    }


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

        max-width:
            520px;
    }

}
/* =========================================================
   ABOUT PAGE — MOBILE
   Up to 767px

   LAYOUT ONLY
   NO FONT SIZE CHANGES
========================================================= */

@media (max-width: 767px) {


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

    :root {
        --mobile-padding:
            17px;
    }


    .about-container {
        width:
            calc(
                100% -
                (
                    var(--mobile-padding) * 2
                )
            );

        margin:
            0 auto;
    }



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

    .about-hero {
        margin-top:
            24px;

        padding:
            42px 0
            64px;
    }


    .about-hero-grid {
        min-height:
            auto;

        display:
            flex;

        flex-direction:
            column;

        gap:
            34px;
    }


    /* TEXT FIRST */

    .about-hero-content {
        width:
            100%;

        max-width:
            none;

        order:
            1;
    }


    /* IMAGE SECOND */

    .about-hero-slider {
        width:
            100%;

        max-width:
            none;

        order:
            2;

        aspect-ratio:
            4 / 3;
    }


    .about-slider-label {
        top:
            10px;

        left:
            10px;

        padding:
            8px 9px;
    }


    .about-slider-label span:last-child {
        display:
            none;
    }


    .about-hero-slider-meta {
        right:
            10px;

        bottom:
            10px;

        left:
            10px;

        gap:
            9px;
    }


    .about-slider-progress {
        width:
            min(
                72px,
                20vw
            );
    }


    .about-slider-arrows {
        gap:
            4px;
    }


    .about-slider-arrows button {
        width:
            38px;

        height:
            38px;
    }


    .about-hero-tags {
        gap:
            8px 10px;

        flex-wrap:
            wrap;
    }


    .about-main-link {
        width:
            100%;

        max-width:
            300px;
    }



    /* =====================================================
       WHO WE ARE
    ===================================================== */

    .about-story {
        padding:
            72px 0;
    }


    .about-story-layout {
        display:
            flex;

        flex-direction:
            column;

        gap:
            34px;
    }


    .about-story-content {
        width:
            100%;

        max-width:
            none;
    }


    .about-story-image {
        width:
            100%;

        aspect-ratio:
            4 / 3;
    }


    .about-story-image figcaption {
        right:
            13px;

        bottom:
            13px;

        left:
            13px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            4px;
    }


    .about-story-link {
        width:
            100%;

        max-width:
            310px;
    }



    /* =====================================================
       STORY PRINCIPLES
    ===================================================== */

    .about-story-principles {
        margin-top:
            42px;

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

        border-bottom:
            0;
    }


    .about-story-principles article {
        min-height:
            auto;

        padding:
            24px 0;

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

        gap:
            13px;
    }


    .about-story-principles article +
    article {
        border-left:
            0;

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



    /* =====================================================
       BRANDS
    ===================================================== */

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


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

        gap:
            28px;
    }


    .about-brand-list {
        margin-top:
            38px;
    }


    .about-brand-list a {
        width:
            100%;

        min-height:
            88px;

        padding:
            12px 0;

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

        gap:
            10px;
    }


    /* Hide less-important brand type
       so title has enough mobile space */

    .about-brand-type {
        display:
            none;
    }


    .about-brand-list a:hover {
        padding:
            12px 0;
    }



    /* =====================================================
       OUR PROCESS
    ===================================================== */

    .about-approach {
        padding:
            72px 0;
    }


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

        gap:
            38px;
    }


    .about-approach-intro {
        position:
            static;

        width:
            100%;

        max-width:
            none;
    }


    .about-approach-list {
        width:
            100%;
    }


    .about-approach-list article {
        min-height:
            auto;

        padding:
            26px 0;

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

        gap:
            12px;
    }


    .about-approach-list p {
        max-width:
            none;
    }



    /* =====================================================
       VALUES / WHY DOORWAY
    ===================================================== */

    .about-values {
        padding:
            72px 0;
    }


    .about-values-intro {
        margin-top:
            38px;
    }


    .about-values-grid {
        margin-top:
            42px;

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

        gap:
            10px;
    }


    .about-values-grid article {
        min-height:
            180px;

        padding:
            23px 20px
            24px;
    }


    .about-values-grid article::after {
        top:
            22px;

        right:
            20px;
    }



    /* =====================================================
       FULL WIDTH PROJECT IMAGE
    ===================================================== */

    .about-project-break {
        width:
            100%;
    }


    .about-project-break figure {
        width:
            100%;

        height:
            clamp(
                430px,
                70svh,
                620px
            );

        min-height:
            0;
    }


    .about-project-break img {
        width:
            100%;

        height:
            100%;

        object-fit:
            cover;
    }


    .about-project-break figcaption {
        right:
            16px;

        bottom:
            16px;

        left:
            16px;

        flex-direction:
            column;

        gap:
            6px;
    }



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

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


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

        padding-top:
            28px;

        gap:
            32px;
    }


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

        max-width:
            none;
    }


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

}