/* =========================================================
   OUTLOOK
   Clean / Editorial / Personal
   Black + White + Natural Gray
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root{

    --white:#ffffff;
    --off-white:#f7f7f5;
    --light-gray:#eeeeeb;

    --black:#111111;
    --dark:#1c1c1c;

    --gray:#686868;
    --muted:#909090;

    --border:#dededb;
    --soft-border:#e9e9e6;

    --radius:24px;

    --shadow:0 18px 45px rgba(0,0,0,.06);

}


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--white);

    color:var(--black);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    color:inherit;

}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4{

    color:var(--black);

    font-weight:800;

    letter-spacing:-.045em;

}

p{

    color:var(--gray);

    line-height:1.75;

}


/* =========================================================
   NAVBAR
   Linear-inspired solid navigation
   ========================================================= */

nav{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:72px;

    padding:0 5%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:var(--white);

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

    z-index:1000;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


/* =========================================================
   LOGO
   ========================================================= */

.logo {
    display: flex;
    align-items: center;
    gap: -3px;

    text-decoration: none;

    font-size: 21px;
    font-weight: 750;

    letter-spacing: -0.055em;
    line-height: 1;

    color: #111;
}

.logo img {
    width: 70px;
    height: 55px;

    display: block;
    object-fit: contain;
    border-radius: 0;
}


/* Navigation */

nav ul{

    display:flex;

    align-items:center;

    gap:32px;

    list-style:none;

}

nav ul li a{

    position:relative;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    color:#555;

    transition:.25s ease;

}

nav ul li a:hover{

    color:var(--black);

}


/* Mobile navbar hide */

nav.hide{

    transform:translateY(-100%);

}


/* =========================================================
   GLOBAL SECTIONS
   ========================================================= */

section{

    padding:

        130px
        7%
        130px;

}

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

#home{
    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 70% 35%,
            rgba(0,0,0,.055),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(0,0,0,.035),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f7f7 52%,
            #ffffff 100%
        );
}


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

.hero-background{
    position:absolute;

    inset:0;

    pointer-events:none;
}


/* giant Outlook-inspired circle */

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

    position:absolute;

    width:min(70vw,900px);
    height:min(70vw,900px);

    right:-25%;
    top:50%;

    transform:
        translateY(-50%);

    border-radius:50%;

    border:1px solid rgba(0,0,0,.055);

    box-shadow:
        0 0 0 80px rgba(0,0,0,.009),
        0 0 0 160px rgba(0,0,0,.006);

    opacity:.8;
}


/* subtle editorial grid */

.hero-background::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.018) 1px,
            transparent 1px
        );

    background-size:
        90px 90px,
        90px 90px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 75%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 75%
        );
}


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

.hero-content{
    position:relative;

    z-index:2;

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:
        120px 40px 100px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.hero-eyebrow{
    margin-bottom:28px;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

    color:#888;
}


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

.hero-content h1{
    margin:0;

    max-width:1050px;

    font-size:
        clamp(60px, 9vw, 125px);

    line-height:.91;

    letter-spacing:-6px;

    font-weight:600;

    color:#111;
}


.hero-content h1 span{
    color:#888;
}


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

.hero-description{
    max-width:520px;

    margin:
        38px 0 0;

    font-size:17px;

    line-height:1.7;

    color:#777;
}


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

.hero-actions{
    margin-top:38px;
}


.hero-button{
    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:15px 20px;

    background:#111;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-size:13px;

    font-weight:600;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.hero-button span{
    font-size:17px;

    transition:
        transform .3s ease;
}


.hero-button:hover{
    transform:translateY(-3px);

    background:#292929;

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);
}


.hero-button:hover span{
    transform:translateY(3px);
}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.hero-scroll{
    position:absolute;

    right:40px;
    bottom:40px;

    z-index:3;

    display:flex;

    align-items:center;

    gap:14px;

    transform:rotate(-90deg);

    transform-origin:right center;
}


.hero-scroll span{
    font-size:9px;

    font-weight:700;

    letter-spacing:1.5px;

    color:#999;

    white-space:nowrap;
}


.scroll-line{
    width:55px;

    height:1px;

    background:#aaa;
}


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

@media(max-width:768px){

    #home{
        min-height:calc(100vh - 20px);
        align-items:center;
    }

    .hero-content{
        width:100%;
        padding:120px 24px 90px;
    }

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

    .hero-content h1{
        width:100%;
        max-width:100%;

        font-size:clamp(48px, 14vw, 78px);
        line-height:.94;

        /* Reduce the aggressive desktop spacing */
        letter-spacing:-2.5px;

        /* Prevent the text from being clipped */
        white-space:normal;
        overflow:visible;

        word-break:normal;
        overflow-wrap:normal;
    }

    .hero-description{
        width:100%;
        max-width:430px;

        margin-top:28px;

        font-size:15px;
    }

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

    .hero-button{
        width:auto;
    }

    .hero-background::before{
        width:520px;
        height:520px;
        right:-300px;
    }

    .hero-background::after{
        background-size:
            55px 55px,
            55px 55px;
    }

    .hero-scroll{
        display:none;
    }

}



/* =========================================================
   BUTTONS
   ========================================================= */

.hero-buttons{

    display:flex;

    align-items:center;

    gap:12px;

}


.btn,
.btn-outline{

    min-height:50px;

    padding:0 23px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    transition:.3s ease;

}


.btn{

    background:var(--black);

    color:var(--white);

}


.btn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 10px 25px
        rgba(0,0,0,.15);

}


.btn-outline{

    background:var(--white);

    color:var(--black);

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

}


.btn-outline:hover{

    background:var(--off-white);

    border-color:#c8c8c4;

    transform:translateY(-2px);

}


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

.section-label{

    max-width:1200px;

    margin:0 auto 35px;

    color:var(--muted);

    font-size:11px;

    font-weight:800;

    letter-spacing:2.5px;

}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.section-title{

    max-width:1200px;

    margin:0 auto 60px;

}


.section-title h2{

    max-width:850px;

    font-size:

        clamp(
            42px,
            6vw,
            76px
        );

    line-height:.95;

    margin-bottom:25px;

}


.section-title p{

    max-width:620px;

    font-size:16px;

}


/* =========================================================
   INTRODUCTION
   ========================================================= */

#about{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(0,0,0,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.025) 1px,
            transparent 1px
        ),
        #fafafa;

    background-size:
        70px 70px,
        70px 70px;
}


/* =========================================================
   INTRO LAYOUT
   ========================================================= */

.intro-layout{
    position:relative;
    z-index:2;

    display:grid;

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

    gap:100px;

    align-items:end;

    margin-top:75px;

    padding-bottom:30px;
}


/* =========================================================
   HEADING
   ========================================================= */

.intro-heading h2{
    margin:0;

    max-width:850px;

    font-size:
        clamp(48px, 7vw, 96px);

    line-height:.96;

    letter-spacing:-4px;

    font-weight:600;

    color:#111;
}


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

.intro-description{
    max-width:480px;

    padding-bottom:8px;
}


.intro-lead{
    margin:0 0 24px;

    font-size:20px;

    line-height:1.5;

    color:#222;
}


.intro-description > p:not(.intro-lead){
    margin:0;

    font-size:15px;

    line-height:1.8;

    color:#777;
}


/* =========================================================
   META
   ========================================================= */

.intro-meta{
    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:38px;

    padding-top:22px;

    border-top:1px solid #dedede;
}


.intro-meta span{
    font-size:10px;

    font-weight:700;

    letter-spacing:1.4px;

    color:#888;
}


/* =========================================================
   DECORATIVE ELEMENT
   ========================================================= */

#about::after{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-220px;
    bottom:-280px;

    border-radius:50%;

    border:1px solid rgba(0,0,0,.045);

    box-shadow:
        0 0 0 70px rgba(0,0,0,.009),
        0 0 0 140px rgba(0,0,0,.006);

    pointer-events:none;
}


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

@media(max-width:768px){

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

        gap:40px;

        margin-top:50px;
    }


    .intro-heading h2{
        font-size:
            clamp(46px, 13vw, 72px);

        letter-spacing:-2.5px;
    }


    .intro-description{
        max-width:none;

        padding-bottom:0;
    }


    .intro-lead{
        font-size:18px;
    }


    .intro-description > p:not(.intro-lead){
        font-size:14px;

        line-height:1.75;
    }


    .intro-meta{
        margin-top:30px;
    }

}


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

.about{

    background:var(--white);

}


.about-title{

    max-width:1200px;

    margin:

        0
        auto
        70px;

}


.about-title h2{

    max-width:850px;

    font-size:

        clamp(
            44px,
            6vw,
            82px
        );

    line-height:.92;

}


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

.bridge-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr
        1.1fr
        1fr;

    gap:18px;

}


.bridge-side{

    min-height:400px;

    padding:35px;

    background:var(--off-white);

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

    border-radius:var(--radius);

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    transition:.35s ease;

}


.bridge-side:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}


.card-number{

    margin-bottom:auto;

    font-size:12px;

    font-weight:800;

    color:var(--muted);

    letter-spacing:2px;

}


.bridge-side h3{

    font-size:30px;

    margin-bottom:14px;

}


.bridge-side p{

    font-size:14px;

}


/* =========================================================
   CENTER BRAND
   ========================================================= */

.bridge-center{

    min-height:400px;

}


.brand-box{

    width:100%;
    height:100%;

    min-height:400px;

    border-radius:var(--radius);

    background:var(--black);

    color:var(--white);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:30px;

    position:relative;

    overflow:hidden;

}


.brand-box::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

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

    border-radius:50%;

}


.brand-box::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

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

    border-radius:50%;

}


.brand-box img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:22px;

    position:relative;

    z-index:2;

}


.brand-box h2{

    color:var(--white);

    font-size:32px;

    letter-spacing:-.05em;

    position:relative;

    z-index:2;

}


.brand-box p{

    color:#999;

    margin-top:8px;

    font-size:13px;

    position:relative;

    z-index:2;

}


/* =========================================================
   WHAT I DO
   ========================================================= */

#what-i-do{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f7f7 50%,
            #ffffff 100%
        );
}


/* =========================================================
   INTRO
   ========================================================= */

.whatido-intro{
    position:relative;

    z-index:2;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:50px;

    margin-top:65px;
}


.whatido-intro h2{
    margin:0;

    max-width:720px;

    font-size:
        clamp(48px, 7vw, 88px);

    line-height:.95;

    letter-spacing:-4px;

    font-weight:600;

    color:#111;
}


.whatido-intro h2 span{
    color:#888;
}


.whatido-intro p{
    max-width:330px;

    margin:0;

    font-size:15px;

    line-height:1.7;

    color:#777;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.whatido-layout{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        1fr 280px 1fr;

    align-items:center;

    gap:70px;

    margin-top:100px;

    min-height:390px;
}


/* =========================================================
   ROLE ITEMS
   ========================================================= */

.whatido-item{
    display:flex;

    gap:25px;

    align-items:flex-start;
}


.whatido-number{
    flex-shrink:0;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    color:#aaa;
}


.whatido-content{
    max-width:360px;
}


.whatido-type{
    display:block;

    margin-bottom:13px;

    font-size:10px;

    font-weight:700;

    letter-spacing:1.7px;

    color:#999;
}


.whatido-content h3{
    margin:0;

    font-size:
        clamp(30px, 3vw, 45px);

    line-height:.98;

    letter-spacing:-1.5px;

    font-weight:600;

    color:#111;
}


.whatido-content p{
    margin:22px 0 0;

    font-size:14px;

    line-height:1.8;

    color:#777;
}






/* =========================================================
   CENTER LOGO
   ========================================================= */

.whatido-center{
    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;
}


.whatido-orbit{
    position:relative;

    width:220px;
    height:220px;

    display:flex;

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


/* outer ring */

.whatido-ring{
    position:absolute;

    inset:0;

    border:1px solid rgba(0,0,0,.12);

    border-radius:50%;
}


/* second subtle ring */

.whatido-ring::before{
    content:"";

    position:absolute;

    inset:17px;

    border:1px solid rgba(0,0,0,.045);

    border-radius:50%;
}


/* logo */

.whatido-logo{
    position:relative;

    width:125px;
    height:125px;

    object-fit:contain;

    border-radius:50%;

    background:#111;

    padding:8px;

    box-sizing:border-box;

    box-shadow:
        0 20px 50px rgba(0,0,0,.14);
}

/* PARTNER CODE BOX */

.partner-code {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin-top: 13px;
    padding: 7px 11px;
    background: rgba(0, 0, 0, .035);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 5px;
    transition: background .3s ease, border-color .3s ease;
}

.partner-code-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #999;
}

.partner-code:hover {
    background: #fff;
    border-color: #ccc;
}

.partner-code {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    color: #111;
}

/* MOBILE */

@media(max-width:520px) {
    .partner-code {
        gap: 9px;
        margin-top: 11px;
        padding: 6px 9px;
    }

    .partner-code-label {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .partner-code {
        font-size: 10px;
    }
}


.logo-line{
    width:13px;

    height:2px;

    background:#fff;

    transform:
        scaleX(1.7);
}


.whatido-center-label{
    margin-top:22px;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

    color:#888;
}


/* =========================================================
   CONNECTING LINES
   ========================================================= */

.whatido-left{
    justify-content:flex-end;

    text-align:right;
}


.whatido-left .whatido-content{
    order:1;
}


.whatido-left .whatido-number{
    order:2;
}


.whatido-right{
    justify-content:flex-start;
}


/* =========================================================
   BOTTOM TAGS
   ========================================================= */

.whatido-bottom{
    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:0;

    margin-top:80px;

    padding-top:25px;

    border-top:1px solid #e1e1e1;
}


.whatido-bottom span{
    padding:
        0 25px;

    border-right:1px solid #ddd;

    font-size:9px;

    font-weight:700;

    letter-spacing:1.5px;

    color:#999;
}


.whatido-bottom span:last-child{
    border-right:none;
}


/* =========================================================
   BACKGROUND DETAIL
   ========================================================= */

#what-i-do::before{
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    border:1px solid rgba(0,0,0,.025);

    box-shadow:
        0 0 0 80px rgba(0,0,0,.006),
        0 0 0 160px rgba(0,0,0,.004);

    pointer-events:none;
}


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

@media(max-width:600px){

    .whatido-orbit{
        width:190px;
        height:190px;
    }

    .whatido-logo{
        width:105px;
        height:105px;

        padding:7px;
    }




    .whatido-intro p{
        margin-top:25px;

        max-width:450px;
    }


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

        gap:60px;

        margin-top:70px;

        min-height:auto;
    }


    .whatido-left,
    .whatido-right{
        justify-content:flex-start;

        text-align:left;
    }


    .whatido-left .whatido-content{
        order:2;
    }


    .whatido-left .whatido-number{
        order:1;
    }


    .whatido-center{
        order:2;
    }


    .whatido-left{
        order:1;
    }


    .whatido-right{
        order:3;
    }


    .whatido-content{
        max-width:500px;
    }

}


@media(max-width:600px){

    .whatido-intro h2{
        font-size:
            clamp(45px, 13vw, 70px);

        letter-spacing:-2.5px;
    }


    .whatido-intro p{
        font-size:14px;
    }


    .whatido-layout{
        gap:50px;

        margin-top:55px;
    }


    .whatido-content h3{
        font-size:32px;
    }


    .whatido-content p{
        font-size:14px;

        line-height:1.7;
    }


    .whatido-orbit{
        width:160px;
        height:160px;
    }


    .whatido-logo{
        width:72px;
        height:72px;

        font-size:16px;
    }


    .whatido-bottom{
        justify-content:flex-start;

        gap:14px;

        margin-top:60px;
    }


    .whatido-bottom span{
        padding:0;

        border-right:none;
    }

}


/* =========================================================
   STATS
   ========================================================= */

#stats{
    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0,0,0,.045),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #f8f8f8 0%,
            #ffffff 55%,
            #f5f5f5 100%
        );
}


/* =========================================================
   HEADING
   ========================================================= */

.stats-heading{
    position:relative;

    z-index:2;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:60px;

    margin-top:65px;
}


.stats-heading h2{
    margin:0;

    max-width:750px;

    font-size:
        clamp(50px, 7vw, 90px);

    line-height:.95;

    letter-spacing:-4px;

    font-weight:600;

    color:#111;
}


.stats-heading h2 span{
    color:#888;
}


.stats-heading p{
    max-width:340px;

    margin:0;

    font-size:15px;

    line-height:1.7;

    color:#777;
}


/* =========================================================
   STATS GRID
   ========================================================= */

.stats-grid{
    position:relative;

    z-index:2;

    display:grid;

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

    margin-top:100px;

    border-top:1px solid #dedede;

    border-bottom:1px solid #dedede;
}


/* =========================================================
   STAT ITEM
   ========================================================= */

.stat-item{
    min-height:390px;

    padding:
        50px 45px 45px;

    border-right:1px solid #dedede;

    transition:
        background .3s ease;
}


.stat-item:first-child{
    padding-left:0;
}


.stat-item:last-child{
    border-right:none;

    padding-right:0;
}


.stat-item:hover{
    background:
        rgba(0,0,0,.018);
}


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

.stat-number{
    display:flex;

    align-items:flex-start;

    color:#111;

    line-height:.85;

    letter-spacing:-5px;
}


.stat-number .counter{
    font-size:
        clamp(65px, 8vw, 110px);

    font-weight:600;
}


.stat-plus{
    margin-top:4px;

    font-size:
        clamp(35px, 4vw, 55px);

    font-weight:400;

    color:#999;
}


/* =========================================================
   STAT INFORMATION
   ========================================================= */

.stat-info{
    margin-top:65px;
}


.stat-label{
    display:block;

    margin-bottom:10px;

    font-size:10px;

    font-weight:700;

    letter-spacing:1.7px;

    color:#999;
}


.stat-info h3{
    margin:0;

    font-size:25px;

    font-weight:600;

    color:#111;
}


.stat-info p{
    max-width:300px;

    margin-top:15px;

    font-size:14px;

    line-height:1.75;

    color:#777;
}


/* =========================================================
   FOOTER LABELS
   ========================================================= */

.stats-footer{
    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    margin-top:25px;
}


.stats-footer span{
    font-size:9px;

    font-weight:700;

    letter-spacing:1.5px;

    color:#999;
}


/* =========================================================
   BACKGROUND DETAIL
   ========================================================= */

#stats::before{
    content:"";

    position:absolute;

    width:700px;
    height:700px;

    left:-350px;
    bottom:-420px;

    border-radius:50%;

    border:1px solid rgba(0,0,0,.035);

    box-shadow:
        0 0 0 90px rgba(0,0,0,.006),
        0 0 0 180px rgba(0,0,0,.004);

    pointer-events:none;
}


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

@media(max-width:800px){

    .stats-heading{
        display:block;

        margin-top:50px;
    }


    .stats-heading p{
        margin-top:25px;

        max-width:500px;
    }


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

        margin-top:60px;
    }


    .stat-item,
    .stat-item:first-child,
    .stat-item:last-child{
        min-height:auto;

        padding:
            45px 0;

        border-right:none;

        border-bottom:1px solid #dedede;
    }


    .stat-item:last-child{
        border-bottom:none;
    }


    .stat-number .counter{
        font-size:
            clamp(65px, 18vw, 100px);
    }


    .stat-info{
        margin-top:35px;
    }


    .stat-info p{
        max-width:450px;
    }


    .stats-footer{
        flex-wrap:wrap;

        gap:15px;

        margin-top:25px;
    }

}


@media(max-width:500px){

    .stats-heading h2{
        font-size:
            clamp(45px, 13vw, 70px);

        letter-spacing:-2.5px;
    }


    .stats-heading p{
        font-size:14px;
    }


    .stat-item,
    .stat-item:first-child,
    .stat-item:last-child{
        padding:38px 0;
    }


    .stat-info{
        margin-top:28px;
    }


    .stat-info h3{
        font-size:23px;
    }


    .stat-info p{
        font-size:14px;
    }

}

/* =========================================================
   ARCHIVE
   ========================================================= */

#campaigns{
    position:relative;

    overflow:hidden;

    background:#fafafa;
}


/* =========================================================
   INTRO
   ========================================================= */

.archive-intro{
    position:relative;

    z-index:2;

    display:grid;

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

    gap:100px;

    align-items:end;

    margin-top:65px;
}


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

.archive-title h2{
    margin:0;

    max-width:800px;

    font-size:
        clamp(50px, 7vw, 90px);

    line-height:.95;

    letter-spacing:-4px;

    font-weight:600;

    color:#111;
}


.archive-title h2 span{
    color:#888;
}


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

.archive-description{
    max-width:360px;

    padding-bottom:5px;
}


.archive-description p{
    margin:0;

    font-size:15px;

    line-height:1.75;

    color:#777;
}


/* =========================================================
   CAMPAIGN VIEWPORT
   ========================================================= */

.slider-wrapper{
    position:relative;

    width:100%;

    max-width:1500px;

    height:620px;

    margin:65px auto 0;

    overflow:hidden;
}


/* =========================================================
   ROTATING AREA
   ========================================================= */

.slider{
    position:absolute;

    width:1100px;
    height:560px;

    left:50%;
    top:50%;

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


.slide-track{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;
}


/* =========================================================
   CAMPAIGN CARDS
   ========================================================= */

.slide-track img{
    position:absolute;

    left:50%;

    top:50%;

    width:155px;

    height:155px;

    object-fit:cover;

    border-radius:18px;

    border:1px solid rgba(0,0,0,.07);

    background:#fff;

    box-shadow:
        0 18px 45px rgba(0,0,0,.07);

    user-select:none;

    pointer-events:auto;

    will-change:
        transform,
        opacity;

    transition:
        box-shadow .3s ease;
}


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

.slide-track img:hover{

    box-shadow:
        0 25px 55px rgba(0,0,0,.13);
}


/* =========================================================
   ARCHIVE META
   ========================================================= */

.archive-meta{
    position:relative;

    z-index:3;

    display:grid;

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

    border-top:1px solid #dedede;

    margin-top:0;
}


.archive-meta > div{
    min-height:80px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 25px;

    border-right:1px solid #dedede;
}


.archive-meta > div:first-child{
    padding-left:0;
}


.archive-meta > div:last-child{
    border-right:none;

    padding-right:0;
}


.archive-meta span{
    font-size:10px;

    font-weight:700;

    letter-spacing:1.5px;

    color:#aaa;
}


.archive-meta p{
    margin:0;

    font-size:13px;

    color:#555;
}


/* =========================================================
   SUBTLE BACKGROUND
   ========================================================= */

#campaigns::before{
    content:"";

    position:absolute;

    width:850px;

    height:850px;

    left:50%;

    top:58%;

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

    border-radius:50%;

    border:1px solid rgba(0,0,0,.025);

    box-shadow:
        0 0 0 90px rgba(0,0,0,.005),
        0 0 0 180px rgba(0,0,0,.003);

    pointer-events:none;
}

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

@media(max-width:520px){

    /* =====================================================
       NAVBAR
       ===================================================== */

    .logo span{
        display:inline !important;
    }

    .logo{
        display:flex;
        align-items:center;
        gap:0.5px;

        font-size:21px;
        font-weight:750;
    }

    .logo img{
        width:54px;
        height:54px;
        object-fit:contain;
    }


    /* =====================================================
       ARCHIVE SECTION
       ===================================================== */

    #campaigns{
        overflow:hidden;
        padding-bottom:40px;
    }


    /* =====================================================
       ARCHIVE INTRO
       ===================================================== */

    .archive-intro{
        grid-template-columns:1fr;
        gap:25px;
        margin-top:45px;
    }

    .archive-title h2{
        font-size:
            clamp(
                45px,
                13vw,
                68px
            );

        letter-spacing:-2.5px;
    }

    .archive-description{
        max-width:320px;
        padding-bottom:0;
    }

    .archive-description p{
        font-size:14px;
        line-height:1.7;
    }


    /* =====================================================
       ARCHIVE ROTATION
       ===================================================== */

    .slider-wrapper{
        width:100%;
        height:450px;

        margin-top:40px;

        /* Much smaller gap below the photos */
        margin-bottom:20px;

        overflow:hidden;
    }

    .slider{
        width:100%;
        height:360px;

        left:0;

        top:44%;

        transform:translateY(-50%);

        overflow:visible;
    }

    .slide-track{
        width:100%;
        height:100%;
    }


    /* =====================================================
       CAMPAIGN PHOTOS
       ===================================================== */

    .slide-track img{
        width:88px !important;
        height:88px !important;

        min-width:88px !important;
        min-height:88px !important;

        max-width:88px !important;
        max-height:88px !important;

        object-fit:cover;

        border-radius:14px;

        border:1px solid rgba(0,0,0,.06);

        box-shadow:
            0 10px 22px
            rgba(0,0,0,.07);
    }


    /* =====================================================
       CAMPAIGN / COLLABORATION / COMMUNITY BOX
       ===================================================== */

    .archive-footer{
        margin-top:10px;
        padding-top:20px;
    }

    .archive-footer span{
        font-size:8px;
        letter-spacing:1.4px;
    }


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

    .section-label{
        font-size:9px;
        letter-spacing:1.5px;
    }

}


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

@media(max-width:380px){

    /* =====================================================
       NAVBAR
       ===================================================== */

    .logo img{
        width:50px;
        height:50px;
    }

    .logo{
        font-size:20px;
        gap:0.5px;
    }


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

    .slider-wrapper{
        height:450px;
        margin-bottom:15px;
    }

    .slider{
        height:350px;
        top:42%;
    }


    /* =====================================================
       SMALLER CAMPAIGN PHOTOS
       ===================================================== */

    .slide-track img{
        width:82px !important;
        height:82px !important;

        min-width:82px !important;
        min-height:82px !important;

        max-width:82px !important;
        max-height:82px !important;

        border-radius:13px;
    }


    #campaigns{
        padding-bottom:35px;
    }

}

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

#partners {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(0, 0, 0, .035),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f7f7 55%,
            #ffffff 100%
        );
}


/* =========================================================
   INTRO
   ========================================================= */

#partners .partners-intro {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 100px;

    align-items: end;

    margin-top: 65px;
}


#partners .partners-intro h2 {

    margin: 0;

    max-width: 800px;

    font-size:
        clamp(50px, 7vw, 90px);

    line-height: .95;

    letter-spacing: -4px;

    font-weight: 600;

    color: #111;
}


#partners .partners-intro h2 span {

    color: #888;
}


#partners .partners-intro p {

    max-width: 350px;

    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    color: #777;
}


/* =========================================================
   PARTNER LIST
   ========================================================= */

#partners .partners-list {

    position: relative;

    z-index: 2;

    width: 100%;

    margin-top: 90px;

    border-top: 1px solid #dedede;
}


/* =========================================================
   PARTNER ROW
   ========================================================= */

#partners .partner-row {

    position: relative;

    display: flex;

    width: 100%;

    min-height: 125px;

    box-sizing: border-box;

    align-items: center;

    justify-content: space-between;

    margin: 0;

    padding: 0;

    border: 0;

    border-bottom: 1px solid #dedede;

    background: transparent;

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


#partners .partner-row:hover {

    padding-left: 20px;

    padding-right: 20px;

    background:
        rgba(0, 0, 0, .018);
}


/* =========================================================
   PARTNER MAIN
   ========================================================= */

#partners .partner-main {

    display: flex;

    align-items: center;

    gap: 35px;
}


#partners .partner-number {

    flex-shrink: 0;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #aaa;
}


/* =========================================================
   PARTNER NAME
   ========================================================= */

#partners .partner-info {

    display: block;
}


#partners .partner-info h3 {

    margin: 0;

    font-size:
        clamp(27px, 3vw, 40px);

    line-height: 1;

    letter-spacing: -1.5px;

    font-weight: 500;

    color: #111;
}


#partners .partner-type {

    display: block;

    margin-top: 10px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #999;
}


/* =========================================================
   ARROW
   ========================================================= */

#partners .partner-arrow {

    flex-shrink: 0;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #ddd;

    border-radius: 50%;

    font-size: 15px;

    color: #777;

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


#partners .partner-row:hover .partner-arrow {

    background: #111;

    color: #fff;

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


/* =========================================================
   FOOTER
   ========================================================= */

#partners .partners-footer {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    padding-top: 25px;
}


#partners .partners-footer span {

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #999;
}


/* =========================================================
   BACKGROUND DETAIL
   ========================================================= */

#partners::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    right: -350px;

    top: 40%;

    border-radius: 50%;

    border: 1px solid rgba(0, 0, 0, .025);

    box-shadow:
        0 0 0 90px rgba(0, 0, 0, .005),
        0 0 0 180px rgba(0, 0, 0, .003);

    pointer-events: none;
}

/* =========================================================
   PARTNER LOGOS
   ========================================================= */

#partners .partner-logo {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    overflow: hidden;

    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}

#partners .partner-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;

    opacity: .72;
    filter: grayscale(100%);

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


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

#partners .partner-row:hover .partner-logo img {

    opacity: 1;

    filter: grayscale(0%);

    transform:
        scale(1.12);
}


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

@media(max-width:520px){

    #partners .partner-logo {

        width: 38px;
        height: 38px;
    }

}


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

@media (max-width: 800px) {

    #partners .partners-intro {

        grid-template-columns: 1fr;

        gap: 30px;

        margin-top: 50px;
    }


    #partners .partners-intro p {

        max-width: 500px;
    }


    #partners .partners-list {

        margin-top: 60px;
    }


    #partners .partner-row {

        min-height: 110px;
    }


    #partners .partner-main {

        gap: 20px;
    }


    #partners .partner-row:hover {

        padding-left: 10px;

        padding-right: 10px;
    }


    #partners .partners-footer {

        flex-wrap: wrap;

        gap: 15px;
    }

}


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

@media (max-width: 520px) {

    #partners .partners-intro h2 {

        font-size:
            clamp(45px, 13vw, 70px);

        letter-spacing: -2.5px;
    }


    #partners .partners-intro p {

        font-size: 14px;
    }


    #partners .partners-list {

        margin-top: 55px;
    }


    #partners .partner-row {

        min-height: 100px;
    }


    #partners .partner-main {

        gap: 15px;
    }


    #partners .partner-number {

        font-size: 9px;
    }


    #partners .partner-info h3 {

        font-size: 22px;

        letter-spacing: -1px;
    }


    #partners .partner-type {

        margin-top: 8px;

        font-size: 8px;

        letter-spacing: 1.2px;
    }


    #partners .partner-arrow {

        width: 32px;

        height: 32px;

        font-size: 13px;
    }


    #partners .partners-footer {

        padding-top: 20px;
    }

}
/* =========================================================
   WORK WITH ME
   ========================================================= */

#contact{
    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(0,0,0,.055),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #f7f7f7 0%,
            #ffffff 100%
        );
}


/* =========================================================
   MAIN WORK CONTENT
   ========================================================= */

.work-content{
    position:relative;
    z-index:2;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:50px;

    margin-top:70px;

    padding-bottom:65px;

    border-bottom:1px solid #e3e3e3;
}


.work-copy{
    max-width:700px;
}


.work-copy h2{
    margin:0;

    font-size:
        clamp(48px, 7vw, 92px);

    line-height:.98;

    letter-spacing:-3px;

    font-weight:600;

    color:#111;
}


.work-copy p{
    max-width:500px;

    margin-top:28px;

    color:#777;

    font-size:17px;

    line-height:1.7;
}


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

.work-button{
    flex-shrink:0;

    display:flex;

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

    gap:12px;

    min-width:175px;

    padding:17px 25px;

    background:#111;

    color:#fff;

    text-decoration:none;

    border-radius:11px;

    font-size:14px;

    font-weight:600;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.work-button span{
    font-size:18px;
}


.work-button:hover{
    transform:translateY(-4px);

    background:#292929;

    box-shadow:
        0 14px 30px rgba(0,0,0,.12);
}


/* =========================================================
   CONTACT LINKS
   ========================================================= */

.contact-links{
    position:relative;
    z-index:2;

    display:grid;

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

    margin-top:10px;
}


.contact-link{
    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:30px 25px;

    border-right:1px solid #e3e3e3;

    color:#111;

    text-decoration:none;

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


.contact-link:first-child{
    padding-left:0;
}


.contact-link:last-child{
    border-right:none;

    padding-right:0;
}


.contact-link:hover{
    background:rgba(0,0,0,.025);

    padding-left:30px;
}


.contact-link:first-child:hover{
    padding-left:8px;
}


.contact-label{
    display:block;

    margin-bottom:7px;

    font-size:10px;

    font-weight:700;

    letter-spacing:1.5px;

    color:#999;
}


.contact-link strong{
    font-size:16px;

    font-weight:600;

    color:#222;
}


.contact-arrow{
    font-size:19px;

    color:#777;

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


.contact-link:hover .contact-arrow{
    transform:translate(3px,-3px);

    color:#111;
}


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

@media(max-width:700px){

    .work-content{
        display:block;

        margin-top:45px;

        padding-bottom:40px;
    }


    .work-copy h2{
        font-size:
            clamp(45px, 14vw, 70px);

        letter-spacing:-2px;
    }


    .work-copy p{
        margin-top:22px;

        font-size:15px;
    }


    .work-button{
        margin-top:30px;

        width:100%;

        box-sizing:border-box;
    }


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

        margin-top:0;
    }


    .contact-link,
    .contact-link:first-child,
    .contact-link:last-child{
        padding:22px 0;

        border-right:none;

        border-bottom:1px solid #e3e3e3;
    }


    .contact-link:last-child{
        border-bottom:none;
    }


    .contact-link:hover,
    .contact-link:first-child:hover{
        padding-left:8px;
    }

}

/* =========================================================
   FOOTER
   ========================================================= */

footer {

    position: relative;

    overflow: hidden;

    min-height: 620px;

    padding: 100px 0 0;

    background: #111;

    border-top: 1px solid #222;
}


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

footer > * {

    position: relative;

    z-index: 3;
}


.footer-content {

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 100px;

    margin-bottom: 90px;
}


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

.footer-title {

    max-width: 750px;
}


.footer-title h2 {

    margin: 0;

    font-size:
        clamp(55px, 7vw, 95px);

    line-height: .94;

    letter-spacing: -4px;

    font-weight: 600;

    color: #fff;
}


.footer-title h2 span {

    color: #aaa;
}


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

.footer-description {

    max-width: 360px;

    align-self: end;
}


.footer-description p {

    margin: 0;

    font-size: 15px;

    line-height: 1.8;

    color: #fff;
}


.footer-description::before {

    content:
        "TRADING. COMMUNITY. BUILDING.";

    display: block;

    margin-bottom: 18px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #aaa;
}


/* =========================================================
   FOOTER LINKS
   ========================================================= */

.footer-links {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 25px 0;

    border-top: 1px solid #333;

    border-bottom: 1px solid #333;
}


.footer-links a {

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-decoration: none;

    color: #aaa;

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


.footer-links a:hover {

    color: #fff;

    transform:
        translateY(-2px);
}


/* =========================================================
   FOOTER META
   ========================================================= */

.footer-meta {

    display: flex;

    justify-content: space-between;

    margin-top: 20px;
}


.footer-meta span {

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #666;
}


/* =========================================================
   GIANT OUTLOOK
   ========================================================= */

.footer-word {

    position: absolute;

    left: 50%;

    bottom: -5vw;

    transform:
        translateX(-50%);

    font-size:
        clamp(
            170px,
            23vw,
            440px
        );

    line-height: .72;

    font-weight: 700;

    letter-spacing: -.075em;

    white-space: nowrap;

    color: #fff;

    pointer-events: none;

    user-select: none;

    z-index: 1;
}


/* =========================================================
   SUBTLE BACKGROUND DETAIL
   ========================================================= */

footer::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    right: -330px;

    top: -280px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 90px rgba(255,255,255,.004),
        0 0 0 180px rgba(255,255,255,.003);

    pointer-events: none;

    z-index: 0;
}


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

@media(max-width:800px){

    footer {

        min-height: 520px;

        padding-top: 80px;
    }


    .footer-content {

        grid-template-columns: 1fr;

        gap: 40px;

        margin-bottom: 70px;
    }


    .footer-description {

        max-width: 500px;

        align-self: auto;
    }


    .footer-word {

        bottom: -3vw;

        font-size: 28vw;
    }

}


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

@media(max-width:520px){

    footer {

        min-height: 470px;

        padding-top: 65px;
    }


    .footer-content {
    margin-bottom: 120px;
}


.footer-links {
    position: relative;
    z-index: 4;

    margin-bottom: 35px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 25px 0;

    border-top: 1px solid #333;

    border-bottom: 1px solid #333;
}


.footer-meta {
    position: relative;
    z-index: 4;

    display: flex;

    justify-content: space-between;

    margin-top: 25px;

    padding-bottom: 45px;
}


.footer-word {
    position: absolute;

    left: 50%;

    bottom: -5vw;

    transform: translateX(-50%);

    font-size: clamp(
        170px,
        23vw,
        440px
    );

    line-height: .72;

    font-weight: 700;

    letter-spacing: -.075em;

    white-space: nowrap;

    color: #fff;

    pointer-events: none;

    user-select: none;

    z-index: 1;
}


    .footer-links a {

        font-size: 9px;
    }


    .footer-meta {

        margin-top: 18px;
    }


    .footer-meta span {

        font-size: 8px;
    }


    .footer-word {

        bottom: -2vw;

        font-size: 31vw;

        color: #fff;

        letter-spacing: -.06em;
    }

}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

    section{

        padding-left:5%;
        padding-right:5%;

    }


    .hero{

        padding-top:140px;

    }


    .bridge-container{

        grid-template-columns:1fr 1fr;

    }


    .bridge-center{

        grid-column:span 2;

        order:-1;

    }


    .stats-container,
    .partner-grid,
    .contact-grid{

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

    }

}


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

@media(max-width:768px){

    nav{

        height:64px;

        padding:
            0
            20px;

    }


    nav ul{

        gap:18px;

    }


    nav ul li a{

        font-size:12px;

    }


    .logo{

        font-size:16px;

    }


    .logo img{

        width:30px;
        height:30px;

    }


    section{

        padding:
            90px
            20px;

    }


    .hero{

        min-height:auto;

        padding:
            150px
            20px
            100px;

    }


    .hero h1{

        font-size:
            clamp(
                54px,
                15vw,
                90px
            );

        letter-spacing:-.065em;

        margin-bottom:30px;

    }


    .hero-description{

        font-size:16px;

    }


    .section-label{

        margin-bottom:25px;

    }


    .intro{

        display:block;

    }


    .intro .section-label{

        margin-bottom:35px;

    }


    .intro-content h2{

        font-size:
            clamp(
                42px,
                11vw,
                65px
            );

    }


    .bridge-container{

        grid-template-columns:1fr;

    }


    .bridge-center{

        grid-column:auto;

        order:-1;

    }


    .bridge-side,
    .brand-box{

        min-height:330px;

    }


    .stats-container,
    .partner-grid,
    .contact-grid{

        grid-template-columns:1fr;

    }


    .stat-card{

        min-height:270px;

    }


    .partner-card{

        min-height:470px;

    }


    .section-title h2,
    .stats h2,
    .about-title h2{

        font-size:
            clamp(
                42px,
                11vw,
                65px
            );

    }

}


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

@media(max-width:520px){

    nav{

        padding:
            0
            16px;

    }


    nav ul{

        gap:13px;

    }


    nav ul li a{

        font-size:11px;

    }


    .logo span{
    display:inline;
    }


    section{

        padding:
            80px
            18px;

    }


    .hero{

        padding:
            135px
            18px
            85px;

    }


    .eyebrow{

        font-size:9px;

        letter-spacing:2px;

        margin-bottom:24px;

    }


    .hero h1{

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

        line-height:.9;

        letter-spacing:-.065em;

    }


    .hero-description{

        font-size:15px;

        line-height:1.7;

    }


    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }


    .btn,
    .btn-outline{

        width:100%;

    }


    .section-title{

        margin-bottom:40px;

    }


    .section-title h2,
    .stats h2,
    .about-title h2{

        font-size:
            clamp(
                40px,
                13vw,
                58px
            );

        letter-spacing:-.06em;

    }


    .intro-content h2{

        font-size:
            clamp(
                40px,
                13vw,
                58px
            );

    }


    .bridge-side,
    .brand-box{

        min-height:300px;

        padding:28px;

    }


    .bridge-side h3{

        font-size:26px;

    }


    .stat-card{

        min-height:250px;

        padding:28px;

    }


    .stat-card h3{

        font-size:58px;

    }


    .slide-track img{

        width:230px;

        height:230px;

    }


    .partner-card{

        padding:28px;

        min-height:450px;

    }


    .contact-card{

        min-height:270px;

        padding:28px;

    }


    footer{

        padding:
            60px
            18px
            35px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}

/* =========================================================
   OUTLOOK
   Creative Section Backgrounds
   Archive + Navbar excluded
   ========================================================= */


/* =========================================================
   GENERAL SECTION BASE
   ========================================================= */

section:not(#campaigns){
    position:relative;
    overflow:hidden;
}


/* Keep content above background effects */

section:not(#campaigns) > *{
    position:relative;
    z-index:2;
}


/* =========================================================
   HERO / HOME
   Soft radial atmosphere
   ========================================================= */

#home{
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(0,0,0,.055),
            transparent 34%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(0,0,0,.035),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f7f7 50%,
            #ffffff 100%
        );
}


/* Large subtle circle */

#home::before{
    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-250px;
    top:-280px;

    border-radius:50%;

    border:1px solid rgba(0,0,0,.045);

    box-shadow:
        0 0 0 80px rgba(0,0,0,.012),
        0 0 0 160px rgba(0,0,0,.008);

    pointer-events:none;
}


/* =========================================================
   ABOUT
   Editorial grid
   ========================================================= */

#about{
    background:
        linear-gradient(
            rgba(0,0,0,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.025) 1px,
            transparent 1px
        ),
        #fafafa;

    background-size:
        65px 65px,
        65px 65px;
}


/* Fade the grid toward the edges */

#about::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 20%,
            rgba(255,255,255,.65) 80%
        );

    pointer-events:none;
}


/* =========================================================
   STATS
   Minimal architectural background
   ========================================================= */

#stats{
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(0,0,0,.045),
            transparent 55%
        ),
        #f5f5f5;
}


/* Huge background rings */

#stats::before{
    content:"";

    position:absolute;

    width:900px;
    height:900px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    border:
        1px solid rgba(0,0,0,.035);

    box-shadow:
        0 0 0 100px rgba(0,0,0,.009),
        0 0 0 200px rgba(0,0,0,.007);

    pointer-events:none;
}


/* =========================================================
   PARTNERS
   Soft diagonal editorial texture
   ========================================================= */

#partners{
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f7f7 45%,
            #ffffff 100%
        );
}


/* Diagonal lines */

#partners::before{
    content:"";

    position:absolute;

    inset:-50%;

    background:
        repeating-linear-gradient(
            135deg,
            transparent 0px,
            transparent 90px,
            rgba(0,0,0,.018) 91px,
            rgba(0,0,0,.018) 92px
        );

    transform:rotate(-4deg);

    pointer-events:none;
}


/* Soft center glow */

#partners::after{
    content:"";

    position:absolute;

    width:650px;
    height:650px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.8),
            transparent 68%
        );

    pointer-events:none;
}


/* =========================================================
   CONTACT / WORK WITH US
   Clean monochrome spotlight
   ========================================================= */

#contact{
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(0,0,0,.06),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #f7f7f7 0%,
            #ffffff 100%
        );
}


/* Decorative horizontal lines */

#contact::before{
    content:"";

    position:absolute;

    left:8%;
    right:8%;

    top:50%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,0,0,.08),
            transparent
        );

    pointer-events:none;
}


/* =========================================================
   FOOTER
   Subtle dark architectural treatment
   ========================================================= */

footer{
    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,.045),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #111111,
            #080808
        );
}


/* Footer grid */

footer::before{
    content:"";

    position:absolute;

    inset:0;

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

    background-size:
        60px 60px,
        60px 60px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black,
            transparent 75%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black,
            transparent 75%
        );

    pointer-events:none;
}


/* =========================================================
   MOBILE
   Keep backgrounds subtle on small screens
   ========================================================= */

@media(max-width:768px){

    #home::before{
        width:500px;
        height:500px;

        right:-250px;
        top:-180px;
    }


    #stats::before{
        width:600px;
        height:600px;
    }


    #partners::before{
        opacity:.55;
    }


    #about{
        background-size:
            45px 45px,
            45px 45px;
    }

}