/* APPLICATION PAGE */
.application-page {
  --application-red: #E8472E;
  --application-gold: #BF9A52;
  --application-panel: rgba(8,7,6,.66);
  --application-line: rgba(255,255,255,.11);
}

.application-hero {
  position: relative;
  min-height: 76vh;
  display: flex;
  align-items: center;
  padding: 136px 0 76px;
  overflow: hidden;
}

.application-hero.compact {
  min-height: 68vh;
}

.application-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.76) 52%, rgba(8,7,6,.68) 100%),
    radial-gradient(ellipse 48% 36% at 18% 48%, rgba(200,50,28,.16), transparent 70%),
    radial-gradient(ellipse 42% 32% at 80% 26%, rgba(191,154,82,.12), transparent 72%),
    url("/assets/images/recruitment-executive-desk.png");
  background-size: auto, auto, auto, cover;
  background-position: center;
}

.application-hero-grid,
.application-hero-copy {
  position: relative;
  z-index: 2;
}

.application-hero-copy {
  max-width: 820px;
}

.application-hero h1 {
  max-width: 11ch;
  margin-top: 1.15rem;
  font-family: var(--font-d);
  font-size: clamp(3.4rem, 7vw, 7rem);
  font-weight: 300;
  line-height: .96;
}

.application-hero h1 em,
.application-form h2 em {
  color: var(--application-gold);
  font-style: italic;
}

.application-hero p {
  max-width: 680px;
  margin-top: 1.6rem;
  color: rgba(245,240,235,.68);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.85;
}

.role-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}

.role-pills span {
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(8,7,6,.52);
  color: rgba(245,240,235,.74);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .7rem .9rem;
  text-transform: uppercase;
}

.application-section {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background:
    radial-gradient(ellipse 42% 28% at 14% 10%, rgba(200,50,28,.075), transparent 70%),
    radial-gradient(ellipse 46% 32% at 86% 62%, rgba(191,154,82,.08), transparent 72%),
    var(--bg);
}

.application-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(360px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.job-description-panel,
.application-form {
  border: 1px solid var(--application-line);
  background:
    linear-gradient(135deg, rgba(200,50,28,.08), rgba(191,154,82,.045), transparent 64%),
    var(--application-panel);
  box-shadow: 0 26px 92px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}

.job-description-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  position: sticky;
  top: 96px;
}

.job-description-panel .display,
.application-form .display {
  margin-top: .7rem;
  font-size: clamp(2.35rem, 4vw, 4.2rem);
}

.job-description-panel p,
.job-description-panel li {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.8;
}

.job-description-panel p {
  margin-top: 1.2rem;
}

.job-description-panel h3 {
  margin: 2rem 0 .9rem;
  color: var(--white);
  font-family: var(--font-d);
  font-size: 1.65rem;
  font-weight: 400;
}

.job-description-panel ul {
  display: grid;
  gap: .72rem;
  margin: 0;
  padding-left: 1.15rem;
}

.job-description-panel li::marker {
  color: var(--application-red);
}

.application-form {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.25rem, 3vw, 2.45rem);
}

.form-row {
  display: grid;
  gap: 1rem;
}

.form-row.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-form label {
  display: grid;
  gap: .55rem;
  color: rgba(245,240,235,.72);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.application-form input,
.application-form select,
.application-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(8,7,6,.64);
  color: var(--white);
  font-family: var(--font-b);
  font-size: .96rem;
  padding: .98rem 1rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.application-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(245,240,235,.72) 50%), linear-gradient(135deg, rgba(245,240,235,.72) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.application-form textarea {
  resize: vertical;
}

.application-form input[type="file"] {
  padding: .85rem;
}

.application-form input:focus,
.application-form select:focus,
.application-form textarea:focus {
  border-color: rgba(232,71,46,.50);
  box-shadow: 0 0 0 3px rgba(232,71,46,.10);
  background: rgba(8,7,6,.86);
}

.phone-fields {
  display: grid;
  grid-template-columns: minmax(110px, .45fr) minmax(0, 1fr);
  gap: 1rem;
}

.form-note {
  color: var(--dim);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.check-line {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .75rem !important;
  color: rgba(245,240,235,.60) !important;
  font-size: .82rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.65;
  text-transform: none !important;
}

.check-line input {
  width: 18px;
  height: 18px;
  margin-top: .2rem;
  accent-color: var(--application-red);
}

.application-form .btn {
  justify-self: start;
  min-width: 220px;
  margin-top: .35rem;
}

.form-alert {
  border: 1px solid rgba(255,255,255,.12);
  padding: 1rem;
  color: rgba(245,240,235,.78);
  font-size: .92rem;
  line-height: 1.6;
}

.form-alert.success {
  border-color: rgba(96, 190, 132, .35);
  background: rgba(96, 190, 132, .10);
}

.form-alert.error {
  border-color: rgba(232, 71, 46, .35);
  background: rgba(232, 71, 46, .10);
}

.application-success-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(8,7,6,.76);
  backdrop-filter: blur(14px);
}

.application-success-modal.is-hidden {
  display: none;
}

.application-success-card {
  position: relative;
  width: min(100%, 520px);
  border: 1px solid rgba(96,190,132,.34);
  background:
    linear-gradient(135deg, rgba(96,190,132,.12), rgba(191,154,82,.08), transparent 70%),
    rgba(13,11,10,.96);
  padding: clamp(1.5rem, 4vw, 2.2rem);
  box-shadow: 0 28px 100px rgba(0,0,0,.48);
}

.application-success-card h3 {
  margin-top: .75rem;
  color: var(--white);
  font-family: var(--font-d);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
}

.application-success-card p {
  margin-top: 1rem;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.75;
}

.application-success-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(8,7,6,.64);
  color: var(--white);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
}

@media (max-width: 980px) {
  .application-layout {
    grid-template-columns: 1fr;
  }

  .job-description-panel {
    position: static;
  }
}

@media (max-width: 680px) {
  .application-hero {
    min-height: auto;
    padding: 124px 0 58px;
  }

  .form-row.two {
    grid-template-columns: 1fr;
  }

  .phone-fields {
    grid-template-columns: 1fr;
  }

  .application-form .btn {
    justify-self: stretch;
  }
}