/* ==========================================================================
   Melville Row - quote request module
   Append to css/melville.css, or load after it.
   Inherits your fonts and palette. Override the vars below if your
   melville.css already defines equivalents under different names.
   ========================================================================== */

.mrq{
  --mrq-ink:#1A1A1A;
  --mrq-paper:#FAF7F2;
  --mrq-line:rgba(26,26,26,.18);
  --mrq-line-strong:rgba(26,26,26,.4);
  --mrq-muted:rgba(26,26,26,.62);
  --mrq-err:#8A2F22;
  --mrq-ok:#2F5D3A;
}

/* ---------- The call to action that replaces the price display ---------- */

.mrq-panel{
  border-top:1px solid var(--mrq-line);
  margin-top:2rem;
  padding-top:1.75rem;
  max-width:34rem;
}
.mrq-panel p{
  color:var(--mrq-muted);
  margin:.5rem 0 1.25rem;
  max-width:46ch;
  line-height:1.6;
}
.mrq-dates{
  font-variant-numeric:tabular-nums;
  color:var(--mrq-ink);
}
.mrq-dates[data-empty="true"]{color:var(--mrq-muted);font-style:italic}

.mrq-cta{
  display:inline-block;
  padding:.9rem 1.6rem;
  border:1px solid var(--mrq-ink);
  background:var(--mrq-ink);
  color:var(--mrq-paper);
  font:inherit;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.mrq-cta:hover:not(:disabled){background:transparent;color:var(--mrq-ink)}
.mrq-cta:disabled{opacity:.4;cursor:not-allowed}
.mrq-cta:focus-visible{outline:2px solid var(--mrq-ink);outline-offset:3px}

/* ---------- Modal ---------- */

.mrq-scrim{
  position:fixed;inset:0;z-index:900;
  background:rgba(26,26,26,.55);
  display:none;
  align-items:center;justify-content:center;
  padding:1.25rem;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.mrq-scrim[data-open="true"]{display:flex}

.mrq-modal{
  background:var(--mrq-paper);
  color:var(--mrq-ink);
  width:100%;max-width:31rem;
  max-height:calc(100vh - 2.5rem);
  overflow-y:auto;
  padding:2rem 2rem 1.75rem;
  position:relative;
  animation:mrq-rise .22s ease-out;
}
@keyframes mrq-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mrq-modal{animation:none}}

.mrq-close{
  position:absolute;top:.6rem;right:.75rem;
  background:none;border:0;padding:.4rem;
  font-size:1.5rem;line-height:1;
  color:var(--mrq-muted);cursor:pointer;
}
.mrq-close:hover{color:var(--mrq-ink)}
.mrq-close:focus-visible{outline:2px solid var(--mrq-ink);outline-offset:2px}

.mrq-modal h2{margin:0 0 .35rem;font-size:1.5rem;line-height:1.2}
.mrq-sum{
  font-size:.9rem;color:var(--mrq-muted);
  margin:0 0 1.5rem;padding-bottom:1.1rem;
  border-bottom:1px solid var(--mrq-line);
}
.mrq-sum strong{color:var(--mrq-ink);font-weight:600}

/* ---------- Fields ---------- */

.mrq-field{margin-bottom:1.1rem}
.mrq-field label{
  display:block;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mrq-muted);margin-bottom:.4rem;
}
.mrq-field input{
  width:100%;box-sizing:border-box;
  padding:.7rem .8rem;
  border:1px solid var(--mrq-line-strong);
  background:transparent;color:var(--mrq-ink);
  font:inherit;font-size:1rem;border-radius:0;
}
.mrq-field input:focus{outline:2px solid var(--mrq-ink);outline-offset:-1px}
.mrq-field input[aria-invalid="true"]{border-color:var(--mrq-err)}

.mrq-hint{font-size:.8rem;color:var(--mrq-muted);margin:-.5rem 0 1.1rem;line-height:1.5}

.mrq-consent{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 1.4rem}
.mrq-consent input{margin-top:.2rem;flex:0 0 auto;width:auto}
.mrq-consent span{font-size:.82rem;color:var(--mrq-muted);line-height:1.5}

.mrq-msg{font-size:.85rem;margin:0 0 1rem;min-height:1.2em}
.mrq-msg[data-kind="error"]{
  color:#c62828;
  font-size:1rem;
  line-height:1.35;
  font-weight:600;
}
.mrq-msg[data-kind="ok"]{color:var(--mrq-ok)}

.mrq-submit{width:100%;text-align:center}

/* ---------- Sent state ---------- */

.mrq-sent{text-align:left}
.mrq-sent h2{margin-bottom:.75rem}
.mrq-sent p{color:var(--mrq-muted);line-height:1.65;margin:0 0 1rem;max-width:44ch}
.mrq-sent .mrq-cta{margin-top:.5rem}

.mrq-hidden{display:none !important}

/* honeypot */
.mrq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}