/* Contact page — put on the same ground as the rest.
 * ===========================================================================
 *
 * The light grey was Webflow's, not a bug: `body` carries
 * --_primitives---colors--neutral (#f2f2f2) and the live site looks the same.
 * It had a reason while the whole site was light. It has none now — every
 * other page opens and closes on #0b0b0b, so the contact page was the one
 * place the system dropped out.
 *
 * Inverting a surface means inverting everything that sits on it. Twice now a
 * fill has been written as a fixed colour and gone invisible when its ground
 * flipped (the PDF button white on white, the event button dark on dark), so
 * everything below is written against --ct-surface / --ct-ink rather than
 * against #fff or #151515.
 *
 * Scoped to [data-mode="frontier"], like the rest of the design layer.
 */

[data-mode="frontier"] .section_contact {
  --ct-surface: #0b0b0b;
  --ct-ink: #ffffff;
  --ct-muted: rgba(255, 255, 255, 0.62);
  --ct-line: rgba(255, 255, 255, 0.2);
  --ct-accent: var(--site-accent, #c4b798);

  background-color: var(--ct-surface);
  color: var(--ct-ink);
}

[data-mode="frontier"] .section_contact :is(h1, h2, h3, h4, .heading-style-h4, .text-color-black) {
  color: var(--ct-ink);
}

[data-mode="frontier"] .section_contact :is(p, .text-size-medium, .text-size-large) {
  color: var(--ct-muted);
}

/* Phone, e-mail and address links. */
[data-mode="frontier"] .section_contact a:not(.button):not(.w-checkbox) {
  color: var(--ct-ink);
  text-decoration-color: var(--ct-line);
}

[data-mode="frontier"] .section_contact a:not(.button):not(.w-checkbox):hover {
  color: var(--ct-accent);
}

/* Webflow's icons ship black. */
[data-mode="frontier"] .section_contact img[src$=".svg"] {
  filter: invert(1);
  opacity: 0.6;
}

/* --- The form ------------------------------------------------------------- */

[data-mode="frontier"] .section_contact .form_field-label {
  color: var(--ct-muted);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-mode="frontier"] .section_contact .form_input {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--ct-line);
  border-radius: 0;
  color: var(--ct-ink);
  transition: border-color 0.24s ease;
}

[data-mode="frontier"] .section_contact .form_input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

[data-mode="frontier"] .section_contact .form_input:focus {
  border-bottom-color: var(--ct-accent);
  outline: none;
}

/* Chrome paints its autofill background over anything but an inset shadow. */
[data-mode="frontier"] .section_contact .form_input:-webkit-autofill {
  -webkit-text-fill-color: var(--ct-ink);
  -webkit-box-shadow: 0 0 0 60rem var(--ct-surface) inset;
  caret-color: var(--ct-ink);
}

[data-mode="frontier"] .section_contact .form_checkbox,
[data-mode="frontier"] .section_contact .w-checkbox {
  color: var(--ct-muted);
}

[data-mode="frontier"] .section_contact .w-checkbox-input {
  background-color: transparent;
  border-color: var(--ct-line);
  border-radius: 2px;
}

[data-mode="frontier"] .section_contact .w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: var(--ct-accent);
  border-color: var(--ct-accent);
}

/* Submit, re-cut as the tag button. */
[data-mode="frontier"] .section_contact input[type="submit"] {
  padding: 0.875rem 1.25rem;
  background-color: var(--ct-accent);
  border: 1px solid var(--ct-accent);
  border-radius: 2px;
  color: var(--ct-surface);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

[data-mode="frontier"] .section_contact input[type="submit"]:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--ct-surface);
}

/* Webflow's success and error panels — light by default. */
[data-mode="frontier"] .section_contact :is(.w-form-done, .w-form-fail) {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ct-line);
  border-radius: 2px;
  color: var(--ct-ink);
}

[data-mode="frontier"] .section_contact .w-form-fail {
  border-color: rgba(255, 120, 120, 0.5);
}

/* ===========================================================================
 * One screen, and in the system's own language
 * ===========================================================================
 *
 * Three things were wrong at 1440x900, all measured:
 *
 *   header lower edge            94px
 *   form                        717px tall, starting at y=202
 *   submit button, lower edge   918px   — 18px past the fold
 *
 * So the send button was cut off by the viewport, and it was cut off *because*
 * the page had no vertical padding at all to give up: the section reported
 * padding 0 top and bottom while its content overflowed by 18px. It looked
 * like a spacing problem and was really a sizing one.
 *
 * The section now claims exactly one viewport and centres its content in what
 * is left under the header. The form gives back the 84px that buys the
 * breathing room: the message box was a fixed 180px — the tallest single
 * element on the page, for a field most people write two lines into — and the
 * row gaps were 24px.
 */

/* svh, not vh: on iOS `100vh` is the height with the browser chrome *hidden*,
   so the button would be under the toolbar until the user scrolled. */
[data-mode="frontier"] .section_contact {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--site-header-bottom, 94px) + clamp(1.5rem, 4vh, 3.5rem));
  padding-bottom: clamp(1.5rem, 4vh, 3.5rem);
}

/* The flex child has to be told to fill the row, or it shrinks to its content
   and the two columns lose the container's measure. */
[data-mode="frontier"] .section_contact > .container-large {
  width: 100%;
}

/* --- The left column ------------------------------------------------------ */

/* The eyebrow every other rebuilt section opens with. It is what makes this a
   section of the system rather than a page that kept Webflow's defaults. */
[data-mode="frontier"] .section_contact .contact_heading-wrapper::before {
  content: "// Contact";
  display: block;
  margin-bottom: 1rem;
  color: var(--ct-accent);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Out. Three 24px glyphs saying "this is an e-mail address" in front of an
   e-mail address — the label is the value. Nothing else on the rebuilt pages
   uses a pictogram; the register on /about-us and the certifications block
   both separate their rows with a hairline instead, which is what happens
   here. */
[data-mode="frontier"] .section_contact .contact6_icon-wrapper {
  display: none;
}

[data-mode="frontier"] .section_contact .contact6_contact-list {
  display: flex;
  flex-direction: column;
  /* Webflow sets `align-items: flex-start` here, which shrinks each row to its
     own text: the three hairlines came out 171, 152 and 496px wide and read as
     three ragged rules rather than one register. */
  align-items: stretch;
  gap: 0;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

/* `width: 100%` and not `align-items: stretch` on the parent. Webflow emits a
   per-node rule for each of these — `#w-node-e780317a-… { justify-self: start }`
   — from when the list was a grid, and an id selector outranks anything this
   file can reasonably write. Setting the width directly sidesteps the whole
   argument. */
[data-mode="frontier"] .section_contact .contact6_item {
  display: block;
  width: 100%;
  padding: clamp(0.7rem, 1.6vh, 1rem) 0;
  border-top: 1px solid var(--ct-line);
}

[data-mode="frontier"] .section_contact .contact6_item:last-child {
  border-bottom: 1px solid var(--ct-line);
}

/* --- The form, 84px shorter ----------------------------------------------- */

[data-mode="frontier"] .section_contact .contact_form {
  gap: clamp(0.9rem, 2.2vh, 1.25rem);
}

/* Fluid rather than a fixed 180px, so a 13" laptop loses message box instead
   of losing the send button. Still four lines at the smallest step. */
[data-mode="frontier"] .section_contact .form_input.is-text-area {
  min-height: clamp(4.5rem, 13vh, 7.5rem);
}

/* The checkbox row carried a 16px bottom margin on top of the grid gap. */
[data-mode="frontier"] .section_contact .contact_form > .margin-bottom {
  margin-bottom: 0;
}

/* --- Small screens -------------------------------------------------------- */

/* One column, and the one-viewport rule is dropped: a stacked form cannot fit
   a phone screen and pretending otherwise would only shrink the fields. */
@media (max-width: 991px) {
  [data-mode="frontier"] .section_contact {
    min-height: 0;
    display: block;
    padding-top: calc(var(--site-header-bottom, 72px) + 2rem);
    padding-bottom: 3rem;
  }
  [data-mode="frontier"] .section_contact .form_input.is-text-area {
    min-height: 7rem;
  }
}

/* Webflow's own 220px.
 *
 * The grid carries `padding-top: 220px` — a hand-set value from the light
 * version of this page, and the reason the block sat where it did no matter
 * what the section was told. It is also what pushed the send button past the
 * fold: 220 of padding plus a 717px form is 937, in a 900px window.
 *
 * The section owns its vertical rhythm now (header height + a viewport-relative
 * step), so this has to go rather than be reduced — any fixed number here would
 * be added to that and drift again at the next viewport size. */
[data-mode="frontier"] .section_contact .contact_content {
  padding-top: 0;
}