.page-hero{
 position: relative;
 padding-top: 180px; padding-bottom: 110px;
 padding-left: var(--pad-x); padding-right: var(--pad-x);
 background: var(--navy-black); color: #fff;
 overflow: hidden;
}
.page-hero::before{
 content:''; position:absolute; inset:0;
 background:
 radial-gradient(ellipse 60% 50% at 90% 30%, rgba(0,160,223,.30), transparent 60%),
 radial-gradient(ellipse 50% 60% at 0% 100%, rgba(13,152,122,.20), transparent 60%);
}
.page-hero-inner{ position: relative; z-index: 2; }
.page-hero h1{ color: #fff; max-width: 22ch; }
.page-hero h1 .em{ color: var(--cyan); }
.page-hero .lead{ color: rgba(255,255,255,.78); margin-top: 28px; max-width: 720px; }

.work-section{ padding: clamp(60px, 8vw, 100px) var(--pad-x) clamp(80px, 11vw, 160px); background: var(--paper); }

.filter-bar{
 display: flex; gap: 10px; flex-wrap: wrap;
 margin-bottom: clamp(40px, 5vw, 70px);
 padding-bottom: 24px;
 border-bottom: 1px solid var(--line);
}
/* .filter-bar button now owned by the applab/filter-button block */

.work-grid-full{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(20px, 2.5vw, 32px); }
.work-tile{
 display: block;
 background: #fff;
 border-radius: var(--rad);
 overflow: hidden;
 border: 1px solid var(--line);
 transition: all .4s var(--ease);
 text-decoration: none; color: inherit;
}
.work-tile:hover{
 transform: translateY(-5px);
 box-shadow: 0 28px 60px rgba(10,10,10,.10);
 border-color: rgba(42,125,225,.30);
}
.work-tile.is-hidden{ display: none; }
.work-tile .visual{
 position: relative;
 aspect-ratio: 16/10;
 overflow: hidden;
 background: var(--off);
}
.work-tile .visual img{
 width: 100%; height: 100%;
 object-fit: cover;
 transition: transform .55s cubic-bezier(.22,.61,.36,1);
 display: block;
}
.work-tile:hover .visual img{ transform: scale(1.05); }
.work-tile .visual .tag{
 position: absolute; top: 14px; left: 14px;
 background: rgba(2,6,31,.78); color: #fff;
 backdrop-filter: blur(8px);
 z-index: 2;
 font-family: var(--mono); font-size: 10px;
 letter-spacing: .14em; text-transform: uppercase;
 padding: 6px 12px;
 border-radius: 100px;
}
.work-tile .visual .ind-tag{
 position: absolute; bottom: 14px; right: 14px;
 background: rgba(255,255,255,.94); color: var(--ink);
 z-index: 2;
 font-family: var(--mono); font-size: 9px;
 letter-spacing: .14em; text-transform: uppercase;
 padding: 5px 10px;
 border-radius: 100px;
}
.work-tile .info{ padding: 24px 22px 28px; }
.work-tile .info .client{
 font-family: var(--mono); font-size: 10.5px;
 letter-spacing: .14em; text-transform: uppercase;
 color: var(--blue); margin-bottom: 10px;
}
.work-tile .info h3{
 font-family: var(--display);
 font-size: 19px; font-weight: 700; letter-spacing: -.015em;
 line-height: 1.3; margin-bottom: 10px;
 color: var(--ink);
}
.work-tile .info .arr{
 font-family: var(--mono); font-size: 11px;
 letter-spacing: .14em; text-transform: uppercase;
 color: var(--blue); margin-top: 14px;
}

@media (max-width: 980px){ .work-grid-full{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .work-grid-full{ grid-template-columns: 1fr; } }

.work-result-count{
 font-family: var(--mono); font-size: 11px;
 letter-spacing: .14em; text-transform: uppercase;
 color: var(--grey-2);
 margin-bottom: 30px;
}

.cta{
 padding: clamp(100px, 14vw, 200px) var(--pad-x);
 background: var(--navy-black); color: #fff;
 position: relative; overflow: hidden;
}
.cta::before{
 content:''; position:absolute; inset:0;
 background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,160,223,.22), transparent 60%);
}
.cta > *{ position: relative; z-index: 2; }
.cta h2{ color: #fff; max-width: 22ch; }
.cta h2 .em{ color: var(--cyan); }
.cta .lead{ color: rgba(255,255,255,.7); margin-top: 26px; }
.cta-actions{ margin-top: clamp(40px, 6vw, 70px); display: flex; gap: 14px; flex-wrap: wrap; }