/* ══════════════════════════════════════════════════════════════════════════
   CLIENT WALL

   Sits directly under the hero's 01–06 process band, closing the dark opening
   block: what we do → how it flows → who it was built for. Everything below
   this point is on the light ground, so the wall is styled dark to belong to
   the hero rather than starting the light region a section early.

   Two rows counter-scrolling, because one thin line of names reads as a
   ticker — something incidental running along the bottom of a screen. Two
   rows moving against each other read as a wall and show roughly twice as
   many names at any instant.

   Each entry carries a monogram tile. Those are typographic initials, NOT
   client logos — no trademark is reproduced. They exist so the row has the
   visual rhythm of a logo wall and so each entry already occupies the shape
   a real mark will take. Give an entry a `logo` in clients.js and the
   monogram is replaced by the mark in place, one client at a time.

   Names are live text: sharp at any resolution including an 85-inch panel,
   searchable, translatable, and free to load.

   ── LAYOUT NOTES ──────────────────────────────────────────────────────────
   The heading sits inside .wrap; the rails do NOT. The rows run the full
   width of the viewport so the edge fade lands on the screen edge, where a
   half-visible tile reads as "the wall continues", instead of landing in the
   middle of the content column, where the same half-tile reads as a bug.
   .clients-strip keeps overflow:hidden, so nothing here can widen the page.

   Mark size is NOT a fixed height. Fourteen marks whose aspect ratios span
   1:1 (Bayer) to 8.5:1 (Enterprise Mobility) cannot share a cap height and
   look the same size; the square ones look like postage stamps. clients.js
   measures each mark and writes --mark-scale, a power-law blend between
   equal-height and equal-area. See clients.js for the constants.
   ══════════════════════════════════════════════════════════════════════════ */

.clients-strip{
  /* Starts on the hero's own base colour and deepens from there, so the wall
     reads as the hero's dark block closing rather than a darker box pasted
     under it, and so the ground/light cut below is the strongest step on the
     page rather than a muddy halfway blend.
     No top rule. There used to be one, and it was right while the 01-06
     narrative band sat between the hero and this wall -- it was one edge in a
     rhythm of stacked bands. With the band gone the wall meets the hero
     directly, a rule there is the only thing dividing two near-identical
     darks, and it reads as a drawn line instead of an edge. */
  background:linear-gradient(180deg,#142746 0%,#0f2039 55%,#0b1a30 100%);
  padding-block:42px 46px;
  overflow:hidden}

.clients-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px 28px;
  margin-bottom:26px;flex-wrap:wrap}
.clients-head h2{font:650 12.5px/1 var(--display,system-ui,sans-serif);letter-spacing:.15em;
  text-transform:uppercase;color:#8fb8f0}
.clients-note{font-size:13.5px;line-height:1.55;color:#b6cbe4;max-width:62ch;text-align:right}

/* ── rails ─────────────────────────────────────────────────────────────── */
.clients-rail{display:flex;flex-direction:column;gap:14px;
  /* fade width is fixed in px, not a percentage: a percentage fade is 84px
     wide on a desktop and 23px on a phone, so the same wall reads differently
     at every width. */
  --fade:clamp(28px,6vw,132px)}
.clients-row{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}

.clients-track{display:flex;width:max-content;will-change:transform}
/* .is-live is added by clients.js only after the track has been filled and
   --dur computed from its measured width, so the wall never runs at a speed
   that happens to fall out of the viewport size. */
.clients-track.is-live{animation:clients-scroll var(--dur,90s) linear infinite}
.clients-row.rev .clients-track.is-live{animation-direction:reverse}
.clients-rail:hover .clients-track,
.clients-rail:focus-within .clients-track{animation-play-state:paused}
.clients-set{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none}

.clients-item{--tile-pad:24px;--tile-h:64px;--tile-min:158px;--tile-max:222px;--mark-cap:30px;
  display:flex;align-items:center;justify-content:center;gap:12px;flex:none;
  margin-right:12px;padding:0 var(--tile-pad);
  height:var(--tile-h);min-width:var(--tile-min);max-width:var(--tile-max);
  border-radius:10px;background:#fff;
  box-shadow:0 2px 10px -5px #02101f99;
  font:600 15.5px/1 var(--body,system-ui,sans-serif);letter-spacing:-.006em;
  color:#142746;white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease}
.clients-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px #02101fcc}

/* monogram — initials, not a mark */
.clients-mono{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:7px;
  font:700 12px/1 var(--display,system-ui,sans-serif);letter-spacing:.02em;background:currentColor}
.clients-mono span{color:#fff}
.clients-item:nth-child(3n+1) .clients-mono{color:#4269ed}
.clients-item:nth-child(3n+2) .clients-mono{color:#7f5fd0}
.clients-item:nth-child(3n+3) .clients-mono{color:#1c7f96}

/* --mark-cap is the height a mark of the reference aspect ratio gets; every
   other mark is that times --mark-scale, written per-logo by clients.js.
   max-width:100% keeps a very wide mark inside --tile-max rather than letting
   one wordmark set the width of the whole row. */
.clients-item img{height:calc(var(--mark-cap) * var(--mark-scale,1));
  width:auto;max-width:100%;object-fit:contain;display:block;
  /* Muted by default so fourteen brand colours don't fight each other —
     a wordmark's gold script beside an icon's cyan/orange reads as a
     directory, not a wall. Full colour is the reward for stopping to look. */
  filter:grayscale(1) opacity(.82);transition:filter .25s ease}
.clients-item:hover img,.clients-item:focus-within img{filter:grayscale(0) opacity(1)}
.clients-item.has-logo{padding:0 var(--tile-pad);gap:0}
/* text entries set their own width from the name; --tile-max is a mark guard */
.clients-item:not(.has-logo){max-width:none}

@keyframes clients-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* The dark block closes here. Keep the cut hard — a dark-to-light gradient
   across a section boundary reads as dirt — but give the light section room
   so its heading is not pressed against the join, and lift the join with a
   1px highlight so it reads as an edge and not as a seam. */
.clients-strip + .ei-section{padding-top:40px;box-shadow:inset 0 1px 0 #ffffffe6}

@media (prefers-reduced-motion:reduce){
  .clients-track,.clients-track.is-live{animation:none;width:auto}
  .clients-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .clients-set[aria-hidden="true"]{display:none}
}
body[data-motion="off"] .clients-track,
body[data-motion="false"] .clients-track{animation-play-state:paused}

@media (min-width:1800px){
  .clients-strip{padding-block:56px 60px}
  .clients-item{--tile-pad:28px;--tile-h:76px;--tile-min:190px;--tile-max:266px;
    --mark-cap:36px;font-size:18px;gap:14px}
  .clients-mono{width:40px;height:40px;font-size:15px}
  .clients-head h2{font-size:14.5px}.clients-note{font-size:15px}
}
@media (min-width:2600px){
  .clients-strip{padding-block:74px 78px}
  .clients-item{--tile-pad:38px;--tile-h:98px;--tile-min:250px;--tile-max:348px;
    --mark-cap:48px;font-size:24px;gap:18px;border-radius:13px;margin-right:16px}
  .clients-mono{width:52px;height:52px;font-size:20px;border-radius:11px}
  .clients-head h2{font-size:19px}.clients-note{font-size:19px}
  .clients-rail{gap:20px}
}
@media (max-width:760px){
  .clients-strip{padding-block:28px 30px}
  .clients-rail{gap:10px;--fade:clamp(20px,7vw,44px)}
  /* tighter tiles and a lower cap put ~3 marks per row on a 390px screen
     instead of 2.4, and the min/max band stops a 1:1 mark sitting next to an
     8.5:1 wordmark in tiles of wildly different widths */
  .clients-item{--tile-pad:13px;--tile-h:48px;--tile-min:106px;--tile-max:152px;
    --mark-cap:22px;font-size:13.5px;gap:9px;margin-right:8px}
  .clients-mono{width:28px;height:28px;font-size:11px;border-radius:6px}
  .clients-head{margin-bottom:15px;gap:8px}
  .clients-head h2{font-size:11px}.clients-note{font-size:12.5px;text-align:left;max-width:none}
  .clients-strip + .ei-section{padding-top:26px}
}