/* Semantic colors let the same composition work on both light and dark backgrounds. */
:root{
  --bg:#16161a;--text:#fffffe;--muted:#94a1b2;--accent:#7f5af0;--pale:#f2e8d5;
  --accent-ink:#b8a0ff;--on-accent:#000000;--secondary:#2cb67d;--on-secondary:#06291d;
  --contrast:#242629;--contrast-text:#f5f2e5;--accent-on-dark:#b8a0ff;--art-bg:#242629;--art-ink:#fffffe;
  --surface:color-mix(in srgb,var(--bg) 95%,var(--text));
  --surface-raised:color-mix(in srgb,var(--bg) 91%,var(--text));
  --line:color-mix(in srgb,var(--bg) 81%,var(--text));
  --art-line:color-mix(in srgb,var(--art-bg) 75%,var(--art-ink));
  --art-muted:color-mix(in srgb,var(--art-bg) 28%,var(--art-ink));
}
::selection{background:var(--accent);color:var(--on-accent)}
.desktop-nav a,.eyebrow,.hero-description,.hero-note,.muted,.section-heading>p,.services-foot>span,.process-tabs button>span:first-child,.process-tabs .tab-arrow,.about-values,footer .copyright,footer .back-top{color:var(--muted)}
.brand>svg,.hero .eyebrow,.accent,.text-link:hover,.principles>div>.mono,.process-tabs button[aria-selected=true] strong,.process-tabs button[aria-selected=true] .tab-arrow,.process-tabs button[aria-selected=true]>span:first-child,.process-shape svg,.deliverable>span:last-child,.about-values svg,.dialog-close:hover,dialog h2,dialog li:before,#form-status{color:var(--accent-ink)}
.hero-note svg{color:var(--accent-ink)}
.button,.skip-link{background:var(--accent);color:var(--on-accent)}
.button:hover{background:color-mix(in srgb,var(--accent) 83%,var(--bg))}
.button-dark{background:var(--contrast);color:var(--contrast-text)}
.button-dark:hover{background:color-mix(in srgb,var(--contrast) 87%,white)}
.hero-art{border-color:var(--art-line);background:var(--art-bg);box-shadow:0 0 65px -35px color-mix(in srgb,var(--accent) 25%,transparent)}
.art-grid{background-image:linear-gradient(color-mix(in srgb,var(--art-ink) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--art-ink) 7%,transparent) 1px,transparent 1px)}
.art-top,.art-bottom{color:var(--art-muted);border-color:var(--art-line)}
.art-top{background:color-mix(in srgb,var(--art-bg) 94%,var(--art-ink))}
.art-top i{background:var(--art-muted)}
.art-tag{background:var(--art-bg);border-color:var(--art-line);color:var(--art-ink)}
.art-center{color:var(--art-ink)}
.art-paths path{stroke:var(--art-muted)}
.art-paths circle,.art-cubes path[fill]:not([fill="none"]){fill:var(--accent)}
.art-orbit{border-color:color-mix(in srgb,var(--art-ink) 15%,transparent)}
.sun{background:repeating-radial-gradient(circle at center,var(--accent) 0px,color-mix(in srgb,var(--accent) 9%,transparent) 1.8px,color-mix(in srgb,var(--accent) 55%,transparent) 2.2px,transparent 4px);box-shadow:0 0 38px color-mix(in srgb,var(--accent) 13%,transparent),inset 0 0 35px color-mix(in srgb,var(--accent) 70%,transparent)}
.sun-core{background:radial-gradient(circle at 78% 30%,color-mix(in srgb,var(--accent) 17%,var(--art-bg)),var(--art-bg) 76%);box-shadow:inset -6px 0 16px color-mix(in srgb,var(--accent) 20%,transparent)}
.beam{background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 7px var(--accent)}
.status-dot{box-shadow:0 0 10px color-mix(in srgb,var(--accent) 30%,transparent)}
.service-card{--card-ink:var(--on-accent);--card-line:color-mix(in srgb,var(--card-ink) 35%,transparent)}
.orange{background:var(--accent);color:var(--card-ink)}
.charcoal{background:var(--contrast);--card-ink:var(--contrast-text);color:var(--card-ink)}
.cream{background:var(--pale);--card-ink:#28301f;color:var(--card-ink)}
.sage{background:var(--secondary);--card-ink:var(--on-secondary);color:var(--card-ink)}
.charcoal .card-top,.charcoal .card-bottom{color:color-mix(in srgb,var(--card-ink) 75%,transparent)}
.charcoal .card-copy h3{color:var(--accent-on-dark)}
.card-bottom,.charcoal .card-bottom{border-color:color-mix(in srgb,var(--card-ink) 16%,transparent)}
.rays{background:repeating-conic-gradient(var(--card-ink) 0deg 1deg,transparent 1deg 12deg)}
.explore-dot{border-color:var(--card-ink)}
.art-cubes svg{color:var(--card-line)}
.product-frame,.product-frame>span{border-color:var(--card-line)}
.product-frame{box-shadow:8px 8px 0 -1px var(--pale),8px 8px 0 0 var(--card-line)}
.product-frame svg{color:var(--accent-ink)}
.product-lines i{background:color-mix(in srgb,var(--card-ink) 35%,var(--pale))}
.compass-ring{border-color:var(--card-line);background:repeating-conic-gradient(from 0deg,var(--card-line) 0deg 1deg,transparent 1deg 15deg)}
.compass-needle{background:linear-gradient(90deg,var(--accent) 50%,var(--card-line) 50%)}
.art-compass>span{color:var(--card-line)}
.art-connect{background-image:linear-gradient(90deg,transparent calc(50% - .5px),var(--card-line) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),var(--card-line) 50%,transparent calc(50% + .5px))}
.connect-mark{background:var(--contrast);box-shadow:0 0 0 10px var(--contrast);color:var(--accent-on-dark)}
.node{background:var(--contrast);border-color:var(--card-line);color:var(--card-ink)}
.scale-bars i{background:var(--pale);border-color:var(--card-line)}
.scale-bars i:nth-child(5){background:var(--accent);border-color:var(--card-line)}
.art-scale>span{color:var(--card-ink)}
.art-evolve>i,.art-evolve>i:nth-of-type(2),.art-evolve>i:nth-of-type(3){border-color:var(--card-line)}
.art-evolve>i:nth-of-type(2){opacity:.6}.art-evolve>i:nth-of-type(3){opacity:.3}
.art-learn>span{background:color-mix(in srgb,var(--pale) 60%,white);color:var(--accent-ink)}
.process{background:var(--surface)}
.process-panel{background:var(--surface-raised);border-color:var(--line)}
.panel-top,.panel-copy>.mono,.panel-copy p,.deliverable>span:first-child{color:var(--muted)}
.panel-top,.deliverable{border-color:var(--line)}
.process-visual{background-image:radial-gradient(color-mix(in srgb,var(--text) 20%,transparent) .7px,transparent .7px)}
.visual-circle{border-color:color-mix(in srgb,var(--text) 22%,transparent)}
.process-visual>span{background:var(--surface-raised);color:var(--muted)}
.contact-inner{background:var(--accent);color:var(--on-accent)}
.contact-body h2>span{color:color-mix(in srgb,var(--on-accent) 77%,var(--accent))}
.contact-bottom{border-color:color-mix(in srgb,var(--on-accent) 25%,transparent)}
dialog{background:var(--surface-raised);border-color:var(--line)}
.dialog-close,dialog>p:not(.eyebrow),form label{color:var(--muted)}
dialog li{border-color:var(--line)}
input,select,textarea{background:var(--bg);color:var(--text);border-color:var(--line)}
input::placeholder,textarea::placeholder,.form-note{color:var(--muted)}
dialog::backdrop{background:#10110dc2}
/* A compact comparison tool that stays out of the content's way. */
.palette-picker{position:fixed;right:24px;bottom:24px;z-index:30;font-family:var(--font);color:var(--text)}
.palette-toggle{display:flex;align-items:center;gap:13px;min-height:48px;padding:12px 17px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:99px;font-size:12px;font-weight:600;box-shadow:0 4px 30px #0002;transition:transform .2s}
.palette-toggle:hover{transform:translateY(-2px)}
.palette-toggle-icon{display:flex;padding-right:4px}.palette-toggle-icon i{height:17px;width:17px;border-radius:50%;border:2px solid var(--bg);background:var(--accent);margin-right:-5px}.palette-toggle-icon i:nth-child(2){background:var(--pale)}.palette-toggle-icon i:nth-child(3){background:var(--secondary)}
.palette-toggle-arrow{font-size:18px;font-weight:400;color:var(--accent-ink)}
.palette-panel{position:absolute;bottom:61px;right:0;width:354px;padding:22px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 15px 65px #0003;max-height:calc(100dvh - 115px);overflow:auto}
.palette-panel-heading{display:flex;justify-content:space-between;align-items:start;gap:10px}.palette-kicker{font-family:var(--mono);font-size:7px;letter-spacing:.5px;color:var(--muted);margin:0 0 11px;line-height:1.7}.palette-panel h2{font-size:25px;line-height:1.2;letter-spacing:-.8px;font-weight:500;margin:0}.palette-close{padding:0;border:0;background:none;color:var(--muted);font-size:25px;width:24px;height:24px;line-height:1;flex-shrink:0}
.palette-intro{font-size:11px;line-height:1.6;color:var(--muted);margin:10px 0 18px}.palette-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.palette-option{position:relative;display:flex;flex-direction:column;text-align:left;gap:5px;border:1px solid var(--line);border-radius:6px;padding:9px;background:var(--surface);color:var(--text);min-width:0;transition:border-color .2s,transform .2s}.palette-option:hover{transform:translateY(-2px);border-color:var(--accent-ink)}.palette-option[aria-pressed=true]{border-color:var(--accent-ink);box-shadow:0 0 0 1px var(--accent-ink)}
.palette-preview{display:flex;align-items:center;gap:0;padding:10px 12px;border-radius:3px;margin-bottom:4px;min-height:49px;width:100%}.palette-preview i{display:block;height:25px;width:25px;border-radius:50%;margin-right:-6px;box-shadow:0 0 0 1px #0001}.palette-option strong{font-size:11px;line-height:1.5;font-weight:600;letter-spacing:-.1px}.palette-note{font-size:9px;line-height:1.5;color:var(--muted)}.palette-check{display:none;position:absolute;right:14px;top:16px;font-size:10px;background:var(--bg);color:var(--text);border-radius:50%;height:17px;width:17px;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--line)}.palette-option[aria-pressed=true] .palette-check{display:flex}
.palette-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;border-top:1px solid var(--line);padding-top:15px;margin-top:17px}.palette-panel-footer button{padding:0;border:0;background:none;color:var(--text);font-size:9px;text-decoration:underline;text-underline-offset:4px}.palette-panel-footer>span{font-size:8px;color:var(--muted)}
.palette-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.palette-panel{display:flex;flex-direction:column;width:400px;overflow:hidden}
.palette-panel-heading,.palette-intro,.palette-filters,.palette-current,.palette-panel-footer{flex-shrink:0}
.palette-options{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:3px 5px 3px 3px;margin:-3px -5px -3px -3px;min-height:0;grid-auto-rows:min-content}
.palette-filters{display:flex;gap:5px;margin-bottom:14px}
.palette-filters button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 5px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--muted);font-size:10px}
.palette-filters button span{font-family:var(--mono);font-size:8px;opacity:.75}
.palette-filters button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.palette-filters button:hover{border-color:var(--accent-ink)}
.palette-current{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;font-size:10px;color:var(--muted)}
.palette-current strong{color:var(--text);font-weight:600;margin-left:3px}
.palette-current a{font-size:9px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.palette-hint{display:block;margin-top:6px;color:var(--text);font-size:10px;line-height:1.6}
.palette-variant{display:block;margin-top:5px;font-family:var(--mono);font-size:8px;letter-spacing:.2px;color:var(--muted)}
.palette-preview{padding-inline:12px}.palette-preview i{width:26px;height:26px}
.palette-option strong{font-size:11px}.palette-note{min-height:27px}
@media(max-width:640px){.palette-picker{right:16px;bottom:16px}.palette-panel{width:min(400px,calc(100vw - 32px));padding:18px;bottom:59px}.palette-toggle{min-height:44px;padding:10px 14px;font-size:11px}.palette-filters button{font-size:9px;padding-inline:3px}.palette-current{font-size:9px}.palette-current a{font-size:8px}.product-frame{box-shadow:5px 5px 0 -1px var(--pale),5px 5px 0 0 var(--card-line)}.connect-mark{box-shadow:0 0 0 7px var(--contrast)}}