.studio-intro { max-width:860px; margin-inline:auto; }
#studio-workflow { --workflow-p:0; background:#151515; padding:64px 24px; scroll-margin-top:80px; }
.workflow-track { max-width:1232px; margin:auto; }
.workflow-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.workflow-art { position:relative; margin:0; min-width:0; aspect-ratio:1; isolation:isolate; }
.workflow-art img { width:100%; height:100%; object-fit:contain; display:block; mask-image:radial-gradient(ellipse,#000 55%,transparent 77%); }
.workflow-backword { position:absolute; left:12px; top:0; z-index:-1; font-size:48px; font-weight:700; line-height:1.1; letter-spacing:0; color:#fff; }
.workflow-caption { position:absolute; left:20px; bottom:0; background:#a8e3d6; color:#111; font-size:14px; font-weight:700; padding:12px 16px; transform:rotate(-3deg); }
.workflow-copy h2 { font-size:32px; line-height:1.2; margin-bottom:24px; }
.workflow-steps { list-style:none; padding:0; margin:0 0 24px; }
.workflow-steps li { border-left:2px solid #444; padding:0 0 0 20px; margin-bottom:18px; }
.workflow-steps h3 { font-size:18px; line-height:1.25; margin:0 0 5px; }
.workflow-steps p { color:#bcbcbc; font-size:14px; line-height:1.5; margin:0; }
.workflow-steps li.is-current { border-color:#a8e3d6; }
.workflow-steps li.is-current h3 { color:#a8e3d6; }
@media(prefers-reduced-motion:no-preference) {
 .workflow-entered .workflow-art { animation:workflow-arrive .45s ease-out both; }
 .workflow-entered .workflow-steps li { animation:workflow-arrive .3s ease-out both; animation-delay:calc(var(--step,0) * 45ms); }
}
@keyframes workflow-arrive { from { opacity:.5; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:767px) {
 #studio-workflow { padding:48px 16px; }
 .workflow-stage { grid-template-columns:1fr; gap:40px; }
 .workflow-backword { font-size:32px; }
 .workflow-caption { font-size:12px; left:8px; }
 .workflow-copy h2 { font-size:28px; }
}