/* ============================================================ APPLICATION
   The digital employment application (js/apply.js). House materials pushed
   one step further: navy glass panels with a double edge (hairline, gap,
   second hairline), fields that light from within on focus with a navy-to-gold
   gradient edge, a progress ring, and the form's own instructions as tips. */

.ap-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 120px);
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(186, 151, 101, .28), rgba(186, 151, 101, 0) 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(64, 120, 200, .35), rgba(64, 120, 200, 0) 60%),
    linear-gradient(160deg, #0A2A62 0%, #00245D 45%, #001638 100%);
  color: #fff;
}
.ap-hero::before {           /* fine grid, like a slide under a reticle */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 80% at 70% 30%, #000 20%, transparent 75%);
  animation: ap-drift 40s linear infinite;
}
@keyframes ap-drift { to { background-position: 48px 48px, 48px 48px; } }
.ap-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-brand-gold); }
.ap-hero__in { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--layout-gutter); }
.ap-hero .phero__trail { margin-bottom: var(--sp-5); }
.ap-hero h1 { color: #fff; margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); line-height: 1.02; }
.ap-hero h1 .b8 { color: var(--c-gold-1); }
.ap-hero__eo { margin: var(--sp-4) 0 0; font-size: var(--fs-label); font-weight: var(--fw-black); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-1); }
.ap-hero__facts { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.ap-hero__facts span {
  padding: var(--sp-3) var(--sp-4); min-width: 120px;
  background: rgba(255,255,255,.07); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.12);
  font-size: var(--fs-2xs); color: #C6D2E2;
}
.ap-hero__facts b { display: block; font-size: var(--fs-h4); color: #fff; font-weight: var(--fw-bold); }

/* ------------------------------------------------------------- layout */
.ap-wrap { max-width: var(--layout-max); margin: calc(-1 * clamp(40px, 5vw, 72px)) auto 0; padding: 0 var(--layout-gutter) var(--sp-11, 96px); position: relative; z-index: 2; }
#apply { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-7); align-items: start; scroll-margin-top: calc(var(--masthead-h, 150px) + 16px); }

/* Double-edged glass: the house frame (hairline, gap, hairline) on navy glass. */
.ap-rail {
  position: sticky; top: calc(var(--masthead-h, 150px) + 16px);
  padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(170deg, rgba(10, 42, 98, .96), rgba(0, 22, 56, .97));
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 0 5px rgba(0, 36, 93, .08), 0 0 0 6px rgba(186,151,101,.55),
              inset 0 1px 0 rgba(255,255,255,.22), 0 24px 48px -24px rgba(0, 10, 30, .6);
  color: #fff;
}
.ap-ring { position: relative; width: 132px; height: 132px; margin: 0 auto var(--sp-6); }
.ap-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ap-ring circle { fill: none; stroke-width: 6; }
.ap-ring__bg { stroke: rgba(255,255,255,.12); }
.ap-ring__fg { stroke: url(#ap-grad); stroke: var(--c-gold-2); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.22,.61,.36,1); }
.ap-ring__t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ap-ring__t b { font-family: var(--font-display); font-size: 34px; line-height: 1; }
.ap-ring__t span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9DB0C9; }

.ap-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.ap-steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: rgba(255,255,255,.16); }
.ap-step button {
  position: relative; display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-3); align-items: center; width: 100%;
  padding: 8px 6px; background: none; border: 0; cursor: pointer; text-align: left; color: #C6D2E2; font: inherit;
}
.ap-step button:hover { color: #fff; }
.ap-step__n {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #0B2552; box-shadow: 0 0 0 1px rgba(255,255,255,.25); font-size: 13px; font-weight: var(--fw-bold);
}
.ap-step__n svg { width: 16px; height: 16px; fill: none; stroke: #0B2552; stroke-width: 2.4; }
.ap-step__t { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.ap-step__t small { display: block; font-weight: 400; font-size: 12px; color: #8FA3BF; }
.ap-step.is-now .ap-step__n { background: linear-gradient(135deg, var(--c-gold-1), var(--c-brand-gold)); color: #00245D; box-shadow: 0 0 0 4px rgba(186,151,101,.25); }
.ap-step.is-now button { color: #fff; }
.ap-step.is-done .ap-step__n { background: var(--c-gold-1); }
.ap-saved { min-height: 1.4em; margin: var(--sp-5) 0 0; font-size: 12px; color: #8FA3BF; opacity: 0; transition: opacity .4s; }
.ap-saved.is-on { opacity: 1; }
.ap-lock { display: flex; gap: 8px; margin: var(--sp-3) 0 0; font-size: 12px; line-height: 1.4; color: #8FA3BF; }
.ap-lock svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: var(--c-gold-2); stroke-width: 1.6; }

/* --------------------------------------------------------------- card */
.ap-card {
  position: relative; padding: clamp(24px, 3vw, 44px);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,249,251,.97));
  box-shadow: 0 0 0 1px var(--c-cement-3), 0 0 0 6px var(--c-cement-0), 0 0 0 7px rgba(186,151,101,.45),
              0 30px 60px -30px rgba(0, 24, 62, .35);
}
.ap-card__h { margin-bottom: var(--sp-7); }
.ap-card__k { font-size: var(--fs-label); font-weight: var(--fw-black); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-4); }
.ap-card__h h2 { margin: var(--sp-2) 0 var(--sp-4); font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); color: var(--c-brand-navy); }
.ap-card__tip, .ap-tip {
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--c-ink-soft);
}
.ap-card__tip { padding: var(--sp-4) var(--sp-5); background: linear-gradient(90deg, rgba(186,151,101,.14), rgba(186,151,101,.02)); border-left: 3px solid var(--c-brand-gold); }
.ap-card__tip svg, .ap-tip svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--c-gold-4); stroke-width: 1.6; stroke-linecap: round; }
.ap-tip { margin-top: 6px; font-size: 13px; color: var(--c-muted); }

.ap-group + .ap-group { margin-top: var(--sp-8); }
.ap-group__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-4); margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-cement-3); }
.ap-group__h h3 { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-black); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand-navy); }
.ap-group__h p { margin: 0; font-size: 13px; color: var(--c-muted); }

.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-5); }
.ap-field--wide { grid-column: 1 / -1; }
.ap-field[hidden] { display: none; }

/* A field: glass well, floating label, gradient edge that lights on focus. */
.ap-box {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF, #F3F6F9);
  box-shadow: inset 0 1px 2px rgba(16,25,42,.06), 0 0 0 1px var(--c-cement-3);
  transition: box-shadow .25s var(--ease, ease);
}
.ap-box::after {                       /* the lit edge */
  content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0;
  padding: 2px; background: linear-gradient(120deg, var(--c-brand-navy), #3E6CB5 45%, var(--c-brand-gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .25s var(--ease, ease);
}
.ap-box:focus-within { box-shadow: inset 0 1px 2px rgba(16,25,42,.04), 0 10px 24px -14px rgba(0, 36, 93, .45); }
.ap-box:focus-within::after { opacity: 1; }
.ap-box input, .ap-box textarea {
  display: block; width: 100%; border: 0; background: transparent; outline: 0;
  font: inherit; font-size: var(--fs-body); color: var(--c-ink);
  padding: 26px 44px 10px 16px; min-height: 60px;
}
.ap-box textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.ap-float {
  position: absolute; left: 16px; top: 19px; right: 44px; pointer-events: none;
  font-size: var(--fs-body); color: var(--c-muted); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: 0 0; transition: transform .2s var(--ease, ease), color .2s;
}
.ap-box input:focus ~ .ap-float, .ap-box input:not(:placeholder-shown) ~ .ap-float,
.ap-box textarea:focus ~ .ap-float, .ap-box textarea:not(:placeholder-shown) ~ .ap-float,
.ap-field--date .ap-float, .ap-field--month .ap-float {
  transform: translateY(-11px) scale(.72); color: var(--c-gold-4); font-weight: var(--fw-bold); letter-spacing: .02em;
}
.ap-req { margin-left: 8px; font-size: 10px; font-weight: var(--fw-black); letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold-4); }
.ap-ok { position: absolute; right: 12px; top: 18px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-gold-1), var(--c-brand-gold)); transform: scale(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.ap-ok svg { width: 14px; height: 14px; fill: none; stroke: #00245D; stroke-width: 2.6; }
.ap-field.is-ok .ap-ok { transform: scale(1); }
.ap-field--ssn .ap-ok, .ap-field--money .ap-ok { right: 48px; }
.ap-field.is-bad .ap-box { box-shadow: 0 0 0 2px #B3261E; }
.ap-field.is-bad .ap-float { color: #B3261E; }
.ap-eye { position: absolute; right: 8px; top: 12px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; }
.ap-eye svg { width: 20px; height: 20px; fill: none; stroke: var(--c-muted); stroke-width: 1.6; }
.ap-field--money input { padding-left: 30px; }
.ap-field--money .ap-float { left: 30px; }
.ap-affix { position: absolute; left: 16px; top: 26px; color: var(--c-muted); }
.ap-field--date input, .ap-field--month input { padding-right: 16px; }

/* Segmented Yes/No and choices. */
.ap-label { display: block; margin-bottom: 10px; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-ink); font-weight: var(--fw-bold); }
.ap-seg { display: inline-flex; padding: 4px; gap: 4px; background: linear-gradient(180deg, #EEF2F6, #E4E9EF); box-shadow: inset 0 1px 2px rgba(16,25,42,.08), 0 0 0 1px var(--c-cement-3); }
.ap-seg__opt { position: relative; cursor: pointer; }
.ap-seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ap-seg__opt span { display: block; min-width: 96px; padding: 10px 18px; text-align: center; font-weight: var(--fw-bold); color: var(--c-brand-navy); transition: background .2s, color .2s, box-shadow .2s; }
.ap-seg__opt input:checked + span { background: linear-gradient(135deg, #0A2A62, #00245D); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 14px -8px rgba(0,36,93,.8); }
.ap-seg__opt input:focus-visible + span { outline: 3px solid var(--c-focus-ring); outline-offset: 2px; }

/* Repeating rows (colleges, employers, references). */
.ap-row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-5) 0; }
.ap-row + .ap-row { border-top: 1px dashed var(--c-cement-3); }
.ap-row__n { display: grid; justify-items: center; align-content: start; gap: 2px; }
.ap-row__n span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.ap-row__n b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-display); font-size: 20px; color: var(--c-brand-navy);
  background: #fff; box-shadow: 0 0 0 1px var(--c-cement-3), 0 0 0 4px #fff, 0 0 0 5px rgba(186,151,101,.6); }
.ap-add {
  display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sp-3); padding: 12px 18px; cursor: pointer;
  font: inherit; font-weight: var(--fw-bold); color: var(--c-brand-navy);
  background: linear-gradient(180deg, #fff, #F1F4F8); border: 1px dashed var(--c-brand-gold);
}
.ap-add:hover { background: #fff; box-shadow: 0 8px 18px -12px rgba(0,36,93,.5); }
.ap-add svg { width: 16px; height: 16px; fill: none; stroke: var(--c-gold-4); stroke-width: 2; }
.ap-add span { font-weight: 400; color: var(--c-muted); font-size: 13px; }

/* Chips that write into the skills box. */
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--c-cement-2); }
.ap-chip { padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: var(--fw-bold); color: var(--c-brand-navy);
  background: #fff; border: 1px solid var(--c-cement-3); transition: border-color .2s, background .2s; }
.ap-chip:hover { border-color: var(--c-brand-gold); }
.ap-chip.is-used { background: rgba(186,151,101,.16); border-color: var(--c-brand-gold); }

/* Resume drop zone. */
.ap-drop { display: grid; place-items: center; gap: 4px; padding: var(--sp-7); cursor: pointer; text-align: center;
  background: repeating-linear-gradient(135deg, rgba(0,36,93,.025) 0 10px, transparent 10px 20px), #fff; border: 1.5px dashed var(--c-cement-4); }
.ap-drop:hover { border-color: var(--c-brand-gold); }
.ap-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ap-drop__t { font-weight: var(--fw-bold); color: var(--c-brand-navy); }
.ap-drop__s { font-size: 13px; color: var(--c-muted); }

/* Certification, signature, review. */
.ap-cert { max-height: 240px; overflow: auto; padding: var(--sp-5) var(--sp-6); background: #fff; box-shadow: inset 0 0 0 1px var(--c-cement-3); }
.ap-cert p { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--c-ink-soft); }
.ap-agree { display: flex; gap: 12px; align-items: center; margin: var(--sp-4) 0 var(--sp-6); font-weight: var(--fw-bold); color: var(--c-brand-navy); cursor: pointer; }
.ap-agree input { width: 22px; height: 22px; accent-color: #00245D; }
.ap-sig { position: relative; background: linear-gradient(180deg, #fff, #F7F9FB); box-shadow: 0 0 0 1px var(--c-cement-3); }
.ap-sig canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
.ap-sig__line { position: absolute; left: 24px; right: 24px; bottom: 34px; border-top: 1px solid var(--c-cement-4); padding-top: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); pointer-events: none; }
.ap-sig.is-signed .ap-sig__line { color: transparent; }
.ap-sig__clear { position: absolute; right: 10px; top: 10px; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; background: #fff; border: 1px solid var(--c-cement-3); color: var(--c-brand-navy); }
.ap-review .ap-rev { background: #fff; box-shadow: 0 0 0 1px var(--c-cement-3); }
.ap-rev + .ap-rev { margin-top: 8px; }
.ap-rev summary { display: grid; grid-template-columns: 32px 1fr auto auto; gap: var(--sp-3); align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: var(--fw-bold); color: var(--c-brand-navy); }
.ap-rev summary::-webkit-details-marker { display: none; }
.ap-rev__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-cement-1); font-size: 13px; }
.ap-rev em { font-style: normal; font-size: 12px; font-weight: var(--fw-bold); padding: 3px 10px; }
.ap-rev em.ok { background: rgba(186,151,101,.2); color: var(--c-gold-5, #6E5836); }
.ap-rev em.todo { background: #FCEBEA; color: #8C1D18; }
.ap-rev summary button { font: inherit; font-size: 13px; padding: 4px 10px; background: none; border: 1px solid var(--c-cement-3); cursor: pointer; color: var(--c-brand-navy); }
.ap-rev dl { margin: 0; padding: 4px 16px 14px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.ap-rev dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.ap-rev dd { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--c-ink); word-break: break-word; }
.ap-rev__empty { margin: 0; padding: 0 16px 14px 60px; font-size: 13px; color: var(--c-muted); }

/* Navigation. */
.ap-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--c-cement-3); }
.ap-nav__s { font-size: 13px; color: var(--c-muted); }
.ap-btn { font: inherit; font-weight: var(--fw-black); letter-spacing: .08em; text-transform: uppercase; font-size: 13px; padding: 16px 26px; min-height: 52px; cursor: pointer; border: 0; }
.ap-btn--gold { color: #00245D; background: linear-gradient(135deg, var(--c-gold-1), var(--c-brand-gold) 60%, #A7864F);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 22px -12px rgba(110, 88, 54, .8); }
.ap-btn--gold:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ap-btn--ghost { color: var(--c-brand-navy); background: #fff; box-shadow: 0 0 0 1px var(--c-cement-4); }

/* Done. */
.ap-done { grid-column: 1 / -1; text-align: center; padding: var(--sp-11, 96px) var(--sp-6); background: #fff;
  box-shadow: 0 0 0 1px var(--c-cement-3), 0 0 0 6px #fff, 0 0 0 7px rgba(186,151,101,.45); }
.ap-done__mark { width: 84px; height: 84px; margin: 0 auto var(--sp-6); border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-gold-1), var(--c-brand-gold)); box-shadow: 0 0 0 8px rgba(186,151,101,.18); }
.ap-done__mark svg { width: 40px; height: 40px; fill: none; stroke: #00245D; stroke-width: 2.4; }
.ap-done h2 { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h2); color: var(--c-brand-navy); margin: 0 0 var(--sp-4); }
.ap-done h2 .b8 { color: var(--c-gold-4); }
.ap-done p { color: var(--c-ink-soft); }
.ap-done__note { font-size: 13px; color: var(--c-muted) !important; }

@media (max-width: 1000px) {
  #apply { grid-template-columns: minmax(0, 1fr); }   /* minmax: the step scroller must not widen the page */
  .ap-rail { position: static; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
  .ap-ring { width: 110px; height: 110px; margin: 0; }
  .ap-steps { display: flex; overflow-x: auto; gap: 6px; }
  .ap-steps::before { display: none; }
  .ap-step__t small { display: none; }
  .ap-saved, .ap-lock { grid-column: 1 / -1; }
  .ap-hero__in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ap-grid { grid-template-columns: 1fr; }
  .ap-row { grid-template-columns: 1fr; }
  .ap-row__n { justify-items: start; grid-auto-flow: column; align-items: center; gap: 8px; }
  .ap-rev dl { grid-template-columns: 1fr; padding-left: 16px; }
  .ap-nav { flex-wrap: wrap; } .ap-nav__s { order: -1; width: 100%; }
  .ap-rail { grid-template-columns: minmax(0, 1fr); } .ap-ring { margin: 0 auto; }
}
@media print {
  .masthead, .foot, .ap-rail, .ap-nav, .ap-hero::before { display: none !important; }
  #apply { display: block; }
}
@media (prefers-reduced-motion: reduce) { .ap-hero::before { animation: none; } }
.ap-rev em.opt { background: var(--c-cement-1); color: var(--c-muted); }

/* Error text beside the field (WCAG 3.3.1): the red outline is not the only signal. */
.ap-err { display: block; margin-top: 6px; color: #B3261E; font-size: 15px; font-weight: 600; }
.ap-err::before { content: "! "; font-weight: 800; }

/* Applicant notice under the form. */
.ap-legal { max-width: 860px; margin: var(--sp-6, 32px) auto 0; font-size: 15px; line-height: 1.6; color: var(--c-ink-soft, #475467); }
.ap-legal a { color: var(--c-brand-navy); text-decoration: underline; }

/* Start over: clears the answers saved in this browser. */
.ap-clear { display: block; margin-top: var(--sp-4, 16px); min-height: 44px; padding: 8px 0; background: none; border: 0;
  color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.ap-clear:hover { color: var(--c-gold-1, #E3CDA8); }
/* Phone QC 2026-09-25: three long position names ran the choice bar 10px
   past the screen. The options wrap and share the width. */
@media (max-width: 640px) {
  .ap-field { min-width: 0; }
  .ap-seg { display: flex; flex-wrap: wrap; max-width: 100%; }
  .ap-seg__opt { flex: 1 1 auto; min-width: 0; }
}
/* 2026-09-25: the application uses the site's picture header (.phero, lock
   film). The form starts below it instead of overlapping it. */
.phero--apply + .ap-wrap { margin-top: var(--sp-8); }