.careers-page { background: var(--ink); }

@media (min-width: 769px) {
  .careers-hero__title,
  .careers-intro,
  .careers-handshake,
  .careers-form { margin-left: var(--pc-frame-gutter); }
}

.careers-hero {
  position: relative;
  height: calc(700 * var(--pc));
  overflow: hidden;
  background: #05090b;
}

.careers-hero__background,
.careers-hero__background img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.careers-hero__background img { object-fit: cover; }

.careers-hero__title {
  position: absolute;
  z-index: 2;
  left: calc(179 * var(--pc));
  top: calc(288 * var(--pc));
  width: calc(1100 * var(--pc));
  color: #fff;
  font-family: var(--display);
  font-size: calc(92 * var(--pc));
  font-weight: 900;
  line-height: calc(110 * var(--pc));
  letter-spacing: calc(-1.84 * var(--pc));
}

.careers-hero__title > span { display: block; }
.careers-hero__kicker { background: linear-gradient(90deg, #fff 38%, #a8a8a8); background-clip: text; color: transparent; }
.careers-hero__accent { background: linear-gradient(180deg, var(--green), #b3e255); background-clip: text; color: transparent; }

.careers-content {
  position: relative;
  height: calc(1000 * var(--pc));
  overflow: hidden;
  color: #000;
  background:
    radial-gradient(ellipse at -5% 84%, rgba(246,255,143,.13), transparent 34%),
    radial-gradient(ellipse at 104% 8%, rgba(56,137,110,.14), transparent 29%),
    #fefffd;
}

.careers-intro {
  position: absolute;
  z-index: 2;
  left: calc(906 * var(--pc));
  top: calc(141 * var(--pc));
  width: calc(761 * var(--pc));
}

.careers-intro h2 {
  width: calc(672 * var(--pc));
  margin-top: calc(31 * var(--pc));
  font-family: var(--display);
  font-size: calc(82 * var(--pc));
  font-weight: 700;
  line-height: calc(88 * var(--pc));
  letter-spacing: calc(-.82 * var(--pc));
}

.careers-intro__text {
  width: calc(629 * var(--pc));
  margin-top: calc(20 * var(--pc));
  color: #1a1d20;
  font-size: calc(16 * var(--pc));
  font-weight: 400;
  line-height: normal;
}

.careers-handshake {
  position: absolute;
  z-index: 1;
  left: calc(188 * var(--pc));
  top: calc(152 * var(--pc));
  width: calc(605 * var(--pc));
  height: calc(713 * var(--pc));
  overflow: hidden;
  border-radius: calc(40 * var(--pc));
}

.careers-handshake img { width: 100%; height: 100%; object-fit: cover; }

.careers-form {
  position: absolute;
  z-index: 2;
  left: calc(897 * var(--pc));
  top: calc(379 * var(--pc));
  width: calc(843 * var(--pc));
  height: calc(486 * var(--pc));
  padding: calc(32 * var(--pc));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--pc));
  overflow: hidden;
  border-radius: calc(32 * var(--pc));
  background: #1a1d20;
  box-shadow: 0 calc(20 * var(--pc)) calc(25 * var(--pc)) calc(-5 * var(--pc)) rgba(0,0,0,.1), 0 calc(8 * var(--pc)) calc(10 * var(--pc)) calc(-6 * var(--pc)) rgba(0,0,0,.1);
}

.careers-form::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: calc(192 * var(--pc));
  height: calc(192 * var(--pc));
  border-radius: 50%;
  background: rgba(202,243,0,.05);
  filter: blur(calc(32 * var(--pc)));
  pointer-events: none;
}

.careers-form__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(40 * var(--pc));
}

.careers-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: calc(4 * var(--pc));
  color: #f8ffea;
  font-size: calc(16 * var(--pc));
  font-weight: 400;
  line-height: normal;
}

.careers-field input,
.careers-field textarea {
  width: 100%;
  margin: 0;
  border: 0;
  outline: 0;
  background: #dedede;
  color: #1a1d20;
  font: 400 calc(15 * var(--pc))/calc(24 * var(--pc)) 'Inter', Arial, sans-serif;
}

.careers-field input {
  height: calc(51 * var(--pc));
  padding: 0 calc(16 * var(--pc));
  border-radius: calc(999 * var(--pc));
}

.careers-field textarea {
  height: calc(128 * var(--pc));
  padding: calc(12 * var(--pc)) calc(16 * var(--pc));
  resize: none;
}

.careers-field input:focus,
.careers-field textarea:focus { box-shadow: 0 0 0 calc(2 * var(--pc)) var(--green); }

.careers-form__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(8 * var(--pc));
}

.careers-form__security {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pc));
  color: #e2e2e5;
  font: 400 calc(10 * var(--pc))/calc(14 * var(--pc)) Georgia, serif;
  letter-spacing: calc(.8 * var(--pc));
}

.careers-form__security img { width: calc(11 * var(--pc)); height: calc(14 * var(--pc)); }

.careers-form__submit {
  width: calc(196 * var(--pc));
  height: calc(63 * var(--pc));
  padding: 0 calc(20 * var(--pc));
  border-radius: calc(60 * var(--pc));
  background: linear-gradient(180deg, var(--green), #b3e255);
  color: #000;
  font-size: calc(20 * var(--pc));
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  transition: transform .25s ease, filter .25s ease;
}

.careers-form__submit:hover { transform: translateY(calc(-2 * var(--pc))); filter: brightness(1.06); }

@media (max-width: 768px) {
  .careers-page .header .brand::after { display: none; }

  .careers-hero { height: calc(600 * var(--m)); }

  .careers-hero__title {
    left: calc(10 * var(--m));
    top: calc(397 * var(--m));
    width: calc(341 * var(--m));
    font-size: calc(54 * var(--m));
    line-height: calc(56 * var(--m));
    letter-spacing: calc(-1.62 * var(--m));
  }

  .careers-hero__kicker span { display: block; }

  .careers-content {
    height: calc(1405 * var(--m));
    background:
      radial-gradient(ellipse at -18% 80%, rgba(246,255,143,.12), transparent 34%),
      radial-gradient(ellipse at 110% 10%, rgba(56,137,110,.12), transparent 28%),
      #fefffd;
  }

  .careers-intro {
    left: calc(20 * var(--m));
    top: calc(57 * var(--m));
    width: calc(350 * var(--m));
  }

  .careers-intro h2 {
    width: calc(350 * var(--m));
    margin-top: calc(13 * var(--m));
    font-size: calc(40 * var(--m));
    line-height: calc(44 * var(--m));
    letter-spacing: calc(-.4 * var(--m));
  }

  .careers-intro__text {
    width: calc(350 * var(--m));
    margin-top: calc(4 * var(--m));
    font-size: calc(16 * var(--m));
    line-height: calc(28 * var(--m));
  }

  .careers-handshake {
    left: 0;
    top: calc(1101 * var(--m));
    width: calc(390 * var(--m));
    height: calc(360 * var(--m));
    border-radius: 0;
  }

  .careers-form {
    left: calc(21 * var(--m));
    top: calc(339 * var(--m));
    width: calc(348 * var(--m));
    height: auto;
    padding: 0;
    gap: calc(20 * var(--m));
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .careers-form::after { display: none; }

  .careers-form__row {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--m));
  }

  .careers-field {
    gap: calc(4 * var(--m));
    color: #000;
    font-size: calc(16 * var(--m));
  }

  .careers-field input,
  .careers-field textarea {
    font-size: calc(15 * var(--m));
    line-height: calc(24 * var(--m));
  }

  .careers-field input {
    height: calc(51 * var(--m));
    padding: 0 calc(16 * var(--m));
    border-radius: calc(999 * var(--m));
  }

  .careers-field textarea {
    height: calc(200 * var(--m));
    padding: calc(12 * var(--m)) calc(16 * var(--m));
    border-radius: calc(20 * var(--m));
  }

  .careers-field input:focus,
  .careers-field textarea:focus { box-shadow: 0 0 0 calc(2 * var(--m)) var(--green); }

  .careers-form__actions {
    display: flex;
    justify-content: center;
    padding: 0;
  }

  .careers-form__security { display: none; }

  .careers-form__submit {
    width: calc(280 * var(--m));
    height: calc(60 * var(--m));
    padding: 0 calc(20 * var(--m));
    border-radius: calc(60 * var(--m));
    color: #1a1d20;
    font-size: calc(20 * var(--m));
  }

  .careers-form__submit:hover { transform: none; }
}