/* ==========================================================================
   Forminator overrides
   Dropped in wherever a Forminator form stands in for one of the design's own
   cards — the landing page's enquiry card and the contact page's form. The
   card around it already carries the dark background and the type, so these
   rules only bring Forminator's own markup into line with it.

   Scoped to .forminator-card-wrapper rather than to one page, so both use the
   same stylesheet instead of a copy each.
   ========================================================================== */
  .forminator-card-wrapper .forminator-ui{font-family:inherit !important;}

  /* Forminator measures its own container and adds .forminator-size--small,
     which collapses every column to full width. The card is narrow, so that
     always fires — restore the row/col widths here. */
  .forminator-card-wrapper .forminator-row{
    display:flex !important;
    flex-wrap:wrap !important;
    margin-left:-9px !important;
    margin-right:-9px !important;
  }
  .forminator-card-wrapper .forminator-row > .forminator-col{
    padding-left:9px !important;
    padding-right:9px !important;
    flex:0 0 100%;
    max-width:100%;
    min-width:0;              /* stops inputs forcing the row wider */
    float:none !important;
  }
  .forminator-card-wrapper .forminator-row > .forminator-col-6,
  .forminator-card-wrapper .forminator-ui.forminator-size--small .forminator-row > .forminator-col-6,
  .forminator-card-wrapper .forminator-ui.forminator-size--medium .forminator-row > .forminator-col-6{
    flex:0 0 50% !important;
    max-width:50% !important;
    width:50% !important;
  }
  .forminator-card-wrapper .forminator-row > .forminator-col-4{
    flex:0 0 33.3333% !important;max-width:33.3333% !important;width:33.3333% !important;
  }
  .forminator-card-wrapper .forminator-row > .forminator-col-8{
    flex:0 0 66.6666% !important;max-width:66.6666% !important;width:66.6666% !important;
  }
  .forminator-card-wrapper .forminator-row > .forminator-col-12{
    flex:0 0 100% !important;max-width:100% !important;width:100% !important;
  }
  @media (max-width:640px){
    .forminator-card-wrapper .forminator-row > .forminator-col-6,
    .forminator-card-wrapper .forminator-row > .forminator-col-4,
    .forminator-card-wrapper .forminator-row > .forminator-col-8{
      flex:0 0 100% !important;max-width:100% !important;width:100% !important;
    }
  }
  .forminator-card-wrapper .forminator-label{
    display:block !important;
    font-size:0.895625rem !important;
    font-weight:400 !important;
    color:#fff !important;
    margin-bottom:6px !important;
  }
  .forminator-card-wrapper .forminator-input,
  .forminator-card-wrapper .forminator-select,
  .forminator-card-wrapper .forminator-textarea{
    width:100% !important;
    height:45.38px !important;
    background:#fff !important;
    border:none !important;
    border-radius:3.583px !important;
    padding:0 12px !important;
    font-family:inherit !important;
    font-size:0.9375rem !important;
    color:var(--ink, #2d2d2c) !important;
  }
  .forminator-card-wrapper .forminator-input:focus{outline:2px solid var(--garnet, #8f001a) !important;}
  .forminator-card-wrapper .forminator-button-submit{
    width:100% !important;
    margin-top:12px !important;
    padding:14.33px !important;
    background:var(--garnet, #8f001a) !important;
    color:#fff !important;
    border:none !important;
    border-radius:23.884px !important;
    font-family:inherit !important;
    font-size:1.044938rem !important;
    font-weight:700 !important;
    cursor:pointer !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .forminator-card-wrapper .forminator-button-submit:hover{background:var(--garnet-dark, #6e0014) !important;}

  /* Forminator draws its dropdowns through Select2, so the box you can see is
     the Select2 control and the real <select> is hidden. Match it to the text
     inputs. */
  .forminator-card-wrapper .select2-container .select2-selection{
    height:45.38px !important;
    background:#fff !important;
    border:none !important;
    border-radius:3.583px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 12px !important;
  }
  .forminator-card-wrapper .select2-container .select2-selection__rendered{
    padding:0 !important;
    font-family:inherit !important;
    font-size:0.9375rem !important;
    line-height:normal !important;
    color:var(--ink, #2d2d2c) !important;
  }
  /* The container carries side padding of its own, which made the white box
     narrower than its column while Select2 still sized the open panel to the
     full column - so the panel hung over both edges. The text inset belongs
     on the box, not the container. */
  .forminator-card-wrapper .select2-container{
    padding:0 !important;
    width:100% !important;
  }
  .forminator-card-wrapper .select2-container > .selection{
    display:block !important;
    width:100% !important;
  }

  /* Nothing here takes a focus ring of its own; the box keeps its own colour
     open or closed, and the highlighted row is flat garnet. */
  .forminator-card-wrapper .select2-container .select2-selection,
  .forminator-card-wrapper .select2-container--open .select2-selection,
  .forminator-card-wrapper .select2-selection:focus{
    outline:none !important;
    box-shadow:none !important;
  }
  .forminator-select-dropdown,
  .forminator-select-dropdown .select2-results__option{
    outline:none !important;
    border:none !important;
    box-shadow:none !important;
  }
  .forminator-select-dropdown{
    box-shadow:0 8px 24px rgba(0,0,0,.28) !important;
  }

  /* The arrow is a flex item here, and on a relatively positioned element a
     `right` offset pushes it the wrong way - it belongs at the end of the row,
     inside the box's own padding. */
  .forminator-card-wrapper .select2-container .select2-selection__arrow{
    height:45.38px !important;
    position:static !important;
    right:auto !important;
    margin-left:auto !important;
  }

  /* A checkbox field has no label of its own to carry the required mark, so
     Forminator shows nothing beside it however the field is set. The group
     does say so though - a required one is .forminator-field.required - and
     that is what this reads, so any form gets the mark without its option
     text having to spell one out.

     A form whose option text does carry one would then show two, so that
     copy is hidden here and the mark comes from one place. */
  .forminator-card-wrapper :is(.forminator-checkbox-label, .forminator-checkbox__label) .forminator-required{
    display:none !important;
  }
  /* Three field types draw a consent checkbox and each says "required" in a
     different place. The plain checkbox field says so on the group it wraps
     the options in; the consent and GDPR fields leave the group unmarked and
     say so on the input instead - and the consent field names its text span
     differently again. All of it is read here, so the mark lands whichever
     one a form was built with.

     Where the text sits in a paragraph of its own - which is how the consent
     field writes it - the mark goes inside that paragraph. On the wrapper it
     would follow a block and drop to a line by itself. */
  .forminator-card-wrapper
    :is(.forminator-field.required,
        .forminator-field:has(input[type="checkbox"][data-required="true"]))
    :is(.forminator-checkbox-label, .forminator-checkbox__label):not(:has(p))::after,
  .forminator-card-wrapper
    :is(.forminator-field.required,
        .forminator-field:has(input[type="checkbox"][data-required="true"]))
    :is(.forminator-checkbox-label, .forminator-checkbox__label) > p:last-of-type::after{
    content:' *';
    color:#ff6b6b;
  }

  /* The required mark. Forminator leaves it to inherit, which on this dark
     card made it white and indistinguishable from the label itself. The
     design's own red is too dark to read against the card, so this is a
     lighter red that still clears AA on it (4.9:1).

     Inside a checkbox label Forminator turns spans into blocks, which
     dropped the asterisk onto a line of its own — it belongs at the end of
     the sentence it marks. */
  .forminator-card-wrapper .forminator-required{
    display:inline !important;
    color:#ff6b6b !important;
  }

  /* The consent boxes sit on the dark card, so their text is white, and the
     two of them need room between each other and the button. */
  .forminator-card-wrapper label.forminator-checkbox,
  .forminator-card-wrapper label.forminator-radio{
    align-items:flex-start !important;
    gap:10px !important;
    font-family:inherit !important;
    font-size:0.895625rem !important;
    line-height:1.45 !important;
    color:#fff !important;
  }
  .forminator-card-wrapper .forminator-field-checkbox{margin-top:12px !important;}

  /* Validation, and the note that replaces the form once it is sent. */
  /* Forminator gives this its own pale pink block, so pale text on top of it
     was all but invisible. Pin both: dark garnet on that pink reads clearly
     and still belongs to the palette. */
  .forminator-card-wrapper .forminator-error-message{
    font-family:inherit !important;
    font-size:0.8125rem !important;
    line-height:1.45 !important;
    color:#5e0012 !important;
    background:#f9e4e8 !important;
  }
  .forminator-card-wrapper .forminator-response-message{
    font-family:inherit !important;
    font-size:0.9375rem !important;
    line-height:1.5 !important;
    color:#fff !important;
  }
  /* The error state comes on its own pale pink block, where white text is
     invisible — the same pairing the field messages needed. Success keeps
     the white, which sits on the card. */
  .forminator-card-wrapper .forminator-response-message.forminator-error{
    color:#5e0012 !important;
    background:#f9e4e8 !important;
  }

  /* Select2 hangs its open panel off <body>, outside the card, so these
     cannot be scoped to the card. landing.css only loads on this page, so
     that is as far as they reach. */
  .forminator-select-dropdown{
    background:#fff !important;
    border:none !important;
    border-radius:3.583px !important;
    box-shadow:0 8px 24px rgba(0,0,0,.28) !important;
    overflow:hidden !important;
  }
  .forminator-select-dropdown .select2-results__options{
    background:#fff !important;
  }
  /* Forminator insets the panel by 9px, which left a white band above the
     highlighted row. The rows run to the panel's edges instead, and its
     rounded corners clip them. */
  .forminator-select-dropdown{padding:0 !important;}
  .select2-container--open .select2-results__options{
    max-height:260px !important;
    padding:0 !important;
  }
  .select2-container--open .select2-results__option{
    font-family:'Open Sans', Arial, Helvetica, sans-serif !important;
    font-size:0.9375rem !important;
    line-height:1.4 !important;
    padding:10px 12px !important;
    background:#fff !important;
    color:var(--ink, #2d2d2c) !important;
  }
  .select2-container--open .select2-results__option--highlighted,
  .select2-container--open .select2-results__option--selected,
  .select2-container--open .select2-results__option[aria-selected="true"]{
    background:var(--garnet, #8f001a) !important;
    color:#fff !important;
  }