/* Text clipping repair (text-fit)
   Loaded on every route, after the main stylesheet and the page stylesheets.

   THE PROBLEM
   Every masked text reveal on the site is a two-part structure: an
   `overflow: hidden` wrapper sized to the nominal line box, and an inner
   element that is translated (and usually faded) into place. Display type is
   set in Jost at line-height 0.90-1.0, but the font's real ascender and
   descender box is taller than that line box, so ascenders, descenders,
   apostrophes and diacritics get sliced by the wrapper after the reveal has
   finished.

   THE FIX
   Swap `overflow: hidden` for `overflow: clip` plus `overflow-clip-margin`.
   The clip rectangle is pushed out by a small buffer while the element's box,
   position, size, line box and spacing stay byte identical. Nothing moves,
   nothing resizes, no animation timing changes, no copy changes; the glyph
   edges simply stop being cut.

   Pre-reveal safety: every family below either fades in from opacity 0 or is
   translated fully outside the buffered clip region (see the transform
   top-ups at the end), so no text can peek before its reveal.

   Browsers without overflow-clip-margin keep the current behaviour. */

:root {
  --text-fit: 0.14em;
}

/* ---------- word-split reveals (home, method, studio, work, contact) ---------- */
.split-word {
  overflow: clip;
  overflow-clip-margin: var(--text-fit);
}

/* ---------- full-line masks (home hero) ---------- */
.mask-line {
  overflow: clip;
  overflow-clip-margin: var(--text-fit);
}

/* ---------- display headings whose lines are masked inline (services hero) ---------- */
h1 > span.block.overflow-hidden,
h2 > span.block.overflow-hidden,
h3 > span.block.overflow-hidden {
  overflow: clip;
  overflow-clip-margin: var(--text-fit);
}

/* ---------- services capability headlines (01-04) ---------- */
.bsi-line,
.ccg-line,
.swa-line,
.wep-hl-line {
  overflow: clip;
  overflow-clip-margin: var(--text-fit);
}

/* ---------- transform top-ups ----------
   Families that hide with transform only (no opacity fade) must start far
   enough down that the extra clip buffer cannot reveal a sliver early. Only
   the pre-reveal state is touched; the settled state is untouched. */
.split-word > span {
  transform: translateY(calc(114% + var(--text-fit) * 2));
}
.mask-line > span {
  transform: translateY(calc(112% + var(--text-fit) * 2));
}
.swa-line-in {
  transform: translateY(calc(102% + var(--text-fit) * 2));
}

@media (prefers-reduced-motion: reduce) {
  .split-word > span,
  .mask-line > span,
  .swa-line-in {
    transform: none !important;
  }
}