@charset "UTF-8";
/* Single job posting — rebuilt alongside the About us / Careers redesign, on
   the same type scale and palette as partials/templates/sections/*. There is
   no Figma frame for this page, so it follows the tokens the redesign uses. */
.job_page {
  background: #ffffff;
  padding: 64px 0 80px;
}
.job_page * {
  color: inherit;
}
.job_page__inner, .job_page__body--wide {
  max-width: 800px;
}
.job_page {
  /* ---- Header ---- */
}
.job_page__back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: #4a3bbe;
}
.job_page__back:hover {
  color: #614efa;
}
.job_page__title {
  margin: 0 0 20px;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #1a1a22;
}
.job_page__locations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
.job_page__location {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid #e7e7ea;
  border-radius: 999px;
  background: #f7f7f8;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #434351;
}
.job_page {
  /* ---- Rich-text body ----
     Fields come out of ACF as raw HTML, so the element selectors here carry
     the styling rather than utility classes. */
  /* 16/28 for the prose, as the previous version had — 1.5 reads cramped
     over descriptions this long. Headings keep their tighter ratios. */
}
.job_page__body {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: #434351;
  /* Section headings match the previous version's 26px. The rich-text
     fields carry their own <h5> subheadings ("Especially Valuable",
     "What Success Looks Like"), which the old template rendered at the
     same 26px — so there was no hierarchy between them. Dropping the
     nested levels a step gives 40 -> 26 -> 20 -> 16 down the page. */
}
.job_page__body h2 {
  margin: 44px 0 16px;
  font-size: 26px;
  line-height: 36px;
  font-weight: 700;
  color: #1a1a22;
}
.job_page__body h3,
.job_page__body h4,
.job_page__body h5,
.job_page__body h6 {
  margin: 32px 0 8px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #1a1a22;
}
.job_page__body p {
  margin: 0 0 16px;
}
.job_page__body ul,
.job_page__body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.job_page__body li {
  margin-bottom: 8px;
  line-height: 28px;
}
.job_page__body a {
  font-weight: 500;
  color: #4a3bbe;
  text-decoration: underline;
}
.job_page__body a:hover {
  color: #614efa;
}
.job_page__body strong {
  font-weight: 600;
  color: #23232e;
}
.job_page__body > :first-child {
  margin-top: 0;
}
.job_page__summary {
  margin-bottom: 8px;
}
.job_page__summary > :last-child {
  margin-bottom: 0;
}
.job_page {
  /* ---- Apply ---- */
}
.job_page__cta_holder {
  margin-top: 40px;
}
.job_page__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  background: #614efa;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #ffffff;
  transition: background-color 0.2s ease;
}
.job_page__cta:hover {
  background: #4a3bbe;
  color: #ffffff;
}
.job_page {
  /* ---- Referral note ---- */
}
.job_page__referral {
  margin-top: 56px;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(159, 225, 203, 0.38) 0%, rgba(111, 176, 221, 0.26) 50%, rgba(175, 169, 236, 0.48) 100%), linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
}
.job_page__referral_title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  color: #1a1a22;
}
.job_page__referral_desc {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: #23232e;
}
.job_page__referral_link {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #4a3bbe;
}
.job_page__referral_link:hover {
  color: #614efa;
}
.job_page {
  /* ---- Referral landing: eligible role list (mirrors the role-list section) ---- */
}
.job_page__roles {
  margin-top: 48px;
  border-top: 1px solid #e7e7ea;
}
.job_page__role {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid #e7e7ea;
}
.job_page__role:hover .job_page__role_title {
  color: #4a3bbe;
}
.job_page__role:hover .job_page__role_arrow {
  transform: translateX(4px);
}
.job_page__role_title {
  flex: 1 1 0;
  min-width: 0;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #1a1a22;
  transition: color 0.2s ease;
}
.job_page__role_meta {
  flex: 0 0 auto;
  text-align: right;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #434351;
}
.job_page__role_arrow {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}
.job_page__role_arrow img {
  display: block;
  width: 100%;
  height: 100%;
}
.job_page {
  /* ---- Responsive ---- */
}
@media screen and (max-width: 767px) {
  .job_page {
    padding: 40px 0 56px;
  }
  .job_page__title {
    font-size: 30px;
    line-height: 38px;
  }
  .job_page__locations {
    margin-bottom: 28px;
  }
  .job_page__body h2 {
    margin-top: 32px;
    font-size: 22px;
    line-height: 30px;
  }
  .job_page__body h3, .job_page__body h4, .job_page__body h5, .job_page__body h6 {
    font-size: 18px;
    line-height: 28px;
  }
  .job_page__referral {
    padding: 24px;
  }
  .job_page__role {
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  .job_page__role_title {
    flex: 1 1 100%;
    font-size: 18px;
    line-height: 28px;
  }
  .job_page__role_meta {
    flex: 1 1 0;
    text-align: left;
  }
}

/* Mobile/tablet download banner clearance — see the note in
   partials/templates/sections/horizon-hero/css/horizon-hero.scss. The job page
   is the first section on its own template, so it needs the same offset. */
@media screen and (max-width: 1281px) {
  body.mobile-banner .job_page {
    margin-top: 61px;
  }
}