/* ==========================================================================
   AMIN APAC — profile-clients.css
   "Trusted by", the client logo band. On profile-v2.html only.

   THE REFERENCE (client direction, 2026-09-02) is unitedcarriers.com's trust
   strip: a small label, a hairline, and a single row of marks drained to grey.
   What carried over and what did not:

     - the label and the hairline under it. The rule is what makes the row a
       BAND rather than a stray line of pictures; without it the marks float in
       the page with nothing saying what they are.
     - the marks at one optical size, greyscale at rest.
     - NOT the marquee. The reference scrolls its strip because it has thirty
       logos and no room; our members have between three and eight. A marquee
       over eight marks animates to hide nothing, puts the content behind
       motion for anyone who reads slowly, and needs a reduced-motion fallback
       that is just... the static row we could have shipped. It is also a lie
       about volume: an endless belt implies more clients than the eight named.
     - NOT a dark ground. The band sits between two light sections and the page
       already spends its one inversion on the footer.

   WHERE IT SITS AND WHY. Between "In practice" and "Services", which was the
   client's own instruction and is the better of the two candidates. The other
   was after Services and immediately before Work - but the work cards for M2.0
   are photographs with JLL, Canon and Monde Nissin's logos burned into them,
   and a logo band butted against three logo images reads as the same content
   twice. Here it has the whole Services section between it and the cards.

   DELETABLE SET: this file, js/profile-clients.js, and the one
   <section id="trustSec"> in profile-v2.html. Nothing else references any of
   them.

   NOT id="clientsSec", AND THAT IS LOAD-BEARING - the same trap #svc documents.
   profile.js still runs on this page and still calls set("clientsSec", ...),
   which unhides the element and writes chips into a #clients child. It no-ops
   today only because neither id exists on this page. Name this section
   clientsSec and profile.js will find it and paint the OLD block over the new
   one.
   ========================================================================== */

.trust{
  /* Tighter than --sec on purpose. This is a band between two sections, not a
     section of its own: it makes one short claim and hands the page on. At the
     full section rhythm it read as an interruption in the argument rather than
     a beat inside it. */
  padding:clamp(40px, 4.4vw, 64px) 0;
  background:var(--white);
}

/* A SMALL HEADING, NOT AN EYEBROW. It shipped as 12px uppercase at .16em -
   correct for "Trusted by:", a two-word label, and unreadable for a sentence
   with an agency name in it. Uppercase letterspaced type is a device for four
   words, and "WHO M2.0 COMMUNICATIONS WORKS WITH" set that way is a line the
   eye has to decode rather than read.

   20px against the 26px of .profile-block h2 and the section h2s above it. The
   band is a beat between two sections, not a section: it should read as a
   heading and still be the quietest one on the page. */
/* CENTRED, AND WITHOUT TRACKING. Two corrections from the 2026-09-02 audit.

   THE TRACKING WAS THE ONLY BREACH OF base.css's RULE ON THE PAGE: "tracking
   tightens as size grows, and the negative range starts at the h3 step.
   Nothing below 30px carries it." This was 20px at -.01em. Everything else on
   the page obeys, which is exactly why this is worth closing rather than
   amending the rule to fit it.

   CENTRED because of what follows it. This band is the last left-aligned
   thing before the services stack, which is the one centred band on the page,
   and a 20px label hard against the left gutter immediately above a centred
   68px display stack made the change of axis read as a mistake rather than as
   a change of gear. Centring the label makes the centred passage two elements
   long, so the eye is led into it. The marks below are a full-bleed marquee
   and have no axis of their own to contradict.

   Reverses in one declaration if the left anchor is wanted back. */
.trust-lab{
  display:block;
  margin-bottom:var(--s5);
  text-align:center;
  color:var(--black);
  font-size:var(--pf-h5);line-height:1.4;font-weight:500;
}

/* The hairline the reference puts under its label, and the only rule in the
   band. --line at 1.23:1 is right here and wrong on a 3px dot - see the note
   on .svc-items in css/profile-services.css. A 1px line running the full
   measure is legible at a contrast a dot is not. */
/* THE HAIRLINE IS GONE (client direction, 2026-09-02). The reference puts a
   rule under its label and this band carried one from the first build; with the
   marks full-bleed and moving, the rule was the only thing still drawing a box
   round them - a line stopping the strip from reading as a strip.

   The gap does the work the rule was doing. 24px under a 20px heading already
   separates the heading from the marks; the rule was saying a second time what
   the space had said once.

   WHAT THE REMOVED RULE USED TO FIX, kept here because the next person to add a
   line to this band will hit it: it began on .trust-row, which is the element
   the animation translates, so the rule slid left with the marks. It only
   looked stationary because the track is max-content wide and the border ran
   the whole of it. Anything drawn on this band belongs to .trust-vp, never to
   the thing moving inside it. */
.trust-vp{padding-top:var(--s6)}

.trust-row{
  display:flex;flex-wrap:wrap;align-items:center;
  /* Row gap much smaller than column gap: when eight marks wrap to two lines
     the two lines are one row of logos, not two rows of anything. */
  gap:var(--s8) clamp(24px, 2.8vw, 44px);
  list-style:none;margin:0;padding:0;
}

/* FIXED CELLS, AND HEIGHT ALONE COULD NOT DO THIS.

   base.css normalises .client-mark by height and says why: these are wordmarks
   as often as symbols, so fixing the width would set them at eight different
   sizes. That is right for an 18px chip and not enough here. Measured across
   all 28 files - every one rasterised to a uniform 48px height - the aspect
   ratios run from 0.46 (NBA, a tall narrow symbol) to 7.79 (Hyundai, a wide
   lockup), a seventeenfold spread. At a flat 28px height that renders NBA 13px
   wide beside Canon at 134, which is what the first build looked like: not a
   row of marks, a row of accidents.

   BOUND ON BOTH AXES, so a mark is limited by whichever of its dimensions
   would otherwise run away. The crossover is 136/48 = 2.8: anything squarer
   than that is height-bound and fills the cell vertically, anything wider is
   width-bound and fills it horizontally. Neither can dominate.

   THE CELL IS FIXED WIDTH, not content width, and that is the other half. With
   items sized to their marks, a 16px NBA and a 112px Canon sat the same gap
   apart and the row read as randomly spaced. An even cell makes the RHYTHM
   regular while the marks inside it stay different sizes, which is what a trust
   strip is: a row of equal slots, not a row of equal pictures.

   48px AND NOT 36, AND ONE MEMBER PAYS FOR IT (client direction, 2026-09-02).
   36 was sized to keep AsiaWorks' eight marks on a single line at 1440; that
   is 1345px of the 1352 available, so the whole band was being held to the
   worst case in the data and every other member got small logos to pay for it.

   At 48/160 the six-mark members and below still hold one line - 6 x 160 plus
   5 gaps is 1160 - and AsiaWorks alone wraps to two. That is the right trade:
   a two-line band on one profile of eleven, against marks a third larger on
   the other seven. Row gap goes to --s8 so a wrapped band reads as one block
   of marks rather than two rows of something. */
.trust-item{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:160px;height:48px;
}
.trust-mark{
  max-height:48px;max-width:136px;
  width:auto;height:auto;
  display:block;
  /* Drained at rest, its own colour under the cursor - the treatment base.css
     already set for .client-mark. Eight brand palettes next to a page built on
     one purple is the fastest way to make a client list look like a banner ad.
     .82 rather than the chip's .72: these are bigger and on white, where the
     chip sat on --mist. */
  filter:grayscale(1);opacity:.82;
  transition:filter 200ms ease, opacity 200ms ease;
}
.trust-item:hover .trust-mark{filter:none;opacity:1}


/* ==========================================================================
   THE CAROUSEL
   Armed by js/profile-clients.js only when the track is wider than this box -
   a member whose marks fit keeps the static wrapping row and never enters any
   of the rules below.
   ========================================================================== */

/* FULL-BLEED, AND THE BAND IS THE ONLY PLACE ON THIS PAGE THAT WANTS TO BE.
   A belt that starts and stops at the 1400px measure reads as a widget in a
   box; one that runs off both edges reads as a strip passing through, which is
   what a marquee is for. The wrap's own padding is cancelled so the marks reach
   the viewport edge, and the heading above it stays on the measure. */
.trust-vp.is-marquee{
  overflow:hidden;
  width:100vw;
  margin-inline:calc(50% - 50vw);
  padding-inline:0;

  /* THE EDGE FADE. A moving strip has to end somewhere, and a hard cut at the
     window edge reads as a mark being sliced rather than leaving - the eye
     tracks the logo, hits the boundary, and the boundary wins. A mask hands the
     mark off instead of cutting it.

     MASK, NOT A GRADIENT OVERLAY. Two absolutely-positioned white gradients
     would do the same thing on this white ground and break the moment anyone
     changes the section's background - a fade to a colour it is not sitting on
     is a smear. A mask fades to whatever is actually behind it.

     THE FADE SITS IN THE GUTTER, WHICH IS THE ARGUMENT FOR THE FULL BLEED.
     Measured at 1440: the wrap gives 1352 of content between 44px gutters. A
     contained strip would have to spend its fade on the measure itself - about
     120px at each end of 1352, so the first and last mark are permanently half
     dissolved inside the content area. Run full width and the same fade covers
     the 44px gutter first and only 76px of measure, and it dissolves marks over
     ground that holds nothing else.

     Percentages, not pixels: the fade should be a proportion of the strip at
     every width rather than a fixed bite that swallows a 390px screen. */
  -webkit-mask-image:linear-gradient(to right,
    transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(to right,
    transparent 0, #000 9%, #000 91%, transparent 100%);
}

.is-marquee .trust-row{
  flex-wrap:nowrap;
  /* Column gap OFF - it moves to a margin on each item so that two copies are
     an exact multiple of one unit. The note in js/profile-clients.js has the
     arithmetic. */
  column-gap:0;
  width:max-content;
  animation:trust-belt var(--dur, 40s) linear infinite;
}
.is-marquee .trust-item{margin-right:clamp(24px, 2.8vw, 44px)}

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

/* PAUSE ON HOVER, and it is not a flourish - the marks are greyscale at rest
   and take their colour back under the cursor, so a reader who stops on one has
   already said they want a closer look. A belt that keeps moving takes it away
   again. Focus pauses it too, for anyone arriving by keyboard. */
/* The whole band is the pause target, not the row inside it. The row is 48px
   of a 72px box, so aiming at a moving 48px strip to stop it moving is a
   coordination test. Hovering the band anywhere stops it. */
.trust-vp.is-marquee:hover .trust-row,
.trust-vp.is-marquee:focus-within .trust-row{animation-play-state:paused}

/* REDUCED MOTION GETS A SCROLLABLE ROW, NOT A FROZEN ONE. Freezing an
   overflowing track hides the last marks permanently - the animation was what
   made them reachable, so taking it away has to hand back another way in. The
   duplicate is hidden here because scrolling past the seam into a second copy
   of the same fifteen brands reads as a bug. */
@media (prefers-reduced-motion:reduce){
  .trust-vp.is-marquee{
    /* THE VIEWPORT SCROLLS, NOT THE ROW, and putting it on the row was a bug
       that measured as working. .trust-row is width:max-content, so its own box
       is exactly as wide as its contents and overflow-x on it has nothing to
       overflow - scrollWidth equalled clientWidth and the last marks stayed
       unreachable, which is the whole thing this query exists to prevent. The
       clipping box is the one that has to scroll. */
    overflow-x:auto;scrollbar-width:thin;
    /* Back inside the measure: a full-bleed strip that the reader now has to
       drag would run its scroll under the window edges. */
    width:auto;margin-inline:0;
  }
  .is-marquee .trust-row{animation:none}
  .is-marquee .trust-dup{display:none}
  /* NO FADE WHEN THE READER IS DRIVING. The mask exists to soften marks
     leaving on their own; over a strip somebody is dragging by hand it fades
     the very mark they are scrolling towards. */
  .trust-vp.is-marquee{-webkit-mask-image:none;mask-image:none}
}

/* THE NAMES LINE - every client we hold no mark for, as a list rather than as
   a row of missing pictures. js/profile-clients.js says why the two are
   separated; this is what the second register looks like.

   SMALLER AND DOT-SEPARATED, deliberately unlike the cells above. If it were
   set at the marks' size with the marks' spacing it would read as the same row
   continuing and failing, which is exactly the build this replaced. At 16px in
   a run-on list it reads as what it is: the rest of the roster, named.

   The separator is the .svc-items dot at the same measured value - #B9B9C2,
   2.14:1 - and for the same reason: --line at 1.23:1 is an absent dot, and the
   thing telling a reader these are thirty separate names cannot be invisible.

   Drawn in CSS, not typed into the markup, so the list stays a list for a
   screen reader rather than becoming one string with bullets in it. */
.trust-names{
  display:block;
  list-style:none;margin:0;padding:0;
  font-size:16px;line-height:28px;
  color:var(--gray);
}
/* No rule here either, for the reason on .trust-vp above - a band that drew one
   for Harper (names only, no marks) and none for M2.0 would be two different
   components. The spacing is all that separates the registers, and it is the
   only thing that needs to.

   The two padding values differ because the jobs differ: under a heading this
   list needs the heading's gap, and under a row of marks it needs clear air
   from the marks. */
.trust-names{padding-top:var(--s6)}
.trust-vp + .trust-names{padding-top:0;margin-top:var(--s7)}

/* INLINE, AND THE SEPARATOR TRAILS THE ITEM RATHER THAN LEADING THE NEXT ONE.

   Built first as a wrapping flex row with the .svc-items treatment - an
   absolutely-positioned dot on `li + li`, sitting in the gap to its left. In a
   short centred list that is correct. Over thirty-three names across two lines
   it is not: the first item on every wrapped line kept the dot belonging to the
   item above it, so line two opened "- Dole" with the mark pointing at nothing.
   Flex has no way to know an item became first on its line.

   Inline layout does, because the browser chooses the break. The separator is
   an ::after on every item but the last, glued to its own name with a no-break
   space, so the only place a line can break is AFTER a dot. A dot can end a
   line, which is what a separator should do; it can never start one.

   A typographic middot here, where .svc-items draws a circle. That note rules
   out font punctuation at 11px uppercase, where a middot lands high and reads
   thin. This is 16px lower-case at normal tracking, which is exactly where the
   glyph is reliable - and the drawn version cannot be used anyway, since a
   positioned box is the thing that caused the orphan.

   #B9B9C2 is the value measured for the services list: 2.14:1, visible as a
   mark and quieter than the names it divides. --line at 1.23:1 would be an
   absent dot again. */
.trust-names li{display:inline}
.trust-names li:not(:last-child)::after{
  content:" ·";
  color:#B9B9C2;
}

@media (max-width:720px){
  .trust-row{gap:var(--s5) var(--s7)}
  .trust-item{width:118px;height:38px}
  .trust-mark{max-height:38px;max-width:100px}
  .trust-names{font-size:15px;line-height:26px}
}

/* The grayscale swap is a transition, so base.css's global reduced-motion rule
   already removes it and the mark simply arrives in colour on hover. Nothing
   else in this band moves, which is the point of not shipping the marquee. */