/* ============================================================

   Landing Page — Get In Touch (dark CTA + contact form).

   Layer-2 semantic tokens + .ts-* only.

   BEM root: .lp-contact

   ============================================================ */
.lp-contact {
  position: relative;

  width: 100%;

  padding: 240px var(--spacing-8xl) var(--spacing-8xl);

  background: var(--surface-cta);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  align-items: center;
}

/* Dot grid across the whole background */
.lp-contact::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image: radial-gradient(var(--icon-muted) 1px, transparent 1px);

  background-size: 24px 24px;

  opacity: 0.35;

  pointer-events: none;

  z-index: 0;
}

/* Diagonal tint band across the top */
.lp-contact__band {
  position: absolute;

  left: -12%;

  top: -40px;

  width: 124%;

  height: 236px;

  background: var(--surface-overlay-soft);

  transform: rotate(-6deg);

  transform-origin: top left;

  pointer-events: none;

  z-index: 0;
}

.lp-contact__inner {
  position: relative;

  z-index: 1;

  width: 100%;

  max-width: 1440px;

  display: flex;

  justify-content: flex-end;

  align-items: flex-start;

  gap: 56px;
}

/* Decorative image, left of the form (bleeds upward) */
.lp-contact__image {
  flex-shrink: 0;

  width: 462px;

  height: 599px;

  margin-top: -197px;

  object-fit: cover;
}

/* ── Form ──────────────────────────────────────────────────── */
.lp-contact__form {
  width: 100%;

  max-width: 720px;

  display: flex;

  flex-direction: column;

  gap: 48px;
}

.lp-contact__head {
  display: flex;

  flex-direction: column;

  gap: var(--spacing-sm);
}

.lp-contact__title {
  color: var(--text-accent);
}

.lp-contact__subtitle {
  color: var(--text-on-dark);

  line-height: 1.6;
}

/* ── Real Umbraco Forms markup, reskinned to match this section's

   dark design (was hand-built .lp-contact__* markup before) ── */
.lp-contact .umbraco-forms-form {
  width: 100%;
}

.lp-contact .umbraco-forms-fieldset,
.lp-contact .umbraco-forms-form fieldset {
  border: none !important;

  padding: 0 !important;

  margin: 0 !important;

  display: flex;

  flex-direction: column;

  gap: var(--spacing-2xl);
}

/* Two fields configured side-by-side (e.g. First/Last name) render as a

   Bootstrap-style row-fluid/col-md-6 pair — lay them out like the old

   .lp-contact__row did. */
.lp-contact .row-fluid {
  display: flex;

  gap: var(--spacing-3xl);

  width: 100%;
}

.lp-contact .umbraco-forms-container.col-md-6 {
  flex: 1 1 0;

  width: auto;
}

.lp-contact .umbraco-forms-container.col-md-12 {
  width: 100%;
}

.lp-contact .umbraco-forms-field {
  display: flex;

  flex-direction: column;

  gap: var(--spacing-md);

  margin-bottom: 0;
}

.lp-contact .umbraco-forms-label {
  display: inline-flex;

  align-items: flex-start;

  gap: var(--spacing-xxs);

  color: var(--text-on-dark);

  font-family: "Poppins";

  font-size: var(--font-size-body-default);
}

.lp-contact .umbraco-forms-indicator {
  color: var(--icon-accent);
}

.lp-contact .umbraco-forms-form input.text,
.lp-contact .umbraco-forms-form textarea {
  max-width: none !important;

  width: 100% !important;
}

/* Shared control base */
.lp-contact input[type="text"],
.lp-contact input[type="email"],
.lp-contact input[type="tel"],
.lp-contact select,
.lp-contact textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 0 var(--spacing-xl);

  font-family: "Poppins";

  font-size: var(--font-size-body-default);

  color: var(--text-primary);

  background: var(--surface-page);

  border: none;

  border-radius: 2px;

  outline: 1px solid var(--border-subtle);

  outline-offset: -1px;
}

.lp-contact input[type="text"],
.lp-contact input[type="email"],
.lp-contact input[type="tel"],
.lp-contact select {
  height: 48px;
}

.lp-contact textarea {
  padding: var(--spacing-xl);
}

.lp-contact input::placeholder,
.lp-contact textarea::placeholder {
  color: var(--text-on-dark-muted);
}

.lp-contact input:focus,
.lp-contact select:focus,
.lp-contact textarea:focus {
  outline: 2px solid var(--text-accent);

  outline-offset: -2px;
}

.lp-contact select {
  appearance: none;

  -webkit-appearance: none;

  padding-right: 48px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23003C51' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 16px center;
}

.lp-contact textarea {
  min-height: 160px;

  resize: vertical;
}

/* Consent / single-checkbox field. Forms renders <label> then a
   .umbraco-forms-field-wrapper containing [checkbox, hidden input, error
   span] — display:contents unwraps that div so the checkbox and error span
   become direct flex items of the field alongside the label, instead of
   being boxed together as one column next to it (which squashed the error
   text into a narrow strip beside the label). order:-1 puts the checkbox
   before the label without touching markup, and the error span gets its
   own full-width row via flex-basis. */
.lp-contact .umbraco-forms-field.dataconsent,
.lp-contact .umbraco-forms-field.checkbox {
  flex-direction: row;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--spacing-sm);
}

.lp-contact .umbraco-forms-field.dataconsent .umbraco-forms-field-wrapper,
.lp-contact .umbraco-forms-field.checkbox .umbraco-forms-field-wrapper {
  display: contents;
}

.lp-contact .umbraco-forms-field.dataconsent input[type="checkbox"],
.lp-contact .umbraco-forms-field.checkbox input[type="checkbox"] {
  order: -1;
}

.lp-contact .umbraco-forms-field.dataconsent .field-validation-error,
.lp-contact .umbraco-forms-field.dataconsent .field-validation-valid,
.lp-contact .umbraco-forms-field.checkbox .field-validation-error,
.lp-contact .umbraco-forms-field.checkbox .field-validation-valid {
  flex-basis: 100%;

  width: 100%;
}

.lp-contact .privacy-link {
  color: inherit;

  text-decoration: underline;
}

.lp-contact .privacy-link:hover {
  color: var(--text-accent);
}

.lp-contact input[type="checkbox"] {
  flex-shrink: 0;

  width: 20px;

  height: 20px;

  border-radius: 2px;

  accent-color: var(--surface-accent);

  margin: 0;
}

.lp-contact .umbraco-forms-field.dataconsent .umbraco-forms-label,
.lp-contact .umbraco-forms-field.checkbox .umbraco-forms-label {
  color: var(--text-on-dark);

  line-height: 1.2;

  margin: 0;
}

.lp-contact .umbraco-forms-form span.field-validation-error {
  color: var(--icon-accent) !important;

  font-size: var(--font-size-body-sm);
}

/* Umbraco Forms' unobtrusive validation swaps this span's class to
   field-validation-valid once a required field is filled in — without this
   rule the (now empty) span still renders as visible whitespace, so the
   error line never visually clears. */
.lp-contact .umbraco-forms-form span.field-validation-valid {
  display: none;
}

/* Submit */
.lp-contact .umbraco-forms-navigation {
  margin-top: 0;
}

/* Forms wraps the submit button in Bootstrap's row-fluid/col-md-12, which
   floats and shrink-wraps to content — kill the float so width: 100% on the
   button below actually has a full-width container to resolve against. */
.lp-contact .umbraco-forms-navigation .row-fluid,
.lp-contact .umbraco-forms-navigation .col-md-12 {
  float: none !important;

  width: 100% !important;
}

/* Kept as a real <input type="submit"> — not swapped for a <button> — so the
   Umbraco Forms client-side validation script (which binds to this exact
   element on page load) stays wired up. The arrow is a background-image
   because an <input> can't render child markup or ::after content. */
.lp-contact .umbraco-forms-navigation input[type="submit"] {
  align-self: stretch;

  width: 100% !important;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  padding: var(--spacing-xl) var(--spacing-3xl);

  padding-right: calc(var(--spacing-3xl) + 24px);

  background-color: var(--surface-inverse);

  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33203 8.00065H12.6654M7.9987 12.6673L12.6654 8.00065L7.9987 3.33398' stroke='%23CEFF6E' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right var(--spacing-3xl) center;

  color: var(--text-on-dark);

  border: none;

  border-radius: 2px;

  font-family: "Poppins";

  font-size: var(--font-size-label-lg, var(--font-size-body-default));

  cursor: pointer;

  transition: background-color 150ms ease;
}

.lp-contact .umbraco-forms-navigation input[type="submit"]:hover {
  background-color: var(--surface-hero);
}

.lp-contact .umbraco-forms-navigation input[type="submit"]:focus-visible {
  outline: 2px solid var(--text-accent);

  outline-offset: 2px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp-contact {
    padding: var(--spacing-8xl) var(--spacing-3xl);
  }

  /* stack: image on top, form below */
  .lp-contact__inner {
    flex-direction: column;

    align-items: stretch;

    gap: 48px;
  }

  .lp-contact__image {
    position: static;

    width: 100%;

    height: 443px;

    margin-top: 0;

    object-fit: cover;
  }

  .lp-contact__form {
    max-width: none;

    width: 100%;
  }
}

@media (max-width: 600px) {
  .lp-contact .row-fluid {
    flex-direction: column;
  }
}