/* HeartCap cosmetic overrides.
   Kept in their own file, loaded after the Oxygen stylesheets, so the exported
   Oxygen CSS stays untouched and any of this can be reverted by deleting a rule.

   Requested by the client (Serah):
   1. The "Heartbeat of Hiring" hero and the "Ready to ditch the recruiting
      roulette?" band change from pink to a light grey. Their text was white,
      which would be unreadable on light grey, so it moves to dark grey and the
      white buttons become pink — otherwise the change would break both sections.
   2. In "With us, it's personal!", the pink sub-heading becomes dark grey with
      only the words Tech, Data and heart left pink. */

:root {
  --hc-pink: #ff1fa8;
  --hc-light-grey: #f4f5f7;
  --hc-dark-grey: #333333;
  --hc-body-grey: #555555;
}

/* ---- 1. Hero + closing call-to-action: pink -> light grey ---------------- */

#section-650-9,
#section-637-9 {
  background-color: var(--hc-light-grey);
}

/* Headings in these two sections only. .onepage-heading-two is shared with
   sections that still have a dark background, so it is never restyled globally. */
#section-650-9 .onepage-heading-two,
#section-637-9 .onepage-heading-two {
  color: var(--hc-dark-grey);
}

/* Body copy that was explicitly white. */
#section-650-9 .ct-text-block,
#section-637-9 .ct-text-block {
  color: var(--hc-body-grey);
}

/* The white pill button reads as a blank shape on light grey, so it takes the
   brand pink — the same treatment as the button in "With us, it's personal!". */
#section-650-9 .onepage-white-button,
#section-637-9 .onepage-white-button {
  background-color: var(--hc-pink);
  color: #ffffff;
}

#section-650-9 .onepage-white-button:hover,
#section-637-9 .onepage-white-button:hover {
  box-shadow: 0 20px 40px -10px rgba(255, 31, 168, 0.4);
}

/* Both sections illustrate themselves with white line art drawn for the pink
   background — on light grey it all but disappears. Darkening and desaturating
   turns it into a grey wireframe that reads deliberately, without needing the
   artwork itself to be re-exported. */
#section-650-9 .ct-image,
#section-637-9 .ct-image {
  filter: brightness(0.55) saturate(0.4);
}

/* ---- 2. "Tech that listens / Data that guides / People with heart" ------- */

#headline-216-9 {
  color: var(--hc-dark-grey);
}

#headline-216-9 .hc-accent {
  color: var(--hc-pink);
}