/* ============================================================
   SPC — TEAM / FACULTY PAGE
   ============================================================ */

:root {

    --team-primary: #197da6;
    --team-primary-dark: #125f7c;
    --team-primary-soft: #e7f3f7;

    --team-accent: #d59a3a;
    --team-dark: #17343d;
    --team-heading: #17343d;
    --team-text: #43565d;
    --team-muted: #748188;

    --team-bg: #f7f4ed;
    --team-bg-soft: #fffdf8;
    --team-card: #fffdf8;

    --team-border: rgba(23, 52, 61, 0.10);

    --team-shadow:
        0 18px 45px rgba(35, 58, 65, 0.08);

    --team-shadow-hover:
        0 28px 65px rgba(35, 58, 65, 0.14);

}


/* ============================================================
   PAGE BASE
   ============================================================ */

.spc-team-page {

    background:
        var(--team-bg);

    color:
        var(--team-text);

}


.spc-team-page main {

    overflow:
        hidden;

}


.spc-team-page h1,
.spc-team-page h2,
.spc-team-page h3,
.spc-team-page h4 {

    font-family:
        "Manrope",
        sans-serif;

}


.spc-team-page p {

    font-family:
        "DM Sans",
        sans-serif;

}


/* ============================================================
   HERO
   ============================================================ */

.team-hero {

    position:
        relative;

    min-height:
        560px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #17343d 0%,
            #145c73 55%,
            #197da6 100%
        );

    color:
        #ffffff;

}


.team-hero__grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .14;

    background-image:
        linear-gradient(
            rgba(255,255,255,.16) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.16) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    pointer-events:
        none;

}


.team-hero__glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(10px);

}


.team-hero__glow--one {

    width:
        360px;

    height:
        360px;

    right:
        -130px;

    top:
        -130px;

    background:
        rgba(255,255,255,.10);

}


.team-hero__glow--two {

    width:
        280px;

    height:
        280px;

    left:
        -120px;

    bottom:
        -150px;

    background:
        rgba(217,154,50,.15);

}


.team-hero__content {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    padding:
        150px 0 65px;

}


.team-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        17px;

    color:
        rgba(255,255,255,.78);

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        .16em;

}


.team-eyebrow::before {

    content:
        "";

    width:
        28px;

    height:
        2px;

    background:
        var(--team-accent);

}


.team-eyebrow--dark {

    color:
        var(--team-primary);

}


.team-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        25px;

    color:
        rgba(255,255,255,.62);

    font-size:
        .72rem;

}


.team-breadcrumb a {

    color:
        #ffffff;

    text-decoration:
        none;

    transition:
        opacity .25s ease;

}


.team-breadcrumb a:hover {

    opacity:
        .75;

}


.team-breadcrumb i {

    font-size:
        .6rem;

}


.team-hero h1 {

    max-width:
        850px;

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(2.5rem, 6vw, 5rem);

    line-height:
        1.04;

    letter-spacing:
        -.055em;

    font-weight:
        800;

}


.team-hero h1 span {

    display:
        block;

    color:
        #a9dcea;

}


.team-hero p {

    max-width:
        680px;

    margin:
        25px 0 0;

    color:
        rgba(255,255,255,.76);

    font-size:
        .92rem;

    line-height:
        1.8;

}


.team-hero__bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        65px;

    padding-top:
        18px;

    border-top:
        1px solid rgba(255,255,255,.16);

    color:
        rgba(255,255,255,.54);

    font-size:
        .61rem;

    font-weight:
        800;

    letter-spacing:
        .14em;

}


/* ============================================================
   INTRODUCTION
   ============================================================ */

.team-introduction {

    padding:
        110px 0 75px;

    background:
        var(--team-bg);

}


.team-introduction h2,
.team-faculty h2,
.team-approach h2 {

    max-width:
        760px;

    margin:
        0 0 20px;

    color:
        var(--team-heading);

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    line-height:
        1.08;

    letter-spacing:
        -.045em;

    font-weight:
        800;

}


.team-introduction h2 span,
.team-faculty h2 span,
.team-approach h2 span {

    color:
        var(--team-primary);

}


.team-introduction p {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--team-text);

    font-size:
        .88rem;

    line-height:
        1.85;

}


.team-introduction__note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    padding:
        22px;

    border:
        1px solid var(--team-border);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.55);

}


.team-introduction__note i {

    flex:
        0 0 auto;

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        var(--team-primary-soft);

    color:
        var(--team-primary);

    font-size:
        1rem;

}


.team-introduction__note span {

    color:
        var(--team-text);

    font-size:
        .72rem;

    line-height:
        1.65;

}


/* ============================================================
   FACULTY SECTION
   ============================================================ */

.team-faculty {

    padding:
        75px 0 115px;

    background:
        var(--team-bg-soft);

}


.team-section-heading {

    margin-bottom:
        45px;

}


.team-section-heading p {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--team-muted);

    font-size:
        .84rem;

    line-height:
        1.75;

}


/* ============================================================
   FACULTY CARD
   ============================================================ */

.faculty-card {

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid var(--team-border);

    border-radius:
        22px;

    background:
        var(--team-card);

    box-shadow:
        var(--team-shadow);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.faculty-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(25,125,166,.20);

    box-shadow:
        var(--team-shadow-hover);

}


/* ============================================================
   FACULTY IMAGE
   ============================================================ */

.faculty-card__image {

    position:
        relative;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    background:
        #dfe9eb;

}


.faculty-card__image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(23,52,61,.38),
            transparent 45%
        );

    pointer-events:
        none;

}


.faculty-card__image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1);

}


.faculty-card:hover
.faculty-card__image img {

    transform:
        scale(1.045);

}


.faculty-card__image-overlay {

    position:
        absolute;

    left:
        17px;

    bottom:
        17px;

    z-index:
        2;

}


.faculty-card__image-overlay span {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        0 11px;

    border:
        1px solid rgba(255,255,255,.25);

    border-radius:
        999px;

    background:
        rgba(23,52,61,.65);

    color:
        #ffffff;

    backdrop-filter:
        blur(8px);

    font-size:
        .56rem;

    font-weight:
        800;

    letter-spacing:
        .12em;

}


/* ============================================================
   FACULTY CONTENT
   ============================================================ */

.faculty-card__content {

    padding:
        25px 25px 27px;

}


.faculty-card__label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--team-primary);

    font-size:
        .57rem;

    font-weight:
        800;

    letter-spacing:
        .13em;

}


.faculty-card h3 {

    margin:
        0;

    color:
        var(--team-heading);

    font-size:
        1.25rem;

    line-height:
        1.25;

    letter-spacing:
        -.025em;

    font-weight:
        800;

}


.faculty-card__designation {

    margin:
        6px 0 22px;

    color:
        var(--team-muted);

    font-size:
        .73rem;

    font-weight:
        600;

}


/* ============================================================
   FACULTY DETAILS
   ============================================================ */

.faculty-card__details {

    display:
        grid;

    gap:
        13px;

    padding-top:
        18px;

    border-top:
        1px solid var(--team-border);

}


.faculty-card__detail {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.faculty-card__detail-icon {

    flex:
        0 0 auto;

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    background:
        var(--team-primary-soft);

    color:
        var(--team-primary);

}


.faculty-card__detail-icon i {

    font-size:
        .88rem;

}


.faculty-card__detail div {

    min-width:
        0;

}


.faculty-card__detail small {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--team-muted);

    font-size:
        .58rem;

    font-weight:
        600;

}


.faculty-card__detail strong {

    display:
        block;

    color:
        var(--team-dark);

    font-size:
        .7rem;

    line-height:
        1.4;

    font-weight:
        700;

}


/* ============================================================
   TEACHING APPROACH
   ============================================================ */

.team-approach {

    padding:
        110px 0;

    background:
        #17343d;

    color:
        #ffffff;

}


.team-approach__intro h2 {

    color:
        #ffffff;

}


.team-approach__intro h2 span {

    color:
        #a9dcea;

}


.team-approach__intro p {

    max-width:
        550px;

    margin:
        0;

    color:
        rgba(255,255,255,.68);

    font-size:
        .84rem;

    line-height:
        1.85;

}


.team-approach__points {

    display:
        grid;

    gap:
        0;

    border-top:
        1px solid rgba(255,255,255,.13);

}


.team-approach__point {

    display:
        flex;

    gap:
        25px;

    padding:
        24px 0;

    border-bottom:
        1px solid rgba(255,255,255,.13);

}


.team-approach__point > span {

    flex:
        0 0 42px;

    color:
        #7cc9dc;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        .68rem;

    font-weight:
        800;

}


.team-approach__point strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #ffffff;

    font-size:
        .9rem;

    font-weight:
        800;

}


.team-approach__point p {

    max-width:
        500px;

    margin:
        0;

    color:
        rgba(255,255,255,.60);

    font-size:
        .72rem;

    line-height:
        1.65;

}


/* ============================================================
   CTA
   ============================================================ */

.team-cta {

    padding:
        100px 0;

    background:
        var(--team-bg);

}


.team-cta__inner {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    overflow:
        hidden;

    padding:
        55px;

    border-radius:
        26px;

    background:
        linear-gradient(
            135deg,
            #145f79,
            #197da6
        );

    box-shadow:
        0 25px 60px rgba(25,125,166,.17);

}


.team-cta__inner::after {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -100px;

    top:
        -120px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.08);

}


.team-cta__content {

    position:
        relative;

    z-index:
        2;

}


.team-cta__content h2 {

    max-width:
        650px;

    margin:
        0 0 14px;

    color:
        #ffffff;

    font-size:
        clamp(2rem, 4vw, 3.2rem);

    line-height:
        1.08;

    letter-spacing:
        -.04em;

    font-weight:
        800;

}


.team-cta__content h2 span {

    color:
        #b9e7f1;

}


.team-cta__content p {

    max-width:
        580px;

    margin:
        0;

    color:
        rgba(255,255,255,.70);

    font-size:
        .8rem;

    line-height:
        1.75;

}


.team-cta__actions {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-shrink:
        0;

}


.team-button {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0 18px;

    border-radius:
        999px;

    text-decoration:
        none;

    font-size:
        .68rem;

    font-weight:
        800;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.team-button:hover {

    transform:
        translateY(-3px);

}


.team-button--primary {

    background:
        #ffffff;

    color:
        var(--team-primary);

}


.team-button--primary:hover {

    background:
        #eef8fa;

    color:
        var(--team-primary-dark);

}


.team-button--outline {

    border:
        1px solid rgba(255,255,255,.35);

    color:
        #ffffff;

}


.team-button--outline:hover {

    border-color:
        #ffffff;

    background:
        rgba(255,255,255,.10);

    color:
        #ffffff;

}


/* ============================================================
   REVEAL ANIMATION
   ============================================================ */

.team-reveal {

    opacity:
        0;

    transform:
        translateY(22px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.7,.2,1);

}


.team-reveal.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* ============================================================
   STAGGER FACULTY CARDS
   ============================================================ */

.team-faculty .col-md-6:nth-child(2)
.faculty-card {

    transition-delay:
        .06s;

}


.team-faculty .col-md-6:nth-child(3)
.faculty-card {

    transition-delay:
        .12s;

}


.team-faculty .col-md-6:nth-child(4)
.faculty-card {

    transition-delay:
        .18s;

}


.team-faculty .col-md-6:nth-child(5)
.faculty-card {

    transition-delay:
        .24s;

}


.team-faculty .col-md-6:nth-child(6)
.faculty-card {

    transition-delay:
        .30s;

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .team-hero {

        min-height:
            510px;

    }


    .team-hero__content {

        padding:
            135px 0 55px;

    }


    .team-introduction {

        padding:
            85px 0 60px;

    }


    .team-faculty {

        padding:
            60px 0 85px;

    }


    .team-approach {

        padding:
            85px 0;

    }


    .team-cta {

        padding:
            75px 0;

    }


    .team-cta__inner {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            45px;

    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .team-hero {

        min-height:
            480px;

    }


    .team-hero__content {

        padding:
            125px 0 42px;

    }


    .team-hero h1 {

        font-size:
            clamp(2.25rem, 12vw, 3.3rem);

    }


    .team-hero p {

        font-size:
            .78rem;

        line-height:
            1.75;

    }


    .team-hero__bottom {

        margin-top:
            45px;

        font-size:
            .53rem;

    }


    .team-introduction {

        padding:
            75px 0 45px;

    }


    .team-introduction h2,
    .team-faculty h2,
    .team-approach h2 {

        font-size:
            2rem;

    }


    .team-introduction__note {

        padding:
            18px;

    }


    .team-faculty {

        padding:
            45px 0 75px;

    }


    .team-section-heading {

        margin-bottom:
            30px;

    }


    .faculty-card {

        border-radius:
            18px;

    }


    .faculty-card__content {

        padding:
            21px;

    }


    .faculty-card h3 {

        font-size:
            1.15rem;

    }


    .team-approach {

        padding:
            75px 0;

    }


    .team-approach__point {

        gap:
            15px;

    }


    .team-approach__point > span {

        flex-basis:
            34px;

    }


    .team-cta {

        padding:
            60px 0;

    }


    .team-cta__inner {

        gap:
            28px;

        padding:
            35px 25px;

        border-radius:
            20px;

    }


    .team-cta__actions {

        width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .team-button {

        width:
            100%;

    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .team-hero__bottom span:last-child {

        display:
            none;

    }


    .team-breadcrumb {

        font-size:
            .65rem;

    }


    .faculty-card__image {

        aspect-ratio:
            1 / .92;

    }


    .faculty-card__detail strong {

        font-size:
            .67rem;

    }


    .team-cta__content h2 {

        font-size:
            1.85rem;

    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .team-reveal {

        opacity:
            1;

        transform:
            none;

        transition:
            none;

    }


    .faculty-card,
    .faculty-card__image img,
    .team-button {

        transition:
            none;

    }


    .faculty-card:hover {

        transform:
            none;

    }


    .faculty-card:hover
    .faculty-card__image img {

        transform:
            none;

    }

}
/* ============================================================
   FACULTY IMAGE FALLBACK
============================================================ */

.faculty-image-fallback {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    background:
        linear-gradient(
            145deg,
            #dcebef,
            #c8dfe5
        );

    color:
        var(--team-primary);

}


.faculty-image-fallback i {

    font-size:
        3.2rem;

    opacity:
        .65;

}


.faculty-image-fallback span {

    font-size:
        .62rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    opacity:
        .7;

}

/* ============================================================
   SPC TEAM — FINAL DESIGN SYSTEM / RESPONSIVE LAYER
   ============================================================ */

.spc-team-page {
    --team-primary: #197da6;
    --team-primary-dark: #125f7c;
    --team-primary-soft: #e7f3f7;
    --team-accent: #d59a3a;
    --team-dark: #17343d;
    --team-heading: #17343d;
    --team-text: #43565d;
    --team-muted: #748188;
    --team-bg: #f7f4ed;
    --team-bg-soft: #fffdf8;
    --team-card: #fffdf8;
    --team-border: rgba(23,52,61,.10);
    max-width: 100%;
    overflow-x: clip;
}

.spc-team-page img,
.spc-team-page svg,
.spc-team-page iframe {
    max-width: 100%;
}

.spc-team-page .container,
.spc-team-page .row,
.spc-team-page [class*="col-"] {
    min-width: 0;
}

.team-hero {
    min-height: clamp(520px, 72vh, 760px);
}

.team-hero__content {
    padding-top: clamp(120px, 13vw, 165px);
}

.team-hero h1 {
    text-wrap: balance;
}

.team-introduction__note,
.faculty-card,
.team-cta__inner {
    min-width: 0;
}

.faculty-card__content,
.faculty-card__detail strong,
.team-approach__point p {
    overflow-wrap: anywhere;
}

.team-cta__content {
    min-width: 0;
}

/* Tablet */
@media (max-width: 991.98px) {
    .team-hero {
        min-height: 570px;
    }

    .team-hero__content {
        padding-top: 135px;
    }

    .team-introduction h2,
    .team-faculty h2,
    .team-approach h2 {
        font-size: clamp(2.2rem, 5vw, 3.4rem);
    }

    .faculty-card__content {
        padding: 23px;
    }

    .team-cta__inner {
        gap: 30px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .team-hero {
        min-height: 570px;
        align-items: flex-end;
    }

    .team-hero__content {
        padding: 120px 0 42px;
    }

    .team-eyebrow {
        font-size: .64rem;
    }

    .team-breadcrumb {
        flex-wrap: wrap;
        row-gap: 6px;
        margin-bottom: 20px;
    }

    .team-hero h1 {
        font-size: clamp(2.45rem, 12.5vw, 4rem);
        line-height: .98;
        letter-spacing: -.05em;
    }

    .team-hero p {
        max-width: 620px;
        font-size: .86rem;
        line-height: 1.75;
    }

    .team-hero__bottom {
        flex-wrap: wrap;
        margin-top: 42px;
        font-size: .52rem;
        row-gap: 8px;
    }

    .team-introduction {
        padding: 72px 0 50px;
    }

    .team-introduction h2,
    .team-faculty h2,
    .team-approach h2 {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .team-introduction p {
        font-size: .86rem;
    }

    .team-introduction__note {
        padding: 17px;
    }

    .team-faculty {
        padding: 55px 0 75px;
    }

    .team-section-heading {
        margin-bottom: 28px;
    }

    .faculty-card {
        border-radius: 18px;
    }

    .faculty-card__image {
        aspect-ratio: 4 / 3;
    }

    .faculty-card__content {
        padding: 21px;
    }

    .faculty-card h3 {
        font-size: 1.16rem;
    }

    .faculty-card__details {
        gap: 11px;
    }

    .team-approach {
        padding: 72px 0;
    }

    .team-approach__point {
        gap: 13px;
        padding: 20px 0;
    }

    .team-approach__point p {
        font-size: .74rem;
    }

    .team-cta {
        padding: 60px 0;
    }

    .team-cta__inner {
        padding: 32px 22px;
        border-radius: 20px;
    }

    .team-cta__content h2 {
        font-size: clamp(2rem, 9vw, 3rem);
    }
}

/* Small phones */
@media (max-width: 575.98px) {
    .team-hero {
        min-height: 550px;
    }

    .team-hero__content {
        padding-top: 110px;
    }

    .team-hero h1 {
        font-size: clamp(2.25rem, 13vw, 3.35rem);
    }

    .team-hero p {
        font-size: .82rem;
    }

    .team-hero__bottom {
        font-size: .49rem;
    }

    .team-introduction {
        padding: 62px 0 42px;
    }

    .team-introduction__note {
        align-items: flex-start;
        gap: 11px;
        padding: 15px;
    }

    .team-introduction__note i {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .team-faculty {
        padding: 48px 0 65px;
    }

    .faculty-card__image {
        aspect-ratio: 1 / .9;
    }

    .faculty-card__content {
        padding: 19px;
    }

    .faculty-card__detail-icon {
        width: 36px;
        height: 36px;
    }

    .faculty-card__detail strong {
        font-size: .68rem;
    }

    .team-approach {
        padding: 62px 0;
    }

    .team-approach__point > span {
        flex-basis: 30px;
    }

    .team-cta {
        padding: 48px 0;
    }

    .team-cta__inner {
        padding: 28px 19px;
    }

    .team-cta__content h2 {
        font-size: clamp(1.9rem, 10vw, 2.6rem);
    }
}

/* Prevent animation-related layout issues */
@media (prefers-reduced-motion: reduce) {
    .team-hero *,
    .faculty-card,
    .faculty-card *,
    .team-button,
    .team-reveal {
        animation: none !important;
        transition: none !important;
    }

    .faculty-card:hover,
    .team-button:hover {
        transform: none !important;
    }
}