.works-showcase{padding-top:16px}.works-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 22px;margin-bottom:13px;border:1px solid rgba(120,204,109,.16);border-radius:13px;background:linear-gradient(115deg,rgba(120,204,109,.12),rgba(120,204,109,.02))}.works-hero__eyebrow{display:flex;align-items:center;gap:6px;color:#78cc6d;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase}.works-hero h1{margin:4px 0;font-size:24px}.works-hero p{margin:0;font-size:12px}.works-hero__total{display:flex;flex-direction:column;align-items:center;min-width:52px;border-inline-start:1px solid rgba(120,204,109,.2);font-size:10px}.works-hero__total b{color:#78cc6d;font-size:23px}.works-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.works-sort{display:flex;align-items:center;gap:7px;font-size:11px}.works-sort select{padding:6px 26px 6px 8px;border:1px solid rgba(120,204,109,.28);border-radius:6px;background:transparent;color:inherit;font:inherit}.works-view{display:flex;gap:5px}.works-view button{display:grid;place-items:center;width:31px;height:30px;border:1px solid rgba(120,204,109,.25);border-radius:6px;background:transparent;color:inherit;cursor:pointer}.works-view button.active{border-color:#78cc6d;background:#78cc6d;color:#fff}.portfolio-grid{display:flex;flex-wrap:wrap;margin:-7px}.portfolio-card{width:50%;padding:7px}.portfolio-card__media{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;border-radius:11px 11px 0 0;background:#26262d}.portfolio-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.portfolio-card__shade{position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(0,0,0,.65));opacity:0;transition:.25s}.portfolio-card__open{position:absolute;top:11px;inset-inline-end:11px;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#78cc6d;color:#fff;opacity:0;transition:.25s}.portfolio-card__count{position:absolute;bottom:9px;inset-inline-end:9px;display:inline-flex;gap:4px;padding:4px 7px;border-radius:15px;background:rgba(0,0,0,.68);color:#fff;font-size:10px}.portfolio-card__body{padding:12px 14px 13px;border:1px solid rgba(120,204,109,.14);border-top:0;border-radius:0 0 11px 11px}.portfolio-card__category{display:block;margin-bottom:4px;color:#78cc6d;font-size:9px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}.portfolio-card__title{display:block;color:inherit;font-size:14px;font-weight:500;line-height:1.4}.portfolio-card__link{display:none;margin-top:9px;color:#78cc6d;font-size:11px}.portfolio-card__link i{margin-inline-start:5px}.portfolio-card:hover img{transform:scale(1.05)}.portfolio-card:hover .portfolio-card__shade,.portfolio-card:hover .portfolio-card__open{opacity:1}.works-load-wrap{text-align:center;padding-top:17px}.works-load-more{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid rgba(120,204,109,.42);border-radius:7px;background:transparent;color:#78cc6d;font:inherit;font-size:12px;cursor:pointer}.works-load-more.is-loading{opacity:.55;pointer-events:none}.works-load-more.is-loading i{animation:workspin .75s linear infinite}@keyframes workspin{to{transform:rotate(360deg)}}.is-list .portfolio-card{display:flex;width:100%}.is-list .portfolio-card__media{width:36%;min-height:126px;aspect-ratio:auto;border-radius:11px 0 0 11px}.is-list .portfolio-card__body{display:flex;flex:1;flex-direction:column;justify-content:center;border:1px solid rgba(120,204,109,.14);border-inline-start:0;border-radius:0 11px 11px 0}.is-list .portfolio-card__link{display:inline-block}@media(max-width:560px){.works-hero{padding:16px}.works-hero h1{font-size:21px}.portfolio-card{width:100%}.is-list .portfolio-card__media{width:42%;min-height:120px}.works-hero__total{min-width:47px}}
/* Refined list presentation: one cohesive project card, with uncropped artwork. */
.is-list .portfolio-grid { margin: 0; gap: 14px; }
.is-list .portfolio-card { display: flex; flex-direction: row-reverse; width: 100%; min-height: 180px; padding: 0; overflow: hidden; border: 1px solid rgba(120, 204, 109, .2); border-radius: 14px; background: linear-gradient(110deg, rgba(120, 204, 109, .07), rgba(120, 204, 109, .015)); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.is-list .portfolio-card:hover { border-color: rgba(120, 204, 109, .55); box-shadow: 0 14px 30px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.is-list .portfolio-card__media { flex: 0 0 37%; width: auto; min-height: 180px; aspect-ratio: auto; border-radius: 0; background: radial-gradient(circle at center, rgba(120, 204, 109, .16), transparent 67%); }
.is-list .portfolio-card__media img { object-fit: contain; padding: 14px; transform: none !important; }
.is-list .portfolio-card__shade { background: linear-gradient(90deg, rgba(23, 23, 27, .03), rgba(23, 23, 27, .28)); }
.is-list .portfolio-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 25px 28px; border: 0; border-radius: 0; background: transparent; text-align: start; }
.is-list .portfolio-card__category { margin-bottom: 8px; }
.is-list .portfolio-card__title { max-width: 100%; font-size: 17px; line-height: 1.55; }
.is-list .portfolio-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; font-size: 12px; font-weight: 500; }
.is-list .portfolio-card__open { opacity: 1; transform: none; }
.is-list .portfolio-card__count { bottom: 12px; inset-inline-end: 12px; }
.works-showcase:not(.is-list) .portfolio-card { transition: transform .25s ease, box-shadow .25s ease; }
.works-showcase:not(.is-list) .portfolio-card:hover { transform: translateY(-4px); box-shadow: 0 13px 26px rgba(0, 0, 0, .1); }
.works-showcase:not(.is-list) .portfolio-card__body { min-height: 92px; }
@media (max-width: 820px) {
  .is-list .portfolio-card__media { flex-basis: 40%; }
  .is-list .portfolio-card__body { padding: 20px 22px; }
}
@media (max-width: 560px) {
  .is-list .portfolio-grid { gap: 11px; }
  .is-list .portfolio-card { display: block; min-height: 0; }
  .is-list .portfolio-card__media { display: block; width: 100%; min-height: 175px; aspect-ratio: 16 / 9; }
  .is-list .portfolio-card__body { display: block; padding: 17px; }
  .is-list .portfolio-card__title { font-size: 15px; }
}
/* Image-inspired heading and control bar. */
.works-showcase { padding-top: 0;     background: transparent;
}
.works-page-heading { margin: 0 0 22px; padding: 0 6px; text-align: start; }
.works-page-heading h1 { margin: 0 0 7px; color: #133b66; font-size: 31px; font-weight: 700; line-height: 1.1; }
.works-page-heading p { margin: 0; color: #8094aa; font-size: 12px; }
.works-toolbar { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; min-height: 91px; padding: 15px 18px; margin-bottom: 23px; border: 1px solid #dce5ea; border-radius: 29px; background: rgba(255,255,255,.76); box-shadow: 0 9px 22px rgba(28,54,79,.035); }
.works-sort-actions, .works-view { display: flex; align-items: center; gap: 10px; }
.works-sort-actions button, .works-view button { display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 16px; background: #f1f5f7; color: #507085; font-size: 23px; cursor: pointer; transition: .2s ease; }
.works-sort-actions button:hover, .works-view button:hover { transform: translateY(-2px); color: #00a99d; }
.works-sort-actions button.active, .works-view button.active { border: 1px solid #52d2c8; background: #f4fffd; color: #00a99d; }
.works-sort-actions button:last-child { margin-inline-start: 2px; }
@media(max-width:560px) { .works-page-heading h1 { font-size: 25px; } .works-toolbar { min-height: 74px; padding: 10px; border-radius: 19px; } .works-sort-actions, .works-view { gap: 6px; } .works-sort-actions button, .works-view button { width: 42px; height: 42px; border-radius: 11px; font-size: 18px; } .works-sort-actions button:last-child { display: none; } }
/* Compact toolbar controls. */
.works-toolbar { min-height: 76px; padding: 13px 16px; }
.works-sort-actions button, .works-view button { width: 46px; height: 46px; border-radius: 13px; font-size: 18px; }
@media(max-width:560px) { .works-toolbar { min-height: 64px; padding: 9px; } .works-sort-actions button, .works-view button { width: 38px; height: 38px; border-radius: 10px; font-size: 16px; } }

/* Detailed case-study card for list view. */
.portfolio-card__featured,.portfolio-card__thumbs,.portfolio-card__date,.portfolio-card__description,.portfolio-card__tags,.portfolio-card__actions{display:none}
.is-list .portfolio-grid{gap:18px}.is-list .portfolio-card{min-height:510px;flex-direction:row-reverse;border-color:#b6e2f5;border-radius:30px;background:#fff;box-shadow:none}.is-list .portfolio-card:hover{border-color:#75c9ef;box-shadow:0 16px 38px rgba(13,55,94,.12);transform:translateY(-2px)}
.is-list .portfolio-card__media{position:relative;flex-basis:50%;min-height:510px;background:#e7edf5}.is-list .portfolio-card__media>a{display:block;width:100%;height:100%}.is-list .portfolio-card__media>a>img{width:100%;height:100%;padding:0;object-fit:cover}.is-list .portfolio-card__shade{background:linear-gradient(120deg,rgba(13,59,102,.06),rgba(13,59,102,.18));opacity:1}.is-list .portfolio-card__open{display:none}.is-list .portfolio-card__featured{position:absolute;top:20px;inset-inline-end:21px;display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:99px;background:#0c3b70;color:#fff;font-size:12px;font-weight:600;box-shadow:0 8px 15px rgba(12,59,112,.24)}.is-list .portfolio-card__thumbs{position:absolute;right:15px;bottom:15px;left:15px;display:flex;justify-content:flex-end;gap:8px;padding:10px;border-radius:15px;background:rgba(17,31,51,.72);direction:ltr}.is-list .portfolio-card__thumbs span{display:block;overflow:hidden;width:48px;height:38px;border:1px solid rgba(255,255,255,.55);border-radius:7px;background:#fff}.is-list .portfolio-card__thumbs img{width:100%;height:100%;object-fit:cover}
.is-list .portfolio-card__body{justify-content:flex-start;padding:32px 34px;background:#fff}.is-list .portfolio-card__category{display:inline-flex;align-items:center;align-self:flex-start;padding:6px 12px;margin-bottom:10px;border-radius:99px;background:#e9fbfb;color:#008e91;font-size:12px;letter-spacing:0;text-transform:none}.is-list .portfolio-card__title{font-size:30px;font-weight:700;color:#092c59;line-height:1.2}.is-list .portfolio-card__date{display:block;margin-top:8px;color:#7c93aa;font-size:12px}.is-list .portfolio-card__description{display:block;margin:20px 0 17px;color:#29476a;font-size:14px;line-height:1.8}.is-list .portfolio-card__tags{display:flex;flex-wrap:wrap;gap:8px;width:100%;padding:16px 0;border-top:1px solid #e5edf4}.is-list .portfolio-card__tags span{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid #d6e4ef;border-radius:9px;background:#f8fbfd;color:#315471;font-size:11px;font-weight:600}.is-list .portfolio-card__actions{display:flex;align-items:center;gap:10px;width:100%;margin-top:auto;padding-top:20px}.is-list .portfolio-card__actions a{display:inline-flex;align-items:center;gap:7px;padding:12px 15px;border-radius:10px;font-size:12px;font-weight:600}.is-list .portfolio-card__case{background:#10243f;color:#fff}.is-list .portfolio-card__visit{border:1px solid #d7e3ee;color:#315471}.is-list .portfolio-card__link{display:none}
@media(max-width:820px){.is-list .portfolio-card{min-height:420px}.is-list .portfolio-card__media{min-height:420px}.is-list .portfolio-card__body{padding:24px}.is-list .portfolio-card__title{font-size:23px}.is-list .portfolio-card__description{font-size:13px}}
@media(max-width:560px){.is-list .portfolio-card{display:flex;flex-direction:column;min-height:0;border-radius:19px}.is-list .portfolio-card__media{width:100%;min-height:255px;flex-basis:auto}.is-list .portfolio-card__body{display:flex;padding:21px}.is-list .portfolio-card__title{font-size:24px}.is-list .portfolio-card__actions{padding-top:15px}.is-list .portfolio-card__actions a{padding:10px;font-size:11px}.is-list .portfolio-card__featured{top:13px;inset-inline-end:13px}.is-list .portfolio-card__thumbs{right:10px;bottom:10px;left:10px}}
/* Keep artwork intact and position it on the right in list view. */
.is-list .portfolio-card { flex-direction: row; }
.is-list .portfolio-card__media { background: #e7edf5; }
.is-list .portfolio-card__media > a > img { object-fit: contain; object-position: center; }
@media(max-width:560px) { .is-list .portfolio-card { flex-direction: column; } }

/* Compact list card proportions. */
.is-list .portfolio-card { min-height: 370px; }
.is-list .portfolio-card__media { flex-basis: 42%; min-height: 370px; }
.is-list .portfolio-card__body { padding: 23px 26px; }
.is-list .portfolio-card__title { font-size: 25px; }
.is-list .portfolio-card__description { display: -webkit-box; overflow: hidden; margin: 14px 0; font-size: 13px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.is-list .portfolio-card__tags { padding: 11px 0; }
.is-list .portfolio-card__actions { padding-top: 14px; }
.is-list .portfolio-card__actions a { padding: 10px 12px; }
@media(max-width:820px) { .is-list .portfolio-card, .is-list .portfolio-card__media { min-height: 340px; } }
@media(max-width:560px) { .is-list .portfolio-card__media { min-height: 220px; } }

/* Strengthened grid cards using the same case-study visual language. */
.works-showcase:not(.is-list) .portfolio-grid { margin: -10px; }
.works-showcase:not(.is-list) .portfolio-card { padding: 10px; }
.works-showcase:not(.is-list) .portfolio-card > .portfolio-card__media { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px 16px 0 0; background: #e8eff6; }
.works-showcase:not(.is-list) .portfolio-card__media > a { display: block; width: 100%; height: 100%; }
.works-showcase:not(.is-list) .portfolio-card__media > a > img { width: 100%; height: 100%; object-fit: cover; }
.works-showcase:not(.is-list) .portfolio-card__featured { position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 99px; background: #0c3b70; color: #fff; font-size: 10px; font-weight: 600; box-shadow: 0 6px 12px rgba(12,59,112,.22); }
.works-showcase:not(.is-list) .portfolio-card__body { min-height: 177px; padding: 16px 17px; border: 1px solid #dce9f2; border-top: 0; border-radius: 0 0 16px 16px; background: #fff; }
.works-showcase:not(.is-list) .portfolio-card__category { display: inline-flex; width: fit-content; padding: 4px 9px; margin-bottom: 8px; border-radius: 99px; background: #e9fbfb; color: #008e91; font-size: 10px; letter-spacing: 0; text-transform: none; }
.works-showcase:not(.is-list) .portfolio-card__title { color: #092c59; font-size: 17px; font-weight: 700; }
.works-showcase:not(.is-list) .portfolio-card__date { display: inline-block; margin-inline-start: 7px; color: #8497aa; font-size: 10px; }
.works-showcase:not(.is-list) .portfolio-card__description { display: -webkit-box; overflow: hidden; margin: 9px 0 10px; color: #47617d; font-size: 12px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.works-showcase:not(.is-list) .portfolio-card__tags { display: flex; gap: 6px; }
.works-showcase:not(.is-list) .portfolio-card__tags span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid #dce8f0; border-radius: 7px; color: #47617d; font-size: 9px; }
.works-showcase:not(.is-list) .portfolio-card__actions, .works-showcase:not(.is-list) .portfolio-card__thumbs { display: none; }
.works-showcase:not(.is-list) .portfolio-card:hover { transform: translateY(-5px); }
.works-showcase:not(.is-list) .portfolio-card:hover .portfolio-card__body { border-color: #a8dff2; }
@media(max-width:560px) { .works-showcase:not(.is-list) .portfolio-card__body { min-height: 0; } }
/* Reference-style grid project card. */
.works-showcase:not(.is-list) .portfolio-card { overflow: hidden; padding: 0; border: 1px solid #dce8f1; border-radius: 25px; background: #fff; box-shadow: 0 8px 22px rgba(21, 59, 94, .05); }
.works-showcase:not(.is-list) .portfolio-card > .portfolio-card__media { border-radius: 24px 24px 0 0; }
.works-showcase:not(.is-list) .portfolio-card__featured { top: 18px; inset-inline-end: 18px; padding: 8px 13px; font-size: 11px; }
.works-showcase:not(.is-list) .portfolio-card__thumbs { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; justify-content: center; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(24, 34, 51, .72); direction: ltr; }
.works-showcase:not(.is-list) .portfolio-card__thumbs span { display: block; overflow: hidden; width: 58px; height: 48px; border: 1px solid rgba(255,255,255,.75); border-radius: 8px; background: #fff; }
.works-showcase:not(.is-list) .portfolio-card__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.works-showcase:not(.is-list) .portfolio-card__body { position: relative; min-height: 0; padding: 27px 25px 25px; border: 0; border-radius: 0; }
.works-showcase:not(.is-list) .portfolio-card__category { position: absolute; top: 24px; inset-inline-end: 25px; padding: 7px 12px; font-size: 11px; }
.works-showcase:not(.is-list) .portfolio-card__date { position: absolute; top: 30px; inset-inline-start: 25px; margin: 0; font-size: 12px; font-weight: 600; }
.works-showcase:not(.is-list) .portfolio-card__title { display: block; padding-top: 41px; font-size: 23px; line-height: 1.35; }
.works-showcase:not(.is-list) .portfolio-card__description { min-height: 42px; margin: 13px 0 17px; font-size: 13px; -webkit-line-clamp: 2; }
.works-showcase:not(.is-list) .portfolio-card__tags { justify-content: flex-end; gap: 8px; padding: 16px 0; border-top: 1px solid #e7edf3; }
.works-showcase:not(.is-list) .portfolio-card__tags span { padding: 7px 10px; border: 0; border-radius: 99px; background: #edfbf4; color: #008e70; font-size: 10px; }
.works-showcase:not(.is-list) .portfolio-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 9px; }
.works-showcase:not(.is-list) .portfolio-card__actions a { display: inline-flex; align-items: center; gap: 6px; padding: 11px 13px; border-radius: 11px; font-size: 11px; font-weight: 600; }
.works-showcase:not(.is-list) .portfolio-card__case { background: #071326; color: #fff; }
.works-showcase:not(.is-list) .portfolio-card__visit { border: 1px solid #d7e4ee; color: #3d5876; }
.works-showcase:not(.is-list) .portfolio-card:hover { border-color: #a7d9f1; transform: translateY(-5px); box-shadow: 0 17px 32px rgba(21, 59, 94, .12); }
.works-showcase:not(.is-list) .portfolio-card:hover .portfolio-card__body { border-color: transparent; }
@media(max-width:560px) { .works-showcase:not(.is-list) .portfolio-card { border-radius: 19px; } .works-showcase:not(.is-list) .portfolio-card__body { padding: 22px 18px; } .works-showcase:not(.is-list) .portfolio-card__category { top: 19px; inset-inline-end: 18px; } .works-showcase:not(.is-list) .portfolio-card__date { top: 25px; inset-inline-start: 18px; } .works-showcase:not(.is-list) .portfolio-card__title { padding-top: 38px; font-size: 20px; } .works-showcase:not(.is-list) .portfolio-card__thumbs span { width: 45px; height: 37px; } }
/* Consistent spacing between grid cards. */
.works-showcase:not(.is-list) .portfolio-grid { gap: 20px; margin: 0; }
.works-showcase:not(.is-list) .portfolio-card { width: calc(50% - 10px); padding: 0; }
@media(max-width:560px) { .works-showcase:not(.is-list) .portfolio-grid { gap: 14px; } .works-showcase:not(.is-list) .portfolio-card { width: 100%; } }

/* Wide editorial list layout matching the supplied reference. */
.is-list .portfolio-grid { gap: 20px; }
.is-list .portfolio-card { min-height: 488px; border-color: #d9e6ef; border-radius: 27px; }
.is-list .portfolio-card__media { flex-basis: 32%; min-height: 488px; }
.is-list .portfolio-card__media > a > img { object-fit: cover; object-position: center; }
.is-list .portfolio-card__body { position: relative; padding: 31px 32px 26px; }
.is-list .portfolio-card__category { position: absolute; top: 25px; inset-inline-end: 32px; margin: 0; }
.is-list .portfolio-card__date { position: absolute; top: 31px; inset-inline-start: 32px; margin: 0; font-size: 12px; font-weight: 600; }
.is-list .portfolio-card__title { padding-top: 54px; font-size: 28px; }
.is-list .portfolio-card__description { min-height: 48px; margin: 19px 0 18px; -webkit-line-clamp: 2; }
.is-list .portfolio-card__tags { padding: 17px 0; }
.is-list .portfolio-card__tags::before { content: 'نطاق العمل'; flex-basis: 100%; margin-bottom: 2px; color: #8ca0b6; font-size: 11px; font-weight: 600; }
.is-list .portfolio-card__actions { justify-content: flex-end; padding-top: 18px; }
.is-list .portfolio-card__featured { top: 18px; inset-inline-end: 18px; }
@media(max-width:820px) { .is-list .portfolio-card, .is-list .portfolio-card__media { min-height: 410px; } .is-list .portfolio-card__media { flex-basis: 35%; } .is-list .portfolio-card__body { padding: 25px; } .is-list .portfolio-card__title { font-size: 23px; } }
@media(max-width:560px) { .is-list .portfolio-card { min-height: 0; } .is-list .portfolio-card__media { min-height: 230px; } .is-list .portfolio-card__body { padding: 22px 18px; } .is-list .portfolio-card__category { top: 20px; inset-inline-end: 18px; } .is-list .portfolio-card__date { top: 26px; inset-inline-start: 18px; } .is-list .portfolio-card__title { padding-top: 45px; font-size: 22px; } }
/* Compact list card without image cropping. */
.is-list .portfolio-card { min-height: 0; }
.is-list .portfolio-card__media { flex-basis: 34%; min-height: 350px; background: #e7edf5; }
.is-list .portfolio-card__media > a > img { padding: 12px; object-fit: contain; object-position: center; }
.is-list .portfolio-card__body { min-height: 350px; padding: 27px 32px 24px; }
.is-list .portfolio-card__description { min-height: 0; margin: 16px 0; }
.is-list .portfolio-card__actions { margin-top: 16px; padding-top: 14px; }
@media(max-width:820px) { .is-list .portfolio-card__media, .is-list .portfolio-card__body { min-height: 320px; } }
@media(max-width:560px) { .is-list .portfolio-card__media { min-height: 220px; } .is-list .portfolio-card__body { min-height: 0; } }.works-detail-modern{padding-top:8px;background: transparent;}.project-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;color:#8799ac;font-size:12px}.project-breadcrumb a{color:#0b8d8d}.project-hero-detail{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;margin-bottom:28px;border:1px solid #d8e7f1;border-radius:25px;background:#fff;box-shadow:0 15px 35px rgba(21,59,94,.07)}.project-hero-detail__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:430px;padding:42px}.project-pill{padding:7px 12px;border-radius:99px;background:#e8fbfa;color:#008d8f;font-size:12px;font-weight:600}.project-hero-detail h1{margin:15px 0 4px;color:#092c59;font-size:35px}.project-year{color:#8396ab}.project-hero-detail__copy p{margin:20px 0;color:#3f5b78;line-height:1.85}.project-hero-detail__actions{display:flex;gap:10px}.project-primary,.project-secondary{padding:12px 16px;border-radius:10px;font-size:12px;font-weight:600}.project-primary{background:#092b54;color:#fff}.project-secondary{border:1px solid #d4e3ee;color:#3f5b78}.project-hero-detail__visual{position:relative;min-height:430px;background:#e8eef5}.project-hero-detail__visual>img{width:100%;height:100%;object-fit:contain;padding:20px}.project-case{position:absolute;top:20px;inset-inline-end:20px;padding:9px 14px;border-radius:99px;background:#093767;color:#fff;font-size:11px;font-weight:700}.project-thumbnails{position:absolute;right:18px;bottom:18px;left:18px;display:flex;justify-content:center;gap:8px;padding:10px;border-radius:15px;background:rgba(19,33,55,.72);direction:ltr}.project-thumbnails a{display:block;overflow:hidden;width:55px;height:42px;border:1px solid rgba(255,255,255,.65);border-radius:7px}.project-thumbnails img{width:100%;height:100%;object-fit:cover}.project-overview{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;padding:34px;margin-bottom:28px;border:1px solid #e0eaf1;border-radius:20px;background:#fff}.section-label{display:block;margin-bottom:8px;color:#079a91;font-size:11px;font-weight:700}.project-overview h2,.project-section-heading h2{margin:0 0 17px;color:#092c59;font-size:23px}.project-richtext{color:#45617e;line-height:1.9}.project-facts{display:flex;flex-direction:column;gap:14px;padding-inline-start:28px;border-inline-start:1px solid #e5edf3}.project-facts div{display:grid;grid-template-columns:24px 1fr;column-gap:8px}.project-facts i{grid-row:span 2;color:#079a91;font-size:18px}.project-facts span{color:#8599af;font-size:11px}.project-facts strong{color:#264969;font-size:12px}.project-related{padding-top:8px}.project-section-heading{margin-bottom:16px}.project-related__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.related-project{position:relative;display:block;overflow:hidden;min-height:160px;border-radius:15px;background:#e7eef5}.related-project:after{position:absolute;inset:0;content:'';background:linear-gradient(transparent,rgba(7,25,47,.75))}.related-project img{width:100%;height:100%;object-fit:cover}.related-project span{position:absolute;z-index:1;right:15px;bottom:13px;left:15px;color:#fff;font-size:13px;font-weight:600}@media(max-width:680px){.project-hero-detail{grid-template-columns:1fr}.project-hero-detail__copy{min-height:0;padding:28px}.project-hero-detail__visual{min-height:280px;order:-1}.project-hero-detail h1{font-size:28px}.project-overview{grid-template-columns:1fr;padding:25px}.project-facts{padding:20px 0 0;border-top:1px solid #e5edf3;border-inline-start:0}.project-related__grid{grid-template-columns:1fr}}.works-detail-modern{background: transparent;}.project-hero-detail{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:510px;overflow:hidden;margin:0 -28px 34px;padding:0 28px;border:0;border-radius:0;background:radial-gradient(circle at 23% 62%,rgba(255,190,108,.14),transparent 21%),radial-gradient(circle at 92% 0,rgba(68,215,223,.14),transparent 20%),rgba(255,255,255,.48);box-shadow:none}.project-hero-detail__copy{z-index:2;grid-column:2;grid-row:1;min-height:510px;padding:70px 22px 60px;text-align:right}.project-hero-detail__copy:before{display:block;content:'مشروع مميز';margin-bottom:15px;color:#079a91;font-size:12px;font-weight:700;letter-spacing:.8px}.project-pill{margin-bottom:12px;background:#fff;border:1px solid #b8edf0;box-shadow:0 5px 13px rgba(15,136,149,.08)}.project-hero-detail h1{margin:7px 0;color:#0b376d;font-size:52px;font-weight:800;line-height:1.12}.project-year{display:inline-flex;padding:5px 10px;border-radius:99px;background:#eff8ff;color:#6988a7;font-size:12px}.project-hero-detail__copy p{max-width:610px;margin:20px 0 25px;color:#506681;font-size:16px;line-height:1.9}.project-hero-detail__actions{gap:14px}.project-primary,.project-secondary{padding:15px 20px;border-radius:12px;font-size:13px}.project-primary{background:#0e467f;box-shadow:0 13px 23px rgba(14,70,127,.18)}.project-hero-detail__visual{grid-column:1;grid-row:1;display:grid;place-items:center;min-height:510px;background:transparent}.project-hero-detail__visual:before{position:absolute;z-index:0;width:350px;height:350px;border:2px solid #6fd6dc;border-radius:50%;content:'';box-shadow:0 0 0 20px rgba(111,214,220,.07),0 0 0 50px rgba(255,190,108,.06)}.project-hero-detail__visual>img{position:relative;z-index:1;width:300px;height:300px;padding:0;object-fit:contain}.project-hero-detail__visual:after{position:absolute;z-index:2;width:68px;height:68px;border:4px solid #fff;border-radius:50%;content:'▶';display:grid;place-items:center;background:#0c477f;color:#fff;font-size:23px;box-shadow:0 10px 23px rgba(12,71,127,.25)}.project-case{top:auto;right:auto;bottom:60px;left:48px;z-index:3;padding:12px 15px;border-radius:14px;background:#fff;color:#153e6a;box-shadow:0 12px 28px rgba(21,59,94,.1)}.project-thumbnails{display:none}@media(max-width:780px){.project-hero-detail{grid-template-columns:1fr;min-height:0;margin:0 -20px 28px;padding:0 20px}.project-hero-detail__copy{grid-column:1;grid-row:2;min-height:0;padding:30px 10px 45px}.project-hero-detail__visual{grid-column:1;grid-row:1;min-height:350px}.project-hero-detail h1{font-size:35px}.project-hero-detail__visual:before{width:245px;height:245px}.project-hero-detail__visual>img{width:220px;height:220px}.project-case{bottom:25px;left:20px}}.project-hero-detail{align-items:center;min-height:440px;margin-bottom:30px}.project-hero-detail__copy{min-height:440px;padding:52px 34px 46px}.project-hero-detail__copy:before{margin-bottom:10px}.project-pill{margin-bottom:8px}.project-hero-detail h1{max-width:620px;margin:6px 0;font-size:43px}.project-hero-detail__copy p{max-width:560px;margin:16px 0 21px;font-size:14px;line-height:1.75}.project-hero-detail__visual{min-height:440px}.project-hero-detail__visual:before{width:290px;height:290px}.project-hero-detail__visual>img{width:250px;height:250px}.project-hero-detail__visual:after{width:44px;height:44px;border-width:3px;font-size:15px;box-shadow:0 7px 16px rgba(12,71,127,.22)}.project-case{bottom:38px;left:34px;padding:9px 12px;font-size:10px}@media(max-width:780px){.project-hero-detail{min-height:0}.project-hero-detail__copy{min-height:0;padding:28px 12px 36px}.project-hero-detail__visual{min-height:300px}.project-hero-detail h1{font-size:32px}.project-hero-detail__visual:before{width:220px;height:220px}.project-hero-detail__visual>img{width:195px;height:195px}.project-hero-detail__visual:after{width:40px;height:40px}.project-case{bottom:20px;left:18px}}
.project-hero-detail__visual:after { width: 32px; height: 32px; border-width: 2px; font-size: 11px; }
@media(max-width:780px) { .project-hero-detail__visual:after { width: 30px; height: 30px; font-size: 10px; } }

/* Keep project details stacked within the narrow content panel at every viewport. */
.project-hero-detail {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    margin: 0 -20px 28px;
    padding: 0 20px;
}

.project-hero-detail__copy {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    padding: 28px 12px 36px;
}

.project-hero-detail__visual {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 300px;
}

.project-hero-detail h1 {
    font-size: 32px;
    overflow-wrap: anywhere;
}

.project-hero-detail__visual:before {
    width: 220px;
    height: 220px;
}

.project-hero-detail__logo {
    position: relative;
    z-index: 1;
    width: 195px;
    height: 195px;
    overflow: hidden;
    border-radius: 50%;
}

.project-hero-detail__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.project-hero-detail__visual:after {
    width: 30px;
    height: 30px;
    font-size: 10px;
}

.project-case {
    bottom: 20px;
    left: 18px;
}

.project-hero-detail__actions {
    flex-wrap: wrap;
}

.project-overview {
    grid-template-columns: minmax(0, 1fr);
    padding: 25px;
}

.project-facts {
    padding: 20px 0 0;
    border-top: 1px solid #e5edf3;
    border-inline-start: 0;
}

.project-related__grid {
    grid-template-columns: minmax(0, 1fr);
}

/* Complete project sections; keep the same single-column flow at every width. */
.works-detail-modern .project-hero-detail__copy {
    text-align: start;
}
.works-detail-modern .project-hero-detail__copy:before,
.works-detail-modern .project-hero-detail__visual:after {
    content: none;
}
.works-detail-modern .project-breadcrumb {
    flex-wrap: wrap;
}
.works-detail-modern .project-breadcrumb span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.works-detail-modern .project-cover-placeholder {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 180px;
    color: #0b8d8d;
    font-size: 72px;
}
.works-detail-modern .project-primary,
.works-detail-modern .project-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    min-height: 44px;
    height: auto;
    font-family: inherit;
    line-height: 1.6;
    white-space: normal;
    text-align: center;
    cursor: pointer;
}
.works-detail-modern [hidden] {
    display: none;
}
.works-detail-modern .project-section-nav,
.works-detail-modern .project-share__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.works-detail-modern .project-section-nav {
    margin-bottom: 24px;
    padding: 12px;
    border: 1px solid #dce9f1;
    border-radius: 14px;
    background: #fff;
}
.works-detail-modern .project-section-nav a {
    padding: 10px 12px;
    border-radius: 9px;
    color: #0b6780;
    font-size: 12px;
}
.works-detail-modern .project-section-nav a:hover {
    background: #e8f7f7;
}
.works-detail-modern .project-panel {
    min-width: 0;
    margin-bottom: 28px;
    padding: 25px;
    border: 1px solid #e0eaf1;
    border-radius: 20px;
    background: #fff;
}
.works-detail-modern .project-panel h2 {
    margin: 0 0 17px;
    color: #092c59;
    font-size: 23px;
}
.works-detail-modern .project-section-heading p,
.works-detail-modern .project-share > p {
    color: #506681;
    font-size: 13px;
    line-height: 1.8;
}
.works-detail-modern .project-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.works-detail-modern .project-gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    padding: 14px;
    border: 1px solid #dce9f1;
    border-radius: 16px;
    background: linear-gradient(135deg, #eff8f9, #f4f7fb);
    cursor: zoom-in;
}
.works-detail-modern .project-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.works-detail-modern .project-gallery__item span {
    position: absolute;
    inset-inline-end: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 9px;
    background: #092c59;
    color: #fff;
    font-size: 11px;
}
.works-detail-modern .project-video {
    display: block;
    width: 100%;
    max-height: 65vh;
    margin-top: 16px;
    border-radius: 14px;
    background: #081d35;
}
.works-detail-modern .project-overview__main,
.works-detail-modern .project-richtext {
    min-width: 0;
    overflow-wrap: anywhere;
}
.works-detail-modern .project-richtext {
    overflow-x: auto;
}
.works-detail-modern .project-richtext img,
.works-detail-modern .project-richtext video,
.works-detail-modern .project-richtext iframe {
    max-width: 100%;
}
.works-detail-modern .project-richtext img {
    height: auto;
}
.works-detail-modern .project-richtext ul,
.works-detail-modern .project-richtext ol {
    padding-inline-start: 22px;
}
.works-detail-modern .project-share__label {
    display: block;
    margin: 20px 0 8px;
    color: #506681;
    font-size: 12px;
}
.works-detail-modern .project-share__url {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 12px;
    border: 1px solid #dce9f1;
    border-radius: 10px;
    background: #f5f9fc;
    color: #264969;
    font: inherit;
    font-size: 12px;
}
.works-detail-modern .project-share__status {
    min-height: 24px;
    margin-bottom: 0;
}
.works-detail-modern .project-cta {
    margin-bottom: 28px;
    padding: 30px 25px;
    border-radius: 20px;
    background: linear-gradient(125deg, #092c59, #0a6071);
    color: #fff;
}
.works-detail-modern .project-cta > i {
    color: #ffd29c;
    font-size: 32px;
}
.works-detail-modern .project-cta h2 {
    margin: 16px 0 12px;
    color: #fff;
    font-size: 25px;
}
.works-detail-modern .project-cta p {
    color: #e0ecf4;
    line-height: 1.9;
}
.works-detail-modern .project-cta .project-primary {
    background: #fff;
    color: #092c59;
}
.works-detail-modern .related-project {
    height: 220px;
}
.works-detail-modern .related-project img {
    object-fit: contain;
    padding: 16px 16px 50px;
}
.works-detail-modern .project-empty {
    display: grid;
    justify-items: center;
    gap: 20px;
    padding: 50px 20px;
    text-align: center;
}
.works-detail-modern .project-empty > i {
    color: #0b8d8d;
    font-size: 48px;
}
.works-detail-modern a:focus-visible,
.works-detail-modern button:focus-visible,
.works-detail-modern input:focus-visible {
    outline: 3px solid #0b8d8d;
    outline-offset: 4px;
}
.works-detail-modern section[id] {
    scroll-margin-top: 20px;
}
html[dir="ltr"] .works-detail-modern .project-cta .ri-arrow-left-line {
    transform: rotate(180deg);
}


.works-detail-modern .project-hero-detail {
    margin-inline: 0;
    padding-inline: 0;
}

.works-detail-modern .project-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.works-detail-modern .project-technologies li {
    padding: 9px 13px;
    border: 1px solid #dce9f1;
    border-radius: 10px;
    background: #f0f8fa;
    color: #264969;
    font-size: 12px;
}
.works-detail-modern .project-breadcrumb a,
.works-detail-modern .project-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Related projects: banner cards with a fractional Swiper preview. */
.works-detail-modern .project-related {
    min-width: 0;
}
.works-detail-modern .project-related__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.works-detail-modern .project-related__heading .project-section-heading {
    min-width: 0;
    margin-bottom: 0;
}
.works-detail-modern .project-related__heading h2 {
    margin-bottom: 10px;
}
.works-detail-modern .project-related__heading a {
    color: #087f8b;
    font-size: 12px;
}
.works-detail-modern .project-related__controls {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}
.works-detail-modern .project-related__controls[hidden] {
    display: none;
}
.works-detail-modern .project-related__controls button {
    display: grid;
    place-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #dce7f0;
    border-radius: 50%;
    background: #fff;
    color: #082d5c;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.works-detail-modern .project-related__controls button:not(:disabled):hover {
    background: #082d5c;
    color: #fff;
}
.works-detail-modern .project-related__controls button:disabled {
    opacity: .35;
    cursor: default;
}
.works-detail-modern .project-related svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[dir="rtl"] .project-related__previous svg,
html[dir="ltr"] .project-related__next svg,
html[dir="ltr"] .related-work-card__cta svg {
    transform: rotate(180deg);
}
.works-detail-modern .project-related__slider {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 4px 0 18px;
    overflow: hidden;
}
.works-detail-modern .project-related__slider .swiper-wrapper {
    align-items: stretch;
}
.works-detail-modern .project-related__slider .swiper-slide {
    display: flex;
    height: auto;
    box-sizing: border-box;
}
.works-detail-modern .project-related__slider:not(.swiper-initialized) {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.works-detail-modern .project-related__slider:not(.swiper-initialized) .swiper-wrapper {
    gap: 12px;
}
.works-detail-modern .project-related__slider:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 6px) / 1.5);
    flex-shrink: 0;
    scroll-snap-align: start;
}
.works-detail-modern .related-work-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce7f0;
    border-radius: 24px;
    background: #fff;
    color: #142137;
    box-shadow: 0 12px 22px -20px rgba(8, 45, 92, .3);
    text-align: start;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}
.works-detail-modern .related-work-card:hover {
    border-color: #90ced2;
    box-shadow: 0 14px 24px -19px rgba(8, 45, 92, .45);
}
.works-detail-modern .related-work-card:focus-visible {
    outline-offset: -4px;
}
.works-detail-modern .related-work-card__cover {
    aspect-ratio: 2.7 / 1;
    min-height: 104px;
    overflow: hidden;
    background: linear-gradient(135deg, #d9f3f2, #edf6fc 55%, #ffefd9);
}
.works-detail-modern .related-work-card__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.works-detail-modern .related-work-card__cover--logo img {
    box-sizing: border-box;
    padding: 10px;
    object-fit: contain;
}
.works-detail-modern .related-work-card__body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 48px 16px 22px;
    background-image: linear-gradient(rgba(8, 127, 139, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 127, 139, .025) 1px, transparent 1px);
    background-size: 24px 24px;
}
.works-detail-modern .related-work-card__logo {
    overflow: hidden;
    position: absolute;
    top: -34px;
    inset-inline-start: 14px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 68px;
    height: 68px;
    padding: 5px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #fff;
    color: #087f8b;
    box-shadow: 0 9px 18px -8px rgba(8, 45, 92, .25);
}
.works-detail-modern .related-work-card__logo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}
.works-detail-modern .related-work-card__arrow {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f9fc;
    color: #083b71;
}
.works-detail-modern .related-work-card__category {
    max-width: 100%;
    color: #008f9b;
    font-size: 11px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.works-detail-modern .related-work-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 54px;
    margin: 8px 0 12px;
    color: #142137;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.works-detail-modern .related-work-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    width: 100%;
    min-height: 66px;
    margin: 0 0 22px;
    color: #7d8fa8;
    font-size: 12px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}
.works-detail-modern .related-work-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    color: #082d5c;
    font-size: 13px;
    font-weight: 700;
}
.works-detail-modern .related-work-card__cta svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .works-detail-modern .project-related__slider:not(.swiper-initialized) .swiper-wrapper {
        gap: 16px;
    }
    .works-detail-modern .project-related__slider:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - 24px) / 2.5);
    }
}
@media (prefers-reduced-motion: reduce) {
    .works-detail-modern .related-work-card,
    .works-detail-modern .project-related__controls button {
        transition: none;
    }
}


/* Project catalog: shared visual language with the project detail page. */
.works-showcase {
    --catalog-bg: #f8fbfd;
    --catalog-surface: #fff;
    --catalog-raised: #f0f6fa;
    --catalog-text: #142d4d;
    --catalog-muted: #506680;
    --catalog-border: #dce7f0;
    --catalog-accent: #087f8b;
    --catalog-button: #0e467f;
    --catalog-button-text: #fff;
    color: var(--catalog-text);
    background: transparent;
}
.works-showcase [hidden] { display: none; }
.works-showcase .catalog-heading { margin-bottom: 24px; padding: 24px; border: 1px solid var(--catalog-border); border-radius: 20px; background: var(--catalog-surface); }
.works-showcase .catalog-eyebrow { color: var(--catalog-accent); font-size: 12px; font-weight: 600; }
.works-showcase .catalog-heading h1 { margin: 12px 0; color: var(--catalog-text); font-size: 32px; }
.works-showcase .catalog-heading p { margin: 0 0 16px; color: var(--catalog-muted); font-size: 14px; line-height: 1.9; }
.works-showcase .catalog-total { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--catalog-raised); color: var(--catalog-muted); font-size: 12px; }
.works-showcase .catalog-total strong { color: var(--catalog-accent); font-size: 18px; }
.works-showcase .catalog-controls { padding: 20px; margin-bottom: 20px; border: 1px solid var(--catalog-border); border-radius: 18px; background: var(--catalog-surface); }
.works-showcase .catalog-controls label { display: block; margin-bottom: 8px; color: var(--catalog-text); font-size: 12px; }
.works-showcase .catalog-search__field { display: flex; gap: 8px; }
.works-showcase .catalog-controls input,
.works-showcase .catalog-controls select { box-sizing: border-box; width: 100%; min-width: 0; height: 44px; padding: 9px 12px; border: 1px solid var(--catalog-border); border-radius: 10px; background: var(--catalog-raised); color: var(--catalog-text); font: inherit; font-size: 12px; }
.works-showcase .catalog-controls input::placeholder { color: var(--catalog-muted); opacity: 1; }
.works-showcase .catalog-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.works-showcase .catalog-filters > div { min-width: 0; }
.works-showcase .catalog-reset { display: inline-block; margin-top: 16px; color: var(--catalog-accent); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.works-showcase .catalog-primary,
.works-showcase .catalog-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; width: auto; min-height: 44px; height: auto; padding: 10px 14px; border: 1px solid var(--catalog-border); border-radius: 11px; background: var(--catalog-surface); color: var(--catalog-text); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: normal; text-align: center; cursor: pointer; }
.works-showcase .catalog-primary { background: var(--catalog-button); border-color: var(--catalog-button); color: var(--catalog-button-text); }
.works-showcase .catalog-secondary:hover { border-color: var(--catalog-accent); color: var(--catalog-accent); }
.works-showcase .catalog-primary:hover { filter: brightness(1.1); }
.works-showcase .catalog-results { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; margin-bottom: 16px; }
.works-showcase .catalog-results p,
.works-showcase .catalog-results span { margin: 0; color: var(--catalog-muted); font-size: 12px; }
.works-showcase .catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; min-width: 0; }
.works-showcase .catalog-grid[aria-busy="true"] { opacity: .6; }
.works-showcase .catalog-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--catalog-border); border-radius: 22px; background: var(--catalog-surface); box-shadow: 0 12px 24px -22px rgba(10,40,65,.3); }
.works-showcase .catalog-card:hover { border-color: var(--catalog-accent); }
.works-showcase .catalog-card__cover { display: block; height: 145px; overflow: hidden; background: var(--catalog-raised); }
.works-showcase .catalog-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.works-showcase .catalog-card__cover--logo img { box-sizing: border-box; padding: 14px; object-fit: contain; }
.works-showcase .catalog-card__body { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 48px 18px 20px; }
.works-showcase .catalog-card__logo { position: absolute; top: -34px; inset-inline-start: 18px; display: grid; place-items: center; box-sizing: border-box; width: 68px; height: 68px; overflow: hidden; padding: 5px; border: 4px solid var(--catalog-surface); border-radius: 50%; background: #fff; color: #087f8b; box-shadow: 0 8px 15px -9px rgba(0,0,0,.3); }
.works-showcase .catalog-card__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.works-showcase .catalog-card__category { color: var(--catalog-accent); font-size: 11px; font-weight: 600; }
.works-showcase .catalog-card h2 { margin: 10px 0 12px; font-size: 20px; line-height: 1.5; }
.works-showcase .catalog-card h2 a { color: var(--catalog-text); overflow-wrap: anywhere; }
.works-showcase .catalog-card__body > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0 0 16px; color: var(--catalog-muted); font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.works-showcase .catalog-card__facts { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: auto; padding: 12px 0; border-top: 1px solid var(--catalog-border); }
.works-showcase .catalog-card__facts :is(span, time) { color: var(--catalog-muted); font-size: 11px; }
.works-showcase .catalog-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.works-showcase .catalog-card__actions a { flex: 1 1 auto; }
.works-showcase svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.works-showcase.is-list .catalog-grid { grid-template-columns: minmax(0, 1fr); }
.works-showcase.is-list .catalog-card { display: grid; grid-template-columns: minmax(80px, 28%) minmax(0, 1fr); }
.works-showcase.is-list .catalog-card__cover { height: 100%; min-height: 150px; }
.works-showcase.is-list .catalog-card__cover img { object-fit: contain; padding: 8px; box-sizing: border-box; }
.works-showcase.is-list .catalog-card__body { padding: 18px; }
.works-showcase.is-list .catalog-card__logo { display: none; }
.works-showcase .catalog-more { display: flex; justify-content: center; margin: 24px 0; }
.works-showcase .catalog-more[hidden] { display: none; }
.works-showcase .catalog-top { margin: 28px 0; padding: 22px; border: 1px solid var(--catalog-border); border-radius: 18px; background: var(--catalog-surface); }
.works-showcase .catalog-top[hidden] { display: none; }
.works-showcase .catalog-top__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.works-showcase .catalog-top__heading span { color: var(--catalog-accent); font-size: 12px; font-weight: 600; }
.works-showcase .catalog-top__heading h2 { margin: 0; color: var(--catalog-text); font-size: 20px; }
.works-showcase .catalog-top__list { display: grid; gap: 8px; }
.works-showcase .catalog-top__list a { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--catalog-border); border-radius: 12px; color: var(--catalog-text); background: var(--catalog-raised); }
.works-showcase .catalog-top__list a:hover { border-color: var(--catalog-accent); color: var(--catalog-accent); }
.works-showcase .catalog-top__list b { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--catalog-accent); color: #fff; font-size: 12px; }
.works-showcase .catalog-top__list span { flex: 1; font-size: 13px; font-weight: 600; }
.works-showcase .catalog-top__list i { font-size: 18px; }.works-showcase [aria-disabled="true"] { opacity: .5; cursor: wait; }
.works-showcase .catalog-empty,
.works-showcase .catalog-error { margin-bottom: 20px; padding: 24px; border: 1px solid var(--catalog-border); border-radius: 18px; background: var(--catalog-surface); text-align: center; }
.works-showcase .catalog-empty h2 { color: var(--catalog-text); font-size: 22px; }
.works-showcase .catalog-empty p,
.works-showcase .catalog-error p { color: var(--catalog-muted); font-size: 13px; line-height: 1.9; }
.works-showcase .catalog-cta { margin: 32px 0; padding: 26px; border-radius: 20px; background: linear-gradient(125deg, #092c59, #0a6071); }
.works-showcase .catalog-cta h2 { margin: 0 0 12px; color: #eef3fa; font-size: 24px; }
.works-showcase .catalog-cta p { color: #d5e2ec; font-size: 13px; line-height: 1.9; }
.works-showcase .catalog-cta .catalog-primary { background: #fff; border-color: #fff; color: #142d4d; }
.works-showcase :is(a, button, input, select):focus-visible { outline: 3px solid var(--catalog-accent); outline-offset: 3px; }


/* Separate search panel and display toolbar. */
.works-showcase .catalog-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 18px; }
.works-showcase .catalog-search { min-width: 0; }
.works-showcase .catalog-search__field input { flex: 1; }
.works-showcase .catalog-filters { display: block; margin: 0; }
.works-showcase .catalog-reset { grid-column: 1 / -1; margin-top: 0; justify-self: start; }
.works-showcase .catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; margin-bottom: 20px; border: 1px solid var(--catalog-border); border-radius: 24px; background: var(--catalog-surface); }
.works-showcase .catalog-toolbar__group { display: flex; align-items: center; gap: 10px; }
.works-showcase .catalog-tool { display: grid; place-items: center; box-sizing: border-box; width: 52px; height: 52px; border: 1px solid transparent; border-radius: 16px; background: var(--catalog-raised); color: var(--catalog-muted); text-decoration: none; cursor: pointer; }
.works-showcase .catalog-tool i { font-size: 23px; line-height: 1; }
.works-showcase .catalog-tool:hover,
.works-showcase .catalog-tool[aria-pressed="true"] { border-color: var(--catalog-accent); color: var(--catalog-accent); background: var(--catalog-bg); }
@media (max-width: 560px) {
    .works-showcase .catalog-controls { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .works-showcase .catalog-toolbar { padding: 10px; gap: 10px; border-radius: 18px; }
    .works-showcase .catalog-toolbar__group { gap: 6px; }
    .works-showcase .catalog-tool { width: 40px; height: 44px; border-radius: 12px; }
    .works-showcase .catalog-tool i { font-size: 20px; }
}