.hero{position:relative;min-height:300px;background:linear-gradient(135deg,#242424,#525252,#323232);overflow:hidden;display:flex;justify-content:center;align-items:center;padding:90px 72px}.hero-background{position:absolute;inset:0}.hero-watermark{position:absolute;top:55%;left:50%;transform:translate(-50%,-68%);font-family:var(--font-heading);font-weight:800;font-size:150px;letter-spacing:-5px;color:var(--color-white);opacity:.07;white-space:nowrap;user-select:none;pointer-events:none;text-transform:uppercase}.hero-content{position:relative;z-index:1;text-align:center}.hero h1{font-family:var(--font-heading);font-weight:800;font-size:60px;line-height:1.15;letter-spacing:-1.8px;color:var(--color-white);margin:40px 0 0;text-transform:uppercase}.portfolio-section{background-color:var(--color-white);padding:112px 0}.portfolio-container{max-width:1050px;margin:0 auto;padding:0 72px;display:flex;flex-direction:column;gap:120px}.portfolio-category{display:flex;flex-direction:column;gap:48px}.category-header{text-align:center;max-width:700px;margin:0 auto}.category-header h2{font-family:var(--font-heading);font-weight:600;font-size:36px;line-height:1.3;color:var(--color-black);margin:0 0 16px}.category-description{font-family:var(--font-body);font-weight:400;font-size:13.5px;line-height:1.9;color:#444;margin:0}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 24px}.portfolio-item{position:relative;border-radius:11px;overflow:hidden;cursor:pointer;aspect-ratio:4 / 3;background-color:var(--color-gray-light);background-image:linear-gradient(#ffffffbf,#ffffffbf),url(/_astro/stolar-centrum-logo-black.CM1Y7_3b.svg),linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);background-position:center center,center center,-200% 0;background-size:100% 100%,120px auto,200% 100%;background-repeat:no-repeat,no-repeat,no-repeat;animation:shimmer 2s ease-in-out infinite}.portfolio-image{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.portfolio-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-base)}.portfolio-item:not(.portfolio-item-placeholder):hover .portfolio-overlay{opacity:1}.portfolio-item:not(.portfolio-item-placeholder):hover .portfolio-image{transform:scale(1.05)}.zoom-icon{width:48px;height:48px;filter:brightness(0) invert(1)}.portfolio-item-placeholder{background-color:#f0f0f0;cursor:default}.placeholder-content{display:flex;align-items:center;justify-content:center;height:100%}.placeholder-text{font-family:var(--font-body);font-weight:400;font-size:14px;color:#999;text-align:center;padding:0 20px}.lightbox{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center}.lightbox.lightbox-active{display:flex}.lightbox-backdrop{position:absolute;inset:0;background:#000000f2;cursor:pointer}.lightbox-content{position:relative;z-index:1;max-width:90vw;max-height:90vh;animation:lightboxFadeIn .3s ease}@keyframes lightboxFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.lightbox-image{max-width:100%;max-height:90vh;width:auto;height:auto;border-radius:8px;display:block}.lightbox-close{position:absolute;top:-50px;right:0;background:transparent;border:none;color:var(--color-white);font-size:48px;font-weight:300;cursor:pointer;padding:8px 16px;line-height:1;transition:opacity var(--transition-fast)}.lightbox-close:hover{opacity:.7}.lightbox-nav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none}.lightbox-prev,.lightbox-next{background:#ffffff1a;border:none;color:var(--color-white);font-size:48px;font-weight:300;cursor:pointer;padding:16px 24px;pointer-events:auto;transition:background var(--transition-fast);line-height:1}.lightbox-prev{border-radius:0 8px 8px 0}.lightbox-next{border-radius:8px 0 0 8px}.lightbox-prev:hover,.lightbox-next:hover{background:#fff3}@keyframes shimmer{0%{background-position:center center,center center,-200% 0}to{background-position:center center,center center,200% 0}}@media(max-width:900px){.hero{padding:60px 24px;min-height:350px}.hero-watermark{font-size:120px;letter-spacing:-2px}.hero h1{font-size:40px}.portfolio-container{padding:0 24px;gap:80px}.portfolio-category{gap:40px}.portfolio-grid{grid-template-columns:1fr;gap:40px}.portfolio-item{background-size:100% 100%,90px auto,200% 100%}.category-header h2{font-size:28px}.lightbox-close{top:-40px;font-size:36px}.lightbox-prev,.lightbox-next{font-size:32px;padding:12px 16px}}
