.casestudy-page {
    width: var(--widthfull);
    min-height: 100vh;
    background: linear-gradient(166deg, #1e2635 0%, #263246 52%, #342939 100%);
}

.casestudy-section {
    width: var(--widthfull);
    position: var(--positionrelative);
    overflow: var(--visible);
    padding: 140px var(--eightypixels) 120px var(--eightypixels);
}

.casestudy-section::before {
    content: "";
    position: var(--positionabsolute);
    inset: var(--zero);
    background:
        radial-gradient(46% 36% at 12% 18%, rgba(152, 91, 118, 0.20) 0%, rgba(152, 91, 118, 0) 72%),
        radial-gradient(40% 34% at 88% 82%, rgba(72, 110, 156, 0.18) 0%, rgba(72, 110, 156, 0) 74%);
    pointer-events: var(--none);
    z-index: var(--auto);
}

.casestudy-inner {
    width: var(--widthfull);
    max-width: 1060px;
    margin: var(--marginzeroauto);
    position: var(--positionrelative);
    z-index: var(--one);
}

.casestudy-breadcrumb {
    display: var(--inlineflex);
    align-items: var(--aligncenter);
    gap: 8px;
    text-decoration: var(--none);
    font-family: var(--fontfamily);
    font-size: var(--thirteenpixels);
    font-weight: var(--weightmedium);
    color: rgba(235, 243, 251, 0.84);
    margin-bottom: var(--twentypixels);
}

.casestudy-breadcrumb:hover {
    color: rgba(245, 249, 255, 0.98);
}

.casestudy-hero {
    margin-bottom: var(--twelvepixels);
}

.casestudy-image {
    width: var(--widthfull);
    height: clamp(220px, 32vw, 340px);
    object-fit: cover;
    display: var(--displayblock);
    filter: saturate(95%) contrast(98%) brightness(0.90);
    border-radius: 22px;
    border: var(--onepixel) solid rgba(244, 248, 255, 0.22);
    box-shadow: 0 12px 28px rgba(7, 12, 22, 0.26);
    margin-bottom: var(--twentypixels);
}

.casestudy-head {
    padding: 4px 6px 4px 6px;
    margin-bottom: var(--twentyfourpixels);
}

.casestudy-kicker {
    margin: var(--zero);
    font-family: var(--fontfamily);
    font-size: var(--thirteenpixels);
    font-weight: var(--weightmedium);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(220, 232, 245, 0.78);
}

.casestudy-title {
    margin: var(--twelvepixels) 0 0 0;
    font-family: var(--fontfamily);
    font-size: var(--textsizepagetitle);
    font-weight: var(--weightmedium);
    letter-spacing: 0px;
    line-height: 1.2;
    color: rgba(245, 249, 255, 0.96);
}

.casestudy-subtitle {
    margin: var(--fortypixels) 0 0 0;
    font-family: var(--fontfamily);
    font-size: var(--textsizebodyregular);
    font-weight: var(--weightregular);
    line-height: 1.6;
    color: rgba(228, 236, 248, 0.88);
    max-width: 74ch;
}

.casestudy-card {
    margin-top: var(--thirtypixels);
    border-radius: 20px;
    border: var(--onepixel) solid rgba(244, 248, 255, 0.18);
    background: rgba(225, 235, 248, 0.08);
    box-shadow: 0 10px 24px rgba(7, 12, 22, 0.24);
    backdrop-filter: blur(8px) saturate(122%);
    -webkit-backdrop-filter: blur(8px) saturate(122%);
    padding: 20px;
}

.casestudy-block + .casestudy-block {
    margin-top: var(--twentypixels);
    padding-top: var(--sixteenpixels);
    border-top: var(--onepixel) solid rgba(245, 249, 255, 0.14);
}

.casestudy-heading {
    margin: var(--marginzero);
    font-family: var(--fontfamily);
    font-size: var(--nineteenpixels);
    font-weight: var(--weightmedium);
    line-height: 1.3;
    color: rgba(247, 250, 255, 0.96);
}

.casestudy-list {
    margin: var(--thirteenpixels) 0 0 0;
    padding-left: 20px;
}

.casestudy-list li {
    font-family: var(--fontfamily);
    font-size: var(--fifteenpixels);
    font-weight: var(--weightregular);
    line-height: 1.6;
    color: rgba(234, 241, 250, 0.9);
}

.casestudy-list li + li {
    margin-top: var(--fivepixels);
}

.casestudy-empty {
    text-align: var(--aligncenter);
}

.casestudy-empty .casestudy-subtitle {
    margin-left: var(--auto);
    margin-right: var(--auto);
}

@media (max-width: 1000px) {
    .casestudy-section {
        padding: var(--onehundredpixels) var(--fortypixels) var(--eightypixels) var(--fortypixels);
    }
}

@media (max-width: 768px) {
    .casestudy-section {
        padding: var(--eightypixels) var(--twentypixels);
    }

    .casestudy-head {
        padding: var(--twelvepixels) 2px 2px 2px;
        margin-bottom: var(--twentypixels);
    }

    .casestudy-card {
        padding: 16px 14px;
    }

    .casestudy-heading {
        font-size: var(--eighteenpixels);
    }

    .casestudy-list li {
        font-size: var(--fourteenpixels);
    }
}