/*==================================================
TIMELINE PAGE
==================================================*/

body{
    padding-top:104px;
    background:#f7f8fb;
}


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

.success-hero{
    position:relative;

    padding:145px 0 110px;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(14,24,43,.97),
            rgba(24,34,59,.90)
        );
}

.success-hero::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-120px;
    top:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(149,193,31,.18),
            transparent 68%
        );
}

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

    max-width:850px;
}

.success-label{
    display:inline-block;

    margin-bottom:20px;

    color:#b9dc55;

    font-size:12px;
    font-weight:800;

    letter-spacing:2px;
    text-transform:uppercase;
}

.success-hero h1{
    margin:0 0 25px;

    color:#ffffff;

    font-size:64px;
    line-height:1.06;

    letter-spacing:-2px;
}

.success-hero h1 span{
    display:block;

    color:#b9dc55;
}

.success-hero p{
    max-width:700px;

    margin:0;

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

    font-size:17px;
    line-height:30px;
}


/*==================================================
INTRO
==================================================*/

.success-intro{
    padding:95px 0 65px;

    background:#ffffff;
}

.success-intro-content{
    max-width:800px;

    margin:0 auto;

    text-align:center;
}

.section-tag{
    display:inline-block;

    margin-bottom:16px;

    color:#95c11f;

    font-size:11px;
    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;
}

.success-intro h2{
    margin:0 0 20px;

    color:#172033;

    font-size:46px;
    line-height:1.15;
}

.success-intro p{
    margin:0;

    color:#687080;

    font-size:16px;
    line-height:29px;
}


/*==================================================
TIMELINE SECTION
==================================================*/

.success-timeline-section{
    position:relative;

    padding:75px 0 120px;

    background:
        linear-gradient(
            180deg,
            #f7f8fb 0%,
            #ffffff 100%
        );
}

.success-timeline{
    position:relative;

    max-width:1180px;

    margin:0 auto;
}


/* Center line */

.success-timeline::before{
    content:"";

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:3px;

    transform:translateX(-50%);

    border-radius:4px;

    background:
        linear-gradient(
            180deg,
            #95c11f,
            #453e8e
        );
}


/* Timeline item */

.timeline-item{
    position:relative;

    width:50%;

    margin-bottom:65px;

    box-sizing:border-box;
}

.timeline-item.left{
    padding-right:70px;
}

.timeline-item.right{
    margin-left:50%;

    padding-left:70px;
}


/* Year circle */

.timeline-dot{
    position:absolute;

    top:28px;

    width:64px;
    height:64px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #95c11f,
            #7ca516
        );

    color:#ffffff;

    font-size:13px;
    font-weight:800;

    box-shadow:
        0 12px 30px rgba(149,193,31,.26);

    z-index:5;
}

.timeline-item.left .timeline-dot{
    right:-32px;
}

.timeline-item.right .timeline-dot{
    left:-32px;
}


/* Card */

.timeline-card{
    position:relative;

    padding:30px 30px 28px;

    border:1px solid rgba(23,32,51,.07);

    border-radius:24px;

    background:#ffffff;

    box-shadow:
        0 18px 45px rgba(23,32,51,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.timeline-card:hover{
    transform:translateY(-7px);

    border-color:rgba(149,193,31,.38);

    box-shadow:
        0 26px 60px rgba(23,32,51,.14);
}


/* Little arrow toward center line */

.timeline-item.left .timeline-card::after{
    content:"";

    position:absolute;

    right:-10px;
    top:43px;

    width:18px;
    height:18px;

    background:#ffffff;

    transform:rotate(45deg);

    border-top:1px solid rgba(23,32,51,.07);
    border-right:1px solid rgba(23,32,51,.07);
}

.timeline-item.right .timeline-card::after{
    content:"";

    position:absolute;

    left:-10px;
    top:43px;

    width:18px;
    height:18px;

    background:#ffffff;

    transform:rotate(45deg);

    border-left:1px solid rgba(23,32,51,.07);
    border-bottom:1px solid rgba(23,32,51,.07);
}


/* Year label */

.timeline-year{
    display:inline-block;

    margin-bottom:11px;

    color:#95c11f;

    font-size:11px;
    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;
}

.timeline-card h3{
    margin:0 0 13px;

    color:#172033;

    font-size:25px;
    line-height:1.25;
}

.timeline-card p{
    margin:0;

    color:#687080;

    font-size:14px;
    line-height:25px;
}


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

.timeline-item{
    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}

.timeline-item.timeline-visible{
    opacity:1;

    transform:translateY(0);
}


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

@media only screen and (max-width:900px){

    .success-timeline::before{
        left:32px;
    }

    .timeline-item,
    .timeline-item.right{
        width:100%;

        margin-left:0;

        padding-left:85px;
        padding-right:0;
    }

    .timeline-item.left .timeline-dot,
    .timeline-item.right .timeline-dot{
        left:0;
        right:auto;
    }

    .timeline-item.left .timeline-card::after,
    .timeline-item.right .timeline-card::after{
        left:-10px;
        right:auto;

        border:none;

        border-left:1px solid rgba(23,32,51,.07);
        border-bottom:1px solid rgba(23,32,51,.07);
    }
}


@media only screen and (max-width:650px){

    body{
        padding-top:86px;
    }

    .success-hero{
        padding:100px 22px 75px;
    }

    .success-hero h1{
        font-size:42px;

        letter-spacing:-1px;
    }

    .success-hero p{
        font-size:15px;
        line-height:27px;
    }

    .success-intro{
        padding:70px 20px 50px;
    }

    .success-intro h2{
        font-size:35px;
    }

    .success-timeline-section{
        padding:55px 18px 90px;
    }

    .success-timeline::before{
        left:25px;
    }

    .timeline-item,
    .timeline-item.right{
        padding-left:70px;
        margin-bottom:45px;
    }

    .timeline-dot{
        width:50px;
        height:50px;

        font-size:11px;

        top:25px;
    }

    .timeline-card{
        padding:24px 22px;
    }

    .timeline-card h3{
        font-size:21px;
    }
}

/*==================================================
PREMIUM JOURNEY OVERVIEW
==================================================*/

.journey-overview{
    position:relative;
    padding:105px 0 95px;
    background:#ffffff;
}

.journey-overview-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:90px;
    align-items:center;
}

.journey-overview-left h2{
    margin:10px 0 0;

    color:#172033;

    font-size:48px;
    line-height:1.12;
    letter-spacing:-1.5px;
}

.journey-overview-left h2 span{
    display:block;
    color:#95c11f;
}

.journey-overview-right{
    padding-left:45px;

    border-left:1px solid #e4e8ee;
}

.journey-overview-right p{
    margin:0 0 18px;

    color:#687080;

    font-size:16px;
    line-height:29px;
}

.journey-overview-right p:last-child{
    margin-bottom:0;
}


/* STATS */

.journey-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    margin-top:75px;

    border:1px solid #e6eaf0;
    border-radius:24px;

    overflow:hidden;

    background:#f8f9fb;

    box-shadow:
        0 18px 50px rgba(23,32,51,.06);
}

.journey-stat{
    position:relative;

    padding:34px 20px;

    text-align:center;
}

.journey-stat:not(:last-child)::after{
    content:"";

    position:absolute;

    right:0;
    top:25%;

    width:1px;
    height:50%;

    background:#dfe4ea;
}

.journey-stat strong{
    display:block;

    margin-bottom:8px;

    color:#172033;

    font-size:34px;
    line-height:1;

    font-weight:800;
}

.journey-stat span{
    color:#687080;

    font-size:12px;
    font-weight:700;

    letter-spacing:.5px;
    text-transform:uppercase;
}


/* RESPONSIVE */

@media only screen and (max-width:800px){

    .journey-overview-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .journey-overview-right{
        padding-left:0;
        border-left:0;
    }

    .journey-stats{
        grid-template-columns:repeat(2,1fr);
    }

}

@media only screen and (max-width:500px){

    .journey-overview{
        padding:70px 20px;
    }

    .journey-overview-left h2{
        font-size:36px;
    }

    .journey-stats{
        grid-template-columns:1fr;
    }

    .journey-stat::after{
        display:none;
    }
}

/*==================================================
PREMIUM FULL WIDTH JOURNEY
==================================================*/

.premium-journey{
    background:#ffffff;
}

.journey-years{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;

    padding:30px 0;

    overflow-x:auto;

    border-bottom:1px solid #e6eaf0;
}

.journey-years span{
    flex:0 0 auto;

    color:#687080;

    font-size:11px;
    font-weight:800;

    letter-spacing:.8px;
}


/* MILESTONE BLOCK */

.milestone-block{
    position:relative;

    padding:95px 0;

    overflow:hidden;
}

.milestone-block.dark{
    background:
        linear-gradient(
            135deg,
            #151f33,
            #252d59
        );
}

.milestone-block.light{
    background:#f7f8fb;
}


/* GRID */

.milestone-grid{
    display:grid;

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

    gap:60px;

    align-items:center;
}


/* LARGE YEAR */

.milestone-number{
    font-size:70px;
    line-height:1;

    font-weight:800;

    letter-spacing:-4px;

    opacity:.14;
}

.dark .milestone-number{
    color:#ffffff;
}

.light .milestone-number{
    color:#172033;
}


/* CONTENT */

.milestone-label{
    display:inline-block;

    margin-bottom:14px;

    color:#95c11f;

    font-size:10px;
    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;
}

.milestone-content h2{
    margin:0 0 17px;

    font-size:38px;
    line-height:1.15;

    letter-spacing:-1px;
}

.dark .milestone-content h2{
    color:#ffffff;
}

.light .milestone-content h2{
    color:#172033;
}

.milestone-content p{
    max-width:650px;

    margin:0;

    font-size:15px;
    line-height:28px;
}

.dark .milestone-content p{
    color:rgba(255,255,255,.70);
}

.light .milestone-content p{
    color:#687080;
}


/* HIGHLIGHT CARD */

.milestone-highlight{
    padding:28px 24px;

    border-radius:22px;

    text-align:center;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.dark .milestone-highlight{
    background:
        rgba(255,255,255,.08);

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

    backdrop-filter:blur(12px);
}

.light .milestone-highlight{
    background:#ffffff;

    border:1px solid #e2e6ec;

    box-shadow:
        0 16px 42px rgba(23,32,51,.08);
}

.milestone-highlight:hover{
    transform:translateY(-6px);
}

.milestone-highlight strong{
    display:block;

    margin-bottom:8px;

    color:#95c11f;

    font-size:38px;
    line-height:1;

    font-weight:800;
}

.milestone-highlight span{
    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;
}

.dark .milestone-highlight span{
    color:rgba(255,255,255,.70);
}

.light .milestone-highlight span{
    color:#687080;
}


/* subtle large glow */

.milestone-block::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-160px;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    pointer-events:none;
}

.milestone-block.dark::after{
    background:
        radial-gradient(
            circle,
            rgba(149,193,31,.10),
            transparent 70%
        );
}

.milestone-block.light::after{
    background:
        radial-gradient(
            circle,
            rgba(69,62,142,.05),
            transparent 70%
        );
}


/* MOBILE */

@media only screen and (max-width:900px){

    .milestone-grid{
        grid-template-columns:1fr;

        gap:25px;
    }

    .milestone-number{
        font-size:50px;
    }

    .milestone-highlight{
        max-width:260px;
    }
}

@media only screen and (max-width:650px){

    .milestone-block{
        padding:65px 20px;
    }

    .milestone-content h2{
        font-size:30px;
    }

    .journey-years{
        padding:22px 18px;
    }
}
/*==================================================
PREMIUM STORY CHAPTER
==================================================*/

.story-chapter{
    position:relative;
    min-height:520px;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.story-dark{
    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(149,193,31,.16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #111a2c,
            #232a52
        );
}

.story-year-watermark{
    position:absolute;
    right:5%;
    top:50%;
    transform:translateY(-50%);

    font-size:210px;
    line-height:1;
    font-weight:800;

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

    letter-spacing:-10px;

    pointer-events:none;
}

.story-layout{
    position:relative;
    z-index:2;

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

    gap:90px;

    align-items:center;
}

.story-copy{
    max-width:700px;
}

.story-kicker{
    display:inline-block;

    margin-bottom:18px;

    color:#95c11f;

    font-size:11px;
    font-weight:800;

    letter-spacing:2px;
}

.story-copy h2{
    margin:0 0 25px;

    color:#ffffff;

    font-size:58px;
    line-height:1.05;

    letter-spacing:-2px;
}

.story-copy h2 span{
    display:block;
    color:#95c11f;
}

.story-copy p{
    max-width:620px;

    margin:0;

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

    font-size:17px;
    line-height:30px;
}

.story-metric{
    padding:35px 30px;

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

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

    backdrop-filter:blur(16px);

    text-align:center;

    box-shadow:
        0 24px 60px rgba(0,0,0,.18);
}

.story-metric strong{
    display:block;

    margin-bottom:10px;

    color:#95c11f;

    font-size:44px;
    line-height:1;

    font-weight:800;
}

.story-metric span{
    color:rgba(255,255,255,.72);

    font-size:11px;
    font-weight:700;

    letter-spacing:.8px;
    text-transform:uppercase;
}

@media only screen and (max-width:800px){

    .story-layout{
        grid-template-columns:1fr;
        gap:35px;
    }

    .story-copy h2{
        font-size:42px;
    }

    .story-metric{
        max-width:240px;
    }

    .story-year-watermark{
        font-size:120px;
    }
}
/*==============================================================
PREMIUM SUCCESS STORY — UNIQUE MILESTONE SECTIONS
==============================================================*/

.ts-story-section{
    position:relative;
    min-height:600px;
    padding:110px 0;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.story-count{
    display:block;
    margin-bottom:24px;
    color:#9ac818;
    font-size:10px;
    font-weight:800;
    letter-spacing:2.3px;
}

.dark-count{
    color:#7f8999;
}

.ts-story-section h2{
    margin:0 0 25px;
    font-size:52px;
    line-height:1.07;
    letter-spacing:-2px;
}

.ts-story-section h2 span{
    display:block;
    color:#95c11f;
}

.ts-story-section p{
    margin:0;
    font-size:16px;
    line-height:30px;
}

.ts-story-bg-year{
    position:absolute;
    right:3%;
    top:50%;
    transform:translateY(-50%);
    font-size:260px;
    line-height:1;
    font-weight:900;
    letter-spacing:-18px;
    color:rgba(255,255,255,.025);
}


/*==============================================================
2011 FOUNDATION
==============================================================*/

.foundation-story{
    background:
        radial-gradient(
            circle at 85% 40%,
            rgba(149,193,31,.13),
            transparent 30%
        ),
        linear-gradient(125deg,#10192b,#272f63);
}

.foundation-grid{
    display:grid;
    grid-template-columns:1fr 430px;
    gap:110px;
    align-items:center;
}

.foundation-copy{
    max-width:680px;
}

.foundation-copy h2{
    color:#fff;
    font-size:64px;
}

.foundation-copy p{
    color:rgba(255,255,255,.70);
}

.story-year-label{
    display:block;
    margin-bottom:14px;
    color:rgba(255,255,255,.45);
    font-size:14px;
    font-weight:800;
}

.story-small-line{
    width:70px;
    height:3px;
    margin:32px 0 18px;
    background:#95c11f;
}

.foundation-note{
    color:rgba(255,255,255,.40);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.5px;
}

.foundation-visual{
    position:relative;
    width:390px;
    height:390px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.foundation-orbit{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
}

.orbit-one{
    width:370px;
    height:370px;
}

.orbit-two{
    width:285px;
    height:285px;
    border-color:rgba(149,193,31,.25);
}

.foundation-center{
    position:relative;
    z-index:2;
    width:210px;
    height:210px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(14px);
    box-shadow:0 30px 70px rgba(0,0,0,.20);
}

.foundation-center small{
    color:rgba(255,255,255,.50);
    font-weight:800;
    letter-spacing:3px;
}

.foundation-center strong{
    margin:7px 0;
    color:#95c11f;
    font-size:50px;
}

.foundation-center span{
    color:#fff;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
}


/*==============================================================
2013 DOSSIERS
==============================================================*/

.dossiers-story{
    background:#f6f8fb;
}

.dossiers-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:100px;
    align-items:center;
}

.dossiers-number{
    padding:55px;
    border-radius:34px;
    background:#172033;
    box-shadow:0 35px 80px rgba(23,32,51,.15);
}

.dossiers-number > span{
    color:#95c11f;
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.dossiers-number strong{
    display:block;
    margin:30px 0 5px;
    color:#fff;
    font-size:105px;
    line-height:.9;
    letter-spacing:-7px;
}

.dossiers-number strong span{
    color:#95c11f;
}

.dossiers-number h3{
    margin:15px 0 0;
    color:rgba(255,255,255,.65);
    font-size:17px;
}

.dossiers-copy h2{
    color:#172033;
}

.dossiers-copy p{
    color:#687080;
}

.mini-achievements{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:40px;
}

.mini-achievements div{
    padding:22px 15px;
    border-radius:18px;
    background:#fff;
    border:1px solid #e6e9ee;
    text-align:center;
}

.mini-achievements strong{
    display:block;
    color:#172033;
    font-size:22px;
}

.mini-achievements span{
    color:#89909b;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}


/*==============================================================
2014 GMP
==============================================================*/

.gmp-story{
    background:linear-gradient(120deg,#131c30,#232a58);
}

.gmp-grid{
    display:grid;
    grid-template-columns:400px 1fr;
    gap:110px;
    align-items:center;
}

.gmp-symbol{
    text-align:center;
}

.gmp-shield{
    width:260px;
    height:300px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50% 50% 45% 45%;
    border:2px solid rgba(149,193,31,.40);
    background:rgba(255,255,255,.05);
    box-shadow:
        0 0 70px rgba(149,193,31,.13),
        inset 0 0 70px rgba(149,193,31,.05);
}

.gmp-shield i{
    color:#95c11f;
    font-size:95px;
}

.gmp-symbol > span{
    display:block;
    margin-top:25px;
    color:rgba(255,255,255,.40);
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.gmp-copy h2{
    color:#fff;
}

.gmp-copy p{
    color:rgba(255,255,255,.68);
}

.gmp-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
}

.gmp-tags span{
    padding:12px 17px;
    border-radius:20px;
    color:#fff;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    font-size:10px;
    font-weight:700;
}

.gmp-tags i{
    margin-right:7px;
    color:#95c11f;
}


/*==============================================================
2015 GROWTH FLOW
==============================================================*/

.project-growth-story{
    background:#fff;
}

.growth-header{
    max-width:760px;
    margin-bottom:65px;
}

.growth-header h2{
    color:#172033;
}

.growth-flow{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.growth-card{
    width:28%;
    min-height:240px;
    padding:32px;
    border-radius:26px;
    border:1px solid #e1e5eb;
    background:#f8f9fb;
    transition:.3s;
}

.growth-card.featured{
    background:#172033;
    transform:translateY(-15px);
}

.growth-card:hover{
    transform:translateY(-10px);
}

.growth-card span{
    color:#95c11f;
    font-size:10px;
    font-weight:800;
}

.growth-card i{
    display:block;
    margin:30px 0 24px;
    color:#95c11f;
    font-size:35px;
}

.growth-card h3{
    color:#172033;
    font-size:20px;
    line-height:1.4;
}

.growth-card.featured h3{
    color:#fff;
}

.growth-arrow{
    color:#95c11f;
    font-size:35px;
}


/*==============================================================
2016 ENVIRONMENT
==============================================================*/

.environment-story{
    background:
        radial-gradient(circle at 80% 50%,rgba(149,193,31,.18),transparent 27%),
        linear-gradient(130deg,#101b24,#16372d);
}

.environment-grid{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:110px;
    align-items:center;
}

.environment-copy h2{
    color:#fff;
}

.environment-copy p{
    color:rgba(255,255,255,.68);
}

.environment-services{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
}

.environment-services span{
    padding:11px 16px;
    border-radius:20px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.11);
    color:#fff;
    font-size:10px;
    font-weight:700;
}

.environment-stat{
    text-align:center;
}

.leaf-circle{
    width:160px;
    height:160px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(149,193,31,.12);
    border:1px solid rgba(149,193,31,.30);
}

.leaf-circle i{
    color:#95c11f;
    font-size:65px;
}

.environment-stat strong{
    display:block;
    color:#95c11f;
    font-size:65px;
}

.environment-stat span{
    color:#fff;
    font-size:11px;
    font-weight:800;
}


/*==============================================================
2017–18 TURNKEY
==============================================================*/

.turnkey-story{
    background:#131d31;
}

.blueprint-grid-lines{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:40px 40px;
}

.turnkey-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:100px;
    align-items:center;
}

.turnkey-big-word{
    color:rgba(255,255,255,.045);
    font-size:105px;
    font-weight:900;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
}

.turnkey-copy h2{
    color:#fff;
}

.turnkey-copy p{
    color:rgba(255,255,255,.68);
}

.turnkey-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:38px;
}

.turnkey-metrics div{
    padding:22px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
}

.turnkey-metrics strong{
    display:block;
    color:#95c11f;
    font-size:26px;
}

.turnkey-metrics span{
    color:#fff;
    font-size:9px;
    font-weight:700;
}


/*==============================================================
2019 FIFTY
==============================================================*/

.fifty-story{
    background:#f7f8fb;
}

.fifty-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:100px;
    align-items:center;
}

.fifty-number{
    text-align:center;
}

.fifty-number > span{
    color:#95c11f;
    font-size:12px;
    font-weight:800;
    letter-spacing:3px;
}

.fifty-number strong{
    display:block;
    margin:12px 0;
    color:#172033;
    font-size:150px;
    line-height:.9;
    letter-spacing:-10px;
}

.fifty-number strong span{
    color:#95c11f;
}

.fifty-number small{
    color:#858c98;
    font-weight:800;
    letter-spacing:2px;
}

.fifty-copy h2{
    color:#172033;
}

.fifty-copy p{
    color:#687080;
}

.award-strip{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:35px;
    padding:22px;
    border-radius:20px;
    background:#fff;
    border:1px solid #e2e6eb;
}

.award-strip i{
    color:#95c11f;
    font-size:35px;
}

.award-strip strong{
    display:block;
    color:#172033;
}

.award-strip span{
    color:#7b838e;
    font-size:11px;
}


/*==============================================================
2020 COVID
==============================================================*/

.covid-story{
    background:linear-gradient(130deg,#111827,#282d58);
}

.covid-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr .8fr;
    gap:100px;
    align-items:center;
}

.covid-copy h2{
    color:#fff;
}

.covid-copy p{
    color:rgba(255,255,255,.68);
}

.covid-metrics{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.covid-metrics div{
    padding:40px 25px;
    border-radius:28px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.11);
    text-align:center;
}

.covid-metrics strong{
    display:block;
    color:#95c11f;
    font-size:55px;
}

.covid-metrics span{
    color:#fff;
    font-size:10px;
    font-weight:700;
}


/*==============================================================
2021 HUNDRED PROJECTS
==============================================================*/

.hundred-story{
    background:#fff;
}

.hundred-header{
    max-width:760px;
    margin-bottom:55px;
}

.hundred-header h2{
    color:#172033;
}

.project-progress{
    max-width:1000px;
    margin:auto;
}

.progress-top,
.progress-bottom{
    display:flex;
    justify-content:space-between;
}

.progress-top{
    margin-bottom:18px;
    color:#687080;
}

.progress-top strong{
    color:#172033;
}

.progress-track{
    position:relative;
    height:8px;
    border-radius:10px;
    background:#e7eaf0;
}

.progress-fill{
    width:95%;
    height:100%;
    border-radius:10px;
    background:linear-gradient(90deg,#453e8e,#95c11f);
}

.progress-dot{
    position:absolute;
    left:94%;
    top:50%;
    width:22px;
    height:22px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#95c11f;
    box-shadow:0 0 0 7px rgba(149,193,31,.15);
}

.progress-bottom{
    margin-top:15px;
    color:#969da8;
    font-size:10px;
}

.hundred-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:50px;
}

.hundred-metrics div{
    padding:30px;
    border-radius:22px;
    background:#f7f8fb;
    border:1px solid #e5e8ed;
    text-align:center;
}

.hundred-metrics strong{
    display:block;
    color:#95c11f;
    font-size:38px;
}

.hundred-metrics span{
    color:#687080;
    font-size:10px;
    font-weight:800;
}


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

.global-story{
    background:
        radial-gradient(circle at 75% 50%,rgba(149,193,31,.14),transparent 30%),
        linear-gradient(130deg,#111a2c,#292f62);
}

.global-grid{
    display:grid;
    grid-template-columns:1fr 430px;
    gap:110px;
    align-items:center;
}

.global-copy h2{
    color:#fff;
}

.global-copy p{
    color:rgba(255,255,255,.68);
}

.global-project-count{
    margin-top:35px;
}

.global-project-count strong{
    display:block;
    color:#95c11f;
    font-size:55px;
}

.global-project-count span{
    color:#fff;
    font-size:11px;
    font-weight:800;
}

.global-visual{
    text-align:center;
}

.globe-circle{
    position:relative;
    width:340px;
    height:340px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
}

.globe-circle > i{
    color:rgba(255,255,255,.15);
    font-size:210px;
}

.global-pin{
    position:absolute;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#95c11f;
    box-shadow:0 0 0 8px rgba(149,193,31,.13);
}

.pin-one{ top:27%; left:31%; }
.pin-two{ top:43%; right:24%; }
.pin-three{ bottom:27%; left:43%; }
.pin-four{ top:57%; left:22%; }

.global-caption{
    display:block;
    margin-top:22px;
    color:rgba(255,255,255,.45);
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}


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

@media(max-width:900px){

    .foundation-grid,
    .dossiers-grid,
    .gmp-grid,
    .environment-grid,
    .turnkey-grid,
    .fifty-grid,
    .covid-grid,
    .global-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .foundation-visual,
    .globe-circle{
        margin:auto;
    }

    .growth-flow{
        flex-direction:column;
        gap:18px;
    }

    .growth-card{
        width:100%;
    }

    .growth-arrow{
        transform:rotate(90deg);
    }

    .turnkey-big-word{
        writing-mode:horizontal-tb;
        transform:none;
        font-size:60px;
    }
}


@media(max-width:650px){

    .ts-story-section{
        min-height:auto;
        padding:75px 20px;
    }

    .ts-story-section h2{
        font-size:38px;
        letter-spacing:-1px;
    }

    .foundation-copy h2{
        font-size:42px;
    }

    .foundation-visual{
        width:280px;
        height:280px;
    }

    .orbit-one{
        width:270px;
        height:270px;
    }

    .orbit-two{
        width:210px;
        height:210px;
    }

    .foundation-center{
        width:170px;
        height:170px;
    }

    .dossiers-number strong{
        font-size:75px;
    }

    .mini-achievements,
    .turnkey-metrics,
    .hundred-metrics{
        grid-template-columns:1fr;
    }

    .covid-metrics{
        grid-template-columns:1fr;
    }

    .fifty-number strong{
        font-size:100px;
    }

    .globe-circle{
        width:260px;
        height:260px;
    }

    .globe-circle > i{
        font-size:160px;
    }

}/*==============================================================
FIX 1 — SUCCESS STORIES HERO + INTRO
==============================================================*/

.journey-hero{
    position:relative;
    min-height:610px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(149,193,31,.14),
            transparent 32%
        ),
        linear-gradient(
            125deg,
            #10192b 0%,
            #192441 52%,
            #30356f 100%
        );
}

.journey-hero::before{
    content:"";

    position:absolute;
    inset:0;

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

    background-size:65px 65px;

    pointer-events:none;
}


.journey-hero-layout{
    position:relative;
    z-index:2;

    display:grid;

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

    gap:90px;

    align-items:center;
}


.journey-hero-copy{
    max-width:800px;
}


.journey-eyebrow{
    display:inline-block;

    margin-bottom:20px;

    color:#95c11f;

    font-size:11px;
    font-weight:800;

    letter-spacing:2.5px;

    text-transform:uppercase;
}


.journey-hero h1{
    margin:0 0 25px;

    color:#ffffff !important;

    font-size:66px;
    line-height:1.04;

    letter-spacing:-3px;
}


.journey-hero h1 span{
    display:block;

    color:#95c11f !important;
}


.journey-hero-copy p{
    max-width:700px;

    margin:0;

    color:rgba(255,255,255,.72) !important;

    font-size:17px;
    line-height:31px;
}


.journey-scroll-btn{
    display:inline-flex;

    align-items:center;
    gap:14px;

    margin-top:35px;

    padding:14px 25px;

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

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

    color:#ffffff !important;

    font-size:11px;
    font-weight:800;

    text-decoration:none;

    transition:.3s ease;
}


.journey-scroll-btn:hover{
    background:#95c11f;
    border-color:#95c11f;

    transform:translateY(-3px);
}


/* RIGHT SIDE YEAR CARD */

.journey-hero-year{
    padding:38px 34px;

    border-radius:30px;

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

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

    backdrop-filter:blur(16px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.20);
}


.hero-since{
    display:block;

    margin-bottom:7px;

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

    font-size:10px;
    font-weight:800;

    letter-spacing:3px;
}


.journey-hero-year strong{
    display:block;

    color:#95c11f;

    font-size:74px;
    line-height:1;

    letter-spacing:-5px;
}


.journey-hero-year p{
    margin:18px 0 0;

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

    font-size:13px;
    line-height:23px;
}


/*==============================================================
TOP STATISTICS
==============================================================*/

.journey-highlights{
    position:relative;

    z-index:10;

    margin-top:-42px;
}


.journey-highlight-grid{
    display:grid;

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

    overflow:hidden;

    border-radius:24px;

    background:#ffffff;

    border:1px solid #e5e8ed;

    box-shadow:
        0 25px 65px rgba(23,32,51,.12);
}


.journey-highlight{
    position:relative;

    padding:32px 20px;

    text-align:center;
}


.journey-highlight:not(:last-child)::after{
    content:"";

    position:absolute;

    right:0;
    top:25%;

    width:1px;
    height:50%;

    background:#e3e7ec;
}


.journey-highlight strong{
    display:block;

    margin-bottom:8px;

    color:#172033;

    font-size:32px;
    line-height:1;

    font-weight:800;
}


.journey-highlight span{
    color:#727b88;

    font-size:10px;
    font-weight:800;

    letter-spacing:.7px;

    text-transform:uppercase;
}


/*==============================================================
JOURNEY INTRO
==============================================================*/

.journey-intro{
    padding:120px 0 90px;

    background:#ffffff;
}


.journey-intro-grid{
    display:grid;

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

    gap:90px;

    align-items:center;
}


.journey-small-label{
    display:block;

    margin-bottom:15px;

    color:#95c11f;

    font-size:10px;
    font-weight:800;

    letter-spacing:2px;
}


.journey-intro h2{
    margin:0;

    color:#172033 !important;

    font-size:48px;
    line-height:1.1;

    letter-spacing:-1.5px;
}


.journey-intro h2 span{
    display:block;

    color:#95c11f !important;
}


.journey-intro-text{
    padding-left:45px;

    border-left:1px solid #e1e5ea;
}


.journey-intro-text p{
    margin:0 0 15px;

    color:#687080;

    font-size:15px;
    line-height:29px;
}
/*==============================================================
FIX 2 — WHO GMP VISUAL
==============================================================*/

.gmp-shield{
    position:relative;

    width:270px;
    height:310px;

    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:
        48% 48% 44% 44% /
        35% 35% 60% 60%;

    border:2px solid rgba(149,193,31,.52);

    background:
        radial-gradient(
            circle at center,
            rgba(149,193,31,.12),
            rgba(255,255,255,.025) 60%
        );

    box-shadow:
        0 0 60px rgba(149,193,31,.10),
        inset 0 0 55px rgba(149,193,31,.05);
}


.gmp-shield::before{
    content:"";

    position:absolute;

    inset:18px;

    border-radius:
        48% 48% 44% 44% /
        35% 35% 60% 60%;

    border:
        1px solid rgba(149,193,31,.20);
}


.gmp-center-mark{
    position:relative;

    z-index:2;

    text-align:center;
}


.gmp-center-mark strong{
    display:block;

    color:#ffffff;

    font-size:36px;
    line-height:1;

    font-weight:800;
}


.gmp-center-mark span{
    display:block;

    margin-top:5px;

    color:#95c11f;

    font-size:48px;
    line-height:1;

    font-weight:900;

    letter-spacing:-2px;
}


.gmp-center-mark small{
    display:block;

    margin-top:13px;

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

    font-size:8px;
    font-weight:800;

    letter-spacing:1.8px;
}

/*==============================================================
FIX 3 — FUTURE / NEXT CHAPTER
==============================================================*/

.journey-future{
    padding:110px 0;

    background:#f7f8fb;
}


.journey-future-box{
    position:relative;

    overflow:hidden;

    padding:75px 70px;

    border-radius:34px;

    background:
        linear-gradient(
            125deg,
            #111a2c,
            #2e3471
        );

    box-shadow:
        0 30px 80px rgba(23,32,51,.17);
}


.journey-future-box::before{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-170px;
    top:-230px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(149,193,31,.22),
            transparent 68%
        );
}


.journey-future-box::after{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:#95c11f;
}


.journey-future-box > *{
    position:relative;

    z-index:2;
}


.journey-future-box > span{
    display:block;

    margin-bottom:15px;

    color:#95c11f;

    font-size:10px;
    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;
}


.journey-future h2{
    margin:0 0 20px;

    color:#ffffff !important;

    font-size:48px;
    line-height:1.1;

    letter-spacing:-1px;
}


.journey-future p{
    max-width:720px;

    margin:0;

    color:rgba(255,255,255,.70) !important;

    font-size:15px;
    line-height:29px;
}


.journey-future a{
    display:inline-flex;

    align-items:center;
    gap:14px;

    margin-top:32px;

    padding:15px 27px;

    border-radius:28px;

    background:#95c11f;

    color:#ffffff !important;

    font-size:11px;
    font-weight:800;

    text-decoration:none;

    text-transform:uppercase;

    transition:.3s ease;
}


.journey-future a:hover{
    background:#7fa817;

    transform:translateY(-4px);

    box-shadow:
        0 15px 35px rgba(149,193,31,.24);
}

.environment-visual{
    position:relative;
    width:320px;
    height:360px;
    margin:auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.environment-circle{
    width:170px;
    height:170px;

    border-radius:50%;

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    background:
        radial-gradient(
            circle,
            rgba(149,193,31,.18),
            rgba(149,193,31,.03)
        );

    border:2px solid rgba(149,193,31,.30);

    box-shadow:
        0 0 45px rgba(149,193,31,.25),
        inset 0 0 25px rgba(149,193,31,.10);
}

.eco-leaf{
    width:90px;
    height:90px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#95c11f;

    box-shadow:
        0 15px 40px rgba(149,193,31,.45);
}

.eco-leaf i{
    color:#ffffff;
    font-size:42px;
}

.environment-count{
    margin-top:35px;
    text-align:center;
}

.environment-count strong{
    display:block;

    font-size:68px;
    line-height:1;

    color:#95c11f;

    font-weight:800;
}

.environment-count span{
    display:block;

    margin-top:10px;

    color:#ffffff;

    font-size:15px;
    font-weight:700;
}


/* rotating rings */

.eco-orbit{
    position:absolute;

    border-radius:50%;

    border:1px dashed rgba(149,193,31,.22);

    animation:ecoRotate 16s linear infinite;
}

.orbit-1{
    width:230px;
    height:230px;

    top:32px;
}

.orbit-2{
    width:280px;
    height:280px;

    top:7px;

    animation-duration:28s;
    animation-direction:reverse;
}

@keyframes ecoRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}


/* floating particles */

.eco-particle{
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#95c11f;

    box-shadow:
        0 0 15px #95c11f;

    animation:
        floatParticle 4s ease-in-out infinite;
}

.p1{
    top:45px;
    left:65px;
}

.p2{
    top:95px;
    right:30px;
    animation-delay:1s;
}

.p3{
    top:200px;
    left:40px;
    animation-delay:2s;
}

.p4{
    top:230px;
    right:65px;
    animation-delay:3s;
}

@keyframes floatParticle{

    0%,
    100%{
        transform:translateY(0);
        opacity:.4;
    }

    50%{
        transform:translateY(-18px);
        opacity:1;
    }
}