/* Shared pieces used on several pages: page sections, filter chips, dropdowns, status pills, footer extras — jaypagare.in */
/* ---------- from gallery: used on other pages too ---------- */
.sel{appearance:none;-webkit-appearance:none;min-height:44px;border-radius:999px;border:1px solid #2A2A2E;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A6' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;color:var(--fg);font:inherit;font-size:14px;padding:0 36px 0 16px;cursor:pointer}
.meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:32px 0 26px}
.meta p{font-size:15px}
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid #2A2A2E}
.seg button{all:unset;cursor:pointer;min-height:38px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--mute);display:inline-flex;align-items:center;transition:background .25s,color .25s}
.seg button.on{background:var(--fg);color:#000}

/* ---------- from case-study: used on other pages too ---------- */
/* ===== VIEWS ===== */
.pg{display:none}
.pg.on{display:block}
/* ===== WORK ===== */
.whero{padding:calc(76px + clamp(64px,8vw,120px)) 0 clamp(36px,4vw,56px)}
.whero .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:40px}
.whero h1{font-size:clamp(52px,7.4vw,120px);font-weight:900;letter-spacing:-.055em;line-height:.95;padding-left:.03em}
.whero p.lead{font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--mute);max-width:560px;margin-top:20px}
.lensbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:18px}
.lensbar h2{font-size:20px;font-weight:700;letter-spacing:-.01em}
.lenses{display:flex;flex-wrap:wrap;gap:10px}
.lens{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 8px;border-radius:999px;border:1px solid #2A2A2E;background:#0B0B0D;font-size:15px;font-weight:600;color:#D1D1D6;transition:border-color .3s,background .3s,color .3s,transform .4s var(--ease)}
.lens:hover{border-color:#3A3A40;color:var(--fg);transform:translateY(-2px)}
.lens .li{width:36px;height:36px;border-radius:999px;background:#18181C;display:inline-flex;align-items:center;justify-content:center;color:var(--mute);flex:none;transition:background .3s,color .3s}
.lens.on{border-color:var(--blue);background:#0A1A2C;color:var(--fg)}
.lens.on .li{background:var(--blue);color:#000}
.refine{position:relative;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:28px;padding:14px;border-radius:20px;border:1px solid var(--line);background:#070708}
.refine .l{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.reset{all:unset;cursor:pointer;font-size:14px;font-weight:600;color:var(--blue2);padding:0 8px;min-height:40px;display:inline-flex;align-items:center}
.reset:hover{color:var(--blue)}
/* ===== shared filter bar pieces ===== */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.refine label{display:block}
.csel{position:relative;display:inline-block}
.csel-native{display:none!important}
.csel-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 16px;border-radius:999px;border:1px solid #2A2A2E;background:#000;font-size:14px;font-weight:600;color:var(--fg);white-space:nowrap;transition:border-color .25s,background .25s}
.csel-btn:hover{border-color:#3A3A40;background:#0B0B0D}
.csel-k{font-weight:500;color:var(--dim)}
.csel-chev{color:var(--mute);transition:transform .35s var(--ease)}
.csel-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:65;min-width:max(100%,220px);max-height:320px;overflow:auto;padding:6px;border-radius:18px;border:1px solid #2A2A2E;background:rgba(14,14,17,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity .22s,transform .35s var(--ease),visibility 0s linear .35s;max-height:min(340px,52vh);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3A3A40 transparent}
.csel-menu::-webkit-scrollbar{width:6px}
.csel-menu::-webkit-scrollbar-thumb{background:#3A3A40;border-radius:6px}
.csel-menu::-webkit-scrollbar-track{background:transparent;margin:10px 0}
.refine .l:last-child .csel-menu{left:auto;right:0;transform-origin:top right}
.csel-opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:42px;padding:0 12px;border-radius:12px;font-size:14px;font-weight:500;color:#C7C7CC}
.csel-opt:hover,.csel-opt:focus{background:#1C1C21;color:var(--fg);outline:none}
.csel-opt .csel-tick{color:var(--blue);opacity:0}
.csel-opt.on{color:var(--fg);font-weight:600}
.csel-opt.on .csel-tick{opacity:1}
.csel-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.csel-btn.set{border-color:#1E4E80;background:#0A1A2C}
.csel-btn.set .csel-k{color:var(--blue2)}
.csel.open .csel-chev{transform:rotate(180deg)}
.csel.open .csel-btn{border-color:var(--blue)}
.csel.up .csel-menu{top:auto;bottom:calc(100% + 8px);transform-origin:bottom left}
.csel.open .csel-menu{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .35s var(--ease),visibility 0s}
.pbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #1E4E80;background:#0A1A2C;color:var(--blue2);font-size:14px;font-weight:600;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.pbtn:hover{background:var(--blue);color:#000;border-color:var(--blue)}
#grefine{margin-bottom:0}

/* ---------- from free-plugins: used on other pages too ---------- */
.st{display:inline-flex;align-items:center;gap:6px}
.st.wip{background:#1E1A08}
.st.live::before{content:"";width:6px;height:6px;border-radius:9px;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:stp 2s infinite}

/* ---------- from contact: used on other pages too ---------- */
.dot{width:8px;height:8px;border-radius:9px;background:#5BD884;flex:none}
.foot-next{display:none}
.foot-next p{font-size:clamp(17px,1.5vw,20px);color:var(--mute)}
.fn-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
@media (max-width:760px){.fn-links{grid-template-columns:1fr}}
.fn-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-radius:22px;border:1px solid var(--line);background:#0B0B0D;transition:border-color .3s,background .3s}
.fn-links a span{display:flex;flex-direction:column;gap:4px}
.fn-links b{font-size:20px;font-weight:700;letter-spacing:-.02em}
.fn-links small{font-size:14px;color:var(--mute)}
.fn-links svg{flex:none;color:var(--dim);transition:transform .45s var(--ease),color .3s}
.fn-links a:hover{border-color:#1E3A5C;background:#07111C}
.fn-links a:hover svg{transform:translateX(5px);color:var(--blue)}
/* the header's Contact Me button has no job on the Contact page: it fades out, keeping its space so the menu stays put */
.hdr .btn-p{transition:background .3s var(--ease),color .3s var(--ease),opacity .4s,visibility 0s linear 0s}