/* ============================================================
   WWD 03 · Client partners. A plain chapter after the Offer's pinned
   strip on what-we-do.html: the strip's horizontal travel ends, and
   this chapter pushes up on the normal vertical scroll (§4.9). No
   comp — built to the site's system (Julian, 5 Sep 2026; recomposed
   the same day to the Promise's pattern).

   The Promise's board (04-quotes): the 1440×900 frame is the viewport,
   full-width down to a 16:10 window, height-fit and centred on shorter,
   wider ones, and cqw units size everything to it. The statement is
   the Promise's headline — the display face at 84px (5.8333cqw),
   centred, wrapping naturally in the Promise's 81.561% column — set
   in the upper half. Under it, centred, the CLIENT PARTNER EXPERIENCE
   eyebrow; under that a HORIZONTAL ticker of client logos, edge to
   edge of the board, on the offerings intro's ticker mechanics: the
   list is built twice and the loop translates exactly one set, so the
   wrap is seamless. The ticker runs on its own clock — a deliberate
   §4.8 override, the second on this page after the phrase ticker
   (Neena, 27 Aug 2026). Reduced motion and mobile: a static list.

   Logos are assets/img/clients/client-<name>.png — Maddie's marks
   (5 Sep 2026), cropped and set in paper for the cobalt (§12 #19).
   ============================================================ */

#wwd-clients{--chapter-bg:var(--cobalt);color:var(--cream);height:100lvh}   /* the large viewport, as base.css (14 Sep 2026): the board fits the width, the ground fills the collapsed-toolbar height */

#wwd-clients .board{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;aspect-ratio:1440/900;
  container-type:size;container-name:b}
#wwd-clients .board > *{position:absolute}
@media(min-width:761px) and (not ((pointer:fine) and (max-height:560px))){
  #wwd-clients .board{width:min(100vw,160svh)}
}

/* the statement: the Promise's headline, its block centred on board
   y400 (27.78cqw) — three lines at 84px span y280–520 */
/* 86% (was the Promise's 81.561%): Julian's 5 Sep 2026 statement breaks
   on its own \n after "partners", and that first line runs ~1205px in
   Aqva at 84px — wider than the Promise's 1174 column, which dropped
   "partners" to a line of its own. Three lines (280–520) still clear
   the eyebrow at 600. */
#wwd-clients .h{left:50%;top:27.78cqw;transform:translate(-50%,-50%);width:86%;
  text-align:center;font-family:var(--display);font-weight:900;
  font-size:5.8333cqw;line-height:.9524em;letter-spacing:-.015em;color:var(--cream);
  white-space:pre-line}  /* a \n in the copy forces a line break (Julian, 5 Sep 2026) */

/* the eyebrow, centred, at y600 (41.67cqw); mono 16 in cqw units */
#wwd-clients .eyebrow{left:50%;transform:translateX(-50%);top:41.67cqw;
  font-family:var(--mono);font-size:1.1111cqw;line-height:.875em;
  letter-spacing:.08em;text-transform:uppercase;opacity:.85;white-space:nowrap}

/* the ticker strip: y650–750 (45.14–52.08cqw), edge to edge; each
   logo has an 18cqw slot (259 at 1440). Maddie's marks are normalised
   to one WIDTH (a ~197px tile each), so they are set by width — 10.4cqw
   (150) — height following, capped for the tallest; left-aligned in
   the slot, and one set = --n slots (set by the js) */
#wwd-clients .logos{left:0;top:45.14cqw;width:100%;height:6.94cqw;overflow:hidden}
#wwd-clients .ltrack{position:absolute;left:0;top:0;height:100%;width:100%;
  will-change:transform;animation:wwd-clients-ticker 30s linear infinite}
@keyframes wwd-clients-ticker{from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--n) * 18cqw))}}
#wwd-clients .lr{position:absolute;top:0;height:100%;width:18cqw;left:calc(var(--i) * 18cqw);
  display:flex;align-items:center}
#wwd-clients .lr img{display:block;width:10.4cqw;height:auto;max-height:4.6cqw;
  object-fit:contain;object-position:left center}

/* the pause control (WCAG 2.2.2; the strip itself since 25 Sep 2026,
   Julian — was a chip under it): a transparent button over the strip's
   exact box. A press toggles a pause that stays — on the strip on a
   phone, on the glyph with a mouse (below, 26 Sep 2026).
   The glyph — pause bars while running, a play triangle while paused —
   sits centred just under the strip, and shows only on hover, keyboard
   focus or pause: a cut, no fade.
   Cream on cobalt is 3.29:1, over 1.4.11's 3:1 for a graphic */
#wwd-clients .lplay{left:0;top:45.14cqw;width:100%;height:6.94cqw;z-index:2;
  background:transparent;border:0;padding:0;cursor:pointer;color:var(--cream)}
#wwd-clients .lplay:focus-visible{outline-offset:-3px}
#wwd-clients.is-paused .ltrack{animation-play-state:paused}
#wwd-clients .glyph{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);
  width:40px;height:40px;border-radius:50%;border:2px solid currentColor;display:none}   /* centred under the strip (Julian, 25 Sep 2026 — was at its right end, lost among the logos); a cream ring so it reads as a control. Inside the button, so hovering it keeps the hold. Every mark is a BORDER — high-contrast mode keeps borders and drops backgrounds and shadows */
#wwd-clients .lplay:focus-visible .glyph,
#wwd-clients.is-paused .glyph{display:block}
/* WITH A MOUSE the round glyph is the button (Julian, 26 Sep 2026 — a
   press on the logos themselves toggled it, which read wrong): hovering
   the strip, or the band under it where the glyph hangs, shows it; only
   a press on the glyph pauses or plays (wwd-03-clients.js ignores the rest).
   Hovering no longer holds the strip. The band is the button's own
   ::after, so moving from a logo down to the glyph never leaves the
   hover. Phones (no hover) keep the strip as the button, as before —
   and on a phone a tap leaves :hover stuck, so none of this applies. */
@media(hover:hover){
  #wwd-clients .lplay{cursor:default}
  #wwd-clients .lplay::after{content:"";position:absolute;left:0;right:0;top:100%;height:64px}
  #wwd-clients .lplay .glyph{cursor:pointer;z-index:1}   /* above the band, which comes later and would take the press */
  #wwd-clients .lplay:hover .glyph{display:block}
}
#wwd-clients .glyph::before,#wwd-clients .glyph::after{content:"";position:absolute;top:11px;
  width:0;height:14px;border-left:4px solid currentColor}   /* the pause bars, inside the 2px ring */
#wwd-clients .glyph::before{left:12px}
#wwd-clients .glyph::after{left:20px}
#wwd-clients.is-paused .glyph::before{left:14px;height:0;
  border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}   /* the play triangle */
#wwd-clients.is-paused .glyph::after{display:none}
/* high-contrast mode (Windows' forced colours, 25 Sep 2026): the system
   swaps every colour for its own and drops every background.
   · the glyph opts out of the swap (the triangle's transparent sides
     would otherwise be coloured in) and draws in the system's text
     colour, legible on whatever ground the system chose
   · the logos are cream marks on transparent PNGs, drawn for cobalt —
     on the system's white they all but vanished. The strip keeps a
     cobalt band behind them, in this mode only: a backplate, the
     standard fix for transparent artwork */
@media(forced-colors:active){
  #wwd-clients .glyph,#wwd-clients .glyph::before,#wwd-clients .glyph::after{forced-color-adjust:none}
  #wwd-clients .glyph{color:CanvasText}
  #wwd-clients .logos{forced-color-adjust:none;background:var(--cobalt)}
}

/* static fallback: the animation is cut and the clones dropped; the
   nine marks sit in a centred, wrapping row */
@media(prefers-reduced-motion:reduce){   /* not the zoomed state: zoomed, the ticker keeps moving, pause control and all (Julian, 25 Sep 2026) */
  #wwd-clients .ltrack{animation:none;display:flex;flex-wrap:wrap;justify-content:center;
    gap:2cqw 3.5cqw;height:auto}
  #wwd-clients .logos{overflow:visible;height:auto}
  #wwd-clients .lr{position:static;width:auto;height:auto}
  #wwd-clients .lr.clone{display:none}
  #wwd-clients .lplay{display:none}
}

/* mobile (Julian, 6 Sep 2026; replaces the first pass's static grid):
   flow layout under the nav band — the statement, the eyebrow, then the
   SAME horizontal ticker as the desktop, edge to edge, in viewport units
   (the board's cqw have no container here): 44vw slots, 120px marks, the
   loop translating one set of --n slots, seamless. The §4.8 override
   holds on phones too. Reduced motion keeps its static list. */
@media(max-width:760px),(pointer:fine) and (max-height:560px){
  /* centred, in halves (Julian, 6 Sep 2026): the statement centred in
     the top half (under the nav band); the eyebrow and the ticker as a
     pair on the bottom half's centre line — the eyebrow ending the
     third quarter, the ticker starting the fourth */
  #wwd-clients{height:100lvh;min-height:100lvh;padding:0;
    display:grid;grid-template-rows:50lvh 25lvh 25lvh;grid-template-columns:100%}
  #wwd-clients .board{display:contents}
  #wwd-clients .board > *{position:static;transform:none}
  #wwd-clients .h{grid-area:1/1;align-self:center;width:auto;margin:0 var(--m);padding-top:72px;
    font-size:clamp(34px,10.5vw,44px);text-align:center}   /* up from 9vw — it read small (Julian, 6 Sep 2026) */
  #wwd-clients .eyebrow{grid-area:2/1;align-self:end;margin:0 0 14px;font-size:12px;line-height:14px;text-align:center}
  #wwd-clients .logos{grid-area:3/1;align-self:start;position:relative;left:auto;top:auto;width:100vw;margin:14px 0 0;
    height:52px;overflow:hidden}   /* left/top: the board's cqw offsets must not apply here */
  #wwd-clients .ltrack{position:absolute;left:0;top:0;height:100%;width:100%;
    animation:wwd-clients-ticker-m 26s linear infinite}
  #wwd-clients .lr{position:absolute;top:0;height:100%;width:44vw;left:calc(var(--i) * 44vw)}
  #wwd-clients .lr img{width:120px;height:auto;max-height:44px}
  #wwd-clients .lplay{grid-area:3/1;align-self:start;position:relative;left:auto;top:auto;
    width:100vw;height:52px;margin:14px 0 0}   /* the strip's own box, as the .logos rule */
}
@keyframes wwd-clients-ticker-m{from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--n) * 44vw))}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  #wwd-clients .ltrack{animation:none;position:static;display:flex;flex-wrap:wrap;gap:18px 24px;height:auto}
  #wwd-clients .logos{height:auto;overflow:visible;width:auto;margin-left:0}
  #wwd-clients .lr{position:static;width:auto;height:auto}
  #wwd-clients .lr.clone{display:none}
  #wwd-clients .lplay{display:none}
}

/* ZOOMED (WCAG 1.4.4 — the zoom pass, Julian, 25 Sep 2026): on a computer
   at a narrow or short window — where 200% browser zoom lands — this
   section is in its stacked, still layout, and its type is set at the
   size the board draws it, in rem, so zoom enlarges it (the phone sizes
   above are fitted to the screen and would cancel the zoom). !important
   beats the sizes the js writes inline; utils.js zoomFit() then eases
   back any line whose longest word would run past the edge. */
@media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){
  #wwd-clients .h{font-size:5.2rem!important;line-height:1!important}
  #wwd-clients .eyebrow{font-size:1rem!important;line-height:1.3!important}
  /* the chapter sizes to its text instead of three fixed thirds */
  #wwd-clients{height:auto!important;min-height:100lvh;grid-template-rows:auto auto auto!important;padding-bottom:calc(52px + 3rem)!important}   /* room for the pause/play glyph, which hangs 12 + 40px under the strip, and air below it (Julian, 25 Sep 2026; was 8svh, which cut it off) */
  #wwd-clients .h{align-self:start!important;padding-top:max(96px,11svh)!important;margin:0 var(--m)!important}
  #wwd-clients .eyebrow{align-self:start!important;margin:28px 0 14px!important}
}

/* HIGH CONTRAST (Julian, 25 Sep 2026): with <html data-contrast="high">
   (the switch on the privacy page, or the device's increase-contrast
   setting) the light type on this section's coloured ground turns ink,
   and so do the logos: they are one-colour cream marks on transparent
   PNGs, so brightness(0) takes every mark to black, knockouts intact.
   Nothing else changes. */
html[data-contrast="high"] #wwd-clients,html[data-contrast="high"] #wwd-clients .h,html[data-contrast="high"] #wwd-clients .lplay{color:var(--ink)}
html[data-contrast="high"] #wwd-clients .eyebrow{opacity:1}
html[data-contrast="high"] #wwd-clients .lr img{filter:brightness(0)}