:root{--navy:#082c54;--gold:#d9962f;--white:#fff;--text:#10264b;--muted:#667085;--line:#d9e1ea;--danger:#b42318}
*{box-sizing:border-box}html,body{width: 100%;max-width: 100%;overflow-x: hidden;margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--text)}body{min-height:100vh;background:#fff}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.brand-panel{position:relative;overflow:hidden;min-height:100vh;color:#fff}.bg{position:absolute;inset:0;background: center/cover no-repeat}.overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,27,52,.82),rgba(3,24,46,.94))}
.brand-content{position:relative;z-index:2;min-height:100vh;padding:58px 72px 42px;display:flex;flex-direction:column}
.brand{display:flex;gap:18px;align-items:center}.brand svg{width:72px;fill:none;stroke:#e0a13b;stroke-width:2.4}.brand svg path:nth-child(2){stroke:#fff}
.brand>div{display:flex;flex-direction:column}.brand strong{font:800 46px/1 Montserrat;letter-spacing:.12em}.brand span{margin-top:7px;font:700 13px Montserrat;letter-spacing:.1em;color:#e6aa46}.brand small{margin-top:10px;font-size:13px;line-height:1.45}
.intro{margin-top:auto;padding-bottom:46px}.intro h1{font:700 54px/1.12 Montserrat;margin:0}.intro h1 em{font-style:normal;color:#e7aa4b}.gold-line{width:58px;height:3px;background:var(--gold);margin:28px 0 22px}.intro p{font-size:18px;line-height:1.55}
.features{display:grid;grid-template-columns:repeat(4,1fr);padding-top:24px}.features div{text-align:center;border-right:1px solid rgba(255,255,255,.25)}.features div:last-child{border:0}.features b{display:block;color:#e7aa4b;font-size:34px}.features span{font-size:12px;line-height:1.35}
.login-panel{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 70px 110px;background:linear-gradient(180deg,#fff,#fcfdff)}
.login-card{width:min(100%,510px)}.mobile-brand{display:none}.user-icon{width:100px;height:100px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;font-size:56px;color:var(--navy);line-height:1}
.heading{text-align:center;margin-bottom:42px}.heading h2{font:700 37px Montserrat;margin:0;color:var(--navy)}.heading p{margin:12px 0 0;color:#34425b;font-size:16px}
form>label{display:block;font-size:14px;font-weight:600;margin:0 0 9px}.input-wrap{position:relative;margin-bottom:4px}.input-wrap>span{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--navy);font-size:22px}
.input-wrap input{width:100%;height:58px;border:1px solid #cfd8e3;border-radius:8px;padding:0 52px 0 52px;font:15px Inter;outline:none}.input-wrap input:focus{border-color:#4c7eac;box-shadow:0 0 0 4px rgba(8,76,137,.07)}.input-wrap input.invalid{border-color:#c75b51}
.input-wrap button{position:absolute;right:13px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--navy);cursor:pointer;font-size:17px}.error{display:block;min-height:18px;color:var(--danger);font-size:11px;margin-bottom:10px}
.options{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 0 28px;font-size:13px}.remember{display:flex;align-items:center;gap:7px;margin:0}.options a{color:#0755a0;text-decoration:none}
.signin,.sso{width:100%;height:58px;border-radius:8px;font-weight:600;cursor:pointer}.signin{border:0;background:linear-gradient(90deg,#052952,#0a3e76);color:#fff;font-size:15px}.signin span,.sso span{margin-left:9px}.status{min-height:19px;text-align:center;font-size:12px;color:#16794d;margin-top:9px}
.divider{display:flex;align-items:center;gap:15px;margin:17px 0;color:#667085;font-size:12px}.divider:before,.divider:after{content:"";height:1px;flex:1;background:#dce3eb}.sso{display:block;width:290px;max-width:100%;margin:auto;background:#fff;color:var(--navy);border:1px solid #cfd8e3}
.security{position:absolute;bottom:0;left:0;right:0;min-height:95px;background:#fafbfc;border-top:1px solid #eef1f4;display:flex;align-items:center;justify-content:center;gap:13px;padding:20px 35px;color:#4b5a70;font-size:12px}
/* =========================
   TABLET
========================= */

@media (max-width: 1100px) {
    .brand-content {
        padding: 42px 38px 34px;
    }

    .brand strong {
        font-size: 34px;
    }

    .brand svg {
        width: 58px;
    }

    .intro h1 {
        font-size: 43px;
    }

    .login-panel {
        padding-left: 40px;
        padding-right: 40px;
    }

    .login-card {
        max-width: 480px;
    }
}


/* =========================
   MOBILE / TABLET STACK
========================= */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    .login-shell {
        display: block;
        min-height: 100vh;
    }

    /* Brand section */

    .brand-panel {
        width: 100%;
        height: 230px;
        min-height: 230px;
    }

    .brand-content {
        min-height: 230px;
        height: 230px;
        padding: 25px 24px;
    }

    .brand {
        display: none;
    }

    .features {
        display: none;
    }

    .intro {
        margin-top: auto;
        padding: 0;
    }

    .intro h1 {
        font-size: clamp(28px, 7vw, 36px);
        line-height: 1.1;
    }

    .gold-line {
        width: 48px;
        height: 2px;
        margin: 13px 0 10px;
    }

    .intro p {
        font-size: 14px;
        line-height: 1.45;
        margin: 0;
    }


    /* Login section */

    .login-panel {
        width: 100%;
        min-height: auto;
        padding: 30px 22px 125px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;

        border-radius: 24px 24px 0 0;
        margin-top: -20px;
        position: relative;
    }

    .mobile-brand {
        display: flex;
        flex-direction: column;
        align-self: flex-start;
        margin-bottom: 24px;
    }

    .mobile-brand strong {
        font: 800 19px Montserrat;
        letter-spacing: .12em;
    }

    .mobile-brand span {
        font: 700 7px Montserrat;
        letter-spacing: .1em;
        color: var(--gold);
        margin-top: 4px;
    }

    .login-card {
        width: 100%;
        max-width: 510px;
        margin: 0 auto;
    }

    .user-icon {
        width: 76px;
        height: 76px;
        font-size: 42px;
        margin-bottom: 18px;
    }

    .heading {
        margin-bottom: 28px;
    }

    .heading h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .heading p {
        font-size: 14px;
        line-height: 1.5;
    }

    .input-wrap input {
        height: 55px;
    }

    .signin,
    .sso {
        height: 55px;
    }


    /* Security footer */

    .security {
        position: absolute;
        bottom: 0;
        min-height: 95px;
        padding: 16px 20px;
        font-size: 10.5px;
        text-align: center;
    }

}


/* =========================
   SMALL PHONES
========================= */

@media (max-width: 480px) {

    .brand-panel {
        height: 205px;
        min-height: 205px;
    }

    .brand-content {
        height: 205px;
        min-height: 205px;
        padding: 21px 20px;
    }

    .intro h1 {
        font-size: 27px;
    }

    .intro p {
        font-size: 13px;
    }

    .login-panel {
        padding: 26px 18px 120px;
    }

    .mobile-brand {
        margin-bottom: 22px;
    }

    .heading h2 {
        font-size: 25px;
    }

    .heading p {
        font-size: 13px;
    }

    .options {
        gap: 10px;
        font-size: 12px;
    }

    .remember {
        white-space: nowrap;
    }

    .options a {
        white-space: nowrap;
    }

    .security {
        font-size: 10px;
        line-height: 1.4;
        padding: 15px 18px;
    }
}