/* The visual recipe: model + garment + studio */
.experience{display:block;padding:68px 17px 78px;background:#eef0eb;overflow:hidden;scroll-margin-top:80px}
.experience-heading{display:grid;gap:24px;margin:0 auto 29px;max-width:1320px}
.experience-copy{max-width:560px;margin:0}
.experience h2{font-size:clamp(37px,9.8vw,62px);line-height:1.01;letter-spacing:-.065em;font-weight:500;margin:15px 0 16px}
.experience h2 em{color:#637f70}
.experience-copy>p{font-size:12px;line-height:1.8;color:#68716b;margin:0 0 17px;max-width:510px}
.demo-disclaimer{font:500 8px Oxanium,sans-serif;letter-spacing:.08em;color:#7d867f;text-transform:uppercase}
.look-selector-wrap{align-self:end}
.selector-label{display:block;font:600 8px Oxanium,sans-serif;letter-spacing:.12em;color:#78817a;margin-bottom:10px}
.look-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;border-bottom:1px solid #d3d8d0}
.look-choice{position:relative;display:flex;align-items:center;gap:7px;padding:0 0 11px;border:0;background:transparent;color:#808781;text-align:left;white-space:nowrap}
.look-choice span{font:500 8px Oxanium,sans-serif}
.look-choice b{font-size:9px;font-weight:600}
.look-choice:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transform:scaleX(.3);transform-origin:left;transition:transform 220ms var(--ease-out),background 180ms ease}
.look-choice.active{color:var(--ink)}
.look-choice.active:after{background:var(--teal);transform:scaleX(1)}
.process-flow{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:center;max-width:1320px;margin:0 auto}
.process-inputs{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);align-items:center;gap:3px;min-width:0}
.process-step{min-width:0;padding:5px 5px 8px;border:1px solid rgba(50,71,60,.1);border-radius:12px;background:rgba(255,255,255,.82);box-shadow:0 8px 20px rgba(39,51,44,.04)}
.process-index{display:block;overflow:hidden;padding:2px 1px 6px;color:#708078;font:600 7px Oxanium,sans-serif;letter-spacing:.08em;white-space:nowrap}
.process-visual{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:8px;background:#e9ece7}
.model-visual{background:radial-gradient(ellipse at 50% 65%,#fff 0,#f4f5f1 54%,#e4e9e3 100%)}
.model-visual img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.garment-visual{aspect-ratio:1/1;background:#f5f4f0}
.garment-frame{position:absolute;inset:0;background-image:url("assets/process/looks-flatlay-strip.png");background-repeat:no-repeat;background-size:300% 100%;opacity:0;transition:opacity 480ms var(--ease-in-out)}
.garment-frame-one{background-position:0% center}.garment-frame-two{background-position:50% center}.garment-frame-three{background-position:100% center}
.garment-visual[data-look="0"] .garment-frame-one,.garment-visual[data-look="1"] .garment-frame-two,.garment-visual[data-look="2"] .garment-frame-three{opacity:1}
.scene-visual{background:#f8f8f5}
.scene-visual img{display:block;width:100%;height:100%;object-fit:cover}
.process-step h3{overflow:hidden;margin:7px 1px 0;color:var(--ink);font-size:9px;font-weight:650;letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap}
.process-plus{display:grid;place-items:center;width:15px;height:15px;border:1px solid rgba(46,102,98,.2);border-radius:50%;background:#f9faf7;color:var(--teal);font:400 12px Manrope,sans-serif}
.workflow-connector{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;color:#78817a}
.workflow-connector span{font:600 7px Oxanium,sans-serif;letter-spacing:.12em}
.workflow-connector i{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(46,102,98,.18);border-radius:50%;background:#f7f8f4;color:var(--teal);font-size:15px;font-style:normal;transform:rotate(90deg)}
.look-art{width:100%;max-width:570px;margin:0 auto}
.look-stage{height:auto;aspect-ratio:.91;position:relative;overflow:hidden;border-radius:15px;background:#e7e5de;box-shadow:0 22px 46px rgba(35,46,40,.14);isolation:isolate;transition:none}
.look-frame{position:absolute;z-index:0;inset:0;background-image:url("assets/demo/sienna-look-triptych.png");background-repeat:no-repeat;background-size:300% 100%;opacity:0;transition:opacity 720ms var(--ease-in-out)}
.look-frame-one{background-position:0% center}.look-frame-two{background-position:50% center}.look-frame-three{background-position:100% center}
.look-stage[data-look="0"] .look-frame-one,.look-stage[data-look="1"] .look-frame-two,.look-stage[data-look="2"] .look-frame-three{opacity:1}
.look-stage:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(27,37,33,.16),transparent 19%,transparent 74%,rgba(27,37,33,.2));pointer-events:none}
.stage-index{position:absolute;z-index:2;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);font:600 7px Oxanium,sans-serif;letter-spacing:.08em;color:#4d5851}
.stage-index i{width:3px;height:3px;border-radius:50%;background:var(--teal)}
.stage-note{position:absolute;z-index:2;left:12px;right:12px;bottom:11px;color:white;text-align:center;font:500 7px Oxanium,sans-serif;letter-spacing:.12em;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.stage-bottom{display:flex;justify-content:space-between;align-items:center;padding:10px 2px 0;color:#778079;font:500 7px Oxanium,sans-serif;letter-spacing:.1em}
.stage-progress{display:flex;gap:4px}.stage-progress i{display:block;width:14px;height:2px;background:#c8cec7;transition:background 180ms ease,width 220ms var(--ease-out)}.stage-progress i.active{width:25px;background:var(--teal)}
.process-flow.motion-ready .process-step,.process-flow.motion-ready .workflow-connector,.process-flow.motion-ready .look-art{opacity:0;transform:translateY(13px);transition:opacity 600ms var(--ease-out),transform 700ms var(--ease-out)}
.process-flow.is-visible .process-step,.process-flow.is-visible .workflow-connector,.process-flow.is-visible .look-art{opacity:1;transform:translateY(0)}
.process-flow.motion-ready .process-plus{opacity:0;transform:scale(.65);transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-out)}
.process-flow.is-visible .process-plus{opacity:1;transform:scale(1)}
.process-flow.is-visible .process-inputs>*:nth-child(1){transition-delay:0ms}.process-flow.is-visible .process-inputs>*:nth-child(2){transition-delay:90ms}.process-flow.is-visible .process-inputs>*:nth-child(3){transition-delay:170ms}.process-flow.is-visible .process-inputs>*:nth-child(4){transition-delay:250ms}.process-flow.is-visible .process-inputs>*:nth-child(5){transition-delay:330ms}.process-flow.is-visible .workflow-connector{transition-delay:410ms}.process-flow.is-visible .look-art{transition-delay:500ms}
@media(min-width:700px){.experience{padding:91px 5vw 100px}.experience-heading{grid-template-columns:minmax(0,1.05fr) minmax(290px,.75fr);align-items:end;gap:5vw;margin-bottom:36px}.experience-copy{margin:0}.experience h2{font-size:clamp(48px,5.2vw,72px)}.experience-copy>p{font-size:13px}.selector-label{font-size:8px}.look-choice{gap:9px;padding-bottom:13px}.look-choice b{font-size:10px}.look-choice span{font-size:9px}.process-inputs{gap:8px}.process-step{padding:7px 7px 10px;border-radius:14px}.process-index{font-size:7px;padding:3px 2px 8px}.process-step h3{font-size:10px;margin-top:9px}.process-plus{width:20px;height:20px;font-size:14px}.workflow-connector{gap:7px}.workflow-connector i{width:31px;height:31px;transform:rotate(90deg)}.look-stage{aspect-ratio:.96;border-radius:18px}.stage-index{top:16px;left:16px;font-size:8px}.stage-note{bottom:15px}.stage-bottom{padding-top:13px}}
@media(min-width:1000px){.experience{padding:112px 5vw 118px}.experience-heading{grid-template-columns:minmax(0,1fr) minmax(330px,.7fr);gap:8vw;margin-bottom:42px}.experience h2{font-size:clamp(60px,6vw,82px)}.process-flow{grid-template-columns:minmax(0,1.05fr) 42px minmax(0,.95fr);gap:13px}.process-inputs{gap:7px}.process-step{padding:8px 8px 11px}.process-index{font-size:7px}.process-step h3{font-size:10px}.process-plus{width:20px;height:20px}.workflow-connector{flex-direction:column;gap:8px}.workflow-connector i{transform:none}.look-art{max-width:none}.look-stage{aspect-ratio:.94}}
@media(prefers-reduced-motion:reduce){.process-flow.motion-ready .process-step,.process-flow.motion-ready .process-plus,.process-flow.motion-ready .workflow-connector,.process-flow.motion-ready .look-art,.look-frame,.garment-frame{transition:none!important}}