:root { --brand: #ef5b3f; --ink: #17324d; --soft: #f4f7fb; --bs-heading-color: #24537c; }
body { color: var(--ink); font-family: "Exo", sans-serif; }
.hero h1 { color: #fff; }
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3 { color: #fff; }
.navbar-brand img { width: 112px; height: 50px; }
.hero { background: url("../images/hero-background.jpg") center / cover no-repeat; }
.text-brand { color: var(--brand) !important; }
.bg-brand { background-color: var(--brand) !important; }
.btn-brand { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: #d94c32; --bs-btn-hover-border-color: #d94c32; color: #fff; }
.bg-soft { background-color: var(--soft); }
.gate-form { --gate-error: #b42318; }
.gate-form .gate-control { margin-bottom: 1.5rem; }
.gate-form .gate-control-small { margin-bottom: 1.5rem; }
.gate-form .form-control { min-height: 46px; }
.gate-form .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgb(239 91 63 / 20%); }
.gate-form .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.gate-form .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgb(239 91 63 / 20%); }
.gate-form .form-check-label { font-size: .875rem; line-height: 1.45; }
.gate-form .haserrors .form-control { border-color: var(--gate-error); }
.gate-form .ctrlError,
.gate-form-errors li { color: var(--gate-error); display: block; font-size: .8rem; margin-top: .35rem; }
.gate-form-errors ul { list-style: none; margin: 0 0 1rem; padding: 0; }
#submitContainer { background: rgb(23 50 77 / 45%); display: none; inset: 0; position: fixed; z-index: 9998; }
#spinner { animation: gate-spinner 1s linear infinite; border: 3px solid rgb(255 255 255 / 45%); border-radius: 50%; border-top-color: #fff; height: 38px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 38px; }
.gate-form-submitting { overflow: hidden; }
@keyframes gate-spinner { to { transform: translate(-50%, -50%) rotate(360deg); } }
.step-icon { width: 150px; height: 150px; object-fit: contain; }
@media (min-width: 992px) { .hero-copy { position: sticky; top: 2rem; } }
@media (max-width: 575.98px) {
  .navbar .container { flex-wrap: nowrap; gap: .5rem; }
  .navbar .btn { font-size: .75rem; padding: .4rem .6rem; white-space: nowrap; }
  .navbar-brand { margin-right: 0; }
}