/*MEMBERSHIP STATEMENT FORM (FORMIDABLE FORM 4)*/
/*Scoped to the form's container ID so it outranks Formidable's global form style.*/

    #frm_form_4_container {
        --ms-ink: #1F2A26;
        --ms-green: #455A53;
        --ms-muted: #6F7A76;
        --ms-line: rgba(46, 61, 56, 0.25);
        --ms-rule: rgba(69, 90, 83, 0.14);
        --ms-error: #A6432F;
        --ms-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
        max-width: 820px;
        margin: 0 auto;
        text-align: left;
    }

    /*THE LETTER CARD*/

        #frm_form_4_container .frm-show-form {
            padding: 56px 64px 60px;
            background: #FFF;
            border: 1px solid #E4DDD2;
            box-shadow: 0 40px 70px -50px rgba(31, 42, 38, 0.45);
            font-family: var(--copy-font-family);
            color: var(--ms-ink);
        }

        #frm_form_4_container .frm-show-form::before {
            content: "Letter of Introduction";
            display: block;
            margin-bottom: 40px;
            padding-bottom: 24px;
            border-bottom: 1px solid #E4DDD2;
            font-family: var(--heading-font-family);
            font-size: 28px;
            line-height: 1.25;
            color: var(--ms-ink);
        }

        #frm_form_4_container fieldset {
            margin: 0;
            padding: 0;
            border: 0;
            min-width: 0;
        }

    /*GRID*/

        #frm_form_4_container .frm_fields_container {
            column-gap: 32px;
            row-gap: 34px;
        }

        /*SAME GAP AS THE MAIN GRID SO FIRST/LAST NAME LINE UP WITH EMAIL/PHONE BELOW*/

        #frm_form_4_container .frm_combo_inputs_container {
            column-gap: 32px;
            row-gap: 24px;
        }

        #frm_form_4_container .frm_form_field {
            margin: 0;
            padding: 0;
        }

        /*PHONE FIELDS CAN BE WRAPPED FOR A COUNTRY PICKER; KEEP THE WRAPPER FULL WIDTH AND ROOM FOR THE FLAG*/

        #frm_form_4_container .iti {
            display: block;
            width: 100%;
        }

        #frm_form_4_container .iti--allow-dropdown input[type="tel"],
        #frm_form_4_container .iti--separate-dial-code input[type="tel"] {
            padding-left: 52px;
        }

    /*LABELS*/

        #frm_form_4_container .frm_primary_label {
            margin: 0 0 4px;
            padding: 0;
            font-family: var(--copy-font-family);
            font-size: 12px;
            font-weight: 400;
            line-height: 1.5;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--ms-green);
        }

        /*EVERY FIELD IS REQUIRED, SO THE ASTERISKS ARE JUST NOISE*/

        #frm_form_4_container .frm_required {
            display: none;
        }

        #frm_form_4_container .frm_description {
            margin: 8px 0 0;
            padding: 0;
            font-size: 12px;
            line-height: 1.5;
            color: var(--ms-muted);
        }

    /*FIELDS*/

        #frm_form_4_container input[type="text"],
        #frm_form_4_container input[type="email"],
        #frm_form_4_container input[type="tel"],
        #frm_form_4_container input[type="number"],
        #frm_form_4_container input[type="url"],
        #frm_form_4_container select,
        #frm_form_4_container textarea {
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 10px 0;
            background: transparent;
            border: 0;
            border-bottom: 1px solid var(--ms-line);
            border-radius: 0;
            box-shadow: none;
            font-family: var(--copy-font-family);
            font-size: 17px;
            line-height: 1.5;
            color: var(--ms-ink);
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        #frm_form_4_container input[type="text"]:hover,
        #frm_form_4_container input[type="email"]:hover,
        #frm_form_4_container input[type="tel"]:hover,
        #frm_form_4_container input[type="number"]:hover,
        #frm_form_4_container input[type="url"]:hover,
        #frm_form_4_container select:hover,
        #frm_form_4_container textarea:hover {
            border-bottom-color: rgba(46, 61, 56, 0.5);
        }

        #frm_form_4_container input[type="text"]:focus,
        #frm_form_4_container input[type="email"]:focus,
        #frm_form_4_container input[type="tel"]:focus,
        #frm_form_4_container input[type="number"]:focus,
        #frm_form_4_container input[type="url"]:focus,
        #frm_form_4_container select:focus,
        #frm_form_4_container textarea:focus {
            border-bottom-color: var(--ms-green);
            box-shadow: 0 1px 0 var(--ms-green);
        }

        #frm_form_4_container input:-webkit-autofill,
        #frm_form_4_container input:-webkit-autofill:hover,
        #frm_form_4_container input:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--ms-ink);
            transition: background-color 600000s 0s, color 600000s 0s, border-color 0.2s, box-shadow 0.2s;
        }

        /*THE LETTER ITSELF: RULED LINES THAT SCROLL WITH THE TEXT*/

        #frm_form_4_container textarea {
            min-height: 324px;
            margin-top: 6px;
            padding: 0 2px;
            line-height: 36px;
            background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--ms-rule) 35px, var(--ms-rule) 36px);
            background-attachment: local;
            resize: vertical;
        }

    /*ERRORS*/

        /*INLINE MESSAGE UNDER A FIELD: SMALL ALERT ICON + TEXT; THE LABEL KEEPS ITS NORMAL COLOUR*/

        #frm_form_4_container .frm_error {
            display: flex;
            align-items: flex-start;
            gap: 7px;
            margin-top: 10px;
            padding: 0;
            font-size: 13px;
            line-height: 1.5;
            color: var(--ms-error);
        }

        #frm_form_4_container .frm_error::before,
        #frm_form_4_container .frm_error_style::before {
            content: "";
            flex: 0 0 auto;
            width: 14px;
            height: 14px;
            margin-top: 3px;
            background: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 4.25v4.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='0.9' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 4.25v4.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='0.9' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
        }

        #frm_form_4_container .frm_blank_field input,
        #frm_form_4_container .frm_blank_field textarea,
        #frm_form_4_container .frm_blank_field select {
            border-bottom-color: var(--ms-error);
        }

        /*SUMMARY AT THE TOP: ONE CALM SENTENCE. THE LIST IS HIDDEN BECAUSE EACH FIELD ALREADY SHOWS ITS OWN MESSAGE.*/

        #frm_form_4_container .frm_error_style {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin: 0 0 36px;
            padding: 16px 20px;
            background: #FBF5F2;
            border: 1px solid #EED8D0;
            border-radius: 0;
            box-shadow: none;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.55;
            color: var(--ms-ink);
        }

        #frm_form_4_container .frm_error_style::before {
            width: 16px;
            height: 16px;
            margin-top: 2px;
            background: var(--ms-error);
        }

        #frm_form_4_container .frm_error_style * {
            margin: 0;
            padding: 0;
            font-weight: 400;
            color: inherit;
        }

        #frm_form_4_container .frm_error_style ul,
        #frm_form_4_container .frm_error_style ol {
            display: none;
        }

    /*SUBMIT*/

        #frm_form_4_container .frm_submit {
            margin-top: 10px;
        }

        #frm_form_4_container .frm_button_submit {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            height: auto;
            min-height: 52px;
            margin: 0;
            padding: 0 34px;
            background: var(--ms-green);
            border: 1px solid var(--ms-green);
            border-radius: 999px;
            box-shadow: none;
            font-family: var(--copy-font-family);
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0.04em;
            color: #FFF;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s;
        }

        #frm_form_4_container .frm_button_submit::after {
            content: "";
            width: 14px;
            height: 10px;
            background: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
            transition: transform 0.2s var(--ms-ease);
        }

        #frm_form_4_container .frm_button_submit:hover,
        #frm_form_4_container .frm_button_submit:focus {
            background: transparent;
            border-color: var(--ms-green);
            color: var(--ms-green);
        }

        #frm_form_4_container .frm_button_submit:hover::after {
            transform: translateX(3px);
        }

        #frm_form_4_container .frm_button_submit:focus-visible {
            outline: 2px solid var(--ms-green);
            outline-offset: 3px;
        }

    /*SUCCESS MESSAGE*/

        #frm_form_4_container .frm_message {
            margin: 0;
            padding: 56px 64px;
            background: #FFF;
            border: 1px solid #E4DDD2;
            border-radius: 0;
            font-family: var(--heading-font-family);
            font-size: 22px;
            line-height: 1.5;
            text-align: center;
            color: var(--ms-ink);
        }

        #frm_form_4_container .frm_message p {
            margin: 0;
        }

    /*SMALL SCREENS*/

        @media (max-width: 700px) {

            #frm_form_4_container .frm-show-form,
            #frm_form_4_container .frm_message {
                padding: 36px 22px 40px;
            }

            #frm_form_4_container .frm-show-form::before {
                margin-bottom: 30px;
                font-size: 24px;
            }

            #frm_form_4_container .frm_fields_container,
            #frm_form_4_container .frm_combo_inputs_container {
                display: flex;
                flex-direction: column;
            }

        }

    @media (prefers-reduced-motion: reduce) {

        #frm_form_4_container * {
            transition: none !important;
        }

        #frm_form_4_container input:-webkit-autofill {
            transition: background-color 600000s 0s, color 600000s 0s !important;
        }

    }