/* Talent Acquisition Solutions tabs on the Recruitment Process Outsourcing page. */
.recruitment-process-outsourcing-page .thc-c-00fe9cdd926:has(.rpo-solutions) {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.recruitment-process-outsourcing-page .thc-c-00fe9cdd926:has(.rpo-solutions) > div,
.recruitment-process-outsourcing-page .thc-c-00fe9cdd926:has(.rpo-solutions) > div > div {
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.recruitment-process-outsourcing-page .rpo-solutions {
  --rpo-green: #26c9a8;
  --rpo-green-dark: #0d7968;
  --rpo-orange: #ff6955;
  --rpo-ink: #373737;
  --rpo-line: #cfe5df;
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: 24px;
}

.recruitment-process-outsourcing-page .rpo-solutions__nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  /* The four tabs are wider than the rail at every breakpoint, so the row
     always scrolls. Centring it would push the first tab past the left edge
     where scrollLeft cannot reach, so align from the start instead. The
     imported theme centres this list through a more specific selector, so
     this one has to be marked important to win. */
  justify-content: flex-start !important;
  gap: clamp(22px, 4.25vw, 62px);
  width: 100%;
  margin: 0 0 38px !important;
  padding: 0 16px 14px !important;
  border-bottom: 1px solid #a9a9a9;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}

.recruitment-process-outsourcing-page .rpo-solutions__nav::-webkit-scrollbar {
  display: none;
}

.recruitment-process-outsourcing-page .rpo-solutions__nav li {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: center;
  white-space: nowrap;
}

.recruitment-process-outsourcing-page .rpo-solutions__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 0;
  color: #9d9d9d !important;
  font-size: clamp(17px, 1.7vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 180ms ease;
}

.recruitment-process-outsourcing-page .rpo-solutions__nav li.is-active a,
.recruitment-process-outsourcing-page .rpo-solutions__nav li[aria-selected="true"] a,
.recruitment-process-outsourcing-page .rpo-solutions__nav a[aria-selected="true"] {
  color: var(--rpo-orange) !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__panel {
  width: 100%;
}

.recruitment-process-outsourcing-page .rpo-solutions__panel[hidden] {
  display: none !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__panel.is-active {
  display: block !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 426px) !important;
  align-items: center !important;
  gap: clamp(26px, 4vw, 58px) !important;
  width: 100% !important;
  min-height: 340px;
  margin: 0 !important;
  padding: 0 30px 36px !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__summary::before,
.recruitment-process-outsourcing-page .rpo-solutions__summary::after {
  display: none !important;
  content: none !important;
}

.recruitment-process-outsourcing-page .rpo-solutions .rpo-solutions__summary > .thc-c-dc1cfe976a1 {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  flex-basis: auto !important;
  justify-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

.recruitment-process-outsourcing-page .rpo-solutions .rpo-solutions__summary > .thc-c-dc1cfe976a1:last-child {
  align-items: center;
}

.recruitment-process-outsourcing-page .rpo-solutions__summary > div > div {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__summary h2 {
  margin: 0 0 30px !important;
  color: var(--rpo-ink);
  font-size: clamp(28px, 2.8vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__summary p,
.recruitment-process-outsourcing-page .rpo-solutions__summary .thc-c-03a3825e5c2 {
  color: var(--rpo-ink);
  font-size: clamp(17px, 1.45vw, 20px) !important;
  line-height: 1.55 !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__summary .thc-c-28403b6fb15 {
  display: block;
  width: 100% !important;
  max-width: 426px !important;
  margin-inline: auto;
}

.recruitment-process-outsourcing-page .rpo-solutions__summary img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 426px !important;
  aspect-ratio: 426 / 447;
  margin-inline: auto;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  image-rendering: auto;
}

.recruitment-process-outsourcing-page .rpo-solutions__reveal {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 28px !important;
  padding: 10px 30px !important;
  border: 2px solid var(--rpo-green) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--rpo-green-dark) !important;
  font: inherit;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  line-height: 1.1 !important;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.recruitment-process-outsourcing-page .rpo-solutions__reveal:hover,
.recruitment-process-outsourcing-page .rpo-solutions__reveal:focus-visible,
.recruitment-process-outsourcing-page .rpo-solutions__reveal[aria-expanded="true"] {
  border-color: var(--rpo-orange) !important;
  background: var(--rpo-orange) !important;
  color: #fff !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__reveal:focus-visible {
  outline: 3px solid rgba(255, 105, 85, .3);
  outline-offset: 3px;
}

.recruitment-process-outsourcing-page .rpo-solutions__details[hidden] {
  display: none !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__details:not([hidden]) {
  display: block !important;
  margin: 0 0 28px !important;
  padding: 0 30px !important;
  animation: rpo-details-enter 360ms cubic-bezier(.2, .75, .25, 1) both;
}

.recruitment-process-outsourcing-page .rpo-solutions__details > div {
  width: 100% !important;
  margin: 0 !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__details > div > div {
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(22px, 2.8vw, 36px) !important;
  border: 1px solid var(--rpo-line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(20, 83, 72, .09);
}

.recruitment-process-outsourcing-page .rpo-solutions__details h5 {
  margin: 0 0 18px !important;
  color: var(--rpo-green-dark) !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__details .thc-c-6084c89fcac {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 !important;
}

/* The imported theme leaves each detail column at its old percentage width,
   even after the content is placed in a two-column grid. Let every tab's
   columns fill their grid tracks so copy has the full available line length. */
.recruitment-process-outsourcing-page .rpo-solutions__details .thc-c-6084c89fcac > .thc-c-ab5f5b79e67 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 18px 0 0 !important;
  box-sizing: border-box;
}

.recruitment-process-outsourcing-page .rpo-solutions__details .thc-c-6084c89fcac > .thc-c-ab5f5b79e67 + .thc-c-ab5f5b79e67 {
  padding: 0 0 0 18px !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__details .thc-c-6084c89fcac > .thc-c-adfc2b9ff7f {
  display: none !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__details h3 {
  margin: 0 0 12px !important;
  color: var(--rpo-ink) !important;
  font-size: clamp(20px, 1.9vw, 27px) !important;
  line-height: 1.2 !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__details p,
.recruitment-process-outsourcing-page .rpo-solutions__details li {
  color: var(--rpo-ink) !important;
  font-size: 17px !important;
  line-height: 1.48 !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__details a[role="button"] {
  border-color: var(--rpo-orange) !important;
  color: var(--rpo-orange) !important;
}

.recruitment-process-outsourcing-page .rpo-solutions__details a[role="button"]:hover,
.recruitment-process-outsourcing-page .rpo-solutions__details a[role="button"]:focus-visible {
  background: var(--rpo-orange) !important;
  color: #fff !important;
}

@keyframes rpo-details-enter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 820px) {
  .recruitment-process-outsourcing-page .rpo-solutions {
    padding-inline: 16px;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__nav {
    justify-content: flex-start;
    gap: 26px;
    margin-bottom: 22px !important;
    padding-inline: 4px !important;
    scroll-snap-type: x proximity;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__nav li {
    scroll-snap-align: center;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__nav a {
    font-size: 17px !important;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__summary {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    min-height: 0;
    padding: 0 8px 30px !important;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__summary > div:last-child {
    grid-row: 1;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__summary > div:first-child {
    grid-row: 2;
    align-items: center;
    text-align: center;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__summary img {
    max-width: 310px !important;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__summary h2 {
    margin-bottom: 18px !important;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__reveal {
    width: min(100%, 340px);
  }

  .recruitment-process-outsourcing-page .rpo-solutions__details:not([hidden]) {
    margin-bottom: 30px !important;
    padding: 0 4px !important;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__details > div > div {
    padding: 26px 22px !important;
    border-radius: 20px;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__details .thc-c-6084c89fcac {
    grid-template-columns: 1fr;
    gap: 24px !important;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__details .thc-c-6084c89fcac > .thc-c-ab5f5b79e67,
  .recruitment-process-outsourcing-page .rpo-solutions__details .thc-c-6084c89fcac > .thc-c-ab5f5b79e67 + .thc-c-ab5f5b79e67 {
    padding: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recruitment-process-outsourcing-page .rpo-solutions__details:not([hidden]) {
    animation: none;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__nav a,
  .recruitment-process-outsourcing-page .rpo-solutions__reveal {
    transition: none;
  }
}

/* Between the mobile breakpoint and roughly 1024px the two-column summary
   starved the copy. The card track holds its 340px minimum, so at a 900px
   viewport the text track collapsed to 153px. Stack the two across that range
   as well, reusing the order the mobile layout already uses. */
@media (min-width: 821px) and (max-width: 1024px) {
  .recruitment-process-outsourcing-page .rpo-solutions__summary {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    min-height: 0;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__summary > div:last-child {
    grid-row: 1;
    justify-self: center;
  }

  .recruitment-process-outsourcing-page .rpo-solutions__summary > div:first-child {
    grid-row: 2;
  }

  /* The revealed detail panel splits into two columns as well, and at these
     widths each column falls to roughly 240px. Give it a single column. */
  .recruitment-process-outsourcing-page .rpo-solutions__details .thc-c-6084c89fcac {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px !important;
  }
}