/* ==========================================================================
   Book-a-demo fields  —  Figma 928:8687

   Shared by the contact section and the modal the "Book a Demo" CTA opens, so
   this lives on its own rather than inside either one.

   Figma sizes each property-type pill by hand (120 / 140 / 140 / 89 / 109 for
   labels of 76 / 90 / 86 / 35 / 49). That is content width plus a padding that
   drifts between 22 and 30, so the pills here take one padding and sit on
   space-between instead: the row still spans 720 and a relabelled pill cannot
   break it.
   ========================================================================== */

/* Every gap inside the form is 24 in the current design -- between rows, and
   between a label and its control. It was 48 between rows in the previous
   one. The submit adds the remaining 40 to reach the 64 Figma leaves above
   it. */
.cfields {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--s));
}

.cfields__row {
  display: flex;
  gap: calc(40 * var(--s));
}

.cfields__field {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: calc(24 * var(--s));
  margin: 0;
  padding: 0;
  border: 0;
}

.cfields__submit { margin-top: calc(40 * var(--s)); }

.cfields__label {
  display: block;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--c-mono-light);
}

/* legend does not take part in the parent's flex layout, so the gap under it
   has to be its own margin. */
.cfields__field--types > .cfields__label { margin-bottom: calc(24 * var(--s)); }

.cfields__input {
  display: block;
  width: 100%;
  height: calc(48 * var(--s));
  padding: 0 calc(24 * var(--s));
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--c-light-dark);
  font-family: var(--f-body);
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-mono-light);
  transition: border-color 200ms var(--ui-ease), background-color 200ms var(--ui-ease);
  -webkit-appearance: none;
          appearance: none;
}

.cfields__input--area {
  height: calc(96 * var(--s));
  padding: calc(16 * var(--s)) calc(24 * var(--s));
  resize: vertical;
}

.cfields__input::placeholder { color: var(--c-mono-grey-03, #7B8493); opacity: 1; }
.cfields__input:hover { background: #1F2A3A; }
.cfields__input:focus,
.cfields__input:focus-visible {
  outline: 0;
  border-color: var(--c-accent-yellow);
  background: #1F2A3A;
}

/* --- property type ------------------------------------------------------- */

.cfields__types {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--s));
  flex-wrap: wrap;
}

.cfields__type { display: block; cursor: pointer; }

/* The radio itself is the state; the span is what you see. Kept in the layout
   rather than display:none so it can still take focus. */
.cfields__type input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cfields__type span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(48 * var(--s));
  padding: 0 calc(26 * var(--s));
  border: 1px solid transparent;
  background: var(--c-light-dark);
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-mono-light);
  white-space: nowrap;
  transition: border-color 200ms var(--ui-ease), background-color 200ms var(--ui-ease);
}

.cfields__type:hover span { background: #1F2A3A; }
.cfields__type input:checked + span { border-color: var(--c-accent-yellow); }
.cfields__type input:focus-visible + span { outline: 2px solid var(--c-accent-yellow); outline-offset: 2px; }

/* --- submit -------------------------------------------------------------- */

.cfields__btn {
  width: calc(160 * var(--s));
  height: calc(48 * var(--s));
}

/* --- reflow -------------------------------------------------------------- */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .cfields { gap: 28px; }
  .cfields__row { flex-direction: column; gap: 28px; }
  .cfields__field { gap: 12px; }
  .cfields__field--types > .cfields__label { margin-bottom: 16px; }
  .cfields__label { font-size: 13px; }
  .cfields__input { height: 48px; padding: 0 16px; font-size: 16px; }
  .cfields__input--area { height: 112px; padding: 14px 16px; }
  .cfields__types { justify-content: flex-start; gap: 8px; }
  .cfields__type span { height: 42px; padding: 0 16px; font-size: 14px; }
  .cfields__submit { margin-top: 4px; }
  .cfields__btn { width: 160px; height: 48px; }
}