.hero {
  --hero-content-height: clamp(42rem, 72svh, 48rem);
  /* Sized to the client band alone since the use-case grid came out;
     it was 16.75rem, which left ~149px of dead space under the marquee. */
  --hero-trust-height: 7.75rem;
  position: relative;
  isolation: isolate;
  min-height: calc(var(--hero-content-height) + var(--hero-trust-height));
  overflow: hidden;
  background: var(--zl-paper);
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--zl-paper);
}

#signal-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hero-content-height);
}

.hero__readability {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--zl-paper-a99) 0%,
      var(--zl-paper-a94) 28%,
      var(--zl-paper-a70) 43%,
      var(--zl-paper-a16) 61%,
      transparent 76%);
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 3;
  width: min(48%, 48rem);
  min-height: var(--hero-content-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2.5rem, 4.4vw, 4.5rem) clamp(1.25rem, 3.4vw, 4rem) 2rem;
  pointer-events: none;
}

.hero__copy a {
  pointer-events: auto;
}

.hero__announcement {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: clamp(1.75rem, 2.5vw, 2.75rem);
  padding: 0.55rem 0.75rem;
  border: 1px dashed var(--zl-line-strong);
  background: var(--zl-surface-a74);
  color: var(--zl-cobalt);
  font-size: var(--zl-text-sm);
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.hero__headline-stack {
  display: flex;
  flex-direction: column;
  gap: var(--zl-space-5);
  width: min(82vw, 60rem);
}

.hero h1 {
  max-width: 100%;
  text-wrap: balance;
}

.hero__message {
  font-size: var(--zl-type-hero-size);
  line-height: var(--zl-leading-hero);
}

.hero__message-fixed,
.hero__message-row {
  display: block;
}

.hero__rotating-line {
  /* Leading is 1.02, so descender ink lands below the line box -- the tail of
     the "g" in "grow" was being shaved off by the clip. The measured height is
     exactly one line box, which left about 0.07em of headroom against 0.21em of
     descent: fine at small type, clipped once the hero scales up. Reserve a
     descender band inside the clip box, then pull it back out of flow with the
     matching negative margin so vertical rhythm is untouched. */
  --hero-rotator-descender: 0.2em;

  position: relative;
  display: grid;
  grid-template-areas: "phrase";
  /* --hero-rotator-height is set by headline-rotator.js to the tallest phrase
     actually measured, so a phrase that wraps does not shove the lede and CTAs
     down mid-rotation. The em value is only the pre-measurement floor. */
  min-height: calc(var(--hero-rotator-height, 1.08em) + var(--hero-rotator-descender));
  margin-bottom: calc(-1 * var(--hero-rotator-descender));
  overflow: hidden;
}

/* Verb and phrase rotate as one unit, so the two-column grid lives on the
   value rather than the row. Every stacked value shares the same track sizes,
   which keeps the phrase's left edge fixed while "build" swaps to "grow" --
   the alternative, letting the phrase flow after the verb, made it jog
   sideways on every change. The column clears the widest verb ("grow", 2.14em)
   with a real gap; 2.05em let it collide with the phrase. */
.hero__rotating-value {
  grid-area: phrase;
  align-self: start;
  display: grid;
  grid-template-columns: 2.3em minmax(0, 1fr);
  align-items: start;
  column-gap: 0.06em;
  transition:
    opacity var(--zl-duration-reveal) var(--zl-ease-signal),
    transform var(--zl-duration-reveal) var(--zl-ease-signal);
}

.hero__message-verb {
  color: var(--zl-ink);
  text-align: left;
  white-space: nowrap;
}

.hero__rotating-value[data-audience="build"] .hero__rotating-phrase {
  color: var(--zl-cobalt);
}

.hero__rotating-value[data-audience="grow"] .hero__rotating-phrase {
  color: var(--zl-vermilion-text);
}

/* Used by the phrase-less "build & grow." entry and by the reduced-motion
   fallback, which states the same locked headline outright. Both own the whole
   line instead of sitting in a verb column sized for one four-letter word. */
.hero__rotating-value--whole {
  grid-template-columns: minmax(0, 1fr);
  color: var(--zl-ink);
}

.hero__rotating-value--whole .hero__message-verb {
  /* The column version needs nowrap so "grow" cannot break; this one is a whole
     clause and has to be allowed to wrap on a narrow screen. */
  white-space: normal;
}

.hero__rotating-value.is-entering {
  opacity: 0;
  transform: translateY(24%);
}

.hero__rotating-value.is-leaving {
  opacity: 0;
  transform: translateY(-24%);
}

.hero__lede {
  max-width: 35rem;
  margin-top: clamp(1.25rem, 1.8vw, 1.75rem);
  color: var(--zl-body);
  font-size: var(--zl-type-lead-size);
  line-height: var(--zl-leading-lead);
}

.hero__actions {
  margin-top: clamp(1.5rem, 2vw, 2rem);
}

.zl-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hero__branches {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  min-height: var(--hero-trust-height);
  display: block;
  border-top: 1px solid var(--zl-line);
  background: var(--zl-surface);
  backdrop-filter: blur(16px);
}


.hero__branch-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hero-branch {
  --branch-accent: var(--zl-cobalt);
  --branch-wash: var(--zl-cobalt-wash);
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1.125rem;
  min-height: 8.75rem;
  padding: 1.25rem 0.75rem 1.125rem;
  border-right: 1px solid var(--zl-line);
  color: var(--zl-muted-text);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--zl-duration-medium) var(--zl-ease-standard),
    color var(--zl-duration-medium) var(--zl-ease-standard);
}

.hero-branch[data-tone="grow"] {
  --branch-accent: var(--zl-vermilion-text);
  --branch-wash: var(--zl-vermilion-wash);
}

.hero-branch:last-child {
  border-right: 0;
}

.hero-branch__mark {
  position: relative;
  width: 3rem;
  height: 3rem;
}

.hero-branch__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--zl-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--zl-duration-medium) var(--zl-ease-standard);
}

.hero-branch__icon--active {
  stroke: var(--branch-accent);
  opacity: 0;
}

.hero-branch__label {
  color: inherit;
  font-size: var(--zl-text-sm);
}

.hero-branch__arrow {
  position: absolute;
  top: 0.7rem;
  right: 0.95rem;
  color: var(--branch-accent);
  font-size: 1.2rem;
  opacity: 0;
  transform: translateY(0.65rem);
  transition:
    opacity var(--zl-duration-medium) var(--zl-ease-standard),
    transform var(--zl-duration-medium) var(--zl-ease-standard);
}

.hero-branch:hover,
.hero-branch:focus-visible {
  background: var(--branch-wash);
  color: var(--zl-ink);
}

.hero-branch:hover .hero-branch__icon:not(.hero-branch__icon--active),
.hero-branch:focus-visible .hero-branch__icon:not(.hero-branch__icon--active) {
  opacity: 0;
}

.hero-branch:hover .hero-branch__icon--active,
.hero-branch:focus-visible .hero-branch__icon--active,
.hero-branch:hover .hero-branch__arrow,
.hero-branch:focus-visible .hero-branch__arrow {
  opacity: 1;
  transform: translateY(0);
}


.stats-placeholder {
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.stats-placeholder__feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--zl-line);
}

.stats-placeholder__feature .stats-placeholder__heading {
  min-width: 0;
  align-content: center;
  border-bottom: 0;
}

.stats-placeholder__heading {
  display: grid;
  gap: 1.25rem;
  padding: clamp(3.5rem, 4.6vw, 4.6rem) clamp(1.25rem, 3.4vw, 4rem);
  border-bottom: 1px solid var(--zl-line);
}

.stats-placeholder__heading h2 {
  max-width: 52rem;
  font-size: var(--zl-type-feature-heading-size);
  font-weight: var(--zl-weight-regular);
  letter-spacing: var(--zl-tracking-heading);
  line-height: var(--zl-leading-feature);
}

.stats-placeholder__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(6, minmax(0, 1fr));
}

.stats-placeholder__intro,
.stats-placeholder__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 8.5rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 3rem);
}

.stats-placeholder__intro {
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  font-weight: var(--zl-weight-bold);
  letter-spacing: var(--zl-tracking-data);
  text-transform: uppercase;
}

.stats-placeholder__item {
  border-left: 1px solid var(--zl-line);
}

.stats-placeholder__item strong {
  color: var(--zl-ink);
  font-size: var(--zl-type-stat-size);
  font-weight: var(--zl-weight-regular);
  letter-spacing: var(--zl-tracking-display);
  line-height: 1;
}

.stats-placeholder__item span {
  margin-top: 0.55rem;
  color: var(--zl-muted-text);
  font-size: var(--zl-text-sm);
  line-height: 1.3;
}

.resolver-animation {
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--zl-line);
  background: var(--zl-surface);
  color: var(--zl-ink);
  font-family: var(--zl-font-mono);
}

.resolver-animation__status {
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--zl-line);
  background: color-mix(in srgb, var(--zl-cobalt) 5%, var(--zl-surface));
  font-size: clamp(0.57rem, 0.72vw, 0.68rem);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.resolver-animation__status > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.resolver-animation__status b {
  font: inherit;
}

.resolver-animation__status > span:first-child i {
  width: 0.6rem;
  height: 0.6rem;
  background:
    linear-gradient(var(--zl-cobalt) 0 0) 0 0 / 0.24rem 0.24rem,
    linear-gradient(var(--zl-cobalt) 0 0) 100% 0 / 0.24rem 0.24rem,
    linear-gradient(var(--zl-cobalt) 0 0) 0 100% / 0.24rem 0.24rem,
    linear-gradient(var(--zl-cobalt) 0 0) 100% 100% / 0.24rem 0.24rem;
  background-repeat: no-repeat;
  animation: resolver-mark var(--zl-duration-pulse) steps(2, end) infinite;
}

.resolver-animation__meter {
  position: relative;
  width: 2.4rem;
  height: 0.25rem;
  overflow: hidden;
  background: var(--zl-line-strong);
}

.resolver-animation__meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: var(--zl-vermilion);
  animation: resolver-meter var(--zl-duration-route-long) var(--zl-ease-in-out) infinite;
}

.resolver-animation__body {
  min-height: 22rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(3.25rem, 7vw, 6rem) minmax(0, 1fr);
  align-items: stretch;
  padding: clamp(1.25rem, 2.5vw, 2.2rem) clamp(0.75rem, 1.5vw, 1.25rem);
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.resolver-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--zl-line-strong);
  background: var(--zl-surface);
}

.resolver-card--input {
  position: relative;
  padding: 0.55rem;
  border-color: var(--zl-vermilion);
  background:
    linear-gradient(90deg, var(--zl-vermilion-a13) 1px, transparent 1px),
    linear-gradient(var(--zl-vermilion-a13) 1px, transparent 1px),
    color-mix(in srgb, var(--zl-vermilion) 4%, var(--zl-surface));
  background-size: 0.6rem 0.6rem;
}

.resolver-card--input::after {
  content: "";
  position: absolute;
  inset: 0.55rem;
  pointer-events: none;
  border: 1px solid var(--zl-vermilion);
}

.resolver-card__label {
  min-height: 2rem;
  display: grid;
  grid-template-columns: 0.45rem 1fr 0.45rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem;
  background: var(--zl-ink-a05);
  color: var(--zl-muted-text);
  font-size: clamp(0.5rem, 0.65vw, 0.62rem);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.resolver-card__label i {
  width: 0.4rem;
  height: 0.4rem;
  background: var(--zl-line-strong);
}

.resolver-card__rows {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.65rem, 1.4vw, 1rem);
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(0.75rem, 1.5vw, 1.15rem);
  background: var(--zl-surface);
  transition: opacity var(--zl-duration-brief) var(--zl-ease-standard), transform var(--zl-duration-brief) var(--zl-ease-standard);
}

.resolver-card__rows > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  font-size: clamp(0.53rem, 0.68vw, 0.66rem);
}

.resolver-card__rows dt {
  font-weight: 400;
}

.resolver-card__rows dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.resolver-card__code {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.42rem, 0.9vw, 0.72rem);
  padding: clamp(1rem, 2vw, 1.6rem) clamp(0.75rem, 1.5vw, 1.15rem);
  font-size: clamp(0.5rem, 0.66vw, 0.64rem);
  transition: opacity var(--zl-duration-brief) var(--zl-ease-standard), transform var(--zl-duration-brief) var(--zl-ease-standard);
}

.resolver-animation.is-switching .resolver-card__rows,
.resolver-animation.is-switching .resolver-card__code {
  opacity: 0;
  transform: translateY(0.45rem);
}

.resolver-card__code span {
  opacity: 0.28;
  overflow-wrap: anywhere;
  animation: resolver-line var(--zl-duration-sequence) var(--zl-ease-in-out) infinite;
}

.resolver-card__code span:nth-child(2) { animation-delay: calc(var(--zl-stagger-fast) * 1); }
.resolver-card__code span:nth-child(3) { animation-delay: calc(var(--zl-stagger-fast) * 2); }
.resolver-card__code span:nth-child(4) { animation-delay: calc(var(--zl-stagger-fast) * 3); }
.resolver-card__code span:nth-child(5) { animation-delay: calc(var(--zl-stagger-fast) * 4); }
.resolver-card__code span:nth-child(6) { animation-delay: calc(var(--zl-stagger-fast) * 5); }
.resolver-card__code span:nth-child(7) { animation-delay: calc(var(--zl-stagger-fast) * 6); }
.resolver-card__code span:nth-child(8) { animation-delay: calc(var(--zl-stagger-fast) * 7); }
.resolver-card__code span:nth-child(9) { animation-delay: calc(var(--zl-stagger-fast) * 8); }

.resolver-animation__routes {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.4vw, 1.2rem);
}

.resolver-animation__routes > i {
  position: relative;
  height: 2px;
  background: var(--zl-vermilion);
}

.resolver-animation__routes b {
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(0.42rem, 0.7vw, 0.62rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--zl-vermilion);
  animation: resolver-route var(--zl-duration-route) linear infinite;
}

.resolver-animation__routes i:nth-child(2) b { animation-duration: var(--zl-duration-route-short); animation-delay: var(--zl-delay-short); }
.resolver-animation__routes i:nth-child(3) b { animation-duration: var(--zl-duration-route-long); animation-delay: var(--zl-stagger-fast); }
.resolver-animation__routes i:nth-child(4) b { animation-duration: var(--zl-duration-route-mid); animation-delay: var(--zl-delay-medium); }
.resolver-animation__routes i:nth-child(5) b { animation-duration: var(--zl-duration-route-extended); animation-delay: var(--zl-delay-long); }

.resolver-animation__footer {
  min-height: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 1vw, 0.9rem);
  padding: 0.75rem;
  color: var(--zl-muted-text);
  font-size: clamp(0.5rem, 0.65vw, 0.62rem);
  text-transform: uppercase;
}

.resolver-animation__footer i {
  width: 0.28rem;
  height: 0.28rem;
  background: var(--zl-vermilion);
}

@keyframes resolver-route {
  from { left: 0%; }
  to { left: 100%; }
}

@keyframes resolver-meter {
  0%, 100% { width: 16%; }
  50% { width: 88%; }
}

@keyframes resolver-mark {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes resolver-line {
  0%, 8% { opacity: 0.28; transform: translateY(0.2rem); }
  18%, 78% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0.28; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .resolver-animation * { animation: none !important; }
  .resolver-card__code span { opacity: 1; transform: none; }
  .resolver-animation__routes b { left: 72%; }
  .resolver-animation__meter i { width: 72%; }
}

@media (max-width: 52rem) {
  .stats-placeholder__feature { grid-template-columns: 1fr; }
  .stats-placeholder__feature .stats-placeholder__heading { border-bottom: 1px solid var(--zl-line); }
  .resolver-animation { border-left: 0; }
}

@media (max-width: 22rem) {
  .resolver-card__label {
    grid-template-columns: 0.3rem minmax(0, 1fr) 0.3rem;
    gap: 0.2rem;
    padding-inline: 0.25rem;
    font-size: 0.46rem;
  }
}

@media (max-width: 64rem) {
  .hero__copy {
    width: min(82%, 48rem);
  }

  .hero__headline-stack {
    width: min(90vw, 52rem);
  }

  .hero__message {
    font-size: var(--zl-type-hero-tablet-size);
  }

  .hero__branch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-branch {
    border-bottom: 1px solid var(--zl-line);
  }

  .hero-branch:nth-child(2n) {
    border-right: 0;
  }

  .hero-branch:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .stats-placeholder__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-placeholder__intro {
    grid-column: 1 / -1;
    min-height: 3.25rem;
    border-bottom: 1px solid var(--zl-line);
    padding-block: 0.8rem;
  }

  .stats-placeholder__item {
    min-height: 6rem;
    padding: 1rem;
  }

  .stats-placeholder__item:nth-child(2),
  .stats-placeholder__item:nth-child(5) {
    border-left: 0;
  }

  .stats-placeholder__item:nth-child(n + 5) {
    border-top: 1px solid var(--zl-line);
  }
}

@media (max-width: 46rem) {
  .zl-page {
    padding-inline: 0;
  }

  .hero {
    min-height: var(--hero-mobile-min-height, 59rem);
  }

  .hero__copy {
    width: 100%;
    min-height: auto;
    justify-content: flex-start;
    padding: 2.25rem 1.25rem 0;
    transform: none;
  }

  .hero__announcement {
    margin-bottom: 2rem;
  }

  .hero__message {
    font-size: var(--zl-type-hero-mobile-size);
  }

  .hero__headline-stack {
    width: 100%;
  }

  /* Narrow screens cannot spare 2.3em to a verb column that is only ever four
     letters wide, so the verb sits inline and the phrase wraps beneath it. */
  .hero__rotating-value {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__message-verb {
    text-align: left;
  }

  .hero__lede {
    max-width: 30rem;
    font-size: 1rem;
  }

  .hero__actions {
    margin-top: 1.5rem;
  }

  .hero__actions .zl-button {
    min-height: 3.25rem;
  }

  .hero__actions .zl-button--secondary {
    background-color: var(--zl-surface);
  }

  #signal-field {
    top: var(--hero-mobile-signal-top, 30rem);
    right: auto;
    bottom: auto;
    left: -10%;
    /* base.css caps media at max-width:100%, which silently clamped this 120%
       back to the parent width -- with the -10% offset and the translate that
       left a bare strip down the right edge. */
    max-width: none;
    width: 120%;
    height: var(--hero-mobile-signal-height, 12rem);
    transform: translateX(-8%);
  }

  .hero__readability {
    display: none;
  }

  .hero-branch {
    min-height: 8.25rem;
  }

  .stats-placeholder__heading {
    padding-block: 3.5rem;
  }

  .stats-placeholder__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-placeholder__intro {
    grid-column: 1 / -1;
  }

  .stats-placeholder__item:nth-child(n) {
    border-top: 1px solid var(--zl-line);
    border-left: 1px solid var(--zl-line);
  }

  .stats-placeholder__item:nth-child(even) {
    border-left: 0;
  }

  .stats-placeholder__item span {
    font-size: 0.72rem;
    line-height: 1.3;
  }
}

@media (max-width: 22rem) {
  .hero {
    min-height: var(--hero-mobile-min-height, 63rem);
  }
}

@media (max-width: 25rem) {
  .hero__announcement {
    font-size: 0.75rem;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .zl-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__rotating-value {
    transition: none;
  }
}


/* Client band -- statement + logo marquee.
   Two normalisations on the marks: greyscale, because seven brand palettes
   would overrun L1, and per-mark heights, because the source ratios run from
   0.77:1 (Isprava's portrait lockup) to 7.8:1 (PeopleBox) and a single height
   makes the long thin wordmarks read far heavier. brightness(0) flattens every
   opaque pixel to ink while preserving alpha, so reversed white marks work on
   the light surface too. Colour returns on hover.
   Same two-track technique as .trust-marquee: the second track is aria-hidden
   padding so the loop is seamless while a screen reader reads the list once. */
.hero__clients {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.85rem, 1.5vw, 1.15rem);
  padding-block: clamp(1rem, 1.9vw, 1.5rem);
}
.hero__clients-intro {
  max-width: 46ch;
  margin: 0;
  color: var(--zl-muted-text);
  font-size: var(--zl-text-sm);
  line-height: var(--zl-leading-lead);
  text-align: center;
  text-wrap: balance;
}

.client-marquee:not([data-marquee-ready]) .client-marquee__track { animation: none; }
.client-marquee {
  --client-gap: clamp(2.4rem, 5vw, 4.25rem);
  display: flex;
  gap: var(--client-gap);
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.client-marquee__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--client-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: client-marquee var(--marquee-duration, 38s) linear infinite;
}
.client-marquee:hover .client-marquee__track { animation-play-state: paused; }
.client-marquee__track li { display: flex; flex: 0 0 auto; align-items: center; }
.client-marquee__mark {
  display: block;
  width: auto;
  height: 1.55rem;
  filter: grayscale(1) brightness(0);
  opacity: .48;
  transition: opacity .25s ease, filter .25s ease;
}
/* optical balance -- tuned against the rendered row, not the source ratios */
.client-marquee__mark[data-mark="gem"]       { height: 1.35rem; }
.client-marquee__mark[data-mark="sixsense"]  { height: 1.3rem; }
.client-marquee__mark[data-mark="seekout"]   { height: 1.45rem; }
.client-marquee__mark[data-mark="weekday"]   { height: 1.32rem; }
.client-marquee__mark[data-mark="aeroleads"] { height: 1.15rem; }
.client-marquee__mark[data-mark="peoplebox"] { height: 1.05rem; }
.client-marquee__mark[data-mark="isprava"]   { height: 3.2rem; }
/* Wide single-line wordmarks sit near the base height; stacked lockups
   (square yards, keya homes) carry more so their type matches the row. */
.client-marquee__mark[data-mark="scripbox"]    { height: 1.15rem; }
.client-marquee__mark[data-mark="scaler"]      { height: 1.1rem; }
.client-marquee__mark[data-mark="ltrealty"]    { height: 2.8rem; }
.client-marquee__mark[data-mark="babblebots"]  { height: 1.25rem; }
.client-marquee__mark[data-mark="selldo"]      { height: 1.3rem; }
.client-marquee__mark[data-mark="vieu"]        { height: 1.3rem; }
.client-marquee__mark[data-mark="squareyards"] { height: 2.2rem; }
.client-marquee__mark[data-mark="keyahomes"]   { height: 2.2rem; }

.client-marquee__track li:hover .client-marquee__mark { filter: none; opacity: 1; }

/* Vieu and Babblebots ship as reversed white marks. The row's
   grayscale+brightness(0) blackens them so they read on cream, but hover drops
   the filter and restores white -- invisible against the band. These two get an
   ink chip on hover instead, which is the dark surface the logo README says
   those assets require. The padding is always applied, so hovering cannot
   shift the row. */
.client-marquee__track li[data-reversed] {
  padding: .28rem .5rem;
  border-radius: 3px;
  transition: background-color .25s ease, box-shadow .25s ease;
}
/* A translucent wash rather than a solid ink chip: the band reads through it,
   so the backdrop sits back instead of punching a black box into the row.
   72% ink over the #FBF9F3 band blends to ~#5A5955, which still carries white
   type at 6.9:1 -- past AA with room. Do not lighten much further: these marks
   are white, so the chip is the only thing making them legible, and ~55% would
   drop under 4.5:1. */
.client-marquee__track li[data-reversed]:hover {
  background-color: rgb(28 27 23 / 72%);
  box-shadow: 0 1px 4px rgb(28 27 23 / 10%);
}

/* one authored copy, set by scripts/marquee.js after the images decode */
@keyframes client-marquee { to { transform: translateX(calc(-1 * var(--marquee-distance, 100%))); } }

@media (max-width: 46rem) {
  .client-marquee { --client-gap: 2.1rem; }
  .client-marquee__mark { height: 1.3rem; }
  .client-marquee__mark[data-mark="peoplebox"] { height: .9rem; }
  .client-marquee__mark[data-mark="aeroleads"] { height: 1rem; }
  .client-marquee__mark[data-mark="isprava"]   { height: 2.7rem; }
  .client-marquee__mark[data-mark="squareyards"] { height: 1.9rem; }
  .client-marquee__mark[data-mark="keyahomes"]   { height: 1.85rem; }
  .client-marquee__mark[data-mark="scripbox"]    { height: 1rem; }
  .client-marquee__mark[data-mark="scaler"]      { height: .95rem; }
  .client-marquee__mark[data-mark="ltrealty"]    { height: 2.3rem; }
  .client-marquee__mark[data-mark="babblebots"]  { height: 1.05rem; }
  .client-marquee__mark[data-mark="selldo"]      { height: 1.1rem; }
  .client-marquee__mark[data-mark="vieu"]        { height: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .client-marquee__track { animation: none; }
  .client-marquee {
    flex-wrap: wrap; justify-content: center;
    -webkit-mask-image: none; mask-image: none;
  }
  .client-marquee__track { flex-wrap: wrap; justify-content: center; }
  .client-marquee__track[aria-hidden="true"] { display: none; }
  .client-marquee__mark { transition: none; }
}