/* ---------- contact modal ---------- */
button.btn{font-family:var(--sans);line-height:1.6;cursor:pointer}

.cm{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.cm.open{opacity:1;visibility:visible}

.cm-card{
  position:relative;width:100%;max-width:520px;
  max-height:calc(100vh - 48px);overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--line);border-top:3px solid var(--accent);
  padding:34px 32px 30px;
  transform:translateY(16px) scale(.985);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.cm.open .cm-card{transform:none}
/* author display rules below would otherwise defeat the [hidden] attribute */
.cm [hidden]{display:none}

.cm-x{
  position:absolute;top:10px;right:12px;
  background:none;border:none;color:var(--ink-3);
  font-size:1.7rem;line-height:1;cursor:pointer;padding:4px 9px;transition:color .2s;
}
.cm-x:hover,.cm-x:focus-visible{color:var(--accent);outline:none}

.cm-kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.cm-head h3{font-size:1.7rem;text-transform:uppercase;letter-spacing:-.02em;margin:8px 0 6px}
.cm-sub{color:var(--ink-2);font-size:.92rem;margin-bottom:22px}

#contactForm{display:flex;flex-direction:column;gap:15px}
.cm-row{display:flex;gap:15px}
.cm-row .cm-field{flex:1}
.cm-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cm-field label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.cm-req{color:var(--accent)}

.cm-field input,
.cm-field select,
.cm-field textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:.95rem;padding:11px 12px;
  transition:border-color .2s,box-shadow .2s;
}
.cm-field textarea{resize:vertical;min-height:96px}
.cm-field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.cm-field input:focus,
.cm-field select:focus,
.cm-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cm-field input::placeholder,
.cm-field textarea::placeholder{color:var(--ink-3)}

.cm-msg{font-size:.72rem;color:var(--accent);display:none}
.cm-field.invalid input,
.cm-field.invalid select,
.cm-field.invalid textarea{border-color:var(--accent)}
.cm-field.invalid .cm-msg{display:block}

/* honeypot — visually hidden, off the tab order */
.cm-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

.cm-error{color:var(--accent);font-size:.82rem;margin:-2px 0 0}
.cm-submit{margin-top:4px;border:1px solid var(--ink)}
.cm-submit:disabled{opacity:.6;cursor:default}

/* success view */
.cm-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:14px 6px 6px}
.cm-done h3{font-size:1.5rem;text-transform:uppercase;letter-spacing:-.02em}
.cm-done p{color:var(--ink-2);font-size:.95rem;max-width:380px;line-height:1.6}
.cm-done .btn{margin-top:8px}

.cm-check{width:78px;height:78px}
.cm-check-c,.cm-check-m{fill:none;stroke:var(--accent);stroke-dasharray:1;stroke-dashoffset:1}
.cm-check-c{stroke-width:2.5}
.cm-check-m{stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cm-done.play .cm-check{animation:cmPop .42s ease}
.cm-done.play .cm-check-c{animation:cmDraw .5s ease forwards}
.cm-done.play .cm-check-m{animation:cmDraw .34s .42s ease forwards}
@keyframes cmDraw{to{stroke-dashoffset:0}}
@keyframes cmPop{0%{transform:scale(.6)}55%{transform:scale(1.08)}100%{transform:scale(1)}}

@media(max-width:520px){
  .cm-row{flex-direction:column;gap:15px}
  .cm-card{padding:30px 20px 24px}
  .cm-head h3{font-size:1.45rem}
}
@media(prefers-reduced-motion:reduce){
  .cm,.cm-card{transition:none}
  .cm-done.play .cm-check,
  .cm-done.play .cm-check-c,
  .cm-done.play .cm-check-m{animation:none}
  .cm-check-c,.cm-check-m{stroke-dashoffset:0}
}