/* Client cards (card A). Markup is written into each page by _build/render-client-cards.py from shared/clients.json. Light by default; add .ccs-wrap--dark on dark pages. */
.ccs-wrap{container-type:inline-size;--cc-ink:#0A0A0A;--cc-soft:#5a5651;--cc-mute:#9a958f;--cc-line:rgba(10,10,10,.1);--cc-bg:#fff;--cc-logo:brightness(0);--cc-logo-o:.82;--cc-link:#FF5070}
.ccs-wrap--dark{--cc-ink:#F5F2EF;--cc-soft:#b9bec8;--cc-mute:#6f7684;--cc-line:#262b36;--cc-bg:#12151c;--cc-logo:brightness(0) invert(1);--cc-logo-o:.9;--cc-link:#FF9870}
.ccs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0}
.ccs--2{grid-template-columns:repeat(2,1fr)}
.cc{background:var(--cc-bg);color:var(--cc-ink);border:1px solid var(--cc-line);border-radius:16px;padding:22px 22px 20px;display:flex;flex-direction:column;text-align:left;font-family:Inter,system-ui,sans-serif}
.cc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:42px}
.cc-logo{display:block;width:auto;filter:var(--cc-logo);opacity:var(--cc-logo-o)}
.cc-meta{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-soft);text-align:right;line-height:1.4}
.cc-nums{display:flex;align-items:center;gap:12px;margin-top:22px;font-variant-numeric:tabular-nums}
.cc-from{font-size:30px;font-weight:700;color:var(--cc-mute);letter-spacing:-.03em;line-height:1}
.cc-arrow{display:block;flex:none;width:19px;height:19px;color:#FF9870}
.cc-to{font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,#FF9870,#FF5070,#C0309A);-webkit-background-clip:text;background-clip:text;color:transparent}
.cc-label{font-size:14px;font-weight:600;color:var(--cc-ink);margin:8px 0 0;line-height:1.45}
.cc-basis{font-size:12px;color:var(--cc-soft);margin:4px 0 0;line-height:1.5}
.cc-quote{margin:18px 0 0;padding:16px 0 0;border:0;border-top:1px solid var(--cc-line);font-size:15.5px;line-height:1.6;color:var(--cc-ink);font-style:normal;flex:1}
.cc-person{display:flex;align-items:center;gap:10px;margin-top:14px}
.cc-av{width:36px;height:36px;border-radius:50%;flex:none;object-fit:cover;object-position:center top;display:block}
.cc-name{font-size:13.5px;font-weight:700;color:var(--cc-ink);line-height:1.3;margin:0}
.cc-role{display:block;font-weight:500;color:var(--cc-soft);font-size:12.5px}
.cc-link{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--cc-link);text-decoration:none}
.cc-link:hover{text-decoration:underline;text-underline-offset:3px}
@container (max-width:820px){.ccs{grid-template-columns:1fr}.ccs--2{grid-template-columns:repeat(2,1fr)}}
@container (max-width:560px){.ccs--2{grid-template-columns:1fr}}

/* Carousel (layout=carousel): one card wide plus a quarter of the next; buttons, swipe, or click the peeking card. */
.ccs--carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;position:relative;outline:0}
.ccs--carousel::-webkit-scrollbar{display:none}
.ccs--carousel>.cc{flex:0 0 76%;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);grid-template-rows:auto auto auto 1fr auto;column-gap:40px;padding:26px 30px 24px}
.ccs--carousel .cc-top{grid-column:1/-1}
.ccs--carousel .cc-nums{grid-column:1;grid-row:2;margin-top:26px}
.ccs--carousel .cc-from{font-size:34px}
.ccs--carousel .cc-to{font-size:48px}
.ccs--carousel .cc-label{grid-column:1;grid-row:3}
.ccs--carousel .cc-basis{grid-column:1;grid-row:4;align-self:start}
.ccs--carousel .cc-link{grid-column:1;grid-row:5;align-self:end}
.ccs--carousel .cc-quote{grid-column:2;grid-row:2/5;margin-top:26px;padding:0 0 0 30px;border-top:0;border-left:1px solid var(--cc-line);font-size:19px;line-height:1.55}
.ccs--carousel .cc-person{grid-column:2;grid-row:5;padding-left:30px;align-self:end}
.ccs--js>.cc{transition:opacity .25s}
.ccs--js{cursor:grab;user-select:none;-webkit-user-select:none}
.ccs--js.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.ccs--js .cc-logo,.ccs--js .cc-av{-webkit-user-drag:none}
.ccs--js>.cc:not(.is-on){opacity:.45;cursor:pointer}
.ccs--js>.cc:not(.is-on):hover{opacity:.7}
.cc-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.cc-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--cc-line);background:var(--cc-bg);color:var(--cc-ink);display:grid;place-items:center;cursor:pointer;padding:0}
.cc-btn:hover{border-color:#FF9870;color:#FF5070}
.cc-btn svg{width:18px;height:18px}
.cc-btn:focus-visible{outline:2px solid #FF9870;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.ccs--carousel{scroll-behavior:auto}.ccs--js>.cc{transition:none}}
@container (max-width:760px){
  .ccs--carousel>.cc{flex-basis:84%;display:flex;padding:22px 22px 20px}
  .ccs--carousel .cc-nums{margin-top:22px}
  .ccs--carousel .cc-from{font-size:30px}
  .ccs--carousel .cc-to{font-size:42px}
  .ccs--carousel .cc-quote{margin-top:18px;padding:16px 0 0;border-left:0;border-top:1px solid var(--cc-line);font-size:15.5px;line-height:1.6}
  .ccs--carousel .cc-person{padding-left:0;align-self:auto}
  .ccs--carousel .cc-link{align-self:flex-start}
}