/* ==========================================================
   P019010 PROCESS FLOW
   POSHESH / EXECUTION RAIL
   ========================================================== */


.ph-process {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding-block:
        clamp(105px,10vw,150px);

    border-bottom:
        1px solid rgba(255,255,255,.045);

    background:
        radial-gradient(
            680px 400px at 85% 45%,
            rgba(84,218,228,.065),
            transparent 72%
        ),
        radial-gradient(
            580px 380px at 12% 72%,
            rgba(119,89,223,.055),
            transparent 72%
        ),
        #02080e;
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.ph-process-head {
    display: grid;

    grid-template-columns:
        minmax(0,.7fr)
        minmax(0,1.3fr);

    gap:
        clamp(45px,7vw,105px);

    align-items: end;

    margin-block-end:
        clamp(55px,7vw,82px);
}


.ph-process-index {
    direction: ltr;
}


.ph-process-index strong {
    display: block;

    color:
        rgba(216,170,98,.75);

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

    font-weight: 250;

    line-height: .78;

    letter-spacing: -.065em;
}


.ph-process-index span {
    display: block;

    margin-block-start: 20px;

    color:
        #5d747f;

    font-size:
        .64rem;

    letter-spacing:
        .15em;
}


.ph-process-copy h2 {
    max-width: 760px;

    margin:
        10px 0 17px;

    color:
        #f3f8f9;

    font-size:
        clamp(2.2rem,4.1vw,3.95rem);

    line-height: 1.26;

    letter-spacing:
        -.035em;
}


.ph-process-copy p {
    max-width: 670px;

    margin: 0;

    color:
        #899fa9;

    line-height:
        2.05;
}


/* ----------------------------------------------------------
   EXECUTION FRAME
   ---------------------------------------------------------- */

.ph-process-frame {
    position: relative;

    min-height:
        520px;

    padding:
        clamp(38px,5vw,62px);

    overflow: hidden;

    border:
        1px solid rgba(83,210,221,.16);

    border-radius:
        30px;

    background:
        linear-gradient(
            rgba(84,218,228,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(84,218,228,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            #06151f,
            #020b12 70%
        );

    background-size:
        72px 72px,
        72px 72px,
        auto;

    box-shadow:
        0 34px 82px rgba(0,0,0,.25);
}


.ph-process-frame::before {
    content: "";

    position: absolute;

    top: 0;
    inset-inline-end: 10%;

    width: 220px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ph-cyan),
            #b9f5f6,
            var(--ph-violet),
            transparent
        );
}


.ph-process-frame::after {
    content: "";

    position: absolute;

    bottom: 0;
    inset-inline-start: 9%;

    width: 120px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ph-gold),
            transparent
        );
}


/* ----------------------------------------------------------
   MASTER RAIL
   ---------------------------------------------------------- */

.ph-process-rail {
    position: relative;

    display: grid;

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

    gap:
        clamp(20px,2.8vw,38px);

    min-height:
        390px;

    align-items: center;
}


.ph-process-rail::before {
    content: "";

    position: absolute;

    z-index: 0;

    top: 50%;
    inset-inline: 4%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(216,170,98,.40),
            rgba(84,218,228,.52) 34%,
            rgba(84,218,228,.48) 66%,
            rgba(119,89,223,.42)
        );
}


.ph-process-rail::after {
    content: "";

    position: absolute;

    z-index: 0;

    top: calc(50% - 3px);
    inset-inline-start: 4%;

    width: 68%;
    height: 7px;

    opacity: .12;

    filter: blur(8px);

    background:
        linear-gradient(
            90deg,
            var(--ph-gold),
            var(--ph-cyan),
            var(--ph-violet)
        );

    pointer-events: none;
}


/* ----------------------------------------------------------
   STATIONS
   ---------------------------------------------------------- */

.ph-process-stage {
    position: relative;
    z-index: 2;

    min-height:
        310px;

    display: flex;

    flex-direction: column;
    justify-content: space-between;

    padding:
        30px 22px;

    border-inline-start:
        1px solid rgba(255,255,255,.06);
}


.ph-process-stage:nth-child(2),
.ph-process-stage:nth-child(4) {
    transform:
        translateY(42px);
}


.ph-process-stage:nth-child(1),
.ph-process-stage:nth-child(3) {
    transform:
        translateY(-42px);
}


.ph-process-stage::before {
    content: "";

    position: absolute;

    top: 50%;
    inset-inline-start: -6px;

    width: 11px;
    height: 11px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        var(--ph-cyan);

    box-shadow:
        0 0 0 5px rgba(84,218,228,.07),
        0 0 24px rgba(84,218,228,.18);
}


.ph-process-stage:nth-child(1)::before {
    background:
        var(--ph-gold);

    box-shadow:
        0 0 0 5px rgba(216,170,98,.07),
        0 0 24px rgba(216,170,98,.16);
}


.ph-process-stage:nth-child(4)::before {
    background:
        var(--ph-violet);

    box-shadow:
        0 0 0 5px rgba(119,89,223,.08),
        0 0 24px rgba(119,89,223,.18);
}


/* giant stage word */

.ph-process-ghost {
    position: absolute;

    z-index: 0;

    inset-inline-start: 18px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(-90deg);

    transform-origin:
        center;

    color:
        rgba(225,242,245,.027);

    font-size:
        clamp(3.2rem,5vw,5.8rem);

    font-weight:
        900;

    letter-spacing:
        -.055em;

    white-space: nowrap;

    pointer-events: none;
}


/* content */

.ph-process-stage-top,
.ph-process-stage-bottom {
    position: relative;
    z-index: 2;
}


.ph-process-stage-no {
    direction: ltr;

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

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

    font-weight: 250;

    line-height: 1;
}


.ph-process-stage small {
    display: block;

    margin-block:
        20px 8px;

    color:
        #52707b;

    font-size:
        .56rem;

    font-weight: 750;

    letter-spacing:
        .12em;
}


.ph-process-stage h3 {
    margin: 0;

    color:
        #ecf4f6;

    font-size:
        clamp(1rem,1.45vw,1.25rem);

    line-height:
        1.55;
}


.ph-process-stage p {
    margin: 0;

    color:
        #7d939d;

    font-size:
        .72rem;

    line-height:
        1.9;
}


.ph-process-output {
    direction: ltr;

    margin-block-start:
        15px;

    color:
        #5f7883;

    font-size:
        .55rem;

    letter-spacing:
        .08em;
}


/* ----------------------------------------------------------
   FLOW LABEL
   ---------------------------------------------------------- */

.ph-process-flow-label {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-block-start:
        28px;

    padding-block-start:
        18px;

    border-top:
        1px solid rgba(255,255,255,.045);

    direction: ltr;

    color:
        #55707b;

    font-size:
        .56rem;

    letter-spacing:
        .11em;
}


.ph-process-flow-label strong {
    color:
        #8399a3;

    font-weight: 650;
}


/* ----------------------------------------------------------
   CONCLUSION
   ---------------------------------------------------------- */

.ph-process-conclusion {
    display: grid;

    grid-template-columns:
        minmax(0,.76fr)
        minmax(0,1.24fr);

    gap:
        clamp(40px,7vw,95px);

    align-items: center;

    margin-block-start:
        42px;
}


.ph-process-conclusion-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(216,170,98,.38),
            rgba(84,218,228,.38),
            rgba(119,89,223,.28),
            transparent
        );
}


.ph-process-conclusion p {
    margin: 0;

    color:
        #859ba5;

    font-size:
        .86rem;

    line-height:
        2;
}


.ph-process-conclusion strong {
    color:
        #d8e5e8;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width:1000px) {

    .ph-process-head {
        grid-template-columns:
            1fr;
    }


    .ph-process-rail {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            30px;
    }


    .ph-process-rail::before,
    .ph-process-rail::after {
        display:
            none;
    }


    .ph-process-stage:nth-child(n) {
        transform:
            none;
    }

}


@media (max-width:650px) {

    .ph-process-frame {
        padding:
            20px;
    }


    .ph-process-rail {
        grid-template-columns:
            1fr;
    }


    .ph-process-stage {
        min-height:
            230px;

        padding:
            24px 20px;

        border-inline-start:
            2px solid rgba(84,218,228,.18);
    }


    .ph-process-stage::before {
        top:
            42px;
    }


    .ph-process-ghost {
        transform:
            none;

        top:
            auto;

        bottom:
            10px;

        inset-inline-start:
            auto;

        inset-inline-end:
            14px;
    }


    .ph-process-flow-label {
        display:
            none;
    }


    .ph-process-conclusion {
        grid-template-columns:
            1fr;
    }

}


/* END P019010 PROCESS FLOW */


/* ==========================================================
   P019010B PERFORMANCE GUARD
   Avoid filter-based compositing during scroll
   ========================================================== */

.ph-process-rail::after {
    filter: none;
    height: 3px;
    opacity: .09;
}

/* END P019010B PERFORMANCE GUARD */