/**
 * Careers — PDF p.24.
 *
 * Dark editorial composition: centered eyebrow/heading, then a 2-column body
 * (red-ruled intro copy + script accent on one side, the application form on
 * the other). RTL: logical properties + DOM-order grid throughout.
 */

.careers-page {
  background: var(--color-noir-temp);
  background-size: cover;
  background-position: center;
  min-height: var(--section-min-height-flow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--section-pad-y-lg);
  position: relative;
}
.careers-page__overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 19, 15, 0.86);
}
.careers-page__header {
  position: relative;
  text-align: center;
  margin-bottom: var(--space-8);
}
.careers-page__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-paper-on-dark-soft);
  margin: 0 0 var(--space-4);
}
.careers-page__heading {
  font-size: clamp(2rem, 4.6vw, var(--fs-5));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-paper-on-dark);
  margin: 0;
}

.careers-page__grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-8);
  align-items: start;
}

.careers-page__intro {
  border-inline-start: 1px solid var(--color-cherry-temp);
  padding-inline-start: var(--space-6);
}
.careers-page__body {
  color: var(--color-paper-on-dark-soft);
  font-size: var(--fs-1);
  line-height: 1.8;
  margin: 0 0 var(--space-7);
  white-space: pre-line;
}
.careers-page__script {
  font-family: var(--font-script);
  font-size: var(--fs-3);
  color: var(--color-paper-on-dark-soft);
}

.careers-form .partner-field {
  margin-bottom: var(--space-5);
}
.careers-form__actions {
  margin-top: var(--space-6);
}

.careers-success {
  display: none;
  text-align: center;
  padding-block: var(--space-7);
}
.careers-success.is-visible {
  display: block;
}
.careers-success__heading {
  font-size: clamp(1.5rem, 2.6vw, var(--fs-3));
  color: var(--color-paper-on-dark);
  margin: 0 0 var(--space-4);
}
.careers-success__body {
  color: var(--color-paper-on-dark-soft);
  font-size: var(--fs-1);
  line-height: 1.7;
  margin: 0;
}
.careers-form.is-submitted {
  display: none;
}

@media (max-width: 900px) {
  .careers-page__grid {
    grid-template-columns: 1fr;
  }
}

/* Client feedback: mobile typography still slightly large — small further
   reduction, not a redesign. */
@media (max-width: 640px) {
  .careers-page__heading {
    font-size: clamp(1.85rem, 4.6vw, var(--fs-5));
  }
}

/* Client feedback, round 2: still slightly large — one further ~5% pass.
   Desktop (the var(--fs-X) ceiling) is untouched either way. */
@media (max-width: 640px) {
  .careers-page__heading {
    font-size: clamp(1.76rem, 4.6vw, var(--fs-5));
  }
}