/* Shared Careers typography layer.
   Keeps the three distinct page layouts while bringing their editorial rhythm
   into the same calmer, medium-weight system as the corporate homepage. */
:where(.career-hero, #roles-header, .career-section, #roles-main, .career-cta) {
  font-family: "Inter", sans-serif;
}

.career-eyebrow,
.career-kicker,
#roles-header .eyebrow,
.roles-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .15em;
}

.career-hero h1,
#roles-header h1 {
  max-width: 960px;
  font-size: clamp(3.15rem, 6.15vw, 5.9rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.career-hero-lede,
#roles-header .roles-sub {
  max-width: 700px;
  font-size: clamp(1.08rem, 1.65vw, 1.3rem);
  line-height: 1.58;
  letter-spacing: -.012em;
}

.career-heading h2,
.career-cta h2,
.hire-promise-layout h2,
.life-intro-grid h2,
.role-paths-head h2,
#roles-talent h2 {
  font-size: clamp(2.2rem, 3.75vw, 3.75rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.career-heading > p:last-child,
.career-cta-side p,
#roles-main .roles-intro,
#roles-main .roles-lede {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.68;
  letter-spacing: -.008em;
}

.career-section h3,
#roles-main h3,
.role-title,
.role-name {
  font-weight: 600;
  letter-spacing: -.025em;
}

.career-btn,
#roles-main .btn,
#roles-header .btn {
  font-weight: 650;
  letter-spacing: -.01em;
}

@media (max-width: 760px) {
  .career-hero h1,
  #roles-header h1 {
    font-size: clamp(3rem, 13.5vw, 4.5rem);
    line-height: .99;
  }

  .career-heading h2,
  .career-cta h2,
  .hire-promise-layout h2,
  .life-intro-grid h2,
  .role-paths-head h2,
  #roles-talent h2 {
    font-size: clamp(2.15rem, 10vw, 3.25rem);
  }
}