/* ==========================================================================
   Bunn Design Co. — hero surface texture

   Loaded by index.html, about.html, services.html and the case studies,
   alongside site.css. One
   canvas layer behind the host's own content; nothing here touches its
   type, grid, colours or buttons. Any section can opt in by adding
   [data-hero-texture] and its own overflow:hidden — this only adds the
   stacking context the canvas needs to sit behind that section's content.
   ========================================================================== */
[data-hero-texture] { position: relative; }

.hero__texture {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;   /* the cursor drives it, but never lands on it */
}

/* the host's real content sits above the field — its direct-child .wrap is
   normally the only other thing in there besides the canvas. */
[data-hero-texture] > .wrap { position: relative; z-index: 1; }