.projects-page{background-color:var(--hexa-bg);width:100%;color:var(--hexa-font-main);min-height:100vh;padding-top:150px}.projects-hero-margin{flex-direction:column;gap:16px;margin-bottom:70px;display:flex}.projects-hero-margin .approach-label p{color:var(--hexa-accent);letter-spacing:2px;text-transform:uppercase;margin:0 0 8px;font-size:.95rem;font-weight:700}.projects-hero-margin .approach-text h2{letter-spacing:-1px;margin:0;font-size:max(2rem,min(3.5vw,3.2rem));font-weight:600;line-height:1.2}.projects-hero-margin .text-dark{color:var(--hexa-font-main)}.projects-hero-margin .text-light{color:var(--hexa-font-dim)}.projects-filter-wrapper{flex-wrap:wrap;gap:10px;margin-bottom:50px;display:flex}.filter-pill{border:1px solid var(--hexa-card-border);color:var(--hexa-font-dim);cursor:pointer;background:rgba(255,255,255,.02);border-radius:50px;padding:9px 22px;font-size:.9rem;font-weight:600;transition:all .3s}.filter-pill:hover{color:var(--hexa-font-main);border-color:rgba(0,255,209,.4)}.filter-pill.active{color:var(--hexa-accent);border-color:var(--hexa-accent);background:rgba(0,255,209,.1)}.projects-interactive-layout{grid-template-columns:1.2fr 1fr;align-items:start;gap:70px;padding-bottom:120px;display:grid;position:relative}.projects-list-column{flex-direction:column;display:flex}.project-row-item{border-bottom:1px solid var(--hexa-card-border);cursor:pointer;z-index:1;justify-content:space-between;align-items:center;padding:36px 0;text-decoration:none;transition:border-color .4s;display:flex;position:relative}.row-item-left{flex-direction:column;gap:8px;display:flex}.row-meta{align-items:center;gap:14px;display:flex}.row-year{color:var(--hexa-font-dim);font-family:monospace;font-size:.85rem;font-weight:600}.hexa-original-tag{color:var(--hexa-accent);letter-spacing:.5px;background:rgba(0,255,209,.08);border:1px solid rgba(0,255,209,.2);border-radius:50px;align-items:center;gap:6px;padding:3px 10px;font-size:.72rem;font-weight:700;display:inline-flex}.row-title{color:var(--hexa-font-main);letter-spacing:-1px;transform-origin:0;margin:0;font-size:max(1.8rem,min(2.8vw,3rem));font-weight:600;transition:color .4s,transform .4s}.row-category{color:var(--hexa-font-dim);margin:0;font-size:.95rem}.row-arrow-circle{border:1px solid var(--hexa-card-border);width:54px;height:54px;color:var(--hexa-font-dim);background:rgba(255,255,255,.03);border-radius:50%;justify-content:center;align-items:center;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex}.project-row-item:hover{border-bottom-color:var(--hexa-accent)}.project-row-item:hover .row-title{color:var(--hexa-accent);transform:translate(8px)}.project-row-item:hover .row-arrow-circle{background:var(--hexa-accent);color:var(--hexa-bg);border-color:var(--hexa-accent);transform:scale(1.08)rotate(-45deg)}.mobile-project-image{display:none}.projects-image-column{width:100%;height:500px;position:-webkit-sticky;position:sticky;top:130px}.sticky-image-container{border-radius:var(--radius-card);background-color:var(--hexa-card-bg);border:1px solid rgba(0,255,209,.2);width:100%;height:100%;position:relative;overflow:hidden}.sticky-image-wrapper{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.sticky-image-wrapper img{object-fit:cover;filter:brightness(.9);width:100%;height:100%}.sticky-overlay-info{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:rgba(10,14,23,.85);border:1px solid rgba(255,255,255,.1);border-radius:50px;padding:8px 18px;position:absolute;bottom:20px;left:20px}.client-text{color:var(--hexa-font-main);letter-spacing:.5px;font-size:.85rem;font-weight:600}@media (max-width:1024px){.projects-interactive-layout{grid-template-columns:1fr;gap:30px}.projects-image-column{display:none}.project-row-item{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 0}.mobile-project-image{border:1px solid var(--hexa-card-border);border-radius:16px;width:100%;height:240px;display:block;overflow:hidden}.mobile-project-image img{object-fit:cover;width:100%;height:100%}}@media (max-width:768px){.projects-page{padding-top:100px}.projects-hero-margin{margin-bottom:40px}.row-title{font-size:1.6rem}}
