/* The outer band stays still; only its inner window fades the moving group. */
.oct-continuation #brands {
  --brand-muted:#506580;
  --edge-fade:clamp(17px,4.5vw,78px);
  color:#081a34;
  font-family:var(--page-font);
}
#brands .wrap { padding-block:clamp(58px,5.6vw,94px); }
#brands h2 { font-weight:500; font-size:clamp(42px,4.9vw,78px); letter-spacing:-.048em; line-height:1.025; }
#brands h2 em {
  color:#3567aa;
  background:linear-gradient(104deg,#2259a4,#5f83b0);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
#brands .wrap > p {
  box-sizing:content-box;
  max-width:47ch;
  padding-inline:var(--gutter);
  color:var(--brand-muted); font-size:clamp(15px,1.19vw,18px); line-height:1.54;
}
#brands .ribbon {
  --band-top:#f3f8ff;
  --band-base:#e4effd;
  position:relative; isolation:isolate;
  width:min(1480px,calc(100% - 2 * var(--gutter)));
  padding:0;
  margin:clamp(32px,3.35vw,56px) auto;
  border:1px solid #b9cce4; border-radius:clamp(16px,1.65vw,28px);
  background:radial-gradient(ellipse at 49% 4%,#ffffffc7,transparent 76%),
    linear-gradient(180deg,var(--band-top),#dceafa 61%,var(--band-base));
  box-shadow:inset 0 1px 0 white,inset 0 -1px 0 #ffffffc9,0 10px 25px -22px #183b6c80;
}
#brands .belt-window {
  padding-block:clamp(27px,2.6vw,42px) clamp(21px,2.05vw,32px);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent);
}
#brands .railgroup figure { gap:clamp(14px,1.25vw,20px); }
/* The circular rim is separate from the original artwork and its background. */
#brands .railgroup .coin {
  position:relative; isolation:isolate;
  width:clamp(80px,7.5vw,118px);
  border:4px solid transparent;
  background:linear-gradient(var(--ground),var(--ground)) padding-box,
    linear-gradient(145deg,white 8%,#e4eef9 39%,#afc3dc 77%,#f9fdff) border-box;
  box-shadow:0 0 0 1px #a8bdd5,0 2px 2px #1b3b650f,0 6px 12px -6px #182f5680;
}
#brands .coin img {
  display:block; width:calc(100% - var(--inset) * 2); height:auto; aspect-ratio:1;
  object-fit:contain; border-radius:50%;
}
#brands .railgroup figcaption {
  color:#153452; font:650 clamp(13px,1.02vw,16px)/1.4 var(--page-font);
  letter-spacing:-.015em; text-align:center; white-space:nowrap;
}
#brands h3 {
  font:550 clamp(26px,2.45vw,40px)/1.14 var(--page-font);
  letter-spacing:-.038em; text-wrap:balance;
}
#brands h3 + p { max-width:54ch; margin-top:12px; }
#brands .wrap > .primary { margin-top:24px; }
@media(max-width:720px) {
  #brands .ribbon { width:calc(100% - 20px); }
  #brands .railgroup .coin { border-width:3px; }
  #brands .wrap > p { font-size:15px; }
  #brands .wrap > .primary { margin-top:20px; }
}
/* Brands already spans the page. Only the stationary belt loses its outer frame. */
#brands .ribbon {
  width: 100%;
  margin-inline: 0;
  border-inline: 0;
  border-radius: 0;
  box-shadow: inset 0 1px 0 #ffffffa8, inset 0 -1px 0 #ffffff80;
  --edge-fade: clamp(8px, 1.35vw, 24px);
}