/* Aeroinis request forms. Loaded last on every page that asks the visitor
   for a mission, so it wins over the per-page form styles those pages
   grew independently. */

/* ═══════════ Request forms — one shared layer ═══════════
   The four request forms were each invented separately: different card padding,
   different label sizes, different grids, native browser selects on one page and
   styled ones on another. Same company, four form languages. This layer sets the
   rhythm once; the page-local classes only say which grid slots to use. */

form.ai-reqform {
  --form-line: rgba(11,13,15,.14);
  --form-line-strong: rgba(11,13,15,.26);
  display: block;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--form-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 70px -34px rgba(6,16,30,.4);
}

/* The section already carries an <h2>; a second one inside the card competed
   with it and collided with the heading above. Inside the card it is a label. */
form.ai-reqform > h2 {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft, #5B5B57);
}
form.ai-reqform > h2 + p,
form.ai-reqform > .brief-intro {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft, #5B5B57);
}
.ai-reqform > h2 + p + * { margin-top: 0; }

/* One 12-column grid for every form; the field classes only choose a span. */
form.ai-reqform :is(.mission-grid, .critical-grid, .brief-grid),
form.ai-reqform.route-form {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px 16px;
  align-items: start;
}
form.ai-reqform :is(.mission-field, .critical-field, .field) { grid-column: span 3; display: grid; gap: 7px; position: relative; min-width: 0; }
form.ai-reqform :is(.mission-field, .critical-field, .field).wide { grid-column: span 6; }
form.ai-reqform.route-form > :is(.field, .route-row, .inline-fields) { grid-column: span 12; }
form.ai-reqform :is(.mission-field, .critical-field, .field):has(textarea) { grid-column: span 12; }

form.ai-reqform :is(label, .field > span) {
  font-size: .655rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #4A4F55;
}

form.ai-reqform :is(input, select, textarea) {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--form-line);
  border-radius: 10px;
  background: #FCFBF8;
  color: var(--ink, #0B0D0F);
  font: inherit;
  font-size: .94rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
form.ai-reqform :is(input, select, textarea):hover { border-color: var(--form-line-strong); }
form.ai-reqform :is(input, select, textarea):focus {
  outline: none;
  background: #fff;
  border-color: #C8A96A;
  box-shadow: 0 0 0 3px rgba(200,169,106,.28);
}
form.ai-reqform ::placeholder { color: #98938A; }
form.ai-reqform textarea { min-height: 104px; resize: vertical; line-height: 1.5; }

/* Native select chrome was the loudest amateur tell — and on the narrow columns
   it clipped the option text. Custom chevron, room for it, no clipping. */
form.ai-reqform select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, #4A4F55 50%), linear-gradient(135deg, #4A4F55 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

form.ai-reqform :is(.mission-add, .add-dimensions) {
  justify-self: start;
  margin-top: 8px;
  padding: 7px 13px;
  border: 1px dashed var(--form-line-strong);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink, #0B0D0F);
  cursor: pointer;
}
form.ai-reqform :is(.mission-add, .add-dimensions):hover { border-style: solid; border-color: #C8A96A; }

form.ai-reqform :is(.mission-submit, .critical-submit, .submit) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--form-line);
}
form.ai-reqform :is(.mission-submit, .critical-submit, .submit) button {
  border: 0;
  border-radius: 10px;
  background: #0B0D0F;
  color: #F5F4F0;
  padding: 15px 24px;
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
}
form.ai-reqform :is(.mission-submit, .critical-submit, .submit) button:hover { background: #2A3038; }
form.ai-reqform :is(.mission-submit, .critical-submit, .submit) small {
  flex: 1 1 300px;
  max-width: 56ch;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink-soft, #5B5B57);
}
form.ai-reqform.route-form > .submit { grid-column: span 12; }
form.ai-reqform :is(.mission-status, .form-status) { margin: 14px 0 0; min-height: 18px; font-size: .78rem; font-weight: 700; color: #806536; }

form.ai-reqform { container-type: inline-size; container-name: reqform; }

@container reqform (max-width: 880px) {
  form.ai-reqform :is(.mission-field, .critical-field, .field) { grid-column: span 6; }
  form.ai-reqform :is(.mission-field, .critical-field, .field).wide { grid-column: span 12; }
}
@container reqform (max-width: 520px) {
  form.ai-reqform :is(.mission-field, .critical-field, .field),
  form.ai-reqform :is(.mission-field, .critical-field, .field).wide { grid-column: span 12; }
  form.ai-reqform :is(.mission-submit, .critical-submit, .submit) { flex-direction: column; align-items: stretch; }
  form.ai-reqform :is(.mission-submit, .critical-submit, .submit) button { width: 100%; }
}
/* Fallback for engines without container queries: never crush below two columns. */
@supports not (container-type: inline-size) {
  @media (max-width: 1000px) {
    form.ai-reqform :is(.mission-field, .critical-field, .field) { grid-column: span 6; }
    form.ai-reqform :is(.mission-field, .critical-field, .field).wide { grid-column: span 12; }
  }
}

/* The section heading sat flush against the card, so the serif descenders ran
   into its top edge. */
:is(.mission-brief, .critical-brief, .site-evidence) > .wrap > form.ai-reqform,
:is(.brief-head, .section-head) + form.ai-reqform { margin-top: clamp(26px, 3vw, 44px); }

/* A textarea in a 6-column slot gives three lines of a 60-character answer.
   Free-text always takes the full width. */
form.ai-reqform :is(.mission-field, .critical-field, .field):has(textarea),
form.ai-reqform :is(.mission-field, .critical-field, .field).wide:has(textarea) { grid-column: span 12; }

/* The fit-check advisory and the loadability mount sat flush against the card
   edges as bare strips. They are part of the form, so they read like it. */
form.ai-reqform :is(.cargo-fit-advisory, .critical-advisory) {
  margin: 26px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(200,169,106,.5);
  border-left: 3px solid #C8A96A;
  border-radius: 12px;
  background: #FAF6EC;
  color: #4A4238;
  font-size: .82rem;
  line-height: 1.55;
}
form.ai-reqform :is(.cargo-fit-advisory, .critical-advisory) strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink, #0B0D0F);
  font-size: .82rem;
}

.lc-mount:has(> .lc-hint) {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px dashed rgba(11,13,15,.2);
  border-radius: 12px;
  background: rgba(255,255,255,.55);
}
.lc-mount > .lc-hint { margin: 0; font-size: .82rem; color: var(--ink-soft, #5B5B57); }

/* The route-watch form nests its own rows: from → to, and date + passengers.
   Spanning them across the grid without restoring their inner layout stacked
   the airports full width with the arrow marooned between them. */
form.ai-reqform .route-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 14px;
}
form.ai-reqform .route-row > .field { grid-column: auto; }
form.ai-reqform .route-arrow {
  align-self: center;
  margin-bottom: 14px;
  color: #C8A96A;
  font-size: 1.05rem;
  line-height: 1;
}
form.ai-reqform .inline-fields { display: grid; grid-template-columns: 1.4fr .6fr; gap: 16px; }
form.ai-reqform .inline-fields > .field { grid-column: auto; }

/* A stepper stretched to a 12-column row put 900px between − and +. */
form.ai-reqform .ai-stepper {
  display: inline-grid;
  grid-template-columns: 44px minmax(58px, 78px) 44px;
  align-items: stretch;
  justify-self: start;
  border: 1px solid var(--form-line);
  border-radius: 10px;
  overflow: hidden;
  background: #FCFBF8;
}
form.ai-reqform .ai-stepper input {
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-weight: 700;
}
form.ai-reqform .ai-stepper input:focus { box-shadow: none; }
form.ai-reqform .ai-stepper button {
  border: 0;
  background: rgba(11,13,15,.04);
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink, #0B0D0F);
  cursor: pointer;
}
form.ai-reqform .ai-stepper button:hover { background: rgba(200,169,106,.28); }

@container reqform (max-width: 620px) {
  form.ai-reqform .route-row { grid-template-columns: 1fr; }
  form.ai-reqform .route-arrow { justify-self: start; margin: 0; transform: rotate(90deg); }
  form.ai-reqform .inline-fields { grid-template-columns: 1fr; }
}

/* On the route-watch form the submit is a direct child rather than sitting in a
   .submit row, so it missed the shared button style and stretched the full grid
   in a different colour from every other send button on the site. */
form.ai-reqform.route-form > button[type="submit"] {
  grid-column: span 12;
  justify-self: start;
  width: auto;
  margin-top: 10px;
  padding: 15px 24px;
  border: 0;
  border-radius: 10px;
  background: #0B0D0F;
  color: #F5F4F0;
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
}
form.ai-reqform.route-form > button[type="submit"]:hover { background: #2A3038; }
form.ai-reqform.route-form > .form-status { grid-column: span 12; }
@container reqform (max-width: 520px) {
  form.ai-reqform.route-form > button[type="submit"] { justify-self: stretch; width: 100%; }
}

/* Private flight is an explaining page, not a searching one. The form that
   used to sit here never reached the desk properly, and two half-working
   searches are worse than one that works: this hands the visitor to the jet
   desk, where the search actually runs. */
.pf-cta{background:#fff;border:1px solid rgba(11,13,15,.08);border-radius:18px;padding:34px 36px;box-shadow:0 1px 2px rgba(11,13,15,.04),0 20px 48px -28px rgba(11,13,15,.22)}
.pf-cta__lead{margin:0;font:700 .62rem/1 "Satoshi",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8a6f3c}
.pf-cta__h{margin:10px 0 0;font:400 clamp(22px,2.6vw,30px)/1.2 "Newsreader",Georgia,serif;letter-spacing:-.02em;color:#10151C}
.pf-cta__p{margin:12px 0 0;max-width:62ch;color:#4A4D46;line-height:1.65}
.pf-cta__acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.pf-cta__go{display:inline-flex;align-items:center;min-height:52px;padding:0 30px;border-radius:12px;background:#0B0D0F;color:#F5F4F0;text-decoration:none;font:700 .74rem/1 "Satoshi",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:background .2s}
.pf-cta__go:hover{background:#172433}
.pf-cta__alt{font:600 .84rem/1 "Satoshi",system-ui,sans-serif;color:#10151C;text-decoration:none;border-bottom:1px solid #C8A96A;padding-bottom:3px}
.pf-cta .asb-note{margin-top:18px}
@media (max-width:640px){.pf-cta{padding:26px 22px}}

/* touch-type:start — generated by tools/touch-type.mjs, do not edit by hand */
/* iOS zooms the page when a focused control's text is under 16px and does not
   zoom back. max(16px, 1em) raises only what is below the floor: a control
   designed larger keeps its size, and nothing has to be listed by name — which
   matters, because the worst offenders inherit their size rather than being
   given one. Checkboxes and radios are left alone; they have no text. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: max(16px, 1em) !important; }
}
/* touch-type:end */