:root {
    --bhl-ivory: #f3eee5;
    --bhl-paper: #fbf8f2;
    --bhl-line: #d9d0c2;
    --bhl-ink: #202326;
    --bhl-slate: #53616a;
    --bhl-muted: #736f69;
    --bhl-burgundy: #8f1721;
    --bhl-burgundy-dark: #6d0f17;
    --bhl-blue: #263943;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--bhl-ivory);
}

body.bhl-login-page {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    color: var(--bhl-ink);
    background: var(--bhl-ivory);
    font-family: "DM Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
input {
    font: inherit;
}

a {
    color: inherit;
}

.login-layout {
    display: grid;
    grid-template-columns: minmax(31rem, 44%) minmax(0, 56%);
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

.login-panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(1.6rem, 4vw, 3.75rem) clamp(2rem, 6vw, 6.5rem) 1.5rem;
    background:
        linear-gradient(rgba(111, 84, 62, .05) 1px, transparent 1px) 0 0 / 100% 6rem,
        linear-gradient(90deg, rgba(111, 84, 62, .035) 1px, transparent 1px) 0 0 / 6rem 100%,
        var(--bhl-ivory);
}

.login-panel::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    content: "";
    background: rgba(255, 255, 255, .62);
}

.brand-row,
.legal-row {
    width: min(100%, 31.5rem);
    margin-inline: auto;
}

.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    width: 8.9rem;
    height: 4.5rem;
    overflow: hidden;
}

.brand-mark img {
    display: block;
    width: 100%;
    height: auto;
}

.return-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--bhl-slate);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-decoration: none;
    text-transform: uppercase;
}

.return-link svg {
    width: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    transition: transform .25s ease;
}

.return-link:hover svg,
.return-link:focus-visible svg {
    transform: translateX(-.2rem);
}

.login-content {
    width: min(100%, 31.5rem);
    margin: auto;
    padding-block: clamp(2.25rem, 6vh, 4.5rem);
}

.login-intro {
    margin-bottom: clamp(1.8rem, 4vh, 2.8rem);
}

.eyebrow,
.caption-kicker {
    margin: 0 0 .9rem;
    color: var(--bhl-burgundy);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .21em;
    line-height: 1.4;
    text-transform: uppercase;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.eyebrow::before {
    width: 2.25rem;
    height: 1px;
    content: "";
    background: var(--bhl-burgundy);
}

.login-intro h1 {
    max-width: 9ch;
    margin: 0;
    color: var(--bhl-ink);
    font-family: "Libre Caslon Display", Georgia, serif;
    font-size: clamp(3.3rem, 5.1vw, 5.65rem);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .84;
}

.login-intro h1 span {
    color: var(--bhl-burgundy);
}

.intro-copy {
    max-width: 31rem;
    margin: 1.35rem 0 0;
    color: var(--bhl-muted);
    font-size: .92rem;
    line-height: 1.75;
}

.auth-form {
    position: relative;
    width: 100%;
    counter-reset: access-field;
}

.form-group {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1rem;
    margin: 0;
    padding: 1rem 0 1.05rem;
    border-top: 1px solid var(--bhl-line);
    counter-increment: access-field;
}

.form-group::before {
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: center;
    color: var(--bhl-burgundy);
    content: "0" counter(access-field);
    font-family: "Libre Caslon Display", Georgia, serif;
    font-size: 1.2rem;
    line-height: 1;
}

.form-group > label {
    grid-row: 1;
    grid-column: 2;
    display: block;
    margin-bottom: .2rem;
    color: var(--bhl-ink);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.field-shell {
    position: relative;
    grid-row: 2;
    grid-column: 2;
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    background: transparent;
    border: 0;
    transition: color .2s ease;
}

.field-shell:focus-within {
    color: var(--bhl-burgundy);
}

.field-shell::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    background: #bdb3a6;
    transform-origin: left;
    transition: background .2s ease, transform .2s ease;
}

.field-shell:focus-within::after {
    height: 2px;
    background: var(--bhl-burgundy);
}

.field-icon {
    display: grid;
    flex: 0 0 2rem;
    place-items: center;
    color: var(--bhl-burgundy);
}

.field-icon svg {
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
}

.field-shell input {
    width: 100%;
    min-width: 0;
    padding: .55rem .6rem .62rem 0;
    color: var(--bhl-ink);
    background: transparent;
    border: 0;
    outline: 0;
    font-size: .95rem;
}

.field-shell input::placeholder {
    color: #908b84;
    opacity: 1;
}

.password-shell input {
    padding-right: .25rem;
}

.password-toggle {
    display: grid;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    place-items: center;
    color: var(--bhl-slate);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.password-toggle svg {
    grid-area: 1 / 1;
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
}

.password-toggle .eye-closed {
    display: none;
}

.password-toggle[aria-pressed="true"] .eye-open {
    display: none;
}

.password-toggle[aria-pressed="true"] .eye-closed {
    display: block;
}

.password-toggle:focus-visible,
.return-link:focus-visible,
.forgot-link:focus-visible,
.access-footer a:focus-visible,
.brand-mark:focus-visible {
    outline: 2px solid var(--bhl-burgundy);
    outline-offset: 3px;
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 1.35rem 3.75rem;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--bhl-muted);
    font-size: .82rem;
    cursor: pointer;
}

.checkbox-label input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.checkbox-control {
    display: grid;
    width: 1.05rem;
    height: 1.05rem;
    place-items: center;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #bfb5a8;
}

.checkbox-control svg {
    width: .75rem;
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    opacity: 0;
}

.checkbox-label input:checked + .checkbox-control {
    background: var(--bhl-burgundy);
    border-color: var(--bhl-burgundy);
}

.checkbox-label input:checked + .checkbox-control svg {
    opacity: 1;
}

.checkbox-label input:focus-visible + .checkbox-control {
    outline: 2px solid var(--bhl-burgundy);
    outline-offset: 2px;
}

.forgot-link,
.access-footer a {
    color: var(--bhl-burgundy);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}

.forgot-link {
    border-bottom: 1px solid rgba(143, 23, 33, .35);
}

.forgot-link:hover,
.access-footer a:hover {
    color: var(--bhl-burgundy-dark);
}

.login-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.75rem;
    padding: 0 0 0 1.35rem;
    color: #fff;
    background: var(--bhl-blue);
    border: 1px solid var(--bhl-blue);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .115em;
    text-transform: uppercase;
    transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.login-button svg {
    width: 3.75rem;
    height: 3.75rem;
    padding: 1.22rem;
    background: var(--bhl-burgundy);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    transition: transform .2s ease;
}

.login-button:hover {
    background: #1d3039;
    border-color: #1d3039;
    box-shadow: 0 10px 24px rgba(31, 49, 58, .18);
    transform: translateY(-1px);
}

.login-button:hover svg {
    background: var(--bhl-burgundy-dark);
}

.login-button:focus-visible {
    outline: 3px solid rgba(143, 23, 33, .25);
    outline-offset: 3px;
}

.access-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.45rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--bhl-line);
}

.access-footer p {
    margin: 0;
    color: var(--bhl-muted);
    font-size: .82rem;
}

.access-footer a {
    text-transform: uppercase;
    letter-spacing: .08em;
}

.security-notice {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: 1.25rem;
    color: var(--bhl-slate);
}

.security-notice svg {
    flex: 0 0 1.1rem;
    width: 1.1rem;
    fill: none;
    stroke: var(--bhl-burgundy);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
}

.security-notice p {
    margin: 0;
    font-size: .72rem;
    line-height: 1.55;
}

.legal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #817b73;
    font-size: .61rem;
    font-weight: 500;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.login-visual {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: var(--bhl-blue);
}

.login-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 88% center;
    transform: scale(1.01);
    animation: image-settle 1.2s cubic-bezier(.2, .7, .2, 1) both;
}

.visual-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(27, 45, 54, .08) 0%, rgba(27, 45, 54, .03) 42%, rgba(19, 34, 42, .66) 100%),
        linear-gradient(90deg, rgba(31, 49, 58, .15), transparent 38%);
}

.login-visual::before,
.login-visual::after {
    position: absolute;
    z-index: 2;
    content: "";
    pointer-events: none;
}

.login-visual::before {
    inset: clamp(1.5rem, 3.2vw, 3.2rem);
    border: 1px solid rgba(255, 255, 255, .32);
}

.login-visual::after {
    top: 0;
    left: clamp(2.2rem, 4vw, 4.5rem);
    width: 1px;
    height: clamp(5rem, 15vh, 9rem);
    background: var(--bhl-burgundy);
}

.visual-reference {
    position: absolute;
    z-index: 3;
    top: clamp(2.7rem, 5vw, 5rem);
    right: clamp(2.7rem, 5vw, 5rem);
    display: flex;
    align-items: center;
    gap: .75rem;
    color: rgba(255, 255, 255, .9);
}

.visual-reference span {
    font-size: .59rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.visual-reference strong {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .55);
    font-family: "Libre Caslon Display", Georgia, serif;
    font-size: .82rem;
    font-weight: 400;
}

.visual-caption {
    position: absolute;
    z-index: 3;
    right: clamp(3rem, 6vw, 7rem);
    bottom: clamp(3rem, 7vh, 6.5rem);
    left: clamp(3rem, 6vw, 7rem);
    max-width: 33rem;
    color: #fff;
}

.caption-kicker {
    color: #f0d8d9;
}

.caption-title {
    margin: 0;
    font-family: "Libre Caslon Display", Georgia, serif;
    font-size: clamp(2.35rem, 4.1vw, 4.8rem);
    letter-spacing: -.035em;
    line-height: .98;
}

.caption-rule {
    width: 100%;
    height: 1px;
    margin-top: 1.7rem;
    background: rgba(255, 255, 255, .42);
}

.caption-rule span {
    display: block;
    width: 27%;
    height: 1px;
    background: #fff;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 0 0 1.25rem;
    padding: .85rem .95rem;
    border: 1px solid;
    font-size: .8rem;
    line-height: 1.5;
}

.alert p,
.alert ul {
    margin: 0;
}

.alert ul {
    padding-left: 1rem;
}

.alert-warning {
    color: #654c13;
    background: #f7f0db;
    border-color: #dacb9c;
}

.alert-danger {
    color: #72151d;
    background: #f6e7e6;
    border-color: #debeba;
}

.alert-icon {
    display: grid;
    flex: 0 0 1.15rem;
    place-items: center;
}

.alert-icon svg {
    width: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

@keyframes image-settle {
    from {
        opacity: .4;
        transform: scale(1.045);
    }
    to {
        opacity: 1;
        transform: scale(1.01);
    }
}

@media (max-width: 980px) {
    .login-layout {
        grid-template-columns: minmax(27rem, 53%) minmax(0, 47%);
    }

    .login-panel {
        padding-inline: clamp(1.75rem, 5vw, 3.5rem);
    }

    .visual-caption {
        right: 2.5rem;
        left: 2.5rem;
    }
}

@media (max-width: 760px) {
    .login-layout {
        display: flex;
        flex-direction: column;
        min-height: 100svh;
        overflow: visible;
    }

    .login-visual {
        position: relative;
        top: auto;
        align-self: auto;
        order: -1;
        min-height: 10.5rem;
        height: 10.5rem;
    }

    .login-visual > img {
        object-position: 66% 42%;
    }

    .visual-overlay {
        background: linear-gradient(180deg, rgba(29, 47, 56, .06), rgba(29, 47, 56, .42));
    }

    .login-visual::before {
        inset: .8rem;
    }

    .login-visual::after,
    .visual-caption {
        display: none;
    }

    .visual-reference {
        top: auto;
        right: 1.3rem;
        bottom: 1.15rem;
    }

    .visual-reference span {
        font-size: .52rem;
    }

    .visual-reference strong {
        width: 1.65rem;
        height: 1.65rem;
        font-size: .7rem;
    }

    .login-panel {
        min-height: auto;
        flex: 1;
        padding: 1rem clamp(1.2rem, 6vw, 2.2rem) 1.25rem;
        border-top: 2px solid var(--bhl-burgundy);
    }

    .brand-row,
    .login-content,
    .legal-row {
        width: min(100%, 34rem);
    }

    .brand-mark {
        width: 7.5rem;
        height: 3.5rem;
    }

    .login-content {
        margin: 0 auto;
        padding: 1.2rem 0 1.7rem;
    }

    .login-intro {
        margin-bottom: 1.45rem;
    }

    .login-intro h1 {
        font-size: clamp(2.8rem, 13vw, 4.2rem);
        line-height: .88;
    }

    .intro-copy {
        margin-top: .9rem;
        font-size: .85rem;
        line-height: 1.6;
    }

    .field-shell {
        min-height: 3.45rem;
    }

    .legal-row {
        padding-top: .25rem;
    }
}

@media (max-width: 430px) {
    .login-visual {
        min-height: 8.75rem;
        height: 8.75rem;
    }

    .login-panel {
        padding-inline: 1.15rem;
    }

    .brand-row {
        gap: .75rem;
    }

    .brand-mark {
        width: 6.75rem;
    }

    .return-link {
        font-size: .61rem;
        letter-spacing: .07em;
    }

    .login-content {
        padding-top: .85rem;
    }

    .eyebrow {
        margin-bottom: .65rem;
        font-size: .59rem;
    }

    .login-intro h1 {
        font-size: 3rem;
    }

    .form-options,
    .access-footer {
        align-items: flex-start;
    }

    .form-options {
        margin-left: 0;
    }

    .access-footer {
        flex-direction: column;
        gap: .45rem;
    }

    .legal-row {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}