/* The lead form wears the same clothes as the CRM.
   Tokens below are the CRM's "navy" scheme (frontEnd/crm/src/themes.js) —
   same names, same values — so the public form and the console behind the
   login read as one product. Change a colour there, change it here. */
:root {
  --bg: #f2f4f8;
  --surface: #ffffff;
  --ink: #111a2b;
  --ink-soft: #5c6880;
  --ink-faint: #98a2b3;
  --line: #e1e6ef;
  --navy: #1b3a6b;
  --navy-soft: #e6ecf6;
  --navy-bright: #7fa8e8;
  --rust: #a63d4e;
  --rust-soft: #f7e8eb;
  --gold: #b08422;
  --gold-soft: #f6eeda;
  --sidebar-bg: #0b1220;
  --panel-line: #1f2b42;
  --on-dark: #9ba6bc;
  --on-dark-soft: #6b7488;

  /* Matches the CRM's type stack: Space Grotesk for display, Inter for body,
     IBM Plex Mono for the footer line, Fraunces for the italic accent. */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Fraunces', Georgia, serif;

  /* The CRM rounds inputs at 12 (rounded-xl) and buttons to a full pill. */
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.shell {
  display: grid;
  grid-template-columns: 46% 1fr;
  min-height: 100vh;
}

/* ---------- left brand panel ---------- */
/* Three bands stacked by space-between, as on the sign-in screen: wordmark at
   the top, the pitch sitting on the optical centre, copyright at the foot. */
.pitch {
  background: var(--sidebar-bg);
  color: #fff;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.brand { display: flex; align-items: center; gap: 0.625rem; }

/* The logo is a transparent PNG on a navy tile — the CRM's BrandMark. */
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark img { height: 72%; width: auto; object-fit: contain; }

.wordmark { font-family: var(--display); font-size: 20px; color: #fff; }

/* On the dark panel the mark is the only thing in the top band, so it is set
   large and centred rather than tucked in a corner — the panel is half the
   page and a 36px tile would leave it looking empty.
   No tile here either: the PNG is transparent and the panel is already dark,
   so the navy plate only drew a box around a logo that does not need one. */
.pitch .brand {
  flex-direction: column;
  gap: 0.9rem;
  justify-content: center;
}
.pitch .brand-mark {
  width: auto;
  height: clamp(150px, 15vw, 230px);
  background: none;
  border-radius: 0;
}
.pitch .brand-mark img { height: 100%; }
.pitch .wordmark { font-size: clamp(26px, 2.4vw, 34px); }
.pitch .slogan { text-align: center; margin-top: 14px; font-size: 11px; }

/* The house line. Small and wide so it reads as a mark, not a sentence. */
.slogan {
  margin: 10px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

/* The pill above the headline — same brass-on-navy chip as the console. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  margin: 0 0 1.75rem;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.pitch h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  max-width: 460px;
}
/* The one serif italic in the design, picked out in the light navy that has
   the contrast to be read on the dark panel. */
.pitch h1 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--navy-bright);
}

.lede { margin: 1rem 0 0; max-width: 42ch; font-size: 13.5px; color: var(--on-dark); }

.marks {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  font-size: 13.5px;
  color: var(--on-dark);
}
.marks li { display: flex; align-items: flex-start; gap: 0.625rem; }
.marks li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--navy-bright);
  flex-shrink: 0;
}

.pitch-foot { font-family: var(--mono); font-size: 11px; color: var(--on-dark-soft); }

/* ---------- form card ---------- */
.card {
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card > * { width: 100%; max-width: 460px; }

.card-head h2 { margin: 0; font-family: var(--display); font-size: 27px; font-weight: 400; }
.card-head p { margin: 4px 0 1.75rem; color: var(--ink-soft); font-size: 13.5px; }

.field { margin-bottom: 1rem; }

label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-faint); }

.hint {
  margin: -0.15rem 0 0.5rem;
  font-size: 12px;
  color: var(--ink-faint);
}

input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { resize: vertical; }

::placeholder { color: var(--ink-faint); }

input:focus, textarea:focus, button:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.14);
}

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.error {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--rust);
  min-height: 0;
}
.field.invalid input,
.field.invalid textarea,
.field.invalid select { border-color: var(--rust); }

/* ---------- date dropdowns ---------- */
.date-selects {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 1fr;
  gap: 0.5rem;
}

select {
  width: 100%;
  min-width: 0;
  padding: 0.7rem 2rem 0.7rem 1rem;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2398A2B3' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  transition: border-color 0.15s, box-shadow 0.15s;
}

select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.14);
}

/* Grey the placeholder option until a real value is chosen. */
select:invalid,
select:has(option[value=""]:checked) { color: var(--ink-faint); }

/* ---------- submit + status ---------- */
.summary {
  margin: 0 0 1rem;
  font-size: 12.5px;
  color: var(--ink-soft);
  min-height: 1.2em;
}

/* Pill, navy, arrow on the right — the console's primary button. */
.submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  font: inherit;
  font-size: 14px;
  color: #fff;
  background: var(--navy);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.submit::after { content: "\2192"; font-size: 15px; }
.submit:hover:not(:disabled) { opacity: 0.9; }
.submit:disabled { opacity: 0.65; cursor: wait; }
.submit:disabled::after { content: none; }

.form-status { margin: 0.7rem 0 0; font-size: 12.5px; color: var(--rust); }

/* ---------- success ---------- */
.done { text-align: center; padding: 2rem 0; }
.done h2 { margin: 0.75rem 0 0.35rem; font-family: var(--display); font-weight: 400; font-size: 24px; }
.done p { margin: 0 0 0.5rem; color: var(--ink-soft); font-size: 13.5px; }
.tick {
  width: 52px; height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--navy-soft);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 52px;
}
/* The confirmation body, split into two lines so the contact sentence reads as
   its own statement rather than a clause tacked onto the thank-you. */
#doneThanks, #doneContact { margin: 0 0 10px; }
#doneContact { margin-bottom: 16px; }

.ref { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.ref strong { color: var(--ink); letter-spacing: 0.04em; }
.ghost {
  margin-top: 1rem;
  padding: 0.6rem 1.4rem;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.ghost:hover { border-color: var(--navy); color: var(--navy); }

/* ---------- contact foot ---------- */
/* The public form is the only page a stranger reaches, so it carries the same
   way-in as the sign-in screen: a rule, three icon buttons, the address. */
.card-foot {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.socials { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.socials a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: border-color 0.15s, color 0.15s;
}
.socials a:hover { border-color: var(--navy); color: var(--navy); }
.socials svg { width: 16px; height: 16px; }
.contact-email {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  text-decoration: none;
}

/* The card only brands itself when the dark panel is hidden. */
.card-brand { display: none; }

@media (max-width: 1023px) {
  /* Below the CRM's `lg` breakpoint the dark panel goes away entirely — on a
     phone the form is the only thing that matters — so the card carries the
     wordmark instead. */
  .shell { grid-template-columns: 1fr; }
  .pitch { display: none; }
  .card { padding: 2.5rem 1.5rem 3rem; justify-content: flex-start; }
  .card-brand { display: block; margin-bottom: 2rem; }
  .card-brand .slogan { color: #9a7a2e; }
  .card-brand .wordmark { color: var(--ink); }
  .row { grid-template-columns: 1fr; }
}

/* Three dropdowns get cramped on narrow phones — give month its own row. */
@media (max-width: 420px) {
  .date-selects { grid-template-columns: 1fr 1fr; }
  .date-selects select:nth-child(2) { grid-column: 1 / -1; order: -1; }
}