/* Case Study page and each case study — jaypagare.in */
.short{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.short small{font-size:12px;letter-spacing:.14em;color:var(--dim);font-weight:600}
.short div{display:flex;flex-wrap:wrap;gap:10px}
.lens:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.lenshint{margin-top:14px;font-size:14px;color:var(--mute);min-height:20px}
.lenshint b{color:var(--blue2);font-weight:600}
.refine .sum{font-size:15px;padding:0 6px}
.refine .sum b{color:var(--fg)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px;margin-top:0}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pgrid{grid-template-columns:1fr}}
.wcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.wcta h2{font-size:clamp(32px,4.2vw,62px);font-weight:900;letter-spacing:-.045em;line-height:1.02}
/* ===== CASE STUDY ===== */
.chero{padding:calc(76px + clamp(48px,6vw,88px)) 0 clamp(28px,3vw,44px)}
.chero h1{font-size:clamp(34px,4.6vw,68px);font-weight:900;letter-spacing:-.04em;line-height:1.06;padding-left:.03em;max-width:1150px}
.chero .sub{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--mute);max-width:820px;margin-top:22px}
.facts{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-top:clamp(32px,4vw,48px)}
.facts div{flex:1 1 220px;padding:22px 24px;background:#000;min-width:0}
.facts small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--dim);margin-bottom:8px}
.facts b{font-size:16px;font-weight:600;line-height:1.5;display:block;overflow-wrap:anywhere}
.facts .tl{display:flex;flex-wrap:wrap;gap:6px}
.facts .tl span{font-size:13px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid #2A2A2E}
.cblock{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line)}
.cblock .lab{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--blue2);margin-bottom:16px;display:block}
.cblock h2{font-size:clamp(26px,3vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.cblock .txt{font-size:clamp(17px,1.4vw,20px);line-height:1.7;color:#C7C7CC}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:28px}
.pane{border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3vw,36px);background:#08080A;display:flex;flex-direction:column;gap:16px}
.moods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.moods .media{aspect-ratio:1/1;border-radius:14px}
.rgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:28px;margin-top:32px}
.rgroup{border:1px solid var(--line);border-radius:22px;padding:24px;background:#08080A}
.rgroup small{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--dim)}
.rgroup small i{width:8px;height:8px;border-radius:999px;background:var(--blue)}
.rgroup.team small i{background:#55555B}
.rolechips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.rolechips span{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:10px 16px;border-radius:999px;border:1px solid #1E4E80;background:#0A1A2C;color:var(--fg)}
.rolechips span svg{color:var(--blue)}
.rolechips span.cr{border-color:#2A2A2E;background:#111114;color:var(--mute);font-weight:500}
.boards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
@media (max-width:800px){.boards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.boards .media{aspect-ratio:16/9;border-radius:14px}
.ba{position:relative;aspect-ratio:21/9;border-radius:22px;overflow:hidden;margin-top:28px;cursor:ew-resize;user-select:none;touch-action:pan-y}
.ba .layer{position:absolute;inset:0}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .knob{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--fg);transform:translateX(-1px)}
.ba .knob span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:999px;background:var(--fg);color:#000;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.ba .tg{position:absolute;top:16px;font-size:11px;font-weight:700;letter-spacing:.12em;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55)}
.slider{position:relative;margin-top:28px}
.slider .win{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;cursor:grab;touch-action:pan-y;user-select:none}
.slider .win.drag{cursor:grabbing}
.slider .rail{display:flex;height:100%;transition:transform .8s var(--ease)}
.slider .rail>div{flex:0 0 100%;position:relative;height:100%}
.slider .ctr{position:absolute;right:16px;bottom:16px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:3}
.slider .arr{position:absolute;top:50%;transform:translateY(-50%);z-index:3}
.slider .arr.p{left:16px}
.slider .arr.n{right:16px}
.slider .th{display:flex;gap:10px;margin-top:14px;overflow-x:auto;scrollbar-width:none}
.slider .th::-webkit-scrollbar{display:none}
.slider .th button{all:unset;cursor:pointer;flex:0 0 120px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;position:relative;opacity:.45;outline:2px solid transparent;outline-offset:1px;transition:opacity .25s}
.slider .th button.on{opacity:1;outline-color:var(--blue)}
.slider .th button .fill{position:absolute;inset:0}
.slider .th button span.t{position:absolute;left:8px;bottom:6px;font-size:10px;font-weight:600;color:#fff;text-shadow:0 1px 4px #000}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:999px;background:rgba(41,151,255,.95);display:flex;align-items:center;justify-content:center;z-index:2}
.impact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:28px}
.impact div{border:1px solid #1E3A5C;border-radius:22px;padding:28px;background:rgba(8,16,28,.55)}
.impact p.v{font-size:clamp(40px,4vw,62px);font-weight:900;letter-spacing:-.04em;line-height:1.08;padding-bottom:.08em;background:linear-gradient(180deg,#B5DBFF,#2997FF 60%,#0A5BD6);-webkit-background-clip:text;background-clip:text;color:transparent}
.impact p.d{font-size:15px;color:#9FB6CF;margin-top:12px}
.cquote{font-size:clamp(21px,2.3vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.3;max-width:1000px}
.cnext{display:block;position:relative;min-height:clamp(300px,36vw,460px);overflow:hidden;border-top:1px solid var(--line);cursor:pointer}
.cnext .fill{position:absolute;inset:-6%;transition:transform 1.4s var(--ease);filter:brightness(.55)}
.cnext:hover .fill{transform:scale(1.06)}
.cnext .wrap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:16px;min-height:inherit}
.cnext b{font-size:clamp(34px,4.8vw,74px);font-weight:900;letter-spacing:-.04em;line-height:1.08;padding-bottom:.06em}
.crumbs2{font-size:14px;color:var(--mute);display:flex;align-items:center;gap:10px;margin-bottom:28px}
.crumbs2 a{color:var(--blue2);font-weight:600}
.pbtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.pbtn.on{background:transparent;border-color:#2A2A2E;color:var(--mute)}
.pbtn.on:hover{color:var(--fg);border-color:#3A3A40;background:#111114}
/* case study tabs */
.ctabs{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);transition:top .55s var(--ease)}
body.hdr-on .ctabs{top:76px}
.ctabs-in{display:flex;align-items:center;gap:10px;min-height:60px}
.ctabs-row{position:relative;flex:1;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;-webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);padding:0 18px}
.ctabs-row::-webkit-scrollbar{display:none}
.ctab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;z-index:1;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--mute);transition:color .35s}
.ctab:hover{color:var(--fg)}
.ctab.on{color:#000}
.ctab .k{font-size:11px;font-weight:700;color:var(--dim);transition:color .35s}
.ctab.on .k{color:rgba(0,0,0,.55)}
.ctab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ctabs-ind{position:absolute;left:0;top:50%;height:40px;margin-top:-20px;border-radius:999px;background:var(--fg);z-index:0;transition:transform .55s var(--ease),width .55s var(--ease)}
.ctabs-ar{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:40px;height:40px;border-radius:99px;border:1px solid #2A2A2E;display:inline-flex;align-items:center;justify-content:center;color:var(--fg);transition:background .25s,border-color .25s}
.ctabs-ar:hover{background:#18181C;border-color:#3A3A40}
.ctabs-ar:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ctabs-n{flex:none;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--dim);min-width:56px;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:700px){.ctabs-n{display:none}.ctabs-in{gap:6px}}
#caseOut{will-change:transform}
.chero{touch-action:pan-y}

/* the bar on a case study: just a way back */
.cback{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;border:1px solid #2A2A2E;font-size:14px;font-weight:600;color:var(--fg);transition:background .25s,border-color .25s,gap .35s var(--ease)}
.cback:hover{background:#18181C;border-color:#3A3A40;gap:12px}
.cback:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ctabs-t{margin-left:auto;font-size:13px;font-weight:600;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%;opacity:0;transition:opacity .35s}
body.cs-scrolled .ctabs-t{opacity:1}

/* ---------- Case Studies cards: a solid card that leans towards the pointer ---------- */
#pgrid{perspective:1100px}
.pcard{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;border-radius:24px;background:#0B0B0D;border:1px solid #1E1E22;overflow:hidden;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .6s var(--ease),border-color .4s,box-shadow .6s var(--ease);box-shadow:var(--sx,0) var(--sy,20px) 50px -24px rgba(0,0,0,.9)}
.pcard:hover{border-color:#1A2230;box-shadow:var(--sx,0) var(--sy,30px) 70px -26px rgba(41,151,255,.35);transition:transform .15s linear,border-color .4s,box-shadow .2s linear}
.pcard:hover .media .fill{transform:scale(1.1) translate(var(--px,0),var(--py,0))}
.pcard:hover .pc-body{transform:translate(calc(var(--px,0) * -.4),calc(var(--py,0) * -.4))}
.pc-body{transition:transform .5s var(--ease)}
.pcard .media{aspect-ratio:16/11;border-radius:0}

.pcard .tags{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;z-index:2}
.pcard .kind{font-size:11px;font-weight:700;letter-spacing:.08em;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);color:var(--fg)}
.pcard .kind.cs{background:var(--fg);color:#000}
.pcard .best{font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 10px;border-radius:999px;background:var(--blue);color:#000}
.pc-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.pcard .cat{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2)}
.pcard h3{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.pcard .who{font-size:15px;color:var(--mute)}
.pcard .role{font-size:13px;color:var(--dim)}
.pc-go{display:inline-flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;font-weight:600;color:var(--fg);border-top:1px solid #1E1E22;padding-top:16px}
.pc-go i{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:#18181C;margin-left:auto;transition:background .35s var(--ease),color .35s,transform .45s var(--ease)}
.pcard:hover .pc-go i{background:var(--blue);color:#000;transform:rotate(-45deg)}
/* the edge light: a blue glow on the border only, centred where the pointer is */
.pc-edge{position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),#7CC2FF,rgba(41,151,255,.7) 30%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s;z-index:4}
.pcard:hover .pc-edge{opacity:1}
.pcard.dim{opacity:.35}
.pcard:focus-visible{outline:2px solid var(--blue);outline-offset:4px}