/* Real Projects (class: real-projects-section) */
.zproj{--zp-ink:var(--zip-ink,#14263d);--zp-blue:var(--zip-blue,#0a6cc4);
position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,24fr) minmax(0,76fr);align-items:center;background:#f2f8fe;color:var(--zp-ink);padding:4vw 0;overflow:hidden}
.zproj *,.zproj *::before,.zproj *::after{box-sizing:border-box}
.zproj figure{margin:0}

.zproj__left{padding:0 1.5vw 0 5vw}
.zproj .zproj__eyebrow{margin:0 0 .5vw;font-size:clamp(10px,1vw,18px);font-weight:500;letter-spacing:.25em;line-height:1.4;text-transform:uppercase;color:var(--zp-ink)}
.zproj .zproj__title{margin:0;font-size:var(--zip-h3-size);font-weight:700;line-height:1.15;letter-spacing:0;text-transform:uppercase;color:var(--zp-ink)}
.zproj__accent{color:var(--zp-blue)}
.zproj__rule{display:block;width:2.9vw;height:max(2px,.16vw);margin:1vw 0 1.2vw;background:var(--zp-blue);transform-origin:0 50%}
.zproj .zproj__desc{margin:0 0 2.2vw;max-width:14em;font-size:clamp(13px,1.111vw,24px);font-weight:400;line-height:1.6;color:var(--zp-ink)}
.zproj .zh__btn{display:inline-flex;align-items:center;gap:.7em;padding:.85em 1.7em;border-radius:.5em;background:var(--zp-blue);color:#fff;font-size:clamp(13px,1.1vw,20px);font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;transition:filter .2s}
.zproj .zh__btn:hover{filter:brightness(.9);color:#fff}
.zproj__mask{display:block;flex:none;width:1.1em;height:1.1em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;transition:transform .2s}
.zproj__btn:hover .zproj__mask{transform:translateX(3px)}

.zproj__right{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35vw;padding-right:.4vw}
/* the wrapper clips: the photo can scale on hover but never leaves its own box */
.zproj__item{position:relative;overflow:hidden;border-radius:.5vw;aspect-ratio:.76;isolation:isolate;transform:translateZ(0);background:#dbe4ee}
.zproj__item img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .7s cubic-bezier(.2,.7,.2,1);will-change:transform}
.zproj__item::after{content:"";position:absolute;inset:0;background:rgba(8,16,28,.32);opacity:0;transition:opacity .5s ease;pointer-events:none}
@media (hover:hover) and (pointer:fine){
.zproj__item:hover img{transform:scale(1.06)}
.zproj__item:hover::after{opacity:1}
}

.zproj.zp-pre [data-zp],.zproj.zp-pre [data-zp-img]{opacity:0}

/* tablet: narrower text column, 2 x 2 images */
@media (max-width:1024px){
.zproj{grid-template-columns:minmax(0,34fr) minmax(0,66fr);padding:56px 0}
.zproj__left{padding:0 18px 0 28px}
.zproj .zproj__eyebrow{font-size:12px;margin-bottom:8px}
.zproj .zproj__title{font-size:var(--zip-h3-size)}
.zproj__rule{width:40px;height:2px;margin:14px 0 16px}
.zproj .zproj__desc{font-size:16px;margin-bottom:24px}
.zproj .zh__btn{font-size:14px}
.zproj__right{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-right:20px}
.zproj__item{border-radius:10px;aspect-ratio:1}
}
/* mobile: stacked */
@media (max-width:767px){
.zproj{grid-template-columns:minmax(0,1fr);padding:64px 0 56px}
.zproj__left{padding:0 15px 26px}
.zproj .zproj__title{font-size:var(--zip-h3-size)}
.zproj .zproj__desc{max-width:24em}
.zproj__right{padding:0 15px;gap:8px}
}
/* tablet + mobile: tap an image to get what hover gives on desktop (still clipped inside its own box) */
@media (max-width:1024px){
.zproj__item{cursor:pointer;-webkit-tap-highlight-color:transparent}
.zproj__item.is-active img{transform:scale(1.06)}
.zproj__item.is-active::after{opacity:1}
}