/*
  Contact Form section — Figma 851:472 "Technology Inquiry".

  White rounded panel with a large accent-bracket heading + subheading,
  followed by a stacked form. Inputs use the same "border card" pattern
  (1px #d7d7d7, 8px radius, px-24 py-16). Selected radio tile flips to
  the navy inverse. reCAPTCHA is a visual placeholder — real widget
  replaces it at porting time.
*/

.contact-form {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
}

.contact-form__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

.contact-form__panel {
  background-color: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  /* Figma 851:2593: 48px from the subheading block to the form. NOTE: this
     was `var(--space-8)`, a token that does not exist in tokens.css — the
     declaration was invalid, so the gap silently computed to 0. */
  gap: 48px;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.contact-form__header {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Figma 851:2596 → 851:2597 */
}

.contact-form__heading {
  margin: 0;
  font-family: var(--font-family-display);
  /* Figma desktop 60px; scales down for smaller viewports.
     slope = (60-36)/1240 = 0.01935 → 1.935vw
     intercept = 36 - 0.01935*360 = 29.03 */
  font-size: clamp(36px, 29.03px + 1.935vw, 60px);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-text-heading);
}

.contact-form__heading-accent {
  color: var(--color-green-2);
  font-weight: var(--font-weight-semibold);
}

.contact-form__subheading {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  color: var(--color-grey-500, #717171);
}

/* ---------------------------------------------------------------
   Form scaffold
   --------------------------------------------------------------- */
.contact-form__form {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Figma 851:2593: 30px between form fields */
}

.contact-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Two-column at ≥768px, single column below. */
@media (min-width: 768px) {
  .contact-form__row--split {
    flex-direction: row;
    gap: 30px; /* Figma exact */
  }
  .contact-form__row--split > * {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ---------------------------------------------------------------
   Field label + input (text, email, textarea share the shell)
   --------------------------------------------------------------- */
.contact-form__field {
  display: block;
  width: 100%;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: 16px 24px; /* Figma exact */
  background-color: var(--color-white);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  color: var(--color-text-heading);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-grey-500, #717171);
  opacity: 1;
}

.contact-form__input:focus-visible,
.contact-form__textarea:focus-visible {
  outline: none;
  border-color: var(--color-navy-blue);
  box-shadow: 0 0 0 2px rgba(0, 9, 25, 0.08);
}

.contact-form__textarea {
  min-height: 150px; /* Figma exact */
  resize: vertical;
}

/* ---------------------------------------------------------------
   Fieldset group (radio / checkbox groups)
   --------------------------------------------------------------- */
.contact-form__group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* No gap here on purpose. A <legend> is rendered outside its fieldset's
     formatting context, so it never becomes a flex item and `gap` could
     never reach it — the group header sat flush against the tiles. The
     16px (Figma 851:2609 → 851:2612) lives on the legend itself below,
     which lands correctly whether or not a browser flexes the legend. */
  gap: 0;
  width: 100%;
}

/* Spacing above the radio / checkbox boxes. Covers all three groups —
   two use .__group-header, Verification uses .__group-title. */
.contact-form__group > legend {
  margin-block-end: 16px;
}

.contact-form__group-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  width: 100%;
}

.contact-form__group-header--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.contact-form__group-title {
  font-family: var(--font-family-display);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: var(--color-text-heading);
}

/* Plum accent used on the "Product Interest" heading (Figma #3A1C32). */
.contact-form__group-title--plum {
  color: var(--color-deep-plum, #3A1C32);
}

.contact-form__group-hint {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-text-heading);
}

.contact-form__req {
  color: var(--color-text-heading);
}

/* ---------------------------------------------------------------
   Radio tile (Sales / Tech)
   --------------------------------------------------------------- */
.contact-form__radio-tile {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 16px 24px;
  background-color: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-heading);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.contact-form__radio-tile.is-selected {
  background-color: var(--color-navy-blue);
  border-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
}

/* Native radio input — hidden, controls via peer state. */
.contact-form__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-form__radio-visual {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-card-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.contact-form__radio-tile.is-selected .contact-form__radio-visual {
  border-color: var(--color-navy-blue);
}

.contact-form__radio-dot {
  display: block;
  width: 9.6px;
  height: 9.6px;
  border-radius: 50%;
  background-color: transparent;
}

.contact-form__radio-tile.is-selected .contact-form__radio-dot {
  background-color: var(--color-teal, #41E0D1);
}

/* Live selection support (JS-free) — when the hidden radio is checked
   the tile flips visuals via :has(). Provides a fallback if JS never
   maintains the is-selected class. */
.contact-form__radio-tile:has(.contact-form__radio:checked) {
  background-color: var(--color-navy-blue);
  border-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
}

.contact-form__radio-tile:has(.contact-form__radio:checked) .contact-form__radio-visual {
  border-color: var(--color-navy-blue);
}

.contact-form__radio-tile:has(.contact-form__radio:checked) .contact-form__radio-dot {
  background-color: var(--color-teal, #41E0D1);
}

.contact-form__radio-tile:focus-within {
  outline: 2px solid var(--color-navy-blue);
  outline-offset: 2px;
}

.contact-form__radio-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.contact-form__radio-title {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.contact-form__radio-text {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: inherit;
  opacity: 0.9;
}

.contact-form__radio-tile:not(.is-selected):not(:has(.contact-form__radio:checked)) .contact-form__radio-text {
  color: var(--color-grey-500, #717171);
}

/* ---------------------------------------------------------------
   Checkbox tile grid (Product Interest) + opt-in checkboxes
   --------------------------------------------------------------- */
.contact-form__checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px; /* Figma 851:2632: 24px both axes */
}

@media (min-width: 640px) {
  .contact-form__checkbox-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-form__checkbox-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-form__checkbox-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background-color: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-heading);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Checked tile flips to the navy inverse — same treatment as the radio
   tile, so both control types share one activate-stage visual language. */
.contact-form__checkbox-tile:has(.contact-form__checkbox:checked) {
  background-color: var(--color-navy-blue);
  border-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
}

.contact-form__checkbox-tile:focus-within {
  outline: 2px solid var(--color-navy-blue);
  outline-offset: 2px;
}

.contact-form__checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-form__checkbox-visual {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-card-border);
  border-radius: 2.5px;
  background-color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.contact-form__checkbox:checked + .contact-form__checkbox-visual {
  background-color: var(--color-teal, #41E0D1);
  border-color: var(--color-teal, #41E0D1);
}

.contact-form__checkbox:checked + .contact-form__checkbox-visual::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid var(--color-navy-blue);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.contact-form__checkbox-label {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: inherit;
  min-width: 0;
}

/* ---------------------------------------------------------------
   Verification: reCAPTCHA mock + opt-ins
   --------------------------------------------------------------- */
.contact-form__verification {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .contact-form__verification {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px; /* Figma */
  }
}

.contact-form__recaptcha {
  flex-shrink: 0;
  width: 100%;
  max-width: 384px;
  background-color: #FAFAFA;
  border: 1px solid #D4D4D4;
  border-radius: 8px;
  padding: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-form__recaptcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-form__recaptcha-box {
  width: 24px;
  height: 24px;
  border: 2px solid #A3A3A3;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #404040;
}

.contact-form__recaptcha-label {
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  color: #404040;
}

.contact-form__recaptcha-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.contact-form__recaptcha-logo {
  width: 48px;
  height: 48px;
  background-color: #E5E5E5;
  border-radius: 4px;
  display: inline-block;
}

.contact-form__recaptcha-brand-text {
  font-family: var(--font-family-sans);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: #A3A3A3;
}

/* Opt-ins column */
.contact-form__optins {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 1;
  min-width: 0;
}

.contact-form__optin {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.contact-form__optin .contact-form__checkbox-visual {
  margin-top: 2px;
}

.contact-form__optin-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  color: var(--color-text-heading);
}

.contact-form__optin-heading {
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  color: var(--color-text-heading);
}

.contact-form__optin-disclaimer {
  font-family: var(--font-family-sans);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-grey-500, #737373);
}

.contact-form__optin-link {
  color: #404040;
  text-decoration: underline;
}

.contact-form__optin-link:hover,
.contact-form__optin-link:focus-visible {
  color: var(--color-navy-blue);
}

/* ---------------------------------------------------------------
   Submit row
   --------------------------------------------------------------- */
.contact-form__submit-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: 8px;
}

.contact-form__required-note {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--color-text-heading);
}

/* Teal submit — Figma's brand teal button, not the site-wide navy fill. */
.contact-form__submit {
  background-color: var(--color-teal, #41E0D1);
  border-color: var(--color-teal, #41E0D1);
  color: var(--color-text-heading);
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  background-color: var(--color-teal, #41E0D1);
  filter: brightness(0.95);
}

/* ---------------------------------------------------------------
   Product Interest — Sales only
   The content population document scopes "Product Interest (select all
   that apply)" to Sales inquiries only ("CARD 3 - NOTE THIS ONLY APPLIES
   TO SALES"), so the group is hidden by default and while Technology is
   selected, and revealed only once Sales is checked.

   :has() owns visibility so the gate still works with JS disabled;
   contact-form.js only clears the checkboxes when leaving Sales so stale
   product[] values can't be submitted. `display: none` also drops the
   inputs out of the tab order while hidden.

   The explicit `display: none` is required because .contact-form__group
   sets `display: flex`, which would otherwise beat the UA [hidden] rule.
   --------------------------------------------------------------- */
.contact-form__group--product {
  display: none;
}

.contact-form__form:has(.contact-form__radio[value="sales"]:checked)
  .contact-form__group--product {
  display: flex;
}

/* =================================================================
   Gravity Forms — contact-form panel overrides (modern markup v2)
   Scoped entirely inside .contact-form__panel so these rules never
   affect other GF forms on the site.
   Form renders with gform-theme--framework + gform-theme--orbital.
   ================================================================= */

/* ── Wrapper + scaffold ─────────────────────────────────────────── */
.contact-form__panel .gform_wrapper {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* Fields container — same stacked layout as .contact-form__form. */
.contact-form__panel .gform_fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.contact-form__panel .gfield {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form__panel .ginput_container {
  margin-left: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
}

.contact-form__panel .gform-grid-col {
  padding: 0 !important;
}

/* ── Labels ─────────────────────────────────────────────────────── */
/* Modern markup renders all labels visible (top_label placement).
   Visually-hide labels on non-group fields — group labels are un-hidden below. */
.contact-form__panel .gfield_label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

/* Radio + Checkbox group labels: un-hide and style as group titles. */
.contact-form__panel .gfield--type-radio .gfield_label,
.contact-form__panel .gfield--type-checkbox .gfield_label {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  font-family: var(--font-family-display);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: var(--color-text-heading);
  margin-bottom: 0;
}

/* Product Interest label → plum accent, matching .contact-form__group-title--plum */
.contact-form__panel .gf-product-interest .gfield_label {
  color: var(--color-deep-plum, #3A1C32);
}

/* Product Interest label stays block (stacked above the checkbox grid). */
.contact-form__panel .gf-product-interest .gfield_label {
  margin-bottom: 8px;
}

/* Required asterisk markup — GF renders as a nested <span>, already
   hidden by the parent .gfield_label clip, but also collapse here so
   it never leaks width on the un-clipped group labels. */
.contact-form__panel .gfield_required {
  display: none !important;
}

/* ── Field descriptions (hint text) ────────────────────────────── */
.contact-form__panel .gfield_description {
  font-family: var(--font-family-sans) !important;
  font-size: var(--font-size-body) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 1.2 !important;
  color: var(--color-text-heading) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Only radio/checkbox groups show description hint — hide on everything else */
.contact-form__panel .gfield--type-text .gfield_description,
.contact-form__panel .gfield--type-email .gfield_description,
.contact-form__panel .gfield--type-name .gfield_description,
.contact-form__panel .gfield--type-textarea .gfield_description {
  display: none;
}

/* Privacy Inquiry — show descriptions on all field types */
body.page-id-7228 .contact-form__panel .gfield--type-text .gfield_description,
body.page-id-7228 .contact-form__panel .gfield--type-email .gfield_description,
body.page-id-7228 .contact-form__panel .gfield--type-name .gfield_description,
body.page-id-7228 .contact-form__panel .gfield--type-textarea .gfield_description {
  display: block !important;
}

/* "I am contacting" — description renders before ginput_container in modern markup. */
.contact-form__panel .gf-team-radio .gfield_description {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* ── Text / email inputs ────────────────────────────────────────── */
/* GF modern framework uses logical properties (block-size, border-block-*,
   border-inline-*, padding-block, padding-inline) instead of physical
   shorthands. We override both physical AND logical to win the cascade. */
.contact-form__panel input[type="text"],
.contact-form__panel input[type="email"] {
  /* Layout */
  width: 100% !important;
  inline-size: 100% !important;
  height: auto !important;      /* overrides GF block-size: 38px */
  block-size: auto !important;
  /* Border */
  border: 1px solid var(--color-card-border) !important;
  border-block: 1px solid var(--color-card-border) !important;
  border-inline: 1px solid var(--color-card-border) !important;
  border-radius: 8px !important;
  /* Spacing */
  padding: 16px 24px !important;
  padding-block: 16px !important;
  padding-inline: 24px !important;
  /* Visual */
  background-color: var(--color-white) !important;
  font-family: var(--font-family-sans) !important;
  font-size: 16px !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 24px !important;
  color: var(--color-text-heading) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form__panel input[type="text"]::placeholder,
.contact-form__panel input[type="email"]::placeholder {
  font-size: 16px !important;
  color: var(--color-grey-500, #717171) !important;
  opacity: 1 !important;
}

.contact-form__panel input[type="text"]:focus-visible,
.contact-form__panel input[type="email"]:focus-visible {
  outline: none !important;
  border-color: var(--color-navy-blue) !important;
  box-shadow: 0 0 0 2px rgba(0, 9, 25, 0.08) !important;
}

/* ── Name field: first + last side-by-side at ≥768px ───────────── */
.contact-form__panel .ginput_container_name {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .contact-form__panel .ginput_container_name {
    flex-direction: row;
    gap: 30px;
  }
  .contact-form__panel .ginput_container_name .name_first,
  .contact-form__panel .ginput_container_name .name_last {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Sub-labels (First / Last) rendered below each input → visually hidden */
.contact-form__panel .ginput_container_name .gform-field-label--type-sub {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Clearfix GF injects inside the name field — remove from flow */
.contact-form__panel .gf_clear_complex {
  display: none;
}

/* ── Textarea ───────────────────────────────────────────────────── */
/* Same logical-property override pattern as inputs above. */
.contact-form__panel textarea {
  /* Layout */
  width: 100% !important;
  inline-size: 100% !important;
  height: auto !important;
  block-size: auto !important;
  min-height: 150px !important;
  min-block-size: 150px !important;
  /* Border */
  border: 1px solid var(--color-card-border) !important;
  border-block: 1px solid var(--color-card-border) !important;
  border-inline: 1px solid var(--color-card-border) !important;
  border-radius: 8px !important;
  /* Spacing */
  padding: 16px 24px !important;
  padding-block: 16px !important;
  padding-inline: 24px !important;
  /* Visual */
  background-color: var(--color-white) !important;
  font-family: var(--font-family-sans) !important;
  font-size: 16px !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 24px !important;
  color: var(--color-text-heading) !important;
  resize: vertical;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form__panel textarea::placeholder {
  font-size: 16px !important;
  color: var(--color-grey-500, #717171) !important;
  opacity: 1 !important;
}

.contact-form__panel textarea:focus-visible {
  outline: none !important;
  border-color: var(--color-navy-blue) !important;
  box-shadow: 0 0 0 2px rgba(0, 9, 25, 0.08) !important;
}

/* ── Radio tiles (Sales / Technology) ──────────────────────────── */
/* GF framework (0,3,0) sets display:flex + gap var on .gfield_radio/checkbox —
   !important required to override at equal specificity. */
.contact-form__panel .gfield_radio {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-6) !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .contact-form__panel .gfield_radio {
    flex-direction: row !important;
    gap: 30px !important;
  }
  .contact-form__panel .gfield_radio .gchoice {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* GF framework (0,3,0) sets .gchoice { display: inline-grid; grid-template-columns: ... }
   which breaks the full-width tile label approach — reset to block. */
.contact-form__panel .gfield_radio .gchoice,
.contact-form__panel .gfield_checkbox .gchoice {
  display: block !important;
  position: relative;
  overflow: visible;
}

/* Hide native radio — kept in DOM for form submission */
.contact-form__panel .gfield_radio .gchoice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Tile lives on the label (input is before label in GF, so the
   sibling combinator input:checked ~ label reaches it directly) */
.contact-form__panel .gfield_radio .gchoice label {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  margin: 0 !important;
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-heading);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Selected: navy inverse, same as .contact-form__radio-tile.is-selected */
.contact-form__panel .gfield_radio .gchoice input:checked ~ label {
  background-color: var(--color-navy-blue);
  border-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
}

.contact-form__panel .gfield_radio .gchoice:focus-within label {
  outline: 2px solid var(--color-navy-blue);
  outline-offset: 2px;
}

/* Circle indicator via label::before */
.contact-form__panel .gfield_radio .gchoice label::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-card-border);
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
}

/* Teal inner dot on selected — radial-gradient simulates the dot */
.contact-form__panel .gfield_radio .gchoice input:checked ~ label::before {
  background-image: radial-gradient(circle, var(--color-teal, #41E0D1) 37%, transparent 40%);
}

/* ── Checkbox tiles (Product Interest) ─────────────────────────── */
.contact-form__panel .gfield_checkbox {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 24px !important;
  width: 100% !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .contact-form__panel .gfield_checkbox {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-form__panel .gfield_checkbox .gchoice {
  position: relative;
}

/* Hide native checkbox */
.contact-form__panel .gfield_checkbox .gchoice input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Tile on the label */
.contact-form__panel .gfield_checkbox .gchoice label {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  margin: 0 !important;
  width: 100%;
  min-height: 56px;
  background-color: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-heading);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.contact-form__panel .gfield_checkbox .gchoice input:checked ~ label {
  background-color: var(--color-navy-blue);
  border-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
}

.contact-form__panel .gfield_checkbox .gchoice:focus-within label {
  outline: 2px solid var(--color-navy-blue);
  outline-offset: 2px;
}

/* Square indicator via label::before */
.contact-form__panel .gfield_checkbox .gchoice label::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-card-border);
  border-radius: 2.5px;
  background-color: var(--color-white);
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

/* Teal + SVG checkmark on checked */
.contact-form__panel .gfield_checkbox .gchoice input:checked ~ label::before {
  background-color: var(--color-teal, #41E0D1);
  border-color: var(--color-teal, #41E0D1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath fill='none' stroke='%23000919' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 4.5 4.5 8 11 1'/%3E%3C/svg%3E");
}

/* ── Consent fields (Newsletter + Privacy Policy) ───────────────── */
/* ── Consent field — mirrors .contact-form__optin ───────────────── */
.contact-form__panel .ginput_container_consent {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Hide native checkbox — same as hidden .contact-form__checkbox */
.contact-form__panel .ginput_container_consent > input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
  outline: none !important;
}

/* Label row = .contact-form__optin */
.contact-form__panel .gfield_consent_label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  font-family: var(--font-family-sans) !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 20px !important;
  color: var(--color-text-heading) !important;
}

/* ::before = .contact-form__checkbox-visual */
.contact-form__panel .gfield_consent_label::before {
  content: '' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid var(--color-card-border) !important;
  border-radius: 2.5px !important;
  background-color: var(--color-white) !important;
  margin-top: 2px !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px !important;
}

/* Checked state = .contact-form__checkbox:checked + .contact-form__checkbox-visual */
.contact-form__panel .ginput_container_consent input:checked ~ .gfield_consent_label::before {
  background-color: var(--color-teal, #41E0D1) !important;
  border-color: var(--color-teal, #41E0D1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath fill='none' stroke='%23000919' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 4.5 4.5 8 11 1'/%3E%3C/svg%3E") !important;
}

/* ── fields 21_10–21_13: consent-label treatment + hidden legend ─── */
.contact-form__panel #field_21_10 legend,
.contact-form__panel #field_21_11 legend,
.contact-form__panel #field_21_12 legend,
.contact-form__panel #field_21_13 legend {
  display: none !important;
}

.contact-form__panel #field_21_10,
.contact-form__panel #field_21_11,
.contact-form__panel #field_21_12,
.contact-form__panel #field_21_13 {
  border: none !important;
}

.contact-form__panel #field_21_10 .gfield_checkbox .gchoice label,
.contact-form__panel #field_21_11 .gfield_checkbox .gchoice label,
.contact-form__panel #field_21_12 .gfield_checkbox .gchoice label,
.contact-form__panel #field_21_13 .gfield_checkbox .gchoice label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  font-family: var(--font-family-sans) !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 20px !important;
  color: var(--color-text-heading) !important;
  border: none !important;
  padding: 0;
  margin-left: 12px !important;
  min-height: auto;
}

.contact-form__panel #field_21_10 .gfield_checkbox .gchoice label::before,
.contact-form__panel #field_21_11 .gfield_checkbox .gchoice label::before,
.contact-form__panel #field_21_12 .gfield_checkbox .gchoice label::before,
.contact-form__panel #field_21_13 .gfield_checkbox .gchoice label::before {
  content: '' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid var(--color-card-border) !important;
  border-radius: 2.5px !important;
  background-color: var(--color-white) !important;
  margin-top: 2px !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px !important;
}

.contact-form__panel #field_21_10 .gfield_checkbox .gchoice input:checked ~ label::before,
.contact-form__panel #field_21_11 .gfield_checkbox .gchoice input:checked ~ label::before,
.contact-form__panel #field_21_12 .gfield_checkbox .gchoice input:checked ~ label::before,
.contact-form__panel #field_21_13 .gfield_checkbox .gchoice input:checked ~ label::before {
  background-color: var(--color-teal, #41E0D1) !important;
  border-color: var(--color-teal, #41E0D1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath fill='none' stroke='%23000919' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 4.5 4.5 8 11 1'/%3E%3C/svg%3E") !important;
}


/* Disclaimer text = .contact-form__optin-disclaimer */
.contact-form__panel .gfield_consent_description,
.contact-form__panel .gfield_consent_description_text {
  font-family: var(--font-family-sans) !important;
  font-size: 12px !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 1.6 !important;
  color: var(--color-grey-500, #737373) !important;
}

.contact-form__panel #field_21_11 .gfield_description,
.contact-form__panel #field_21_13 .gfield_description {
  font-family: var(--font-family-sans) !important;
  font-size: 12px !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 1.6 !important;
  color: var(--color-grey-500, #737373) !important;
  padding-left: 38px !important;
  padding-inline-start: 38px !important;
}

.contact-form__panel #field_21_11 .gfield_description a,
.contact-form__panel #field_21_13 .gfield_description a {
  color: #404040 !important;
  text-decoration: underline !important;
}

.contact-form__panel .gfield_description.gfield_consent_description {
  padding-left: 38px !important;
  padding-inline-start: 38px !important;
}

.contact-form__panel .gfield_description.gfield_consent_description .gfield_consent_description_text {
  border: none !important;
  border-block: none !important;
  border-inline: none !important;
  padding: 0 !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

/* Links = .contact-form__optin-link */
.contact-form__panel .gfield_consent_description a,
.contact-form__panel .gfield_consent_description_text a {
  color: #404040 !important;
  text-decoration: underline !important;
}

.contact-form__panel .gfield_consent_description a:hover,
.contact-form__panel .gfield_consent_description a:focus-visible,
.contact-form__panel .gfield_consent_description_text a:hover,
.contact-form__panel .gfield_consent_description_text a:focus-visible {
  color: var(--color-navy-blue) !important;
}

/* ── reCAPTCHA ──────────────────────────────────────────────────── */
/* Google's widget renders a fixed-size iframe — do not force 100% width
   on its container or the iframe overflows. Let it sit at its natural size. */
.contact-form__panel .ginput_container_captcha {
  width: auto !important;
  margin-left: 0 !important;
}

/* ── Submit button ──────────────────────────────────────────────── */
.contact-form__panel .gform-footer,
.contact-form__panel .gform_footer {
  padding: 0;
  margin: 0;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  background: none;
  border: none;
}

/* GF submit — mirrors .btn.btn--filled.contact-form__submit */
.contact-form__panel .gform_button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  padding: var(--space-4) var(--space-6) !important;
  padding-block: var(--space-4) !important;
  padding-inline: var(--space-6) !important;
  background-color: var(--color-teal, #41E0D1) !important;
  border: 1px solid var(--color-teal, #41E0D1) !important;
  border-block: 1px solid var(--color-teal, #41E0D1) !important;
  border-inline: 1px solid var(--color-teal, #41E0D1) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-family-sans) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--line-height-tight) !important;
  color: var(--color-text-heading) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: color 0.22s ease-out, border-color 0.22s ease-out, filter 0.22s ease !important;
  box-shadow: none !important;
}

.contact-form__panel .gform_button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background-color: var(--color-teal, #41E0D1) !important;
  transform: translateY(0) !important;
  transition: transform 0.22s ease-out !important;
}

.contact-form__panel .gform_button:hover::before,
.contact-form__panel .gform_button:focus-visible::before {
  transform: translateY(-100%) !important;
}

.contact-form__panel .gform_button:hover,
.contact-form__panel .gform_button:focus-visible {
  background-color: var(--color-teal, #41E0D1) !important;
  filter: brightness(0.95) !important;
  color: var(--color-text-heading) !important;
  outline: none !important;
}

/* ── Validation states ──────────────────────────────────────────── */
.contact-form__panel .gform_validation_errors {
  background: #fff5f5;
  border: 1px solid #fcc;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-family: var(--font-family-sans);
  font-size: 14px;
  color: #c00;
}

.contact-form__panel .gfield_error input[type="text"],
.contact-form__panel .gfield_error input[type="email"],
.contact-form__panel .gfield_error textarea {
  border-color: #e00;
}

.contact-form__panel .gfield_validation_message,
.contact-form__panel .validation_message {
  font-family: var(--font-family-sans);
  font-size: 12px;
  color: #c00;
  margin-top: 6px;
}

/* ── Confirmation message ───────────────────────────────────────── */
.contact-form__panel .gform_confirmation_wrapper {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  color: var(--color-text-heading);
  text-align: center;
  padding: 40px 0;
}

/* ── Miscellaneous GF injected elements ─────────────────────────── */
/* Hidden inputs GF inserts for consent metadata / AJAX state */
.contact-form__panel .gform_hidden {
  display: none !important;
}

/* =================================================================
   Pages that show field labels (Tiqker Spec Sheet 7158, Subscribe 7225, Privacy Inquiry 7228)
   WordPress always adds page-id-* to <body>, so no other instances are affected.
   ================================================================= */
body.page-id-7158 .contact-form__panel .gfield_label,
body.page-id-7225 .contact-form__panel .gfield_label,
body.page-id-7228 .contact-form__panel .gfield_label {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  font-family: var(--font-family-sans) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: 1.4 !important;
  color: var(--color-text-heading) !important;
  margin-bottom: 6px !important;
}

body.page-id-7158 .contact-form__panel .gfield_required,
body.page-id-7158 .contact-form__panel .gfield_required_text,
body.page-id-7225 .contact-form__panel .gfield_required,
body.page-id-7225 .contact-form__panel .gfield_required_text,
body.page-id-7228 .contact-form__panel .gfield_required,
body.page-id-7228 .contact-form__panel .gfield_required_text {
  display: inline !important;
}

body.page-id-7158 .contact-form__panel .ginput_container_name .gform-field-label--type-sub,
body.page-id-7225 .contact-form__panel .ginput_container_name .gform-field-label--type-sub,
body.page-id-7228 .contact-form__panel .ginput_container_name .gform-field-label--type-sub {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Subscribe (page ID 7225) — checkbox list: full-width stack, no tile border */
body.page-id-7225 .contact-form__panel .gfield_checkbox {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
}

body.page-id-7225 .contact-form__panel .gfield_checkbox .gchoice label {
  border: none !important;
  border-radius: 0 !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

body.page-id-7225 .contact-form__panel .gfield_checkbox .gchoice input:checked ~ label {
  border-color: transparent !important;
}

/* Fires animationstart the moment GF injects this element into the DOM,
   giving JS a reliable hook without polling or GF events. */
@keyframes tiqker-confirm-appear { from { opacity: 1; } to { opacity: 1; } }

.gform-tiqker-confirmation {
  animation: tiqker-confirm-appear 1ms;
}

/* Confirmation message layout */
.gform-tiqker-confirmation p {
  margin-bottom: 20px;
}

.gform-tiqker-confirmation .btn {
  color: var(--color-text-heading) !important;
}