/* Login composition follows the supplied office/diagonal reference. */
#authGate {
  min-height:100vh; min-height:100svh; box-sizing:border-box;
  display:grid; grid-template-columns:30vw minmax(0,568px) 1fr;
  align-items:center; place-items:normal; padding:60px 7.5vw;
  position:relative; isolation:isolate;
  background:#edf3f9 url('login-background.png') center center / cover no-repeat;
  font-family:Inter,"Segoe UI",sans-serif; color:#0b2342;
}
#authGate .auth-intro {grid-column:1; align-self:center; padding:0 34px 38px 0; color:white;}
#authGate .auth-intro h2 {font:400 clamp(36px,3.1vw,54px)/1.08 Georgia,serif; letter-spacing:.01em; color:#fff; margin:0;}
#authGate .auth-intro h2 em {font-style:normal; color:#d6ac56;}
#authGate .auth-intro h2 span {display:block;}
#authGate .auth-intro p {font-size:12px; letter-spacing:.23em; color:#acbbce; line-height:1.8; margin:26px 0 0;}
#authGate .auth-intro p:before {content:''; display:block; width:123px; height:1px; background:#d6ac56; margin-bottom:20px;}
#authGate .auth-services {position:absolute; left:4%; bottom:7.5%; display:flex; color:#fff; gap:0;}
#authGate .auth-service {display:flex; flex-direction:column; align-items:center; gap:10px; min-width:128px; font-size:13px; letter-spacing:.06em;}
#authGate .auth-service + .auth-service {border-left:1px solid #8294ad66;}
#authGate .auth-service svg {width:32px; height:32px; color:#dcaf55;}
#authGate .auth-quote {position:absolute; right:4.2%; bottom:10.8%; width:250px; text-align:right; color:#5b7192; font-size:16px; line-height:1.6; letter-spacing:.22em; margin:0;}
#authGate .auth-quote:before {content:''; display:block; width:75px; height:1px; background:#c5a254; margin:0 0 25px auto;}
#authGate .auth-card {grid-column:2; align-self:center; width:100%; min-width:0; margin:0; padding:40px 50px 34px; border:1px solid #ffffffa8; border-radius:20px; background:#fffffff7; box-shadow:0 26px 65px #20395820; position:relative; z-index:1;}
#authGate .auth-logo {display:flex; align-items:center; justify-content:center; gap:17px; margin:0 0 26px; color:#09213e;}
#authGate .auth-monogram {width:88px; height:101px; flex:0 0 88px; overflow:visible;}
#authGate .auth-wordmark strong {display:block; font:400 27px/1.05 Georgia,"Times New Roman",serif; white-space:nowrap;}
#authGate .auth-wordmark small {display:block; font-size:10px; line-height:1.4; letter-spacing:.015em; margin-top:9px; color:#5b7192; white-space:nowrap;}
#authGate #gateTitle {font-size:30px; line-height:1.2; font-weight:750; letter-spacing:-.035em; margin:0 0 15px; color:#0b2342; text-align:center;}
#authGate #gateMessage {font-size:17px; line-height:1.45; color:#586e8c; margin:0 0 25px; text-align:center;}
#authGate form {display:grid; gap:18px;}
#authGate .field {gap:7px; min-width:0;}
#authGate .field label {color:#102444; font-size:14px; font-weight:600; line-height:1.4;}
#authGate input {box-sizing:border-box; width:100%; min-height:51px; border:1px solid #c6d4e5; border-radius:8px; color:#1f3655; background:#fff; padding:12px 14px; font-family:inherit; font-size:15px; line-height:1.4; box-shadow:0 1px 2px #20395804;}
#authGate input::placeholder {color:#8193ad; opacity:1;}
#authGate input:focus {outline:2px solid #2c6db5; outline-offset:2px; box-shadow:0 0 0 4px #2c6db512;}
#authGate .auth-input {display:grid; grid-template-columns:48px minmax(0,1fr) 44px; align-items:center; position:relative;}
#authGate .auth-input>input {grid-column:1/-1; grid-row:1; padding-left:50px; padding-right:46px;}
#authGate .auth-input>svg {grid-column:1; grid-row:1; justify-self:center; width:21px; height:21px; color:#6d83a1; z-index:1; pointer-events:none;}
#authGate #toggleLoginPassword {grid-column:3; grid-row:1; z-index:1; display:grid; place-items:center; min-height:42px; width:40px; padding:9px; border:0; background:transparent; color:#6d83a1; box-shadow:none; cursor:pointer;}
#authGate #toggleLoginPassword svg {width:22px; height:22px;}
#authGate #toggleLoginPassword[aria-pressed=true] .eye-slash {display:block;}
#authGate #toggleLoginPassword .eye-slash {display:none;}
#authGate button.primary {display:flex; justify-content:center; align-items:center; gap:10px; min-height:55px; padding:13px 18px; border:1px solid #d0ab50; border-radius:8px; color:#10213a; background:linear-gradient(115deg,#f5d77f,#c99c39); box-shadow:0 5px 12px #b68c3620; font-size:16px; font-weight:700;}
#authGate button.primary svg {width:21px; height:21px;}
#authGate button.primary:hover {filter:brightness(1.035);}
#authGate button:focus-visible,#authGate summary:focus-visible {outline:2px solid #2c6db5; outline-offset:4px;}
#authGate #recoveryOptions {margin-top:23px;}
#authGate #recoveryOptions details {border:0; background:transparent; margin:0; padding:0;}
#authGate #recoveryOptions details + details {margin-top:18px;}
#authGate #recoveryOptions summary {list-style:none; text-align:center; color:#084493; cursor:pointer; font-size:15px; font-weight:600; padding:5px 0;}
#authGate #recoveryOptions summary::-webkit-details-marker {display:none;}
#authGate #recoveryOptions summary:after {content:'›'; display:inline-block; font-size:23px; line-height:16px; vertical-align:-1px; margin-left:13px;}
#authGate #recoveryOptions details[open] summary:after {transform:rotate(90deg);}
#authGate #recoveryOptions form {margin-top:15px; padding-top:15px; border-top:1px solid #e0e7f0;}
#authGate #recoveryOptions p,#authGate #passwordForm p {font-size:14px; line-height:1.5; color:#586e8c; margin:0;}
#authGate #gateSignout {margin-top:18px;}
@media (max-width:1250px) {
  #authGate {grid-template-columns:minmax(0,1fr) minmax(440px,1.32fr); padding:48px 6vw; column-gap:35px;}
  #authGate .auth-intro {padding-right:0;}
  #authGate .auth-card {padding:32px;}
  #authGate .auth-quote {display:none;}
  #authGate .auth-service {min-width:100px;}
  #authGate .auth-intro p {font-size:10px; letter-spacing:.15em;}
}
@media (max-width:900px) {
  #authGate {display:flex; flex-direction:column; justify-content:center; padding:32px 22px; gap:24px; background-position:35% center;}
  #authGate .auth-intro,#authGate .auth-services {display:none;}
  #authGate .auth-card {max-width:568px; align-self:center;}
}
@media (max-width:520px) {
  #authGate {padding:22px 14px;}
  #authGate .auth-card {padding:28px 22px; border-radius:16px;}
  #authGate .auth-logo {gap:10px; margin-bottom:22px;}
  #authGate .auth-monogram {width:62px; height:76px; flex-basis:62px;}
  #authGate .auth-wordmark strong {font-size:21px;}
  #authGate .auth-wordmark small {font-size:7.4px;}
  #authGate #gateTitle {font-size:25px;}
  #authGate #gateMessage {font-size:15px;}
}
@media (max-height:760px) and (min-width:901px) {
  #authGate {padding-top:28px; padding-bottom:28px;}
  #authGate .auth-card {padding-top:26px; padding-bottom:26px;}
  #authGate .auth-logo {margin-bottom:15px;}
  #authGate .auth-services {bottom:4%;}
}