/* Four simple editorial pages; the existing FlowArt rotation remains. */
.flow-process{position:relative;width:100%;overflow:clip;isolation:isolate;font-family:'Plus Jakarta Sans',sans-serif}
.flow-section{position:relative;width:100%;min-height:100svh;overflow:hidden}
.flow-one,.flow-two{margin-bottom:35svh}
.flow-process::after{content:"";display:block;height:35svh}
.flow-inner{position:relative;display:flex;align-items:center;justify-content:center;min-height:100svh;width:100%;padding:clamp(5rem,8vw,7rem) 5vw;transform-origin:bottom left;will-change:transform}
.flow-intro-page .flow-inner{background:radial-gradient(ellipse at 30% 26%,#153a80 0%,#07162f 45%,#030812 100%);color:#fff}
.flow-one .flow-inner{background:#f8fbff;color:#172333}
.flow-two .flow-inner{background:#050913;color:#f8fbff}
.flow-three .flow-inner{background:radial-gradient(ellipse at 25% 30%,#377ad9 0%,#204d9f 48%,#0c214e 100%);color:#fff}
.flow-intro-page h2{width:min(100%,1160px);margin:0;font-size:clamp(3.4rem,7vw,8rem);line-height:1.03;letter-spacing:-.07em;text-align:center;font-weight:900}
.flow-intro-page h2 span{color:#84b7ff}
.flow-step-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);align-items:center;gap:clamp(2rem,5vw,6rem);width:min(100%,1300px)}
.flow-step-number{display:inline-block;margin-bottom:1.7rem;color:#3b82f6;font-size:clamp(.9rem,1.2vw,1.1rem);font-weight:900;letter-spacing:.2em}
.flow-two .flow-step-number,.flow-three .flow-step-number{color:#abd3ff}
.flow-step-title h2{margin:0;font-size:clamp(3.2rem,6.2vw,7.25rem);line-height:1.04;letter-spacing:-.068em;font-weight:900}
.flow-dot{color:#3b82f6}.flow-two .flow-dot{color:#abd3ff}.flow-three .flow-dot{color:#c5e1ff}
.flow-popup{padding:clamp(1.45rem,2.7vw,2.8rem);border:1px solid #dce7f5;border-radius:24px;background:#fff;box-shadow:0 26px 65px rgba(34,70,125,.12);opacity:0;transform:translateY(40px)}
.flow-popup p{margin:0;color:#425571;font-size:clamp(1rem,1.45vw,1.3rem);line-height:1.56}
.flow-two .flow-popup,.flow-three .flow-popup{border-color:rgba(186,218,255,.2);background:rgba(255,255,255,.1);box-shadow:0 25px 70px rgba(0,0,0,.2);backdrop-filter:blur(18px)}
.flow-two .flow-popup p,.flow-three .flow-popup p{color:#e3edff}
@media(max-width:700px){.flow-inner{padding:5.5rem 1.35rem 3rem}.flow-intro-page h2{font-size:clamp(2.7rem,10.4vw,4.8rem);text-align:left}.flow-step-layout{grid-template-columns:1fr;gap:2.2rem}.flow-step-number{margin-bottom:1rem}.flow-step-title h2{font-size:clamp(2.8rem,10.5vw,4.5rem)}.flow-popup{padding:1.35rem;border-radius:18px}.flow-popup p{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.flow-inner{transform:none!important;will-change:auto}.flow-popup{opacity:1;transform:none}}

/* Clear, large step numbers and a closer editorial text/card pairing. */
.flow-step-layout{grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:clamp(1.5rem,3vw,3.5rem);width:min(100%,1160px)}
.flow-step-number{display:block;margin-bottom:1.45rem;font-size:clamp(6rem,11vw,10rem);line-height:.8;letter-spacing:-.09em;font-weight:900}
.flow-step-title h2{font-size:clamp(3.2rem,5.7vw,6.6rem)}
.flow-popup{position:relative;overflow:hidden;margin-left:-3rem;border:1px solid rgba(125,172,235,.38);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(230,240,255,.74));box-shadow:0 27px 70px rgba(24,53,103,.17),inset 0 1px rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:border-color .3s,box-shadow .3s}
.flow-popup::before{display:none}
.flow-popup:hover{border-color:#62a8ff;box-shadow:0 30px 75px rgba(24,74,148,.23),0 0 0 2px rgba(75,145,244,.14),inset 0 1px rgba(255,255,255,.85)}
.flow-popup p{font-weight:600;letter-spacing:-.025em}
.flow-two .flow-popup,.flow-three .flow-popup{border-color:rgba(177,210,255,.26);background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.065));box-shadow:0 27px 70px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.18)}
.flow-two .flow-popup:hover,.flow-three .flow-popup:hover{border-color:#87bcff;box-shadow:0 32px 76px rgba(0,0,0,.32),0 0 0 2px rgba(104,170,255,.16),inset 0 1px rgba(255,255,255,.23)}
@media(max-width:700px){
  .flow-step-layout{grid-template-columns:1fr;gap:1.7rem}
  .flow-popup{margin-left:0}
  .flow-step-number{font-size:clamp(5rem,19vw,8rem);margin-bottom:1.1rem}
  .flow-step-title h2{font-size:clamp(2.8rem,10.5vw,4.5rem)}
}

/* The four screens share one stable viewport instead of nested GSAP pins. */
.flow-process.flow-ready{height:calc(100svh * 5.1);overflow:visible}
.flow-ready .flow-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.flow-ready .flow-section{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;overflow:hidden}
.flow-ready .flow-inner{height:100%;min-height:0}
.flow-process.flow-ready::after{display:none}
@media(max-width:700px){
  .flow-process.flow-ready{height:calc(100lvh * 5.1)}
  .flow-ready .flow-stage{height:100lvh}
  .flow-ready .flow-section{min-height:0;margin:0}
  .flow-ready .flow-inner{min-height:0}
}