/* Concept 20: the enquiry sheet. A drawer from the right on larger screens, full screen on phones. */

.eq { position: fixed; inset: 0; z-index: 110; }
.eq[hidden] { display: none; }
html.eq-open { overflow: hidden; }

.eq-scrim {
  position: absolute; inset: 0; width: 100%; padding: 0; border: 0;
  background: hsl(222 47% 8% / 0.42); animation: eq-fade 0.22s ease;
}
.eq-panel {
  --eq-ink: hsl(var(--foreground)); --eq-mute: hsl(var(--muted-foreground)); --eq-line: hsl(var(--border));
  --eq-brass: var(--mf-brass, #a88f5c);
  position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: hsl(var(--background)); color: var(--eq-ink);
  box-shadow: -24px 0 60px -30px hsl(222 47% 8% / 0.45);
  animation: eq-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes eq-in { from { transform: translateX(32px); opacity: 0; } }
@keyframes eq-fade { from { opacity: 0; } }

.eq-top {
  display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 16px;
  padding: 30px 40px 22px; border-bottom: 1px solid var(--eq-ink);
}
.eq-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px; align-self: center;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eq-brass);
}
.eq-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eq-close {
  margin-top: -6px; padding: 8px 12px; font: inherit; font-size: 12.5px; color: var(--eq-ink);
  background: none; border: 1px solid var(--eq-line); cursor: pointer; white-space: nowrap;
}
.eq-close:hover { border-color: var(--eq-ink); }
.eq-close span { margin-left: 6px; font-size: 15px; line-height: 1; }
.eq-top h2 {
  grid-column: 1 / -1; margin: 0; font-family: var(--mf-serif, serif); font-weight: 500;
  font-size: clamp(30px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.005em;
}
.eq-meta { grid-column: 1 / -1; margin: 18px 0 0; font-size: 13px; }
.eq-meta div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 3px 0; }
.eq-meta dt { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--eq-mute); padding-top: 2px; }
.eq-meta dd { margin: 0; color: var(--eq-ink); overflow-wrap: anywhere; }

.eq-form { display: flex; flex-direction: column; gap: 22px; padding: 24px 40px 32px; flex: 1; }
.eq-you { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; min-width: 0; }
.eq-k {
  grid-column: 1 / -1; margin: 0 0 -4px;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--eq-mute);
}
.eq-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eq-form label > span { font-size: 12.5px; color: var(--eq-mute); }
.eq-form label i { font-style: normal; font-size: 11px; opacity: 0.8; }
.eq-req > span i { color: var(--eq-brass); opacity: 1; }
.eq-req.is-ok > span i { visibility: hidden; }
.eq-form input:not([type="checkbox"]), .eq-msg {
  width: 100%; padding: 10px 0 9px; font: inherit; font-size: 15px; color: var(--eq-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--eq-line); border-radius: 0;
  transition: border-color 0.2s;
}
.eq-form input:not([type="checkbox"]):focus, .eq-msg:focus { outline: none; border-bottom-color: var(--eq-ink); }
.eq-msg-l > span { font-size: 10.5px !important; letter-spacing: 0.16em; text-transform: uppercase; }
.eq-msg {
  min-height: 150px; padding: 12px 14px; resize: vertical; line-height: 1.55; font-size: 14px;
  border: 1px solid var(--eq-line); background: hsl(var(--secondary, 40 18% 95%) / 0.6);
}
.eq-msg:focus { border-color: var(--eq-ink); }

.eq-send { display: flex; flex-direction: column; gap: 14px; }
.eq-go {
  display: flex; justify-content: center; gap: 10px; padding: 15px 22px; font-size: 14.5px; letter-spacing: 0.03em;
  color: hsl(var(--background)); background: var(--eq-ink); text-decoration: none; transition: opacity 0.2s;
}
.eq-go i { font-style: normal; transition: transform 0.2s; }
.eq-go:hover i { transform: translateX(3px); }
.eq-alt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 13px; }
.eq-alt span { color: var(--eq-mute); }
.eq-alt a, .eq-alt button {
  padding: 4px 0; font: inherit; color: var(--eq-ink); background: none; border: 0;
  border-bottom: 1px solid var(--eq-line); text-decoration: none; cursor: pointer;
}
.eq-alt a:hover, .eq-alt button:hover { border-bottom-color: var(--eq-ink); }
.eq [aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; }
.eq-go[aria-disabled="true"] { opacity: 0.3; }
.eq-hint { min-height: 1.5em; margin: 0; font-size: 13px; line-height: 1.5; color: var(--eq-mute); }
.eq-hint.is-done { padding: 12px 14px; color: var(--eq-ink); border-left: 2px solid var(--eq-brass); background: hsl(var(--secondary, 40 18% 95%) / 0.6); }

.eq-fine { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--eq-line); font-size: 12px; color: var(--eq-mute); }
.eq-fine p { margin: 8px 0 0; }
.eq-form .eq-keep { flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; color: var(--eq-ink); cursor: pointer; }
.eq-keep input { width: 14px; height: 14px; margin: 0; accent-color: hsl(var(--foreground)); }

.eq a:focus-visible, .eq button:focus-visible, .eq-keep input:focus-visible { outline: 1px solid var(--eq-ink); outline-offset: 3px; }

@media (max-width: 600px) {
  .eq-panel { width: 100%; box-shadow: none; animation-name: eq-up; }
  @keyframes eq-up { from { transform: translateY(24px); opacity: 0; } }
  .eq-top { padding: 20px 20px 18px; }
  .eq-eyebrow { gap: 8px; font-size: 10px; letter-spacing: 0.16em; }
  .eq-eyebrow::before { width: 18px; }
  .eq-form { padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .eq-you { grid-template-columns: 1fr; }
  .eq-form input:not([type="checkbox"]) { font-size: 16px; }
  .eq-msg { font-size: 16px; min-height: 140px; }
}
@media (prefers-reduced-motion: reduce) { .eq-panel, .eq-scrim { animation: none; } }
@media print { .eq { display: none !important; } }