/* ============================================================
   By Intuity — Application pages shared styles
   Tokens + base type copied from the design system
   (colors_and_type.css), plus the kit components reused here
   and new styles for the application landing page.
   Poppins is loaded from Google Fonts (exact brand match).
   ============================================================ */

:root {
  /* ---- Brand palette (raw) ---- */
  --deep-navy:   #1f2a44;
  --warm-sand:   #f8f4ed;
  --muted-sage:  #a4b9a2;
  --gold-ochre:  #c69c6d;
  --gold-hover:  #cfaa80;
  --error-red:   #ca3a46;

  /* ---- Surface tints ---- */
  --tint-06:  rgba(255,255,255,0.06);
  --tint-08:  rgba(255,255,255,0.08);
  --tint-sand-04: rgba(248,244,237,0.04);
  --focus-ring:  rgba(248,244,237,0.42);
  --hairline: rgba(248,244,237,0.12);

  /* ---- Semantic foreground ---- */
  --fg-on-navy:        var(--warm-sand);
  --fg-on-navy-muted:  rgba(248,244,237,0.72);
  --fg-on-light:       var(--deep-navy);
  --fg-accent:         var(--gold-ochre);

  /* ---- Semantic surfaces ---- */
  --surface-primary:   var(--deep-navy);
  --surface-card:      var(--tint-06);
  --surface-field:     var(--tint-08);

  /* ---- Type ---- */
  --font-family: "Poppins", sans-serif;
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --h1: 3.5rem;
  --h2: 2.5rem;
  --h3: 1.75rem;
  --h4: 1.25rem;
  --h5: 1rem;
  --display-number: 4rem;
  --large-copy: 1.25rem;
  --regular-copy: 1rem;
  --button-copy: 1rem;

  --h1-sm: 2.25rem;
  --h2-sm: 1.75rem;
  --h3-sm: 1.5rem;
  --h5-sm: 0.875rem;

  --lh-h1: 130%;
  --lh-h2: 130%;
  --lh-h3: 150%;
  --lh-h4: 150%;
  --lh-h5: 150%;
  --lh-large: 150%;
  --lh-regular: 150%;
  --lh-button: 100%;

  /* ---- Shape & layout ---- */
  --radius-pill: 99px;
  --radius-card: 16px;
  --radius-image: 12px;
  --radius-textarea: 28px;

  --max-width: 1200px;
  --max-width-narrow: 1000px;
  --page-margin: 12%;

  --field-height: 56px;
  --button-height: 64px;
  --button-height-sm: 48px;
  --nav-height: 100px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-family);
  background: var(--deep-navy);
  color: var(--warm-sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   BASE TYPE
   ============================================================ */
.bi-h1 { font-size: var(--h1); line-height: var(--lh-h1); font-weight: var(--weight-semibold); color: var(--warm-sand); margin: 0; }
.bi-h2 { font-size: var(--h2); line-height: var(--lh-h2); font-weight: var(--weight-semibold); color: var(--warm-sand); margin: 0; }
.bi-h3 { font-size: var(--h3); line-height: var(--lh-h3); font-weight: var(--weight-semibold); color: var(--warm-sand); margin: 0; }
.bi-h4 { font-size: var(--h4); line-height: var(--lh-h4); font-weight: var(--weight-semibold); color: var(--warm-sand); margin: 0; }
.bi-eyebrow { font-size: var(--h5); line-height: var(--lh-h5); font-weight: var(--weight-semibold); color: var(--gold-ochre); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.bi-large-copy { font-size: var(--large-copy); line-height: var(--lh-large); font-weight: var(--weight-regular); color: var(--warm-sand); margin: 0; }
.bi-copy { font-size: var(--regular-copy); line-height: var(--lh-regular); font-weight: var(--weight-regular); color: var(--warm-sand); margin: 0; }
.bi-copy strong, .bi-large-copy strong { font-weight: var(--weight-semibold); }
.bi-muted { color: var(--fg-on-navy-muted); }
.bi-gold { color: var(--gold-ochre); }

/* ============================================================
   APP SHELL / LAYOUT
   ============================================================ */
.page { width: 100%; overflow-x: hidden; }
.wrap { width: 100%; padding-left: 8%; padding-right: 8%; }
.container { width: 100%; max-width: var(--max-width-narrow); margin: 0 auto; }
.spacer { width: 100%; height: 14vh; min-height: 96px; }
.spacer-sm { width: 100%; height: 8vh; min-height: 56px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 99;
  height: var(--nav-height); background: var(--deep-navy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8%;
}
.nav-left { display: flex; align-items: center; gap: 36px; }
.nav-logo { height: 24px; cursor: pointer; }
.nav-links { display: flex; gap: 32px; }
/* Live site renders all nav links Semi-Bold 600 (not the kit's Light 300) */
.nav-link { font-size: 1rem; font-weight: 600; text-decoration: none; color: var(--warm-sand); background: none; border: none; padding: 0; transition: color .2s ease; }
.nav-link:hover { color: var(--gold-ochre); }
.nav-link.active { font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-social { display: flex; gap: 18px; align-items: center; }
.nav-social .icon-btn { width: auto; height: auto; border: none; background: none; }
.nav-social .icon-btn img { width: 22px; height: 22px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--button-height); padding: 0 36px; border-radius: var(--radius-pill);
  font-size: var(--button-copy); font-weight: 600; line-height: 100%;
  text-decoration: none; border: 1px solid transparent; transition: background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--gold-ochre); color: var(--deep-navy); }
.btn-primary:hover { background: var(--gold-hover); }
.btn-secondary { background: transparent; color: var(--gold-ochre); border-color: var(--gold-ochre); }
.btn-secondary:hover { border-color: var(--gold-hover); color: var(--gold-hover); }
.btn-sm { height: var(--button-height-sm); padding: 0 28px; }
.btn .chev { width: 14px; height: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--gold-ochre); background: var(--deep-navy);
  display: flex; align-items: center; justify-content: center;
}
.icon-btn img { width: 18px; height: 18px; }

/* ============================================================
   LANDING — HEADER / HERO
   ============================================================ */
.app-hero { padding-top: 9vh; }
.app-hero .inner {
  width: 100%; max-width: var(--max-width-narrow); margin: 0 auto;
  display: flex; flex-direction: column; gap: 30px;
}
.app-hero .eyebrow-row { display: flex; align-items: center; gap: 16px; }
.app-hero .eyebrow-rule { flex: none; width: 40px; height: 1px; background: var(--gold-ochre); }
.app-hero h1 { max-width: 16ch; }
.app-hero .lede { max-width: none; }
.app-hero .lede + .lede { margin-top: 4px; }
.app-hero .btn-row { margin-top: 14px; }

/* rise-in entrance (once, gentle) */
.rise { opacity: 0; transform: translateY(28px); animation: biRise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.rise.d1 { animation-delay: .06s; }
.rise.d2 { animation-delay: .16s; }
.rise.d3 { animation-delay: .28s; }
.rise.d4 { animation-delay: .4s; }
@keyframes biRise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } }

/* ============================================================
   QUALITIES
   ============================================================ */
.qual-section .inner { width: 100%; max-width: var(--max-width-narrow); margin: 0 auto; }
.qual-intro { max-width: none; margin-bottom: 36px; }
.qual-list { display: flex; flex-direction: column; }
.qual {
  display: grid; grid-template-columns: 104px 1fr; gap: 40px;
  padding: 40px 0; border-top: 1px solid var(--hairline);
}
.qual:last-child { border-bottom: 1px solid var(--hairline); }
.qual-index { font-size: 2.5rem; font-weight: 600; color: var(--gold-ochre); line-height: 1; padding-top: 2px; }
.qual-body { display: flex; flex-direction: column; gap: 12px; }
.qual-name { font-size: var(--h4); font-weight: 600; color: var(--warm-sand); }
.qual-desc { font-size: var(--regular-copy); font-weight: 400; line-height: 150%; color: var(--warm-sand); max-width: none; }

.invite {
  max-width: var(--max-width-narrow); margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
}
.invite .bi-large-copy { max-width: 52ch; }

/* ============================================================
   FAQ / ACCORDION
   ============================================================ */
.faq-section .inner { width: 100%; max-width: var(--max-width-narrow); margin: 0 auto; }
.faq-head { margin-bottom: 40px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--hairline); }
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;
  padding: 28px 4px; text-align: left;
  font-family: var(--font-family); font-size: var(--h4); font-weight: 600; color: var(--warm-sand);
  line-height: 150%; transition: color .2s ease;
}
.faq-q:hover { color: var(--gold-hover); }
.faq-item.open .faq-q { color: var(--gold-ochre); }
.faq-mark { flex: none; width: 22px; height: 22px; margin-top: 7px; position: relative; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; background: var(--gold-ochre);
  left: 50%; top: 50%; transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq-mark::before { width: 16px; height: 1.5px; transform: translate(-50%,-50%); }
.faq-mark::after { width: 1.5px; height: 16px; transform: translate(-50%,-50%); }
.faq-item.open .faq-mark::after { transform: translate(-50%,-50%) scaleY(0); }

.faq-a { overflow: hidden; height: 0; transition: height .35s cubic-bezier(.2,.7,.2,1); }
.faq-a-inner { padding: 0 64px 32px 4px; display: flex; flex-direction: column; gap: 18px; }
.faq-a p { font-size: var(--regular-copy); font-weight: 400; line-height: 160%; color: var(--warm-sand); margin: 0; max-width: none; }
.faq-a p strong { font-weight: 600; color: var(--warm-sand); }
.faq-a .sub { font-size: var(--regular-copy); font-weight: 600; color: var(--warm-sand); font-style: italic; margin-top: 2px; }
.faq-a ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.faq-a li { display: flex; gap: 14px; align-items: flex-start; }
.faq-a li img { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.faq-a li .t { font-size: var(--regular-copy); font-weight: 400; line-height: 155%; color: var(--warm-sand); }
.faq-a li .t strong { font-weight: 600; color: var(--warm-sand); }
.faq-a li .li-num { flex: none; width: 17px; margin-top: 1px; color: var(--gold-ochre); font-weight: 600; font-size: var(--regular-copy); }
.faq-a li.sub-li { margin-left: 31px; }
.faq-a li.sub-li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-ochre); margin-top: 9px; }
.faq-a li.sub-li .t { color: var(--warm-sand); }
.faq-a li.hdr-li { margin-top: 6px; }
.faq-a li.bull::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-ochre); margin: 8px 6px 0 4px; }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closing {
  max-width: var(--max-width-narrow); margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.closing h2 { max-width: 18ch; }

/* ============================================================
   FOOTER
   ============================================================ */
/* Fluid footer: brand hard-left, link columns hard-right, stretches to any width */
.footer { border-top: 1px solid var(--gold-ochre); padding: 90px 8%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 56px 80px; }
.footer-brand { display: flex; flex-direction: column; gap: 28px; flex: 1 1 420px; min-width: 280px; max-width: 560px; }
.footer-brand img { height: 26px; align-self: flex-start; }
.footer-brand p { font-size: 1.25rem; font-weight: 400; line-height: 150%; margin: 0; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 40px 80px; flex: 0 1 auto; }
.footer-col { min-width: 140px; display: flex; flex-direction: column; gap: 24px; }
.footer-col h4 { font-size: 1rem; font-weight: 600; margin: 0 0 4px; }
.footer-col a { font-size: 1rem; font-weight: 400; text-decoration: none; transition: color .2s ease; }
.footer-col a:hover { color: var(--gold-ochre); }

/* ============================================================
   APPLICATION FORM (Page 2)
   ============================================================ */
.form-section .inner { width: 100%; max-width: var(--max-width-narrow); margin: 0 auto; }

/* Section header: eyebrow + heading + hairline rule */
.fsec { display: flex; flex-direction: column; }
.fsec + .fsec { margin-top: 11vh; }
.fsec-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 26px; border-bottom: 1px solid var(--hairline); margin-bottom: 40px; }
.fsec-head .num { font-size: 1rem; font-weight: 600; color: var(--gold-ochre); letter-spacing: .14em; }
.fsec-head h2 { font-size: var(--h3); font-weight: 600; color: var(--warm-sand); margin: 0; }
.fsec-head .sub { font-size: var(--regular-copy); font-weight: 400; color: var(--fg-on-navy-muted); margin: 2px 0 0; max-width: none; }
.ai-subhead { font-size: 1rem; font-weight: 600; color: var(--warm-sand); line-height: 150%; margin: 0 0 22px; }

/* Field grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field.col-2 { grid-column: span 2; }
.field label { font-size: 1rem; font-weight: 600; color: var(--warm-sand); }
.field label .opt { font-weight: 400; color: var(--fg-on-navy-muted); }
.field .hint { font-size: .9rem; font-weight: 400; line-height: 150%; color: var(--fg-on-navy-muted); margin: -2px 0 2px; max-width: none; }

.input, .select, .textarea {
  width: 100%; height: var(--field-height); padding: 0 22px;
  background: var(--tint-08); border: 1px solid transparent; border-radius: var(--radius-pill);
  color: var(--warm-sand); font-family: var(--font-family); font-weight: 400; font-size: 1rem;
  transition: border-color .2s ease, background .2s ease;
}
.input::placeholder, .textarea::placeholder { color: rgba(248,244,237,.5); font-weight: 400; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus-ring); background: rgba(255,255,255,0.1); }

.textarea { height: 150px; min-height: 110px; padding: 18px 24px; border-radius: var(--radius-textarea); resize: vertical; line-height: 155%; }

/* Select with chevron */
.select-wrap { position: relative; }
.select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.select:invalid { color: rgba(248,244,237,.5); }
.select:has(option[value=""]:checked) { color: rgba(248,244,237,.5); }
.select-wrap::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px;
  border-right: 1.5px solid var(--gold-ochre); border-bottom: 1.5px solid var(--gold-ochre);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select option { color: var(--deep-navy); }

/* ---- Custom multi-select (enhances [data-ms] select-wraps) ---- */
/* ---- Custom multi-select / tag input (enhances [data-ms] select-wraps) ---- */
.select-wrap[data-ms] .select { position: absolute; opacity: 0; pointer-events: none; height: var(--field-height); width: 100%; }
.select-wrap[data-ms]::after {
  top: 24px; transform: rotate(45deg); transition: transform .2s ease;
}
.select-wrap[data-ms].ms-open::after { transform: rotate(-135deg) translate(-2px, -2px); }
.select-wrap[data-ms].has-chips::after { display: none; } /* clear-all × takes its place */

.ms-control {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  width: 100%; min-height: var(--field-height); padding: 9px 46px 9px 18px;
  background: var(--tint-08); border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: text; transition: border-color .2s ease, background .2s ease;
}
.select-wrap[data-ms].ms-open .ms-control { border-color: var(--focus-ring); background: rgba(255,255,255,0.1); }

/* Multi-select can wrap to several lines once options are chosen — a tall pill
   looks bad, so the box adopts the brand's 16px card radius once it holds chips
   (matching how textareas are treated). Single-selects never wrap, so they stay pills. */
.select-wrap[data-ms]:not([data-ms-single]).has-chips .ms-control {
  border-radius: var(--radius-card);
  align-items: flex-start;
  padding-top: 11px; padding-bottom: 11px;
}
/* When the box is closed, collapse the trailing search input so the box hugs the
   chips instead of leaving an empty gap after the last one. */
.select-wrap[data-ms]:not(.ms-open).has-chips .ms-input {
  flex: 0 0 0; width: 0; min-width: 0; height: 0; padding: 0; margin: 0;
}

.ms-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: var(--radius-pill);
  background: rgba(248,244,237,0.10); border: 1px solid var(--hairline);
  color: var(--warm-sand); font-size: .9rem; line-height: 1; white-space: nowrap; max-width: 100%;
}
.ms-chip span { overflow: hidden; text-overflow: ellipsis; }
.ms-chip button {
  flex: none; width: 18px; height: 18px; border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--gold-ochre); border-radius: 50%; transition: background .15s ease, color .15s ease;
}
.ms-chip button:hover { background: rgba(198,156,109,0.18); color: var(--gold-hover); }
.ms-chip button svg { width: 10px; height: 10px; }

.ms-input {
  flex: 1 1 90px; min-width: 90px; height: 30px; border: none; background: none;
  color: var(--warm-sand); font-family: var(--font-family); font-weight: 400; font-size: 1rem;
}
.ms-input::placeholder { color: rgba(248,244,237,.5); }
.ms-input:focus { outline: none; }

.ms-clear {
  position: absolute; top: 14px; right: 16px; width: 22px; height: 22px;
  border: none; background: none; padding: 0; cursor: pointer; color: var(--gold-ochre);
  display: none; align-items: center; justify-content: center; transition: color .15s ease;
}
.ms-clear:hover { color: var(--gold-hover); }
.ms-clear svg { width: 13px; height: 13px; }
.select-wrap[data-ms].has-chips .ms-clear { display: flex; }

.ms-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  background: #243049; border: 1px solid var(--hairline); border-radius: var(--radius-card);
  padding: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 320px;
}
.ms-panel[hidden] { display: none; }
.ms-options { overflow-y: auto; display: flex; flex-direction: column; }
.ms-group { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ochre); padding: 12px 10px 6px; }
.ms-opt { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: .95rem; line-height: 1.4; color: var(--warm-sand); }
.ms-opt:hover, .ms-opt.active { background: var(--tint-06); }
.ms-box { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--gold-ochre); flex: none; display: flex; align-items: center; justify-content: center; }
.ms-opt.sel .ms-box { background: var(--gold-ochre); }
.ms-box svg { width: 11px; height: 11px; opacity: 0; }
.ms-opt.sel .ms-box svg { opacity: 1; }
.ms-empty { padding: 14px 10px; font-size: .9rem; color: var(--fg-on-navy-muted); }

/* ---- Phone field with country dial-code selector ---- */
.phone-field { display: flex; gap: 10px; align-items: stretch; }
.dial-wrap { position: relative; flex: 0 0 auto; }
.dial-btn {
  height: var(--field-height); display: flex; align-items: center; gap: 9px;
  padding: 0 18px; background: var(--tint-08); border: 1px solid transparent;
  border-radius: var(--radius-pill); color: var(--warm-sand);
  font-family: var(--font-family); font-size: 1rem; cursor: pointer; white-space: nowrap;
  transition: border-color .2s ease, background .2s ease;
}
.dial-btn:focus { outline: none; }
.dial-wrap.open .dial-btn, .dial-btn:focus-visible { border-color: var(--focus-ring); background: rgba(255,255,255,0.1); }
.dial-btn .chev {
  width: 8px; height: 8px; border-right: 1.5px solid var(--gold-ochre); border-bottom: 1.5px solid var(--gold-ochre);
  transform: rotate(45deg); transition: transform .2s ease; margin-top: -3px;
}
.dial-wrap.open .dial-btn .chev { transform: rotate(-135deg); margin-top: 2px; }
.phone-field .phone-num { flex: 1 1 auto; min-width: 0; }
.dial-panel { left: 0; right: auto; min-width: 300px; }
.dial-search {
  width: 100%; height: 40px; padding: 0 14px; background: var(--tint-08);
  border: 1px solid var(--hairline); border-radius: 10px; color: var(--warm-sand);
  font-family: var(--font-family); font-size: .95rem; margin-bottom: 6px;
}
.dial-search:focus { outline: none; border-color: var(--focus-ring); }
.dial-search::placeholder { color: rgba(248,244,237,.5); }
.dial-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--warm-sand);
  font-size: .95rem; line-height: 1.4;
}
.dial-opt:hover, .dial-opt.active { background: var(--tint-06); }
.dial-opt .code { color: var(--fg-on-navy-muted); flex: none; }
.dial-opt.sel .code { color: var(--gold-ochre); }

/* Resume upload */
.filefield { position: relative; }
.filefield input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.filedrop {
  display: flex; align-items: center; gap: 16px;
  min-height: var(--field-height); padding: 16px 24px;
  background: var(--tint-sand-04); border: 1px dashed rgba(198,156,109,.55); border-radius: var(--radius-card);
  transition: border-color .2s ease, background .2s ease;
}
.filefield:hover .filedrop { border-color: var(--gold-ochre); background: var(--tint-06); }
.filedrop .fi-icon { width: 38px; height: 38px; flex: none; border-radius: var(--radius-pill); border: 1px solid var(--gold-ochre); display: flex; align-items: center; justify-content: center; }
.filedrop .fi-icon::before { content: ""; width: 13px; height: 13px; border: 1.5px solid var(--gold-ochre); border-bottom: none; border-radius: 3px 3px 0 0; }
.filedrop .fi-text { display: flex; flex-direction: column; gap: 3px; }
.filedrop .fi-text .a { font-size: 1rem; font-weight: 600; color: var(--warm-sand); }
.filedrop .fi-text .b { font-size: .85rem; font-weight: 400; color: var(--fg-on-navy-muted); }

/* Long-answer questions */
.qlist { display: flex; flex-direction: column; gap: 48px; }
.qblock { display: grid; grid-template-columns: 72px 1fr; gap: 28px; }
.qblock .qn { font-size: 2.5rem; font-weight: 600; color: var(--gold-ochre); line-height: 1; padding-top: 1px; }
.qblock .qbody { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qblock .qq { font-size: 1rem; font-weight: 600; color: var(--warm-sand); line-height: 150%; }
.qblock .qh { font-size: .9rem; font-weight: 400; line-height: 150%; color: var(--fg-on-navy-muted); max-width: none; }
.qblock .qq .optmark { font-weight: 400; color: var(--gold-ochre); }
.qcount { font-size: .85rem; font-weight: 400; color: var(--fg-on-navy-muted); text-align: right; margin-top: -6px; }

/* Conditions of application — acknowledgement checkboxes */
.cond-list { display: flex; flex-direction: column; gap: 22px; }
.cond {
  display: grid; grid-template-columns: 28px 1fr; gap: 18px; align-items: start;
  padding: 22px 26px; background: var(--tint-sand-04); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.cond:hover { border-color: rgba(198,156,109,.5); }
.cond input { position: absolute; opacity: 0; width: 0; height: 0; }
.cond .box {
  width: 28px; height: 28px; flex: none; border-radius: 7px;
  border: 1.5px solid var(--gold-ochre); background: transparent;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
  transition: background .2s ease, border-color .2s ease;
}
.cond .box::after {
  content: ""; width: 8px; height: 13px; margin-top: -2px;
  border-right: 2px solid var(--deep-navy); border-bottom: 2px solid var(--deep-navy);
  transform: rotate(45deg) scale(0); transition: transform .18s cubic-bezier(.2,.7,.2,1);
}
.cond input:checked ~ .box { background: var(--gold-ochre); border-color: var(--gold-ochre); }
.cond input:checked ~ .box::after { transform: rotate(45deg) scale(1); }
.cond input:focus-visible ~ .box { box-shadow: 0 0 0 3px var(--focus-ring); }
.cond .ctext { font-size: var(--regular-copy); font-weight: 400; line-height: 160%; color: var(--warm-sand); }
.cond .ctext strong { font-weight: 600; color: var(--warm-sand); }

/* Submit row */
.form-submit { margin-top: 12vh; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.form-submit .note { font-size: .9rem; font-weight: 400; color: var(--fg-on-navy-muted); max-width: 52ch; }
.form-done { text-align: center; max-width: 56ch; margin: 0 auto; display: none; flex-direction: column; align-items: center; gap: 18px; }
.form-done.show { display: flex; padding-top: 14vh; }
.form-done.show ~ * { display: none; }

/* ============================================================
   LEARN MORE (Page 3)
   ============================================================ */
.lm-section .inner { width: 100%; max-width: var(--max-width-narrow); margin: 0 auto; }

/* Reusable in-page section header (eyebrow rule + heading + intro) */
.sec-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 52px; }
.sec-head .eyebrow-row { display: flex; align-items: center; gap: 16px; }
.sec-head .eyebrow-rule { flex: none; width: 40px; height: 1px; background: var(--gold-ochre); }
.sec-head h2 { max-width: 20ch; }
.sec-head .sec-intro { max-width: none; margin-top: 4px; }

/* Reading-width prose */
.prose { max-width: none; display: flex; flex-direction: column; gap: 20px; }
.prose p { font-size: 1.0625rem; font-weight: 400; line-height: 168%; color: var(--warm-sand); margin: 0; }
.prose p strong { font-weight: 600; }
.prose p.muted { color: var(--fg-on-navy-muted); }

/* Focus areas reuse .qual list; intro paragraph */
.lm-intro { max-width: none; }

/* Stage list — full-width horizontal outlined cards, stacked */
.stage-list { display: flex; flex-direction: column; gap: 24px; }
.stage {
  display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start;
  padding: 40px 44px; background: transparent;
  border: 1px solid var(--gold-ochre); border-radius: var(--radius-card);
}
.stage-label { display: flex; flex-direction: column; gap: 6px; }
.stage-label .k { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-on-navy-muted); }
.stage-label .n { font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--gold-ochre); }
.stage-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stage-name { font-size: var(--h3); font-weight: 600; color: var(--warm-sand); line-height: 1.25; }
.stage-desc { font-size: 1.0625rem; font-weight: 400; line-height: 165%; color: var(--warm-sand); max-width: none; }

/* ============================================================
   CONFIRMATION / SUBMISSION RECEIVED (Page 5)
   ============================================================ */
.confirm-stage { min-height: calc(100vh - var(--nav-height)); display: flex; align-items: center; }
.confirm {
  width: 100%; max-width: 760px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  padding: 10vh 0;
}
.confirm .badge {
  width: 84px; height: 84px; border-radius: var(--radius-pill);
  border: 1px solid var(--gold-ochre); display: flex; align-items: center; justify-content: center;
}
.confirm .badge img { width: 38px; height: 38px; }
.confirm .eyebrow-row { display: flex; align-items: center; gap: 16px; }
.confirm .eyebrow-rule { flex: none; width: 40px; height: 1px; background: var(--gold-ochre); }
.confirm h1 { max-width: 20ch; margin: 22px 0; }
.confirm .lead { max-width: 56ch; }
.confirm .hr { width: 56px; height: 1px; background: var(--hairline); margin: 0; }
.confirm .note { max-width: 60ch; margin: 0; font-size: 1rem; font-weight: 400; line-height: 165%; color: var(--fg-on-navy-muted); }
.confirm .note a { color: var(--gold-ochre); font-weight: 600; text-decoration: none; }
.confirm .note a:hover { color: var(--gold-hover); }
.confirm .btn-row { margin-top: 10px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 990px) {
  .bi-h1 { font-size: var(--h1-sm); }
  .bi-h2 { font-size: var(--h2-sm); }
  .bi-h3 { font-size: var(--h3-sm); }
  .nav-links { display: none; }
  .qual { grid-template-columns: 1fr; gap: 14px; }
  .qual-index { padding-top: 0; }
  .faq-a-inner { padding-right: 16px; }
  .faq-q { font-size: 1.1rem; }
  .form-grid { grid-template-columns: 1fr; }
  .field.col-2 { grid-column: span 1; }
  .fsec + .fsec { margin-top: 9vh; }
  .qblock { grid-template-columns: 1fr; gap: 12px; }
  .stage-list { gap: 18px; }
  .stage { grid-template-columns: 1fr; gap: 16px; padding: 30px 28px; }
  .stage-label { flex-direction: row; align-items: baseline; gap: 12px; }
}