/* Photos arrive in sequence, then dissolve into the three reference card colors. */
.process-scroll-scene { position: relative; }
.process .process-grid { position: relative; align-items: start; }
.process .process-step { --step-color: var(--lime); position: relative; min-width: 0; min-height: 0; padding: 10px; isolation: isolate; overflow: hidden; background: var(--step-color); border-radius: 6px; }
.process .process-step:nth-child(2) { --step-color: var(--cream); }
.process .process-step:nth-child(3) { --step-color: var(--paper); }
.process-step-photo { position: relative; height: 180px; overflow: hidden; border-radius: 4px; }
.process-step-photo img { width: 100%; height: 100%; object-fit: cover; }
.process .process-step-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 28px; min-height: 350px; padding: 30px 20px; border: 1px solid var(--green); border-radius: 4px; text-align: center; }
.process .step-number { position: static; transform: none; flex: 0 0 50px; width: 50px; height: 50px; margin: 0; }
.process .process-step h3 { font-size: 36px; line-height: 1.1; margin: 8px 0 0; }
.process .process-step p { margin-top: auto; font-size: 16px; line-height: 1.5; padding: 0; }
.process-motion-enabled .process-scroll-scene { height: calc(100svh + 650px); }
.process-motion-enabled .process-grid { position: sticky; top: clamp(80px, calc((100svh - 370px) / 2), 200px); }
.process-motion-enabled .process-step { opacity: var(--step-visibility,1); transform: translate3d(0,var(--step-lift,0px),0); }
.process-motion-enabled .process-step-photo { position: absolute; inset: 0; height: 100%; border-radius: inherit; opacity: var(--step-photo,0); transform: scale(var(--step-image-scale,1)); }
.process-motion-enabled .process-step-photo:after { content: ''; position: absolute; inset: 0; background: var(--step-color); opacity: .23; }
.process-motion-enabled .process-step-content { opacity: var(--step-copy,1); }
@media (max-width: 950px) {
  .process .process-grid { grid-template-columns: 1fr; gap: 20px; }
  .process-motion-enabled .process-scroll-scene { height: auto; }
  .process-motion-enabled .process-grid { position: relative; top: auto; gap: 24px; padding-bottom: clamp(110px,18svh,180px); }
  .process-motion-enabled .process-step { position: sticky; top: 80px; z-index: 1; transform: translate3d(0,var(--step-lift,0px),0) scale(var(--step-stack-scale,1)); transform-origin: center top; }
  .process-motion-enabled .process-step:nth-child(2) { top: 96px; z-index: 2; }
  .process-motion-enabled .process-step:nth-child(3) { top: 112px; z-index: 3; }
  .process .process-step-content { min-height: 310px; padding: 24px; gap: 22px; }
  .process .process-step h3 { font-size: 32px; }
  .process .process-step p { font-size: 16px; line-height: 1.5; }
}
@media (max-width: 950px) and (max-height: 500px) {
  .process-motion-enabled .process-step:nth-child(n) { position: relative; top: auto; transform: translate3d(0,var(--step-lift,0px),0); }
  .process-motion-enabled .process-grid { padding-bottom: 0; }
}
@media (max-width: 700px) {
  .process .process-step-content { min-height: 300px; padding: 24px 18px; gap: 20px; }
  .process .process-step h3 { font-size: 30px; }
  .process .step-number { width: 44px; height: 44px; flex-basis: 44px; font-size: 24px; }
}