:root{
  --navy:#001f52;
  --blue:#064acb;
  --ink:#071a3b;
  --muted:#54627a;
  --yellow:#ffd400;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff}
body {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
#form1 {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.webform-layout {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows:
        clamp(64px,8.5vh,82px)
        minmax(0,1fr)
        clamp(48px,6.5vh,62px);
    overflow: hidden;
}

.topbar{
  min-height:0;
  background:linear-gradient(100deg,#00245c,#00173f 68%,#001b49);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(24px,2.8vw,44px);
  color:#fff;
}
.brand-wrap{display:flex;align-items:center;gap:clamp(15px,1.7vw,28px);min-width:0}
.brand-logo{width:clamp(170px,14.2vw,225px);height:auto;display:block}
.brand-divider{width:1px;height:clamp(38px,4.8vh,52px);background:rgba(255,255,255,.36)}
.hub-name{font-size:clamp(18px,1.5vw,24px);font-weight:700;white-space:nowrap}
.trust-line{display:flex;align-items:center;gap:clamp(7px,.7vw,11px);font-size:clamp(12px,1vw,17px);white-space:nowrap}
.trust-line img{width:clamp(24px,1.8vw,32px);height:auto}

.page-shell{
  display:grid;
  grid-template-columns:minmax(0,54%) minmax(390px,46%);
  min-height:0;
  overflow:hidden;
}

.hero-panel{
  position:relative;
  min-height:0;
  background-image:linear-gradient(180deg,rgba(230,245,255,.12),rgba(0,30,66,.03)),url('/login/assets/rail-hero.jpg');
  /* Keep the hero image at its original aspect ratio so the train stays at the
     same vertical position as the reference design. */
  background-size:100% auto;
  background-position:center top;
  background-repeat:no-repeat;
  background-color:#b9d9ef;
  overflow:hidden;
  color:#fff;
}
.hero-copy{
  position:absolute;
  left:clamp(32px,4vw,60px);
  top:clamp(22px,3.5vh,38px);
  max-width:clamp(330px,32vw,480px);
  color:var(--ink);
  z-index:2;
}
.hero-copy h1{
  margin:0;
  font-size:clamp(32px,3vw,48px);
  line-height:1.08;
  letter-spacing:-1px;
}
.yellow-rule{
  display:block;
  width:clamp(38px,3vw,48px);
  height:5px;
  border-radius:4px;
  background:var(--yellow);
  margin:clamp(10px,1.5vh,16px) 0;
}
.hero-copy p{
  margin:0;
  font-size:clamp(14px,1.16vw,18px);
  line-height:1.45;
  max-width:470px;
}

.feature-strip{
  position:absolute;
  left:0;right:0;
  bottom:clamp(76px,10.2vh,92px);
  height:clamp(132px,18vh,158px);
  padding:clamp(10px,1.35vh,14px) clamp(22px,2.5vw,38px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  background:rgba(0,27,63,.84);
  backdrop-filter:blur(2px);
}
.feature{text-align:center;padding:0 clamp(7px,.8vw,12px);border-right:1px solid rgba(255,255,255,.4)}
.feature:last-child{border-right:0}
.feature img{width:clamp(38px,3.5vw,54px);height:clamp(38px,3.5vw,54px);object-fit:contain}
.feature h3{font-size:clamp(13px,1vw,16px);margin:clamp(4px,.55vh,7px) 0 4px;color:#fff}
.feature p{font-size:clamp(10px,.82vw,13px);line-height:1.35;margin:0;color:#fff}

.partner-strip{
  position:absolute;
  left:0;right:0;bottom:0;
  height:clamp(76px,10.2vh,92px);
  background:linear-gradient(90deg,rgba(0,27,63,.98),rgba(0,37,83,.97));
  display:grid;
  grid-template-columns:1.15fr 1.1fr;
  align-items:center;
  padding:0 clamp(22px,2.6vw,40px);
  border-top:1px solid rgba(255,255,255,.15);
}
.tagline{display:flex;flex-direction:column;gap:3px;font-size:clamp(10px,.8vw,13px)}
.tagline strong{color:var(--yellow);font-size:clamp(12px,.96vw,15px)}
.partners{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(7px,.8vw,12px);text-align:center}
.partners div{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:clamp(9px,.7vw,11px)}
.partners img{width:clamp(28px,2.5vw,40px);height:clamp(28px,2.5vw,40px);object-fit:contain}

.login-panel{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  padding:clamp(14px,2vh,24px) clamp(24px,3.4vw,54px);
  overflow:hidden;
}
.login-card{width:min(100%,470px);display:flex;flex-direction:column;align-items:stretch}
.rail-icon{width:clamp(68px,6vw,92px);align-self:center;margin-bottom:clamp(6px,.8vh,10px)}
.login-card h2{text-align:center;font-size:clamp(23px,1.85vw,30px);margin:0 0 6px;letter-spacing:-.45px}
.subtitle{text-align:center;font-size:clamp(14px,1.15vw,18px);color:var(--muted);margin:0 0 clamp(14px,2vh,20px)}
button{font-family:inherit;cursor:pointer}
.primary-btn,.secondary-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  border-radius:6px;
  padding:0 clamp(16px,1.5vw,22px);
  height:clamp(48px,6.2vh,58px);
  font-size:clamp(15px,1.25vw,19px);
  font-weight:700;
}
.primary-btn{background:linear-gradient(90deg,#073a92,#084abe);border:0;color:#fff;box-shadow:0 6px 16px rgba(13,55,131,.14)}
.secondary-btn{background:#fff;border:1.5px solid #1f5be0;color:#0641af}
.btn-left{display:flex;align-items:center;gap:clamp(10px,1vw,14px);min-width:0}
.btn-left img{width:clamp(28px,2.2vw,36px);height:clamp(28px,2.2vw,36px);object-fit:contain;flex:0 0 auto}
.arrow{font-size:clamp(24px,2vw,31px);font-weight:300;line-height:1}
.or-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:clamp(12px,1.7vh,18px) 0;color:#6f788b}
.or-row span{height:1px;background:#d7dce4}.or-row b{font-size:clamp(13px,1vw,16px)}
.test-title{display:flex;align-items:center;gap:9px;color:#0641af;font-weight:700;font-size:clamp(12px,1vw,16px);letter-spacing:.2px;margin-bottom:clamp(9px,1.2vh,13px)}
.test-title img{width:clamp(22px,1.7vw,28px)}
.info-box{display:grid;grid-template-columns:auto 1fr;gap:12px;background:linear-gradient(135deg,#eef5ff,#e5f0ff);border-radius:6px;padding:clamp(12px,1.7vh,17px);margin-top:clamp(13px,1.8vh,18px)}
.info-box img{width:clamp(24px,1.8vw,30px)}
.info-box strong{font-size:clamp(13px,1vw,16px)}
.info-box p{font-size:clamp(11px,.9vw,14px);line-height:1.42;margin:5px 0 0;color:#17223a}
.support{display:flex;align-items:center;gap:7px;margin-top:clamp(14px,2vh,22px);color:#6a7489;font-size:clamp(11px,.9vw,14px)}
.support img{width:clamp(20px,1.4vw,25px)}
a{color:#0055e8;text-decoration:none}

footer{
  min-height:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 clamp(24px,2.7vw,40px);
  border-top:1px solid #dfe3ea;
  color:#667186;
  font-size:clamp(10px,.82vw,13px);
  background:#fff;
  overflow:hidden;
}
footer>span:nth-child(2){justify-self:center}.footer-trust{white-space:nowrap}
footer>span:last-child{justify-self:end;display:flex;align-items:center;gap:16px}footer i{width:1px;height:18px;background:#aeb6c2}
footer a{color:#667186}

@media (max-width:1100px){
  body{overflow:auto;height:auto;min-height:100vh;display:block}
  .webform-layout {
    height: auto;
    min-height: 100vh;
    display: block;
    overflow: visible;
}
  .topbar{min-height:72px;padding:10px 20px}
  .page-shell{grid-template-columns:1fr;overflow:visible}
  .hero-panel{min-height:650px}
  .login-panel{padding:36px 22px;overflow:visible}
  .login-card{width:min(100%,520px)}
  footer{min-height:64px;grid-template-columns:1fr;gap:8px;text-align:center;padding:14px}
  footer>span:nth-child(2),footer>span:last-child{justify-self:center}
}

@media (max-width:720px){
  .brand-logo{width:155px}.brand-divider,.trust-line{display:none}.hub-name{font-size:18px}
  .hero-panel{min-height:690px}.hero-copy{left:22px;right:22px;top:28px}.hero-copy h1{font-size:36px}.hero-copy p{font-size:14px}
  .feature-strip{grid-template-columns:repeat(2,1fr);bottom:112px;height:300px;padding:14px}
  .feature:nth-child(2){border-right:0}.feature{padding:8px}.feature p{font-size:11px}
  .partner-strip{height:112px;grid-template-columns:1fr;padding:12px 16px}.tagline{text-align:center}.partners{display:none}
  .primary-btn,.secondary-btn{font-size:14px;padding:0 14px}.btn-left img{width:28px;height:28px}
}

/* Extra compact mode for common laptop heights such as 1366x768 */
@media (min-width:1101px) and (max-height:820px){
  .webform-layout {
    grid-template-rows: 68px minmax(0,1fr) 50px;
  }
  .brand-logo{width:180px}.hub-name{font-size:20px}.trust-line{font-size:13px}.trust-line img{width:25px}
  .hero-copy{top:24px;left:38px;max-width:410px}.hero-copy h1{font-size:38px}.hero-copy p{font-size:14px}.yellow-rule{margin:10px 0;height:4px}
  .feature-strip{bottom:78px;height:134px;padding:8px 28px}.partner-strip{height:78px;padding:0 28px}
  .feature img{width:40px;height:40px}.feature h3{font-size:13px;margin:3px 0}.feature p{font-size:10px}
  .partners img{width:28px;height:28px}.partners div{font-size:9px}
  .login-panel{padding:10px 38px}.login-card{width:min(100%,430px)}.rail-icon{width:64px;margin-bottom:4px}
  .login-card h2{font-size:24px;margin-bottom:4px}.subtitle{font-size:14px;margin-bottom:12px}
  .primary-btn,.secondary-btn{height:46px;font-size:15px}.btn-left img{width:27px;height:27px}
  .or-row{margin:10px 0}.test-title{font-size:12px;margin-bottom:8px}.test-title img{width:21px}
  .info-box{margin-top:10px;padding:11px;gap:10px}.info-box strong{font-size:13px}.info-box p{font-size:11px;line-height:1.35;margin-top:3px}
  .support{margin-top:11px;font-size:11px}.support img{width:19px}
  footer{font-size:10px;padding:0 28px}
}