.section {
      /* max-width: 1280px; */
      width: 100%;
      background: #001d3d;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: 80px 96px;
      gap: 32px;
      position: relative;
      padding-top: 200px;
    }

.qualified-therapist img {
    height: 100% !important;
}

    /* ══════════════════════════════════════
       LEFT – TEXT
    ══════════════════════════════════════ */
    .left {
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding-right: 40px;
    }

    .qualified-therapist .heading {
      font-size: clamp(28px, 4vw, 54px);
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -1.5px;
      color: #fff !important;
    }

    .qualified-therapist .body-copy {
      font-size: clamp(14px, 1.4vw, 17.5px);
      font-weight: 400;
      line-height: 1.78;
      color: #fff !important;
      max-width: 500px;
    }

    .qualified-therapist .qualified-therapist-btn {
      display: inline-block;
      background: #9ed09e;
      color: #fff !important;
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(13px, 1.2vw, 16px);
      font-weight: 600;
      padding: clamp(12px, 1.2vw, 17px) clamp(24px, 2.5vw, 38px);
      border-radius: 50px;
      text-decoration: none;
      align-self: flex-start;
      transition: background .2s, transform .15s;
      white-space: nowrap;
    }
    .qualified-therapist-btn:hover { background: #80c280; transform: translateY(-1px); }

    /* ══════════════════════════════════════
       RIGHT – COLLAGE
       Uses a CSS-variable scale factor so
       every card shrinks proportionally.
    ══════════════════════════════════════ */

    /*
      Base dimensions (desktop, scale=1):
        Container : 560 × 590
        Gap        : 14px

        c-center  : left=90,  top=56,  w=262, h=328
        c-tr      : right=0,  top=0,   w=154, h=154
        c-mr1     : right=0,  top=168, w=154, h=154
        c-mr2     : right=0,  top=336, w=154, h=182
        c-bl      : left=0,   bot=0,   w=164, h=168
        c-bc      : left=178, bot=0,   w=188, h=168

      Scale factors per breakpoint:
        ≥960px  → 1.00  (desktop)
        768-959 → 0.78  (tablet landscape / small desktop)
        520-767 → 0.60  (tablet portrait)
        <520    → stacked, collage at 0.52 scale
    */

    .right {
      --s: 1;                          /* scale factor, overridden per breakpoint */
      --gap: calc(14px * var(--s));

      position: relative;
      width:  calc(560px * var(--s));
      height: calc(590px * var(--s));
      flex-shrink: 0;
    }

    .photo {
      position: absolute;
      overflow: hidden;
      background: #c2b9b0;
      transition: transform .3s ease;
    }
    .photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }

    /* ── CARD POSITIONS & SIZES (all multiplied by --s) ── */

    .c-center {
      left:   calc(90px  * var(--s));
      top:    calc(56px  * var(--s));
      width:  calc(262px * var(--s));
      height: calc(328px * var(--s));
      border-radius: calc(140px * var(--s)) calc(36px * var(--s)) calc(36px * var(--s)) calc(36px * var(--s));
      z-index: 2;
    }

    .c-tr {
      right:  0;
      top:    0;
      width:  calc(154px * var(--s));
      height: calc(154px * var(--s));
      border-radius: calc(26px * var(--s));
      z-index: 3;
    }

    .c-mr1 {
      right:  0;
      top:    calc(168px * var(--s));
      width:  calc(154px * var(--s));
      height: calc(154px * var(--s));
      border-radius: calc(26px * var(--s));
      z-index: 3;
    }

    .c-mr2 {
      right:  0;
      top:    calc(336px * var(--s));
      width:  calc(154px * var(--s));
      height: calc(182px * var(--s));
      border-radius: calc(26px * var(--s)) calc(26px * var(--s)) calc(26px * var(--s)) calc(56px * var(--s));
      z-index: 3;
    }

    .c-bl {
      left:   0;
      bottom: 0;
      width:  calc(164px * var(--s));
      height: calc(168px * var(--s));
      border-radius: calc(26px * var(--s)) calc(56px * var(--s)) calc(26px * var(--s)) calc(26px * var(--s));
      z-index: 3;
    }

    .c-bc {
      left:   calc(178px * var(--s));
      bottom: 0;
      width:  calc(188px * var(--s));
      height: calc(168px * var(--s));
      border-radius: calc(56px * var(--s)) calc(26px * var(--s)) calc(26px * var(--s)) calc(26px * var(--s));
      z-index: 3;
    }

    /* ── Decorative SVGs scale with container ── */
    .deco { position: absolute; pointer-events: none; }

    .deco-ticks {
      top:  0;
      left: calc(4px * var(--s));
      width:  calc(80px * var(--s));
      height: calc(90px * var(--s));
      z-index: 10;
    }

    .deco-curl {
      bottom: calc(6px  * var(--s));
      right:  calc(-8px * var(--s));
      width:  calc(70px * var(--s));
      height: calc(70px * var(--s));
      z-index: 10;
    }

    /* ══════════════════════════════════════
       BREAKPOINTS
    ══════════════════════════════════════ */

    /* Tablet landscape – shrink collage to 78% */
    @media (max-width: 1100px) {
      .section { padding: 250px 48px 60px 48px; }
      .right { --s: 0.78; }
    }

    /* Tablet portrait – stack layout, collage at 60% */
    @media (max-width: 860px) {
      .section {
        grid-template-columns: 1fr;
        padding: 250px 40px 56px 40px;
        gap: 56px;
      }
      .left { padding-right: 0; }
      .right {
        --s: 0.60;
        margin: 0 auto;           /* centre the collage block */
      }
    }

    /* Large mobile – collage at 52% */
    @media (max-width: 640px) {
      .section { padding: 250px 20px 44px 20px; }
      .right { --s: 0.52; }
      .heading { letter-spacing: -0.8px; }
    }

    /* Small mobile – collage at 44% */
    @media (max-width: 480px) {
      .section { padding: 200px 16px 36px 16px; gap: 44px; }
      .right { --s: 0.44; }
    }

    /* Very small – collage at 38% */
    @media (max-width: 380px) {
      .right { --s: 0.38; }
    }