/*==========================================================
OUR STORY
Executive Blue Theme

VERSION 2.0

PART 1

1. Section
2. Background
3. Section Header
4. Timeline
5. Timeline Line
6. Timeline Stage
7. Year Badge
8. Connector
9. Timeline Node

==========================================================*/


/*==========================================================
1. SECTION
==========================================================*/

.our-story{

    position:relative;

    overflow:hidden;

    padding:130px 0;

    background:#ffffff;

}

.our-story .container{

    position:relative;

    z-index:2;

}



/*==========================================================
2. BACKGROUND
==========================================================*/

.our-story::before{

    content:"";

    position:absolute;

    top:-260px;

    right:-220px;

    width:720px;

    height:720px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(14,73,124,.05),

        rgba(14,73,124,0)

    );

}



.our-story::after{

    content:"";

    position:absolute;

    bottom:-220px;

    left:-220px;

    width:620px;

    height:620px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(214,40,40,.04),

        rgba(214,40,40,0)

    );

}



/*==========================================================
3. SECTION HEADER
==========================================================*/

.section-header{

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}



.section-tag{

    display:inline-block;

    position:relative;

    margin-bottom:18px;

    padding-bottom:14px;

    font-family:var(--font-heading);

    font-size:1rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary-red);

}



.section-tag::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:70px;

    height:3px;

    border-radius:20px;

    background:var(--primary-red);

}



.section-title{

    margin:0;

    font-family:var(--font-heading);

    font-size:clamp(3rem,4vw,4.4rem);

    line-height:1.15;

    letter-spacing:-1px;

    color:var(--primary-blue);

}



.section-description{

    max-width:820px;

    margin:28px auto 0;

    font-size:1.18rem;

    line-height:1.9;

    color:#5f6b7a;

}



/*==========================================================
4. TIMELINE
==========================================================*/

.story-timeline{

    position:relative;

    display:grid;

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

    gap:30px;

    margin-bottom:70px;

}



/*==========================================================
5. TIMELINE LINE
==========================================================*/

.timeline-line{

    position:absolute;

    left:10%;

    right:10%;

    top:145px;

    height:4px;

    border-radius:20px;

    background:#dbe5ef;

    z-index:1;

}



/*==========================================================
6. TIMELINE STAGE
==========================================================*/

.timeline-stage{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

}



/*==========================================================
7. YEAR BADGE
==========================================================*/

.timeline-year{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:135px;

    height:48px;

    padding:0 24px;

    border-radius:14px;

    background:#0E497C;

    color:#ffffff;

    font-family:var(--font-heading);

    font-size:1rem;

    font-weight:700;

    box-shadow:

        0 10px 25px rgba(14,73,124,.16);

}



.timeline-year-current{

    background:#D62828;

}



/*==========================================================
8. CONNECTOR
==========================================================*/

.timeline-connector{

    width:2px;

    height:38px;

    background:#dbe5ef;

}



/*==========================================================
9. TIMELINE NODE
==========================================================*/

.timeline-node{

    width:110px;

    height:110px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#ffffff;

    border:4px solid #eef3f8;

    box-shadow:

        0 18px 40px rgba(14,73,124,.10);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}



.timeline-node img{

    width:80px;

    height:80px;

    object-fit:contain;

}



.timeline-node-current{

    border-color:rgba(214,40,40,.20);

}



/*==========================================================
10. HOVER
==========================================================*/

.timeline-stage:hover .timeline-node{

    transform:translateY(-6px);

    border-color:rgba(14,73,124,.20);

    box-shadow:

        0 22px 45px rgba(14,73,124,.16);

}



.timeline-stage:hover .timeline-year{

    transform:translateY(-3px);

}



.timeline-year{

    transition:

        transform .30s ease;

}



/*==========================================================
11. TYPOGRAPHY
==========================================================*/

.section-title{

    text-wrap:balance;

}



.section-description{

    text-wrap:pretty;

}

/*==========================================================
PART 2

12. Story Grid
13. Story Card
14. Story Content
15. Divider
16. Paragraphs & Lists
17. Story Image
18. Highlight Card
19. Impact Snapshot
20. Hover Effects

==========================================================*/


/*==========================================================
12. STORY GRID
==========================================================*/

.story-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

    margin-bottom:30px;

}



/*==========================================================
13. STORY CARD
==========================================================*/

.story-card{

    display:flex;

    flex-direction:column;

    height:100%;

    background:#ffffff;

    border:1px solid rgba(14,73,124,.08);

    border-radius:24px;

    overflow:hidden;

    box-shadow:

        0 18px 45px rgba(14,73,124,.07);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}



/*==========================================================
14. STORY CONTENT
==========================================================*/

.story-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:28px 24px 20px;

}



.story-content h3{

    margin:0;

    font-family:var(--font-heading);

    font-size:1.65rem;

    line-height:1.2;

    color:var(--primary-blue);

    text-wrap:balance;

}



/*==========================================================
15. DIVIDER
==========================================================*/

.story-divider{

    width:50px;

    height:3px;

    margin:14px 0 18px;

    border-radius:30px;

    background:var(--primary-red);

}



/*==========================================================
16. PARAGRAPHS & LISTS
==========================================================*/

.story-content p{

    margin:0;

    font-size:1rem;

    line-height:1.7;

    color:#5f6b7a;

    text-wrap:pretty;

}



.story-content ul{

    margin:0;

    padding:0;

    list-style:none;

}



.story-content li{

    position:relative;

    margin-bottom:10px;

    padding-left:22px;

    font-size:.95rem;

    line-height:1.6;

    color:#5f6b7a;

}



.story-content li:last-child{

    margin-bottom:0;

}



.story-content li::before{

    content:"";

    position:absolute;

    left:0;

    top:.72em;

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--primary-red);

}



/*==========================================================
17. STORY IMAGE
==========================================================*/

.story-image{

    margin-top:auto;

    overflow:hidden;

    border-top:1px solid rgba(14,73,124,.08);

}



.story-image img{

    display:block;

    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

    transition:

        transform .45s ease;

}



/*==========================================================
18. HIGHLIGHT CARD
==========================================================*/

.story-card-highlight{

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

    box-shadow:

        0 24px 55px rgba(14,73,124,.10);

}



.story-card-highlight .story-content{

    padding-bottom:20px;

}



/*==========================================================
19. IMPACT SNAPSHOT
==========================================================*/

.impact-snapshot{

    display:grid;

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

    gap:16px;

    margin-bottom:72px;

}



.impact-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:12px 14px;

    background:#ffffff;

    border:1px solid rgba(14,73,124,.08);

    border-radius:16px;

    transition:

        transform .30s ease,

        box-shadow .30s ease;

}



.impact-item img{

    width:42px;

    height:42px;

    object-fit:contain;

    flex-shrink:0;

}



.impact-item div{

    display:flex;

    flex-direction:column;

}



.impact-item strong{

    font-family:var(--font-heading);

    font-size:1.35rem;

    line-height:1;

    color:var(--primary-red);

}



.impact-item span{

    margin-top:5px;

    font-size:.88rem;

    line-height:1.5;

    color:#5f6b7a;

}



/*==========================================================
20. HOVER EFFECTS
==========================================================*/

.story-card:hover{

    transform:translateY(-10px);

    border-color:rgba(14,73,124,.14);

    box-shadow:

        0 28px 60px rgba(14,73,124,.12);

}



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

    transform:scale(1.06);

}



.story-card-highlight:hover{

    border-color:rgba(214,40,40,.20);

}



.impact-item:hover{

    transform:translateY(-3px);

    box-shadow:

        0 12px 24px rgba(14,73,124,.08);

}

/*==========================================================
PART 3

21. Commitment Banner
22. Large Desktop
23. Laptop
24. Tablet
25. Mobile
26. Small Mobile
27. Accessibility
28. Reduced Motion

==========================================================*/


/*==========================================================
21. COMMITMENT BANNER
==========================================================*/

.story-commitment{

    display:flex;

    align-items:center;

    gap:32px;

    padding:42px 48px;

    border-radius:28px;

    background:

    linear-gradient(
        135deg,
        #0E497C 0%,
        #165D97 100%
    );

    box-shadow:

        0 24px 60px rgba(14,73,124,.18);

}



.commitment-icon{

    width:100px;

    height:100px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    backdrop-filter:blur(6px);

}



.commitment-icon img{

    width:80px;

    height:80px;

    object-fit:contain;

}



.story-commitment p{

    margin:0;

    font-size:1.12rem;

    line-height:1.9;

    color:#ffffff;

}



.story-commitment strong{

    color:#ffffff;

    font-weight:700;

}



/*==========================================================
22. LARGE DESKTOP
==========================================================*/

@media (max-width:1400px){

    .story-grid{

        gap:24px;

    }

    .story-timeline{

        gap:24px;

    }

    .timeline-node{

        width:100px;

        height:100px;

    }

}



/*==========================================================
23. LAPTOP
==========================================================*/

@media (max-width:1200px){

    .story-timeline{

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

        gap:16px;

    }

    .timeline-year{

        min-width:110px;

        font-size:.90rem;

        padding:0 18px;

    }

    .timeline-node{

        width:90px;

        height:90px;

    }

    .timeline-node img{

        width:44px;

        height:44px;

    }

    .timeline-line{

        left:8%;

        right:8%;

    }

    .story-grid{

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

        gap:30px;

    }

    .impact-snapshot{

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

        margin-bottom:64px;

    }

}



/*==========================================================
24. TABLET
==========================================================*/

@media (max-width:992px){

    .our-story{

        padding:100px 0;

    }

    .section-header{

        margin-bottom:70px;

    }

    .story-timeline{

        display:none;

    }

    .story-grid{

        grid-template-columns:1fr;

        gap:32px;

        margin-bottom:70px;

    }

    .story-card-highlight{

        grid-column:auto;

    }

    .story-content{

        padding:32px;

    }

    .impact-snapshot{

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

        gap:14px;

        margin-bottom:56px;

    }

}



/*==========================================================
25. MOBILE
==========================================================*/

@media (max-width:768px){

    .section-title{

        font-size:2.5rem;

    }

    .section-description{

        font-size:1rem;

        line-height:1.8;

    }

    .story-content{

        padding:28px;

    }

    .story-content h3{

        font-size:1.65rem;

    }

    .impact-item{

        padding:12px;

    }

    .story-commitment{

        flex-direction:column;

        text-align:center;

        gap:24px;

        padding:36px 30px;

    }

    .commitment-icon{

        width:88px;

        height:88px;

    }

    .commitment-icon img{

        width:42px;

        height:42px;

    }

}



/*==========================================================
26. SMALL MOBILE
==========================================================*/

@media (max-width:576px){

    .our-story{

        padding:80px 0;

    }

    .section-header{

        margin-bottom:55px;

    }

    .story-content{

        padding:24px;

    }

    .story-content h3{

        font-size:1.45rem;

    }

    .story-divider{

        margin:16px 0 20px;

    }

    .impact-snapshot{

        grid-template-columns:1fr;

        gap:12px;

        margin-bottom:46px;

    }

    .impact-item{

        gap:14px;

        padding:12px;

    }

    .impact-item img{

        width:38px;

        height:38px;

    }

    .impact-item strong{

        font-size:1.3rem;

    }

    .story-commitment{

        padding:30px 24px;

    }

    .story-commitment p{

        font-size:1rem;

        line-height:1.8;

    }

}



/*==========================================================
27. ACCESSIBILITY
==========================================================*/

.story-card:focus-within{

    outline:3px solid rgba(214,40,40,.25);

    outline-offset:6px;

    border-radius:24px;

}



.impact-item:focus-within{

    outline:2px solid rgba(14,73,124,.20);

    outline-offset:3px;

}



/*==========================================================
28. REDUCED MOTION
==========================================================*/

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

    .story-card,

    .timeline-node,

    .timeline-year,

    .story-image img,

    .impact-item{

        transition:none !important;

    }

}