/* In good company: two-row client marquee. Ink on paper, hairline grid, crop-mark corners. */
.nf-company{--cell:240px;--cell-mid:262px;--cell-wide:390px;--row-h:112px;--s:1;--line:rgba(32,33,31,.16);--mark:#20211f;
  padding:38px 0 72px;display:grid;gap:30px;overflow:hidden;text-align:center}
.nf-company>.nf-label{margin:0}
.nf-marquee{display:grid;gap:22px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.nf-marquee-row{overflow:hidden;padding:7px 0}
.nf-marquee-row:nth-child(2){padding-left:calc(var(--cell) / 2)}
.nf-marquee-track{display:flex;width:max-content;animation:nf-marquee var(--dur,160s) linear infinite;will-change:transform}
.nf-marquee-row:nth-child(2) .nf-marquee-track{animation-direction:reverse}
.nf-marquee-row:hover .nf-marquee-track,.nf-marquee-row:focus-within .nf-marquee-track,
body.nf-motion-off .nf-marquee-track{animation-play-state:paused}
@keyframes nf-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.nf-logo{position:relative;flex:none;width:var(--cell);height:var(--row-h);display:grid;place-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line);
  color:inherit;transition:background-color .25s ease}
.nf-logo.is-mid{width:var(--cell-mid)}
.nf-logo.is-wide{width:var(--cell-wide)}
/* "+" crop marks on the left corners of every cell; the next cell supplies the right ones */
.nf-logo::before,.nf-logo::after{content:"";position:absolute;left:0;width:11px;height:11px;pointer-events:none;
  background:linear-gradient(var(--mark),var(--mark)) center/11px 1.5px no-repeat,linear-gradient(var(--mark),var(--mark)) center/1.5px 11px no-repeat;
  transform:translate(-50%,-50%)}
.nf-logo::before{top:0}
.nf-logo::after{top:100%}
.nf-logo img{width:calc(var(--w) * 1px * var(--s));height:calc(var(--h) * 1px * var(--s));object-fit:contain;
  opacity:.82;transition:opacity .25s ease,transform .25s ease}
.nf-logo:hover{background:#ffe442}
.nf-logo:hover img{opacity:1;transform:scale(1.04)}
a.nf-logo:focus-visible{outline:2px solid #20211f;outline-offset:-6px;background:#ffe442}
a.nf-logo:focus-visible img{opacity:1}

@media (max-width:900px){
  .nf-company{--cell:176px;--cell-mid:190px;--cell-wide:280px;--row-h:84px;--s:.72;padding:28px 0 54px;gap:24px}
  .nf-marquee{gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
}
@media (max-width:520px){
  .nf-company{--cell:128px;--cell-mid:140px;--cell-wide:210px;--row-h:66px;--s:.54;gap:20px}
  .nf-marquee{gap:12px}
  .nf-logo::before,.nf-logo::after{width:9px;height:9px;background-size:9px 1px,1px 9px}
}
/* Reduced motion: no drift, rows become swipeable instead */
@media (prefers-reduced-motion:reduce){
  .nf-marquee-track{animation:none}
  .nf-marquee-row{overflow-x:auto;scrollbar-width:none}
  .nf-marquee-row::-webkit-scrollbar{display:none}
}