/* ============================================================
   modus. — contact-modal.css
   Native <dialog> contact form. Paper card over a blurred
   navy backdrop; posts to /api/contact (Resend).
   ============================================================ */

body.modal-open{overflow:hidden}

/* NOTE: the whole card sits on --paper, so every muted value in this file
   uses --slate-ink (the paper-side grey). --slate is the navy-side token. */

.contact-modal{
  border:0;padding:0;background:transparent;color:var(--navy);
  max-width:560px;width:calc(100% - 40px);border-radius:16px;
  margin:auto;   /* re-assert centering — the global *{margin:0} reset clears it */
}
.contact-modal::backdrop{
  background:rgba(16,29,44,.7);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;
}
.contact-modal[open]::backdrop{opacity:1;transition:opacity .3s ease}
.contact-modal{opacity:0;transform:translateY(12px) scale(.98)}
.contact-modal[open]{
  opacity:1;transform:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
@starting-style{
  .contact-modal[open]{opacity:0;transform:translateY(12px) scale(.98)}
  .contact-modal[open]::backdrop{opacity:0}
}

.cm-inner{
  position:relative;background:var(--paper);
  border:1px solid var(--light);border-radius:16px;
  padding:40px 38px 34px;
  box-shadow:0 30px 70px -20px rgba(4,10,16,.6);
}
.cm-close{
  position:absolute;top:14px;right:14px;
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--slate-ink);border-radius:8px;
  transition:color .2s,background .2s;
}
.cm-close:hover{color:var(--navy);background:var(--light)}

.cm-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-ink);
  display:flex;align-items:center;gap:12px}
.cm-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--green);flex:none}
.cm-title{font-size:clamp(26px,4vw,34px);margin-top:14px;letter-spacing:-.02em}
.cm-sub{font-family:var(--mono);font-size:14px;color:var(--slate-ink);margin-top:8px}

/* what-happens-next: mono, so it reads as terms rather than as more marketing */
.cm-next{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:7px}
.cm-next li{font-family:var(--mono);font-size:12.5px;line-height:1.45;color:var(--muted);
  padding-left:18px;position:relative}
.cm-next li::before{content:"";position:absolute;left:0;top:.52em;
  width:7px;height:7px;border-radius:50%;background:var(--green)}
.cm-tel{margin-top:16px;padding-top:14px;border-top:1px solid var(--light);
  font-family:var(--mono);font-size:12.5px;color:var(--slate-ink);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.cm-tel a{font-weight:700;font-size:15px;color:var(--navy);
  border-bottom:2px solid var(--green);padding-bottom:1px;transition:color .2s}
.cm-tel a:hover{color:var(--green)}

/* form */
.cm-form{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.cm-field{display:flex;flex-direction:column;gap:6px}
.cm-field label{font-size:14px;font-weight:500;color:var(--muted)}
.cm-field label em{font-style:normal;color:var(--slate-ink);font-weight:400}
.cm-field input,
.cm-field textarea{
  font-family:var(--sans);font-size:16px;color:var(--navy);
  background:var(--white);border:1.5px solid var(--light);border-radius:9px;
  padding:12px 14px;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.cm-field textarea{resize:vertical;min-height:96px}
.cm-field input::placeholder,
.cm-field textarea::placeholder{color:var(--slate-ink)}
.cm-field input:focus,
.cm-field textarea:focus{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(29,158,117,.18);
}
.cm-field.invalid input,
.cm-field.invalid textarea{border-color:#c0432f;box-shadow:0 0 0 3px rgba(192,67,47,.14)}
.cm-err{font-size:13px;color:#c0432f;display:none}
.cm-field.invalid .cm-err{display:block}

/* honeypot — visually hidden but reachable to bots */
.cm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cm-submit{margin-top:6px;align-self:flex-start}
.cm-submit[disabled]{opacity:.6;transform:none;box-shadow:none}

.cm-status{font-size:14px;color:#c0432f;min-height:0}
.cm-status:empty{display:none}
.cm-consent{font-family:var(--mono);font-size:12px;color:var(--slate-ink);margin-top:2px}

/* success view */
.cm-done{text-align:center;padding:18px 0 8px}
.cm-check{
  width:60px;height:60px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(29,158,117,.12);color:var(--green);
}
.cm-done .cm-title{margin-top:0}
.cm-done .cm-sub{margin:10px auto 24px;max-width:38ch}

/* phone: fill most of the viewport, scroll internally */
@media(max-width:640px){
  .contact-modal{
    width:100%;max-width:none;max-height:100dvh;
    margin:auto 0 0;border-radius:18px 18px 0 0;
  }
  .cm-inner{border-radius:18px 18px 0 0;padding:34px 22px 26px;max-height:92dvh;overflow-y:auto}
  .cm-submit{align-self:stretch;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .contact-modal,.contact-modal[open]{transition:none;transform:none}
  .contact-modal[open]::backdrop{transition:none}
}