/*
 * Form interface.
 *
 * Loaded last in the form's stylesheet chain (see live-styles.php), after the
 * form framework's own sheets and after the harvested per-page sheet. That
 * order is what lets this file have the final say.
 *
 * Why so many !important declarations: the harvested page stylesheet carries
 * the builder's per-element rules, and they are written as
 *
 *   html body .elementor-11171 .elementor-element.elementor-element-f9eb29c
 *   .eael-gravity-form .gfield input[type="text"] { ... }
 *
 * - six classes and three elements deep, with a different element id per
 * market. Nothing that can be written here outranks that by specificity, and
 * matching it would mean hard-coding four ids that a re-harvest would change.
 * The declarations below are limited to the properties those rules actually
 * set: size, padding, colour, border, type. Everything else is a plain rule.
 *
 * The design: the gold panel, the uppercase mono labels and the black submit
 * are the brand and stay. What changes is the part a person operates - the
 * controls get a real size, a real edge and a real focus state; the first
 * question becomes a proper choice control instead of two loose radio dots;
 * and the column is given a rhythm so it reads as three movements (who you
 * are, what you need, what you are attaching) rather than one list.
 *
 * On this panel, hierarchy cannot be made with tone. Anything faded far enough
 * to read as secondary drops under 4.5:1 against the gold, so every piece of
 * text here is full-strength ink and the hierarchy is carried by size, weight
 * and letter-spacing instead.
 */

.gform_wrapper {
  /* Warm near-black rather than #000: it sits with the gold instead of
     punching a hole in it. 5.6:1 on the panel. */
  --mf-ink: #14100a;
  --mf-field: #fffefb;
  --mf-line: rgba(20, 16, 4, .22);
  --mf-line-strong: rgba(20, 16, 4, .42);
  --mf-veil: transparent;
  --mf-veil-hi: rgba(255, 255, 255, .22);
  /* Deep oxide red. The source marks required fields in a bright red that
     disappears into the gold; this reads as a mark rather than as noise. */
  --mf-required: #7d1f0c;
  --mf-invalid: #8f2412;
  --mf-r: 3px;
  --mf-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mf-t: .16s cubic-bezier(.2, .6, .3, 1);
}

/* ---- heading ----------------------------------------------------------- */
/* The required note was set at 16px, which made a footnote look like the
   form's title. It is a footnote; it is sized like one, and given a rule so it
   reads as the top edge of the form rather than as a stray line. */
.gform_wrapper .gform_heading {
  margin: 0 0 30px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mf-line);
}
.gform_wrapper .gform_required_legend {
  margin: 0 !important;
  font-family: var(--mf-mono) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  letter-spacing: .06em !important;
  color: var(--mf-ink) !important;
}

/* ---- rhythm ------------------------------------------------------------ */
/*
 * The gap was 40px between every field and 12px between a label and the field
 * it names - close enough that the column read as one undifferentiated run.
 * Tightening the label to its control and easing the gap between fields makes
 * the pairs group themselves.
 */
.gform_wrapper .gform_fields {
  row-gap: 26px !important;
  column-gap: 20px !important;
}
.gform_wrapper .gfield[hidden] { display: none !important; }

/* ---- labels ------------------------------------------------------------ */
.gform_wrapper .gform_fields .gfield_label,
.gform_wrapper .gform_fields legend.gfield_label {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 9px !important;
  font-family: var(--mf-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  /* 10px/0.5px was cramped for uppercase. The extra tracking is what makes
     small uppercase legible; it is the same idiom as the site's nav. */
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--mf-ink) !important;
}

.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_asterisk {
  color: var(--mf-required) !important;
  font-weight: 700;
}
.gform_wrapper .gform_fields .gfield_label .gfield_required { margin-left: 3px; }

/*
 * Sub-labels ("Fornavn" under the Fornavn box). Where the source's sub-label
 * repeats the field's own label it is now dropped in the markup - a label
 * cannot be usefully compared to another label in CSS. Any sub-label that
 * survives is real guidance, so it is set as guidance: sentence case, so it is
 * not mistaken for a second heading.
 */
.gform_wrapper .gform-field-label--type-sub {
  display: block;
  margin: 7px 0 0 !important;
  font-family: var(--mf-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  line-height: 1.4 !important;
  color: var(--mf-ink) !important;
}

.gform_wrapper .gfield_description,
.gform_wrapper .gform_fileupload_rules {
  display: block;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  font-family: var(--mf-mono) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  color: var(--mf-ink) !important;
}

/* ---- controls ---------------------------------------------------------- */
/*
 * They were 35px tall with 15px of padding - the padding was taller than the
 * space left for the text - and set in 10px type. A control a person types
 * into gets a real size, and 15px is where mono stops feeling like fine print.
 */
.gform_wrapper .gform_fields input[type="text"],
.gform_wrapper .gform_fields input[type="email"],
.gform_wrapper .gform_fields input[type="tel"],
.gform_wrapper .gform_fields input[type="url"],
.gform_wrapper .gform_fields input[type="number"],
.gform_wrapper .gform_fields select,
.gform_wrapper .gform_fields textarea {
  width: 100%;
  height: auto !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
  font-family: var(--mf-mono) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  /* The builder set every control to uppercase, so a person's own name, street
     and address were shouted back at them and "External Windows" arrived as a
     headline. Case belongs to what was typed and to the option list; the
     uppercase stays on the labels, where it is the brand. */
  text-transform: none !important;
  color: var(--mf-ink) !important;
  background-color: var(--mf-field) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-r) !important;
  box-shadow: none !important;
  transition: border-color var(--mf-t), box-shadow var(--mf-t), background-color var(--mf-t);
}

.gform_wrapper .gform_fields textarea {
  height: 176px !important;
  min-height: 176px !important;
  line-height: 1.65 !important;
  resize: vertical;
}

.gform_wrapper .gform_fields ::placeholder {
  color: rgba(20, 16, 4, .40);
  opacity: 1;
}

/* The framework's own focus is a grey fill, which reads as disabled on a
   coloured panel. An ink edge plus an ink halo reads as focus on both the
   white control and the gold behind it. */
.gform_wrapper .gform_fields input[type="text"]:focus,
.gform_wrapper .gform_fields input[type="email"]:focus,
.gform_wrapper .gform_fields input[type="tel"]:focus,
.gform_wrapper .gform_fields input[type="url"]:focus,
.gform_wrapper .gform_fields input[type="number"]:focus,
.gform_wrapper .gform_fields select:focus,
.gform_wrapper .gform_fields textarea:focus {
  outline: none !important;
  background-color: #fff !important;
  border-color: var(--mf-ink) !important;
  box-shadow: 0 0 0 3px rgba(20, 16, 4, .38) !important;
}

/* Hover is a hint that the box is operable, not a state change. */
.gform_wrapper .gform_fields input[type="text"]:hover:not(:focus),
.gform_wrapper .gform_fields input[type="email"]:hover:not(:focus),
.gform_wrapper .gform_fields input[type="tel"]:hover:not(:focus),
.gform_wrapper .gform_fields select:hover:not(:focus),
.gform_wrapper .gform_fields textarea:hover:not(:focus) {
  border-color: var(--mf-line-strong) !important;
}

/*
 * A malformed address is told at the field rather than only at the top after a
 * round trip. :user-invalid only fires once the person has actually typed and
 * left, so it never greets an empty form.
 */
.gform_wrapper .gform_fields input:user-invalid {
  border-color: var(--mf-invalid) !important;
  box-shadow: 0 0 0 2px rgba(143, 36, 18, .28) !important;
}

/* Select: the platform arrow is the one part of a form that always looks like
   the operating system rather than the site. Drawn here instead. */
.gform_wrapper .gform_fields select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 46px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%2314100a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.6 7 7.4 13 1.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 17px center !important;
  background-size: 12px 8px !important;
  cursor: pointer;
}

/*
 * A field that holds four digits should not be a metre wide. Sizing the
 * control to the answer is the difference between a form that was laid out and
 * one that was merely filled in; the role marks are already on the markup for
 * the lookup, so no new markup is needed to read them.
 */
.gform_wrapper .gfield[data-mf-role="postal_code"] input { max-width: min(100%, 15rem); }
.gform_wrapper .gfield[data-mf-role="phone"] input { max-width: min(100%, 24rem); }
.gform_wrapper input[name="mf_organisation_number"] { max-width: min(100%, 22rem); }

/* ---- choice controls --------------------------------------------------- */
/* Native radios and boxes render in the browser's accent colour - the blue dot
   on the gold panel was the operating system showing through the design. */
.gform_wrapper .gfield-choice-input[type="radio"],
.gform_wrapper .gfield-choice-input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: var(--mf-field) !important;
  border: 1.5px solid var(--mf-ink) !important;
  cursor: pointer;
  transition: box-shadow var(--mf-t), background-color var(--mf-t);
}
.gform_wrapper .gfield-choice-input[type="radio"] { border-radius: 50%; }
/*
 * The framework paints the selected dot and the tick as a ::before on the
 * control, in the browser's own blue, and a pseudo-element paints above
 * anything a background or an inset shadow can put there - which is why the
 * one spot of blue on the panel survived every other override. Both marks are
 * drawn here instead, in the panel's ink.
 */
.gform_wrapper .gfield-choice-input[type="radio"]::before,
.gform_wrapper .gfield-choice-input[type="checkbox"]::before { content: none !important; }
.gform_wrapper .gfield-choice-input[type="checkbox"] { border-radius: 2px; }

.gform_wrapper .gfield-choice-input[type="radio"]:checked {
  box-shadow: inset 0 0 0 4px var(--mf-field), inset 0 0 0 20px var(--mf-ink) !important;
}
.gform_wrapper .gfield-choice-input[type="checkbox"]:checked {
  background: var(--mf-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fffefb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.4 6.4 11.6 12.8 4.8'/%3E%3C/svg%3E") center / 13px 13px no-repeat !important;
  /* The framework rings a ticked box in its own grey. */
  box-shadow: none !important;
}
.gform_wrapper .gfield-choice-input:focus-visible {
  outline: 2px solid var(--mf-ink);
  outline-offset: 3px;
}

/* Choice text is a sentence a person reads, not a field name. Uppercase mono
   at 10px was neither. Field labels keep the uppercase; choices do not. */
.gform_wrapper .gform-field-label--type-inline {
  font-family: var(--mf-mono) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: var(--mf-ink) !important;
  cursor: pointer;
}

.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: 4px !important;
}
/* A 20px box is a 20px target. The row is given the height of a real one, and
   the text its own vertical padding, so a thumb has somewhere to land. */
.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}
.gform_wrapper .gfield_checkbox .gform-field-label--type-inline,
.gform_wrapper .gfield_radio .gform-field-label--type-inline {
  padding: 7px 0;
}

/* ---- the first question ------------------------------------------------ */
/*
 * Private person or business is the first thing anyone answers here and it
 * decides which fields the rest of the form shows. Two 13px dots were not
 * carrying that. Two tiles are: a real target, a visible selected state, and
 * an obvious pair of alternatives.
 */
.gform_wrapper .mf-who .gfield_radio {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px !important;
}
.gform_wrapper .mf-who .gchoice {
  position: relative;
  align-items: center;
  gap: 13px;
  min-height: 62px;
  padding: 15px 17px;
  background: var(--mf-veil);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-r);
  transition: background-color var(--mf-t), border-color var(--mf-t);
}
.gform_wrapper .mf-who .gchoice:hover {
  background: var(--mf-veil-hi);
  border-color: var(--mf-line-strong);
}
/* The selected tile is filled rather than merely outlined, so the answer is
   readable at a glance from anywhere on the page. */
.gform_wrapper .mf-who .gchoice:has(.gfield-choice-input:checked) {
  background: var(--mf-field);
  border-color: var(--mf-ink);
  box-shadow: inset 0 0 0 1px var(--mf-ink);
}
.gform_wrapper .mf-who .gchoice:has(.gfield-choice-input:focus-visible) {
  outline: 2px solid var(--mf-ink);
  outline-offset: 2px;
}
.gform_wrapper .mf-who .gchoice:has(.gfield-choice-input:focus-visible) .gfield-choice-input {
  outline: none;
}
.gform_wrapper .mf-who .gform-field-label--type-inline {
  flex: 1 1 auto;
  font-size: 13.5px !important;
}
/* The whole tile is the target, not just the twenty pixels of the dot. */
.gform_wrapper .mf-who .gchoice .gform-field-label--type-inline::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--mf-r);
}
.gform_wrapper .mf-who .gchoice:has(.gfield-choice-input:checked) .gform-field-label--type-inline {
  font-weight: 500 !important;
}

/*
 * The consent tick is an agreement, not another field. It is given its own
 * quiet enclosure so it reads as the last gate before sending, and so the tap
 * target is the row rather than the box.
 */
.gform_wrapper .gfield--type-choice:has(> legend.screen-reader-text) .gfield_checkbox .gchoice {
  position: relative;
  align-items: flex-start;
  padding: 15px 17px;
  background: transparent;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-r);
  transition: background-color var(--mf-t), border-color var(--mf-t);
}
.gform_wrapper .gfield--type-choice:has(> legend.screen-reader-text) .gfield_checkbox .gchoice:hover {
  background: var(--mf-veil-hi);
  border-color: var(--mf-line-strong);
}
.gform_wrapper .gfield--type-choice:has(> legend.screen-reader-text) .gchoice .gform-field-label--type-inline::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--mf-r);
}
.gform_wrapper .gfield--type-choice:has(> legend.screen-reader-text) .gfield-choice-input {
  margin-top: 1px;
}

/* ---- attachments ------------------------------------------------------- */
/*
 * A hairline above the upload separates what you are sending from who you are
 * - the third movement of the form. It is the only rule inside the fields, so
 * it stays a division rather than a grid.
 */
.gform_wrapper .gfield--type-fileupload {
  padding-top: 26px;
  border-top: 1px solid var(--mf-line);
}

.gform_wrapper .gform_drop_area {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 0 !important;
  padding: 28px 22px !important;
  text-align: center;
  background-color: var(--mf-veil) !important;
  border: 1px dashed var(--mf-line-strong) !important;
  border-radius: var(--mf-r) !important;
  transition: background-color var(--mf-t), border-color var(--mf-t);
}
.gform_wrapper .gform_drop_area:hover {
  background-color: var(--mf-veil-hi) !important;
  border-color: var(--mf-ink) !important;
}
/* The framework draws its own cloud in its own blue. Replaced with an ink
   glyph so the one piece of iconography on the panel belongs to the panel. */
.gform_wrapper .gform_drop_area::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 auto;
  width: 26px !important;
  height: 26px !important;
  background: var(--mf-ink) !important;
  border: 0 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M8 7l4-4 4 4'/%3E%3Cpath d='M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M8 7l4-4 4 4'/%3E%3Cpath d='M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gform_wrapper .gform_drop_instructions {
  display: block;
  font-family: var(--mf-mono) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  letter-spacing: .03em !important;
  color: var(--mf-ink) !important;
}
/* Gold on gold: the button that opens the file picker was the same colour as
   the panel behind it. An outline in the panel's own ink is the site's own
   secondary-button idiom. */
.gform_wrapper .gform_button_select_files {
  padding: 13px 22px !important;
  min-height: 46px;
  font-family: var(--mf-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--mf-ink) !important;
  background: transparent !important;
  border: 1px solid var(--mf-ink) !important;
  border-radius: var(--mf-r) !important;
  cursor: pointer;
  transition: background-color var(--mf-t), color var(--mf-t);
}
.gform_wrapper .gform_button_select_files:hover,
.gform_wrapper .gform_button_select_files:focus-visible {
  background: var(--mf-ink) !important;
  color: var(--mf-field) !important;
}
.gform_wrapper .gform_button_select_files:focus-visible {
  outline: 2px solid var(--mf-ink);
  outline-offset: 2px;
}

/* What was chosen, once something has been. */
.gform_wrapper .gform_multifile_upload ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gform_wrapper .gform_multifile_upload ul li {
  margin: 0;
  padding: 8px 12px;
  font-family: var(--mf-mono);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--mf-ink);
  background: var(--mf-field);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-r);
}

/* ---- send -------------------------------------------------------------- */
/*
 * Aligned to the column the fields start from rather than floated to the
 * middle of the panel: the eye finishes the last field at the left edge and
 * finds the button where it left off.
 */
.gform_wrapper .gform_footer {
  margin: 34px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.gform_wrapper .gform_footer .gform_button {
  width: auto !important;
  min-width: 240px !important;
  margin: 0 !important;
  flex: 0 0 auto;
  padding: 20px 36px !important;
  font-family: var(--mf-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background-color: var(--mf-ink) !important;
  border: 1px solid var(--mf-ink) !important;
  border-radius: var(--mf-r) !important;
  cursor: pointer;
  transition: background-color var(--mf-t), color var(--mf-t), box-shadow var(--mf-t), transform var(--mf-t);
}
/* The site's own buttons invert on hover; this one does the same. */
.gform_wrapper .gform_footer .gform_button:hover {
  background-color: var(--mf-field) !important;
  color: var(--mf-ink) !important;
  box-shadow: 0 8px 22px -10px rgba(20, 16, 4, .7);
}
.gform_wrapper .gform_footer .gform_button:focus-visible {
  outline: 2px solid var(--mf-ink) !important;
  outline-offset: 3px;
}
.gform_wrapper .gform_footer .gform_button:active { transform: translateY(1px); }

/* ---- what went wrong --------------------------------------------------- */
.gform_wrapper .mf-form-errors {
  margin: 0 0 26px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .34);
  border: 1px solid var(--mf-invalid);
  border-left: 3px solid var(--mf-invalid);
  border-radius: var(--mf-r);
}
.gform_wrapper .mf-form-errors p {
  margin: 0;
  font-family: var(--mf-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--mf-ink);
}
.gform_wrapper .mf-form-errors p + p { margin-top: 6px; }

/* ---- company lookup ---------------------------------------------------- */
.gform_wrapper .mf-lookup { position: relative; }

.gform_wrapper .mf-suggest {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-r);
  /* Two shadows: a tight one to seat the card on the panel, a soft wide one
     for depth. A single shadow at this size reads as a flat grey rectangle. */
  box-shadow: 0 1px 2px rgba(20, 16, 4, .16), 0 14px 30px -8px rgba(20, 16, 4, .40);
}

.gform_wrapper .mf-suggest__item {
  display: block;
  margin: 0;
  padding: 11px 13px;
  border-radius: 2px;
  cursor: pointer;
  color: var(--mf-ink);
  line-height: 1.3;
  transition: background-color .12s ease;
}
.gform_wrapper .mf-suggest__item + .mf-suggest__item { margin-top: 2px; }

/* The name leads; the register's own detail follows, quieter. */
.gform_wrapper .mf-suggest__name {
  display: block;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}
.gform_wrapper .mf-suggest__meta {
  display: block;
  margin-top: 2px;
  font-family: var(--mf-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: #6b6250;
}

.gform_wrapper .mf-suggest__item:hover,
.gform_wrapper .mf-suggest__item:focus,
.gform_wrapper .mf-suggest__item[aria-selected="true"] {
  background: #f4efdf;
  outline: none;
}
.gform_wrapper .mf-suggest__item:hover .mf-suggest__meta,
.gform_wrapper .mf-suggest__item:focus .mf-suggest__meta { color: #4a4335; }

/* The state between typing and an answer, so the field is never just silent. */
.gform_wrapper .mf-suggest__status {
  padding: 11px 13px;
  font-family: var(--mf-mono);
  font-size: 12px;
  color: #6b6250;
  cursor: default;
}

.gform_wrapper .mf-lookup-note {
  margin: 9px 0 0 !important;
  font-family: var(--mf-mono) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
  color: var(--mf-ink) !important;
}

/* ---- narrow ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* Two half-width name boxes side by side stop being two boxes and start
     being two slots at this width. */
  .gform_wrapper .gform_fields .gfield--width-half { grid-column: 1 / -1 !important; }
}

@media (max-width: 640px) {
  .gform_wrapper .gform_heading { margin-bottom: 24px; }
  .gform_wrapper .gform_fields { row-gap: 22px !important; }
  /* 16px is the threshold below which iOS zooms the page on focus; a form
     that jumps when you tap it is the single most-felt mobile defect. */
  .gform_wrapper .gform_fields input[type="text"],
  .gform_wrapper .gform_fields input[type="email"],
  .gform_wrapper .gform_fields input[type="tel"],
  .gform_wrapper .gform_fields input[type="url"],
  .gform_wrapper .gform_fields input[type="number"],
  .gform_wrapper .gform_fields select,
  .gform_wrapper .gform_fields textarea {
    font-size: 16px !important;
    min-height: 54px !important;
  }
  .gform_wrapper .gform_fields textarea { height: 154px !important; min-height: 154px !important; }
  .gform_wrapper .mf-who .gfield_radio { grid-template-columns: 1fr; }
  .gform_wrapper .mf-who .gchoice { min-height: 58px; }
  .gform_wrapper .gfield_checkbox .gchoice,
  .gform_wrapper .gfield_radio .gchoice { min-height: 44px; }
  .gform_wrapper .gform_drop_area { padding: 24px 16px !important; }
  .gform_wrapper .gform_footer .gform_button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px 24px !important;
  }
  .gform_wrapper .mf-suggest { max-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .gform_wrapper * { transition: none !important; }
}