/* Native-size type stays sharp; depth and motion live on the artwork. */
.process-page .site-header { background: #080e1bef; }
.process-page .site-header .brand { mix-blend-mode: screen; }
.process-page .site-header.scrolled { background: #080e1bf5; }
.process-page .site-header .site-nav > a:not(.button),
.process-page .site-header .nav-services-trigger { color: #f5f6ff; }
.process-page .site-header .button { color: #080e1b; background: #fff; box-shadow: -5px 0 20px #9737ef40,5px 0 20px #397aff30; }
.process-page .site-header .button span { color: #fff; background: #080e1b; }
.process-page .site-header .menu-toggle { background: #182035; border-color: #ffffff30; }
.process-page .site-header .menu-toggle span { background: #fff; }

.process-showcase {
  position: relative; min-height: 900px; padding: 130px 0 80px;
  display: grid; grid-template-columns: minmax(0,1fr); align-items: center;
  color: #fff; background: radial-gradient(ellipse at 68% 50%,#17133b70,transparent 45%),#080f20;
  overflow: clip; isolation: isolate;
}
.process-grid { position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(#7a8bc909 1px,transparent 1px),linear-gradient(90deg,#7a8bc909 1px,transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(#000,transparent); }
.process-showcase-layout { width: min(calc(100% - 80px),1420px); min-width: 0; display: grid; grid-template-columns: minmax(0,.84fr) minmax(0,1.16fr); gap: 34px; align-items: center; }
.process-showcase-copy { position: relative; z-index: 3; min-width: 0; animation: process-copy-in .8s var(--ease) backwards; }
.process-back { display: inline-flex; margin-bottom: 30px; color: #b7c3df; font-size: 13px; transition: color .25s,transform .25s; }
.process-back:hover { color: #fff; transform: translateX(-4px); }
.process-kicker { display: flex; align-items: center; gap: 18px; color: #bf7cff; font: 700 13px var(--heading); letter-spacing: .22em; text-transform: uppercase; }
.process-kicker i { width: 32px; height: 3px; background: linear-gradient(90deg,#fb45c8,#8b6cff); }
.process-showcase h1 { margin: 30px 0 26px; font-size: clamp(46px,4.45vw,78px); line-height: 1.08; letter-spacing: -.067em; font-weight: 800; }
.process-showcase h1 em { display: block; color: transparent; background: linear-gradient(110deg,#fa4fbe 5%,#bb58e8 52%,#4479ff); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.process-showcase-copy > p { max-width: 520px; color: #b8c5e1; font-size: 17px; line-height: 1.75; }

.process-system { position: relative; justify-self: end; width: 100%; max-width: 790px; min-width: 0; aspect-ratio: 760/690; animation: process-system-in 1s var(--ease) .1s backwards; }
.process-orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.process-system .orbit-dotted { stroke: #6478ff; stroke-width: 1.2; stroke-dasharray: 2 7; opacity: .8; }
.process-system .orbit-main { stroke: url(#process-orbit-gradient); stroke-width: 2; }
.process-system .orbit-inner { stroke: url(#process-orbit-gradient); stroke-width: 1.1; opacity: .8; }
.process-system .orbit-segment,.process-system .inner-segment { stroke: url(#process-orbit-gradient); stroke-width: 2; stroke-linecap: round; }
.process-system .inner-segment { stroke-width: 1.25; }
.process-core { position: absolute; z-index: 2; left: 34%; top: 33.5%; width: 32%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; isolation: isolate; }
.process-core::before { content: ''; position: absolute; z-index: -1; inset: 0; border: 1px solid #bd82ff; border-radius: 50%; background: radial-gradient(ellipse at 65% 30%,#09185c 10%,#241069 53%,#7214c4 85%); box-shadow: inset -5px -5px 18px #5429ff,inset 7px 2px 17px #ef40fa,inset 0 5px 13px #4fa9ff,0 0 24px #7342ff40; animation: process-core-glow 5s ease-in-out infinite alternate; }
.process-core small { color: #d581ff; font: 700 clamp(9px,.72vw,12px) var(--heading); letter-spacing: .25em; text-transform: uppercase; }
.process-core strong { margin-top: 8px; color: #fff; font: 800 clamp(28px,2.45vw,43px) var(--heading); letter-spacing: -.045em; }
.process-core > span { height: 28px; margin-top: 12px; display: flex; align-items: end; gap: 4px; }
.process-core > span i { width: 6px; height: 9px; background: linear-gradient(#ed52e6,#854bff); }
.process-core > span i:nth-child(2) { height: 17px; }.process-core > span i:nth-child(3) { height: 26px; }
.process-orbit-card {
  position: absolute; z-index: 4; width: 31%; min-height: 132px; padding: 16px;
  display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 13px; align-items: center;
  color: #fff; border: 1px solid transparent; border-radius: 16px;
  background: linear-gradient(135deg,#19142f,#0e1830) padding-box,linear-gradient(130deg,#ed4de8,#7243d8 52%,#4779fa) border-box;
  box-shadow: 0 14px 30px #02061370,inset 0 1px #ffffff0c;
  transition: transform .28s var(--ease),box-shadow .28s;
}
.process-orbit-card::after { content: ''; position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(160px circle at var(--step-light-x,50%) var(--step-light-y,0%),#d980ff12,transparent 65%); }
.process-orbit-card:focus-visible { outline: 2px solid #e7b0ff; outline-offset: 5px; box-shadow: 0 0 24px #aa4fff40; }
.process-orbit-card-icon { position: relative; z-index: 1; width: 50px; height: 50px; display: grid; place-items: center; color: #f5eaff; border: 1px solid #a94bdf; border-radius: 50%; background: radial-gradient(circle at 30% 20%,#612364,#20133c 68%); box-shadow: inset 0 0 10px #cf52ed26,0 4px 12px #0004; transition: transform .3s; }
.process-orbit-card-icon svg { width: 27px; height: 27px; }
.process-orbit-card-copy { position: relative; z-index: 1; min-width: 0; display: grid; }
.process-orbit-card-copy small { color: #d978ff; font: 600 12px var(--heading); }
.process-orbit-card-copy strong { margin: 6px 0; color: #fff; font: 700 clamp(16px,1.08vw,19px) var(--heading); letter-spacing: -.025em; }
.process-orbit-card-copy > span { color: #c2cee7; font-size: 13px; line-height: 1.5; font-weight: 400; }
.process-orbit-card-1 { left: 34.5%; top: 0; }
.process-orbit-card-2 { right: -1%; top: 29%; }
.process-orbit-card-3 { right: 12%; bottom: 0; }
.process-orbit-card-4 { left: 7%; bottom: 0; }
.process-orbit-card-5 { left: -1%; top: 33%; }
.process-orbit-dots i { position: absolute; z-index: 3; width: 11px; height: 11px; border: 2px solid #93a2ff; border-radius: 50%; background: #4160ff; box-shadow: 0 0 0 4px #3950d329,0 0 10px #5271ff; animation: process-pulse 3s ease-in-out infinite; }
.process-orbit-dots i:nth-child(1) { left: 49.2%; top: 23%; background: #e736ec; border-color: #f58aff; }
.process-orbit-dots i:nth-child(2) { right: 15%; top: 46%; animation-delay: -.6s; }
.process-orbit-dots i:nth-child(3) { right: 20%; bottom: 23%; animation-delay: -1.2s; }
.process-orbit-dots i:nth-child(4) { left: 21%; bottom: 23%; animation-delay: -1.8s; }
.process-orbit-dots i:nth-child(5) { left: 17%; top: 30%; animation-delay: -2.4s; }
.process-planet { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; translate: var(--planet-x,0px) calc(var(--planet-y,0px) + var(--planet-scroll,0px)); background: radial-gradient(circle at 28% 20%,#325dff,#4929ee 33%,#b61bc8 74%,#401178); box-shadow: inset 11px 7px 23px #7596ff70,inset -18px -17px 34px #28075775,0 0 30px #7221e52a; transition: translate .3s ease-out; }
.process-planet-left { width: 310px; height: 310px; left: -220px; top: 86px; }
.process-planet-top { width: 315px; height: 315px; left: -177px; top: -205px; background: #211949; border: 1px solid #622a9b; box-shadow: inset -30px -35px 70px #090d1d; }
.process-planet-right { width: 400px; height: 400px; right: -292px; top: 470px; }
.process-planet-bottom { width: 460px; height: 460px; right: -190px; bottom: -400px; background: #17133b; border: 1px solid #7028bc; box-shadow: inset 30px 30px 80px #271062; }
.process-showcase .process-note { position: absolute; width: auto; margin: 0; color: #c8a9ff; text-align: center; font: italic 25px/1.08 'Segoe Print','Comic Sans MS',cursive; rotate: -18deg; pointer-events: none; }
.process-note::after { content: ''; display: block; height: 1px; margin-top: 7px; background: currentColor; }
.process-showcase .process-note-left { left: 3.2%; bottom: 105px; }
.process-showcase .process-note-right { right: 4.5%; top: 112px; rotate: -15deg; }
@keyframes process-copy-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes process-system-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes process-core-glow { to { box-shadow: inset -5px -5px 22px #5429ff,inset 8px 2px 22px #ef40fa,inset 0 5px 16px #4fa9ff,0 0 32px #7342ff60; } }
@keyframes process-pulse { 50% { transform: scale(1.25); } }
@media (hover:hover) and (pointer:fine) {
  .process-orbit-card:hover { transform: perspective(1000px) translateY(-4px) rotateX(var(--step-rx,0deg)) rotateY(var(--step-ry,0deg)); box-shadow: 0 20px 35px #0006,0 0 16px #9045ff35; }
  .process-orbit-card:hover .process-orbit-card-icon { transform: translateY(-2px) rotate(-5deg); }
}
@media (max-width:1500px) {
  .process-showcase .process-note { display: none; }
  .process-showcase-layout { gap: 25px; }
  .process-orbit-card { padding: 14px; grid-template-columns: 40px minmax(0,1fr); gap: 10px; }
  .process-orbit-card-icon { width: 40px; height: 40px; }
  .process-orbit-card-icon svg { width: 24px; height: 24px; }
  .process-orbit-card-copy > span { font-size: 12px; }
}
@media (max-width:1190px) {
  .process-showcase { min-height: auto; }
  .process-showcase-layout { width: min(calc(100% - 48px),900px); grid-template-columns: minmax(0,1fr); gap: 48px; }
  .process-showcase-copy { text-align: center; }
  .process-kicker { justify-content: center; }
  .process-showcase h1 { font-size: clamp(46px,6vw,68px); }
  .process-showcase-copy > p { margin-inline: auto; }
  .process-system { justify-self: center; max-width: 760px; }
  .process-orbit-card-copy > span { font-size: 13px; }
  .process-core strong { font-size: 38px; }
  .process-core small { font-size: 11px; }
}
@media (max-width:820px) {
  .process-page .site-header { backdrop-filter: none; }
  .process-page .site-nav { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; }
  .process-page .site-nav.open { visibility: visible; }
  .process-page .site-nav > * { flex-shrink: 0; }
  .process-page .site-header .site-nav > a:not(.button),.process-page .site-header .nav-services-trigger { color: var(--navy); }
}
@media (min-width:821px) and (max-width:1100px) {
  .process-page .brand { width: 145px; }
  .process-page .site-nav { gap: 12px; font-size: 11px; }
  .process-page .site-nav > a:nth-child(4) { display: block; }
  .process-page .site-nav .button { font-size: 11px; padding-left: 12px; gap: 8px; }
}
@media (max-width:640px) {
  .process-showcase { padding: 118px 0 60px; }
  .process-showcase-layout { width: calc(100% - 36px); gap: 32px; }
  .process-back { margin-bottom: 23px; }
  .process-kicker { font-size: 11px; }
  .process-showcase h1 { font-size: clamp(34px,8.6vw,53px); margin: 24px 0; }
  .process-showcase-copy > p { font-size: 15px; line-height: 1.7; }
  /* Reflow the cards instead of shrinking their text with a scaled diagram. */
  .process-system { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; aspect-ratio: auto; }
  .process-orbits,.process-orbit-dots { display: none; }
  .process-core { position: relative; left: auto; top: auto; width: 190px; justify-self: center; margin: 8px 0 20px; }
  .process-core strong { font-size: 34px; }
  .process-core small { font-size: 10px; }
  .process-orbit-card { position: relative; inset: auto; width: 100%; min-height: 110px; padding: 18px; grid-template-columns: 52px minmax(0,1fr); gap: 18px; }
  .process-orbit-card:not(:last-child)::before { content: ''; position: absolute; left: 43px; bottom: -15px; height: 14px; width: 1px; background: #a353ee; }
  .process-orbit-card-icon { width: 52px; height: 52px; }
  .process-orbit-card-copy strong { font-size: 18px; }
  .process-orbit-card-copy > span { font-size: 14px; }
  .process-planet-left { opacity: .5; }.process-planet-right { top: 48%; opacity: .5; }
}
@media (prefers-reduced-motion:reduce) {
  .process-showcase *,.process-showcase *::before,.process-showcase *::after { animation: none !important; transition: none !important; }
  .process-planet { translate: none !important; }
  .process-orbit-card:hover,.process-orbit-card:hover .process-orbit-card-icon { transform: none; }
  html:has(.process-page) { scroll-behavior: auto; }
}