:root {
--pj-neutral-400: #969698;   
--pj-neutral-500: #646567;   
--pj-orange-100: #fdebe0;    
--pj-line: #e7e7e7;          
--pj-ink: #0d0c0c;           
--pj-bleed: max(var(--gutter), calc((100% - var(--container)) / 2));
}
.proj-list__inner { display: flex; flex-direction: column; gap: 40px; }
.proj-filters {
overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
padding-block: 4px; margin-block: -4px;
}
.proj-filters::-webkit-scrollbar { display: none; }
.proj-filters__track {
display: flex; gap: 12px; inline-size: max-content; min-inline-size: 100%;
padding-inline: var(--pj-bleed);
}
@media (min-width: 768px) {
.proj-filters { overflow: visible; }
.proj-filters__track {
flex-wrap: wrap; inline-size: auto; min-inline-size: 0;
padding-inline: var(--pj-bleed) max(var(--gutter), calc(var(--pj-bleed) - 40px));
}
}
.proj-filter {
flex: none; padding: 7px 13px;
background: var(--c-white); border: 1px solid var(--c-neutral-200);
font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--c-black); white-space: nowrap;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.proj-filter[aria-pressed='true'] { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-white); font-weight: 500; }
@media (hover: hover) {
.proj-filter[aria-pressed='false']:hover { border-color: var(--c-orange); color: var(--c-orange); }
}
.proj-filter:focus-visible { outline-offset: 2px; }
.proj-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.proj-grid__item { display: grid; }
@media (max-width: 1199.98px) { .proj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023.98px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .proj-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.proj-grid .project-card, .proj-cards .project-card { border-color: var(--c-neutral-200); padding-block-end: 0; }
.proj-grid .project-card__media, .proj-cards .project-card__media { inline-size: calc(100% - 41px); }
.proj-grid .project-card__body, .proj-cards .project-card__body { padding-block-end: 19px; }
@media (hover: hover) {
.proj-grid .project-card:hover, .proj-cards .project-card:hover { border-color: var(--c-orange); }
}
.proj-grid__item { transition: opacity 180ms var(--ease), translate 180ms var(--ease); }
.proj-grid.is-out .proj-grid__item { opacity: 0; translate: 0 10px; }
.proj-grid__item.is-entering { animation: pj-enter 560ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 45ms); }
@keyframes pj-enter { from { opacity: 0; translate: 0 22px; scale: 0.985; } to { opacity: 1; translate: 0 0; scale: 1; } }
.proj-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
min-block-size: 379px; padding: 56px 24px; text-align: center;
background: var(--c-orange-50); border: 1px solid var(--pj-orange-100);
animation: pj-enter 560ms var(--ease-out) both;
}
.proj-empty__mark { inline-size: 36px; block-size: 36px; margin-block-end: 8px; background: var(--c-orange); clip-path: var(--notch); }
[dir='rtl'] .proj-empty__mark { scale: -1 1; }
.proj-empty__title { font-size: clamp(20px, calc(20px + 4 * (100vw - 390px) / 1050), 24px); font-weight: 700; line-height: 1.4; color: var(--c-ink); }
.proj-empty__text { max-inline-size: 460px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--c-neutral-600); }
.proj-empty .btn { margin-block-start: 12px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; }
.pager[hidden] { display: none; }
.pager__list { display: flex; gap: 8px; }
.pager__btn, .pager__gap {
inline-size: 40px; block-size: 40px; flex: none;
display: grid; place-items: center; padding: 0;
background: var(--c-white); border: 1px solid var(--pj-line);
font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--pj-ink); font-variant-numeric: tabular-nums;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pager__btn[aria-current='page'] { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-white); cursor: default; }
.pager__btn--arrow { color: var(--c-orange); }
.pager__btn--arrow:disabled { color: var(--pj-neutral-400); cursor: default; }
.pager__icon { inline-size: 20px; block-size: 20px; }
.pager__icon--prev { scale: -1 1; }
[dir='rtl'] .pager__icon--next { scale: -1 1; }
[dir='rtl'] .pager__icon--prev { scale: 1 1; }
@media (hover: hover) {
.pager__btn:not(:disabled):not([aria-current='page']):hover { border-color: var(--c-orange); color: var(--c-orange); }
}
.page-hero--project {
min-block-size: clamp(300px, calc(300px + 115 * (100vw - 390px) / 1050), 415px);
padding-block: calc(var(--header-h) + clamp(36px, calc(36px + 26 * (100vw - 390px) / 1050), 62px)) clamp(40px, calc(40px + 78 * (100vw - 390px) / 1050), 118px);
}
.page-hero--project .page-hero__content { width: min(var(--container-wide), 100% - 2 * var(--gutter)); gap: 32px; }
.page-hero--project .page-hero__title { max-inline-size: 780px; }
.page-hero--project .page-hero__shade { background: rgba(0, 0, 0, 0.5); }
.page-hero--project .page-hero__media img { object-position: 50% 50%; }
.page-hero--project .page-hero__glow { inset-inline-start: auto; inset-inline-end: auto; right: -204px; translate: none; top: calc(100% - 29px); }
.page-hero__glow-top { --glow: var(--c-black); z-index: -1; inline-size: max(1789px, calc(100% + 290px)); block-size: 388px; inset-inline-start: 50%; translate: -50% 0; top: -240px; }
[dir='rtl'] .page-hero__glow-top { translate: 50% 0; }
.page-hero--project .breadcrumb ol { gap: 8px; font-size: 12px; line-height: 1.5; color: var(--pj-neutral-400); }
.page-hero--project .breadcrumb li { gap: 8px; }
.page-hero--project .breadcrumb li + li::before {
inline-size: 16px; block-size: 16px; opacity: 1; background: var(--pj-neutral-400);
-webkit-mask: url('../../icons/breadcrumb-chevron.svg') center / 16px 16px no-repeat;
mask: url('../../icons/breadcrumb-chevron.svg') center / 16px 16px no-repeat;
}
[dir='rtl'] .page-hero--project .breadcrumb li + li::before { scale: -1 1; }
.page-hero--project .breadcrumb [aria-current] { color: var(--c-white); }
.proj-about__grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
.proj-about__main { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 40px; }
.proj-block { display: flex; flex-direction: column; gap: 20px; max-inline-size: 600px; }
.proj-block__title { max-inline-size: 533px; font-size: clamp(20px, calc(20px + 4 * (100vw - 390px) / 1050), 24px); font-weight: 700; line-height: 1.4; color: var(--c-ink); }
.proj-block__text { max-inline-size: 584px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--c-neutral-600); }
.proj-services { display: flex; flex-direction: column; gap: 12px; }
.proj-services li { display: flex; align-items: flex-start; gap: 16px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--c-black); }
.proj-services li::before { content: ''; inline-size: 10px; block-size: 10px; margin-block-start: 7px; flex: none; background: var(--c-orange); transition: rotate var(--dur) var(--ease); }
.proj-services__link { transition: color var(--dur) var(--ease); }
@media (hover: hover) {
.proj-services li:hover::before { rotate: 45deg; }
.proj-services__link:hover { color: var(--c-orange); }
}
.proj-facts {
position: sticky; top: calc(var(--header-h) + 24px);
flex: 0 0 375px; display: flex; flex-direction: column; gap: 20px; padding: 24px;
background: var(--c-orange-50); border: 1px solid var(--pj-orange-100);
}
.proj-facts__list { display: flex; flex-direction: column; gap: 20px; }
.proj-facts__row { display: flex; flex-direction: column; gap: 8px; padding-block-end: 16px; border-block-end: 1px solid var(--pj-orange-100); }
.proj-facts__row:last-child { padding-block-end: 0; border-block-end: 0; }
.proj-facts dt { font-size: 14px; line-height: 1.5; color: var(--pj-neutral-500); }
.proj-facts dd { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--c-ink); }
.btn--solid {
--btn-bg: var(--c-orange); --btn-fg: var(--c-white); --btn-mark: var(--c-white);
--btn-hover-bg: color-mix(in srgb, var(--c-orange) 86%, var(--c-black)); --btn-hover-fg: var(--c-white);
}
.btn--solid .btn__label { font-weight: 600; }
.btn--solid .btn__mark { rotate: 45deg; transition: rotate var(--dur) var(--ease), translate var(--dur) var(--ease), background-color var(--dur) var(--ease); }
[dir='rtl'] .btn--solid .btn__mark { rotate: -45deg; }
@media (hover: hover) {
.btn--solid:hover .btn__mark { translate: 3px 0; }
[dir='rtl'] .btn--solid:hover .btn__mark { translate: -3px 0; }
}
.proj-gallery__head { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-block-end: 40px; }
.proj-gallery__head .sec-head { min-inline-size: 0; }
.carousel-nav { display: flex; gap: 8px; flex: none; }
.proj-gallery.is-static .carousel-nav { display: none; } 
.carousel { position: relative; z-index: 1; }
.carousel__track {
display: flex; gap: 24px;
overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
padding-inline: var(--pj-bleed) var(--gutter); scroll-padding-inline: var(--pj-bleed);
}
.carousel__track::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .proj-gallery:not(.is-static) .carousel__track { cursor: grab; } }
.proj-gallery .carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel__track.is-settling { scroll-snap-type: none; }
.carousel__track.is-dragging .carousel__open { pointer-events: none; }
.carousel__slide { flex: 0 0 min(282px, 76vw); scroll-snap-align: start; }
.carousel__open { position: relative; display: block; aspect-ratio: 282 / 310; overflow: hidden; background: var(--c-navy); cursor: zoom-in; }
.carousel__open img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 700ms var(--ease-out); -webkit-user-drag: none; }
.carousel__open::after { content: ''; position: absolute; inset: 0; background: rgba(8, 16, 22, 0); transition: background-color var(--dur) var(--ease); }
.carousel__open:focus-visible { outline-offset: -4px; }
.carousel__zoom {
position: absolute; z-index: 1; inset-inline-end: 16px; bottom: 16px; inline-size: 40px; block-size: 40px;
background: var(--c-orange); opacity: 0; translate: 0 8px;
transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.carousel__zoom::before, .carousel__zoom::after { content: ''; position: absolute; inset: 50% auto auto 50%; inline-size: 14px; block-size: 2px; background: var(--c-white); translate: -50% -50%; }
.carousel__zoom::after { rotate: 90deg; }
@media (hover: hover) {
.carousel__open:hover img { scale: 1.05; }
.carousel__open:hover::after { background: rgba(8, 16, 22, 0.28); }
.carousel__open:hover .carousel__zoom { opacity: 1; translate: 0 0; }
}
.carousel__open:focus-visible .carousel__zoom { opacity: 1; translate: 0 0; }
.lightbox {
position: fixed; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none;
margin: 0; padding: 0; border: 0; overflow: hidden;
background: rgba(8, 16, 22, 0.95); color: var(--c-white);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; animation: lb-in 300ms var(--ease) both; }
.lightbox.is-closing { animation: lb-out 220ms var(--ease) both; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-out { from { opacity: 1; } to { opacity: 0; } }
.lightbox__stage { display: grid; place-items: center; padding: 88px 104px 40px; min-block-size: 0; }
.lightbox__figure { display: flex; flex-direction: column; gap: 16px; margin: 0; max-inline-size: 100%; }
.lightbox__img {
inline-size: auto; block-size: auto; max-inline-size: min(1200px, 100%);
max-block-size: calc(100vh - 200px); max-block-size: calc(100dvh - 200px);
object-fit: contain; margin-inline: auto; background: var(--c-navy);
opacity: 0; scale: 0.98; transition: opacity 360ms var(--ease-out), scale 360ms var(--ease-out);
}
.lightbox__img.is-ready { opacity: 1; scale: 1; }
.lightbox__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--c-line-footer); }
.lightbox__count { flex: none; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; color: var(--pj-neutral-400); }
.lightbox__nav, .lightbox__close {
position: absolute; display: grid; place-items: center; inline-size: 56px; block-size: 56px;
background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--c-white);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lightbox__nav { top: 50%; translate: 0 -50%; }
.lightbox__nav--prev { inset-inline-start: 24px; }
.lightbox__nav--next { inset-inline-end: 24px; }
.lightbox__nav .pager__icon { inline-size: 24px; block-size: 24px; }
.lightbox__close { top: 24px; inset-inline-end: 24px; inline-size: 48px; block-size: 48px; }
.lightbox__x { position: relative; inline-size: 18px; block-size: 18px; }
.lightbox__x::before, .lightbox__x::after { content: ''; position: absolute; inset: 50% auto auto 50%; inline-size: 22px; block-size: 1.5px; background: currentColor; translate: -50% -50%; rotate: 45deg; }
.lightbox__x::after { rotate: -45deg; }
@media (hover: hover) {
.lightbox__nav:hover, .lightbox__close:hover { background: var(--c-orange); border-color: var(--c-orange); }
}
.lightbox :focus-visible { outline-color: var(--c-white); }
.proj-related .projects-strip { position: relative; z-index: 1; }
.page-projects:lang(ar) .cta-band__copy { max-inline-size: 100%; }
.page-project-details .cta-band__copy, .page-project-details .cta-band__text { max-inline-size: 716px; }
.page-project-details:lang(ar) .cta-band__copy { max-inline-size: 100%; }
.page-project-details:lang(ar) .cta-band__text { max-inline-size: none; contain: inline-size; align-self: stretch; }
html:not(.js) .carousel-nav { display: none; }
@media (prefers-reduced-motion: reduce) {
.proj-grid__item, .lightbox__img, .carousel__open img, .carousel__zoom { transition: none; }
.lightbox__img { scale: none; }
}
@media (max-width: 1023.98px) {
.proj-about__grid { flex-direction: column; align-items: stretch; gap: 32px; }
.proj-facts { position: static; flex: none; inline-size: 100%; max-inline-size: 600px; }
}
@media (max-width: 767.98px) {
.proj-list__inner { gap: 32px; }
.page-hero--project .page-hero__content { gap: 20px; }
.proj-about__main { gap: 32px; }
.proj-block { gap: 12px; }
.proj-facts { padding: 20px; }
.proj-gallery__head { margin-block-end: 32px; }
.proj-gallery__head .h-section { line-height: 1.25; }
.carousel__track { gap: 16px; }
.lightbox__stage { padding: 80px 16px 96px; }
.lightbox__img { max-block-size: calc(100vh - 240px); max-block-size: calc(100dvh - 240px); }
.lightbox__nav { top: auto; bottom: 24px; translate: none; inline-size: 48px; block-size: 48px; }
.lightbox__nav--prev { inset-inline-start: 16px; }
.lightbox__nav--next { inset-inline-end: 16px; }
.lightbox__close { top: 16px; inset-inline-end: 16px; }
}
@media (max-width: 639.98px) {
.proj-gallery__head { flex-direction: column; align-items: flex-start; gap: 20px; }
}