/* Velar Bureau: particle "objects of light" (js/objs.js) in Services and Why */
canvas.obj { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* services: light stage, the UI mock-ups are replaced by one object per service */
.svc3d__stage--obj { background: radial-gradient(60% 55% at 50% 50%, #1B1E26 0%, #0E0F11 70%) !important; }
.svc3d__stage--obj .svc3d__gl { display: none; }
.svs__s--obj { background: none !important; }
.svs__s--obj > *:not(canvas.obj):not(.obj__lbl) { display: none !important; }
.svs__s--obj > canvas.obj { transform: none !important; opacity: 1 !important; }
.obj__lbl { left: 24px; top: 24px; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 30px -18px rgba(14, 15, 17, .35); }
.obj__lbl span { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.obj__lbl b { font-size: .9rem; font-weight: 500; color: var(--steel); }


/* why: particle objects replace the line drawings */
.why__art--obj { position: relative; }
.why__art--obj > svg { opacity: 0 !important; }
.svc3d__stage--obj > canvas.obj--stage { z-index: 0; }
.svc3d__stage--obj .svs { z-index: 1; }
.svs__s--obj > canvas.obj { display: none !important; }

/* services on white */
.svc3d--light { background: var(--paper, #F7F8FA); color: var(--graphite); }
.svc3d--light .svc3d__stage--obj { background: radial-gradient(60% 55% at 50% 50%, #FFFFFF 0%, #EDEFF2 75%) !important; }
.svc3d--light .obj__lbl { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)); border-color: rgba(14, 15, 17, .08); box-shadow: 0 14px 30px -18px rgba(14, 15, 17, .25); }
.svc3d--light .obj__lbl span { color: var(--slate); }
.svc3d--light .obj__lbl b { color: var(--graphite); }
.svc3d--light .svc3d__hud { color: var(--slate); }
.svc3d--light .svc3d__hud #svcName { color: var(--graphite); }
.svc3d--light .svc3d__list { border-top-color: var(--line); }
.svc3d--light .svc3d__item { border-bottom-color: var(--line); }
.svc3d--light .svc3d__body h3 { color: var(--graphite); }
.svc3d--light .svc3d__item:hover h3 { color: var(--signal); }
.svc3d--light .svc3d__body p { color: var(--slate); }
.svc3d--light .svc3d__tags li { border-color: var(--line); color: var(--graphite); }
.svc3d--light .svc3d__go { color: var(--graphite); }
.svc3d--light .h2 .mute { color: var(--mist); }
/* services: no corner frames, no top label plate */
.svc3d--light .svc3d__c, .svc3d--light .obj__lbl { display: none !important; }
/* services list: bigger blocks */
.svc3d--light .svc3d__item { min-height: 82vh; padding: 64px 0; gap: 24px; }
.svc3d--light .svc3d__body h3 { font-size: clamp(2.8rem, min(5.4vw, 77.76px), 6rem); }
.svc3d--light .svc3d__body p { font-size: clamp(1.05rem, min(1.3vw, 18.72px), 1.3rem); max-width: 40ch; margin-top: 24px; }
.svc3d--light .svc3d__tags { margin-top: 28px; gap: 8px; }
.svc3d--light .svc3d__tags li { padding: 9px 16px; font-size: .95rem; }
.svc3d--light .svc3d__go { margin-top: 36px; font-size: 1.02rem; }
.svc3d--light .svc3d__n { font-size: 1rem; padding-top: 22px; }

/* about on white */
.mani--light { background: var(--steel); color: var(--graphite); }
.mani--light .mani__grid { border-bottom-color: var(--line); }
.mani--light .fill .w { color: #C9CED6; }
.mani--light .fill .w.on { color: var(--graphite); }
.mani--light .mani__txt { color: var(--slate); }
.mani--light .mani__txt .link { color: var(--graphite); }
/* services: icons in the tag badges */
.svc3d__tags li { display: inline-flex; align-items: center; gap: 8px; }
.svc3d__tags .tg-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: -6px; background: rgba(14, 15, 17, .06); color: var(--graphite); transition: background .25s, color .25s; }
.svc3d__tags .tg-ic svg { width: 15px; height: 15px; }
.svc3d__item:hover .svc3d__tags .tg-ic { background: var(--signal); color: #0E0F11; }
/* services: less air around each service, text sits centred against the stage */
.svc3d--light .svc3d__item { min-height: 72vh; padding: 40px 0; align-content: center; }

/* services on tablet / phone: no sticky stage; each service is a card with its own ASCII object */
.svc3d__art { display: none; }
@media (max-width: 1100px) {
  .svc3d--light .svc3d__stage { display: none; }
  .svc3d--light .svc3d__list { border: 0; display: grid; gap: 12px; }
  .svc3d--light .svc3d__item { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; min-height: 0; padding: 0; border: 0; opacity: 1; align-content: stretch;
    background: #EEF1F4; border-radius: 24px; overflow: hidden; }
  .svc3d__art { display: block; position: relative; min-height: 340px; background: radial-gradient(60% 60% at 50% 50%, #FFFFFF 0%, #DDE2E8 85%); }
  .svc3d--light .svc3d__n { position: absolute; left: 16px; top: 16px; z-index: 1; padding: 6px 10px; background: var(--graphite); color: var(--steel); font-size: .78rem; border-radius: 999px; }
  .svc3d--light .svc3d__body { padding: clamp(24px, min(4vw, 57.6px), 40px); display: flex; flex-direction: column; justify-content: center; }
  .svc3d--light .svc3d__body h3 { font-size: clamp(2rem, min(4.6vw, 66.24px), 3rem); }
  .svc3d--light .svc3d__body p { font-size: 1rem; margin-top: 14px; }
  .svc3d--light .svc3d__tags { margin-top: 18px; gap: 6px; }
  .svc3d--light .svc3d__tags li { padding: 7px 12px; font-size: .84rem; background: rgba(255, 255, 255, .6); }
  .svc3d--light .svc3d__go { margin-top: 22px; align-self: flex-start; }
}
@media (max-width: 720px) {
  .svc3d--light .svc3d__item { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .svc3d__art { min-height: 0; aspect-ratio: 4 / 3; }
  .svc3d--light .svc3d__body { padding: 22px 20px 26px; }
  .svc3d--light .svc3d__body h3 { font-size: clamp(2rem, min(9vw, 129.6px), 2.6rem); }
}

/* flat scenes: the crisp picture the ASCII resolves into; the cursor opens a lens back into the ASCII */
canvas.obj--crisp { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; z-index: 0; }
canvas.obj--crisp.is-lens { -webkit-mask-image: radial-gradient(circle var(--lr, 110px) at var(--lx) var(--ly), transparent 0 78%, #000 100%); mask-image: radial-gradient(circle var(--lr, 110px) at var(--lx) var(--ly), transparent 0 78%, #000 100%); }