:root{
      --content-max: 1200px;
      --gutter: 24px;
      --ring: #ececec;
      --card: #fff;
      --ink: #333;
      --ink-strong: #1d1d1d;
      --shadow: 0 8px 28px rgba(0,0,0,.06);
      --header-stack: clamp(96px, 12vh, 160px);
    }

    .container{ max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

    .application-page { padding: 0 0 clamp(24px, 5vw, 48px); }

    .application-hero{
  position: relative;
  overflow: hidden;
  color:#fff;
  margin-bottom: clamp(18px, 4vw, 36px);
  padding: calc(var(--header-stack) + clamp(8px, 1.5vw, 16px)) 0
           clamp(24px, 5vw, 48px);
}

.application-hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  z-index:0; display:block;
}

.application-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.15));
  z-index:1;
}

.application-hero__inner{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  text-align: left;
}
    
.application-hero__inner p { margin: 0; opacity: .95; max-width: 60ch; }
    
.application {
  max-width: var(--content-max);
  margin: clamp(18px, 4vw, 36px) auto clamp(28px, 6vw, 56px);
  padding: 0;
  display: grid;
  gap: clamp(16px, 3vw, 24px);
  grid-template-columns: repeat(12, 1fr);
}
.application__main{
  grid-column: span 8;
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 24px);
}
.application__aside{
  grid-column: span 4;
  display: grid; gap: 12px; align-content:start;
}

.application-card{
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(14px, 2.5vw, 20px);
}

.application-card h3{ margin:0 0 8px; font-size: 18px; }
.application-card p{ margin:0; color: var(--muted); }

.form-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(12, 1fr);
}
.field{ grid-column: span 12; display:grid; gap:6px; }
.field--6{ grid-column: span 6; }
.field label{ font-weight: 700; color: var(--ink-strong); }
.help{ font-size: 12px; color: var(--muted); }

.input, .select, .textarea, .file{
  width: 100%;
  border: 1px solid var(--ring);
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.textarea{ min-height: 120px; resize: vertical; }

.file{ padding: 10px; }
.checkbox{ display:flex; gap:8px; align-items:flex-start; }
.checkbox input{ margin-top: 2px; }

.actions{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top: 4px;
}

.link{ color: var(--brand); font-weight: 700; text-decoration: none; }
.link:hover{ color: var(--brand-600); }

.btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  font-weight:700; border:0; cursor:pointer; text-decoration:none;
}
.btn--primary{ background: var(--brand); color:#fff; }
.btn--primary:hover{ background: var(--brand-600); }
.btn--ghost{ background:#f6f6f6; color: var(--text); }
.btn--ghost:hover{ background:#eee; }

.note{ font-size:12px; color: var(--muted); }

.status{
  margin-top: 8px; font-size: 14px;
  color: color-mix(in srgb, var(--ink) 70%, white);
  min-height: 1.2em;
}

@media (max-width: 920px){
    .application__main{ grid-column: span 12; }
    .application__aside{ grid-column: span 12; }
    .field--6{ grid-column: span 12; }
}