/* ==========================================================================
   Direct Employee — Hero (rp-direct-employee-hero) · Figma Hero-Wrapper
   7756:168346 / Text 7756:168347. Scope: .rp-direct-employee-hero.
   Structural scaffold by CC; Cowork owns visual fidelity.
   Hero scaffold (playbook): text column gets a flex floor so it never loses the
   flex fight to the fixed-width art column; H1 wraps to Figma's ~3 lines at 554px.
   Tokens read from THIS page (7756:168347): H1 Mulish Bold 64/80 tracking -2px
   #021143 with accent "HR & Payroll" #0043e5 · sub Mulish Reg 20/28 #696969
   (Figma sub box 463px) · art 734px CLIENT|CONTRACTS dashboard + award badges.
   ========================================================================== */
.rp-direct-employee-hero {
  background: linear-gradient(180deg, #FBFCFF 0%, #EAF0FE 100%);
}
.rp-direct-employee-hero__inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 72px 24px;
  display: flex;
  align-items: center;
  gap: 40px;
}
/* Text wins the flex fight. Floor 520; max 554 = Figma text width (H1 wraps to
   Figma's ~3 lines at 554; the sub box is 463 inside it). */
.rp-direct-employee-hero__text { flex: 1 0 520px; max-width: 554px; }
.rp-direct-employee-hero__media { flex: 0 1 736px; min-width: 0; }
.rp-direct-employee-hero__img { display: block; width: 734px; max-width: 100%; height: auto; }

.rp-direct-employee-hero__title {
  font-weight: 700;
  font-size: 64px;
  line-height: 80px;
  letter-spacing: -2px;
  color: #021143;
  margin: 0 0 8px;
}
.rp-direct-employee-hero__title .accent { color: #0043e5; }

.rp-direct-employee-hero__sub {
  font-size: 20px;
  line-height: 28px;
  color: #696969;
  max-width: 463px;
  margin: 0 0 40px;
}

.rp-direct-employee-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.rp-direct-employee-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #114EF7;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  padding: 15px 28px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.rp-direct-employee-hero__cta:hover { background: #0E45D6; color: #fff; }
.rp-direct-employee-hero__cta--ghost {
  background: #fff;
  color: #114EF7;
  border: 1px solid #D6E0FB;
}
.rp-direct-employee-hero__cta--ghost:hover { background: #F0F4FE; color: #114EF7; }

@media (max-width: 991px) {
  .rp-direct-employee-hero__inner { flex-direction: column; text-align: center; padding: 48px 20px; gap: 36px; }
  .rp-direct-employee-hero__text { flex: 0 1 auto; max-width: 100%; }
  .rp-direct-employee-hero__sub { margin-left: auto; margin-right: auto; }
  .rp-direct-employee-hero__ctas { justify-content: center; }
  .rp-direct-employee-hero__title { font-size: 48px; line-height: 56px; }
  .rp-direct-employee-hero__sub { margin-bottom: 28px; }
  .rp-direct-employee-hero__img { width: 560px; }
}
@media (max-width: 600px) {
  .rp-direct-employee-hero__title { font-size: 36px; line-height: 44px; letter-spacing: -1px; }
  .rp-direct-employee-hero__cta { width: 100%; }
}