/* 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: mark at
   the top, the pitch sitting on the optical centre, copyright at the foot. */
.pitch {
  background: var(--sidebar-bg);
  color: #fff;
  /* Short on the bottom so the footer credit can sit low in the column. */
  padding: 3rem 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

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

/* The logo is a white transparent PNG, so the tile behind it must be dark —
   but the page's own dark (--sidebar-bg), not the CRM navy: on the pitch
   panel the tile then disappears into the background entirely, and on the
   mobile card it reads as the page's palette rather than a foreign blue. */
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--sidebar-bg);
  padding: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark img { height: 72%; width: auto; object-fit: contain; }

/* 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. */
.pitch .brand {
  flex-direction: column;
  gap: 0.9rem;
  justify-content: center;
}
.pitch .brand-mark {
  width: clamp(200px, 20vw, 300px);
  height: clamp(200px, 20vw, 300px);
  padding: 0.75rem;
  border-radius: 20px;
}
.pitch .brand-mark img { height: 100%; }
.pitch .slogan { text-align: center; margin-top: 14px; font-size: 14px; }

/* The house line. Small and wide so it reads as a mark, not a sentence. */
.slogan {
  margin: 10px 0 0;
  font-size: 16.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: 16.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); }

/* The build credit, at the foot of both columns. `--on-dark-soft` is too faint
   for a link people are meant to notice, so it is set brighter than the
   copyright line above it; on the white card it takes the ink colour instead
   because white on white is nothing. */
.powered {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-block;
  color: rgba(255, 255, 255, 0.72);
}
/* Centred, and sat low: the big top padding pushes the block down toward the
   foot of the column, away from the bullet list directly above. */
.pitch-footer { text-align: center; padding: 64px 0 0; }
.pitch .powered { margin-top: 10px; }
.card .powered { color: var(--ink-faint); margin-top: 10px; }

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

.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; }
/* Green, deliberately outside the navy scheme: the one moment on this page
   that says "done". Same green as the welcome email's accents. */
.tick {
  width: 52px; height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background: #e7f2ed;
  color: #1e4b3f;
  font-size: 1.5rem;
  line-height: 52px;
}
/* The confirmation body — a single sentence above the "send another" button. */
#doneThanks { margin: 0 0 16px; }

/* Filled like the submit button, not an outline: sending another inquiry is
   the page's one action from here, so it wears the primary colour. */
.ghost {
  margin-top: 1rem;
  padding: 0.7rem 1.6rem;
  font: inherit;
  font-size: 13.5px;
  color: #fff;
  background: var(--navy);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ghost:hover { opacity: 0.9; }

/* ---------- 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
     brand mark 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 .brand {
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
  }
  .card-brand .brand-mark {
    width: 132px;
    height: 132px;
    padding: 0.45rem;
    border-radius: 16px;
  }
  .card-brand .brand-mark img { height: 100%; }
  .card-brand .slogan { color: #9a7a2e; text-align: center; }
  .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; }
}