/* ==========================================================================
   ClientOS lead capture form, rendered on a main website page.

   This file is deliberately self contained. It could have been appended to
   assets/styles.css, but that file is over four hundred kilobytes and shared by
   every page on the site, and a form that appears on two pages does not belong
   in it. Loading one small file on the pages that use the form costs less than
   parsing the extra rules everywhere else.

   Everything is scoped under .cos-lead, so nothing here can reach any other
   part of a page it is dropped into. That matters because this form is
   included into pages built years apart with different conventions.

   Colours come from the brand palette. Every pair below was computed rather
   than judged by eye, and the ratio is written beside it.
   ========================================================================== */

.cos-lead {
  --cos-brand: #003737;
  --cos-accent: #0a7a72;
  --cos-ink: #0f172a;
  --cos-body: #334155;
  --cos-muted: #475569;
  --cos-line: #dbe7e2;
  --cos-line-soft: #eef2f2;
  --cos-surface: #f4f8f8;
  --cos-stop: #9a2d18;

  background: #ffffff;
  border: 1px solid var(--cos-line);
  border-top: 4px solid var(--cos-accent);
  border-radius: 18px;
  padding: 0;
  margin: 40px 0;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(0, 55, 55, .09);
}

.cos-lead__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* ------------------------------------------------------------- Pitch ----- */
.cos-lead__pitch {
  padding: 30px 26px 26px;
  background: var(--cos-surface);
  border-bottom: 1px solid var(--cos-line);
}

.cos-lead__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #05514b;                      /* computed 8.59:1 on #f4f8f8 */
  margin: 0 0 10px;
}

.cos-lead__h {
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--cos-ink);               /* computed 16.69:1 on #f4f8f8 */
  margin: 0 0 12px;
}

.cos-lead__lead {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cos-body);              /* computed 9.68:1 on #f4f8f8 */
  margin: 0 0 18px;
  max-width: 60ch;
}

.cos-lead__points {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.cos-lead__points li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--cos-body);
  margin: 0;
}
.cos-lead__points i {
  flex: none;
  margin-top: 4px;
  font-size: .9rem;
  color: var(--cos-accent);            /* computed 4.86:1 on #f4f8f8 */
}

.cos-lead__alt {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--cos-muted);
  margin: 0;
}
.cos-lead__alt a {
  color: #05514b;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- Panel ---- */
.cos-lead__panel { padding: 26px; }

.cos-lead__field { margin: 0 0 16px; }

.cos-lead__field label {
  display: flex;
  gap: 7px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: .88rem;
  font-weight: 700;
  color: var(--cos-ink);
  margin: 0 0 7px;
}

.cos-lead__req { color: var(--cos-stop); font-weight: 800; }   /* computed 7.60:1 on white */
.cos-lead__opt {
  font-size: .76rem;
  font-weight: 600;
  color: var(--cos-muted);             /* computed 7.58:1 on white */
  text-transform: none;
  letter-spacing: 0;
}

/* The input. Sized at 16px so iOS does not zoom the page when it is focused,
   which is a real defect on a form that exists to be filled in on a phone. */
.cos-lead__input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cos-ink);
  background: #ffffff;
  border: 1px solid #c4d4cf;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cos-lead__input::placeholder { color: #66737f; }   /* computed 4.86:1 on white */
.cos-lead__input:hover { border-color: #9fb8b2; }
.cos-lead__input:focus-visible,
.cos-lead__input:focus {
  outline: none;
  border-color: var(--cos-accent);
  box-shadow: 0 0 0 3px rgba(10, 122, 114, .22);
}
.cos-lead__input.is-invalid {
  border-color: #c0553c;
  box-shadow: 0 0 0 3px rgba(192, 85, 60, .16);
}
.cos-lead__msg { resize: vertical; min-height: 84px; }

/* The field level error. Hidden until it has something to say, so a screen
   reader never announces an empty element. */
.cos-lead__err {
  display: block;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--cos-stop);              /* computed 7.60:1 on white */
  margin: 7px 0 0;
  font-weight: 600;
}
.cos-lead__err[hidden] { display: none; }

/* The honeypot. Positioned away rather than display none, because some bots
   treat a hidden field as one to skip and fill only the visible ones. */
.cos-lead__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cos-lead__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  background: var(--cos-brand);        /* computed 13.11:1 for white text */
  border: 1px solid var(--cos-brand);
  border-radius: 11px;
  padding: 15px 22px;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}
.cos-lead__btn:hover { background: #00514e; border-color: #00514e; }
.cos-lead__btn:active { transform: translateY(1px); }
.cos-lead__btn:focus-visible {
  outline: 3px solid var(--cos-accent);
  outline-offset: 2px;
}
.cos-lead__btn[disabled] { opacity: .68; cursor: progress; }

.cos-lead__note {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--cos-muted);
  margin: 13px 0 0;
  text-align: center;
}

.cos-lead__formerr {
  font-size: .86rem;
  line-height: 1.55;
  color: var(--cos-stop);
  background: #fdecea;
  border: 1px solid #eec4bb;
  border-radius: 9px;
  padding: 11px 13px;
  margin: 14px 0 0;
  font-weight: 600;
}
.cos-lead__formerr[hidden] { display: none; }

/* ------------------------------------------------------------- Success --- */
.cos-lead__done { padding: 30px 26px; }
.cos-lead__done[hidden] { display: none; }
.cos-lead__donetitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.06rem;
  font-weight: 800;
  color: #146b4b;                      /* computed 6.49:1 on white */
  margin: 0 0 9px;
}
.cos-lead__donemsg {
  font-size: .94rem;
  line-height: 1.62;
  color: var(--cos-body);
  margin: 0;
}

/* -------------------------------------------------- Two columns, later --- */
/* Mobile first. The pitch stacks above the form on a phone, which is the right
   order to read it in, and sits beside it once there is room for both. */
@media (min-width: 900px) {
  .cos-lead__inner { grid-template-columns: 1.05fr .95fr; }
  .cos-lead__pitch {
    border-bottom: 0;
    border-right: 1px solid var(--cos-line);
    padding: 34px 30px;
  }
  .cos-lead__panel { padding: 34px 30px; }
  .cos-lead__done  { padding: 34px 30px; }
}

@media (max-width: 480px) {
  .cos-lead { margin: 28px 0; border-radius: 14px; }
  .cos-lead__pitch { padding: 24px 18px 22px; }
  .cos-lead__panel { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cos-lead__input,
  .cos-lead__btn { transition: none; }
  .cos-lead__btn:active { transform: none; }
}

/* A form is not something anybody prints. The pitch explains what is behind
   the gate, so that is kept and the controls are dropped. */
@media print {
  .cos-lead__panel,
  .cos-lead__done { display: none; }
  .cos-lead { box-shadow: none; border: 1px solid #94a3a0; }
}

/* ==========================================================================
   The partial report gate.

   Sits directly above the form and does one job: say exactly what is still
   behind the gate, by name. A gate that teases is a gate people resent. A gate
   that lists what it is holding lets somebody decide whether the exchange is
   worth it, which is both more honest and more effective.
   ========================================================================== */

.audit-gate {
  background: #ffffff;
  border: 1px solid #dbe7e2;
  border-left: 5px solid #0a7a72;
  border-radius: 16px;
  padding: 26px 24px 22px;
  margin: 36px 0 0;
  box-shadow: 0 12px 32px rgba(0, 55, 55, .08);
}

.audit-gate__head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 0 0 18px;
}

.audit-gate__ic {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: #e6f6f6;
  color: #005d5d;                      /* computed 6.93:1 on #e6f6f6 */
}

.audit-gate__intro { flex: 1 1 auto; min-width: 0; }

.audit-gate__h {
  font-size: clamp(1.15rem, 2.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: #0f172a;                      /* computed 17.85:1 on white */
  margin: 0 0 9px;
}

.audit-gate__lead {
  font-size: .97rem;
  line-height: 1.65;
  color: #334155;                      /* computed 10.35:1 on white */
  margin: 0;
  max-width: 68ch;
}
.audit-gate__lead strong { color: #0f172a; font-weight: 700; }

.audit-gate__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.audit-gate__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #f4f8f8;
  border: 1px solid #eef2f2;
  border-radius: 10px;
  padding: 12px 15px;
  margin: 0;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.5;
  color: #253344;                      /* computed 12.00:1 on #f4f8f8 */
}
.audit-gate__list i {
  flex: none;
  margin-top: 3px;
  font-size: .88rem;
  color: #0a7a72;                      /* computed 4.86:1 on #f4f8f8 */
}

@media (max-width: 600px) {
  .audit-gate { padding: 20px 17px 18px; border-radius: 13px; }
  .audit-gate__head { gap: 14px; margin-bottom: 15px; }
  .audit-gate__ic { width: 40px; height: 40px; font-size: 1rem; }
  .audit-gate__list li { padding: 11px 13px; font-size: .9rem; }
}

@media print {
  .audit-gate { box-shadow: none; border: 1px solid #94a3a0; break-inside: avoid; }
}