.process { 
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 247, 232, 0.44) 0%, transparent 24%),
    linear-gradient(135deg, rgba(245, 239, 230, 0.96) 0%, rgba(233, 225, 214, 0.98) 100%);
  box-shadow: inset 0 20px 40px rgba(51,43,37,0.1), inset 0 -20px 40px rgba(51,43,37,0.1);
  padding: 120px 0; 
}

.process::before,
.process::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.process::before {
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.05) 14%, transparent 15%, transparent 85%, rgba(var(--accent-rgb), 0.05) 86%, transparent 100%),
    linear-gradient(0deg, transparent 0%, rgba(var(--accent-rgb), 0.04) 18%, transparent 20%, transparent 80%, rgba(var(--accent-rgb), 0.04) 82%, transparent 100%);
  opacity: 0.22;
  animation: sectionTextureDrift 20s ease-in-out infinite;
}

.process::after {
  left: 50%;
  top: 8%;
  width: clamp(320px, 52vw, 760px);
  height: clamp(280px, 34vw, 420px);
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.1), transparent 62%),
    linear-gradient(180deg, rgba(255, 250, 240, 0.34), transparent 70%);
  filter: blur(12px);
  animation: sectionAura 22s ease-in-out infinite;
}

.process .container {
  position: relative;
  z-index: 1;
}

.process-grid {
  display: grid;
  gap: 64px;
}

@media(min-width: 800px) {
  .process-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.process-step {
  position: relative;
  text-align: center;
}

.step-num {
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--bg);
  line-height: 1;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  /* Deep chiseled numbers */
  text-shadow: 1px 2px 4px rgba(51,43,37,0.2), -1px -1px 2px rgba(255,255,255,0.4);
}

.process-step .museum-frame {
  position: relative;
  z-index: 2;
  /* Frame pops out */
  box-shadow: var(--shadow-carved-out);
  padding: 12px;
  background: var(--bg);
}
.process-step .img-zoom-wrap {
  /* Image goes in */
  box-shadow: var(--shadow-carved-in); 
}