@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600&display=swap');
:root{--navy:#102A43;--teal:#008C95;--sand:#F4EFE7;--ink:#334E68;--mist:#EAF3F2;--white:#fff;--line:#d6e1df;--shadow:0 18px 55px rgba(16,42,67,.11)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--navy);font:18px/1.6 'Source Sans 3',Arial,sans-serif}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{font-family:Manrope,Arial,sans-serif;line-height:1.13;letter-spacing:-.035em}h1{font-size:clamp(2.65rem,6vw,5.4rem);max-width:14ch}h2{font-size:clamp(2rem,4vw,3.45rem);max-width:18ch}h3{font-size:1.3rem}.wrap{max-width:1180px;margin:auto;padding:0 28px}.skip{position:absolute;left:-999px}.skip:focus{left:18px;top:12px;background:#fff;padding:10px;z-index:20}.topline{background:var(--navy);color:#fff;font-size:.93rem}.topline .wrap{display:flex;justify-content:space-between;gap:18px;padding-top:9px;padding-bottom:9px}.topline a{color:#fff}.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid #e6ecea;backdrop-filter:blur(8px)}.nav{height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo img{display:block;width:174px;height:auto}.navlinks{display:flex;gap:26px;align-items:center}.navlinks a{text-decoration:none;color:var(--navy);font-family:Manrope;font-size:.9rem;font-weight:700}.navlinks a:hover,.navlinks a:focus{color:var(--teal)}.button{display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff!important;border:2px solid var(--teal);border-radius:999px;padding:12px 21px;text-decoration:none;font:700 .9rem Manrope;transition:.2s}.button:hover{background:#006e75;border-color:#006e75;transform:translateY(-1px)}.button.secondary{background:transparent;color:var(--navy)!important;border-color:var(--navy)}.button.secondary:hover{background:var(--navy);color:#fff!important}.menu{display:none;border:0;background:none;font:700 1rem Manrope;color:var(--navy)}.hero{background:var(--sand);overflow:hidden}.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;padding-top:88px;padding-bottom:84px;align-items:center}.eyebrow{font:700 .82rem Manrope;color:var(--teal);letter-spacing:.11em;text-transform:uppercase}.lead{font-size:1.26rem;line-height:1.5;max-width:53ch;color:var(--ink)}.actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:29px}.hero-art{min-height:390px;position:relative;display:flex;align-items:center;justify-content:center}.orb{width:min(29vw,350px);aspect-ratio:1;border-radius:45% 55% 55% 40%;background:var(--navy);position:relative;box-shadow:inset -48px -28px 0 rgba(0,140,149,.8)}.orb:before,.orb:after{content:'';position:absolute;border:2px solid rgba(255,255,255,.76);border-radius:999px}.orb:before{width:76%;height:47%;left:-23%;top:7%;transform:rotate(-35deg)}.orb:after{width:76%;height:47%;right:-28%;bottom:7%;transform:rotate(-35deg)}.marker{position:absolute;width:70px;height:70px;border:15px solid var(--teal);border-radius:50%;right:2%;top:17%;background:var(--sand)}.section{padding:92px 0}.section.mist{background:var(--mist)}.section.navy{background:var(--navy);color:#fff}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:39px}.section-head p{max-width:48ch;color:var(--ink);margin:0}.navy .section-head p{color:#d4e1e4}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}.card{border:1px solid var(--line);border-radius:18px;padding:29px;background:#fff}.card .number{font:800 .8rem Manrope;color:var(--teal);letter-spacing:.1em}.card p{color:var(--ink)}.service-card{padding:32px;min-height:300px;display:flex;flex-direction:column}.service-card a{margin-top:auto;color:var(--teal);font:700 .9rem Manrope;text-decoration:none}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:34px}.step{padding:19px;border-top:2px solid #5a7389}.step span{display:block;color:#62d4d9;font:800 1.8rem Manrope}.step p{font-size:.95rem;margin:6px 0}.statement{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}.statement p{font-size:1.34rem;line-height:1.5}.quote{background:var(--sand);border-radius:20px;padding:35px}.training-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}.tag{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--mist);color:var(--teal);font:700 .76rem Manrope}.course-list{padding:0;margin:18px 0;list-style:none}.course-list li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.98rem}.notice{border-left:4px solid var(--teal);padding:14px 18px;background:var(--mist);color:var(--ink);max-width:900px}.cta{background:var(--teal);color:#fff;border-radius:20px;padding:52px;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{margin:0;max-width:15ch}.footer{background:#081d30;color:#d4e1e4;padding:56px 0 25px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}.footer a{color:#fff;text-decoration:none}.footer ul{list-style:none;margin:0;padding:0}.footer li{margin:8px 0}.small{font-size:.9rem}.footer-bottom{border-top:1px solid #365067;margin-top:39px;padding-top:20px;font-size:.85rem}.page-hero{background:var(--sand);padding:75px 0 64px}.page-hero h1{margin-bottom:17px}.page-hero p{max-width:60ch;color:var(--ink);font-size:1.2rem}.content{max-width:850px}.content h2{margin-top:54px;font-size:2rem}.content h3{margin-top:28px}.content li{margin:7px 0}.form-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:58px}.form{background:var(--mist);padding:30px;border-radius:18px}.form label{display:block;font:700 .9rem Manrope;margin:16px 0 6px}.form input,.form select,.form textarea{width:100%;border:1px solid #aabdc1;border-radius:8px;background:#fff;padding:12px;font:1rem 'Source Sans 3';color:var(--navy)}.form textarea{min-height:130px}.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid rgba(0,140,149,.24);border-color:var(--teal)}.form .check{display:flex;gap:10px;align-items:start;font:400 .92rem 'Source Sans 3'}.form .check input{width:auto;margin-top:6px}.form button{margin-top:20px}.form-note{font-size:.9rem;color:var(--ink)}.alert{padding:15px 18px;border-radius:8px;margin-bottom:20px}.alert.success{background:#dff5e8;color:#155c35}.alert.error{background:#ffe6e4;color:#85221b}.approval{background:#fff3cf;color:#654a00;padding:12px 18px;font-size:.92rem}.muted{color:var(--ink)}
@media(max-width:850px){body{font-size:17px}.nav{height:72px}.menu{display:block}.navlinks{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;padding:20px 28px;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}.navlinks.open{display:flex}.hero .wrap,.statement,.form-layout{grid-template-columns:1fr}.hero .wrap{gap:25px;padding-top:60px}.hero-art{min-height:260px;order:-1}.orb{width:220px}.cards,.training-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.section{padding:65px 0}.section-head,.cta{display:block}.section-head p{margin-top:15px}.cta{padding:34px}.cta .button{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr}.topline .wrap{font-size:.8rem}.topline .hide-mobile{display:none}}
@media(max-width:500px){.wrap{padding:0 18px}.logo img{width:146px}.footer-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.step{padding-left:0}.topline .wrap{justify-content:center}.hero-art{min-height:210px}}
.field-hint{margin:0 0 7px;font-size:.9rem;color:var(--ink)}
.form textarea.training-interest{min-height:76px;max-height:128px;resize:vertical;overflow-y:auto;background:#fff}
.training-interest-strip{width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;border:1px solid #aabdc1;border-radius:8px;background:#fff;padding:12px;color:var(--navy);font:1rem 'Source Sans 3';scrollbar-color:var(--teal) #e6eeee;scrollbar-width:thin}.training-interest-strip:focus{outline:3px solid rgba(0,140,149,.24);border-color:var(--teal)}
.field-hint-add{color:#8a4b4b;font-style:italic}
.message-prompt{display:block;margin:0 0 8px;padding:0;border:0;background:transparent;color:#8a4b4b;font:italic .92rem 'Source Sans 3';text-decoration:underline;text-underline-offset:3px;cursor:pointer}.message-prompt:hover,.message-prompt:focus{color:#6f3030;outline-offset:3px}
.message-editor{position:relative}
.field-hint-add .message-prompt{display:inline;margin:0}
.selection-group{margin:12px 0}.selection-group-label{display:block;color:#9ed9dc;font:700 .74rem Manrope,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}.selection-group-items{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}.selection-parent-label{font-size:.78rem;color:#fff}.selection-training-categories{margin-top:8px;padding-left:13px;border-left:2px solid rgba(158,217,220,.42)}.selection-subgroup+.selection-subgroup{margin-top:11px}.selection-subgroup-label{display:block;color:#9ed9dc;font:700 .7rem Manrope,Arial,sans-serif;letter-spacing:.075em;text-transform:uppercase}
.selection-panel>.selection-list>.selection-group>.selection-group-label{color:#fff;font-size:.78rem}
.curriculum .select-all-subjects{margin:12px 0 5px;background:var(--mist);border:1px solid var(--line);font-family:Manrope,Arial,sans-serif;font-weight:700}
.curriculum .select-all-subjects small{display:block;margin-top:3px;color:var(--ink);font:400 .86rem 'Source Sans 3',Arial,sans-serif}
.pathway-note{display:block;margin-top:7px;color:#8a4b4b;font:italic .85rem 'Source Sans 3',Arial,sans-serif}
.pathway-note[hidden]{display:none}
.form-layout > div{min-width:0}.training-interest-strip{max-width:100%}

/* Selection journey and current-page navigation */
.navlinks a[aria-current="page"]:not(.button){color:var(--teal);background:var(--mist);border-radius:999px;padding:8px 12px;margin:-8px -12px;box-shadow:inset 0 -2px 0 var(--teal)}
.navlinks .button[aria-current="page"]{background:#006e75;border-color:#006e75;box-shadow:0 0 0 3px rgba(0,140,149,.18)}
.quick-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}.quick-links a{display:inline-flex;align-items:center;border:1px solid #99c7c9;border-radius:999px;padding:9px 13px;color:var(--navy);background:#fff;text-decoration:none;font:700 .83rem Manrope}.quick-links a:hover,.quick-links a:focus{background:var(--teal);border-color:var(--teal);color:#fff}.selection-panel{position:sticky;bottom:16px;z-index:8;background:var(--navy);color:#fff;border-radius:16px;padding:16px 19px;box-shadow:0 10px 26px rgba(16,42,67,.24);margin-top:35px}.selection-panel strong{font-family:Manrope}.selection-list{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.selection-chip{background:#244561;border-radius:999px;padding:3px 9px;font-size:.82rem}.selection-empty{font-size:.9rem;color:#d4e1e4}.choice{display:flex!important;align-items:flex-start;gap:10px;margin-top:18px!important;padding:13px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font:700 .9rem Manrope!important}.choice:hover{border-color:var(--teal);background:var(--mist)}.choice input{width:20px!important;height:20px;margin:1px 0 0!important;accent-color:var(--teal)}.choice small{display:block;font:400 .86rem 'Source Sans 3';color:var(--ink);margin-top:3px}.curriculum{margin:16px 0}.curriculum summary{cursor:pointer;color:var(--teal);font:700 .9rem Manrope}.curriculum ul{margin:13px 0 0;padding-left:20px}.curriculum li{margin:6px 0}.outcomes{margin:17px 0;padding-left:19px}.outcomes li{margin:6px 0}.contact-selections{background:var(--mist);border-left:4px solid var(--teal);padding:12px 15px;margin:15px 0;color:var(--ink)}
@media(max-width:850px){.navlinks a[aria-current="page"]:not(.button){margin:0;padding:7px 10px}.selection-panel{position:static}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.site-header .navlinks a[aria-current="page"]{color:#006e75!important;background:#eaf3f2!important;border-radius:999px!important;padding:9px 13px!important;margin:-9px -13px!important;box-shadow:inset 0 -3px 0 #008c95!important}.site-header .navlinks a.button[aria-current="page"]{background:#006e75!important;color:#fff!important;border-color:#006e75!important;box-shadow:0 0 0 3px rgba(0,140,149,.22)!important}
.curriculum .subject-choice{display:flex;align-items:flex-start;gap:9px;padding:7px 8px;margin:4px -8px;border-radius:8px;cursor:pointer;font:400 .96rem 'Source Sans 3',Arial,sans-serif;color:var(--navy)}.curriculum .subject-choice:hover{background:var(--mist)}.curriculum .subject-choice input{width:18px;height:18px;flex:0 0 auto;margin:3px 0 0;accent-color:var(--teal)}
.contact-selections .selection-list{margin:8px 0}.contact-selections .selection-chip{background:#d5e9e8;color:var(--navy)}.selection-note{margin-top:10px;padding-top:10px;border-top:1px solid #b8d5d3;font-size:.9rem;line-height:1.45}
.contact-selections .selection-list>.selection-group>.selection-group-label{color:var(--navy);font-size:.78rem}.contact-selections .selection-training-categories{border-left-color:#fff}.contact-selections .selection-subgroup-label{color:#667b88;background:rgba(255,255,255,.68);border-radius:5px;display:inline-block;padding:3px 7px}
.selection-chip{border:0;cursor:pointer;font:inherit;text-align:left}.selection-chip span{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:4px;border-radius:50%;background:rgba(255,255,255,.18);font-size:1rem;line-height:1}.selection-chip:hover,.selection-chip:focus{background:#008c95;outline:2px solid #62d4d9;outline-offset:2px}
.selection-panel [data-selection-count]{display:table;margin-top:7px;padding:3px 9px;border:1px solid #5a7389;border-radius:999px;background:#173956;color:#d4e1e4;font:600 .78rem Manrope,Arial,sans-serif;letter-spacing:.02em}

/* Visual polish only: no page flow, form, navigation or selection behaviour changes. */
.hero .wrap>div:first-child{animation:sopai-hero-copy .65s cubic-bezier(.2,.75,.3,1) both}.hero-art{animation:sopai-hero-art .8s .08s cubic-bezier(.2,.75,.3,1) both}.page-hero{position:relative;overflow:hidden}.page-hero:after{content:'';position:absolute;right:-8%;bottom:-120px;width:360px;height:360px;border:1px solid rgba(0,140,149,.14);border-radius:50%;box-shadow:0 0 0 42px rgba(0,140,149,.035),0 0 0 84px rgba(0,140,149,.02);pointer-events:none}.page-hero .wrap{position:relative;z-index:1}.card,.choice,.quick-links a{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background-color .24s ease}.card:hover{transform:translateY(-6px);border-color:#9acfd0;box-shadow:0 18px 38px rgba(16,42,67,.1)}.service-card{position:relative;overflow:hidden}.service-card:before{content:'';position:absolute;top:0;left:0;width:0;height:4px;background:linear-gradient(90deg,var(--teal),#62d4d9);transition:width .35s ease}.service-card:hover:before{width:100%}.choice:hover,.quick-links a:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(16,42,67,.08)}.steps .step{position:relative;transition:transform .22s ease,border-color .22s ease}.steps .step:after{content:'';position:absolute;top:-4px;left:0;width:0;height:4px;background:#62d4d9;transition:width .3s ease}.steps .step:hover{transform:translateY(-4px);border-color:#62d4d9}.steps .step:hover:after{width:72%}.selection-panel{transition:box-shadow .25s ease,transform .25s ease}.selection-panel:hover{box-shadow:0 16px 34px rgba(16,42,67,.3)}@keyframes sopai-hero-copy{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes sopai-hero-art{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.hero .wrap>div:first-child,.hero-art{animation:none}.card,.choice,.quick-links a,.steps .step,.selection-panel{transition:none}.card:hover,.choice:hover,.quick-links a:hover,.steps .step:hover{transform:none}}

/* Refined interaction and depth layer. These treatments never change the site's journeys or controls. */
.section{position:relative}.section:not(.navy):not(.mist){background-image:linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),rgba(16,42,67,.035) calc(100% - 1px));background-size:25% 100%;background-position:center}.section-head h2{position:relative}.section-head h2:after{content:'';display:block;width:52px;height:3px;margin-top:19px;border-radius:99px;background:linear-gradient(90deg,var(--teal),#62d4d9);transform:scaleX(.55);transform-origin:left;transition:transform .35s ease}.section:hover .section-head h2:after{transform:scaleX(1)}.service-card:after{content:'';position:absolute;right:-52px;bottom:-52px;width:145px;height:145px;border:1px solid rgba(0,140,149,.17);border-radius:50%;transform:scale(.55);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.25,1),opacity .35s ease}.service-card:hover:after{opacity:1;transform:scale(1)}.service-card h3,.service-card p,.service-card a{position:relative;z-index:1}.content{position:relative;transition:padding .3s ease}.content:before{content:'';position:absolute;left:-24px;top:0;bottom:0;width:1px;background:linear-gradient(transparent,rgba(0,140,149,.42),transparent);opacity:0;transition:opacity .3s ease}.content:hover:before{opacity:1}.content:hover{padding-left:7px}.founder-portrait:after{content:'';position:absolute;z-index:3;left:17px;top:17px;width:44%;height:3px;border-radius:99px;background:#62d4d9;transform:scaleX(.55);transform-origin:left;transition:transform .35s ease}.founder-layout:hover .founder-portrait:after{transform:scaleX(1)}.founder-portrait img{transition:filter .5s ease,transform .6s cubic-bezier(.2,.8,.25,1),box-shadow .4s ease}.founder-layout:hover .founder-portrait img{transform:translateY(-5px);filter:saturate(1.05) contrast(1.02);box-shadow:0 28px 58px rgba(16,42,67,.17)}.footer{position:relative;overflow:hidden}.footer:before{content:'';position:absolute;right:-95px;top:-95px;width:280px;height:280px;border:1px solid rgba(98,212,217,.25);border-radius:50%;box-shadow:0 0 0 40px rgba(98,212,217,.045),0 0 0 80px rgba(98,212,217,.025);pointer-events:none}.footer .wrap{position:relative;z-index:1}@media(max-width:850px){.section:not(.navy):not(.mist){background-image:none}.content:hover{padding-left:0}.content:before{display:none}}@media(prefers-reduced-motion:reduce){.section-head h2:after,.service-card:after,.content,.founder-portrait:after,.founder-portrait img{transition:none}.content:hover{padding-left:0}.founder-layout:hover .founder-portrait img{transform:none}}

/* Services hero: dimensional moving rings without changing content or controls. */
.services-page .page-hero{isolation:isolate;perspective:1000px;background:linear-gradient(118deg,var(--sand) 0 66%,#eef6f4 100%)}
.services-page .page-hero:before,.services-page .page-hero:after{content:'';position:absolute;z-index:0;border-radius:50%;pointer-events:none;will-change:transform}
.services-page .page-hero:before{right:-95px;bottom:-168px;width:440px;height:440px;background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.92) 0 5%,rgba(98,212,217,.32) 7%,rgba(0,140,149,.13) 31%,rgba(16,42,67,.09) 55%,transparent 71%);border:1px solid rgba(255,255,255,.8);box-shadow:inset 24px 20px 42px rgba(255,255,255,.58),inset -34px -30px 48px rgba(16,42,67,.13),0 35px 65px rgba(16,42,67,.16),0 0 0 42px rgba(0,140,149,.04);animation:sopai-services-orb 11s ease-in-out infinite}
.services-page .page-hero:after{right:122px;bottom:70px;width:112px;height:112px;background:radial-gradient(circle at 32% 28%,#fff 0 6%,#62d4d9 10%,#008c95 48%,#102a43 100%);border:8px solid rgba(255,255,255,.54);box-shadow:inset -13px -14px 24px rgba(8,29,48,.38),inset 10px 8px 18px rgba(255,255,255,.3),0 24px 35px rgba(16,42,67,.22);animation:sopai-services-satellite 8s ease-in-out infinite}
.services-page .page-hero .wrap:after{content:'';position:absolute;right:-70px;bottom:-96px;width:360px;height:360px;border:1px dashed rgba(0,140,149,.28);border-radius:50%;box-shadow:0 0 0 30px rgba(255,255,255,.14),0 0 0 70px rgba(0,140,149,.025);animation:sopai-services-ring 30s linear infinite;pointer-events:none}
@keyframes sopai-services-orb{0%,100%{transform:translate3d(0,0,-25px) rotateX(7deg) rotateY(-8deg) scale(1)}45%{transform:translate3d(-38px,-22px,45px) rotateX(-5deg) rotateY(9deg) scale(1.06)}72%{transform:translate3d(12px,-8px,16px) rotateX(4deg) rotateY(3deg) scale(.98)}}
@keyframes sopai-services-satellite{0%,100%{transform:translate3d(0,0,45px) rotate(-4deg)}50%{transform:translate3d(-48px,-58px,90px) rotate(8deg)}}
@keyframes sopai-services-ring{to{transform:rotate(360deg)}}
@media(max-width:760px){.services-page .page-hero:before{right:-190px;bottom:-150px;width:360px;height:360px}.services-page .page-hero:after{right:28px;bottom:34px;width:74px;height:74px}.services-page .page-hero .wrap:after{right:-210px;bottom:-70px;width:300px;height:300px}}
@media(prefers-reduced-motion:reduce){.services-page .page-hero:before,.services-page .page-hero:after,.services-page .page-hero .wrap:after{animation:none}}

/* Training hero: a calm, dimensional learning-pathway sculpture. */
.training-page .page-hero{isolation:isolate;background:linear-gradient(118deg,var(--sand) 0 62%,#eef6f4 100%);perspective:1200px}.training-page .page-hero:after{display:none}.training-page .page-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:42px;min-height:500px}.training-page .page-hero .wrap:before{content:'';position:absolute;right:-7%;top:-155px;width:550px;height:550px;border-radius:50%;background:radial-gradient(circle at 37% 30%,rgba(255,255,255,.9),rgba(98,212,217,.18) 19%,rgba(0,140,149,.07) 43%,transparent 68%);box-shadow:0 0 0 50px rgba(0,140,149,.025);pointer-events:none}.training-hero-copy{position:relative;z-index:2}.training-visual{position:relative;z-index:1;min-height:390px;perspective:1000px;transform-style:preserve-3d}.training-visual:before{content:'';position:absolute;inset:32px 12px 6px 25px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.78),rgba(255,255,255,.1) 56%,transparent 71%);filter:blur(1px)}.training-orbit{position:absolute;left:9%;top:12%;width:320px;height:320px;border:1px solid rgba(0,140,149,.23);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.18),0 0 0 65px rgba(0,140,149,.025);transform:rotateX(64deg) rotateZ(-17deg);animation:sopai-training-orbit 20s linear infinite}.training-card{position:absolute;width:205px;height:126px;padding:20px 22px;border:1px solid rgba(255,255,255,.88);border-radius:18px;background:linear-gradient(140deg,rgba(255,255,255,.96),rgba(233,245,244,.77));box-shadow:inset 1px 1px 0 rgba(255,255,255,.92),inset -12px -12px 22px rgba(16,42,67,.045),0 24px 33px rgba(16,42,67,.18);backdrop-filter:blur(7px);transform-style:preserve-3d;will-change:transform}.training-card span,.training-card i{display:block;border-radius:99px}.training-card span{width:42%;height:8px;background:linear-gradient(90deg,var(--teal),#62d4d9);margin-bottom:15px;box-shadow:0 2px 7px rgba(0,140,149,.24)}.training-card i{height:6px;background:#dbeceb;margin:8px 0}.training-card i:nth-of-type(2){width:78%}.training-card i:nth-of-type(3){width:55%}.training-card-one{left:9%;top:22%;animation:sopai-training-card-one 8s ease-in-out infinite}.training-card-two{right:8%;top:9%;width:178px;height:111px;animation:sopai-training-card-two 9s ease-in-out infinite}.training-card-three{right:14%;bottom:11%;width:188px;height:114px;animation:sopai-training-card-three 10s ease-in-out infinite}.training-node{position:absolute;border-radius:50%;z-index:3}.training-node-one{width:67px;height:67px;left:8%;bottom:18%;background:radial-gradient(circle at 33% 28%,#fff 0 7%,#62d4d9 11%,var(--teal) 55%,#00636a 100%);border:7px solid rgba(255,255,255,.6);box-shadow:inset -9px -10px 18px rgba(8,29,48,.28),0 16px 25px rgba(16,42,67,.21);animation:sopai-training-node 7s ease-in-out infinite}.training-node-two{width:33px;height:33px;right:4%;bottom:34%;background:var(--navy);box-shadow:0 13px 22px rgba(16,42,67,.25);animation:sopai-training-node 7s -2s ease-in-out infinite}.training-beam{position:absolute;left:26%;top:57%;width:220px;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,#62d4d9,var(--teal),transparent);filter:drop-shadow(0 0 8px rgba(0,140,149,.42));transform:rotate(-22deg);animation:sopai-training-beam 5s ease-in-out infinite}.training-visual p{position:absolute;right:7%;bottom:0;margin:0;color:#365067;font:800 .72rem Manrope,Arial,sans-serif;letter-spacing:.13em}.training-visual p:before{content:'';display:inline-block;width:25px;height:3px;margin:0 8px 3px 0;border-radius:99px;background:var(--teal)}@keyframes sopai-training-orbit{to{transform:rotateX(64deg) rotateZ(343deg)}}@keyframes sopai-training-card-one{0%,100%{transform:translate3d(0,0,32px) rotateX(7deg) rotateY(-13deg) rotateZ(-7deg)}50%{transform:translate3d(15px,-19px,70px) rotateX(-3deg) rotateY(8deg) rotateZ(-2deg)}}@keyframes sopai-training-card-two{0%,100%{transform:translate3d(0,0,48px) rotateX(9deg) rotateY(14deg) rotateZ(8deg)}50%{transform:translate3d(-16px,15px,88px) rotateX(-5deg) rotateY(2deg) rotateZ(2deg)}}@keyframes sopai-training-card-three{0%,100%{transform:translate3d(0,0,20px) rotateX(5deg) rotateY(-9deg) rotateZ(-4deg)}50%{transform:translate3d(-18px,-16px,72px) rotateX(-7deg) rotateY(7deg) rotateZ(4deg)}}@keyframes sopai-training-node{0%,100%{transform:translate3d(0,0,40px) scale(1)}50%{transform:translate3d(10px,-16px,95px) scale(1.08)}}@keyframes sopai-training-beam{0%,100%{opacity:.42;transform:rotate(-22deg) scaleX(.65);transform-origin:left}50%{opacity:1;transform:rotate(-22deg) scaleX(1);transform-origin:left}}
@media(max-width:850px){.training-page .page-hero .wrap{grid-template-columns:1fr;min-height:0}.training-visual{min-height:280px;max-width:430px;width:100%;margin:8px auto 0}.training-orbit{width:255px;height:255px}.training-card{transform:scale(.78);transform-origin:center}.training-card-one{left:2%;top:18%}.training-card-two{right:0;top:6%}.training-card-three{right:5%;bottom:7%}.training-node-one{left:4%;bottom:10%}.training-node-two{right:2%;bottom:28%}.training-visual p{right:3%;bottom:-4px}.training-page .page-hero .wrap:before{right:-230px;top:160px;width:420px;height:420px}}
@media(prefers-reduced-motion:reduce){.training-orbit,.training-card-one,.training-card-two,.training-card-three,.training-node-one,.training-node-two,.training-beam{animation:none}}

/* Training story imagery: Learn, Apply, Grow. */
.training-card{height:150px;padding:8px;border-radius:20px;overflow:hidden;background:linear-gradient(140deg,rgba(255,255,255,.97),rgba(233,245,244,.83));box-shadow:inset 1px 1px 0 rgba(255,255,255,.92),inset -12px -12px 22px rgba(16,42,67,.045),0 24px 33px rgba(16,42,67,.2)}
.training-card img{display:block;width:100%;height:100%;object-fit:contain;filter:saturate(.96) contrast(1.02);transform:translateZ(18px) scale(.98);transition:transform .45s ease,filter .45s ease}
.training-card b{position:absolute;left:13px;bottom:11px;padding:4px 9px;border-radius:999px;background:rgba(8,29,48,.82);color:#fff;font:800 .64rem Manrope,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;box-shadow:0 5px 15px rgba(16,42,67,.24);backdrop-filter:blur(6px)}
.training-card:hover img{transform:translateZ(28px) scale(1.05);filter:saturate(1.04) contrast(1.03)}
.training-card-one{left:5%;top:20%}.training-card-two{right:5%;top:6%;width:184px;height:137px}.training-card-three{right:11%;bottom:8%;width:194px;height:143px}.training-node-one{left:5%;bottom:13%}.training-node-two{right:2%;bottom:34%}.training-beam{left:23%;top:56%;width:240px}
@media(max-width:850px){.training-card{height:132px}.training-card-one{left:1%;top:18%}.training-card-two{right:0;top:4%;width:164px;height:123px}.training-card-three{right:3%;bottom:6%;width:174px;height:130px}.training-card b{font-size:.58rem}}

/* Animated learning journey: Learn → Apply → Grow. */
.training-flow{position:absolute;z-index:1;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(0,140,149,.2),#62d4d9 38%,var(--teal) 72%,rgba(0,140,149,.35));box-shadow:0 0 10px rgba(0,140,149,.3);transform-origin:left center;pointer-events:none}
.training-flow::after{content:"";position:absolute;right:-2px;top:50%;width:10px;height:10px;border-top:3px solid var(--teal);border-right:3px solid var(--teal);transform:translateY(-50%) rotate(45deg);filter:drop-shadow(0 0 4px rgba(0,140,149,.45))}
.training-flow::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(98,212,217,.32),0 0 12px #62d4d9;transform:translate(-50%,-50%);animation:sopai-flow-signal 2.7s ease-in-out infinite}
.training-flow-one{left:38%;top:39%;width:135px;transform:rotate(-20deg)}
.training-flow-two{left:79%;top:37%;width:112px;transform:rotate(78deg)}
.training-flow-two::before{animation-delay:1.2s}
@keyframes sopai-flow-signal{0%{left:0;opacity:0}15%{opacity:1}82%{opacity:1}100%{left:100%;opacity:0}}
@media(max-width:850px){.training-flow-one{left:35%;top:38%;width:112px}.training-flow-two{left:77%;top:36%;width:94px}}
@media(prefers-reduced-motion:reduce){.training-flow::before{animation:none;left:52%;opacity:.8}}

/* Continuous 3D sphere orbit around the full learning story. */
.training-sphere-orbit{position:absolute;z-index:4;inset:5% 2% 6% 1%;border:1px solid rgba(0,140,149,.18);border-radius:50%;box-shadow:inset 0 0 30px rgba(98,212,217,.045),0 0 20px rgba(255,255,255,.32);transform-origin:center;animation:sopai-sphere-orbit 13s linear infinite;pointer-events:none}
.training-sphere-orbit::before{content:"";position:absolute;inset:7% 5%;border:1px dashed rgba(98,212,217,.12);border-radius:50%;filter:drop-shadow(0 0 5px rgba(98,212,217,.18))}
.training-sphere-orbit .training-node-one{left:-3px;top:50%;bottom:auto;transform:translate(-50%,-50%);animation:sopai-orbiting-sphere-depth 6.5s ease-in-out infinite;will-change:transform,filter;box-shadow:inset -10px -12px 18px rgba(8,29,48,.32),inset 8px 7px 13px rgba(255,255,255,.25),0 18px 30px rgba(16,42,67,.24),0 0 22px rgba(98,212,217,.28)}
@keyframes sopai-sphere-orbit{to{transform:rotate(360deg)}}
@keyframes sopai-orbiting-sphere-depth{0%,100%{transform:translate(-50%,-50%) scale(.78);filter:saturate(.88) brightness(.92)}50%{transform:translate(-50%,-50%) scale(1.12);filter:saturate(1.12) brightness(1.07)}}
@media(max-width:850px){.training-sphere-orbit{inset:4% 1% 5% 0}.training-sphere-orbit .training-node-one{width:55px;height:55px}}
@media(prefers-reduced-motion:reduce){.training-sphere-orbit,.training-sphere-orbit .training-node-one{animation:none}.training-sphere-orbit{transform:rotate(-22deg)}.training-sphere-orbit .training-node-one{transform:translate(-50%,-50%) scale(.9)}}

/* Travelling arrows make the Learn → Apply → Grow direction unmistakable. */
.training-flow::before{width:11px;height:11px;border-radius:0;background:transparent;border-top:3px solid #fff;border-right:3px solid #fff;box-shadow:none;filter:drop-shadow(0 0 4px #62d4d9) drop-shadow(0 0 7px rgba(0,140,149,.7));transform:translate(-50%,-50%) rotate(45deg)}
@media(prefers-reduced-motion:reduce){.training-card img{transition:none}.training-card:hover img{transform:none}}

/* Balanced Learn → Apply → Grow triangle. */
.training-card-one,.training-card-two,.training-card-three{width:184px;height:137px}
.training-card-one{left:5%;top:12%}
.training-card-two{right:5%;top:12%}
.training-card-three{left:50%;right:auto;bottom:9%;margin-left:-92px}
.training-flow-one{left:39%;top:29%;width:98px;transform:rotate(0deg)}
.training-flow-two{left:78%;top:42%;width:118px;transform:rotate(123deg)}
@media(max-width:850px){.training-card-one,.training-card-two,.training-card-three{width:160px;height:120px}.training-card-one{left:2%;top:11%}.training-card-two{right:2%;top:11%}.training-card-three{left:50%;right:auto;bottom:8%;margin-left:-80px}.training-flow-one{left:39%;top:28%;width:82px}.training-flow-two{left:77%;top:41%;width:96px}}

/* Services hero: five clickable 3D service choices orbit a collaborative office hub. */
.services-page .page-hero{padding:44px 0 38px;overflow:hidden;background:linear-gradient(118deg,var(--sand) 0 49%,#eaf5f2 100%)}
.services-page .page-hero:before,.services-page .page-hero:after,.services-page .page-hero .wrap:after{display:none!important}
.services-page .page-hero .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);align-items:center;gap:24px;min-height:650px}
.services-hero-copy{position:relative;z-index:9}.services-page .services-hero-copy h1{max-width:11ch;font-size:clamp(3rem,5.1vw,4.85rem);line-height:1.08}.services-page .services-hero-copy>p:not(.eyebrow):not(.services-visual-instruction){max-width:660px}
.services-visual-instruction{display:inline-flex;align-items:center;gap:9px;margin-top:20px!important;padding:8px 13px;border:1px solid rgba(0,140,149,.2);border-radius:999px;background:rgba(255,255,255,.6);color:#365067!important;font:700 .84rem Manrope,Arial,sans-serif!important;box-shadow:0 8px 22px rgba(16,42,67,.06)}.services-visual-instruction span{color:var(--teal);filter:drop-shadow(0 0 5px rgba(0,140,149,.35))}
.services-orbit-visual{position:relative;z-index:2;width:min(100%,640px);height:610px;margin-inline:auto;perspective:1200px;transform-style:preserve-3d}
.services-orbit-visual:before,.services-orbit-visual:after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-12deg)}
.services-orbit-visual:before{z-index:0;width:86%;height:86%;border:1px solid rgba(0,140,149,.24);box-shadow:0 0 0 28px rgba(255,255,255,.18),0 0 0 68px rgba(0,140,149,.035);animation:sopai-service-ring-a 25s linear infinite}
.services-orbit-visual:after{z-index:1;width:67%;height:67%;border:1px dashed rgba(98,212,217,.38);box-shadow:inset 0 0 45px rgba(98,212,217,.06);animation:sopai-service-ring-b 18s linear infinite reverse}
.services-office-glow{position:absolute;z-index:1;left:50%;top:51%;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 48% 47%,rgba(255,255,255,.98) 0 9%,rgba(98,212,217,.3) 32%,rgba(0,140,149,.16) 55%,rgba(16,42,67,.08) 68%,transparent 73%);box-shadow:0 0 0 14px rgba(255,255,255,.34),0 0 75px rgba(0,140,149,.19);animation:sopai-office-glow 3.2s ease-in-out infinite}
.services-office-hub{position:absolute;z-index:4;left:50%;top:51%;width:70%;height:auto;transform:translate(-50%,-50%) translateZ(32px);border:5px solid rgba(255,255,255,.78);border-radius:34px;box-shadow:inset 0 0 0 1px rgba(98,212,217,.25),0 30px 45px rgba(16,42,67,.3),0 0 40px rgba(98,212,217,.18);filter:saturate(.96) contrast(1.03);animation:sopai-office-float 8s ease-in-out infinite;pointer-events:none}
.services-office-impact{position:absolute;z-index:5;left:50%;top:51%;width:31%;aspect-ratio:1;border:2px solid rgba(255,255,255,.9);border-radius:50%;transform:translate(-50%,-50%) translateZ(75px);box-shadow:0 0 18px rgba(98,212,217,.6);animation:sopai-office-impact 3.2s ease-out infinite;pointer-events:none}
.service-sphere{--sphere-delay:0s;position:absolute;z-index:7;display:grid;place-items:center;width:108px;aspect-ratio:1;padding:12px;border:1px solid rgba(255,255,255,.83);border-radius:50%;background:radial-gradient(circle at 30% 23%,#fff 0 4%,#62d4d9 7%,var(--teal) 39%,#006b72 67%,#102a43 100%);box-shadow:inset -15px -17px 24px rgba(8,29,48,.4),inset 10px 9px 18px rgba(255,255,255,.25),0 22px 30px rgba(16,42,67,.27),0 0 0 8px rgba(255,255,255,.2);color:#fff;text-align:center;text-decoration:none;transform-style:preserve-3d;will-change:transform;animation:sopai-sphere-drift 6.8s var(--sphere-delay) ease-in-out infinite;transition:filter .25s ease,box-shadow .25s ease}
.service-sphere:before{content:"";position:absolute;inset:9px 16px auto 16px;height:27%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.38),rgba(255,255,255,0));filter:blur(.5px);pointer-events:none}
.service-sphere:after{content:"";position:absolute;inset:-9px;border:2px solid rgba(98,212,217,.58);border-radius:50%;opacity:0;transform:scale(.74);animation:sopai-sphere-cue 16s var(--cue-delay,0s) ease-out infinite;pointer-events:none}
.service-sphere span{position:relative;z-index:2;max-width:11ch;color:#fff;font:800 .62rem/1.18 Manrope,Arial,sans-serif;text-shadow:0 1px 5px rgba(8,29,48,.78);letter-spacing:-.01em}
.service-sphere:hover,.service-sphere:focus-visible{z-index:10;animation-play-state:paused;filter:saturate(1.13) brightness(1.08);box-shadow:inset -15px -17px 24px rgba(8,29,48,.4),inset 10px 9px 18px rgba(255,255,255,.32),0 29px 42px rgba(16,42,67,.32),0 0 0 10px rgba(98,212,217,.25);outline:3px solid #fff;outline-offset:4px;transform:translateY(-7px) scale(1.08)}
.service-sphere.is-activated{filter:brightness(1.2);box-shadow:0 0 0 12px rgba(98,212,217,.3),0 0 45px rgba(98,212,217,.65)}
.service-sphere-one{left:0;top:32%;--sphere-delay:-.8s;--cue-delay:0s}.service-sphere-two{left:22%;top:1%;--sphere-delay:-2.1s;--cue-delay:3.2s;background:radial-gradient(circle at 30% 23%,#fff 0 4%,#8edce0 7%,#147b88 40%,#164b65 68%,#102a43 100%)}.service-sphere-three{right:0;top:17%;--sphere-delay:-3.7s;--cue-delay:6.4s}.service-sphere-four{right:0;bottom:14%;--sphere-delay:-5.1s;--cue-delay:9.6s;background:radial-gradient(circle at 30% 23%,#fff 0 4%,#8edce0 7%,#147b88 40%,#164b65 68%,#102a43 100%)}.service-sphere-five{left:11%;bottom:0;--sphere-delay:-6.2s;--cue-delay:12.8s}
.service-beam{--beam-angle:0deg;--beam-length:240px;--beam-delay:0s;position:absolute;z-index:3;left:50%;top:51%;width:var(--beam-length);height:2px;border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.8),#62d4d9 45%,rgba(0,140,149,.09));box-shadow:0 0 9px rgba(98,212,217,.36);transform-origin:left center;transform:rotate(var(--beam-angle));opacity:.35;pointer-events:none}
.service-beam:after{content:"✦";position:absolute;left:100%;top:50%;color:#fff;font-size:20px;line-height:1;text-shadow:0 0 5px #fff,0 0 13px #62d4d9,0 0 22px var(--teal);transform:translate(-50%,-50%) rotate(calc(-1 * var(--beam-angle)));opacity:0;animation:sopai-service-signal 16s var(--beam-delay) ease-in-out infinite}
.beam-one{--beam-angle:198deg;--beam-length:265px;--beam-delay:0s}.beam-two{--beam-angle:270deg;--beam-length:262px;--beam-delay:3.2s}.beam-three{--beam-angle:342deg;--beam-length:265px;--beam-delay:6.4s}.beam-four{--beam-angle:54deg;--beam-length:265px;--beam-delay:9.6s}.beam-five{--beam-angle:126deg;--beam-length:265px;--beam-delay:12.8s}
.services-selecting-hand{position:absolute;z-index:11;left:-1%;top:27%;width:132px;height:auto;filter:drop-shadow(0 17px 18px rgba(16,42,67,.25));transform-origin:16% 10%;pointer-events:none;will-change:left,top,transform,opacity;animation:sopai-hand-select 16s cubic-bezier(.55,.08,.35,1) infinite}
.services-orbit-caption{position:absolute;z-index:8;right:8%;bottom:3%;margin:0;color:#365067;font:800 .71rem Manrope,Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 1px 2px rgba(255,255,255,.9)}.services-orbit-caption:before{content:"";display:inline-block;width:28px;height:3px;margin:0 9px 3px 0;border-radius:99px;background:linear-gradient(90deg,var(--teal),#62d4d9)}
@keyframes sopai-service-ring-a{to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(348deg)}}
@keyframes sopai-service-ring-b{to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(348deg)}}
@keyframes sopai-office-float{0%,100%{transform:translate(-50%,-50%) translate3d(0,0,32px) scale(1)}50%{transform:translate(-50%,-50%) translate3d(0,-10px,68px) scale(1.025)}}
@keyframes sopai-office-glow{0%,100%{transform:translate(-50%,-50%) scale(.97);filter:brightness(.95)}50%{transform:translate(-50%,-50%) scale(1.04);filter:brightness(1.12)}}
@keyframes sopai-office-impact{0%{opacity:0;transform:translate(-50%,-50%) translateZ(75px) scale(.45)}18%{opacity:.9}70%,100%{opacity:0;transform:translate(-50%,-50%) translateZ(75px) scale(1.5)}}
@keyframes sopai-sphere-drift{0%,100%{transform:translate3d(0,0,55px) rotate(-1deg)}35%{transform:translate3d(10px,-12px,95px) rotate(2deg)}70%{transform:translate3d(-8px,7px,35px) rotate(-2deg)}}
@keyframes sopai-sphere-cue{0%,13%,100%{opacity:0;transform:scale(.74)}2%{opacity:.95;transform:scale(.9)}9%{opacity:0;transform:scale(1.35)}}
@keyframes sopai-service-signal{0%,1%,10%,100%{opacity:0;left:100%}2%{opacity:1;left:100%}7%{opacity:1;left:5%}9%{opacity:0;left:0}}
@keyframes sopai-hand-select{0%,8%{left:-1%;top:27%;opacity:.94;transform:translate3d(0,0,100px) scale(.72) rotate(-7deg)}10%,18%{left:19%;top:-3%;opacity:.94;transform:translate3d(0,0,100px) scale(.72) rotate(-11deg)}20%,28%{left:71%;top:11%;opacity:.94;transform:translate3d(0,0,100px) scale(.72) rotate(-21deg)}30%,38%{left:72%;top:65%;opacity:.94;transform:translate3d(0,0,100px) scale(.72) rotate(-36deg)}40%,48%{left:8%;top:77%;opacity:.94;transform:translate3d(0,0,100px) scale(.72) rotate(-2deg)}50%,58%{left:-1%;top:27%;opacity:.94;transform:translate3d(0,0,100px) scale(.72) rotate(-7deg)}60%,68%{left:19%;top:-3%;opacity:.94;transform:translate3d(0,0,100px) scale(.72) rotate(-11deg)}70%,78%{left:71%;top:11%;opacity:.94;transform:translate3d(0,0,100px) scale(.72) rotate(-21deg)}80%,88%{left:72%;top:65%;opacity:.94;transform:translate3d(0,0,100px) scale(.72) rotate(-36deg)}90%,98%{left:8%;top:77%;opacity:.94;transform:translate3d(0,0,100px) scale(.72) rotate(-2deg)}100%{left:-1%;top:27%;opacity:0;transform:translate3d(0,0,100px) scale(.72) rotate(-7deg)}}
@media(max-width:980px){.services-page .page-hero .wrap{grid-template-columns:1fr;min-height:0}.services-page .services-hero-copy h1{max-width:13ch}.services-orbit-visual{max-width:620px;height:590px}.services-visual-instruction{margin-bottom:4px!important}}
@media(max-width:620px){.services-page .page-hero{padding-top:32px}.services-page .page-hero .wrap{gap:12px}.services-page .services-hero-copy h1{font-size:clamp(2.55rem,13vw,3.65rem)}.services-orbit-visual{height:460px}.service-sphere{width:78px;padding:8px}.service-sphere span{font-size:.49rem;line-height:1.12}.service-sphere-one{left:0}.service-sphere-two{left:20%}.service-sphere-five{left:8%}.services-office-hub{width:77%}.services-selecting-hand{width:94px}.services-orbit-caption{right:3%;font-size:.57rem}.service-beam{--beam-length:185px}.beam-one,.beam-two,.beam-three,.beam-four,.beam-five{--beam-length:190px}}
@media(prefers-reduced-motion:reduce){.services-orbit-visual:before,.services-orbit-visual:after,.services-office-glow,.services-office-hub,.services-office-impact,.service-sphere,.service-sphere:after,.service-beam:after,.services-selecting-hand{animation:none}.services-selecting-hand{display:none}.service-sphere{transform:translateZ(45px)}.services-office-impact{display:none}}

/* Slower service-selection story: a compact finger touches each ball, then a star flashes into the office. */
.services-selecting-hand{display:none!important}
.services-selecting-finger{position:absolute;z-index:12;display:grid;place-items:center;width:44px;height:44px;left:5%;top:43%;border:1px solid rgba(255,255,255,.88);border-radius:50%;background:rgba(255,255,255,.78);font-size:31px;line-height:1;box-shadow:0 9px 18px rgba(16,42,67,.2),0 0 0 4px rgba(98,212,217,.1);filter:drop-shadow(0 0 5px rgba(255,255,255,.9));transform-origin:50% 10%;pointer-events:none;will-change:left,top,transform,opacity;animation:sopai-finger-select 30s cubic-bezier(.45,.05,.3,1) infinite}
.services-selecting-finger:after{content:"";position:absolute;left:50%;top:4px;width:15px;height:15px;border:2px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:0 0 0 3px rgba(98,212,217,.18),0 0 16px rgba(98,212,217,.8);transform:translate(-50%,-50%) scale(.25);opacity:0;animation:sopai-finger-contact 6s ease-out infinite}
.services-office-star{position:absolute;z-index:10;left:50%;top:51%;display:grid;place-items:center;width:104px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98) 0 8%,rgba(98,212,217,.74) 12%,rgba(0,140,149,.28) 34%,transparent 70%);color:#fff;font-size:64px;line-height:1;text-shadow:0 0 4px #fff,0 0 12px #fff,0 0 25px #62d4d9,0 0 48px var(--teal);filter:drop-shadow(0 0 24px rgba(98,212,217,.95));transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;animation:sopai-office-star-flash 6s ease-out infinite}
.service-beam:after{font-size:25px;text-shadow:0 0 6px #fff,0 0 16px #62d4d9,0 0 29px var(--teal)}
.service-beam:after{animation-duration:30s;animation-timing-function:ease-in-out}.beam-one{--beam-delay:0s}.beam-two{--beam-delay:6s}.beam-three{--beam-delay:12s}.beam-four{--beam-delay:18s}.beam-five{--beam-delay:24s}
.service-sphere:after{animation-duration:30s}.service-sphere-one{--cue-delay:0s}.service-sphere-two{--cue-delay:6s}.service-sphere-three{--cue-delay:12s}.service-sphere-four{--cue-delay:18s}.service-sphere-five{--cue-delay:24s}
.service-sphere-one{left:2%;top:29%}.service-sphere-two{left:calc(50% - 54px);top:0}.service-sphere-three{right:2%;top:29%}.service-sphere-four{right:17%;bottom:5%}.service-sphere-five{left:17%;bottom:5%}
@keyframes sopai-finger-select{0%,2%{left:-1%;top:36%;opacity:1;transform:translate3d(0,0,105px) scale(.94) rotate(-10deg)}4%{left:-1%;top:36%;transform:translate3d(8px,-3px,105px) scale(.76) rotate(-10deg)}7%,15%{left:-1%;top:36%;transform:translate3d(0,0,105px) scale(.94) rotate(-10deg)}18%,22%{left:48%;top:14%;transform:translate3d(0,0,105px) scale(.94) rotate(-2deg)}24%{left:48%;top:14%;transform:translate3d(0,8px,105px) scale(.76) rotate(-2deg)}27%,35%{left:48%;top:14%;transform:translate3d(0,0,105px) scale(.94) rotate(-2deg)}38%,42%{left:94%;top:36%;transform:translate3d(0,0,105px) scale(.94) rotate(10deg)}44%{left:94%;top:36%;transform:translate3d(-8px,-3px,105px) scale(.76) rotate(10deg)}47%,55%{left:94%;top:36%;transform:translate3d(0,0,105px) scale(.94) rotate(10deg)}58%,62%{left:77%;top:84%;transform:translate3d(0,0,105px) scale(.94) rotate(13deg)}64%{left:77%;top:84%;transform:translate3d(-5px,-8px,105px) scale(.76) rotate(13deg)}67%,75%{left:77%;top:84%;transform:translate3d(0,0,105px) scale(.94) rotate(13deg)}78%,82%{left:20%;top:84%;transform:translate3d(0,0,105px) scale(.94) rotate(-8deg)}84%{left:20%;top:84%;transform:translate3d(5px,-8px,105px) scale(.76) rotate(-8deg)}87%,95%{left:20%;top:84%;transform:translate3d(0,0,105px) scale(.94) rotate(-8deg)}100%{left:-1%;top:36%;opacity:.35;transform:translate3d(0,0,105px) scale(.88) rotate(-10deg)}}
@keyframes sopai-finger-contact{0%,1%,12%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}3%{opacity:1;transform:translate(-50%,-50%) scale(.75)}8%{opacity:0;transform:translate(-50%,-50%) scale(2.1)}}
@keyframes sopai-office-star-flash{0%,42%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-12deg)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(5deg)}68%{opacity:.35;transform:translate(-50%,-50%) scale(.78) rotate(13deg)}82%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(18deg)}}
@keyframes sopai-service-signal{0%,1%,16%,100%{opacity:0;left:100%}2%{opacity:1;left:100%}11%{opacity:1;left:5%}14%{opacity:0;left:0}}
.services-office-impact{animation:sopai-office-accept 6s ease-out infinite}
.services-office-glow{animation:sopai-office-accept-glow 6s ease-in-out infinite}
@keyframes sopai-office-accept{0%,42%,100%{opacity:0;transform:translate(-50%,-50%) translateZ(75px) scale(.35)}54%{opacity:1;transform:translate(-50%,-50%) translateZ(75px) scale(.78);box-shadow:0 0 28px rgba(255,255,255,.96),0 0 55px rgba(98,212,217,.9)}76%{opacity:.28;transform:translate(-50%,-50%) translateZ(75px) scale(1.62)}90%{opacity:0;transform:translate(-50%,-50%) translateZ(75px) scale(1.9)}}
@keyframes sopai-office-accept-glow{0%,40%,100%{transform:translate(-50%,-50%) scale(.97);filter:brightness(.96) saturate(1)}55%{transform:translate(-50%,-50%) scale(1.07);filter:brightness(1.35) saturate(1.18)}78%{transform:translate(-50%,-50%) scale(1.01);filter:brightness(1.08) saturate(1.06)}}
@keyframes sopai-sphere-cue{0%,1%,16%,100%{opacity:0;transform:scale(.72)}3%{opacity:1;transform:scale(.88);box-shadow:0 0 0 4px rgba(255,255,255,.75),0 0 26px rgba(98,212,217,.94)}8%{opacity:.78;transform:scale(1.18)}14%{opacity:0;transform:scale(1.48)}}
@media(max-width:620px){.service-sphere-one{left:1%}.service-sphere-two{left:calc(50% - 39px)}.service-sphere-three{right:1%}.service-sphere-four{right:14%}.service-sphere-five{left:14%}.services-selecting-finger{width:36px;height:36px;font-size:25px}.services-office-star{width:72px;font-size:45px}}
@media(prefers-reduced-motion:reduce){.services-selecting-finger,.services-office-star{animation:none}.services-selecting-finger{display:none}.services-office-star{opacity:.5;transform:translate(-50%,-50%) scale(.62)}}

/* Service-ball navigation lands on a clearly identified, centred service section. */
.service-detail{scroll-margin-block:18vh;position:relative;border-radius:24px;transition:background-color .35s ease,box-shadow .35s ease,transform .35s ease}
.service-detail.is-navigation-focus{background:linear-gradient(120deg,rgba(234,245,242,.92),rgba(255,255,255,.96));box-shadow:0 0 0 2px rgba(0,140,149,.35),0 20px 55px rgba(16,42,67,.12);transform:translateY(-2px);animation:sopai-service-detail-focus 3.2s ease both}
.service-detail.is-navigation-focus:before{content:"Selected service";position:absolute;right:18px;top:16px;padding:6px 10px;border-radius:999px;background:var(--teal);color:#fff;font:800 .68rem/1 Manrope,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 20px rgba(0,140,149,.22)}
.service-detail:focus{outline:none}
@keyframes sopai-service-detail-focus{0%{box-shadow:0 0 0 0 rgba(98,212,217,0),0 16px 40px rgba(16,42,67,0)}18%{box-shadow:0 0 0 7px rgba(98,212,217,.22),0 20px 55px rgba(16,42,67,.14)}100%{box-shadow:0 0 0 2px rgba(0,140,149,.35),0 20px 55px rgba(16,42,67,.12)}}
@media(max-width:620px){.service-detail.is-navigation-focus:before{position:static;display:inline-flex;margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.service-detail.is-navigation-focus{animation:none}}

/* Keep the animated service choices permanently in front of the moving office frame. */
.services-orbit-visual{isolation:isolate}
.services-office-hub{z-index:4;animation:sopai-office-float 8s ease-in-out infinite}
.service-sphere{z-index:9;animation:sopai-sphere-drift-front 6.8s var(--sphere-delay) ease-in-out infinite}
.service-sphere:hover,.service-sphere:focus-visible{z-index:11;animation-play-state:paused;transform:translate3d(0,-6px,150px) scale(1.06)}
.services-orbit-caption{z-index:13;left:50%;right:auto;bottom:-5%;transform:translateX(-50%);padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.74);box-shadow:0 7px 20px rgba(16,42,67,.08);white-space:nowrap;text-align:center}
@keyframes sopai-sphere-drift-front{0%,100%{transform:translate3d(0,0,118px) rotate(-1deg)}35%{transform:translate3d(8px,-10px,150px) rotate(2deg)}70%{transform:translate3d(-7px,6px,108px) rotate(-2deg)}}
@media(max-width:620px){.services-orbit-caption{left:50%;right:auto;bottom:-3%;padding:6px 8px;font-size:.54rem}}

/* A dimensional fingertip presses each floating service control; keep it above every layer. */
.services-selecting-finger{z-index:15;width:54px;height:94px;border:0;border-radius:0;background:transparent url("assets/sopai-3d-selecting-finger.png") center/contain no-repeat;font-size:0;box-shadow:none;filter:drop-shadow(0 13px 12px rgba(16,42,67,.3)) drop-shadow(0 0 7px rgba(98,212,217,.28));transform-origin:50% 82%;animation:sopai-finger-select-3d 30s cubic-bezier(.45,.05,.3,1) infinite}
.services-selecting-finger:before{content:"";position:absolute;left:50%;top:4px;width:24px;height:18px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.78),rgba(98,212,217,.36) 45%,transparent 72%);filter:blur(2px);opacity:.45;transform:translateX(-50%);pointer-events:none}
.services-selecting-finger:after{left:50%;top:3px;width:18px;height:18px;border-color:rgba(255,255,255,.98);box-shadow:0 0 0 4px rgba(98,212,217,.2),0 0 20px rgba(98,212,217,.9)}
.services-orbit-caption{bottom:-8.5%}
@keyframes sopai-finger-select-3d{
  0%,2%{left:10%;top:34%;opacity:1;transform:translate3d(0,0,180px) rotate(-90deg) scale(.88)}
  4%{left:8.5%;top:34%;transform:translate3d(0,0,190px) rotate(-90deg) scale(.79)}
  7%,15%{left:10%;top:34%;transform:translate3d(0,0,180px) rotate(-90deg) scale(.88)}
  18%,22%{left:46%;top:14%;transform:translate3d(0,0,180px) rotate(0deg) scale(.88)}
  24%{left:46%;top:12.5%;transform:translate3d(0,0,190px) rotate(0deg) scale(.79)}
  27%,35%{left:46%;top:14%;transform:translate3d(0,0,180px) rotate(0deg) scale(.88)}
  38%,42%{left:82%;top:34%;transform:translate3d(0,0,180px) rotate(90deg) scale(.88)}
  44%{left:83.5%;top:34%;transform:translate3d(0,0,190px) rotate(90deg) scale(.79)}
  47%,55%{left:82%;top:34%;transform:translate3d(0,0,180px) rotate(90deg) scale(.88)}
  58%,62%{left:70%;top:69%;transform:translate3d(0,0,180px) rotate(137deg) scale(.88)}
  64%{left:71.2%;top:70.2%;transform:translate3d(0,0,190px) rotate(137deg) scale(.79)}
  67%,75%{left:70%;top:69%;transform:translate3d(0,0,180px) rotate(137deg) scale(.88)}
  78%,82%{left:22%;top:69%;transform:translate3d(0,0,180px) rotate(-137deg) scale(.88)}
  84%{left:20.8%;top:70.2%;transform:translate3d(0,0,190px) rotate(-137deg) scale(.79)}
  87%,95%{left:22%;top:69%;transform:translate3d(0,0,180px) rotate(-137deg) scale(.88)}
  100%{left:10%;top:34%;opacity:.45;transform:translate3d(0,0,180px) rotate(-90deg) scale(.84)}
}
@media(max-width:620px){.services-selecting-finger{width:39px;height:70px}.services-orbit-caption{bottom:-5.5%}}

/* Compact 3D hand icon: approach, press, release, then move to the next service. */
.services-selecting-finger{width:58px;height:70px;background-image:url("assets/sopai-3d-selecting-hand.png");background-position:center;background-size:contain;background-repeat:no-repeat;transform-origin:50% 88%;perspective:700px;filter:drop-shadow(0 11px 10px rgba(16,42,67,.34)) drop-shadow(0 0 7px rgba(98,212,217,.34));animation:sopai-hand-press-3d 30s cubic-bezier(.45,.05,.3,1) infinite}
.services-selecting-finger:before{top:-2px;width:27px;height:22px;opacity:.34}
.services-selecting-finger:after{top:-1px;width:19px;height:19px;animation:sopai-finger-contact 6s ease-out infinite}
.services-orbit-caption{bottom:-11.5%}
@keyframes sopai-hand-press-3d{
  0%,2%{left:8%;top:30%;opacity:.96;transform:translate3d(-8px,0,90px) rotate(-90deg) rotateX(10deg) scale(.9)}
  4%{left:10%;top:30%;transform:translate3d(3px,0,15px) rotate(-90deg) rotateX(22deg) scale(.76)}
  6%,14%{left:8%;top:30%;transform:translate3d(-8px,0,90px) rotate(-90deg) rotateX(10deg) scale(.9)}
  18%,22%{left:46%;top:8%;transform:translate3d(0,-8px,90px) rotate(0deg) rotateX(10deg) scale(.9)}
  24%{left:46%;top:10%;transform:translate3d(0,3px,15px) rotate(0deg) rotateX(23deg) scale(.76)}
  26%,34%{left:46%;top:8%;transform:translate3d(0,-8px,90px) rotate(0deg) rotateX(10deg) scale(.9)}
  38%,42%{left:84%;top:30%;transform:translate3d(8px,0,90px) rotate(90deg) rotateX(10deg) scale(.9)}
  44%{left:82%;top:30%;transform:translate3d(-3px,0,15px) rotate(90deg) rotateX(23deg) scale(.76)}
  46%,54%{left:84%;top:30%;transform:translate3d(8px,0,90px) rotate(90deg) rotateX(10deg) scale(.9)}
  58%,62%{left:73%;top:70%;transform:translate3d(7px,7px,90px) rotate(137deg) rotateX(10deg) scale(.9)}
  64%{left:71%;top:68%;transform:translate3d(-2px,-2px,15px) rotate(137deg) rotateX(23deg) scale(.76)}
  66%,74%{left:73%;top:70%;transform:translate3d(7px,7px,90px) rotate(137deg) rotateX(10deg) scale(.9)}
  78%,82%{left:19%;top:70%;transform:translate3d(-7px,7px,90px) rotate(-137deg) rotateX(10deg) scale(.9)}
  84%{left:21%;top:68%;transform:translate3d(2px,-2px,15px) rotate(-137deg) rotateX(23deg) scale(.76)}
  86%,94%{left:19%;top:70%;transform:translate3d(-7px,7px,90px) rotate(-137deg) rotateX(10deg) scale(.9)}
  100%{left:8%;top:30%;opacity:.5;transform:translate3d(-8px,0,90px) rotate(-90deg) rotateX(10deg) scale(.86)}
}
@media(max-width:620px){.services-selecting-finger{width:42px;height:52px}.services-orbit-caption{bottom:-7%}}

/* Keep the selecting hand upright while it travels and taps each service. */
.services-selecting-finger{animation-name:sopai-upright-hand-press}
@keyframes sopai-upright-hand-press{
  0%,2%{left:8%;top:39%;opacity:.96;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.9)}
  4%{left:8%;top:37%;transform:translate3d(0,-3px,15px) rotate(0deg) rotateX(20deg) scale(.76)}
  6%,14%{left:8%;top:39%;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.9)}
  18%,22%{left:46%;top:20%;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.9)}
  24%{left:46%;top:18%;transform:translate3d(0,-3px,15px) rotate(0deg) rotateX(20deg) scale(.76)}
  26%,34%{left:46%;top:20%;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.9)}
  38%,42%{left:84%;top:39%;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.9)}
  44%{left:84%;top:37%;transform:translate3d(0,-3px,15px) rotate(0deg) rotateX(20deg) scale(.76)}
  46%,54%{left:84%;top:39%;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.9)}
  58%,62%{left:73%;top:76%;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.9)}
  64%{left:73%;top:74%;transform:translate3d(0,-3px,15px) rotate(0deg) rotateX(20deg) scale(.76)}
  66%,74%{left:73%;top:76%;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.9)}
  78%,82%{left:19%;top:76%;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.9)}
  84%{left:19%;top:74%;transform:translate3d(0,-3px,15px) rotate(0deg) rotateX(20deg) scale(.76)}
  86%,94%{left:19%;top:76%;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.9)}
  100%{left:8%;top:39%;opacity:.5;transform:translate3d(0,8px,90px) rotate(0deg) rotateX(8deg) scale(.86)}
}

/* About + contact: restrained 3D story visuals, aligned with the service and
   training hero language while leaving every page flow unchanged. */
.about-hero-layout,.contact-hero-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:clamp(42px,7vw,96px);align-items:center}
.about-hero-copy,.contact-hero-copy{min-width:0}
.about-systems-visual,.contact-path-visual{position:relative;isolation:isolate;width:min(100%,510px);aspect-ratio:1.16;margin-inline:auto;perspective:900px;filter:drop-shadow(0 24px 30px rgba(10,43,66,.12))}
.about-systems-visual:before,.contact-path-visual:before{content:"";position:absolute;inset:7% 5% 9%;z-index:-3;border-radius:50%;background:radial-gradient(circle at 45% 42%,rgba(255,255,255,.94) 0 13%,rgba(118,218,220,.25) 14% 34%,rgba(255,255,255,.15) 35% 54%,rgba(0,140,149,.08) 55% 70%,transparent 71%)}
.about-systems-visual:after,.contact-path-visual:after{content:"";position:absolute;inset:18% 11%;z-index:-2;border:1px solid rgba(0,140,149,.26);border-radius:50%;transform:rotateX(67deg) rotateZ(-9deg);box-shadow:0 0 28px rgba(0,140,149,.12),inset 0 0 24px rgba(255,255,255,.7)}
.about-systems-visual>p,.contact-path-visual>p{position:absolute;left:50%;bottom:2%;margin:0;transform:translateX(-50%);white-space:nowrap;font-size:.74rem;font-weight:800;letter-spacing:.16em;color:var(--ink)}
.systems-orbit{position:absolute;inset:14% 9%;z-index:-1;border:1px solid rgba(255,255,255,.8);border-radius:50%}
.systems-orbit-a{transform:rotate(18deg) scaleY(.7)}
.systems-orbit-b{transform:rotate(-42deg) scaleY(.58);border-color:rgba(0,140,149,.24)}
.systems-hub{position:absolute;left:50%;top:48%;width:104px;height:104px;transform:translate(-50%,-50%) rotateX(7deg);border-radius:34px;background:linear-gradient(145deg,#16b4b7 0%,#008c95 48%,#063f63 100%);box-shadow:inset 13px 14px 18px rgba(255,255,255,.28),inset -14px -16px 20px rgba(5,37,63,.3),0 20px 28px rgba(5,52,78,.24);animation:sopai-hub-breathe 5.8s ease-in-out infinite}
.systems-hub:before{content:"";position:absolute;inset:17px;border-radius:25px;border:1px solid rgba(255,255,255,.6);box-shadow:0 0 20px rgba(255,255,255,.35)}
.systems-hub span{position:absolute;top:44%;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.8)}
.systems-hub span:first-child{left:27%}.systems-hub span:last-child{right:27%}
.systems-card,.contact-card{position:absolute;width:148px;min-height:104px;padding:16px 14px 13px;border:1px solid rgba(255,255,255,.82);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,248,248,.78));box-shadow:inset 0 1px 0 #fff,0 17px 28px rgba(9,49,73,.16);backdrop-filter:blur(8px);text-align:center;color:var(--ink);transform-style:preserve-3d}
.systems-card strong,.contact-card strong{display:block;margin-top:8px;font-size:.82rem;letter-spacing:.04em}
.systems-card-people{left:2%;top:18%;transform:rotate(-8deg) translateZ(30px);animation:sopai-card-float-a 6.4s ease-in-out infinite}
.systems-card-process{right:1%;top:16%;transform:rotate(7deg) translateZ(45px);animation:sopai-card-float-b 7s ease-in-out infinite}
.systems-card-tech{right:10%;bottom:10%;transform:rotate(-4deg) translateZ(24px);animation:sopai-card-float-a 6.8s ease-in-out -2.1s infinite}
.people-icon,.process-icon,.technology-icon,.message-icon,.listen-icon,.next-icon{position:relative;display:block;width:64px;height:40px;margin:auto}
.people-icon b{position:absolute;bottom:1px;width:23px;height:25px;border-radius:15px 15px 8px 8px;background:linear-gradient(145deg,#12aeb4,#075277);box-shadow:inset 4px 4px 8px rgba(255,255,255,.38)}
.people-icon b:before{content:"";position:absolute;width:12px;height:12px;left:5px;top:-10px;border-radius:50%;background:inherit}.people-icon b:nth-child(1){left:1px}.people-icon b:nth-child(2){left:21px;height:30px;background:linear-gradient(145deg,#1fc3c0,#008c95)}.people-icon b:nth-child(3){right:0;background:linear-gradient(145deg,#356784,#0b2e4f)}
.process-icon b{position:absolute;left:5px;width:54px;height:8px;border-radius:999px;background:linear-gradient(90deg,#0b385b,#0aa1a8);box-shadow:0 5px 10px rgba(4,89,102,.16)}.process-icon b:nth-child(1){top:3px}.process-icon b:nth-child(2){top:16px;width:42px}.process-icon b:nth-child(3){top:29px;width:49px}
.technology-icon{border:3px solid #0b385b;border-radius:8px;background:linear-gradient(145deg,#fff,#dff3f3);box-shadow:inset 0 0 14px rgba(0,140,149,.14)}.technology-icon:after{content:"";position:absolute;left:18px;bottom:-8px;width:28px;height:5px;border-radius:4px;background:#0b385b}.technology-icon b{position:absolute;left:8px;height:4px;border-radius:4px;background:#0a9aa2}.technology-icon b:nth-child(1){top:9px;width:38px}.technology-icon b:nth-child(2){top:18px;width:30px;opacity:.5}.technology-icon b:nth-child(3){top:27px;width:20px;opacity:.28}
.systems-satellite{position:absolute;left:9%;bottom:21%;width:26px;height:26px;border-radius:50%;z-index:2;background:radial-gradient(circle at 32% 26%,#fff 0 8%,#55d7d7 15%,#008d96 56%,#062f50 100%);box-shadow:0 0 0 8px rgba(0,140,149,.08),0 10px 20px rgba(6,48,76,.22);animation:sopai-satellite-orbit 9s linear infinite}
.contact-path-visual:before{background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.98) 0 12%,rgba(118,218,220,.25) 13% 36%,rgba(255,255,255,.13) 37% 56%,rgba(0,140,149,.08) 57% 72%,transparent 73%)}
.contact-orbit{position:absolute;inset:18% 6%;z-index:-1;border:1px solid rgba(0,140,149,.25);border-radius:50%;transform:rotate(-9deg) scaleY(.67)}
.contact-card{width:156px;min-height:105px}
.contact-card-ask{left:0;top:18%;transform:rotate(-7deg);animation:sopai-card-float-a 6.2s ease-in-out infinite}
.contact-card-listen{right:0;top:14%;transform:rotate(7deg);animation:sopai-card-float-b 6.8s ease-in-out infinite}
.contact-card-next{left:50%;bottom:9%;transform:translateX(-50%) rotate(-2deg);animation:sopai-card-float-c 7.2s ease-in-out infinite}
.message-icon{border-radius:12px;background:linear-gradient(145deg,#0b385b,#008c95);box-shadow:inset 6px 7px 10px rgba(255,255,255,.22)}.message-icon:after{content:"";position:absolute;left:9px;bottom:-7px;border:8px solid transparent;border-top-color:#087f8a;transform:rotate(18deg)}.message-icon b{position:absolute;left:13px;width:38px;height:4px;border-radius:5px;background:#fff}.message-icon b:nth-child(1){top:10px}.message-icon b:nth-child(2){top:19px;width:31px;opacity:.75}.message-icon b:nth-child(3){top:28px;width:23px;opacity:.5}
.listen-icon{border-radius:50%;background:linear-gradient(145deg,#1cc5c2,#075277);box-shadow:inset 8px 8px 13px rgba(255,255,255,.35),0 8px 14px rgba(4,74,94,.2)}.listen-icon:before,.listen-icon:after{content:"";position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.84)}.listen-icon:before{inset:8px}.listen-icon:after{inset:16px}.listen-icon b{position:absolute;top:18px;width:8px;height:8px;border-radius:50%;background:#fff}.listen-icon b:first-child{left:18px}.listen-icon b:last-child{right:18px}
.next-icon{border-radius:12px;background:linear-gradient(145deg,#fff,#d8eeee);border:2px solid rgba(0,140,149,.38)}.next-icon:before{content:"";position:absolute;left:15px;top:19px;width:17px;height:9px;border-left:4px solid #008c95;border-bottom:4px solid #008c95;transform:rotate(-45deg)}.next-icon b{position:absolute;right:9px;top:10px;width:7px;height:21px;border-radius:6px;background:linear-gradient(#16b8b8,#0b385b)}
.contact-signal{position:absolute;left:8%;top:44%;width:16px;height:16px;z-index:3;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(14,171,176,.3),0 0 24px 9px rgba(14,171,176,.35);animation:sopai-contact-signal 7.2s ease-in-out infinite}
@keyframes sopai-hub-breathe{0%,100%{transform:translate(-50%,-50%) rotateX(7deg) scale(1)}50%{transform:translate(-50%,-54%) rotateX(7deg) scale(1.035)}}
@keyframes sopai-card-float-a{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes sopai-card-float-b{0%,100%{translate:0 0}50%{translate:0 8px}}
@keyframes sopai-card-float-c{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes sopai-satellite-orbit{0%{offset-distance:0%;transform:rotate(0)}100%{offset-distance:100%;transform:rotate(360deg)}}
.systems-satellite{offset-path:ellipse(43% 32% at 50% 48%)}
@keyframes sopai-contact-signal{0%,8%{left:8%;top:44%;opacity:.25}13%{opacity:1}43%{left:82%;top:39%;opacity:1}50%{opacity:.2}58%{left:82%;top:39%;opacity:.2}65%{opacity:1}92%{left:49%;top:76%;opacity:1}100%{left:49%;top:76%;opacity:.2}}
@media(max-width:900px){.about-hero-layout,.contact-hero-layout{grid-template-columns:1fr}.about-systems-visual,.contact-path-visual{width:min(100%,500px)}.about-page .page-hero,.contact-page .page-hero{padding-bottom:36px}}
@media(max-width:520px){.about-systems-visual,.contact-path-visual{width:110%;margin-left:-5%;transform:scale(.92)}.systems-card,.contact-card{width:124px;min-height:92px;padding:12px 9px}.systems-card strong,.contact-card strong{font-size:.72rem}.systems-hub{width:82px;height:82px}.about-systems-visual>p,.contact-path-visual>p{font-size:.58rem}.about-page .page-hero h1,.contact-page .page-hero h1{font-size:clamp(2.55rem,13vw,4rem)}}
@media(prefers-reduced-motion:reduce){.systems-hub,.systems-card,.systems-satellite,.contact-card,.contact-signal{animation:none!important}}

/* The service-hero controller follows each moving ball's live centre. The
   fingertip remains upright and lands centrally, even as the balls drift. */
.services-selecting-finger.is-centre-tracked{
  left:0;
  top:0;
  animation:none;
  transform-origin:43% 4%;
  width:58px;
  height:70px;
  will-change:left,top,transform;
}
.services-selecting-finger.is-centre-tracked:before,
.services-selecting-finger.is-centre-tracked:after{left:43%;top:4%}

@media(max-width:620px){.services-selecting-finger.is-centre-tracked{width:42px;height:52px}}

/* The hand never tilts: depth comes only from forward/back movement and scale. */
@keyframes sopai-upright-hand-press{
  0%,2%{left:8%;top:39%;opacity:.96;transform:translate3d(0,8px,90px) scale(.9)}
  4%{left:8%;top:37%;transform:translate3d(0,-3px,15px) scale(.76)}
  6%,14%{left:8%;top:39%;transform:translate3d(0,8px,90px) scale(.9)}
  18%,22%{left:46%;top:20%;transform:translate3d(0,8px,90px) scale(.9)}
  24%{left:46%;top:18%;transform:translate3d(0,-3px,15px) scale(.76)}
  26%,34%{left:46%;top:20%;transform:translate3d(0,8px,90px) scale(.9)}
  38%,42%{left:84%;top:39%;transform:translate3d(0,8px,90px) scale(.9)}
  44%{left:84%;top:37%;transform:translate3d(0,-3px,15px) scale(.76)}
  46%,54%{left:84%;top:39%;transform:translate3d(0,8px,90px) scale(.9)}
  58%,62%{left:73%;top:76%;transform:translate3d(0,8px,90px) scale(.9)}
  64%{left:73%;top:74%;transform:translate3d(0,-3px,15px) scale(.76)}
  66%,74%{left:73%;top:76%;transform:translate3d(0,8px,90px) scale(.9)}
  78%,82%{left:19%;top:76%;transform:translate3d(0,8px,90px) scale(.9)}
  84%{left:19%;top:74%;transform:translate3d(0,-3px,15px) scale(.76)}
  86%,94%{left:19%;top:76%;transform:translate3d(0,8px,90px) scale(.9)}
  100%{left:8%;top:39%;opacity:.5;transform:translate3d(0,8px,90px) scale(.86)}
}

/* About + contact hero stories v2: original 3D artwork with restrained motion. */
.about-hero-layout,.contact-hero-layout{grid-template-columns:minmax(0,.95fr) minmax(480px,1.05fr);gap:clamp(34px,5vw,72px)}
.about-systems-visual-v2,.contact-path-visual-v2{width:min(100%,610px);aspect-ratio:1.28;filter:drop-shadow(0 28px 34px rgba(10,43,66,.14))}
.about-systems-visual-v2:before,.contact-path-visual-v2:before{inset:2%;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.96) 0 21%,rgba(118,218,220,.19) 40%,rgba(0,140,149,.07) 63%,transparent 74%)}
.about-systems-visual-v2:after,.contact-path-visual-v2:after{inset:13% 7%;transform:rotateX(68deg) rotateZ(-8deg);animation:sopai-orbit-breathe 7s ease-in-out infinite}
.about-systems-scene,.contact-consultation-scene{position:absolute;inset:3% 2% 8%;z-index:1;width:96%;height:89%;object-fit:contain;transform-origin:50% 53%;filter:drop-shadow(0 20px 22px rgba(7,44,67,.16));animation:sopai-scene-float 7s ease-in-out infinite}
.systems-orbit{z-index:0}.about-systems-visual-v2 .systems-orbit-a{inset:15% 5%;animation:sopai-orbit-turn 22s linear infinite}.about-systems-visual-v2 .systems-orbit-b{inset:8% 16%;animation:sopai-orbit-turn-reverse 27s linear infinite}
.systems-scene-label,.contact-stage-label{position:absolute;z-index:4;padding:7px 11px;border:1px solid rgba(255,255,255,.9);border-radius:14px;background:rgba(248,252,252,.88);box-shadow:0 9px 20px rgba(8,52,77,.14);backdrop-filter:blur(8px);color:var(--ink);text-align:center;line-height:1.1}
.systems-scene-label strong,.contact-stage-label strong{display:block;font-size:.76rem}.systems-scene-label small,.contact-stage-label small{display:block;margin-top:3px;font-size:.58rem;color:#356079}
.systems-scene-people{left:3%;top:49%}.systems-scene-process{right:1%;top:47%}.systems-scene-technology{left:50%;bottom:8%;transform:translateX(-50%)}
.systems-brain-label{position:absolute;z-index:5;left:50%;top:9%;transform:translateX(-50%);min-width:160px;padding:7px 13px;border-radius:999px;background:linear-gradient(135deg,rgba(5,53,82,.94),rgba(0,140,149,.92));box-shadow:0 10px 20px rgba(7,49,73,.22);color:#fff;text-align:center}
.systems-brain-label strong{display:block;font-size:.75rem}.systems-brain-label small{font-size:.57rem;opacity:.82}
.systems-pulse{position:absolute;z-index:3;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(12,168,174,.2),0 0 18px 8px rgba(12,168,174,.32);animation:sopai-system-pulse 4.8s ease-in-out infinite}.systems-pulse-a{left:31%;top:42%}.systems-pulse-b{right:30%;top:43%;animation-delay:-1.6s}.systems-pulse-c{left:50%;bottom:31%;animation-delay:-3.2s}
.about-systems-visual-v2>p,.contact-path-visual-v2>p{z-index:6;bottom:0;padding:7px 17px;border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 8px 18px rgba(9,49,73,.1)}
.contact-consultation-scene{inset:4% 1% 9%;width:98%;height:87%;animation-duration:7.6s}
.contact-stage-tell{left:4%;top:7%}.contact-stage-listen{right:4%;top:7%}.contact-stage-agree{left:50%;bottom:8%;transform:translateX(-50%);min-width:178px}
.contact-route{position:absolute;z-index:2;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(0,140,149,.18),#08a8ad 48%,rgba(0,140,149,.18));box-shadow:0 0 12px rgba(6,168,174,.34)}
.contact-route:after{content:"";position:absolute;right:-2px;top:-4px;width:9px;height:9px;border-top:3px solid #08a8ad;border-right:3px solid #08a8ad;transform:rotate(45deg)}
.contact-route-one{left:31%;top:25%;width:38%;transform:rotate(-1deg)}
.contact-route-two{left:55%;top:58%;width:29%;transform:rotate(116deg)}
.contact-route-arrow{position:absolute;z-index:5;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#fff,#d9f1f1);box-shadow:0 7px 16px rgba(5,61,82,.2),0 0 0 5px rgba(9,163,168,.1);color:#008c95;font-size:1.1rem;font-weight:900}
.contact-route-arrow-one{left:31%;top:20%;animation:sopai-arrow-one 6s ease-in-out infinite}
.contact-route-arrow-two{left:68%;top:40%;transform:rotate(115deg);animation:sopai-arrow-two 6s ease-in-out 3s infinite}
@keyframes sopai-scene-float{0%,100%{transform:translate3d(0,0,0) rotateX(0)}50%{transform:translate3d(0,-8px,22px) rotateX(1.5deg)}}
@keyframes sopai-orbit-breathe{0%,100%{transform:rotateX(68deg) rotateZ(-8deg) scale(1)}50%{transform:rotateX(68deg) rotateZ(4deg) scale(1.035)}}
@keyframes sopai-orbit-turn{to{transform:rotate(378deg) scaleY(.7)}}
@keyframes sopai-orbit-turn-reverse{to{transform:rotate(-402deg) scaleY(.58)}}
@keyframes sopai-system-pulse{0%,100%{opacity:.2;transform:scale(.72)}35%,55%{opacity:1;transform:scale(1.12)}}
@keyframes sopai-arrow-one{0%,12%{left:31%;top:20%;opacity:0}18%{opacity:1}72%{left:67%;top:20%;opacity:1}82%,100%{left:67%;top:20%;opacity:0}}
@keyframes sopai-arrow-two{0%,12%{left:68%;top:40%;opacity:0}18%{opacity:1}72%{left:57%;top:67%;opacity:1}82%,100%{left:57%;top:67%;opacity:0}}

/* Review refinements v32: translucent brain caption and unobstructed contact flow. */
.about-systems-visual-v2 .systems-brain-label{
  background:linear-gradient(135deg,rgba(5,53,82,.28),rgba(0,140,149,.22));
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 7px 16px rgba(7,49,73,.08);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.about-systems-visual-v2 .systems-brain-label strong,
.about-systems-visual-v2 .systems-brain-label small{text-shadow:0 1px 4px rgba(2,34,53,.55)}

.contact-path-visual-v2 .contact-route,
.contact-path-visual-v2 .contact-route-arrow{z-index:0}
.contact-path-visual-v2 .contact-route-one{left:41%;top:22%;width:19%;transform:rotate(-2deg)}
.contact-path-visual-v2 .contact-route-two{left:70%;top:43%;width:21%;transform:rotate(118deg)}
.contact-path-visual-v2 .contact-route-arrow-one{animation:sopai-arrow-one-v32 6s ease-in-out infinite}
.contact-path-visual-v2 .contact-route-arrow-two{animation:sopai-arrow-two-v32 6s ease-in-out 3s infinite}
@keyframes sopai-arrow-one-v32{
  0%,12%{left:42%;top:18%;opacity:0}
  18%{opacity:1}
  72%{left:58%;top:18%;opacity:1}
  82%,100%{left:58%;top:18%;opacity:0}
}
@keyframes sopai-arrow-two-v32{
  0%,12%{left:77%;top:37%;opacity:0;transform:rotate(118deg)}
  18%{opacity:1}
  72%{left:67%;top:56%;opacity:1;transform:rotate(118deg)}
  82%,100%{left:67%;top:56%;opacity:0;transform:rotate(118deg)}
}
@media(max-width:1000px){.about-hero-layout,.contact-hero-layout{grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:28px}.about-systems-visual-v2,.contact-path-visual-v2{width:min(100%,560px)}}
@media(max-width:900px){.about-hero-layout,.contact-hero-layout{grid-template-columns:1fr}.about-systems-visual-v2,.contact-path-visual-v2{width:min(100%,620px)}}
@media(max-width:560px){.about-systems-visual-v2,.contact-path-visual-v2{width:112%;margin-left:-6%;transform:scale(.96)}.systems-scene-label,.contact-stage-label{padding:5px 7px}.systems-scene-label strong,.contact-stage-label strong{font-size:.65rem}.systems-scene-label small,.contact-stage-label small{display:none}.systems-brain-label{top:5%;min-width:135px}.systems-brain-label small{display:none}.contact-stage-agree{min-width:140px}}
@media(prefers-reduced-motion:reduce){.about-systems-scene,.contact-consultation-scene,.about-systems-visual-v2:after,.about-systems-visual-v2 .systems-orbit,.systems-pulse,.contact-route-arrow{animation:none!important}}
/* Review refinements v34: translucent contact labels and enlarged training story. */
.contact-path-visual-v2 .contact-stage-label {
  background: linear-gradient(145deg, rgba(255, 255, 255, .40), rgba(231, 248, 248, .22));
  border-color: rgba(255, 255, 255, .58);
  box-shadow: 0 7px 16px rgba(8, 52, 77, .08);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

.contact-path-visual-v2 .contact-stage-label strong {
  color: #103451;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .92);
}

.contact-path-visual-v2 .contact-stage-label small {
  color: #315b72;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .92);
}

@media (min-width: 851px) {
  .training-page .page-hero .wrap {
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
    gap: 30px;
  }

  .training-page .training-visual {
    min-height: 410px;
    transform: scale(1.06);
    transform-origin: center;
  }
}

/* Review refinement v35: keep animated direction markers in the clear gaps. */
.contact-path-visual-v2 .contact-route-arrow {
  z-index: 3;
}

.contact-path-visual-v2 .contact-route-arrow-one {
  animation: sopai-arrow-one-v35 6s ease-in-out infinite;
}

.contact-path-visual-v2 .contact-route-arrow-two {
  animation: sopai-arrow-two-v35 6s ease-in-out 3s infinite;
}

@keyframes sopai-arrow-one-v35 {
  0%, 12% { left: 43%; top: 18%; opacity: 0; }
  18% { opacity: 1; }
  72% { left: 58%; top: 18%; opacity: 1; }
  82%, 100% { left: 58%; top: 18%; opacity: 0; }
}

@keyframes sopai-arrow-two-v35 {
  0%, 12% { left: 88%; top: 32%; opacity: 0; transform: rotate(112deg); }
  18% { opacity: 1; }
  72% { left: 84%; top: 50%; opacity: 1; transform: rotate(112deg); }
  82%, 100% { left: 84%; top: 50%; opacity: 0; transform: rotate(112deg); }
}

/* Contact hero v37: readable labels above each scene; animated flow only. */
.contact-path-visual-v2 .contact-route {
  display: none;
}

.contact-path-visual-v2 .contact-stage-label {
  z-index: 6;
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(235, 248, 248, .88));
  border-color: rgba(255, 255, 255, .98);
  box-shadow: 0 9px 22px rgba(8, 52, 77, .14);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.contact-path-visual-v2 .contact-stage-tell {
  left: 7%;
  top: -3%;
}

.contact-path-visual-v2 .contact-stage-listen {
  right: 5%;
  top: -3%;
}

.contact-path-visual-v2 .contact-stage-agree {
  left: 50%;
  top: 43%;
  bottom: auto;
  transform: translateX(-50%);
}

.contact-path-visual-v2 .contact-route-arrow {
  z-index: 5;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-stage-tell {
    left: 5%;
    top: -1%;
  }

  .contact-path-visual-v2 .contact-stage-listen {
    right: 4%;
    top: -1%;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: 44%;
  }
}

/* Contact hero v40: close the join between the fixed and lowered scene layers. */
.contact-path-visual-v2 .contact-consultation-scene-top {
  clip-path: inset(0 0 calc(51% - 16px) 0);
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-consultation-scene-top {
    clip-path: inset(0 0 calc(51% - 12px) 0);
  }
}

/* Contact hero v41: retain a single uninterrupted scene image. */
.contact-path-visual-v2 .contact-consultation-scene {
  translate: 0 14px;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-consultation-scene {
    translate: 0 10px;
  }
}

/* Contact hero v38: lift the first stages and keep the final step below the artwork. */
.contact-path-visual-v2 {
  margin-bottom: 96px;
  overflow: visible;
}

.contact-path-visual-v2 .contact-stage-tell {
  top: -10%;
}

.contact-path-visual-v2 .contact-stage-listen {
  top: -10%;
}

.contact-path-visual-v2 .contact-stage-agree {
  top: auto;
  bottom: -8%;
  z-index: 8;
}

.contact-path-visual-v2 > p {
  bottom: -23%;
  z-index: 8;
}

.contact-path-visual-v2 .contact-route-arrow-two {
  animation: sopai-arrow-two-v38 6s ease-in-out 3s infinite;
}

@keyframes sopai-arrow-two-v38 {
  0%, 12% {
    left: 88%;
    top: 32%;
    opacity: 0;
    transform: rotate(112deg);
  }
  18% {
    opacity: 1;
  }
  70% {
    left: 84%;
    top: 43%;
    opacity: 1;
    transform: rotate(112deg);
  }
  82%, 100% {
    left: 82%;
    top: 47%;
    opacity: 0;
    transform: rotate(112deg);
  }
}

@media (max-width: 560px) {
  .contact-path-visual-v2 {
    margin-bottom: 78px;
  }

  .contact-path-visual-v2 .contact-stage-tell {
    top: -7%;
  }

  .contact-path-visual-v2 .contact-stage-listen {
    top: -7%;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: auto;
    bottom: -6%;
  }

  .contact-path-visual-v2 > p {
    bottom: -22%;
  }
}

/* Contact hero v39: lower only the final consultation scene while its label stays fixed. */
.contact-path-visual-v2 {
  margin-bottom: 112px;
}

.contact-path-visual-v2 .contact-consultation-scene-top {
  clip-path: inset(0 0 51% 0);
}

.contact-path-visual-v2 .contact-consultation-scene-bottom {
  clip-path: inset(49% 0 0 0);
  translate: 0 14px;
  will-change: transform, translate;
}

.contact-path-visual-v2 > p {
  bottom: -27%;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 {
    margin-bottom: 92px;
  }

  .contact-path-visual-v2 .contact-consultation-scene-bottom {
    translate: 0 10px;
  }

  .contact-path-visual-v2 > p {
    bottom: -26%;
  }
}

/* Contact hero v42: align every stage title above its scene. */
.contact-path-visual-v2 .contact-consultation-scene {
  translate: 0 26px;
}

.contact-path-visual-v2 .contact-stage-agree {
  top: -10%;
  bottom: auto;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-consultation-scene {
    translate: 0 18px;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: -7%;
  }
}

/* Contact hero v43: place the final title above its own lower consultation scene. */
.contact-path-visual-v2 .contact-consultation-scene {
  translate: 0 42px;
}

.contact-path-visual-v2 .contact-stage-agree {
  top: 43%;
  bottom: auto;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-consultation-scene {
    translate: 0 28px;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: 42%;
  }
}

/* Contact hero v44: give the final consultation stage its own clear space. */
.contact-path-visual-v2 .contact-consultation-scene {
  translate: 0 60px;
}

.contact-path-visual-v2 .contact-stage-tell,
.contact-path-visual-v2 .contact-stage-listen {
  top: -5%;
}

.contact-path-visual-v2 .contact-stage-agree {
  top: 50%;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-consultation-scene {
    translate: 0 38px;
  }

  .contact-path-visual-v2 .contact-stage-tell,
  .contact-path-visual-v2 .contact-stage-listen {
    top: -3%;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: 49%;
  }
}

/* Contact hero v45: independently position the three consultation stages. */
.contact-path-visual-v2 .contact-scene-tell {
  clip-path: polygon(0 0, 54% 0, 54% 54%, 0 56%);
  translate: 0 0;
}

.contact-path-visual-v2 .contact-scene-listen {
  clip-path: polygon(56% 0, 100% 0, 100% 56%, 56% 54%);
  translate: 0 0;
}

.contact-path-visual-v2 .contact-scene-agree {
  clip-path: polygon(15% 45%, 88% 45%, 94% 100%, 6% 100%);
  translate: 0 66px;
}

.contact-path-visual-v2 .contact-stage-tell,
.contact-path-visual-v2 .contact-stage-listen {
  top: -2%;
}

.contact-path-visual-v2 .contact-stage-agree {
  top: 55%;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-scene-tell,
  .contact-path-visual-v2 .contact-scene-listen {
    translate: 0 0;
  }

  .contact-path-visual-v2 .contact-scene-agree {
    translate: 0 44px;
  }

  .contact-path-visual-v2 .contact-stage-tell,
  .contact-path-visual-v2 .contact-stage-listen {
    top: 0;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: 54%;
  }
}

/* Contact hero v46: one clean composite with a true gap for the final label. */
.contact-path-visual-v2 .contact-consultation-scene-v46 {
  clip-path: none;
  translate: 0 0;
}

.contact-path-visual-v2 .contact-stage-tell,
.contact-path-visual-v2 .contact-stage-listen {
  top: -2%;
}

.contact-path-visual-v2 .contact-stage-agree {
  top: 52%;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-consultation-scene-v46 {
    translate: 0 0;
  }

  .contact-path-visual-v2 .contact-stage-tell,
  .contact-path-visual-v2 .contact-stage-listen {
    top: 0;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: 51%;
  }
}

/* Contact hero v47: isolate each original scene with feathered masks. */
.contact-path-visual-v2 .contact-scene-tell {
  clip-path: none;
  -webkit-mask-image: radial-gradient(ellipse 40% 44% at 25% 25%, #000 0 62%, transparent 78%);
  mask-image: radial-gradient(ellipse 40% 44% at 25% 25%, #000 0 62%, transparent 78%);
  translate: 0 8px;
}

.contact-path-visual-v2 .contact-scene-listen {
  clip-path: none;
  -webkit-mask-image: radial-gradient(ellipse 38% 44% at 78% 25%, #000 0 62%, transparent 78%);
  mask-image: radial-gradient(ellipse 38% 44% at 78% 25%, #000 0 62%, transparent 78%);
  translate: 0 8px;
}

.contact-path-visual-v2 .contact-scene-agree {
  clip-path: none;
  -webkit-mask-image: radial-gradient(ellipse 48% 46% at 51% 78%, #000 0 64%, transparent 80%);
  mask-image: radial-gradient(ellipse 48% 46% at 51% 78%, #000 0 64%, transparent 80%);
  translate: 0 72px;
}

.contact-path-visual-v2 .contact-stage-tell,
.contact-path-visual-v2 .contact-stage-listen {
  top: 0;
}

.contact-path-visual-v2 .contact-stage-agree {
  top: 56%;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-scene-tell,
  .contact-path-visual-v2 .contact-scene-listen {
    translate: 0 5px;
  }

  .contact-path-visual-v2 .contact-scene-agree {
    translate: 0 48px;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: 55%;
  }
}

/* Contact hero v48: one clean image layer—no crop, mask, or duplication. */
.contact-path-visual-v2 .contact-clean-single-scene {
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none;
  translate: 0 36px;
}

.contact-path-visual-v2 .contact-stage-tell,
.contact-path-visual-v2 .contact-stage-listen {
  top: 0;
}

.contact-path-visual-v2 .contact-stage-agree {
  top: 56%;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-clean-single-scene {
    translate: 0 24px;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: 55%;
  }
}

/* Contact hero v49: create clear space below the fixed final-stage label. */
.contact-path-visual-v2 .contact-clean-single-scene {
  translate: 0 88px;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-clean-single-scene {
    translate: 0 56px;
  }
}

/* Contact hero v50: final verified spacing for all three stage labels. */
.contact-path-visual-v2 .contact-clean-single-scene {
  translate: 0 96px;
}

.contact-path-visual-v2 .contact-stage-tell,
.contact-path-visual-v2 .contact-stage-listen {
  top: 8%;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-clean-single-scene {
    translate: 0 62px;
  }

  .contact-path-visual-v2 .contact-stage-tell,
  .contact-path-visual-v2 .contact-stage-listen {
    top: 6%;
  }
}

/* Contact hero v51: lower the final stage and process caption together. */
.contact-path-visual-v2 {
  margin-bottom: 132px;
}

.contact-path-visual-v2 .contact-clean-single-scene {
  translate: 0 110px;
}

.contact-path-visual-v2 .contact-stage-agree {
  top: 61%;
}

.contact-path-visual-v2 > p {
  bottom: -33%;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 {
    margin-bottom: 108px;
  }

  .contact-path-visual-v2 .contact-clean-single-scene {
    translate: 0 72px;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: 60%;
  }

  .contact-path-visual-v2 > p {
    bottom: -31%;
  }
}

/* Contact hero v52: bring the first two labels closer to their scenes. */
.contact-path-visual-v2 .contact-stage-tell,
.contact-path-visual-v2 .contact-stage-listen {
  top: 11%;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-stage-tell,
  .contact-path-visual-v2 .contact-stage-listen {
    top: 9%;
  }
}

/* Contact hero v53: independently grouped stages and an unobstructed flow lane. */
.contact-path-visual-v2 {
  margin-bottom: 158px;
}

.contact-path-visual-v2 .contact-scene-layer {
  animation: none;
  clip-path: none;
  translate: 0 110px;
}

.contact-path-visual-v2 .contact-scene-tell {
  -webkit-mask-image: none;
  mask-image: none;
}

.contact-path-visual-v2 .contact-scene-listen {
  -webkit-mask-image: radial-gradient(ellipse 41% 49% at 78% 24%, #000 0 62%, rgba(0, 0, 0, .92) 68%, transparent 78%);
  mask-image: radial-gradient(ellipse 41% 49% at 78% 24%, #000 0 62%, rgba(0, 0, 0, .92) 68%, transparent 78%);
}

.contact-path-visual-v2 .contact-final-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform: translateY(136px);
  pointer-events: none;
}

.contact-path-visual-v2 .contact-final-stage .contact-scene-agree {
  translate: 0;
  -webkit-mask-image: radial-gradient(ellipse 49% 52% at 50% 79%, #000 0 66%, rgba(0, 0, 0, .94) 72%, transparent 82%);
  mask-image: radial-gradient(ellipse 49% 52% at 50% 79%, #000 0 66%, rgba(0, 0, 0, .94) 72%, transparent 82%);
}

.contact-path-visual-v2 .contact-final-stage .contact-stage-agree {
  top: 55%;
  bottom: auto;
}

.contact-path-visual-v2 > p {
  bottom: -40%;
}

.contact-path-visual-v2 .contact-route-arrow-two {
  z-index: 7;
  animation: sopai-arrow-two-v53 6s ease-in-out 3s infinite;
}

@keyframes sopai-arrow-two-v53 {
  0%, 12% {
    left: 96%;
    top: 42%;
    opacity: 0;
    transform: rotate(122deg);
  }
  18% {
    opacity: 1;
  }
  72% {
    left: 84%;
    top: 59%;
    opacity: 1;
    transform: rotate(122deg);
  }
  82%, 100% {
    left: 82%;
    top: 62%;
    opacity: 0;
    transform: rotate(122deg);
  }
}

@media (max-width: 560px) {
  .contact-path-visual-v2 {
    margin-bottom: 126px;
  }

  .contact-path-visual-v2 .contact-scene-layer {
    translate: 0 72px;
  }

  .contact-path-visual-v2 .contact-final-stage {
    transform: translateY(90px);
  }

  .contact-path-visual-v2 .contact-final-stage .contact-scene-agree {
    translate: 0;
  }

  .contact-path-visual-v2 .contact-final-stage .contact-stage-agree {
    top: 55%;
  }

  .contact-path-visual-v2 > p {
    bottom: -38%;
  }
}

/* Contact hero v54: remove residual scene fragments and keep flow arrows off the artwork. */
.contact-path-visual-v2::after,
.contact-path-visual-v2 .contact-orbit {
  display: none;
}

.contact-path-visual-v2 .contact-final-stage .contact-scene-agree {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0 45%, #000 52%),
    radial-gradient(ellipse 48% 51% at 50% 79%, #000 0 66%, rgba(0, 0, 0, .94) 72%, transparent 82%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0 45%, #000 52%),
    radial-gradient(ellipse 48% 51% at 50% 79%, #000 0 66%, rgba(0, 0, 0, .94) 72%, transparent 82%);
  mask-composite: intersect;
}

.contact-path-visual-v2 .contact-route-arrow-two {
  animation: sopai-arrow-two-v54 6s ease-in-out 3s infinite;
}

@keyframes sopai-arrow-two-v54 {
  0%, 12% {
    left: 101%;
    top: 40%;
    opacity: 0;
    transform: rotate(104deg);
  }
  18% {
    opacity: 1;
  }
  72% {
    left: 99%;
    top: 59%;
    opacity: 1;
    transform: rotate(104deg);
  }
  82%, 100% {
    left: 98%;
    top: 63%;
    opacity: 0;
    transform: rotate(104deg);
  }
}

/* Contact hero rollback: restore the accepted single-image v52 composition. */
.contact-path-visual-v2 {
  margin-bottom: 132px;
}

.contact-path-visual-v2::after,
.contact-path-visual-v2 .contact-orbit {
  display: block;
}

.contact-path-visual-v2 .contact-clean-single-scene {
  translate: 0 110px;
}

.contact-path-visual-v2 .contact-stage-agree {
  top: 61%;
}

.contact-path-visual-v2 > p {
  bottom: -33%;
}

.contact-path-visual-v2 .contact-route-arrow-two {
  animation: sopai-arrow-two-v38 6s ease-in-out 3s infinite;
}

@media (max-width: 560px) {
  .contact-path-visual-v2 {
    margin-bottom: 108px;
  }

  .contact-path-visual-v2 .contact-clean-single-scene {
    translate: 0 72px;
  }

  .contact-path-visual-v2 .contact-stage-agree {
    top: 60%;
  }

  .contact-path-visual-v2 > p {
    bottom: -31%;
  }
}

/* Contact hero v55: curve the listen-to-agree arrow around the artwork. */
.contact-path-visual-v2 .contact-route-arrow-two {
  left: 0;
  top: 0;
  transform: none;
  offset-anchor: center;
  offset-rotate: auto 38deg;
  offset-path: path("M 555 205 C 660 230 645 350 470 410");
  animation: sopai-arrow-two-v55 6s ease-in-out 3s infinite;
}

@keyframes sopai-arrow-two-v55 {
  0%, 12% {
    offset-distance: 0%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  72% {
    offset-distance: 100%;
    opacity: 1;
  }
  82%, 100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .contact-path-visual-v2 .contact-route-arrow-two {
    offset-path: path("M 350 135 C 430 160 425 255 300 305");
  }
}

/* Keeps the bot-trap field out of view while preserving it for server-side checks. */
.website-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }