.work-component{background-color:var(--bg-deep-solid);padding:5rem 2rem}.work-container{max-width:1280px;margin:0 auto}.work-page-header{text-align:center;margin-bottom:4rem}.work-badge{font-family:var(--font-mono);text-transform:uppercase;color:var(--accent-primary);letter-spacing:.15em;margin-bottom:.75rem;font-size:.85rem;font-weight:700;display:inline-block}.work-page-header h1{color:var(--text-pure);font-size:2.5rem;font-family:var(--font-mono);margin-bottom:1rem}.work-page-header p{color:var(--text-body-muted);max-width:700px;margin:0 auto;font-size:1.1rem}.filter-nav{flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:3rem;display:flex}.filter-btn{border:1px solid var(--border-subtle);color:var(--text-body-muted);font-family:var(--font-mono);cursor:pointer;transition:var(--transition-smooth);background-color:#0000;border-radius:30px;padding:.6rem 1.5rem;font-size:.85rem;font-weight:500}.filter-btn:hover{border-color:var(--accent-primary);color:var(--text-pure)}.filter-btn.active{background-color:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-deep-solid)}.portfolio-grid{grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:4rem;display:grid}.portfolio-item{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);transition:var(--transition-smooth);opacity:1;border-radius:16px;transition:all .3s;overflow:hidden;transform:scale(1)}.portfolio-item:hover{border-color:var(--accent-primary);transform:translateY(-8px);box-shadow:0 20px 40px #0000004d}.portfolio-image-wrapper{width:100%;height:220px;position:relative;overflow:hidden}.portfolio-image{object-fit:cover;width:100%;height:100%;transition:transform .5s}.portfolio-item:hover .portfolio-image{transform:scale(1.08)}.portfolio-overlay{opacity:0;width:100%;height:100%;transition:var(--transition-smooth);background:linear-gradient(135deg,#00b4d8cc,#070b19e6);justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.portfolio-item:hover .portfolio-overlay{opacity:1}.portfolio-overlay-icon{background-color:var(--text-pure);width:50px;height:50px;color:var(--accent-primary);transition:var(--transition-smooth);border-radius:50%;justify-content:center;align-items:center;font-size:1.3rem;display:flex;transform:scale(.8)}.portfolio-item:hover .portfolio-overlay-icon{transform:scale(1)}.portfolio-content{padding:1.5rem}.portfolio-category{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent-primary);margin-bottom:.5rem;font-size:.7rem}.portfolio-content h3{margin-bottom:.5rem;font-size:1.2rem}.portfolio-location{color:var(--text-body-muted);align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.8rem;display:flex}.portfolio-location i{color:var(--accent-primary);font-size:.7rem}.portfolio-description{color:var(--text-body-muted);margin-bottom:1rem;font-size:.85rem;line-height:1.5}.portfolio-services{flex-wrap:wrap;gap:.5rem;display:flex}.service-tag{color:var(--accent-primary);font-size:.7rem;font-family:var(--font-mono);background-color:#00b4d81a;border:1px solid #00b4d833;border-radius:20px;padding:.25rem .75rem}.work-cta-banner{background:linear-gradient(90deg, var(--bg-surface-elevated), var(--bg-surface-card));border:1px solid var(--border-subtle);text-align:center;border-radius:16px;padding:3rem}.work-cta-banner h3{margin-bottom:.75rem;font-size:1.5rem}.work-cta-banner p{color:var(--text-body-muted);margin-bottom:1.5rem}.work-cta-button{background-color:var(--accent-primary);color:var(--bg-deep-solid);transition:var(--transition-smooth);border-radius:8px;align-items:center;gap:.75rem;padding:.85rem 2rem;font-weight:600;text-decoration:none;display:inline-flex}.work-cta-button:hover{background-color:var(--accent-secondary);transform:translateY(-2px)}@media (width<=1024px){.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}@media (width<=768px){.work-component{padding:3rem 1.5rem}.work-page-header h1{font-size:1.8rem}.work-page-header p{font-size:1rem}.filter-nav{gap:.5rem}.filter-btn{padding:.4rem 1rem;font-size:.75rem}.portfolio-grid{grid-template-columns:1fr;gap:1.5rem}.portfolio-image-wrapper{height:200px}.work-cta-banner{padding:2rem 1.5rem}.work-cta-banner h3{font-size:1.2rem}}