/* ============================================================================
   Dot grid
   ---------------------------------------------------------------------------
   Texture, so the values are low by design. The base squares should be at the
   edge of noticing; only the handful of accents should register, and even they
   should read as incidental rather than as decoration somebody placed.
   ========================================================================= */

.dgrid {
  pointer-events: none;
  line-height: 0;
  /* Fades toward the bottom-right so the lattice stops rather than being cut
     off by whatever container it is in — a grid that ends on a hard edge reads
     as a clipped image. */
  -webkit-mask-image: linear-gradient(150deg, #000 0%, #000 42%, transparent 92%);
  mask-image: linear-gradient(150deg, #000 0%, #000 42%, transparent 92%);
}
.dgrid svg { display: block; max-width: 100%; height: auto; }

/* --- Base squares ------------------------------------------------------------ */

.dgrid--light .dgrid__cell { fill: var(--ink-200); }
.dgrid--ink   .dgrid__cell { fill: rgba(255, 255, 255, 0.10); }

/* --- Accents -----------------------------------------------------------------
   Blue, signal yellow and the green midpoint of the loop gradient — the same
   three stops the brand's own gradient runs through, so a scattering of them
   reads as this company's texture rather than as generic confetti.          */

.dgrid--light .dgrid__cell--blue   { fill: var(--blue-500); opacity: 0.55; }
.dgrid--light .dgrid__cell--yellow { fill: var(--yellow-400); opacity: 0.8; }
.dgrid--light .dgrid__cell--green  { fill: #A9D98C; opacity: 0.7; }

.dgrid--ink .dgrid__cell--blue   { fill: var(--blue-300); opacity: 0.55; }
.dgrid--ink .dgrid__cell--yellow { fill: var(--yellow-300); opacity: 0.65; }
.dgrid--ink .dgrid__cell--green  { fill: #A9D98C; opacity: 0.45; }

/* --- Placements ---------------------------------------------------------------
   Each is absolute inside a container that already establishes a positioning
   context, and each is hidden at the width where the layout stops having a
   spare column for it to sit in.

   An absolutely-positioned element at `z-index: 0` paints ABOVE its
   non-positioned siblings, not below them — so a grid dropped in as the first
   child would sit on top of the heading and the buttons rather than behind
   them. The grid is always the first child, so lifting every following sibling
   one layer is both the fix and the reason it has to go first.             */

.dgrid--testimonials ~ *,
.dgrid--cta ~ * { position: relative; z-index: 1; }

/* The testimonial header is capped at 34rem; this fills the rest of that row. */
.dgrid--testimonials {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}

/* The product-page closing panels are centred copy inside a very wide ink
   block. One grid in the top-left corner, mirrored out of the way of the text. */
.dgrid--cta {
  position: absolute;
  top: clamp(1.5rem, 3vw, 3rem);
  left: clamp(1.5rem, 3vw, 3rem);
  z-index: 0;
  opacity: 0.85;
}

/* The case-study masthead caps its headline at 20ch inside a wide container,
   so the top-right is empty. The client watermark bleeds off the BOTTOM-right,
   which is why this one anchors to the top and the two never meet. */
.dgrid--csp {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  opacity: 0.9;
}
.dgrid--csp ~ * { position: relative; z-index: 1; }

/* Reality's aside runs out of content while the four principles beside it keep
   going, leaving the bottom-left of the section empty. This fills it as
   BACKGROUND — out of flow, so it adds no height. An in-flow version made the
   section taller, which is the opposite of filling a gap.

   `z-index: -1` rather than 0, and this is the one placement that needs it.
   The other three lift their siblings a layer to sit behind them, but a
   sibling here is `.reality__aside`, which is `position: sticky` — giving it
   `position: relative` to raise it would stop it sticking. Dropping the grid
   below instead leaves every sibling untouched; `.reality` carries
   `isolation: isolate` so -1 lands above the section's own background rather
   than disappearing behind it.

   Quieter than the other placements on purpose. That section's own note says
   restraint is the point and that boxes would make it look like a pitch; a
   background texture is not a box, but it should still be the faintest thing
   on the page. */
.dgrid--reality {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.65;
}

@media (max-width: 1023px) {
  /* Below this the copy uses the full width and there is no spare column —
     the grid would sit underneath the text rather than beside it. */
  .dgrid--testimonials { display: none; }
  .dgrid--csp { display: none; }
}
@media (max-width: 899px) {
  /* The aside stops being a column and stacks above the principles, so its
     "run-out" is just a gap between two blocks. */
  .dgrid--reality { display: none; }
}
@media (max-width: 767px) {
  .dgrid--cta { display: none; }
}