Bootstrap 4.2 - Modal - Input fields not editable, button not clickable, not closing

I have bootstrap 4.2.1 modal opening via link:

<a href="#" data-toggle="modal" data-target="#inviteByEmailPopup" data-backdrop="false" data-keyboard="false">Add by Email</a>

the modal div at the end, right at the closing body tag

<div class="modal fade" tabindex="-1" role="dialog" id="inviteByEmailPopup"  aria-hidden="true">
    <div class="modal-dialog" role="document" data-backdrop="false">
        <div class="card bg-transparent border-white mt-5">
            <div class="card-header brand-gradient border-white">
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="text-white text-uppercase">Invite By Email</h5>

            </div>
            <div class="card-body p-3 pb-5 bg-brand-grey">

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="text-white col-md-12" for="usern1">Name</label>
                            <div class="col-md-12">
                                <input id="inviteName" class="name-input form-control" type="text">
                            </div>
                        </div>
                    </div>
                      ~~~ Truncated for brevity only one input kept for example ~~~~
                </div>
            </div>
        </div>
    </div>
</div>

I have tried:

1. moving modal around to avoid any "fixed" content overlay.
2. Playing with z-index, setting modal to higher z-index than backdrop.
3. I followed this guide: (https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background) even though it's from 2016
4. I disabled backdrop with data-backdrop="false" and in my main CSS.

.modal-backdrop {
    /* bug fix - no overlay */
    display: none;
}

5. I installed z-index plugin for Chrome to debug this issue. Z-indexes are correct.
6. I've scouted entire stack overflow, and tried every accepted and unaccepted answer here. This isn't the first day I am working with Bootstrap and very versed in css/html. This is driving me insane.