/* ===== Full-width Hero Image ===== */
    .joinus-image {
      display: flex;
      align-items: flex-start;
      margin-top: calc(var(--header-height) + 12px);
    }
    .joinus-image img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* ===== TextBlock Section ===== */
    .joinus-textblock {
      background-color: var(--color-surface);
      padding-top: 46px;
      padding-bottom: 46px;
    }
    @media (min-width: 992px) {
      .joinus-textblock {
        padding-top: 68px;
        padding-bottom: 68px;
      }
    }

    /* ===== JoinUs Section ===== */
    .joinus-section {
      background-color: var(--color-surface);
      padding-top: 0;
      padding-bottom: 40px;
    }
    @media (min-width: 992px) {
      .joinus-section {
        padding-bottom: 56px;
      }
    }

    /* ===== Container (Bootstrap-like) ===== */
    .joinus-container {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    @media (min-width: 576px) { .joinus-container { max-width: 540px; } }
    @media (min-width: 768px) { .joinus-container { max-width: 720px; } }
    @media (min-width: 992px) { .joinus-container { max-width: 960px; } }
    @media (min-width: 1200px) { .joinus-container { max-width: 960px; } }
    @media (min-width: 1400px) { .joinus-container { max-width: 1140px; } }

    /* ===== Text Content ===== */
    .joinus-text h1 {
      font-size: 32px;
      font-weight: var(--font-weight-bold);
      line-height: 1.2;
      margin-top: 0;
      margin-bottom: 16px;
    }
    @media (min-width: 992px) {
      .joinus-text h1 {
        font-size: 48px;
      }
    }
    .joinus-text p {
      font-size: 18px;
      line-height: 22px;
      margin-bottom: 16px;
    }
    .joinus-text p:last-child {
      margin-bottom: 0;
    }
    .joinus-text a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 4px;
    }