/* ==========================================================================
   Scroll bar — the site's one scroll-hint row (Figma 3175:6590)
   ========================================================================== */

/* Four decorative marks and a label, spread edge to edge across the container.
   A context changes exactly ONE thing, the ink, via --scroll-ink; it never
   writes its own rules for the marks or the text. */
.scroll-bar {
  --scroll-ink: var(--text-title);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 12px 0;
}

/* On a DARK surface (the services section) the ink flips to light. The marks are
   flat monochrome exports, so the same flip has to invert them too — an <img>
   has no currentColor to inherit. Default is dark ink on light ground, which is
   what the hero and the showreel both sit on. */
.scroll-bar--on-dark { --scroll-ink: var(--bg-primary); }
.scroll-bar--on-dark .scroll-bar__mark { filter: invert(1); }

.scroll-bar__text {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--scroll-ink);
  white-space: nowrap;
}

/* Height-locked, width auto: the chevron is 11×16 and the rest 16×16, so
   pinning the height keeps them optically equal instead of stretching the
   chevron. */
.scroll-bar__mark {
  display: block;
  flex: none;
  width: auto;
  height: 16px;
}

/* Phones: four marks squeeze the label off the row — keep the outer pair.
   nth-of-type counts the images only, so 2 and 3 are the inner two. */
@media (max-width: 767px) {
  .scroll-bar { gap: 12px; }
  .scroll-bar__mark:nth-of-type(2),
  .scroll-bar__mark:nth-of-type(3) { display: none; }
}