/* Light surface with quiet pixel islands and a stronger local pointer reveal. */
body.ui-study .hero {
  background: linear-gradient(155deg, #fffefa 0%, #fffdfa 65%, #fff8f2 100%);
}
/* Low-resolution canvas: each texel is one crisp, pale-orange square. */
body.ui-study .hero-pixels {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 0;
  pointer-events: none;
  image-rendering: pixelated;
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}

@media (max-width: 767px) {
  body.ui-study .hero-pixels {
    opacity: .75;
  }
}