/* =====================================================
   PREMIUM FARM-TO-HOME JOURNEY
   LIGHT SPICEST WEBSITE THEME
===================================================== */

.journey-section{
    --j-olive: #7A8B5A;
    --j-olive-dark: #52623E;
    --j-olive-deep: #34402A;

    --j-orange: #F28A2E;
    --j-gold: #D6B36A;

    --j-cream: #F7F4EA;
    --j-paper: #FCFAF5;
    --j-soft: #EEF1E7;

    --j-dark: #20241D;
    --j-text: #343A30;
    --j-muted: #777D72;

    --journey-progress: 25%;

    position: relative;

    padding: 110px 0 95px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            #FCFAF5 0%,
            #F6F3E9 52%,
            #F9F7F0 100%
        );
}


/* =====================================================
   BACKGROUND WORD
===================================================== */

.journey-bg-word{
    position: absolute;

    top: 35px;
    right: -20px;

    z-index: -2;

    color:
        rgba(122,139,90,.035);

    font-size:
        clamp(130px, 22vw, 330px);

    font-weight: 1000;

    line-height: .8;

    letter-spacing: -20px;

    user-select: none;

    pointer-events: none;
}


/* =====================================================
   SUBTLE GRAIN / GRID
===================================================== */

.journey-grain{
    position: absolute;
    inset: 0;

    z-index: -3;

    opacity: .35;

    pointer-events: none;

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

    background-size:
        42px 42px;
}


.journey-container{
    position: relative;

    z-index: 3;
}


/* =====================================================
   HEADER
===================================================== */

.journey-header{
    display: grid;

    grid-template-columns:
        1.25fr .75fr;

    align-items: end;

    gap: 70px;

    margin-bottom: 70px;
}


/* Kicker */

.journey-kicker{
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color:
        var(--j-olive-dark);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.journey-kicker-icon{
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius:
        50% 50% 50% 12px;

    color:
        var(--j-olive-dark);

    background:
        #E5EBD9;

    border:
        1px solid
        rgba(122,139,90,.14);

    box-shadow:
        0 10px 25px
        rgba(122,139,90,.10);
}


/* =====================================================
   TITLE
===================================================== */

.journey-title{
    margin: 0;

    max-width: 780px;

    color:
        var(--j-dark);

    font-size:
        clamp(43px, 5vw, 72px);

    font-weight: 950;

    line-height: 1.01;

    letter-spacing: -3.7px;
}


.journey-title span{
    color:
        var(--j-olive);
}


.journey-title em{
    position: relative;

    display: inline-block;

    color:
        var(--j-dark);

    font-style: normal;
}


/* Marker underline */

.journey-title em::after{
    content: "";

    position: absolute;

    left: 1%;
    right: 0;
    bottom: -7px;

    z-index: -1;

    height: 9px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            rgba(242,138,46,.42),
            rgba(214,179,106,.22),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 1.1s
        cubic-bezier(.22,1,.36,1)
        .6s;
}


.journey-section.is-visible
.journey-title em::after{
    transform:
        scaleX(1);
}


/* =====================================================
   HEADER RIGHT
===================================================== */

.journey-header-right{
    padding-bottom: 6px;
}


.journey-small-index{
    display: block;

    margin-bottom: 15px;

    color:
        var(--j-orange);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1.7px;
}


.journey-header-right p{
    margin: 0;

    color:
        var(--j-muted);

    font-size: 15px;

    line-height: 1.9;
}


.journey-header-line{
    width: 100%;
    height: 2px;

    margin-top: 22px;

    overflow: hidden;

    background:
        rgba(122,139,90,.10);
}


.journey-header-line span{
    display: block;

    width: 48%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--j-olive),
            var(--j-orange)
        );

    transform:
        translateX(-110%);

    transition:
        transform 1.2s
        cubic-bezier(.22,1,.36,1)
        .55s;
}


.journey-section.is-visible
.journey-header-line span{
    transform:
        translateX(0);
}


/* =====================================================
   JOURNEY BOARD
===================================================== */

.journey-board{
    position: relative;

    display: grid;

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

    align-items: stretch;

    gap: 18px;

    padding-top: 38px;
}


/* =====================================================
   CONNECTION TRACK
===================================================== */

.journey-track{
    position: absolute;

    top: 8px;
    left: 7%;
    right: 7%;

    height: 2px;

    z-index: 0;
}


.journey-track-base{
    position: absolute;

    inset: 0;

    background:
        rgba(122,139,90,.14);
}


.journey-track-progress{
    position: absolute;

    left: 0;
    top: 0;

    width:
        var(--journey-progress);

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--j-olive),
            #A3B483,
            var(--j-orange)
        );

    transition:
        width .7s
        cubic-bezier(.22,1,.36,1);

    box-shadow:
        0 0 15px
        rgba(122,139,90,.22);
}


/* Track points */

.journey-track::before,
.journey-track::after{
    content: "";

    position: absolute;

    top: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--j-olive);

    transform:
        translateY(-50%);

    box-shadow:
        0 0 0 6px
        rgba(122,139,90,.10);
}


.journey-track::before{
    left: 0;
}


.journey-track::after{
    right: 0;
}


/* =====================================================
   CARDS
===================================================== */

.journey-card{
    position: relative;

    z-index: 2;

    min-height: 445px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding: 22px;

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

    border:
        1px solid
        rgba(122,139,90,.13);

    box-shadow:
        0 18px 50px
        rgba(55,64,46,.06);

    transition:
        transform .55s
        cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        border-color .4s ease,
        background .4s ease;
}


/* Different card silhouettes */

.journey-card-1{
    border-radius:
        5px 34px 34px 34px;
}


.journey-card-2{
    border-radius:
        34px 5px 34px 34px;

    transform:
        translateY(18px);
}


.journey-card-3{
    border-radius:
        34px 34px 5px 34px;
}


.journey-card-4{
    border-radius:
        34px 34px 34px 5px;

    transform:
        translateY(18px);
}


/* Top accent reveal */

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

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--j-olive),
            var(--j-orange)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .55s
        cubic-bezier(.22,1,.36,1);
}


/* Large watermark */

.journey-card::after{
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -80px;
    bottom: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(122,139,90,.10),
            transparent 68%
        );

    pointer-events: none;
}


/* Hover / active */

.journey-card:hover,
.journey-card.is-active{
    border-color:
        rgba(122,139,90,.26);

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

    box-shadow:
        0 30px 75px
        rgba(55,64,46,.12);
}


.journey-card-1:hover,
.journey-card-3:hover,
.journey-card-1.is-active,
.journey-card-3.is-active{
    transform:
        translateY(-10px);
}


.journey-card-2:hover,
.journey-card-4:hover,
.journey-card-2.is-active,
.journey-card-4.is-active{
    transform:
        translateY(8px);
}


.journey-card:hover::before,
.journey-card.is-active::before{
    transform:
        scaleX(1);
}


/* =====================================================
   CARD TOP
===================================================== */

.journey-card-top{
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;
}


.journey-step{
    display: inline-flex;

    align-items: center;

    min-height: 27px;

    padding:
        0 10px;

    border-radius: 999px;

    color:
        var(--j-olive-dark);

    background:
        var(--j-soft);

    font-size: 11.5px;

    font-weight: 900;

    letter-spacing: 1px;
}


.journey-number{
    color:
        rgba(32,36,29,.07);

    font-size: 48px;

    font-weight: 1000;

    line-height: .8;

    letter-spacing: -4px;

    transition:
        color .4s ease,
        transform .5s
        cubic-bezier(.22,1,.36,1);
}


.journey-card:hover
.journey-number,
.journey-card.is-active
.journey-number{
    color:
        rgba(122,139,90,.18);

    transform:
        translateY(4px);
}


/* =====================================================
   ICON BOX
===================================================== */

.journey-icon-box{
    position: relative;

    width: 72px;
    height: 72px;

    display: grid;

    place-items: center;

    margin-top: 30px;

    border-radius:
        22px 22px 22px 6px;

    color:
        var(--j-olive-dark);

    background:
        linear-gradient(
            145deg,
            #E8EDDF,
            #F5F7F0
        );

    border:
        1px solid
        rgba(122,139,90,.14);

    box-shadow:
        0 14px 32px
        rgba(122,139,90,.10);

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1),
        background .4s ease,
        color .4s ease;
}


.journey-icon-box > i{
    position: relative;

    z-index: 2;

    font-size: 26px;
}


/* Tiny orange signature mark */

.journey-icon-mark{
    position: absolute;

    width: 12px;
    height: 12px;

    right: -4px;
    bottom: 9px;

    border-radius: 50%;

    background:
        var(--j-orange);

    border:
        3px solid #fff;

    transition:
        transform .45s
        cubic-bezier(.22,1,.36,1);
}


.journey-card:hover
.journey-icon-box,
.journey-card.is-active
.journey-icon-box{
    color: #fff;

    background:
        var(--j-olive);

    transform:
        translateY(-5px);
}


.journey-card:hover
.journey-icon-mark,
.journey-card.is-active
.journey-icon-mark{
    transform:
        scale(1.35);
}


/* =====================================================
   CARD CONTENT
===================================================== */

.journey-card-content{
    margin-top: 27px;
}


.journey-card-content h3{
    margin: 0;

    color:
        var(--j-dark);

    font-size: 23px;

    font-weight: 900;

    line-height: 1.12;

    letter-spacing: -.8px;
}


.journey-card-content h3 span{
    display: block;

    margin-top: 3px;

    color:
        var(--j-olive);
}


.journey-card-content p{
    margin:
        15px 0 0;

    color:
        var(--j-muted);

    font-size: 13px;

    line-height: 1.78;
}


/* =====================================================
   CARD FOOTER
===================================================== */

.journey-card-footer{
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: auto;

    padding-top: 24px;
}


.journey-card-footer > span:first-child{
    display: flex;

    align-items: center;

    gap: 7px;

    color:
        var(--j-text);

    font-size: 10px;

    font-weight: 800;
}


.journey-card-footer > span:first-child i{
    color:
        var(--j-olive);

    font-size: 9px;
}


.journey-arrow{
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    color:
        var(--j-olive-dark);

    background:
        var(--j-soft);

    font-size: 10px;

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1),
        background .35s ease,
        color .35s ease;
}


.journey-card:hover
.journey-arrow,
.journey-card.is-active
.journey-arrow{
    color: #fff;

    background:
        var(--j-orange);

    transform:
        translateX(4px);
}


/* =====================================================
   TRUST STRIP
===================================================== */

.journey-trust{
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        1fr 1.4fr auto;

    align-items: center;

    gap: 30px;

    margin-top: 58px;

    padding:
        17px 18px 17px 22px;

    border-radius:
        22px;

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

    border:
        1px solid
        rgba(122,139,90,.13);

    box-shadow:
        0 20px 55px
        rgba(55,64,46,.07);
}


/* Trust intro */

.journey-trust-intro{
    display: flex;

    align-items: center;

    gap: 12px;
}


.journey-trust-dot{
    position: relative;

    width: 12px;
    height: 12px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--j-olive);

    box-shadow:
        0 0 0 7px
        rgba(122,139,90,.10);
}


.journey-trust-intro div{
    display: flex;

    flex-direction: column;
}


.journey-trust-intro small{
    color:
        var(--j-orange);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.journey-trust-intro strong{
    margin-top: 3px;

    color:
        var(--j-dark);

    font-size: 15.5px;

    font-weight: 850;
}


/* Trust items */

.journey-trust-items{
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 24px;

    flex-wrap: wrap;
}


.journey-trust-items span{
    display: flex;

    align-items: center;

    gap: 8px;

    color:
        #4e5349;

    font-size: 13.5px;

    font-weight: 750;
}


.journey-trust-items i{
    color:
        var(--j-olive);

    font-size: 14px;
}


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

.journey-btn{
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    min-height: 52px;

    overflow: hidden;

    padding:
        7px 8px 7px 20px;

    border-radius: 999px;

    color: #fff;

    background:
        var(--j-olive);

    text-decoration: none;

    font-size: 11px;

    font-weight: 850;

    box-shadow:
        0 15px 35px
        rgba(122,139,90,.20);

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;
}


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

    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        var(--j-orange);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform .45s
        cubic-bezier(.22,1,.36,1);
}


.journey-btn:hover::before{
    transform:
        scaleX(1);

    transform-origin:
        left;
}


.journey-btn > span{
    position: relative;

    z-index: 2;
}


.journey-btn-icon{
    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--j-olive-dark);

    background: #fff;

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1);
}


.journey-btn:hover{
    color: #fff;

    transform:
        translateY(-3px);

    box-shadow:
        0 22px 45px
        rgba(242,138,46,.22);
}


.journey-btn:hover
.journey-btn-icon{
    transform:
        translateX(3px);
}


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

.journey-reveal{
    opacity: 0;

    transform:
        translateY(34px);

    transition:
        opacity .8s
        cubic-bezier(.22,1,.36,1),
        transform .95s
        cubic-bezier(.22,1,.36,1);
}


.journey-header-left{
    transition-delay: .08s;
}


.journey-header-right{
    transition-delay: .22s;
}


.journey-card-1{
    transition-delay: .12s;
}


.journey-card-2{
    transition-delay: .22s;
}


.journey-card-3{
    transition-delay: .32s;
}


.journey-card-4{
    transition-delay: .42s;
}


.journey-trust{
    transition-delay: .52s;
}


.journey-section.is-visible
.journey-reveal{
    opacity: 1;
}


/* Important:
   preserve staggered card shape
*/

.journey-section.is-visible
.journey-header-left,
.journey-section.is-visible
.journey-header-right,
.journey-section.is-visible
.journey-card-1,
.journey-section.is-visible
.journey-card-3,
.journey-section.is-visible
.journey-trust{
    transform:
        translateY(0);
}


.journey-section.is-visible
.journey-card-2,
.journey-section.is-visible
.journey-card-4{
    transform:
        translateY(18px);
}


/* =====================================================
   RESPONSIVE - LARGE TABLET
===================================================== */

@media(max-width:1199.98px){

    .journey-section{
        padding:
            95px 0 85px;
    }

    .journey-header{
        gap: 45px;
    }

    .journey-card{
        min-height: 430px;

        padding: 20px;
    }

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

    .journey-trust{
        grid-template-columns:
            1fr 1fr auto;

        gap: 20px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:991.98px){

    .journey-section{
        padding:
            80px 0 70px;
    }

    .journey-header{
        grid-template-columns:
            1fr;

        gap: 25px;

        margin-bottom: 48px;
    }

    .journey-header-right{
        max-width: 680px;
    }

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

        gap: 18px;

        padding-top: 0;
    }

    .journey-track{
        display: none;
    }

    .journey-card{
        min-height: 400px;
    }

    .journey-card-2,
    .journey-card-4{
        transform: none;
    }

    .journey-section.is-visible
    .journey-card-2,
    .journey-section.is-visible
    .journey-card-4{
        transform: none;
    }

    .journey-card:hover,
    .journey-card.is-active{
        transform:
            translateY(-7px) !important;
    }

    .journey-trust{
        grid-template-columns:
            1fr;

        gap: 20px;
    }

    .journey-trust-items{
        justify-content:
            flex-start;
    }

    .journey-btn{
        width: 100%;
    }

}


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

@media(max-width:767.98px){

    .journey-section{
        padding:
            70px 0 60px;
    }

    .journey-title{
        font-size:
            clamp(39px, 11vw, 54px);

        letter-spacing:
            -2.6px;
    }

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

    .journey-card{
        min-height: 370px;
    }

    .journey-bg-word{
        font-size: 150px;

        letter-spacing: -10px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:575.98px){

    .journey-section{
        padding:
            60px 0 50px;
    }

    .journey-kicker{
        font-size: 9px;

        letter-spacing: 1.2px;
    }

    .journey-title{
        font-size:
            clamp(36px, 12vw, 48px);

        letter-spacing:
            -2px;
    }

    .journey-header-right p{
        font-size: 14px;
    }

    .journey-card{
        min-height: 350px;

        padding: 20px;
    }

    .journey-card-content h3{
        font-size: 22px;
    }

    .journey-icon-box{
        width: 66px;
        height: 66px;

        margin-top: 24px;
    }

    .journey-trust{
        margin-top: 35px;

        padding: 18px;
    }

    .journey-trust-items{
        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

    .journey-reveal{
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

    .journey-title em::after{
        transform: scaleX(1) !important;

        transition: none !important;
    }

    .journey-header-line span{
        transform: none !important;

        transition: none !important;
    }

    .journey-track-progress{
        transition: none !important;
    }

}