*{box-sizing:border-box}body{margin:0;background:#f3f5f7;font:14px "DM Sans",Arial;color:#14243b}.login-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-brand{min-height:100vh;position:relative;overflow:hidden;background:linear-gradient(135deg,#0b1b33,#102c4e 61%,#08182e);padding:31px clamp(28px,6vw,95px);display:flex;flex-direction:column;justify-content:space-between;color:#fff}.login-brand>a{width:243px;height:65px;background:white;border-radius:6px;padding:3px;display:block;overflow:hidden;position:relative;z-index:2}.login-brand>a img{width:100%;height:100%;object-fit:contain}.login-claim{position:relative;z-index:2;margin:0 0 85px}.login-claim>span{font-size:9px;letter-spacing:1.6px;color:#8eafce;font-weight:700}.login-claim h1{font:700 clamp(45px,5vw,69px)/1.08 Manrope;letter-spacing:-3px;margin:19px 0;color:#fff}.login-claim p{font-size:13px;line-height:1.7;color:#b1c4d8;max-width:340px}.login-claim i{font:700 8px "DM Sans";letter-spacing:1.3px;color:#6e95bd;display:block;margin-top:42px}.login-foot{position:relative;z-index:2;color:#7e9bb9;font-size:8px;letter-spacing:1.2px}.login-foot span{color:#1884f3}.blueprint{position:absolute;width:600px;height:600px;right:-245px;bottom:-150px;border-radius:50%;border:1px solid #5099db3c}.blueprint:before,.blueprint:after{content:"";position:absolute;border-radius:50%;border:1px solid #5597cf2d}.blueprint:before{inset:48px}.blueprint:after{inset:103px;background:repeating-linear-gradient(0deg,transparent 0 31px,#ffffff09 32px),repeating-linear-gradient(90deg,transparent 0 31px,#ffffff09 32px)}.login-panel{background:#fff;min-height:100vh;display:flex;flex-direction:column;padding:29px clamp(26px,5.5vw,85px) 22px}.login-top{display:flex;align-items:center;justify-content:space-between}.login-top>a{font-size:10px;color:#66768b}.login-top>a:first-letter{color:#1675e6}.locale{display:flex;gap:3px;padding:3px;border:1px solid #e7ebf0;border-radius:6px}.locale button{border:0;background:transparent;color:#8793a4;padding:5px 7px;border-radius:4px;font-size:9px;font-weight:700}.locale button.current{background:#eaf3fe;color:#1169d2}.formwrap{width:min(380px,100%);margin:auto;transform:translateY(-6px)}.lock-icon{width:37px;height:37px;border-radius:9px;background:#eaf3ff;color:#1a6fc9;display:grid;place-items:center;font-size:20px;margin-bottom:27px}.eyebrow{font-size:9px;letter-spacing:1.5px;color:#66809c;font-weight:700}.formwrap h2{font:700 30px Manrope;letter-spacing:-1.1px;margin:11px 0 7px}.formwrap>p{font-size:11px;color:#8794a5;margin:0 0 25px}.formwrap form label{display:grid;gap:7px;margin-top:15px}.formwrap form label span{font-size:10px;font-weight:600;color:#536780}.formwrap input{height:43px;border:1px solid #dce4ed;border-radius:6px;padding:0 12px;outline:0;font-size:11px;color:#1a2d47}.formwrap input:focus{border-color:#448fe7;box-shadow:0 0 0 3px #1477e614}.formwrap input::placeholder{color:#aab4c0;font-size:10px}.forgot{display:block;margin:11px 0 17px auto;background:none;border:0;color:#8997a8;font-size:9px}.forgot span{color:#1c6ec6;font-weight:700}.login-button{border:0;border-radius:5px;background:#1473e6;color:#fff;padding:13px 15px;width:100%;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:10px;box-shadow:0 6px 13px #1473e626}.login-button:hover{background:#0c62ca}.login-button b{font-size:15px}.auth-msg{font-size:10px;line-height:1.6;color:#986e18;background:#fff8e8;border-radius:5px;padding:0;max-height:0;overflow:hidden;transition:.2s}.auth-msg:not(:empty){padding:10px;margin-top:12px;max-height:80px}.secure-line{margin:20px auto 22px;color:#8998a9;font-size:9px;display:flex;align-items:center;gap:7px;justify-content:center}.secure-line span{font-size:9px;color:#178a66}.demo-box{border:1px solid #e6ebf0;border-radius:7px;background:#fbfcfd;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.demo-box b{font-size:7px;letter-spacing:1px;color:#62768e}.demo-box p{font-size:9px;color:#8996a7;line-height:1.5;margin:5px 0 0;max-width:235px}.demo-box>a{white-space:nowrap;color:#176dcb;font-size:9px;font-weight:700}.demo-box>a span{font-size:13px;margin-left:5px}.copy{text-align:center;color:#a3adba;font-size:8px;margin-top:20px}.copy span{color:#728198}@media(max-width:760px){.login-shell{grid-template-columns:1fr}.login-brand{min-height:230px;padding:18px 22px 17px}.login-brand>a{width:185px;height:51px}.login-claim{margin:21px 0 0}.login-claim>span{font-size:7px}.login-claim h1{font-size:30px;letter-spacing:-1.3px;margin:8px 0}.login-claim p{display:none}.login-claim i{display:none}.login-foot{display:none}.blueprint{width:330px;height:330px;right:-145px;bottom:-120px}.login-panel{min-height:calc(100vh - 230px);padding:18px 23px}.formwrap{margin:38px auto;transform:none}.formwrap h2{font-size:26px}}
#forgot{font-size:9px;line-height:1.5;color:#8997a8;text-align:left;margin:11px 0 17px}

/* Construction artwork on the access page: dark overlay keeps the copy readable. */
.login-brand{background-color:#0b1b33;background-image:linear-gradient(90deg,rgba(7,23,45,.96) 0%,rgba(7,23,45,.86) 34%,rgba(7,23,45,.55) 68%,rgba(7,23,45,.42) 100%),linear-gradient(0deg,rgba(7,23,45,.9) 0%,rgba(7,23,45,.04) 68%),url("assets/login-construction-site.png");background-size:cover;background-position:center 52%}
.login-brand .blueprint{opacity:.2}
@media(max-width:760px){.login-brand{background-image:linear-gradient(90deg,rgba(7,23,45,.84),rgba(7,23,45,.56)),linear-gradient(0deg,rgba(7,23,45,.76),rgba(7,23,45,.04) 78%),url("assets/login-construction-site.png");background-position:center 49%}}

/* Keep the original dark-blue panel and show the complete uploaded image below the copy. */
.login-brand{background:linear-gradient(135deg,#0b1b33,#102c4e 61%,#08182e)}
.login-brand>a{display:none}
.login-claim{margin:clamp(22px,4vh,48px) 0 0}
.login-artwork{position:relative;z-index:2;display:block;align-self:center;width:min(100%,620px);height:clamp(250px,42vh,410px);object-fit:contain;object-position:center}
.login-brand .blueprint{z-index:1;opacity:.16}
@media(max-width:760px){.login-brand{min-height:350px;padding:18px 22px 16px}.login-brand>a{display:none}.login-claim{margin:7px 0 0}.login-claim h1{font-size:30px;letter-spacing:-1.3px;margin:8px 0}.login-artwork{width:100%;max-width:440px;height:clamp(170px,58vw,230px)}.login-foot{display:none}.login-brand .blueprint{opacity:.1}.login-panel{min-height:calc(100vh - 350px)}}
@media(max-height:720px) and (min-width:761px){.login-artwork{height:32vh}.login-claim h1{font-size:clamp(40px,4.5vw,58px)}}

/* Integrate the complete construction image into the dark, technical backdrop. */
.login-brand{isolation:isolate;background:linear-gradient(135deg,#0b1b33 0%,#102c4e 61%,#08182e 100%)}
.login-brand::before{content:"";position:absolute;z-index:0;left:4%;right:-6%;bottom:0;height:58%;pointer-events:none;background:radial-gradient(ellipse at 50% 62%,rgba(20,125,255,.24),rgba(0,201,255,.1) 38%,transparent 72%),radial-gradient(ellipse at 76% 80%,rgba(255,145,45,.14),transparent 55%);filter:blur(14px)}
.login-brand::after{content:"";position:absolute;z-index:1;inset:auto 0 0;height:72%;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 34px,rgba(89,187,255,.055) 35px),repeating-linear-gradient(90deg,transparent 0 44px,rgba(89,187,255,.045) 45px);opacity:.42;mask-image:linear-gradient(to top,#000,transparent 74%)}
.login-claim,.login-foot{z-index:3}
.login-claim{margin-bottom:0}
.login-brand .blueprint{z-index:1;opacity:.2}
.login-artwork-stage{position:absolute;z-index:2;isolation:isolate;inset:0;pointer-events:none;overflow:hidden}
.login-artwork-stage::before{content:"";position:absolute;z-index:0;inset:-5%;border-radius:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,27,51,.5),rgba(11,27,51,.08) 68%,transparent),radial-gradient(ellipse at 34% 62%,rgba(20,122,255,.3),transparent 68%),radial-gradient(ellipse at 78% 78%,rgba(255,145,45,.16),transparent 55%),url("assets/login-engineer-hologram.png") center 68%/cover no-repeat;opacity:.6;filter:blur(28px) saturate(.72) brightness(.5)}
.login-artwork-stage::after{content:none}
.login-artwork{position:absolute;z-index:1;inset:0;align-self:auto;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:translateY(-140px);filter:saturate(.96) contrast(1.02) brightness(.9)}
.login-image-blend{position:absolute;z-index:2;inset:0;pointer-events:none;background-image:linear-gradient(180deg,transparent 0%,transparent 38%,rgba(11,27,51,.42) 40%,rgba(11,27,51,.86) 44%,rgba(11,27,51,.7) 51%,rgba(11,27,51,.34) 59%,rgba(11,27,51,.08) 68%,transparent 76%,transparent 80%,rgba(8,24,46,.56) 84%,rgba(8,24,46,.9) 89%,transparent 96%,transparent 100%)}
@media(max-width:760px){.login-brand{min-height:390px;padding:18px 22px 16px}.login-claim{margin:7px 0 0}.login-artwork-stage{inset:0;width:auto;height:auto;margin:0}.login-artwork{width:100%;height:100%;transform:translateY(-18px)}.login-brand::before{height:60%;opacity:.8}.login-brand::after{height:68%;opacity:.35}.login-brand .blueprint{opacity:.14}.login-panel{min-height:calc(100vh - 390px)}}
@media(max-height:720px) and (min-width:761px){.login-artwork{transform:translateY(-12vh)}.login-claim h1{font-size:clamp(40px,4.5vw,58px)}}
@media(prefers-reduced-motion:reduce){.login-artwork-stage::before{animation:none}}

/* Login refresh: full-bleed office photo and a soft S.A.M.360 access panel. */
.login-brand{isolation:isolate;background:#071a31;}
.login-brand::before{z-index:0;inset:0;left:0;right:0;bottom:0;height:auto;filter:none;opacity:1;background:radial-gradient(ellipse at 76% 42%,rgba(27,162,255,.2),transparent 42%),linear-gradient(135deg,#071a31 0%,#0b2948 58%,#102f4f 100%);}
.login-brand::after{z-index:2;inset:0;height:auto;opacity:.2;mask-image:linear-gradient(135deg,rgba(0,0,0,.65),transparent 76%);background:repeating-linear-gradient(0deg,transparent 0 37px,rgba(112,207,255,.08) 38px),repeating-linear-gradient(90deg,transparent 0 47px,rgba(112,207,255,.06) 48px);}
.login-artwork-stage{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;isolation:isolate;}
.login-artwork-stage::before,.login-artwork-stage::after{content:none;}
.login-artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 51%;transform:scale(1.025);filter:saturate(.88) contrast(1.03) brightness(.88);}
.login-image-blend{position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(5,20,39,.91) 0%,rgba(5,20,39,.8) 32%,rgba(5,20,39,.48) 62%,rgba(5,20,39,.18) 100%),linear-gradient(180deg,rgba(5,20,39,.55) 0%,rgba(5,20,39,.12) 35%,rgba(5,20,39,.08) 67%,rgba(5,20,39,.58) 100%);}
.login-claim,.login-foot{position:relative;z-index:4;}
.login-claim{max-width:540px;margin:0 0 32px;}
.login-claim h1{ text-shadow:0 3px 22px rgba(3,14,29,.32);}
.login-claim p{color:#d0e2f4;text-shadow:0 2px 12px rgba(3,14,29,.32);}
.login-claim>span,.login-claim i,.login-foot{color:#9dcdf5;}
.login-brand .blueprint{z-index:2;opacity:.2;}
.login-panel{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#f8fbff 0%,#f0f6fc 52%,#f6f8ff 100%);}
.login-panel::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(ellipse at 100% 0%,rgba(56,151,255,.16),transparent 42%),radial-gradient(ellipse at 0% 100%,rgba(42,198,213,.09),transparent 38%),linear-gradient(135deg,transparent 57%,rgba(255,255,255,.65) 100%);}
.login-panel::after{content:"";position:absolute;z-index:0;width:420px;height:420px;right:-260px;bottom:-240px;border:1px solid rgba(28,120,205,.13);border-radius:50%;box-shadow:0 0 0 30px rgba(28,120,205,.035),0 0 0 62px rgba(28,120,205,.025);pointer-events:none;}
.login-top,.formwrap,.copy{position:relative;z-index:1;}
.formwrap{width:min(440px,100%);padding:clamp(20px,3vw,30px);border:1px solid rgba(255,255,255,.88);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(250,253,255,.79));box-shadow:0 22px 60px rgba(25,69,115,.1),0 2px 9px rgba(25,69,115,.04);backdrop-filter:blur(10px);}
.lock-icon{box-shadow:0 8px 22px rgba(28,117,218,.1);}
.demo-box{background:rgba(247,250,255,.82);border-color:#dce8f5;}
@media(max-width:760px){
  .login-brand{min-height:390px;padding:18px 22px 16px;}
  .login-artwork{object-position:center 52%;transform:scale(1.035);}
  .login-claim{margin:7px 0 0;max-width:360px;}
  .login-brand::after{opacity:.14;}
  .login-panel{min-height:calc(100vh - 390px);}
  .formwrap{width:min(440px,100%);margin:30px auto;padding:22px;border-radius:16px;}
}
@media(max-width:380px){.login-brand{min-height:360px}.login-panel{min-height:calc(100vh - 360px);padding:16px}.formwrap{padding:18px}}

/* Access-page photo zooms out from the right edge toward the left. */
@keyframes login-photo-zoom-from-right{
  from{transform:scale(var(--login-photo-entry-scale,1.08))}
  to{transform:scale(1)}
}
.login-artwork{
  transform-origin:right center;
  will-change:transform;
  animation:login-photo-zoom-from-right 4.2s cubic-bezier(.18,.68,.25,1) both;
}
@media(max-width:760px){.login-artwork{--login-photo-entry-scale:1.05}}
@media(prefers-reduced-motion:reduce){.login-artwork{animation:none;transform:none;will-change:auto}}

/* Login copy enters in a short, readable sequence after the artwork begins. */
@keyframes login-copy-reveal{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.login-brand .login-claim>span,
.login-brand .login-claim h1,
.login-brand .login-claim p,
.login-brand .login-claim i,
.login-brand .login-foot,
.login-top,
.login-panel .lock-icon,
.login-panel .eyebrow,
.login-panel .formwrap h2,
.login-panel .formwrap>p,
.login-panel form label,
.login-panel .forgot,
.login-panel .login-button,
.login-panel .secure-line,
.login-panel .demo-box,
.login-panel .copy{
  opacity:0;
  animation:login-copy-reveal .68s cubic-bezier(.2,.72,.24,1) both;
}
.login-brand .login-claim>span{animation-delay:.08s}
.login-brand .login-claim h1{animation-delay:.22s}
.login-brand .login-claim p{animation-delay:.36s}
.login-brand .login-claim i{animation-delay:.5s}
.login-brand .login-foot{animation-delay:.68s}
.login-top,.login-panel .lock-icon{animation-delay:.12s}
.login-panel .eyebrow{animation-delay:.24s}
.login-panel .formwrap h2{animation-delay:.36s}
.login-panel .formwrap>p{animation-delay:.48s}
.login-panel form label:nth-of-type(1){animation-delay:.6s}
.login-panel form label:nth-of-type(2){animation-delay:.7s}
.login-panel .forgot{animation-delay:.8s}
.login-panel .login-button{animation-delay:.9s}
.login-panel .secure-line{animation-delay:1.02s}
.login-panel .demo-box{animation-delay:1.14s}
.login-panel .copy{animation-delay:1.28s}
@media(prefers-reduced-motion:reduce){
  .login-brand .login-claim>span,
  .login-brand .login-claim h1,
  .login-brand .login-claim p,
  .login-brand .login-claim i,
  .login-brand .login-foot,
  .login-top,
  .login-panel .lock-icon,
  .login-panel .eyebrow,
  .login-panel .formwrap h2,
  .login-panel .formwrap>p,
  .login-panel form label,
  .login-panel .forgot,
  .login-panel .login-button,
  .login-panel .secure-line,
  .login-panel .demo-box,
  .login-panel .copy{animation:none!important;opacity:1!important;transform:none!important}
}

/* Personal brand mark and a more visible, modern light login atmosphere. */
.login-panel{background-color:#eef5fd;background-image:radial-gradient(ellipse at 100% 3%,rgba(30,135,255,.24),transparent 34%),radial-gradient(ellipse at 5% 88%,rgba(24,190,205,.18),transparent 34%),radial-gradient(ellipse at 63% 100%,rgba(126,146,255,.13),transparent 38%),linear-gradient(135deg,#eaf3ff 0%,#f4f8ff 48%,#edf7fb 100%);}
.login-panel::before{z-index:0;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 43px,rgba(43,113,183,.035) 44px),repeating-linear-gradient(90deg,transparent 0 43px,rgba(43,113,183,.035) 44px),linear-gradient(135deg,rgba(255,255,255,.18),transparent 47%,rgba(41,164,205,.07));}
.login-panel::after{content:"";position:absolute;z-index:0;width:500px;height:500px;top:-330px;right:-265px;bottom:auto;border:1px solid rgba(30,126,214,.25);border-radius:50%;box-shadow:0 0 0 24px rgba(30,126,214,.055),0 0 0 52px rgba(30,126,214,.04),0 0 0 84px rgba(30,126,214,.025);pointer-events:none;}
.login-panel .lock-icon{width:48px;height:48px;padding:3px;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#fff,#e6f2ff);border:1px solid rgba(255,255,255,.9);box-shadow:0 9px 22px rgba(24,103,190,.17);}
.login-panel .lock-icon img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;}
.formwrap{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(250,253,255,.87));border-color:rgba(255,255,255,.96);box-shadow:0 24px 66px rgba(25,69,115,.14),0 2px 10px rgba(25,69,115,.06);}
@media(max-width:760px){.login-panel{background-image:radial-gradient(ellipse at 100% 0%,rgba(30,135,255,.21),transparent 38%),radial-gradient(ellipse at 0% 100%,rgba(24,190,205,.16),transparent 39%),linear-gradient(135deg,#eaf3ff,#f4f8ff 55%,#edf7fb);}.login-panel::after{width:360px;height:360px;top:-260px;right:-235px;}}

/* Accessible show/hide control for the sign-in password. */
.password-control{position:relative;width:100%;}
.password-control input{width:100%;padding-right:46px;}
.password-toggle{position:absolute;top:50%;right:7px;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:#597896;cursor:pointer;transition:background .16s ease,color .16s ease,box-shadow .16s ease;}
.password-toggle:hover{background:#e8f2ff;color:#126ed0;}
.password-toggle:focus-visible{outline:2px solid #2583e8;outline-offset:1px;}
.password-toggle svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.password-toggle svg[hidden]{display:none;}

/* Preserve the source proportions, remove the extra zoom, and blend brand-color gradients over the full-bleed photo. */
.login-artwork-stage::before,.login-artwork-stage::after{content:none;}
.login-artwork{z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 50%;transform:none;filter:saturate(.9) contrast(1.02) brightness(.88);mask-image:none;-webkit-mask-image:none;}
.login-image-blend{z-index:3;background-image:radial-gradient(ellipse 36% 25% at 38% 82%,rgba(0,136,255,.16),transparent 100%),radial-gradient(ellipse 38% 32% at 82% 67%,rgba(18,183,216,.09),transparent 100%),linear-gradient(90deg,rgba(5,20,39,.91) 0%,rgba(5,20,39,.8) 32%,rgba(5,20,39,.48) 62%,rgba(5,20,39,.18) 100%),linear-gradient(180deg,rgba(5,20,39,.55) 0%,rgba(5,20,39,.12) 35%,rgba(5,20,39,.08) 67%,rgba(5,20,39,.58) 100%);}
@media(max-width:760px){.login-artwork{object-position:46% 50%;transform:none;}.login-image-blend{background-image:radial-gradient(ellipse 40% 26% at 40% 81%,rgba(0,136,255,.15),transparent 100%),radial-gradient(ellipse 38% 30% at 82% 65%,rgba(18,183,216,.08),transparent 100%),linear-gradient(90deg,rgba(5,20,39,.84),rgba(5,20,39,.56)),linear-gradient(180deg,rgba(5,20,39,.18),rgba(5,20,39,.04) 58%,rgba(5,20,39,.42));}}