/* ══════════════════════════════════════════════════════════════════
   Corbit — Contact page
   Ported 1:1 from the "Corbit Contact- Final" canvas.
   Sections: hero · intent router + form · direct channels · pre-call answers
   ══════════════════════════════════════════════════════════════════ */

/* ═══════════ 02 · INTENT ROUTER + FORM ═══════════ */
.request {
  background: var(--white);
  border-top: 1px solid var(--border-main);
}
.request__inner { padding: 40px var(--gutter-narrow); }

.request__title {
  margin: 0 0 34px;
  font-size: 34px;
  line-height: 1.45;
  font-weight: var(--fw-black);
  letter-spacing: -.02em;
  color: var(--black);
  max-width: 620px;
}

/* the router: picking a subject retunes the form and the column beside it */
.intents {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.intent {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  background: var(--white);
  color: var(--gray-1100);
  border: 1px solid var(--border-strong);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.intent::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--gray-400);
  transition: background .18s ease;
}
.intent.is-active {
  background: var(--blue-8);
  color: var(--white);
  border-color: var(--blue-8);
}
.intent.is-active::before { background: var(--mint-7); }

.request__panel {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  border: 1px solid var(--border-strong);
}

/* ── Form column ──────────────────────────────────────────────────── */
.request__form {
  padding: 40px 40px 36px;
  border-left: 1px solid var(--border-main);
}
.request__form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.request__form-title {
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--black);
}
.request__code {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  color: var(--gray-800);
  white-space: nowrap;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.field__label {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--gray-1100);
}
/* form controls don't inherit the page font by default — without this the
   inputs and the textarea fall back to the browser's own family */
.field input,
.field select,
.field textarea {
  box-sizing: border-box;
  font-family: inherit;
  border: 1px solid var(--border-strong);
  background: var(--white);
  font-size: 14.5px;
  color: var(--black);
  outline: none;
  border-radius: 0;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input,
.field select {
  height: 48px;
  padding: 0 14px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue-8);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(1, 233, 197, .16);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--gray-700); }
.field input.is-invalid { border-color: var(--red-600); }

/* native select, brand chevron */
.select-wrap {
  position: relative;
  display: block;
}
.select-wrap select {
  width: 100%;
  padding: 0 14px 0 40px;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.select-wrap__chevron {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
  color: var(--gray-800);
}

.field--message { margin-top: 22px; }
.field--message .field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.field__counter {
  direction: ltr;
  font-size: 10.5px;
  color: var(--gray-700);
}
.field textarea {
  padding: 14px;
  line-height: 1.9;
  resize: vertical;
}

.request__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.request__actions-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn--submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 28px;
  background: var(--blue-8);
  color: var(--white);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  transition: background .16s ease, transform .16s ease;
}
.btn--submit:hover { background: var(--blue-7); }
.request__hint {
  font-size: 14px;
  color: var(--gray-800);
}
.request__privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray-800);
  max-width: 380px;
}
.request__privacy svg { flex-shrink: 0; }

@keyframes corbitShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.btn--submit.is-shaking { animation: corbitShake .28s ease; }

/* ── Success state ────────────────────────────────────────────────── */
.request__success {
  min-height: 430px;
  display: none;
  flex-direction: column;
  justify-content: center;
}
.request__panel.is-sent .request__success { display: flex; }
.request__panel.is-sent .request__body { display: none; }

@keyframes corbitDash { to { stroke-dashoffset: 0; } }
.success__mark {
  width: 56px;
  height: 56px;
  border: 2px solid var(--mint-7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}
.success__mark path {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: corbitDash .5s cubic-bezier(.22, .61, .36, 1) .1s forwards;
}
.success__title {
  font-size: 26px;
  font-weight: var(--fw-black);
  letter-spacing: -.02em;
  color: var(--black);
  margin-bottom: 14px;
}
.success__text {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 2.1;
  color: var(--gray-1100);
  max-width: 460px;
}
.success__table {
  border-top: 1px solid var(--border-main);
  max-width: 460px;
}
.success__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-main);
}
.success__key { font-size: 13.5px; color: var(--gray-1000); }
.success__ticket {
  direction: ltr;
  font-family: var(--font-fa);
  font-size: 12.5px;
  color: var(--blue-8);
}
.success__value {
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--black);
}
.success__reset {
  margin-top: 28px;
  align-self: flex-start;
  height: 46px;
  padding: 0 22px;
  border: 1px solid var(--border-strong);
  background: transparent;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--black);
  transition: border-color .16s ease;
}
.success__reset:hover { border-color: var(--black); }

/* ── Context column ───────────────────────────────────────────────── */
.request__context {
  padding: 40px 36px;
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
}
.request__context-label {
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--gray-800);
  margin-bottom: 20px;
}
.request__points { border-top: 1px solid var(--border-main); }
.request__points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-main);
  font-size: 14px;
  line-height: 1.95;
  color: var(--gray-1100);
}
.request__points li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--mint-7);
  margin-top: 8px;
}
.request__assure {
  margin-top: auto;
  padding-top: 28px;
}
.request__assure-card {
  border: 1px solid var(--border-strong);
  background: var(--white);
  padding: 20px 22px;
}
.request__assure-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--black);
}
.request__assure-head svg { color: var(--blue-8); flex-shrink: 0; }
.request__assure-text {
  font-size: 14px;
  line-height: 1.95;
  color: var(--gray-1000);
}

/* ═══════════ 03 · DIRECT CHANNELS ═══════════ */
.channels { background: var(--white); }
.channels__inner { padding: 40px var(--gutter-narrow) 92px; }
.channels__title {
  margin: 0 0 44px;
  font-size: 40px;
  line-height: 1.45;
  font-weight: var(--fw-black);
  letter-spacing: -.025em;
  color: var(--black);
}
.channels__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.channel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  background: var(--white);
  border: 1px solid var(--border-strong);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.channel__edge {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 3px;
  background: var(--mint-7);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.channel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
}
.channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  color: var(--blue-8);
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.channel__kind {
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--gray-800);
}
.channel__value {
  display: block;
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -.015em;
  line-height: 1.6;
  color: var(--black);
  margin-bottom: 12px;
  transition: color .22s ease;
}
.channel__value--ltr {
  direction: ltr;
  text-align: right;
}
.channel__value .brand { color: var(--blue-8); }
.channel__desc {
  display: block;
  font-size: 16px;
  line-height: 1.95;
  color: var(--gray-1000);
  margin-bottom: 26px;
}
.channel__foot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border-main);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--blue-8);
}
.channel:hover {
  border-color: var(--blue-8);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 19, 75, .1);
}
.channel:hover .channel__edge { transform: scaleX(1); }
.channel:hover .channel__value { color: var(--blue-8); }
.channel:hover .channel__icon {
  background: var(--blue-8);
  border-color: var(--blue-8);
  color: var(--white);
}
.channel:hover .arrow { transform: translateX(-5px); }

/* ═══════════ 04 · PRE-CALL ANSWERS ═══════════ */
.answers {
  background: var(--gray-50);
  border-top: 1px solid var(--border-main);
}
.answers__inner { padding: 40px var(--gutter-narrow) 92px; }
.answers__title {
  margin: 0 0 44px;
  font-size: 40px;
  line-height: 1.45;
  font-weight: var(--fw-black);
  letter-spacing: -.025em;
  color: var(--black);
}
.answers__list { border-top: 1px solid var(--border-strong); }
.answer {
  display: grid;
  grid-template-columns: 60px 1fr 1.35fr;
  gap: 32px;
  align-items: baseline;
  padding: 26px 20px 28px 8px;
  border-bottom: 1px solid var(--border-main);
  background: transparent;
  box-shadow: none;
  transition: background .25s ease, box-shadow .25s ease;
}
.answer:last-child { border-bottom-color: var(--border-strong); }
.answer__num {
  direction: ltr;
  text-align: right;
  font-family: var(--font-fa);
  font-size: 12px;
  letter-spacing: .06em;
  color: #9096A3;
  transition: color .25s ease;
}
.answer__q {
  font-size: 19px;
  font-weight: var(--fw-bold);
  line-height: 1.7;
  color: var(--black);
  transition: color .25s ease;
}
.answer__a {
  font-size: 16px;
  line-height: 2;
  color: var(--gray-1000);
}
.answer:hover {
  background: var(--white);
  box-shadow: inset 3px 0 0 -1px var(--mint-7);
}
.answer:hover .answer__q { color: var(--blue-8); }
.answer:hover .answer__num { color: var(--mint-9); }

/* ══════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .request__panel { grid-template-columns: 1fr; }
  .request__form { border-left: 0; border-bottom: 1px solid var(--border-main); }
  .channels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* chips of six different lengths wrap into a ragged block — stack
     them into one clean list instead */
  .intents { flex-direction: column; align-items: stretch; }
  .intent { width: 100%; justify-content: flex-start; }
}

@media (max-width: 980px) {
  .request__title { font-size: 26px; }
  .request__form { padding: 28px 24px; }
  .request__context { padding: 28px 24px; }
  .request__actions { align-items: flex-start; }
  .request__form-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .channels__inner,
  .answers__inner { padding: 40px var(--gutter-narrow) 64px; }
  .channels__title,
  .answers__title { font-size: 28px; margin-bottom: 32px; }

  .answer {
    grid-template-columns: 40px 1fr;
    gap: 10px 20px;
    padding: 22px 16px 24px 8px;
  }
  .answer__a { grid-column: 2; }
  .answer__q { font-size: 17px; }
}

@media (max-width: 620px) {
  .field-grid { grid-template-columns: 1fr; }
  .channels__grid { grid-template-columns: 1fr; }
  .request__actions-main { flex-direction: column; align-items: flex-start; }
  .btn--submit { width: 100%; justify-content: center; }
  .channel__value { font-size: 19px; }
}

/* ── Form plumbing ────────────────────────────────────────────────
   The honeypot is removed from the reading and tabbing order without
   display:none, which some bots detect. */
.request__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Server-side failure, shown above the submit row. */
.request__error {
    margin: 0 0 var(--space-16);
    padding: var(--space-12) var(--space-16);
    border: var(--border-1) solid var(--red-200);
    border-radius: var(--radius-8);
    background: var(--surface-negative-soft);
    color: var(--content-negative);
    font-size: var(--body-small);
    line-height: var(--lh-body-small);
}

.btn--submit[aria-busy="true"] {
    opacity: .62;
    pointer-events: none;
}