/* "Get in Contact" button (info bar) + popup form. Colors/fonts follow the Figma page. */
.contact-open {
  font: 700 14px/16px 'Work Sans', sans-serif;
  color: #ffffff;
  background: #3b827d;
  border: 0;
  border-radius: 2px;
  padding: 11px 20px;
  cursor: pointer;
  flex: none;
  transition: background-color .15s ease;
}
.contact-open:hover { background: #2f6b67; }
.contact-open:focus-visible, .contact-submit:focus-visible, .contact-close:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 4px #3b827d; }

.contact-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #ffffff;
  color: #3a4250;
  box-shadow: 0 24px 64px rgba(22, 30, 42, .28);
  overflow: auto;
}
.contact-dialog::backdrop { background: rgba(22, 30, 42, .6); }
.contact-dialog[open] { animation: contact-in .18s ease-out; }
@keyframes contact-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.contact-form, .contact-done { position: relative; padding: 48px 48px 44px; display: flex; flex-direction: column; gap: 16px; }
.contact-close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px;
  border: 0; background: none; color: #161e2a; font: 400 30px/1 'Work Sans', sans-serif; cursor: pointer; border-radius: 2px;
}
.contact-close:hover { background: #f5f5f5; }
.contact-eyebrow { margin: 0; font: 600 14px/16px 'Work Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3b827d; }
.contact-title { margin: 0; font: 400 40px/52px 'EB Garamond', serif; color: #161e2a; }
.contact-lede { margin: 0 0 8px; font: 400 17px/27px 'Work Sans', sans-serif; }

.contact-fields { display: flex; flex-direction: column; gap: 16px; }
.contact-row { display: flex; gap: 16px; }
.contact-row > * { flex: 1 1 0; min-width: 0; }
.contact-field { display: flex; flex-direction: column; gap: 6px; font: 600 14px/16px 'Work Sans', sans-serif; color: #161e2a; }
.contact-field em { font-style: normal; font-weight: 400; color: #85827a; }
.contact-field input, .contact-field textarea {
  font: 400 16px/24px 'Work Sans', sans-serif; color: #161e2a;
  background: #ffffff; border: 1px solid #c2cccb; border-radius: 2px; padding: 11px 14px; width: 100%; box-sizing: border-box;
}
.contact-field textarea { resize: vertical; min-height: 120px; }
.contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: #3b827d; box-shadow: 0 0 0 3px rgba(59, 130, 125, .2); }
.contact-field [aria-invalid="true"] { border-color: #d85f4e; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact-note { margin: 0; font: 400 13px/20px 'Work Sans', sans-serif; color: #85827a; }
.contact-status { margin: 0; font: 600 14px/20px 'Work Sans', sans-serif; color: #d85f4e; min-height: 0; }
.contact-status:empty { display: none; }
.contact-submit {
  align-self: flex-start; font: 700 16px/19px 'Work Sans', sans-serif; color: #ffffff; background: #3b827d;
  border: 0; border-radius: 2px; padding: 16px 28px; cursor: pointer;
}
.contact-submit:hover { background: #2f6b67; }
.contact-submit[disabled] { opacity: .6; cursor: wait; }
.contact-done[hidden], .contact-form[hidden] { display: none; }

@media (max-width: 560px) {
  .contact-form, .contact-done { padding: 40px 24px 28px; }
  .contact-row { flex-direction: column; }
  .contact-title { font-size: 34px; line-height: 44px; }
}