.works-experience{background:linear-gradient(135deg,#faf5f6,#f4f5f7);border-block:1px solid var(--line)}
.works-experience .wrap{padding-block:72px}.works-experience h2{margin-bottom:18px}.works-intro{max-width:780px;color:var(--muted);margin-bottom:36px;font-size:17px}
.works-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:38px;align-items:center}.works-visual{min-width:0;border:1px solid #ded9dd;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 12px 36px #3e172208}.works-patch-label{padding:15px 22px;border-bottom:1px solid var(--line);color:var(--red);font-size:15px;font-weight:700}.works-patch-label:before{content:'';display:inline-block;width:10px;height:10px;background:#b89963;border:1px solid #876a3c;border-radius:2px;margin-inline-end:10px}
.works-scene{position:relative;isolation:isolate;aspect-ratio:1000/667;direction:ltr;overflow:hidden}.works-scene>img{width:100%;height:100%;object-fit:contain}.works-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.works-contact-label{position:absolute;left:41%;bottom:5%;font-size:14px;color:#38313c;background:#fffffff0;border:1px solid #ded9dd;border-radius:4px;padding:3px 9px;max-width:55%;line-height:1.5}.works-result{position:absolute;inset-inline:auto;left:3%;bottom:3%;max-width:90%;padding:7px 12px;background:#fff8fbf5;border:1px solid #b21c32;border-radius:8px;color:var(--dark);font-weight:700;font-size:14px;text-align:center;box-shadow:0 3px 10px #3e172215;direction:inherit}.works-result[hidden]{display:none}.works-status{padding:17px 22px;margin:0;border-top:1px solid var(--line);min-height:84px;font-size:16px;color:var(--dark);display:flex;align-items:center;background:#fffafb}
.works-stages{list-style:none;padding:0;margin:0;display:grid;gap:6px}.works-stages li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:6px;color:#969097;font-size:15px;line-height:1.5;transition:background .3s,color .3s}.works-step-dot{flex-shrink:0;width:9px;height:9px;border:1px solid #bdb3b8;border-radius:50%}.works-stages li.is-current{background:#f7e6eb;color:var(--dark);font-weight:700}.works-stages li.is-current .works-step-dot{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px #b21c3212}.works-stages li.is-complete{color:#969097}.works-stages li.is-complete .works-step-dot{background:#d2cbd0;border-color:#d2cbd0}.works-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.works-actions .btn:disabled{cursor:default;opacity:.5}.works-note{max-width:1000px;margin-top:28px;margin-bottom:0}
html[dir=rtl] .works-result{direction:rtl}html[dir=rtl] .works-contact-label{direction:rtl}html[lang=th] .works-stages li{line-height:1.75}
@media(max-width:950px){.works-layout{grid-template-columns:1fr;gap:24px}.works-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.works-experience .wrap{padding-block:56px}.works-actions{margin-top:20px}.works-status{min-height:70px}}
@media(max-width:620px){.works-experience .wrap{padding-block:48px}.works-intro{font-size:16px;margin-bottom:24px}.works-stages{grid-template-columns:1fr;gap:3px}.works-stages li{font-size:14px;padding:7px 10px}.works-patch-label{padding:13px 16px;font-size:14px}.works-status{padding:14px 16px;min-height:78px}.works-actions .btn{flex:1;min-width:130px}.works-contact-label{font-size:12px;left:40%;bottom:3%}.works-note{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.works-stages li{transition:none}}