/* /cases/ — chessboard bento (desktop) and carousel (phones). 2026-09-28 */
.cb-section{padding-block:10px 60px}
.cb-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.cb-chip{font:600 13px/1 var(--body);color:#c3cbe0;background:transparent;border:1px solid #ffffff33;border-radius:30px;padding:11px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cb-chip:hover{border-color:var(--cyan);color:var(--ink)}
.cb-chip[aria-pressed="true"]{background:var(--ink);color:#111c3a;border-color:var(--ink)}
.cb-chip:focus-visible,.cb-tile:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.cb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(250px,auto);grid-auto-flow:dense;gap:16px}
.cb-tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:24px;overflow:hidden;border:1px solid transparent;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,opacity .25s}
.cb-tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px #0006}
.cb-tile[hidden]{display:none!important}
.cb-feature{grid-column:span 2;grid-row:span 2;padding:32px}
.cb-wide{grid-column:span 2}
.cb-lavender{color:#111c3a;background:linear-gradient(120deg,#dcddff,#beb5f6)}
.cb-cyan{color:#0a2635;background:#55d8df}
.cb-light{color:#18233c;background:#dee1ed}
.cb-dark{color:var(--ink);background:#141d36;border-color:var(--line)}
.cb-navy{color:var(--ink);background:linear-gradient(145deg,#293e6d,#142640)}
.cb-dark:hover,.cb-navy:hover{border-color:var(--cyan)}
.cb-logo{display:inline-flex;align-self:flex-start;align-items:center;height:34px;padding:6px 10px;border-radius:10px;background:#101a33}
.cb-logo img{height:22px;width:auto;max-width:110px}
.cb-eyebrow{position:relative;z-index:1;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.75;max-width:calc(100% - 96px)}
.cb-tile h3{position:relative;z-index:1;font-family:var(--display);font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-.03em;margin:0;max-width:calc(100% - 92px);text-wrap:balance}
.cb-feature h3{font-size:clamp(26px,2.4vw,36px);max-width:60%}
.cb-metric{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;margin-top:auto}
.cb-metric strong{display:flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:600;font-size:40px;line-height:1;letter-spacing:-.06em}
.cb-feature .cb-metric strong{font-size:clamp(64px,6.2vw,96px);color:#514197}
.cb-unit{font-weight:450;font-size:18px;letter-spacing:-.03em}
.cb-feature .cb-unit{font-size:clamp(22px,2vw,30px)}
.cb-metric small{font-size:13px;line-height:1.4;opacity:.8;max-width:30ch}
.cb-feature .cb-metric small{font-size:15px;max-width:34ch}
.cb-ill{position:absolute;right:8px;top:14px;width:96px;height:96px;object-fit:contain;pointer-events:none}
.cb-feature .cb-ill{width:min(46%,300px);height:auto;right:10px;top:auto;bottom:70px}
.cb-wide .cb-ill{width:150px;height:150px;right:20px;top:auto;bottom:20px}.cb-wide h3,.cb-wide .cb-eyebrow{max-width:70%}.cb-feature .cb-eyebrow{max-width:70%}
.cb-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-top:4px}
.cb-cta .action-arrow{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cb-tile:hover .cb-cta .action-arrow{transform:translateX(3px)}
.cb-feature .cb-cta{align-self:flex-start;background:#15213c;color:#fff;padding:12px 18px;border-radius:12px}
.cb-dark .cb-cta,.cb-navy .cb-cta{color:var(--cyan)}
.cb-controls{display:none}
.cb-empty{color:var(--soft)}
@media(max-width:1100px) and (min-width:561px){
 .cb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cb-feature{grid-row:span 1;min-height:380px}
 .cb-feature .cb-ill{width:210px;bottom:60px}
}
@media(max-width:560px){
 .cb-filters{flex-wrap:nowrap;overflow-x:auto;margin-right:-22px;padding-right:22px;scrollbar-width:none}
 .cb-filters::-webkit-scrollbar{display:none}
 .cb-chip{flex:0 0 auto}
 .cb-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-right:-22px;padding:3px 3px 16px;scroll-padding-left:3px}
 .cb-grid::-webkit-scrollbar{display:none}
 .cb-tile{flex:0 0 86%;min-height:430px;scroll-snap-align:start;scroll-snap-stop:always;padding:24px}
 .cb-tile:last-of-type{margin-right:22px}
 .cb-tile:hover{transform:none;box-shadow:none}
 .cb-tile h3{font-size:22px;max-width:100%}
 .cb-feature h3{font-size:24px;max-width:100%}
 .cb-tile h3,.cb-feature h3,.cb-eyebrow,.cb-feature .cb-eyebrow,.cb-wide .cb-eyebrow,.cb-wide h3{max-width:100%}
 .cb-ill,.cb-feature .cb-ill,.cb-wide .cb-ill{position:static;align-self:flex-end;width:130px;height:130px;margin:auto 0 -6px}
 .cb-metric{margin-top:0}
 .cb-feature .cb-metric strong{font-size:clamp(46px,15vw,64px)}
 .cb-unit,.cb-feature .cb-unit{white-space:nowrap}
 .cb-metric strong{font-size:44px}
 .cb-controls{display:flex;align-items:center;justify-content:space-between;max-width:220px;margin:6px auto 0;font-size:12px;color:#acb8d3}
 .cb-controls button{border:0;background:#fff;color:#172139;border-radius:50%;width:44px;height:44px;display:grid;place-items:center}
 .cb-controls svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .cb-controls button:disabled{opacity:.35}
}
@media(prefers-reduced-motion:reduce){.cb-tile,.cb-cta .action-arrow{transition:none}}