/* Our Process page: step screens fly out of a light portal, from the back to the front */

.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7;background-image:radial-gradient(1px 1px at 12% 18%,#cfe6ff 50%,transparent 51%),radial-gradient(1px 1px at 72% 12%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 38% 66%,#9fcbff 50%,transparent 51%),radial-gradient(1px 1px at 88% 48%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 84%,#cfe6ff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 58% 32%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 86%,#9fcbff 50%,transparent 51%),radial-gradient(1px 1px at 5% 52%,#fff 50%,transparent 51%);background-size:420px 420px}
.nav-links a[aria-current="page"]{color:#fff;background:rgba(47,143,255,.16)}

/* ---------- hero ---------- */
.proc-hero{position:relative;padding:clamp(150px,22vh,220px) 0 clamp(40px,6vh,70px);text-align:center}
.proc-hero .container{display:flex;flex-direction:column;align-items:center;gap:22px}
.proc-hero h1{font-size:clamp(40px,6.6vw,96px);font-weight:800;letter-spacing:-.045em;max-width:14ch;text-wrap:balance}
.proc-hero .lede{text-align:center}

/* ---------- the stage: pinned while the screens fly through ---------- */
.proc{position:relative}
.stage{display:none}
html.proc-live .stage{display:block;position:sticky;top:0;height:100svh;overflow:hidden;perspective:1100px;perspective-origin:50% 30%}
html.proc-live .steps{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage-portal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage-logo{position:absolute;left:50%;top:26%;width:clamp(48px,5vw,76px);transform:translate(-50%,-50%);pointer-events:none;filter:brightness(1.6) drop-shadow(0 0 14px #57a6ff) drop-shadow(0 0 40px #2f8fff);animation:logo-glow 3.2s ease-in-out infinite}
@keyframes logo-glow{50%{filter:brightness(2.1) drop-shadow(0 0 22px #8cc4ff) drop-shadow(0 0 70px #2f8fff)}}
.screens{position:absolute;inset:0;transform-style:preserve-3d}

/* one step = one glass screen */
.screen{position:absolute;left:50%;top:56%;width:min(620px,86vw);margin-left:calc(min(620px,86vw) / -2);transform-origin:50% 50%;will-change:transform,opacity;border-radius:20px;opacity:0}
.screen-in{position:relative;border-radius:inherit;overflow:hidden;background:linear-gradient(160deg,rgba(28,44,82,.92),rgba(8,12,26,.94) 55%);border:1px solid rgba(185,220,255,.35);box-shadow:0 0 0 1px rgba(47,143,255,.25),0 0 40px rgba(47,143,255,.45),0 0 120px -10px rgba(47,107,255,.5),0 50px 90px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18)}
.screen-in::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(185,220,255,.12) 42%,transparent 54%)}
.screen-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.screen-bar .dots i{width:10px;height:10px}
.screen-bar .lbl{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blue-2)}
.screen-body{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,28px);align-items:center;padding:clamp(20px,3.4vw,34px)}
.screen-ico{width:clamp(64px,9vw,96px);aspect-ratio:1;border-radius:22px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#57c8ff,#2f8fff 50%,#2f6bff);box-shadow:inset 0 2px 8px rgba(255,255,255,.45),inset 0 -8px 16px rgba(15,48,110,.5),0 18px 40px -10px rgba(47,143,255,.8)}
.screen-ico svg{width:46%;height:46%}
.screen-n{font:800 clamp(14px,1.4vw,16px)/1 var(--mono);letter-spacing:.12em;color:var(--blue-2)}
.screen h3{margin-top:8px;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.03em}
.screen p{margin-top:10px;color:var(--muted-2);font-size:clamp(14px,1.3vw,16px);line-height:1.6}
@media (max-width:560px){.screen-body{grid-template-columns:1fr}.screen-ico{width:58px;border-radius:16px}}

/* counter + jump dots */
.stage-ui{position:absolute;left:0;right:0;bottom:max(20px,3svh);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:5}
.stage-count{font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--muted)}
.stage-count b{color:#fff;font-weight:500}
.stage-dots{display:flex;gap:8px;padding:8px 12px;border-radius:100px;background:rgba(5,8,16,.6);border:1px solid var(--line-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stage-dots button{width:9px;height:9px;border-radius:50%;background:rgba(243,242,238,.25);transition:background .3s,transform .3s,box-shadow .3s}
.stage-dots button:hover{background:rgba(243,242,238,.6)}
.stage-dots button[aria-current="true"]{background:var(--blue-2);transform:scale(1.4);box-shadow:0 0 10px var(--blue)}
@media (max-width:560px){.stage-ui{bottom:84px}.stage-dots{gap:6px;padding:7px 10px}.stage-dots button{width:7px;height:7px}}

/* no-motion / no-JS fallback: a clean list of glass cards */
.steps{list-style:none;margin:0;padding:20px 0 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.step{padding:26px;border-radius:20px;border:1px solid var(--line-2);background:var(--panel)}
.step .n{font:500 12px/1 var(--mono);letter-spacing:.16em;color:var(--blue-2)}
.step h2{margin-top:12px;font-size:21px;letter-spacing:-.02em}
.step p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.6}

/* ---------- final call to action ---------- */
.proc-cta{padding:var(--section) 0}
.cta-card{text-align:center;padding:clamp(40px,7vw,90px) clamp(20px,5vw,60px);border-radius:34px;border:1px solid var(--line-2);background:radial-gradient(60% 90% at 50% 0%,rgba(47,143,255,.22),transparent 70%),var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cta-card h2{font-size:clamp(34px,5vw,68px)}
.cta-card .lede{margin:18px auto 0;text-align:center}
.cta-card .cta-row{justify-content:center;margin-top:30px}
@media (prefers-reduced-motion:reduce){.stage-logo{animation:none}}

/* ==========================================================================
   THE ENGINE: a turbine dial. 12 segments in 4 coloured stages; scrolling turns
   the dial, the turbine revs up, and the engine ignites at the last step
   ========================================================================== */
:root{--st1:#6f9dff;--st2:#3fd3a0;--st3:#b18cff;--st4:#ff6f93}
.eng-bg{position:absolute;inset:0;background:url(work-portal-bg.webp?v=2) -40vw calc(52svh - 59.2vw)/140vw auto no-repeat;opacity:.55;filter:saturate(1.1);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%)}
.eng-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 70% at 34% 50%,rgba(3,5,11,.2),rgba(3,5,11,.8))}
.eng{position:absolute;left:30%;top:52%;width:min(64svh,46vw,600px);aspect-ratio:1;transform:translate(-50%,-50%)}
.eng-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eng-logo{position:absolute;left:50%;top:50%;width:16%;transform:translate(-50%,-50%);filter:brightness(1.7) drop-shadow(0 0 12px #57a6ff) drop-shadow(0 0 34px #2f8fff);transition:filter .6s}
/* jewel-tone segments at full strength (colours in process.js: HEX and LIGHT) */
.eng .seg{fill:none;stroke-width:30;stroke-linecap:butt;opacity:.82;transition:opacity .5s,stroke-width .5s,filter .5s}
.eng .seg.done{opacity:1}
.eng .seg.on{opacity:1;stroke-width:40;filter:brightness(1.35) drop-shadow(0 0 8px currentColor) drop-shadow(0 0 24px currentColor)}
.eng .seg-edge{fill:none;stroke-width:1.5;opacity:.28;transition:opacity .5s}
.eng .seg-edge.on{opacity:.9}
.eng .seg-n{font:700 15px/1 'JetBrains Mono',monospace;fill:#fff;text-anchor:middle;dominant-baseline:central;opacity:.72}
.eng .seg-n.on{opacity:1}
.eng .tick{stroke:rgba(185,220,255,.35);stroke-width:1.4}
.eng .tick.big{stroke:rgba(185,220,255,.7);stroke-width:2}
.eng .track{fill:none;stroke:rgba(185,220,255,.1);stroke-width:4}
.eng .prog{fill:none;stroke:url(#engProg);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 6px #57a6ff)}
.eng .blade{fill:url(#engBlade);stroke:rgba(185,220,255,.45);stroke-width:1}
.eng .core{fill:url(#engCore)}
.eng .core-ring{fill:none;stroke:rgba(140,196,255,.6);stroke-width:1.5}
.eng-legend{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap}
.eng-legend span{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:100px;border:1px solid var(--line-2);background:rgba(5,8,16,.55);font:600 12px/1 var(--sans);color:var(--muted);transition:all .4s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.eng-legend span i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.eng-legend span.on{color:#fff;border-color:var(--c);box-shadow:0 0 18px -4px var(--c)}
/* ignition at the last step */
.eng-burst{fill:none;stroke:#e6f2ff;stroke-width:3;opacity:0}
.stage.ignite .eng-burst{animation:eng-burst 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.stage.ignite .eng-burst.b2{animation-delay:.2s}
@keyframes eng-burst{0%{opacity:1;r:70px;stroke-width:6}100%{opacity:0;r:420px;stroke-width:1}}
.stage.ignite .eng-logo{filter:brightness(2.4) drop-shadow(0 0 22px #fff) drop-shadow(0 0 80px #57a6ff)}

/* the step card beside the engine */
.eng-card{position:absolute;left:58%;top:52%;width:min(480px,36vw);transform:translateY(-50%)}
.eng-card .card{position:relative;padding:clamp(24px,3vw,38px);border-radius:24px;border:1px solid rgba(185,220,255,.22);background:linear-gradient(160deg,rgba(28,44,82,.78),rgba(8,12,26,.86) 60%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 60px -20px var(--c);animation:card-in .6s var(--ease-out) both}
.eng-card .card.out{animation:card-out .3s ease-in both}
@keyframes card-in{from{opacity:0;transform:translateY(22px) scale(.97);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes card-out{to{opacity:0;transform:translateY(-16px) scale(.98);filter:blur(4px)}}
.eng-card .chip-stage{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:100px;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent)}
.eng-card .big-n{display:block;margin-top:18px;font:800 clamp(64px,7vw,104px)/.85 var(--sans);letter-spacing:-.05em;background:linear-gradient(180deg,#fff,var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.eng-card h3{margin-top:14px;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em}
.eng-card p{margin-top:10px;color:var(--muted-2);font-size:16px;line-height:1.6;max-width:36ch}
.eng-card .ico-t{position:absolute;right:clamp(20px,3vw,34px);top:clamp(20px,3vw,34px);width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));box-shadow:inset 0 2px 6px rgba(255,255,255,.4),0 14px 30px -8px var(--c)}
.eng-card .ico-t svg{width:28px;height:28px}

@media (max-width:860px){
  .eng-bg{background:url(work-portal-bg.webp?v=2) 50% calc(34svh - 0.239 * 260vw * 1.768)/260vw auto no-repeat}
  .eng{left:50%;top:34%;width:min(78vw,40svh)}
  .eng-legend{top:calc(100% + 10px)}
  .eng-legend span{padding:6px 9px;font-size:11px}
  .eng-card{left:50%;top:auto;bottom:max(96px,13svh);width:calc(100% - 32px);transform:translateX(-50%)}
  .eng-card .big-n{display:none}
  .eng-card h3{margin-top:12px;padding-right:64px}
  .eng-card p{font-size:14px}
  .eng-card .ico-t{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){.eng-card .card,.eng-card .card.out{animation:none}}