:root{
  --navy:#002691;
  --black:#040405;
  --deep:#1A3A7A;
  --blue:#276FB1;
  --cyan:#2DA4DB;
  --footer:#06101F;
  --red:#EA252C;
  --white:#FFFFFF;
  --paper:#070B16;
  --border:#243049;
  --muted:#8B97AB;
  --ink:#E6EDF7;
  --card:#10182A;
  --sunk:#0A1220;
  --ok:#3DDB8A;
  --ok-soft:#123526;
  --warn:#E0B34A;
  --warn-soft:#2C2410;
  --crit:#EA252C;
  --crit-soft:#3A1418;
  --signal:#276FB1;
  --signal-soft:#10263A;
  --cyan-soft:#0E2A3A;
  --rule:#243049;
  --rule-2:#2E3C58;
  --ink-2:#8B97AB;
  --ink-3:#6D7A90;
  --label:#7EC8EA;
  --shadow:0 18px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);color-scheme:dark;
  font-family:Lato,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1280px;margin:0 auto;padding:18px 22px 80px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:12px;background:var(--card);color:var(--ink);padding:8px 12px;z-index:80}

a{color:var(--cyan)}
a.plain{color:inherit;text-decoration:none}
a.plain:hover{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Official logo — never stretch, crop, or recolor */
.logo-frame{background:#fff;display:flex;align-items:center;justify-content:center}
.logo{display:block;object-fit:contain;object-position:center;max-width:100%;height:auto}
.logo-frame.login{padding:36px 40px 8px;margin:0 auto}
.logo-frame.login .logo{width:min(460px,100%);height:auto}
.logo-frame.nav{padding:8px 14px 8px 0;background:transparent;border:0}
.logo-frame.nav .logo{height:52px;width:auto;max-width:280px}

/* Site chrome from harmercommunications.com: navy top bar, white logo bar, island silhouette */
.mast-top{background:var(--navy);color:#fff;font-size:12px;letter-spacing:.04em;font-weight:700}
.mast-top-in{max-width:1180px;margin:0 auto;padding:8px 22px;display:flex;justify-content:space-between;gap:12px;text-transform:uppercase}
.who-inline{display:none}
header.mast{position:sticky;top:0;z-index:40;background:var(--white);box-shadow:0 8px 24px rgba(0,0,0,.25);color-scheme:light}
.mast-brand{max-width:1180px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:16px}
.brand-link{display:flex;align-items:center;min-width:0;text-decoration:none;color:inherit;flex:1}
.brand-text{display:flex;flex-direction:column;gap:2px;padding-left:8px;border-left:1px solid #D6DEE8}
.brand-text b{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:.01em}
.brand-text span{font-size:11px;color:#5D6878;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.mast-nav{background:var(--navy);border-bottom:2px solid var(--cyan)}
.mast-nav .tabs{max-width:1180px;margin:0 auto;padding:0 14px;display:flex;gap:2px;flex-wrap:wrap;align-items:stretch}
.tab,.more summary{color:rgba(255,255,255,.84);text-decoration:none;font-weight:700;font-size:14px;
  letter-spacing:.015em;padding:14px 18px 12px;display:inline-flex;align-items:center;gap:6px;
  border-bottom:3px solid transparent;margin-bottom:-2px;background:transparent;border-radius:0}
.tab:hover,.more summary:hover{color:#fff;background:rgba(45,164,219,.14)}
.tab[aria-selected="true"],.more[open] summary{color:#fff;background:transparent;border-bottom-color:var(--cyan)}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:#5D6878;margin-left:auto}
.who em{font-style:normal;display:block;color:#7A8494;text-transform:capitalize}
.who .btn{background:#fff;color:#151A22;border-color:#D6DEE8}
.who .btn:hover{border-color:var(--navy);color:var(--navy)}
.mast-nav .more{display:inline-block}
.more{position:relative;color:#fff}
.more summary{list-style:none;cursor:pointer}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;margin-top:2px}
.more[open] summary::after{transform:rotate(180deg)}
.more-list{position:absolute;left:0;top:calc(100% + 2px);background:var(--card);border:1px solid var(--border);
  min-width:220px;z-index:50;box-shadow:var(--shadow);padding:6px 0}
.more-list a{display:block;padding:9px 16px;color:var(--ink);text-decoration:none;font-weight:700;font-size:13px}
.more-list a:hover,.more-list a.on{background:var(--cyan-soft);color:var(--cyan)}

.island-rule{display:none}
.island-rule.light{display:none}
.wave-bottom{height:22px;background:var(--navy);
  -webkit-mask:url(/static/brand/bottom-curve.png) center / 100% 22px no-repeat;
  mask:url(/static/brand/bottom-curve.png) center / 100% 22px no-repeat;
  margin-top:28px}
.site-foot{background:var(--footer);color:rgba(255,255,255,.72);text-align:center;padding:16px;font-size:13px;font-weight:700;letter-spacing:.03em;border-top:1px solid var(--border)}

/* Login */
.login-body{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
.login-card{width:min(480px,92%);margin:36px auto 0;background:var(--white);border:1px solid rgba(255,255,255,.08);
  padding:8px 32px 36px;box-shadow:var(--shadow);border-radius:8px;color-scheme:light}
.login-card h1{margin:4px 0 0;font-size:32px;color:var(--navy);text-align:center;font-weight:700}
.login-card .sub{text-align:center;color:var(--muted);margin:6px 0 22px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.login-form .fld{margin-top:12px}
.login-form input{width:100%}
.login-foot{text-align:center;margin-top:18px;font-size:14px}

/* Buttons / forms */
.btn{appearance:none;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:4px;border:1px solid var(--border);background:var(--card);color:var(--ink);
  letter-spacing:.02em}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#041018}
.btn.primary:hover{background:#5BBCED;border-color:#5BBCED;color:#041018}
.btn.sm{padding:4px 10px;font-size:12px}
.btn.lg{padding:12px 16px;font-size:15px}
.btn.wide{display:block;width:100%;text-align:center;text-decoration:none}
form.inline{display:inline}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{
  background:var(--sunk);border:1px solid var(--border);border-radius:4px;padding:8px 10px;color:var(--ink);
  font:inherit;font-size:14px;max-width:100%;width:100%}
.login-card input{background:#fff;color:#151A22;border-color:#D6DEE8}
label.fld{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700;margin:10px 0 4px}
.login-card label.fld{color:var(--navy)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row > div{min-width:140px;flex:1}
.card{border:1px solid var(--border);border-radius:8px;background:var(--card);padding:16px 18px;margin-top:14px}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.grid2 > *{min-width:0}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
.flash{border:1px solid var(--ok);background:var(--ok-soft);color:var(--ink);border-radius:4px;padding:10px 13px;margin:14px 0;font-size:14px}
.flash.err{border-color:var(--red);background:var(--crit-soft)}
.crumb{font-size:13px;color:var(--muted);margin:16px 0 4px}
.empty{color:var(--muted);font-size:14px;padding:14px 0}
.warn-inline{color:var(--red);font-size:13px}

/* Gates / dashboard tiles — hero landing */
.hero-ops{margin:4px 0 28px}
.hero-kicker{margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--label);font-weight:700}
.gates{display:grid;gap:10px}
.gates.hero{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.gate{background:var(--card);padding:18px 16px 16px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:inherit;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .15s ease,transform .15s ease}
.gate:hover{border-color:var(--cyan);transform:translateY(-1px)}
.gate .lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700;line-height:1.3}
.gate .num{font-size:44px;font-weight:700;margin-top:12px;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.gate.hot:not(.zero){border-color:rgba(224,179,74,.45)}
.gate.hot:not(.zero) .num{color:var(--warn)}
.gate.crit:not(.zero){border-color:rgba(234,37,44,.5)}
.gate.crit:not(.zero) .num{color:#FF6B70}
.gate.go:not(.zero) .num{color:#7EC8EA}
.gate.bill:not(.zero) .num{color:var(--cyan)}
.gate.zero .num{color:var(--ink-3)}
.hero-bill{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:12px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px 22px;text-decoration:none;color:inherit}
.hero-bill:hover{border-color:var(--cyan)}
.hero-bill .lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700}
.hero-bill .num{font-size:44px;font-weight:700;letter-spacing:-.04em;color:var(--cyan);font-variant-numeric:tabular-nums;line-height:1;margin-top:8px}
.hero-bill.zero .num{color:var(--ink-3)}
.hero-bill-go{font-size:13px;font-weight:700;color:var(--cyan);white-space:nowrap;padding-bottom:6px}
@media(max-width:1100px){.gates.hero{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.gates.hero{grid-template-columns:repeat(2,minmax(0,1fr))}.gate{min-height:96px}.gate .num,.hero-bill .num{font-size:36px}}
.bar{height:8px;background:var(--sunk);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--cyan)}
.stat{display:flex;gap:22px;flex-wrap:wrap}
.stat div span,.stat > span{display:block;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.stat div em{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* Tables */
.sec-h{display:flex;align-items:baseline;gap:12px;margin:28px 0 10px;flex-wrap:wrap}
.sec-h h2{font-size:20px;font-weight:700;margin:0;color:var(--ink)}
.sec-h p{margin:0;color:var(--muted);font-size:13px}
.scroll{overflow-x:auto;border:1px solid var(--border);border-radius:8px;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:720px}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700;
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--sunk);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(45,164,219,.08)}
.eu{font-weight:700;font-size:14px}
.dsc{color:var(--muted);font-size:13px}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.pillwrap{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;white-space:nowrap}
.p-crit{background:var(--crit-soft);color:var(--red)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-sig{background:var(--signal-soft);color:#8EC4F0}
.p-cyan{background:var(--cyan-soft);color:var(--cyan)}
.p-mute{background:var(--sunk);color:var(--muted)}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.chip{background:var(--card);border:1px solid var(--border);color:var(--muted);border-radius:99px;padding:4px 12px;
  font-size:12px;text-decoration:none;font-weight:700}
.chip:hover,.chip.on{border-color:var(--cyan);color:var(--cyan)}
.whatsnext h5,.card h5{margin:0 0 10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700}
.ask-row{display:flex;gap:8px}
.ask-row input{flex:1}
.answer{margin-top:12px;border-left:4px solid var(--cyan);padding:10px 12px;background:var(--sunk)}
.whatsnext.card{border-top:3px solid var(--cyan)}

/* Work order */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 4px}
.billing-counts{gap:36px;margin:4px 0 18px;padding:16px 20px;background:var(--card);border:1px solid var(--border);border-radius:10px}
.ready-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.sked-empty{color:var(--ink-3);font-size:13px}
.wo-head{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:8px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 20px}
.wo-action{display:flex;gap:8px;align-items:flex-start}
details.block{background:var(--card);border:1px solid var(--border);border-radius:8px;margin-top:10px}
details.block > summary{cursor:pointer;padding:12px 14px;font-weight:700;color:var(--ink)}
.block-body{padding:0 14px 16px;border-top:1px solid var(--border)}
.pl{border:1px solid var(--border);background:var(--sunk);padding:12px}
.pl.below{border-color:var(--red)}
.pl-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px;border-top:1px solid var(--border)}
.pl-row:first-child{border-top:0}
.pl-row.tot{border-top:2px solid var(--cyan);margin-top:4px;padding-top:8px;font-weight:700}
.hist-line{font-size:13px;padding:6px 0;border-top:1px solid var(--border)}
.files{padding-left:18px}

/* Field / technician */
.job-list{display:flex;flex-direction:column;gap:10px}
.job-card{display:block;background:var(--card);border:1px solid var(--border);padding:16px;border-radius:8px}
.job-card:hover{border-color:var(--cyan)}
h2{color:var(--ink);font-size:22px;margin:8px 0}
.field-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}

/* Schedule */
table.sked{min-width:900px}
.sked-cell{vertical-align:top;min-width:110px;min-height:72px}
.sked-cell.conflict{background:var(--crit-soft)}
.sked-job{display:block;background:var(--signal-soft);color:var(--ink);text-decoration:none;
  padding:6px 7px;margin:0 0 6px;border-radius:4px;font-size:12px;font-weight:700}
.sked-job span{display:block;font-weight:400;color:var(--muted)}

@media(max-width:700px){
  .mast-brand{flex-wrap:wrap;padding:10px 14px}
  .logo-frame.nav .logo{height:40px;max-width:200px}
  .brand-text span{display:none}
  .wrap{padding:0 14px 56px}
  table{min-width:0}
  .who{width:100%;justify-content:flex-end}
  .login-card{padding:4px 18px 28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}