/* Whitecote INC login. All illustrations use local PNG assets. */
:root {
  color-scheme: light;
  --wc-green:#006439;
  --wc-deep:#183d31;
  --wc-text:#254339;
  --wc-muted:#587064;
  --wc-border:#dce7dc;
  --wc-bg:#f6f8f3;
  --wc-peach:#fff0df;
  --wc-focus:#d26812;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
*, *::before, *::after {box-sizing:border-box}
html {height:100%; scroll-behavior:smooth}
body {margin:0; min-width:320px; min-height:100%; color:var(--wc-text); background:var(--wc-bg)}
a {color:var(--wc-green)}
button, input {font:inherit}
button {cursor:pointer}
.wc-page {min-height:100vh; min-height:100svh; display:flex; flex-direction:column}
.wc-header {flex:0 0 auto; height:66px; background:#fff; border-bottom:1px solid #e4eae3}
.wc-header-inner {max-width:1240px; height:100%; padding:0 28px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px}
.wc-brand {display:flex; align-items:center; gap:10px; color:var(--wc-deep); text-decoration:none; border-radius:10px}
.wc-brand img {object-fit:contain; width:44px; height:44px}
.wc-brand-text {display:flex; flex-direction:column; line-height:1.05}
.wc-brand strong {font-size:23px; letter-spacing:-.8px; font-weight:800}
.wc-brand small {font-size:9px; letter-spacing:2.6px; font-weight:800; padding-top:5px}
.wc-home-link {display:inline-flex; align-items:center; gap:10px; border:1px solid var(--wc-border); border-radius:99px; padding:10px 17px; text-decoration:none; font-size:13px; font-weight:750; background:#f8faf7; white-space:nowrap; transition:background .2s,transform .2s}
.wc-home-link:hover {background:#e7f0e6; transform:translateX(-2px)}
.wc-main {flex:1 0 auto; display:flex; align-items:center; justify-content:center; padding:34px 24px}
.wc-login-shell {display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); max-width:1080px; width:100%; min-height:548px; overflow:hidden; border:1px solid #d8e5d7; border-radius:25px; background:#fff; box-shadow:0 14px 46px rgba(28,67,43,.07)}
.wc-intro {position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; padding:36px 30px 27px; background:linear-gradient(133deg,#e5f0e7 3%,#f6f4df 72%,#fff0d8 100%); border-right:1px solid #e4e7da}
.wc-intro::before {content:""; position:absolute; z-index:-1; background:#e4efda; border-radius:50%; width:370px; height:370px; left:-160px; bottom:-240px}
.wc-intro::after {content:""; position:absolute; z-index:-1; border-radius:50%; background:rgba(255,212,137,.23); width:220px; height:220px; right:-125px; top:-105px}
.wc-eyebrow {display:flex; align-items:center; justify-content:center; gap:10px; font-size:11px; font-weight:850; letter-spacing:1.7px; color:#427458}
.wc-eyebrow span {font-size:18px}
.wc-intro h1 {font-family:Georgia, "Times New Roman", serif; font-size:clamp(36px,3.3vw,48px); color:#183d31; line-height:1.13; letter-spacing:-1.7px; margin:25px 0 11px}
.wc-intro h1 em {font-style:normal; color:var(--wc-green)}
.wc-intro p {font-size:15px; color:#557365; line-height:1.6; max-width:340px; margin:0}
.wc-illustration {width:min(100%,410px); flex:1; min-height:205px; display:grid; place-items:center; padding:13px 0 10px}
.wc-illustration img {display:block; max-width:100%; max-height:247px; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 11px 11px rgba(55,83,61,.09))}
.wc-values {display:flex; gap:12px; justify-content:center; align-items:center; color:#487057; font-size:12px; font-weight:750; letter-spacing:.25px}
.wc-values i {color:#ed8e64; font-style:normal}
.wc-burst {position:absolute; color:#f4d69d; user-select:none; z-index:-1}
.wc-burst-1 {right:23px; top:36%; font-size:72px}
.wc-burst-2 {left:33px; bottom:25%; font-size:30px}
.wc-signin {display:flex; flex-direction:column; justify-content:center; padding:40px clamp(28px,5vw,68px) 28px; min-width:0}
.wc-small-label {font-size:10px; letter-spacing:1.55px; font-weight:850; color:#55816a}
.wc-small-label span {color:#31a367; margin-right:5px}
.wc-form-head h2 {font-family:Georgia, "Times New Roman", serif; color:var(--wc-deep); letter-spacing:-1.3px; font-size:39px; margin:12px 0 8px; font-weight:700; line-height:1.12}
.wc-form-head p {font-size:14px; color:var(--wc-muted); line-height:1.55; margin:0 0 30px}
.wc-field {margin:0 0 20px}
.wc-field label {font-size:13px; font-weight:750; color:var(--wc-deep); display:inline-block; margin-bottom:8px}
.wc-field input {background:#f9fbf8; width:100%; min-height:49px; border:1.5px solid #cadbcb; border-radius:12px; padding:12px 15px; font-size:16px; color:var(--wc-deep); transition:border-color .2s, box-shadow .2s, background .2s}
.wc-field input::placeholder {color:#738b7d; opacity:1}
.wc-field input:hover {border-color:#89b29b}
.wc-field input:focus {outline:0; border-color:#087446; background:#fff; box-shadow:0 0 0 4px rgba(0,100,57,.13)}
.wc-label-row {display:flex; align-items:center; justify-content:space-between; gap:12px}
.wc-forgot {font-size:12px; font-weight:750; text-underline-offset:3px; white-space:nowrap; margin-bottom:8px}
.wc-password-wrap {position:relative}
.wc-password-wrap input {padding-right:76px}
.wc-toggle-password {position:absolute; top:50%; right:8px; transform:translateY(-50%); padding:8px 11px; border:0; border-radius:8px; background:#ecf2ec; color:#285c41; font-size:12px; font-weight:850}
.wc-toggle-password:hover {background:#dfeadd}
.wc-submit {margin:7px 0 0; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:0 19px; height:51px; border:1px solid #006439; background:#006439; color:#fff; border-radius:12px; font-size:15px; font-weight:800; box-shadow:0 5px 13px rgba(0,100,57,.13); transition:background .18s, transform .18s}
.wc-submit:hover {background:#00502e; transform:translateY(-1px)}
.wc-submit span {font-size:24px; font-weight:400}
.wc-form-foot {display:flex; gap:7px; align-items:center; margin-top:28px; border-top:1px solid #eaf0ea; padding-top:19px; color:#698477; font-size:11px}
.wc-lock {color:var(--wc-green); font-size:9px}
.wc-server-error {display:flex; align-items:flex-start; gap:12px; border-radius:11px; border:1px solid #e1aca6; background:#fff2ef; color:#8b2d24; padding:12px 13px; font-size:13px; line-height:1.45; margin:-6px 0 17px}
.wc-server-error span {font-weight:900}
.wc-server-error p {margin:0}
.wc-field-error {display:block; color:#a12f25; font-size:12px; line-height:1.4}
.wc-field-error:empty {display:none}
.wc-footer {flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; max-width:1240px; width:100%; margin:auto; padding:10px 28px 16px; gap:12px; font-size:11px; font-weight:650; color:#637f70}
.wc-footer a {color:#246044; text-decoration:underline; text-underline-offset:2px; white-space:nowrap}
.wc-footer-dot {color:#d79863; padding:0 5px}
.wc-skip {position:absolute; z-index:1000; top:-100px; left:12px; padding:10px 14px; background:#fff; color:var(--wc-deep)}
.wc-skip:focus {top:10px}
:where(a,button):focus-visible {outline:3px solid var(--wc-focus); outline-offset:4px}
@media(max-width:760px) {
 .wc-header {height:61px}
 .wc-header-inner {padding:0 18px}
 .wc-brand strong {font-size:20px}
 .wc-brand small {font-size:8px}
 .wc-brand img {height:41px; width:41px}
 .wc-home-link {font-size:12px; padding:9px 12px}
 .wc-main {padding:12px 14px 10px; align-items:flex-start}
 .wc-login-shell {grid-template-columns:minmax(0,1fr); max-width:520px; min-height:auto; border-radius:20px}
 .wc-intro {padding:20px 20px 15px; border-right:0; border-bottom:1px solid #e3e9df}
 .wc-eyebrow {font-size:9px}
 .wc-intro h1 {font-size:32px; margin:9px 0 5px}
 .wc-intro p {font-size:12px; max-width:360px}
 .wc-illustration {min-height:110px; padding:2px 0 0}
 .wc-illustration img {width:225px; max-height:140px}
 .wc-values {font-size:10px; gap:9px; margin-top:1px}
 .wc-burst-1 {font-size:39px; right:15px}
 .wc-signin {padding:23px 26px 22px}
 .wc-form-head h2 {font-size:32px; margin:8px 0 4px}
 .wc-form-head p {margin-bottom:19px; font-size:13px}
 .wc-field {margin-bottom:14px}
 .wc-form-foot {margin-top:19px; padding-top:15px}
 .wc-footer {font-size:10px; padding:8px 18px 15px; flex-wrap:wrap; gap:7px}
}
@media(max-width:380px) {
 .wc-home-link {padding:9px 11px; gap:0}
 .wc-home-link span:last-child {display:none}
 .wc-home-link span:first-child {font-size:20px; line-height:1}
 .wc-login-shell {border-radius:17px}
 .wc-intro {padding:16px 12px 10px}
 .wc-illustration img {width:196px; max-height:122px}
 .wc-signin {padding:20px 19px}
 .wc-intro p {font-size:11.5px}
}
@media(max-height:700px) and (min-width:761px) {
 .wc-main {padding:15px 20px}
 .wc-login-shell {min-height:490px}
 .wc-intro {padding-top:23px; padding-bottom:20px}
 .wc-intro h1 {margin-top:13px}
 .wc-illustration img {max-height:210px}
 .wc-signin {padding-top:25px;padding-bottom:20px}
 .wc-form-head p {margin-bottom:18px}
 .wc-field {margin-bottom:14px}
 .wc-form-foot {margin-top:16px;padding-top:13px}
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after {scroll-behavior:auto !important; transition:none !important; animation:none !important}
}
/* Accessible text colours, including placeholder and low-emphasis text. */
.wc-intro p {color:#4e685a}
.wc-small-label {color:#476e58}
.wc-field input::placeholder {color:#576d61}
.wc-form-foot {color:#4e6a5b}
.wc-footer {color:#4c6758}
@media(max-width:760px) {
  /* Hub link already in header; omit repetitive footer on mobile to keep
     the complete login form within a typical phone screen. */
  .wc-footer {display:none}
}