*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:#102641}body{background:#0b2038}.shell{min-height:100vh;display:grid;grid-template-columns:56% 44%;max-width:1800px;margin:auto;box-shadow:0 18px 70px #0003}.visual{position:relative;min-height:780px;overflow:hidden;color:#fff;background:#102b44}.photo{position:absolute;inset:0;background:url('traffic-control.jpg') center center/cover no-repeat}.visual-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,25,46,.25) 0%,rgba(6,25,46,.08) 38%,rgba(3,21,39,.85) 78%,#061d35 100%)}.visual:after{content:"";position:absolute;right:-2px;top:0;bottom:0;width:7px;background:#f6aa2b;transform:skewX(-11deg);transform-origin:bottom}.brand{position:absolute;top:35px;left:7%;width:280px;z-index:1}.brand img{width:245px;max-width:100%;display:block;filter:drop-shadow(0 2px 5px #0007)}.brand-rule{height:1px;background:#fff9;margin-top:8px}.brand span{display:block;font-size:11px;letter-spacing:3px;margin-top:12px;font-weight:600}.story{position:absolute;bottom:52px;left:7%;right:9%;z-index:1}.eyebrow{color:#ffb12c;font-weight:800;letter-spacing:5px;font-size:15px}.story h1{font-size:clamp(42px,4vw,72px);line-height:1.04;letter-spacing:-2px;margin:10px 0 9px;font-weight:800}.tracking{font-size:15px;letter-spacing:5px;color:#e7edf4}.gold-line{width:82px;height:3px;background:#ffb12c;margin:22px 0}.story p{font-size:17px;line-height:1.6;max-width:580px;color:#e4eaf1}.features{display:flex;flex-wrap:wrap;gap:16px 25px;margin-top:34px;font-size:11px;letter-spacing:.5px;color:#f1f4f8}.features span:first-letter{color:#ffb12c}.access{background:#f9fafb;display:flex;flex-direction:column;min-width:0;padding:35px clamp(24px,4.2vw,72px) 22px}.access-top{display:flex;justify-content:flex-end}.secure{font-size:11px;letter-spacing:2px;color:#516780;background:#eef1f4;border-radius:20px;padding:9px 16px;font-weight:700}.form-wrap{width:100%;max-width:520px;margin:auto}.kicker{font-size:17px;color:#425773}.form-wrap h2{font-size:clamp(27px,2.5vw,43px);line-height:1.1;letter-spacing:-1.2px;margin:5px 0 9px;font-weight:800}.company{font-size:13px;letter-spacing:5px;color:#536883;font-weight:700}.intro{color:#4d627c;font-size:15px;margin:12px 0 33px}.field-heading{display:block;font-size:12px;letter-spacing:1.7px;color:#526780;font-weight:800;margin:22px 0 11px}.roles{display:grid;grid-template-columns:1fr 1fr;gap:12px}.role{position:relative;border:1px solid #d7dfe8;border-radius:10px;background:#fff;min-height:154px;padding:21px 14px 15px;text-align:center;cursor:pointer;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:7px;transition:.15s}.role.selected{border:2px solid #f5a623;background:#fffaf0;box-shadow:0 2px 8px #eaa72e18}.role input{position:absolute;top:14px;left:14px;accent-color:#eea126}.role-icon{font-size:31px;color:#112b4a;line-height:1.2}.role strong{font-size:16px}.role small{font-size:12px;color:#60728b;line-height:1.35}.input-box{height:50px;border:1px solid #d5dee8;background:#fff;border-radius:7px;display:flex;align-items:center;gap:12px;padding:0 14px}.input-box:focus-within{border-color:#edab3b;box-shadow:0 0 0 3px #f5b44222}.input-box>span{color:#69809b;font-size:19px}.input-box input{border:0;outline:0;flex:1;min-width:0;font:inherit;font-size:14px;background:transparent;color:#102641}.input-box input::placeholder{color:#9ba9ba}.eye{border:0;background:none;color:#4b6584;cursor:pointer;font-weight:600;font-size:12px}.extras{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:20px 0;color:#4e6480;font-size:12px}.extras label{display:flex;align-items:center;gap:7px}.extras input{accent-color:#102d4c}.recovery{color:#75849a}.submit{background:#0c2c4b;color:#fff;border:0;width:100%;height:53px;border-radius:7px;font-weight:700;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:15px}.submit:hover{background:#16466d}.status{font-size:12px;color:#7b6170;text-align:center;line-height:1.45;margin:12px 0 0}footer{border-top:1px solid #e1e6ec;text-align:center;color:#61748e;font-size:12px;line-height:1.9;padding-top:16px;margin-top:30px}@media(max-width:850px){.shell{grid-template-columns:1fr}.visual{min-height:380px}.brand{top:25px;left:6%;width:175px}.brand img{width:165px}.brand span{font-size:8px;letter-spacing:1px}.story{bottom:24px;left:6%}.story h1{font-size:39px}.story p,.features{display:none}.tracking{font-size:11px;letter-spacing:3px}.gold-line{margin:12px 0}.access{min-height:640px;padding:24px}.form-wrap{padding-top:24px}.visual:after{display:none}}@media(max-width:420px){.roles{gap:8px}.role{min-height:136px;padding:14px 8px}.role strong{font-size:14px}.role small{font-size:11px}.company{letter-spacing:3px}.form-wrap h2{font-size:29px}}
/* v1.1 - Move company logo from photograph to the right of the welcome heading */
.brand{display:none!important}
.heading-with-logo{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%}
.heading-copy{flex:1;min-width:0}
.login-logo{display:block;flex:0 0 auto;width:clamp(98px,10vw,154px);height:auto;max-height:160px;object-fit:contain}
@media(max-width:1100px){.heading-with-logo{gap:10px}.login-logo{width:105px}.form-wrap h2{font-size:clamp(25px,2.5vw,38px)}}
@media(max-width:480px){.heading-with-logo{gap:8px}.login-logo{width:88px}.form-wrap h2{font-size:26px}.company{font-size:10px;letter-spacing:2px}}

.status[role="alert"]{color:#9f1d25;font-weight:600}