/* =====================================================================
   Express Interest page — layout, form controls, contact rail
   ===================================================================== */

.page-form {
  background: var(--wash);
}

/* ---------- Layout ---------- */
.xi-main {
  padding-block: clamp(12px, 1.6vw, 20px) clamp(56px, 8vw, 100px);
}

.xi-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* No side rail right now (it's commented out) — let the form card stand
   alone, centred, instead of pinned left with dead space beside it. Using
   :has() means the two-column layout comes back on its own if the rail
   is ever restored. */
.xi-layout:has(> .xi-card:only-child) {
  display: block;
  max-width: 1180px;
  margin-inline: auto;
}

/* ---------- Form card ---------- */
.xi-card {
  padding: clamp(26px, 3.6vw, 44px);
  border-radius: 2px;
}

.xi-card__title {
  font-weight: 800;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.15;
  letter-spacing: var(--track-h3);
  color: var(--ink);
}

.xi-form-embed {
  display: block;
  margin-top: 24px;
}

/* ---------- Side rail ---------- */
.xi-side {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 14px;
}

.xi-side__title {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: var(--track-h3);
  color: var(--ink);
  margin-bottom: 2px;
}

.xi-contact {
  display: grid;
  gap: 14px;
  padding: 24px;
  border-radius: 2px;
  background: #fff;
  border: 1px solid var(--line);
}

.xi-contact h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.xi-orgcard {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 24px;
  border-radius: 2px;
  background: var(--plate);
  color: var(--on-plate);
}

.xi-orgcard small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.xi-orgcard img {
  height: 38px;
  width: auto;
  background: #fff;
  padding: 6px 10px;
  border-radius: 2px;
}

.xi-orgcard p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-plate-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .xi-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .xi-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    margin-top: 28px;
  }

  .xi-side__title {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .xi-side {
    grid-template-columns: minmax(0, 1fr);
  }
}