/* ============================================================
 * ZIBRA — HubSpot Forms Stylesheet (single source of truth)
 * v13 — hardened scoping + mirrored messages + floating labels
 *
 * LOAD: <link rel="stylesheet" href=".../zibra-hubspot-forms.v13.css">
 *       in Webflow Site Settings <head>.
 * PAIRS WITH: v10 footer enhancer script.
 * VERSION THE FILENAME on every update (immutable CDN cache).
 *
 * ------------------------------------------------------------
 * TROUBLESHOOTING — if the form renders unstyled / indigo:
 *  1. Network tab: is this file 200, Content-Type text/css?
 *     R2 sometimes serves octet-stream → browser rejects it.
 *  2. Is HubSpot's own CSS loading? Add css:"" to the embed:
 *       hbspt.forms.create({ portalId, formId, region, css:"" })
 *     Also set the form to unstyled in HubSpot's form editor
 *     (Style tab) — theme CSS ships with the form definition.
 *  3. Only ONE HubSpot stylesheet should exist site-wide.
 *     Delete the old Slater CSS and any per-page <style> blocks.
 *
 * SCOPING NOTE: form internals are scoped to .hs-form (the form
 * element, always present). Wrapper-level pieces (success msg,
 * recaptcha) also match [id^="hbspt-form"], since the wrapper
 * class differs between HubSpot embed versions.
 *
 * SAFETY NOTE (JS): never add/remove nodes inside HubSpot's
 * React tree — it unmounts the form. All message nodes are
 * created/destroyed by us (.z-msg); HubSpot's .hs-error-msgs
 * are hidden here and mirrored by the script.
 * ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --z-green:       #00ff6a;
  --z-green-dark:  #002b12;
  --z-black-mid:   #151515;
  --z-grey-body:   #878787;
  --z-white:       #fafafa;
  --z-error:       #ff5951;
  --z-cut-base:    min(7px, 1.2vw);
  --z-field-pad-y: min(3vh, 1.25rem);
  --z-field-pad-x: min(3vw, 1.25rem);
  --z-mono:        "IBM Plex Mono", monospace;
}

/* ============================================================
 * 1. CONTAINER & FORM SHELL
 * ============================================================ */
.hbspt-form,
[id^="hbspt-form"] {
  max-width: 100%;
  font-family: inherit;
  overflow: auto;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

form.hs-form {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 0;
  gap: 0;
  background: transparent !important;
  border: none !important;
}

.hs-form > p { margin: 0; }

.hs-form > fieldset { max-width: 100% !important; }

/* Field vertical rhythm — single rule */
.hs-form .hs-form-field,
.hs-form .hs_submit {
  margin: 0 0 1em !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.hs-form ul.inputs-list,
.hs-form .inputs-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

.hs-form .input {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Hide auto-generated field labels (placeholder-driven UI).
   Floating-label fields re-enable theirs in section 2b.
   Checkbox labels are NOT direct children — never hit here. */
.hs-form .hs-form-field > label {
  display: none;
  margin-bottom: 0 !important;
}

/* ============================================================
 * 2. TEXT / EMAIL INPUTS — two-polygon stroke system
 *    Wrapper (.input) = stroke ring · input = fill
 * ============================================================ */
.hs-form .hs-input {
  width: 100% !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0 !important;
  box-shadow: none;
}

/* Wrapper: same polygon + permanent 1px ring
   (transparent by default → zero shift on state change) */
.hs-form .hs-fieldtype-text .input {
  --cut: var(--z-cut-base);
  padding: 1px !important;
  background: transparent !important;
  -webkit-clip-path: polygon(
    var(--cut) 0%, calc(100% - var(--cut)) 0%,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0% calc(100% - var(--cut)), 0% var(--cut));
  clip-path: polygon(
    var(--cut) 0%, calc(100% - var(--cut)) 0%,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0% calc(100% - var(--cut)), 0% var(--cut));
}

/* Non-text field wrappers keep no visual chrome */
.hs-form .hs-fieldtype-booleancheckbox .input,
.hs-form .hs-fieldtype-radio .input {
  padding: 0 !important;
  background: transparent !important;
  clip-path: none;
  -webkit-clip-path: none;
}

/* Input: inner polygon, cut reduced by 2−√2 px so the
   diagonal stroke is exactly 1px like the straight edges */
.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
  --cut: calc(var(--z-cut-base) - 0.59px);
  height: 6.666vh !important;
  min-height: 2.5rem !important;
  max-height: 3.75rem !important;
  margin: 0 !important;
  padding: var(--z-field-pad-y) var(--z-field-pad-x) !important;
  border: 0 !important;
  box-sizing: border-box;
  background-color: var(--z-black-mid) !important;
  color: var(--z-white) !important;
  font-family: var(--z-mono) !important;   /* kit: input text */
  font-size: 1rem !important;              /* kit: 16px desktop */
  font-weight: 400;
  line-height: 120%;
  -webkit-clip-path: polygon(
    var(--cut) 0%, calc(100% - var(--cut)) 0%,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0% calc(100% - var(--cut)), 0% var(--cut));
  clip-path: polygon(
    var(--cut) 0%, calc(100% - var(--cut)) 0%,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0% calc(100% - var(--cut)), 0% var(--cut));
}

.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none !important;
  border: 0 !important;
}

/* ---- Ring states: recolor the wrapper ---- */
.hs-form .hs-fieldtype-text .input:has(.hs-input[aria-invalid="true"]),
.hs-form .hs-fieldtype-text .input:has(.hs-input.invalid) {
  background: var(--z-error) !important;
}
/* Focus after error: editing wins over "it was wrong" */
.hs-form .hs-fieldtype-text .input:has(.hs-input:focus-visible) {
  background: var(--z-green) !important;
}

/* Placeholder — single definition (non-floating fields) */
.hs-form .hs-input::placeholder {
  color: #ffffff !important;
  opacity: 1;
  font-size: 1rem;
}
.hs-form .hs-input::-webkit-input-placeholder {
  color: #ffffff !important;
  font-size: 1rem;
}
.hs-form .hs-input::-moz-placeholder {
  color: #ffffff !important;
  opacity: 1;
  font-size: 1rem;
}

/* Kill Chrome/Safari autofill's yellow-blue wash */
.hs-form .hs-input:-webkit-autofill,
.hs-form .hs-input:-webkit-autofill:hover,
.hs-form .hs-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--z-white);
  -webkit-box-shadow: 0 0 0 100px var(--z-black-mid) inset;
  caret-color: var(--z-white);
}

/* ============================================================
 * 2b. FLOATING LABEL — CSS only, zero DOM mutation.
 *     Label text is set here, not by JS. Add a rule per field.
 * ============================================================ */
.hs-form .hs_email { position: relative; }

.hs-form .hs_email > label {
  display: block !important;
  position: absolute;
  left: calc(var(--z-field-pad-x) + 1px);
  top: calc(var(--z-field-pad-y) + 1px);
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;
  pointer-events: none;
  color: var(--z-white);
  font-family: var(--z-mono);
  font-size: 1rem;
  font-weight: 400;
  line-height: 120%;
  transition: top .18s ease, font-size .18s ease, color .18s ease;
}
.hs-form .hs_email > label::after { content: "Email*"; }

.hs-form .hs_email .hs-input::placeholder { color: transparent !important; }
.hs-form .hs_email .hs-input::-webkit-input-placeholder { color: transparent !important; }
.hs-form .hs_email .hs-input::-moz-placeholder { color: transparent !important; }

.hs-form .hs_email:has(.hs-input:focus) > label,
.hs-form .hs_email:has(.hs-input:not(:placeholder-shown)) > label {
  top: calc(0.35rem + 1px);
  font-size: 0.5rem;
  line-height: 140%;
  color: var(--z-grey-body);
}

@media (prefers-reduced-motion: reduce) {
  .hs-form .hs_email > label { transition: none; }
}


/* ============================================================
 * 3. CHECKBOXES & RADIOS
 * ============================================================ */
.hs-form .hs-input[type="radio"] {
  width: auto !important;
  margin-right: min(0.5rem, 2vw) !important;
  min-height: auto !important;
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

.hs-form .hs-input[type="checkbox"] {
  width: 0.875em !important;
  height: 0.875em !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0.3em 0 0 !important;
  padding: 0 !important;
  cursor: pointer;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  accent-color: var(--z-green);
}

.hs-form .hs-input[type="checkbox"]:focus {
  box-shadow: 0 0 3px 1px var(--z-green);
  -webkit-box-shadow: 0 0 3px 1px var(--z-green);
}

.hs-form .hs-input[type="checkbox"]:checked {
  accent-color: var(--z-green);
}

.hs-form .hs-input[type="checkbox"].invalid {
  box-shadow: 0 0 0 1px var(--z-error);
}

.hs-form .hs-form-booleancheckbox {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.hs-form .hs-form-booleancheckbox-display {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 0.6em;
  margin: 0 !important;
  cursor: pointer;
  font-weight: 400 !important;
}

.hs-form .hs-form-booleancheckbox-display > span {
  margin: 0 !important;
}

/* Flatten HubSpot's nested <p> in the privacy label — CSS only.
   (JS must NOT unwrap it: mutating their tree unmounts React.) */
.hs-form .hs-form-booleancheckbox-display p {
  display: inline !important;
  margin: 0 !important;
  font: inherit;
  color: inherit;
}

.hs-form .hs-form-booleancheckbox span {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--colors--zibra-grey-body, var(--z-grey-body));
  font-weight: 400;
}

.hs-form .hs-form-checkbox > label {
  font-weight: 400 !important;
}

/* Required asterisk — inline */
.hs-form .hs-form-required {
  display: inline !important;
  color: var(--z-error);
  margin-left: clamp(2px, 0.5vw, 4px);
}

/* ============================================================
 * 4. VALIDATION MESSAGES
 *  Text-field errors live INSIDE .input → clipped by the ring
 *  polygon → hidden; our .z-msg (outside .input) speaks for them.
 *  Checkbox errors aren't clipped → styled and shown as-is.
 * ============================================================ */
.hs-form .hs-fieldtype-text .hs-error-msgs { display: none !important; }
.hs-form .hs-error-msgs:has(a) { display: none !important; }   /* "Did you mean" */

.hs-form .hs-error-msgs {
  margin: 0.4em 0 0;
  padding: 0;
  list-style: none;
  background: transparent;
}
.hs-form .hs-error-msgs li { list-style: none; }
.hs-form .hs-error-msgs label {
  display: block;
  margin: 0 !important;
  background: transparent;
  color: var(--z-error);
  font-family: var(--z-mono);
  font-size: clamp(0.65rem, 0.6vw + 0.45rem, 0.75rem);
  line-height: 1.45;
}

/* Our node: always in flow, always present. Only opacity changes
   → no layout shift, no display toggling, no GSAP. */
.hs-form .z-msg {
  margin: 0.4em 0 0;
  min-height: 1.45em;
  color: var(--z-error);
  font-family: var(--z-mono);
  font-size: clamp(0.65rem, 0.6vw + 0.45rem, 0.75rem);
  line-height: 1.45;
  opacity: 0;
  transition: opacity .25s ease;
}
.hs-form .z-msg.is-on   { opacity: 1; }
.hs-form .z-msg.is-info { color: var(--z-grey-body); }

/* ============================================================
 * 5. LEGAL CONSENT (HubSpot-native GDPR blocks)
 * ============================================================ */
.hs-form .legal-consent-container {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--z-grey-body);
  margin-bottom: 0;
}

.hs-form .legal-consent-container .hs-form-booleancheckbox-display p {
  font-size: 0.75rem;
}

.hs-form .legal-consent-container a,
.hs-form .hs-form-booleancheckbox-display a {
  color: var(--z-white);
  text-decoration: underline;
}

.hs-form .legal-consent-container a:hover,
.hs-form .hs-form-booleancheckbox-display a:hover {
  color: var(--z-green);
  opacity: 1;
}

/* ============================================================
 * 6. SUBMIT BUTTON
 * ============================================================ */
.hs-form .hs-button.primary,
.hs-form input[type="submit"].hs-button {
  --cut: var(--z-cut-base);
  width: 100% !important;
  padding: clamp(0.75rem, 2vh, 1.25rem) clamp(2rem, 8vw, 6rem) !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--z-white) !important;
  color: var(--z-black-mid) !important;
  font-family: var(--z-mono) !important;
  font-size: 1rem !important;
  font-weight: 400;
  cursor: pointer;
  will-change: background-color;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-clip-path: polygon(
    var(--cut) 0%, calc(100% - var(--cut)) 0%,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0% calc(100% - var(--cut)), 0% var(--cut));
  clip-path: polygon(
    var(--cut) 0%, calc(100% - var(--cut)) 0%,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0% calc(100% - var(--cut)), 0% var(--cut));
  transition: background-color 0.3s ease;
  -webkit-transition: background-color 0.3s ease;
}

.hs-form .hs-button.primary:hover {
  background-color: #e0e0e0 !important;
}

.hs-form .hs-button.primary:focus-visible {
  outline: 2px solid var(--z-green);
  outline-offset: 2px;
}

/* ============================================================
 * 7. SUCCESS MESSAGE (Safari-hardened)
 *    Replaces the form → lives on the wrapper, not .hs-form
 * ============================================================ */
.submitted-message {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-height: 120px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 1rem 1.25rem !important;
  background-color: var(--z-black-mid) !important;
  border: none !important;
  border-radius: 0;
  text-align: center;
  margin: 0;
  box-sizing: border-box;
  position: relative !important;
  z-index: 1 !important;
  animation: hsFadeIn 0.4s ease-in-out;
  -webkit-animation: hsFadeIn 0.4s ease-in-out;
}

@supports (-webkit-hyphens: none) {
  .submitted-message {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  .submitted-message::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--z-black-mid);
    z-index: -1;
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px,
      100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%,
      0 calc(100% - 7px), 0 7px);
    -webkit-clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px,
      100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%,
      0 calc(100% - 7px), 0 7px);
  }
}

.submitted-message p {
  display: block !important;
  visibility: visible !important;
  margin: 0.5rem 0 !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  color: var(--z-white) !important;
  width: 100% !important;
}

.submitted-message p:first-child {
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .submitted-message {
      display: block !important;
      background-color: var(--z-black-mid) !important;
      color: var(--z-white) !important;
      padding: 1.5rem !important;
    }
  }
}

@keyframes hsFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes hsFadeIn {
  from { opacity: 0; -webkit-transform: translateY(10px); }
  to   { opacity: 1; -webkit-transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .submitted-message { animation: none; -webkit-animation: none; }
  .hs-form .hs-button.primary { transition: none; -webkit-transition: none; }
}

/* ============================================================
 * 8. reCAPTCHA HANDLING
 * ============================================================ */
.hs-form .hs_recaptcha,
.hs_recaptcha {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  opacity: 0.01 !important;
  pointer-events: none !important;
  visibility: visible !important;
  overflow: visible !important;
  height: 1px !important;
  width: 1px !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  z-index: -1 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  max-height: none !important;
}

.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0.01 !important;
  bottom: 0 !important;
  z-index: -999 !important;
  transform: scale(0.1) !important;
  transform-origin: bottom right !important;
}

.hbspt-form iframe[src*="recaptcha"],
.hbspt-form iframe[src*="google.com"],
[id^="hbspt-form"] iframe[src*="recaptcha"],
[id^="hbspt-form"] iframe[src*="google.com"] {
  opacity: 0.01 !important;
  pointer-events: none !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 1px !important;
  width: 1px !important;
}

/* Compliance note (badge is visually suppressed) */
form.hs-form::after {
  content: "This site is protected by reCAPTCHA.";
  display: block;
  font-size: 0.65rem;
  opacity: 0.5;
  text-align: center;
  margin-top: 0.5rem;
}

/* ============================================================
 * 9. RESPONSIVE
 * ============================================================ */
@media (max-width: 991px) {
  /* Touch floor: a11y tap-target beats the smaller aesthetic */
  .hs-form .hs-input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
  .hs-form .hs-form-booleancheckbox-display { padding: 2px 0; }
}

@media (max-width: 767px) {
  :root {
    --z-field-pad-y: 0.75rem;
    --z-field-pad-x: 1rem;
  }
  .hs-form .form-columns-2 .hs-form-field {
    width: 100% !important;
    margin-right: 0 !important;
  }
  .hs-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
    font-size: 0.875rem !important;        /* kit: 14px mobile input */
  }
  .hs-form .hs-form-field.float-label > label {
    font-size: 0.875rem;
  }
  .hs-form .hs-form-field.float-label:has(.hs-input:focus) > label,
  .hs-form .hs-form-field.float-label:has(.hs-input:not(:placeholder-shown)) > label {
    font-size: 0.375rem;                   /* kit: 6px mobile label */
    top: calc(0.3rem + 1px);
  }
  .hs-form .hs-button.primary { padding: 0.75rem 3rem !important; }
}

@media (max-width: 479px) {
  .hs-form .hs-form-booleancheckbox-display { padding: 3px 0; }

  /* iOS zoom guard — intentionally overrides the 14px kit size;
     without 16px inputs iOS zooms the viewport on focus */
  .hs-form select,
  .hs-form textarea,
  .hs-form input[type="text"],
  .hs-form input[type="email"] {
    font-size: 16px !important;
  }
}

@media (max-height: 600px) {
  :root {
    --z-field-pad-y: 0.5rem;
    --z-field-pad-x: 0.75rem;
  }
  .hbspt-form,
  [id^="hbspt-form"] {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hs-form .hs-form-field { margin-bottom: 0.25rem !important; }
  .hs-form .hs-button.primary { padding: 0.5rem 3rem !important; }
}

@media (max-height: 450px) and (orientation: landscape) {
  :root {
    --z-field-pad-y: 0.4rem;
    --z-field-pad-x: 0.6rem;
  }
  .hs-form .form-columns-2 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2%;
  }
  .hs-form .form-columns-2 .hs-form-field { width: 49% !important; }
  .hs-form .hs_submit { margin-top: 0.5rem !important; }
  .hs-form .hs-button.primary { padding: 0.4rem 2rem !important; }
  .hs-form .legal-consent-container {
    font-size: clamp(0.65rem, 0.6vw + 0.5rem, 0.75rem);
  }
  .hs-form .hs-input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
}

/* ============================================================
 * 10. BROWSER-SPECIFIC FIXES
 * ============================================================ */
@supports (-webkit-touch-callout: none) {
  .hs-form .hs-input[type="checkbox"] { opacity: 1 !important; }
  .hs-form input,
  .hs-form select,
  .hs-form textarea { font-size: 16px !important; }
}

@-moz-document url-prefix() {
  .hs-form .hs-input[type="checkbox"] { opacity: 1; }
  .submitted-message { height: auto; min-height: 100px; }
}

@supports (-ms-ime-align: auto) {
  .hs-form .hs-input:not([type="checkbox"]):not([type="radio"]),
  .hs-form .hs-button.primary {
    border: 1px solid var(--z-black-mid);
    clip-path: none;
    -webkit-clip-path: none;
  }
}

/* ============================================================
 * 11. ACCESSIBILITY UTILITIES
 * ============================================================ */
.hs-screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}