/*==================================================
JOURNEY PAGE
Awaken Your Inner Compass
==================================================*/


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

.journey-page{

    background:var(--background);

    color:var(--text);

    overflow:hidden;

}


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

.journey-page-hero{

    position:relative;

    padding:10rem 0 7rem;

    text-align:center;

    overflow:hidden;

}


.journey-page-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top,

        rgba(200,161,90,.08),

        transparent 65%

    );

    pointer-events:none;

}


.journey-page-hero .container{

    position:relative;

    z-index:2;

    max-width:860px;

}




.section-kicker{

    display:inline-block;

    margin-bottom:1.5rem;

    font-size:.82rem;

    letter-spacing:.30em;

    text-transform:uppercase;

    color:var(--gold);

    font-weight:600;

}


.journey-page-hero h1{

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

    font-size:clamp(3.5rem,7vw,6rem);

    font-weight:500;

    line-height:.92;

    letter-spacing:-.03em;

    color:var(--heading);

    margin-bottom:2rem;

}


.journey-page-hero p{

    max-width:700px;

    margin:auto;

    font-size:1.18rem;

    line-height:1.9;

    color:var(--paragraph);

}

/*==================================================
JOURNEY TIMELINE
==================================================*/

.journey-path{

    position:relative;

}


.journey-path .container{

    position:relative;

    max-width:1100px;

}


/*=========================================
CENTER LINE
=========================================*/

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

.journey-path{

    padding:7rem 0;

}

.journey-path .container{

    position:relative;

    max-width:1100px;

}


/* Vertical line */

.journey-line{

    position:absolute;

    top:0;

    bottom:0;

    left:50%;

    width:2px;

    transform:translateX(-50%);

    background:#d9c79c;

}


/*==================================================
STEP
==================================================*/

.journey-step{

    position:relative;

    display:grid;

    grid-template-columns:1fr 120px 1fr;

    align-items:center;

    margin:5rem 0;

}


/*==================================================
LEFT CARD
==================================================*/

.journey-step .journey-content{

    grid-column:1;

    background:#fff;

    padding:3rem;

    border-radius:28px;

    max-width:430px;

    width:100%;

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

}


/*==================================================
RIGHT CARD
==================================================*/

.journey-step.reverse .journey-content{

    grid-column:3;

    margin-left:auto;

    text-align:left;

}


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

.journey-circle{

    grid-column:2;

    width:96px;

    height:96px;

    margin:auto;

    border-radius:50%;

    background:#fff;

    border:2px solid rgba(200,161,90,.5);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:5;

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

}


.journey-circle img{

    width:42px;

    height:42px;

    object-fit:contain;

}


/*==================================================
TEXT
==================================================*/

.journey-number{

    display:block;

    color:var(--gold);

    font-size:.82rem;

    letter-spacing:.30em;

    font-weight:700;

    margin-bottom:1rem;

}


.journey-content h2{

    font-size:2.4rem;

    margin-bottom:1rem;

}


.journey-content p{

    line-height:1.9;

    margin-bottom:1.5rem;

}


/*==================================================
HOVER
==================================================*/

.journey-step:hover .journey-content{

    transform:translateY(-8px);

    transition:.35s;

}


.journey-step:hover .journey-circle{

    transform:scale(1.08);

    transition:.35s;

}

/* Reverse */

.journey-step.reverse .journey-content{

    grid-column:1;

    text-align:right;

}

.journey-step.reverse .journey-circle{

    grid-column:2;

}

.journey-step.reverse{

    direction:rtl;

}

.journey-step.reverse .journey-content *{

    direction:ltr;

}


/*=========================================
CIRCLE
=========================================*/

.journey-circle{

    width:96px;

    height:96px;

    border-radius:50%;

    background:white;

    border:2px solid rgba(200,161,90,.4);

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    box-shadow:

        0 20px 50px rgba(0,0,0,.06);

    transition:.4s;

    z-index:5;

}


.journey-circle img{

    width:42px;

    height:42px;

}


.journey-step:hover .journey-circle{

    transform:translateY(-6px) scale(1.06);

    border-color:var(--gold);

}


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

.journey-content{

    background:white;

    padding:2.8rem;

    border-radius:28px;

    box-shadow:

        0 20px 60px rgba(0,0,0,.05);

    transition:.4s;

}


.journey-step:hover .journey-content{

    transform:translateY(-6px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.08);

}


/*=========================================
NUMBER
=========================================*/

.journey-number{

    display:inline-block;

    font-size:.82rem;

    letter-spacing:.30em;

    text-transform:uppercase;

    color:var(--gold);

    font-weight:700;

    margin-bottom:1rem;

}


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

.journey-content h2{

    font-size:2.3rem;

    margin-bottom:1.2rem;

}


/*=========================================
TEXT
=========================================*/

.journey-content p{

    margin-bottom:1.5rem;

    font-size:1.05rem;

}


/*=========================================
LINK
=========================================*/

.journey-content a{

    text-decoration:none;

}


/*==================================================
SECTION SPACING
==================================================*/

.journey-path{

    position:relative;

    padding:6rem 0;

}

.journey-reflection{

    padding:7rem 0;

}

.journey-next{

    padding:7rem 0 8rem;

}


/*==================================================
HEADINGS
==================================================*/

.journey-content h2,

.journey-next h2{

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

    color:var(--heading);

    font-weight:500;

    line-height:1.05;

}


.journey-content p,

.journey-next p{

    color:var(--paragraph);

    line-height:1.9;

}


/*==================================================
LINKS
==================================================*/

.journey-content a{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin-top:1.25rem;

    font-weight:600;

    color:var(--green);

    transition:var(--transition);

}


.journey-content a:hover{

    color:var(--gold);

    transform:translateX(5px);

}

/*=========================================
REFLECTION
=========================================*/

.journey-reflection{

padding:9rem 0;

text-align:center;

position:relative;

}


.reflection-feather{

margin-bottom:2rem;

}


.reflection-feather img{

width:90px;

opacity:.9;

animation:heroFloat 7s ease-in-out infinite;

}


.journey-reflection blockquote{

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

font-size:clamp(2rem,4vw,3.4rem);

line-height:1.25;

max-width:850px;

margin:auto;

color:var(--green);

font-style:italic;

}


.reflection-author{

margin-top:2rem;

letter-spacing:.25em;

text-transform:uppercase;

font-size:.82rem;

color:var(--gold);

}

/*==================================================
TABLET & MOBILE
==================================================*/

@media (max-width:900px){

.journey-line{

    left:38px;

}



.journey-step.reverse{

    direction:ltr;

}

.journey-step.reverse .journey-content{

    text-align:left;

}

.journey-circle{

    width:76px;

    height:76px;

}

.journey-circle img{

    width:34px;

    height:34px;

}

.journey-content{

    grid-column:2;

}

}