/* The "Get in touch" pop-up (assets/js/contact-modal.js), loaded with it on pages that have a
   data-contact link. Needs ks-form (fields). Token-driven; ported from the K&S prototype. */
.contact-modal{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:0;border:0;border-radius:var(--radius-m);background:var(--white);color:var(--text-body);box-shadow:var(--shadow-11)}
.contact-modal::backdrop{background:var(--primary-d-1-70)}
.contact-modal[open]{animation:rise .25s var(--ease-out)}
.contact-modal__form,.contact-modal__done{display:grid;gap:var(--space-s);padding:var(--space-l) var(--space-l) var(--space-l);border-top:4px solid var(--secondary)}
.contact-modal__top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-s)}
.contact-modal__title{margin:0;font-size:var(--text-xl)}
.contact-modal__close{background:none;border:0;font-size:var(--text-l);line-height:1;color:var(--text-muted);cursor:pointer;padding:var(--space-2xs);margin:calc(-1 * var(--space-2xs)) calc(-1 * var(--space-2xs)) calc(-1 * var(--space-2xs)) 0}
.contact-modal__close:hover{color:var(--primary)}
.contact-modal__sub{margin:calc(-1 * var(--space-3xs)) 0 var(--space-4xs);font-size:var(--text-s);color:var(--text-muted)}
.contact-modal__send{width:100%;margin-top:var(--space-4xs)}
.contact-modal__foot{margin:0;font-size:var(--text-xs);color:var(--danger);text-align:center}
.contact-modal__done{justify-items:center;text-align:center;padding-block:var(--space-xl) var(--space-l)}
.contact-modal__done-title{margin:var(--space-3xs) 0 0;font-size:var(--text-xl)}
.contact-modal__done-text{margin:0;color:var(--text-muted);font-size:var(--text-s)}
@media (max-width:520px){
  .contact-modal{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:var(--radius-m) var(--radius-m) 0 0}
  .contact-modal__form{padding:var(--space-m) var(--space-m) var(--space-m)}
}