html[lang^=en] .project-card,html[lang^=en] .portfolio-filter-list{font-family:'DM Sans',sans-serif}
body .portfolio-filter-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
body .portfolio-filter-list .filter-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 12px;border:1px solid #d5e4ff;border-radius:var(--radius-button,12px);background:#fff;color:#4c6390;font-size:13px;font-weight:600;white-space:normal}
body .portfolio-filter-list .filter-btn.active{background:#0953ff;color:#fff;border-color:#0953ff;box-shadow:0 5px 14px #0953ff24}
.portfolio-term-icon{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.filter-btn .portfolio-term-icon{width:20px;height:20px}
body .portfolio-filter-list .filter-btn{width:100%;min-width:0}
body .portfolio-card.project-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;padding:0;overflow:hidden;border:1px solid #d5e4ff;border-radius:var(--radius-card,16px);background:linear-gradient(115deg,#fff 40%,#edf6fb);box-shadow:none;color:#101828;height:100%;text-decoration:none;transition:border-color .2s,box-shadow .2s}
body .project-card:hover{border-color:#0953ff;box-shadow:0 14px 30px #124a8d14}
body .project-card .project-copy{grid-column:1;grid-row:1;min-width:0;padding:16px 12px 16px 18px}
html[dir=rtl] body .project-card .project-copy{padding:16px 18px 16px 12px}
.project-type{display:inline-block;padding:3px 8px;border-radius:999px;background:#e6efff;color:#0953ff;font-size:9px;line-height:1.5;font-weight:600;text-transform:uppercase;margin-bottom:8px}
body .portfolio-card.project-card h3{font-size:16px;line-height:1.3;font-weight:700;color:inherit;margin:0 0 8px;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-height:62.4px}
body .project-card p{font-size:13px;line-height:1.6;color:#526991;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;height:83.2px}
body .project-card .project-art{position:relative;grid-column:2;grid-row:1;min-height:210px;height:100%;width:100%;overflow:hidden}
body .project-card .project-art img{position:absolute;inset:auto;top:0;left:0;width:100%;height:auto;max-height:calc(100% - 22px);object-fit:contain;padding:0;border-radius:0;transition:transform .3s}
/* Two intersecting fades blend the copy-facing edge and the bottom into the card. */
body .project-card .project-art{--art-fade-direction:90deg}
html[dir=rtl] body .project-card .project-art{--art-fade-direction:270deg}
body .project-card .project-art img{-webkit-mask-image:linear-gradient(var(--art-fade-direction),transparent 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.35) 7%,rgba(0,0,0,.75) 11%,rgba(0,0,0,.96) 15%,#000 18%),linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.96) 83%,rgba(0,0,0,.75) 88%,rgba(0,0,0,.35) 93%,rgba(0,0,0,.08) 97%,transparent 100%);mask-image:linear-gradient(var(--art-fade-direction),transparent 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.35) 7%,rgba(0,0,0,.75) 11%,rgba(0,0,0,.96) 15%,#000 18%),linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.96) 83%,rgba(0,0,0,.75) 88%,rgba(0,0,0,.35) 93%,rgba(0,0,0,.08) 97%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
body .project-card[data-project="mutamayzoun-international-law-firm"] .project-art img{height:calc(100% - 32px);object-position:center center;-webkit-mask-image:linear-gradient(var(--art-fade-direction),transparent 0%,rgba(0,0,0,.2) 2%,rgba(0,0,0,.55) 5%,rgba(0,0,0,.85) 9%,rgba(0,0,0,.98) 13%,#000 16%),linear-gradient(to bottom,#000 0%,#000 86%,rgba(0,0,0,.95) 90%,rgba(0,0,0,.65) 95%,transparent 100%);mask-image:linear-gradient(var(--art-fade-direction),transparent 0%,rgba(0,0,0,.2) 2%,rgba(0,0,0,.55) 5%,rgba(0,0,0,.85) 9%,rgba(0,0,0,.98) 13%,#000 16%),linear-gradient(to bottom,#000 0%,#000 86%,rgba(0,0,0,.95) 90%,rgba(0,0,0,.65) 95%,transparent 100%)}
@media(min-width:601px){body .project-card[data-project="mutamayzoun-international-law-firm"] .project-art img{object-fit:cover;aspect-ratio:1/1;height:auto;max-height:none}}
@media(max-width:600px){html[dir] body .project-card .project-art img{aspect-ratio:1/1;height:auto;max-height:none;object-position:center}html[dir] body .project-card[data-project="mutamayzoun-international-law-firm"] .project-art img{object-fit:cover}}
.project-card:hover .project-art img{transform:scale(1.04)}
.project-open{position:absolute;bottom:62px;inset-inline-end:10px;width:32px;height:32px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #253f6338}
.project-open svg{width:22px;height:22px}
html[dir=rtl] .project-open svg{transform:scaleX(-1)}
.project-meta{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);direction:ltr;align-items:center;padding:10px 20px;min-height:54px;border-top:1px solid #d5e4ff;background:#fff;gap:12px;color:#526991;font-size:11px}
.project-location,.project-tech{display:flex;align-items:center;gap:8px;min-width:0;flex:1;line-height:1.5}
.project-location svg{width:18px;height:18px;flex-shrink:0}
.project-meta .project-tech{grid-column:1;grid-row:1;direction:ltr}
.project-meta .project-location{grid-column:2;grid-row:1;justify-content:flex-end}
.project-meta .project-location + .project-tech{border-right:1px solid #c9dcff;padding-right:12px}
html[dir] .project-tech{direction:ltr;flex-direction:row;justify-content:flex-start}
html[dir=rtl] .project-meta .project-location{direction:rtl;justify-content:flex-start}
.portfolio-primary-technology{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px;font-size:14px}
body #portfolioPreviewResults,body #portfolioArchiveResults{gap:16px}
.dark body .portfolio-card.project-card{background:linear-gradient(115deg,#111e32 40%,#18304b);color:#f4f7ff;border-color:#284364}
.dark .project-card p,.dark .project-meta{color:#afc3e2}
.dark .project-meta,.dark .project-open,.dark body .portfolio-filter-list .filter-btn{background:#111e32;border-color:#284364;color:#c8d8f0}
.dark .project-open{box-shadow:0 4px 14px #00000066}
.dark body .portfolio-filter-list .filter-btn.active{background:#0953ff;color:#fff;border-color:#0953ff}
.dark .project-type{background:#173967;color:#91b9ff}
.dark .project-meta .project-tech{border-color:#284364}
.dark .project-tech img.portfolio-term-icon[src*="/wordpress.svg"],.dark .portfolio-primary-technology img.portfolio-term-icon[src*="/wordpress.svg"]{filter:brightness(0) invert(1);opacity:.9}
body .portfolio-card.project-card:focus-visible,body .portfolio-filter-list .filter-btn:focus-visible{outline:3px solid #0953ff;outline-offset:3px}
@media(max-width:900px){body .portfolio-filter-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body .portfolio-card.project-card{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr auto}body .project-card .project-art{grid-column:2;grid-row:1;min-height:190px}body .project-card .project-copy,html[dir=rtl] body .project-card .project-copy{grid-column:1;grid-row:1;padding:14px 10px}body .portfolio-card.project-card h3{font-size:15px;max-height:58.5px}body .project-card p{font-size:12px;height:76.8px}.project-meta{grid-row:2;padding:10px 12px;font-size:10px;gap:8px}.project-open{top:auto;bottom:62px}body .portfolio-filter-list .filter-btn{font-size:12px;padding:9px 6px;gap:6px}}
@media(max-width:359px){body .portfolio-card.project-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}body .project-card .project-art{grid-column:1;grid-row:1;min-height:0;height:auto;aspect-ratio:1/1}body .project-card .project-copy,html[dir=rtl] body .project-card .project-copy{grid-row:2;padding:16px}.project-meta{grid-row:3}.project-open{top:calc(100vw - 88px);bottom:auto}}
@media(prefers-reduced-motion:reduce){body .project-card,body .project-card .project-art img{transition:none}}
#home-v2-selected-work .portfolio-filter-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#home-v2-selected-work .portfolio-filter-list .filter-btn{width:100%;font-size:13px;padding:10px 12px}
#home-v2-selected-work .portfolio-card.project-card{display:grid}
#home-v2-selected-work .home-v2-portfolio-heading{max-width:100%;margin-bottom:32px}
#home-v2-selected-work .home-v2-portfolio-heading h2{font-size:clamp(30px,3.6vw,52px)}
#home-v2-selected-work .home-v2-portfolio-heading p{font-size:16px}
#home-v2-selected-work #portfolioPreviewResults{row-gap:16px}
.portfolio-heading-accent{position:relative;color:#0953ff;white-space:nowrap}
.portfolio-heading-accent:after{content:"";position:absolute;inset-inline:0;bottom:-5px;height:5px;border-top:1px solid currentColor;border-radius:50%}
.dark .portfolio-heading-accent{color:#60a5fa}
#home-v2-selected-work{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 12% 78%,#edf8ff80,transparent 55%),linear-gradient(125deg,#f4faff,#fff 65%)}
#home-v2-selected-work::before,#home-v2-selected-work::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:min(46vw,660px);height:540px;background:linear-gradient(140deg,#dcefff80,#edf8ff20);clip-path:polygon(0 0,100% 0,73% 62%,44% 100%,58% 37%)}
#home-v2-selected-work::before{top:-95px;right:-65px;transform:rotate(-12deg)}
#home-v2-selected-work::after{bottom:-230px;left:-130px;transform:rotate(168deg);opacity:.65}
.dark #home-v2-selected-work{background:radial-gradient(ellipse at 12% 78%,#18304b55,transparent 55%),linear-gradient(125deg,#0c1c31,#101827 65%)}
.dark #home-v2-selected-work::before,.dark #home-v2-selected-work::after{background:linear-gradient(140deg,#28436460,#18304b15)}
@media(max-width:600px){#home-v2-selected-work::before,#home-v2-selected-work::after{width:75vw;height:360px}#home-v2-selected-work::before{top:-75px;right:-90px}#home-v2-selected-work::after{bottom:-190px;left:-110px}}
@media(max-width:900px){#home-v2-selected-work .portfolio-filter-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#home-v2-selected-work .portfolio-filter-list .filter-btn{font-size:12px;padding:9px 6px}}
/* Readable descriptions in every work grid; approved title sizes remain. */
body .project-card p{font-size:14px;line-height:1.6;height:89.6px}
@media(max-width:600px){html[dir] body .project-card p{font-size:14px;height:89.6px}}