/* clients.small.css — 07 / Clients below 900px
 *
 * TWO BANDS: the designed mobile layout first, then the undesigned tablet
 * fallback at the end of the file. The tablet block is fenced with
 * `min-width: 768px`, so it cannot reach into the mobile block and the order
 * between them carries no meaning.
 *
 * MOBILE_SPEC §9. The desktop 62/38 grid collapses to one column: heading block,
 * then eight rows, each brand name + number chip on one line with the sector
 * beneath and — only while active — the description and the bracketed meta.
 *
 * NOTHING PINS HERE. On desktop this section freezes on its last row and the red
 * is then clipped away to uncover Achievements; the mobile handoff has both
 * sections in ordinary document flow, so the track, the hold and the curtain all
 * go. sequence.js gates the curtain on the same breakpoint.
 *
 * There is no hover on touch, so activation is scroll-driven — see advanceRows()
 * in main.js.
 */

@media (max-width: 767.98px) {

  /* The overlap exists to dock Clients as the hero unpins; nothing pins here, so
     it would only drag the section up over a hero that is still on screen. */
  .clients-track { margin-top: 0; }
  .clients-track__hold { display: none; }

  /* THE `Brands` ANCHOR, MOBILE'S OWN VALUE.
     clients.css lands desktop at -68vh. That number does not carry: it is
     calibrated against the 104vh head column with its sticky heading, and this
     sheet replaces that geometry with a stacked single column. Applied here it
     overshot to y=2213 with the heading 435px above the frame.

     POSITIVE, AND THAT IS NOT A TYPO. Mobile's window sits BEFORE the element's
     own top (1688px) rather than after it, so the arrival has to stop short
     instead of scrolling past — the opposite sign to desktop. 4.5vh puts the
     heading at +128px with four brand rows beneath it, which is the same frame
     desktop gets from its negative value.

     Measured on .clients__h2, never .clients__head — see the note in
     clients.css for what reading the container instead cost. */
  .clients { scroll-margin-top: 4.5vh; }

  .clients {
    position: relative;
    top: auto !important;      /* sequence.js measures and writes this on desktop */
    bottom: auto;
    clip-path: none !important;
    padding: 64px 20px 92px;
  }

  /* A 62% rule with no second column to divide. */
  .clients__divider { display: none; }


  /* --- heading block ------------------------------------------------------ */

  .clients__head { display: block; }
  .clients__headcol {
    height: auto;
    padding-right: 0;
    display: block;
  }
  .clients__sticky { position: static; }

  .clients__eyebrow { font-size: 10px; }
  .clients__h2 {
    margin: 16px 0 0;
    font-size: 34px;
    line-height: 1.02;
  }

  /* Stacked rather than split: on desktop the roster count and the industry meta
     sit at opposite ends of one rule. At 350px they are two mono lines around the
     paragraph instead, and the rule moves under the pair. */
  .clients__intro {
    padding-left: 0;
    text-align: left;
    margin-top: 20px;
  }
  .clients__roster {
    font-size: 10px;
    letter-spacing: .14em;
    padding-bottom: 0;
    border-bottom: 0;
    color: rgba(255, 255, 255, .78);
  }
  .clients__para {
    margin: 12px 0 0;
    max-width: none;
    font-size: 13px;
    line-height: 1.62;
  }
  .clients__meta {
    display: block;
    margin-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hair-on-red);
    font-size: 10px;
  }


  /* --- brand rows ---------------------------------------------------------
     display: contents on the two wrappers lets the six pieces be laid out by the
     row's own grid, so the bracket can sit at the bottom of the stack while
     staying inside .row__lead in the markup — the desktop layout needs it there,
     next to the name. */

  .rows { margin-top: 26px; border-top: 0; }

  .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name    chip"
      "sector  sector"
      "line    line"
      "bracket bracket";
    align-items: baseline;
    min-height: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--hair-on-red);
  }
  .row__lead, .row__tail { display: contents; }

  .row__name {
    grid-area: name;
    font-size: 28px;
    white-space: normal;
    transition: color 240ms ease;
  }
  .row__chip {
    grid-area: chip;
    justify-self: end;
    font-size: 9.5px;
    padding: 5px 7px;
    transition: background 300ms ease, color 300ms ease;
  }
  .row__sector {
    grid-area: sector;
    margin-top: 10px;
    font-size: 9.5px;
    transition: color 240ms ease;
  }
  .row__line {
    grid-area: line;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    display: none;
  }
  .row__bracket {
    grid-area: bracket;
    margin-top: 6px;
    font-size: 9.5px;
    line-height: 1.7;
    white-space: normal;
    display: none;
  }
  /* Only the active row carries a description, as in the handoff — the two lines
     are removed from the flow rather than hidden, so an inactive row is tight. */
  .row.is-active .row__line,
  .row.is-active .row__bracket { display: block; }

  /* The growing hairlines are dropped: they read as jitter when the trigger is
     scroll position rather than intent (MOBILE_SPEC §9). Colour and background
     are the only transitions left. */
  .row__hair { display: none; }
  .row.is-active .row__name,
  .row.is-active .row__chip { animation: none; }


  /* --- scroll reveal ------------------------------------------------------
     Same shape as desktop — off the rAF pass, no IntersectionObserver — but the
     masked bump is replaced by a plain fade and rise, and the trip line moves to
     90% of the viewport (main.js). */

  .bump-clip { overflow: visible; }
  .bump { transform: none !important; transition: none !important; }

  [data-cl],
  .row[data-cl] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 850ms var(--ease-out), transform 850ms var(--ease-out);
  }
  [data-cl][data-shown],
  .row[data-cl][data-shown] { opacity: 1; transform: none; }

  /* The two mono labels fade with their block rather than on their own. */
  .clients__eyebrow, .clients__roster { opacity: 1; transition: none; }
}


/* =========================================================================
   TABLET FALLBACK — 768 to 900px
   The 62% grid and the sticky tall heading have no room here. Readable, not
   designed — below 768px the designed mobile layout in clients.small.css
   takes over instead, so this band is fenced off from it.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 900px) {
  /* Nothing pins here, so the stick distance would just be a 100vh empty gap —
     and the overlap would drag Clients up over a hero that is no longer 100vh. */
  .clients-track { margin-top: 0; }
  .clients-track__hold { display: none; }
  .clients {
    position: relative;
    bottom: auto;
    padding-bottom: 96px;
    clip-path: none !important;
  }
  .clients__divider { display: none; }

  .clients__head { grid-template-columns: 1fr; }
  .clients__headcol { height: auto; padding-right: 0; }
  .clients__sticky { position: static; }
  .clients__intro {
    padding-left: 0;
    text-align: left;
    margin-top: 40px;
  }
  /* No masked slide on the stacked layout — nothing pins, so there is no beat to
     reveal against. */
  .bump { transform: none !important; }
  .clients__para { margin-left: 0; max-width: 46ch; }

  .row {
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    min-height: 0;
    padding: 26px 0;
  }
  .row__lead {
    flex-direction: column; align-items: flex-start;
    gap: 6px;
    padding-right: 0;
    order: 2;
  }
  /* Bracket meta reads below the name once the row stacks. */
  .row__bracket { order: 2; white-space: normal; }
  .row__name    { order: 1; font-size: clamp(1.6rem, 8vw, 2.4rem); white-space: normal; }
  .row__chip    { justify-self: end; align-self: start; order: 1; }
  .row__tail    { grid-column: 1 / -1; padding-left: 0; margin-top: 10px; order: 3; }

  /* Nothing is "hovered" on touch — show every row's detail. */
  .row__bracket, .row__line { opacity: 1; }
  .row__name   { color: #fff; }
  .row__sector { color: rgba(255, 255, 255, .78); }
  .row__hair   { display: none; }
}