/* =========================================================
   STUDENT JOURNEY
   PART 2 — DESKTOP
========================================================= */

.student-journey{
    position:relative;
    overflow:hidden;
    padding:120px 24px 105px;
    background:
        radial-gradient(circle at 78% 43%, rgba(37,99,235,.065), transparent 32%),
        radial-gradient(circle at 18% 48%, rgba(100,116,139,.045), transparent 30%),
        linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.journey-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1480px;
    margin:0 auto;
}


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

.journey-header{
    max-width:950px;
    margin:0 auto 70px;
    text-align:center;
}

.journey-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    padding:9px 18px;
    margin-bottom:22px;

    border-radius:999px;
    background:linear-gradient(135deg,#1747c9,#2563eb);

    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.3px;

    box-shadow:0 10px 26px rgba(37,99,235,.18);
}

.journey-tag svg{
    width:16px;
    height:16px;
}

.journey-header h2{
    margin:0;
    color:#081b4b;

    font-size:clamp(44px,4.5vw,68px);
    line-height:1.04;
    letter-spacing:-2.7px;
    font-weight:900;
}

.journey-header h2 span{
    color:#2563eb;
}

.journey-header > p{
    margin:17px 0 0;

    color:#64748b;
    font-size:19px;
    line-height:1.6;
}

.journey-heading-line{
    width:66px;
    height:4px;
    margin:22px auto 0;

    border-radius:99px;
    background:#2563eb;
}


/* =========================================================
   MAIN COMPARISON
========================================================= */

.journey-comparison{
    position:relative;

    display:grid;
    grid-template-columns:
        minmax(410px,1fr)
        155px
        minmax(500px,1.08fr);

    align-items:stretch;
    gap:24px;
}


/* =========================================================
   COMMON SIDE
========================================================= */

.journey-side{
    position:relative;
    min-width:0;

    padding:30px 28px 28px;

    border-radius:30px;
}


/* LEFT SIDE */

.journey-without{
    background:
        linear-gradient(
            145deg,
            rgba(248,250,252,.96),
            rgba(241,245,249,.82)
        );

    border:1px solid rgba(100,116,139,.13);
}


/* RIGHT SIDE */

.journey-with-campus{
    background:
        radial-gradient(
            circle at 65% 45%,
            rgba(37,99,235,.10),
            transparent 46%
        ),
        linear-gradient(
            145deg,
            rgba(248,251,255,.98),
            rgba(239,246,255,.92)
        );

    border:1px solid rgba(37,99,235,.16);

    box-shadow:
        0 24px 65px rgba(37,99,235,.07);
}


/* =========================================================
   SIDE LABELS
========================================================= */

.journey-side-label{
    width:max-content;
    max-width:100%;

    margin:0 auto 32px;
    padding:9px 18px;

    border-radius:999px;

    text-align:center;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
}

.journey-label-muted{
    color:#64748b;
    background:#e2e8f0;
}

.journey-label-campus{
    color:#fff;

    background:
        linear-gradient(135deg,#1747c9,#2563eb);

    box-shadow:
        0 8px 22px rgba(37,99,235,.18);
}


/* =========================================================
   LEFT — FRAGMENTED LAYOUT
========================================================= */

.fragmented-layout{
    display:grid;
    grid-template-columns:130px 1fr;

    gap:20px;
    align-items:center;
}


/* =========================================================
   LEFT CONSEQUENCES
========================================================= */

.fragmented-effects{
    display:flex;
    flex-direction:column;

    justify-content:center;
    gap:26px;
}

.effect-item{
    display:flex;
    align-items:center;
    gap:11px;

    color:#64748b;
}

.effect-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;

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

    border-radius:50%;

    background:#fff;

    border:1px solid rgba(100,116,139,.18);

    color:#64748b;

    box-shadow:
        0 7px 20px rgba(15,23,42,.05);
}

.effect-icon svg{
    width:20px;
    height:20px;
    stroke-width:1.8;
}

.effect-item span{
    font-size:11px;
    line-height:1.35;
    font-weight:700;
}


/* =========================================================
   LEFT — VERTICAL PATH
========================================================= */

.fragmented-path{
    position:relative;

    display:flex;
    flex-direction:column;

    align-items:center;
}

.fragment-step{
    position:relative;

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

    display:flex;
    align-items:center;

    gap:15px;

    padding:15px 17px;

    border-radius:17px;

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

    border:
        1px solid rgba(100,116,139,.16);

    box-shadow:
        0 10px 30px rgba(15,23,42,.045);
}

.fragment-step-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;

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

    border-radius:14px;

    background:#f1f5f9;
    color:#64748b;
}

.fragment-step-icon svg{
    width:24px;
    height:24px;
    stroke-width:1.7;
}

.fragment-step strong{
    color:#334155;

    font-size:13px;
    line-height:1.4;
    font-weight:750;
}


/* BROKEN / FRAGMENTED FEEL */

.fragment-arrow{
    position:relative;

    height:32px;

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

    color:#94a3b8;
}

.fragment-arrow::before{
    content:"";

    position:absolute;

    left:50%;
    top:0;

    height:100%;

    border-left:
        1px dashed rgba(100,116,139,.35);

    transform:translateX(-50%);
}

.fragment-arrow svg{
    position:relative;
    z-index:2;

    width:17px;
    height:17px;

    padding:2px;

    background:#f4f7fa;
}

.fragment-pressure{
    border-color:
        rgba(239,68,68,.16);

    background:
        linear-gradient(
            135deg,
            #fff,
            #fff8f8
        );
}

.fragment-pressure .fragment-step-icon{
    color:#ef4444;
    background:#fff1f2;
}


/* =========================================================
   LEFT SUMMARY
========================================================= */

.journey-summary{
    display:flex;
    align-items:center;

    gap:16px;

    margin-top:28px;

    padding:18px 20px;

    border-radius:18px;
}

.journey-summary-muted{
    background:
        rgba(226,232,240,.65);

    border:
        1px solid rgba(100,116,139,.11);
}

.journey-summary-icon{
    width:46px;
    height:46px;

    flex:0 0 46px;

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

    border-radius:50%;
}

.journey-summary-muted .journey-summary-icon{
    background:#fff;
    color:#64748b;
}

.journey-summary-icon svg{
    width:23px;
    height:23px;
}

.journey-summary p{
    margin:0;

    font-size:13px;
    line-height:1.55;

    color:#475569;
}

.journey-summary p strong{
    display:block;
    color:#334155;
}


/* =========================================================
   CENTER — STUDENT
========================================================= */

.journey-center{
    position:relative;

    min-height:660px;

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

    z-index:5;
}


/* =========================================================
   VS
========================================================= */

.journey-vs{
    position:absolute;

    z-index:10;

    left:50%;
    top:18px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;

    gap:8px;
}

.journey-vs strong{
    width:52px;
    height:52px;

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

    border-radius:50%;

    background:#081b4b;

    color:#fff;

    font-size:14px;
    font-weight:900;

    border:5px solid #fff;

    box-shadow:
        0 10px 30px rgba(8,27,75,.18);
}

.vs-line{
    width:35px;
    height:1px;
}

.vs-line-left{
    background:
        linear-gradient(
            90deg,
            transparent,
            #94a3b8
        );
}

.vs-line-right{
    background:
        linear-gradient(
            90deg,
            #2563eb,
            transparent
        );
}


/* =========================================================
   STUDENT DECORATIVE ORBITS
========================================================= */

.student-orbit{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    pointer-events:none;
}

.student-orbit-one{
    width:245px;
    height:245px;

    border:
        1px dashed rgba(37,99,235,.22);
}

.student-orbit-two{
    width:190px;
    height:190px;

    border:
        1px solid rgba(37,99,235,.10);
}

.student-dot{
    position:absolute;

    width:9px;
    height:9px;

    border-radius:50%;

    background:#2563eb;

    box-shadow:
        0 0 0 5px rgba(37,99,235,.10);
}

.student-dot-one{
    top:30%;
    right:7px;
}

.student-dot-two{
    bottom:27%;
    left:8px;

    background:#94a3b8;

    box-shadow:
        0 0 0 5px rgba(100,116,139,.09);
}


/* =========================================================
   STUDENT FIGURE
========================================================= */

.student-figure{
    position:relative;

    z-index:6;

    width:220px;

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

.student-glow{
    position:absolute;

    z-index:-1;

    left:50%;
    bottom:15%;

    width:200px;
    height:260px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(37,99,235,.15),
            rgba(37,99,235,.035) 50%,
            transparent 72%
        );

    filter:blur(8px);
}

.student-figure img{
    position:relative;

    width:100%;
    max-height:500px;

    display:block;

    object-fit:contain;

    filter:
        drop-shadow(
            0 24px 28px rgba(15,23,42,.16)
        );
}


/* =========================================================
   RIGHT — MAIN LAYOUT
========================================================= */

.campus-journey-layout{
    display:grid;

    grid-template-columns:
        minmax(220px,.92fr)
        minmax(230px,1.08fr);

    gap:22px;

    align-items:center;
}


/* =========================================================
   INTEGRATED COMPONENTS
========================================================= */

.integrated-components{
    display:flex;
    flex-direction:column;

    align-items:center;
}

.integrated-item{
    width:100%;

    display:flex;
    align-items:center;

    gap:13px;

    padding:14px 15px;

    border-radius:17px;

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

    border:
        1px solid rgba(37,99,235,.15);

    box-shadow:
        0 10px 30px rgba(37,99,235,.055);

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

.integrated-item:hover{
    transform:translateX(4px);

    box-shadow:
        0 15px 38px rgba(37,99,235,.10);
}

.integrated-icon{
    width:48px;
    height:48px;

    flex:0 0 48px;

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

    border-radius:14px;

    background:#eef5ff;

    color:#1557e8;
}

.integrated-icon svg{
    width:24px;
    height:24px;

    stroke-width:1.8;
}

.integrated-copy{
    min-width:0;
}

.integrated-copy h3{
    margin:0 0 4px;

    color:#081b4b;

    font-size:12.5px;
    line-height:1.3;

    font-weight:800;
}

.integrated-copy p{
    margin:0;

    color:#64748b;

    font-size:10.5px;
    line-height:1.4;
}

.integrated-plus{
    position:relative;

    z-index:2;

    width:25px;
    height:25px;

    margin:3px 0;

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

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    font-size:16px;
    font-weight:600;

    box-shadow:
        0 5px 12px rgba(37,99,235,.16);
}


/* =========================================================
   COORDINATED AREA
========================================================= */

.coordinated-area{
    position:relative;

    display:flex;
    flex-direction:column;

    align-items:center;
}

.coord-entry-line{
    position:absolute;

    left:-24px;
    top:165px;

    width:42px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.20),
            #2563eb
        );
}


/* =========================================================
   MAIN COORDINATED CIRCLE
========================================================= */

.coordinated-circle{
    position:relative;

    width:205px;
    height:205px;

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

    border-radius:50%;

    padding:10px;

    background:
        conic-gradient(
            from 30deg,
            #2563eb,
            #06b6d4,
            #22c55e,
            #2563eb
        );

    box-shadow:
        0 20px 55px rgba(37,99,235,.20);
}

.coordinated-circle::before{
    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:
        1px dashed rgba(37,99,235,.25);
}

.coordinated-circle::after{
    content:"";

    position:absolute;

    width:13px;
    height:13px;

    top:5px;
    right:34px;

    border-radius:50%;

    background:#22c55e;

    border:3px solid #fff;

    box-shadow:
        0 4px 12px rgba(34,197,94,.3);
}

.coordinated-circle-inner{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

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

    text-align:center;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 50% 30%,
            #ffffff,
            #f3f8ff
        );

    border:4px solid #fff;
}

.coordinated-circle-inner svg{
    width:39px;
    height:39px;

    margin-bottom:9px;

    color:#1557e8;

    stroke-width:1.7;
}

.coordinated-circle-inner strong{
    color:#081b4b;

    font-size:14px;
    line-height:1.18;

    font-weight:900;

    letter-spacing:.1px;
}


/* =========================================================
   DOWN ARROW
========================================================= */

.coord-down-arrow{
    position:relative;

    height:42px;

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

    color:#2563eb;
}

.coord-down-arrow::before{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    height:30px;

    border-left:
        2px solid rgba(37,99,235,.35);

    transform:translateX(-50%);
}

.coord-down-arrow svg{
    position:relative;
    z-index:2;

    width:20px;
    height:20px;

    margin-top:20px;

    background:#f4f8ff;
}


/* =========================================================
   COORDINATED OUTCOMES
========================================================= */

.coordinated-outcomes{
    width:100%;

    display:grid;

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

    gap:9px;
}

.coord-outcome{
    position:relative;

    min-height:88px;

    padding:12px 8px;

    display:flex;
    flex-direction:column;

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

    text-align:center;

    border-radius:14px;

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

    border:
        1px solid rgba(37,99,235,.12);
}

.coord-outcome-icon{
    width:30px;
    height:30px;

    margin-bottom:5px;

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

    color:#1557e8;
}

.coord-outcome-icon svg{
    width:22px;
    height:22px;

    stroke-width:1.8;
}

.coord-outcome span{
    color:#081b4b;

    font-size:10.5px;
    line-height:1.25;

    font-weight:750;
}

.coord-check{
    position:absolute;

    right:6px;
    top:6px;

    width:13px;
    height:13px;

    color:#22c55e;
}


/* =========================================================
   RIGHT SUMMARY
========================================================= */

.journey-summary-campus{
    margin-top:27px;

    color:#fff;

    background:
        linear-gradient(
            120deg,
            #081b4b,
            #1747c9
        );

    border:
        1px solid rgba(37,99,235,.12);

    box-shadow:
        0 14px 36px rgba(8,27,75,.13);
}

.journey-summary-campus .journey-summary-icon{
    background:
        rgba(255,255,255,.12);

    color:#fff;
}

.journey-summary-campus p{
    color:
        rgba(255,255,255,.78);
}

.journey-summary-campus p strong{
    color:#fff;

    font-size:14px;
}


/* =========================================================
   FINAL MESSAGE
========================================================= */

.journey-final-message{
    position:relative;

    max-width:1120px;

    margin:45px auto 0;

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

    gap:25px;

    padding:28px 40px;

    text-align:center;

    border-radius:25px;

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

    border:
        1px solid rgba(37,99,235,.13);

    box-shadow:
        0 18px 55px rgba(15,23,42,.055);
}

.journey-final-icon{
    width:70px;
    height:70px;

    flex:0 0 70px;

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

    border-radius:50%;

    background:#eef5ff;

    color:#1557e8;
}

.journey-final-icon svg{
    width:34px;
    height:34px;

    stroke-width:1.7;
}

.journey-final-copy{
    width:100%;
    max-width:820px;
}

.journey-final-copy > p{
    margin:0;

    color:#475569;

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

.journey-final-copy > strong{
    display:block;

    margin-top:4px;

    color:#081b4b;

    font-size:21px;
    line-height:1.4;

    font-weight:800;
}


/* =========================================================
   FINAL CAMPUS ONE LINE
========================================================= */

.journey-final-bottom{
    display:grid;

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

    align-items:center;

    gap:18px;

    margin-top:16px;
}

.journey-final-bottom span{
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(37,99,235,.45)
        );
}

.journey-final-bottom span:last-child{
    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.45),
            transparent
        );
}

.journey-final-bottom p{
    margin:0;

    color:#2563eb;

    font-size:14px;
    font-weight:800;
}

/* =========================================================
   STUDENT JOURNEY
   PART 3 — RESPONSIVE
========================================================= */


/* =========================================================
   1350PX — SMALL DESKTOP / LAPTOP
========================================================= */

@media (max-width:1350px){

    .journey-container{
        max-width:1180px;
    }

    .journey-comparison{
        grid-template-columns:
            minmax(360px,1fr)
            125px
            minmax(440px,1.08fr);

        gap:18px;
    }

    .journey-side{
        padding:27px 22px 25px;
    }

    .fragmented-layout{
        grid-template-columns:110px 1fr;
        gap:15px;
    }

    .effect-item{
        gap:8px;
    }

    .effect-icon{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .effect-item span{
        font-size:10px;
    }

    .fragment-step{
        padding:13px 14px;
    }

    .fragment-step-icon{
        width:43px;
        height:43px;
        flex-basis:43px;
    }

    .campus-journey-layout{
        grid-template-columns:
            minmax(190px,.95fr)
            minmax(205px,1.05fr);

        gap:17px;
    }

    .integrated-item{
        padding:12px;
    }

    .coordinated-circle{
        width:185px;
        height:185px;
    }

    .journey-center{
        min-height:620px;
    }

    .student-figure{
        width:190px;
    }

}


/* =========================================================
   1150PX — TABLET LANDSCAPE
========================================================= */

@media (max-width:1150px){

    .student-journey{
        padding:
            100px 28px 90px;
    }

    .journey-header{
        margin-bottom:55px;
    }

    /*
       IMPORTANT:
       At this width we stop forcing the full desktop
       comparison into one horizontal row.
    */

    .journey-comparison{
        display:grid;

        grid-template-columns:
            1fr 1fr;

        gap:24px;

        align-items:stretch;
    }

    .journey-without{
        grid-column:1;
        grid-row:2;
    }

    .journey-with-campus{
        grid-column:2;
        grid-row:2;
    }


    /* CENTER STUDENT ABOVE BOTH JOURNEYS */

    .journey-center{
        grid-column:1 / -1;
        grid-row:1;

        min-height:300px;

        margin-bottom:5px;
    }

    .student-figure{
        width:175px;
    }

    .student-figure img{
        max-height:270px;
    }

    .student-glow{
        width:180px;
        height:210px;
    }

    .student-orbit-one{
        width:230px;
        height:230px;
    }

    .student-orbit-two{
        width:175px;
        height:175px;
    }


    /* VS */

    .journey-vs{
        top:auto;
        bottom:-5px;
    }

    .journey-vs strong{
        width:50px;
        height:50px;
    }


    /* LEFT */

    .fragmented-layout{
        grid-template-columns:125px 1fr;
    }


    /* RIGHT */

    .campus-journey-layout{
        grid-template-columns:
            minmax(200px,.9fr)
            minmax(220px,1.1fr);
    }

}


/* =========================================================
   900PX — TABLET
========================================================= */

@media (max-width:900px){

    .student-journey{
        padding:
            90px 22px 80px;
    }

    .journey-header h2{
        font-size:
            clamp(40px,7vw,56px);

        letter-spacing:-2px;
    }

    .journey-header > p{
        font-size:17px;
    }


    /* STACK BOTH JOURNEYS */

    .journey-comparison{
        display:flex;
        flex-direction:column;
        gap:28px;
    }


    /* CENTER FIRST */

    .journey-center{
        order:1;

        min-height:285px;

        margin-bottom:10px;
    }

    .journey-without{
        order:2;
    }

    .journey-with-campus{
        order:3;
    }


    /* VS becomes transition */

    .journey-vs{
        bottom:-8px;
    }


    /* SIDE */

    .journey-side{
        width:100%;

        max-width:720px;

        margin:0 auto;

        padding:
            30px 28px 28px;
    }


    /* LEFT */

    .fragmented-layout{
        grid-template-columns:
            150px minmax(260px,1fr);

        max-width:540px;

        margin:0 auto;
    }

    .effect-item span{
        font-size:11px;
    }


    /* RIGHT */

    .campus-journey-layout{
        grid-template-columns:
            minmax(230px,.95fr)
            minmax(250px,1.05fr);

        max-width:580px;

        margin:0 auto;
    }


    /* FINAL */

    .journey-final-message{
        max-width:720px;

        margin-top:35px;
    }

}


/* =========================================================
   768PX — MOBILE / TABLET PORTRAIT
========================================================= */

@media (max-width:768px){

    .student-journey{
        padding:
            80px 18px 72px;
    }


    /* HEADER */

    .journey-header{
        margin-bottom:45px;
    }

    .journey-tag{
        padding:8px 15px;

        margin-bottom:18px;

        font-size:10px;
    }

    .journey-header h2{
        font-size:
            clamp(35px,8vw,46px);

        line-height:1.07;

        letter-spacing:-1.5px;
    }

    .journey-header h2 span{
        display:block;

        margin-top:5px;
    }

    .journey-header > p{
        margin-top:14px;

        font-size:16px;
    }

    .journey-heading-line{
        margin-top:18px;
    }


    /* CENTER STUDENT */

    .journey-center{
        min-height:255px;
    }

    .student-figure{
        width:160px;
    }

    .student-figure img{
        max-height:240px;
    }

    .student-orbit-one{
        width:205px;
        height:205px;
    }

    .student-orbit-two{
        width:155px;
        height:155px;
    }

    .student-glow{
        width:170px;
        height:190px;
    }


    /* SIDE CARDS */

    .journey-side{
        padding:
            27px 22px 24px;

        border-radius:24px;
    }

    .journey-side-label{
        margin-bottom:27px;

        font-size:10px;
    }


    /* =====================================================
       WITHOUT CAMPUS ONE
    ===================================================== */

    .fragmented-layout{
        grid-template-columns:1fr;

        gap:25px;

        max-width:500px;
    }


    /* EFFECTS become horizontal */

    .fragmented-effects{
        display:grid;

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

        gap:8px;

        order:2;
    }

    .effect-item{
        display:block;

        text-align:center;
    }

    .effect-icon{
        width:44px;
        height:44px;

        margin:
            0 auto 8px;
    }

    .effect-item span{
        display:block;

        font-size:10px;
    }


    /* PATH */

    .fragmented-path{
        order:1;

        max-width:360px;

        margin:0 auto;
    }

    .fragment-step{
        max-width:360px;

        padding:
            14px 16px;
    }


    /* =====================================================
       CAMPUS ONE JOURNEY
    ===================================================== */

    .campus-journey-layout{
        display:block;

        max-width:500px;
    }

    .integrated-components{
        max-width:400px;

        margin:0 auto;
    }

    .integrated-item{
        padding:
            14px 15px;
    }

    .integrated-copy h3{
        font-size:13px;
    }

    .integrated-copy p{
        font-size:11px;
    }


    /* Arrow from components to coordinated journey */

    .coordinated-area{
        margin-top:34px;
    }

    .coord-entry-line{
        position:relative;

        left:auto;
        top:auto;

        width:2px;
        height:35px;

        margin-bottom:18px;

        background:
            linear-gradient(
                180deg,
                rgba(37,99,235,.20),
                #2563eb
            );
    }

    .coord-entry-line::after{
        content:"";

        position:absolute;

        left:50%;
        bottom:-1px;

        width:8px;
        height:8px;

        border-right:2px solid #2563eb;
        border-bottom:2px solid #2563eb;

        transform:
            translateX(-50%)
            rotate(45deg);
    }

    .coordinated-circle{
        width:205px;
        height:205px;
    }

    .coordinated-outcomes{
        max-width:360px;
    }


    /* SUMMARIES */

    .journey-summary{
        max-width:500px;

        margin:
            25px auto 0;
    }


    /* =====================================================
       FINAL MESSAGE
    ===================================================== */

    .journey-final-message{
        display:block;

        margin-top:32px;

        padding:
            28px 25px;

        border-radius:22px;
    }

    .journey-final-icon{
        margin:
            0 auto 18px;
    }

    .journey-final-copy > p{
        font-size:15px;
    }

    .journey-final-copy > strong{
        font-size:19px;
    }

}


/* =========================================================
   576PX — MOBILE
========================================================= */

@media (max-width:576px){

    .student-journey{
        padding:
            70px 15px 65px;
    }


    /* HEADER */

    .journey-header{
        margin-bottom:35px;
    }

    .journey-header h2{
        font-size:
            clamp(31px,9vw,39px);

        line-height:1.08;

        letter-spacing:-1.2px;
    }

    .journey-header > p{
        font-size:14.5px;
    }


    /* STUDENT */

    .journey-center{
        min-height:225px;
    }

    .student-figure{
        width:140px;
    }

    .student-figure img{
        max-height:210px;
    }

    .student-orbit-one{
        width:180px;
        height:180px;
    }

    .student-orbit-two{
        width:140px;
        height:140px;
    }

    .student-glow{
        width:145px;
        height:175px;
    }

    .journey-vs strong{
        width:46px;
        height:46px;

        font-size:12px;

        border-width:4px;
    }

    .vs-line{
        width:28px;
    }


    /* =====================================================
       SIDE WRAPPERS
    ===================================================== */

    .journey-side{
        padding:
            24px 16px 20px;

        border-radius:21px;
    }

    .journey-side-label{
        width:100%;

        margin-bottom:23px;

        padding:
            8px 10px;

        font-size:9px;

        letter-spacing:.7px;
    }


    /* =====================================================
       FRAGMENTED PATH
    ===================================================== */

    .fragmented-path{
        width:100%;
    }

    .fragment-step{
        width:100%;

        gap:13px;

        padding:
            13px 14px;

        border-radius:15px;
    }

    .fragment-step-icon{
        width:43px;
        height:43px;

        flex-basis:43px;

        border-radius:12px;
    }

    .fragment-step-icon svg{
        width:22px;
        height:22px;
    }

    .fragment-step strong{
        font-size:12.5px;
    }

    .fragment-arrow{
        height:28px;
    }


    /* CONSEQUENCES */

    .fragmented-effects{
        grid-template-columns:
            repeat(2,1fr);

        gap:12px;
    }

    .effect-item{
        padding:13px 7px;

        border-radius:14px;

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

        border:
            1px solid rgba(100,116,139,.10);
    }

    .effect-icon{
        width:40px;
        height:40px;
    }

    .effect-item span{
        font-size:10.5px;
    }


    /* =====================================================
       CAMPUS COMPONENTS
    ===================================================== */

    .integrated-components{
        width:100%;
    }

    .integrated-item{
        gap:12px;

        padding:
            13px;

        border-radius:15px;
    }

    .integrated-icon{
        width:44px;
        height:44px;

        flex-basis:44px;

        border-radius:12px;
    }

    .integrated-icon svg{
        width:22px;
        height:22px;
    }

    .integrated-copy h3{
        font-size:12.5px;
    }

    .integrated-copy p{
        font-size:10.5px;
    }

    .integrated-plus{
        width:23px;
        height:23px;

        font-size:14px;
    }


    /* COORDINATED CIRCLE */

    .coordinated-circle{
        width:185px;
        height:185px;
    }

    .coordinated-circle-inner svg{
        width:34px;
        height:34px;
    }

    .coordinated-circle-inner strong{
        font-size:12.5px;
    }


    /* OUTCOMES */

    .coordinated-outcomes{
        max-width:330px;

        gap:7px;
    }

    .coord-outcome{
        min-height:82px;

        padding:
            10px 6px;
    }

    .coord-outcome span{
        font-size:10px;
    }


    /* SUMMARIES */

    .journey-summary{
        gap:13px;

        padding:
            16px;

        border-radius:16px;
    }

    .journey-summary-icon{
        width:42px;
        height:42px;

        flex-basis:42px;
    }

    .journey-summary p{
        font-size:12.5px;
    }

    .journey-summary-campus p strong{
        font-size:13px;
    }


    /* =====================================================
       FINAL MESSAGE
    ===================================================== */

    .journey-final-message{
        padding:
            25px 18px;
    }

    .journey-final-icon{
        width:62px;
        height:62px;

        flex-basis:62px;
    }

    .journey-final-icon svg{
        width:30px;
        height:30px;
    }

    .journey-final-copy > p{
        font-size:13.5px;
    }

    .journey-final-copy > strong{
        margin-top:6px;

        font-size:17px;
    }

    .journey-final-bottom{
        grid-template-columns:
            25px 1fr 25px;

        gap:10px;

        margin-top:15px;
    }

    .journey-final-bottom p{
        font-size:12px;
    }

}


/* =========================================================
   400PX — SMALL MOBILE
========================================================= */

@media (max-width:400px){

    .student-journey{
        padding:
            65px 13px 60px;
    }

    .journey-header h2{
        font-size:30px;
    }

    .journey-header > p{
        font-size:13.5px;
    }

    .journey-side{
        padding:
            22px 13px 18px;
    }

    .student-figure{
        width:128px;
    }

    .student-orbit-one{
        width:165px;
        height:165px;
    }

    .student-orbit-two{
        width:125px;
        height:125px;
    }

    .fragment-step{
        padding:
            12px 11px;
    }

    .fragment-step strong{
        font-size:12px;
    }

    .integrated-item{
        padding:
            12px 10px;
    }

    .integrated-copy h3{
        font-size:12px;
    }

    .integrated-copy p{
        font-size:10px;
    }

    .coordinated-circle{
        width:170px;
        height:170px;
    }

    .coordinated-circle-inner strong{
        font-size:11.5px;
    }

    .journey-final-bottom{
        grid-template-columns:
            15px 1fr 15px;
    }

}


/* =========================================================
   340PX — VERY SMALL DEVICES
========================================================= */

@media (max-width:340px){

    .student-journey{
        padding-left:10px;
        padding-right:10px;
    }

    .journey-header h2{
        font-size:28px;
    }

    .journey-side{
        padding:
            20px 10px 17px;
    }

    .fragmented-effects{
        grid-template-columns:1fr 1fr;
    }

    .coordinated-circle{
        width:160px;
        height:160px;
    }

    .coordinated-outcomes{
        grid-template-columns:1fr 1fr;
    }

}

/* =========================================================
   STUDENT JOURNEY — PREMIUM MICRO ANIMATIONS
   Paste at END of existing CSS
========================================================= */


/* ---------------------------------------------------------
   1. STUDENT OUTER ORBITS
--------------------------------------------------------- */

.student-orbit-one{
    animation: journeyOrbitRotate 16s linear infinite;
}

.student-orbit-two{
    animation: journeyOrbitRotateReverse 12s linear infinite;
}

@keyframes journeyOrbitRotate{
    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }
    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes journeyOrbitRotateReverse{
    from{
        transform:translate(-50%,-50%) rotate(360deg);
    }
    to{
        transform:translate(-50%,-50%) rotate(0deg);
    }
}


/* ---------------------------------------------------------
   2. STUDENT DOTS — FLOAT + PULSE
--------------------------------------------------------- */

.student-dot-one{
    animation:
        journeyDotFloat1 3.4s ease-in-out infinite,
        journeyDotPulse 2.2s ease-in-out infinite;
}

.student-dot-two{
    animation:
        journeyDotFloat2 4s ease-in-out infinite,
        journeyDotPulse 2.6s ease-in-out infinite;
}

@keyframes journeyDotFloat1{
    0%,100%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(5px,-7px);
    }
}

@keyframes journeyDotFloat2{
    0%,100%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(-5px,7px);
    }
}

@keyframes journeyDotPulse{
    0%,100%{
        opacity:.65;
    }
    50%{
        opacity:1;
        box-shadow:
            0 0 0 7px rgba(37,99,235,.09),
            0 0 18px rgba(37,99,235,.25);
    }
}


/* ---------------------------------------------------------
   3. STUDENT BACKGROUND GLOW
--------------------------------------------------------- */

.student-glow{
    animation:journeyGlow 4s ease-in-out infinite;
}

@keyframes journeyGlow{
    0%,100%{
        opacity:.65;
        transform:translateX(-50%) scale(.96);
    }

    50%{
        opacity:1;
        transform:translateX(-50%) scale(1.06);
    }
}


/* ---------------------------------------------------------
   4. MAIN COORDINATED CIRCLE ROTATING BORDER

   IMPORTANT:
   Circle itself/content remains static.
   Only conic-gradient ring rotates.
--------------------------------------------------------- */

.coordinated-circle{
    background:none;
    isolation:isolate;
}

.coordinated-circle::before{
    content:"";

    position:absolute;
    inset:0;

    border:none;
    border-radius:50%;

    background:
        conic-gradient(
            from 0deg,
            #2563eb,
            #06b6d4,
            #22c55e,
            #2563eb
        );

    z-index:-1;

    animation:coordinatedRingRotate 9s linear infinite;
}


/* New dashed outer orbit */
.coordinated-circle-inner::before{
    content:"";

    position:absolute;
    inset:-12px;

    border-radius:50%;

    border:
        1px dashed rgba(37,99,235,.28);

    pointer-events:none;

    animation:
        coordinatedDashRotate 14s linear infinite;
}


@keyframes coordinatedRingRotate{
    from{
        transform:rotate(0deg);
    }

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

@keyframes coordinatedDashRotate{
    from{
        transform:rotate(360deg);
    }

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


/* ---------------------------------------------------------
   5. GREEN DOT ON COORDINATED CIRCLE
--------------------------------------------------------- */

.coordinated-circle::after{
    animation:coordDotPulse 2.2s ease-in-out infinite;
}

@keyframes coordDotPulse{

    0%,100%{
        transform:scale(1);

        box-shadow:
            0 4px 12px rgba(34,197,94,.30);
    }

    50%{
        transform:scale(1.18);

        box-shadow:
            0 0 0 6px rgba(34,197,94,.10),
            0 5px 18px rgba(34,197,94,.40);
    }
}


/* ---------------------------------------------------------
   6. PLUS SIGNS — SUBTLE PULSE
--------------------------------------------------------- */

.integrated-plus{
    animation:integratedPlusPulse 2.8s ease-in-out infinite;
}

.integrated-plus:nth-of-type(2){
    animation-delay:.4s;
}

.integrated-plus:nth-of-type(3){
    animation-delay:.8s;
}

@keyframes integratedPlusPulse{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.10);

        box-shadow:
            0 0 0 5px rgba(37,99,235,.07),
            0 7px 18px rgba(37,99,235,.18);
    }
}


/* ---------------------------------------------------------
   7. RIGHT SIDE CARDS — PREMIUM HOVER
--------------------------------------------------------- */

.integrated-item{
    transition:
        transform .32s cubic-bezier(.2,.8,.2,1),
        box-shadow .32s ease,
        border-color .32s ease;
}

.integrated-item:hover{
    transform:
        translateX(5px)
        scale(1.015);

    border-color:
        rgba(37,99,235,.28);

    box-shadow:
        0 16px 38px rgba(37,99,235,.11);
}


/* ---------------------------------------------------------
   8. OUTCOME CARDS — MINOR HOVER
--------------------------------------------------------- */

.coord-outcome{
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.coord-outcome:hover{
    transform:translateY(-4px);

    border-color:
        rgba(37,99,235,.24);

    box-shadow:
        0 12px 25px rgba(37,99,235,.08);
}


/* ---------------------------------------------------------
   9. LEFT SIDE CARDS — SMALL INTERACTION
--------------------------------------------------------- */

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

.fragment-step:hover{
    transform:
        translateX(3px)
        scale(1.01);

    box-shadow:
        0 14px 34px rgba(15,23,42,.075);
}


/* ---------------------------------------------------------
   10. VS BADGE — BREATHING EFFECT
--------------------------------------------------------- */

.journey-vs strong{
    animation:vsBreathing 3.5s ease-in-out infinite;
}

@keyframes vsBreathing{

    0%,100%{
        box-shadow:
            0 10px 30px rgba(8,27,75,.18);
    }

    50%{
        box-shadow:
            0 10px 30px rgba(8,27,75,.25),
            0 0 0 6px rgba(37,99,235,.055);
    }
}


/* ---------------------------------------------------------
   11. HEADING BLUE LINE — SOFT GLOW
--------------------------------------------------------- */

.journey-heading-line{
    animation:journeyLineGlow 3s ease-in-out infinite;
}

@keyframes journeyLineGlow{

    0%,100%{
        width:66px;
        opacity:.75;
    }

    50%{
        width:82px;
        opacity:1;

        box-shadow:
            0 0 12px rgba(37,99,235,.22);
    }
}


/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

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

    .student-orbit-one,
    .student-orbit-two,
    .student-dot-one,
    .student-dot-two,
    .student-glow,
    .coordinated-circle::before,
    .coordinated-circle-inner::before,
    .coordinated-circle::after,
    .integrated-plus,
    .journey-vs strong,
    .journey-heading-line{
        animation:none !important;
    }

}

/* =========================================================
   STUDENT JOURNEY
   TABLET + MOBILE FINAL STRUCTURE
========================================================= */

@media (max-width: 900px){

    .journey-comparison{
        display:flex !important;
        flex-direction:column !important;
        gap:0 !important;

        position:relative;
    }


    /* =========================
       1. STUDENT
    ========================== */

    .journey-center{
        order:1 !important;

        position:relative !important;

        width:100% !important;
        height:280px !important;

        margin:0 0 28px !important;
    }

    .student-figure{
        position:absolute !important;

        left:50% !important;
        bottom:0 !important;

        transform:translateX(-50%) !important;

        width:220px !important;
        height:auto !important;

        z-index:5;
    }


    /* =========================
       2. WITHOUT CAMPUS ONE
    ========================== */

    .journey-without{
        order:2 !important;

        width:100% !important;

        margin:0 !important;
    }


    /* =========================
       3. VS
    ========================== */

    .journey-vs{
        order:3 !important;

        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        transform:none !important;

        width:100% !important;
        height:76px !important;

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

        gap:12px;

        margin:0 !important;

        z-index:20 !important;
    }

    .journey-vs strong{
        position:relative !important;

        width:48px !important;
        height:48px !important;

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

        flex:0 0 48px;

        margin:0 !important;

        transform:none !important;
    }

    .journey-vs .vs-line{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:block !important;

        width:48px !important;
        height:1px !important;

        transform:none !important;
    }


    /* =========================
       4. WITH CAMPUS ONE
    ========================== */

    .journey-with-campus{
        order:4 !important;

        width:100% !important;

        margin:0 !important;
    }
}


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

@media (max-width: 576px){

    .journey-center{
        height:245px !important;
        margin-bottom:24px !important;
    }

    .student-figure{
        width:190px !important;
    }

    .journey-vs{
        height:68px !important;
        gap:10px;
    }

    .journey-vs strong{
        width:44px !important;
        height:44px !important;

        flex-basis:44px;

        font-size:13px !important;
    }

    .journey-vs .vs-line{
        width:38px !important;
    }
}