/* =============================================================================
 * KSB Marketo Forms — 2026 Corporate Identity
 * =============================================================================
 *
 * Standalone stylesheet for Marketo Forms 2.0, matching the form styling used on
 * www.ksb.com from the 2026 CI onwards. Generated from the KSB design system;
 * do not hand-edit — report changes back to bitgrip so both stay in sync.
 *
 * Generated:  2026-10-01   |   Source tickets: KSBP-41827, KSBP-42722
 *
 * HOW TO USE
 * ----------
 * This is an OVERRIDE LAYER, not a replacement for Marketo's own form CSS.
 * Load it IN ADDITION TO — and after — the stylesheets Marketo itself injects
 * (`forms2.css` plus the per-form theme stylesheet). It still relies on those
 * for parts of the base layout; e.g. Marketo's `.mktoForm .mktoAsterix
 * { display: none }` is what keeps the asterisk off non-required fields.
 * Remove Marketo's stylesheets and the form will render incorrectly.
 *
 * On a Marketo landing page, put this in the page/template `<head>` or paste it
 * into the template's custom CSS. It only ever touches `.mkto*` selectors (plus
 * the jQuery UI datepicker), so it is safe to load globally.
 *
 * WHAT IT NEEDS
 * -------------
 * 1. Section 1 below (`:root` tokens) — required. Delete it only if the page
 *    already defines the KSB design-system custom properties.
 * 2. The "Interphases" webfont — see section 2. If the landing-page template
 *    already loads KSB's brand font, skip it.
 * 3. A modern browser. The layout uses `:has()` and `:is()`
 *    (Chrome/Edge 105+, Safari 15.4+, Firefox 121+). Older browsers fall back
 *    to Marketo's default form look rather than breaking.
 *
 * WHAT IT DOES NOT COVER
 * ----------------------
 * Section 5 holds selectors that only exist inside the KSB CMS. On a
 * Marketo-hosted landing page they simply never match — keep or delete them.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Design tokens — REQUIRED
 * -------------------------------------------------------------------------- */

:root {
  /* Colour primitives */
  --color-neutral-white: #ffffff;
  --color-neutral-50: #f6f6f6;
  --color-neutral-300: #b2b2b2;
  --color-neutral-500: #8b8b8b;
  --color-neutral-700: #5e5e5e;
  --color-blue-500: #0066b3;
  --color-blue-800: #003674;
  --color-blue-950: #0e233b;
  --color-cyan-500: #009fe3;
  --color-red-50: #fff2f2;
  --color-red-500: #ff3333;
  --color-red-600: #d62b2b;

  /* Semantic colours */
  --color-semantic-bg-canvas: var(--color-neutral-white);
  --color-semantic-primary-default: var(--color-blue-800);
  --color-semantic-secondary-default: var(--color-blue-500);
  --color-semantic-secondary-emphasis: var(--color-blue-800);
  --color-semantic-secondary-disabled: var(--color-neutral-300);
  --color-semantic-fg-onprimary: var(--color-neutral-white);
  --color-semantic-fg-ondisabled: var(--color-neutral-white);
  --color-semantic-error-default: var(--color-red-500);
  --color-semantic-error-emphasis: var(--color-red-600);
  --color-semantic-error-muted: var(--color-red-50);
  --color-semantic-input-background-default: var(--color-neutral-50);
  --color-semantic-input-background-default-ondark: var(
    --color-semantic-bg-canvas
  );
  --color-semantic-input-border-default: var(--color-neutral-700);
  --color-semantic-input-border-emphasis: var(--color-blue-800);
  --color-semantic-input-border-error: var(--color-semantic-error-default);
  --color-semantic-input-text-default: var(--color-blue-950);
  --color-semantic-input-text-muted: var(--color-neutral-700);
  --color-semantic-input-text-disabled: var(--color-neutral-500);

  --gradient-primary-border: linear-gradient(
    90deg,
    var(--color-cyan-500),
    var(--color-blue-500)
  );

  /* Typography */
  --font-default:
    "TT Interphases", "Interphases", -apple-system, blinkmacsystemfont,
    "San Francisco", "Segoe UI", roboto, "Helvetica Neue", sans-serif;
  --font-weight-normal: 400;
  --font-weight-500: 500;
  --font-weight-bold: 700;
  --text-xs: 0.75rem; /* 12px — field labels */
  --text-base: 1rem; /* 16px — field values, body, CTA */
  --leading-normal: 1.25;
  --leading-loose: 1.5;
  --tracking-wide: 0.015em;

  /* Fluid headline sizes: scale between 360px and 1464px viewport width. */
  --text-headline-sm: clamp(
    1rem,
    calc(1rem + 0.25 * (100vw - 22.5rem) / 69),
    1.25rem
  );
  --text-headline-md: clamp(
    1.125rem,
    calc(1.125rem + 0.375 * (100vw - 22.5rem) / 69),
    1.5rem
  );

  /* Spacing scale (1 unit = 0.5rem = 8px) */
  --spacing-0: 0rem;
  --spacing-0_75: 0.375rem;
  --spacing-1: 0.5rem;
  --spacing-1_5: 0.75rem;
  --spacing-2: 1rem;
  --spacing-2_5: 1.25rem;
  --spacing-3: 1.5rem;
  --spacing-4: 2rem;
  --spacing-5: 2.5rem;
  --spacing-6: 3rem;
  --spacing-8: 4rem;
  --spacing-15: 7.5rem;

  --radius-default: 0.75rem;
}

/* -----------------------------------------------------------------------------
 * 2. Webfont — only if the page does not already load it
 *
 * KSB's brand font is "TT Interphases", licensed per domain. The weight axis is
 * remapped: Light = 200, Regular = 300, Medium = 400, Bold = 700 — i.e. what the
 * design system calls "normal" (400) renders in Medium. There is no 500 cut, so
 * `--font-weight-500` is synthesised by the browser, exactly as on www.ksb.com.
 *
 * Replace the URLs with wherever the font files are hosted for Marketo, then
 * uncomment. If the licence does not extend to go.ksb.com, drop this block —
 * the stack in `--font-default` falls back to the system UI font.
 * -------------------------------------------------------------------------- */

/*
@font-face {
  font-family: Interphases;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    url("/fonts/TTInterphasesW05-Regular.woff2") format("woff2"),
    url("/fonts/TTInterphasesW05-Regular.woff") format("woff");
}

@font-face {
  font-family: Interphases;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("/fonts/TTInterphasesW05-Medium.woff2") format("woff2"),
    url("/fonts/TTInterphasesW05-Medium.woff") format("woff");
}

@font-face {
  font-family: Interphases;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url("/fonts/TTInterphasesW05-Bold.woff2") format("woff2"),
    url("/fonts/TTInterphasesW05-Bold.woff") format("woff");
}
*/

/* -----------------------------------------------------------------------------
 * 3. Form styles
 * -------------------------------------------------------------------------- */

/* --- Grid ----------------------------------------------------------------- */

.mktoForm .mktoFormRow {
  display: flex;
  margin-left: -12px;
  margin-right: -12px;
}

@media (max-width: 839.999px) {
  .mktoForm .mktoFormRow {
    flex-wrap: wrap;
  }
}

.mktoForm .mktoFormRow .mktoFormCol {
  float: none;
  flex: 100% 1 1;
  padding-left: 12px;
  padding-right: 12px;
  /* Marketo sets an inline `margin-bottom: 5px` here. Vertical rhythm is
     owned by `.mktoFieldWrap` alone, so the inline value has to go. */
  margin-bottom: 0 !important;
}

.mktoForm .mktoFormRow .mktoFormCol .mktoGutter,
.mktoForm .mktoFormRow .mktoFormCol .mktoOffset {
  float: none;
  width: 0 !important;
  height: 0 !important;
}

.mktoForm .mktoFieldWrap {
  float: none !important;
  margin-bottom: var(--spacing-5);
}

/* Section headline spacing — 8 units above, 4 units below.
   Marketo emits section headlines as bare `h2`/`h3` inside a rich-text row
   without a dedicated class, so the heading element is the only selector we
   have. The preceding row already contributes the 5-unit field rhythm, so the
   headline only tops up the remaining difference. Marketo's empty placeholder
   rows carry no `.mktoFieldWrap` and stay out of that sum. */
.mktoForm .mktoFieldWrap:has(.mktoHtmlText :is(h2, h3)) {
  margin-bottom: var(--spacing-4);
}

.mktoForm
  .mktoFormRow
  ~ .mktoFormRow
  .mktoFieldWrap:has(.mktoHtmlText :is(h2, h3)) {
  margin-top: calc(var(--spacing-8) - var(--spacing-5));
}

/* A headline directly below another headline is a title pair (`h2` group title
   + first `h3` section), not a new section — it keeps the 4 units the headline
   above already provides. */
.mktoForm
  .mktoFormRow:has(.mktoHtmlText :is(h2, h3))
  + .mktoFormRow
  .mktoFieldWrap:has(.mktoHtmlText :is(h2, h3)) {
  margin-top: 0;
}

/* --- Checkbox / radio button ---------------------------------------------- */

/* Marketo emits a field label above every radio/checkbox group, and leaves it
   empty when the group's question is authored as a rich-text headline instead.
   An empty label still reserves its padding and margin, which shows up as a
   phantom gap above the options.
   An empty label is indistinguishable from a filled one by selector — the only
   difference is a text node — so the gap is made content-dependent instead: as
   a flex column the label's text becomes an anonymous flex item and `::after`
   is a second one, and `row-gap` only materialises between two items. Text
   present → gap; no text → no item, no gap, and the label collapses to zero
   height. */
.mktoForm
  .mktoFormRow
  .mktoFieldWrap:has(> :is(.mktoRadioList, .mktoCheckboxList))
  > label {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-1);
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.mktoForm
  .mktoFormRow
  .mktoFieldWrap:has(> :is(.mktoRadioList, .mktoCheckboxList))
  > label::after {
  content: "";
}

.mktoForm .mktoFormRow .mktoRadioList,
.mktoForm .mktoFormRow .mktoCheckboxList {
  width: auto;
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto;
  column-gap: var(--spacing-1_5);
  row-gap: var(--spacing-2_5);
  float: none;
}

.mktoForm .mktoFormRow .mktoRadioList > input,
.mktoForm .mktoFormRow .mktoCheckboxList > input {
  position: relative;
}

.mktoForm .mktoFormRow .mktoRadioList.mktoInvalid > input,
.mktoForm .mktoFormRow .mktoCheckboxList.mktoInvalid > input {
  border-color: var(--color-semantic-input-border-error);
}

.mktoForm .mktoFormRow .mktoRadioList.mktoInvalid > label,
.mktoForm .mktoFormRow .mktoCheckboxList.mktoInvalid > label {
  color: var(--color-semantic-error-emphasis);
}

.mktoForm .mktoFormRow .mktoCheckboxList.mktoLabelToLeft {
  grid-template-columns: auto 1fr;
  grid-auto-flow: dense;
}

.mktoForm .mktoFormRow .mktoCheckboxList.mktoLabelToLeft > label {
  grid-column: 1;
}

.mktoForm .mktoFormRow .mktoCheckboxList.mktoLabelToLeft > input {
  grid-column: 2;
  position: relative;
  right: 0;
}

.mktoForm .mktoFormRow input[type="checkbox"] + label,
.mktoForm .mktoFormRow input[type="radio"] + label {
  text-transform: none;
  color: var(--color-semantic-input-text-default);
  font-family: var(--font-default);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-base) !important;
  line-height: var(--leading-loose) !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  cursor: pointer;
}

.mktoForm .mktoFormRow input[type="checkbox"] {
  height: 24px;
  width: 24px;
  background-color: var(--color-semantic-bg-canvas);
  border: 1px solid var(--color-semantic-input-border-default);
  position: relative;
  appearance: none;
  margin: 0 !important;
  cursor: pointer;
}

.mktoForm .mktoFormRow input[type="checkbox"]:hover {
  border-color: var(--color-semantic-input-border-emphasis);
}

.mktoForm .mktoFormRow input[type="checkbox"]:not(:disabled):focus-visible,
.mktoForm .mktoFormRow input[type="checkbox"]:not(:disabled):active {
  outline: 0;
  border-color: var(--color-semantic-input-border-emphasis);
  border-width: 2px;
  box-shadow:
    0 4px 8px rgba(29, 29, 27, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.12);
}

.mktoForm .mktoFormRow input[type="checkbox"]:checked {
  background-color: var(--color-semantic-secondary-default);
  border-color: var(--color-semantic-secondary-default);
}

.mktoForm .mktoFormRow input[type="checkbox"]:checked:hover {
  background-color: var(--color-semantic-secondary-emphasis);
  border-color: var(--color-semantic-secondary-emphasis);
}

.mktoForm
  .mktoFormRow
  input[type="checkbox"]:checked:not(:disabled):focus-visible,
.mktoForm .mktoFormRow input[type="checkbox"]:checked:not(:disabled):active {
  background-color: var(--color-semantic-secondary-emphasis);
  border-color: var(--color-semantic-secondary-emphasis);
  border-width: 2px;
}

.mktoForm .mktoFormRow input[type="checkbox"]:checked:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16'%3E%3Cpath d='M29.87 6.811c0.657 0.591 0.71 1.603 0.119 2.26l-14.4 16c-0.581 0.646-1.571 0.71-2.231 0.144l-6.4-6.4c-0.671-0.575-0.749-1.585-0.174-2.256s1.585-0.749 2.256-0.173l5.214 5.384 13.355-14.839c0.591-0.657 1.603-0.71 2.26-0.119z' fill='%23fff'/%3E%3C/svg%3E");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  inset: 0;
  margin: auto;
}

.mktoForm .mktoFormRow input[type="radio"] {
  border-radius: 50%;
  position: relative;
  appearance: none;
  background-color: var(--color-semantic-bg-canvas);
  border: 1px solid var(--color-semantic-input-border-default);
  width: 24px;
  height: 24px;
  margin: 0 !important;
  cursor: pointer;
  display: block;
}

.mktoForm .mktoFormRow input[type="radio"]:hover {
  border-color: var(--color-semantic-input-border-emphasis);
}

.mktoForm .mktoFormRow input[type="radio"]:not(:disabled):focus-visible,
.mktoForm .mktoFormRow input[type="radio"]:not(:disabled):active {
  outline: 0;
  border-color: var(--color-semantic-input-border-emphasis);
  border-width: 2px;
  box-shadow:
    0 4px 8px rgba(29, 29, 27, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.12);
}

.mktoForm .mktoFormRow input[type="radio"]:after {
  box-sizing: content-box;
  content: "";
  background-color: var(--color-semantic-secondary-default);
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: 50%;
  transition: transform 200ms ease-out;
}

.mktoForm .mktoFormRow input[type="radio"]:checked:after {
  transform: scale(1);
}

/* --- CTA button ----------------------------------------------------------- */

.mktoButtonWrap {
  margin-left: 0 !important;
}

/* Spacing below the CTA — 64px on mobile, 120px from 840px up.
   This is page rhythm rather than form styling; adjust it to the landing-page
   template if the form is not the last element on the page. */
.mktoForm .mktoButtonRow {
  margin-bottom: var(--spacing-8);
}

@media (min-width: 840px) {
  .mktoForm .mktoButtonRow {
    margin-bottom: var(--spacing-15);
  }
}

.mktoButton {
  font-family: var(--font-default);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-base);
  line-height: 18px;
  text-align: center;
  white-space: normal;
  position: relative;
  isolation: isolate;
  margin: 0;
  /* Marketo's stylesheet hangs `margin-bottom: 20px !important` off the button;
     the rhythm below the CTA is owned by `.mktoButtonRow` alone. */
  margin-bottom: 0 !important;
  padding: calc(var(--spacing-2) - 2px - 1px) var(--spacing-3);
  min-width: var(--spacing-6);
  min-height: var(--spacing-6);
  border: 2px solid transparent;
  border-radius: var(--radius-default);
  cursor: pointer;
  vertical-align: middle;
  box-shadow: none;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  color: var(--color-semantic-fg-onprimary);
  background:
    linear-gradient(
        var(--color-semantic-primary-default),
        var(--color-semantic-primary-default)
      )
      padding-box,
    var(--gradient-primary-border) border-box;
}

/* The hover fill is a second, pre-painted gradient layer behind the button; it
   is faded in on hover because `background-image` itself cannot be transitioned. */
.mktoButton::before {
  position: absolute;
  inset: -2px;
  z-index: -1;
  content: "";
  background:
    linear-gradient(
        90deg,
        var(--color-cyan-500) 0%,
        var(--color-blue-500) 50%,
        var(--color-semantic-primary-default) 100%
      )
      padding-box,
    var(--gradient-primary-border) border-box;
  background-size:
    101% 101%,
    100% 100%;
  border: 2px solid transparent;
  border-radius: var(--radius-default);
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.mktoButton:not([disabled]):hover {
  color: var(--color-semantic-fg-onprimary);
  border-color: transparent;
}

.mktoButton:not([disabled]):hover::before {
  opacity: 1;
}

/* Reset Marketo's :focus styling for mouse/touch focus — keyboard focus keeps a
   visible ring below. */
.mktoButton:not([disabled]):focus:not(:focus-visible, :hover) {
  color: var(--color-semantic-fg-onprimary);
  outline: none;
  background:
    linear-gradient(
        var(--color-semantic-primary-default),
        var(--color-semantic-primary-default)
      )
      padding-box,
    var(--gradient-primary-border) border-box;
  border-color: transparent;
  box-shadow: none;
}

.mktoButton:not([disabled]):focus:not(:focus-visible, :hover)::before {
  opacity: 0;
}

.mktoButton:not([disabled]):focus-visible,
.mktoButton:not([disabled]):active {
  color: var(--color-semantic-fg-onprimary);
  outline: none;
}

.mktoButton:not([disabled]):focus-visible::before,
.mktoButton:not([disabled]):active::before {
  outline: 1px solid var(--color-neutral-white);
  outline-offset: -3px;
  opacity: 1;
}

.mktoButton:disabled {
  color: var(--color-semantic-fg-ondisabled);
  background: var(--color-semantic-secondary-disabled);
  border-color: var(--color-semantic-secondary-disabled);
  box-shadow: none;
  user-select: none;
  cursor: not-allowed;
}

/* --- Input / textarea / select -------------------------------------------- */

.mktoForm textarea.mktoField,
.mktoForm select.mktoField,
.mktoForm input[type="text"],
.mktoForm input[type="url"],
.mktoForm input[type="email"],
.mktoForm input[type="tel"],
.mktoForm input[type="number"],
.mktoForm input[type="date"] {
  width: 100% !important;
  border: 1px solid transparent;
  border-bottom-color: var(--color-semantic-input-border-default);
  border-radius: 0;
  background-color: var(--color-semantic-input-background-default);
  padding: var(--spacing-1_5) var(--spacing-2) !important;
  font-family: var(--font-default);
  font-size: var(--text-base);
  font-weight: var(--font-weight-500);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-loose) !important;
  color: var(--color-semantic-input-text-default);
}

.mktoForm textarea.mktoField:focus,
.mktoForm select.mktoField:focus,
.mktoForm input[type="text"]:focus,
.mktoForm input[type="url"]:focus,
.mktoForm input[type="email"]:focus,
.mktoForm input[type="tel"]:focus,
.mktoForm input[type="number"]:focus,
.mktoForm input[type="date"]:focus {
  outline: 0;
  border-color: var(--color-semantic-input-border-emphasis);
  box-shadow:
    0 4px 8px rgba(29, 29, 27, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.12);
}

.mktoForm textarea.mktoField::placeholder,
.mktoForm select.mktoField::placeholder,
.mktoForm input[type="text"]::placeholder,
.mktoForm input[type="url"]::placeholder,
.mktoForm input[type="email"]::placeholder,
.mktoForm input[type="tel"]::placeholder,
.mktoForm input[type="number"]::placeholder,
.mktoForm input[type="date"]::placeholder {
  color: var(--color-semantic-input-text-disabled);
}

.mktoForm textarea.mktoField.mktoInvalid,
.mktoForm textarea.mktoField.mktoInvalid:hover,
.mktoForm select.mktoField.mktoInvalid,
.mktoForm select.mktoField.mktoInvalid:hover,
.mktoForm input[type="text"].mktoInvalid,
.mktoForm input[type="text"].mktoInvalid:hover,
.mktoForm input[type="url"].mktoInvalid,
.mktoForm input[type="url"].mktoInvalid:hover,
.mktoForm input[type="email"].mktoInvalid,
.mktoForm input[type="email"].mktoInvalid:hover,
.mktoForm input[type="tel"].mktoInvalid,
.mktoForm input[type="tel"].mktoInvalid:hover,
.mktoForm input[type="number"].mktoInvalid,
.mktoForm input[type="number"].mktoInvalid:hover,
.mktoForm input[type="date"].mktoInvalid,
.mktoForm input[type="date"].mktoInvalid:hover {
  border-color: var(--color-semantic-input-border-error);
  color: var(--color-semantic-error-emphasis);
  background-color: var(--color-semantic-error-muted);
  box-shadow: none;
}

.mktoForm textarea.mktoField.mktoInvalid:focus,
.mktoForm select.mktoField.mktoInvalid:focus,
.mktoForm input[type="text"].mktoInvalid:focus,
.mktoForm input[type="url"].mktoInvalid:focus,
.mktoForm input[type="email"].mktoInvalid:focus,
.mktoForm input[type="tel"].mktoInvalid:focus,
.mktoForm input[type="number"].mktoInvalid:focus,
.mktoForm input[type="date"].mktoInvalid:focus {
  box-shadow:
    0 4px 8px rgba(29, 29, 27, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.12);
}

.mktoForm textarea.mktoField {
  resize: vertical;
}

/* Field height
   Marketo's mobile stylesheet (max-width: 480px) pins every field to
   `height: 1.5em` and only gives `select` its height back. With the field
   padding above that leaves text inputs a few pixels tall, clipping the
   value. Marketo injects its stylesheet after this one, so the reset needs
   `!important` to win. */
.mktoForm input[type="text"],
.mktoForm input[type="url"],
.mktoForm input[type="email"],
.mktoForm input[type="tel"],
.mktoForm input[type="number"],
.mktoForm input[type="date"],
.mktoForm select.mktoField {
  height: auto !important;
}

/* Textareas get the same reset without `!important`: that would also beat
   the inline height the browser writes when the resize handle is dragged,
   so the textarea could no longer be resized. The extra `.mktoFieldWrap`
   outranks Marketo's rules instead, including its fixed per-`rows` heights,
   so the textarea shows as many lines as its `rows` attribute asks for. */
.mktoForm .mktoFieldWrap textarea.mktoField {
  height: auto;
}

/* Select
   Marketo renders a plain native `<select>`, whose built-in chevron sits flush
   against the right border and is placed differently by every engine. It is
   swapped for the design system's own `chevron_down` so it can be inset by the
   field's horizontal padding.
   The fill is `--color-semantic-input-text-default` (#0e233b) written out as a
   literal: a data URI is not parsed as CSS and cannot resolve custom
   properties. Keep the two in sync when the token changes.

   The chevron's geometry is repeated for `.mktoInvalid` at that state's own
   specificity: Marketo's per-form theme stylesheet may hang a `background`
   shorthand off the invalid/hover state, which would otherwise reset repeat,
   position and size and leave the chevron tiled at full field height. */
.mktoForm select.mktoField,
.mktoForm select.mktoField.mktoInvalid {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5.269 11.669a1.6 1.6 0 012.263 0l8.469 8.469 8.469-8.469a1.6 1.6 0 112.263 2.263l-9.6 9.6a1.6 1.6 0 01-2.263 0l-9.6-9.6a1.6 1.6 0 010-2.263z' fill='%230e233b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2) center;
  background-size: 1em 1em;
  /* Room for the chevron plus its inset, so long option labels stop short of it
     rather than running underneath. */
  padding-right: calc(var(--spacing-2) * 2 + 1em) !important;
}

/* The invalid state tints the chevron with the field's own error colour
   (#d62b2b = `--color-semantic-error-emphasis`). */
.mktoForm select.mktoField.mktoInvalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5.269 11.669a1.6 1.6 0 012.263 0l8.469 8.469 8.469-8.469a1.6 1.6 0 112.263 2.263l-9.6 9.6a1.6 1.6 0 01-2.263 0l-9.6-9.6a1.6 1.6 0 010-2.263z' fill='%23d62b2b'/%3E%3C/svg%3E");
}

/* --- Field hover / error states ------------------------------------------- */

.mktoFieldWrap:has(> input):hover label,
.mktoFieldWrap:has(> input):hover .label,
.mktoFieldWrap:has(> select):hover label,
.mktoFieldWrap:has(> select):hover .label,
.mktoFieldWrap:has(> textarea):hover label,
.mktoFieldWrap:has(> textarea):hover .label,
.mktoFieldWrap:has(> input:focus):hover label,
.mktoFieldWrap:has(> input:focus):hover .label,
.mktoFieldWrap:has(> select:focus):hover label,
.mktoFieldWrap:has(> select:focus):hover .label,
.mktoFieldWrap:has(> textarea:focus):hover label,
.mktoFieldWrap:has(> textarea:focus):hover .label {
  color: var(--color-semantic-input-text-muted);
}

.mktoFieldWrap:has(> input):hover input,
.mktoFieldWrap:has(> input):hover select,
.mktoFieldWrap:has(> input):hover textarea,
.mktoFieldWrap:has(> select):hover input,
.mktoFieldWrap:has(> select):hover select,
.mktoFieldWrap:has(> select):hover textarea,
.mktoFieldWrap:has(> textarea):hover input,
.mktoFieldWrap:has(> textarea):hover select,
.mktoFieldWrap:has(> textarea):hover textarea,
.mktoFieldWrap:has(> input:focus):hover input,
.mktoFieldWrap:has(> input:focus):hover select,
.mktoFieldWrap:has(> input:focus):hover textarea,
.mktoFieldWrap:has(> select:focus):hover input,
.mktoFieldWrap:has(> select:focus):hover select,
.mktoFieldWrap:has(> select:focus):hover textarea,
.mktoFieldWrap:has(> textarea:focus):hover input,
.mktoFieldWrap:has(> textarea:focus):hover select,
.mktoFieldWrap:has(> textarea:focus):hover textarea {
  border-color: var(--color-semantic-input-border-emphasis);
}

.mktoFieldWrap:has(> .mktoInvalid) label,
.mktoFieldWrap:has(> .mktoInvalid) .label,
.mktoFieldWrap:has(> .mktoInvalid):hover label,
.mktoFieldWrap:has(> .mktoInvalid):hover .label {
  color: var(--color-semantic-error-emphasis);
}

/* --- Labels --------------------------------------------------------------- */

.mktoForm label,
.mktoForm .label {
  float: none !important;
  display: block;
  margin: 0;
  /* Allows a smooth clickable area from label to input. */
  padding: var(--spacing-0) var(--spacing-0) var(--spacing-1) var(--spacing-0) !important;
  color: var(--color-semantic-input-text-muted);
  font-family: var(--font-default);
  font-size: var(--text-xs) !important;
  line-height: var(--leading-normal) !important;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--font-weight-500) !important;
  margin-bottom: var(--spacing-0_75) !important;
  width: auto !important;
}

.mktoForm .mktoFieldWrap:has(> input, > select, > textarea) > label {
  margin-bottom: 0 !important;
}

.mktoForm fieldset legend {
  font-family: var(--font-default);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-500);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-normal) !important;
  color: var(--color-semantic-input-text-muted) !important;
  padding: var(--spacing-0_75) var(--spacing-0);
  margin-left: 0 !important;
}

/* The 2026 CI shows no required-field marker. Note this hides the asterisk only
   on `.mktoRequiredField` wrappers — Marketo's own stylesheet hides it everywhere
   else, which is one reason this file cannot replace it.
   Remove this rule to keep the asterisk. */
.mktoForm .mktoRequiredField .mktoAsterix {
  display: none !important;
}

/* --- Rich text & headlines ------------------------------------------------ */

.mktoHtmlText {
  font-family: var(--font-default);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-wide);
}

/* Section headlines.
   Editors write these in Marketo's rich-text field, so whether a headline is
   wrapped in `<strong>` is arbitrary — the weight has to come from here.
   Sizes mirror the CMS forms, keeping Marketo forms consistent with e.g. the
   MyKSB registration form. */
.mktoForm .mktoHtmlText h2,
.mktoForm .mktoHtmlText h3 {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-normal);
  letter-spacing: 0;
}

.mktoForm .mktoHtmlText h2 {
  font-size: var(--text-headline-md);
}

.mktoForm .mktoHtmlText h3 {
  font-size: var(--text-headline-sm);
}

/* --- Links ---------------------------------------------------------------- */

.mktoForm a {
  color: var(--color-semantic-secondary-default);
  transition: color 100ms ease-in;
}

.mktoForm a:hover {
  color: var(--color-semantic-secondary-emphasis);
}

/* --- Validation messages -------------------------------------------------- */

/* Marketo floats the error message as a tooltip bubble next to the field; the
   2026 CI puts it inline underneath instead. */
.mktoForm .mktoError {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
}

.mktoForm .mktoError .mktoErrorArrow {
  display: none !important;
}

.mktoForm .mktoError .mktoErrorMsg {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--color-semantic-error-emphasis) !important;
  text-shadow: none !important;
  display: block !important;
  font-style: normal !important;
  margin: 0 !important;
  float: left;
  max-width: 100% !important;
}

/* --- Date picker ---------------------------------------------------------- */

.ui-datepicker .ui-datepicker-title {
  display: flex;
}

.ui-datepicker .ui-datepicker-title select {
  height: auto !important;
}

/* -----------------------------------------------------------------------------
 * 4. Form width — OPTIONAL
 *
 * On www.ksb.com the form is capped at six of twelve grid columns (696px at the
 * 1464px max page width) and centred. The cap sits on the wrapper element around
 * the embed rather than on the form itself, because Marketo's own stylesheet
 * sets `width: 90% !important` on the form and its script writes an inline pixel
 * width on top of that.
 *
 * On a Marketo landing page, either wrap the form in
 * `<div id="marketo-form-params"> … </div>`, or change the selector below to the
 * template's own container. Delete the section to let the form fill its column.
 * -------------------------------------------------------------------------- */

@media (min-width: 840px) {
  #marketo-form-params {
    max-width: 696px;
    margin-inline: auto;
  }
}

#marketo-form-params .mktoForm {
  width: 100% !important;
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
 * 5. KSB CMS hooks — inert on Marketo landing pages
 *
 * These selectors only match inside the KSB CMS. They are kept so this file
 * stays a faithful copy of what www.ksb.com uses; on a Marketo-hosted page they
 * never match and can be deleted.
 *
 *  - `.group.hasBackground`  a CMS section with a tinted background, where the
 *                            grey input fill is swapped for white for contrast.
 *  - `.mktoForm-fullWidth`   a CMS embed variant that opts out of Marketo's
 *                            inline widths.
 * -------------------------------------------------------------------------- */

.group.hasBackground .mktoForm textarea.mktoField:not(.mktoInvalid),
.group.hasBackground .mktoForm select.mktoField:not(.mktoInvalid),
.group.hasBackground .mktoForm input[type="text"]:not(.mktoInvalid),
.group.hasBackground .mktoForm input[type="url"]:not(.mktoInvalid),
.group.hasBackground .mktoForm input[type="email"]:not(.mktoInvalid),
.group.hasBackground .mktoForm input[type="tel"]:not(.mktoInvalid),
.group.hasBackground .mktoForm input[type="number"]:not(.mktoInvalid),
.group.hasBackground .mktoForm input[type="date"]:not(.mktoInvalid) {
  background-color: var(--color-semantic-input-background-default-ondark);
}

.mktoForm-fullWidth .mktoForm {
  width: unset !important;
}

.mktoForm-fullWidth .mktoForm .mktoCheckboxList {
  width: unset !important;
}

.mktoForm-fullWidth .mktoForm .mktoHtmlText {
  width: unset !important;
}

.mktoForm-fullWidth .mktoForm .mktoFormLinkPadding {
  padding: 0 !important;
}