/* Look of the form-only pages (/?tenx_form=rfq, /?tenx_form=contact) so they match the new 10-8 home page that frames them. */
:root{
  --panel:#101F33; --field:#0A1626; --line:rgba(255,255,255,.16); --ink:#EEF3F9; --muted:#A9B8CB; --hint:#9FB0C3;
  --blue:#7FA8FF; --blue-soft:#9DBBFF; --bad:#FFB4A8;
  --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:1.0625rem; --small:.9375rem;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--panel)}
body.tenx-form{margin:0;padding:3px;background:var(--panel);color:var(--ink);font:400 var(--body)/1.5 var(--font);overflow-x:hidden}
body.tenx-form a{color:var(--blue-soft)}

/* the form plugin's own colour settings, re-pointed at the new palette */
body.tenx-form .with_frm_style{
  --font:var(--font);
  --label-color:var(--ink); --text-color:var(--ink); --description-color:var(--hint); --form-desc-color:var(--hint);
  --bg-color:var(--field); --bg-color-active:var(--field); --border-color:var(--line); --border-color-active:var(--blue);
  --check-label-color:var(--ink); --section-color:var(--ink); --required-color:var(--blue-soft);
  --text-color-error:var(--ink); --bg-color-error:var(--field); --border-color-error:var(--bad);
  --text-color-disabled:var(--muted); --bg-color-disabled:var(--field); --border-color-disabled:var(--line);
  color:var(--ink);font-family:var(--font);max-width:none;margin:0;
}
body.tenx-form .with_frm_style fieldset{border:0;padding:0;margin:0;background:none;min-width:0}
body.tenx-form .with_frm_style .frm_fields_container{gap:16px 12px}
/* the form's name is for screen readers only: invisible, but not clipped or pushed off the page */
body.tenx-form .with_frm_style legend.frm_screen_reader{position:absolute;left:0;top:0;width:auto;max-width:100%;height:auto;margin:0;padding:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;font-size:1px;line-height:1;opacity:0;pointer-events:none}
body.tenx-form .with_frm_style .frm_form_field{margin:0}

body.tenx-form .with_frm_style .frm_primary_label,
body.tenx-form .with_frm_style .frm_form_field > label{color:var(--ink);font:500 var(--small)/1.4 var(--font);padding:0 0 6px;margin:0;display:block;width:auto;max-width:100%}
body.tenx-form .with_frm_style .frm_required{color:var(--blue-soft);font-weight:500}
body.tenx-form .with_frm_style .frm_description,
body.tenx-form .with_frm_style .frm_form_field .frm_description{color:var(--hint);font:400 var(--small)/1.45 var(--font);margin:6px 0 0;padding:0;max-width:100%}

body.tenx-form .with_frm_style input[type=text],
body.tenx-form .with_frm_style input[type=email],
body.tenx-form .with_frm_style input[type=tel],
body.tenx-form .with_frm_style input[type=url],
body.tenx-form .with_frm_style input[type=number],
body.tenx-form .with_frm_style input[type=date],
body.tenx-form .with_frm_style input[type=password],
body.tenx-form .with_frm_style select,
body.tenx-form .with_frm_style textarea{
  width:100%;max-width:100%;min-height:48px;height:auto;padding:10px 14px;margin:0;
  border:1px solid var(--line);border-radius:12px;background-color:var(--field);color:var(--ink);
  font:400 var(--body)/1.4 var(--font);box-shadow:none;outline:0;
}
body.tenx-form .with_frm_style select{appearance:auto;line-height:1.4}
body.tenx-form .with_frm_style textarea{min-height:120px;resize:vertical}
body.tenx-form .with_frm_style ::placeholder{color:#7387A0;opacity:1}
body.tenx-form .with_frm_style input:focus,
body.tenx-form .with_frm_style select:focus,
body.tenx-form .with_frm_style textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(127,168,255,.45);background-color:var(--field)}

/* choices as tappable pills */
body.tenx-form .with_frm_style .frm_opt_container{display:flex;flex-wrap:wrap;gap:8px}
body.tenx-form .with_frm_style .frm_radio,
body.tenx-form .with_frm_style .frm_checkbox{display:block;margin:0;padding:0;float:none;width:auto}
body.tenx-form .with_frm_style .frm_radio label,
body.tenx-form .with_frm_style .frm_checkbox label{
  display:flex;align-items:center;min-height:44px;padding:8px 16px;margin:0;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;background:var(--field);color:var(--ink);
  font:400 var(--small)/1.2 var(--font);white-space:normal;text-indent:0;
}
body.tenx-form .with_frm_style .frm_radio label:has(input:checked),
body.tenx-form .with_frm_style .frm_checkbox label:has(input:checked){background:rgba(63,140,255,.22);border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
body.tenx-form .with_frm_style .frm_radio label:has(input:focus-visible),
body.tenx-form .with_frm_style .frm_checkbox label:has(input:focus-visible){outline:2px solid var(--blue-soft);outline-offset:2px}
/* the real radio or checkbox covers its whole pill, so the full pill is the tap target; the pill's colour shows the choice */
body.tenx-form .with_frm_style .frm_radio label,
body.tenx-form .with_frm_style .frm_checkbox label{position:relative}
body.tenx-form .with_frm_style .frm_radio input[type=radio],
body.tenx-form .with_frm_style .frm_checkbox input[type=checkbox]{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:none;margin:0;padding:0;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}

/* notes written into the form */
body.tenx-form .with_frm_style .frm_html_container{color:var(--ink);font-size:var(--small);line-height:1.45}
body.tenx-form .with_frm_style .frm_html_container h2,
body.tenx-form .with_frm_style .frm_html_container h3,
body.tenx-form .with_frm_style h3.frm_pos_top,
body.tenx-form .with_frm_style .frm_section_heading h3{color:var(--ink);font:600 var(--body)/1.3 var(--font);margin:6px 0 0;padding:0;border:0}

/* send button */
body.tenx-form .with_frm_style .frm_submit{margin:4px 0 0;padding:0}
body.tenx-form .with_frm_style .frm_submit button,
body.tenx-form .with_frm_style .frm_button_submit{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;width:auto;height:auto;padding:0 28px;margin:0;cursor:pointer;
  border:1px solid rgba(215,230,255,.85);border-radius:999px;color:#fff;
  background:linear-gradient(180deg,rgba(150,190,255,.72),rgba(70,130,255,.50) 50%,rgba(40,100,245,.66)),#1D4FD8;
  box-shadow:inset 0 -6px 12px rgba(160,200,255,.35),0 8px 22px rgba(30,80,220,.40);text-shadow:0 1px 2px rgba(5,15,60,.6);
  font:500 var(--body)/1 var(--font);white-space:nowrap;transition:transform .15s ease-out;
}
body.tenx-form .with_frm_style .frm_button_submit:hover{background:linear-gradient(180deg,rgba(175,208,255,.82),rgba(90,148,255,.62) 50%,rgba(55,115,250,.76)),#1D4FD8;color:#fff;border-color:#fff}
body.tenx-form .with_frm_style .frm_button_submit:active{transform:scale(.97)}
body.tenx-form .with_frm_style .frm_button_submit:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px}

/* messages after sending, and field errors */
body.tenx-form .with_frm_style .frm_message,
body.tenx-form .frm_message{padding:16px 18px;margin:0;border-radius:12px;background:var(--field);border:1px solid rgba(127,168,255,.5);color:var(--ink);font:400 var(--body)/1.5 var(--font)}
body.tenx-form .with_frm_style .frm_message p{color:var(--ink);margin:0}
body.tenx-form .with_frm_style .frm_error_style{padding:14px 16px;margin:0 0 16px;border-radius:12px;background:rgba(255,120,100,.10);border:1px solid var(--bad);color:var(--ink);font:400 var(--small)/1.45 var(--font)}
body.tenx-form .with_frm_style .frm_error,
body.tenx-form .with_frm_style .frm_blank_field label,
body.tenx-form .with_frm_style .frm_blank_field .frm_primary_label{color:var(--bad)}
body.tenx-form .with_frm_style .frm_error{font:400 var(--small)/1.4 var(--font);margin:6px 0 0;padding:0}
body.tenx-form .with_frm_style .frm_blank_field input,
body.tenx-form .with_frm_style .frm_blank_field select,
body.tenx-form .with_frm_style .frm_blank_field textarea{border-color:var(--bad)}

/* the site shows no email address: documents go through the form or by phone */
body.tenx-form #frm_desc_field_v2link2{display:none}

/* spam traps: the old contact page hid these three fields from people, so this page does too */
body.tenx-form #frm_field_33_container,body.tenx-form #frm_field_34_container,body.tenx-form #frm_field_35_container{display:none !important}

/* the cookie banner and analytics belong to the home page that frames this form */
body.tenx-form .cmplz-cookiebanner,body.tenx-form #cmplz-cookiebanner-container,body.tenx-form #cmplz-manage-consent{display:none !important}

@media (max-width:600px){
  body.tenx-form .with_frm_style .frm_fields_container > .frm_form_field{grid-column:1 / -1}
  body.tenx-form .with_frm_style .frm_submit button,
  body.tenx-form .with_frm_style .frm_button_submit{width:100%}
}
@media (prefers-reduced-motion:reduce){body.tenx-form .with_frm_style .frm_button_submit{transition:none}}