/* Careers — content grows with the benefits and positions set in admin. */
.page--careers { height: auto; }
.page--careers > section { position: relative; width: 1440px; }

/* Hero banner */
.banner { position: relative; width: 1440px; min-height: 448px; padding: 172px 112px 108px 76px; display: grid; grid-template-columns: 548px 493px; column-gap: 211px; align-items: center; overflow: hidden; background: var(--navy); color: var(--white); }
.banner__lines { position: absolute; width: 720px; height: 1616px; pointer-events: none; }
.banner__lines--r { left: 720px; top: -564px; }
.banner__lines--l { left: 0; top: -604px; }
.banner__title { position: relative; font-size: 56px; line-height: 1; font-weight: 500; text-transform: capitalize; overflow-wrap: anywhere; }
.banner__sub { position: relative; font-size: 24px; line-height: 28px; color: var(--steel); white-space: pre-line; overflow-wrap: anywhere; }
.banner__corner { position: absolute; width: 44px; height: 44px; pointer-events: none; }
.banner__corner--tl { left: 0; top: 0; transform: rotate(90deg); }
.banner__corner--tr { right: 0; top: 0; transform: rotate(180deg); }
.banner__corner--bl { left: 0; bottom: 0; }
.banner__corner--br { right: 0; bottom: 0; transform: rotate(-90deg); }
.banner__rule { position: absolute; background: var(--white); pointer-events: none; }
.banner__rule--top { left: 44px; top: 4px; width: 1352px; height: 1px; }
.banner__rule--bottom { left: 44px; bottom: 4px; width: 1352px; height: 1px; }
.banner__rule--left { left: 4px; top: 0; width: 1px; height: 100%; }
.banner__rule--right { right: 4px; top: 0; width: 1px; height: 100%; }
.banner__notch { position: absolute; left: 692px; width: 56px; height: 4px; background: var(--white); pointer-events: none; }
.banner__notch--top { top: 0; }
.banner__notch--bottom { bottom: 0; }

/* Benefits */
.benefits { padding: 64px 76px 52px; background: #f5f5f5; }   /* section = 420px as in the design */
.section-title { position: relative; font-size: 40px; line-height: 1.1; font-weight: 600; color: var(--black); overflow-wrap: anywhere; }
.section-lead { position: relative; margin-top: 16px; font-size: 18px; line-height: 20px; color: var(--black); opacity: .76; white-space: pre-line; overflow-wrap: anywhere; }
.benefits__grid { display: grid; grid-template-columns: repeat(var(--benefit-columns, 4), minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.info-card { position: relative; min-width: 0; min-height: 176px; padding: 24px; border-radius: 28px; overflow: hidden; background: var(--white); color: var(--black); overflow-wrap: anywhere; }
.benefits .info-card--2 { background: var(--navy); color: var(--white); }
.info-card__lines { position: absolute; width: 185.609px; height: 416.588px; transform: rotate(-30deg); pointer-events: none; }
.info-card__lines--a { left: 269.61px; top: -120.57px; }
.info-card__lines--b { left: 103.71px; top: -36.7px; }
.info-card__icon { position: relative; width: 56px; height: 56px; padding: 14px; border-radius: 88px; background: #f5f5f5; display: flex; align-items: center; }
.info-card__icon img { width: 28px; height: 28px; }
.page--careers .info-card .info-card__icon img { filter: brightness(0); }
.page--careers .info-card--2 .info-card__icon img { filter: brightness(0) invert(1); }
.info-card--2 .info-card__icon { background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.16); padding: 12.5px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.info-card__title { position: relative; margin-top: 24px; font-size: 24px; line-height: 1; font-weight: 500; text-transform: capitalize; }
.info-card__sub { position: relative; margin-top: 8px; font-size: 16px; line-height: 1.25; white-space: pre-line; opacity: .7; }
.info-card--2 .info-card__sub { color: var(--steel); opacity: 1; }

/* Open positions */
.positions { padding: 0 76px 88px; background: #f5f5f5; }   /* footer lands at the design offset */
.banner + .positions { padding-top: 64px; }
.positions__list { position: relative; display: flex; flex-direction: column; gap: 24px; margin-top: 44px; }
.positions__empty { padding: 32px; border-radius: 28px; background: var(--white); font-size: 18px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.job { position: relative; min-height: 136px; border-radius: 28px; overflow: hidden; background: var(--white); color: var(--black); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(180px, 1fr); align-items: center; gap: 32px; padding: 24px 56px; overflow-wrap: anywhere; }
.job__lines { position: absolute; width: 344.5px; height: 772.869px; pointer-events: none; }
.job__lines--a { left: 344.5px; top: -168.87px; }
.job__lines--b { left: 0; top: -188px; }
.job__body { position: relative; min-width: 0; }
.job__title { font-size: 28px; line-height: 32px; font-weight: 600; }
.job__meta { margin-top: 8px; font-size: 16px; line-height: 20px; opacity: .7; }
.job__tag { position: relative; max-width: 260px; padding: 8px 16px; border-radius: 100px; border: 1px solid rgba(0,0,0,.12); font-size: 14px; line-height: 20px; text-transform: capitalize; }
.job__cta { position: relative; justify-self: end; }

/* Footer in flow */
.page--careers .footer { position: relative; bottom: auto; height: 658px; }
.page--careers .footer-m { position: relative; left: auto; bottom: auto; margin: 0 auto; }
.footer-spacer { height: 98px; }

@media (hover: hover) {
  .page--careers .info-card:hover .info-card__icon img { filter: brightness(0) invert(1); }
  .page--careers .benefits:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon img { filter: brightness(0); }
}

@media (max-width: 899px) {
  .page--careers > section { width: 402px; }
  .banner { width: 402px; min-height: 372px; padding: 196px 32px 64px; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .banner__frame { position: absolute; left: 0; top: 0; width: 402px; height: 100%; pointer-events: none; }
  .banner__notch { left: 167px; width: 68px; height: 8px; }
  .banner__tagline { position: absolute; left: 0; top: 104px; width: 100%; font-size: 12px; line-height: 16px; text-align: center; text-transform: capitalize; white-space: nowrap; }
  .banner__title { font-size: 24px; }
  .banner__sub { font-size: 14px; line-height: 16px; }

  .section-title { font-size: 24px; line-height: 28px; }
  .section-lead { margin-top: 12px; font-size: 14px; line-height: 20px; }
  .benefits { padding: 48px 24px; }
  .benefits__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
  .info-card { min-height: 144px; padding: 16px; border-radius: 24px; }
  .info-card__lines { width: 163.481px; height: 366.918px; }
  .info-card__lines--a { left: 280px; top: -124.49px; }
  .info-card__lines--b { left: 134px; top: -50.61px; }
  .info-card__title { margin-top: 16px; font-size: 18px; line-height: 20px; }
  .info-card__sub { margin-top: 4px; font-size: 14px; line-height: 16px; }

  .positions { padding: 0 24px 64px; }
  .banner + .positions { padding-top: 48px; }
  .positions__list { gap: 16px; margin-top: 32px; }
  .positions__empty { padding: 24px; font-size: 14px; }
  .job { min-height: 176px; border-radius: 24px; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 20px 16px; }
  .job__lines--a { left: 170px; top: -300px; }
  .job__lines--b { left: -170px; top: -320px; }
  .job__title { font-size: 20px; line-height: 24px; }
  .job__meta { font-size: 14px; line-height: 16px; }
  .job__tag { justify-self: start; max-width: 100%; padding: 6px 16px; font-size: 12px; }
  .job__cta { justify-self: stretch; width: 100%; padding: 10px 32px; font-size: 14px; }
  .job__cta img { width: 16px; height: 16px; }
  .footer-spacer { height: 56px; }
}