.wb{padding-block:clamp(48px,6vw,88px) clamp(64px,8vw,120px)}
.wb__top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:clamp(28px,4vw,56px);flex-wrap:wrap}
.wb__top .fsentence{max-width:20em;flex:1 1 420px}
.vswitch{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.vswitch__b{padding:8px 18px;border-radius:999px;font-size:12px;text-transform:uppercase;transition:background var(--fast) linear,color var(--fast) linear}
.vswitch__b[aria-pressed="true"]{background:#151515;color:#F9F9F9}
.wb__empty{padding:40px 0;color:var(--muted)}
.wb__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(20px,2.4vw,32px)}
.wb__grid[hidden],.wb__index[hidden]{display:none}
.wb__cell,.ix{transition:opacity 200ms var(--ease)}
.wb__cell[hidden],.ix[hidden]{display:none}
.is-leaving{opacity:0}
.is-entering{animation:item-in 400ms var(--ease) both;animation-delay:calc(var(--s,0) * 30ms)}
@keyframes item-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Index: one row per project; clicking anywhere on the row opens it (same timing as the services accordion) */
.wb__index{border-top:1px solid var(--line)}
.ix{border-bottom:1px solid var(--line)}
.ix__head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:center;width:100%;padding:18px 0;text-align:left;cursor:pointer;transition:background var(--fast) linear}
.ix__head:hover{background:linear-gradient(90deg,rgba(128,128,128,.08),transparent)}
.ix__co{font-size:var(--fs-h5);font-weight:500}
.ix__more{margin-left:10px;font-size:12px;color:var(--muted);font-weight:400}
.ix__ind{font-size:14px;color:var(--muted)}
.ix__strip{display:flex;gap:6px;justify-content:flex-end}.ix__strip img{width:64px;height:44px;object-fit:cover;border-radius:2px}
.ix__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 500ms var(--ease)}
.ix.is-open .ix__panel{grid-template-rows:1fr}
.ix__clip{overflow:hidden;min-height:0}
.ix__body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(20px,3vw,48px);padding:6px 0 36px;opacity:0;transform:translateY(10px);transition:opacity var(--base) var(--ease) 60ms,transform var(--base) var(--ease) 60ms}
.ix.is-open .ix__body{opacity:1;transform:none}
.ix__info{display:grid;gap:12px;align-content:start}
.ix__scope{color:var(--muted);font-size:14px}
.ix__gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ix__gal img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px}
@media (max-width:767px){
	.wb__grid{grid-template-columns:1fr}
	.ix__head{grid-template-columns:1fr;gap:6px}.ix__strip{justify-content:flex-start;margin-top:6px}
	.ix__body{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.ix__panel,.ix__body{transition:none;transform:none}}