.workflow{padding:100px 0 85px;background:#1c272e;overflow:hidden}.workflow-heading{text-align:center;margin-bottom:50px}.workflow-heading h2{font-size:clamp(28px,3.5vw,48px);font-weight:500;margin:22px 0 18px}.workflow-heading>p:last-child{color:#a8b7c3;font-size:15px}.workflow-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.workflow-card{position:relative;aspect-ratio:3/5;overflow:hidden;background:#152028;border:0;border-radius:0;color:#f0f3f5;cursor:zoom-in;padding:0}.workflow-cover{position:absolute;inset:0;background-size:400% 100%;background-position:left center;transition:transform .8s,filter .8s;filter:saturate(.65)}.workflow-card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,#17232d44 60%,#1c272ef5 96%)}.workflow-caption{position:absolute;bottom:18px;left:8px;right:8px;z-index:1;text-align:center}.workflow-caption small{font:10px var(--mono);color:#d2d9dd;display:block;margin-bottom:7px}.workflow-caption strong{display:block;font-size:18px;letter-spacing:.05em;font-weight:600}.workflow-caption>span{font-size:10px;color:#aebcc6;display:block;margin-top:8px;line-height:1.6}.workflow-card:hover .workflow-cover,.workflow-card:focus-visible .workflow-cover{transform:scale(1.04);filter:saturate(1)}.workflow-note{text-align:center;margin-top:30px;font-size:10px;color:#8d9eaa}.workflow-dialog{padding:0;border:0;background:transparent;max-width:94vw;width:1600px;max-height:90vh;margin:auto;overflow:visible}.workflow-dialog::backdrop{background:#080e14f5;backdrop-filter:blur(10px)}.workflow-dialog-scroll{overflow:auto;max-height:85vh;scrollbar-width:thin}.workflow-dialog img{display:block;width:100%;height:auto;max-width:none}.workflow-close{position:absolute;right:0;top:-46px;width:36px;height:36px;border:1px solid #ffffff55;border-radius:50%;background:#17232d;color:white;font-size:24px;cursor:pointer}@media(max-width:1000px){.workflow-row{grid-template-columns:repeat(6,180px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:15px}.workflow-card{scroll-snap-align:start}.workflow-dialog img{min-width:960px}.workflow-dialog{max-width:94vw}}@media(max-width:600px){.workflow{padding:70px 0 55px}.workflow-heading{margin-bottom:32px}.workflow-heading h2{font-size:27px}.workflow-row{grid-template-columns:repeat(6,175px);gap:12px}}@media(prefers-reduced-motion:reduce){.workflow-cover{transition:none}}
/* Match the site's midnight-blue lighting palette. */
.workflow{background:radial-gradient(ellipse at 50% 48%,#182d49 0%,#070e20 52%,#040a1c 90%)}
.workflow-card{background:#071229}
.workflow-card:after{background:linear-gradient(transparent 35%,rgba(7,18,41,.28) 60%,rgba(4,10,28,.96) 96%)}
.workflow-heading>p:last-child{color:#a6b5d0}
.workflow-caption small{color:#c3d3e9}
.workflow-caption>span{color:#a6b5d0}
.workflow-note{color:#8595b5}
.workflow-dialog::backdrop{background:rgba(2,6,15,.96)}
.workflow-close{background:#071229;border-color:rgba(143,182,255,.35);color:#eaf2ff}
/* Larger, slowly travelling image rail with a pulled-out card transition. */
.workflow-row{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;padding:38px 8px 32px;scroll-snap-type:none;scrollbar-width:thin;scrollbar-color:#59799c55 transparent;overscroll-behavior-x:contain}
.workflow-card{flex:0 0 285px;width:285px;aspect-ratio:3/4;height:380px;scroll-snap-align:none;border:1px solid #a6c7f022;border-radius:5px;transition:box-shadow .4s,transform .4s}
.workflow-card:hover,.workflow-card:focus-visible{transform:translateY(-12px);box-shadow:0 24px 45px #0006}
.workflow-caption{bottom:25px}.workflow-caption strong{font-size:23px}.workflow-caption>span{font-size:12px}.workflow-heading{margin-bottom:22px}
.workflow-motion{display:block;margin:18px auto 0;padding:8px 18px;background:transparent;border:1px solid #8fb6ff40;border-radius:24px;color:#a6b5d0;font:12px var(--font);cursor:pointer}
.workflow-lift{position:fixed!important;margin:0!important;z-index:9999;pointer-events:none;box-shadow:0 35px 90px #0009;transition:none!important}
@media(max-width:600px){.workflow-card{flex-basis:245px;width:245px;height:335px}.workflow-row{gap:16px;padding-top:24px}}
@media(prefers-reduced-motion:reduce){.workflow-card{transition:none}.workflow-motion{display:none}}
/* Large, evenly spaced moving cards with a real front/back transform. */
.workflow-row{display:block;position:relative;height:470px;overflow:hidden;perspective:1400px;padding:0;touch-action:pan-y;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.workflow-card{position:absolute;left:50%;top:25px;width:260px;height:405px;margin-left:-130px;aspect-ratio:auto;overflow:visible;background:transparent;transform-style:preserve-3d;will-change:transform;isolation:auto}
.workflow-card::after{display:none}.workflow-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,.7,.2,1)}
.workflow-card.is-flipped .workflow-inner{transform:rotateY(180deg)}
.workflow-front,.workflow-back{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #a6c6ef33;border-radius:8px;background:#071229;box-shadow:0 18px 40px #0005}
.workflow-front::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#040a1cf5 98%)}
.workflow-back{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center}
.workflow-back img{width:100%;height:auto;display:block}.workflow-caption{bottom:25px}.workflow-caption strong{font-size:23px}.workflow-caption>span{font-size:12px}.workflow-card:hover .workflow-cover{transform:none}
.workflow-card:focus-visible{outline:2px solid #b6d4ff;outline-offset:5px}
.workflow-motion-toggle{display:block;margin:0 auto 20px;padding:8px 16px;border:1px solid #8fb6ff44;border-radius:20px;color:#b5c9e3;background:transparent;font:12px var(--font);cursor:pointer}
.workflow-dialog[open]{animation:workflowExpand .45s ease-out}@keyframes workflowExpand{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@media(max-width:600px){.workflow-row{height:410px}.workflow-card{width:230px;height:350px;margin-left:-115px}.workflow-caption strong{font-size:21px}}
@media(prefers-reduced-motion:reduce){.workflow-inner{transition:none}.workflow-dialog[open]{animation:none}.workflow-row{overflow-x:auto;mask-image:none;display:flex;gap:18px;justify-content:flex-start}.workflow-card{position:relative;left:auto;top:15px;flex:0 0 230px;margin-left:0;}}
/* Six-card horizontal flow; compact/fanned positions interpolate in JS. */
.workflow-row{width:min(1920px,100vw);margin-left:calc((100% - min(1920px,100vw))/2);height:500px;overflow:hidden;display:block;perspective:1400px}
.workflow-card{width:clamp(242px,calc((100vw - 200px)/6),300px);height:430px;margin-left:calc(clamp(242px,calc((100vw - 200px)/6),300px)/-2);top:35px;border-radius:6px;overflow:hidden;background:#071229;transition:box-shadow .3s;box-shadow:0 20px 45px #0005;transform-style:preserve-3d}
.workflow-card::after{display:block;background:linear-gradient(transparent 40%,#040a1cf5 98%)}
.workflow-card:hover,.workflow-card:focus-visible{box-shadow:0 30px 65px #0009,0 0 0 1px #a6c6ef66}
.workflow-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:8px}
.workflow-controls button{border:1px solid #8fb6ff44;border-radius:24px;background:transparent;color:#d4e2f7;height:44px;min-width:44px;cursor:pointer;font:16px var(--font)}
.workflow-controls .workflow-play{padding:0 22px;font-size:12px}
.workflow-help{color:#9aadc9;text-align:center;font-size:12px;margin:18px 0 24px;line-height:1.8}
.workflow-hover-preview{max-width:1120px;margin:0 auto 25px;overflow:hidden;border:1px solid #8fb6ff30;animation:workflowPreview .35s ease-out}
.workflow-hover-preview[hidden]{display:none}.workflow-hover-preview img{width:100%;height:auto;display:block}
@keyframes workflowPreview{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(max-width:600px){.workflow-row{height:420px}.workflow-card{width:242px;height:350px;margin-left:-121px}.workflow-hover-preview{overflow-x:auto}.workflow-hover-preview img{min-width:900px}.workflow-help{font-size:11px}}
@media(prefers-reduced-motion:reduce){.workflow-row{display:block;overflow:hidden}.workflow-card{position:absolute;left:50%;top:35px;flex:none;}.workflow-hover-preview{animation:none}}