/* Container */
    .cases-page .wrap {
        max-width: 1280px;
        margin-inline: auto;
        padding: 0 16px
    }

    /* BREADCRUMB */
    .breadcrumb {
        margin: 12px 0 8px
    }

    .breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
        color: var(--muted)
    }

    .breadcrumb li {
        display: flex;
        align-items: center
    }

    .breadcrumb li+li::before {
        content: "›";
        margin: 0 6px;
        color: var(--muted);
        opacity: .7
    }

    .breadcrumb a {
        text-decoration: none
    }

    /* TITLE + META */
    .post-header {
        margin: 8px 0 18px;
        text-align: center
    }

    .post-title {
        font-size: clamp(26px, 3.2vw, 40px);
        color: var(--text);
        margin: .5em 0 .2em
    }

    .post-subtitle {
        max-width: 820px;
        margin: 0 auto
    }

    .post-meta {
        color: var(--muted);
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap
    }

    .post-meta .dot {
        opacity: .6
    }

    /* LAYOUT */
    .post-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px; 
        gap: 28px;
        align-items: start;
        margin: 10px 0 36px
    }

    @media (max-width: 980px) {
        .post-layout {
            grid-template-columns: 1fr
        }

        .post-sidebar {
            display: none
        }

        /* hide form on tablet & mobile */
    }

    /* MAIN */
    .post-main {
        padding: 22px
    }

    .post-body>*:first-child {
        margin-top: 0
    }

    .post-body h2 {
        margin-top: 1.2em
    }

    .post-body p {
        text-align: justify;
    }

    .post-body img {
        border-radius: 12px
    }

    .post-body blockquote {
        border-left: 4px solid var(--bg);
        padding-left: 14px;
        color: #45556e
    }

    /* SIDEBAR (sticky on desktop) */
    .post-sidebar .sidebar-title {
        margin: 0 0 10px
    }

    .sticky-card {
        position: sticky;
        top: 88px
    }

    .contact-form .field {
        margin-bottom: 12px
    }

    .contact-form .actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap
    }

    /* RECENT GRID */
    .recent-blogs {
        margin: 8px 0 36px
    }

    .recent-title {
        text-align: center;
        margin: 0 0 14px;
        font-size: 1.8rem;
    }

    .recent-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px
    }

    @media (max-width: 700px) {
        .recent-grid {
            grid-template-columns: 1fr
        }
    }

    .recent-card .title {
        margin: 0 0 .4rem
    }

    .recent-card .title a {
        text-decoration: none
    }

    .recent-card .excerpt {
        margin: .4rem 0 .6rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .recent-card .meta {
        color: var(--muted);
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center
    }