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


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

.story-hero{
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-hero-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.story-hero-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1;
}

.story-hero .container{
    position: relative;
    z-index: 2;
    width: 100%;
}

.story-hero-content{
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 700px;

    margin: 0 auto;
    padding: 0 20px;

    text-align: center;
    color: #fff;
}


.story-label{

    display:inline-block;

    padding:.55rem 1.4rem;

    margin-bottom:1.5rem;

    border-radius:50px;

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

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

    color:var(--primary-gold);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    backdrop-filter:blur(10px);

}

.story-hero-content h1{

    margin-bottom:1.5rem;

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

    font-weight:800;

    line-height:1.1;

    color:#fff;

}

.story-hero-content p{

    max-width:650px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.9;

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

}

/* Decorative Line */

.story-hero-content::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:2.5rem auto 0;

    border-radius:50px;

    background:linear-gradient(

        90deg,

        var(--primary-gold),

        var(--forest-green)

    );

}

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

#our-story{

    padding:8rem 0;

    background:#ffffff;

}

.story-intro-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:5rem;

}

.story-intro-content{

    width:100%;

}

.story-intro-content h2{

    margin:1rem 0 2rem;

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

    line-height:1.2;

    color:var(--midnight-black);

}

.story-intro-content p{

    margin-bottom:1.6rem;

    color:var(--gray-700);

    font-size:1.05rem;

    line-height:1.9;

}

.story-intro-content p:last-child{

    margin-bottom:0;

}

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

.story-intro-image{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.story-intro-image img{

    display:block;

    width:100%;

    height:620px;

    object-fit:cover;

    transition:transform .6s ease;

}

.story-intro-image:hover img{

    transform:scale(1.05);

}

/* Decorative Frame */

.story-intro-image::before{

    content:"";

    position:absolute;

    top:-18px;

    left:-18px;

    width:140px;

    height:140px;

    border:4px solid var(--primary-gold);

    border-radius:24px;

    pointer-events:none;

}

.story-intro-image::after{

    content:"";

    position:absolute;

    bottom:-18px;

    right:-18px;

    width:140px;

    height:140px;

    border:4px solid var(--forest-green);

    border-radius:24px;

    pointer-events:none;

}

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

#purpose{

    padding:8rem 0;

    background:#f8f9fb;

}

.story-purpose-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.story-purpose-card{

    padding:1.4rem 1.6rem;

    background:#ffffff;

    border-radius:18px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:all .35s ease;

}

.story-purpose-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.story-purpose-icon{

    width:55px;

    height:55px;

    margin:0 auto 2rem;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary-gold),
        var(--dark-gold)
    );

}

.story-purpose-icon i{

    color:#fff;

    font-size:2rem;

}

.story-purpose-card h3{

    margin-bottom:1rem;

    color:var(--midnight-black);

}

.story-purpose-card p{

    color:var(--gray-700);

    line-height:1.8;

}

/*==================================================
                VISION & MISSION
====================================================*/

#vision-mission{

    padding:8rem 0;

    background:#ffffff;

}

.story-vision-grid{

    display:grid;

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

    gap:2.5rem;

}

.story-vision-card,
.story-mission-card{

    padding:2rem;

    background:#f8f9fb;

    border-radius:24px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.story-vision-card:hover,
.story-mission-card:hover{

    transform:translateY(-8px);

}

.story-vision-icon,
.story-mission-icon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    margin-bottom:2rem;

    background:var(--primary-gold);

}

.story-vision-icon i,
.story-mission-icon i{

    color:#fff;

    font-size:1.8rem;

}

.story-vision-card h2,
.story-mission-card h2{

    margin-bottom:1.2rem;

    color:var(--midnight-black);

}

.story-vision-card p,
.story-mission-card p{

    color:var(--gray-700);

    line-height:1.9;

}

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

#core-values{

    padding:8rem 0;

    background:#f8f9fb;

}

.story-values-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.story-value-card{

    padding:2.5rem;

    background:#ffffff;

    border-radius:24px;

    text-align:center;

    transition:.35s;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.story-value-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.story-value-card i{

    font-size:2.5rem;

    color:var(--primary-gold);

    margin-bottom:1.5rem;

}

.story-value-card h3{

    margin-bottom:1rem;

    color:var(--midnight-black);

}

.story-value-card p{

    color:var(--gray-700);

    line-height:1.8;

}

/*==================================================
                OUR JOURNEY
====================================================*/

#our-journey{

    padding:8rem 0;

    background:#ffffff;

}

.story-timeline{

    position:relative;

    max-width:1000px;

    margin:4rem auto 0;

}

.story-timeline::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    border-radius:50px;

    background:linear-gradient(

        to bottom,

        var(--primary-gold),

        var(--forest-green)

    );

}

.story-timeline-item{

    position:relative;

    width:50%;

    padding:0 3rem 4rem;

}

.story-timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}

.story-timeline-item:nth-child(even){

    left:50%;

}

.story-timeline-item::before{

    content:"";

    position:absolute;

    top:18px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--primary-gold);

    border:5px solid #ffffff;

    box-shadow:0 0 0 4px rgba(184,134,11,.20);

}

.story-timeline-item:nth-child(odd)::before{

    right:-11px;

}

.story-timeline-item:nth-child(even)::before{

    left:-11px;

}

.story-timeline-year{

    display:inline-block;

    margin-bottom:1rem;

    padding:.6rem 1.4rem;

    border-radius:40px;

    background:var(--primary-gold);

    color:#ffffff;

    font-weight:700;

    letter-spacing:1px;

}

.story-timeline-content{

    padding:2rem;

    background:#ffffff;

    border-radius:24px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s ease;

}

.story-timeline-content:hover{

    transform:translateY(-6px);

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

}

.story-timeline-content h3{

    margin-bottom:1rem;

    color:var(--midnight-black);

}

.story-timeline-content p{

    color:var(--gray-700);

    line-height:1.8;

}

/*==================================================
            LEADERSHIP MESSAGE
====================================================*/

#leadership-message{

    padding:8rem 0;

    background:#f8f9fb;

}

.story-leadership-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:5rem;

    align-items:center;

}

.story-leadership-image{

    overflow:hidden;

    border-radius:22px;

    box-shadow:0 20px 60px rgba(0,0,0,.15);

}

.story-leadership-image img{

    display:block;

    width:90%;

    height:550px;

    object-fit:cover;

    transition:transform .6s ease;

}

.story-leadership-image:hover img{

    transform:scale(1.05);

}

.story-leadership-content h2{

    margin-bottom:2rem;

    color:var(--midnight-black);

}

.story-leadership-content p{

    margin-bottom:1.5rem;

    line-height:1.9;

    color:var(--midnight-black);

}

.story-leadership-content h4{

    margin-top:2rem;

    color:var(--primary-gold);

    font-weight:700;

}

.story-leadership-content span{

    display:block;

    margin-top:.5rem;

    color:var(--midnight-black);

    font-size:.95rem;

}

/*==================================================
                JOIN THE JOURNEY
====================================================*/

#join-journey{

    padding:8rem 0;

    background:linear-gradient(
        135deg,
        var(--midnight-black),
        #111111
    );

}

.story-join-wrapper{

    max-width:900px;

    margin:0 auto;

    text-align:center;

    color:#ffffff;

}

.story-join-wrapper h2{

    margin-bottom:1.5rem;

    color:#ffffff;

}

.story-join-wrapper p{

    max-width:700px;

    margin:0 auto 2.5rem;

    line-height:1.9;

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

}

.story-join-wrapper .btn-primary{

    margin-top:1rem;

}


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

#newsletter{

    padding:8rem 0;

    background:#ffffff;

}

.story-newsletter-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:3rem;

    padding:3.5rem;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        var(--primary-gold),
        var(--dark-gold)
    );

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}

.story-newsletter-content{

    flex:1;

    color:#ffffff;

}

.story-newsletter-content h2{

    margin-bottom:1rem;

    color:#ffffff;

}

.story-newsletter-content p{

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

    line-height:1.8;

}

.story-newsletter-form{

    display:flex;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;

}

.story-newsletter-form input{

    width:320px;

    padding:1rem 1.25rem;

    border:none;

    outline:none;

    border-radius:50px;

    font-size:1rem;

    background:#ffffff;

}

.story-newsletter-form input::placeholder{

    color:#888888;

}

.story-newsletter-form button{

    border:none;

    cursor:pointer;

}


/*==================================================
                FINAL POLISH
====================================================*/

.story-hero,
#our-story,
#purpose,
#vision-mission,
#core-values,
#our-journey,
#leadership-message,
#join-journey,
#newsletter{

    overflow:hidden;

}

.story-purpose-card,
.story-value-card,
.story-vision-card,
.story-mission-card,
.story-timeline-content{

    border:1px solid rgba(184,134,11,.08);

}

.story-purpose-card:hover,
.story-value-card:hover,
.story-vision-card:hover,
.story-mission-card:hover,
.story-timeline-content:hover{

    border-color:rgba(184,134,11,.30);

}

.story-intro-image img,
.story-leadership-image img{

    will-change:transform;

}

.story-intro-content p,
.story-leadership-content p{

    text-align:justify;

}

html{

    scroll-behavior:smooth;

}

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

/*==============================
Large Tablets
==============================*/

@media (max-width:1200px){

    .story-intro-grid,
    .story-leadership-grid{

        gap:4rem;

    }

}

/*==============================
Tablets
==============================*/

@media (max-width:992px){

    /* Hero */

    .story-hero{

        height:60vh;

        min-height:500px;

    }

    .story-hero-content h1{

        font-size:3rem;

    }

    /* Story Intro */

    .story-intro-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .story-intro-content{

        order:2;

    }

    .story-intro-image{

        order:1;

    }

    .story-intro-image img{

        height:500px;

    }

    /* Purpose */

    .story-purpose-grid{

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

    }

    /* Vision */

    .story-vision-grid{

        grid-template-columns:1fr;

    }

    /* Values */

    .story-values-grid{

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

    }

    /* Timeline */

    .story-timeline::before{

        left:25px;

    }

    .story-timeline-item{

        width:100%;

        left:0 !important;

        padding-left:70px;

        padding-right:0;

        text-align:left !important;

    }

    .story-timeline-item::before{

        left:15px !important;

    }

    /* Leadership */

    .story-leadership-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .story-leadership-image img{

        height:500px;

    }

    /* Newsletter */

    .story-newsletter-wrapper{

        flex-direction:column;

        text-align:center;

    }

}

/*==============================
Mobile Landscape
==============================*/

@media (max-width:768px){

    .story-hero{

        height:55vh;

        min-height:430px;

    }

    .story-hero-content{

        padding:0 20px;

    }

    .story-hero-content h1{

        font-size:2.5rem;

    }

    .story-hero-content p{

        font-size:1rem;

    }

    #our-story,
    #purpose,
    #vision-mission,
    #core-values,
    #our-journey,
    #leadership-message,
    #join-journey,
    #newsletter{

        padding:6rem 0;

    }

    .story-intro-content h2{

        font-size:2.4rem;

    }

    .story-intro-image img{

        height:420px;

    }

    .story-purpose-grid,
    .story-values-grid{

        grid-template-columns:1fr;

    }

    .story-vision-card,
    .story-mission-card{

        padding:2rem;

    }

    .story-newsletter-form{

        justify-content:center;

        width:100%;

    }

    .story-newsletter-form input{

        width:100%;

    }

}

/*==============================
Mobile Portrait
==============================*/

@media (max-width:576px){

    .story-hero{

        height:50vh;

        min-height:380px;

    }

    .story-hero-content h1{

        font-size:2rem;

    }

    .story-label{

        font-size:.8rem;

    }

    .story-intro-content h2{

        font-size:2rem;

    }

    .story-intro-content p{

        font-size:1rem;

    }

    .story-intro-image img{

        height:320px;

    }

    .story-purpose-card,
    .story-value-card,
    .story-vision-card,
    .story-mission-card{

        padding:2rem 1.5rem;

    }

    .story-purpose-icon,
    .story-vision-icon,
    .story-mission-icon{

        width:60px;

        height:60px;

    }

    .story-purpose-icon i,
    .story-vision-icon i,
    .story-mission-icon i{

        font-size:1.4rem;

    }

    .story-leadership-image img{

        height:350px;

    }

    .story-newsletter-wrapper{

        padding:2rem;

    }

    .story-newsletter-content h2{

        font-size:2rem;

    }

}