.enhanced .pocket {
  position: absolute;
  z-index: 4;
  max-width: min(38vw, 430px);
  padding: 0;
}
/* Media pockets need more than a column of prose, and this has to be stated at
   the same specificity as the rule above or the 430px cap silently wins.
   620px still clears the bore: at a pocket's y the tunnel is near mid-page. */
.enhanced .pocket--wide { max-width: min(52vw, 620px); }

/* One notch wider than a prose column, for a heading that will not sit on one
   line at 430px. "Websites and event platforms" is 28 characters and measures
   ~540px at the h2's 40px ceiling. Safe at this y for the same reason 620px is:
   the bore is near mid-page there. */
.enhanced .pocket--roomy { max-width: min(48vw, 580px); }

/* The heading wants that width; the prose under it does not. 580px sets a ~72
   character measure at 16px, which is past comfortable, so the body is capped
   and the wide box works for the h2 alone. The auto margin holds it flush on
   the right-hand pockets, where the text is right-aligned. */
.enhanced .pocket--roomy .pocket-body { max-width: 44ch; }
.enhanced .pocket--roomy[data-side="right"] .pocket-body { margin-left: auto; }

/* Pockets 1 and 2 are short — a heading and three lines — while 3 and 4 carry
   the logo wall and the slider. All four are anchored by their TOP edge at the
   same fraction of their leg (geometry.js pocketOffset), so the short two read
   as sitting high with a hole beneath them. A transform moves only the paint:
   the geometry, the tunnel and the rabbit are untouched, and lower in the leg
   the tunnel has swung further to its own side, so clearance only improves. */
.enhanced .pocket--low { transform: translateY(var(--pocket-drop, 150px)); }

.enhanced .pocket[data-side="right"] { text-align: right; }

/* WHY 3 AND 4 START HIGHER THAN 1 AND 2, which is not a bug in the geometry.
   All four hang from the same fraction of their leg (geometry.js pocketOffset
   0.22, so 158px into a 720px leg). On 2026-07-29 the SHORT two were dropped
   150px by .pocket--low above, because a heading and three lines at that
   anchor read as floating with a hole beneath. The tall two were left where
   they were, since on a desktop the logo wall alone is taller than its leg and
   dropping it would push it into the next section.

   On a phone that reasoning inverts. The wall is now four marquee rows, about
   212px rather than 740, and the slider is one image — so 3 and 4 are no longer
   the tall ones, and being 150px above their neighbours is exactly what reads
   as their content arriving before you get there. Same drop, its own dial, so
   tuning this cannot move the two that are already settled. */
@media (max-width: 767px) {
  .enhanced #clients, .enhanced #work {
    transform: translateY(var(--pocket-drop-tall, 150px));
  }
}