/* Requested wire mesh: a background, never a replacement cursor or input layer. */
body { isolation: isolate; }
.pointer-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-image:
    linear-gradient(to right, rgb(242 240 233 / 5%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(242 240 233 / 5%) 1px, transparent 1px);
  background-size: 76px 76px;
}
.pointer-mesh canvas { display: none; width: 100%; height: 100%; }
.pointer-mesh[data-rendered] { background-image: none; }
.pointer-mesh[data-rendered] canvas { display: block; }
/* Section surfaces sit below the shared mesh (-1), while their text/links
   stay above it. Do not isolate these sections into new stacking contexts. */
.services-section, .about-section, .news-section { position: relative; background: transparent; }
.services-section, .news-section { --mesh-surface: #fff; }
.services-section::before, .about-section::before, .news-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--mesh-surface, var(--paper));
  pointer-events: none;
}
/* Keep the quiet, static grid when no hover or less motion is preferred. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .pointer-mesh[data-rendered] {
    background-image:
      linear-gradient(to right, rgb(242 240 233 / 5%) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(242 240 233 / 5%) 1px, transparent 1px);
  }
  .pointer-mesh[data-rendered] canvas { display: none; }
}
@media (max-width: 699px) {
  .pointer-mesh { background-size: 64px 64px; }
}
@media (forced-colors: active), print {
  .pointer-mesh { display: none; }
}