/* Client logo grid — design node 464:85928.

   A sibling of the intro on the same #001407 ground, so the two read as one
   continuous dark panel; only the intro carries the rounded top.

   TEN logos now (client, 2026-09-09), one more per row than the frame's eight.
   The card keeps the design's 338 x 196 SHAPE and simply gets smaller to make
   room: 1601 frame - (2 x 88 padding) - (4 x 24 gap) = 1329 / 5 = 265.8 wide,
   154.1 tall, i.e. 0.786 of the frame's card. Every length that used to be
   stated in design units against a 338 card is therefore a SHARE of the card
   now, so the whole grid rescales together and nothing has to be re-derived
   the next time a row gains or loses a logo.

   The radius follows the same scale: 40 x 0.786 = 31.5. */

.rdk-clients {
  position: relative;
  z-index: 1;
  padding: 0 calc(88 * var(--u)) calc(56 * var(--u));
  background: var(--rdk-black-green);
}

/* The case studies' eyebrow in type (css/cases.css), but in the intro label's
   colour ("Digital / Brand / Marketing", css/intro.css): green on desktop,
   lime on the phone. The case studies' grey read as borrowed in a section
   whose only other inks are white and green (client, 2026-09-24). */
.rdk-clients__eyebrow {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: 0 0 calc(40 * var(--u));
  font-family: var(--rdk-font-body);
  font-weight: 700;
  font-size: calc(15 * var(--u));
  line-height: calc(11 * var(--u));
  letter-spacing: calc(1.5 * var(--u));
  font-feature-settings: "frac" 1;
  text-transform: uppercase;
  color: var(--rdk-green);
}

.rdk-clients__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  gap: calc(24 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The card's ASPECT is load-bearing, not its height. Datascan is whole-card
   artwork carrying preserveAspectRatio="none", so a card whose aspect is not
   338/196 squashes it — the same trap the phone grid documents. */
.rdk-clients__card {
  position: relative;
  overflow: clip;
  aspect-ratio: 338 / 196;
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.15);
  border-radius: calc(31.5 * var(--u));
}

/* Each logo carries its own `--lw`: its DESIGNED width as a percentage of the
   card, i.e. the Figma width over 338. Height comes from the file, since every
   mark's viewBox is exactly its designed box. */
.rdk-clients__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--lw) * 1%);
  height: auto;
  max-width: none;
  translate: -50% -50%;
}

.rdk-clients__logo--exabeam       { --lw: 45.48; }   /* 153.71 / 338 */
.rdk-clients__logo--videoelephant { --lw: 40.90; }   /* 138.2 x 39.2 — the designed 125.671 + 10% */

/* THE BOTTOM ROW IS 10% OVER ITS DERIVED SIZE (client, 2026-09-09) — Sophos,
   Collibra, Manhattan Prep and Video Elephant, but NOT HP, which was held.
   It is a balance call against the top row, not a new rule, so the numbers
   below are stated at their final value with the derivation beside them.
   Two things it deliberately overrides: Video Elephant is a DESIGNED width
   (125.671 from Figma) and is now 10% past it, and Sophos breaks the 155 cap
   described below.

   No Figma node exists for the other three, so they are sized the way the
   services marquee sizes its undesigned marks: the rendered width x height GEOMETRIC
   MEAN is matched to the designed set's. Equalising WIDTH would tower a long
   thin wordmark over a chunky one, and equalising HEIGHT does the reverse.

   Collibra and Everpure take the set's own mean, ~64 on a 338 card. Sophos is
   185 x 20, a 9.3 aspect — thinner than anything designed here — and the mean
   would draw it 190 wide, past every other mark on the grid. It is matched to
   RADIANT instead (gm 52.5), which is the designed set's own long thin
   wordmark, and capped at 155 so it never out-runs Exabeam's designed 153.7.
   Replace all three if the client ever specs them. */
.rdk-clients__logo--sophos        { --lw: 50.45; }   /* 170.5 x 18.4 */
.rdk-clients__logo--collibra      { --lw: 42.80; }   /* 144.7 x 34.3 */
.rdk-clients__logo--everpure      { --lw: 45.30; }   /* 153.1 x 26.8 */
.rdk-clients__logo--manhattanprep { --lw: 48.82; }   /* 165 x 39.2 */

/* Dell and HP are round BADGES, and a badge cannot be sized by the same mean
   as a wordmark: for a 1:1 mark the geometric mean IS the diameter, so matching
   the set's 64 would draw a disc taller than every mark on the grid (the
   tallest designed one, Beyond Identity, is 50) and HP's solid circle would
   own the row. Set by eye against Exabeam, Sophos and Collibra instead, which
   is the only honest way to weigh a disc against a wordmark.

   THE TWO ARE NOT THE SAME SIZE, AND THAT IS THE POINT. Dell is a thin ring
   and HP a SOLID disc, so at equal diameter HP reads noticeably heavier —
   holding Dell ~13% over HP evens them out. Same optical correction the
   services icons carry (play and megaphone at +25%). HP was then held back
   from the bottom row's 10% (client, 2026-09-09), so the two have drifted
   apart: Dell 63, HP 55.7. */
.rdk-clients__logo--dell          { --lw: 18.64; }   /* 63 x 63, thin ring */
.rdk-clients__logo--hp            { --lw: 16.48; }   /* 55.7 x 55.7, solid disc */

/* Datascan arrives from Figma as full 338 x 196 card artwork with the logo
   already positioned inside (we stripped only the border path, which
   .rdk-clients__card draws in CSS instead). So it fills the card rather than
   being centred — more faithful than re-centring a cropped copy. */
.rdk-clients__logo--datascan {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  translate: none;
}

/* Figma's positioning box for Orca (91.748 x 37.535) is smaller than the
   artwork it holds (97.177 x 44.27, pinned to that box's top-left). Honour
   both, or the mark sits ~3u off where the comp puts it. The offsets are the
   BOX's half-width and half-height as shares of the card, so they rescale with
   everything else. */
.rdk-clients__logo--orca {
  --lw: 28.75;                                        /* 97.177 / 338 */
  --ox: 13.5722;                                      /* 45.874 / 338 */
  --oy: 9.5753;                                       /* 18.7675 / 196 */
  left: calc(50% - var(--ox) * 1%);
  top: calc(50% - var(--oy) * 1%);
  translate: none;
}

/* ---------- mobile: node 1:1918, a 390 frame ----------
   2 columns of the same cards, 169 x 98 with a 12 gap inside a 350 measure —
   five rows now rather than four. The card is unchanged; only the desktop grid
   had to shrink to fit a fifth column.

   The phone frame gives every logo its own size, and measured against the
   desktop shares it is EXACTLY 1.2x each one — so the whole block is that one
   multiplier rather than eleven restated numbers. (The first mobile pass
   derived them from the desktop card and came out ~20% short, which is the
   same fact seen from the other side.) */
@media (max-width: 767px) {
  .rdk-clients {
    padding: 0 20px 56px;
  }

  /* The case studies' phone eyebrow: 11px, no trailing slash — in lime, as
     the intro label is on the phone. */
  .rdk-clients__eyebrow {
    gap: 8px;
    margin-bottom: 20px;
    font-size: 11px;
    line-height: normal;
    letter-spacing: 1.32px;
    color: var(--rdk-lime);
  }

  .rdk-clients__eyebrow span[aria-hidden] {
    display: none;
  }

  .rdk-clients__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .rdk-clients__card {
    border-width: 0.5px;
    border-radius: 20px;
  }

  .rdk-clients__logo {
    width: calc(var(--lw) * 1.2%);
  }

  .rdk-clients__logo--orca {
    left: calc(50% - var(--ox) * 1.2%);
    top: calc(50% - var(--oy) * 1.2%);
  }

  .rdk-clients__logo--datascan {
    width: 100%;
    height: 100%;
  }
}