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

.about-page{

    background:#F6F3EE;

    padding-top:140px;

    padding-bottom:120px;

    overflow:hidden;

}

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

.about-page *{

    box-sizing:border-box;

}

.about-page img{

    display:block;

    width:100%;

}

.section-reveal{

    opacity:0;

    transform:translateY(45px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.section-reveal.show{

    opacity:1;

    transform:translateY(0);

}

.about-icon{

    width:28px;

    height:28px;

    stroke:#7A2638;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

    fill:none;

    flex-shrink:0;

}

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

.about-hero{

    width:min(900px,92%);

    margin:0 auto 90px;

    text-align:center;

    animation:heroFade .9s ease forwards;

}

.about-label{

    margin:0 0 18px;

    font-size:10px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#7A2638;

}

.about-hero h1{

    margin:0;

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(56px,6vw,78px);

    line-height:.95;

    color:#1C1C1C;

}

.about-intro{

    max-width:640px;

    margin:28px auto 0;

    font-size:15px;

    line-height:1.9;

    color:#66605B;

}

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

.about-story{

    width:min(1180px,92%);

    margin:0 auto 120px;

}

.story-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.story-text h2{

    display:flex;

    align-items:center;

    gap:14px;

    margin:0 0 26px;

    font-family:'Cormorant Garamond',serif;

    font-size:46px;

    color:#1C1C1C;

}

.story-text p{

    margin:0;

    font-size:15px;

    line-height:2;

    color:#5E5954;

}

.story-image{

    overflow:hidden;

    border-radius:28px;

}

.story-image img{

    border-radius:28px;

    box-shadow:

        0 28px 60px rgba(0,0,0,.08);

    transition:

        transform .5s ease;

}

.story-image:hover img{

    transform:scale(1.04);

}

/* =====================================================
   DESIGNER
===================================================== */

.designer{

    width:min(1180px,92%);

    margin:0 auto 140px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.designer-image{

    overflow:hidden;

    border-radius:28px;

}

.designer-image img{

    border-radius:28px;

    box-shadow:

        0 28px 60px rgba(0,0,0,.08);

    transition:

        transform .5s ease;

}

.designer-image:hover img{

    transform:scale(1.04);

}

.designer-text h2{

    display:flex;

    align-items:center;

    gap:14px;

    margin:0 0 26px;

    font-family:'Cormorant Garamond',serif;

    font-size:46px;

    color:#1C1C1C;

}

.designer-text p{

    margin:0;

    font-size:15px;

    line-height:2;

    color:#5E5954;

}

/* =====================================================
   QUOTE
===================================================== */

.brand-quote{

    width:min(900px,92%);

    margin:20px auto 140px;

    text-align:center;

}

.brand-quote h2{

    margin:0;

    font-family:'Cormorant Garamond',serif;

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

    line-height:1.2;

    font-style:italic;

    font-weight:500;

    color:#7A2638;

}

/* =====================================================
   ANIMATION
===================================================== */

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* =====================================================
   WHY UPCYCLING
===================================================== */

.about-section{

    width:min(1180px,92%);

    margin:0 auto 140px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-section.reverse{

    direction:rtl;

}

.about-section.reverse>*{

    direction:ltr;

}

.about-image{

    overflow:hidden;

    border-radius:28px;

}

.about-image img{

    border-radius:28px;

    box-shadow:
        0 28px 60px rgba(0,0,0,.08);

    transition:
        transform .5s ease;

}

.about-image:hover img{

    transform:scale(1.04);

}

.about-text h2{

    display:flex;

    align-items:center;

    gap:14px;

    margin:0 0 24px;

    font-family:'Cormorant Garamond',serif;

    font-size:46px;

    color:#1C1C1C;

}

.about-text p{

    margin:0 0 18px;

    font-size:15px;

    line-height:2;

    color:#5E5954;

}

/* =====================================================
   PHILOSOPHY
===================================================== */

.philosophy{

    width:min(900px,92%);

    margin:0 auto 140px;

    text-align:center;

}

.philosophy h2{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-bottom:28px;

    font-family:'Cormorant Garamond',serif;

    font-size:52px;

    color:#1C1C1C;

}

.philosophy p{

    max-width:720px;

    margin:0 auto 24px;

    font-size:16px;

    line-height:2;

    color:#5E5954;

}

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

.process{

    width:min(1180px,92%);

    margin:0 auto 140px;

}

.process h2{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-bottom:60px;

    font-family:'Cormorant Garamond',serif;

    font-size:52px;

}

.process-grid{

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:26px;

}

.process-card{

    background:white;

    padding:34px;

    border-radius:24px;

    text-align:center;

    border:1px solid rgba(122,38,56,.08);

    box-shadow:

        0 18px 45px rgba(0,0,0,.05);

    transition:.35s;

}

.process-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 28px 60px rgba(0,0,0,.08);

}

.process-card span{

    display:inline-flex;

    width:62px;

    height:62px;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#7A2638;

    color:white;

    font-size:18px;

    font-weight:700;

    margin-bottom:24px;

}

.process-card h3{

    margin:0 0 18px;

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    color:#1C1C1C;

}

.process-card p{

    margin:0;

    font-size:14px;

    line-height:1.9;

    color:#66605B;

}
/* =====================================================
   CREATIVE CHALLENGE
===================================================== */

.challenge{

    width:min(900px,92%);

    margin:0 auto 140px;

    text-align:center;

}

.challenge h2{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-bottom:28px;

    font-family:'Cormorant Garamond',serif;

    font-size:52px;

    color:#1C1C1C;

}

.challenge p{

    max-width:760px;

    margin:auto;

    font-size:16px;

    line-height:2;

    color:#5E5954;

}

/* =====================================================
   PROMISE
===================================================== */

.promise{

    width:min(1180px,92%);

    margin:0 auto 140px;

}

.promise h2{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-bottom:55px;

    font-family:'Cormorant Garamond',serif;

    font-size:52px;

    color:#1C1C1C;

}

.promise-grid{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:24px;

}

.promise-grid div{

    background:white;

    padding:42px;

    border-radius:22px;

    border:1px solid rgba(122,38,56,.08);

    box-shadow:

        0 18px 45px rgba(0,0,0,.05);

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    text-align:center;

    color:#1C1C1C;

    transition:.35s;

}

.promise-grid div:hover{

    transform:translateY(-7px);

    box-shadow:

        0 28px 60px rgba(0,0,0,.08);

}

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

.about-cta{

    width:min(1180px,92%);

    margin:0 auto;

    padding:80px 50px;

    border-radius:30px;

    background:#7A2638;

    text-align:center;

    color:white;

}

.about-cta>p:first-child{

    margin:0;

    font-size:10px;

    letter-spacing:3px;

    text-transform:uppercase;

    opacity:.9;

}

.about-cta h2{

    margin:22px 0;

    font-family:'Cormorant Garamond',serif;

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

    line-height:1.1;

    color:white;

}

.about-cta p{

    max-width:640px;

    margin:0 auto;

    font-size:16px;

    line-height:1.9;

    opacity:.95;

}

.about-cta a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:38px;

    padding:16px 34px;

    border-radius:999px;

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

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.about-cta a:hover{

    background:white;

    color:#7A2638;

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

@media(max-width:900px){

.about-page{

    padding-top:110px;

    padding-bottom:80px;

}

/* Hero */

.about-hero{

    margin-bottom:55px;

}

.about-label{

    font-size:9px;

    letter-spacing:2px;

}

.about-hero h1{

    font-size:44px;

}

.about-intro{

    margin-top:18px;

    font-size:14px;

    line-height:1.8;

}

/* Story */

.story-content,

.designer,

.about-section{

    grid-template-columns:1fr;

    gap:30px;

    margin-bottom:70px;

}

.story-text h2,

.designer-text h2,

.about-text h2{

    font-size:36px;

}

.story-text p,

.designer-text p,

.about-text p{

    font-size:14px;

    line-height:1.8;

}

/* Images */

.story-image,

.designer-image,

.about-image{

    order:-1;

}

/* Quote */

.brand-quote{

    margin:70px auto;

}

.brand-quote h2{

    font-size:38px;

}

/* Philosophy */

.philosophy{

    margin-bottom:70px;

}

.philosophy h2{

    font-size:38px;

}

.philosophy p{

    font-size:14px;

}

/* Process */

.process{

    margin-bottom:70px;

}

.process h2{

    font-size:38px;

    margin-bottom:34px;

}

.process-grid{

    grid-template-columns:1fr;

    gap:18px;

}

.process-card{

    padding:26px;

}

.process-card span{

    width:52px;

    height:52px;

    font-size:16px;

}

.process-card h3{

    font-size:28px;

}

/* Challenge */

.challenge{

    margin-bottom:70px;

}

.challenge h2{

    font-size:38px;

}

.challenge p{

    font-size:14px;

}

/* Promise */

.promise{

    margin-bottom:70px;

}

.promise h2{

    font-size:38px;

}

.promise-grid{

    grid-template-columns:1fr;

}

.promise-grid div{

    padding:28px;

    font-size:28px;

}

/* CTA */

.about-cta{

    padding:45px 24px;

    border-radius:22px;

}

.about-cta h2{

    font-size:42px;

}

.about-cta p{

    font-size:14px;

}

.about-cta a{

    width:100%;

}

}