.process{
position:relative;
overflow:visible;
padding:140px 0;
} .process-layout{
position:relative;
z-index:5;
display:grid;
grid-template-columns:420px 1fr;
gap:90px;
}
@media(max-width:900px){
.process-layout{
grid-template-columns:1fr;
gap:50px;
}
} .process-intro{
position:sticky;
top:140px;
}
.process-intro h2{
font-size:48px;
font-weight:900;
line-height:1.1;
background:
linear-gradient(
120deg,
#0f172a,
#1e293b,
#0f172a
);
-webkit-background-clip:text;
color:transparent;
}
.process-intro p{
margin-top:16px;
font-size:18px;
color:#475569;
} .process-steps{
display:flex;
flex-direction:column;
gap:0;
position:relative;
overflow:visible;
} .process-steps::before{
content:"";
position:absolute;
left:22px;
top:0;
bottom:0;
width:3px;
background:
linear-gradient(
to bottom,
rgba(201,161,90,.2),
#c9a15a,
rgba(201,161,90,.2)
);
box-shadow:
0 0 30px rgba(201,161,90,.6);
z-index:0;
} .process-step{
position:relative;
display:grid;
grid-template-columns:120px 1fr;
gap:28px;
padding:40px;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.9),
rgba(255,255,255,.75)
);
backdrop-filter:blur(22px);
border:1px solid rgba(15,23,42,.06);
box-shadow:
0 40px 100px rgba(0,0,0,.12),
inset 0 1px 0 rgba(255,255,255,.9);
transition:.35s;
}
.process-step{
position:relative;
z-index:2; background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(transparent,transparent) border-box;
} .process-step:hover{
transform:translateY(-8px);
box-shadow:
0 60px 140px rgba(0,0,0,.18),
0 0 40px rgba(201,161,90,.18);
} .step-num{
font-size:90px;
font-weight:900;
line-height:1;
background:
linear-gradient(
120deg,
#c9a15a,
#fff3c9,
#c9a15a
);
-webkit-background-clip:text;
color:transparent;
text-shadow:
0 10px 40px rgba(201,161,90,.45);
opacity:.95;
} .process-step h3{
font-size:24px;
font-weight:900;
margin-bottom:10px;
color:#0f172a;
}
.process-step p{
font-size:17px;
line-height:1.6;
color:#475569;
} .process-step{
position:relative;
overflow:hidden;
} .process-intro h2{
background: linear-gradient(
105deg,
#020617 0%, #0f172a 35%, #1e293b 60%, #c9a15a 88%, #fff3c9 100% );
-webkit-background-clip:text;
background-clip:text;
color:transparent;
font-weight:900;
letter-spacing:-0.02em; text-shadow:
0 2px 4px rgba(0,0,0,.25),
0 8px 30px rgba(0,0,0,.18),
0 6px 18px rgba(201,161,90,.12);
} .process-step::before{
content:"";
position:absolute;
right:30px;
top:50%;
transform:translateY(-50%);
width:240px;
height:240px;
opacity:.26; pointer-events:none;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
filter:
drop-shadow(0 25px 60px rgba(201,161,90,.45));
z-index:0;
} .process-step > *{
position:relative;
z-index:2;
} @media (prefers-reduced-motion: no-preference){
.process-step::before{
animation:processIconFloat 8s ease-in-out infinite alternate;
}
}
.process-step{
padding-right:140px;
} .process-step[data-icon="plan"]::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4e157' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18'/%3E%3Cpath d='M9 3v7h6V3'/%3E%3Cpath d='M9 14v7M15 10v11M3 9h6M15 14h6'/%3E%3C/svg%3E");
} .process-step[data-icon="calendar"]::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4e157' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 14h3M8 18h6'/%3E%3C/svg%3E");
} .process-step[data-icon="contract"]::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4e157' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l3 3v15a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M14 3v4h4M8 13h8M8 17h6M8 9h4'/%3E%3C/svg%3E");
} .process-step[data-icon="keys"]::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4e157' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14a4 4 0 1 1 3.6-2.2L21 12v3h-3v3h-3v-3l-5.2-.2'/%3E%3Ccircle cx='7' cy='14' r='1'/%3E%3C/svg%3E");
} @media (max-width: 900px){ .process-intro{
margin-bottom:120px;
}
} @media (max-width:900px){
.process{
padding-top:0px; padding-bottom:100px;
}
} @media (max-width:900px){
.process-step{
grid-template-columns:1fr; gap:12px;
padding:30px 24px;
} .step-num{
font-size:120px;
text-align:center;
margin-bottom:6px;
} .process-step > div{
text-align:center;
}
} @media (max-width:900px){ .process-step{
padding-bottom:140px;
padding-right:24px; } .process-step::before{
right:auto;
left:50%;
top:auto;
bottom:20px;
transform:translateX(-50%);
width:260px;
height:260px;
opacity:.18;
}
} .process-layout{
position:relative;
z-index:5;
display:grid;
grid-template-columns:420px 1fr;
gap:90px;
}
@media(max-width:900px){
.process-layout{
grid-template-columns:1fr;
gap:50px;
}
} .process-intro{
position:sticky;
top:140px;
}
.process-intro h2{
font-family:"Outfit",sans-serif;
font-size:48px;
font-weight:600;
color:#0f172a;
}
.process-intro p{
margin-top:16px;
font-size:18px;
color:#475569;
} .process-steps{
position:relative;
display:grid;
gap:40px;
}
.process-steps::before{
content:"";
position:absolute;
left:22px;
top:0;
bottom:0;
width:2px;
background:rgba(15,23,42,.08);
} .process-step{
position:relative;
z-index:2;
display:grid;
grid-template-columns:120px 1fr;
gap:28px;
padding:40px;
border-radius:16px;
background:#fff;
border:1px solid rgba(15,23,42,.06);
box-shadow:
0 20px 60px rgba(0,0,0,.08);
transition:.3s ease;
}
.process-step:hover{
transform:translateY(-6px);
border-color:var(--brand-primary);
box-shadow:
0 30px 80px rgba(0,0,0,.12);
} .step-num{
font-size:90px;
font-weight:800;
line-height:1;
color:var(--brand-primary);
opacity:.9;
} .process-step h3{
font-size:24px;
font-weight:600;
margin-bottom:10px;
color:#0f172a;
}
.process-step p{
font-size:17px;
line-height:1.6;
color:#475569;
} .process-step::before{
content:"";
position:absolute;
right:30px;
top:50%;
transform:translateY(-50%);
width:200px;
height:200px;
opacity:.06;
background-repeat:no-repeat;
background-size:contain;
} @media(max-width:900px){
.process-step{
grid-template-columns:1fr;
text-align:center;
}
.step-num{
font-size:120px;
}
} .step-num{ background:none !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
text-shadow:none !important; -webkit-text-stroke:1px var(--brand-primary);
text-stroke:1px var(--brand-primary);  letter-spacing:-0.02em;
opacity:1;
} .process-steps::before{
background:var(--brand-primary) !important;
box-shadow:none !important; }
.process{
position:relative;
overflow:visible;
padding:140px 0;
background:#f6f7f8;
isolation:isolate;
} .process::before{
content:"";
position:absolute;
inset:0;
z-index:0;
background:
radial-gradient(1200px 520px at 15% 10%,
rgba(255,214,140,.55),
rgba(255,214,140,0) 60%),
radial-gradient(900px 480px at 85% 25%,
rgba(255,230,170,.35),
rgba(255,230,170,0) 62%),
radial-gradient(1000px 520px at 40% 85%,
rgba(255,205,120,.30),
rgba(255,205,120,0) 65%),
linear-gradient(180deg,
rgba(255,255,255,.9),
rgba(246,247,248,.82) 45%,
rgba(244,246,248,.92));
} .process::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background-image:repeating-linear-gradient(
0deg,
rgba(0,0,0,.03) 0px,
rgba(0,0,0,.03) 1px,
transparent 2px,
transparent 5px
);
opacity:.12;
} .process-layout{
position:relative;
z-index:5;
}
.process .hero-eyebrow{
display:inline-block;
padding:6px 12px;
border-radius:6px;
background:rgba(255,255,255,.55);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.7);
} @media (max-width:900px){ .process{
padding-top:60px !important; padding-bottom:60px !important; } .process-intro{
position:relative !important;
top:auto !important;
margin-bottom:30px !important; } .process-layout{
gap:30px !important; }
}  @media (max-width:900px){ .process-steps{
gap:0 !important;
} .process-step{
position:sticky;
top:calc(var(--header-h, 80px) + 20px);
margin-bottom:60px; border-radius:16px;
box-shadow:0 30px 80px rgba(0,0,0,.12);
} .process-step:nth-child(1){ z-index:1; }
.process-step:nth-child(2){ z-index:2; }
.process-step:nth-child(3){ z-index:3; }
.process-step:nth-child(4){ z-index:4; }
.process-step:nth-child(5){ z-index:5; }
.process-step:nth-child(6){ z-index:6; }
} :root{
--vl24-gold-metal: linear-gradient(
180deg,
#fff6c7 0%,
#f0c95a 35%,
#b8962e 65%,
#fff1a3 100%
);
} .process-step{
border:2px solid transparent !important;
background:
linear-gradient(#fff,#fff) padding-box,
var(--vl24-gold-metal) border-box;
} .process-steps::before{
content:"";
position:absolute;
left:22px;
top:0;
bottom:0;
width:3px;
background:var(--vl24-gold-metal) !important;
box-shadow:
0 0 12px rgba(212,175,55,.25),
0 0 24px rgba(212,175,55,.15);
opacity:.9;
} .step-num{ -webkit-text-stroke:0 !important;
text-stroke:0 !important; background:var(--vl24-gold-metal) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important; text-shadow:
0 1px 1px rgba(0,0,0,.35),
0 4px 12px rgba(212,175,55,.25);
opacity:1;
} .process-step::before{
display:none !important;
content:none !important;
}
.process-step{
border:2px solid transparent !important;
background:
radial-gradient(
600px 200px at 20% 0%,
rgba(255,230,170,.6),
rgba(255,255,255,.95) 50%
) padding-box,
var(--vl24-gold-metal) border-box;
} .process-intro .hero-eyebrow{
margin-bottom:16px !important; }
.process-intro h2{
margin-top:0px !important;
} body.page-id-203 .process-layout{
margin-top:180px !important; } body.page-id-206 .process-layout{
margin-top:180px !important; }
body.page-id-240 .process-layout{
margin-top:180px !important; }
body.page-id-245 .process-layout{
margin-top:180px !important; }
body.page-id-381 .process-layout{
margin-top:180px !important; }
body.page-id-383 .process-layout{
margin-top:180px !important; }
body.page-id-567 .process-layout{
margin-top:180px !important; }
body.page-id-581 .process-layout{
margin-top:180px !important; }