.cta-band {
  background: #005E81;
  color: #fff;
  text-align: center;
  padding: 72px 24px;
  font-family: 'Roboto', sans-serif;
}

.cta-band--orange {
  background: linear-gradient(0deg, #F7931D -34.46%, #A04D0B 51.2%, #A04D0B 100%);
}

.cta-band__eyebrow {
  font-size: 15px;
  font-weight: 400;
  margin: 0 0 10px;
  opacity: 0.9;
}

.cta-band__heading {
  font-family: 'Crimson Text', Georgia, serif;
  font-weight: 500;
  font-size: 60px;
  line-height: 1.2;
  margin: 0 0 14px;
}

.cta-band__body {
  font-size: 16px;
  margin: 0 0 28px;
}

.cta-band__button a {
  display: inline-block;
  background: #fff;
  color: #005E81;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  padding: 11px 28px;
  transition: background 0.25s ease, color 0.25s ease;
}

.cta-band__button a:hover {
  background: #003346;
  color: #fff;
}

/* ===== Split variant (Funding: Application Resources / Contact Us) ===== */
.cta-band__split,
.cta-band__split *,
.cta-band__split *::before,
.cta-band__split *::after {
  box-sizing: border-box;
}

.cta-band__split {
  display: flex;
  align-items: center;
  gap: 140px;
  max-width: 1140px;
  /* match the container value you used on the accordion */
  margin: 0 auto;
  padding: 28px 20px;
}

.cta-band__split-left {
  flex: 0 0 40%;
  text-align: center;
}

.cta-band__split-right {
  text-align: left;
}

.cta-band__heading--split {
  margin: 0;
}

.cta-band__subheading {
  margin: 0 0 20px;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}

.cta-band__body--split {
  margin: 0 0 28px;
  color: #fff;
}

.cta-band__body--split a {
  color: #fff;
  font-weight: 700;
}

/* Backgrounds + the single big rounded corner */
.cta-band--split_orange {
  margin-top: 72px;
  background: linear-gradient(0deg, #F7931D -34.46%, #A04D0B 51.2%, #A04D0B 100%);
  /* Figma */
  border-top-left-radius: 48px;
  /* audit: radius value still a guess */
}

.cta-band--split_teal {
  background: #005E81;
}

.program-cards--light ~ .cta-band--split_orange {
  margin-top: 0;
}

/* ===== Orange inset (UTeams "Application Process") — rounded orange box
   sitting inset on the teal page band. The orange is painted by a ::before
   layer (same trick as the contact-cards gradient) so the section can own
   the surrounding teal without needing an extra wrapper div. ===== */
.cta-band--orange_inset {
  position: relative;
  background: #005E81;
  /* the teal around the box */
  padding: 88px 88px 104px;
  /* 40px outer gap + 48px inner breathing room */
  text-align: center;
}

.cta-band--orange_inset::before {
  content: "";
  position: absolute;
  inset: 40px 40px 56px;
  /* the outer gap only → defines the orange box */
  background: linear-gradient(0deg, #F7931D -34.46%, #A04D0B 51.2%, #A04D0B 100%);
  /* Figma */
  border-radius: 16px;
  z-index: 0;
}

/* Content above the paint layer */
.cta-band--orange_inset>* {
  position: relative;
  z-index: 1;
}

.cta-band--orange_inset .cta-band__body a {
  color: #fff;
  text-decoration: underline;
}

/* ===== Plain (employee page intro) — centered copy on white ===== */
.cta-band--plain {
  background: #fff;
  padding: 64px 20px 48px;
  text-align: center;
}
.cta-band--plain .cta-band__heading {
  margin: 0 0 16px;
  font-family: 'Crimson Text', serif;
  font-size: 44px;
  font-weight: 400;
  color: #2E2E2E;
}
.cta-band--plain .cta-band__body {
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}
.cta-band--plain .cta-band__body p { margin: 0 0 14px; }

@media (max-width: 767px) {
  .cta-band--plain { padding: 40px 20px 32px; }
  .cta-band--plain .cta-band__heading { font-size: 30px; }
  .cta-band--plain .cta-band__body { font-size: 15px; }
}

@media (max-width: 767px) {
  .cta-band--orange_inset {
    padding: 52px 36px 60px;
  }

  .cta-band--orange_inset::before {
    inset: 20px 20px 28px;
  }
}

@media (max-width: 767px) {
  .cta-band {
    padding: 52px 20px;
  }

    .cta-band__eyebrow {
      font-size: 16px;
      margin: 0 0 10px;
      opacity: 0.9;
    }

  .cta-band__heading {
    font-size: 40px;
  }

    .cta-band__body {
      font-size: 14px;
      line-height: 1.8;
    }

    .cta-band__button a {
      font-size: 14px;

    }

        .cta-band__split {
          flex-direction: column;
          align-items: stretch;
          gap: 16px;
          padding: 28px 20px;
        }

        .cta-band__split-left {
          flex: none;
          width: 100%;
        }

        .cta-band__split-right {
          text-align: center;
          /* mobile recentres; desktop stays left */
        }

        .cta-band__heading--split {
          font-size: 40px;
          /* audit: verify vs Figma mobile frame */
        }

        .cta-band__subheading {
          margin: 0 0 12px;
          font-size: 16px;
        }

        .cta-band__body--split {
          margin: 0 0 16px;
          font-size: 14px;
        }

        .cta-band--split_orange {
          margin-top: 40px;
        }

        .program-cards--light~.cta-band--split_orange {
          margin-top: 0;
        }
}