/* Reuse the Home hero layout; the eyebrow is About-specific. */
.about-page .hero__eyebrow {
    color: #fff;
    font-size: calc(1rem - 2px);
}

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

.about-page.home .hero__actions .about-hero__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 30px;

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

    border-radius:999px;

    background:transparent;

    color:#fff;

    text-decoration:none;

    transition:.3s ease;

}

.about-page.home .hero__actions .about-hero__button:hover{

    background:#fff;
    color:#111;

}


/*
=================================
Story
=================================
*/

.about-story{

    padding:7rem 0;

}

.about-story__grid{

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:5rem;

    align-items:center;

}

.about-story__content h2{

    margin:1rem 0 2rem;

    max-width:480px;

}

.about-story__content p{

    max-width:480px;

    margin-bottom:1.5rem;

}

.about-story__gallery{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1.5rem;

}

.about-story__gallery figure{

    margin:0;

    overflow:hidden;

    border-radius:10px;

}

.about-story__gallery img{

    width:100%;

    display:block;

    aspect-ratio:4/5;

    object-fit:cover;

    transition:.4s;

}

.about-story__gallery figure:hover img{

    transform:scale(1.05);

}

@media (max-width:768px){
    .about-story{

        padding:5rem 0;

    }

    .about-story__grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .about-story__content{

        order:1;

    }

    .about-story__gallery{

        order:2;

        grid-template-columns:1fr;

        gap:1.25rem;

    }

    .about-story__gallery figure{

        border-radius:20px;

    }

    .about-story__gallery img{

        aspect-ratio:4/5;

        width:100%;

        height:100%;

        object-fit:cover;

    }

    .about-story__content h2{

        max-width:100%;

    }

    .about-story__content p{

        max-width:100%;

    }

    .about-story .button{

        width:fit-content;

    }
}

@media (min-width:769px) and (max-width:1024px){

    .about-story__grid{

        gap:2.5rem;

        grid-template-columns:1fr 1fr;

    }

    .about-story__gallery{

        gap:1rem;

    }

    .about-story__gallery img{

        aspect-ratio:3/4;

    }

}

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

.about-values{

    padding:4.5rem 0;

}

.about-values .section-heading{

    margin-bottom:3.5rem;

}

.about-values .section-heading__eyebrow{

    margin-bottom:.75rem;

    letter-spacing:.22em;

    font-size:.72rem;

}

.about-values .section-heading__title{

    margin:0;

    font-size:clamp(2.2rem,4vw,3.1rem);

    font-weight:500;

}

.about-values__grid{

    display:grid;

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

    gap:3rem;

    text-align:center;

}

.about-value{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.about-value__icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:72px;
    height:72px;

    margin:0 auto 1.5rem;

    border-radius:50%;

    background:#fff;

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

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

    transition:.3s;
}

.about-value__icon img{
    width:32px;
    height:32px;
    object-fit:contain;
}

.about-value:hover .about-value__icon{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.14);
}

body.dark-mode .about-value__icon{
    background:#fff;
}

.about-value h3{

    margin-bottom:.8rem;

    font-size:1rem;

    font-weight:700;

}

.about-value p{

    max-width:220px;

    margin:0;

    color:#666;

    font-size:.9rem;

    line-height:1.75;

}

/* tablet */
@media (max-width:992px){

.about-values{

    padding:4rem 0;

}

.about-values__grid{

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

    gap:3rem 2rem;

}

}

/* Mobile */
@media (max-width:768px){

.about-values{

    padding:3rem 0;

}

.about-values .section-heading{

    margin-bottom:2.5rem;

}

.about-values__grid{

    grid-template-columns:1fr;

    gap:2.5rem;

}

.about-value p{

    max-width:320px;

}

.about-value__icon{

    width:50px;

    height:50px;

}

.about-value__icon img{

    width:34px;

    height:34px;

}

}

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

.about-stats{

    padding:4rem 0;

}

.about-stats__grid{

    display:grid;

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

    gap:2rem;

    text-align:center;

}

.about-stat{

    padding:2rem 0;

    border-right:1px solid rgba(0,0,0,.08);

}

.about-stat:last-child{

    border-right:none;

}

.about-stat__number{

    display:block;

    margin-bottom:.6rem;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.8rem,5vw,4rem);

    color:#111;

    line-height:1;

}

.about-stat__label{

    font-size:.9rem;

    color:#666;

}

body.dark-mode .about-stat{

    border-color:#333;

}

body.dark-mode .about-stat__number{

    color:#fff;

}

body.dark-mode .about-stat__label{

    color:#bbb;

}

@media(max-width:768px){

    .about-stats{

        padding:3rem 0;

    }

    .about-stats__grid{

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

        gap:2rem;

    }

    .about-stat{

        border:none;

    }
}

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

.about-cta{

    margin:4rem 0;

}

.about-cta__box{

    position:relative;

    width:100%;

    height:360px;

    overflow:hidden;

}

.about-cta__image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.about-cta__overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.62) 0%,

        rgba(0,0,0,.42) 38%,

        rgba(0,0,0,.18) 100%

    );

}

.about-cta__content{

    position:relative;

    z-index:2;

    height:100%;

    max-width:620px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:0 clamp(2rem,6vw,7rem);

}

.about-cta__eyebrow{

    margin-bottom:1rem;

    color:#ffffff;

    opacity:.85;

    font-size:.82rem;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.about-cta__title{

    margin:0 0 1.25rem;

    color:#fff;

    font-size:clamp(2.4rem,3vw,3.2rem);

    line-height:1.05;

    white-space:nowrap;

}

.about-cta__text{

    max-width:470px;

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

    font-size:1rem;

    line-height:1.7;

    margin-bottom:2rem;

}

.about-cta__button{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    width:fit-content;

    padding:14px 28px;

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

    border-radius:999px;

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.12em;

    font-size:.82rem;

    font-weight:600;

    transition:.35s;

}

.about-cta__button:hover{

    background:#fff;

    color:#111;

    transform:translateY(-2px);

}

.about-cta__arrow{

    transition:.35s;

}

.about-cta__button:hover .about-cta__arrow{

    transform:translateX(5px);

}

/* ---------- Tablet ---------- */

@media (max-width:992px){

.about-cta__box{

    height:330px;

}

.about-cta__title{

    white-space:normal;

    font-size:2.5rem;

}

.about-cta__content{

    max-width:520px;

    padding:0 3rem;

}

}

/* ---------- Mobile ---------- */
@media (max-width:768px){

.about-cta{

    margin:3rem 0;

}

.about-cta__box{

    min-height:560px;
    height:auto;

}

.about-cta__image{

    object-position:center;

}

.about-cta__overlay{

    background:rgba(0,0,0,.58);

}

.about-cta__content{

    max-width:100%;

    padding:3rem 1.5rem;

}

.about-cta__eyebrow{

    font-size:.78rem;

}

.about-cta__title{

    white-space:normal;

    font-size:clamp(2rem,8vw,2.6rem);

    line-height:1.1;

}

.about-cta__text{

    max-width:100%;

    font-size:.95rem;

    line-height:1.7;

}

.about-cta__button{

    width:fit-content;

}

}

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

.reveal{

    opacity:0;

    transform:translateY(45px);

    transition:

        opacity .9s ease,

        transform .9s ease;

    will-change:opacity,transform;

}

.reveal.revealed{

    opacity:1;

    transform:none;

}

@media (max-width:768px){
    .about-page .hero__eyebrow {
        font-size: calc(.95rem - 2px);
    }
}