 

/* =========================================================
   TSCN — MANAGEMENT TEAM
========================================================= */

.tscn-management-section{
    position:relative;
    overflow:hidden;

    padding:105px 0 115px;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(169,29,57,.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 82%,
            rgba(198,154,74,.08),
            transparent 28%
        ),
        #fffaf3;
}


/* =========================================================
   DECORATIVE ORBS
========================================================= */

.tscn-management-orb{
    position:absolute;

    border-radius:50%;

    pointer-events:none;

    border:1px solid rgba(169,29,57,.08);
}

.tscn-management-orb-one{
    width:460px;
    height:460px;

    left:-300px;
    top:80px;
}

.tscn-management-orb-two{
    width:380px;
    height:380px;

    right:-250px;
    bottom:-100px;

    border-color:rgba(198,154,74,.12);
}


/* =========================================================
   INTRO
========================================================= */

.tscn-management-intro{
    position:relative;
    z-index:2;

    max-width:760px;

    margin:0 auto 55px;

    text-align:center;
}


/* Label */

.tscn-management-label{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    margin-bottom:17px;

    color:#a91d39;

    font-size:9px;

    font-weight:900;

    letter-spacing:2.8px;
}

.tscn-management-label span{
    width:40px;
    height:1px;

    background:#a91d39;
}

.tscn-management-label span:last-child{
    width:25px;

    background:#c69a4c;
}


/* Heading */

.tscn-management-intro h2{
    margin:0;

    color:#242329;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:clamp(42px,5vw,68px);

    line-height:1;

    letter-spacing:-1.8px;
}

.tscn-management-intro h2 em{
    color:#a91d39;

    font-style:normal;
}


/* Description */

.tscn-management-intro p{
    max-width:650px;

    margin:22px auto 0;

    color:#707176;

    font-size:14px;

    line-height:1.85;
}


/* =========================================================
   CHAIRMAN FEATURE CARD
========================================================= */

.tscn-chairman-card{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(360px, .95fr)
        minmax(400px, 1.05fr);

    max-width:1080px;

    min-height:470px;

    margin:0 auto 65px;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(169,29,57,.10);

    border-radius:30px;

    box-shadow:
        0 25px 70px rgba(55,25,30,.10);
}


/* =========================================================
   CHAIRMAN IMAGE
========================================================= */

.tscn-chairman-visual{
    position:relative;

    min-height:470px;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #f7e9dc,
            #ead4c2
        );
}

.tscn-chairman-visual::before{
    content:"";

    position:absolute;

    width:380px;
    height:380px;

    left:50%;
    top:50%;

    transform:translate(-50%,-42%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.85),
            rgba(255,255,255,0)
        );
}

.tscn-chairman-visual img{
    position:relative;
    z-index:3;

    width:auto;

    height:500px;

    max-width:100%;

    object-fit:contain;

    object-position:center bottom;

    filter:
        drop-shadow(
            0 20px 25px rgba(60,30,20,.18)
        );

    transition:
        transform .6s ease;
}

.tscn-chairman-card:hover
.tscn-chairman-visual img{
    transform:scale(1.025);
}


/* Decorative Frame */

.tscn-chairman-frame{
    position:absolute;

    width:310px;
    height:390px;

    top:38px;
    left:50%;

    transform:translateX(-50%);

    border:1px solid rgba(169,29,57,.18);

    border-radius:155px 155px 25px 25px;

    z-index:1;
}


/* Number */

.tscn-chairman-number{
    position:absolute;

    left:25px;
    top:25px;

    z-index:5;

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#a91d39;

    color:#fff;

    border-radius:50%;

    font-family:Georgia,serif;

    font-size:16px;

    box-shadow:
        0 10px 25px rgba(169,29,57,.22);
}


/* =========================================================
   CHAIRMAN CONTENT
========================================================= */

.tscn-chairman-content{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:55px 60px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf5
        );
}


/* Role */

.tscn-role-label{
    display:inline-flex;
    align-items:center;

    gap:8px;

    width:max-content;

    padding:8px 13px;

    color:#a91d39;

    background:#fff2f1;

    border-radius:30px;

    font-size:9px;

    font-weight:900;

    letter-spacing:1.5px;
}

.tscn-role-label i{
    color:#c69a4c;

    font-size:11px;
}


/* Name */

.tscn-chairman-content h3{
    margin:20px 0 0;

    color:#222126;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:clamp(32px,3.5vw,49px);

    line-height:1.05;

    letter-spacing:-1px;
}


/* Line */

.tscn-chairman-line{
    width:65px;
    height:3px;

    margin:20px 0;

    background:
        linear-gradient(
            90deg,
            #a91d39,
            #c69a4c
        );
}


/* Text */

.tscn-chairman-content p{
    max-width:490px;

    margin:0;

    color:#696b70;

    font-size:14px;

    line-height:1.9;
}


/* Signature */

.tscn-chairman-signature{
    display:flex;
    flex-direction:column;

    margin-top:30px;

    padding-left:17px;

    border-left:3px solid #c69a4c;
}

.tscn-chairman-signature span{
    color:#999;

    font-size:10px;

    letter-spacing:1px;
}

.tscn-chairman-signature strong{
    margin-top:4px;

    color:#a91d39;

    font-family:Georgia,serif;

    font-size:17px;
}


/* =========================================================
   MANAGEMENT GRID
========================================================= */

.tscn-management-grid{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:22px;

    max-width:1080px;

    margin:0 auto;
}


/* =========================================================
   MANAGEMENT CARD
========================================================= */

.tscn-management-card{
    position:relative;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(169,29,57,.09);

    border-radius:22px;

    box-shadow:
        0 15px 45px rgba(50,30,30,.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.tscn-management-card:hover{
    transform:translateY(-9px);

    box-shadow:
        0 25px 55px rgba(50,30,30,.13);
}


/* =========================================================
   PHOTO
========================================================= */

.tscn-management-photo{
    position:relative;

    height:300px;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #f7eee8,
            #eadbd1
        );
}

.tscn-management-photo::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:80px;

    background:
        linear-gradient(
            to top,
            rgba(120,20,40,.08),
            transparent
        );

    pointer-events:none;
}

.tscn-management-photo img{
    position:relative;
    z-index:2;

    width:100%;
    height:100%;

    object-fit:contain;

    object-position:center bottom;

    transition:
        transform .5s ease;
}

.tscn-management-card:hover
.tscn-management-photo img{
    transform:scale(1.035);
}


/* Index */

.tscn-management-index{
    position:absolute;

    z-index:5;

    top:15px;
    left:15px;

    width:37px;
    height:37px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#a91d39;

    color:#fff;

    border:3px solid rgba(255,255,255,.85);

    border-radius:50%;

    font-size:10px;

    font-weight:800;
}


/* =========================================================
   CARD BODY
========================================================= */

.tscn-management-card-body{
    padding:23px 21px 24px;

    text-align:left;
}


/* Role */

.tscn-management-role{
    display:block;

    min-height:25px;

    color:#b17c2c;

    font-size:8px;

    font-weight:900;

    line-height:1.5;

    letter-spacing:1.1px;
}


/* Name */

.tscn-management-card-body h3{
    margin:8px 0 5px;

    color:#242329;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:21px;

    line-height:1.2;
}


/* Qualification */

.tscn-management-card-body p{
    margin:0;

    color:#777;

    font-size:11px;

    font-weight:600;
}


/* Card line */

.tscn-management-card-line{
    width:38px;
    height:2px;

    margin-top:16px;

    background:#a91d39;

    transition:
        width .35s ease;
}

.tscn-management-card:hover
.tscn-management-card-line{
    width:70px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

    .tscn-management-section{
        padding:85px 0 95px;
    }

    .tscn-chairman-card{
        grid-template-columns:
            1fr 1fr;

        min-height:430px;
    }

    .tscn-chairman-visual{
        min-height:430px;
    }

    .tscn-chairman-visual img{
        height:455px;
    }

    .tscn-chairman-content{
        padding:40px;
    }

    .tscn-management-grid{
        grid-template-columns:
            repeat(2,1fr);

        max-width:760px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    .tscn-management-section{
        padding:70px 0 80px;
    }

    .tscn-management-intro{
        margin-bottom:38px;
    }

    .tscn-management-label{
        font-size:8px;
        letter-spacing:2px;
    }

    .tscn-management-intro h2{
        font-size:44px;

        letter-spacing:-1px;
    }

    .tscn-management-intro p{
        padding:0 10px;

        font-size:13px;

        line-height:1.75;
    }


    /* Chairman */

    .tscn-chairman-card{
        display:flex;
        flex-direction:column;

        max-width:500px;

        margin-bottom:45px;

        border-radius:25px;
    }

    .tscn-chairman-visual{
        min-height:390px;

        height:390px;
    }

    .tscn-chairman-visual img{
        height:410px;
    }

    .tscn-chairman-frame{
        width:270px;
        height:330px;

        top:28px;
    }

    .tscn-chairman-content{
        padding:32px 27px 38px;
    }

    .tscn-chairman-content h3{
        font-size:34px;
    }

    .tscn-chairman-content p{
        font-size:13px;

        line-height:1.8;
    }


    /* Grid */

    .tscn-management-grid{
        grid-template-columns:
            repeat(2,1fr);

        gap:15px;

        padding:0 10px;
    }

    .tscn-management-photo{
        height:245px;
    }

    .tscn-management-card-body{
        padding:18px 15px 20px;
    }

    .tscn-management-role{
        font-size:7px;
    }

    .tscn-management-card-body h3{
        font-size:17px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .tscn-management-section{
        padding:60px 0 70px;
    }

    .tscn-management-intro h2{
        font-size:38px;
    }

    .tscn-management-label{
        gap:7px;

        font-size:7px;

        letter-spacing:1.4px;
    }

    .tscn-management-label span{
        width:25px;
    }

    .tscn-management-label span:last-child{
        width:16px;
    }


    .tscn-chairman-visual{
        min-height:350px;
        height:350px;
    }

    .tscn-chairman-visual img{
        height:365px;
    }

    .tscn-chairman-content{
        padding:28px 22px 32px;
    }

    .tscn-chairman-content h3{
        font-size:30px;
    }

    .tscn-chairman-content p{
        font-size:12px;
    }


    .tscn-management-grid{
        grid-template-columns:1fr;

        max-width:350px;

        margin:auto;
    }

    .tscn-management-photo{
        height:330px;
    }

    .tscn-management-card-body{
        padding:20px;
    }

    .tscn-management-card-body h3{
        font-size:20px;
    }

}

 
 