/* Enquiry modal + its form, for pages that don't load styles.css (e.g. /watch).
   The rules are copied from styles.css; the tokens they read are scoped to the
   modal so nothing here leaks into the page around it. */
.ca-modal-backdrop {
  --accent-orange: #E89A4A;
  --charcoal-deepest: #0F0E0C;
  --charcoal-main: #14130F;
  --charcoal-surface: #1F1D19;
  --bg-card: #1F1D19;
  --border-on-dark: rgba(240, 234, 219, 0.12);
  --border-on-dark-strong: rgba(240, 234, 219, 0.18);
  --dur-micro: 220ms;
  --ease-confident: cubic-bezier(0.16, 1, 0.3, 1);
  --fg-1: #F0EADB;
  --fg-2: #C4BDAF;
  --fg-3: #A69F91;
  --fg-4: #8A8478;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================================
   Forms — shared sign-up styling (waitlist / newsletter / inquiry)
   ============================================================ */
.ca-form { display: flex; flex-direction: column; gap: 18px; }
.ca-field { display: flex; flex-direction: column; gap: 7px; }
.ca-field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.ca-form input,
.ca-form select,
.ca-form textarea {
  width: 100%;
  background: var(--charcoal-deepest, #0c0b09);
  border: 1px solid var(--border-on-dark-strong);
  border-radius: 10px;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-1);
  transition: border-color var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident);
}
.ca-form textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.ca-form select { appearance: none; cursor: pointer; }
.ca-form input::placeholder,
.ca-form textarea::placeholder { color: var(--fg-4); }
.ca-form input:focus,
.ca-form select:focus,
.ca-form textarea:focus {
  outline: none;
  border-color: var(--accent-orange);
  background: var(--charcoal-surface, #14130f);
}
.ca-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .ca-form-row { grid-template-columns: 1fr; } }

/* Honeypot — kept in the DOM for bots, hidden from humans + AT. */
.ca-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.ca-form button[type="submit"] { align-self: flex-start; }
.ca-form button.is-loading { opacity: 0.6; pointer-events: none; }

.ca-form-msg { margin: 0; font-size: 14px; min-height: 1em; color: var(--fg-3); }
.ca-form-msg.is-error { color: #E8775A; }

.ca-form-consent { font-size: 12.5px; color: var(--fg-4); line-height: 1.55; margin: 0; }
.ca-form-consent a { color: var(--fg-3); text-decoration: underline; text-underline-offset: 2px; }
.ca-form-consent a:hover { color: var(--accent-orange); }

/* Success state — replaces the form after a good submit. */
.ca-form-done {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px; border: 1px solid var(--border-on-dark);
  border-radius: 12px; background: rgba(232, 154, 74, 0.06);
}
.ca-form-done-tick {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232, 154, 74, 0.16); color: var(--accent-orange);
}
.ca-form-done p { margin: 3px 0 0; color: var(--fg-2); font-size: 15px; }

/* Compact inline variant — footer newsletter (email + button on one row). */
.ca-form--inline { gap: 12px; }
.ca-form--inline .ca-inline-row { display: flex; gap: 10px; }
.ca-form--inline .ca-inline-row input { flex: 1; }
.ca-form--inline button[type="submit"] { align-self: auto; white-space: nowrap; }
@media (max-width: 480px) {
  .ca-form--inline .ca-inline-row { flex-direction: column; }
  .ca-form--inline button[type="submit"] { align-self: stretch; justify-content: center; }
}

/* ============================================================
   Inquiry modal (Form 3) — generic, brand-styled dialog
   ============================================================ */
.ca-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8, 7, 6, 0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px; overflow-y: auto;
  opacity: 0; transition: opacity 240ms var(--ease-confident);
}
/* The [hidden] attribute must win over display:flex above, or the overlay
   stays in the layout (invisible but click-blocking) on every page. */
.ca-modal-backdrop[hidden] { display: none; }
.ca-modal-backdrop.is-open { opacity: 1; }
.ca-modal {
  width: 100%; max-width: 560px; margin: auto;
  background: var(--bg-card, #1F1D19);
  border: 1px solid var(--border-on-dark);
  border-radius: 18px; padding: 36px;
  transform: translateY(12px); transition: transform 240ms var(--ease-confident);
}
.ca-modal-backdrop.is-open .ca-modal { transform: translateY(0); }
@media (max-width: 560px) { .ca-modal { padding: 28px 22px; } }
.ca-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.ca-modal-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-4); margin: 0 0 10px; }
.ca-modal h2 { font-size: 26px; margin: 0; }
.ca-modal-intro { margin: 10px 0 0; color: var(--fg-3); font-size: 15px; }
.ca-modal-close {
  flex-shrink: 0; background: transparent; border: 1px solid var(--border-on-dark);
  color: var(--fg-2); width: 36px; height: 36px; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-confident), color var(--dur-micro) var(--ease-confident);
}
.ca-modal-close:hover { border-color: var(--fg-3); color: var(--fg-1); }