.presence{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 13px;border:1px solid #ffffff21;border-radius:30px;background:linear-gradient(135deg,#15121b,#08070a);font-size:12px;color:#e5deef;white-space:nowrap;font-variant-numeric:tabular-nums}
.presence:hover,.presence:focus-visible{border-color:var(--accent)}
.presence-dot{position:relative;width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#77716b}
.presence[data-state=live] .presence-dot{background:#eaca9b;box-shadow:0 0 9px #eaca9b66}
.presence[data-state=live] .presence-dot::after{content:'';position:absolute;inset:-5px;border:1px solid #eaca9b88;border-radius:50%;animation:presence-ring 3.6s ease-out infinite}
#presence-count{display:inline-block;min-width:1ch;font-weight:600;color:#fff5e6;margin-right:4px}
.presence.refresh-number #presence-count{animation:presence-number .35s ease-out}
.header-right{gap:20px}.overview-short{display:none}
#presence-details{position:fixed;inset:calc(var(--header-height) + var(--safe-area-top) + 12px) var(--gutter) auto auto;margin:0;width:min(328px,calc(100% - 32px));padding:20px;background:#0b0b0b;color:var(--text);border:1px solid #ffffff30;box-shadow:0 16px 60px #0009}
#presence-details::backdrop{background:transparent}
.presence-close{float:right;min-height:44px;font-size:12px;padding:0 0 0 12px;color:#bcb6ae}
.presence-eyebrow{margin:5px 0 14px;font-size:11px;letter-spacing:.08em;color:var(--accent)}
.presence-heading{font-size:20px;font-weight:400;margin:0 0 12px}
.presence-explanation{font-size:14px;line-height:1.55;color:#c7c5c3;margin:0}
.presence-note{font-size:11px;line-height:1.5;color:#a8a19a;margin:12px 0 0}
@keyframes presence-ring{from{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(1.5)}}
@keyframes presence-number{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
body.static-mode .presence-dot::after,body.static-mode #presence-count{animation:none!important}
@media(max-width:760px){.header{gap:10px}.header-right{gap:12px}.presence{font-size:11px;gap:7px;padding:0 10px}.overview-label{display:none}.overview-short{display:inline}.overview-button{gap:7px}.brand svg{width:94px}}
@media(max-width:360px){.header-right{gap:8px}.brand svg{width:80px}.presence{padding:0 8px;gap:6px}.overview-button{font-size:11px;gap:5px}}
@media(prefers-reduced-motion:reduce){.presence-dot::after,#presence-count{animation:none!important}}
@media(forced-colors:active){.presence,#presence-details{border-color:ButtonText;background:Canvas;color:CanvasText}.presence-dot{background:CanvasText!important;box-shadow:none!important}}

/* Separate current website activity from the owner-confirmed client portfolio. */
.online-metric{display:inline-flex;align-items:center;gap:9px;min-width:70px}
.clients-metric{display:inline-flex;align-items:center;gap:7px;padding-left:13px;margin-left:4px;border-left:1px solid #eaca9b2b;color:#d4c9e3}
.clients-metric strong{font-weight:600;color:#f3eff9}
.clients-metric svg{width:17px;height:17px;flex-shrink:0;color:#d7c6f0;filter:none}
.presence[data-state=live] .presence-dot{animation:presence-breathe 3.6s ease-in-out infinite}
.presence:hover .client-primary,.presence:focus-visible .client-primary{animation:client-greeting .65s ease-out both}
.client-details{margin-top:20px;padding-top:16px;border-top:1px solid #ffffff1f}
.client-details .presence-eyebrow{margin:0 0 7px}.client-details h3{font-size:20px;font-weight:400;color:#f3eff9;margin:0 0 8px}.client-details>p:last-child{font-size:13px;line-height:1.5;color:#c7c5c3;margin:0}
@keyframes presence-breathe{0%,100%{opacity:1;box-shadow:0 0 9px #eaca9b66}50%{opacity:.55;box-shadow:0 0 3px #eaca9b22}}
@keyframes client-greeting{0%,100%{transform:translateY(0)}45%{transform:translateY(-2px)}}
@media(max-width:760px){
 .presence{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;padding:4px 10px;min-height:44px;border-radius:14px;line-height:1.2}
 .online-metric{gap:7px;min-width:0}.clients-metric{gap:5px;padding:0;margin:0;border:0;font-size:10px}.clients-metric svg{width:12px;height:12px}
 .header-right{gap:10px}
}
@media(max-width:360px){.presence{padding:4px 8px}.header-right{gap:8px}}
body.static-mode .presence-dot,body.static-mode .client-primary{animation:none!important}
body.static-mode .presence-dot::after{display:none}
@media(prefers-reduced-motion:reduce){.presence-dot,.client-primary{animation:none!important}.presence-dot::after{display:none}}
@media(forced-colors:active){.clients-metric,.clients-metric strong,.clients-metric svg{color:CanvasText;filter:none}}

/* Client portfolio: decorative light, never a count of people online. */
.header-right{gap:12px;flex-shrink:0}
.presence[data-state=portfolio]{flex-direction:row;align-items:center;padding:0 15px;min-height:44px;border-color:#d4c5ff2b;background:linear-gradient(130deg,#15131d,#09080c);box-shadow:inset 0 1px 0 #ffffff09}
.presence[data-state=portfolio] .clients-metric{border:0;margin:0;padding:0;font-size:12px;gap:10px;color:#e2dcec}
.client-copy{display:inline-block}
.portfolio-led{display:block;position:relative;width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#c7b9ed;box-shadow:0 0 8px #c7b9ed55;animation:portfolio-breathe 4s ease-in-out infinite}
.portfolio-led::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid #c7b9ed3d;animation:portfolio-halo 4s ease-in-out infinite}
@keyframes portfolio-breathe{0%,100%{opacity:1;box-shadow:0 0 8px #c7b9ed55}50%{opacity:.64;box-shadow:0 0 3px #c7b9ed22}}
@keyframes portfolio-halo{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:.12;transform:scale(1.2)}}
.header-contact{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:44px;min-height:44px;padding:0 15px;border:1px solid #d6c7ff4d;border-radius:28px;background:linear-gradient(115deg,#d7c7ff18,#b6b8ff08);color:#f4edff;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,box-shadow .2s}
.header-contact svg{width:17px;height:17px;flex-shrink:0}
.header-contact:hover{border-color:#d8c5ff9c;box-shadow:0 0 22px #a28ce614,inset 0 1px 0 #fff1}
.header-contact:hover svg,.header-contact:focus-visible svg{animation:contact-greeting .5s ease-out both}
.header-contact:focus-visible,.presence:focus-visible,.overview-button:focus-visible{outline:2px solid #e3d6ff;outline-offset:3px}
#presence-details{border-radius:18px;border-color:#d4c5ff2b;background:linear-gradient(150deg,#131019,#070609);box-shadow:0 18px 65px #000b,inset 0 1px 0 #ffffff08}
.presence-close{min-width:44px;padding:0 0 0 10px}.presence-heading{letter-spacing:-.02em}
@keyframes contact-greeting{0%,100%{transform:translateY(0)}45%{transform:translateY(-2px)}}
/* Public and portable pages share this compact, fully labelled header. */
@media(max-width:1100px){.header-contact{width:44px;height:44px;padding:0}.header-contact>span{display:none}}
@media(max-width:760px){
 .header{gap:8px}.header-right{gap:6px}
 .presence{flex-direction:row;align-items:center;padding:0 9px;border-radius:16px}.presence .online-metric{display:none}
 .presence[data-state=portfolio]{padding:0 9px;border-radius:16px}
 .presence .clients-metric{gap:8px}
 .presence .client-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.1}
 .presence .client-copy strong{font-size:13px}
 .presence .client-word{font-size:9px;letter-spacing:.02em}
 .overview-button{padding:0 8px;font-size:11px}.overview-button .status-dot{display:none}
}
body.static-mode .portfolio-led,body.static-mode .portfolio-led::after,body.static-mode .header-contact svg{animation:none!important}
body.static-mode .portfolio-led::after{opacity:.35;transform:none}
body.page-hidden .portfolio-led,body.page-hidden .portfolio-led::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.portfolio-led,.portfolio-led::after,.header-contact svg{animation:none!important}.portfolio-led::after{opacity:.35;transform:none}.header-contact{transition:none}}
@media(forced-colors:active){.header-contact{background:Canvas;color:LinkText;border-color:ButtonText}.portfolio-led{background:CanvasText;box-shadow:none;animation:none}.portfolio-led::after{display:none}}

/* Static deployment: confirmed portfolio only; no simulated presence. */