/* MiQ Case Studies Listing — image-free placeholders, responsive */
    .case-studies-page {
        --miq-blue: #0d3b66;
        --miq-orange: #e67e22;
        --ink: #0f172a;
        --muted: #64748b;
        --card: #ffffff;
        --ring: #e6eef8;
        background: #f6f9fc;
        color: var(--ink);
        font: 16px/1.6;
          font-family: "Poppins", sans-serif;

    }

    .case-studies-page .wrap {
        max-width: 1120px;
        margin-inline: auto;
        padding: 16px;
    }

    .page-title {
        font-size: clamp(24px, 2.4vw, 34px);
        color: var(--miq-blue);
        font-weight: 800;
        margin: 12px 0 14px;
        text-align: center
    }

    /* Cards */
    .card {
        display: block;
        background: var(--card);
        border-radius: 16px;
        box-shadow: 0 2px 0 rgba(13, 59, 102, .02), 0 8px 24px rgba(13, 59, 102, .08);
        overflow: hidden;
        border: 1px solid var(--ring);
    }

    .card .cover {
        display: block;
        width: 100%;
        aspect-ratio: 16/9;
        background:
            radial-gradient(80% 120% at 20% 0%, rgba(230, 126, 34, .25), transparent 60%),
            linear-gradient(135deg, rgba(13, 59, 102, .15), rgba(13, 59, 102, .05));
    }

    .card .content {
        padding: 14px 16px 16px
    }

    .card .title {
        margin: 0 0 6px;
        line-height: 1.25
    }

    .card .title a {
        text-decoration: none;
        color: var(--miq-blue);
    }

    .card .title a:hover {
        color: var(--miq-blue)
    }

    .card .excerpt {
        margin: 0 0 10px;
        color: var(--muted);
        text-align: justify;

    }

    .card .meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        color: var(--miq-orange);
        font-size: 13px
    }

    /* HERO layout */
    .cases-hero {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
        margin-bottom: 24px
    }

    .card.hero .title {
        font-size: clamp(20px, 2.1vw, 28px);
        font-weight: 800
    }

    .card.hero .excerpt {
        font-size: 15px;
        text-align: justify;
    }

    .hero-side {
        display: grid;
        gap: 18px
    }

    .card.side .title {
        font-size: 18px;
        font-weight: 800
    }

    /* LIST layout */
    .cases-list {
        display: grid;
        gap: 16px
    }

    .card.list .title {
        font-size: 18px;
        font-weight: 800
    }
    
    /* The cover area keeps its size; we now place an <img> inside */
    .card.hero .cover,
    .card.side .cover {
      display: block;
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      /* Remove/override any gradient background here if you had one */
      background: none;
    }
    
    /* Image fills the frame and crops nicely */
    .card.hero .cover img,
    .card.side .cover img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;   /* critical for replacing gradient */
    }

    /* Load more */
    .load-more-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: center;
        margin: 22px 0 36px
    }

    .btn {
        appearance: none;
        border: 0;
        cursor: pointer;
        border-radius: 999px;
        padding: 10px 16px;
        font-weight: 700;
        background: var(--miq-blue);
        color: #fff;
        box-shadow: 0 3px 12px rgba(13, 59, 102, .25);
    }

    .btn:disabled {
        opacity: .6;
        cursor: not-allowed
    }

    .muted {
        color: var(--muted);
        font-size: 13px
    }

    /* Responsive */
    @media (max-width:900px) {
        .cases-hero {
            grid-template-columns: 1fr
        }
    }