/**
 * Bexorg contact form — HubSpot Forms v4 (hs-form-html / hsfc)
 * Matches https://bexorg.com/contact
 * Upload minified copy to HubFS for production embeds.
 */

@font-face {
  font-family: "KH Interference";
  src: url("https://bexorg.com/_next/static/media/KHInterference-Regular.82a08edb.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aktiv Grotesk Ex";
  src: url("https://bexorg.com/_next/static/media/AktivGroteskEx_W_Lt.719738e8.woff2") format("woff2"),
    url("https://bexorg.com/_next/static/media/AktivGroteskEx_W_Lt.597c9951.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --bexo-bg: #000000;
  --bexo-text: #ffffff;
  --bexo-placeholder: rgba(255, 255, 255, 0.5);
  --bexo-border: rgba(255, 255, 255, 0.2);
  --bexo-focus-bg: rgba(255, 255, 255, 0.1);
  --bexo-error: #d2341e;
  --bexo-font-label: "KH Interference", ui-monospace, monospace;
  --bexo-font-input: "Aktiv Grotesk Ex", ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --bexo-label-size: 13px;
  --bexo-label-spacing: 0.46em;
  --bexo-input-size: 17px;
  --bexo-input-weight: 300;
  --bexo-field-p: 0px;
  --bexo-field-p: 1.25rem;
}

/* —— Renderer shell —— */
.hs-form-html [data-hsfc-id="Renderer"],
.hs-form-html [data-hsfc-id="Renderer"] form,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Step,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Step__Content {
  background: transparent;
  background-color: transparent;
  margin: 0;
  padding: 0;
  color: var(--bexo-text);
}

.hs-form-html [data-hsfc-id="Renderer"] {
  font-family: var(--bexo-font-input);
  font-weight: var(--bexo-input-weight);
}

.hs-form-html [data-hsfc-id="Renderer"] h2 {
  display: none;
}

/* Outer border (matches form container on live site) */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content {
  padding: 0;
  border: 1px solid var(--bexo-border);
  border-bottom: none;
}

/* Corner markers (top-left & top-right) */
.hs-form-html [data-hsfc-id="Renderer"] form {
  position: relative;
}

.hs-form-html [data-hsfc-id="Renderer"] form::before,
.hs-form-html [data-hsfc-id="Renderer"] form::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3' fill='none'%3E%3Cpath fill='%2349AD42' d='M3 1H2V0h1zM0 3V2h1V1H0V0h1v1h1v1h1v1H2V2H1v1z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hs-form-html [data-hsfc-id="Renderer"] form::before {
  left: 0;
  transform: translate(-50%, -50%);
}

.hs-form-html [data-hsfc-id="Renderer"] form::after {
  right: 0;
  transform: translate(50%, -50%) scaleX(-1);
}

/* —— Field rows —— */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Row {
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--bexo-border);
  transition: background-color 150ms ease;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Row > [data-hsfc-id] {
  padding: var(--bexo-field-p) 0 0;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Row > [data-hsfc-id] > .hsfc-ErrorAlert {
  padding: 0px var(--bexo-field-p) 10px !important;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Row > [data-hsfc-id] > * {
  padding: 0 var(--bexo-field-p) var(--bexo-field-p) var(--bexo-field-p);
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Row:focus-within {
  background-color: var(--bexo-focus-bg);
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Row:first-child {
  border-top: none;
}

/* —— Labels —— */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-FieldLabel,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-FieldLabel span,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-FieldLabel__RequiredIndicator {
  font-family: var(--bexo-font-label);
  font-size: var(--bexo-label-size);
  font-weight: 400;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: var(--bexo-label-spacing);
  text-transform: uppercase;
  color: var(--bexo-text);
  -webkit-text-fill-color: var(--bexo-text);
  margin: 0;
  padding: 0 var(--bexo-field-p);
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-FieldLabel span {
  padding: 0 !important;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-FieldLabel {
  position: static;
  transform: none;
  margin-bottom: 0 !important;
  pointer-events: auto;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-FieldLabel * {
  line-height: inherit;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-FieldLabel__RequiredIndicator {
  padding: 0 var(--bexo-field-p);
}

/* —— Text inputs & textarea —— */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px var(--bexo-field-p) 20px;
  border: none;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  color: var(--bexo-text);
  font-family: var(--bexo-font-input);
  font-size: clamp(1rem, calc(1rem + (1.25 - 1) * ((100vw - 30rem) / (80 - 30))), 1.25rem);
  font-weight: var(--bexo-input-weight);
  line-height: clamp(1.5rem, calc(1.5rem + (1.75 - 1.5) * ((100vw - 30rem) / (80 - 30))), 1.75rem);
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput::placeholder,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput::placeholder {
  color: var(--bexo-placeholder);
  opacity: 1;
  font-weight: var(--bexo-input-weight);
  text-transform: none;
  letter-spacing: normal;
}

/* Override HubSpot default hover/focus/active glow (box-shadow) */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput:hover,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput:focus,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput:focus-visible,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput:active,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput:hover,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus-visible,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput:active {
  outline: none;
  box-shadow: none !important;
  border: none;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Row:has(.hsfc-TextareaInput) .hsfc-TextareaInput {
  min-height: 120px;
  resize: vertical;
}

/* Autofill on dark background */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput:-webkit-autofill,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput:-webkit-autofill {
  -webkit-text-fill-color: var(--bexo-text);
  caret-color: var(--bexo-text);
  transition: background-color 99999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px var(--bexo-bg) inset;
}

/* —— Submit —— */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-NavigationRow {
  margin: 0;
  padding: var(--bexo-field-pt) 0 0;
  border: none;
  border-bottom: 1px solid var(--bexo-border);
  overflow: visible;
  transition: background-color 150ms ease;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-NavigationRow:focus-within {
  background-color: var(--bexo-focus-bg);
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Alerts:empty {
  display: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons {
  display: flex;
  justify-content: flex-start !important;
  width: 100%;
  padding: 0;
  overflow: visible;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:focus,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:active,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:hover,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:focus-visible {
  --bexo-btn-tick-size: 4px;
  --bexo-btn-tick-hover: 20px;
  --bexo-btn-tick-offset: 2px;
  position: relative;
  background: transparent !important;
  color: var(--bexo-text) !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  width: 100%;
  margin: 0;
  padding: var(--bexo-field-p);
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--bexo-text);
  font-family: var(--bexo-font-label);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.33em;
  text-transform: uppercase;
  overflow: visible;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:focus,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:active,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:hover {
  opacity: 1 !important;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 22px;
  height: 8px;
  margin-left: 0;
  letter-spacing: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8' fill='none'%3E%3Cpath fill='%23fff' d='M17.95 7.75V6.415l1.666-1.665H0v-1.5h19.616L17.95 1.585V.25h.614q.135 0 .226.09L22 3.55v.9l-3.21 3.21a.3.3 0 0 1-.226.09z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:has(> svg)::after {
  display: none;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button > svg {
  flex-shrink: 0;
  width: 22px;
  height: 8px;
}

/* Corner / edge ticks (decorative spans after label + arrow) */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button > span:not(:first-of-type) {
  position: absolute;
  box-sizing: border-box;
  width: var(--bexo-btn-tick-size);
  height: var(--bexo-btn-tick-size);
  border: 1px solid var(--bexo-text);
  background: transparent;
  pointer-events: none;
  z-index: 10;
  transition: width 300ms ease, height 300ms ease, transform 300ms ease;
}

/* Top-left L */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button > span:nth-of-type(2) {
  left: 0;
  top: 0;
  border-right: none;
  border-bottom: none;
  transform: translate(calc(-1 * var(--bexo-btn-tick-offset)), calc(-1 * var(--bexo-btn-tick-offset)));
}

/* Bottom-left L */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button > span:nth-of-type(3) {
  left: 0;
  bottom: 0;
  border-top: none;
  border-right: none;
  transform: translate(calc(-1 * var(--bexo-btn-tick-offset)), var(--bexo-btn-tick-offset));
}

/* Top-right L */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button > span:nth-of-type(4) {
  right: 0;
  top: 0;
  border-bottom: none;
  border-left: none;
  transform: translate(var(--bexo-btn-tick-offset), calc(-1 * var(--bexo-btn-tick-offset)));
}

/* Bottom-right L */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button > span:nth-of-type(5) {
  right: 0;
  bottom: 0;
  border-top: none;
  border-left: none;
  transform: translate(var(--bexo-btn-tick-offset), var(--bexo-btn-tick-offset));
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:hover > span:nth-of-type(2),
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:hover > span:nth-of-type(3),
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:hover > span:nth-of-type(4),
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:hover > span:nth-of-type(5),
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:focus-visible > span:nth-of-type(2),
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:focus-visible > span:nth-of-type(3),
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:focus-visible > span:nth-of-type(4),
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:focus-visible > span:nth-of-type(5) {
  width: var(--bexo-btn-tick-hover);
  height: var(--bexo-btn-tick-hover);
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:hover,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:focus-visible {
  background: transparent;
  color: var(--bexo-text);
  opacity: 0.75;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  transform: none;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):hover {
  transform: none;
}

/* —— Errors —— */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-ErrorAlert {
  font-family: 'KH Interference', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 300;
  color: var(--bexo-error);
  padding: var(--bexo-field-p) var(--bexo-field-p) 8px !important;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput[aria-invalid="true"],
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput[aria-invalid="true"] {
  color: var(--bexo-text);
}

/* —— Thank you / post-submit —— */
.hs-form-html [data-hsfc-id="PostSubmit"] [data-hsfc-id="RichText"],
.hs-form-html [data-hsfc-id="PostSubmit"] [data-hsfc-id="RichText"] p {
  font-family: var(--bexo-font-input);
  font-size: var(--bexo-input-size);
  font-weight: var(--bexo-input-weight);
  line-height: 1.5;
  color: var(--bexo-text);
  -webkit-text-fill-color: var(--bexo-text);
  margin: 0;
  padding: var(--bexo-field-p);
}

@media (max-width: 430px) {
  .hs-form-html [data-hsfc-id="Renderer"] .hsfc-Row {
    gap: 0px;
  }
}