:root{--green:#153e35;--ink:#203c34;--muted:#7b827b;--gold:#c4a66c;--paper:#faf9f5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}a{color:inherit}.portal{min-height:100svh;display:grid;grid-template-columns:52% 48%}.showcase{position:relative;overflow:hidden;background:radial-gradient(ellipse at 72% 62%,#315749 0,transparent 55%),#153e35;color:#f5f2e8;padding:44px 9% 30px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:15px;text-decoration:none;font-size:18px;font-weight:600;letter-spacing:2px}.brand small{display:block;font-size:8px;letter-spacing:3.6px;font-weight:400;margin-top:6px}.brand-mark{display:flex;align-items:center;border:1px solid #bdab77;width:47px;height:47px;padding-left:8px;color:#dcc994;font-family:Georgia,serif;font-size:30px;letter-spacing:-9px}.brand-mark span{font-size:26px;padding-top:9px}.story{margin-top:66px;position:relative;z-index:1}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.4px;display:flex;align-items:center;gap:10px}.eyebrow>span{width:22px;height:1px;background:var(--gold)}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(56px,5.65vw,88px);letter-spacing:-3px;line-height:1.05;margin:24px 0}h1 em{color:#d8c18f;font-weight:400}.intro{font-size:13px;line-height:1.9;color:#becdc3}.product-scene{position:relative;margin-top:10px;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:260px}.faucet{width:112%;max-height:315px;align-self:center}.scene-label{position:absolute;left:0;top:30px;writing-mode:vertical-rl;font-size:7px;letter-spacing:2.3px;color:#94ad9c}.scene-caption{display:flex;justify-content:space-between;align-items:end;margin-top:8px;font-size:10px;line-height:1.7;color:#aabeb0}.scene-caption strong{font-weight:400;color:#e4e7dc}.scene-number{letter-spacing:2px;font-size:9px}.categories{border-top:1px solid #ffffff21;margin-top:27px;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#bac9bd;font-size:9px;letter-spacing:.4px}.categories i{width:3px;height:3px;background:var(--gold);border-radius:50%}.login-panel{padding:46px 10% 25px;display:flex;flex-direction:column}.portal-label{display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:1.5px;color:#7c857a;justify-content:flex-end;white-space:nowrap}.status-dot{width:5px;height:5px;border-radius:50%;background:#44634a}.label-line{width:22px;height:1px;background:#d2d7cb;margin:0 4px}.login-content{width:100%;max-width:380px;margin:auto; padding:55px 0 40px}.welcome-icon{width:44px;height:44px;border:1px solid #dce1d5;border-radius:12px;background:#eff1e9;display:grid;place-items:center;margin-bottom:28px}.welcome-icon svg{width:21px;height:21px}.login-eyebrow{font-size:8px;color:#8a927f;letter-spacing:2px;margin-bottom:14px}h2{font-family:Georgia,"Times New Roman",serif;font-size:43px;letter-spacing:-1.7px;font-weight:400;margin:0 0 15px}.login-description{font-size:12px;color:var(--muted);line-height:1.9;margin:0 0 33px}label{display:block;font-size:11px;font-weight:600;margin:0 0 10px}.input-wrap{position:relative;display:flex;align-items:center;margin-bottom:22px}.input-wrap>svg{position:absolute;left:15px;width:17px;height:17px;fill:none;stroke:#8b9587;stroke-width:1.5;pointer-events:none}input:not([type=hidden]){width:100%;height:51px;background:#fffefa;border:1px solid #dedfd5;border-radius:5px;color:var(--ink);padding:0 17px 0 44px;font-size:12px;outline:none;transition:border-color .2s,box-shadow .2s}input::placeholder{color:#a0a498}input:focus{border-color:#648270;box-shadow:0 0 0 3px #153e3510}#password{padding-right:62px}.show-password{position:absolute;right:10px;padding:8px;background:none;border:0;font-size:10px;color:#667860;cursor:pointer}.sign-in{margin-top:5px;width:100%;height:53px;border:0;border-radius:5px;background:var(--green);color:#f5f4ec;display:flex;align-items:center;justify-content:space-between;padding:0 21px;font-size:11px;font-weight:600;cursor:pointer;box-shadow:0 5px 12px #153e3510;transition:background .2s,transform .2s}.sign-in:hover{background:#265449;transform:translateY(-1px)}.sign-in>span+span{font-size:21px;font-weight:400;color:#d5c49c}.sign-in:disabled{opacity:.65;cursor:wait;transform:none}button:focus-visible,a:focus-visible{outline:2px solid #a58a51;outline-offset:4px}.access-note{display:flex;justify-content:center;align-items:center;gap:7px;color:#8d9586;font-size:9px;margin:17px 0 30px}.access-note svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}.help-note{border-top:1px solid #e5e6dd;padding-top:23px;font-size:10px;line-height:1.9;color:#93978c}.help-note>span{color:#596a58}footer{display:flex;flex-direction:column;gap:8px;text-align:center;font-size:8px;color:#959b8e;line-height:1.6}footer a{text-decoration:none;color:#64745f}#logmsg{padding:12px 14px;background:#f8ebe5;border:1px solid #e7c9bb;color:#8a4330;font-size:12px;line-height:1.6;border-radius:5px;margin-bottom:20px}@media(min-width:1500px){.showcase{padding-left:12%;padding-right:12%}.story{margin-top:80px}.faucet{max-height:390px}}@media(max-width:1000px){.showcase{padding:35px 8% 25px}.login-panel{padding:37px 10% 24px}.categories{font-size:8px;letter-spacing:0}.story{margin-top:60px}h2{font-size:37px}.portal-label{font-size:7px;letter-spacing:1px}}@media(max-width:700px){.portal{grid-template-columns:1fr}.showcase{padding:25px 7% 23px}.brand{font-size:15px}.brand-mark{width:41px;height:41px}.story{margin-top:33px}h1{font-size:53px;line-height:1.02;margin:18px 0}.intro{font-size:11px;max-width:70%;line-height:1.8}.eyebrow{font-size:7px;letter-spacing:1.6px}.product-scene{position:absolute;right:-62px;bottom:27px;width:260px;min-height:0;opacity:.7;pointer-events:none}.scene-label,.scene-caption{display:none}.categories{position:relative;margin-top:25px;justify-content:flex-start;gap:16px}.login-panel{padding:26px 8%}.portal-label{justify-content:center}.login-content{padding:34px 0;max-width:420px}.welcome-icon{display:none}h2{font-size:39px}.login-description{margin-bottom:25px}.login-eyebrow{margin-bottom:12px}footer{font-size:9px}.help-note{padding-top:18px}.access-note{margin-bottom:24px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Solar identity and viewport-balanced portal layout. */
.portal{grid-template-columns:55% 45%}.showcase{padding:32px clamp(28px,5vw,80px) 25px}.story{margin-top:clamp(30px,5vh,58px)}h1{font-size:clamp(43px,4.4vw,72px);letter-spacing:-2.6px;line-height:1.08;margin:20px 0}h1 em{color:#ebcc79}.intro{font-size:14px;line-height:1.8}.product-scene{min-height:170px;margin-top:0}.faucet{width:95%;max-height:235px}.scene-label{top:22px}.scene-caption{margin-top:0}.categories{flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-top:18px;padding-top:18px}.categories span{border:1px solid #ffffff24;border-radius:30px;padding:7px 11px;font-size:10px}.login-panel{padding:32px clamp(25px,4.5vw,72px) 22px;background-image:linear-gradient(#153e3503 1px,transparent 1px),linear-gradient(90deg,#153e3503 1px,transparent 1px);background-size:40px 40px}.login-content{max-width:400px;padding:28px 0}.welcome-icon{margin-bottom:20px}.login-description{font-size:13px;margin-bottom:25px}.help-note{padding-top:17px}.access-note{margin-bottom:22px}.login-panel footer{font-size:9px}.input-wrap{margin-bottom:19px}.portal>*{min-width:0}@media(min-width:701px) and (max-height:760px){.story{margin-top:28px}.showcase{padding-top:26px}.faucet{max-height:190px}.scene-caption{font-size:9px}.welcome-icon{display:none}.login-content{padding:24px 0}.login-description{margin-bottom:23px}.categories{margin-top:12px;padding-top:14px}h2{font-size:39px}}@media(max-width:700px){.portal{grid-template-columns:1fr}.showcase{padding:25px 7%}.story{margin-top:30px}h1{font-size:clamp(38px,8.5vw,58px);letter-spacing:-1.8px}.intro{max-width:100%;font-size:12px}.product-scene{position:relative;right:auto;bottom:auto;width:100%;min-height:0;opacity:1;margin-top:0}.faucet{max-height:170px;width:90%}.scene-caption{display:none}.categories{gap:6px;margin-top:8px;padding-top:16px}.categories span{font-size:9px;padding:6px 9px}.login-panel{padding:27px 8%}.login-content{padding:32px 0}.portal-label{font-size:8px}.login-description{font-size:12px}.welcome-icon{display:none}}
/* Fill the login column and keep the portal within the available screen. */
.portal{grid-template-columns:1fr 1fr;min-height:100dvh}
.login-panel{padding:24px clamp(24px,3vw,48px) 18px}
.login-content{max-width:none;margin:auto 0;padding:20px 0}
.login-content h2{font-size:clamp(36px,3.5vw,54px)}
.login-description{font-size:14px}
input:not([type=hidden]){height:56px;font-size:14px}
.sign-in{height:56px;font-size:13px}
label{font-size:12px}
.showcase{padding:26px clamp(28px,4vw,64px) 22px}
.story{margin-top:28px}
.product-scene{min-height:0}
.faucet{max-height:clamp(120px,25vh,230px)}
@media(min-width:701px) and (max-height:800px){
 .welcome-icon{display:none}.login-content{padding:16px 0}
 .login-description{margin-bottom:20px}.input-wrap{margin-bottom:17px}
 .access-note{margin:14px 0 18px}.help-note{padding-top:14px}
 .story{margin-top:22px}h1{margin:16px 0}.categories{margin-top:12px;padding-top:12px}
}
@media(min-width:701px) and (max-height:650px){
 .showcase,.login-panel{padding-top:18px;padding-bottom:14px}
 .story{margin-top:15px}h1{font-size:clamp(36px,4vw,56px);margin:12px 0}
 .intro{font-size:12px;margin:8px 0}.scene-caption,.scene-label{display:none}
 .faucet{max-height:125px}.categories span{padding:5px 8px}
 .login-eyebrow{margin:0 0 9px}.login-content h2{font-size:36px;margin-bottom:10px}
 .login-description{font-size:12px;line-height:1.6;margin-bottom:16px}
 .input-wrap{margin-bottom:14px}input:not([type=hidden]),.sign-in{height:46px}
 .access-note{margin:10px 0}.help-note{padding-top:10px}
}
@media(max-width:700px){
 .portal{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:100dvh}
 .showcase{padding:16px 24px}.brand{font-size:14px}.brand-mark{width:36px;height:36px;font-size:26px}
 .brand small{font-size:7px}.story,.product-scene,.categories{display:none}
 .login-panel{padding:18px 24px 14px}.portal-label{justify-content:flex-start;font-size:7px}
 .login-content{max-width:none;padding:20px 0}.login-content h2{font-size:36px}
 .login-description{font-size:12px;line-height:1.7;margin-bottom:20px}
 .input-wrap{margin-bottom:16px}input:not([type=hidden]),.sign-in{height:49px}
 .access-note{margin:12px 0 16px}.help-note{padding-top:14px}
 footer{gap:4px}.login-panel footer{font-size:8px}
}
@media(max-width:700px) and (max-height:650px){
 .login-panel{padding-top:12px}.login-content{padding:14px 0}
 .login-eyebrow,.help-note{display:none}.login-description{margin-bottom:16px}
 .login-content h2{font-size:32px;margin-bottom:10px}.access-note{margin-bottom:0}
}
/* Match the reference portal's bold Segoe UI typography. */
body{font-family:"Segoe UI",Arial,sans-serif}
h1,.login-content h2{font-family:"Segoe UI",Arial,sans-serif;font-weight:700;letter-spacing:-.055em;line-height:1.05}
h1{font-size:clamp(40px,4.4vw,68px)}h1 em{font-style:normal;font-weight:700}
.login-content h2{font-size:clamp(34px,3.8vw,48px);letter-spacing:-.045em}
.brand{font-size:clamp(25px,2.3vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.brand small{font-size:10px;font-weight:600;letter-spacing:.18em;margin-top:7px;line-height:1.2}
.eyebrow{font-weight:800}.login-eyebrow{font-size:10px;letter-spacing:.13em}
label{font-weight:800;text-transform:uppercase;letter-spacing:.06em}.sign-in{font-weight:800;font-size:14px}
@media(max-width:700px){.brand{font-size:25px}.brand small{font-size:8px}.login-content h2{font-size:36px}.login-eyebrow{font-size:9px}}
@media(max-width:700px) and (max-height:650px){.login-content h2{font-size:32px}}
/* Give the login panel more space with a finer background grid. */
.portal{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
.login-panel{background-size:24px 24px}
@media(max-width:700px){.portal{grid-template-columns:minmax(0,1fr)}}
/* Place the wider login panel on the left. */
.portal{grid-template-columns:minmax(0,56fr) minmax(0,44fr)}
.login-panel{grid-column:1;grid-row:1;background-size:18px 18px}
.showcase{grid-column:2;grid-row:1}
@media(max-width:700px){
 .portal{grid-template-columns:minmax(0,1fr)}
 .showcase{grid-column:1;grid-row:1}
 .login-panel{grid-column:1;grid-row:2}
}
/* Keep the current column widths, with imagery left and login right. */
.showcase{grid-column:1;grid-row:1}
.login-panel{grid-column:2;grid-row:1}
@media(max-width:700px){
 .showcase{grid-column:1;grid-row:1}
 .login-panel{grid-column:1;grid-row:2}
}
/* Larger brand, product description, and energy illustration. */
.brand{gap:12px;font-size:clamp(19px,2vw,32px);letter-spacing:-.04em}
.brand-name{white-space:nowrap}.brand-mark{flex-shrink:0}
.intro{font-size:clamp(17px,1.5vw,22px);line-height:1.65}
.faucet{width:112%;max-height:clamp(200px,34vh,330px)}
@media(min-width:701px) and (max-height:650px){
 .intro{font-size:16px;line-height:1.5}
 .faucet{max-height:190px}
}
@media(min-width:701px) and (max-width:1000px){.brand{font-size:19px;gap:8px}.brand-mark{width:36px;height:36px}}
@media(max-width:700px){
 .brand{font-size:clamp(15px,4vw,24px);gap:8px;letter-spacing:-.04em}
 .brand-mark{width:30px;height:32px;padding-left:4px}
}
/* Enlarge the product group while retaining the screen-height layout. */
.brand{font-size:clamp(18px,1.8vw,29px)}
.faucet{width:112%;max-height:clamp(210px,35vh,340px)}
@media(min-width:701px) and (max-height:650px){.faucet{max-height:210px}}
@media(min-width:701px) and (max-width:1000px){.brand{font-size:17px}}
@media(max-width:700px){.brand{font-size:clamp(13px,3.6vw,22px)}}

/* Custom OB energy monogram. */
.brand{gap:14px}
.brand-mark{display:block;width:56px;height:56px;padding:0;border:0;flex:0 0 auto;filter:drop-shadow(0 3px 7px #08271d30)}
@media(min-width:701px) and (max-width:1000px){.brand{gap:10px}.brand-mark{width:44px;height:44px}}
@media(max-width:700px){.brand{gap:10px}.brand-mark{width:36px;height:36px}}
/* Larger, unboxed gold monogram. */
.brand-mark{width:82px;height:64px;filter:none}
@media(min-width:701px) and (max-width:1000px){.brand-mark{width:62px;height:48px}.brand{font-size:16px}}
@media(max-width:700px){.brand-mark{width:44px;height:34px}.brand{gap:8px;font-size:clamp(12px,3.5vw,22px)}}
@media(min-width:701px) and (min-height:651px) and (max-height:800px){.story{margin-top:12px}}

/* Daso: two-line brand name (DASO / BUILDING & ENTERPRISE). */
.brand-name small{display:block;margin-top:8px;font-size:.7em;font-weight:800;letter-spacing:.12em;line-height:1;color:#f2d98f}