/* Shared CRM motion scene scoped above the work page reset. */
#gs-portfolio .method-frame-crm{background: #24323a;}
#gs-portfolio .crm-sequence{position: relative; isolation: isolate; width: 100%; height: 100%; overflow: hidden; color: #ede5d7; background: radial-gradient(ellipse at 85% 45%,#58615a44,transparent 67%),#24323a;}
#gs-portfolio .crm-sequence::before{content: ''; position: absolute; width: 75%; aspect-ratio: 1; left: 38%; top: 0; border: 1px solid #b1b9a415; border-radius: 50%; pointer-events: none;}
#gs-portfolio .crm-sequence::after{content: ''; position: absolute; width: 65%; aspect-ratio: 1; left: 43%; top: 7%; border: 1px solid #b1b9a412; border-radius: 50%; pointer-events: none; z-index: -1;}
#gs-portfolio .crm-sequence-top{position: absolute; left: 25px; right: 25px; top: 22px; display: flex; justify-content: space-between; align-items: center; font: 8px/1.5 var(--mono); letter-spacing: .04em; color: #b6b9a8;}
#gs-portfolio .crm-live-mark{color: #c89878; font-size: 7px;}
#gs-portfolio .crm-sequence-heading{position: absolute; top: 58px; left: 25px; font-size: clamp(26px,2.65vw,43px); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; z-index: 5; pointer-events: none;}
#gs-portfolio .crm-sequence-heading em{font-style: normal; color: #c9a889;}
#gs-portfolio .crm-context-label{position: absolute; top: 35%; left: 25px; font: 6px/1.5 var(--mono); color: #98aa9f; letter-spacing: .04em;}
#gs-portfolio .crm-contexts{position: absolute; top: 40%; left: 25px; width: 31%; display: flex; flex-direction: column; gap: 10px; z-index: 5;}
#gs-portfolio .crm-contexts>button{position: relative; display: grid; grid-template-columns: 17px 1fr; gap: 2px 9px; text-align: left; min-height: 48px; padding: 9px 11px; background: #31434a; color: #c8d1c4; border: 1px solid #9cae9e2a; transition: background .3s,border-color .3s,transform .3s;}
#gs-portfolio .crm-contexts>button>span{font: 7px/1.5 var(--mono); color: #859d90; grid-row: 1/3; padding-top: 3px;}
#gs-portfolio .crm-contexts strong{font: 400 14px/1.2 var(--sans); letter-spacing: -.02em;}
#gs-portfolio .crm-contexts small{font: 9px/1.3 var(--sans); color: #9eafa1;}
#gs-portfolio .crm-contexts>button[aria-pressed=true]{background: #c0a185; color: #283a3b; border-color: #d8b798; transform: translateX(4px);}
#gs-portfolio .crm-contexts>button[aria-pressed=true]>span{color: #76634d;}
#gs-portfolio .crm-contexts>button[aria-pressed=true]>small{color: #5f6555;}
#gs-portfolio .crm-contexts>button:hover{border-color: #c9b89a80;}
#gs-portfolio .crm-contexts>button:focus-visible,#gs-portfolio .crm-sequence-replay:focus-visible{outline: 2px solid #dfb38a; outline-offset: 4px;}
#gs-portfolio .crm-connection-lines{position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;}
#gs-portfolio .crm-line-base{stroke: #a1b59e35; stroke-width: 1;}
#gs-portfolio .crm-line-active{stroke: #d5b38d; stroke-width: 1.7; stroke-dasharray: 1; stroke-dashoffset: 0;}
#gs-portfolio .crm-connection-dot{fill: #d5b38d;}
#gs-portfolio .crm-envelope{position: absolute; top: 47%; left: 51%; width: 44%; height: 32%; transform: rotate(5deg); pointer-events: none; z-index: 2;}
#gs-portfolio .crm-envelope-back{position: absolute; inset: 0; background: #a57659; box-shadow: 0 18px 24px #101d2640;}
#gs-portfolio .crm-envelope-back::before{content: ''; position: absolute; inset: -49% 0 0; background: #bc9473; clip-path: polygon(0 34%,50% 0,100% 34%,100% 100%,0 100%);}
#gs-portfolio .crm-envelope-front{position: absolute; inset: 0; background: #ad8160; clip-path: polygon(0 0,50% 56%,100% 0,100% 100%,0 100%); filter: drop-shadow(0 -2px 2px #473c301f); z-index: 4;}
#gs-portfolio .crm-envelope-front::after{content: ''; position: absolute; inset: 0; background: #bc9371; clip-path: polygon(0 100%,50% 38%,100% 100%);}
#gs-portfolio .crm-letter{position: absolute; top: 33%; left: 49%; width: 44%; height: 43%; z-index: 3; background: #f3ecde; color: #3a443e; box-shadow: 0 18px 35px #0d1b233d; transform: rotate(-5deg); transform-origin: 50% 100%; overflow: hidden;}
#gs-portfolio .crm-letter-head{display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #c2bca950; font: 7px/1.5 var(--mono); color: #96856d;}
#gs-portfolio .crm-letter-head>span:last-child{font: 17px var(--sans); color: #956546;}
#gs-portfolio .crm-letter-copy{padding: 13px 17px 15px;}
#gs-portfolio .crm-letter-copy>span:first-child{font: 6px/1.5 var(--mono); letter-spacing: .02em; color: #a27f58;}
#gs-portfolio .crm-letter-copy>strong{font: 400 clamp(24px,2.7vw,41px)/.98 var(--sans); letter-spacing: -.05em; display: block; margin-top: 13px;}
#gs-portfolio .crm-letter-copy>p{font: 10px/1.6 var(--sans); max-width: 25ch; color: #7a806d; margin-top: 12px;}
#gs-portfolio .crm-letter-next{display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 9px/1.5 var(--sans); border-top: 1px solid #c4bdab80; padding-top: 11px; margin-top: 14px; color: #786248;}
#gs-portfolio .crm-letter-next i{font: 16px var(--sans); font-style: normal;}
#gs-portfolio .crm-sequence-bottom{position: absolute; left: 25px; right: 25px; bottom: 24px; display: flex; align-items: end; justify-content: space-between; gap: 12px; z-index: 5;}
#gs-portfolio .crm-sequence-bottom>div>span{font: 6px/1.5 var(--mono); letter-spacing: .06em; color: #98ad9c;}
#gs-portfolio .crm-sequence-bottom p{font: 400 16px/1.4 var(--sans); letter-spacing: -.02em; color: #d2d6c7; margin-top: 9px;}
#gs-portfolio .crm-sequence-bottom p>i{font-style: normal; color: #a78363; margin-inline: 8px;}
#gs-portfolio .crm-sequence-replay{background: none; border: 1px solid #a5b39b4a; color: #bcc7b4; font: 9px var(--sans); padding: 9px 11px; white-space: nowrap;}
#gs-portfolio .crm-sequence-replay>span{font-size: 14px; margin-left: 8px;}
#gs-portfolio .crm-sequence.is-playing .crm-line-active{animation: crm-route-draw 1.25s .25s ease both;}
#gs-portfolio .crm-sequence.is-playing .crm-connection-dot{animation: crm-signal-bloom 1s .75s ease both; transform-origin: 257px 264px;}
#gs-portfolio .crm-sequence.is-playing .crm-letter{animation: crm-letter-rise 2.2s .6s cubic-bezier(.18,.75,.18,1) both;}
#gs-portfolio .crm-sequence.is-playing .crm-letter-copy{animation: crm-copy-in 1s 1.8s ease both;}
#gs-portfolio .crm-sequence.is-playing .crm-envelope{animation: crm-envelope-settle 1.8s .65s cubic-bezier(.2,.7,.2,1) both;}
#gs-portfolio .crm-sequence.is-playing .crm-live-mark{animation: crm-signal-light 2.5s ease both;}






@media (max-width:1050px){#gs-portfolio .crm-sequence-top{left: 20px; right: 20px; font-size: 7px;}
#gs-portfolio .crm-sequence-heading{left: 20px; font-size: 30px;}
#gs-portfolio .crm-context-label{left: 20px; font-size: 5px;}
#gs-portfolio .crm-contexts{left: 20px; width: 32%; gap: 9px;}
#gs-portfolio .crm-contexts>button{padding: 8px; grid-template-columns: 13px 1fr; gap: 2px 5px;}
#gs-portfolio .crm-contexts strong{font-size: 12px;}
#gs-portfolio .crm-contexts small{font-size: 8px;}
#gs-portfolio .crm-letter{left: 49%; width: 45%; height: 45%;}
#gs-portfolio .crm-letter-head{padding: 10px 12px; font-size: 6px;}
#gs-portfolio .crm-letter-copy{padding: 11px 13px;}
#gs-portfolio .crm-letter-copy>strong{font-size: 28px; margin-top: 10px;}
#gs-portfolio .crm-letter-copy>p{font-size: 9px; margin-top: 10px;}
#gs-portfolio .crm-letter-copy>span:first-child{font-size: 5px;}
#gs-portfolio .crm-letter-next{font-size: 8px; margin-top: 12px; padding-top: 9px;}
#gs-portfolio .crm-sequence-bottom{left: 20px; right: 20px; bottom: 23px;}
#gs-portfolio .crm-sequence-bottom p{font-size: 13px;}
#gs-portfolio .crm-sequence-bottom p>i{margin-inline: 5px;}
#gs-portfolio .crm-sequence-replay{font-size: 8px; padding: 7px 9px;}
#gs-portfolio .crm-sequence-replay>span{margin-left: 4px;}
#gs-portfolio .crm-sequence-bottom>div>span{font-size: 5px;}}
@media (max-width:750px){#gs-portfolio .method-inline-scene:has(.crm-sequence){height: 450px;}
#gs-portfolio .crm-sequence-top{left: 18px; right: 18px; top: 21px; font-size: 6px;}
#gs-portfolio .crm-sequence-heading{left: 18px; top: 57px; font-size: 31px;}
#gs-portfolio .crm-context-label{left: 18px; top: 34%; font-size: 5px;}
#gs-portfolio .crm-contexts{top: 39%; left: 18px; width: 32%; gap: 10px;}
#gs-portfolio .crm-contexts>button{min-height: 50px; padding: 8px 7px; gap: 2px 5px; grid-template-columns: 11px 1fr;}
#gs-portfolio .crm-contexts>button>span{font-size: 6px;}
#gs-portfolio .crm-contexts strong{font-size: 12px;}
#gs-portfolio .crm-contexts small{font-size: 8px;}
#gs-portfolio .crm-letter{top: 35%; left: 49%; width: 45%; height: 42%; transform: rotate(-5deg);}
#gs-portfolio .crm-letter-head{padding: 10px; font-size: 5px;}
#gs-portfolio .crm-letter-copy{padding: 10px;}
#gs-portfolio .crm-letter-copy>strong{font-size: 27px; margin-top: 11px;}
#gs-portfolio .crm-letter-copy>p{font-size: 9px; line-height: 1.6; margin-top: 11px;}
#gs-portfolio .crm-letter-next{font-size: 7px; line-height: 1.4; margin-top: 12px; padding-top: 9px; gap: 7px;}
#gs-portfolio .crm-letter-next i{font-size: 13px;}
#gs-portfolio .crm-letter-copy>span:first-child{font-size: 5px;}
#gs-portfolio .crm-envelope{top: 48%; left: 51%; width: 44%; height: 32%;}
#gs-portfolio .crm-sequence-bottom{left: 18px; right: 18px; bottom: 22px; gap: 8px;}
#gs-portfolio .crm-sequence-bottom p{font-size: 13px; line-height: 1.5; max-width: 22ch;}
#gs-portfolio .crm-sequence-bottom>div>span{font-size: 5px;}
#gs-portfolio .crm-sequence-bottom p>i{margin-inline: 4px;}
#gs-portfolio .crm-sequence-replay{font-size: 8px; padding: 7px;}
#gs-portfolio .crm-sequence-replay>span{margin-left: 3px; font-size: 12px;}}
@media (max-width:360px){#gs-portfolio .method-inline-scene:has(.crm-sequence){height: 445px;}
#gs-portfolio .crm-sequence-heading{font-size: 29px; left: 16px;}
#gs-portfolio .crm-sequence-top,#gs-portfolio .crm-context-label,#gs-portfolio .crm-contexts{left: 16px;}
#gs-portfolio .crm-contexts{width: 33%;}
#gs-portfolio .crm-contexts>button{grid-template-columns: 1fr; gap: 3px; padding: 8px;}
#gs-portfolio .crm-contexts>button>span{display: none;}
#gs-portfolio .crm-contexts strong{font-size: 11px;}
#gs-portfolio .crm-contexts small{font-size: 7px;}
#gs-portfolio .crm-letter{left: 51%; width: 44%; height: 43%;}
#gs-portfolio .crm-letter-copy{padding: 10px 9px;}
#gs-portfolio .crm-letter-copy>strong{font-size: 24px;}
#gs-portfolio .crm-letter-copy>p{font-size: 8px;}
#gs-portfolio .crm-letter-copy>span:first-child{font-size: 4px;}
#gs-portfolio .crm-letter-next{font-size: 7px;}
#gs-portfolio .crm-envelope{left: 53%; width: 43%;}
#gs-portfolio .crm-sequence-bottom{left: 16px; right: 16px; gap: 5px;}
#gs-portfolio .crm-sequence-bottom p{font-size: 11px;}
#gs-portfolio .crm-sequence-bottom p>i{margin-inline: 3px;}
#gs-portfolio .crm-sequence-replay{font-size: 7px; padding: 7px 6px;}}
.motion-paused #gs-portfolio .crm-sequence *{animation: none !important; transition: none !important;}
.motion-paused #gs-portfolio .crm-letter-copy{opacity: 1; transform: none;}
@media (prefers-reduced-motion:reduce){#gs-portfolio .crm-sequence *{animation: none !important; transition: none !important;}
#gs-portfolio .crm-sequence-replay{display: none;}
#gs-portfolio .crm-letter-copy{opacity: 1; transform: none;}
#gs-portfolio .crm-contexts>button[aria-pressed=true]{transform: none;}}
#gs-portfolio .crm-letter{top: 29%; height: 53%;}
#gs-portfolio .crm-letter-head{padding: 10px 14px;}
#gs-portfolio .crm-letter-copy{padding: 11px 14px;}
#gs-portfolio .crm-letter-copy>strong{font-size: clamp(27px,2.5vw,37px); margin-top: 10px;}
#gs-portfolio .crm-letter-copy>p{margin-top: 10px;}
#gs-portfolio .crm-letter-next{margin-top: 12px; padding-top: 9px;}
@media (max-width:1050px){#gs-portfolio .crm-letter{top: 29%; height: 53%;}
#gs-portfolio .crm-letter-head{padding: 9px 11px;}
#gs-portfolio .crm-letter-copy{padding: 10px 12px;}
#gs-portfolio .crm-letter-copy>strong{font-size: 28px;}
#gs-portfolio .crm-letter-copy>p{font-size: 9px;}
#gs-portfolio .crm-letter-next{margin-top: 10px; padding-top: 8px;}}
@media (max-width:750px){#gs-portfolio .crm-letter{top: 30%; height: 52%;}
#gs-portfolio .crm-letter-head{padding: 9px 10px;}
#gs-portfolio .crm-letter-copy{padding: 10px;}
#gs-portfolio .crm-letter-copy>strong{font-size: 26px;}
#gs-portfolio .crm-letter-copy>p{margin-top: 10px;}
#gs-portfolio .crm-letter-next{margin-top: 10px; padding-top: 8px;}}
@media (max-width:360px){#gs-portfolio .crm-letter{top: 30%; height: 53%;}
#gs-portfolio .crm-letter-head{padding: 9px;}
#gs-portfolio .crm-letter-copy{padding: 10px 9px;}
#gs-portfolio .crm-letter-copy>strong{font-size: 24px;}}
#gs-portfolio .crm-letter{top: 27%; height: 57%;}
@media (max-width:750px){#gs-portfolio .crm-letter{top: 28%; height: 57%;}}
@media (max-width:360px){#gs-portfolio .crm-letter{top: 28%; height: 57%;}}
@media (max-width:750px){#gs-portfolio .crm-sequence-bottom p{font-size: 11px; max-width: none; white-space: nowrap;}
#gs-portfolio .crm-sequence-bottom p>i{margin-inline: 3px;}}
@media (max-width:360px){#gs-portfolio .crm-sequence-bottom p{font-size: 9.5px;}
#gs-portfolio .crm-sequence-bottom p>i{margin-inline: 2px;}}
#gs-portfolio .crm-letter-copy{padding-bottom: 4px;}
#gs-portfolio .method-canvas:has(.method-frame-crm.is-active){background: #24323a;}