/* SECTION: Selected Work — interactive project cards and case-study viewer */
.work-library{padding:clamp(5rem,9vw,9rem) clamp(1.25rem,5vw,5rem)!important;background:#080908!important;color:#f4f1e9!important;overflow:clip!important}
.work-library .work-header{max-width:1400px;margin:0 auto clamp(2.5rem,6vw,5rem);border-top:1px solid rgba(255,255,255,.16);padding-top:1.5rem}
.work-library .work-header h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.25rem,7.5vw,7.8rem);line-height:.88;letter-spacing:-.065em;margin:0;color:#f4f7f5!important;opacity:1!important;text-shadow:0 2px 28px rgba(0,0,0,.24)}
html[dir="rtl"] .work-library .work-header h2{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:500;line-height:1.15;letter-spacing:0;color:#f4f7f5!important}
.work-library .work-header>div:first-child>p{color:#80d6cc!important;font-size:.7rem!important;letter-spacing:.22em!important}
.work-library .work-header-text span{background:#80d6cc!important}
.work-library .work-header-text p{color:rgba(255,255,255,.62)!important}
.work-grid{max-width:1400px;height:clamp(460px,52vw,680px);margin:auto;display:flex;gap:.65rem;overflow:hidden}
.work-card{position:relative;display:block;flex:1 1 0;width:auto;min-width:0;height:100%;padding:0;border:0;border-radius:3px;overflow:hidden;background:#151615;color:#fff;text-align:start;cursor:pointer;isolation:isolate;transition:flex .75s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.work-card--wide{grid-column:auto;height:100%}
.work-grid:has(.work-card.is-active) .work-card:not(.is-active){flex:.62;filter:brightness(.7)}
.work-card.is-active{flex:3.6}
.work-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .5s ease;filter:saturate(.78) brightness(.82)}
.work-card:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.86) 100%);transition:background .4s ease}
.work-card:hover img,.work-card:focus-visible img{transform:scale(1.035);filter:saturate(1) brightness(.96)}
.work-card:focus-visible{outline:2px solid #80d6cc;outline-offset:4px}
.work-card-no,.work-card-copy,.work-card-open{position:absolute;z-index:2}
.work-card-no{top:1.35rem;inset-inline-start:1.5rem;font-size:.72rem;letter-spacing:.18em;padding:.5rem .7rem;border:1px solid rgba(255,255,255,.4);border-radius:999px;backdrop-filter:blur(10px)}
.work-card-copy{inset-inline-start:clamp(1.3rem,3vw,2.8rem);bottom:clamp(1.3rem,3vw,2.5rem);display:grid;gap:.45rem}
.work-card-copy strong{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.35rem,2.5vw,3.2rem);font-weight:400;letter-spacing:-.045em;writing-mode:vertical-rl;transform:rotate(180deg);transition:.45s ease}
.work-card-copy small{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.68)}
.work-card-copy small,.work-card-open{opacity:0;transition:.35s ease}
.work-card.is-active .work-card-copy strong{writing-mode:horizontal-tb;transform:none}
.work-card.is-active .work-card-copy small,.work-card.is-active .work-card-open{opacity:1}
.work-card-open{inset-inline-end:clamp(1.3rem,3vw,2.8rem);bottom:clamp(1.4rem,3vw,2.7rem);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;transform:translateY(8px);transition:.35s ease}
.work-card:hover .work-card-open{transform:none;opacity:1;color:#80d6cc}
.case-viewer{position:relative;inset:auto;z-index:3;display:block;max-width:1400px;max-height:0;margin:0 auto;visibility:hidden;pointer-events:none;overflow:hidden;transition:max-height .85s cubic-bezier(.2,.8,.2,1),margin .85s cubic-bezier(.2,.8,.2,1)}
.case-viewer.is-open{max-height:900px;margin-top:1rem;visibility:visible;pointer-events:auto}
.case-viewer-backdrop{display:none}
.case-viewer-panel{position:relative;width:100%;max-height:none;display:grid;grid-template-columns:.92fr 1.08fr;overflow:hidden;background:#f1efe8;color:#101110;transform:translateY(-24px);opacity:0;transition:transform .65s .12s cubic-bezier(.2,.75,.2,1),opacity .45s .12s ease}
.case-viewer.is-open .case-viewer-panel{transform:none;opacity:1}
.case-close{position:absolute;z-index:3;top:1rem;inset-inline-end:1rem;border:1px solid rgba(0,0,0,.18);background:rgba(241,239,232,.84);color:#111;border-radius:999px;padding:.65rem .85rem;cursor:pointer;backdrop-filter:blur(10px)}
.case-close span{font-size:1.25rem;margin-inline-start:.3rem}
.case-image{position:relative;min-height:620px;overflow:hidden;background:#111}
.case-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center top}
.case-image:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),transparent 45%)}
.case-index{position:absolute;z-index:1;inset-inline-start:1.5rem;bottom:1.3rem;color:#fff;font-family:Georgia,serif;font-size:4rem}
.case-content{padding:clamp(3.8rem,6vw,6rem) clamp(1.5rem,4vw,4rem) 3rem;display:flex;flex-direction:column}
.case-sector{color:#277b74;text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;margin-bottom:1.2rem}
.case-content h3{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.6rem,5vw,5.2rem);font-weight:400;line-height:.92;letter-spacing:-.055em;margin:0 0 1rem}
.case-services{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#72736f;padding-bottom:2rem;border-bottom:1px solid rgba(0,0,0,.16)}
.case-story{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:2rem 0}
.case-story span{display:block;color:#277b74;font-size:.67rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:.7rem}
.case-story p{font-size:.9rem;line-height:1.75;color:#4e504d;margin:0}
.case-link{margin-top:auto;width:fit-content;color:#111;text-decoration:none;border-bottom:1px solid #111;padding-bottom:.4rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em}
body.case-open{overflow:auto}
html[dir="rtl"] .work-card,html[dir="rtl"] .case-viewer-panel{text-align:right}
html[dir="rtl"] .work-card-copy strong,html[dir="rtl"] .case-content h3{font-family:"IBM Plex Sans Arabic",sans-serif;letter-spacing:0}
html[dir="rtl"] .work-card-copy small,html[dir="rtl"] .case-services,html[dir="rtl"] .case-sector,html[dir="rtl"] .case-story span,html[dir="rtl"] .case-link{text-transform:none;letter-spacing:0}
@media(max-width:760px){.work-library{padding-inline:1rem!important}.work-library .work-header{display:block}.work-library .work-header h2{font-size:clamp(3rem,14vw,4.8rem)}.work-library .work-header-text{margin-top:1.5rem}.work-grid{height:500px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;margin-inline:-1rem;padding:0 1rem 1.2rem;scrollbar-width:none}.work-grid::-webkit-scrollbar{display:none}.work-card,.work-card--wide,.work-grid:has(.work-card.is-active) .work-card:not(.is-active),.work-card.is-active{flex:0 0:72px;height:480px;scroll-snap-align:center;transition:flex-basis .65s cubic-bezier(.2,.8,.2,1)}.work-card.is-active{flex-basis:min(82vw,360px)}.work-card-copy strong{font-size:1.7rem}.work-card.is-active .work-card-copy strong{font-size:2.25rem}.work-card-open{display:none}.work-card-copy{max-width:85%;inset-inline-start:1rem;bottom:1.3rem}.case-viewer.is-open{margin-top:.75rem;max-height:1100px}.case-viewer-panel{width:100%;display:block;border-radius:0}.case-image{min-height:0;height:34svh}.case-index{font-size:2.8rem}.case-content{padding:2rem 1.25rem 2.25rem}.case-content h3{font-size:2.8rem}.case-story{grid-template-columns:1fr;gap:1.25rem}.case-link{margin-top:.5rem}.case-close{top:.7rem;inset-inline-end:.7rem}.work-library .work-header>div:first-child>p{font-size:.62rem!important}}
@media(prefers-reduced-motion:reduce){.work-card img,.case-viewer-panel,.case-viewer-backdrop{transition:none!important}}

/* REDESIGN: Selected project lifts while its case details unfold below */
.work-grid{align-items:flex-end;overflow:visible!important;transition:height .75s cubic-bezier(.2,.8,.2,1)}
.work-card{transform-origin:center bottom;transition:flex .75s cubic-bezier(.2,.8,.2,1),height .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1),filter .45s ease,opacity .45s ease!important}
.work-library.case-expanded .work-grid{height:clamp(330px,38vw,500px)}
.work-library.case-expanded .work-card:not(.is-active){flex:.42;height:72%;transform:translateY(12px);filter:brightness(.48) saturate(.55);opacity:.72}
.work-library.case-expanded .work-card.is-active{flex:3.8;height:100%;transform:translateY(-42px);z-index:4;box-shadow:0 28px 55px rgba(0,0,0,.34)}
.work-library.case-expanded .work-card.is-active img{filter:saturate(1) brightness(.9);transform:scale(1.025)}
.work-library.case-expanded .work-card.is-active:after{background:linear-gradient(180deg,rgba(0,0,0,.03) 30%,rgba(0,0,0,.76) 100%)}
.case-viewer{transform:translateY(30px);opacity:0;transition:max-height .8s cubic-bezier(.2,.8,.2,1),margin .8s cubic-bezier(.2,.8,.2,1),transform .7s .08s cubic-bezier(.2,.8,.2,1),opacity .4s .08s ease!important}
.case-viewer.is-open{max-height:820px;margin-top:-16px;transform:none;opacity:1}
.case-viewer-panel{border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.3);transform:translateY(45px)!important;clip-path:inset(0 0 100% 0 round 18px);transition:transform .75s .06s cubic-bezier(.2,.8,.2,1),opacity .4s .06s ease,clip-path .8s .06s cubic-bezier(.2,.8,.2,1)!important}
.case-viewer.is-open .case-viewer-panel{transform:none!important;clip-path:inset(0 0 0 0 round 18px)}
.case-close{transition:background .25s ease,transform .25s ease}.case-close:hover{background:#fff;transform:translateY(-2px)}
@media(max-width:760px){.work-grid{overflow-x:auto!important;overflow-y:visible!important}.work-library.case-expanded .work-grid{height:430px}.work-library.case-expanded .work-card:not(.is-active){flex-basis:54px;height:82%;transform:translateY(8px)}.work-library.case-expanded .work-card.is-active{flex-basis:min(78vw,340px);height:100%;transform:translateY(-22px)}.case-viewer.is-open{margin-top:-8px}.case-viewer-panel{border-radius:14px}.case-image{height:28svh}.case-content{padding-top:2.4rem}}
@media(prefers-reduced-motion:reduce){.work-grid,.work-card,.case-viewer,.case-viewer-panel{transition:none!important}}

/* REDESIGN: Case study opens as an in-section overlay */
.work-library{position:relative!important}
.case-viewer{position:absolute!important;z-index:12!important;top:var(--case-top,320px)!important;left:50%!important;width:min(1400px,calc(100% - 10vw))!important;height:clamp(330px,38vw,500px)!important;max-height:none!important;margin:0!important;overflow:visible!important;transform:translate(-50%,28px)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.case-viewer.is-open{max-height:none!important;margin:0!important;transform:translate(-50%,0)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.case-viewer-backdrop{position:absolute;display:block!important;inset:-1rem!important;width:calc(100% + 2rem);height:calc(100% + 2rem);padding:0;border:0;background:rgba(5,7,6,.56);backdrop-filter:blur(7px);cursor:pointer;opacity:0;transition:opacity .45s ease}
.case-viewer.is-open .case-viewer-backdrop{opacity:1}
.case-viewer-panel{z-index:1;width:88%!important;height:100%;max-height:100%!important;margin:auto;border:1px solid rgba(255,255,255,.16);overflow:hidden!important;background:#f1efe8;box-shadow:0 32px 80px rgba(0,0,0,.5)}
.case-image{min-height:0!important;height:100%}.case-content{min-height:0;padding:clamp(3rem,5vw,5rem) clamp(1.5rem,3vw,3.4rem) 2.2rem;overflow-y:auto;overscroll-behavior:contain}.case-story{margin:1.5rem 0}.case-content h3{font-size:clamp(2.4rem,4vw,4.6rem)}
.work-library.case-expanded .work-grid{pointer-events:none}
@media(max-width:760px){.case-viewer{left:1rem!important;width:calc(100% - 2rem)!important;height:430px!important;transform:translateY(22px)!important}.case-viewer.is-open{transform:none!important}.case-viewer-backdrop{inset:-.6rem!important;width:calc(100% + 1.2rem);height:calc(100% + 1.2rem)}.case-viewer-panel{display:flex!important;width:100%!important;height:100%;flex-direction:column}.case-image{flex:0 0 32%;height:auto!important}.case-content{flex:1;padding:2.8rem 1.2rem 1.5rem}.case-content h3{font-size:2.35rem}.case-story{gap:1rem;margin:1.25rem 0}.case-story p{font-size:.82rem;line-height:1.6}.case-services{padding-bottom:1rem}}