body{
font-family:'Inter', sans-serif;
margin:0;
background:#ECE7E1;
color:#111;
-webkit-font-smoothing:antialiased;
}

/* HERO */
.case-hero{
padding:170px 20px 110px;
background: linear-gradient(
  180deg,
  #05070f 0%,
  #0a0f1f 50%,
  #151925 100%
);
color:white;
text-align:center;
}

.case-hero h1{
font-size:54px;
max-width:920px;
margin:auto;
font-weight:600;
letter-spacing:-1px;
line-height:1.1;
}

/* HERO IMAGE */
.case-hero-image{
max-width:1000px;
margin:60px auto 80px;
padding:0 20px;
}

.case-hero{
padding:170px 20px 90px;
}

/* CONTAINER */
.case-container{
max-width:880px;
margin:auto;
padding:40px 28px 100px;
}

/* HIGHLIGHT CARD */
.case-highlight{
background:white;
border-radius:20px;
padding:48px;
box-shadow:0 20px 60px rgba(0,0,0,.08);
margin-bottom:80px;
}

.case-highlight-title{
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:#888;
margin-bottom:14px;
font-weight:600;
}

.case-highlight p{
font-size:22px;
line-height:1.7;
color:#111;
font-weight:500;
}

/* DESCRIPTION */
.case-description-title{
font-size:40px;
margin-bottom:24px;
letter-spacing:-1px;
font-weight:600;
}

.case-description{
font-size:19px;
line-height:1.9;
color:#444;
}

/* divider */
.case-container::after{
content:"";
display:block;
height:1px;
background:#ddd;
margin-top:90px;
}
/* ============================= */
/* RESPONSIVE CASE STUDY HERO */
/* ============================= */

@media (max-width: 1024px){

.case-hero{
padding:150px 20px 90px;
}

.case-hero h1{
font-size:42px;
max-width:700px;
}

.case-description-title{
font-size:34px;
}

.case-highlight p{
font-size:20px;
}

.case-description{
font-size:18px;
}

}


/* MOBILE */
@media (max-width: 640px){

.case-hero{
padding:130px 20px 70px;
}

.case-hero h1{
font-size: clamp(28px, 6vw, 56px);
line-height: 1.15;
letter-spacing: -0.8px;
}
.case-hero-image{
margin:20px auto 60px;
}

.case-highlight{
padding:28px;
}

.case-highlight p{
font-size:18px;
}

.case-description-title{
font-size:28px;
}

.case-description{
font-size:17px;
line-height:1.8;
}

.case-container{
padding:20px 22px 80px;
}

}


/* HERO BACKGROUND IMAGE */

.blog-hero-bg{
position:relative;
background-size:cover;
background-position:center;
color:white;
padding:190px 20px 130px;
text-align:center;
}

/* overlay layer */
.blog-hero-bg::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(rgba(6,10,20,.78), rgba(6,10,20,.78));
z-index:0;
}

.blog-hero-bg > *{
position:relative;
z-index:1;
}
.blog-hero-bg h1{
font-size:clamp(34px,5vw,56px);
max-width:900px;
margin:auto;
line-height:1.15;
letter-spacing:-1px;
text-wrap:balance;
}

.blog-meta{
margin-top:18px;
opacity:.85;
font-size:15px;
}

/* ARTICLE WRAP */

.blog-content-wrap{
background:#ECE7E1;
padding-top:90px;
}

/* ARTICLE */

.blog-content{
max-width:760px;
margin:auto;
padding:0 24px 120px;
font-size:20px;
line-height:1.9;
color:#333;
}

.blog-content h2{
font-size:32px;
margin-top:60px;
margin-bottom:18px;
letter-spacing:-0.5px;
}

.blog-content p{
margin-bottom:26px;
}

.blog-quote{
border-left:4px solid #111;
padding-left:22px;
font-size:22px;
margin:50px 0;
font-weight:500;
color:#111;
}

/* RESPONSIVE */

@media(max-width:640px){

.blog-hero-bg{
padding:150px 20px 90px;
}

.blog-content{
font-size:18px;
}

.blog-content h2{
font-size:26px;
}

}