/* Contact us — frame contact-us[1:1923] / contact-us-mobile[81:4]. */

/* ── hero (contact-us[39:424]) ────────────────────────────────────────── */
/* headline-stack[39:430]: 72/68.4 without tracking — the mockup leaves the
   letter-spacing at 0 here, unlike the homepage hero. */
.hero__title .hero__line,
.hero__title .hero__mark { letter-spacing: normal; }

/* support-email[124:54] is plain 16/20.16 Medium text, not a button */
.hero__email { font-size: var(--fs-body); line-height: 20.16px; font-weight: 500; }
.hero__email a { color: inherit; text-decoration: none; }
.hero__email a:hover { color: var(--color-violet); text-decoration: underline; text-underline-offset: 2px; }

/* hero-right-graphic[39:440]: violet 528×520 panel, its content centred —
   a lime disc with «?» over a stack of three plaques joined by arrows. */
.contact-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-16);
  height: 520px; padding: var(--space-40);
  border-radius: var(--radius-sm); background: var(--color-violet); color: #fff;
}
/* q-mark-box[39:442]: 80×80 lime disc, «?» 48/60.48 */
.contact-card__mark {
  flex: none; display: grid; place-items: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--color-lime); color: var(--color-ink);
  font-size: 48px; line-height: 60.48px; font-weight: 800;
}
/* plaques-flow[39:444]: plaque 31 high, arrow 16, gaps 8 → 32 between plaques */
.contact-card__steps {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-32);
  list-style: none; margin: 0; padding: 0;
}
.contact-card__step {
  position: relative;
  padding: 8px var(--space-16); border-radius: 8px;
  font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800; text-transform: uppercase;
}
.contact-card__step--1 { background: var(--color-lime); color: var(--color-ink); }
.contact-card__step--2 { background: #fff; color: var(--color-ink); }
.contact-card__step--3 { background: var(--color-ink); color: #fff; }
/* arrow-down[39:447]: a 2px ink chevron centred in the 32px gap above */
.contact-card__step + .contact-card__step::before {
  content: ""; position: absolute; left: 50%; top: -22px;
  width: 9px; height: 9px; margin-left: -6px;
  border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink);
  transform: rotate(45deg);
}

/* ── support plaque + form, one section (contact-us[39:486]) ──────────── */
.contact__split { display: flex; gap: var(--space-32); align-items: flex-start; }

/* left-support-plaque[39:487]: 384 wide, dark, 40 padding, 28 gaps */
.quick {
  flex: 0 0 384px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-28);
  padding: var(--space-40); border-radius: var(--radius-sm);
  background: var(--color-ink); color: #fff;
}
.quick__kicker {
  font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800;
  letter-spacing: 0.72px; text-transform: uppercase; color: var(--color-lime);
}
/* 39:489 — 56/53, tracking 0 in the mockup */
.quick__title { font-size: 56px; line-height: 53px; font-weight: 800; text-transform: uppercase; letter-spacing: normal; }
.quick__text { font-size: var(--fs-small); line-height: 21px; opacity: .8; }
.quick__cta { align-self: flex-start; padding: 12px 24px; font-size: var(--fs-xs); line-height: 16.38px; }
.quick__rule { height: 1px; border: 0; margin: 0; background: #fff; opacity: .12; }
.quick__note { font-size: var(--fs-xs); line-height: 20px; max-width: 304px; opacity: .7; }
/* bg-q[39:495]: a 140px lime disc at 8% behind the lower corner, with a «?»
   at 12% inside it — decoration only, hence the near-zero contrast. */
.quick__mark {
  position: absolute; right: -24px; bottom: -24px; z-index: 0; opacity: .08;
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--color-lime); color: rgba(200, 255, 0, .12);
  display: grid; place-items: center;
  font-size: 72px; line-height: 91px; font-weight: 800;
}
.quick > *:not(.quick__mark) { position: relative; z-index: 1; }

/* contact-form-card[39:497]: 944 wide, 48 padding, 32 gaps */
.contact__card {
  flex: 1 1 944px; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-32);
  padding: var(--space-48); border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
/* form-heading[39:498]: gap 12, 12/15.12 + 40/50.4 + 14/21 */
.contact .section-head__stack { gap: var(--space-12); }
.contact .section-head__kicker { letter-spacing: 0.72px; }
.contact .section-title--sm { font-size: var(--fs-h4); line-height: 50.4px; letter-spacing: normal; }
.contact .section-lead { font-size: var(--fs-small); line-height: 21px; opacity: .8; }

/* ── form (contact-us[39:502]) ────────────────────────────────────────── */
/* form-fields gap 24, row-names gap 16, every field label→input gap 10 */
.contact-form { display: flex; flex-direction: column; gap: var(--space-24); }
.contact-form .form-row { gap: var(--space-16); }
.contact-form .field { gap: var(--space-10); }
/* field-label[39:505]: 11/14, Bold, 0.88 tracking */
.contact-form .field__label { font-weight: 700; letter-spacing: 0.88px; }
/* input-wrapper[39:506]: 52 high, sand fill, 1px border, text 14/18 at 17/16 */
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea {
  padding: 17px var(--space-16);
  background: var(--color-sand);
}
.contact-form .field textarea { min-height: 160px; padding-block: 16px; }
.contact-form .field ::placeholder { color: var(--color-ink); opacity: .5; }
/* consent-checkbox-row[39:530]: 20px box, gap 12, wording 13/16.38 at 0.8 */
.contact-form .checkbox { gap: var(--space-12); font-size: var(--fs-xs); line-height: 16.38px; }
.contact-form .checkbox input { width: 20px; height: 20px; margin-top: 0; }
.contact-form .checkbox > span { opacity: .8; }
/* form-footer[39:535]: note left, 187×48 button right, both on one row */
.contact-form__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
.contact-form__note { font-size: var(--fs-xs); line-height: 16.38px; color: var(--color-ink); opacity: .6; }
.contact-form__submit { flex: none; min-height: 48px; padding: 15px var(--space-32); }

.contact-done {
  display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start;
  padding: var(--space-32); border-radius: var(--radius-sm); background: var(--color-lime);
}
.contact-done .modal-tick { margin-inline: 0; background: var(--color-ink); color: var(--color-lime); }
.contact-done a { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1199px) {
  /* contact-hero[81:20]: six children, 24 apart, pad 32/16/40 */
  .hero__inner, .hero__left { gap: var(--space-24); }
  .eyebrow { font-size: var(--fs-3xs); line-height: 14px; font-weight: 700; letter-spacing: 0.88px; gap: var(--space-8); }
  .eyebrow::before { width: 8px; height: 8px; }
  /* headline-stack[81:24]: 44/41.8, rows 4 apart, «NEED.» 8 under «WHAT YOU» */
  .hero__title { gap: var(--space-4); }
  .hero__line { font-size: 44px; line-height: 41.8px; }
  .hero__line--2 { gap: var(--space-8); }
  .hero__mark { padding: 2px 10px; }
  .hero__lead { font-weight: 500; }
  /* support-email[124:55]: 14/18 Medium, still plain text */
  .hero__email { font-size: var(--fs-small); line-height: 18px; }
  /* cta-button-outlined[81:31]: 358×44, full width, centred 13/16.38 */
  .hero__ctas .btn--ghost { width: 100%; padding-block: 13px; font-size: var(--fs-xs); line-height: 16.38px; }
  /* process-panel[81:33]: 358×253, pad 24, gap 16; badge 56; plaques 6 apart */
  .contact-card { height: 253px; padding: var(--space-24); gap: var(--space-16); }
  .contact-card__mark { width: 56px; height: 56px; font-size: 32px; line-height: 40.32px; }
  .contact-card__steps { gap: 26px; }
  .contact-card__step { padding: 6px var(--space-12); border-radius: 6px; }
  .contact-card__step + .contact-card__step::before { top: -19px; width: 8px; height: 8px; margin-left: -5px; }

  /* the mobile frame stacks the plaque above the form (contact-us-mobile[81:47]) */
  .contact__split { flex-direction: column; gap: 0; }
  /* quick-answer[81:47] runs edge to edge: 390 wide, no radius, pad 24, gap 20 */
  .quick {
    flex: 1 1 auto; gap: var(--space-20); border-radius: 0;
    padding: var(--space-24);
    margin-inline: calc(var(--container-pad-m) * -1);
  }
  .quick__kicker { font-size: var(--fs-3xs); line-height: 14px; font-weight: 700; letter-spacing: 0.88px; }
  .quick__title { font-size: var(--fs-h6); line-height: 31px; }
  .quick__text { font-size: var(--fs-xs); line-height: 18.2px; font-weight: 500; }
  .quick__cta { align-self: stretch; width: 100%; padding-block: 14px; }
  .quick__note { font-size: var(--fs-2xs); line-height: 18px; max-width: none; }
  .quick__mark { display: none; }
  .contact__card { flex: 1 1 auto; padding: 0; box-shadow: none; gap: var(--space-32); }

  /* contact-form-section[81:55]: pad 40/48, groups 32 apart */
  .contact { padding-block: var(--space-40) var(--space-48); }
  /* form-header[81:56]: gap 10, 11/14 + 18/21.6 + 13/18 → 92 */
  .contact .section-head__stack { gap: var(--space-10); }
  .contact .section-head__kicker { font-size: var(--fs-3xs); line-height: 14px; font-weight: 700; letter-spacing: 0.88px; }
  .contact .section-title--sm { font-size: var(--fs-lg); line-height: 21.6px; }
  .contact .section-lead { font-size: var(--fs-xs); line-height: 18px; font-weight: 500; }
  /* form-fields[81:60]: every field 70 high (label 14 + gap 8 + input 48), the
     message field 162 (textarea 140); the mobile frame stacks all six 16 apart */
  .contact-form { gap: var(--space-16); }
  .contact-form .field { gap: var(--space-8); }
  .contact-form .field input,
  .contact-form .field select { padding-block: 15px; }
  .contact-form .field textarea { min-height: 140px; }
  /* consent-row[81:87] 13/18; submit-stack[81:92] stacks note over a full button */
  .contact-form .checkbox { line-height: 18px; }
  .contact-form__footer { flex-direction: column; align-items: stretch; gap: var(--space-16); }
  .contact-form__note { font-size: var(--fs-2xs); line-height: 15.12px; }
  .contact-form__submit { width: 100%; min-height: 48px; }
  .contact-done { padding: var(--space-20); }
}