.ot-related-cases{
clear:both;
margin:46px 0 28px;
padding:32px;
border:1px solid #dce8ef;
border-radius:20px;
background:linear-gradient(145deg,#f7fbfd,#eef7fb);
box-shadow:0 16px 42px rgba(17,55,78,.08);
}
.ot-related-cases__head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:22px;
}
.ot-related-cases__eyebrow,
.ot-case-service-cta__eyebrow{
display:block;
margin-bottom:7px;
color:#1186c2;
font-size:13px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.ot-related-cases h2,
.ot-case-service-cta h2{
margin:0 0 8px;
color:#17354a;
font-size:clamp(25px,3vw,36px);
line-height:1.16;
}
.ot-related-cases__head p,
.ot-case-service-cta p{
margin:0;
color:#5c7080;
}
.ot-related-cases__all{
flex:0 0 auto;
padding:11px 16px;
border:1px solid #148fd0;
border-radius:999px;
color:#1179af;
font-weight:700;
text-decoration:none;
}
.ot-related-cases__grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.ot-related-case{
min-width:0;
overflow:hidden;
border-radius:15px;
background:#fff;
box-shadow:0 10px 28px rgba(24,58,80,.12);
transition:transform .2s ease,box-shadow .2s ease;
}
.ot-related-case:hover{
transform:translateY(-3px);
box-shadow:0 15px 34px rgba(24,58,80,.17);
}
.ot-related-case__link{
display:block;
height:100%;
color:inherit;
text-decoration:none;
}
.ot-related-case__media{
position:relative;
display:block;
aspect-ratio:16/10;
overflow:hidden;
background:#dceaf1;
}
.ot-related-case__media img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s ease;
}
.ot-related-case:hover .ot-related-case__media img{transform:scale(1.035)}
.ot-related-case__placeholder{
display:block;
width:100%;
height:100%;
background:linear-gradient(135deg,#b9d7e7,#5aa6cd);
}
.ot-related-case__badge{
position:absolute;
left:12px;
bottom:12px;
padding:6px 10px;
border-radius:999px;
color:#fff;
font-size:12px;
font-weight:800;
background:rgba(12,40,58,.82);
}
.ot-related-case__body{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:14px;
min-height:144px;
padding:18px;
}
.ot-related-case__body strong{
color:#17354a;
font-size:17px;
line-height:1.35;
}
.ot-related-case__more{
color:#1288c5;
font-weight:800;
}
.ot-case-service-cta{
clear:both;
margin:42px 0 28px;
padding:30px;
border-radius:18px;
color:#fff;
background:linear-gradient(135deg,#102f43,#0e6f9f);
box-shadow:0 16px 38px rgba(12,48,70,.2);
}
.ot-case-service-cta h2,
.ot-case-service-cta p{color:#fff}
.ot-case-service-cta__eyebrow{color:#8fd8ff}
.ot-case-service-cta__links{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:20px;
}
.ot-case-service-cta__links a{
display:inline-flex;
align-items:center;
gap:10px;
min-height:44px;
padding:10px 15px;
border:1px solid rgba(255,255,255,.35);
border-radius:999px;
color:#fff;
font-weight:700;
text-decoration:none;
background:rgba(255,255,255,.1);
}
.ot-case-service-cta__links a:hover,
.ot-case-service-cta__links a:focus-visible{background:rgba(255,255,255,.2)}
@media (max-width:900px){
.ot-related-cases__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
.ot-related-cases,
.ot-case-service-cta{
margin:32px -10px 22px;
padding:22px 18px;
border-radius:14px;
}
.ot-related-cases__head{display:block}
.ot-related-cases__all{display:inline-block;margin-top:16px}
.ot-related-cases__grid{grid-template-columns:1fr}
.ot-related-case__body{min-height:0}
.ot-case-service-cta__links{display:grid;grid-template-columns:1fr}
.ot-case-service-cta__links a{border-radius:12px}
}
@media (prefers-reduced-motion:reduce){
.ot-related-case,
.ot-related-case__media img{transition:none}
}