/* DUO process cards: large artwork, clear type and a quiet dark finish. */
#process .process-stack{width:calc(100% - 44px);max-width:640px;margin:0 44px 0 0;padding:40px 0 18px;height:auto;align-content:start;perspective:1200px;overflow:visible;isolation:isolate}
#process .process-stack .process-card{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column;align-self:stretch;width:100%;height:auto;min-height:0;aspect-ratio:auto;overflow:hidden;isolation:isolate;visibility:visible;opacity:1;border:1px solid #ffffff1c;border-radius:18px;background:linear-gradient(155deg,#242522 0%,#191a18 40%,#151613 100%);box-shadow:inset 0 1px 0 #ffffff08;transform-origin:50% 50%;rotate:0deg;transition:transform .6s cubic-bezier(.22,1,.36,1),filter .6s!important}
#process .process-stack .process-card:before{content:'';position:absolute;inset:auto 0 0;height:42%;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 90% 130%,#e4bf3414,transparent 72%)}
#process .process-stack .process-card[data-slot='0']{z-index:3;transform:translate(0,0) rotate(0deg);filter:none!important;pointer-events:auto;box-shadow:inset 0 1px 0 #ffffff12,0 25px 40px -22px #000b}
#process .process-stack .process-card[data-slot='1']{z-index:2;transform:translate(17px,-12px) rotate(1deg) scale(.98);filter:brightness(.76)!important;pointer-events:none}
#process .process-stack .process-card[data-slot='2']{z-index:1;transform:translate(32px,-32px) rotate(3deg) scale(.96);filter:brightness(.58)!important;pointer-events:none}
#process .process-card__top{display:flex;align-items:center;justify-content:space-between;min-height:0;padding:24px 28px 21px;gap:24px;line-height:1;letter-spacing:0;border:0;background:none}
#process .process-card__top>span{font-family:var(--sans);font-size:21px;font-weight:650;letter-spacing:-.03em;color:#eeeede}
#process .process-card__top>img{width:57px;height:auto;opacity:.85}
#process .process-scene{position:relative;isolation:isolate;flex:none;width:100%;max-width:none;height:auto;aspect-ratio:16/7.4;margin:0 0 6px;overflow:hidden;border-radius:0;background:none}
.process-reference,.process-blueprint,.process-export,.process-export-back{position:absolute;border:1px solid #ffffff29;border-radius:9px;overflow:hidden;box-shadow:0 16px 25px -12px #000a}
.process-reference>img,.process-blueprint>img,.process-export>img{display:block;width:100%;height:100%;object-fit:cover}
.process-scene--audit .process-audit-thumb{left:50%;top:5%;width:74%;max-width:none;aspect-ratio:16/9;opacity:.38;filter:saturate(.65) blur(2.5px);transform:translate(-50%,0);z-index:1;border-color:#ffffff29;box-shadow:0 15px 24px -10px #000a}
.process-scene--audit .process-audit-thumb:nth-child(1){opacity:1;filter:none;transform:translate(-50%,0) scale(1);z-index:3;border-color:#ffdb36}
.process-scene--audit .process-audit-thumb:nth-child(2){transform:translate(-11%,14px) scale(.8)}
.process-scene--audit .process-audit-thumb:nth-child(3){transform:translate(-89%,14px) scale(.8)}
.process-focus-corners{position:absolute;inset:10px;border:0;border-radius:0;pointer-events:none;background:linear-gradient(#ffe364,#ffe364) top left/14px 1px no-repeat,linear-gradient(#ffe364,#ffe364) top left/1px 14px no-repeat,linear-gradient(#ffe364,#ffe364) bottom right/14px 1px no-repeat,linear-gradient(#ffe364,#ffe364) bottom right/1px 14px no-repeat;opacity:.7}
.process-scene--audit .process-scan{position:absolute;top:-6%;left:0;right:0;height:3px;opacity:0;animation:none;background:#ffe83b;box-shadow:0 0 5px #fff394,0 0 14px #ffce00,0 0 28px #ffc60080}
.process-scan:before{content:'';position:absolute;left:0;right:0;bottom:2px;height:48px;background:linear-gradient(0deg,#ffda0045,transparent);pointer-events:none}
.process-scan:after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:#fffbc0}
.process-blueprint{left:13%;top:5%;width:74%;aspect-ratio:16/9;border-color:#e8dcbc66;background:#e6e2d6}
.process-blueprint>img{opacity:.85;filter:sepia(.12)}
.process-blueprint>svg{position:absolute;inset:0;width:100%;height:100%;stroke:#806514;stroke-width:1.2}
.process-composition-line{opacity:.35}.process-focal-frame{stroke:#b18704;stroke-width:2.2}
.process-focal-dot{position:absolute;left:51.3%;top:47%;width:7px;height:7px;border-radius:50%;background:#e7be32;border:2px solid #fff5ca;box-shadow:0 0 0 5px #c5a12726}
.process-export{left:13%;top:5%;width:74%;aspect-ratio:16/9;z-index:1;border-color:#fff2}
.process-export-back{left:16%;top:1%;width:68%;aspect-ratio:16/9;background:#34372c;border-color:#c9ccba29;box-shadow:0 -5px 0 -2px #35362b}
.process-ready{position:absolute;z-index:2;right:9%;bottom:7%;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#ffdc48;border:4px solid #1c1e19;box-shadow:0 4px 12px #0005}
.process-ready svg{width:19px;height:19px;stroke:#272912;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
#process .process-card__body{position:relative;z-index:1;padding:17px 30px 31px;gap:18px;flex:1;justify-content:flex-start}
#process .process-card__body>p{font-family:var(--sans);font-size:clamp(26px,2.35vw,33px);font-weight:700;line-height:1.13;letter-spacing:-.045em;color:#f3f2eb;max-width:20ch;margin:0;padding:0}
#process .process-card ul{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:0 82px 0 0;list-style:none}
#process .process-card li{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0;border-radius:0;background:none;font-family:var(--sans);font-size:13px;line-height:1.4;color:#aeb1a5}
#process .process-card li>.process-detail-mark{display:grid;place-items:center;width:16px;height:16px;flex:0 0 16px;border:0;background:none;border-radius:0;color:#c7b768}
.process-detail-mark svg{display:block;width:15px;height:15px;fill:currentColor;stroke:none}
#process .process-card__number,#process .process-card:not([data-slot='0']) .process-card__number{position:absolute;bottom:-31px;right:-9px;z-index:0;pointer-events:none;font-family:var(--sans);font-size:clamp(145px,11vw,190px);font-weight:800;line-height:1;letter-spacing:0;color:#ffffff08;-webkit-text-stroke:0;font-variant-numeric:tabular-nums}
@media(max-width:960px){#process .process-stack{width:calc(100% - 44px);max-width:600px;margin-inline:0 44px;justify-self:center}}
@media(max-width:540px){
 #process .process-stack{width:calc(100% - 26px);margin-right:26px;padding-top:28px}
 #process .process-stack .process-card{border-radius:16px}
 #process .process-stack .process-card[data-slot='0']{transform:translate(0,0) rotate(0deg)}
 #process .process-stack .process-card[data-slot='1']{transform:translate(11px,-10px) rotate(.7deg) scale(.98)}
 #process .process-stack .process-card[data-slot='2']{transform:translate(22px,-24px) rotate(2deg) scale(.96)}
 #process .process-card__top{padding:20px 20px 17px}.process-card__top>span{font-size:19px}
 #process .process-card__top>img{width:47px}
 #process .process-scene{aspect-ratio:16/8}
 .process-scene--audit .process-audit-thumb,.process-blueprint,.process-export{width:80%}.process-blueprint,.process-export{left:10%}
 .process-export-back{width:74%;left:13%}.process-ready{width:34px;height:34px;right:6%;bottom:8%;border-width:3px}
 #process .process-card__body{padding:15px 21px 26px;gap:16px}#process .process-card__body>p{font-size:27px}
 #process .process-card ul{padding-right:45px;gap:8px}#process .process-card li{font-size:12px;gap:8px}
 #process .process-card__number,#process .process-card:not([data-slot='0']) .process-card__number{font-size:140px;right:-7px;bottom:-25px}
}
@media(prefers-reduced-motion:reduce){#process .process-stack .process-card{transition:none!important}.process-scene--audit .process-scan{display:none}}

/* Keep the information and the active card on a shared visual center. */
#process .process__layout{align-items:center}
#process .process-card:not([data-slot='0']) .process-card__number{visibility:hidden}
#process .process-card[data-slot='0'] :is(.process-scene--strategy,.process-scene--delivery){animation:process-art-reveal 950ms cubic-bezier(.22,1,.36,1) 650ms both}
#process .process-card:not([data-slot='0']) :is(.process-scene--strategy,.process-scene--delivery){opacity:0}
@keyframes process-art-reveal{from{opacity:0;filter:blur(7px);translate:0 10px}to{opacity:1;filter:blur(0);translate:0 0}}
body[data-motion='paused'] #process :is(.process-scene--strategy,.process-scene--delivery){animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){#process .process-card :is(.process-scene--strategy,.process-scene--delivery){animation:none;opacity:1}}

/* Open step numbers instead of circular badges. */
#process .process-step{grid-template-columns:38px minmax(0,1fr);gap:16px}
#process .process-step>span:first-child{position:relative;display:block;width:38px;height:auto;padding:3px 0 9px;border:0;border-radius:0;background:none;color:#8d9085;font-size:21px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.035em;text-align:left;transition:color .25s}
#process .process-step[aria-pressed='true']>span:first-child{background:none;color:#ffda35}
#process .process-step>span:first-child:after{content:'';position:absolute;left:0;bottom:0;width:22px;height:2px;background:#ffda35;transform:scaleX(0);transform-origin:left;transition:transform .3s}
#process .process-step[aria-pressed='true']>span:first-child:after{transform:scaleX(1)}
#process .process__steps .process__hint{padding-left:54px}
@media(min-width:541px) and (max-width:960px){#process .process__steps .process__hint{padding-left:0}}
@media(prefers-reduced-motion:reduce){#process .process-step>span:first-child,#process .process-step>span:first-child:after{transition:none}}

/* Heading and steps share one centered column alongside the artwork. */
#process .process__copy{min-width:0;align-self:center}
#process .process__copy .section-heading{display:flex;flex-direction:column;align-items:flex-start;text-align:left;margin:0 0 22px;gap:12px}
#process .process__copy #process-title{font-size:clamp(34px,3.3vw,48px);gap:10px;margin:0}
#process .process__copy .section-heading__description{margin:0;max-width:none}
@media(max-width:960px){#process .process__copy{width:100%}#process .process__copy .section-heading{margin-bottom:24px}}

/* Separate the performance example from the studio process. */
#process.section{position:relative;margin-top:24px;padding-top:56px}
#process.section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,#d8cc9510,#d8cc953d 18%,#d8cc953d 82%,#d8cc9510);pointer-events:none}
@media(max-width:960px){#process.section{margin-top:16px;padding-top:36px}}

@media(max-width:540px){#process .process__copy #process-title{font-size:clamp(27px,6.8vw,34px);gap:8px}}

/* A quiet brand strip separates the performance and process sections. */
#process.section::before{display:none}
#process.section{margin-top:0;padding-top:40px}
.brand-divider{display:flex;align-items:center;justify-content:center;gap:clamp(32px,6vw,90px);padding-block:32px;margin-block:24px 16px;border-block:1px solid #ffffff0c}
.brand-divider img{display:block;height:auto;object-fit:contain;opacity:.48;flex-shrink:0}
.brand-divider__rainy{width:150px}.brand-divider__duo{width:104px}.brand-divider__roblox{width:151px}
.brand-divider>span{width:3px;height:3px;border-radius:50%;background:#d9c57455;flex-shrink:0}
@media(max-width:600px){.brand-divider{gap:clamp(12px,4vw,24px);padding-block:25px;margin-block:16px 8px}.brand-divider__rainy{width:100px}.brand-divider__duo{width:65px}.brand-divider__roblox{width:95px}#process.section{padding-top:28px}}

/* Dim, seamless brand carousel moving to the right. */
.brand-divider{display:block;overflow:hidden;padding-block:28px;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.brand-divider__track{display:flex;width:max-content;animation:brand-divider-drift 48s linear infinite;will-change:transform}
.brand-divider__group{display:flex;align-items:center;justify-content:space-around;flex:0 0 auto;width:740px;padding-inline:40px;gap:42px}
.brand-divider .brand-divider__group img{opacity:.23}
.brand-divider__group>span{width:3px;height:3px;border-radius:50%;background:#d9c57425;flex-shrink:0}
@keyframes brand-divider-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
body[data-motion='paused'] .brand-divider__track,body[data-page-hidden='true'] .brand-divider__track{animation-play-state:paused}
@media(max-width:600px){.brand-divider{padding-block:24px}.brand-divider__group{width:500px;gap:28px;padding-inline:28px}}
@media(prefers-reduced-motion:reduce){.brand-divider__track{animation:none;transform:none;width:100%}.brand-divider__group{width:100%;padding-inline:12px;gap:12px}.brand-divider__group[aria-hidden='true']{display:none}}

/* Delivery artwork signature and completion label. */
#process .process-export>.process-export__brand{position:absolute;left:16px;top:16px;width:19%;max-width:84px;height:auto;object-fit:contain;border-radius:0;overflow:visible;clip-path:none;filter:none;display:block}
#process .process-ready{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;height:36px;padding:0 10px;border-width:3px;border-radius:10px;color:#272912;font-size:12px;font-weight:700;line-height:1;white-space:nowrap}
#process .process-ready svg{width:16px;height:16px;flex:none}
@media(max-width:540px){#process .process-export>.process-export__brand{left:13px;top:13px}#process .process-ready{height:32px;font-size:11px;padding-inline:8px}}

/* Fade the side previews before they reach the card edges. */
#process .process-scene--audit{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
@media(max-width:540px){#process .process-scene--audit{mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}}