.cells-hero{
background:linear-gradient(135deg,#2f3b46,#455764);
padding:70px 40px;
color:#fff;
}
.cells-hero-content{max-width:900px;margin:auto;}
.cells-hero .eyebrow{
display:inline-block;
text-transform:uppercase;
letter-spacing:.25em;
color:#f0d28a;
font-size:.8rem;
margin-bottom:12px;
}
.cells-hero h1{
font-size:2.4rem;
margin-bottom:15px;
}
.cells-hero p{
max-width:800px;
line-height:1.8;
opacity:.95;
}

.cells-container{
padding:35px;
background:#f7f6f2;
}

.cells-toolbar{
display:flex;
flex-direction:column;
gap:18px;
margin-bottom:30px;
}

#cellSearch{
padding:14px 18px;
font-size:15px;
border:1px solid #ddd;
border-radius:10px;
outline:none;
transition:.25s;
width:100%;
background:#fff;
}
#cellSearch:focus{
border-color:var(--gold);
box-shadow:0 0 0 3px rgba(201,168,76,.15);
}

.filter-chips{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.chip{
border:none;
background:#e6e6e6;
padding:10px 18px;
border-radius:999px;
cursor:pointer;
font-weight:600;
transition:.25s;
}

.chip:hover,
.chip.active{
background:var(--cream);
color:#fff;
}

/* Desktop */
.cells-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;

    align-items:start;
}

/* Large tablets */
@media (max-width:1200px){
    .cells-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* Mobile */
@media (max-width:768px){
    .cells-grid{
        grid-template-columns:1fr;
    }
}

.cell-card{
background:#fff;
border-radius:18px;
padding:24px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.25s;
display:flex;
flex-direction:column;
}

.cell-card:hover{
transform:translateY(-5px);
}

.badge{
display:inline-block;
padding:6px 14px;
border-radius:999px;
font-size:.75rem;
font-weight:700;
color:#fff;
margin-bottom:18px;
}

.academic{background:#1565C0;}
.student-welfare{background:#2E7D32;}
.statutory{background:#C62828;}
.industry{background:#EF6C00;}
.administration{background:#6A1B9A;}
.public-relations{background:#FFC107;}

.cell-header h2{
font-size:1.4rem;
color:#2f3b46;
margin-bottom:20px;
line-height:1.3;
}

.cell-head{
background:#fafafa;
border-left:4px solid var(--gold);
padding:16px;
border-radius:8px;
margin-bottom:20px;
}

.cell-head .label{
font-size:.75rem;
text-transform:uppercase;
letter-spacing:.15em;
color:#777;
margin-bottom:6px;
}

.cell-head span{
color:#666;
font-size:.9rem;
}

.accordion{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 18px;
border:none;
background:var(--cream);
color:#fff;
border-radius:10px;
cursor:pointer;
font-weight:600;
}

.accordion:hover{
background:#3d4d5a;
}

.panel{
overflow:hidden;
max-height:0;
transition:max-height .35s ease;
background:#fff;
}

.member-row{
display:flex;
justify-content:space-between;
padding:14px 6px;
border-bottom:1px solid #eee;
gap:20px;
}

.member-row:last-child{
border-bottom:none;
}

.member-row div:last-child{
color:#666;
font-size:.9rem;
text-align:right;
}

@media(max-width:992px){
.cells-grid{
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.cells-container{
padding:24px;
}
}

@media(max-width:768px){
.cells-hero{
padding:45px 20px;
}
.cells-hero h1{
font-size:2rem;
}
.cells-container{
padding:18px;
}
.filter-chips{
overflow-x:auto;
padding-bottom:5px;
}
.filter-chips::-webkit-scrollbar{
height:5px;
}
.chip{
white-space:nowrap;
}
.cells-grid{
grid-template-columns:1fr;
}
.cell-card{
padding:18px;
}
.member-row{
flex-direction:column;
gap:4px;
}
.member-row div:last-child{
text-align:left;
}
}