/* ============================================================
   STRIP + ROD — two blocks brought onto the main site's language
   (Luke, 2026-08-19).

   businesses: the logo wall becomes the site's own strip. On selrai.com.au
   the client logos run as ONE row of flat, single-colour marks (each a CSS
   mask filled with one colour, no tiles, no borders, no greyscale filter),
   sized by their own aspect ratio, 25% edge fades, drifting. Here: ink
   #242424 on the canvas, height 30px, the page's own rail runtime.

   ownership: the dark card stays, the words become the rod line.
   Loaded last.
   ============================================================ */

/* ---- businesses ---- */
#businesses.selr-businesses { padding: 120px 0 110px; overflow: hidden; }
#businesses .selr-businesses-inner {
  width: 100%; max-width: none; padding: 0; margin: 0;
  background: transparent; border: 0; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; gap: 56px;
}
#businesses .selr-businesses-copy {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center; padding: 0 20px;
}
#businesses .selr-businesses-copy .selr-section-kicker { margin: 0; }
#businesses .selr-businesses-copy h2 {
  margin: 0; max-width: 900px;
  font-family: "Manrope Variable", "Manrope", sans-serif;
  font-size: var(--selr-t-h2, clamp(34px, 3.6vw, 50px));
  line-height: 1.05; font-weight: 400; font-variation-settings: "wght" 585;
  letter-spacing: -0.04em; color: #242424;
}
#businesses .selr-businesses-tone { color: #616161; }
#businesses .selr-businesses-sub {
  margin: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.5; letter-spacing: -0.02em;
  color: #616161;
}

/* the strip: a stack of drifting rows, full-bleed, the site's 25% fades at
   both ends. Two rows so the 255 businesses read as a wall rather than a
   ticker, alternating direction so it never looks like one block sliding. */
#businesses .selr-logo-strip {
  width: 100%;
  display: flex; flex-direction: column; gap: 26px;
}
#businesses .selr-logo-row {
  width: 100%;
  display: flex; align-items: center; gap: 48px;
  padding: 12px 0;
  background: transparent; border-radius: 0;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
#businesses .selr-logo-row::-webkit-scrollbar { display: none; }
/* Each mark is its own request and there are 255 of them, a long way below
   the fold. The URL sits in --logo from the first byte, but a custom property
   fetches nothing until a real property reads it, and only .is-lit does. The
   box keeps its reserved size unlit, so the marks land in space already held
   and the strip never shifts. logo-wall.js lights it near the viewport, and
   businesses.html carries the noscript rule that lights it without script. */
#businesses .selr-logo {
  flex: none;
  height: 30px;
  width: calc(30px * var(--ar, 3));
  background-color: transparent;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
#businesses .selr-logo-strip.is-lit .selr-logo {
  background-color: #242424;
  -webkit-mask-image: var(--logo);
          mask-image: var(--logo);
}
@media (max-width: 809.98px) {
  #businesses.selr-businesses { padding: 70px 0 60px; }
  #businesses .selr-businesses-inner { gap: 34px; }
  #businesses .selr-businesses-sub { font-size: 15px; }
  #businesses .selr-logo-strip { gap: 18px; }
  #businesses .selr-logo-row { gap: 34px; }
  #businesses .selr-logo { height: 24px; width: calc(24px * var(--ar, 3)); }
}

/* ---- ownership: the rod ---- */
#ownership .selr-band-inner { gap: 22px; }
#ownership .selr-band-kicker {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em; line-height: 1.5;
  color: rgba(255, 255, 250, .62);
}
#ownership .selr-band-h { max-width: 860px; }
#ownership .selr-band-line {
  margin: 6px 0 0;
  max-width: 760px;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 25px; line-height: 1.3; letter-spacing: -0.04em;
  color: rgba(255, 255, 250, .8);
}
@media (max-width: 809.98px) {
  #ownership .selr-band-line { font-size: 20px; }
}