/* A quiet checkerboard gives every attendee mark its own clear space. */
.represented-companies {
  --company-columns:8;
  --company-tile-height:104px;
  --company-tile-shade:#f1f3f5;
  padding:72px 0 88px;
  color:#141820;
  background:#fff;
}
.represented-companies > .wrap {
  width:calc(100% - 64px);
  max-width:1440px;
}
.represented-companies .companies-heading {
  max-width:900px;
  margin:0 auto 38px;
  text-align:center;
}
.represented-companies .companies-heading h2 {
  margin:0;
  color:#141820;
  font-size:clamp(34px,3.2vw,48px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.045em;
}
.represented-companies .companies-heading > p:last-child {
  max-width:none;
  margin:14px auto 0;
  color:#616974;
  font-size:17px;
  line-height:1.5;
}
.represented-companies .company-reels {
  display:grid;
  grid-template-columns:repeat(var(--company-columns),minmax(0,1fr));
  grid-auto-rows:var(--company-tile-height);
  grid-auto-flow:row;
  align-items:stretch;
  gap:0;
  /* One background keeps the checkerboard aligned across the source lists. */
  background-color:#fff;
  background-image:conic-gradient(var(--company-tile-shade) 25%,#fff 0 50%,var(--company-tile-shade) 0 75%,#fff 0);
  background-size:calc(200% / var(--company-columns)) calc(var(--company-tile-height) * 2);
}
.represented-companies .company-reel,
.represented-companies .company-wall { display:contents; }
.represented-companies .company-cell {
  display:flex;
  align-items:center;
  justify-content:center;
  grid-column:span 1;
  min-width:0;
  width:auto;
  height:var(--company-tile-height);
  min-height:var(--company-tile-height);
  margin:0;
  padding:10px 18px;
  background:transparent;
}
.represented-companies .company-sprite {
  flex:0 1 auto;
  max-width:100%;
  max-height:70px;
  background-color:#17191d;
}
.represented-companies .company-logo {
  flex:none;
  max-width:100%;
  max-height:84px;
  object-fit:contain;
}
.represented-companies .company-logo--woolworths { width:87px; }
.represented-companies .company-logo--salvation-army { width:64px; }
.represented-companies .company-logo--parliament-victoria { width:138px; }
.represented-companies .company-cell--cpa { padding-inline:8px; }
.represented-companies .company-logo--cpa { width:156px; }

@media(max-width:1000px) {
  .represented-companies { --company-columns:4; padding-block:60px 64px; }
  .represented-companies > .wrap { width:calc(100% - 48px); }
  .represented-companies .companies-heading { margin-bottom:30px; }
}
@media(max-width:700px) {
  .represented-companies { --company-tile-height:60px; padding:38px 0 36px; }
  .represented-companies > .wrap { width:100%; }
  .represented-companies .companies-heading { padding-inline:20px; margin-bottom:24px; }
  .represented-companies .companies-heading h2 { font-size:clamp(30px,6.5vw,38px); line-height:1.08; }
  .represented-companies .companies-heading > p:last-child { max-width:320px; margin-top:12px; font-size:14px; line-height:1.5; }
  .represented-companies .company-reels {
    grid-template-columns:minmax(0,1fr);
    grid-auto-rows:auto;
    background:none;
  }
  .represented-companies .company-reel {
    display:block;
    min-width:0;
    scroll-behavior:auto;
    background:#fff;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .represented-companies .company-reel:nth-child(even) { background:var(--company-tile-shade); }
  .represented-companies .company-wall {
    display:flex;
    align-items:stretch;
    width:max-content;
    gap:0;
  }
  .represented-companies[data-companies-motion="automatic"] .company-wall { will-change:transform; }
  .represented-companies .company-cell {
    flex:0 0 104px;
    width:104px;
    padding:6px 8px;
    background:transparent;
  }
  .represented-companies .company-cell--cpa { flex-basis:104px; width:104px; }
  .represented-companies .company-sprite { width:calc(var(--mark-width) * .7); max-height:38px; }
  .represented-companies .company-logo { max-height:46px; }
  .represented-companies .company-logo--woolworths { width:48px; }
  .represented-companies .company-logo--salvation-army { width:40px; }
  .represented-companies .company-logo--parliament-victoria { width:88px; }
  .represented-companies .company-logo--cpa { width:88px; }
  .represented-companies .companies-controls { margin:14px 20px 0; min-height:0; }
  .represented-companies .companies-controls > p { color:#616974; }
  .represented-companies .company-reel:focus-visible { outline-color:#0a49ba; }
}
/* Keep the event name together when the heading wraps on a phone. */
.companies-heading .company-brand-name { white-space:nowrap; }

/* An input-transparent overlay leaves both tile shades and logo colours intact. */
.represented-companies { position:relative; }
.represented-companies .company-pixel-trail {
  position:absolute;
  z-index:1;
  display:block;
  pointer-events:none;
  user-select:none;
  contain:strict;
}
@media(prefers-reduced-motion:reduce), (hover:none), (pointer:coarse) {
  .represented-companies .company-pixel-trail { display:none; }
}

/* Real image assets carry each company's own colours, including without JS. */
.represented-companies .company-logo {
  display:block;
  flex:0 1 auto;
  width:min(100%,var(--company-logo-width,138px));
  height:auto;
  max-width:100%;
  max-height:84px;
  object-fit:contain;
  filter:none;
  background:transparent;
}
/* These two official header assets are intentionally monochrome reverse marks. */
.represented-companies :is(.company-logo--macquarie,.company-logo--anduril) { filter:brightness(0); }
/* Flattened white source mattes blend into either checkerboard shade. */
.represented-companies .company-logo--matte { mix-blend-mode:multiply; }
@media(max-width:700px) {
  .represented-companies .company-logo {
    width:min(100%,calc(var(--company-logo-width,138px) * .7));
    max-height:46px;
  }
}

/* Fine display-only pixels. The original artwork supplies every colour and
   contour; a repeated alpha mask opens narrow gaps without resizing it.
   A 16/20 square leaves 80% coverage per axis, including at fine wordmarks.
   Mobile loop copies inherit the same class, so no extra JS or assets are used. */
@supports (mask-image:url("")) or (-webkit-mask-image:url("")) {
  .represented-companies .company-logo {
    --company-pixel-size:2.5px;
    --company-pixel-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M2 2H18V18H2Z'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--company-pixel-mask);
    mask-image:var(--company-pixel-mask);
    -webkit-mask-size:var(--company-pixel-size) var(--company-pixel-size);
    mask-size:var(--company-pixel-size) var(--company-pixel-size);
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-repeat:repeat;
    mask-repeat:repeat;
  }
  @media(max-width:700px) {
    .represented-companies .company-logo { --company-pixel-size:2px; }
  }
  /* Let forced-colour/high-contrast rendering retain the complete mark. */
  @media(forced-colors:active) {
    .represented-companies .company-logo {
      -webkit-mask-image:none;
      mask-image:none;
    }
  }
}

/* Phones: static three-column grid, first eighteen shown, the rest on request. */
@media(max-width:700px){
  .represented-companies[data-companies-layout="static"] .company-reels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; background-color:#fff; background-image:conic-gradient(var(--company-tile-shade) 25%,#fff 0 50%,var(--company-tile-shade) 0 75%,#fff 0); background-size:calc(200% / 3) 128px; }
  .represented-companies[data-companies-layout="static"] .company-reel,
  .represented-companies[data-companies-layout="static"] .company-wall { display:contents; }
  .represented-companies[data-companies-layout="static"] .company-cell { flex:none; width:auto; height:64px; padding:8px 10px; background:transparent; }
  .represented-companies[data-companies-layout="static"][data-companies-collapsed="true"] .company-cell[data-company-overflow="true"] { display:none; }
  .represented-companies[data-companies-layout="static"] .companies-controls > p { display:none; }
  .companies-show-all { display:block; margin:16px auto 0; min-height:44px; padding:10px 18px; border:1px solid #0a49ba; background:#fff; color:#0a49ba; font:inherit; font-size:14px; line-height:1.2; cursor:pointer; }
  .companies-show-all[hidden] { display:none; }
}