/* ── sections/clients.css — Key clients ──────────────────────────────────────
   The ten client logos in one row. A light section on the page ground: a short head, then a
   frosted band that runs the full width of the screen, holding the ten marks in slate, split by short
   hairline ticks.

   Size (owner's round two, item 21: "increase the logos sizes by decreasing the padding on either side"):
   the row spans the band nearly edge to edge (--edge each side, not the 1240px column), and every cell is
   exactly its logo plus the same margin (--pad logo units, half each side). So the wide marks no longer
   decide one big cell for all ten: the row is shared out in proportion to the logos (flex-grow = logo + pad)
   and each logo fills its own cell but for that margin. The marks keep the balance tuned by eye
   (--w, --f on each cell) and scale with the screen, with no breakpoint steps.

   Hover (a real mouse), keyboard focus or a tap (clients.js adds .is-lit): the cell becomes a white rounded
   tile and the slate logo cross-fades to the colour logo, which sits pixel-exactly over it (the
   reveal, kept at the owner's request). The tile is white because three colour files carry their own white
   ground.

   Widths: one row of ten down to 900px; two rows of five below that (a zero-height break in the flex row).

   Motion: the band rises in with the shared .rv6, nothing more; the logos stay slate until one is hovered,
   focused or tapped (no colour sweep on first view). Reduced motion and ?static=1 get the same slate row. */

.s7c-root {
  --pad: 40;                                 /* the margin round each logo, in logo units (half each side) */
  --edge: clamp(16px, 1.8vw, 28px);          /* the room left at each end of the row */
  --cell-y: clamp(12px, 1.3vw, 20px);        /* space above and below the tallest marks */
  --tick: rgba(0, 57, 108, .12);
  scroll-margin-top: 36px;                   /* a #clients link parks the eyebrow under the header, not behind it */
}
/* spacing: the site's section step on top (under the dotted AC's band); the explore section below opens with the
   shorter step (--s7-sec-sm, sections/explore.css), so the bottom is the rest: one even gap between the two */
.s7-sec.s7c-root { padding-bottom: calc(var(--s7-sec) - var(--s7-sec-sm)); }
.s7c-root .s7c-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.s7c-root .s7c-head { max-width: none; margin-bottom: clamp(18px, 2.2vw, 28px); }

/* ── the band (full width) and the row on it ── */
.s7c-root .s7c-band {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .56));
  border-block: 1px solid rgba(0, 57, 108, .08);
  box-shadow: inset 0 1px 0 #fff, 0 22px 44px -34px rgba(0, 42, 80, .4);
}
.s7c-root .s7c-row {
  list-style: none; margin: 0 auto; padding: 4px 0;
  width: min(1480px, 100% - 2 * var(--edge));
  display: flex; align-items: stretch;
}
.s7c-root .s7c-cell {
  --wf: calc(var(--w) * var(--f, 1));        /* the logo's width in units */
  --wv: calc(var(--wf) * (1 - var(--trim, 0)));   /* what shows of it (--trim: Reliance's box is cut to its letters) */
  position: relative; min-width: 0;
  flex-grow: calc(var(--wv) + var(--pad)); flex-shrink: 1; flex-basis: 0;
  display: flex; align-items: center; justify-content: center;
  padding-block: var(--cell-y);
}
/* the ticks between cells (hidden beside a lit tile, so the tile never has a line run into it) */
.s7c-root .s7c-cell + .s7c-cell::before {
  content: ""; position: absolute; left: 0; top: 32%; bottom: 32%; width: 1px; background: var(--tick);
  transition: opacity .2s linear;
}
/* the white tile, shown when the cell is lit */
.s7c-root .s7c-cell::after {
  content: ""; position: absolute; inset: 3px; border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 42, 80, .1), 0 16px 30px -18px rgba(0, 42, 80, .45);
  opacity: 0; transform: scale(.94); pointer-events: none;
  transition: opacity .18s linear .07s, transform .32s var(--ease);   /* out: the colour logo leaves first */
}

/* ── one logo: the slate mono file, and the colour file exactly over it ──
   width: its share of the cell, so the margin left over is the same for every logo (on what shows of it) */
.s7c-root .s7c-lg {
  position: relative; z-index: 1; display: block; flex: none;
  width: calc(100% * var(--wf) / (var(--wv) + var(--pad))); aspect-ratio: var(--ar);
}
.s7c-root .s7c-lg img { position: absolute; display: block; max-width: none; }
.s7c-root .s7c-m { inset: 0; width: 100%; height: 100%; filter: url(#s7c-mono); transition: opacity .2s linear .08s; }
.s7c-root .s7c-knock .s7c-m { filter: url(#s7c-knock); clip-path: inset(33% 6% 32% 7%); }   /* cut the box edges, where resampling thins the alpha */
.s7c-root .s7c-solid .s7c-m { filter: url(#s7c-solid); }
.s7c-root .s7c-lift .s7c-m { filter: url(#s7c-lift); }
.s7c-root .s7c-cb {
  position: absolute; inset: 0; opacity: 0; transform: scale(calc(var(--cs, 1) * .96));
  transition: opacity .08s linear, transform .32s var(--ease);
}
.s7c-root .s7c-c { left: var(--l, 0%); top: var(--t, 0%); width: var(--cw, 100%); height: var(--ch, 100%); }

/* ── lit: hover (real mouse only), focus, or .is-lit (a tap, from clients.js) ── */
.s7c-root .s7c-cell:is(.is-lit, :focus-within)::after { opacity: 1; transform: none; transition: opacity .12s linear, transform .45s var(--ease); }
.s7c-root .s7c-cell:is(.is-lit, :focus-within) .s7c-m { opacity: 0; transition: opacity .12s linear; }
.s7c-root .s7c-cell:is(.is-lit, :focus-within) .s7c-cb { opacity: 1; transform: scale(var(--cs, 1)); transition: opacity .2s linear .1s, transform .45s var(--ease); }
.s7c-root .s7c-cell:is(.is-lit, :focus-within)::before,
.s7c-root .s7c-cell:is(.is-lit, :focus-within) + .s7c-cell::before { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .s7c-root .s7c-cell:hover::after { opacity: 1; transform: none; transition: opacity .12s linear, transform .45s var(--ease); }
  .s7c-root .s7c-cell:hover .s7c-m { opacity: 0; transition: opacity .12s linear; }
  .s7c-root .s7c-cell:hover .s7c-cb { opacity: 1; transform: scale(var(--cs, 1)); transition: opacity .2s linear .1s, transform .45s var(--ease); }
  .s7c-root .s7c-cell:hover::before, .s7c-root .s7c-cell:hover + .s7c-cell::before { opacity: 0; }
}
/* keyboard: the site's 3px navy ring (base.css), moved from the logo box to the tile round it.
   Without :has() the site's own ring on the logo box stays. */
@supports selector(:has(a)) {
  .s7c-root .s7c-lg:focus-visible { outline: none !important; }
  .s7c-root .s7c-cell:has(.s7c-lg:focus-visible)::after { box-shadow: 0 0 0 3px var(--navy), 0 16px 30px -18px rgba(0, 42, 80, .45); }
}

html.fx-reduce .s7c-root .s7c-cell::after { transform: none; }
html.fx-reduce .s7c-root .s7c-cb { transform: scale(var(--cs, 1)); }

/* ── two rows of five (small tablets and phones) ──
   A zero-height, full-width item after the fifth logo breaks the row; each row of five then shares its own
   width out the same way. The rows are split by a hairline and the ticks restart on each row. The row is held
   to 620px so a tablet's marks stay a little under the one-row desktop's. */
@media (max-width: 899px) {
  .s7c-root { --pad: 52; }
  .s7c-root .s7c-row { flex-wrap: wrap; width: min(620px, 100% - 2 * var(--edge)); }
  .s7c-root .s7c-row::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  .s7c-root .s7c-cell { flex-basis: 1px; }   /* not 0: zero-width cells would all fit on the break's own line */
  .s7c-root .s7c-cell:nth-child(n + 6) { order: 2; border-top: 1px solid var(--tick); }
  .s7c-root .s7c-cell:nth-child(6)::before { content: none; }
}
/* phones: a slimmer margin, so the marks get most of the width (no ticks; the row line alone splits the rows) */
@media (max-width: 560px) {
  .s7c-root { --pad: 26; --cell-y: 12px; }
  .s7c-root .s7c-row { padding: 2px 0; }
  .s7c-root .s7c-cell + .s7c-cell::before { content: none; }
  .s7c-root .s7c-cell::after { inset: 2px; border-radius: 12px; }
}