:root{color-scheme:light}
body{margin:0;background:#eef1f2;color:#192e38;font-family:Inter,"Segoe UI",sans-serif}
.portal-backdrop{position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,27,31,.66),rgba(11,27,34,.15)),url("/assets/construction/hero.webp") center/cover no-repeat}
body:not(.portal-signin) .portal-backdrop{opacity:.13}
#customer-portal{max-width:1100px;margin:auto;padding:40px 28px 120px}
.portal-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:17px;font-weight:750;letter-spacing:2px}
.portal-brand img{padding:5px;background:#fff;border-radius:13px;box-sizing:border-box;box-shadow:0 3px 14px #0002}
.portal-brand small{display:block;margin-top:4px;font-size:11px;letter-spacing:.7px;font-weight:450}
.portal-signin{color:#fff;min-height:100svh}
.portal-signin #customer-portal{max-width:1480px;min-height:100svh;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 460px;grid-template-rows:auto 1fr auto;gap:36px 90px;padding:38px 64px 28px}
.portal-signin .portal-brand{grid-column:1/-1;justify-self:start}
.portal-welcome{align-self:center;padding-bottom:30px}
.portal-eyebrow{font-size:11px;letter-spacing:2px;font-weight:650;line-height:1.6}
.portal-welcome .portal-eyebrow{color:#f1d4a4;letter-spacing:1.7px}
.portal-welcome h1{font-size:clamp(42px,5.2vw,78px);line-height:1.08;letter-spacing:-3px;font-weight:500;margin:20px 0 26px}
.portal-welcome>p:last-child{font-size:17px;line-height:1.8;color:#f0f1ed;margin:0}
.portal-login{align-self:center}
.portal-signin .portal-glass{box-sizing:border-box;padding:36px 38px 26px;margin:0;border:1px solid #ffffffb3;border-radius:28px;background:linear-gradient(135deg,#fffffff0,#ffffffcf);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);box-shadow:0 24px 80px #061b304d,inset 0 1px 0 #fff;color:#192e38;animation:portal-arrive .65s ease-out both}
.portal-card-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#1c3942;color:#edcf9c;font-size:25px;margin-bottom:26px}
.portal-glass .portal-eyebrow{color:#5b6e74;margin:0 0 8px}
.portal-glass h2{font-size:33px;letter-spacing:-1px;font-weight:600;margin:0 0 8px}
.portal-glass .portal-intro{color:#50626a;margin:0 0 28px;font-size:14px;line-height:1.7}
.portal-glass label{display:block;color:#263e48;font-size:13px;font-weight:600;margin:0 0 20px}
.portal-glass input{box-sizing:border-box;display:block;width:100%;min-height:50px;padding:13px 15px;margin-top:8px;border:1px solid #b5c2c8;border-radius:11px;background:#ffffffbd;color:#152f39;font:400 16px Inter,"Segoe UI",sans-serif;transition:border-color .2s,box-shadow .2s}
.portal-glass input::placeholder{color:#65777e}
.portal-glass input:focus{outline:2px solid #007aff;outline-offset:2px;border-color:#007aff}
.portal-glass .portal-submit{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:50px;padding:13px 18px;border-radius:11px;border:1px solid #18343e;background:#18343e;color:white;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.portal-glass .portal-submit:hover{background:#284d59;box-shadow:0 5px 18px #18343e24;transform:translateY(-1px)}
.portal-glass button:focus-visible,.portal-signin a:focus-visible{outline:2px solid #007aff;outline-offset:4px}
.portal-create{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:24px;padding-top:22px;border-top:1px solid #243b4226;font-size:13px;color:#50626a}
.portal-glass .portal-create button{border:0;background:transparent;box-shadow:none;padding:5px 3px;color:#183e50;font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.portal-glass [role=status]{color:#99352e;font-size:13px;line-height:1.5;margin:16px 0 0}
.portal-glass [role=status]:empty{display:none}
.portal-help{text-align:center;font-size:13px;color:#fff;margin:20px 0 0;text-shadow:0 1px 8px #000}
.portal-help a{color:#fff;font-weight:600;text-underline-offset:4px}
.portal-footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;padding-right:0;font-size:12px}
.portal-footer a{color:#f1f4f2;text-decoration:none;text-shadow:0 1px 6px #000}
.portal-footer a:hover{text-decoration:underline}
@keyframes portal-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1000px){.portal-signin .portal-footer{padding-right:0;margin-bottom:45px}}
@media(max-width:1000px){.portal-signin #customer-portal{grid-template-columns:minmax(0,1fr) 400px;gap:32px;padding:28px 32px 110px}.portal-glass{padding:28px!important}.portal-welcome h1{letter-spacing:-2px}}
@media(max-width:720px){.portal-signin #customer-portal{display:flex;flex-direction:column;gap:26px;padding:24px 20px 120px}.portal-brand{font-size:15px}.portal-welcome{align-self:stretch;padding:12px 2px 0}.portal-welcome h1{font-size:40px;letter-spacing:-1.6px;line-height:1.12;margin:12px 0 14px}.portal-welcome .portal-eyebrow{font-size:10px}.portal-welcome>p:last-child{font-size:14px;line-height:1.6}.portal-welcome>p:last-child br{display:none}.portal-login{width:100%;max-width:450px;align-self:center}.portal-signin .portal-glass{border-radius:24px;padding:26px!important}.portal-card-mark{display:none}.portal-glass h2{font-size:28px}.portal-glass .portal-intro{margin-bottom:22px}.portal-footer{width:100%;margin-top:auto}.portal-backdrop{background-position:58% center}.portal-help{margin:16px 0 0}}
@media(prefers-reduced-motion:reduce){.portal-glass{animation:none!important}.portal-glass *{transition:none!important}}
@supports not (backdrop-filter:blur(1px)){.portal-signin .portal-glass{background:#f5f7f5}}
body{isolation:isolate}.portal-backdrop{z-index:0;pointer-events:none}#customer-portal{position:relative;z-index:1}
@media(max-width:720px){.portal-signin .chat-launch{width:46px;min-width:46px;height:46px;min-height:46px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;right:12px;bottom:14px}.portal-signin .chat-launch [data-chat-launch-label]{display:none}.portal-signin .chat-launch-symbol{font-size:22px;margin:0}.portal-welcome h1{font-size:36px}}
@media(max-width:720px){body.portal-signin .chat-launch.attention-chat-button{width:46px!important;min-width:46px!important;max-width:46px!important;padding:0!important}}

/* Signed-in customer workspace */
body:has(.portal-home) {
  min-height: 100vh;
  background: #eaf1f6;
}
body:has(.portal-home) .portal-backdrop {
  background:
    radial-gradient(ellipse at 8% 0%, #c9e7fb 0, transparent 53%),
    radial-gradient(ellipse at 100% 37%, #d9cfee 0, transparent 52%),
    linear-gradient(135deg, #eaf3fa, #dcebe9);
  opacity: 1;
}
body:has(.portal-home) #customer-portal {
  max-width: 1320px;
}
.portal-home {
  --portal-ink: #162c40;
  --portal-muted: #41586d;
  --portal-edge: #ffffffd9;
  --portal-surface: linear-gradient(145deg, #ffffffcf, #ffffff75);
  --portal-inset: #ffffff70;
  --portal-link: #154f83;
  color: var(--portal-ink);
}
[data-portal-theme="dark"] .portal-home {
  --portal-ink: #edf4ff;
  --portal-muted: #bfcee0;
  --portal-edge: #a1c2e442;
  --portal-surface: linear-gradient(145deg, #263a54e6, #16263bdc);
  --portal-inset: #0e1b2b77;
  --portal-link: #9ed3ff;
  color-scheme: dark;
}
body[data-portal-theme="dark"] .portal-backdrop {
  background:
    radial-gradient(ellipse at 0 0, #274e77, transparent 58%),
    radial-gradient(ellipse at 100% 32%, #3a305c, transparent 52%),
    #101d2d;
}
@media(prefers-color-scheme:dark) {
  [data-portal-theme="system"] .portal-home {
    --portal-ink: #edf4ff;
    --portal-muted: #bfcee0;
    --portal-edge: #a1c2e442;
    --portal-surface: linear-gradient(145deg, #263a54e6, #16263bdc);
    --portal-inset: #0e1b2b77;
    --portal-link: #9ed3ff;
    color-scheme: dark;
  }
  body[data-portal-theme="system"] .portal-backdrop {
    background:
      radial-gradient(ellipse at 0 0, #274e77, transparent 58%),
      radial-gradient(ellipse at 100% 32%, #3a305c, transparent 52%),
      #101d2d;
  }
}
.portal-home-header,.portal-home-hero,.portal-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.portal-home-header,.portal-home-hero { justify-content:space-between; }
.portal-home-header { margin-bottom:24px; }
.portal-home .portal-brand { color:inherit; }
.portal-pane,.portal-dialog {
  background:var(--portal-surface);
  border:1px solid var(--portal-edge);
  border-radius:23px;
  box-shadow:0 16px 44px #19314c20,inset 0 1px #ffffff29;
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  padding:24px;
  color:var(--portal-ink);
}
.portal-home-hero {
  min-height:155px;
  margin-bottom:20px;
  padding:clamp(22px,4vw,46px);
  background:
    radial-gradient(ellipse at 100% 0,#518dca39,transparent 67%),
    var(--portal-surface);
}
.portal-home-hero h1 { font-size:clamp(25px,4vw,42px);letter-spacing:-.04em;margin:0;overflow-wrap:anywhere; }
.portal-home-grid { display:grid;grid-template-columns:minmax(0,1.85fr) minmax(270px,1fr);gap:20px;align-items:start; }
.portal-main-column,.portal-side-column { display:grid;gap:20px;min-width:0; }
.portal-pane h2,.portal-dialog h2 { margin:0 0 15px;font-size:1.2rem; }
.portal-muted { color:var(--portal-muted); }
.portal-home .portal-pane a { color:var(--portal-link); }
.portal-home button:not(.primary),.portal-home a.secondary {
  background:var(--portal-inset);
  color:var(--portal-ink);
  border:1px solid var(--portal-edge);
  border-radius:999px;
  min-height:40px;
  padding:8px 14px;
}
.portal-home button:focus-visible,.portal-home a:focus-visible,.portal-home select:focus-visible {
  outline:3px solid #538deb;
  outline-offset:3px;
}
.portal-filters { display:flex;flex-wrap:wrap;gap:7px; }
.portal-home .portal-filters button[aria-pressed="true"] { background:#214e76;color:white;border-color:#638eb5; }
.portal-project-group { margin-top:22px; }
.portal-project-group h3 { display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:1rem; }
.portal-project-group h3 span { color:var(--portal-muted);font-size:.85rem; }
.portal-project { padding:16px;margin-top:10px;border:1px solid var(--portal-edge);border-radius:14px;background:var(--portal-inset); }
.portal-project h3 { margin-top:8px; }
.portal-status { font-size:.75rem;color:var(--portal-link); }
.portal-representative { font-size:1.13rem;font-weight:650;margin:0 0 9px; }
.portal-site-list { list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px; }
.portal-site-list li { display:flex;justify-content:space-between;align-items:center;gap:10px; }
.portal-site-list li a { border-radius:999px;background:var(--portal-inset);padding:9px 12px;border:1px solid var(--portal-edge); }
.portal-site-list li a:hover { text-decoration:underline; }
.portal-dialog { width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
.portal-dialog::backdrop { background:#0a182973;backdrop-filter:blur(5px); }
.portal-dialog :is(select,input),.portal-home .portal-project input:not([type=checkbox]) { background:var(--portal-inset);color:var(--portal-ink);border:1px solid var(--portal-edge); }
.portal-dialog dt { color:var(--portal-muted);font-size:.8rem; }
.portal-dialog dd { margin:3px 0 14px;overflow-wrap:anywhere; }
.portal-home [hidden] { display:none !important; }
@media(max-width:760px) {
  .portal-home-grid { grid-template-columns:minmax(0,1fr); }
  .portal-pane { padding:19px; }
}

.portal-order-tag{display:inline-block;padding:3px 10px;border-radius:99px;font-weight:650;background:var(--portal-inset);color:var(--portal-ink)}
.portal-order-tag[data-state="pending"]{background:#ffe8bf;color:#5f3600}
.portal-order-tag[data-state="shipped"]{background:#d6e9ff;color:#153f71}
.portal-order-tag[data-state="delivered"]{background:#d6f6e9;color:#105840}
.portal-order-tag[data-state="cancelled"]{background:#ffdedf;color:#78272c}
.portal-glass .inline-check input[type="checkbox"]{display:inline-block;width:auto;min-height:0;margin:0 6px 0 0}
