/* ==========================================================================
   OUR CLIENTS · shared atoms for options A, B, C (inside <div class="t4 oc …">, so the Strips tokens apply:
   concrete ground, white cards, Archivo condensed, ink #111, one controlled blue accent).
   A card holds three things only — the logo, the name, the business type. No link, no domain, no text beyond.
   ========================================================================== */
.oc{ --oc-blue:#1E3FD6; --oc-key:#FFFFFF; --lh:44px; }
.oc .oc-card{ position:relative; display:flex; flex-direction:column; height:100%; background:var(--card); color:var(--ink); }
/* the logo stands on its own site's header colour; a client without a logo shows its initials */
.oc .oc-logo{ display:grid; place-items:center; flex:none; background:var(--lb, #FFFFFF); overflow:hidden; }
.oc .oc-logo img{ display:block; width:auto; height:var(--lh); max-width:82%; max-height:86%; object-fit:contain; }
/* optical balance: a square or tall logo is drawn taller than a wide one, so every logo reads at the same weight */
.oc .oc-logo.is-sq img{ height:calc(var(--lh) * 1.45); }
.oc .oc-logo.is-md img{ height:calc(var(--lh) * 1.18); }
.oc .oc-logo.is-ini{ background:#F2F1ED; }
.oc .oc-logo.is-ini b{ font:900 calc(var(--lh) * .5)/1 var(--cond); font-stretch:70%; letter-spacing:.03em; color:var(--ink); }
.oc .oc-tx{ display:block; min-width:0; }
.oc .oc-nm{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font:800 15.5px/1.05 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.01em; color:var(--ink); }
.oc .oc-ty{ display:block; margin-top:4px; font-size:12.5px; line-height:1.3; color:var(--ink-3); font-stretch:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* the keys every option uses to choose an industry: the Strips key, the page's blue when chosen */
.oc .oc-key, .oc .ocb-tab{ flex:none; height:36px; padding:0 14px; border:0; background:var(--oc-key); color:var(--ink); cursor:pointer;
  font:800 13px/1 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
  transition:background-color .2s, color .2s; }
.oc .oc-key:hover, .oc .ocb-tab:hover{ background:#F6F5F2; }
.oc .oc-key[aria-pressed="true"], .oc .ocb-tab[aria-pressed="true"]{ background:var(--oc-blue); color:#FFFFFF; }
.oc :focus-visible{ outline:3px solid var(--oc-blue); outline-offset:2px; }

/* a sideways row of keys on a phone: it scrolls, the next key cut at the screen edge */
@media (max-width:560px){
  .oc .oc-keyrow{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut);
    scroll-padding-inline:var(--gut); }
  .oc .oc-keyrow::-webkit-scrollbar{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .oc *{ transition-duration:0s!important; } }