/* =============================================================================
   Careers page. Loaded only on /careers — shared shell lives in site.css.
   ========================================================================== */

.careers { color: var(--ink); background: var(--bg); overflow-x: hidden; }
.careers section { padding-left: 32px; padding-right: 32px; }
.careers-inner { max-width: 1120px; margin: 0 auto; }

/* ---------------------------------------------------------------- hero -- */
.careers-hero { padding: 76px 32px 30px; }

.careers-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.careers-eyebrow__rule { width: 26px; height: 2px; background: #05a558; }
.careers-eyebrow__text {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #05a558; font-weight: 600;
}

.careers-hero__title {
  margin: 0; font-size: 54px; line-height: 1.04; letter-spacing: -.03em;
  font-weight: 700; color: var(--ink); max-width: 780px;
}
.careers-hero__lede {
  max-width: 600px; margin: 20px 0 0;
  font-size: 18px; line-height: 1.55; color: #565a4f;
}

/* ----------------------------------------------------------- positions -- */
.careers-roles { padding: 20px 32px 90px; }

.careers-roles__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.careers-roles__title { margin: 0; font-size: 24px; font-weight: 700; color: var(--ink); }
.careers-roles__count { font-size: 14px; color: #8b8f82; }

.careers-list { display: flex; flex-direction: column; gap: 16px; }

.job {
  background: #fff; border: 1px solid rgba(20,22,15,.09); border-radius: 18px;
  padding: 26px 28px; display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
  box-shadow: 0 20px 44px -38px rgba(18,40,28,.3);
  transition: transform .16s ease, box-shadow .16s ease;
}
.job:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgba(18,40,28,.34); }
.job__main { flex: 1; min-width: 240px; }
.job__title { font-size: 20px; font-weight: 700; color: var(--ink); }
.job__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.job__tag {
  font-size: 12.5px; font-weight: 600; color: #3d4136;
  background: #eef1ec; border-radius: 999px; padding: 5px 12px;
}
.job__tag--type { color: #05a558; background: rgba(0,214,119,.12); }
.job__desc {
  margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: #565a4f;
  max-width: 660px; text-wrap: pretty;
}
.job__apply {
  flex: none; text-decoration: none; background: var(--accent); color: #05130c;
  font-weight: 700; font-size: 14.5px; padding: 12px 22px; border-radius: 11px;
  white-space: nowrap;
}

/* ------------------------------------------------------------- empty -- */
.careers-empty {
  background: #fff; border: 1px solid rgba(20,22,15,.09); border-radius: 20px;
  padding: 56px 32px; text-align: center; box-shadow: 0 24px 50px -40px rgba(18,40,28,.28);
}
.careers-empty__title { font-size: 22px; font-weight: 700; color: var(--ink); }
.careers-empty__text {
  max-width: 440px; margin: 12px auto 0;
  font-size: 15.5px; line-height: 1.55; color: #565a4f;
}
.careers-empty__cta {
  display: inline-block; margin-top: 22px; text-decoration: none;
  background: var(--accent); color: #05130c; font-weight: 700; font-size: 14.5px;
  padding: 13px 24px; border-radius: 12px;
}

/* --------------------------------------------------------- how we work -- */
.careers-how {
  margin-top: 28px; background: var(--foot-bg); border-radius: 20px; padding: 34px 36px;
  display: flex; gap: 30px; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.careers-how__text { max-width: 560px; }
.careers-how__title { font-size: 20px; font-weight: 700; color: #f4f6f2; }
.careers-how__desc { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--foot-ink); }
.careers-how__link {
  flex: none; text-decoration: none; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); color: #e8ebe6; font-weight: 600;
  font-size: 14px; padding: 12px 22px; border-radius: 11px;
}

/* --------------------------------------------------------- responsive -- */
@media (max-width: 640px) {
  .careers section { padding-left: 20px; padding-right: 20px; }
  .careers-hero__title { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .job { transition: none; }
  .job:hover { transform: none; }
}