.design-process{height:300svh;background:#0c1916;color:#f5f5ed;position:relative}
.design-stage{position:sticky;top:0;height:100svh;min-height:680px;overflow:hidden;padding:112px 4% 28px;display:flex;flex-direction:column;gap:20px}
.design-heading{display:flex;justify-content:space-between;gap:35px;align-items:end}
.design-heading h2{font-size:clamp(2.1rem,3.7vw,4.5rem);line-height:1.06;letter-spacing:-.05em}
.design-heading h2 em{color:var(--coral)}
.design-heading .eyebrow{font-size:12px;letter-spacing:.14em;color:#a8bcb0;margin-bottom:12px}
.design-heading>p{font-size:14px;line-height:1.5;color:#a8bcb0;text-align:right;max-width:220px}
.design-viewport{position:relative;flex:1;min-height:0;overflow:hidden;background:#10251f;border:1px solid #ffffff1c}
.design-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.design-wire{z-index:1}.design-clay{z-index:2}.design-finish{z-index:3}
.design-process.is-ready .design-wire{clip-path:inset(0 calc(100% - var(--wire,100%)) 0 0)}
.design-process.is-ready .design-clay{clip-path:inset(0 calc(100% - var(--clay,100%)) 0 0);opacity:var(--clay-opacity,1)}
.design-process.is-ready .design-finish{clip-path:inset(0 calc(100% - var(--finish,100%)) 0 0);opacity:var(--finish-opacity,1)}
.design-scan{position:absolute;z-index:4;top:0;bottom:0;left:var(--scan,0%);width:1px;background:#f5f5ed90;opacity:var(--scan-opacity,0);pointer-events:none;box-shadow:0 0 20px #ffffff60}
.design-caption{position:absolute;bottom:16px;left:18px;z-index:5;padding:7px 11px;font-size:11px;letter-spacing:.1em;background:#0c1916dc;color:#d9e5dd;text-transform:uppercase;pointer-events:none}
.design-toolbar{display:flex;align-items:center;gap:30px}
.design-steps{display:flex;gap:26px;flex:1}
.design-steps button{display:flex;align-items:center;gap:10px;padding:9px 0;color:#91a79a;font-size:14px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.design-steps button span{font-size:11px;color:#91a79a}
.design-steps button[aria-pressed="true"]{color:#fff;border-bottom-color:var(--coral)}
.design-steps button[aria-pressed="true"] span{color:var(--coral)}
.design-play{border:1px solid #6b8074;border-radius:28px;padding:10px 19px;font-size:13px;min-width:155px;text-align:center}
.design-play:hover{background:#ffffff10;border-color:#c3d3c8}
.design-meter{height:2px;background:#ffffff20;margin-top:2px}
.design-meter span{display:block;background:var(--coral);width:100%;height:100%;transform:scaleX(var(--progress,1));transform-origin:left}
.design-foot{display:flex;justify-content:space-between;gap:16px;align-items:center;color:#8fa699;font-size:12px}
.design-foot p{max-width:650px}.design-foot .design-percent{font-variant-numeric:tabular-nums;white-space:nowrap}
.design-toolbar[hidden]{display:none}
.reduced .design-process{height:auto}.reduced .design-stage{position:relative;height:auto;min-height:0;padding-top:70px;padding-bottom:60px}.reduced .design-viewport{flex:none;aspect-ratio:16/9}
html:not(.reduced) .design-process:not(.is-ready){height:auto}
html:not(.reduced) .design-process:not(.is-ready) .design-stage{position:relative}
@media(max-width:800px){
 .design-process{height:255svh}.design-stage{padding:100px 6% 24px;min-height:600px;gap:18px}
 .design-heading{display:block}.design-heading h2{font-size:clamp(2.2rem,7.8vw,3.5rem)}.design-heading>p{display:none}
 .design-viewport{margin:0 -6.82%;border-left:0;border-right:0}.design-layer{object-fit:cover}
 .design-toolbar{flex-wrap:wrap;gap:12px}.design-steps{gap:16px;justify-content:space-between;flex-basis:100%}.design-steps button{font-size:13px;gap:6px}
 .design-play{padding:8px 16px;min-width:145px}.design-caption{font-size:10px;left:12px;bottom:12px}
 .design-foot{align-items:start;font-size:11px}.design-foot p{max-width:255px}.design-percent{padding-top:2px}
 .reduced .design-viewport{aspect-ratio:4/3}
}
@media(max-height:700px) and (min-width:801px){.design-stage{min-height:520px;padding-top:94px;gap:12px}.design-heading h2{font-size:32px}.design-heading .eyebrow{margin-bottom:5px}.design-foot{font-size:11px}.design-play{padding:7px 15px}.design-steps button{padding:6px 0}}
@media(prefers-reduced-motion:reduce){.design-steps button{transition:none}}