.industry-case-page {
    --case-navy: #123859;
    --case-blue: rgba(16, 54, 94, .84);
    overflow: hidden;
    background: #f7f9fa;
}

.industry-case-section {
    padding: 145px 0 125px;
}

.industry-case-heading {
    margin-bottom: 55px;
}

.industry-case-heading .joi_hint {
    margin-bottom: 18px;
}

.industry-case-heading > p {
    max-width: 650px;
    margin: 0;
    color: #71808c;
    font-size: 14px;
    line-height: 1.9;
}

.industry-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    background: #e4e9ec;
    box-shadow: 0 24px 60px rgba(18, 56, 89, .1);
}

.industry-case-card {
    position: relative;
    display: block;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    background: #dce4e8;
    isolation: isolate;
}

.industry-case-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2, .7, .2, 1), filter .45s ease;
}

.industry-case-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
    color: #fff;
    background: var(--case-blue);
    opacity: 0;
    transition: opacity .38s ease;
}

.industry-case-mask::before,
.industry-case-mask::after {
    content: "";
    position: absolute;
    right: 24px;
    left: 24px;
    height: 1px;
    background: rgba(255, 255, 255, .32);
    transform: scaleX(0);
    transition: transform .45s ease .08s;
}

.industry-case-mask::before { top: 22px; }
.industry-case-mask::after { bottom: 22px; }

.industry-case-mask strong {
    max-width: 92%;
    font-size: clamp(16px, 1.3vw, 21px);
    font-weight: 400;
    line-height: 1.75;
    text-align: center;
    letter-spacing: .025em;
    transform: translateY(13px);
    transition: transform .42s ease;
}

.industry-case-mask i {
    position: absolute;
    right: 29px;
    bottom: 27px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-style: normal;
    opacity: 0;
    transform: translate(-8px, 8px);
    transition: opacity .35s ease .12s, transform .35s ease .12s;
}

.industry-case-card:hover img,
.industry-case-card:focus-visible img {
    filter: saturate(.88) contrast(1.03);
    transform: scale(1.065);
}

.industry-case-card:hover .industry-case-mask,
.industry-case-card:focus-visible .industry-case-mask {
    opacity: 1;
}

.industry-case-card:hover .industry-case-mask::before,
.industry-case-card:hover .industry-case-mask::after,
.industry-case-card:focus-visible .industry-case-mask::before,
.industry-case-card:focus-visible .industry-case-mask::after {
    transform: scaleX(1);
}

.industry-case-card:hover .industry-case-mask strong,
.industry-case-card:focus-visible .industry-case-mask strong {
    transform: translateY(0);
}

.industry-case-card:hover .industry-case-mask i,
.industry-case-card:focus-visible .industry-case-mask i {
    opacity: 1;
    transform: translate(0, 0);
}

.industry-case-card:focus-visible {
    z-index: 2;
    outline: 3px solid #55b3bd;
    outline-offset: -3px;
}

.industry-case-page .page_case { margin-top: 58px; }

.industry-case-page .text-center {
    padding: 80px 20px;
    color: #8a969f;
    text-align: center;
}

@media (max-width: 900px) {
    .industry-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .industry-case-section { padding: 105px 0 85px; }
    .industry-case-heading { margin-bottom: 35px; }
    .industry-case-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        background: transparent;
        box-shadow: none;
    }
    .industry-case-card {
        aspect-ratio: 5 / 3.25;
        box-shadow: 0 10px 24px rgba(18, 56, 89, .09);
    }
    .industry-case-mask {
        align-items: flex-end;
        justify-content: flex-start;
        padding: 55px 22px 20px;
        background: linear-gradient(180deg, transparent 25%, rgba(10, 39, 65, .82) 100%);
        opacity: 1;
    }
    .industry-case-mask::before,
    .industry-case-mask::after,
    .industry-case-mask i { display: none; }
    .industry-case-mask strong {
        max-width: 100%;
        font-size: 16px;
        text-align: left;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .industry-case-card img,
    .industry-case-mask,
    .industry-case-mask::before,
    .industry-case-mask::after,
    .industry-case-mask strong,
    .industry-case-mask i { transition: none; }
}