.sj{--ink:#243640;--paper:#f7f5ee;--accent:#466e81;--content-width:1240px}.sj .sj-prologue{padding:30px 0 25px;background:#e7ecea}.sj .sj-prologue>.bound{position:relative}.sj .sj-before{height:195px;position:relative;overflow:hidden;width:73%;margin:0 auto}.sj .sj-before img{object-position:50% 56%;animation:sjBefore 7s ease-in-out infinite alternate}.sj .sj-prologue header{text-align:center;padding:30px 0 35px;position:relative}.sj .sj-prologue header:before,.sj .sj-prologue header:after{content:"";width:18%;height:1px;background:#73919a;position:absolute;top:48%;animation:sjMeet 7s ease-in-out infinite}.sj .sj-prologue header:before{left:0;transform-origin:left}.sj .sj-prologue header:after{right:0;transform-origin:right}.sj .sj-prologue h1 span{font-size:40px;line-height:1.45;margin:12px 0 18px}.sj .sj-prologue header>p:not(.eyebrow){font-size:15px;color:#5a6c70}.sj .sj-prologue .eyebrow{margin-bottom:12px}.sj .sj-after{height:230px;position:relative;overflow:hidden;width:86%;margin:0 auto}.sj .sj-after img{object-position:50% 62%;animation:sjAfter 7s ease-in-out infinite alternate}.sj .sj-prologue-foot{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-top:22px}.sj .sj-prologue-foot p{font-size:12px;color:#667c82}.sj .sj-story{padding:75px 0}.sj .sj-journal{display:grid;grid-template-columns:.95fr .85fr 1.1fr;gap:50px 40px;position:relative}.sj .sj-journal figure{position:relative;overflow:hidden}.sj .sj-discuss{grid-column:1;height:375px}.sj .sj-discuss img{object-position:38% center}.sj .sj-story-copy{grid-column:2/4;padding:20px 70px 0 20px;border-left:1px solid #b2c2bf}.sj .sj-story-copy h2{font-size:32px}.sj .sj-story-copy p:not(.eyebrow){font-size:16px;color:#5d6b6c;margin-top:24px}.sj .sj-account{grid-column:1/3;display:grid;grid-template-columns:1fr .9fr;gap:26px;align-items:center;background:#e8edeb;padding:25px}.sj .sj-account figure{height:350px}.sj .sj-account img{object-position:42% center}.sj .sj-account .eyebrow{font-size:12px;margin-bottom:12px}.sj .sj-account h3{font-size:23px}.sj .sj-account p:last-child{font-size:14px;margin-top:18px;color:#627270}.sj .sj-public{grid-column:3;padding-right:35px;padding-top:70px}.sj .sj-public figure{height:240px;margin-bottom:25px}.sj .sj-public h3{font-size:23px;line-height:1.6}.sj .sj-public p{font-size:14px;color:#627270;margin-top:16px}.sj .sj-roles{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.15fr;gap:100px;padding-top:25px;border-top:1px solid #9cafad;position:relative}.sj .sj-roles:after{content:"";position:absolute;left:0;top:0;height:3px;width:42%;background:#466e81;transform-origin:left;transform:scaleX(0);transition:transform 2.5s}.sj .sj-story[data-seen] .sj-roles:after{transform:scaleX(1)}.sj .sj-roles>div{padding-right:65px}.sj .sj-roles h2{font-size:29px}.sj .sj-roles details{padding:17px 0}.sj .sj-roles summary{font-size:17px}.sj .sj-roles p{font-size:14px;opacity:1;color:#5d6b6c}.sj .sj-agreement{background:#304c58;color:#eef3ed;padding:60px 0}.sj .sj-handover{display:grid;grid-template-columns:1.15fr 1fr;gap:65px;align-items:center}.sj .sj-handover figure{height:490px;position:relative;overflow:hidden}.sj .sj-handover figure:after{content:"";position:absolute;left:10%;right:10%;top:50%;height:2px;background:#e7e7bb;transform-origin:left;animation:sjMeet 6s ease-in-out infinite}.sj .sj-cost{padding-right:65px}.sj .sj-cost h2{font-size:29px;margin-bottom:25px}.sj .price-terms dd{font-size:28px}.sj .price-terms>p:last-of-type{font-size:12px;opacity:1;color:#cbd9d6}.sj .sj-contact{padding:20px 0 0;display:flex;gap:60px;align-items:center;justify-content:space-between}.sj .sj-contact h3{font-size:23px}.sj .sj-contact p{font-size:14px;max-width:500px;padding-right:65px}.sj .aux-reference>div{grid-template-columns:1fr}.sj .aux-reference a{border-top:2px solid #466e81;background:#e5ece9}@keyframes sjBefore{from{transform:scale(1.04) translateY(-8px)}to{transform:scale(1) translateY(0)}}@keyframes sjAfter{from{transform:scale(1.04) translateY(8px)}to{transform:scale(1) translateY(0)}}@keyframes sjMeet{0%,10%{transform:scaleX(.1)}75%,100%{transform:scaleX(1)}}@media(max-width:900px){.sj .sj-journal{gap:30px}.sj .sj-story-copy{padding-right:30px}.sj .sj-account{grid-template-columns:1fr;padding:20px}.sj .sj-account figure{height:230px}.sj .sj-public{padding-right:30px}.sj .sj-roles{gap:35px}.sj .sj-handover{gap:35px}.sj .sj-cost{padding-right:45px}.sj .sj-prologue header:before,.sj .sj-prologue header:after{width:10%}}@media(max-width:680px){.sj .sj-prologue{padding-top:18px}.sj .sj-before{height:140px;width:83%;margin-left:0}.sj .sj-before img{animation:none;object-position:50% center}.sj .sj-prologue header{padding:25px 0}.sj .sj-prologue h1 span{font-size:29px}.sj .sj-prologue header>p:not(.eyebrow){font-size:13px}.sj .sj-prologue header:before,.sj .sj-prologue header:after{display:none}.sj .sj-after{height:175px;width:90%;margin-right:0}.sj .sj-after img{animation:none}.sj .sj-prologue-foot{display:block;margin-top:18px}.sj .sj-prologue-foot .motion{margin-top:12px}.sj .sj-story{padding:40px 0}.sj .sj-journal{display:flex;flex-direction:column;gap:28px}.sj .sj-discuss{height:245px;width:85%;align-self:flex-start}.sj .sj-story-copy{padding:0 45px 0 18px}.sj .sj-story-copy h2{font-size:25px}.sj .sj-story-copy p:not(.eyebrow){font-size:14px;margin-top:18px}.sj .sj-account{display:grid;grid-template-columns:105px 1fr;gap:17px;padding:18px 45px 18px 14px}.sj .sj-account figure{height:290px}.sj .sj-account h3{font-size:21px}.sj .sj-account p:last-child{font-size:13px}.sj .sj-public{padding:0 45px 0 0}.sj .sj-public figure{height:240px}.sj .sj-public h3{font-size:23px}.sj .sj-roles{display:block;padding-top:25px}.sj .sj-roles h2{font-size:25px}.sj .sj-roles>div{padding-right:45px;margin-top:20px}.sj .sj-roles summary{font-size:16px}.sj .sj-agreement{padding:35px 0}.sj .sj-handover{display:block}.sj .sj-handover figure{height:240px;margin-bottom:25px}.sj .sj-cost{padding-right:60px}.sj .sj-cost h2{font-size:26px}.sj .sj-contact{display:block;padding-top:10px}.sj .sj-contact h3{font-size:21px}.sj .sj-contact p{margin-top:15px;padding-right:45px}}

/* Keep decorative connection lines under the same pause and offscreen controls. */
.sj.motion-paused *::before,.sj.motion-paused *::after,.sj [data-live="false"] *::before,.sj [data-live="false"] *::after{animation-play-state:paused!important}

/* Phase 2: semantic title boundaries and local composition at narrow widths. */
@media(max-width:680px){.sj .sj-account{grid-template-columns:88px minmax(0,1fr);gap:16px;padding:18px 18px 18px 14px}}

/* Pause the section pseudo-element itself as well as descendants. */
.sj [data-live="false"]::before,.sj [data-live="false"]::after{animation-play-state:paused!important}

/* Mobile collaboration connection: converging lines between the two business scenes. */
@media(max-width:680px){.sj .sj-prologue header{padding-bottom:34px}.sj .sj-prologue header:before,.sj .sj-prologue header:after{display:block;top:auto;bottom:12px;width:43%;height:2px}.sj .sj-prologue header:before{left:0}.sj .sj-prologue header:after{right:0}}

/* Phase3 mobile art direction: business information is handed across clear responsibilities. */
.sj-mobile-handoff,.sj-paper-bundle,.sj-half-a,.sj-half-b{display:none}
@media(max-width:680px){
.sj.mobile-art .sj-prologue>.bound>.sj-before,.sj.mobile-art .sj-prologue>.bound>.sj-after{display:none}
.sj.mobile-art .sj-prologue header{padding:12px 0 24px;text-align:left}
.sj.mobile-art .sj-prologue header:before,.sj.mobile-art .sj-prologue header:after{display:none}
.sj.mobile-art .sj-mobile-handoff{display:block}
.sj.mobile-art .sj-handoff-scene{height:282px;position:relative;overflow:hidden;background:#d1dbd7}
.sj.mobile-art .sj-handoff-scene figure{position:absolute;height:100%;overflow:hidden}
.sj.mobile-art .sj-team-left{left:0;width:57%;clip-path:polygon(0 0,100% 0,80% 100%,0 100%);animation:sjTeamLeft 7.5s both}
.sj.mobile-art .sj-team-left img{object-position:35% center}
.sj.mobile-art .sj-team-right{right:0;width:55%;clip-path:polygon(21% 0,100% 0,100% 100%,0 100%);animation:sjTeamRight 7.5s both}
.sj.mobile-art .sj-team-right img{object-position:58% center}
.sj.mobile-art .sj-pass{position:absolute;top:43%;left:12%;width:106px;height:92px;padding:12px;background:#faf7eb;color:#304c58;border:1px solid #b6bbb0;box-shadow:0 8px 18px #293f3e30;animation:sjBusinessPass 7.5s cubic-bezier(.2,.65,.25,1) both;transform-origin:bottom left}
.sj.mobile-art .sj-pass span{font-size:13px;display:block}.sj.mobile-art .sj-pass b{font-size:13px;font-weight:400;color:#71867d;display:block;margin-top:6px}
.sj.mobile-art .sj-pass i{display:block;border-top:1px solid #b5c0b7;margin-top:6px;width:80%}.sj.mobile-art .sj-pass i+i{width:55%}
.sj.mobile-art .sj-handoff-caption{font-size:13px;color:#526b6c;margin-top:10px}
.sj.mobile-art .sj-handoff-replay{display:inline-block;margin-top:10px;font:inherit;font-size:13px;border:1px solid #8ba0a0;color:#304c58;padding:7px 12px;background:transparent;cursor:pointer}
.sj.mobile-art .sj-discuss[data-motion-entered] img{animation:sjDiscussionOpen 2.5s cubic-bezier(.2,.7,.2,1) both}
.sj.mobile-art .sj-account{display:block;padding:18px}
.sj.mobile-art .sj-account figure{height:235px;position:relative;margin-bottom:22px}
.sj.mobile-art .sj-account>div{padding-right:12px}.sj.mobile-art .sj-account h3{font-size:23px}
.sj.mobile-art .sj-paper-bundle{display:block;position:absolute;inset:0;pointer-events:none}
.sj.mobile-art .sj-paper-bundle span{position:absolute;left:12px;bottom:38px;background:#f8f4e8;width:74px;height:90px;padding:10px;color:#415d64;font-size:13px;box-shadow:0 5px 12px #20394424;border:1px solid #c5c6b9}
.sj.mobile-art .sj-paper-bundle span i{display:block;border-top:1px solid #adbbb4;margin-top:10px;width:90%}
.sj.mobile-art .sj-account figure[data-motion-entered] .sj-paper-bundle span{animation:sjRecordsGather 3.5s cubic-bezier(.2,.7,.2,1) both}
.sj.mobile-art .sj-paper-bundle span:nth-child(2){left:25px;bottom:45px;animation-delay:.35s!important}
.sj.mobile-art .sj-paper-bundle span:nth-child(3){left:38px;bottom:52px;animation-delay:.7s!important}
.sj.mobile-art .sj-public figure[data-motion-entered] img{animation:sjShowOpen 2.6s cubic-bezier(.2,.7,.2,1) both}
.sj.mobile-art .sj-handover figure{position:relative;overflow:hidden}
.sj.mobile-art .sj-handover figure>img:first-child{visibility:hidden}
.sj.mobile-art .sj-half-a,.sj.mobile-art .sj-half-b{display:block;position:absolute;inset:0;height:100%;width:100%;object-fit:cover}
.sj.mobile-art .sj-half-a{clip-path:polygon(0 0,55.3% 0,45.3% 100%,0 100%)}
.sj.mobile-art .sj-half-b{clip-path:polygon(55% 0,100% 0,100% 100%,45% 100%)}
.sj.mobile-art .sj-handover figure[data-motion-entered] .sj-half-a{animation:sjJoinLeft 2.8s cubic-bezier(.2,.7,.2,1) both}
.sj.mobile-art .sj-handover figure[data-motion-entered] .sj-half-b{animation:sjJoinRight 2.8s cubic-bezier(.2,.7,.2,1) both}
.sj.mobile-art .sj-handover figure:after{display:none}
.sj.mobile-art .sj-handover figcaption{z-index:2}
.sj.mobile-art [data-motion-visible=false],.sj.mobile-art [data-motion-visible=false] *{animation-play-state:paused!important}
}
@keyframes sjTeamLeft{0%{transform:translateX(-70%)}18%,100%{transform:none}}
@keyframes sjTeamRight{0%,10%{transform:translateX(70%)}30%,100%{transform:none}}
@keyframes sjBusinessPass{0%,22%{transform:translate(-65px,45px) rotate(-18deg)}38%{transform:translate(0,-28px) rotate(-6deg)}72%,100%{transform:translate(116px,10px) rotate(5deg)}}
@keyframes sjDiscussionOpen{from{clip-path:polygon(0 0,20% 0,0 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@keyframes sjRecordsGather{0%{transform:translate(-20px,15px) rotate(-18deg)}55%{transform:translate(88px,-55px) rotate(6deg)}100%{transform:translate(125px,-20px) rotate(0);opacity:0}}
@keyframes sjShowOpen{from{clip-path:inset(0 0 0 64%)}to{clip-path:inset(0)}}
@keyframes sjJoinLeft{from{transform:translateX(-30%) rotate(-10deg)}to{transform:none}}
@keyframes sjJoinRight{from{transform:translateX(30%) rotate(10deg)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.sj.mobile-art .sj-pass{transform:translate(116px,10px) rotate(5deg)}.sj.mobile-art .sj-paper-bundle{display:none}.sj.mobile-art .sj-discuss img,.sj.mobile-art .sj-public img,.sj.mobile-art .sj-half-a,.sj.mobile-art .sj-half-b{transform:none;clip-path:inherit}.sj.mobile-art .sj-discuss img,.sj.mobile-art .sj-public img{clip-path:inset(0)}}