.lead-form-section { background: radial-gradient(130% 100% at 50% 12%, var(--accent) 0%, var(--accent-hover) 100%); padding: 10rem 0; display: flex; justify-content: center; position: relative; z-index: 0; overflow: hidden; }

.lead-form-parallax { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lead-form-parallax__layer { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.lead-form-parallax__layer--1 { width: 46rem; height: 46rem; top: -16rem; left: -12rem; background: #ffffff; opacity: 0.14; }
.lead-form-parallax__layer--2 { width: 40rem; height: 40rem; bottom: -18rem; right: -10rem; background: var(--ink); opacity: 0.22; }
.lead-form-parallax__layer--3 { width: 26rem; height: 26rem; top: 55%; right: 10%; background: var(--accent-soft); opacity: 0.3; }

@media (max-width: 640px) {
  .lead-form-parallax__layer--3 { display: none; }
}

.lead-form-section__inner {
  width: min(560px, calc(100% - 4rem)); margin: 0 auto;
  position: relative; z-index: 1;
  transition: width 380ms var(--ease);
}

/* ---- the Cal.com scheduler needs real width to lay itself out (day grid + time
   slots side by side); the 560px form width that suits the earlier text steps
   is what was squeezing it into a single cramped column ---- */
.lead-form-section__inner:has(.form-success.is-active) {
  width: min(1100px, calc(100% - 4rem));
}

.lead-form-section__title {
  margin: 0 0 2.4rem; font-weight: 800; font-size: clamp(2.6rem, 3vw, 3.6rem);
  line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; text-align: center;
  color: var(--surface);
}
.lead-form-section__title .accent-dot { color: var(--surface); }

.form-card {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 4.2rem 4.4rem 3.8rem;
}

.form-progress { margin-bottom: 3.6rem; }
.form-progress__track { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.form-progress__fill {
  height: 100%; border-radius: inherit; background: var(--accent); width: 25%;
  transition: width 420ms var(--ease);
}

.form-step { display: none; }
.form-step.is-active { display: block; animation: lead-form-step-in 320ms var(--ease); }
@keyframes lead-form-step-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

.step-title { margin: 0 0 1rem; font-weight: 800; font-size: clamp(2.4rem, 2.6vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; color: var(--ink); }
.step-desc { margin: 0 0 3.2rem; max-width: 42rem; font-size: 1.55rem; color: var(--ink-muted); }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.6rem 2.4rem; }
.field-grid + .field-grid { margin-top: 1.6rem; }
.field--full { grid-column: 1 / -1; }

.field { display: grid; gap: 0.6rem; min-width: 0; }
.field.is-hidden { display: none; }
.field label {
  font-size: 1.4rem; font-weight: 600; color: var(--ink);
}
.field label .req { color: var(--accent); }
.field label .optional { color: var(--ink-muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%; min-height: 4.6rem; padding: 0 1.4rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--canvas); color: var(--ink); font: inherit; font-size: 1.5rem;
}
.field textarea { min-height: 10rem; padding-top: 1.2rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #a3a3a3; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.field select:disabled { cursor: not-allowed; opacity: 0.6; }

.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 4.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236e6e73' d='M1.41.59 6 5.17 10.59.59 12 2l-6 6-6-6z'/%3E%3C/svg%3E");
  background-position: calc(100% - 1.6rem) 50%; background-size: 1.2rem 0.8rem; background-repeat: no-repeat;
}
.field select:invalid { color: #a3a3a3; }

.field__error {
  display: flex; align-items: center; gap: 0.5rem; font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--accent);
  visibility: hidden;
}
.field.has-error .field__error { visibility: visible; }

.chip-group { display: flex; flex-direction: column; gap: 1rem; }
.chip {
  display: flex; align-items: center; gap: 1rem; cursor: pointer; width: 100%;
  padding: 1.2rem 1.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font-size: 1.45rem; font-weight: 600; color: var(--ink); background: var(--canvas);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chip:hover { border-color: var(--ink); }
.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.chip .chip-check {
  display: none; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: var(--radius-sm); background: var(--accent); color: #fff; flex: 0 0 auto;
}
.chip .chip-check .material-symbols-rounded { font-size: 14px; }
.chip:has(input:checked) .chip-check { display: inline-flex; }

.form-nav { display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem; margin-top: 4rem; }
.form-nav.has-back { justify-content: space-between; }

.form-nav .button,
.form-nav .button--ghost {
  font-size: 1.4rem;
}

.form-success { display: none; text-align: center; padding: 2rem 0; }
.form-success .step-title { text-align: left; }
.form-success.is-active { display: block; animation: lead-form-step-in 320ms var(--ease); }
.form-success__back { display: flex; width: fit-content; margin: 2.4rem auto 0 0; font-size: 1.4rem; }

.cal-embed {
  width: 100%; height: 760px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; text-align: left;
}

@media (max-width: 900px) {
  .lead-form-section { padding: 7rem 0; }
}

@media (max-width: 700px) {
  /* .lead-footer-wrap wraps this section together with the footer (see
     index.html/base.html) and carries the one shared red fill both sit on,
     so this section's own background steps aside rather than trying to
     match a second, separately-painted one */
  .lead-footer-wrap { background: var(--accent-hover); }
  .lead-form-section { background: none; }

  /* layer--2 is meant to fade into the section's own gradient at its clipped
     bottom edge; against the flat shared fill above, that clip reads as a
     hard seam, so it's dropped on the same breakpoint the gradient is. */
  .lead-form-parallax__layer--2 { display: none; }
}

@media (max-width: 560px) {
  .lead-form-section { padding: 6rem 0; }
  .lead-form-section__inner { width: calc(100% - 3.2rem); }
  .form-card { padding: 2.8rem 2.4rem; }
  .field-grid { grid-template-columns: 1fr; }
  .cal-embed { height: 540px; }
}