/* The process cards sit on a separate 3D layer from their scroll reveals. */
.method-redesign{--method-x:0;--method-y:0;--method-scroll:0px;--method-progress:0;position:relative;isolation:isolate;overflow:hidden;padding:115px 0 150px;background:radial-gradient(ellipse at 80% 47%,#f1edff88,transparent 60%),radial-gradient(ellipse at 16% 75%,#fbf5ff66,transparent 45%),#fdfdff;color:#080c26}
.method-redesign .method-layout{position:relative;width:min(1240px,calc(100% - 100px));display:grid;grid-template-columns:.72fr 1.08fr;gap:65px;align-items:center}
.method-redesign .method-intro{position:relative;top:auto;min-width:0}
.method-redesign .kicker{font-size:13px;color:#8228ff;letter-spacing:.025em;gap:10px}.method-redesign .kicker::before{background:linear-gradient(90deg,#ec30d6,#32aaff);width:29px}
.method-redesign .method-intro h2{font-size:clamp(48px,4.4vw,74px);font-weight:800;line-height:1.03;letter-spacing:-.06em;margin:27px 0 26px}
.method-redesign .gradient-text{display:inline-block;background-image:linear-gradient(115deg,#f315bc 5%,#dc17d2 36%,#8a24ff 66%,#008dff 97%)}
.method-redesign .method-intro p{max-width:455px;color:#818db3;font-size:16px;line-height:1.65;margin:0}
.method-actions{display:flex;align-items:center;gap:24px;margin-top:36px;white-space:nowrap}
.method-actions .button{min-height:53px;background:#050a20;box-shadow:0 17px 30px #23235926;gap:20px;padding:8px 10px 8px 24px;font-size:12px}
.method-actions .button span{width:33px;height:33px;font-size:23px;background:#fff;color:#080c26}
.method-actions .button:hover,.method-actions .button:focus-visible{background:#261153;transform:translateY(-4px);box-shadow:0 20px 40px #7740c533}
.method-actions .button:hover span{transform:translateX(2px)}
.method-contact{display:inline-flex;align-items:center;gap:13px;font-size:12px;font-weight:600}.method-contact span{font-size:22px;transition:transform .3s}.method-contact:hover{color:#8228ff}.method-contact:hover span{transform:translateX(5px)}
.method-actions a:focus-visible{outline:2px solid #9443ff;outline-offset:5px}
.method-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:23px;perspective:1400px;--line-inset:68px}
.method-steps::before,.method-steps::after{content:'';position:absolute;left:-17px;top:var(--line-inset);bottom:var(--line-inset);width:2px;z-index:-1;background:linear-gradient(#f0d8f4,#d8ddf8 45%,#d1f4ef);border-radius:2px}
.method-steps::after{background:linear-gradient(#f147dd,#1598ff 35%,#9037ff 67%,#06d8be);transform:scaleY(var(--method-progress));transform-origin:top;box-shadow:0 0 10px #934fff22}
.method-step-wrap{--step-accent:#ec3bcc;--step-tint:#fbe1f9;position:relative;perspective:1000px;min-width:0}
.method-step-wrap:nth-child(2){--step-accent:#059afa;--step-tint:#dcefff;transition-delay:.1s}.method-step-wrap:nth-child(3){--step-accent:#9025ff;--step-tint:#e9ddff;transition-delay:.2s}.method-step-wrap:nth-child(4){--step-accent:#00cdb3;--step-tint:#d6fcf4;transition-delay:.3s}
.method-step-wrap::before{content:'';position:absolute;left:-24px;top:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:var(--step-accent);border:1px solid #ffffff80;box-shadow:0 0 0 5px #fcfbff,0 0 14px color-mix(in srgb,var(--step-accent) 30%,transparent);transition:box-shadow .3s}
.method-step-card{--card-x:0;--card-y:0;position:relative;display:grid;grid-template-columns:30px 88px minmax(0,1fr) 48px;align-items:center;gap:22px;min-height:138px;padding:23px 28px 23px 24px;border:1px solid #eeeefa;border-radius:23px;background:linear-gradient(130deg,#ffffffef,#ffffffb8);box-shadow:0 16px 40px #a19bb909;transform-style:preserve-3d;transform:rotateX(calc(var(--card-y) * -6deg)) rotateY(calc(var(--card-x) * 7deg));transition:transform .25s ease-out,translate .35s,box-shadow .35s,border-color .35s}
.method-step-card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at calc(50% + var(--card-x) * 45%) calc(50% + var(--card-y) * 40%),color-mix(in srgb,var(--step-tint) 70%,transparent),transparent 70%);opacity:0;transition:opacity .35s}
.method-step-number{font:700 20px var(--body);color:#c8cce3;transition:color .3s}
.method-step-icon{position:relative;z-index:1;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:linear-gradient(145deg,var(--step-tint) 20%,#fff);border:1px solid var(--step-tint);color:var(--step-accent);transform:translateZ(22px);box-shadow:inset 0 1px 3px #fff8;transition:box-shadow .35s}
.method-step-icon svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:rotate .4s,scale .4s}
.method-step-copy{position:relative;z-index:1;transform:translateZ(12px)}
.method-step-copy h3{margin:0 0 7px;font:700 23px/1.2 var(--heading);letter-spacing:-.055em}
.method-step-copy p{margin:0;font-size:15px;line-height:1.65;color:#7d8bb4}
.method-step-arrow{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border:1px solid #e8e8f7;border-radius:50%;background:#ffffff66;color:#11172e;font-size:25px;transform:translateZ(25px);transition:background .3s,color .3s,box-shadow .3s}
.method-step-card:hover,.method-step-card:focus-visible{translate:0 -6px;border-color:color-mix(in srgb,var(--step-accent) 35%,white);box-shadow:0 20px 45px color-mix(in srgb,var(--step-accent) 14%,transparent)}
.method-step-card:hover::after,.method-step-card:focus-visible::after{opacity:.6}.method-step-card:hover .method-step-number{color:var(--step-accent)}
.method-step-card:hover .method-step-icon svg{rotate:-8deg;scale:1.08}.method-step-card:hover .method-step-arrow,.method-step-card:focus-visible .method-step-arrow{background:var(--step-accent);color:#fff;box-shadow:0 5px 18px var(--step-tint)}
.method-step-card:focus-visible{outline:2px solid var(--step-accent);outline-offset:5px}
.method-sphere{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;background:linear-gradient(135deg,#d7e7ff,#eedfff 58%,#fce1fa);box-shadow:inset 0 1px 2px #fff4;translate:calc(var(--method-x) * -20px) calc(var(--method-y) * -15px + var(--method-scroll))}
.method-sphere-left{width:365px;height:375px;left:-195px;top:40px}.method-sphere-top{width:225px;height:225px;right:-50px;top:-110px;background:linear-gradient(135deg,#fff1fc,#d6c8ff)}
.method-sphere-top::after{content:'';position:absolute;inset:-32px;border:3px dotted #d2b7ff;border-radius:50%;animation:methodOrbit 65s linear infinite}
.method-sphere-bottom{width:620px;height:620px;bottom:-425px;left:-110px;background:linear-gradient(140deg,#d1c2ff,#f5ddfd 40%,#e8f4ff 85%);translate:calc(var(--method-x) * 12px) calc(var(--method-y) * 9px - var(--method-scroll))}
.method-note{position:absolute;z-index:-1;font:italic 24px/1.08 cursive;color:#a3adcb;transform:rotate(-17deg);border-bottom:2px solid #a3adcb;padding:0 12px 10px;text-align:center;translate:calc(var(--method-x) * 8px) calc(var(--method-y) * 6px)}
.method-note-left{left:3%;top:62%}.method-note-right{right:3%;bottom:90px}
.method-redesign.motion-paused *,.method-redesign.motion-paused *::after{animation-play-state:paused!important}
@keyframes methodOrbit{to{rotate:360deg}}
@media(min-width:1550px){.method-redesign{min-height:900px;padding-top:115px}.method-redesign .method-layout{width:1240px;grid-template-columns:465px 1fr;gap:68px}.method-step-card{min-height:142px}}
@media(max-width:1400px){.method-note{display:none}.method-redesign .method-layout{gap:48px;grid-template-columns:.78fr 1.1fr}.method-step-card{grid-template-columns:24px 68px minmax(0,1fr) 40px;gap:18px;padding:23px 22px}.method-step-icon{width:68px;height:68px}.method-step-arrow{width:40px;height:40px}.method-step-copy h3{font-size:21px}.method-step-copy p{font-size:14px}.method-actions{gap:17px}.method-actions .button{font-size:11px;gap:13px;padding-left:20px}.method-contact{font-size:11px;gap:9px}}
@media(max-width:1050px){.method-redesign .method-layout{width:calc(100% - 60px);grid-template-columns:.82fr 1fr;gap:38px}.method-redesign .method-intro h2{font-size:clamp(40px,4.8vw,51px)}.method-redesign .method-intro p{font-size:15px}.method-actions{align-items:flex-start;flex-direction:column;gap:18px}.method-step-card{grid-template-columns:20px 52px minmax(0,1fr) 32px;gap:12px;padding:22px 16px}.method-step-icon{width:52px;height:52px}.method-step-icon svg{width:28px;height:28px}.method-step-arrow{width:32px;height:32px;font-size:21px}.method-step-number{font-size:16px}.method-step-copy h3{font-size:19px}.method-step-copy p{font-size:13px}}
@media(max-width:800px){.method-redesign{padding:80px 0 100px}.method-redesign .method-layout{grid-template-columns:1fr;gap:55px;width:min(620px,calc(100% - 48px))}.method-redesign .method-intro h2{font-size:clamp(47px,8vw,65px)}.method-actions{flex-direction:row;align-items:center;gap:25px}.method-actions .button{font-size:12px}.method-contact{font-size:12px}.method-steps{margin-left:17px;gap:20px}.method-step-card{grid-template-columns:25px 65px minmax(0,1fr) 40px;gap:18px;padding:23px;min-height:135px}.method-step-icon{width:65px;height:65px}.method-step-icon svg{width:33px;height:33px}.method-step-copy h3{font-size:22px}.method-step-copy p{font-size:14px}.method-step-arrow{width:40px;height:40px}.method-sphere-left{left:-290px}.method-sphere-bottom{left:-310px;bottom:-475px}}
@media(max-width:480px){.method-redesign{padding:65px 0 80px}.method-redesign .method-layout{width:calc(100% - 40px);gap:45px}.method-redesign .method-intro h2{font-size:clamp(41px,10.8vw,52px)}.method-redesign .method-intro p{font-size:14px}.method-actions{gap:18px;flex-wrap:wrap;margin-top:27px}.method-actions .button{min-height:48px;padding-left:18px;font-size:11px;gap:12px}.method-actions .button span{width:30px;height:30px}.method-contact{font-size:11px}.method-step-card{grid-template-columns:48px minmax(0,1fr) 29px;gap:13px;padding:22px 14px;min-height:150px}.method-step-number{position:absolute;top:9px;left:15px;font-size:10px}.method-step-icon{width:48px;height:48px;grid-column:1}.method-step-icon svg{width:27px;height:27px}.method-step-copy h3{font-size:20px}.method-step-copy p{font-size:13px;line-height:1.6}.method-step-arrow{width:29px;height:29px;font-size:20px}.method-steps{--line-inset:75px}.method-sphere-top{right:-135px}}
@media(prefers-reduced-motion:reduce){.method-redesign *,.method-redesign *::before,.method-redesign *::after{animation:none!important;transition:none!important}.method-redesign .method-step-card{transform:none;translate:none}.method-redesign .method-sphere,.method-redesign .method-note{translate:none}.method-redesign .method-steps::after{transform:none}.method-redesign .method-step-icon svg{rotate:none;scale:1}}