/* Each service is a small dimensional sculpture; all styling is scoped here. */
.service-art{--sa-gold:#d9b777;--sa-rx:0deg;--sa-ry:0deg;--sa-px:0px;--sa-py:0px;--sa-scroll:0deg;position:relative;width:min(100%,340px);aspect-ratio:1.3;margin:34px auto 0;isolation:isolate;perspective:950px;pointer-events:none;flex-shrink:0}
.service-art *{box-sizing:border-box}.service-art i{display:block;font-style:normal}.service-art svg{display:block;width:100%;height:100%;overflow:visible}
.service-art .sa-atmosphere{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(ellipse,#d2ac5f14,transparent 68%);filter:blur(13px);opacity:.8}
.service-art .sa-ground{position:absolute;bottom:6%;left:15%;right:15%;height:14%;border-radius:50%;background:radial-gradient(ellipse,#0008,transparent 68%);filter:blur(9px);transform:rotate(-9deg)}
.service-art .sa-camera{position:absolute;left:50%;top:50%;width:320px;height:260px;transform-style:preserve-3d;transform:translate(-50%,-50%) scale(var(--sa-scale,1)) translate3d(var(--sa-px),var(--sa-py),0) rotateX(var(--sa-rx)) rotateY(var(--sa-ry)) rotateZ(var(--sa-scroll));transition:transform .55s cubic-bezier(.2,.65,.25,1)}
.service-art .sa-guides{position:absolute;inset:12px;transform:translateZ(-60px);opacity:.4}.service-art .sa-guides i{position:absolute;width:9px;height:9px;border-color:#b69a624d;border-style:solid}.service-art .sa-guides i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.service-art .sa-guides i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}.service-art .sa-guides i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.service-art .sa-guides i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.service-art .sa-float{animation:sa-float 6s ease-in-out infinite;transform-style:preserve-3d}
/* Websites: three physical viewing planes and a traveling studio light. */
.service-art .sa-web-stack{position:absolute;inset:0;transform:translateY(0) rotateX(8deg) rotateY(-20deg) rotateZ(-8deg)}
.service-art .sa-browser{position:absolute;width:214px;height:148px;left:40px;top:58px;border:1px solid #bd9e665c;border-radius:7px;background:linear-gradient(145deg,#223344,#0b1522 70%);box-shadow:-2px 3px 0 #3e382d,-5px 6px 0 #111b26,4px 20px 30px #0005;overflow:hidden}
.service-art .sa-browser-back{transform:translate(31px,-30px) translateZ(-44px);opacity:.34;border-color:#e0bf8177;background:#d9b77708}.service-art .sa-browser-mid{transform:translate(16px,-15px) translateZ(-22px);opacity:.55}.service-art .sa-browser-front{transform:translateZ(22px);border-color:#d2b37a;box-shadow:-2px 3px 0 #8c7145,-5px 6px 0 #253040,8px 22px 35px #0006}
.service-art .sa-browser-chrome{height:24px;border-bottom:1px solid #d9b77729;display:flex;align-items:center;gap:5px;padding:0 10px}.service-art .sa-browser-chrome>i{width:3px;height:3px;border-radius:50%;background:#d9b777a6}.service-art .sa-browser-chrome>span{height:3px;width:59px;background:#7b858b40;border-radius:4px;margin-left:auto}
.service-art .sa-browser-picture{position:absolute;left:11px;right:11px;top:35px;height:78px;background:linear-gradient(140deg,#28392f,#121f29);overflow:hidden;border-radius:2px}.service-art .sa-browser-sun{position:absolute;left:91px;top:9px;width:57px;height:57px;border-radius:50%;background:linear-gradient(140deg,#f3dca5,#c29b57 50%,#594c31);box-shadow:0 0 27px #d9b77718}.service-art .sa-browser-horizon{position:absolute;width:250px;height:100px;left:-15px;top:43px;border:1px solid #c4a469;border-radius:50%;background:linear-gradient(#14232b,#070f1a);transform:rotate(-16deg)}
.service-art .sa-browser-scan{position:absolute;top:-25px;bottom:-25px;width:35px;background:linear-gradient(90deg,transparent,#fff0b41f,transparent);transform:translateX(-45px) skewX(-20deg);animation:sa-scan 4.8s ease-in-out infinite}.service-art .sa-browser-lines{position:absolute;bottom:14px;left:12px;right:12px;display:flex;gap:12px}.service-art .sa-browser-lines i{height:3px;width:60px;border-radius:3px;background:#c7ae7b66}.service-art .sa-browser-lines i:last-child{width:32px;background:#8995914d}
.service-art .sa-browser-corner{position:absolute;width:25px;height:25px;border-top:2px solid #eed59e;border-right:2px solid #eed59e;left:257px;top:27px;transform:translateZ(35px);animation:sa-corner 4s ease-in-out infinite}
.service-art .sa-web-track{--sa-track-travel:212px;position:absolute;left:59px;right:38px;bottom:26px;height:1px;background:linear-gradient(90deg,transparent,#c4a96c44,transparent);transform:rotate(-8deg)}.service-art .sa-web-track i{position:absolute;width:5px;height:5px;top:-2px;border-radius:50%;background:#efd7a0;box-shadow:0 0 14px #e5c58d66;animation:sa-track 5s ease-in-out infinite}
/* Agents: solid six-face core, three tilted orbital circuits, moving nodes. */
.service-art .sa-network{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-8deg) rotateZ(-14deg)}
.service-art .sa-network-orbit{position:absolute;left:48px;top:18px;width:224px;height:224px;border:1px solid #d9b7778c;border-radius:50%;box-shadow:inset 0 0 0 2px #d9b77708,0 0 0 3px #d9b77706;transform-style:preserve-3d}
.service-art .sa-network-orbit-a{transform:rotateY(62deg) rotateX(17deg)}.service-art .sa-network-orbit-b{transform:rotateY(-56deg) rotateX(-25deg);border-color:#a98e5a8c}.service-art .sa-network-orbit-c{transform:rotateX(70deg) rotateY(12deg);border-width:2px;border-color:#d9b77765}
.service-art .sa-orbit-traveler{position:absolute;inset:0;animation:sa-spin 13s linear infinite;transform-style:preserve-3d}.service-art .sa-orbit-traveler i{position:absolute;left:calc(50% - 7px);top:-7px;width:14px;height:14px;background:radial-gradient(circle at 30% 25%,#fff1c5,#c3a066 48%,#514126);border-radius:50%;box-shadow:0 0 15px #e8c98730}.service-art .sa-network-orbit-b .sa-orbit-traveler{animation-duration:17s;animation-direction:reverse;animation-delay:-7s}.service-art .sa-network-orbit-c .sa-orbit-traveler{animation-duration:21s;animation-delay:-5s}
.service-art .sa-core-halo{position:absolute;inset:60px 90px;background:radial-gradient(circle,#d9b77718,transparent 70%);filter:blur(9px)}
.service-art .sa-cube{position:absolute;left:124px;top:94px;width:72px;height:72px;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-34deg);animation:sa-cube-turn 20s linear infinite}.service-art .sa-cube-face{position:absolute;inset:0;border:1px solid #f6dca68c;background:linear-gradient(140deg,#f2d798,#b68d4b 47%,#715a35);box-shadow:inset 0 0 12px #f5d99e24}.service-art .sa-cube-front{transform:translateZ(36px)}.service-art .sa-cube-back{transform:rotateY(180deg) translateZ(36px)}.service-art .sa-cube-right{transform:rotateY(90deg) translateZ(36px);background:linear-gradient(150deg,#9a793f,#d4b675 60%,#67542e)}.service-art .sa-cube-left{transform:rotateY(-90deg) translateZ(36px)}.service-art .sa-cube-top{transform:rotateX(90deg) translateZ(36px);background:linear-gradient(135deg,#f6e2b4,#d2ad69)}.service-art .sa-cube-bottom{transform:rotateX(-90deg) translateZ(36px);background:#8d6c39}
.service-art .sa-network-node{position:absolute;width:7px;height:7px;border-radius:50%;background:#eed39a;box-shadow:0 0 14px #e4bb6f80;animation:sa-node-pulse 3.4s ease-in-out infinite}.service-art .sa-network-node-a{left:47px;top:110px}.service-art .sa-network-node-b{right:45px;bottom:76px;animation-delay:-1.8s}
/* Courses: dimensional lesson deck, gold illustration, sculptural play button. */
.service-art .sa-lessons{position:absolute;inset:0;transform:rotateX(12deg) rotateY(-18deg) rotateZ(-12deg);animation-delay:-2s}
.service-art .sa-lesson{position:absolute;left:65px;top:41px;width:166px;height:184px;border-radius:6px;border:1px solid #d8b77b88;background:linear-gradient(140deg,#1d2c3c,#0b1521);box-shadow:-2px 3px 0 #675437,6px 18px 25px #0005}.service-art .sa-lesson-back{transform:translate(27px,-24px) translateZ(-38px);background:linear-gradient(140deg,#bd9c61,#5c4d35);opacity:.5}.service-art .sa-lesson-mid{transform:translate(14px,-12px) translateZ(-19px);opacity:.8}.service-art .sa-lesson-front{transform:translateZ(18px);padding:15px}
.service-art .sa-lesson-art{height:88px;position:relative;overflow:hidden;background:linear-gradient(135deg,#d8b67a,#ad8749);border-radius:2px;box-shadow:inset 0 1px 0 #f7e6c3}.service-art .sa-lesson-art i{position:absolute;width:79px;height:79px;border:1px solid #f9e7bf91;border-radius:50%;left:21px;top:28px}.service-art .sa-lesson-art i:nth-child(2){left:42px;top:6px;border-width:7px;border-color:#243038c4}.service-art .sa-lesson-art i:nth-child(3){left:62px;top:27px;border-color:#664a258c}
.service-art .sa-lesson-lines{margin-top:18px;display:grid;gap:7px}.service-art .sa-lesson-lines i{height:3px;width:100%;background:#a7a79545;border-radius:2px}.service-art .sa-lesson-lines i:first-child{width:73%;background:#e0c48e8c}.service-art .sa-lesson-lines i:last-child{width:47%}.service-art .sa-lesson-progress{height:2px;margin-top:15px;background:#c9b18a22;overflow:hidden}.service-art .sa-lesson-progress i{width:38%;height:100%;background:#ead19c;animation:sa-progress 6s ease-in-out infinite}
.service-art .sa-play-medallion{position:absolute;right:37px;top:133px;width:70px;height:70px;border-radius:50%;background:linear-gradient(145deg,#1c2c3b,#080f19);border:1px solid #d4b476;box-shadow:-2px 3px 0 #7f6338,4px 12px 22px #0007;transform:translateZ(65px);animation:sa-play-breathe 5s ease-in-out infinite}.service-art .sa-play-medallion svg{width:45px;height:49px;margin:8px 0 0 14px}
.service-art .sa-course-track{position:absolute;display:flex;gap:11px;bottom:10px;left:100px;transform:rotate(-12deg)}.service-art .sa-course-step{width:5px;height:5px;border-radius:50%;background:#c6a66b;animation:sa-step 4s ease-in-out infinite;animation-delay:calc(var(--i)*.35s)}
/* Video: floating physical film frame, sequenced waveform and traveling playhead. */
.service-art .sa-film{position:absolute;width:153px;height:220px;left:88px;top:20px;border:1px solid #d5b77c;border-radius:7px;background:linear-gradient(120deg,#263444,#111b28);box-shadow:-3px 3px 0 #92713e,-6px 6px 0 #263343,8px 22px 35px #0005;transform:rotateX(5deg) rotateY(22deg) rotateZ(-8deg);animation-delay:-1s}
.service-art .sa-film-back{position:absolute;left:64px;top:26px;width:138px;height:204px;border:1px solid #c1a36b44;border-radius:6px;transform:rotateY(22deg) rotateZ(-19deg);background:linear-gradient(135deg,#d7b16b0a,#101d29)}
.service-art .sa-film-perforations{position:absolute;top:12px;bottom:12px;display:flex;flex-direction:column;justify-content:space-between}.service-art .sa-film-left{left:6px}.service-art .sa-film-right{right:6px}.service-art .sa-film-hole{width:6px;height:10px;border-radius:1px;border:1px solid #d4b77b33;background:#061019;box-shadow:inset 0 1px 2px #0009}
.service-art .sa-film-screen{position:absolute;left:20px;right:20px;top:16px;bottom:31px;background:linear-gradient(150deg,#1e2c2e,#080f19);overflow:hidden;border-radius:2px;border:1px solid #a28c6140}.service-art .sa-film-glow{position:absolute;inset:20px -20px;background:radial-gradient(ellipse,#d9b77720,transparent 65%);filter:blur(10px)}
.service-art .sa-waveform{position:absolute;inset:32px 11px;display:flex;gap:3px;align-items:center;justify-content:center;transform:translateZ(10px)}.service-art .sa-wave-bar{width:4px;height:36px;min-height:22px;border-radius:4px;background:linear-gradient(#f8e2ae,#c8a366 55%,#795d32);box-shadow:0 0 7px #e0bd781a;transform-origin:center;animation:sa-wave 1.7s ease-in-out infinite;animation-delay:calc(var(--i)*-.17s)}
.service-art .sa-wave-bar:nth-child(3n){height:68px}.service-art .sa-wave-bar:nth-child(3n + 1){height:45px}.service-art .sa-wave-bar:nth-child(5n){height:94px}
.service-art .sa-film-scan{position:absolute;left:0;right:0;top:0;height:21px;background:linear-gradient(transparent,#ead4a11f,transparent);animation:sa-film-scan 5s ease-in-out infinite}.service-art .sa-film-bracket{position:absolute;width:10px;height:10px;border-color:#d4bc886b;border-style:solid}.service-art .sa-film-bracket-a{top:9px;left:9px;border-width:1px 0 0 1px}.service-art .sa-film-bracket-b{bottom:9px;right:9px;border-width:0 1px 1px 0}
.service-art .sa-film-timeline{--sa-track-travel:104px;position:absolute;left:22px;right:22px;bottom:15px;height:2px;background:#d9b77740}.service-art .sa-film-timeline i{position:absolute;width:4px;height:8px;top:-3px;background:#f1d69d;box-shadow:0 0 9px #e7bf6866;animation:sa-track 5s ease-in-out infinite}
.service-art .sa-film-orbit{position:absolute;left:30px;top:102px;width:260px;height:79px;border:1px solid #d9b77733;border-radius:50%;transform:rotate(-24deg)}.service-art .sa-film-orbit i{position:absolute;left:14px;top:6px;width:7px;height:7px;border-radius:50%;background:#e6c98e;box-shadow:0 0 13px #d9b77755;animation:sa-node-pulse 4s ease-in-out infinite}
/* Launch: rising dimensional stack and a solid beveled arrow, no font glyph. */
.service-art .sa-launch-stack{position:absolute;left:54px;top:95px;width:142px;height:142px;transform-style:preserve-3d;transform:rotateX(60deg) rotateZ(-34deg)}
.service-art .sa-launch-layer{position:absolute;inset:0;border-radius:8px;border:1px solid #d7b778;box-shadow:-3px 3px 0 #59492f,-6px 6px 0 #111c28;background:linear-gradient(130deg,#304254,#0b1623);transform:translateZ(0)}.service-art .sa-launch-layer-a{transform:translateZ(-43px);opacity:.35}.service-art .sa-launch-layer-b{transform:translateZ(-20px);opacity:.55}.service-art .sa-launch-layer-c{transform:translateZ(3px);opacity:.85}.service-art .sa-launch-layer-d{background:linear-gradient(130deg,#f1dba8,#c3a064 55%,#80663d);border-color:#f5dfb3;transform:translateZ(29px);animation:sa-launch-lift 5s ease-in-out infinite;box-shadow:-3px 3px 0 #80613b,-6px 6px 0 #a3834d,0 15px 25px #0003}
.service-art .sa-launch-arc{position:absolute;inset:0}.service-art .sa-flight-path{animation:sa-path 6s linear infinite}.service-art .sa-launch-arrow{position:absolute;left:139px;top:13px;width:112px;height:135px;transform:rotateY(-16deg) rotateZ(-5deg) translateZ(55px);filter:drop-shadow(5px 15px 13px #0007);animation:sa-arrow-rise 5s ease-in-out infinite}
/* One on one: intertwined physical rings, synchronized points and flowing connection. */
.service-art .sa-dialogue{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(7deg) rotateZ(-14deg)}
.service-art .sa-dialogue-ring{position:absolute;top:53px;width:154px;height:154px;border-radius:50%;border:10px solid #c5a367;box-shadow:inset 1px 2px 1px #f4dfac,inset -3px -3px 2px #6c522c,2px 3px 0 #e7cb92,-3px -2px 0 #675131,7px 16px 20px #0004;background:transparent;transform-style:preserve-3d}
.service-art .sa-dialogue-ring-a{left:35px;transform:rotateY(36deg);animation:sa-dialogue-a 8s ease-in-out infinite}.service-art .sa-dialogue-ring-b{right:30px;transform:rotateY(-36deg) translateZ(16px);border-color:#ddc28d;animation:sa-dialogue-b 8s ease-in-out infinite}
.service-art .sa-dialogue-traveler{position:absolute;inset:-6px;animation:sa-spin 14s linear infinite;transform-style:preserve-3d}.service-art .sa-dialogue-traveler i{position:absolute;left:50%;top:-3px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#f8e6b6,#bc9856 48%,#544428);box-shadow:0 2px 6px #0005;transform:translateZ(9px)}.service-art .sa-dialogue-ring-b .sa-dialogue-traveler{animation-direction:reverse;animation-delay:-4s}
.service-art .sa-dialogue-core{position:absolute;top:118px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 25% 20%,#e9d29f,#b18b4f 45%,#4c402d 78%);box-shadow:0 0 25px #d3b16a20;transform:translateZ(35px)}.service-art .sa-dialogue-core-a{left:99px}.service-art .sa-dialogue-core-b{right:91px}
.service-art .sa-connection{position:absolute;left:119px;top:128px;width:87px;height:1px;background:#c8ac7355;transform:translateZ(35px)}.service-art .sa-connection i{position:absolute;top:-2px;left:0;width:4px;height:4px;border-radius:50%;background:#f4dcaa;box-shadow:0 0 7px #e3c28166;animation:sa-connection 3.7s ease-in-out infinite}.service-art .sa-connection i:nth-child(2){animation-delay:-1.2s}.service-art .sa-connection i:nth-child(3){animation-delay:-2.4s}
.service-art .sa-dialogue-pulse{position:absolute;top:108px;width:42px;height:42px;border:1px solid #d7b77b66;border-radius:50%;transform:translateZ(35px);animation:sa-pulse-ring 3.7s ease-out infinite}.service-art .sa-dialogue-pulse-a{left:89px}.service-art .sa-dialogue-pulse-b{right:81px;animation-delay:-1.85s}
/* Motion always starts paused until visibility is known. */
.service-art.is-visible[data-paused="false"] .sa-camera{will-change:transform}
.service-art *, .service-art *::before, .service-art *::after{animation-play-state:paused}
.service-art.is-visible[data-paused="false"] *, .service-art.is-visible[data-paused="false"] *::before, .service-art.is-visible[data-paused="false"] *::after{animation-play-state:running}
.motion-paused .service-art *, .motion-paused .service-art *::before, .motion-paused .service-art *::after{animation-play-state:paused!important}
.service-art[data-paused="true"] .sa-camera{transition:none}
@keyframes sa-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes sa-scan{0%,15%{transform:translateX(-45px) skewX(-20deg)}65%,100%{transform:translateX(235px) skewX(-20deg)}}
@keyframes sa-corner{0%,100%{opacity:.35;translate:0 0}50%{opacity:.95;translate:5px -4px}}
@keyframes sa-track{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(var(--sa-track-travel));opacity:1}}
@keyframes sa-spin{to{rotate:360deg}}
@keyframes sa-cube-turn{from{transform:rotateX(-22deg) rotateY(-34deg)}to{transform:rotateX(-22deg) rotateY(326deg)}}
@keyframes sa-node-pulse{0%,100%{opacity:.35;scale:.8}50%{opacity:1;scale:1.25}}
@keyframes sa-progress{0%,100%{translate:-90% 0}50%{translate:170% 0}}
@keyframes sa-play-breathe{0%,100%{translate:0 0}50%{translate:3px -6px}}
@keyframes sa-step{0%,100%{opacity:.25}45%{opacity:1;box-shadow:0 0 10px #d9b77755}}
@keyframes sa-wave{0%,100%{scale:1 .35}45%{scale:1 1}70%{scale:1 .55}}
@keyframes sa-film-scan{0%,100%{translate:0 -25px;opacity:0}25%{opacity:1}75%{translate:0 180px;opacity:0}}
@keyframes sa-launch-lift{0%,100%{transform:translateZ(29px)}50%{transform:translateZ(47px)}}
@keyframes sa-path{to{stroke-dashoffset:-104}}
@keyframes sa-arrow-rise{0%,100%{translate:0 2px}50%{translate:4px -9px}}
@keyframes sa-dialogue-a{0%,100%{transform:rotateY(36deg)}50%{transform:rotateY(49deg)}}
@keyframes sa-dialogue-b{0%,100%{transform:rotateY(-36deg) translateZ(16px)}50%{transform:rotateY(-24deg) translateZ(16px)}}
@keyframes sa-connection{0%{translate:0 0;opacity:0}15%,85%{opacity:1}100%{translate:85px 0;opacity:0}}
@keyframes sa-pulse-ring{0%{scale:.5;opacity:.8}100%{scale:1.65;opacity:0}}
@media(max-width:760px){.service-detail-aside:has(>.service-art){display:flex;flex-direction:column;align-items:flex-start}.service-art{width:min(100%,320px);margin:19px auto 4px;aspect-ratio:1.3}.service-art .sa-guides{opacity:.25}}
@media(prefers-reduced-motion:reduce){.service-art{--sa-rx:0deg!important;--sa-ry:0deg!important;--sa-px:0px!important;--sa-py:0px!important;--sa-scroll:0deg!important}.service-art *, .service-art *::before, .service-art *::after{animation-play-state:paused!important;transition:none!important}}
