/* ============================================================
   FORMIDABLE SKIN — makes the embedded Formidable form match the
   Free Water Test design form (.fgrid/.field look from freetest.css).
   Scoped to .sform; the form is created with Formidable styling OFF.
   ============================================================ */

.sform .frm_forms,
.sform .frm_form_fields fieldset{border:0;margin:0;padding:0;min-width:0}
.sform .frm_form_fields legend{display:none}
.sform .frm_screen_reader{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Formidable lays fields on its own 12-column grid; work with it rather than against it
   (a 2-column override left "full" fields narrower than plain ones, 2026-10-16). */
.sform .frm_fields_container{display:grid !important;grid-template-columns:repeat(12,minmax(0,1fr)) !important;gap:14px !important}
.sform .frm_form_field{display:flex;flex-direction:column;gap:6px;margin:0;grid-column:1/-1}
.sform .frm_form_field.frm_half{grid-column:span 6}
.sform .frm_form_field.gw-full,
.sform .frm_form_field.frm_full,
.sform .frm_form_field:has(textarea),
.sform .frm_form_field:has(.frm_checkbox),
.sform .frm_form_field:has(.frm_submit){grid-column:1/-1}
@media(max-width:560px){.sform .frm_form_field.frm_half{grid-column:1/-1}}
.sform .frm_form_field input[type="hidden"]{display:none}
/* .frm_hidden_container is Formidable's own class for "hide this field's LABEL"
   (e.g. the second half of a First/Last pair, where only "Name" shows once) — it
   does NOT mean the field itself is hidden. Hiding the whole container here was
   silently dropping the Last-name input from every form that pairs it with First. */
.sform .frm_form_field.frm_hidden_container .frm_primary_label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* labels */
.sform .frm_primary_label{font-family:"Manrope";font-weight:700;font-size:12.5px;color:var(--navy);letter-spacing:.02em}
.sform .frm_required{color:var(--blue)}

/* floating labels — text/email/tel/number/textarea fields only (selects, checkbox
   groups and the submit button keep their normal above-field label). The field's
   placeholder is set to a single space (site-wide, via a one-time script) purely so
   :placeholder-shown works as the "is this field empty?" hook — no example text
   shows underneath the floated label. */
.sform .frm_form_field:has(> input[type="text"],> input[type="email"],> input[type="tel"],> input[type="number"],> textarea){position:relative}
.sform .frm_form_field:has(> input[type="text"],> input[type="email"],> input[type="tel"],> input[type="number"],> textarea) > .frm_primary_label{
  position:absolute;left:15px;top:13px;right:15px;
  font-family:"DM Sans";font-weight:400;font-size:15px;color:var(--grey-2);letter-spacing:0;
  pointer-events:none;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .16s var(--ease),color .16s var(--ease);
}
.sform .frm_form_field:has(> input[type="text"]:focus,> input[type="email"]:focus,> input[type="tel"]:focus,> input[type="number"]:focus,> textarea:focus) > .frm_primary_label,
.sform .frm_form_field:has(> input[type="text"]:not(:placeholder-shown),> input[type="email"]:not(:placeholder-shown),> input[type="tel"]:not(:placeholder-shown),> input[type="number"]:not(:placeholder-shown),> textarea:not(:placeholder-shown)) > .frm_primary_label{
  transform:translateY(-8px) scale(.76);color:var(--navy);
}
.sform .frm_form_field:has(> input[type="text"],> input[type="email"],> input[type="tel"],> input[type="number"]) input,
.sform .frm_form_field:has(> textarea) textarea{padding:21px 15px 7px}
.sform .frm_form_field:has(> textarea) > .frm_primary_label{top:14px}
/* Field descriptions (e.g. "First"/"Last" set as internal notes on the Name split
   fields) aren't part of this design's visual language and were rendering as a
   stray line of text under the input, opening an unwanted gap before the next row. */
.sform .frm_description{display:none}

/* inputs + select */
.sform .frm_form_field input[type="text"],
.sform .frm_form_field input[type="email"],
.sform .frm_form_field input[type="tel"],
.sform .frm_form_field input[type="number"],
.sform .frm_form_field select,
.sform .frm_form_field textarea{
  font-family:"DM Sans";font-size:15px;color:var(--ink);padding:13px 14px;border-radius:11px;
  border:1.5px solid var(--grey-3);background:#fff;transition:border-color .25s,box-shadow .25s;width:100%;
}
.sform .frm_form_field input:focus,
.sform .frm_form_field select:focus,
.sform .frm_form_field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)}
.sform .frm_form_field input::placeholder{color:var(--grey-2)}
.sform .frm_form_field select{cursor:pointer}

/* consent checkbox — like .sform .consent */
.sform .frm_checkbox{display:flex;width:100%}
.sform .frm_checkbox label{display:flex;gap:10px;align-items:flex-start;width:100%;color:var(--muted);font-size:12px;line-height:1.5;font-family:"DM Sans";font-weight:400}
.sform .frm_checkbox input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--blue)}
.sform .frm_form_field.gw-consent{margin-top:2px}

/* Multi-select checkbox group (e.g. "What can we help with?") — clean 2-col option
   grid so a dropdown-turned-multiselect still reads as tidy, tappable choices.
   Formidable wraps every checkbox field (including a lone consent checkbox) in the
   same .frm_opt_container, so scope the pill grid to containers that actually have
   more than one .frm_checkbox — a single consent box falls through to the plain,
   full-width row styled above instead of being squeezed into one grid column. */
.sform .frm_opt_container:has(.frm_checkbox + .frm_checkbox){display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.sform .frm_opt_container:has(.frm_checkbox + .frm_checkbox){grid-template-columns:1fr}}
.sform .frm_opt_container:has(.frm_checkbox + .frm_checkbox) .frm_checkbox{margin:0}
.sform .frm_opt_container:has(.frm_checkbox + .frm_checkbox) .frm_checkbox label{align-items:center;gap:10px;color:var(--navy);font-size:14px;font-weight:500;line-height:1.3;padding:11px 13px;border:1px solid var(--grey-3);border-radius:11px;cursor:pointer;transition:border-color .2s,background .2s}
.sform .frm_opt_container:has(.frm_checkbox + .frm_checkbox) .frm_checkbox label:hover{border-color:var(--blue);background:var(--blue-tint)}
.sform .frm_opt_container:has(.frm_checkbox + .frm_checkbox) .frm_checkbox input{margin-top:0}

/* radio groups (careers application etc.) — pill options like the checkbox grids */
.sform .frm_form_field:has(.frm_radio){grid-column:1/-1}
.sform .frm_form_field:has(.frm_radio) > .frm_primary_label{position:static;font-family:"Manrope";font-weight:700;font-size:12.5px;color:var(--navy)}
.sform .frm_opt_container:has(.frm_radio){display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sform .frm_radio{margin:0}
.sform .frm_radio label{display:flex;align-items:center;gap:10px;color:var(--navy);font-size:14px;font-weight:500;line-height:1.3;padding:11px 13px;border:1px solid var(--grey-3);border-radius:11px;cursor:pointer;transition:border-color .2s,background .2s;font-family:"DM Sans"}
.sform .frm_radio label:hover{border-color:var(--blue);background:var(--blue-tint)}
.sform .frm_radio input{width:15px;height:15px;flex:none;accent-color:var(--blue)}

/* section dividers (Formidable "Section" field) */
.sform .frm_section_heading{grid-column:1/-1;margin-top:16px;padding-top:20px;border-top:1px solid var(--grey-3)}
.sform .frm_section_heading:first-child{margin-top:0;padding-top:0;border-top:0}
.sform .frm_section_heading h3{font-family:"Manrope";font-weight:800;font-size:16px;color:var(--navy);margin:0}

/* file upload (resume) */
.sform .frm_form_field:has(input[type="file"]),
.sform .frm_form_field:has(.frm_dropzone){grid-column:1/-1}
.sform .frm_form_field:has(input[type="file"]) > .frm_primary_label{position:static;font-family:"Manrope";font-weight:700;font-size:12.5px;color:var(--navy)}
.sform input[type="file"]{font-family:"DM Sans";font-size:14px;color:var(--ink);padding:12px;border:1.5px dashed var(--grey-3);border-radius:11px;background:#fff;width:100%}
.sform .frm_dropzone{border:1.5px dashed var(--grey-3);border-radius:11px;background:#fff}

/* multi-page forms: progress bar + prev/next/save controls (careers application) */
.sform .frm_rootline_group{grid-column:1/-1;margin-bottom:4px}
.sform .frm_page_bar{display:flex;gap:6px;padding:0;margin:0 0 8px;list-style:none}
.sform .frm_page_bar li{flex:1;display:flex;flex-direction:column-reverse;gap:7px;margin:0}
.sform .frm_rootline_title{font-family:"Manrope";font-weight:700;font-size:11px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sform .frm_page_bar li.frm_current_page .frm_rootline_title{color:var(--blue)}
.sform .frm_page_bar input{width:100%;height:7px;border-radius:99px;background:var(--grey-3);appearance:none;-webkit-appearance:none;border:0;cursor:pointer;display:block;padding:0;font-size:0;color:transparent}
.sform .frm_page_bar li.frm_current_page input,
.sform .frm_page_bar li:has(~ li.frm_current_page) input{background:var(--blue)}
.sform .frm_percent_complete,
.sform .frm_pages_complete{display:inline-block;font-family:"Manrope";font-weight:700;font-size:12px;color:var(--muted)}
.sform .frm_pages_complete{float:right}
.sform .frm_form_field.frm_section_heading + .frm_form_field{margin-top:0}
.sform .frm_next_page,.sform .frm_prev_page,.sform .frm_save_draft{
  font-family:"Manrope";font-weight:700;font-size:15px;cursor:pointer;border-radius:12px;padding:13px 22px;transition:.25s var(--ease);
}
.sform .frm_next_page{background:var(--blue);border:0;color:#fff}
.sform .frm_next_page:hover{background:var(--blue-deep)}
.sform .frm_prev_page{background:#fff;border:1.5px solid var(--grey-3);color:var(--navy)}
.sform .frm_prev_page:hover{border-color:var(--blue);color:var(--blue)}
.sform .frm_save_draft{background:transparent;border:0;color:var(--muted);text-decoration:underline;padding:13px 8px}
.sform .frm_save_draft:hover{color:var(--blue)}
.sform .frm_submit{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sform .frm_submit .frm_button_submit{flex:1}

/* html blocks (legal/EEO text) */
.sform .frm_html_container{grid-column:1/-1;color:var(--muted);font-size:12.5px;line-height:1.55}
.sform .frm_html_container p{margin-bottom:10px}
.sform .frm_html_container b{color:var(--navy)}

/* submit — the design's .btn.btn-primary.btn-lg, full width, with the same
   "fill with water" hover as .btn (see global.css). The wave sits at z-index:-1
   inside the button's own stacking context (isolation:isolate), so it rises
   above the button's base blue fill but stays under the plain button text
   without needing to wrap the label in a span. */
.sform .frm_submit{margin-top:4px}
.sform .frm_button_submit{
  position:relative;overflow:hidden;isolation:isolate;
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Manrope";font-weight:700;font-size:17px;line-height:1.1;text-align:center;
  padding:20px 38px;border-radius:12px;cursor:pointer;border:0;
  background:var(--blue);color:#fff;box-shadow:0 12px 26px -12px rgba(48,127,226,.7);
  transition:color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.sform .frm_button_submit::before{
  content:"";position:absolute;z-index:-1;
  left:-6%;width:112%;bottom:0;height:calc(100% + 14px);
  background:var(--navy);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 7 Q14 0 28 7 T56 7 L56 14 L0 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top left/56px 14px,
    linear-gradient(#000,#000) no-repeat left bottom/100% calc(100% - 13px);
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 7 Q14 0 28 7 T56 7 L56 14 L0 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top left/56px 14px,
    linear-gradient(#000,#000) no-repeat left bottom/100% calc(100% - 13px);
  transform:translateY(100%);
  transition:transform .62s cubic-bezier(.33,.72,.28,1);
}
.sform .frm_button_submit:hover{color:#fff;box-shadow:0 20px 40px -16px rgba(0,35,92,.6)}
.sform .frm_button_submit:hover::before{transform:translateY(0)}
.sform .frm_button_submit:active{transform:translateY(1px) scale(.99)}
@media(prefers-reduced-motion:reduce){.sform .frm_button_submit::before{transition-duration:.2s}}

/* validation + messages */
.sform .frm_error{font-family:"DM Sans";font-size:12.5px;color:#c0392b}
.sform .frm_error_style{background:#fbe4e2;border:1px solid #e8b4ae;color:#c0392b;border-radius:11px;padding:12px 14px;margin-bottom:14px;font-size:14px}
.sform .frm_message{background:#e7f6ee;border:1px solid #b9e4cd;color:#1f8a5b;border-radius:11px;padding:14px 16px;font-family:"Manrope";font-weight:700;font-size:15px}
.sform .frm_blocked_form{opacity:.6}

@media(max-width:480px){.sform .frm_fields_container{grid-template-columns:1fr}}