/* =============================================================
   Vecreal contact modal — shared, single-source styles
   -------------------------------------------------------------
   Drop-in on any page: <link rel="stylesheet" href="/brand/contact-modal.css">
   + <script src="/brand/contact-modal.js" defer></script>
   All classes are namespaced `vcm-` and all tokens are scoped to
   .vcm-scrim, so nothing here collides with or depends on page
   styles. Only external dependency: /brand/wordmark.css (the dark
   wordmark in the context panel), already global on every page.
   Edit copy/markup in contact-modal.js — this file is structure only.
   ============================================================= */
.vcm-scrim{
  --vcm-ink:#15161A;--vcm-ink3:#5C606A;--vcm-ink4:#6B6F77;
  --vcm-panel:#FBFBFC;--vcm-panel2:#F4F5F6;
  --vcm-plate-top:#FDFDFE;--vcm-plate-bot:#F5F6F8;--vcm-plate-bd:#D4D6DA;
  --vcm-border:#E3E4E6;
  --vcm-clay:#9C4A33;--vcm-clay-bright:#C68070;--vcm-clay-hover:#8A4029;
  --vcm-focus:0 0 0 3px rgba(156,74,51,.45);
  --vcm-shadow:0 1px 2px rgba(24,24,27,.06),0 18px 40px -12px rgba(20,22,28,.28),0 48px 96px -28px rgba(20,22,28,.42);
  --vcm-font:'Inter',system-ui,sans-serif;--vcm-mono:'JetBrains Mono',ui-monospace,monospace;
  --vcm-ease:cubic-bezier(.2,.8,.2,1);--vcm-fast:120ms;--vcm-med:200ms;--vcm-slow:300ms;--vcm-page:340ms;

  position:fixed;inset:0;z-index:1000;
  background:rgba(18,20,26,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:28px;
  font-family:var(--vcm-font);-webkit-font-smoothing:antialiased;
  opacity:0;visibility:hidden;transition:opacity var(--vcm-page) var(--vcm-ease),visibility 0s linear var(--vcm-page)}
.vcm-scrim.vcm-open{opacity:1;visibility:visible;transition:opacity var(--vcm-page) var(--vcm-ease)}

.vcm-modal{width:760px;max-width:100%;display:grid;grid-template-columns:296px 1fr;
  background:linear-gradient(180deg,var(--vcm-plate-top),var(--vcm-plate-bot));border:1px solid var(--vcm-ink);
  border-radius:16px;box-shadow:var(--vcm-shadow);overflow:hidden;position:relative;
  transform:translateY(14px) scale(.985);opacity:0;transition:transform var(--vcm-slow) var(--vcm-ease),opacity var(--vcm-slow) var(--vcm-ease)}
.vcm-scrim.vcm-open .vcm-modal{transform:none;opacity:1}
.vcm-grab{display:none}

/* ---- context panel (dark) ---- */
.vcm-ctx{position:relative;background:var(--vcm-ink);color:#f3f4f6;padding:30px 28px;display:flex;flex-direction:column;overflow:hidden}
.vcm-ctx::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:30px 30px}
.vcm-ctx::after{content:"";position:absolute;top:-120px;right:-120px;width:280px;height:280px;pointer-events:none;
  background:radial-gradient(circle at center,rgba(198,128,112,.16),transparent 70%)}
.vcm-ctx .vcm-top{position:relative;z-index:1;display:flex;flex-direction:column}
.vcm-ctx .bk-wordmark{font-size:22px}
.vcm-ctx h2{position:relative;z-index:1;font-variation-settings:'opsz' 22;font-weight:680;font-size:21px;letter-spacing:-.02em;line-height:1.14;margin:28px 0 10px}
.vcm-ctx h2 .vcm-hl{color:var(--vcm-clay-bright)}
.vcm-lead{position:relative;z-index:1;font-size:13px;line-height:1.6;color:#aeb3bd}
.vcm-ctx ul{position:relative;z-index:1;list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.vcm-ctx li{display:flex;align-items:center;gap:11px;font-size:12.5px;color:#d9dce2;letter-spacing:.005em}
.vcm-ctx li svg{width:15px;height:15px;stroke:var(--vcm-clay-bright);stroke-width:2;fill:none;flex-shrink:0}
.vcm-sign{position:relative;z-index:1;margin-top:auto;padding-top:24px;font-size:11.5px;color:#7e848f;
  border-top:1px solid rgba(255,255,255,.08)}

/* ---- close + grabber ---- */
.vcm-x{position:absolute;top:16px;right:16px;z-index:5;width:32px;height:32px;border:0;background:none;cursor:pointer;
  color:var(--vcm-ink4);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background var(--vcm-fast),color var(--vcm-fast)}
.vcm-x:hover{background:var(--vcm-panel2);color:var(--vcm-ink)}
.vcm-x:focus-visible{outline:none;box-shadow:var(--vcm-focus)}
.vcm-x svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round}

/* ---- form panel ---- */
.vcm-body{position:relative;padding:30px 30px 28px;display:flex;flex-direction:column}
.vcm-form{display:flex;flex-direction:column;gap:13px;flex:1 1 auto;min-height:0}
.vcm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vcm-field{display:flex;flex-direction:column;gap:6px}
.vcm-field label{font:600 11px/1 var(--vcm-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--vcm-ink3)}
.vcm-field label .vcm-opt{color:var(--vcm-ink4);font-weight:500;text-transform:none;letter-spacing:0}
.vcm-inp,.vcm-ta{font-family:var(--vcm-font);font-size:14px;color:var(--vcm-ink);background:var(--vcm-panel);border:1px solid var(--vcm-border);
  border-radius:8px;padding:10px 12px;width:100%;outline:none;transition:border-color var(--vcm-fast),box-shadow var(--vcm-fast)}
.vcm-inp::placeholder,.vcm-ta::placeholder{color:#9aa0aa}
.vcm-inp:focus,.vcm-ta:focus{border-color:var(--vcm-clay);box-shadow:var(--vcm-focus)}
.vcm-ta{resize:none;min-height:76px;line-height:1.5}
/* message field fills the form's spare vertical space: taller box, Send drops toward the bottom */
.vcm-field-msg{flex:1 1 auto;min-height:0}
.vcm-field-msg .vcm-ta{flex:1 1 auto;min-height:120px}
.vcm-field.vcm-bad .vcm-inp,.vcm-field.vcm-bad .vcm-ta{border-color:var(--vcm-clay)}
.vcm-hint{display:none;font:500 11px/1.3 var(--vcm-font);color:var(--vcm-clay)}
.vcm-field.vcm-bad .vcm-hint{display:block}
/* honeypot — visually hidden, off-screen, not announced */
.vcm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vcm-send{font-family:var(--vcm-font);font-size:14px;font-weight:600;color:#fff;background:var(--vcm-clay);border:0;border-radius:8px;
  padding:12px 18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:4px;
  transition:transform var(--vcm-fast) var(--vcm-ease),background var(--vcm-med)}
.vcm-send:hover{background:var(--vcm-clay-hover);transform:translateY(-1px)}
.vcm-send:focus-visible{outline:none;box-shadow:var(--vcm-focus)}
.vcm-send:disabled{opacity:.7;cursor:default;transform:none}
.vcm-send svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vcm-priv{margin-top:11px;font-size:11.5px;color:var(--vcm-ink4);text-align:center}
.vcm-priv a{color:var(--vcm-clay);text-decoration:none}
.vcm-priv a:hover{text-decoration:underline}

/* ---- success / failure states (overlay the form area) ---- */
.vcm-done{position:absolute;inset:0;background:linear-gradient(180deg,var(--vcm-plate-top),var(--vcm-plate-bot));
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px;
  opacity:0;visibility:hidden;transition:opacity var(--vcm-slow) var(--vcm-ease),visibility 0s linear var(--vcm-slow)}
.vcm-done.vcm-show{opacity:1;visibility:visible;transition:opacity var(--vcm-slow) var(--vcm-ease)}
.vcm-chk{width:52px;height:52px;border-radius:50%;background:var(--vcm-clay);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.vcm-chk svg{width:26px;height:26px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .5s var(--vcm-ease) .12s}
.vcm-done.vcm-show .vcm-chk svg{stroke-dashoffset:0}
.vcm-done h3{font-variation-settings:'opsz' 22;font-weight:680;font-size:20px;color:var(--vcm-ink);margin-bottom:8px;letter-spacing:-.02em}
.vcm-done p{color:var(--vcm-ink3);font-size:14px;line-height:1.55;max-width:32ch}
/* failure panel — same overlay, offers a direct-email path + Back */
.vcm-fail{position:absolute;inset:0;background:linear-gradient(180deg,var(--vcm-plate-top),var(--vcm-plate-bot));
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px;
  opacity:0;visibility:hidden;transition:opacity var(--vcm-slow) var(--vcm-ease),visibility 0s linear var(--vcm-slow)}
.vcm-fail.vcm-show{opacity:1;visibility:visible;transition:opacity var(--vcm-slow) var(--vcm-ease)}
.vcm-fail-icon{display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.vcm-fail-icon svg{width:46px;height:46px;stroke:var(--vcm-clay);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vcm-fail h3{font-variation-settings:'opsz' 22;font-weight:680;font-size:20px;color:var(--vcm-ink);margin-bottom:8px;letter-spacing:-.02em}
.vcm-fail p{color:var(--vcm-ink3);font-size:14px;line-height:1.55;max-width:34ch}
.vcm-fail-mail{margin-top:20px;font:600 14px/1 var(--vcm-font);color:#fff;background:var(--vcm-clay);border-radius:8px;
  padding:12px 20px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  transition:transform var(--vcm-fast) var(--vcm-ease),background var(--vcm-med)}
.vcm-fail-mail:hover{background:var(--vcm-clay-hover);transform:translateY(-1px)}
.vcm-fail-mail svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vcm-copyrow{margin-top:13px;font-size:12.5px;color:var(--vcm-ink4)}
.vcm-copy{font:inherit;color:var(--vcm-ink2);background:none;border:0;border-bottom:1px dashed #bcbfc6;cursor:pointer;padding:0 1px;-webkit-user-select:all;user-select:all}
.vcm-copy:hover{color:var(--vcm-clay);border-bottom-color:var(--vcm-clay)}
.vcm-copy:focus-visible{outline:none;box-shadow:var(--vcm-focus);border-radius:3px}
.vcm-back{margin-top:14px;background:none;border:0;color:var(--vcm-ink4);font:500 12.5px/1 var(--vcm-font);cursor:pointer;padding:6px;border-radius:6px}
.vcm-back:hover{color:var(--vcm-ink2)}
.vcm-back:focus-visible{outline:none;box-shadow:var(--vcm-focus)}

@media (prefers-reduced-motion:reduce){
  .vcm-scrim *,.vcm-scrim{transition-duration:0s!important}
  .vcm-modal{transform:none}
}

/* ===================== MOBILE (bottom sheet) ===================== */
@media (max-width:640px){
  .vcm-scrim{padding:0;align-items:flex-end}
  .vcm-modal{grid-template-columns:1fr;width:100%;max-width:100%;border-radius:18px 18px 0 0;max-height:94vh;overflow-y:auto;
    transform:translateY(100%);transition:transform var(--vcm-page) var(--vcm-ease)}
  .vcm-scrim.vcm-open .vcm-modal{transform:none}
  /* dark panel collapses to a compact header: wordmark + inline reassurance chips */
  .vcm-ctx{padding:26px 22px 16px;flex-direction:column}
  .vcm-grab{display:block;position:absolute;top:9px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:3px;background:rgba(255,255,255,.22);z-index:4}
  .vcm-ctx::after{display:none}
  .vcm-ctx h2,.vcm-lead,.vcm-sign{display:none}
  .vcm-ctx ul{flex-direction:row;flex-wrap:wrap;gap:8px;margin:14px 0 0}
  .vcm-ctx li{font-size:10.5px;color:#c8ccd3;background:rgba(255,255,255,.06);border-radius:999px;padding:5px 10px;gap:6px}
  .vcm-ctx li svg{width:12px;height:12px}
  .vcm-body{padding:22px 22px 26px}
  .vcm-row2{grid-template-columns:1fr}
  .vcm-inp,.vcm-ta,.vcm-send{font-size:16px}    /* >=16px = no iOS zoom-on-focus */
  .vcm-x{top:12px;right:12px;width:38px;height:38px;color:#fff;background:rgba(255,255,255,.2)}
}