.it-team,
.it-team *{
    box-sizing:border-box;
    font-family:'Poppins',sans-serif !important;
}

.it-team{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    background:transparent;
    color:#111;
    overflow:hidden;
}

.it-team-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:start;
    gap:22px;
    width:100%;
    overflow:visible;
    padding:10px 10px 24px;
}
.it-team-grid::-webkit-scrollbar{display:none}

.it-card{
    position:relative;
    width:100%;
    aspect-ratio:.80 / 1;
    min-width:0;
    overflow:hidden;
    border-radius:20px;
    background:#f2f2f2;
    border:1px solid rgba(17,17,17,.09);
    box-shadow:0 14px 32px rgba(0,0,0,.08);
    scroll-snap-align:center;
    cursor:default;
    transform:translateZ(0);
    transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
.it-card.has-link{cursor:pointer}
.it-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 42px rgba(0,0,0,.13);
}


.it-photo-wrap{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#efefef;
}

.it-photo{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:100% !important;
    min-height:100% !important;
    max-width:none !important;
    max-height:none !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center 20% !important;
    filter:grayscale(1) contrast(1.02);
    transform:scale(1.002);
    transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
.it-card:hover .it-photo{transform:scale(1.035);filter:grayscale(0) contrast(1)}

.it-photo-fallback{
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#ececec,#fafafa);
}
.it-photo-fallback span{
    font-size:68px;
    font-weight:700;
    color:rgba(20,20,20,.28);
}

/* slim bottom glass name strip */
.it-glass{
    position:absolute;
    z-index:3;
    left:10px;
    right:10px;
    bottom:10px;
    min-height:0;
    padding:12px 48px 12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.42);
    background:linear-gradient(135deg,rgba(255,255,255,.36),rgba(205,205,205,.18));
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    backdrop-filter:blur(14px) saturate(120%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.44),0 8px 18px rgba(0,0,0,.12);
}

.it-copy{padding:0}
.it-copy h3{
    margin:0;
    color:#fff;
    font-size:clamp(15px,1.15vw,19px);
    line-height:1.12;
    letter-spacing:-.025em;
    font-weight:600;
    text-shadow:0 1px 6px rgba(0,0,0,.25);
}
.it-role{
    margin-top:4px;
    color:rgba(255,255,255,.88);
    font-size:clamp(11px,.9vw,14px);
    line-height:1.3;
    font-weight:400;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow:0 1px 5px rgba(0,0,0,.18);
}

/* hide the longer content in this compact style */
.it-copy p,
.it-social{
    display:none !important;
}

.it-arrow{
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.40);
    background:rgba(255,255,255,.20);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    color:#fff !important;
    text-decoration:none !important;
    font-size:15px;
    line-height:1;
    box-shadow:0 5px 14px rgba(0,0,0,.10);
    transition:transform .2s ease,background .2s ease;
}
.it-arrow:hover{
    transform:translateY(-50%) translate(1px,-1px);
    background:rgba(255,255,255,.30);
}

.it-card:focus-visible{
    outline:3px solid rgba(27,104,163,.34);
    outline-offset:4px;
}

.it-empty{
    width:100%;
    padding:28px;
    border:1px dashed #ccc;
    border-radius:18px;
    text-align:center;
    color:#777;
    background:rgba(255,255,255,.65);
}

@media(max-width:1200px){
    .it-team-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:16px;
    }
    .it-glass{
        left:8px;
        right:8px;
        bottom:8px;
        padding:10px 40px 10px 12px;
    }
    .it-copy h3{font-size:15px}
    .it-role{font-size:11px}
    .it-arrow{
        width:30px;
        height:30px;
        right:8px;
        font-size:14px;
    }
}

@media(max-width:900px){
    .it-team-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }
}

@media(max-width:700px){
    .it-team{overflow:hidden}
    .it-team-grid{
        display:flex;
        gap:14px;
        width:auto;
        overflow-x:auto;
        overflow-y:hidden;
        padding:4px 14px 16px;
        margin:0 -14px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .it-team-grid::-webkit-scrollbar{display:none}
    .it-card{
        flex:0 0 min(72vw,270px);
        width:min(72vw,270px);
        aspect-ratio:.80 / 1;
        border-radius:18px;
        scroll-snap-align:center;
    }
    .it-glass{
        left:8px;
        right:8px;
        bottom:8px;
        padding:10px 42px 10px 12px;
        border-radius:12px;
    }
    .it-copy h3{font-size:15px}
    .it-role{font-size:11px}
    .it-arrow{
        width:30px;
        height:30px;
        right:8px;
        font-size:14px;
    }
}

@media(max-width:430px){
    .it-card{
        flex-basis:76vw;
        width:76vw;
        max-width:255px;
    }
}
