/* =========================================================
                    ASKMIMII JOURNEY
========================================================= */


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

.journey-page{

    width:100%;
    overflow:hidden;

    background:var(--clr-white);
    color:var(--clr-text);

}


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

.journey-hero{

    width:100%;

    min-height:auto;

    padding:120px 4.5% 55px;

    background:
        linear-gradient(
            180deg,
            #fffdfc 0%,
            #fff8fb 100%
        );

}


.journey-hero-container{

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

    margin:auto;

    display:grid;

    grid-template-columns:1.20fr 1.35fr;

    align-items:center;

    gap:55px;

}


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

.journey-hero-content{

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

}


.journey-eyebrow{

    font-family:var(--ff-paragraph);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--clr-primary);

    margin-bottom:18px;

}


.journey-hero-title{

    margin:0 0 22px;

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

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

    line-height:1.12;

    font-weight:500;

    color:var(--clr-heading);

}


.journey-hero-title span{

    color:var(--clr-primary-light);

}


.journey-hero-question{

    max-width:500px;

    margin:0 0 15px;

    font-family:var(--ff-paragraph);

    font-size:1.08rem;

    line-height:1.8;

    font-weight:500;

    color:var(--clr-primary-hover-light);

}


.journey-heart{

    margin:3px 0 20px;

    color:var(--clr-primary-light);

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

    font-size:1.8rem;

}


.journey-hero-text{

    max-width:500px;

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    line-height:1.8;

    color:var(--clr-text);

}


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

.journey-hero-image{

    width:100%;

    max-width: 600px;

    overflow:hidden;

    border-radius:30px;

}


.journey-hero-image img{

    width:100%;

    height:auto;

    display:block;

    object-fit:cover;

    transition:.45s ease;

}


.journey-hero-image:hover img{

    transform:scale(1.025);

}


/* =========================================================
                    STORY SECTIONS
========================================================= */

.journey-story{

    width:100%;

    padding:100px 4.5%;

    background:var(--clr-white);

}


.journey-story-container{

    width:100%;

    max-width:1220px;

    margin:auto;

    display:grid;

    grid-template-columns:55px 390px 1fr;

    align-items:center;

    gap:30px;

}


.journey-story-container h3{

    color: var(--clr-primary-hover-light);

    font-family: var(--ff-paragraph);

    font-weight: 500;

    font-size: 1.1rem;
}
/* =========================================================
                    TIMELINE
========================================================= */

.journey-number-column{

    width:100%;

    height:100%;

    min-height:310px;

    display:flex;

    flex-direction:column;

    align-items:center;

}


.journey-number{

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

    font-size:2.8rem;

    font-weight:300;

    line-height:1;

    color:var(--clr-primary-light);

}


.journey-line{

    width:1px;

    flex:1;

    min-height:170px;

    margin-top:20px;

    background:
        linear-gradient(
            to bottom,
            var(--clr-primary-light),
            rgba(214,170,210,.15)
        );

}


/* =========================================================
                    STORY CONTENT
========================================================= */

.journey-story-content{

    width:100%;

}


.journey-section-label{

    display:block;

    margin-bottom:7px;

    font-family:var(--ff-paragraph);

    font-size:.78rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--clr-heading);

}


.journey-year{

    display:block;

    margin-bottom:22px;

    font-family:var(--ff-paragraph);

    font-size:.88rem;

    color:var(--clr-primary);

}


.journey-story-title{

    margin:0 0 20px;

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

    font-size:clamp(2rem,2.7vw,2.8rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

}


.journey-story-content p{

    max-width:440px;

    margin:0 0 18px;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    line-height:1.8;

    color:var(--clr-text);

}


/* =========================================================
                    WHY BOX
========================================================= */

.journey-question-box{

    width:max-content;

    min-width:145px;

    padding:7px 35px;

    margin-top:8px;

    border-radius:6px;

    background:#fde8f5;

    color:var(--clr-primary);

    font-family:var(--ff-paragraph);

    font-size:1.2rem;

    font-weight:600;

    text-align:center;

}


/* =========================================================
                    PROCESS
========================================================= */

.journey-process{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}


.journey-process-item{

    width:135px;

    text-align:center;

}


.journey-process-icon{

    width:78px;

    height:78px;

    margin:0 auto 13px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #fff1fa,
            #f8eafd
        );

    color:var(--clr-primary);

    font-size:1.7rem;

    transition:.35s ease;

}


.journey-process-item:hover
.journey-process-icon{

    transform:translateY(-6px);

    box-shadow:
        0 12px 28px rgba(214,170,210,.22);

}


.journey-process-item h3{

    margin:0 0 7px;

    font-family:var(--ff-paragraph);

    font-size:.78rem;

    font-weight:600;

    letter-spacing:1px;

    color:var(--clr-heading);

}


.journey-process-item p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:.99rem;

    line-height:1.55;

    color:var(--clr-text);

}


.journey-process-arrow{

    flex-shrink:0;

    color:var(--clr-primary-light);

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

    font-size:1.7rem;

    font-weight:300;

}


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

.journey-story-image{

    width:100%;

    overflow:hidden;

    border-radius:30px;

}


.journey-story-image img{

    width:100%;

    height:auto;

    display:block;

    object-fit:cover;

    transition:.45s ease;

}


.journey-story-image:hover img{

    transform:scale(1.025);

}


/* =========================================================
                    QUOTE
========================================================= */

.journey-quote{

    width:100%;

    max-width:850px;

    margin:38px auto 0;

    padding:16px 30px;

    border-radius:12px;

    background:
        linear-gradient(
            90deg,
            #fde8f6,
            #fff0fa
        );

    color:var(--clr-primary);

    font-family:var(--ff-paragraph);

    font-size:.95rem;

    line-height:1.7;

    text-align:center;

}


.journey-quote strong{

    color:var(--clr-primary);

    font-weight:600;

}


/* =========================================================
                BUILDING PHASE
========================================================= */

.journey-building{

    padding-top:50px;

}


.journey-building-image{

    width:100%;

    overflow:hidden;

    border-radius:30px;

}


.journey-building-image img{

    width:100%;

    height:auto;

    display:block;

    object-fit:cover;

    transition:.45s ease;

}


.journey-building-image:hover img{

    transform:scale(1.025);

}


/* =========================================================
                WHAT I'M BUILDING
========================================================= */

.journey-building-section{

    width:100%;

    padding:60px 4.5% 70px;

    background:#fffafd;

}


.journey-section-container{

    width:100%;

    max-width:1220px;

    margin:auto;

}


.journey-centered-heading{

    max-width:750px;

    margin:0 auto 45px;

    text-align:center;

}


.journey-centered-heading
.journey-section-label{

    margin-bottom:15px;

}


.journey-centered-heading h2{

    margin:0;

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

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

    line-height:1.2;

    font-weight:500;

    color:var(--clr-heading);

}


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

.journey-values-grid{

    display:grid;

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

    gap:15px;

}


.journey-value-card{

    min-height:125px;

    padding:20px;

    display:flex;

    align-items:center;

    gap:15px;

    background:#fff;

    border:1px solid rgba(214,170,210,.35);

    border-radius:15px;

    transition:.35s ease;

}


.journey-value-card:hover{

    transform:translateY(-7px);

    border-color:rgba(214,170,210,.65);

    box-shadow:
        0 15px 35px rgba(214,170,210,.15);

}


.journey-value-icon{

    width:55px;

    height:55px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f5e6ff;

    color:var(--clr-primary);

    font-size:1.1rem;

}


.journey-value-content h3{

    margin:0 0 7px;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    font-weight:600;

    color:var(--clr-heading);

}


.journey-value-content p{

    margin:0;

    font-family:var(--ff-paragraph);

    font-size:.96rem;

    line-height:1.55;

    color:var(--clr-text);

}


/* =========================================================
                    DISCLAIMER
========================================================= */

.journey-disclaimer{

    max-width:850px;

    margin:32px auto 0;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:9px;

    font-family:var(--ff-paragraph);

    font-size:.78rem;

    line-height:1.7;

    text-align:center;

    color:var(--clr-text);

}


.journey-disclaimer span{

    flex-shrink:0;

    color:var(--clr-primary-light);

}


/* =========================================================
                    FUTURE
========================================================= */

.journey-future{

    padding-top:55px;

    padding-bottom:65px;

}


/* =========================================================
                    FINAL CTA
========================================================= */

.journey-final-cta{

    width:100%;

    padding:15px 4.5% 70px;

    background:var(--clr-white);

}


.journey-final-container{

    position:relative;

    width:100%;

    max-width:1100px;

    min-height:210px;

    margin:auto;

    padding:25px 50px;

    display:flex;

    align-items:center;

    overflow:hidden;

    border-radius:28px;

    background: linear-gradient(145deg, #fff1fa, #f8eafd);

}


/* =========================================================
                    CTA CHARACTER
========================================================= */

.journey-final-character{

    position:relative;

    width:225px;

    height:215px;

    flex-shrink:0;

    align-self:flex-end;

    margin-right:35px;

    z-index:2;

}


.journey-final-character img{

    width:120%;

    max-width: 600px;

   

    display:block;

    object-fit:contain;

    object-position:bottom center;

}


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

.journey-final-content{

    position:relative;

    z-index:3;

}


.journey-final-content h2{

    margin:0 0 13px;

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

    font-size:clamp(2rem,3vw,2.8rem);

    line-height:1.15;

    font-weight:500;

    color:var(--clr-heading);

}


.journey-final-content p{

    margin:0 0 20px;

    font-family:var(--ff-paragraph);

    font-size:1rem;

    line-height:1.7;

    color:var(--clr-primary-hover-light);

}


/* =========================================================
                    CTA BUTTONS
========================================================= */

.journey-final-actions{

    display:flex;

    align-items:center;

    gap:15px;

}


.journey-final-primary,
.journey-final-secondary{

   display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 0 34px;
    border-radius: 999px;
    font-family: var(--ff-paragraph);
    font-size: 1rem;
    font-weight: 500;
    transition: .35s ease;
}


.journey-final-primary{

     background: var(--clr-primary-light);
    color: var(--clr-white);}


.journey-final-primary:hover{

     transform: translateY(-4px);
    background: var(--clr-primary-hover-light);


}


.journey-final-secondary{

    background: transparent;
    border: 1px solid var(--clr-primary-light);
    color: var(--clr-primary);

}


.journey-final-secondary:hover{

    
    background: var(--clr-primary-light);
    color: var(--clr-white);

    transform: translateY(-4px);

}


.journey-final-secondary span{

    margin-left:7px;

    transition:.3s ease;

}


.journey-final-secondary:hover span{

    transform:translateX(4px);

}


/* =========================================================
                    CTA DECORATIONS
========================================================= */

.journey-final-decoration{

    position:absolute;

    inset:0;

    pointer-events:none;

}


.journey-moon{

    position:absolute;

    right:55px;

    top:45px;

    color:#f4bd9d;

    font-size:3rem;

    transform:rotate(-25deg);

}


.journey-sparkle{

    position:absolute;

    color:#a66bc1;

    font-size:1.7rem;

}


.sparkle-one{

    right:125px;

    top:28px;

}


.sparkle-two{

    right:45px;

    bottom:32px;

    font-size:1.2rem;

}


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

.journey-process-icon{

    animation:
        journeyFloat 4s ease-in-out infinite;

}


.journey-process-item:nth-child(3)
.journey-process-icon{

    animation-delay:.5s;

}


.journey-process-item:nth-child(5)
.journey-process-icon{

    animation-delay:1s;

}


@keyframes journeyFloat{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}


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

@media(max-width:1100px){

    .journey-hero-container{

        grid-template-columns:1fr 1.15fr;

        gap:35px;

    }


    .journey-story-container{

        grid-template-columns:55px 1fr;

        gap:30px;

    }


    .journey-story-image,
    .journey-building-image,
    .journey-process{

        grid-column:2;

    }


    .journey-values-grid{

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

    }


    .journey-final-container{

        padding-left:35px;

        padding-right:35px;

    }

}


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

@media(max-width:900px){

    .journey-hero{

        padding-top:90px;

    }


    .journey-hero-container{

        grid-template-columns:1fr;

        max-width:750px;

        text-align:center;

    }


    .journey-hero-content{

        max-width:700px;

        margin:auto;

    }


    .journey-hero-question,
    .journey-hero-text{

        max-width:600px;

        margin-left:auto;
        margin-right:auto;

    }


    .journey-hero-image{

        max-width:750px;

        margin:auto;

    }


    .journey-process{

        gap:10px;

    }


    .journey-process-item{

        width:125px;

    }


    .journey-final-character{

        width:190px;

        height:190px;

        margin-right:20px;

    }

}


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

@media(max-width:768px){

    .journey-hero{

        padding:80px 20px 55px;

    }


    .journey-hero-title{

        font-size:2.3rem;

        line-height:1.2;

    }


    .journey-hero-question{

        font-size:.95rem;

    }


    .journey-hero-text{

        font-size:.92rem;

    }


    .journey-hero-image{

        border-radius:22px;

    }


    .journey-story{

        padding:60px 20px;

    }


    .journey-story-container{

        display:flex;

        flex-direction:column;

        gap:25px;

    }


    .journey-number-column{

        width:100%;

        min-height:auto;

        height:auto;

        flex-direction:row;

        justify-content:flex-start;

        align-items:center;

        gap:15px;

    }


    .journey-number{

        font-size:2.3rem;

    }


    .journey-line{

        width:100%;

        height:1px;

        min-height:0;

        margin:0;

        background:
            linear-gradient(
                to right,
                var(--clr-primary-light),
                rgba(214,170,210,.1)
            );

    }


    .journey-story-title{

        font-size:2rem;

    }


    .journey-story-content p{

        max-width:100%;

        font-size:.9rem;

    }


    .journey-question-box{

        margin-left:auto;

        margin-right:auto;

    }


    .journey-process{

        display:grid;

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

        gap:4px;

    }


    .journey-process-item{

        width:auto;

    }


    .journey-process-icon{

        width:65px;

        height:65px;

        font-size:1.35rem;

    }


    .journey-process-item h3{

        font-size:.68rem;

    }


    .journey-process-item p{

        font-size:.68rem;

    }


    .journey-process-arrow{

        align-self:center;

        font-size:1.2rem;

    }


    .journey-story-image,
    .journey-building-image{

        width:100%;

    }


    .journey-quote{

        padding:17px 20px;

        margin-top:30px;

        font-size:.85rem;

    }


    .journey-building-section{

        padding:60px 20px 65px;

    }


    .journey-centered-heading{

        margin-bottom:40px;

    }


    .journey-centered-heading h2{

        font-size:2.2rem;

    }


    .journey-values-grid{

        grid-template-columns:1fr;

    }


    .journey-value-card{

        min-height:105px;

    }


    .journey-disclaimer{

        font-size:.74rem;

    }


    .journey-final-cta{

        padding:15px 20px 60px;

    }


    .journey-final-container{

        min-height:auto;

        padding:0 25px 30px;

        flex-direction:column;

        text-align:center;

    }


    .journey-final-character{

        width:190px;

        height:170px;

        margin:0 auto 5px;

    }


    .journey-final-content h2{

        font-size:2rem;

    }


    .journey-final-content p{

        font-size:.9rem;

    }


    .journey-final-actions{

        flex-direction:column;

        width:100%;

    }


    .journey-final-primary,
    .journey-final-secondary{

        width:100%;

        max-width:260px;

    }


    .journey-moon{

        right:20px;

        top:20px;

        font-size:2.2rem;

    }


    .sparkle-one{

        right:70px;

        top:20px;

    }


    .sparkle-two{

        right:20px;

        bottom:20px;

    }

}


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

@media(max-width:480px){

    .journey-hero{

        padding:75px 16px 45px;

    }


    .journey-hero-title{

        font-size:2rem;

    }


    .journey-hero-question{

        font-size:.9rem;

    }


    .journey-hero-text{

        font-size:.88rem;

    }


    .journey-story{

        padding:50px 16px;

    }


    .journey-story-title{

        font-size:1.8rem;

    }


    .journey-process{

        grid-template-columns:1fr;

        gap:15px;

    }


    .journey-process-arrow{

        transform:rotate(90deg);

    }


    .journey-process-item{

        max-width:170px;

        margin:auto;

    }


    .journey-process-icon{

        width:70px;

        height:70px;

    }


    .journey-value-card{

        padding:18px;

    }


    .journey-value-icon{

        width:48px;

        height:48px;

        font-size:1rem;

    }


    .journey-value-content h3{

        font-size:.95rem;

    }


    .journey-value-content p{

        font-size:.72rem;

    }


    .journey-final-container{

        padding-left:18px;

        padding-right:18px;

    }


    .journey-final-character{

        width:170px;

        height:155px;

    }


    .journey-final-content h2{

        font-size:1.8rem;

    }

}


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

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

    .journey-process-icon{

        animation:none;

    }

    .journey-hero-image img,
    .journey-story-image img,
    .journey-building-image img,
    .journey-value-card,
    .journey-process-icon,
    .journey-final-primary,
    .journey-final-secondary{

        transition:none;

    }

}