.process-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: 104px;
  margin-top: -1px;
  padding-block: clamp(54px, 5.2vw, 72px) clamp(68px, 6vw, 88px);
  background-color: #050e15;
  background-image:
    linear-gradient(180deg, rgba(5, 14, 21, .94) 0%, rgba(4, 13, 20, .72) 13%, rgba(3, 12, 19, .22) 42%, rgba(3, 11, 17, .48)),
    linear-gradient(90deg, rgba(3, 13, 20, .25), rgba(3, 13, 20, .04) 30%, rgba(3, 13, 20, .08) 68%, rgba(3, 13, 20, .3)),
    url("../images/process-financial-desk-v2.png");
  background-position: center;
  background-size: cover;
}

.process-section::before,
.process-section::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.process-section::before { inset: 0; background: radial-gradient(ellipse 48% 42% at 50% 48%, rgba(3, 14, 22, .04), rgba(3, 11, 18, .3) 76%, rgba(2, 9, 15, .48)); }
.process-section::after { top: 0; inset-inline: 18%; height: 1px; opacity: .42; background: linear-gradient(90deg, transparent, rgba(229, 177, 100, .27) 14%, rgba(245, 200, 127, .63) 50%, rgba(229, 177, 100, .27) 86%, transparent); }
.process-section__atmosphere { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 32% 28% at 50% 37%, rgba(29, 75, 93, .13), transparent 76%); pointer-events: none; }
.process-section__linework { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.process-section__linework i { position: absolute; display: block; border: 1px solid rgba(226, 177, 104, .12); border-radius: 50%; }
.process-section__linework i:first-child { top: -235px; inset-inline-start: -170px; width: min(46vw, 670px); height: 312px; border-inline-end-color: transparent; border-block-end-color: rgba(229, 180, 105, .25); transform: rotate(-13deg); }
.process-section__linework i:last-child { bottom: -265px; inset-inline-end: -210px; width: min(48vw, 690px); height: 320px; border-inline-start-color: transparent; border-block-start-color: rgba(229, 180, 105, .17); transform: rotate(10deg); }

.process-section__inner {
  position: relative;
  z-index: 1;
  width: min(1440px, calc(100% - 96px));
  margin-inline: auto;
}
.process-intro { max-width: 680px; margin-inline: auto; text-align: center; }
.process-intro__eyebrow { color: #dba461; font-size: .82rem; font-weight: 600; }
.process-intro h2 { margin-top: 10px; color: #f8f3eb; font-size: clamp(2rem, 3.05vw, 3rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.28; }
.process-intro h2 em { color: #dda561; font-style: normal; }
.process-intro > p:last-child { margin-top: 10px; color: rgba(230, 234, 229, .82); font-size: clamp(.92rem, 1.05vw, 1rem); line-height: 1.85; }

.process-journey { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 62px); margin-top: clamp(40px, 4.3vw, 56px); }
.process-journey__line { position: absolute; z-index: -1; top: 65px; inset-inline: calc(16.667% + 12px); height: 1px; overflow: hidden; background: linear-gradient(to left, transparent, rgba(224, 175, 101, .32) 13%, rgba(224, 175, 101, .32) 87%, transparent); }
.process-journey__line i { position: absolute; inset-block: 0; width: 25%; background: linear-gradient(to left, transparent, rgba(249, 208, 143, .95), transparent); filter: drop-shadow(0 0 4px rgba(239, 183, 92, .78)); animation: process-line-flow 8s linear infinite; }
.process-step { position: relative; display: grid; grid-template-rows: 27px 58px auto; justify-items: center; text-align: center; }
.process-step__number { align-self: start; color: #e2ac66; font-family: var(--font-latin); font-size: .76rem; letter-spacing: .15em; line-height: 1; }
.process-step__icon { position: relative; display: grid; z-index: 1; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(230, 179, 103, .54); border-radius: 50%; color: #e9b269; background: radial-gradient(circle at 34% 28%, rgba(72, 117, 132, .44), rgba(4, 18, 27, .9) 74%); box-shadow: inset 0 1px 0 rgba(255, 241, 211, .14), 0 0 0 7px rgba(4, 17, 25, .68); transition: color .55s ease, border-color .55s ease, box-shadow .55s ease; }
.process-step__icon::after { position: absolute; content: ""; inset: -5px; border: 1px solid rgba(229, 180, 105, .12); border-radius: 50%; }
.process-step__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.38; }
.process-step__content { max-width: 298px; margin-top: 21px; }
.process-step h3 { color: #f6f1e9; font-size: clamp(1.06rem, 1.35vw, 1.23rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.4; }
.process-step p { margin-top: 8px; color: rgba(228, 232, 228, .78); font-size: .87rem; line-height: 1.82; }

.motion-ready .process-section__atmosphere { animation: process-ambient-drift 19s ease-in-out infinite alternate; }
.motion-ready .process-step { opacity: 0; transform: translateY(10px); transition: opacity .62s ease, transform .62s cubic-bezier(.22, .61, .36, 1); }
.motion-ready .process-step.is-revealed { opacity: 1; transform: translateY(0); }
.motion-ready .process-step:nth-of-type(2) { transition-delay: .14s; }
.motion-ready .process-step:nth-of-type(3) { transition-delay: .28s; }
.motion-ready .process-step.is-revealed .process-step__icon { color: #f1bb73; border-color: rgba(241, 191, 116, .76); box-shadow: inset 0 1px 0 rgba(255, 244, 220, .16), 0 0 0 7px rgba(4, 17, 25, .68), 0 0 16px rgba(221, 163, 80, .13); }
.motion-ready .process-journey__line { opacity: 0; transform: scaleX(.08); transform-origin: right center; transition: opacity .85s ease, transform .85s cubic-bezier(.22, .61, .36, 1); }
.motion-ready .process-journey.is-revealed .process-journey__line { opacity: 1; transform: scaleX(1); }
.motion-ready .process-journey__line i { animation-play-state: paused; }
.motion-ready .process-journey.is-revealed .process-journey__line i { animation-play-state: running; }

:root:dir(ltr) .process-journey__line { background: linear-gradient(to right, transparent, rgba(224, 175, 101, .32) 13%, rgba(224, 175, 101, .32) 87%, transparent); }
:root:dir(ltr) .process-journey__line i { animation-direction: reverse; }
:root:dir(ltr) .motion-ready .process-journey__line { transform-origin: left center; }
@keyframes process-line-flow { from { transform: translateX(210%); } to { transform: translateX(-360%); } }
@keyframes process-ambient-drift { from { opacity: .68; transform: translateX(-.35%); } to { opacity: 1; transform: translateX(.35%); } }

@media (max-width: 960px) {
  .process-section__inner { width: calc(100% - 64px); }
}

@media (max-width: 720px) {
  .process-section { min-height: 0; padding-block: 70px 126px; background-position: 50% center; }
  .process-intro { max-width: 520px; }
  .process-journey { grid-template-columns: 1fr; gap: 36px; max-width: 520px; margin: 48px auto 0; }
  .process-journey__line { top: 48px; bottom: 48px; inset-inline: auto; inset-inline-start: 28px; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(224, 175, 101, .34) 10%, rgba(224, 175, 101, .34) 90%, transparent); }
  .process-journey__line i { inset-inline: 0; width: 1px; height: 26%; background: linear-gradient(180deg, transparent, rgba(249, 208, 143, .95), transparent); animation: process-line-flow-vertical 8s linear infinite; }
  .process-step { grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; column-gap: 22px; text-align: start; }
  .process-step__number { grid-column: 2; grid-row: 1; align-self: center; }
  .process-step__icon { grid-column: 1; grid-row: 1 / span 2; }
  .process-step__content { grid-column: 2; grid-row: 2; max-width: none; margin-top: 8px; }
  .process-step p { max-width: 430px; }
  .motion-ready .process-journey__line { transform: scaleY(.08); transform-origin: top center; }
  .motion-ready .process-journey.is-revealed .process-journey__line { transform: scaleY(1); }
}
@media (max-width: 620px) { .process-section__inner { width: calc(100% - 40px); } }
@keyframes process-line-flow-vertical { from { transform: translateY(-140%); } to { transform: translateY(380%); } }
@media (prefers-reduced-motion: reduce) { .process-journey__line i, .process-section__atmosphere { animation: none; } }