.case-study-hero{

    padding:170px 7% 80px;

    background:#fff;

}

.case-container{

    max-width:1450px;

    margin:auto;

}

.case-breadcrumb{

    display:flex;

    gap:10px;

    font-size:14px;

    color:#777;

    margin-bottom:20px;

}

.case-breadcrumb a{

    text-decoration:none;

    color:#777;

}

.case-category{

    display:inline-block;

    color:#FF6633;

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:18px;

}

.case-study-hero h1{

    font-size:58px;

    line-height:1.15;

    max-width:850px;

    margin-bottom:60px;

}

.case-hero-grid{

    display:grid;

    grid-template-columns:330px 1fr;

    gap:25px;

}

.case-stats{

    display:flex;

    flex-direction:column;

}

.case-stat-card{

    border:1px solid #e8e8e8;

    padding:32px;

}

.case-stat-card h2{

    font-size:44px;

    margin-bottom:12px;

}

.case-stat-card p{

    font-size:16px;

    color:#666;

    line-height:1.8;

}

.case-hero-image img{

    width:100%;

    display:block;

}


/*=========================================
        SHOWCASE
=========================================*/

.ts-showcase{

    padding:60px 7%;

}

.ts-container{

    max-width:1450px;

    margin:auto;

}

.ts-showcase-image{

    overflow:hidden;

    border-radius:18px;

}

.ts-showcase-image img{

    width:100%;

    display:block;

}

/*=========================================
        GALLERY
=========================================*/

.ts-gallery{

    padding:0 7% 90px;

}

.ts-gallery-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.ts-gallery-item{

    overflow:hidden;

    border-radius:18px;

}

.ts-gallery-item img{

    width:100%;

    display:block;

    transition:.45s;

}

.ts-gallery-item:hover img{

    transform:scale(1.05);

}

/*=========================================
        OVERVIEW
=========================================*/

.ts-overview{

    padding:90px 7%;

}

.ts-overview-grid{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:80px;

}

.ts-overview-title span{

    font-size:13px;

    letter-spacing:2px;

    color:#888;

}

.ts-overview-content p{

    font-size:20px;

    line-height:2;

    color:#555;

    margin-bottom:28px;

}

.ts-info-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:55px;

}

.ts-info span{

    display:block;

    color:#888;

    font-size:15px;

    margin-bottom:10px;

}

.ts-info h4{

    font-size:21px;

    color:#111;

}

/*=========================================
        PROBLEM & SOLUTION
=========================================*/

.ts-problem,
.ts-solution{

    padding:120px 7%;

}

.ts-section-grid{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:90px;

    align-items:start;

}

.ts-left span{

    display:block;

    font-size:14px;

    color:#8a8a8a;

    letter-spacing:2px;

    margin-bottom:20px;

}

.ts-left h2{

    font-size:48px;

    line-height:1.15;

    color:#111;

}

.ts-right>p{

    font-size:20px;

    line-height:2;

    color:#555;

    margin-bottom:50px;

}

.ts-feature-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.ts-feature{

    padding-top:22px;

    border-top:2px solid #111;

}

.ts-feature h4{

    font-size:24px;

    margin-bottom:15px;

    color:#111;

}

.ts-feature p{

    font-size:17px;

    line-height:1.8;

    color:#666;

}
/*=========================================
        PROCESS
=========================================*/

.ts-process{

    padding:120px 7%;

    background:#fafafa;

}

.ts-process-head{

    max-width:720px;

    margin-bottom:70px;

}

.ts-process-head span{

    color:#888;

    letter-spacing:2px;

    font-size:14px;

}

.ts-process-head h2{

    font-size:56px;

    margin:20px 0;

    color:#111;

}

.ts-process-head p{

    font-size:20px;

    line-height:2;

    color:#666;

}

/*====================*/

.ts-process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.ts-process-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.ts-process-card:hover{

    transform:translateY(-8px);

}

.process-no{

    display:inline-flex;

    width:55px;

    height:55px;

    border-radius:50%;

    background:#ff6633;

    color:#fff;

    justify-content:center;

    align-items:center;

    font-weight:700;

    margin-bottom:25px;

}

.ts-process-card h3{

    font-size:28px;

    margin-bottom:18px;

}

.ts-process-card p{

    font-size:17px;

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.ts-process-card ul{

    padding-left:18px;

}

.ts-process-card li{

    margin-bottom:12px;

    color:#555;

}

/*=========================================
        RESEARCH
=========================================*/

.ts-research{

    padding:120px 7% 70px;

}

.ts-research h2{

    font-size:52px;

    margin-bottom:25px;

}

/*=========================================
        ARTIFACTS
=========================================*/

.ts-artifacts{

    padding:0 7% 120px;

}

.ts-artifacts-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.ts-artifacts-grid img{

    width:100%;

    border-radius:20px;

    display:block;

    transition:.4s;

}

.ts-artifacts-grid img:hover{

    transform:scale(1.03);

}