/* Logos ("Working with leading law firms and litigation funders": an eyebrow only, no heading).
   Static (no JS, reduced motion): every logo in one tidy, centred wall.
   Live (.is-live, set by trusted.js): the set drifts slowly sideways in one row, fading at both
   edges. The full list stays in the page for screen readers; the moving stage is aria-hidden. */

.tl {
  --tl-cols: 3;   /* static wall, per row */
  --tl-gx: 1rem;
  --tl-h: 5.5rem;
  --tl-k: .8;
  --tl-k-live: 1;
  padding-block: clamp(3.25rem, 7vw, 6rem) clamp(2.75rem, 6vw, 5rem);
}
@media (width >= 480px) {
  .tl { --tl-k-live: .85; }
}
@media (width >= 640px) {
  .tl { --tl-cols: 5; --tl-gx: 2rem; --tl-h: 6.25rem; --tl-k: .9; --tl-k-live: .9; }
}
@media (width >= 1000px) {
  .tl { --tl-h: 6.75rem; --tl-k: 1; --tl-k-live: 1; }
}
@media (width >= 1200px) {
  .tl { --tl-cols: 7; --tl-gx: 2.5rem; }
}

.tl .tl__in {
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr);
  grid-template-areas: "k rule" "body body";
  align-items: center;
  column-gap: clamp(1rem, 2vw, 1.5rem);
  row-gap: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* The strip owns only its top hairline; the next section (Results) draws the one below it */
#main > .tl { border-block-end: 0; }

/* Head: the eyebrow, then a hairline running to the right edge (there is no control). The eyebrow
   is set like every other section title on the page (shead.css, contact): a dot, then the title, in
   the same colour; when the title wraps on a phone the dot stays on its first line. */
#main .tl .tl__k {
  grid-area: k;
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin: 0;
  font-weight: 400;
  line-height: 1.6;
  color: rgb(255 255 255 / .66);
}
.tl .tl__k::before {
  content: "";
  flex: none;
  inline-size: .4375rem;
  block-size: .4375rem;
  margin-top: calc((1.6em - .4375rem) / 2);
  border-radius: 50%;
  background: #8fb4ff;
}
.tl .tl__rule {
  grid-area: rule;
  display: block;
  height: 1px;
  margin: 0;
  background: var(--line-dark);
}

.tl .tl__body { grid-area: body; position: relative; min-width: 0; }

/* Each logo keeps its own cap height; it scales a touch on smaller screens */
.tl .logos__m { height: calc(var(--cap) * var(--tl-k)); }
.tl .tl__stage .logos__m { height: calc(var(--cap) * var(--tl-k-live)); }

/* Thompsons: the file's embedded bitmap bleeds a 1px sliver at each edge when drawn small */
.tl img[src*="ThompsonsSolicitors"] {
  clip-path: polygon(9.5% 0, 100% 0, 100% 40%, 90% 40%, 90% 100%, 0 100%, 0 45%, 9.5% 45%);
}

/* Static wall: no JS, reduced motion, or before trusted.js runs */
.tl__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem) var(--tl-gx);
}
.tl__i {
  flex: 0 0 calc((100% - (var(--tl-cols) - 1) * var(--tl-gx)) / var(--tl-cols));
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 4rem;
}
.tl__i > .logos__m { max-width: 100%; }
.tl.is-live .tl__list {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Live: the stage keeps its height before the logos are loaded (they load near the section) */
.tl__stage { min-height: var(--tl-h); }

/* Live, drift: the set moves slowly sideways and fades at both edges */
.tl__vp {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tl__track {
  display: flex;
  width: max-content;
  background: var(--void); /* the screen-blended logos need the page colour behind them */
  animation: tl-drift var(--tl-dur, 80s) linear infinite;
}
.tl.is-held .tl__track { animation-play-state: paused; }
.tl__d {
  flex: none;
  display: grid;
  place-items: center;
  height: var(--tl-h);
  padding-inline: clamp(1.5rem, 3.5vw, 3.25rem);
}
@keyframes tl-drift { to { transform: translate3d(-50%, 0, 0); } }

/* Narrower screens: the heading wraps across the full width, so it has no hairline; the logos
   follow directly below it */
@media (width < 880px) {
  .tl .tl__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "k" "body";
    row-gap: clamp(1.75rem, 4vw, 2.5rem);
  }
  .tl .tl__rule { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tl__track { animation: none; }
}

/* The logo strip now sits inside the dot journey, between the opening banner and the £2B figure:
   no section rules across the dot field. */
.journey .trusted, #main .journey .trusted { border-block: 0; background: none; }

/* Inside the journey the logos sit straight on the dot field: no page-colour band behind the row.
   The two marks that relied on a screen blend against that band (Charles Lyndon on white, Lefevres
   on purple) instead turn their background transparent with the SVG filters in partials/trusted.html.
   Each keeps the same tone it had with the blend: light ink as white at that strength. */
.journey .tl__track { background: none; }
.journey .tl .logos__m--on-paper { mix-blend-mode: normal; filter: url(#tl-fx-paper); }
.journey .tl .logos__m--on-colour { mix-blend-mode: normal; filter: url(#tl-fx-colour); }
.tl__fx { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }