*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f6f7f2;color:#173343;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{display:grid;grid-template-columns:57% 43%;min-height:100svh}.scene{position:relative;overflow:hidden;min-height:720px;color:white}.scene img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:60% center}.scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0d293239 0%,transparent 26%,#0f293a3b 48%,#0f283aca 100%)}a{color:inherit;text-decoration:none}.brand{position:absolute;z-index:1;top:55px;left:55px;font-size:31px;font-weight:600;letter-spacing:-1.5px;text-shadow:0 1px 20px #15304255}.brand span{color:#dae3bb}.scene-copy{position:absolute;z-index:1;bottom:95px;left:55px;right:35px}.eyebrow{font-size:10px;font-weight:500;letter-spacing:2.5px}h1{font-family:Georgia,serif;font-size:clamp(64px,6vw,108px);font-weight:400;line-height:1.03;letter-spacing:-4px;margin:28px 0 28px}.scene-copy p{font-size:17px;line-height:1.7;color:#ecf1ee}.caption{position:absolute;z-index:1;bottom:25px;left:55px;font-size:9px;letter-spacing:.1em;color:#d3dedc}.panel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:90px 48px 70px;position:relative}.login-box{width:100%;max-width:370px}.mark{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:19px;background:#1c4962;color:white;font-size:32px;font-weight:600;letter-spacing:-2px;margin-bottom:32px;box-shadow:0 10px 30px #1d49621c}.small{color:#6f868a;font-size:9px;letter-spacing:2px}h2{font-size:39px;font-weight:500;letter-spacing:-1.8px;margin:14px 0 10px}.intro{font-size:15px;color:#718087;line-height:1.6;margin-bottom:36px}label{display:block;font-size:12px;font-weight:500;margin:22px 0 9px}input{display:block;width:100%;height:53px;border:1px solid #d4deda;background:#fff;border-radius:10px;font-size:16px;font-family:inherit;color:#183b4c;padding:0 15px;outline:none}input:focus{border-color:#4080a0;box-shadow:0 0 0 3px #4080a019}.password-wrap{position:relative}.password-wrap input{padding-right:65px}.password-wrap button{position:absolute;right:8px;top:8px;height:37px;border:0;background:transparent;color:#637e8a;cursor:pointer;font:inherit;font-size:11px}.submit{margin-top:28px;border:0;border-radius:10px;background:#1d4961;color:white;width:100%;height:55px;font:inherit;font-size:14px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;cursor:pointer}.submit:hover{background:#235b78}.submit:disabled{opacity:.65;cursor:wait}.submit span{font-size:20px}.privacy{display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;color:#7e8d90;margin-top:24px}.privacy svg{width:15px;height:15px}footer{position:absolute;bottom:27px;left:40px;right:40px;display:flex;justify-content:space-between;font-size:10px;color:#849396}#error{font-size:13px;line-height:1.5;color:#a83232;background:#fff0ee;padding:12px;border-radius:8px}a:focus-visible,button:focus-visible{outline:2px solid #4684ac;outline-offset:4px}@media(min-width:1900px){.scene-copy,.brand,.caption{left:7vw}.login-box{max-width:420px}h2{font-size:44px}}@media(max-width:800px){main{grid-template-columns:1fr}.scene{min-height:330px;height:39svh}.brand{top:25px;left:25px;font-size:25px}.scene-copy{left:25px;bottom:25px}.scene-copy .eyebrow,.scene-copy p,.caption{display:none}h1{font-size:49px;letter-spacing:-2px;margin:0}.scene img{object-position:60% 45%}.panel{padding:36px 25px 75px;min-height:550px}.mark{width:44px;height:44px;border-radius:14px;font-size:25px;margin-bottom:19px}h2{font-size:33px}.intro{margin-bottom:23px}footer{left:25px;right:25px;bottom:23px}.login-box{max-width:440px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Personal login: full photograph and a quiet glass panel. */
main{position:relative;isolation:isolate;grid-template-columns:1.1fr .9fr;min-height:max(760px,100svh)}
.scene{position:absolute;inset:0;min-height:0;z-index:0}
.scene img{object-position:center center}
.scene:after{background:linear-gradient(90deg,rgba(13,35,47,.18),transparent 65%),linear-gradient(0deg,rgba(12,36,49,.68),transparent 68%)}
.scene-copy{width:48%;max-width:760px;bottom:65px;right:auto}
.panel{grid-column:2;z-index:1;padding:64px 5vw;min-width:0}
.login-box{max-width:440px;padding:38px 36px 30px;border:1px solid rgba(255,255,255,.72);border-radius:28px;background:rgba(247,250,246,.79);-webkit-backdrop-filter:blur(12px) saturate(110%);backdrop-filter:blur(12px) saturate(110%);box-shadow:0 20px 70px rgba(10,31,41,.17),0 0 50px rgba(249,250,235,.18),inset 0 1px 0 rgba(255,255,255,.85)}
.mark{width:55px;height:55px;border-radius:17px;font-size:29px;margin-bottom:25px;box-shadow:0 7px 25px rgba(29,73,98,.14)}
h2{font-size:38px;margin-top:14px}.intro{color:#536b75;margin-bottom:28px}.small{color:#526f79}
input{background:rgba(255,255,255,.86);border-color:rgba(91,120,132,.3)}
.privacy{color:#546d77;font-size:10px;line-height:1.5;margin-bottom:0}
@media(min-width:1900px){.login-box{max-width:460px}.scene-copy{bottom:85px}h2{font-size:40px}}
@media(max-width:1100px) and (min-width:801px){.panel{padding:55px 25px}.login-box{padding:32px 26px}.scene-copy{left:35px;width:47%}h1{font-size:68px}.brand{left:35px}}
@media(max-width:800px){main{display:flex;flex-direction:column;min-height:100svh;background:#edf1ec}.scene{position:relative;inset:auto;height:37svh;min-height:275px;flex-shrink:0}.scene-copy{width:auto;max-width:none;bottom:35px;left:25px}.scene img{object-position:60% 42%}.panel{padding:0 18px 30px;margin-top:-18px;min-height:0}.login-box{max-width:440px;padding:30px 25px 26px;background:rgba(250,252,249,.92);border-radius:24px}.mark{width:46px;height:46px;font-size:26px;margin-bottom:20px}h2{font-size:34px}.intro{font-size:14px;margin-bottom:24px}.scene-copy h1{font-size:48px}.privacy{font-size:9px}.brand{top:23px;left:25px}}
@media(max-width:380px){.login-box{padding:26px 20px}.panel{padding-left:12px;padding-right:12px}.scene-copy h1{font-size:43px}h2{font-size:31px}}

/* Softer glass, lighter photograph, and matching editorial greeting. */
.login-box{background:linear-gradient(135deg,rgba(251,253,249,.67),rgba(240,247,244,.48));border-color:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%);box-shadow:0 18px 60px rgba(12,35,48,.12),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.2)}
h2{font-family:Georgia,serif;font-size:43px;font-weight:400;line-height:1.12;letter-spacing:-1.6px;color:#173343}
.scene:after{background:linear-gradient(90deg,rgba(13,35,47,.09),transparent 60%),linear-gradient(0deg,rgba(12,36,49,.50),transparent 64%)}
.small{color:#345664}.intro,.privacy{color:#385864}
@media(min-width:1900px){h2{font-size:46px}}
@media(max-width:800px){h2{font-size:38px}.login-box{background:linear-gradient(135deg,rgba(251,253,249,.91),rgba(240,247,244,.83))}}
@media(max-width:380px){h2{font-size:34px}}

/* Compact glass: reveal more architecture without shrinking touch targets. */
.scene:after{background:radial-gradient(ellipse at 60% 100%,rgba(255,241,207,.09),transparent 52%),linear-gradient(90deg,rgba(13,35,47,.07),transparent 60%),linear-gradient(0deg,rgba(12,36,49,.32),transparent 62%)}
.scene-copy{text-shadow:0 2px 16px rgba(12,32,44,.38)}
.login-box{max-width:410px;padding:30px 30px 25px;background:linear-gradient(135deg,rgba(251,253,249,.51),rgba(240,247,244,.32));border-color:rgba(255,255,255,.68);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);box-shadow:0 15px 50px rgba(12,35,48,.10),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.18)}
.mark{width:50px;height:50px;font-size:27px;margin-bottom:20px;border-radius:16px}
h2{font-size:40px}.intro{margin-bottom:22px}.login-box label{margin-top:18px}.submit{margin-top:23px}.privacy{margin-top:20px}
@media(min-width:1900px){.login-box{max-width:420px}h2{font-size:42px}}
@media(max-width:800px){.login-box{max-width:410px;padding:27px 24px 23px;background:linear-gradient(135deg,rgba(251,253,249,.84),rgba(240,247,244,.68))}.mark{width:44px;height:44px;font-size:25px}h2{font-size:37px}}
@media(max-width:380px){.login-box{padding:25px 20px}h2{font-size:33px}}

/* Shade behind the white headline, leaving the house luminous. */
.scene:after{background:radial-gradient(ellipse at 18% 82%,rgba(10,30,43,.38),transparent 59%),radial-gradient(ellipse at 65% 100%,rgba(255,241,207,.07),transparent 48%),linear-gradient(0deg,rgba(12,36,49,.24),transparent 62%)}

/* Clear glass over the garden; keep the approved shade behind the headline. */
@media(min-width:801px){
 .login-box{background:linear-gradient(135deg,rgba(251,253,249,.30),rgba(240,247,244,.17));-webkit-backdrop-filter:blur(9px) saturate(115%);backdrop-filter:blur(9px) saturate(115%);border-color:rgba(255,255,255,.57)}
 .login-box input{background:rgba(255,255,255,.74)}
 .login-box label,.small,.intro,.privacy{text-shadow:0 1px 5px rgba(255,255,255,.65)}
}
@media(min-width:1101px){.panel{justify-content:flex-end;padding-top:145px;padding-bottom:6vh}}

/* Smaller liquid-glass card; photograph remains untouched and lossless. */
@media(min-width:801px){
 .login-box{position:relative;max-width:380px;padding:25px 25px 22px;border-radius:30px;
 background:linear-gradient(125deg,rgba(255,255,255,.16),transparent 24%,transparent 72%,rgba(255,255,255,.08)),linear-gradient(135deg,rgba(251,253,249,.30),rgba(240,247,244,.17));
 border:1px solid rgba(255,255,255,.68);
 box-shadow:0 15px 45px rgba(12,35,48,.12),inset 1px 1px 1px rgba(255,255,255,.9),inset -1px -1px 1px rgba(255,255,255,.4),inset 0 0 18px rgba(255,255,255,.08)}
 .login-box:before{content:"";position:absolute;inset:3px;border-radius:26px;pointer-events:none;border-top:1px solid rgba(255,255,255,.38);border-left:1px solid rgba(255,255,255,.16)}
 .login-box .mark{width:44px;height:44px;border-radius:14px;font-size:25px;margin-bottom:16px}
 .login-box h2{font-size:36px;letter-spacing:-1.3px;margin:12px 0 8px}
 .login-box .intro{font-size:14px;margin-bottom:18px}
 .login-box label{margin-top:14px;margin-bottom:8px}
 .login-box input{height:49px}
 .password-wrap button{top:6px}
 .login-box .submit{height:51px;margin-top:20px;font-size:13px}
 .login-box .privacy{margin-top:17px;font-size:9px}
}

/* Keep glass visible while giving small text a clear navy ink. */
.login-box label,.login-box .small,.login-box .intro,.login-box .privacy{color:#102f40;text-shadow:0 1px 5px rgba(255,255,255,.8)}
.login-box label,.login-box .small{font-weight:600}
.login-box .intro{font-weight:500}
.login-box .privacy{font-size:10px;font-weight:500}

/* Quiet edges: no bright double rim around the glass. */
@media(min-width:801px){
 .login-box{border-color:rgba(255,255,255,.22);box-shadow:0 12px 40px rgba(12,35,48,.10),inset 0 1px 0 rgba(255,255,255,.20)}
 .login-box:before{display:none}
}