/*! Bytecode — [bytecode_case_studies] straight case study slider */
.bccs{--bccs-w:400px;--bccs-blue:#0B66FF;--bccs-blue-text:#1A6DFF;--bccs-red:#FF4B2B;--bccs-ease:cubic-bezier(.2,.8,.2,1);
  position:relative;padding:80px 0 80px;background:#000;color:#fff;overflow:hidden;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
.bccs--clear{background:transparent}
.bccs--full{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.bccs *,.bccs *::before,.bccs *::after{box-sizing:border-box}
.bccs p,.bccs h2,.bccs h3{margin:0;padding:0}
.bccs a{text-decoration:none!important;box-shadow:none}
.bccs img{display:block;max-width:100%;border:0}
.bccs button{font-family:inherit}
.bccs::before{content:"";position:absolute;left:50%;top:38%;width:900px;height:520px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(11,102,255,.16),transparent);pointer-events:none}

/* head */
.bccs__wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 24px}
.bccs__head{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto 30px;max-width:900px}
.bccs .bccs__label{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bccs-red)}
/*.bccs .bccs__label::before,.bccs .bccs__label::after{content:"";width:26px;height:1px;background:currentColor}*/
.bccs h2.bccs__title{margin-top:14px;font-family:inherit;font-weight:800;text-transform:uppercase;font-size:clamp(32px,4.2vw,48px);line-height:1;letter-spacing:-.04em;color:#fff}
.bccs h2.bccs__title span{display:block;color:var(--bccs-blue-text)}
.bccs .bccs__intro{max-width:620px;margin-left:auto;margin-right:auto;margin-top:16px;font-size:16px;line-height:1.65;color:#A6ADBA}

.bccs__stage{position:relative}
.bccs .bccs__arrow{position:absolute;top:50%;z-index:3;margin-top:-28px;display:grid;place-items:center;width:56px;height:56px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(10,12,18,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;transition:background .25s,border-color .25s,transform .25s,opacity .25s}
.bccs .bccs__arrow svg{width:20px;height:20px}
.bccs .bccs__arrow--prev{left:clamp(16px,4vw,64px)}
.bccs .bccs__arrow--next{right:clamp(16px,4vw,64px)}
.bccs .bccs__arrow--prev svg{transform:rotate(180deg)}
.bccs .bccs__arrow:hover{background:var(--bccs-blue);border-color:var(--bccs-blue);transform:scale(1.06)}
.bccs .bccs__arrow:disabled{opacity:.35;cursor:default;transform:none;background:transparent;border-color:rgba(255,255,255,.22)}
.bccs .bccs__arrow:focus-visible,.bccs .bccs__card:focus-visible,.bccs__track:focus-visible{outline:2px solid #8ab4ff;outline-offset:3px}

/* track: one straight line, the active card sits in the middle */
.bccs__track{position:relative;display:flex;align-items:stretch;gap:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  padding:30px calc(50% - var(--bccs-w) / 2) 34px;scrollbar-width:none;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bccs__track::-webkit-scrollbar{display:none}
.bccs__track.is-drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.bccs__track.is-drag .bccs__card{pointer-events:none}
.bccs__track.is-jump{scroll-snap-type:none;scroll-behavior:auto}
.bccs__track.is-jump .bccs__item,.bccs__track.is-jump .bccs__cta{transition:none!important}
.bccs__item{flex:0 0 var(--bccs-w);scroll-snap-align:center;display:flex;opacity:.45;transform:scale(.92);transition:opacity .45s var(--bccs-ease),transform .45s var(--bccs-ease)}
.bccs__item.is-active{opacity:1;transform:none}
.bccs__item:not(.is-active):hover{opacity:.7}

/* card (same colour themes as the case wheel) */
.bccs__card{--c-bg:#f3e6cf;--c-fg:#17130e;--c-muted:rgba(23,19,14,.66);--c-badge:#b5813f;--c-badge-fg:#fff;
  position:relative;display:flex;flex-direction:column;gap:18px;width:100%;padding:22px;border-radius:26px;background:var(--c-bg);color:var(--c-fg);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transition:transform .35s var(--bccs-ease),box-shadow .35s;-webkit-user-drag:none}
.bccs .bccs__card:hover{color:var(--c-fg)}
.bccs__item.is-active .bccs__card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -30px rgba(11,102,255,.45)}
.bccs__card.t-sand{--c-bg:#f3e6cf;--c-fg:#1a140d;--c-muted:rgba(26,20,13,.62);--c-badge:#b5813f}
.bccs__card.t-ink{--c-bg:#0f1d24;--c-fg:#f1f5f7;--c-muted:rgba(241,245,247,.6);--c-badge:#2f6bff}
.bccs__card.t-crimson{--c-bg:#b3221f;--c-fg:#fff6f4;--c-muted:rgba(255,246,244,.7);--c-badge:#fff;--c-badge-fg:#b3221f}
.bccs__card.t-lime{--c-bg:#c6e88b;--c-fg:#142008;--c-muted:rgba(20,32,8,.62);--c-badge:#3f7d2a}
.bccs__card.t-slate{--c-bg:#1b1b22;--c-fg:#f4f4f6;--c-muted:rgba(244,244,246,.58);--c-badge:#e3a33b;--c-badge-fg:#1b1b22}
.bccs__card.t-sky{--c-bg:#cfe3ff;--c-fg:#0d1a2e;--c-muted:rgba(13,26,46,.62);--c-badge:#1f5fd1}
.bccs__card.t-violet{--c-bg:#2a1b4a;--c-fg:#f6f1ff;--c-muted:rgba(246,241,255,.62);--c-badge:#a98bff;--c-badge-fg:#2a1b4a}
.bccs__card.t-peach{--c-bg:#ffd9c2;--c-fg:#2b140a;--c-muted:rgba(43,20,10,.62);--c-badge:#e0612a}
.bccs__card.t-slate,.bccs__card.t-ink,.bccs__card.t-violet{border:1px solid rgba(255,255,255,.08)}

.bccs__cta{position:absolute;top:-18px;left:50%;z-index:2;transform:translate(-50%,10px);padding:9px 18px;border-radius:999px;background:#1c1c1c;border:1px solid rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s var(--bccs-ease)}
.bccs__item.is-active .bccs__cta{opacity:1;transform:translate(-50%,0)}
.bccs__item.is-active .bccs__card:hover .bccs__cta{background:var(--bccs-blue);border-color:var(--bccs-blue)}

.bccs__card-head{display:flex;align-items:center;gap:14px;min-width:0}
.bccs__who{min-width:0}
.bccs__badge{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--c-badge);color:var(--c-badge-fg);font-weight:700;font-size:19px;overflow:hidden}
.bccs__badge img{width:100%;height:100%;object-fit:contain;padding:6px;background:#fff}
.bccs h3.bccs__name{font-family:inherit;color:var(--c-fg);font-size:21px;font-weight:700;line-height:1.15;letter-spacing:-.01em;text-transform:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bccs__eyebrow{margin-top:4px;color:var(--c-muted);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bccs .bccs__desc{color:var(--c-fg);opacity:.88;font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.bccs__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bccs__stats b{display:block;font-size:28px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--c-fg)}
.bccs__stats span{display:block;margin-top:10px;color:var(--c-fg);opacity:.78;font-size:13px;line-height:1.45}
.bccs__stats--ft i{display:block;width:26px;height:26px;color:var(--c-fg)}
.bccs__stats--ft i svg{width:100%;height:100%;display:block}
.bccs__chips{display:flex;flex-wrap:wrap;gap:8px}
.bccs__chips span{padding:6px 12px;border-radius:999px;border:1px solid currentColor;color:var(--c-muted);font-size:12px;font-weight:600}

.bccs__media{margin-top:auto;height:190px;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.12)}
.bccs__media img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none;transition:transform .6s var(--bccs-ease)}
.bccs__item.is-active .bccs__card:hover .bccs__media img{transform:scale(1.04)}

/* foot */
.bccs__foot{display:flex;flex-direction:column;align-items:center;gap:26px;margin-top:8px}
.bccs__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;display:none;}
.bccs .bccs__dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.25);cursor:pointer;transition:width .35s var(--bccs-ease),background .35s}
.bccs .bccs__dot.on{width:28px;background:var(--bccs-blue)}
.bccs .bccs__all{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);color:#fff;font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;transition:background .25s,border-color .25s,transform .25s}
.bccs .bccs__all svg{width:16px;height:16px;transition:transform .25s}
.bccs .bccs__all:hover{background:var(--bccs-blue);border-color:var(--bccs-blue);color:#fff;transform:translateY(-2px)}
.bccs .bccs__all:hover svg{transform:translateX(4px)}

/* responsive */
@media (max-width:900px){
  .bccs{padding:80px 0 76px}
}
@media (max-width:767px){
  .bccs{--bccs-w:calc(100vw - 40px)}
  .bccs__track{gap:14px;-webkit-mask-image:none;mask-image:none}
  .bccs .bccs__arrow{display:none}
  .bccs__card{padding:18px;gap:16px;border-radius:22px}
  .bccs h3.bccs__name{font-size:19px}
  .bccs__stats b{font-size:24px}
  .bccs__media{height:170px}
  .bccs {
    padding: 60px 0 60px;
}
.bccs .bccs__desc{
    font-size:14px;
}
}
@media (prefers-reduced-motion:reduce){
  .bccs__track{scroll-behavior:auto}
  .bccs__item,.bccs__card,.bccs__cta,.bccs__media img{transition:none}
}

/* keep card names / spacing even when a page uppercases h3 or resets margins */
.bccs h3.bccs__name{text-transform:none!important}
.bccs h2.bccs__title{margin:14px 0 0!important}
.bccs .bccs__label{margin:0!important}

/* arrows: keep our colours even if the theme styles button:hover / :focus */
.bccs .bccs__arrow,.bccs .bccs__arrow:focus{background:rgba(10,12,18,.72)!important;color:#fff!important;border-color:rgba(255,255,255,.22)!important;box-shadow:none!important}
.bccs .bccs__arrow:hover,.bccs .bccs__arrow:focus-visible{background:var(--bccs-blue)!important;border-color:var(--bccs-blue)!important;color:#fff!important}
.bccs .bccs__arrow svg{stroke:currentColor;fill:none}
.bccs .bccs__dot,.bccs .bccs__dot:hover,.bccs .bccs__dot:focus{background:rgba(255,255,255,.25)!important;border:0!important;box-shadow:none!important}
.bccs .bccs__dot.on{background:var(--bccs-blue)!important}

/* filter="yes": client-name pills above the slider */
.bccs__filter{display:flex;align-items:center;gap:14px;max-width:1240px;margin:0 auto 34px;padding:0 24px}
.bccs__pills{flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:2px;-webkit-mask:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.bccs__pills::-webkit-scrollbar{display:none}
.bccs .bccs__pill {
    flex: none;
    margin: 0;
    padding: 13px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14)!important;
    background: transparent!important;
    color: #D7DBE3!important;
    font-family: inherit;
    font-size: 14px!important;
    font-weight: 700!important;
    line-height: 1!important;
    letter-spacing: -.01em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none!important;
    transition: background .25s,color .25s,border-color .25s;
}

.bccs .bccs__pill:hover{background:rgba(255,255,255,.88)!important;border-color:transparent!important;color:#0B0F18!important}
.bccs .bccs__pill.is-on{background:#fff!important;border-color:#fff!important;color:#0B0F18!important}
.bccs .bccs__pill:focus-visible{outline:2px solid #8ab4ff;outline-offset:2px}
.bccs .bccs__farrow{flex:none;display:grid;place-items:center;width:46px;height:46px;margin:0;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18)!important;background:transparent!important;color:#fff!important;cursor:pointer;box-shadow:none!important;transition:background .25s,border-color .25s}
.bccs .bccs__farrow svg{width:18px;height:18px;stroke:currentColor;fill:none}
.bccs .bccs__farrow:not(.bccs__farrow--next) svg{transform:rotate(180deg)}
.bccs .bccs__farrow:hover{background:var(--bccs-blue)!important;border-color:var(--bccs-blue)!important}
@media (max-width:767px){
    .bccs__filter{padding:0 16px;gap:8px;margin-bottom:24px}
    .bccs .bccs__farrow{display:none}
    .bccs .bccs__pill{padding:11px 16px;font-size:13px}
    .bccs__wrap{
        padding:0 16px;
    }
    .bccs .bccs__arrow {
        display: block;
        width: 40px;
        height: 40px;
    }
        .bccs .bccs__farrow {
        display: block;
        width: 40px;
        height: 40px;
    }
}