/* ==========================================================================
   VOXEL TERRAIN BAND — free on the white page
   No ground colour, no stage, no hard edge. The field is full-bleed, starts
   a little under the header's own margin, and its lower part runs on into the
   next section's top padding, where the terrain dissolves into loose pixels.
   ========================================================================== */

.pixel-wave-section {
  --leak: calc(var(--space-section) - 12px);  /* how far the terrain runs into the next band */
  position: relative;
  z-index: 0;
  overflow: visible;
  background: var(--bg-white);
  color: var(--ink-primary);
  padding-top: var(--space-section);
}

.pixel-wave-header { position: relative; z-index: 2; margin-bottom: var(--space-4xl); }
.pixel-wave-header > * { max-width: 56rem; }
.pixel-wave-header .eyebrow { color: var(--brand-green-accent); }
.pixel-wave-header h2 { color: var(--ink-primary); margin-bottom: var(--space-md); }
@media (min-width: 768px) { .pixel-wave-header h2 { margin-bottom: var(--space-xl); } }
.pixel-wave-header p { max-width: var(--measure); font-size: var(--text-lg); color: var(--ink-secondary); }

.pixel-legend { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-top: var(--space-md); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.pixel-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pixel-legend i { width: 7px; height: 14px; border-radius: 1px; }

.pixel-field {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(360px, 44vw, 680px);
  margin-top: calc(-1 * var(--space-2xl));      /* tuck the dissolving top under the header margin */
  margin-bottom: calc(-1 * var(--leak));         /* let the dissolving bottom run into the next band */
  cursor: crosshair;
  touch-action: pan-y;
}
.pixel-canvas { width: 100%; height: 100%; }

/* The band that follows must be see-through in its top padding for the leak to show.
   Its own content sits above the terrain. */
.pixel-wave-section + .work-section { position: relative; z-index: 2; background: transparent; }