.careers-hero-content {
  min-height: 60vh;
  padding-top: var(--nav-height);
  place-content: center;
  text-align: center;
}

.careers-title {
  font-size: clamp(3rem, 9vw, 6rem);
  margin-top: var(--space-sm);
}

.careers-subtext {
  color: var(--gray-300);
  margin: var(--space-sm) auto;
  max-width: 60ch;
}

.careers-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.careers-stats span {
  background: var(--cyan-dim);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--gray-100);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  padding: 0.5rem 0.9rem;
}

.careers-benefit-grid,
.job-listings-grid {
  display: grid;
  gap: var(--space-md);
}

.job-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.filter-btn {
  background: transparent;
  border: var(--border-subtle);
  color: var(--gray-300);
  padding: 0.65rem 1.2rem;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: var(--cyan);
}

.job-card {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-sm);
  opacity: 1;
  padding: var(--space-md);
  transform-style: preserve-3d;
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.job-card.is-filtering {
  opacity: 0;
  transform: translateY(16px);
}

.job-card:hover {
  border-color: var(--cyan-border);
  box-shadow: var(--glow-cyan-sm);
}

.job-card-head {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  justify-content: space-between;
}

.job-title {
  font-size: var(--size-h3);
}

.job-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.dept-badge,
.location-badge,
.type-badge {
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  padding: 0.3rem 0.7rem;
}

.dept-badge {
  background: var(--violet-dim);
  color: var(--white);
}

.location-badge {
  background: var(--bg-dark);
  border: var(--border-subtle);
  color: var(--gray-300);
}

.type-badge {
  color: var(--white);
}

.type-badge.full-time {
  background: var(--type-full);
}

.type-badge.part-time {
  background: var(--type-part);
}

.type-badge.contract {
  background: var(--cyan-dim);
}

.job-desc {
  color: var(--gray-300);
}

.cta-mail {
  margin-top: var(--space-sm);
}

.cta-mail a {
  color: var(--cyan);
  font-family: var(--font-mono);
}