.port-hero{background:var(--ink);padding:160px 0 90px}.port-hero .lbl{color:var(--teal)}.port-filter-bar{background:#fff;border-bottom:1px solid #eee;position:sticky;top:76px;z-index:90}.pfb-inner{display:flex;gap:4px;padding:14px 0;overflow-x:auto;scrollbar-width:none}.pfb-inner::-webkit-scrollbar{display:none}.flt{flex-shrink:0;background:transparent;border:1px solid #ddd;border-radius:24px;padding:7px 18px;font-size:13px;font-weight:600;color:#666;cursor:pointer;transition:all .2s;white-space:nowrap;font-family:inherit}.flt:hover{border-color:var(--teal);color:var(--teal)}.flt.on{background:var(--teal);border-color:var(--teal);color:#fff}.port-grid-section{padding:64px 0 120px;background:var(--bg)}.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.pi{background:#fff;cursor:pointer}.pi-img-wrap{position:relative;overflow:hidden;aspect-ratio:4/3}.pi-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}.pi:hover .pi-img{transform:scale(1.06)}.pi-img-placeholder{width:100%;height:100%;background:#e5e5e5}.pi-overlay{position:absolute;inset:0;background:rgba(15,15,15,.82);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.pi:hover .pi-overlay{opacity:1}.pi-ov-inner{text-align:center;padding:24px}.pi-ov-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:10px}.pi-ov-title{font-size:20px;font-weight:800;color:#fff;margin-bottom:6px}.pi-ov-client{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:20px}.pi-ov-btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;font-size:13px;font-weight:700;padding:10px 20px;border-radius:2px;text-transform:uppercase;letter-spacing:.06em}.pi-info{padding:20px 20px 24px}.pi-name{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px}.pi-sub{font-size:13px;color:#888}.lb-overlay{position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .28s ease}.lb-overlay.open{opacity:1;pointer-events:all}.lb-close{position:absolute;top:18px;right:20px;background:rgba(255,255,255,.08);border:0;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;transition:background .2s}.lb-close:hover{background:rgba(255,255,255,.18)}.lb-counter{position:absolute;top:22px;left:24px;font-size:13px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.06em;z-index:20;font-family:var(--font)}.lb-img-wrap{position:absolute;inset:0;bottom:96px;display:flex;align-items:center;justify-content:center;padding:60px 80px 0}.lb-img-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;border-radius:2px;transition:opacity .22s ease;user-select:none}.lb-img-wrap img.fade{opacity:0}.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(calc(-50% - 48px));background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:#fff;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;transition:background .2s,border-color .2s,opacity .2s}.lb-prev{left:20px}.lb-next{right:20px}.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.3)}.lb-prev.hidden,.lb-next.hidden{opacity:0;pointer-events:none}.lb-thumbs{position:absolute;bottom:0;left:0;right:0;height:88px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;background:linear-gradient(to top,rgba(0,0,0,.7) 0,transparent 100%)}.lb-thumb{width:64px;height:64px;border-radius:3px;overflow:hidden;cursor:pointer;opacity:.45;border:2px solid transparent;transition:opacity .2s,border-color .2s,transform .2s;flex-shrink:0}.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}.lb-thumb:hover{opacity:.75;transform:translateY(-2px)}.lb-thumb.on{opacity:1;border-color:var(--teal);transform:translateY(-3px)}@media(max-width:900px){.port-grid{grid-template-columns:repeat(2,1fr)}.lb-img-wrap{padding:56px 60px 0}.lb-prev{left:8px}.lb-next{right:8px}.lb-prev,.lb-next{width:42px;height:42px}}@media(max-width:600px){.port-grid{grid-template-columns:1fr}.lb-img-wrap{padding:52px 12px 0}.lb-prev{left:4px}.lb-next{right:4px}.lb-prev,.lb-next{width:38px;height:38px}.lb-thumb{width:52px;height:52px}.lb-thumbs{gap:6px}}
/* ── LIGHTBOX REBUILD ── */
.lb-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.lb-overlay.open{opacity:1;pointer-events:all}

/* Top bar */
.lb-topbar{position:absolute;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 24px;background:linear-gradient(to bottom,rgba(0,0,0,.7) 0,transparent 100%);z-index:20}
.lb-project-info{display:flex;align-items:center;gap:10px;overflow:hidden}
.lb-project-cat{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#31b7bc;flex-shrink:0}
.lb-project-title{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
.lb-project-sub{font-size:12px;color:rgba(255,255,255,.45);white-space:nowrap;flex-shrink:0}
.lb-topbar-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.lb-counter{font-size:12px;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.06em}
.lb-close{background:rgba(255,255,255,.1);border:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.lb-close:hover{background:rgba(255,255,255,.22)}

/* Main image */
.lb-img-wrap{position:absolute;inset:0;top:64px;bottom:96px;display:flex;align-items:center;justify-content:center;padding:20px 80px}
.lb-img-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;border-radius:2px;transition:opacity .2s ease,transform .2s ease;user-select:none}

/* Arrows */
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(calc(-50% - 48px));background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;transition:background .2s,opacity .2s}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.2)}
.lb-prev.hidden,.lb-next.hidden{opacity:0;pointer-events:none}

/* Bottom bar */
.lb-bottombar{position:absolute;bottom:0;left:0;right:0;height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 20px;background:linear-gradient(to top,rgba(0,0,0,.75) 0,transparent 100%);z-index:20;gap:16px}
.lb-thumbs{display:flex;align-items:center;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none;padding:8px 0}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumb{width:60px;height:60px;border-radius:3px;overflow:hidden;cursor:pointer;opacity:.4;border:2px solid transparent;transition:opacity .2s,border-color .2s,transform .2s;flex-shrink:0;background:none;padding:0}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb:hover{opacity:.75;transform:translateY(-2px)}
.lb-thumb.on{opacity:1;border-color:#31b7bc;transform:translateY(-3px)}

/* Next Project button */
.lb-next-project{flex-shrink:0;display:flex;align-items:center;gap:8px;background:#31b7bc;border:0;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;border-radius:2px;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s;font-family:inherit}
.lb-next-project:hover{background:#279ea3;transform:translateY(-1px)}
.lb-next-project svg{flex-shrink:0}

@media(max-width:820px){
  .lb-project-title{max-width:180px}
  .lb-project-sub{display:none}
  .lb-img-wrap{padding:16px 52px}
  .lb-prev{left:6px}.lb-next{right:6px}
  .lb-prev,.lb-next{width:40px;height:40px}
  .lb-thumb{width:48px;height:48px}
  .lb-next-project{font-size:11px;padding:8px 12px}
}
@media(max-width:480px){
  .lb-project-cat{display:none}
  .lb-img-wrap{padding:12px 44px}
  .lb-prev,.lb-next{width:36px;height:36px}
}

/* Portfolio grid items as links */
a.pi { display: block; text-decoration: none; color: inherit; }
a.pi:hover .pi-img { transform: scale(1.06); }
a.pi:focus-visible { outline: 3px solid var(--t); outline-offset: 2px; }

/* Homepage project cards as links */
a.pi.rv { display: block; text-decoration: none; color: inherit; }