/* =====================================================
   TOGETHER MAGAZINE
   FULL RESPONSIVE CSS
===================================================== */

:root{

    --charcoal:#1f1f1d;
    --cream:#f8f4ec;
    --terracotta:#c85d3a;
    --mustard:#e2a23b;
    --sage:#7a8f6a;
    --taupe:#d9cdbc;
    --soft:#eee6d9;

    --serif:"Playfair Display",Georgia,serif;
    --sans:"DM Sans",Arial,sans-serif;
    --script:"Caveat",cursive;

    --container:1320px;

}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    width:100%;
    min-height:100%;

    margin:0;

    overflow-x:hidden;

    background:var(--cream);

    color:var(--charcoal);

    font-family:var(--sans);

    font-size:16px;

    line-height:1.6;

}


body.no-scroll{
    overflow:hidden;
}


img{

    display:block;

    width:100%;

    max-width:100%;

}


a{

    color:inherit;

    text-decoration:none;

}


button,
input,
textarea{

    font:inherit;

}


button{

    cursor:pointer;

}


p{

    font-size:16px;

}


.container{

    width:min(
        var(--container),
        calc(100% - 70px)
    );

    margin-left:auto;
    margin-right:auto;

}


::selection{

    color:white;

    background:var(--terracotta);

}



/* =====================================================
   LOADER
===================================================== */

.loader{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:var(--charcoal);

    transition:
        opacity .6s ease,
        visibility .6s ease;

}


.loader.hide{

    opacity:0;

    visibility:hidden;

}


.loader-logo{

    color:var(--cream);

    font-family:var(--serif);

    font-size:42px;

    line-height:1;

    letter-spacing:3px;

}


.loader-logo small{

    display:block;

    margin-top:6px;

    color:var(--terracotta);

    font-family:var(--sans);

    font-size:10px;

    font-weight:700;

    letter-spacing:4px;

    text-align:center;

}


.loader-progress{

    width:180px;

    height:2px;

    margin-top:25px;

    background:#44413c;

}


.loader-progress span{

    display:block;

    width:0;

    height:100%;

    background:var(--mustard);

    animation:
        loaderProgress 1.2s ease forwards;

}


@keyframes loaderProgress{

    to{
        width:100%;
    }

}



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

.header{

    position:sticky;

    top:0;

    z-index:1000;

    width:100%;

    background:rgba(248,244,236,.96);

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

    backdrop-filter:blur(15px);

}


.header.scrolled{

    box-shadow:
        0 10px 30px
        rgba(31,31,29,.08);

}


.header-top{

    min-height:28px;

    padding:4px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

    color:#777067;

    font-size:10px;

    font-weight:700;

    line-height:1.2;

    letter-spacing:1.5px;

}


.header-top span:nth-child(2){

    color:var(--terracotta);

}


.header-main{

    width:min(
        var(--container),
        calc(100% - 70px)
    );

    min-height:80px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:25px;

}


.logo{

    flex-shrink:0;

    display:flex;

    align-items:center;

    gap:10px;

}


.logo-symbol{

    position:relative;

    width:35px;

    height:31px;

    flex-shrink:0;

}


.logo-symbol i{

    position:absolute;

    width:9px;

    height:9px;

    border-radius:50%;

}


.logo-symbol i:nth-child(1){

    top:0;

    left:13px;

    background:var(--terracotta);

}


.logo-symbol i:nth-child(2){

    top:10px;

    left:0;

    background:var(--mustard);

}


.logo-symbol i:nth-child(3){

    top:10px;

    right:0;

    background:var(--sage);

}


.logo-symbol i:nth-child(4){

    bottom:0;

    left:13px;

    background:var(--charcoal);

}


.logo-name{

    font-family:var(--serif);

    font-size:22px;

    line-height:1;

    letter-spacing:2px;

}


.logo-name small{

    display:block;

    margin-top:4px;

    color:var(--terracotta);

    font-family:var(--sans);

    font-size:8px;

    font-weight:700;

    letter-spacing:3px;

    text-align:center;

}


.nav{

    min-width:0;

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:19px;

}


.nav a{

    position:relative;

    padding:8px 0;

    white-space:nowrap;

    font-size:16px;

    font-weight:500;

    line-height:1.2;

}


.nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--terracotta);

    transition:.3s ease;

}


.nav a:hover::after,
.nav a.active::after{

    width:100%;

}


.header-actions{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}


.search-btn{

    width:35px;

    height:35px;

    display:grid;

    place-items:center;

    border:0;

    background:transparent;

    color:var(--charcoal);

    font-size:16px;

}


.issue-btn{

    display:flex;

    align-items:center;

    gap:9px;

    padding:11px 15px;

    color:white;

    background:var(--charcoal);

    font-size:16px;

    font-weight:600;

    line-height:1;

    white-space:nowrap;

    transition:.3s ease;

}


.issue-btn:hover{

    background:var(--terracotta);

}


.hamburger{

    display:none;

    width:38px;

    height:38px;

    border:0;

    background:transparent;

}


.hamburger span{

    display:block;

    width:25px;

    height:2px;

    margin:5px auto;

    background:var(--charcoal);

}



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

.mobile-menu{

    position:fixed;

    inset:0;

    z-index:5000;

    overflow-y:auto;

    background:var(--charcoal);

    color:var(--cream);

    transform:translateX(100%);

    transition:
        transform .5s
        cubic-bezier(.77,0,.18,1);

}


.mobile-menu.open{

    transform:translateX(0);

}


.mobile-close{

    position:absolute;

    top:22px;

    right:22px;

    width:45px;

    height:45px;

    display:grid;

    place-items:center;

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

    border-radius:50%;

    background:transparent;

    color:white;

    font-size:20px;

}


.mobile-inner{

    width:100%;

    min-height:100%;

    padding:80px 25px 25px;

    display:flex;

    flex-direction:column;

}


.mobile-logo{

    font-family:var(--serif);

    font-size:30px;

    line-height:1;

    letter-spacing:2px;

}


.mobile-logo small{

    display:block;

    margin-top:5px;

    color:var(--terracotta);

    font-family:var(--sans);

    font-size:8px;

    font-weight:700;

    letter-spacing:3px;

}


.mobile-caption{

    margin-top:12px;

    color:var(--mustard);

    font-size:16px;

    line-height:1.3;

}


.mobile-menu nav{

    width:100%;

    margin-top:35px;

}


.mobile-menu nav a{

    width:100%;

    min-width:0;

    display:grid;

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

    align-items:center;

    gap:12px;

    padding:14px 0;

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

    font-family:var(--sans);

    font-size:16px;

    font-weight:500;

    line-height:1.3;

}


.mobile-menu nav a span{

    color:#77736c;

    font-size:12px;

}


.mobile-menu nav a i{

    color:var(--terracotta);

    font-size:12px;

    text-align:right;

}


.mobile-bottom{

    margin-top:auto;

    padding-top:35px;

    color:#77736c;

    font-size:12px;

    letter-spacing:1.5px;

}



/* =====================================================
   SEARCH
===================================================== */

.search-overlay{

    position:fixed;

    inset:0;

    z-index:6000;

    display:flex;

    align-items:center;

    background:var(--cream);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

}


.search-overlay.open{

    opacity:1;

    visibility:visible;

}


.search-close{

    position:absolute;

    top:25px;

    right:25px;

    width:45px;

    height:45px;

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

    border-radius:50%;

    background:transparent;

    font-size:18px;

}


.search-container{

    width:min(
        900px,
        calc(100% - 50px)
    );

    margin:auto;

}


.search-container > span{

    color:var(--terracotta);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.search-container h2{

    margin-top:18px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.9;

}


.search-container h2 em{

    color:var(--terracotta);

}


.search-container form{

    margin-top:45px;

    display:flex;

    border-bottom:2px solid var(--charcoal);

}


.search-container input{

    width:100%;

    min-width:0;

    padding:15px 0;

    border:0;

    outline:0;

    background:transparent;

    font-size:18px;

}


.search-container button{

    width:55px;

    flex-shrink:0;

    border:0;

    background:transparent;

    font-size:18px;

}


#searchMessage{

    margin-top:15px;

    color:var(--terracotta);

    font-size:16px;

}



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

.hero{

    width:100%;

    padding-bottom:70px;

}


.hero-grid{

    width:min(
        var(--container),
        calc(100% - 70px)
    );

    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(350px,.78fr)
        minmax(0,1.22fr);

    gap:60px;

}


.hero-sidebar{

    position:sticky;

    top:105px;

    height:calc(100vh - 135px);

}


.hero-sticky{

    height:100%;

    padding-top:45px;

    display:flex;

    flex-direction:column;

}


.hero-topline{

    display:flex;

    justify-content:space-between;

    gap:15px;

    padding-bottom:15px;

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

}


.hero-topline span{

    font-size:16px;

    font-weight:700;

    line-height:1.3;

    letter-spacing:1px;

}


.hero-topline span:first-child{

    color:var(--terracotta);

}


.hero-number{

    margin-top:28px;

    color:#999188;

    font-size:16px;

    font-weight:700;

}


.hero-category{

    margin-top:18px;

    color:var(--terracotta);

    font-size:16px;

    font-weight:700;

    letter-spacing:1.5px;

}


.hero-sticky h1{

    max-width:600px;

    margin-top:15px;

    font-family:var(--serif);

    font-size:clamp(48px,4.5vw,70px);

    font-weight:400;

    line-height:.96;

    letter-spacing:-2px;

}


.hero-sticky h1 em{

    color:var(--terracotta);

}


.hero-sticky > p{

    max-width:480px;

    margin-top:25px;

    color:#716b63;

    font-size:16px;

    line-height:1.75;

}


.hero-button{

    width:max-content;

    max-width:100%;

    margin-top:25px;

    padding:7px 9px 7px 20px;

    display:flex;

    align-items:center;

    gap:14px;

    border-radius:50px;

    color:white;

    background:var(--terracotta);

    font-size:16px;

    font-weight:600;

    transition:.3s ease;

}


.hero-button span{

    width:30px;

    height:30px;

    flex-shrink:0;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:white;

    color:var(--terracotta);

}


.hero-button:hover{

    transform:translateY(-3px);

}


.hero-side-note{

    margin-top:auto;

    padding-top:20px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.hero-side-note > span{

    color:#837c73;

    font-size:16px;

    font-weight:700;

    letter-spacing:1px;

}


.hero-dots{

    display:flex;

    gap:6px;

}


.hero-dots i{

    width:7px;

    height:7px;

    display:block;

    border-radius:50%;

    background:var(--taupe);

}


.hero-dots i:first-child{

    background:var(--terracotta);

}


.hero-right{

    min-width:0;

    padding-top:45px;

}


.hero-story{

    position:relative;

    width:100%;

    min-width:0;

    overflow:hidden;

    margin-bottom:24px;

}


.hero-banner{

    min-height:500px;

    padding:25px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    color:var(--cream);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(226,162,59,.28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #242421,
            #4b463e
        );

}


.story-top{

    position:relative;

    z-index:3;

    display:flex;

    justify-content:space-between;

    gap:15px;

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

    font-size:16px;

    font-weight:700;

    line-height:1.3;

}


.feature-decoration{

    position:absolute;

    right:8%;

    top:15%;

    display:flex;

    align-items:flex-end;

    gap:12px;

    opacity:.6;

}


.feature-decoration div{

    width:45px;

    height:160px;

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

    transform:skew(-25deg);

}


.feature-decoration div:nth-child(2){

    height:230px;

}


.feature-decoration div:nth-child(3){

    height:110px;

}


.banner-content{

    position:relative;

    z-index:3;

    max-width:650px;

    margin-top:auto;

    padding:80px 0 55px;

}


.banner-content small{

    color:var(--mustard);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.banner-content h2{

    margin-top:15px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.93;

    letter-spacing:-2px;

}


.banner-content h2 em{

    color:var(--mustard);

}


.banner-content p{

    max-width:520px;

    margin-top:20px;

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

    font-size:16px;

    line-height:1.7;

}


.banner-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    color:var(--mustard);

    font-size:16px;

    font-weight:700;

}


.story-bottom{

    position:relative;

    z-index:3;

    padding-top:15px;

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

    display:flex;

    justify-content:space-between;

    gap:15px;

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

    font-size:16px;

    line-height:1.3;

}



/* IMAGE STORY */

.image-story{

    min-height:500px;

}


.image-story-photo{

    position:absolute;

    inset:0;

}


.image-story-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}


.image-story:hover
.image-story-photo img{

    transform:scale(1.05);

}


.image-story-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.82),
            rgba(0,0,0,.04)
        );

}


.image-story-content{

    position:relative;

    z-index:2;

    min-height:500px;

    padding:25px;

    color:white;

    display:flex;

    flex-direction:column;

}


.story-bottom-content{

    margin-top:auto;

    max-width:600px;

}


.story-bottom-content small{

    color:var(--mustard);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.story-bottom-content h2{

    margin-top:10px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.94;

}


.story-bottom-content h2 em{

    color:var(--mustard);

}


.story-bottom-content p{

    max-width:480px;

    margin-top:17px;

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

    font-size:16px;

    line-height:1.7;

}


.story-bottom-content a{

    display:inline-flex;

    gap:10px;

    align-items:center;

    margin-top:23px;

    color:white;

    font-size:16px;

    font-weight:700;

}



/* SPLIT STORY */

.split-story{

    display:grid;

    grid-template-columns:1fr 1fr;

    min-height:440px;

    background:var(--soft);

}


.split-story-image{

    min-width:0;

    overflow:hidden;

}


.split-story-image img{

    width:100%;

    height:100%;

    min-height:440px;

    object-fit:cover;

    transition:transform .8s ease;

}


.split-story:hover
.split-story-image img{

    transform:scale(1.05);

}


.split-story-copy{

    position:relative;

    min-width:0;

    padding:45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.split-story-copy > span{

    color:var(--terracotta);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.split-story-copy h2{

    margin-top:15px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.98;

}


.split-story-copy h2 em{

    color:var(--terracotta);

}


.split-story-copy p{

    max-width:420px;

    margin-top:20px;

    color:#706a62;

    font-size:16px;

    line-height:1.7;

}


.split-story-copy a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:23px;

    font-size:16px;

    font-weight:700;

}


.split-story-copy strong{

    position:absolute;

    right:30px;

    bottom:20px;

    color:#d2c7b8;

    font-family:var(--serif);

    font-size:75px;

    font-weight:400;

}



/* IDEA STORY */

.idea-story{

    min-height:440px;

    background:var(--mustard);

}


.idea-lines{

    position:absolute;

    inset:0;

    opacity:.2;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 55px,
            rgba(31,31,29,.3) 56px 57px
        );

}


.idea-content{

    position:relative;

    z-index:2;

    max-width:650px;

    padding:60px;

}


.idea-content > span{

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.idea-content h2{

    margin-top:15px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.93;

}


.idea-content h2 em{

    color:var(--charcoal);

}


.idea-content p{

    max-width:450px;

    margin-top:20px;

    color:#574e43;

    font-size:16px;

    line-height:1.7;

}


.idea-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:24px;

    font-size:16px;

    font-weight:700;

}


.idea-number{

    position:absolute;

    right:35px;

    bottom:20px;

    color:rgba(31,31,29,.13);

    font-family:var(--serif);

    font-size:110px;

}



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

.about{

    padding:120px 0;

}


.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

}


.about-title > span,
.section-title span,
.voices-head span{

    color:var(--terracotta);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.about-title h2,
.section-title h2,
.voices-head h2{

    margin-top:16px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.96;

}


.about-title h2 em,
.section-title h2 em,
.voices-head h2 em{

    color:var(--terracotta);

}


.about-copy{

    padding-top:8px;

}


.about-copy p{

    margin-bottom:20px;

    color:#716b63;

    font-size:16px;

    line-height:1.8;

}


.about-copy .about-lead{

    color:var(--charcoal);

    font-family:var(--serif);

    font-size:24px;

    line-height:1.4;

}


.outline-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:15px;

    padding:13px 20px;

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

    font-size:16px;

    font-weight:600;

    transition:.3s ease;

}


.outline-btn:hover{

    color:white;

    background:var(--charcoal);

}



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

.story-section{

    padding:120px 0;

    background:var(--soft);

}


.story-heading{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:end;

}


.story-heading > div > span{

    color:var(--terracotta);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.story-heading h2{

    margin-top:16px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.93;

}


.story-heading h2 em{

    color:var(--terracotta);

}


.story-heading p{

    max-width:480px;

    color:#746e65;

    font-size:16px;

    line-height:1.8;

}


.story-frame{

    margin-top:55px;

}


.story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}


.story-card{

    position:relative;

    min-width:0;

    min-height:520px;

    overflow:hidden;

    color:white;

}


.story-card > img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}


.story-card:hover > img{

    transform:scale(1.06);

}


.story-card-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            rgba(0,0,0,.05)
        );

}


.story-normal,
.story-hover{

    position:absolute;

    inset:0;

    z-index:2;

    padding:35px;

}


.story-normal{

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    transition:.4s ease;

}


.story-normal span,
.story-hover span{

    color:var(--mustard);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.story-normal h3{

    margin-top:12px;

    font-family:var(--serif);

    font-size:43px;

    font-weight:400;

    line-height:.96;

}


.story-normal h3 em{

    color:var(--mustard);

}


.story-normal small{

    margin-top:25px;

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

    font-size:16px;

}


.story-hover{

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:rgba(31,31,29,.94);

    opacity:0;

    transform:translateY(20px);

    transition:.5s ease;

}


.story-card:hover .story-hover{

    opacity:1;

    transform:translateY(0);

}


.story-hover h3{

    margin-top:15px;

    font-family:var(--serif);

    font-size:46px;

    font-weight:400;

    line-height:.94;

}


.story-hover h3 em{

    color:var(--terracotta);

}


.story-hover p{

    max-width:400px;

    margin-top:20px;

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

    font-size:16px;

    line-height:1.7;

}


.story-hover a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    color:var(--mustard);

    font-size:16px;

    font-weight:700;

}


.story-card-number{

    position:absolute;

    z-index:3;

    top:25px;

    right:30px;

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

    font-family:var(--serif);

    font-size:60px;

    font-weight:400;

}



/* =====================================================
   VOICES
===================================================== */

.voices{

    padding:120px 0;

}


.voices-head{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:end;

}


.voices-head p{

    max-width:480px;

    color:#756f67;

    font-size:16px;

    line-height:1.8;

}


.voices-stage{

    margin-top:55px;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:20px;

}


.voices-photo{

    position:relative;

    min-width:0;

    min-height:580px;

    overflow:hidden;

    color:white;

}


.voices-photo img{

    width:100%;

    height:100%;

    min-height:580px;

    object-fit:cover;

    transition:transform .8s ease;

}


.voices-photo:hover img{

    transform:scale(1.06);

}


.photo-gradient{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.82),
            transparent 60%
        );

}


.photo-top{

    position:absolute;

    top:25px;

    left:30px;

    right:30px;

    z-index:2;

    display:flex;

    justify-content:space-between;

    font-size:16px;

    font-weight:700;

}


.photo-bottom{

    position:absolute;

    left:30px;

    right:30px;

    bottom:30px;

    z-index:2;

}


.photo-bottom span{

    color:var(--mustard);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.photo-bottom h3{

    margin-top:10px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.9;

}


.photo-bottom h3 em{

    color:var(--mustard);

}


.photo-arrow{

    position:absolute;

    right:30px;

    bottom:30px;

    width:45px;

    height:45px;

    z-index:3;

    display:grid;

    place-items:center;

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

    border-radius:50%;

}


.voices-idea{

    position:relative;

    min-width:0;

    min-height:580px;

    overflow:hidden;

    background:var(--charcoal);

    color:var(--cream);

}


.idea-grid{

    position:absolute;

    inset:0;

    opacity:.12;

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

    background-size:50px 50px;

}


.idea-top{

    position:absolute;

    top:25px;

    left:30px;

    right:30px;

    display:flex;

    justify-content:space-between;

    color:#888078;

    font-size:16px;

    font-weight:700;

}


.idea-copy{

    position:absolute;

    left:45px;

    right:45px;

    bottom:55px;

}


.idea-copy small{

    color:var(--mustard);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.idea-copy h3{

    margin-top:14px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.94;

}


.idea-copy h3 em{

    color:var(--terracotta);

}


.idea-copy p{

    max-width:420px;

    margin-top:20px;

    color:#99938d;

    font-size:16px;

    line-height:1.7;

}


.idea-copy a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:23px;

    color:var(--mustard);

    font-size:16px;

    font-weight:700;

}


.idea-circle{

    position:absolute;

    right:40px;

    top:50%;

    width:90px;

    height:90px;

    display:grid;

    place-items:center;

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

    border-radius:50%;

    transform:translateY(-50%);

}


.idea-circle span{

    color:var(--terracotta);

    font-size:30px;

}



/* =====================================================
   TEAM
===================================================== */

.team{

    padding:120px 0;

    background:var(--soft);

}


.section-title{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:end;

}


.section-title p{

    max-width:480px;

    color:#746e66;

    font-size:16px;

    line-height:1.8;

}


.team-grid{

    margin-top:55px;

    display:grid;

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

    gap:20px;

}


.team-card{

    min-width:0;

    transition:.45s ease;

}


.team-card:hover{

    transform:translateY(-8px);

}


.team-image{

    position:relative;

    height:430px;

    overflow:hidden;

}


.team-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}


.team-card:hover .team-image img{

    transform:scale(1.05);

}


.team-image span{

    position:absolute;

    right:18px;

    bottom:15px;

    color:white;

    font-family:var(--serif);

    font-size:35px;

}


.team-card > small{

    display:block;

    margin-top:18px;

    color:var(--terracotta);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.team-card h3{

    margin-top:6px;

    font-family:var(--serif);

    font-size:31px;

    font-weight:400;

    line-height:1.2;

}


.team-card p{

    max-width:350px;

    margin-top:8px;

    color:#756f67;

    font-size:16px;

    line-height:1.7;

}



/* =====================================================
   COLLABORATION
===================================================== */

.collaboration{

    position:relative;

    overflow:hidden;

    padding:125px 0 55px;

    color:var(--cream);

    background:var(--charcoal);

}


.collab-watermark{

    position:absolute;

    left:-4%;

    bottom:-35px;

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

    font-family:var(--serif);

    font-size:clamp(150px,22vw,330px);

    line-height:.65;

    white-space:nowrap;

    pointer-events:none;

    user-select:none;

}


.collaboration::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-260px;

    right:-260px;

    border:1px solid rgba(226,162,59,.15);

    border-radius:50%;

}


.collaboration::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    left:-180px;

    bottom:-190px;

    border:1px solid rgba(200,93,58,.16);

    border-radius:50%;

}


.collaboration-inner{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        .78fr
        1.22fr;

    gap:100px;

}


.collab-left{

    min-width:0;

    min-height:690px;

    display:flex;

    flex-direction:column;

}


.collab-meta{

    display:flex;

    align-items:center;

    gap:12px;

    color:#77736c;

    font-size:16px;

    font-weight:700;

    letter-spacing:1px;

}


.collab-meta span:first-child{

    color:var(--mustard);

}


.collab-meta i{

    width:40px;

    height:1px;

    background:#55514c;

}


.collab-label{

    display:block;

    margin-top:85px;

    color:var(--terracotta);

    font-size:16px;

    font-weight:700;

    letter-spacing:2.5px;

}


.collab-left h2{

    max-width:600px;

    margin-top:20px;

    font-family:var(--serif);

    font-size:clamp(55px,5vw,78px);

    font-weight:400;

    line-height:.91;

    letter-spacing:-2px;

}


.collab-left h2 em{

    color:var(--mustard);

}


.collab-small{

    max-width:350px;

    margin-top:auto;

    padding-top:30px;

    color:#77736c;

    font-family:var(--serif);

    font-size:22px;

    line-height:1.4;

}


.collab-right{

    min-width:0;

    padding-top:55px;

}


.collab-introduction{

    max-width:720px;

}


.collab-lead{

    color:var(--cream);

    font-family:var(--serif);

    font-size:25px;

    line-height:1.4;

}


.collab-introduction > p:not(.collab-lead){

    margin-top:22px;

    color:#99938b;

    font-size:16px;

    line-height:1.85;

}


.collab-list{

    margin-top:50px;

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

}


.collab-item{

    position:relative;

    min-width:0;

    display:grid;

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

    gap:20px;

    align-items:center;

    padding:25px 0;

    border-bottom:1px solid rgba(255,255,255,.14);

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

}


.collab-item:hover{

    padding-left:12px;

    padding-right:12px;

}


.collab-item-number{

    color:var(--terracotta);

    font-family:var(--serif);

    font-size:24px;

}


.collab-item-text{

    min-width:0;

}


.collab-item-text > span{

    color:#77736c;

    font-size:16px;

    font-weight:700;

    letter-spacing:1.5px;

}


.collab-item-text h3{

    margin-top:5px;

    color:var(--cream);

    font-family:var(--serif);

    font-size:29px;

    font-weight:400;

    line-height:1.2;

    transition:.3s ease;

}


.collab-item:hover
.collab-item-text h3{

    color:var(--mustard);

}


.collab-item-text p{

    max-width:530px;

    margin-top:7px;

    color:#89837b;

    font-size:16px;

    line-height:1.6;

}


.collab-item-arrow{

    width:40px;

    height:40px;

    display:grid;

    place-items:center;

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

    border-radius:50%;

    color:var(--mustard);

    transition:.35s ease;

}


.collab-item:hover
.collab-item-arrow{

    color:var(--charcoal);

    background:var(--mustard);

    border-color:var(--mustard);

    transform:rotate(45deg);

}


.collab-contact{

    margin-top:45px;

    padding-top:28px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

}


.collab-contact > div{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:7px;

}


.collab-contact > div > span{

    color:#77736c;

    font-size:16px;

    font-weight:700;

    letter-spacing:1.5px;

}


.collab-contact > div > a{

    max-width:100%;

    color:var(--cream);

    font-family:var(--serif);

    font-size:20px;

    overflow-wrap:anywhere;

}


.collab-button{

    flex-shrink:0;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 20px;

    color:var(--charcoal);

    background:var(--mustard);

    font-size:16px;

    font-weight:700;

    line-height:1.2;

    transition:.3s ease;

}


.collab-button:hover{

    color:white;

    background:var(--terracotta);

    transform:translateY(-3px);

}


.collab-footer-line{

    position:relative;

    z-index:2;

    width:min(
        var(--container),
        calc(100% - 70px)
    );

    margin:100px auto 0;

    padding-top:18px;

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

    display:flex;

    justify-content:space-between;

    gap:15px;

    color:#605c56;

    font-size:16px;

    font-weight:700;

    letter-spacing:1.5px;

}



/* =====================================================
   MISSION
===================================================== */

.mission{

    position:relative;

    min-height:650px;

    display:grid;

    place-items:center;

    overflow:hidden;

    background:var(--terracotta);

}


.mission-ring{

    position:absolute;

    width:600px;

    height:600px;

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

    border-radius:50%;

}


.mission-ring::before{

    content:"";

    position:absolute;

    inset:45px;

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

    border-radius:50%;

}


.mission-content{

    position:relative;

    z-index:2;

    width:min(
        850px,
        calc(100% - 50px)
    );

    text-align:center;

    color:white;

}


.mission-content > span{

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.mission-content h2{

    margin-top:20px;

    font-family:var(--serif);

    font-size:clamp(50px,6vw,85px);

    font-weight:400;

    line-height:.94;

}


.mission-content h2 em{

    color:var(--mustard);

}


.mission-content p{

    max-width:650px;

    margin:25px auto 0;

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

    font-size:16px;

    line-height:1.8;

}


.handwritten{

    margin-top:30px;

    color:var(--mustard);

    font-family:var(--script);

    font-size:58px;

}



/* =====================================================
   GRANTS
===================================================== */

.grants{

    padding:120px 0;

}


.grant-grid{

    margin-top:55px;

    display:grid;

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

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

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

}


.grant-card{

    min-width:0;

    min-height:340px;

    padding:30px;

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

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

    transition:.4s ease;

}


.grant-card:hover{

    color:white;

    background:var(--charcoal);

    transform:translateY(-5px);

}


.grant-card > span{

    color:var(--terracotta);

    font-family:var(--serif);

    font-size:26px;

}


.grant-card h3{

    margin-top:65px;

    font-family:var(--serif);

    font-size:30px;

    font-weight:400;

}


.grant-card p{

    margin-top:12px;

    color:#777168;

    font-size:16px;

    line-height:1.7;

}


.grant-card:hover p{

    color:#aaa39b;

}


.grant-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    font-size:16px;

    font-weight:700;

}



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

.contact{

    padding:120px 0;

    background:var(--soft);

}


.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

}


.contact-copy > span{

    color:var(--terracotta);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.contact-copy h2{

    margin-top:17px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.94;

}


.contact-copy h2 em{

    color:var(--terracotta);

}


.contact-copy p{

    max-width:500px;

    margin-top:22px;

    color:#756f67;

    font-size:16px;

    line-height:1.8;

}


.contact-copy > a{

    display:inline-block;

    max-width:100%;

    margin-top:20px;

    color:var(--terracotta);

    font-family:var(--serif);

    font-size:20px;

    overflow-wrap:anywhere;

}


.contact-form{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:22px;

}


.contact-form label{

    color:#777168;

    font-size:16px;

    font-weight:700;

    letter-spacing:1.5px;

}


.contact-form input,
.contact-form textarea{

    display:block;

    width:100%;

    min-width:0;

    margin-top:8px;

    padding:14px 0;

    border:0;

    border-bottom:1px solid #c9bfb1;

    outline:0;

    resize:vertical;

    background:transparent;

    color:var(--charcoal);

    font-size:16px;

}


.contact-form input:focus,
.contact-form textarea:focus{

    border-color:var(--terracotta);

}


.contact-form button{

    width:max-content;

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px 20px;

    border:0;

    color:white;

    background:var(--charcoal);

    font-size:16px;

    font-weight:700;

}


.contact-form button:hover{

    background:var(--terracotta);

}


#contactMessage{

    color:var(--sage);

    font-size:16px;

}



/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter{

    padding:100px 20px;

    background:var(--mustard);

}


.newsletter-inner{

    width:min(
        850px,
        100%
    );

    margin:auto;

    text-align:center;

}


.newsletter-inner > span{

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.newsletter-inner h2{

    margin-top:16px;

    font-family:var(--serif);

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

    font-weight:400;

    line-height:.95;

}


.newsletter-inner h2 em{

    color:var(--terracotta);

}


.newsletter-inner > p{

    max-width:550px;

    margin:18px auto 0;

    color:#625748;

    font-size:16px;

    line-height:1.7;

}


.newsletter-inner form{

    max-width:600px;

    margin:30px auto 0;

    display:flex;

    border-bottom:2px solid var(--charcoal);

}


.newsletter-inner input{

    width:100%;

    min-width:0;

    padding:15px 0;

    border:0;

    outline:0;

    background:transparent;

    font-size:16px;

}


.newsletter-inner button{

    flex-shrink:0;

    padding:0 10px;

    border:0;

    background:transparent;

    font-size:16px;

    font-weight:700;

}


#newsletterMessage{

    color:var(--charcoal);

}



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

.footer{

    padding:75px 0 25px;

    color:var(--cream);

    background:var(--charcoal);

}


.footer-main{

    width:min(
        var(--container),
        calc(100% - 70px)
    );

    margin:auto;

    display:grid;

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

    gap:100px;

}


.footer-mini-symbol{

    display:flex;

    gap:5px;

    margin-bottom:16px;

}


.footer-mini-symbol i{

    width:8px;

    height:8px;

    border-radius:50%;

}


.footer-mini-symbol i:nth-child(1){

    background:var(--terracotta);

}


.footer-mini-symbol i:nth-child(2){

    background:var(--mustard);

}


.footer-mini-symbol i:nth-child(3){

    background:var(--sage);

}


.footer-mini-symbol i:nth-child(4){

    background:var(--taupe);

}


.footer-logo{

    font-family:var(--serif);

    font-size:30px;

    letter-spacing:2px;

}


.footer-logo small{

    display:block;

    margin-top:3px;

    color:var(--terracotta);

    font-family:var(--sans);

    font-size:8px;

    font-weight:700;

    letter-spacing:3px;

}


.footer-brand > p{

    margin-top:12px;

    color:#817b73;

    font-size:16px;

}


.footer-issue{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:30px;

    color:#66625c;

    font-size:16px;

    font-weight:700;

}


.footer-nav{

    display:grid;

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

    gap:40px;

}


.footer-nav > div{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.footer-nav span{

    margin-bottom:18px;

    color:var(--terracotta);

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

}


.footer-nav a{

    margin-bottom:10px;

    color:#918b83;

    font-size:16px;

    line-height:1.5;

    transition:.25s ease;

}


.footer-nav a:hover{

    color:var(--cream);

    transform:translateX(4px);

}


.footer-word{

    width:min(
        var(--container),
        calc(100% - 70px)
    );

    margin:75px auto 35px;

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

    font-family:var(--serif);

    font-size:clamp(100px,19vw,290px);

    line-height:.65;

    white-space:nowrap;

}


.footer-bottom{

    width:min(
        var(--container),
        calc(100% - 70px)
    );

    margin:auto;

    padding-top:18px;

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    color:#66615a;

    font-size:16px;

}


#backTop{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:grid;

    place-items:center;

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

    border-radius:50%;

    background:transparent;

    color:var(--cream);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.3s ease;

}


#backTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



/* =====================================================
   REVEAL
===================================================== */

.reveal{

    opacity:0;

    transform:translateY(25px);

    transition:
        opacity .75s ease,
        transform .75s ease;

}


.reveal.show{

    opacity:1;

    transform:translateY(0);

}



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

@media(max-width:1200px){

    .nav{

        gap:13px;

    }


    .nav a{

        font-size:14px;

    }


    .issue-btn{

        display:none;

    }


    .hero-grid{

        gap:40px;

    }


    .collaboration-inner{

        gap:55px;

    }

}



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

@media(max-width:900px){

    .header-top{

        display:none;

    }


    .header-main{

        width:calc(100% - 36px);

        min-height:70px;

    }


    .nav{

        display:none;

    }


    .header-actions{

        margin-left:auto;

    }


    .hamburger{

        display:block;

    }


    .hero{

        padding-bottom:50px;

    }


    .hero-grid{

        width:calc(100% - 36px);

        display:block;

    }


    .hero-sidebar{

        position:relative;

        top:auto;

        height:auto;

    }


    .hero-sticky{

        height:auto;

        padding:40px 0 35px;

    }


    .hero-sticky h1{

        max-width:700px;

    }


    .hero-side-note{

        margin-top:35px;

    }


    .hero-right{

        padding-top:0;

    }


    .about,
    .story-section,
    .voices,
    .team,
    .grants,
    .contact{

        padding:90px 0;

    }


    .about-grid,
    .story-heading,
    .voices-head,
    .section-title,
    .contact-grid{

        grid-template-columns:1fr;

        gap:35px;

    }


    .story-grid{

        grid-template-columns:1fr;

    }


    .voices-stage{

        grid-template-columns:1fr;

    }


    .team-grid{

        grid-template-columns:1fr 1fr;

    }


    .team-image{

        height:400px;

    }


    .grant-grid{

        grid-template-columns:1fr 1fr;

    }


    /* COLLAB */

    .collaboration{

        padding:90px 0 45px;

    }


    .collaboration-inner{

        grid-template-columns:1fr;

        gap:35px;

    }


    .collab-left{

        min-height:auto;

    }


    .collab-label{

        margin-top:50px;

    }


    .collab-small{

        margin-top:35px;

    }


    .collab-right{

        padding-top:0;

    }


    .collab-footer-line{

        width:calc(100% - 36px);

        margin-top:65px;

        flex-wrap:wrap;

        justify-content:flex-start;

    }


    .mission{

        min-height:560px;

    }


    .footer-main{

        width:calc(100% - 36px);

        grid-template-columns:1fr;

        gap:50px;

    }


    .footer-word{

        width:calc(100% - 36px);

        font-size:130px;

    }


    .footer-bottom{

        width:calc(100% - 36px);

    }

}



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

@media(max-width:600px){

    body{

        font-size:16px;

    }


    p{

        font-size:16px;

    }


    .container{

        width:calc(100% - 30px);

    }


    .header-main{

        width:calc(100% - 30px);

        min-height:65px;

    }


    .logo-name{

        font-size:18px;

    }


    .logo-symbol{

        transform:scale(.9);

        transform-origin:left center;

    }


    .header-actions{

        gap:5px;

    }


    .search-btn{

        width:35px;

    }


    .mobile-inner{

        padding-left:20px;

        padding-right:20px;

    }


    .mobile-menu nav a{

        font-size:16px;

    }


    .hero-grid{

        width:calc(100% - 30px);

    }


    .hero-sticky{

        padding-top:32px;

    }


    .hero-topline{

        align-items:flex-start;

    }


    .hero-topline span{

        font-size:12px;

    }


    .hero-number,
    .hero-category{

        font-size:14px;

    }


    .hero-sticky h1{

        margin-top:12px;

        font-size:46px;

        line-height:.97;

        letter-spacing:-1px;

    }


    .hero-sticky > p{

        font-size:16px;

        line-height:1.7;

    }


    .hero-button{

        font-size:16px;

    }


    .hero-side-note > span{

        font-size:12px;

    }


    .hero-banner{

        min-height:450px;

        padding:20px;

    }


    .story-top{

        font-size:12px;

    }


    .banner-content{

        padding:50px 0 40px;

    }


    .banner-content small{

        font-size:14px;

    }


    .banner-content h2{

        font-size:45px;

        letter-spacing:-1px;

    }


    .banner-content p{

        font-size:16px;

    }


    .banner-content a{

        font-size:16px;

    }


    .story-bottom{

        font-size:12px;

    }


    .image-story,
    .image-story-content{

        min-height:450px;

    }


    .image-story-content{

        padding:20px;

    }


    .story-bottom-content small{

        font-size:14px;

    }


    .story-bottom-content h2{

        font-size:43px;

    }


    .story-bottom-content p{

        font-size:16px;

    }


    .split-story{

        grid-template-columns:1fr;

    }


    .split-story-image{

        height:280px;

    }


    .split-story-image img{

        min-height:280px;

    }


    .split-story-copy{

        min-height:390px;

        padding:30px;

    }


    .split-story-copy > span{

        font-size:14px;

    }


    .split-story-copy h2{

        font-size:40px;

    }


    .split-story-copy p{

        font-size:16px;

    }


    .idea-story{

        min-height:410px;

    }


    .idea-content{

        padding:35px;

    }


    .idea-content > span{

        font-size:13px;

    }


    .idea-content h2{

        font-size:43px;

    }


    .idea-content p{

        font-size:16px;

    }


    .idea-number{

        font-size:80px;

    }


    .about,
    .story-section,
    .voices,
    .team,
    .grants,
    .contact{

        padding:75px 0;

    }


    .about-title > span,
    .section-title span,
    .voices-head span{

        font-size:14px;

    }


    .about-title h2,
    .section-title h2,
    .voices-head h2{

        font-size:43px;

    }


    .about-copy .about-lead{

        font-size:22px;

    }


    .about-copy p{

        font-size:16px;

    }


    .story-heading h2{

        font-size:45px;

    }


    .story-heading p{

        font-size:16px;

    }


    .story-card{

        min-height:470px;

    }


    .story-normal,
    .story-hover{

        padding:25px;

    }


    .story-normal span,
    .story-hover span{

        font-size:13px;

    }


    .story-normal h3{

        font-size:37px;

    }


    .story-hover h3{

        font-size:39px;

    }


    .story-normal small{

        font-size:13px;

    }


    .story-hover p{

        font-size:16px;

    }


    .voices-photo,
    .voices-photo img,
    .voices-idea{

        min-height:450px;

    }


    .photo-top{

        left:20px;

        right:20px;

        font-size:13px;

    }


    .photo-bottom{

        left:20px;

        right:20px;

        bottom:25px;

    }


    .photo-bottom span{

        font-size:13px;

    }


    .photo-bottom h3{

        font-size:52px;

    }


    .photo-arrow{

        right:20px;

        bottom:25px;

    }


    .idea-copy{

        left:30px;

        right:30px;

        bottom:35px;

    }


    .idea-copy small{

        font-size:13px;

    }


    .idea-copy h3{

        font-size:41px;

    }


    .idea-copy p{

        font-size:16px;

    }


    .team-grid{

        grid-template-columns:1fr;

    }


    .team-image{

        height:430px;

    }


    .team-card > small{

        font-size:14px;

    }


    .team-card h3{

        font-size:30px;

    }


    .team-card p{

        font-size:16px;

    }


    .grant-grid{

        grid-template-columns:1fr;

    }


    .grant-card{

        min-height:280px;

    }


    .grant-card h3{

        margin-top:50px;

    }


    .grant-card p{

        font-size:16px;

    }


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

    .collaboration{

        padding:75px 0 40px;

    }


    .collab-watermark{

        left:-10%;

        bottom:20px;

        font-size:125px;

    }


    .collaboration-inner{

        width:calc(100% - 30px);

    }


    .collab-meta{

        font-size:13px;

    }


    .collab-label{

        margin-top:45px;

        font-size:14px;

    }


    .collab-left h2{

        margin-top:16px;

        font-size:50px;

        line-height:.93;

        letter-spacing:-1px;

    }


    .collab-small{

        margin-top:30px;

        font-size:20px;

    }


    .collab-right{

        padding-top:10px;

    }


    .collab-lead{

        font-size:21px;

        line-height:1.4;

    }


    .collab-introduction > p:not(.collab-lead){

        font-size:16px;

        line-height:1.75;

    }


    .collab-list{

        margin-top:38px;

    }


    .collab-item{

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

        gap:10px;

        padding:22px 0;

    }


    .collab-item:hover{

        padding-left:0;

        padding-right:0;

    }


    .collab-item-number{

        font-size:21px;

    }


    .collab-item-text > span{

        font-size:12px;

    }


    .collab-item-text h3{

        font-size:23px;

        line-height:1.2;

    }


    .collab-item-text p{

        font-size:15px;

        line-height:1.55;

    }


    .collab-item-arrow{

        width:32px;

        height:32px;

        font-size:11px;

    }


    .collab-contact{

        flex-direction:column;

        align-items:stretch;

        gap:22px;

    }


    .collab-contact > div > span{

        font-size:12px;

    }


    .collab-contact > div > a{

        font-size:17px;

        line-height:1.35;

        overflow-wrap:anywhere;

    }


    .collab-button{

        width:100%;

        justify-content:center;

        font-size:16px;

    }


    .collab-footer-line{

        width:calc(100% - 30px);

        margin-top:60px;

        gap:10px 18px;

        font-size:11px;

    }


    /* MISSION */

    .mission{

        min-height:520px;

        padding:50px 15px;

    }


    .mission-ring{

        width:390px;

        height:390px;

    }


    .mission-content{

        width:calc(100% - 20px);

    }


    .mission-content > span{

        font-size:14px;

    }


    .mission-content h2{

        font-size:46px;

    }


    .mission-content p{

        font-size:16px;

    }


    /* CONTACT */

    .contact-copy h2{

        font-size:46px;

    }


    .contact-copy p{

        font-size:16px;

    }


    .contact-copy > a{

        font-size:17px;

    }


    .contact-form label{

        font-size:14px;

    }


    .contact-form input,
    .contact-form textarea{

        font-size:16px;

    }


    /* NEWSLETTER */

    .newsletter{

        padding:75px 15px;

    }


    .newsletter-inner > span{

        font-size:14px;

    }


    .newsletter-inner h2{

        font-size:46px;

    }


    .newsletter-inner > p{

        font-size:16px;

    }


    .newsletter-inner form{

        display:block;

        border:0;

    }


    .newsletter-inner input{

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

        font-size:16px;

    }


    .newsletter-inner button{

        width:100%;

        margin-top:15px;

        padding:15px;

        color:white;

        background:var(--charcoal);

        font-size:16px;

    }


    /* FOOTER */

    .footer{

        padding-top:65px;

    }


    .footer-main{

        width:calc(100% - 30px);

    }


    .footer-nav{

        grid-template-columns:1fr 1fr;

        gap:35px 25px;

    }


    .footer-nav span{

        font-size:14px;

    }


    .footer-nav a{

        font-size:16px;

    }


    .footer-word{

        width:calc(100% - 30px);

        margin-top:60px;

        font-size:105px;

    }


    .footer-bottom{

        width:calc(100% - 30px);

        flex-direction:column;

        align-items:flex-start;

        font-size:12px;

    }


    #backTop{

        align-self:flex-end;

    }

}



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

@media(max-width:380px){

    .hero-sticky h1{

        font-size:41px;

    }


    .hero-topline{

        flex-direction:column;

        gap:6px;

    }


    .banner-content h2{

        font-size:40px;

    }


    .collab-left h2{

        font-size:44px;

    }


    .collab-item{

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

        gap:7px;

    }


    .collab-item-text h3{

        font-size:21px;

    }


    .collab-item-text p{

        font-size:14px;

    }


    .mission-content h2{

        font-size:40px;

    }


    .footer-word{

        font-size:90px;

    }

}



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

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

    html{
        scroll-behavior:auto;
    }


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

        animation-duration:.01ms!important;

        animation-iteration-count:1!important;

        transition-duration:.01ms!important;

    }

}




.mobile-menu.open{
    transform:translate3d(0,0,0) !important;
    -webkit-transform:translate3d(0,0,0) !important;
}

.mobile-inner{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;

    padding-left:20px !important;
    padding-right:20px !important;

    overflow-x:hidden !important;
}

.mobile-menu nav{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;
}

.mobile-menu nav a{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;

    grid-template-columns:
        35px
        minmax(0,1fr)
        25px !important;
}

.mobile-menu nav a span{
    min-width:0;
}

.mobile-menu nav a i{
    min-width:0;
    text-align:right;
}

.mobile-close{
    right:20px !important;
    top:22px !important;

    flex-shrink:0;

    z-index:2;
}


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

@media (max-width:600px){

    .mobile-menu{
        width:100vw !important;
        max-width:100vw !important;

        left:0 !important;
        right:0 !important;

        overflow-x:hidden !important;
    }

    .mobile-inner{
        width:100% !important;
        padding:
            80px 20px 25px !important;
    }

    .mobile-menu nav a{
        grid-template-columns:
            30px
            minmax(0,1fr)
            24px !important;

        gap:10px !important;

        padding:14px 0 !important;
    }

}


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

@media (max-width:380px){

    .mobile-inner{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .mobile-menu nav a{
        grid-template-columns:
            26px
            minmax(0,1fr)
            22px !important;

        gap:8px !important;
    }

}