/* ============================================================
   PROCESS PAGE — Brand Lab
   ============================================================ */
.process-lab { padding: 0 0 var(--space-5xl); }
.process-lab__frame { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(20rem, 1.3fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding: clamp(1.5rem, 4vw, 4rem); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-card); overflow: hidden; }
.process-lab__intro .text-label { margin-bottom: var(--space-md); color: var(--accent); }
.process-lab__intro h2 { max-width: 9ch; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -.055em; margin-bottom: var(--space-lg); }
.process-lab__intro > p { max-width: 30rem; color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-relaxed); margin-bottom: var(--space-xl); }
.mark-lab__button { min-width: 11rem; justify-content: center; }
.mark-lab__button span { display: inline-block; transition: transform var(--duration-normal) var(--ease-out); }
.mark-lab__button:hover span { transform: rotate(90deg); }

.mark-lab { position: relative; min-height: 28rem; overflow: hidden; border-radius: var(--radius-lg); background: #ece7db; color: #181815; isolation: isolate; }
.mark-lab::before { content: ''; position: absolute; inset: 8%; border: 1px solid rgba(24,24,21,.13); border-radius: 50%; transform: rotate(-23deg); }
.mark-lab::after { content: 'CLICK / SHUFFLE / REPEAT'; position: absolute; right: 1.25rem; bottom: 1.1rem; color: rgba(24,24,21,.55); font: 500 .56rem/1 var(--font-mono); letter-spacing: .12em; }
.mark-lab__grid { position: absolute; inset: 0; opacity: .55; background: repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), rgba(24,24,21,.07) calc(25% - 1px) 25%), repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(24,24,21,.07) calc(25% - 1px) 25%); }
.mark-lab__mark { position: absolute; top: 50%; left: 50%; width: 13rem; height: 13rem; transform: translate(calc(-50% + var(--pointer-x, 0px)), calc(-50% + var(--pointer-y, 0px))) rotate(var(--mark-rotation, -16deg)) scale(var(--mark-scale, 1)); transition: transform .55s var(--ease-out); }
.mark-lab__letter { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -56%); color: #181815; font: 400 12rem/.7 Georgia, serif; letter-spacing: -.18em; }
.mark-lab__disc { position: absolute; width: 7rem; height: 7rem; border-radius: 50%; background: var(--mark-color, var(--accent)); mix-blend-mode: multiply; transform: translate(var(--disc-x, 4rem), var(--disc-y, -1rem)); transition: transform .55s var(--ease-out), background-color .55s var(--ease-out); }
.mark-lab__bar { position: absolute; z-index: 3; top: 49%; left: 7%; width: 86%; height: .85rem; background: #181815; transform: rotate(var(--bar-rotation, 29deg)); transition: transform .55s var(--ease-out); }
.mark-lab__caption { position: absolute; z-index: 4; top: 1.25rem; left: 1.25rem; color: #181815; font: 500 .58rem/1.4 var(--font-mono); letter-spacing: .1em; }
.mark-lab__cursor { position: absolute; z-index: 4; right: 1.5rem; top: 1.35rem; width: 1.2rem; height: 1.2rem; border: 1px solid #181815; border-radius: 50%; }

.mark-lab.mark-state-b { --mark-rotation: 23deg; --mark-scale: .82; --disc-x: -1rem; --disc-y: 5rem; --bar-rotation: -15deg; --mark-color: #bca9dc; }
.mark-lab.mark-state-c { --mark-rotation: 58deg; --mark-scale: 1.12; --disc-x: 5rem; --disc-y: 4rem; --bar-rotation: 68deg; --mark-color: #c4f84a; }
.mark-lab.mark-state-d { --mark-rotation: -51deg; --mark-scale: .94; --disc-x: -4rem; --disc-y: -3rem; --bar-rotation: 4deg; --mark-color: #7c7a70; }

@media (max-width: 760px) {
  .process-lab__frame { grid-template-columns: 1fr; }
  .process-lab__intro h2 { max-width: 13ch; }
  .mark-lab { min-height: 22rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mark-lab__mark, .mark-lab__disc, .mark-lab__bar, .mark-lab__button span { transition: none; }
}