/*
 * 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; }

/* The list sits IN the flow, directly under its input, so it pushes the fields
   below it down instead of floating over them. An overlay ends wherever its
   last row ends - usually halfway through the next label or box - and leaves
   half a field showing under its edge; in the flow nothing can be covered,
   clipped by the form panel or stacked behind a neighbour. */
.gform_wrapper .mf-suggest {
  position: relative;
  z-index: 1;
  inset: auto;
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 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.
     Kept short: the list is in the flow now, so a long shadow would only
     smudge the label of the field underneath. */
  box-shadow: 0 1px 2px rgba(20, 16, 4, .16), 0 8px 18px -8px rgba(20, 16, 4, .38);
}

.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; }
}

/*
 * Cookie banner and assistant launcher must never sit on top of the form.
 * (2026-10-31, quote/contact on all four hosts.)
 *
 * Both float above the page, so neither knows where a field is. Measured on
 * the quote form at 390 px with the banner showing: a field that the browser
 * scrolls into view by Tab or tap-focus lands against the bottom edge of the
 * window - exactly under the banner - and a field centred by focus() landed
 * under the launcher, which the banner lifts to mid-screen. The banner's
 * measured height is already published as --mf-cc-h by consent.js (0px once
 * answered), so everything below follows it and needs no script.
 *
 *  1. scroll-padding makes the browser keep the banner (and the launcher)
 *     out of the area it scrolls a focused field into.
 *  2. While the banner is up, the form reserves that same room at its foot,
 *     so the last field and the submit button can be scrolled clear of it.
 *  3. On tablets and phones the launcher shrinks to its mark and tucks into
 *     the margin beside the form column, so it cannot overlap a field or the
 *     submit button at any scroll position. The words stay in the markup
 *     (visually hidden), so it keeps its accessible name; behaviour, consent
 *     logic and the banner text are not touched.
 */
html { scroll-padding-block-end: calc(var(--mf-cc-h, 0px) + 72px); }

@media (max-width: 1023px) {
  body.mf-cc-open .gform_wrapper { padding-block-end: calc(var(--mf-cc-h, 0px) + 72px); }

  .mf-ai:not(.is-open) { inset-inline-end: 6px; }
  .mf-ai:not(.is-open) .mf-ai__launch {
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .mf-ai:not(.is-open) .mf-ai__launch-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

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