.career-page .page__ambient { opacity: .18; }

.career-hero {
  position: relative;
  display: flex;
  min-height: calc(100svh - 72px);
  align-items: center;
  padding: clamp(72px, 8vw, 116px) 0 clamp(64px, 7vw, 96px);
}

.career-hero__layout { display: block; }

.career-hero h1 {
  max-width: none;
  font-size: clamp(3.6rem, 6vw, 6.1rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .94;
  text-wrap: balance;
  white-space: nowrap;
}

.career-hero__status { position: relative; display: grid; max-width: 49ch; gap: 12px; margin-top: clamp(28px, 3vw, 42px); padding-top: 20px; border-top: 1px solid var(--color-border); }
.career-hero__status::before { position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); content: ""; }
.career-hero__status p { margin: 0; color: var(--color-text-muted); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62; }
.career-hero__status .career-hero__status-title { color: var(--color-text); font-size: clamp(1.1rem, 1.45vw, 1.4rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.18; }
.career-hero__status a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.career-hero__status a:hover { color: var(--color-accent-hover); }
.career-hero__status a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.career-offer { padding: clamp(64px, 7vw, 112px) 0 clamp(80px, 9vw, 144px); }
.career-offer__heading { margin-bottom: clamp(38px, 4.5vw, 56px); }
.career-offer__heading h2 { max-width: none; color: var(--color-text-muted); font-size: clamp(11px, .78vw, 13px); font-weight: 700; letter-spacing: .12em; line-height: 1.25; text-transform: uppercase; text-wrap: pretty; }

.career-offer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--color-border); background: var(--color-border); }
.career-benefit { display: flex; min-height: clamp(190px, 16vw, 248px); align-items: flex-end; padding: clamp(26px, 3vw, 48px); overflow: hidden; background: rgba(17, 17, 20, .82); }
.career-benefit h3 { max-width: 16ch; margin: 0; color: var(--color-text); font-size: clamp(1.25rem, 1.9vw, 2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.06; text-wrap: balance; }
.career-benefit--team { grid-column: span 5; min-height: clamp(238px, 20vw, 306px); background: rgba(24, 24, 29, .94); }
.career-benefit--team h3 { max-width: 14ch; font-size: clamp(1.65rem, 2.7vw, 3rem); line-height: 1; }
.career-benefit--learning { grid-column: span 4; }
.career-benefit--stability { grid-column: span 3; }
.career-benefit--employment { grid-column: span 4; }
.career-benefit--health { grid-column: span 5; background: var(--color-surface); }
.career-benefit--growth { grid-column: span 3; }
.career-benefit--remote { grid-column: span 7; min-height: clamp(218px, 18vw, 276px); background: var(--color-accent); }
.career-benefit--remote h3 { max-width: 12ch; color: var(--color-on-accent); font-size: clamp(1.8rem, 3vw, 3.3rem); line-height: .98; }
.career-benefit--schedule { grid-column: span 5; background: rgba(24, 24, 29, .94); }
.career-benefit--schedule h3 { max-width: 18ch; }

@media (hover: hover) and (pointer: fine) {
  .career-benefit { transition: background-color 220ms var(--ease-out), transform 220ms var(--ease-out); }
  .career-benefit:hover { background: var(--color-surface-strong); transform: translateY(-3px); }
  .career-benefit--remote:hover { background: var(--color-accent-hover); }
}

@media (max-width: 1023px) {
  .career-benefit { padding: 30px; }
}

@media (max-width: 767px) {
  .career-hero { min-height: calc(100svh - 64px); padding: 52px 0 64px; }
  .career-hero h1 { font-size: clamp(3.05rem, 13vw, 4.2rem); white-space: normal; }
  .career-hero__status { gap: 10px; margin-top: 26px; padding-top: 18px; }
  .career-hero__status p { font-size: 15px; line-height: 1.64; }
  .career-hero__status .career-hero__status-title { font-size: 1.1rem; }
  .career-offer { padding: 64px 0 78px; }
  .career-offer__heading { margin-bottom: 38px; }
  .career-offer__heading h2 { font-size: 11px; }
  .career-offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(168px, auto); }
  .career-benefit,
  .career-benefit--team,
  .career-benefit--learning,
  .career-benefit--stability,
  .career-benefit--employment,
  .career-benefit--health,
  .career-benefit--growth,
  .career-benefit--remote,
  .career-benefit--schedule { grid-column: auto; min-height: 168px; padding: 24px 20px; }
  .career-benefit--team,
  .career-benefit--schedule { grid-column: 1 / -1; min-height: 204px; padding: 28px 24px; }
  .career-benefit h3,
  .career-benefit--team h3,
  .career-benefit--remote h3 { max-width: 13ch; font-size: clamp(.94rem, 4.2vw, 1.15rem); line-height: 1.1; }
  .career-benefit--team h3,
  .career-benefit--schedule h3 { max-width: 15ch; font-size: clamp(1.35rem, 6vw, 1.72rem); line-height: 1.04; }
}

@media (prefers-reduced-motion: reduce) {
  .career-benefit { transition: none; }
}