/*
 * ETS form skin for Gravity Forms.
 *
 * Deliberately NOT in theme.css. Gravity enqueues its four Orbital
 * stylesheets after the theme's, so anything written in theme.css loses every
 * specificity tie to rules that load later. This file is enqueued with those
 * four as dependencies, which puts it last and lets the rules below win
 * without inflating every selector.
 */
/* ============================================================
   1.8.0 GRAVITY FORMS
   Written against Gravity's own Orbital markup, so it styles every form on the
   site at once and a new form needs no CSS of its own.

   Two layers. The first overrides Orbital's custom properties, which is how
   Gravity intends theming to be done and is the part that survives a plugin
   update. The second handles what Gravity has no variable for: the underline
   fields the rest of this site uses instead of boxes, the label treatment, the
   radio cards, the upload area and the submit button.

   LABEL CASE. Sentence case is the default, because every label on these forms
   is a whole question and small caps with wide tracking is hard to read at that
   length. To switch the whole site to the small caps used elsewhere, delete the
   .gform-theme--ets-sentence rule block below. Nothing else has to change.
   ============================================================ */

/* --- layer one: Orbital's own variables --- */
.gform_wrapper.gform-theme--framework{
  --gf-color-primary:var(--ets-purple);
  --gf-color-primary-rgb:103,52,185;
  --gf-color-primary-contrast:#fff;
  --gf-color-primary-contrast-rgb:255,255,255;
  --gf-color-primary-darker:var(--ets-purple-deep);
  --gf-color-primary-lighter:var(--ets-purple);
  --gf-radius:0px;
  --gf-ctrl-radius:0px;
  --gf-ctrl-btn-radius:0px;
  --gf-font-size-primary:16px;
  --gf-font-size-secondary:14px;
}

/* --- layer two: the parts with no variable --- */
/* The form is a card: white, square, orange rule across the top. */
.gform_wrapper{
  background:#fff;border:1px solid var(--ets-border);
  border-top:4px solid var(--ets-orange);
  padding:clamp(26px,3vw,40px);
  box-shadow:0 2px 6px rgba(25,21,33,.05),0 26px 60px -40px rgba(25,21,33,.45);
  font-family:var(--ets-font-body)}
.sec--cream .gform_wrapper,.sec--alt .gform_wrapper{background:#fff}

.gform_heading{margin:0 0 28px}
.gform_title{font-family:var(--ets-font-head);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(20px,2.1vw,25px);color:var(--ets-ink);margin:0 0 14px;line-height:1.2}
/* The form description is the highlighted note inside the card, not grey run-on
   text. Pages that already carry their own intro switch the description off at
   the shortcode, so this only paints where there is something to say. */
.gform_description{display:block;border-left:3px solid var(--ets-purple);
  background:var(--ets-tint);padding:16px 18px;margin:0;
  font-size:14.5px;line-height:1.6;color:var(--ets-body)}
.gform_required_legend{display:none}

.gform_fields{display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:24px;row-gap:22px;margin:0;padding:0;list-style:none}
.gfield--width-full{grid-column:span 12}
.gfield--width-half{grid-column:span 6}
.gfield--width-third{grid-column:span 4}
.gfield--width-two-thirds{grid-column:span 8}
@media (max-width:700px){
  .gfield--width-half,.gfield--width-third,.gfield--width-two-thirds{grid-column:span 12}
}

/* Two lines' worth of label space whether the label needs it or not, so a long
   question beside a short one does not knock the two inputs out of line. */
.gfield_label,.gform-field-label{
  display:block;font-family:var(--ets-font-head);font-weight:800;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ets-body);margin:0 0 9px;
  line-height:1.5;min-height:32px}
/* "(required)" is shown, but quietly. Most fields on these forms are required,
   so in orange it read as a wall of warnings rather than a note. */
.gfield_required,.gfield_required_asterisk{color:var(--ets-muted);font-weight:600;margin-left:3px}
.gfield_required_text{display:inline;font-size:12.5px;letter-spacing:0;
  text-transform:lowercase;color:var(--ets-muted);font-weight:600}

/* Sentence case. Delete this block to put every form back to small caps.
   Note the font-family repeat: this block outranks the one above, so leaving
   it out here let Gravity's own font win and the labels rendered in Open Sans
   instead of Raleway. */
.gform_wrapper .gfield_label,.gform_wrapper .gform-field-label{
  font-family:var(--ets-font-head);font-weight:800;
  font-size:14px;letter-spacing:0;text-transform:none;color:var(--ets-ink);
  margin:0 0 8px;min-height:44px}

/* Boxed controls. 44px of label space above means a question that wraps to two
   lines still starts its input level with the single-line question beside it. */
.gform_wrapper input[type=text],.gform_wrapper input[type=email],.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],.gform_wrapper input[type=number],.gform_wrapper input[type=date],
.gform_wrapper select,.gform_wrapper textarea{
  width:100%;border:1px solid var(--ets-border);border-radius:0;
  background:#fff;padding:13px 14px;font-family:var(--ets-font-body);font-size:16px;
  line-height:1.5;color:var(--ets-ink);outline:none;box-shadow:none;
  transition:border-color .18s,box-shadow .18s;
  -webkit-appearance:none;appearance:none}
.gform_wrapper textarea{min-height:118px;resize:vertical}
.gform_wrapper input:focus,.gform_wrapper select:focus,.gform_wrapper textarea:focus{
  border-color:var(--ets-purple);box-shadow:0 0 0 3px rgba(103,52,185,.13)}
.gform_wrapper input::placeholder,.gform_wrapper textarea::placeholder{color:var(--ets-light)}

.gform_wrapper .ginput_container_select{position:relative}
.gform_wrapper .ginput_container_select::after{
  content:"";position:absolute;right:17px;top:50%;width:9px;height:9px;pointer-events:none;
  border-right:2px solid var(--ets-ink);border-bottom:2px solid var(--ets-ink);
  transform:translateY(-70%) rotate(45deg)}
.gform_wrapper select{padding-right:44px;cursor:pointer}

/* Help text sits at --ets-muted, not --ets-light. Light grey on white is about
   2.6 to 1, which fails the contrast floor, and this is the text telling
   somebody what a field wants. The consent paragraph gets the same. */
.gfield_description,.gform_fileupload_rules,.gfield_consent_description{
  display:block;font-size:12.5px;color:var(--ets-muted);margin:8px 0 0;padding:0;line-height:1.55}
.gfield_consent_description{max-height:none;border:0;padding:0;overflow:visible}

.gfield_radio,.gfield_checkbox{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gfield_checkbox{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
@media (max-width:700px){.gfield_checkbox{grid-template-columns:1fr}}
.gchoice{display:flex;align-items:flex-start;gap:11px;margin:0}
.gchoice input{width:18px;height:18px;flex:none;margin:3px 0 0;accent-color:var(--ets-purple)}
.gchoice label{font-family:var(--ets-font-body);font-size:15px;color:var(--ets-body);
  text-transform:none;letter-spacing:0;font-weight:400;margin:0;line-height:1.5;min-height:0}

/* Add the CSS class ets-cards to a radio field to get the card treatment. */
.gfield.ets-cards .gfield_radio{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
@media (max-width:700px){.gfield.ets-cards .gfield_radio{grid-template-columns:1fr}}
.gfield.ets-cards .gchoice{border:1px solid var(--ets-border);padding:15px 16px;
  transition:.18s;cursor:pointer}
.gfield.ets-cards .gchoice:hover{border-color:var(--ets-purple);background:var(--ets-tint)}
.gfield.ets-cards .gchoice:has(input:checked){border-color:var(--ets-purple);
  background:var(--ets-tint);box-shadow:inset 0 0 0 1px var(--ets-purple)}

.ginput_container_fileupload{border:1px dashed var(--ets-border);background:var(--ets-cream);
  padding:20px;transition:.18s}
.ginput_container_fileupload:hover{border-color:var(--ets-purple);background:var(--ets-tint)}
.ginput_container_fileupload input[type=file]{width:100%;border:0;background:transparent;
  font-family:var(--ets-font-body);font-size:14px;color:var(--ets-body);padding:0}
.ginput_container_fileupload input[type=file]::file-selector-button{
  font-family:var(--ets-font-head);font-weight:800;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--ets-purple);border:0;border-radius:0;
  padding:11px 18px;margin-right:14px;cursor:pointer;transition:.18s}
.ginput_container_fileupload input[type=file]::file-selector-button:hover{
  background:var(--ets-purple-deep)}

/* No rule above the button. Every field already ends in an underline of the
 * same colour, so a border here reads as a second stray line under the last
 * field rather than as a divider. Spacing does the separating instead. */
.gform_footer{margin:clamp(28px,3vw,38px) 0 0;padding-top:0;
  border-top:0;display:block}
/* The submit button, and an honest note about how far this gets.
 *
 * Gravity paints its controls from a style block it writes per form embed,
 * scoped by the form's id and carrying !important. Colour and corner radius
 * come from the shortcode's own styles attribute, which is the supported way
 * in, and they are already correct. Of the typography, case and font are
 * reachable from here; weight, letter-spacing and padding are not, at any
 * specificity. Changing those three means changing Gravity's style settings,
 * not this file. The rule below is written in full anyway so the button still
 * looks right if that inline block ever stops being emitted. */
.gform-theme.gform-theme--framework.gform_wrapper .gform_button,
.gform-theme.gform-theme--framework.gform_wrapper input[type=submit],
.gform-theme.gform-theme--framework.gform_wrapper button.gform_button{
  width:auto;border:0;border-radius:0;cursor:pointer;
  background:var(--ets-orange);color:#fff;
  font-family:var(--ets-font-head);font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:17px 38px;line-height:1.2;transition:.18s;
  box-shadow:0 12px 26px -14px rgba(226,127,37,.9)}
/* The two that do land. Flagged rather than hidden: these are the only
 * !important flags in the file that are not on a display property. */
.gform-theme.gform-theme--framework.gform_wrapper .gform_button,
.gform-theme.gform-theme--framework.gform_wrapper input[type=submit]{
  font-family:var(--ets-font-head) !important;
  text-transform:uppercase !important}
.gform-theme.gform-theme--framework.gform_wrapper .gform_button:hover,
.gform-theme.gform-theme--framework.gform_wrapper input[type=submit]:hover{
  background:var(--ets-orange-dark)}
.gform_wrapper .gform_button:focus-visible{outline:3px solid var(--ets-purple);outline-offset:3px}

.gfield_error .gfield_label{color:#b3261e}
.gfield_error input,.gfield_error select,.gfield_error textarea{border-color:#b3261e}
.gfield_validation_message,.validation_message{
  font-size:12.5px;color:#b3261e;margin:8px 0 0;padding:0;background:none;border:0}
.gform_validation_errors{border:1px solid #b3261e;background:#fdf3f2;padding:14px 18px;
  margin:0 0 24px;border-radius:0;box-shadow:none}
.gform_submission_error{font-family:var(--ets-font-head);font-weight:800;font-size:15px;
  color:#b3261e;margin:0}
.gform_confirmation_wrapper,.gform_confirmation_message{
  background:#fff;border:1px solid var(--ets-border);border-left:3px solid var(--ets-purple);
  padding:clamp(24px,3vw,36px);font-size:16px;color:var(--ets-body);
  box-shadow:0 2px 6px rgba(25,21,33,.05),0 30px 60px -34px rgba(25,21,33,.4)}

/* The anchor the six hero buttons point at. Offset so the sticky header does
   not sit on top of the form heading when someone jumps to it. */
#form{scroll-margin-top:120px}

/* ============================================================
   1.8.2 CHOICE FIELDS AND CONTROL HEIGHTS
   Gravity 3.x renders a choice field like this:

     fieldset.gfield--type-checkbox
       legend.gfield_label.gform-field-label
       div.ginput_container_checkbox
         div.gfield_checkbox                  the list
           div.gchoice                        one choice
             input.gfield-choice-input
             label.gform-field-label--type-inline

   Two things follow. The list is .gfield_checkbox, not the ginput container,
   so the column layout hangs off that. And a choice label carries
   .gform-field-label, which means the field label rule higher up was catching
   it and rendering every option in bold Raleway small caps. It needs putting
   back to body text explicitly.
   ============================================================ */
/* Gravity sets display:flex on the list and that quietly beat the grid here,
   which is why twelve options rendered as one long column. The two !important
   flags are on display only, and they are the difference between a usable
   two column list and a wall of checkboxes. Everything else cascades normally.
   .gchoice is left alone: Gravity already lays the box and its label out as a
   two column grid and it does it well. */
.gform_wrapper .gfield_checkbox{
  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:20px;row-gap:10px;margin:0;padding:0;list-style:none}
.gform_wrapper .gfield_radio{
  display:grid !important;gap:10px;margin:0;padding:0;list-style:none}
@media (max-width:700px){
  .gform_wrapper .gfield_checkbox{grid-template-columns:1fr}
}

.gform_wrapper .gchoice input{accent-color:var(--ets-purple)}

.gform_wrapper .gform-field-label--type-inline{
  font-family:var(--ets-font-body);font-weight:400;font-size:15px;
  letter-spacing:0;text-transform:none;color:var(--ets-body);
  margin:0;min-height:0;line-height:1.5}

.gform_wrapper .gform-field-label--type-sub{
  font-family:var(--ets-font-body);font-weight:400;font-size:12px;
  letter-spacing:0;text-transform:none;color:var(--ets-light);
  margin:6px 0 0;min-height:0}

.gform_wrapper .gfield.ets-cards .gfield_radio{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
@media (max-width:700px){
  .gform_wrapper .gfield.ets-cards .gfield_radio{grid-template-columns:1fr}
}
.gform_wrapper .gfield.ets-cards .gchoice{
  border:1px solid var(--ets-border);padding:15px 16px;transition:.18s;cursor:pointer}
.gform_wrapper .gfield.ets-cards .gchoice:hover{
  border-color:var(--ets-purple);background:var(--ets-tint)}
.gform_wrapper .gfield.ets-cards .gchoice:has(input:checked){
  border-color:var(--ets-purple);background:var(--ets-tint);
  box-shadow:inset 0 0 0 1px var(--ets-purple)}

/* The large control size sets line-height equal to the control height, which
   with our own padding pushes descenders out of the box and clips them on a
   select. Our fields size themselves from padding, so the line box does not
   need to. */
.gform_wrapper input[type=text],.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],.gform_wrapper input[type=url],
.gform_wrapper input[type=number],.gform_wrapper input[type=date],
.gform_wrapper select,.gform_wrapper textarea{line-height:1.5;height:auto}


/* ---------------------------------------------------------------------------
   Form spacing fixes, 5 Oct.
   --------------------------------------------------------------------------- */

/* The 44px label floor above exists so that two fields sitting side by side
   still line up when one label wraps to two lines and its neighbour does not.
   A full width field has no neighbour to line up with, so on those the floor
   was just 24px of dead air under every label. Scope it to the half widths. */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label{min-height:0}
.gform_wrapper .gfield--width-half .gfield_label,
.gform_wrapper .gfield--width-half .gform-field-label,
.gform_wrapper .gfield--width-third .gfield_label,
.gform_wrapper .gfield--width-third .gform-field-label{min-height:44px}

/* Gravity pads the file upload container 20px from the top, so that one field
   sat 21px lower than every other control. */
.gform_wrapper .ginput_container_fileupload{padding-top:0}

/* Choice cards were locked to three columns, which forced half the options to
   wrap onto a second line and then stretched every card in the row to match.
   auto-fit sizes the columns to the content instead. */
/* touched 5 Oct */