/* ================= HERO BENCH (console/bench pattern, brand: Gotham, purple, lilac) ================= */
[data-ws] {
    --bn-bar: var(--interactive); --bn-on-bar: #ffffff;
    --bn-shell: #ffffff; --bn-side: #fbfaff; --bn-canvas: #f7f5ff; --bn-pane: #ffffff;
    --bn-line: rgb(58 0 248 / 0.12); --bn-dot: rgb(58 0 248 / 0.16);
    --bn-ink: var(--ink); --bn-mute: var(--ink-3);
    --bn-accent: var(--interactive); --bn-on-acc: var(--bg);
    --sticky-a: #ebe5ff; --sticky-b: #eef8c8;
}
[data-theme="dark"] [data-ws] {
    --bn-shell: #121514; --bn-side: #101312; --bn-canvas: #0d100f; --bn-pane: #171a19;
    --bn-line: rgb(242 242 239 / 0.09); --bn-dot: rgb(242 242 239 / 0.12);
    --sticky-a: #2a2346; --sticky-b: #2b3214;
}

.ws-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px)); overflow: clip; }
.ws-hero__head { display: grid; gap: 24px; justify-items: start; margin-bottom: clamp(28px, 3.4vw, 48px); }
@media (min-width: 1000px) { .ws-hero__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.ws-hero__title { font-size: clamp(2rem, 1rem + 2.7vw, 3.6rem); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1.06; max-width: 26ch; text-wrap: balance; }
.ws-hero__title strong { font-weight: var(--fw-strong); }
.ws-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Micro-label style used across the bench */
.bn-stage, .bn-k, .bn-save, .bn-file, .bn-life span {
    font-size: 10.5px; font-weight: var(--fw-strong); letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---------- Console shell ---------- */



/* ---------- Board grammar ---------- */
.bn-board { position: relative; grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr auto auto; gap: 22px; min-width: 0; }
.bn-stage { display: flex; justify-content: space-between; color: var(--bn-mute); }
.bn-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 56px); align-items: start; padding-top: 24px; }
.bn-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.bn-pane { position: relative; display: grid; gap: 10px; padding: 16px; background: var(--bn-pane); border: 1px solid var(--bn-line); box-shadow: 4px 4px 0 color-mix(in srgb, var(--interactive) 10%, transparent); font-size: 12.5px; line-height: 1.45; min-width: 0; }
.bn-k { color: var(--bn-mute); display: flex; justify-content: space-between; gap: 8px; }
.bn-k em { font-style: normal; color: var(--bn-accent); }
.bn-me { padding: 8px 10px; background: color-mix(in srgb, var(--interactive) 9%, var(--bn-pane)); color: var(--bn-ink); min-height: 2.4em; }
.bn-ai { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: start; color: var(--bn-ink); }
.bn-av { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--bn-accent); }
.bn-file { color: var(--bn-mute); letter-spacing: 0.08em; font-size: 9.5px; }
.bn-file b { color: var(--bn-accent); }
.bn-steps { display: grid; gap: 10px; position: relative; padding-left: 16px; }
.bn-steps::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--bn-line); }
.bn-steps li { position: relative; display: grid; }
.bn-steps li::before { content: ""; position: absolute; left: -16px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--bn-pane); border: 1.5px solid var(--bn-mute); transition: background-color 300ms, border-color 300ms; }
.bn-steps li.is-on::before { background: var(--bn-accent); border-color: var(--bn-accent); }
.bn-steps b { font-weight: var(--fw-strong); }
.bn-steps em { font-style: normal; color: var(--bn-mute); font-size: 11.5px; }
.bn-pane--code { font-size: 11.5px; }
.bn-code { padding: 3px 6px; color: var(--bn-ink); font-variant-numeric: tabular-nums; }
.bn-code--ok { background: color-mix(in srgb, #2f9e5b 12%, transparent); color: color-mix(in srgb, #2f9e5b 70%, var(--bn-ink)); }
.bn-code--add { background: color-mix(in srgb, var(--interactive) 12%, transparent); color: var(--bn-accent); }
.bn-save { color: #2f9e5b; }

/* n8n canvas (AI tab) */
.bn-ai-layout {
    display: grid; gap: clamp(18px, 3vw, 28px);
    padding-top: 20px;
}
@media (min-width: 1000px) {
    .bn-ai-layout { grid-template-columns: minmax(0, 1fr) minmax(200px, 0.42fr); align-items: stretch; }
}
.bn-n8n {
    display: grid; gap: 10px; align-content: start;
    padding: 12px 14px 16px;
    background: color-mix(in srgb, var(--bn-pane) 88%, transparent);
    border: 1px solid var(--bn-line);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--interactive) 10%, transparent);
    min-height: 220px;
}
.bn-n8n__bar {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; font-weight: var(--fw-strong);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--bn-accent);
}
.bn-n8n__stage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 28px 20px;
    padding: 8px 4px 4px;
    min-height: 168px;
}
.bn-n8n__wires {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: visible;
}
.bn-n8n__wires path {
    fill: none; stroke: var(--bn-line); stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}
.bn-n8n__wires .bn-n8n__pulse {
    stroke: var(--bn-accent); stroke-dasharray: 8 14;
    animation: bn-n8n-dash 2.2s linear infinite;
}
.bn-nn {
    position: relative; z-index: 1;
    grid-column: var(--c); grid-row: var(--r);
    display: grid; gap: 3px; align-content: center;
    text-align: left; padding: 12px 14px 12px 16px;
    background: var(--bn-pane); border: 1px solid var(--bn-line);
    border-radius: 8px; color: var(--bn-ink);
    box-shadow: 0 10px 18px -16px rgb(14 14 16 / 0.55);
    transition: border-color 220ms, background-color 220ms, box-shadow 220ms, transform 220ms var(--ease-out);
}
.bn-nn__stage {
    font-size: 9px; font-weight: var(--fw-strong);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--bn-mute);
}
.bn-nn__name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: var(--fw-strong); line-height: 1.2;
}
.bn-nn__tools { font-size: 10px; color: var(--bn-accent); line-height: 1.3; }
.bn-nn__port {
    position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%;
    background: var(--bn-pane); border: 1.5px solid var(--bn-line);
    transform: translateY(-50%);
}
.bn-nn__port--in { left: -5px; }
.bn-nn__port--out { right: -5px; }
.bn-nn.is-on, .bn-nn[aria-pressed="true"] {
    border-color: var(--bn-accent);
    background: color-mix(in srgb, var(--interactive) 12%, var(--bn-pane));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bn-accent) 35%, transparent), 0 12px 22px -14px color-mix(in srgb, var(--bn-accent) 55%, transparent);
    transform: translateY(-1px);
}
.bn-nn.is-on .bn-nn__stage, .bn-nn[aria-pressed="true"] .bn-nn__stage { color: var(--bn-accent); }
.bn-nn.is-on .bn-nn__port, .bn-nn[aria-pressed="true"] .bn-nn__port {
    border-color: var(--bn-accent); background: var(--bn-accent);
}
@media (hover: hover) {
    .bn-nn:hover { border-color: color-mix(in srgb, var(--bn-accent) 55%, var(--bn-line)); }
}
@media (max-width: 899px) {
    .bn-n8n__stage {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 14px;
    }
    .bn-nn { grid-column: 1 !important; grid-row: auto !important; }
}
@keyframes bn-n8n-dash { to { stroke-dashoffset: -44; } }
@media (prefers-reduced-motion: reduce) {
    .bn-n8n__wires .bn-n8n__pulse { animation: none; stroke-dasharray: none; opacity: 0.7; }
}

/* Stickies */
.bn-sticky { max-width: 220px; padding: 14px 16px; background: var(--sticky-a); color: var(--bn-ink); font-size: 13px; line-height: 1.4; box-shadow: 0 12px 20px -14px rgb(14 14 16 / 0.45); transform: rotate(-2deg); }
.bn-sticky--b { background: var(--sticky-b); transform: rotate(2.5deg); justify-self: end; }
.bn-notes { display: flex; gap: 32px; align-items: flex-start; }
.bn-notes .bn-sticky--b { transform: rotate(3deg); align-self: center; }

/* Mini flow */
.bn-mini { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--fs-md); color: var(--bn-ink); }
.bn-mini i { flex: 0 1 48px; height: 1px; background: var(--bn-line); position: relative; overflow: hidden; }
.bn-mini i::after { content: ""; position: absolute; inset: 0; background: var(--bn-accent); transform: translateX(-100%); animation: bn-wire 2.4s var(--ease-in-out) infinite; }
.bn-mini i + span + i::after { animation-delay: 1.2s; }
@keyframes bn-wire { 50%, 100% { transform: translateX(100%); } }
.bn-mini__n { padding: 4px 2px; transition: color 300ms; }
@media (prefers-reduced-motion: reduce) { .bn-mini i::after { animation: none; transform: none; } }

/* Workspace chart */
.bn-ws { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 20px; }
.bn-chart {
    position: relative; display: grid; gap: 34px 26px; align-items: center; justify-items: start;
    grid-template-columns: repeat(4, auto) 1fr;
    grid-template-areas: "brief discover check reuse ship" ". . no new ship" ". . . labs ship";
}
.bn-chart__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bn-chart__wires path { fill: none; stroke: var(--bn-mute); stroke-opacity: 0.45; stroke-width: 1.2; }
.bn-chart__wires path.is-on { stroke: var(--bn-accent); stroke-opacity: 1; stroke-width: 1.5; }
.bn-box { position: relative; z-index: 1; padding: 11px 16px; border: 1px solid var(--bn-line); background: var(--bn-pane); font-size: 11px; font-weight: var(--fw-strong); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; transition: border-color 300ms, background-color 300ms, opacity 300ms; }
.bn-box.is-off { opacity: 0.38; }
.bn-box.is-on { border-color: var(--bn-accent); }
.bn-box--ship { grid-area: ship; justify-self: start; align-self: center; background: var(--bn-accent); color: var(--bn-on-acc); border-color: var(--bn-accent); }
.bn-box--ship.is-off { opacity: 1; }
[data-c="brief"] { grid-area: brief; } [data-c="discover"] { grid-area: discover; } [data-c="check"] { grid-area: check; }
[data-c="reuse"] { grid-area: reuse; } [data-c="new"] { grid-area: new; } [data-c="labs"] { grid-area: labs; }
.bn-yes, .bn-no { position: absolute; z-index: 2; font-size: 9.5px; font-weight: var(--fw-strong); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bn-mute); transition: color 300ms; }
.bn-yes.is-on, .bn-no.is-on { color: var(--bn-accent); }
.bn-diamond { position: relative; z-index: 1; width: 92px; height: 92px; display: grid; place-items: center; font-size: 9.5px; font-weight: var(--fw-strong); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; text-align: center; }
.bn-diamond::before { content: ""; position: absolute; inset: 14px; background: var(--bn-pane); border: 1px solid var(--bn-accent); transform: rotate(45deg); transition: background-color 300ms; }
.bn-diamond span { position: relative; }
@media (hover: hover) { .bn-diamond:hover::before { background: color-mix(in srgb, var(--interactive) 12%, var(--bn-pane)); } }
.bn-pane--chat { align-self: start; transform: rotate(-0.6deg); }

/* Design system pane */
.bn-tokens { display: grid; gap: 4px; }
.bn-tok { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; padding: 6px 4px; text-align: left; font-size: 12px; border-radius: 2px; transition: background-color 200ms; }
.bn-tok i { width: 14px; height: 14px; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 0.3); }
.bn-tok code { font: inherit; font-size: 10.5px; color: var(--bn-mute); }
.bn-tok[aria-checked="true"] { background: color-mix(in srgb, var(--interactive) 10%, transparent); }
.bn-tok[aria-checked="true"] span { font-weight: var(--fw-strong); }
@media (hover: hover) { .bn-tok:hover { background: color-mix(in srgb, var(--interactive) 6%, transparent); } }
.bn-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bn-part { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 6px 10px; font-size: 11px; font-weight: var(--fw-strong); border-radius: 2px; transition: background-color 500ms var(--ease-out), color 500ms, box-shadow 500ms; }
.bn-part--btn { background: var(--bn-accent); color: var(--bn-on-acc); }
.bn-part--tag { box-shadow: inset 0 0 0 1px var(--bn-accent); color: var(--bn-accent); border-radius: 999px; }
.bn-part--input { justify-content: flex-start; box-shadow: inset 0 -2px 0 var(--bn-accent), inset 0 0 0 1px var(--bn-line); color: var(--bn-mute); font-weight: 400; }
.bn-part--toggle i { width: 28px; height: 14px; border-radius: 999px; background: var(--bn-accent); position: relative; transition: background-color 500ms; }
.bn-part--toggle i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.bn-part--ai b { padding: 1px 5px; background: linear-gradient(135deg, var(--bn-accent), var(--brand-indigo)); color: #fff; font-size: 10px; }
.bn-part--note { box-shadow: inset 3px 0 0 var(--bn-accent), inset 0 0 0 1px var(--bn-line); justify-content: flex-start; font-weight: 400; }
.bn-part.is-pulse { animation: bn-pulse 700ms var(--ease-out); }
@keyframes bn-pulse { 40% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--bn-accent) 30%, transparent); } }
.bn-life { display: flex; gap: 6px; }
.bn-life span { padding: 3px 7px; border: 1px solid var(--bn-line); color: var(--bn-mute); font-size: 9px; }
.bn-life span.is-on { border-color: var(--bn-accent); color: var(--bn-accent); }

/* Product pane */
.bn-models { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bn-model { aspect-ratio: 3 / 4; padding: 4px; display: grid; gap: 3px; border: 1px solid var(--bn-line); background: var(--bn-canvas); transition: border-color 250ms, transform 300ms var(--ease-out); }
.bn-model i { display: block; background: color-mix(in srgb, var(--bn-ink) 14%, transparent); }
.bn-model--0 { grid-template-columns: 30% 1fr; grid-template-rows: 1fr; } .bn-model--0 i:nth-child(n+3) { display: none; }
.bn-model--1 { grid-template-rows: 18% 1fr; } .bn-model--1 i:nth-child(3) { display: none; }
.bn-model--2 { grid-template-rows: 18% 18% 1fr; }
.bn-model--3 { grid-template-rows: 14% 10% 1fr; }
.bn-model--4 { grid-template-rows: 16% 8% 1fr; }
.bn-model[aria-checked="true"] { border-color: var(--bn-accent); transform: translateY(-3px); }
.bn-model[aria-checked="true"] i { background: color-mix(in srgb, var(--bn-accent) 45%, transparent); }
.bn-ui { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--bn-line); background: var(--bn-canvas); }
.bn-ui__bar { height: 12px; background: linear-gradient(90deg, var(--brand-indigo), var(--interactive)); }
.bn-ui__alert { padding: 6px 8px; font-size: 10.5px; line-height: 1.3; background: color-mix(in srgb, var(--interactive) 14%, var(--bn-pane)); border-left: 3px solid var(--bn-accent); }
.bn-ui__row { height: 9px; background: color-mix(in srgb, var(--bn-ink) 9%, transparent); }
.bn-ui__cta { height: 14px; width: 40%; justify-self: end; background: var(--bn-accent); }
.bn-metrics { display: grid; gap: 4px; font-size: 11.5px; color: var(--bn-mute); }
.bn-metrics b { color: var(--bn-ink); font-weight: var(--fw-strong); font-size: var(--fs-md); margin-right: 4px; }


/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
    .bn-ws { grid-template-columns: minmax(0, 1fr); }
    .bn-chart { gap: 26px 16px; }
}
@media (max-width: 899px) {
    .bn-row, .bn-lower { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 8px; }
    .bn-chart { grid-template-columns: repeat(2, auto); grid-template-areas: "brief discover" "check reuse" "no new" "labs ship"; }
    .bn-sticky, .bn-sticky--b { justify-self: start; }
    .bn-notes { flex-wrap: wrap; gap: 16px; }
}

/* ================= Governance framework (Workspace tab) ================= */
.bn-gov {
    --ph-empathise: #ffd9de; --ph-define: #e6ddff; --ph-ideate: #cdf1d3; --ph-test: #d6e4ff; --gate: var(--brand-lime);
    position: relative; display: grid; grid-auto-flow: column; align-items: start; gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px minmax(0, 1.15fr) 92px minmax(0, 1fr);
    padding: 28px 0 8px;
}
[data-theme="dark"] .bn-gov { --ph-empathise: #4a2a30; --ph-define: #352b55; --ph-ideate: #23402a; --ph-test: #243553; }
.bn-gov__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.bn-gov__wires .w-fwd { fill: none; stroke: var(--bn-mute); stroke-opacity: 0.5; stroke-width: 1.2; }
.bn-gov__wires .w-back { fill: none; stroke: var(--bn-accent); stroke-width: 1.5; stroke-dasharray: 5 5; animation: bn-loop 1s linear infinite; }
@keyframes bn-loop { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .bn-gov__wires .w-back { animation: none; } }
.bn-phase { position: relative; z-index: 1; display: grid; gap: 8px; align-content: start; transition: opacity 400ms var(--ease-out), filter 400ms; }
.bn-phase.is-blocked { opacity: 0.32; filter: grayscale(1); }
.bn-phase.is-target .bn-phase__band { box-shadow: 0 0 0 2px var(--bn-accent); }
.bn-phase__band { display: grid; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--bn-accent); }
.bn-phase__band span { font-size: 9px; font-weight: var(--fw-strong); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bn-mute); }
.bn-phase__band b { font-size: 12.5px; font-weight: var(--fw-strong); }
.bn-phase--empathise .bn-phase__band { background: var(--ph-empathise); }
.bn-phase--define .bn-phase__band { background: var(--ph-define); }
.bn-phase--ideate .bn-phase__band { background: var(--ph-ideate); }
.bn-phase--test .bn-phase__band { background: var(--ph-test); }
.bn-step { display: grid; gap: 3px; padding: 10px 12px; background: var(--bn-pane); border: 1px solid var(--bn-line); font-size: 11.5px; line-height: 1.35; }
.bn-step b { font-weight: var(--fw-strong); }
.bn-step em { font-style: normal; color: var(--bn-mute); font-size: 10.5px; }
.bn-gate { position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; padding: 6px 0; align-self: center; text-align: center; }
.bn-phase .bn-gate { padding: 2px 0; grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: left; gap: 8px; }
.bn-gate__d { width: 22px; height: 22px; background: var(--gate); transform: rotate(45deg); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gate) 60%, transparent); transition: transform 400ms var(--ease-out), box-shadow 300ms; }
.bn-gate__q { font-size: 10px; line-height: 1.3; color: var(--bn-ink); }
.bn-gate__a { padding: 2px 8px; font-size: 9.5px; font-weight: var(--fw-strong); letter-spacing: 0.1em; text-transform: uppercase; background: var(--bn-lime, #cef307); color: #0e0e10; }
.bn-gate[aria-pressed="false"] .bn-gate__a { background: var(--bn-accent); color: var(--bn-on-acc); }
.bn-gate[aria-pressed="false"] .bn-gate__d { transform: rotate(135deg); }
@media (hover: hover) { .bn-gate:hover .bn-gate__d { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gate) 35%, transparent); } }

/* ================= Team selector + flow detail (AI tab) ================= */
.bn-teams { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--bn-line); background: var(--bn-canvas); }
.bn-team { padding: 4px 9px; font-size: 9.5px; font-weight: var(--fw-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bn-mute); transition: background-color 200ms, color 200ms; }
.bn-team[aria-pressed="true"] { background: var(--bn-accent); color: var(--bn-on-acc); }
.bn-nn__does { display: none; }
.bn-nn.is-swap { animation: bn-swap 500ms var(--ease-out); }
@keyframes bn-swap { 0% { opacity: 0.2; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }

/* ================= Design system architecture (System tab) ================= */
.bn-arch { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: 18px; }
.bn-arch__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.bn-arch__wires path { fill: none; stroke: var(--bn-mute); stroke-opacity: 0.55; stroke-width: 1.2; }
.bn-arch__wires path.is-flow { stroke: var(--bn-accent); stroke-opacity: 1; stroke-width: 1.6; }
.bn-arch__wires circle { fill: var(--bn-accent); }
.bn-arch__root { position: relative; z-index: 1; display: grid; gap: 10px; }
.bn-arch__title { font-size: var(--fs-lg); font-weight: var(--fw-display); letter-spacing: -0.01em; }
.bn-arch__sub { font-size: 11.5px; color: var(--bn-mute); line-height: 1.4; max-width: 26ch; }
.bn-arch__block { display: grid; gap: 3px; padding: 12px 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--interactive) 22%, var(--bn-pane)), color-mix(in srgb, var(--brand-indigo) 12%, var(--bn-pane))); border: 1px solid color-mix(in srgb, var(--bn-accent) 30%, transparent); color: var(--bn-ink); font-size: 12px; }
.bn-arch__block b { font-weight: var(--fw-strong); }
.bn-arch__block em { font-style: normal; font-size: 10.5px; color: var(--bn-mute); }
.bn-arch__core, .bn-arch__local { z-index: 1; }
.bn-arch__surf { display: flex; flex-wrap: wrap; gap: 4px; }
.bn-arch__surf span { padding: 3px 7px; font-size: 10px; font-weight: var(--fw-strong); border: 1px solid var(--bn-line); }
.bn-arch__list { display: grid; gap: 2px; font-size: 11px; color: var(--bn-mute); }
.bn-arch__list li::before { content: "· "; color: var(--bn-accent); }
.bn-tokens--row { display: flex; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid var(--bn-line); }
.bn-tokens--row .bn-tok { display: inline-grid; grid-template-columns: auto; padding: 4px; }
.bn-tokens--row .bn-tok i { width: 18px; height: 18px; }
.bn-tokens--row .bn-tok[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--bn-pane), 0 0 0 3.5px var(--sw); }
.bn-tok__val { margin-left: auto; font: inherit; font-size: 10px; color: var(--bn-mute); }
.bn-tok__val b { color: var(--bn-accent); }
.bn-arch__local.is-recv { animation: bn-pulse 800ms var(--ease-out); }

@media (max-width: 1099px) {
    .bn-gov { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bn-gov > .bn-gate { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; justify-items: start; text-align: left; }
    .bn-arch { grid-template-columns: minmax(0, 1fr); }
    .bn-arch__wires { display: none; }
}


/* ================= LOOK AND FEEL v3: frosted glass panes over the dot matrix ================= */
[data-ws] {
    --bn-bar: transparent; --bn-on-bar: var(--ink);
    --bn-shell: rgb(255 255 255 / 0.38); --bn-side: rgb(255 255 255 / 0.22); --bn-canvas: rgb(255 255 255 / 0.12); --bn-pane: rgb(255 255 255 / 0.62);
    --bn-line: rgb(58 0 248 / 0.1); --bn-dot: rgb(58 0 248 / 0.05);
    --bn-glass-edge: rgb(255 255 255 / 0.7);
    --bn-lime: var(--brand-lime);
    --sticky-a: rgb(230 221 255 / 0.85); --sticky-b: rgb(205 241 211 / 0.85);
}
[data-theme="dark"] [data-ws] {
    --bn-on-bar: var(--ink);
    --bn-shell: rgb(22 22 30 / 0.34); --bn-side: rgb(255 255 255 / 0.025); --bn-canvas: rgb(255 255 255 / 0.015); --bn-pane: rgb(255 255 255 / 0.06);
    --bn-line: rgb(242 242 239 / 0.09); --bn-dot: rgb(242 242 239 / 0.035);
    --bn-glass-edge: rgb(255 255 255 / 0.1);
    --sticky-a: rgb(60 48 110 / 0.7); --sticky-b: rgb(36 70 46 / 0.7);
}
[data-theme="dark"] .bn-gov { --ph-empathise: rgb(255 120 140 / 0.14); --ph-define: rgb(160 130 255 / 0.16); --ph-ideate: rgb(110 220 140 / 0.13); --ph-test: rgb(120 160 255 / 0.15); }
.bn-gov { --ph-empathise: rgb(255 217 222 / 0.7); --ph-define: rgb(230 221 255 / 0.75); --ph-ideate: rgb(205 241 211 / 0.7); --ph-test: rgb(214 228 255 / 0.75); }

.bn-pane, .bn-step, .bn-box, .bn-n8n, .bn-arch__block, .bn-nn { border-radius: 10px; }
.bn-pane, .bn-step, .bn-n8n, .bn-nn { border-color: var(--bn-glass-edge); }
.bn-pane { box-shadow: 0 10px 30px -22px rgb(58 0 248 / 0.4); }
.bn-sticky { border-radius: 8px; box-shadow: 0 14px 24px -18px rgb(14 14 16 / 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bn-phase__band { border-radius: 8px; }
.bn-gate__a { border-radius: 999px; }
.bn-teams { border-radius: 999px; background: transparent; }
.bn-team { border-radius: 999px; }

/* ---------- Governance flow: connected, animated ---------- */
.bn-gov { column-gap: 26px; }
.bn-gov__wires .w-fwd { fill: none; stroke: var(--bn-mute); stroke-opacity: 0.35; stroke-width: 1.2; stroke-dasharray: 3 4; transition: stroke 400ms, stroke-opacity 400ms; }
.bn-gov__wires .w-fwd.is-run { stroke: var(--bn-accent); stroke-opacity: 0.85; stroke-dasharray: none; stroke-width: 1.5; }
.bn-gov__wires .w-back { fill: none; stroke: var(--bn-accent); stroke-width: 1.4; stroke-dasharray: 5 5; stroke-opacity: 0.8; animation: bn-loop 1s linear infinite; }
.bn-gov__wires .w-trail { fill: none; stroke: var(--bn-accent); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--bn-accent) 70%, transparent)); }
.bn-gov__wires .w-trail.is-back { stroke: var(--bn-lime); filter: drop-shadow(0 0 4px rgb(206 243 7 / 0.7)); }
.bn-gov__wires .w-dot { fill: var(--bn-lime); stroke: var(--bn-accent); stroke-width: 1.5; }
.bn-gov__wires .w-halo { fill: color-mix(in srgb, var(--bn-accent) 22%, transparent); transform-box: fill-box; transform-origin: center; animation: bn-halo 1.6s var(--ease-out) infinite; }
@keyframes bn-halo { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bn-gov__wires .w-halo { animation: none; } }

.bn-step { position: relative; text-align: left; font-family: inherit; font-size: 11.5px; line-height: 1.35; color: inherit; cursor: pointer; transition: border-color 250ms, box-shadow 400ms var(--ease-out), opacity 400ms, background-color 400ms; }
.bn-step.is-done { border-color: color-mix(in srgb, var(--bn-accent) 30%, var(--bn-glass-edge)); }
.bn-step.is-done b::before { content: "✓ "; color: var(--bn-accent); }
.bn-step.is-current { background: color-mix(in srgb, var(--interactive) 16%, var(--bn-pane)); border-color: var(--bn-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bn-accent) 18%, transparent), 0 14px 30px -14px color-mix(in srgb, var(--bn-accent) 70%, transparent); }
.bn-step.is-peek { border-color: color-mix(in srgb, var(--bn-accent) 60%, transparent); }
.bn-gate { cursor: pointer; }
.bn-gate.is-current .bn-gate__d { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bn-lime) 45%, transparent); animation: bn-gate-pulse 1.4s var(--ease-in-out) infinite; }
@keyframes bn-gate-pulse { 50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--bn-lime) 15%, transparent); } }
@media (prefers-reduced-motion: reduce) { .bn-gate.is-current .bn-gate__d { animation: none; } }
.bn-gate.is-peek .bn-gate__d { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bn-lime) 35%, transparent); }
.bn-gov.is-shipped .bn-step { border-color: var(--bn-accent); }
.bn-gov.is-shipped .bn-phase--test .bn-step:last-of-type { box-shadow: 0 0 0 3px var(--bn-lime), 0 14px 30px -14px color-mix(in srgb, var(--bn-accent) 70%, transparent); }

.bn-gov .bn-phase { gap: 18px; }
.bn-gov .bn-phase .bn-phase__band { margin-bottom: -4px; }
.bn-gov__wires { z-index: 3; }

/* ---------- Phases as plain labels: the flow carries the structure ---------- */
.bn-gov .bn-phase__band { display: grid; gap: 3px; padding: 0 2px 2px; white-space: nowrap; background: none !important; border: 0; border-radius: 0; box-shadow: none !important; }
.bn-gov .bn-phase__band b { order: -1; font-size: 10.5px; font-weight: var(--fw-strong); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bn-ink); }
.bn-gov .bn-phase__band span { font-size: 9px; font-weight: 400; letter-spacing: 0.06em; text-transform: none; color: var(--bn-mute); }
.bn-gov .bn-phase.is-target .bn-phase__band b { color: var(--bn-accent); }
.bn-gov .bn-phase.is-target .bn-phase__band b::after { content: " ↺"; }
.bn-gov .bn-phase .bn-phase__band { margin-bottom: 0; }
@media (max-width: 1099px) { .bn-gov .bn-phase__band { padding-left: 34px; } }


/* ================= Open workspace: no console, no tabs, four boards in sequence ================= */
.ws-hero > * { position: relative; z-index: 1; }
.bn__boards { display: grid; gap: clamp(88px, 11vw, 168px); padding-bottom: clamp(56px, 8vw, 120px); }
.bn-board { grid-area: auto; grid-template-rows: none; gap: 28px; }
.bn-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 18px; row-gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--bn-line); color: var(--bn-mute); }
.bn-stage__n { color: var(--bn-accent); }
.bn-stage__t { font-size: clamp(1.75rem, 1rem + 1.8vw, 2.75rem); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1.05; text-transform: none; color: var(--bn-ink); }
.bn-stage__g { grid-column: 2; }
.bn-stage__m { grid-column: 3; grid-row: 1; }
.bn-pane, .bn-step, .bn-n8n, .bn-nn { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 899px) {
    .bn-stage { grid-template-columns: auto minmax(0, 1fr); }
    .bn-stage__m { display: none; }
}

/* ---------- Horizontal tabs, like "What I do" ---------- */
.bn-nav { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin-top: clamp(12px, 2vw, 24px); }
.bn-tab { display: grid; gap: 10px; font-size: var(--fs-xs); font-weight: var(--fw-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); transition: color 300ms; }
.bn-tab em { font-style: normal; color: var(--bn-accent); margin-right: 4px; }
.bn-tab[aria-current] { color: var(--ink); }
.bn-tab i { display: block; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.bn-tab b { position: absolute; inset: 0; background: var(--bn-accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (hover: hover) { .bn-tab:hover { color: var(--ink); } }
@media (max-width: 899px) { .bn-nav { grid-template-columns: repeat(4, max-content); gap: 18px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px !important; } }

.bn-stage { grid-template-columns: minmax(0, 1fr) auto; }
.bn-stage__g { grid-column: 1; }
.bn-stage__m { grid-column: 2; }
.bn-n8n__stage { column-gap: 36px; }
.bn-n8n__wires path { stroke: var(--bn-mute); stroke-opacity: 0.5; stroke-width: 1.3; }
.bn-n8n__wires path.bn-n8n__pulse { stroke: var(--bn-accent); stroke-opacity: 1; stroke-width: 1.6; }
@media (max-width: 899px) {
    .bn-n8n__bar { flex-wrap: wrap; gap: 8px; }
    .bn-team { white-space: nowrap; }
    .bn-board { scroll-margin-top: 140px; }
}
.bn-board { align-content: start; }
@media (max-width: 899px) {
    .bn-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; overflow: visible; margin-inline: 0; padding-inline: 0 !important; }
    .bn-tab { font-size: 9.5px; letter-spacing: 0.06em; }
    .bn-tab span { min-height: 2.6em; }
}

/* Location + availability: two instrument cells, square, hairline, live */
.ws-status { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); width: fit-content; max-width: 100%; }
.ws-status__cell { position: relative; display: grid; gap: 4px; padding: 12px 18px 13px; min-width: 0; overflow: hidden; transition: background-color 360ms var(--ease-out); }
.ws-status__cell + .ws-status__cell { border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.ws-status__cell::before, .ws-status__cell::after { content: ""; position: absolute; width: 7px; height: 7px; border-color: var(--accent); border-style: solid; }
.ws-status__cell::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.ws-status__cell::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
@media (hover: hover) { .ws-status__cell:hover { background: color-mix(in srgb, var(--interactive) 7%, transparent); } }
.ws-status__k { display: flex; justify-content: space-between; gap: 18px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ws-status__k span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.ws-status__v { font-size: var(--fs-md, 17px); font-weight: var(--fw-strong); line-height: 1.2; color: var(--ink); white-space: nowrap; }
.ws-status__s { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; display: flex; gap: 10px; flex-wrap: wrap; }
.ws-status__clock { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); }
.ws-status__dot { width: 7px; height: 7px; background: var(--brand-lime); box-shadow: 0 0 0 0 rgb(206 243 7 / 0.6); animation: ws-live 1.8s ease-out infinite; }
@keyframes ws-live { 0% { box-shadow: 0 0 0 0 rgb(206 243 7 / 0.6); } 100% { box-shadow: 0 0 0 9px rgb(206 243 7 / 0); } }
.ws-status__scan { position: absolute; inset: 0 auto 0 0; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-lime) 22%, transparent), transparent); transform: translateX(-120%); animation: ws-scan 4.5s var(--ease-in-out, ease-in-out) infinite; }
@keyframes ws-scan { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .ws-status__dot, .ws-status__scan { animation: none; } .ws-status__scan { display: none; } }
@media (max-width: 560px) {
    .ws-status { grid-template-columns: minmax(0, 1fr); width: 100%; }
    .ws-status__cell + .ws-status__cell { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
    .ws-status__v, .ws-status__s { white-space: normal; }
}

/* ---------- Click tabs: boards share one cell, tabs sit right below ---------- */
.bn { position: relative; padding-bottom: clamp(48px, 7vw, 96px); }
.bn__boards { display: grid; gap: 0; padding-bottom: 0; }
.bn-board { grid-area: 1 / 1; }
.bn-nav { margin-top: clamp(40px, 5vw, 64px); }
.bn-tab { font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-strong); text-align: left; cursor: pointer; }
.bn-tab[aria-selected="true"] { color: var(--ink); }
.bn-tab b { transform: scaleX(0); transition: transform 500ms var(--ease-out); }
.bn-tab[aria-selected="true"] b { transform: scaleX(1); }
.bn-tab:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 4px; }
@media (max-width: 899px) {
    .bn-nav { gap: 8px; }
    .bn-tab { font-size: 9px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
}

/* clear air between the page title and the workspace */
.ws-hero__head { margin-bottom: clamp(400px, 44vw, 680px); } /* room under the heading for the spacetime fabric */

/* ================= CB tech: square, flat, hairline. No radii, no drop shadows ================= */
[data-ws] { --bn-hair: color-mix(in srgb, var(--ink) 14%, transparent); --bn-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; }
.bn-pane, .bn-step, .bn-box, .bn-n8n, .bn-nn, .bn-arch__block, .bn-sticky, .bn-tags span, .bn-teams, .bn-team,
.bn-gate__a, .bn-phase__band, .bn-model, .bn-part, .bn-ui, .bn-life span, .bn-arch__surf span, .bn-me, .bn-code { border-radius: 0 !important; }
.bn-pane, .bn-step, .bn-n8n, .bn-nn, .bn-arch__block, .bn-sticky, .bn-model, .bn-nn.is-on, .bn-nn[aria-pressed="true"],
.bn-step.is-current, .bn-gov.is-shipped .bn-phase--test .bn-step:last-of-type { box-shadow: none !important; }
.bn-pane, .bn-step, .bn-n8n, .bn-nn, .bn-arch__block { border: 1px solid var(--bn-hair); -webkit-backdrop-filter: none; backdrop-filter: none; }
.bn-pane, .bn-step, .bn-nn { background: color-mix(in srgb, var(--bg) 92%, transparent); }
/* corner ticks: blueprint marks on every container */
.bn-pane, .bn-n8n, .bn-step, .bn-nn, .bn-arch__block {
    background-image:
        linear-gradient(var(--bn-accent), var(--bn-accent)), linear-gradient(var(--bn-accent), var(--bn-accent)),
        linear-gradient(var(--bn-accent), var(--bn-accent)), linear-gradient(var(--bn-accent), var(--bn-accent));
    background-size: 7px 1px, 1px 7px, 7px 1px, 1px 7px;
    background-position: -1px -1px, -1px -1px, calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) calc(100% + 1px);
    background-repeat: no-repeat;
}
.bn-sticky { border: 1px solid var(--bn-hair); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* states: colour and a hard accent bar instead of glows */
.bn-step, .bn-nn, .bn-pane, .bn-arch__block, .bn-model, .bn-tab, .bn-team { transition: border-color 360ms var(--ease-out), background-color 360ms var(--ease-out), color 360ms var(--ease-out), transform 420ms var(--ease-out); }
.bn-step.is-current, .bn-nn.is-on, .bn-nn[aria-pressed="true"] { border-color: var(--bn-accent); background-color: color-mix(in srgb, var(--interactive) 9%, var(--bg)); box-shadow: inset 3px 0 0 var(--bn-accent) !important; transform: none; }
@media (hover: hover) {
    .bn-step:hover, .bn-nn:hover, .bn-pane:hover, .bn-arch__block:hover { border-color: color-mix(in srgb, var(--bn-accent) 60%, var(--bn-hair)); }
}
.bn-gate.is-current .bn-gate__d, .bn-gate.is-peek .bn-gate__d { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bn-lime) 30%, transparent); }
/* mono micro-labels read as instrument readouts */
.bn-k, .bn-stage__g, .bn-stage__m, .bn-phase__band span, .bn-nn__stage, .bn-nn__tools, .bn-tab em, .bn-file, .bn-save, .bn-n8n__bar, .bn-gate__q, .bn-tok__val { font-family: var(--bn-mono); letter-spacing: 0.04em; }
.bn-stage { border-bottom-color: var(--bn-hair); }
/* wires: hairlines with a slow flowing dash */
.bn-gov__wires .w-fwd, .bn-arch__wires path, .bn-n8n__wires path:not(.bn-n8n__pulse) { stroke-dasharray: 2 6; animation: bn-flow 1.8s linear infinite; }
.bn-gov__wires .w-fwd.is-run { stroke-dasharray: 10 6; animation-duration: 1.1s; }
@keyframes bn-flow { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .bn-gov__wires .w-fwd, .bn-arch__wires path, .bn-n8n__wires path { animation: none; } }

/* ---------- Status: a quiet readout line, no frame ---------- */
.ws-status { border: 0; gap: 0 28px; grid-template-columns: repeat(2, max-content); }
.ws-status__cell { padding: 0; gap: 2px; overflow: visible; }
.ws-status__cell + .ws-status__cell { border: 0; }
.ws-status__cell::before, .ws-status__cell::after, .ws-status__scan { display: none; }
@media (hover: hover) { .ws-status__cell:hover { background: none; } }
.ws-status__k { gap: 12px; font-size: 9.5px; color: var(--ink-3); opacity: 0.8; justify-content: flex-start; }
.ws-status__k span:first-child { color: var(--ink-3); }
.ws-status__v { font-size: 13px; font-weight: var(--fw-strong); color: var(--ink-2, var(--ink)); }
.ws-status__s { font-size: 11px; gap: 8px; }
.ws-status__clock { color: var(--ink-3); }
.ws-status__dot { width: 6px; height: 6px; }
@media (max-width: 560px) { .ws-status { grid-template-columns: max-content; gap: 10px; } .ws-status__cell + .ws-status__cell { border: 0; } }

/* ---------- Workspace header: the tabs are the title ---------- */
.bn-nav { margin: 0 0 clamp(28px, 3.4vw, 48px); max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px clamp(18px, 2.4vw, 36px); padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.bn-tab { display: inline-flex; align-items: baseline; gap: 8px; position: relative; padding: 0 0 4px; font-family: inherit; text-transform: none; letter-spacing: var(--track-display); font-weight: var(--fw-display); font-size: clamp(1.25rem, 0.8rem + 1.6vw, 2.4rem); line-height: 1.05; color: color-mix(in srgb, var(--ink) 32%, transparent); }
.bn-tab span { display: inline-flex; align-items: baseline; gap: 8px; min-height: 0; }
.bn-tab em { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--bn-accent); transform: translateY(-1.2em); }
.bn-tab[aria-selected="true"] { color: var(--ink); }
.bn-tab i { position: absolute; left: 0; right: 0; bottom: -17px; height: 2px; background: none; }
.bn-tab b { background: var(--bn-accent); }
@media (hover: hover) { .bn-tab:hover { color: color-mix(in srgb, var(--ink) 70%, transparent); } }
/* the boards no longer repeat the title; their meta line stays */
.bn-stage__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bn-stage { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 899px) {
    .bn-nav { gap: 4px 16px; }
    .bn-tab { font-size: clamp(1.1rem, 0.7rem + 3vw, 1.5rem); letter-spacing: normal; overflow-wrap: normal; }
    .bn-tab em { font-size: 9px; }
}
@media (max-width: 899px) { .bn-tab i { bottom: -3px; } .bn-nav { row-gap: 10px; } }
/* smaller tab-titles; no dead air under the workspace */
.bn-tab { font-size: clamp(1rem, 0.75rem + 0.9vw, 1.55rem); }
.bn-tab em { font-size: 9.5px; transform: translateY(-0.9em); }
.bn { padding-bottom: clamp(24px, 3vw, 40px); }
@media (max-width: 899px) { .bn-tab { font-size: 1.05rem; } }

/* Space under the heading: a luminous spacetime fabric that sits behind the type and fades out at its edges */
.ws-hero__head { position: relative; }
/* the canvas reaches up behind the heading (--space-lift) so the expanded field is not cut off */
.ws-space { --space-lift: 380px; position: absolute; z-index: -1; left: 0; right: 0; top: calc(100% - var(--space-lift)); height: calc(clamp(400px, 44vw, 680px) + var(--space-lift)); width: 100%; pointer-events: none;
    /* soft on every side so the field dissolves into the page ground instead of ending on a band */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 10%, #000 28%, #000 68%, rgba(0,0,0,.4) 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 10%, #000 28%, #000 68%, rgba(0,0,0,.4) 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
    mask-composite: intersect; }

/* ---------- Location and status in the corners of the first screen, a scroll cue between ---------- */
.ws-hero > .ws-status { position: absolute; z-index: 2; top: calc(100svh - 112px); left: var(--gutter); right: var(--gutter); width: auto; max-width: none;
    display: flex; justify-content: space-between; align-items: flex-end; border: 0; pointer-events: none; }
.ws-hero > .ws-status .ws-status__cell { padding: 0; pointer-events: auto; background: none; }
.ws-hero > .ws-status .ws-status__cell + .ws-status__cell { border: 0; text-align: right; }
.ws-hero > .ws-status .ws-status__cell::before, .ws-hero > .ws-status .ws-status__cell::after { display: none; }
.ws-hero > .ws-status .ws-status__cell--live .ws-status__k, .ws-hero > .ws-status .ws-status__cell--live .ws-status__s { justify-content: flex-end; }
.ws-hero > .ws-scroll { position: absolute; z-index: 2; top: calc(100svh - 112px); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); pointer-events: none; }
.ws-scroll i { position: relative; width: 1px; height: 44px; overflow: hidden; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.ws-scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--interactive); animation: ws-cue 2s var(--ease-in-out, ease-in-out) infinite; }
@keyframes ws-cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
@media (prefers-reduced-motion: reduce) { .ws-scroll i::after { animation: none; } }
@media (max-width: 560px) {
    /* small screens: no room in the corners, so it sits in the flow above the title */
    .ws-hero > .ws-status { position: relative; top: auto; left: auto; right: auto; gap: 16px; padding: 0 var(--gutter); margin-bottom: 20px; align-items: flex-start; }
    .ws-hero > .ws-status .ws-status__v, .ws-hero > .ws-status .ws-status__s { white-space: normal; }
    .ws-hero > .ws-scroll { display: none; }
}

/* ---------- Wide screens: the first screen is a slide (pinned); the workspace surfaces in place ---------- */
.bn-head { display: grid; gap: 10px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.bn-head__k { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.bn-head__t { font-size: clamp(24px, 2.4vw, 36px); font-weight: var(--fw-light, 300); line-height: 1.15; max-width: 26ch; color: var(--ink); }
.bn-head__t strong { font-weight: var(--fw-strong); }
.ws-hero.is-slide { height: 100svh; }
.ws-hero.is-slide .ws-hero__head { margin-bottom: 0; }
.ws-hero.is-slide .bn { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--nav-h) + clamp(16px, 2vw, 32px)); padding-bottom: 0; }
.ws-hero.is-slide .bn-nav { margin-top: 0; }
.ws-hero.is-slide .bn-head, .ws-hero.is-slide .bn-nav, .ws-hero.is-slide .bn__boards { opacity: 0; }

/* wide screens: location and status fixed to the viewport corners for the whole page */
.ws-status.is-fixed { position: fixed; z-index: 40; left: var(--gutter); right: var(--gutter); bottom: 28px; width: auto; max-width: none;
    display: flex; justify-content: space-between; align-items: flex-end; border: 0; pointer-events: none; }
.ws-status.is-fixed .ws-status__cell { padding: 0; pointer-events: auto; background: none; }
.ws-status.is-fixed .ws-status__cell + .ws-status__cell { border: 0; text-align: right; }
.ws-status.is-fixed .ws-status__cell::before, .ws-status.is-fixed .ws-status__cell::after { display: none; }
.ws-status.is-fixed .ws-status__cell--live .ws-status__k, .ws-status.is-fixed .ws-status__cell--live .ws-status__s { justify-content: flex-end; }

/* the slide's particle canvas fills the slide: nothing cut, nothing dimmed */
.ws-hero.is-slide > .ws-space { --space-lift: 0px; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 100%; -webkit-mask-image: none; mask-image: none; }
/* close the gap: when the slide lets go the story is already arriving over the swollen field */
.ws-hero.is-slide { margin-bottom: -110svh; }

/* ---------- One chromatic scale for the whole workspace: tints and shades of --interactive ---------- */
.ws-hero {
    --ws-1: color-mix(in srgb, var(--interactive) 8%, transparent);
    --ws-2: color-mix(in srgb, var(--interactive) 16%, transparent);
    --ws-3: color-mix(in srgb, var(--interactive) 28%, transparent);
    --ws-4: color-mix(in srgb, var(--interactive) 55%, var(--bg));
}
.ws-hero .bn, .ws-hero .bn-gov {
    --gate: var(--interactive); --bn-lime: var(--interactive);
    --ph-empathise: var(--ws-1); --ph-define: var(--ws-2); --ph-ideate: var(--ws-1); --ph-test: var(--ws-2);
    --sticky-a: var(--ws-2); --sticky-b: var(--ws-1);
}
.ws-hero .bn-gate__a { color: var(--bg); }   /* reads on the accent pill in both themes (white accent on dark) */
.ws-hero .bn-code--ok { background: var(--ws-1); color: var(--bn-accent); }
.ws-hero .bn-save { color: var(--bn-accent); }

/* ---------- Glass: the board is a pane of glass over the particle field, bending at its sides ---------- */
.ws-hero .bn__boards { position: relative; isolation: isolate; padding: clamp(16px, 2vw, 28px); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    background: color-mix(in srgb, var(--bg) 42%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), inset 18px 0 30px -24px color-mix(in srgb, var(--interactive) 45%, transparent), inset -18px 0 30px -24px color-mix(in srgb, var(--interactive) 45%, transparent); }
.ws-hero .bn__boards::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 140% at 50% 50%, transparent 62%, color-mix(in srgb, var(--interactive) 10%, transparent) 100%); }
.ws-hero .bn-pane, .ws-hero .bn-nn, .ws-hero .bn-box { background: color-mix(in srgb, var(--bn-pane) 55%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------- The boxes sit on a bubble (workspace.js bends each box); the glass behind stays flat ---------- */
.ws-hero [data-bubble-box] { will-change: transform; backface-visibility: hidden; }
/* no glass panel behind the board: the boxes float on the field by themselves */
.ws-hero .bn__boards { padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.ws-hero .bn__boards::after { display: none; }

/* tabs sit at the bottom of the slide */
.ws-hero.is-slide .bn { bottom: 0; }
.ws-hero.is-slide .bn-nav { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; z-index: 5; margin: 0; }
.ws-hero.is-slide .bn__boards { margin-top: clamp(12px, 2vw, 28px); }
/* glass boxes */
.ws-hero .bn-pane, .ws-hero .bn-step, .ws-hero .bn-nn, .ws-hero .bn-box, .ws-hero .bn-arch__block, .ws-hero .bn-sticky, .ws-hero .bn-ui {
    background: color-mix(in srgb, var(--bg) 38%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--interactive) 22%, color-mix(in srgb, #fff 14%, transparent)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent) !important; }
/* blurred glass background on every box and container (and the tab bar); borders untouched */
.ws-hero :is(.bn-n8n, .bn-phase, .bn-teams, .bn-tokens, .bn-parts, .bn-models, .bn-code, .bn-me, .bn-gate, .bn-mini, .bn-life, .bn-chart, .bn-arch, .bn-nav) {
    background: color-mix(in srgb, var(--bg) 34%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); }

.ws-hero .bn-team[aria-pressed="true"] { background: var(--bn-accent); color: var(--bn-on-acc); }

/* stronger frost on every box over the moving field */
.ws-hero :is(.bn-pane, .bn-step, .bn-nn, .bn-box, .bn-arch__block, .bn-sticky, .bn-ui, .bn-n8n, .bn-phase, .bn-teams, .bn-tokens, .bn-parts, .bn-models, .bn-code, .bn-me, .bn-gate, .bn-mini, .bn-life, .bn-chart, .bn-arch, .bn-nav) {
    -webkit-backdrop-filter: blur(40px) saturate(1.5) !important; backdrop-filter: blur(40px) saturate(1.5) !important; }

.ws-hero .bn-sticky { -webkit-backdrop-filter: blur(60px) saturate(1.5) !important; backdrop-filter: blur(60px) saturate(1.5) !important; }
.ws-hero :is(.bn-pane, .bn-step, .bn-nn, .bn-box, .bn-arch__block, .bn-ui, .bn-gate, .bn-n8n, .bn-phase, .bn-teams, .bn-nav) { -webkit-backdrop-filter: blur(52px) saturate(1.5) !important; backdrop-filter: blur(52px) saturate(1.5) !important; }

/* the track bar and the four phase plates sit on the field, with no fill of their own */
.ws-hero .ws-board.is-embedded :is(.bn-nav, .bn-phase, .bn-gate) {
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}


/* light mode: the lime swatch shows as metallic petrol */
:root:not([data-theme="dark"]) .bn-tok[data-bn-token="#CEF307"] { --sw: linear-gradient(135deg, #2a8a92, #1d6b72 55%, #134a50) !important; }
:root:not([data-theme="dark"]) .bn-tok[data-bn-token="#CEF307"] i { background: var(--sw) !important; }
.ws-hero.is-slide .bn { top: calc(var(--nav-h) + clamp(48px, 7vw, 110px)); }
/* the hidden workspace layer must not swallow clicks/hover meant for the hero below it */
.ws-hero.is-slide .bn { pointer-events: none; }
.ws-hero.is-slide.is-ws-on .bn > * { pointer-events: auto; }
.ws-hero.is-slide.is-ws-on .ws-hero__head { pointer-events: none; }
/* hero heading and CTA sit lower in the first screen */
.ws-hero.is-slide .ws-hero__head { padding-top: clamp(40px, 10vh, 140px); }
/* scroll cue in the bottom-right corner */
.ws-hero > .ws-scroll { left: auto; right: var(--gutter); transform: none; justify-items: end; }
.ws-hero.is-slide .bn-nav { right: calc(var(--gutter) + 64px); }   /* room for the scroll cue */

/* hero and workspace are now two slides: the hero hands straight over to the story,
   the workspace board is its own pinned slide after it */
.ws-board { padding-top: 0; }
.ws-board.is-slide { margin-bottom: 0; }
.ws-board.is-slide .ws-hero__head { display: none; }
.ws-intro.is-slide .bn { display: none; }
/* the story does not scroll in from below: it sits right under the hero slide and emerges from the
   expanded field as the hero dissolves */
html.has-intro-slide [data-story] { margin-top: -100vh; }
html.has-intro-slide [data-story]:not(.is-live) { visibility: hidden; }
/* keep clear of the vertical settings label on the right edge */
.ws-hero__ctas { margin-right: 44px; }
.ws-hero__ctas { display: none; }
/* the looping heading keeps a three-line box, so the page does not jump between phrases */
[data-hero-loop] { min-height: 3.4em; }
.hero-loop__caret { display: inline-block; width: 0.06em; height: 0.9em; margin-left: 0.04em; vertical-align: -0.08em; background: var(--accent); animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
/* hero loop: larger type, no caret */
[data-hero-loop] { font-size: clamp(2.2rem, 1rem + 3.2vw, 4.2rem); }
.hero-loop__caret { display: none; }
/* hero: the second line sits on the first and is revealed by scrolling */
.ws-hero__titles { display: grid; }
.ws-hero__titles > * { grid-area: 1 / 1; }
.ws-hero__next { margin: 0; }
html:not(.has-intro-slide) .ws-hero__next { grid-area: auto; margin-top: 0.6em; }
.ws-hero__titles .ws-hero__title { font-size: clamp(2.2rem, 1rem + 3.2vw, 4.2rem); }
.ws-hero__lede { margin: 1.4rem 0 0; max-width: 44ch; font-size: var(--fs-lg, 1.25rem); line-height: 1.45; color: var(--ink-2); }
.ws-hero__lede { font-size: var(--fs-md, 1.0625rem); max-width: 40ch; }
.ws-hero__work { margin-top: 1.8rem; gap: 10px; justify-self: start; }
.ws-hero__first { display: grid; justify-items: start; }
.ws-hero__arrow { width: 16px; height: 16px; transition: transform 300ms var(--ease-out); }
@media (hover: hover) { .ws-hero__work:hover .ws-hero__arrow { transform: translateX(4px); } }
.ws-hero__lede { font-size: 1.2rem; }
/* the work button: clear glass bent along a curve, as if laid on the field's bubble. The pointer
   pulls the pane flat towards itself (workspace.js sets --rx/--ry); leaving lets it curve back */
.ws-hero__bend { display: inline-block; perspective: 600px; --rx: 8deg; --ry: -18deg; }
.ws-hero__work.btn--solid { position: relative; padding: 16px 28px; border-radius: 0 !important; color: var(--ink);
    background: linear-gradient(100deg, color-mix(in srgb, var(--ink) 4%, transparent), color-mix(in srgb, var(--ink) 14%, transparent) 45%, color-mix(in srgb, var(--ink) 3%, transparent));
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.5);
    transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(.2,.8,.2,1), background 400ms var(--ease-out); }
.ws-hero__work.btn--solid::before { content: none; }
/* a soft sheen that follows the curve */
.ws-hero__work.btn--solid::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, #fff 16%, transparent) 42%, transparent 60%); mix-blend-mode: screen; }
@media (hover: hover) { .ws-hero__work.btn--solid:hover { transition-duration: 250ms; background: color-mix(in srgb, var(--ink) 16%, transparent); } }
/* a slight float: the pane drifts up and down a few pixels (translate, so it stacks with GSAP) */
.ws-hero__bend { animation: bend-float 6s ease-in-out infinite; }
@keyframes bend-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .ws-hero__bend { animation: none; } }
/* same hover as every other button: the accent wipes up from the bottom and the label rolls;
   at rest the face is clear, frosted glass */
.ws-hero__work.btn--solid { background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden;
    backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
.ws-hero__work.btn--solid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(101%); transition: transform 450ms var(--ease-out); }
@media (hover: hover) {
    .ws-hero__work.btn--solid:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--on-accent); }
    .ws-hero__work.btn--solid:hover::before { transform: translateY(0); }
}
/* the waiting second line sits on top of the first block: it must not swallow the button clicks */
.ws-hero__next { pointer-events: none; }
.ws-hero__lede { margin-top: 2.2rem; }
.ws-hero__bend { margin-top: 2.8rem; }
.ws-hero__work { margin-top: 0; }
/* irregular float: uneven steps and timings, a little sideways drift too */
.ws-hero__bend { animation: bend-float 9.7s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes bend-float {
    0% { translate: 0 0; } 17% { translate: 1px -4px; } 31% { translate: -1px -2px; } 52% { translate: 2px -7px; }
    68% { translate: 0 -3px; } 83% { translate: -2px -5px; } 100% { translate: 0 0; }
}
/* the lede: one line, with a chromatic aberration that breathes in a loop (text-shadow, so it
   never takes the filter the pointer lens uses) */
.ws-hero__lede { max-width: none; white-space: nowrap; animation: lede-ab 4.8s ease-in-out infinite; }
@media (max-width: 899px) { .ws-hero__lede { white-space: normal; } }
@keyframes lede-ab {
    0%, 100% { text-shadow: 0.6px 0 rgb(255 40 90 / 0.55), -0.6px 0 rgb(40 200 255 / 0.55); }
    40% { text-shadow: 1.8px 0.3px rgb(255 40 90 / 0.7), -1.8px -0.3px rgb(40 200 255 / 0.7); }
    46% { text-shadow: -1.2px 0 rgb(255 40 90 / 0.7), 1.2px 0 rgb(40 200 255 / 0.7); }
    52% { text-shadow: 2.4px 0 rgb(255 40 90 / 0.6), -2.4px 0 rgb(40 200 255 / 0.6); }
    70% { text-shadow: 0.8px 0 rgb(255 40 90 / 0.55), -0.8px 0 rgb(40 200 255 / 0.55); }
}
@media (prefers-reduced-motion: reduce) { .ws-hero__lede { animation: none; } }
.ws-hero__lede { animation: none; text-shadow: none; }
.ws-hero__ledetext { display: inline-block; }
/* the globe wraps the text itself, so the arch is centred on it; room below for the dropped ends */
.ws-hero__globe { width: max-content; max-width: 100%; padding-bottom: 40px; margin-bottom: -40px; }
/* the second hero block: its line plus the About entry; hidden (and unclickable) until scrolled to */
.ws-hero__second { display: grid; justify-items: start; }
.ws-hero__second .ws-hero__next { pointer-events: auto; }
html.has-intro-slide .ws-hero__second { visibility: hidden; }

/* each tab is now a story of its own: no tab bar; DesignOps first */
.ws-board:not(.is-embedded) .bn-nav { display: none !important; }
.ws-board:not(.is-embedded).is-slide .bn { z-index: 3; }

/* the craft (workspace.js turns the plane and places the boards around its centre). Blocks are
   layers above their board; their thickness is three hard edges straight down the screen, whatever
   the plane's turn (--ex/--ey: screen "down" in the board's own coordinates) */
.ws-board:not(.is-embedded) .bn__boards { transform-origin: 50% 50%; }
.ws-board:not(.is-embedded) [data-bubble-box] { --edge: color-mix(in srgb, var(--interactive) 34%, var(--bg));
    box-shadow: calc(var(--ex, 0.7) * 2.5px) calc(var(--ey, 0.7) * 2.5px) 0 var(--edge), calc(var(--ex, 0.7) * 5px) calc(var(--ey, 0.7) * 5px) 0 var(--edge),
                calc(var(--ex, 0.7) * 7.5px) calc(var(--ey, 0.7) * 7.5px) 0 var(--edge) !important; }
/* light: no live glass anywhere on the workspace, solid panes instead (backdrop blur on dozens of
   moving boxes was the heaviest thing on the page) */
.ws-board:not(.is-embedded) :is(.bn-pane, .bn-step, .bn-nn, .bn-box, .bn-arch__block, .bn-sticky, .bn-ui, .bn-n8n, .bn-phase, .bn-teams, .bn-tokens, .bn-parts, .bn-models, .bn-code, .bn-me, .bn-mini, .bn-life, .bn-chart, .bn-arch, .bn-nav, .bn-run, .bn-row) {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.ws-board:not(.is-embedded) :is(.bn-pane, .bn-step, .bn-nn, .bn-box, .bn-arch__block, .bn-ui, .bn-n8n, .bn-run, .bn-mini) { background: color-mix(in srgb, var(--bg) 88%, var(--interactive)) !important; }
/* the yes/no diamonds float bare: no panel, no edge under them */
.ws-board:not(.is-embedded) .bn-gate, .ws-board:not(.is-embedded) .bn-gate[data-bubble-box] { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.ws-board:not(.is-embedded) .bn-gate::before, .ws-board:not(.is-embedded) .bn-gate::after { display: none !important; }
/* the craft is turned by dragging too */
.ws-board:not(.is-embedded) .bn__boards { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x; }
.ws-board:not(.is-embedded) .bn__boards:active { cursor: grabbing; }
/* the floating blocks move on their own compositor layers (cheap transforms, no repaint) */
.ws-board:not(.is-embedded) .is-active [data-bubble-box] { will-change: transform; }
.ws-board:not(.is-embedded) [data-bn-board] { will-change: transform, opacity; }
/* layers behind the one in focus: frozen and without live glass, so they cost one paint */
.ws-board:not(.is-embedded) .is-back, .ws-board:not(.is-embedded) .is-back *, .ws-board:not(.is-embedded) .is-back *::before, .ws-board:not(.is-embedded) .is-back *::after { animation-play-state: paused !important; transition: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* flat boxes: no thickness, no shadow, no lift */
.ws-board:not(.is-embedded) [data-bubble-box] { box-shadow: none !important; transform: none !important; }
/* building the workflow: the block that has just arrived is isolated in focus */
.ws-board:not(.is-embedded) [data-bubble-box].is-focus { outline: 1px solid var(--interactive); outline-offset: 4px; }
.ws-board:not(.is-embedded) [data-bubble-box] { transition: outline-color 300ms; }
/* the guided walk: a caption explains the step the camera is zoomed in on */
.ws-board:not(.is-embedded) .bn__boards { will-change: transform; }
.ws-cap { position: absolute; z-index: 6; left: var(--gutter); bottom: 72px; width: min(420px, 80vw); opacity: 0; pointer-events: none; display: grid; gap: 8px; }
.ws-cap__n { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--interactive); }
.ws-cap__t { font-size: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); font-weight: var(--fw-strong); line-height: 1.15; color: var(--ink); }
.ws-cap__d { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.ws-board:not(.is-embedded) [data-bubble-box].is-focus { outline: 1px solid var(--interactive); outline-offset: 6px; }

/* the walk (ws-walk.js): an empty dark field, one thin line, one step at a time */
.ws-walk { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; visibility: hidden; opacity: 0; }
.ws-walk__track { position: absolute; left: 30%; top: 46%; will-change: transform; }
.ws-walk__svg { position: absolute; overflow: visible; max-width: none; height: 800px; }
.ws-walk__rail { fill: none; stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 1; }
.ws-walk__line { fill: none; stroke: var(--interactive); stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--interactive) 70%, transparent)); }
.ws-walk__back { fill: none; stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.ws-walk__node { fill: var(--bg); stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.2; transition: fill 400ms, stroke 400ms; }
.ws-walk__node.is-on { fill: var(--interactive); stroke: var(--interactive); }
.ws-walk__step { position: absolute; width: min(520px, 44vw); margin: 44px 0 0 -2px; display: grid; gap: 14px; opacity: 0; will-change: transform, opacity; }
.ws-walk__k { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--interactive); }
.ws-walk__t { margin: 0; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); font-weight: var(--fw-display); line-height: 1.05; letter-spacing: var(--track-display); color: var(--ink); }
.ws-walk__d { margin: 0; max-width: 40ch; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); }
.ws-walk__yes, .ws-walk__no { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.ws-walk__yes { color: var(--interactive); }
.ws-walk__no { color: var(--ink-3); }
@media (max-width: 899px) { .ws-walk__track { left: 12%; } .ws-walk__step { width: 76vw; } }
/* chapter nodes open each track of the one story */
.ws-walk__node.is-chapter { fill: none; stroke: var(--interactive); stroke-width: 1.5; }
.ws-walk__node.is-chapter.is-on { fill: color-mix(in srgb, var(--interactive) 25%, transparent); }
.ws-walk__step.is-chapter .ws-walk__t { font-size: clamp(2.8rem, 1.4rem + 4vw, 5.6rem); font-weight: var(--fw-strong); }

/* the workspace map: four boards on one plane, a camera that flies between them */
.ws-board:not(.is-embedded) .bn__boards.is-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 2900px; gap: 260px 220px; position: relative; pointer-events: auto; transform-origin: 0 0; }
.ws-board:not(.is-embedded) .bn__boards.is-map > [data-bn-board] { grid-area: auto; min-width: 0; }
.ws-board:not(.is-embedded) .bn__boards.is-overview { cursor: zoom-in; }
.ws-board:not(.is-embedded) .bn__boards.is-overview [data-bn-board] { transition: opacity 300ms; }
.ws-map { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ws-map__links { position: absolute; left: 0; top: 0; overflow: visible; }
.ws-map__links line { stroke: color-mix(in srgb, var(--interactive) 55%, transparent); stroke-width: 3; stroke-dasharray: 10 14; }
.ws-map__links text { fill: var(--ink-3); font: 600 34px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; text-anchor: middle; }
.ws-map__links text[text-anchor="start"] { text-anchor: start; }
.ws-map__label { position: absolute; transform: translateY(-100%); display: grid; gap: 10px; }
.ws-map__label b { font-size: 120px; line-height: 1; font-weight: var(--fw-strong); letter-spacing: var(--track-display); color: var(--ink); }
.ws-map__label span { font: 34px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--interactive); }
/* the mini-map, always on screen inside the workspace */
.ws-mini { position: absolute; z-index: 8; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.ws-mini button { all: unset; cursor: pointer; color: var(--ink-3); transition: color 250ms; }
.ws-mini button:hover, .ws-mini button.is-on { color: var(--ink); }
.ws-mini__grid { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 4px; }
.ws-mini__grid button { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.ws-mini__grid button.is-on { border-color: var(--interactive); background: color-mix(in srgb, var(--interactive) 18%, transparent); }
.ws-board:not(.is-embedded) [data-bubble-box].is-focus { outline: none; }

/* the workspace field (gl/ws-field.js): one sector at a time, its words beside it */
.ws-field { position: absolute; inset: 0; z-index: 4; }
.ws-field__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ws-field__copy { position: absolute; left: var(--gutter); bottom: clamp(96px, 14vh, 150px); width: min(440px, 40vw); display: grid; }
.ws-field__s { grid-area: 1 / 1; align-self: end; display: grid; gap: 16px; opacity: 0; visibility: hidden; }
.ws-field__n { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--interactive); }
.ws-field__k { margin: 0; font-size: clamp(2.6rem, 1.2rem + 3.6vw, 5rem); font-weight: var(--fw-strong); line-height: 1; letter-spacing: var(--track-display); color: var(--ink); }
.ws-field__t { margin: 0; font-size: 1.15rem; line-height: 1.45; color: var(--ink-2); }
.ws-field__pts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; font-size: 0.92rem; color: var(--ink-3); }
.ws-field__pts li { display: flex; gap: 10px; align-items: baseline; }
.ws-field__pts li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--interactive); transform: translateY(-4px); }
.ws-field__nav { position: absolute; right: calc(var(--gutter) + 40px); bottom: clamp(96px, 14vh, 150px); display: flex; align-items: center; gap: 18px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); }
.ws-field__nav button { all: unset; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); transition: border-color 250ms, background 250ms; }
.ws-field__nav button:hover { border-color: var(--interactive); background: color-mix(in srgb, var(--interactive) 14%, transparent); }
@media (max-width: 899px) { .ws-field__copy { width: auto; right: var(--gutter); bottom: 120px; } .ws-field__nav { right: var(--gutter); bottom: 40px; } }
.ws-board:not(.is-embedded).is-field .bn { display: none !important; }
/* DesignOps fills the width with its particle board: its words sit low, out of the way */
.ws-field__copy { bottom: clamp(56px, 8vh, 90px); }
/* the DesignOps board's words: real text over the particle field */
.ws-field__labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; visibility: hidden; }
.ws-field__l { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1.15; color: var(--ink); will-change: transform; transition: color 300ms, text-shadow 300ms; }
.ws-field__l.is-step { font-weight: 600; }
.ws-field__l.is-phase { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--interactive); }
.ws-field__l.is-gate { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-2); }
.ws-field__l.is-under { white-space: normal; width: 9em; text-align: center; }
.ws-field__l.is-hit { color: #fff; text-shadow: 0 0 14px color-mix(in srgb, var(--interactive) 80%, transparent); }

/* the workspace room: a round room in 3D, you at its centre, the workflows on its curved wall */
.ws-board:not(.is-embedded).is-room .bn { inset: 0 !important; top: 0 !important; padding: 0 !important; perspective: var(--room-p, 900px); perspective-origin: 50% 50%; overflow: hidden; }
.ws-board:not(.is-embedded).is-room .bn-head, .ws-board:not(.is-embedded).is-room .bn-nav { display: none !important; }
.ws-board:not(.is-embedded).is-room .bn__boards { position: absolute !important; left: 50%; top: 52%; width: 0 !important; height: 0; margin: 0 !important; padding: 0 !important; display: block !important;
    transform-style: preserve-3d; isolation: auto !important; overflow: visible !important; cursor: grab; opacity: 1 !important; }
.ws-board:not(.is-embedded).is-room .bn__boards:active { cursor: grabbing; }
.ws-board:not(.is-embedded).is-room [data-bn-board] { position: absolute !important; left: 0; top: 0; width: min(1340px, 86vw); grid-area: auto !important; backface-visibility: hidden; transition: opacity 200ms linear; }
.ws-room, .ws-room__slats { position: absolute; left: 0; top: 0; transform-style: preserve-3d; pointer-events: none; }
.ws-room__slats i { position: absolute; left: 0; top: 0; display: block; backface-visibility: hidden;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 4%, transparent) 30%, color-mix(in srgb, var(--ink) 4%, transparent) 70%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-room__floor, .ws-room__ceil { position: absolute; left: 0; top: 0; border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 58px, color-mix(in srgb, var(--interactive) 22%, transparent) 59px, transparent 61px),
                radial-gradient(circle, color-mix(in srgb, var(--interactive) 10%, transparent), transparent 70%); }
.ws-room__ceil { opacity: 0.4; }
.ws-room__nav { position: absolute; z-index: 8; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.ws-room__nav ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.ws-room__nav button { all: unset; cursor: pointer; color: var(--ink-3); transition: color 250ms; }
.ws-room__nav button:hover, .ws-room__nav button.is-on { color: var(--ink); }
.ws-room__nav button.is-on { box-shadow: 0 1px 0 var(--interactive); }
.ws-room__nav > button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); }

/* the remote world (gl/world.js) behind the floating workflows */
.ws-board:not(.is-embedded).is-room .ws-world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.ws-board:not(.is-embedded).is-room .bn__boards { z-index: 1; top: 46%; }
/* the workflows as material slabs: dark tinted glass with a lit edge, a sheen and a deep shadow */
.ws-board:not(.is-embedded).is-room [data-bn-board] { padding: 34px 38px 38px; border-radius: 6px;
    background: linear-gradient(155deg, color-mix(in srgb, var(--bg) 70%, var(--interactive) 12%) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 55%, color-mix(in srgb, var(--bg) 78%, var(--brand-purple) 10%) 100%);
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent), inset 0 0 60px color-mix(in srgb, var(--interactive) 10%, transparent),
                0 60px 120px -40px rgb(0 0 0 / 0.8), 0 0 80px -20px color-mix(in srgb, var(--interactive) 35%, transparent); }
.ws-board:not(.is-embedded).is-room [data-bn-board]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, #fff 7%, transparent) 45%, transparent 60%); }
.ws-board:not(.is-embedded).is-room .bn { max-width: none !important; width: 100% !important; margin: 0 !important; left: 0 !important; right: 0 !important; }

/* ===== the ink workspace: a still sumi-e scene, the workflow beside it, vertical tabs on the right ===== */
.ws-board:not(.is-embedded).is-ink { --ink-c: #16140f; --ink-paper: var(--bg); }
:root[data-theme="dark"] .ws-board:not(.is-embedded).is-ink { --ink-c: #ece6d8; }
.ws-board:not(.is-embedded).is-ink .ws-ink { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ws-board:not(.is-embedded).is-ink .ws-ink svg { width: 100%; height: 100%; display: block; }
.ws-ink__far { fill: var(--ink-c); opacity: 0.1; }
.ws-ink__mid { fill: var(--ink-c); opacity: 0.17; }
.ws-ink__near { fill: var(--ink-c); opacity: 0.3; }
.ws-ink__mistband { fill: var(--bg); opacity: 0.9; }
.ws-ink__enso path { stroke: var(--ink-c); opacity: 0.55; }
.ws-ink__seal rect { fill: #b3261e; opacity: 0.85; }
/* layout: workflow on the left, tabs stacked vertically on the right */
.ws-board:not(.is-embedded).is-ink .bn { z-index: 2; display: grid !important; grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(24px, 4vw, 64px); align-items: center;
    left: var(--gutter) !important; right: calc(var(--gutter) + 40px) !important; top: calc(var(--nav-h) + 24px) !important; bottom: 40px !important; }
.ws-board:not(.is-embedded).is-ink .bn-head { display: none !important; }
.ws-board:not(.is-embedded).is-ink .bn-nav { display: flex !important; position: static !important; grid-column: 2; grid-row: 1; flex-direction: column; gap: 0; margin: 0 !important; opacity: 1 !important; border-left: 1px solid color-mix(in srgb, var(--ink-c) 25%, transparent); }
.ws-board:not(.is-embedded).is-ink .bn-tab { all: unset; cursor: pointer; display: block; padding: 18px 0 18px 22px; position: relative; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--ink-c) 50%, transparent); transition: color 300ms; }
.ws-board:not(.is-embedded).is-ink .bn-tab em { font-style: normal; margin-right: 10px; opacity: 0.6; }
.ws-board:not(.is-embedded).is-ink .bn-tab i { display: none; }
.ws-board:not(.is-embedded).is-ink .bn-tab:hover, .ws-board:not(.is-embedded).is-ink .bn-tab[aria-selected="true"] { color: var(--ink-c); }
.ws-board:not(.is-embedded).is-ink .bn-tab[aria-selected="true"]::before { content: ""; position: absolute; left: -2px; top: 10px; bottom: 10px; width: 3px; background: var(--ink-c); border-radius: 2px; filter: url(#ink-brush); }
.ws-board:not(.is-embedded).is-ink .bn__boards { grid-column: 1; grid-row: 1; opacity: 1 !important; transform: none !important; background: none !important; border: 0 !important; box-shadow: none !important; }
/* the workflow drawn in ink: no panels, brush-edged boxes, ink text */
.ws-board:not(.is-embedded).is-ink [data-bn-board] { background: none !important; border: 0 !important; box-shadow: none !important; }
.ws-board:not(.is-embedded).is-ink :is(.bn-pane, .bn-step, .bn-nn, .bn-box, .bn-arch__block, .bn-ui, .bn-n8n, .bn-run, .bn-mini, .bn-sticky, .bn-phase, .bn-arch, .bn-teams, .bn-tokens) {
    background: color-mix(in srgb, var(--bg) 70%, transparent) !important; border-color: transparent !important; box-shadow: none !important; position: relative; color: var(--ink-c); }
.ws-board:not(.is-embedded).is-ink :is(.bn-pane, .bn-step, .bn-nn, .bn-box, .bn-arch__block, .bn-n8n, .bn-run, .bn-mini, .bn-sticky)::after {
    content: ""; position: absolute; inset: -2px; border: 1.6px solid var(--ink-c); border-radius: 3px; pointer-events: none; filter: url(#ink-brush); opacity: 0.85; }
.ws-board:not(.is-embedded).is-ink :is(.bn-step b, .bn-stage__t, .bn-nn b, .bn-sticky, h3, strong) { color: var(--ink-c) !important; }
.ws-board:not(.is-embedded).is-ink :is(.bn-step em, .bn-stage__g, .bn-stage__m, small) { color: color-mix(in srgb, var(--ink-c) 60%, transparent) !important; }
.ws-board:not(.is-embedded).is-ink svg path:not(.ws-ink *) { filter: url(#ink-brush); }
.ws-board:not(.is-embedded).is-ink [data-bn-gov-wires] .w-fwd, .ws-board:not(.is-embedded).is-ink [data-bn-gov-wires] .w-back { stroke: var(--ink-c) !important; stroke-opacity: 0.6; }
.ws-board:not(.is-embedded).is-ink .bn-gate__d { background: var(--ink-c) !important; box-shadow: none !important; filter: url(#ink-brush); }
.ws-board:not(.is-embedded).is-ink .bn-gate__a { background: #b3261e !important; color: #fff !important; }
@media (max-width: 899px) { .ws-board:not(.is-embedded).is-ink .bn { grid-template-columns: 1fr; } .ws-board:not(.is-embedded).is-ink .bn-nav { grid-column: 1; flex-direction: row; overflow-x: auto; border-left: 0; } }
.ws-ink__mistband { opacity: 0.45; }
.ws-ink__near { opacity: 0.16; }
.ws-ink__mid { opacity: 0.12; }
.ws-board:not(.is-embedded).is-ink .bn-nav { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; padding: 0 !important; }

/* ===== the lumen workspace: a framed dark panel, the workflow in luminous lines, laid out square ===== */
.ws-board:not(.is-embedded).is-lumen { --ws-glow: #7fe0d0; background: var(--bg); }
.ws-board:not(.is-embedded).is-lumen .ws-ink { display: none; }
.ws-frame { position: absolute; inset: 20px; z-index: 0; border-radius: 18px; overflow: hidden; pointer-events: none; background: #04080a;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 6%, transparent); }
.ws-frame__glow { position: absolute; inset: -10%;
    background: radial-gradient(40% 35% at 22% 18%, rgb(70 150 140 / 0.35), transparent 70%), radial-gradient(35% 40% at 85% 85%, rgb(60 140 130 / 0.28), transparent 70%),
                radial-gradient(30% 30% at 70% 20%, color-mix(in srgb, var(--interactive) 18%, transparent), transparent 70%), radial-gradient(60% 50% at 50% 60%, #000, transparent 80%);
    filter: blur(20px); animation: ws-glow 26s ease-in-out infinite alternate; }
@keyframes ws-glow { to { transform: translate(3%, -2%) scale(1.06); } }
.ws-frame__wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.9; }
/* inside the frame everything is drawn in light, whatever the theme */
.ws-board:not(.is-embedded).is-lumen .bn { --ink: #eef3f2; --ink-2: #a9b8b6; --ink-3: #6f807e; --bn-ink: #eef3f2; color: var(--ink);
    z-index: 2; display: grid !important; grid-template-columns: minmax(0, 1fr) 210px; gap: clamp(24px, 4vw, 64px); align-items: center;
    left: calc(20px + clamp(28px, 4vw, 64px)) !important; right: calc(20px + clamp(36px, 4vw, 72px)) !important; top: calc(20px + var(--nav-h)) !important; bottom: 56px !important; }
.ws-board:not(.is-embedded).is-lumen .bn-head { display: none !important; }
.ws-board:not(.is-embedded).is-lumen .bn__boards { grid-column: 1; grid-row: 1; justify-self: center; width: min(100%, 940px); opacity: 1 !important; transform: none !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.ws-board:not(.is-embedded).is-lumen [data-bn-board] { background: none !important; border: 0 !important; box-shadow: none !important; }
/* tabs: a vertical rail on the right */
.ws-board:not(.is-embedded).is-lumen .bn-nav { display: flex !important; position: static !important; grid-column: 2; grid-row: 1; flex-direction: column; margin: 0 !important; opacity: 1 !important; padding: 0 !important;
    background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border-left: 1px solid rgb(255 255 255 / 0.12); }
.ws-board:not(.is-embedded).is-lumen .bn-tab { all: unset; cursor: pointer; display: block; position: relative; padding: 18px 0 18px 22px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 0.4); transition: color 300ms; }
.ws-board:not(.is-embedded).is-lumen .bn-tab em { font-style: normal; margin-right: 10px; color: var(--ws-glow); opacity: 0.7; }
.ws-board:not(.is-embedded).is-lumen .bn-tab i { display: none; }
.ws-board:not(.is-embedded).is-lumen .bn-tab:hover, .ws-board:not(.is-embedded).is-lumen .bn-tab[aria-selected="true"] { color: #fff; }
.ws-board:not(.is-embedded).is-lumen .bn-tab[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; background: var(--ws-glow); box-shadow: 0 0 12px var(--ws-glow), 0 0 24px var(--ws-glow); }
/* luminous lines: boxes are outlines of light, no fill; connectors glow */
.ws-board:not(.is-embedded).is-lumen :is(.bn-pane, .bn-step, .bn-nn, .bn-box, .bn-arch__block, .bn-ui, .bn-n8n, .bn-run, .bn-mini, .bn-sticky, .bn-phase, .bn-teams, .bn-tokens, .bn-arch, .bn-row > *) {
    background: rgb(255 255 255 / 0.015) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
.ws-board:not(.is-embedded).is-lumen :is(.bn-pane, .bn-step, .bn-nn, .bn-box, .bn-arch__block, .bn-n8n, .bn-run, .bn-mini, .bn-sticky) {
    border: 1px solid color-mix(in srgb, var(--ws-glow) 55%, transparent) !important; border-radius: 6px !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--ws-glow) 22%, transparent), inset 0 0 14px color-mix(in srgb, var(--ws-glow) 8%, transparent) !important; }
.ws-board:not(.is-embedded).is-lumen .bn-step.is-current, .ws-board:not(.is-embedded).is-lumen .bn-step:hover { border-color: #fff !important; box-shadow: 0 0 18px color-mix(in srgb, var(--ws-glow) 60%, transparent), inset 0 0 18px color-mix(in srgb, var(--ws-glow) 14%, transparent) !important; }
.ws-board:not(.is-embedded).is-lumen :is(.bn-step b, .bn-stage__t, .bn-nn b, .bn-sticky, .bn-phase__band b, h3, strong) { color: #f2f7f6 !important; }
.ws-board:not(.is-embedded).is-lumen :is(.bn-step em, .bn-stage__g, .bn-stage__m, .bn-phase__band span, small) { color: #8fa3a1 !important; }
.ws-board:not(.is-embedded).is-lumen .bn-phase { --ph-empathise: transparent; --ph-define: transparent; --ph-ideate: transparent; --ph-test: transparent; background: none !important; }
.ws-board:not(.is-embedded).is-lumen svg path { stroke: var(--ws-glow) !important; filter: drop-shadow(0 0 3px var(--ws-glow)); }
.ws-board:not(.is-embedded).is-lumen .bn-gate__d { background: none !important; border: 1.5px solid var(--ws-glow); box-shadow: 0 0 10px var(--ws-glow) !important; }
.ws-board:not(.is-embedded).is-lumen .bn-gate__a { background: var(--ws-glow) !important; color: #04080a !important; }
.ws-board:not(.is-embedded).is-lumen .bn-gate { background: none !important; }
/* square: DesignOps runs Empathise, Define across the top, the first gate in the middle, Ideate,
   the second gate and Test across the bottom; the other boards stack into two columns */
.ws-board:not(.is-embedded).is-lumen .bn-gov { display: grid !important; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr) !important; grid-auto-flow: row !important; gap: 34px 20px !important;
    grid-template-areas: "emp . def" ". g1 ." "ide g3 tst"; align-items: center; }
.ws-board:not(.is-embedded).is-lumen .bn-phase--empathise { grid-area: emp; }
.ws-board:not(.is-embedded).is-lumen .bn-phase--define { grid-area: def; }
.ws-board:not(.is-embedded).is-lumen .bn-gov > .bn-gate[data-bn-gate="g1"] { grid-area: g1; }
.ws-board:not(.is-embedded).is-lumen .bn-phase--ideate { grid-area: ide; }
.ws-board:not(.is-embedded).is-lumen .bn-gov > .bn-gate[data-bn-gate="g3"] { grid-area: g3; }
.ws-board:not(.is-embedded).is-lumen .bn-phase--test { grid-area: tst; }
.ws-board:not(.is-embedded).is-lumen :is(.bn-ai-layout, .bn-arch, .bn-row) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; display: grid !important; }
.ws-board:not(.is-embedded).is-lumen .bn-notes { display: flex; gap: 18px; margin-top: 26px; }
@media (max-width: 899px) { .ws-board:not(.is-embedded).is-lumen .bn { grid-template-columns: 1fr; } .ws-board:not(.is-embedded).is-lumen .bn-nav { grid-column: 1; flex-direction: row; overflow-x: auto; border-left: 0; } }
/* no detached frame: the dark ground fills the whole slide; tabs on top; smaller workflows */
.ws-frame { inset: 0; border-radius: 0; box-shadow: none; }
.ws-board:not(.is-embedded).is-lumen .bn { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; justify-items: center; gap: 28px;
    left: var(--gutter) !important; right: var(--gutter) !important; top: calc(var(--nav-h) + 16px) !important; bottom: 40px !important; }
.ws-board:not(.is-embedded).is-lumen .bn-nav { grid-column: 1; grid-row: 1; flex-direction: row; justify-content: center; gap: 0; border-left: 0; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.ws-board:not(.is-embedded).is-lumen .bn-tab { padding: 14px 22px; }
.ws-board:not(.is-embedded).is-lumen .bn-tab[aria-selected="true"]::before { left: 12px; right: 12px; top: auto; bottom: -1px; width: auto; height: 2px; }
.ws-board:not(.is-embedded).is-lumen .bn__boards { grid-column: 1; grid-row: 2; width: min(100%, 860px); zoom: 0.82; }

/* hero: a small looping line of roles above the heading */
.ws-hero__roles { margin: 0 0 18px; height: 1.4em; overflow: hidden; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--interactive); }
.ws-hero__roles-in { display: grid; animation: ws-roles 12.5s cubic-bezier(.7,0,.3,1) infinite; }
.ws-hero__roles-in span { height: 1.4em; line-height: 1.4em; }
@keyframes ws-roles { 0%,16% { transform: translateY(0); } 20%,36% { transform: translateY(-1.4em); } 40%,56% { transform: translateY(-2.8em); } 60%,76% { transform: translateY(-4.2em); } 80%,96% { transform: translateY(-5.6em); } 100% { transform: translateY(-7em); } }
@media (prefers-reduced-motion: reduce) { .ws-hero__roles-in { animation: none; } }
/* hero: three latest works as floating translucent cards */
.ws-hero__cases { display: flex; gap: 18px; margin-top: 36px; pointer-events: auto; }
.ws-case { position: relative; width: 220px; padding: 14px; display: grid; gap: 6px; border-radius: 10px; overflow: hidden; color: var(--ink);
    background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: ws-case-float 7s ease-in-out infinite; transition: background 400ms, border-color 400ms, transform 400ms; }
.ws-case--1 { animation-delay: -2.3s; animation-duration: 8.2s; margin-top: 22px; }
.ws-case--2 { animation-delay: -4.6s; animation-duration: 6.4s; margin-top: 8px; }
@keyframes ws-case-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.ws-case__img { height: 96px; border-radius: 6px; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.05); opacity: 0.45; transition: filter 500ms, opacity 500ms, transform 700ms; }
.ws-case__c { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); transition: color 400ms; }
.ws-case__t { font-size: 13px; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) {
    .ws-case:hover { background: color-mix(in srgb, var(--interactive) 18%, transparent); border-color: color-mix(in srgb, var(--interactive) 60%, transparent); transform: translateY(-4px); }
    .ws-case:hover .ws-case__img { filter: none; opacity: 1; transform: scale(1.06); }
    .ws-case:hover .ws-case__c { color: var(--interactive); }
}
@media (max-width: 899px) { .ws-hero__cases { overflow-x: auto; } .ws-case { flex: none; width: 200px; } }
.ws-case__t { max-height: 2.7em; }
/* roles: typed in, deleted, retyped */
.ws-hero__roles { display: flex; align-items: center; gap: 2px; }
.ws-hero__caret { width: 7px; height: 1.1em; background: var(--interactive); animation: ws-caret 1s steps(1) infinite; }
@keyframes ws-caret { 50% { opacity: 0; } }
/* cases: liquid, blurred glass cards laid on an isometric plane, a particle sign instead of an image */
.ws-hero__cases { gap: 28px; margin-top: 44px; perspective: 900px; }
.ws-case { width: 210px; padding: 16px 16px 18px; border-radius: 22px; border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    background: linear-gradient(140deg, color-mix(in srgb, var(--interactive) 16%, transparent), color-mix(in srgb, var(--ink) 4%, transparent) 60%);
    backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
    transform: rotateX(28deg) rotateZ(-14deg); transform-style: preserve-3d;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 18px 22px 40px -18px rgb(0 0 0 / 0.6); }
.ws-case__sign { width: 180px; height: 90px; display: block; }
@media (hover: hover) { .ws-case:hover { transform: rotateX(18deg) rotateZ(-10deg) translateY(-6px); border-radius: 30px 18px 26px 20px; background: linear-gradient(140deg, color-mix(in srgb, var(--interactive) 36%, transparent), color-mix(in srgb, var(--brand-purple) 18%, transparent)); } }
.ws-case { transition: transform 600ms var(--ease-out), border-radius 900ms var(--ease-out), background 500ms; }
/* cases bent like the work button, borderless, globe-shaded */
.ws-hero__cases { perspective: 700px; }
.ws-case { --rx: 8deg; --ry: -18deg; border: 0 !important; border-radius: 50% 46% 52% 48% / 40% 44% 38% 42%;
    transform: rotateX(var(--rx)) rotateY(var(--ry)); padding: 22px 26px 28px;
    background: radial-gradient(120% 100% at 30% 22%, color-mix(in srgb, #fff 14%, transparent), transparent 45%),
                radial-gradient(140% 120% at 70% 85%, color-mix(in srgb, var(--interactive) 28%, transparent), transparent 70%),
                color-mix(in srgb, var(--ink) 4%, transparent);
    box-shadow: inset -10px -14px 30px color-mix(in srgb, #000 35%, transparent), inset 8px 10px 24px color-mix(in srgb, #fff 6%, transparent), 0 24px 40px -22px rgb(0 0 0 / 0.6); }
@media (hover: hover) { .ws-case:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); border-radius: 46% 54% 44% 56% / 48% 38% 50% 40%; } }
/* cases: clear glass, smaller and slender like strands */
.ws-hero__cases { gap: 20px; }
.ws-case { width: 168px; padding: 14px 18px 16px; gap: 4px; border-radius: 60px 44px 56px 40px / 36px 30px 34px 28px;
    background: linear-gradient(160deg, color-mix(in srgb, #fff 9%, transparent), color-mix(in srgb, #fff 2%, transparent) 60%) !important;
    backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent), inset 0 -8px 18px color-mix(in srgb, #fff 4%, transparent), 0 14px 28px -20px rgb(0 0 0 / 0.5); }
.ws-case__sign { width: 132px; height: 40px; }
.ws-case__t { font-size: 11.5px; }
.ws-case__c { font-size: 9px; }
@media (hover: hover) { .ws-case:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--interactive) 22%, transparent), color-mix(in srgb, #fff 3%, transparent)) !important; } }
/* cases: no visible shape, the glass fades out at its edges */
.ws-case { box-shadow: none !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
    -webkit-mask-size: 130% 150%; mask-size: 130% 150%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ws-case { -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); -webkit-mask-size: 115% 125%; mask-size: 115% 125%; }
/* featured cards in the second story: 3D entrance (--in, driven by the scroll) and a slow 3D sway */
@property --in { syntax: '<number>'; inherits: false; initial-value: 1; }
.ws-hero__second .ws-hero__cases { margin-top: 40px; perspective: 900px; }
.ws-hero__second .ws-case { --in: 0; opacity: var(--in);
    transform: translateZ(calc((1 - var(--in)) * -420px)) rotateX(calc(var(--rx) + (1 - var(--in)) * 40deg)) rotateY(calc(var(--ry) + (1 - var(--in)) * 75deg));
    animation: ws-case-sway 9s ease-in-out infinite; }
.ws-hero__second .ws-case--1 { animation-delay: -3s; }
.ws-hero__second .ws-case--2 { animation-delay: -6s; }
@keyframes ws-case-sway { 0%,100% { rotate: 0 1 0 0deg; translate: 0 0 0; } 50% { rotate: 0.3 1 0 10deg; translate: 0 -8px 30px; } }
/* second story: three offers and a floating insight banner, both entering in 3D */
.ws-hero__second { perspective: 1000px; }
.ws-hero__second [data-in] { --in: 0; opacity: var(--in); transform: translateZ(calc((1 - var(--in)) * -380px)) rotateX(calc((1 - var(--in)) * 35deg)) rotateY(calc((1 - var(--in)) * -25deg)); }
.ws-offers { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 28px; }
.ws-offers li { display: grid; gap: 14px; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.ws-offers li span { color: var(--interactive); font-size: 1.3rem; }
.ws-insight { position: relative; display: grid; gap: 14px; margin-top: 40px; width: min(760px, 100%); padding: 32px 36px; border-radius: 4px; overflow: hidden; color: #fff; isolation: isolate;
    background: linear-gradient(100deg, #1a120c 0%, #6b4a2a 25%, #b9b09c 52%, #9fb4c4 75%, #3550a0 100%);
    box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.7); animation: ws-insight-float 8s ease-in-out infinite; }
.ws-insight::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ws-insight::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / 0.55), transparent 55%); }
@keyframes ws-insight-float { 0%,100% { translate: 0 0 0; rotate: 0 1 0 0deg; } 50% { translate: 0 -8px 20px; rotate: 0.2 1 0 4deg; } }
.ws-insight__k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ws-insight__t { max-width: 24ch; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height: 1.25; }
.ws-insight__cta { font-weight: var(--fw-strong); display: inline-flex; gap: 14px; }
@media (hover: hover) { .ws-insight:hover .ws-insight__cta span { transform: translateX(4px); } .ws-insight__cta span { transition: transform 300ms; } }
@media (max-width: 899px) { .ws-offers { grid-template-columns: 1fr; } }
/* the insight banner floats to the right of the offers */
.ws-hero__second { position: relative; }
.ws-insight { position: absolute; right: -2vw; bottom: -40px; width: min(460px, 36vw); margin: 0; padding: 26px 28px; gap: 10px; }
.ws-insight__t { font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); }
@media (max-width: 899px) { .ws-insight { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 28px; } }
/* the workspace embedded in the second story, fitted to the viewport */
.ws-hero__wsslot { margin-top: 24px; }
.ws-board:not(.is-embedded).is-embedded { position: relative; height: auto; min-height: 0; margin: 0 !important; padding: 0; background: none; }
.ws-board:not(.is-embedded).is-embedded .ws-frame, .ws-board:not(.is-embedded).is-embedded .ws-ink { display: none; }
.ws-board:not(.is-embedded).is-embedded .bn { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    display: grid !important; grid-template-columns: 1fr; gap: 14px; justify-items: start; visibility: visible !important; opacity: 1 !important; padding: 0 !important; width: 100%; }
.ws-board:not(.is-embedded).is-embedded .bn-nav { justify-content: flex-start; }
.ws-board:not(.is-embedded).is-embedded .bn__boards { zoom: 0.62; width: min(100%, 1300px); justify-self: start; }
.ws-hero__second .ws-hero__next { font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem) !important; }
/* the backup workspace, embedded in the second story and fitted to the viewport */
.ws-hero__wsslot { margin-top: 22px; }
.ws-board:not(.is-embedded).is-embedded { position: relative; min-height: 0; margin: 0 !important; padding: 0 !important; }
.ws-board:not(.is-embedded).is-embedded .bn { zoom: 0.6; width: 166%; max-width: none; padding: 0; }
.ws-hero__second .ws-hero__next { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem) !important; }
/* the backup workspace, embedded in the second story and fitted to the viewport */
.ws-hero__wsslot { margin-top: 22px; }
.ws-board.is-embedded { position: relative; min-height: 0; margin: 0 !important; padding: 0 !important; }
.ws-board.is-embedded .bn { zoom: 0.6; width: 166%; max-width: none; padding: 0; }
.ws-hero__second .ws-hero__next { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem) !important; }
/* (inside the hero slide, undo the slide rules meant for the hero's own layers) */
.ws-hero.is-slide .ws-board.is-embedded .bn { display: block !important; position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
.ws-hero.is-slide .ws-board.is-embedded :is(.bn-nav, .bn__boards) { opacity: 1 !important; visibility: visible !important; position: relative !important; inset: auto !important; }
.ws-hero.is-slide .ws-board.is-embedded .bn-head { display: none !important; }
.ws-hero.is-slide .ws-board.is-embedded .bn-nav { margin: 0 0 16px !important; }
.ws-hero__wsslot { width: calc(100vw - 2 * var(--gutter) - 60px); overflow: visible; }
.ws-board.is-embedded .bn { zoom: 0.62; width: calc(100% / 0.62); }
.ws-hero.is-slide .ws-board.is-embedded .bn__boards { overflow: visible !important; }
.ws-board.is-embedded .bn { zoom: 1; width: 1440px; transform-origin: 0 0; transform: scale(var(--ws-fit, 0.6)); }
.ws-board.is-embedded { height: calc(var(--ws-h, 600px) * var(--ws-fit, 0.6)); }
/* embedded workspace: clickable, more room under the heading, phones use the stacked board */
.ws-hero__wsslot { margin-top: clamp(40px, 6vh, 72px); }
/* clickable only while the second story is actually on screen */
.ws-hero__second[style*="visibility: inherit"] .ws-board.is-embedded, .ws-hero__second[style*="visibility: inherit"] .ws-board.is-embedded .bn, .ws-hero__second[style*="visibility: inherit"] .ws-board.is-embedded .bn * { pointer-events: auto; }
/* small screens: nothing in the hero may grow wider than the screen */
.ws-hero__titles { grid-template-columns: minmax(0, 1fr); }
.ws-hero__titles > * { min-width: 0; }
@media (max-width: 899px) { .ws-hero__globe { width: auto; } }
/* without the pinned hero (small screens) the second story simply follows the first */
html:not(.has-intro-slide) .ws-hero__second { grid-area: auto !important; visibility: visible !important; opacity: 1 !important; transform: none !important; margin-top: 64px; }
.ws-board.is-embedded .bn { margin: 0 !important; margin-inline: 0 !important; padding-inline: 0 !important; }
/* light mode: red in place of the purple; blue stays the default accent */
:root:not([data-theme="dark"]) { --brand-purple: #d62839; }
/* box edges made of particles: a dotted, glinting border (dots slowly travel round) */
.ws-board.is-embedded :is(.bn-step, .bn-sticky, .bn-nn, .bn-box, .bn-pane, .bn-arch__block, .bn-mini, .bn-run, .bn-n8n) { border-color: transparent !important; position: relative; }
.ws-board.is-embedded :is(.bn-step, .bn-sticky, .bn-nn, .bn-box, .bn-pane, .bn-arch__block, .bn-mini, .bn-run, .bn-n8n)::after {
    content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; padding: 1.5px;
    background: repeating-linear-gradient(90deg, var(--interactive) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(0deg, var(--interactive) 0 1.5px, transparent 1.5px 5px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0.85; animation: ws-dots 6s linear infinite; }
@keyframes ws-dots { to { background-position: 50px 0, 0 50px; } }
@media (prefers-reduced-motion: reduce) { .ws-board.is-embedded :is(.bn-step, .bn-sticky, .bn-nn, .bn-box, .bn-pane, .bn-arch__block, .bn-mini, .bn-run, .bn-n8n)::after { animation: none; } }
.ws-board.is-embedded :is(.bn-step, .bn-sticky, .bn-nn, .bn-box, .bn-pane, .bn-arch__block, .bn-mini, .bn-run, .bn-n8n)::after { animation: none !important; }
/* particle edges: true dots on every side (a dot grid seen through the edge ring), no solid lines */
.ws-board.is-embedded :is(.bn-step, .bn-sticky, .bn-nn, .bn-box, .bn-pane, .bn-arch__block, .bn-mini, .bn-run, .bn-n8n) { box-shadow: none !important; }
.ws-board.is-embedded :is(.bn-step, .bn-sticky, .bn-nn, .bn-box, .bn-pane, .bn-arch__block, .bn-mini, .bn-run, .bn-n8n)::after {
    padding: 2px; background: radial-gradient(circle, var(--interactive) 0 0.9px, transparent 1.2px) 0 0 / 5px 5px !important; }
.ws-hero.is-slide .ws-board.is-embedded svg, .ws-hero.is-slide .ws-board.is-embedded svg * { pointer-events: none !important; }
.ws-board.is-embedded :is(.bn-step, .bn-sticky, .bn-nn, .bn-box, .bn-pane, .bn-arch__block, .bn-mini, .bn-run, .bn-n8n)::after { content: none !important; }
/* a light border on the inner boxes only (containers stay borderless) */
.ws-board.is-embedded :is(.bn-step, .bn-nn, .bn-box, .bn-arch__block, .bn-mini, .bn-sticky) { border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important; }
/* "My workspace" above the tabs; the board fits the content width (wrap max-width), not the screen */
.ws-hero__wslabel { margin: clamp(40px, 6vh, 72px) 0 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--interactive); }
.ws-hero__wsslot { margin-top: 14px !important; width: 100% !important; max-width: 100%; }
.ws-hero__second { width: 100%; }
/* showreel behind the hero, seen through drifting energy streams */
.ws-reel { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 700ms var(--ease-out); mix-blend-mode: screen; }
.ws-reel.is-on { opacity: 0.6; }
.ws-reel video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.3) contrast(1.1) hue-rotate(-10deg); }
.ws-reel { -webkit-mask-image: radial-gradient(40% 30% at 30% 40%, #000, transparent), radial-gradient(35% 45% at 70% 60%, #000, transparent), linear-gradient(115deg, transparent 20%, #000 45%, transparent 55%, #000 70%, transparent 85%);
    mask-image: radial-gradient(40% 30% at 30% 40%, #000, transparent), radial-gradient(35% 45% at 70% 60%, #000, transparent), linear-gradient(115deg, transparent 20%, #000 45%, transparent 55%, #000 70%, transparent 85%);
    -webkit-mask-size: 160% 160%, 180% 180%, 300% 100%; mask-size: 160% 160%, 180% 180%, 300% 100%; animation: ws-reel-flow 6s linear infinite paused; }
.ws-reel.is-on { animation-play-state: running; }
@keyframes ws-reel-flow { to { -webkit-mask-position: 100% 60%, 0% 30%, 100% 0; mask-position: 100% 60%, 0% 30%, 100% 0; } }
:root:not([data-theme="dark"]) .ws-reel { mix-blend-mode: multiply; }
.ws-hero.is-slide > .ws-space { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ws-reel { display: none; } }
/* showreel as fast images through a gate: noir + chromatic split, each rushing out of the depth */
.ws-reel { -webkit-mask-image: none; mask-image: none; animation: none; mix-blend-mode: normal; opacity: 0; }
.ws-reel.is-on { opacity: 1; }
.ws-reel__gate { position: absolute; left: 50%; top: 50%; width: min(70vw, 900px); aspect-ratio: 16 / 10; transform: translate(-50%, -50%); filter: url(#reel-noir);
    -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 45%, transparent 72%); mask-image: radial-gradient(50% 50% at 50% 50%, #000 45%, transparent 72%); }
.ws-reel__gate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(0.35); }
.ws-reel__gate img.is-on { animation: ws-gate 520ms cubic-bezier(.3,0,.2,1) forwards; }
@keyframes ws-gate { 0% { opacity: 0; transform: scale(0.35) rotate(-4deg); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.6) rotate(3deg); } }
.ws-reel { z-index: 2; mix-blend-mode: screen; } :root:not([data-theme="dark"]) .ws-reel { mix-blend-mode: multiply; }
.ws-reel { z-index: 0; } .ws-reel__gate { -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); }

/* ===== Product design: one screen designed mode by mode ===== */
.bn-pd { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); padding-top: 18px; align-items: start; }
.bn-pd__modes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bn-pd__mode { all: unset; cursor: pointer; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; padding: 12px 14px; border: 1px solid transparent; transition: border-color 300ms, background 300ms; }
.bn-pd__mode em { grid-row: span 2; font: 600 10px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: var(--interactive); font-style: normal; }
.bn-pd__mode b { font-size: 14px; font-weight: var(--fw-strong); color: var(--ink); }
.bn-pd__mode span { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.bn-pd__mode[aria-pressed="true"] { border-color: color-mix(in srgb, var(--interactive) 55%, transparent); background: color-mix(in srgb, var(--interactive) 9%, transparent); }
.bn-pd__stage { display: grid; gap: 10px; justify-items: center; }
/* the screen */
.bn-pd__screen { --a: var(--bn-accent, var(--interactive)); --line: color-mix(in srgb, var(--ink) 22%, transparent);
    position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 10; border: 1px solid var(--line); overflow: hidden;
    display: grid; grid-template-columns: 22% 1fr; grid-template-rows: 11% 18% 1fr; gap: 3%; padding: 3%;
    transition: max-width 700ms cubic-bezier(.6,0,.2,1), aspect-ratio 700ms cubic-bezier(.6,0,.2,1), background 500ms; }
.bn-pd__screen > span { position: relative; display: grid; gap: 6%; transition: all 600ms cubic-bezier(.4,0,.2,1); }
.bn-pd__screen i, .bn-pd__head b, .bn-pd__head u { display: block; border: 1px dashed var(--line); border-radius: 2px; transition: all 600ms cubic-bezier(.4,0,.2,1); }
.bn-pd__nav { grid-column: 1 / -1; grid-template-columns: 10% 1fr 1fr 1fr; align-items: center; }
.bn-pd__nav i { height: 40%; }
.bn-pd__side { grid-row: 2 / 4; align-content: start; }
.bn-pd__side i { height: 14px; }
.bn-pd__head { grid-template-columns: 1fr 30%; align-items: center; }
.bn-pd__head b { height: 46%; } .bn-pd__head u { height: 60%; }
.bn-pd__kpis { display: none; }
.bn-pd__chart { grid-template-columns: repeat(7, 1fr); align-items: end; }
.bn-pd__chart i { height: 30%; }
.bn-pd__chart i:nth-child(2) { height: 55%; } .bn-pd__chart i:nth-child(3) { height: 42%; } .bn-pd__chart i:nth-child(4) { height: 78%; } .bn-pd__chart i:nth-child(5) { height: 64%; } .bn-pd__chart i:nth-child(6) { height: 90%; } .bn-pd__chart i:nth-child(7) { height: 70%; }
.bn-pd__table { display: none; }
.bn-pd__grid { position: absolute; inset: 3%; border: 0 !important; opacity: 0; pointer-events: none; transition: opacity 500ms;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, #ff3b5c 14%, transparent) 0 calc(100% / 12 - 6px), transparent calc(100% / 12 - 6px) calc(100% / 12)); }
.bn-pd__state { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%) scale(0.9); padding: 8px 14px; font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em;
    background: var(--bg); border: 1px solid var(--line); opacity: 0; transition: all 400ms; white-space: nowrap; }
/* 1 structure: the grid shows, blocks align to it, hierarchy in solid lines */
.bn-pd[data-mode="1"] .bn-pd__grid { opacity: 1; }
.bn-pd[data-mode="1"] .bn-pd__screen i, .bn-pd[data-mode="1"] .bn-pd__head :is(b, u) { border-style: solid; }
.bn-pd[data-mode="1"] .bn-pd__head b { height: 70%; }
/* 2 system: real components, filled, the accent token on the actions */
.bn-pd:is([data-mode="3"], [data-mode="4"], [data-mode="5"]) .bn-pd__screen { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.bn-pd:is([data-mode="3"], [data-mode="4"], [data-mode="5"]) .bn-pd__screen i,
.bn-pd:is([data-mode="3"], [data-mode="4"], [data-mode="5"]) .bn-pd__head :is(b, u) { border-color: transparent; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.bn-pd:is([data-mode="3"], [data-mode="4"], [data-mode="5"]) .bn-pd__head u { background: var(--a); border-radius: 4px; }
.bn-pd:is([data-mode="3"], [data-mode="4"], [data-mode="5"]) .bn-pd__chart i { background: color-mix(in srgb, var(--a) 70%, transparent); }
.bn-pd:is([data-mode="3"], [data-mode="4"], [data-mode="5"]) .bn-pd__nav i:first-child { background: var(--a); }
.bn-pd:is([data-mode="3"], [data-mode="4"], [data-mode="5"]) .bn-pd__side i:nth-child(2) { background: color-mix(in srgb, var(--a) 35%, transparent); }
/* 3 states: the content steps back, the state message takes the stage */
.bn-pd[data-mode="4"] .bn-pd__chart { opacity: 0.15; filter: blur(2px); }
.bn-pd[data-mode="4"] .bn-pd__state { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bn-pd[data-mode="4"][data-state="0"] .bn-pd__state { color: var(--ink-3); }
.bn-pd[data-mode="4"][data-state="1"] .bn-pd__state { color: #ff3b5c; border-color: #ff3b5c; }
.bn-pd[data-mode="4"][data-state="3"] .bn-pd__state { color: var(--a); border-color: var(--a); }
/* 4 adapt: the same screen reflows to mobile */
.bn-pd[data-mode="5"] .bn-pd__screen { max-width: 230px; aspect-ratio: 9 / 17; grid-template-columns: 1fr; grid-template-rows: 7% 9% 1fr; }
.bn-pd[data-mode="5"] .bn-pd__side { display: none; }
.bn-pd[data-mode="5"] .bn-pd__nav { grid-template-columns: 20% 1fr; } .bn-pd[data-mode="5"] .bn-pd__nav i:nth-child(n+3) { display: none; }
.bn-pd[data-mode="5"] .bn-pd__chart { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 899px) { .bn-pd { grid-template-columns: 1fr; } }

/* product design: the UI design mode as a second row under research / navigation / shipped */
.bn-pd--sub { margin-top: 26px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.bn-pd--sub .bn-pd__screen { max-width: 520px; }
.bn-pd--sub .bn-pd__mode { padding: 8px 12px; }
/* UI design as the fourth pane of the product row */
[data-bn-board="product"] .bn-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bn-pd--pane { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding-top: 0 !important; border-top: 0 !important; margin-top: 0 !important; }
.bn-pd--pane .bn-pd__modes { display: flex; flex-wrap: wrap; gap: 4px; }
.bn-pd--pane .bn-pd__mode { grid-template-columns: auto auto; padding: 4px 8px; gap: 6px; align-items: baseline; }
.bn-pd--pane .bn-pd__mode em { grid-row: auto; }
.bn-pd--pane .bn-pd__mode b { font-size: 11px; }
.bn-pd--pane .bn-pd__screen { max-width: none; }

@media (max-width: 1100px) { [data-bn-board="product"] .bn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* prototype: the main action is a hotspot, a link runs to the next screen */
.bn-pd__hot { position: absolute; right: 6%; top: 21%; width: 13%; height: 9%; border: 1.5px solid var(--interactive); border-radius: 4px; opacity: 0; transition: opacity 400ms; }
.bn-pd__link { position: absolute; right: 2%; top: 30%; width: 14%; height: 40%; border: 1.5px dashed var(--interactive); border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; opacity: 0; transition: opacity 400ms; }
.bn-pd[data-mode="2"] .bn-pd__hot { opacity: 1; animation: pd-hot 1.4s ease-out infinite; }
.bn-pd[data-mode="2"] .bn-pd__link { opacity: 0.8; }
.bn-pd[data-mode="2"] .bn-pd__screen i, .bn-pd[data-mode="2"] .bn-pd__head :is(b, u) { border-style: solid; }
@keyframes pd-hot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--interactive) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
/* states: the success state sits bare, no border */
.bn-pd[data-mode="4"][data-state="3"] .bn-pd__state { border-color: transparent !important; }
/* adapt: same frame as the others, the screen shown on desktop, tablet and phone side by side */
.bn-pd[data-mode="5"] .bn-pd__screen { max-width: none !important; aspect-ratio: 16 / 10 !important; grid-template-columns: 22% 1fr !important; grid-template-rows: 11% 18% 1fr !important; }
.bn-pd[data-mode="5"] .bn-pd__screen > span:not(.bn-pd__devices), .bn-pd[data-mode="5"] .bn-pd__grid { opacity: 0; }
.bn-pd[data-mode="5"] .bn-pd__side { display: grid !important; }
.bn-pd__devices { position: absolute !important; inset: 8% 5%; display: flex !important; align-items: flex-end; justify-content: center; gap: 5%; opacity: 0; transition: opacity 500ms; }
.bn-pd[data-mode="5"] .bn-pd__devices { opacity: 1; }
.bn-pd__dev { display: grid; gap: 7%; align-content: start; padding: 4%; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.bn-pd__dev i { display: block; height: 10px; border: 0 !important; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.bn-pd__dev i:first-child { background: var(--interactive); width: 40%; }
.bn-pd__dev.is-desk { width: 46%; aspect-ratio: 16 / 10; }
.bn-pd__dev.is-tab { width: 24%; aspect-ratio: 3 / 4; border-radius: 6px; }
.bn-pd__dev.is-phone { width: 13%; aspect-ratio: 9 / 18; border-radius: 8px; }
.bn-pd__screen > .bn-pd__hot, .bn-pd__screen > .bn-pd__link { position: absolute !important; display: block !important; }
.bn-pd__screen > .bn-pd__state { position: absolute !important; display: block !important; }
/* prototype: several hotspots blinking, linked by flowing connectors */
.bn-pd__screen > .bn-pd__proto { position: absolute !important; inset: 3%; width: 94%; height: 94%; opacity: 0; transition: opacity 400ms; pointer-events: none; overflow: visible; }
.bn-pd[data-mode="2"] .bn-pd__proto { opacity: 1; }
.bn-pd__proto path { fill: none; stroke: var(--interactive); stroke-width: 0.6; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; animation: pd-flow 1.2s linear infinite; }
.bn-pd__proto circle { fill: var(--interactive); transform-box: fill-box; transform-origin: center; animation: pd-blink 1.6s ease-in-out infinite; }
.bn-pd__proto circle:nth-of-type(2) { animation-delay: 0.4s; } .bn-pd__proto circle:nth-of-type(3) { animation-delay: 0.8s; } .bn-pd__proto circle:nth-of-type(4) { animation-delay: 1.2s; }
@keyframes pd-flow { to { stroke-dashoffset: -8; } }
@keyframes pd-blink { 0%,100% { opacity: 0.25; transform: scale(0.7); } 40% { opacity: 1; transform: scale(1.4); } }
.bn-pd__hot, .bn-pd__link { display: none !important; }
/* adapt: the same screen as tablet and phone */
.bn-pd__dev { gap: 6%; }
.bn-pd__dev b { display: block; height: 22%; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.bn-pd__dev.is-tab { width: 40%; aspect-ratio: 3 / 4; display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.bn-pd__dev.is-tab i:first-child { grid-column: 1 / -1; }
.bn-pd__dev.is-tab i:nth-last-child(-n+3) { grid-column: 1 / -1; }
.bn-pd__dev.is-phone { width: 20%; aspect-ratio: 9 / 18; }
.bn-pd__devices { align-items: center; gap: 8%; }
/* prototype: the hotspots only blink; one dashed connector leaves the screen */
.bn-pd__proto circle { animation: pd-blink2 1.4s steps(1) infinite; transform: none; }
@keyframes pd-blink2 { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }
.bn-pd__proto path { animation: none; stroke-dasharray: 2 2; }
.bn-pd--pane, .bn-pd__stage, .bn-pd__screen { overflow: visible !important; }
/* adapt: the reference screen itself reflowed to mobile, at the same height as the other passes */
.bn-pd[data-mode="5"] .bn-pd__devices { display: none !important; }
.bn-pd[data-mode="5"] .bn-pd__screen { max-width: 35.2% !important; aspect-ratio: 9 / 16 !important; grid-template-columns: 1fr !important; grid-template-rows: 8% 10% 1fr !important;
    background: color-mix(in srgb, var(--ink) 3%, transparent); border-radius: 10px; }
.bn-pd[data-mode="5"] .bn-pd__screen > span:not(.bn-pd__devices) { opacity: 1 !important; }
.bn-pd[data-mode="5"] .bn-pd__side { display: none !important; }
.bn-pd[data-mode="5"] .bn-pd__nav { grid-template-columns: 22% 1fr; } .bn-pd[data-mode="5"] .bn-pd__nav i:nth-child(n+3) { display: none; }
.bn-pd[data-mode="5"] .bn-pd__head { grid-template-columns: 1fr 34%; }
.bn-pd[data-mode="5"] .bn-pd__chart { grid-template-columns: repeat(7, 1fr); }
.bn-pd__proto path { stroke-width: 1.5; stroke-dasharray: 5 4; }
.bn-pd[data-mode="5"] .bn-pd__screen > :is(.bn-pd__state, .bn-pd__proto) { opacity: 0 !important; }
.bn-pd[data-mode="5"] .bn-pd__screen > span.bn-pd__state { opacity: 0 !important; }
/* adapt switches in one step: no cascading transitions, and the pane keeps its size */
.bn-pd[data-mode="5"] .bn-pd__screen, .bn-pd[data-mode="5"] .bn-pd__screen * { transition: none !important; }
.bn-pd--pane .bn-pd__stage { aspect-ratio: 16 / 11; align-content: start; }
/* the screen never resizes in motion: every pass holds the same height; only colours fade */
.bn-pd__screen { transition: background 400ms !important; height: auto; }
.bn-pd__screen > span, .bn-pd__screen i, .bn-pd__head b, .bn-pd__head u { transition: background 400ms, border-color 400ms, opacity 400ms !important; }
.bn-pd--pane .bn-pd__stage { aspect-ratio: auto; height: auto; }
.bn-pd--pane .bn-pd__screen { aspect-ratio: 16 / 10; }
.bn-pd--pane[data-mode="5"] .bn-pd__screen { aspect-ratio: 9 / 16 !important; width: auto; height: auto; max-width: none !important; justify-self: center; }
/* adapt keeps the very same box: the phone is drawn inside it, the content narrows to its column */
.bn-pd--pane[data-mode="5"] .bn-pd__screen { aspect-ratio: 16 / 10 !important; width: 100% !important; max-width: none !important; border-color: transparent !important; background: none !important;
    padding: 3% 33% !important; border-radius: 0; }
.bn-pd--pane[data-mode="5"] .bn-pd__screen::before { content: ""; position: absolute; top: 0; bottom: 0; left: 31%; right: 31%; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.bn-pd--pane .bn-pd__screen { padding: 3%; }
.ws-reel__gate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the reel as a full-viewport CRT globe: bulging rounded screen, vignette, scanlines and live noise */
.ws-reel { position: fixed; inset: 0; z-index: 0; }
.ws-reel__gate { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh; aspect-ratio: auto !important; transform: none !important;
    -webkit-mask-image: none !important; mask-image: none !important; border-radius: 9% / 13%; overflow: hidden; }
.ws-reel__gate video { transform: scale(1.06); }
.ws-reel::before, .ws-reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 9% / 13%; z-index: 1; }
/* globe: the glass bulges, darker towards the rounded edges */
.ws-reel::before { background: radial-gradient(120% 120% at 50% 50%, transparent 52%, rgb(0 0 0 / 0.55) 78%, #000 100%),
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 3px); }
.ws-reel::after { opacity: 0.18; mix-blend-mode: overlay; animation: ws-noise 0.4s steps(4) infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes ws-noise { 0% { background-position: 0 0; } 25% { background-position: -60px 40px; } 50% { background-position: 50px -30px; } 75% { background-position: -20px -70px; } 100% { background-position: 0 0; } }
/* the reel takes the screen: square edges; the heading and the field step out while it plays */
.ws-reel__gate, .ws-reel::before, .ws-reel::after { border-radius: 0 !important; }
.ws-reel::before { background: radial-gradient(130% 130% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.5) 100%), repeating-linear-gradient(0deg, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 3px); }
.ws-hero__roles, .ws-hero__title, .ws-hero__lede, [data-space-gl] { transition: opacity 500ms var(--ease-out); }
html.is-reel :is(.ws-hero__first .ws-hero__roles, .ws-hero__first .ws-hero__title, .ws-hero__first .ws-hero__lede, [data-space-gl]) { opacity: 0 !important; }
/* the reel floats beside the button: a bent, borderless screen, edges dissolving */
.ws-reel { position: fixed; inset: auto; left: var(--rx, 50vw); top: var(--ry, 50vh); width: min(46vw, 640px); aspect-ratio: 16 / 9; transform: translateY(-50%); perspective: 900px; }
.ws-reel::before { display: none; }
.ws-reel::after { inset: 0; border-radius: 0; }
.ws-reel__gate { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    transform: rotateY(-22deg) rotateX(6deg) !important; transform-style: preserve-3d; animation: ws-reel-float 7s ease-in-out infinite;
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%) !important; mask-image: radial-gradient(closest-side, #000 55%, transparent 100%) !important;
    -webkit-mask-size: 120% 130%; mask-size: 120% 130%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@keyframes ws-reel-float { 0%,100% { translate: 0 0 0; } 50% { translate: 0 -12px 30px; } }
.ws-reel__gate video { transform: scale(1.04); }
/* the whole reel (video and its noise) dissolves at the edges: no visible box */
.ws-reel { -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* the reel: a plain rectangle like the button, no dissolving edges; the heading stays */
.ws-reel, .ws-reel__gate { -webkit-mask-image: none !important; mask-image: none !important; }
html.is-reel :is(.ws-hero__first .ws-hero__roles, .ws-hero__first .ws-hero__title, .ws-hero__first .ws-hero__lede, [data-space-gl]) { opacity: 1 !important; }
/* the noise rides on the bent screen itself, not on a flat box behind it */
.ws-reel::after { display: none !important; }
.ws-reel__gate::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: overlay; animation: ws-noise 0.4s steps(4) infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ws-reel__gate { transform: rotateY(22deg) rotateX(6deg) !important; }
.ws-reel { width: min(40vw, 540px); }

/* Spotlight on: the cases run left in a straight line; off-centre they are distorted, at the centre they come into focus */
.spot__viewport { overflow: clip; perspective: 1200px; padding: clamp(16px, 3vh, 40px) 0; }
.spot__track { display: flex; gap: clamp(24px, 3vw, 48px); width: max-content; padding: 0 calc(50vw - min(15vw, 220px)); transform-style: preserve-3d; will-change: transform; }
.spot__card { flex: none; width: min(36vw, 520px, 70vh); will-change: transform, filter; }
.spot .ws-hero__work { margin-top: 24px; }
@media (max-width: 767px) { .spot__card { width: 78vw; } .spot__track { padding: 0 11vw; } }
.spot { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: calc(var(--nav-h) + 24px) clamp(32px, 5vh, 72px); overflow: clip; }
/* during free boom the fluid orb must escape the pin clip */
.spot.is-booming { overflow: visible !important; }
/* pin done: drop the empty 100vh shell so the footer is next */
.spot.is-spent { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; visibility: hidden; pointer-events: none; }
/* orb must stay visible while the boom finishes after the pin collapses */
.spot.is-spent.is-booming { visibility: visible; }
.spot.is-spent.is-booming > *:not(.fit) { visibility: hidden; }
.spot.is-spent.is-booming .fit,
.spot.is-spent.is-booming .fit__inner,
.spot.is-spent.is-booming .fit__cols { visibility: visible !important; height: 0 !important; overflow: visible !important; }
.spot.is-spent.is-booming .fit__title,
.spot.is-spent.is-booming .fit__lede,
.spot.is-spent.is-booming .fit__steps,
.spot.is-spent.is-booming .fit__progress { visibility: hidden !important; }
.spot .work__head { margin-bottom: clamp(20px, 3vh, 40px); }
.spot .ws-hero__work { margin-top: 0; justify-self: start; }
/* Spotlight: low images like the original site; button and cards bent like the hero button */
.spot .spot__bend { justify-self: start; margin-top: 8px; }
.spot__card { width: min(30vw, 440px); --rx: 8deg; --ry: -18deg; }
.spot__card .case-card__media { aspect-ratio: auto; height: 203px; }
.spot__card .case-card__media img { object-position: top; }
@media (max-width: 767px) { .spot__card { width: 78vw; } }
/* Spotlight carousel: cases stacked at the viewport's left, placed by spotlight.js */
/* Spotlight on: the cases sit lower, the title and its button close above them */
.spot.is-carousel[data-spot] { align-content: end; padding-bottom: clamp(8px, 2vh, 24px); }
.spot.is-carousel[data-spot] .work__head { margin-bottom: 4px; }
.spot.is-carousel[data-spot] .work__head + .spot__viewport { margin-top: -56px; }
.spot.is-carousel[data-spot] .work__head .ws-hero__work { margin-top: 8px; }
.spot.is-carousel .spot__viewport { position: relative; height: calc(203px + 150px); perspective: 1400px; perspective-origin: 20% 50%; overflow: visible; }
.spot.is-carousel .spot__track { display: block; width: auto; padding: 0; transform: none !important; position: absolute; inset: 0; transform-style: preserve-3d; }
.spot.is-carousel .spot__card { position: absolute; left: 0; top: 0; width: min(28vw, 420px); transform-origin: 0 50%; will-change: transform, opacity, filter; }
.spot.is-carousel .spot__card .case-card__media { height: 203px; }
@media (max-width: 767px) { .spot.is-carousel .spot__card { width: 78vw; } }
/* Spotlight head: same type as the hero's second story; cards lean the other way */
.spot .spot__title { font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem); margin: 0; }
.spot .ws-hero__lede { margin-top: 1.2rem; }
.spot.is-carousel .spot__card { --ry: 18deg; }
/* corridor: the vanishing point is the centre of the screen (set by spotlight.js); the front case sits flat */
.spot.is-carousel .spot__viewport { perspective: 1200px; }
.spot.is-carousel .spot__card { --rx: 0deg; --ry: 0deg; }
/* Spotlight: light title, more room above the cases, larger cases */
.spot .spot__title { font-weight: 300; }
.spot .spot__bend { margin-bottom: clamp(24px, 4vh, 48px); }
.spot.is-carousel .spot__card { width: min(36vw, 540px); }
.spot.is-carousel .spot__card .case-card__media { height: 320px; }
.spot.is-carousel .spot__viewport { height: calc(320px + 150px); }
.spot .spot__bend { margin-top: clamp(24px, 4vh, 40px); }
/* Spotlight images: noir posters under a live noise; hover plays the case's key screens in colour */
.spot__media img { filter: grayscale(1) contrast(1.18) brightness(0.92); }
.spot__media .spot__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: none; opacity: 0; transition: opacity 120ms linear; }
.spot__media .spot__frame.is-on { opacity: 1; }
.spot__noise { position: absolute; inset: -50%; pointer-events: none; z-index: 2; opacity: 0.22; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: spot-noise 0.5s steps(5) infinite; }
.spot__media.is-playing .spot__noise { opacity: 0.12; }
@keyframes spot-noise { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .spot__noise { animation: none; } }
.spot.is-carousel .spot__track, .spot.is-carousel .spot__viewport { pointer-events: none; }   /* the 3D layer sits over the turned cases: only the cases take the pointer */
/* reel: slower, soft crossfades; a live noise over the whole card */
.spot__media .spot__frame { transition: opacity 400ms ease; }
.spot__media .spot__noise { z-index: 2; }
.spot__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0.14; mix-blend-mode: overlay; overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: spot-grain 0.4s steps(4) infinite; }
@keyframes spot-grain { 0% { background-position: 0 0; } 25% { background-position: -37px 21px; } 50% { background-position: 53px -44px; } 75% { background-position: -12px 61px; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .spot__card::after { animation: none; } }
/* no card-wide noise: grain on the images only; reel cuts are hard */
.spot__card::after { content: none; }
.spot__media .spot__frame { transition: none; }
.spot__noise { opacity: 0.35; }
.spot__media.is-playing .spot__noise { opacity: 0.3; }
.spot__noise { opacity: 0.6; } .spot__media.is-playing .spot__noise { opacity: 0.5; }
.spot__noise { opacity: 0.9; } .spot__media.is-playing .spot__noise { opacity: 0.8; } .spot__card .case-card__media { border-radius: 0; }
/* the hero's field held behind "Spotlight on": full screen, turned to face us, the cases over it */
.ws-space.is-held { position: fixed !important; inset: 0 !important; top: 0 !important; width: 100% !important; height: 100vh !important; z-index: 0 !important; -webkit-mask-image: none; mask-image: none; }
/* Let's talk after boom: no hero particle field — only the expanded fluid orb */
html.has-orb-story-bg [data-space-gl],
html.has-orb-story-bg .ws-space,
[data-space-gl].is-boom-hidden,
.ws-space.is-boom-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.spot { position: relative; z-index: 1; }
.ws-hero.is-holding-space { overflow: visible !important; }
.ws-hero.is-holding-space { z-index: 0 !important; } .spot { z-index: 2; }   /* the held field stays behind the cases */
/* the "View" pill over the cases: bent like the hero button, frosted and semi-transparent (the slab is the label) */
.cursor-pill.is-glass { background: none; padding: 0; perspective: 500px; }
.cursor-pill.is-glass span { display: inline-block; padding: 14px 24px; color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent);
    backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); transform: rotateX(8deg) rotateY(-18deg); }
/* Spotlight progress: a thin line along the curve under the cases, filling as they turn */
.spot__bar { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.spot__bar i { position: absolute; left: 0; top: 0; height: 1px; transform-origin: 0 50%; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.spot__bar b { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
/* Where I fit best: a single still screen over the nucleus */
.fit { position: relative; z-index: 2; height: 100vh; height: 100dvh; display: grid; align-content: center; grid-template-columns: minmax(0, 1fr); }
.fit .fit__title { font-weight: 300; font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem); margin: 0; }
.fit__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(24px, 5vh, 56px); }
.fit__col .ws-hero__wslabel { margin: 0 0 16px; }
.fit__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); line-height: 1.3; }
@media (max-width: 767px) { .fit__cols { grid-template-columns: minmax(0, 1fr); } }
/* Where I fit best: a soft holographic orb at the centre, the three groups on an arc above it,
   read right to left (Domains, What I do, How I work) */
.fit__cols { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; padding-bottom: clamp(160px, 26vh, 280px); }
.fit__col:nth-of-type(1) { order: 3; text-align: right; margin-top: clamp(60px, 10vh, 120px); }   /* Domains, right */
.fit__col:nth-of-type(2) { order: 2; text-align: center; }                                        /* What I do, top of the arc */
.fit__col:nth-of-type(3) { order: 1; margin-top: clamp(60px, 10vh, 120px); }                      /* How I work, left */
.fit__col:nth-of-type(2) ul { justify-items: center; }
.fit__col:nth-of-type(1) ul { justify-items: end; }
.fit__orb { position: absolute; left: 50%; bottom: 0; width: clamp(150px, 16vw, 230px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
    filter: blur(18px) saturate(140%); isolation: isolate; animation: orb-breathe 6s ease-in-out infinite; }
.fit__orb i { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; }
.fit__orb i:nth-child(1) { background: radial-gradient(circle at 35% 35%, #ffb24a 0 30%, transparent 62%); animation: orb-a 9s ease-in-out infinite; }
.fit__orb i:nth-child(2) { background: radial-gradient(circle at 60% 72%, #3fd6cf 0 28%, transparent 60%); animation: orb-b 11s ease-in-out infinite; }
.fit__orb i:nth-child(3) { background: radial-gradient(circle at 55% 45%, #f4e9c8 0 22%, transparent 58%); opacity: 0.8; animation: orb-c 7s ease-in-out infinite; }
@keyframes orb-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, 6%) scale(1.08); } }
@keyframes orb-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-9%, -5%) scale(1.1); } }
@keyframes orb-c { 0%, 100% { transform: rotate(0deg) translate(4%, 0); } 50% { transform: rotate(180deg) translate(4%, 0); } }
@keyframes orb-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { .fit__orb, .fit__orb i { animation: none; } }
@media (max-width: 767px) { .fit__col { order: 0 !important; margin-top: 0 !important; text-align: left !important; } .fit__col ul { justify-items: start !important; } .fit__orb { position: relative; left: auto; translate: none; margin: 24px auto 0; } .fit__cols { padding-bottom: 0; } }
/* the orb sits on the right, vertically centred */
.fit__cols { padding-bottom: 0; }
.fit__orb { left: auto; right: clamp(-40px, -2vw, 0px); bottom: auto; top: 50%; translate: 0 -50%; z-index: -1; }
/* Where I fit best now lives inside the Spotlight scene, as a layer over it */
.spot__exit { display: contents; }
.spot.is-carousel .spot__exit { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.spot .fit { position: absolute; inset: 0; height: auto; z-index: 3; pointer-events: none; }
.spot .fit .fit__inner { pointer-events: auto; }
/* the orb moves like the vos9x start button: colours orbit and swirl inside a shape that keeps morphing */
.fit__orb { animation: orb-morph 8s ease-in-out infinite, orb-spin 14s linear infinite; border-radius: 48% 52% 55% 45% / 50% 46% 54% 50%; overflow: hidden; }
.fit__orb i { border-radius: 0; inset: -20%; }
.fit__orb i:nth-child(1) { animation: orb-orbit-a 6.5s ease-in-out infinite; }
.fit__orb i:nth-child(2) { animation: orb-orbit-b 8s ease-in-out infinite; }
.fit__orb i:nth-child(3) { animation: orb-orbit-c 5s ease-in-out infinite; }
@keyframes orb-spin { to { rotate: 360deg; } }
@keyframes orb-morph {
    0%, 100% { border-radius: 48% 52% 55% 45% / 50% 46% 54% 50%; scale: 1; }
    33% { border-radius: 56% 44% 47% 53% / 44% 56% 46% 54%; scale: 1.05; }
    66% { border-radius: 44% 56% 52% 48% / 55% 45% 52% 48%; scale: 0.97; }
}
@keyframes orb-orbit-a { 0%, 100% { transform: translate(-8%, -6%) scale(1); } 50% { transform: translate(10%, 8%) scale(1.15); } }
@keyframes orb-orbit-b { 0%, 100% { transform: translate(8%, 10%) scale(1.05); } 50% { transform: translate(-10%, -8%) scale(0.9); } }
@keyframes orb-orbit-c { 0%, 100% { transform: translate(0, 0) scale(0.9); } 50% { transform: translate(-6%, 6%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .fit__orb, .fit__orb i { animation: none !important; } }
/* Where I fit best, trimmed: lede, Domains as the main list, How I work as one line */
.fit .fit__lede { white-space: normal; max-width: 40ch; margin-top: 1rem; }
.fit .fit__cols { grid-template-columns: minmax(0, 1fr); margin-top: clamp(28px, 5vh, 56px); }
.fit .fit__col { order: 0; margin-top: 0; text-align: left; }
.fit .fit__col ul { justify-items: start; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height: 1.15; gap: 0.35em; font-weight: 300; }
.fit__how { margin: clamp(28px, 5vh, 56px) 0 0; max-width: 60ch; color: var(--ink-2); }
.fit__how .ws-hero__wslabel { display: block; margin: 0 0 10px; }
/* the orb sits at the centre of the expanded tunnel (the field's origin, eased right and down: 67% / 60%),
   richer colours, and it leans and swirls towards the pointer (--mx, --my from spotlight.js) */
.spot .fit__orb { position: fixed; left: 67%; top: 60%; right: auto; bottom: auto; translate: calc(-50% + var(--mx, 0) * 28px) calc(-50% + var(--my, 0) * 28px); z-index: -1; filter: blur(16px) saturate(170%); }
.fit__orb i:nth-child(1) { background: radial-gradient(circle at calc(35% + var(--mx, 0) * 18%) calc(35% + var(--my, 0) * 18%), #ff8a1f 0 32%, transparent 64%); }
.fit__orb i:nth-child(2) { background: radial-gradient(circle at calc(62% - var(--mx, 0) * 18%) calc(70% - var(--my, 0) * 18%), #12c9c1 0 30%, transparent 62%); }
.fit__orb i:nth-child(3) { background: radial-gradient(circle at 55% 45%, #ffd27a 0 14%, transparent 50%); opacity: 0.45; }
/* the orb as the vos9x start button: a full swirling sphere; the pointer scoops a soft hollow into it
   where it is (--px/--py, as deep as --dent), pushing the light out to the rim, closing back as it leaves */
.spot .fit__orb { --dent: 0; --px: 50%; --py: 50%;
    translate: calc(-50% - var(--pushx, 0) * 1px) calc(-50% - var(--pushy, 0) * 1px);
    -webkit-mask: radial-gradient(circle at var(--px) var(--py), transparent 0, transparent calc(var(--dent) * 30%), #000 calc(var(--dent) * 30% + 24%));
    mask: radial-gradient(circle at var(--px) var(--py), transparent 0, transparent calc(var(--dent) * 30%), #000 calc(var(--dent) * 30% + 24%)); }
.spot .fit__orb { animation: orb-morph 8s ease-in-out infinite; }   /* no whole-sphere spin: the hollow must stay under the pointer; the colours still swirl inside */
/* the orb as coloured glass: the field and the tunnel show through it, with a soft sheen on top */
.spot .fit__orb { opacity: 0.62; }
.spot .fit__orb i { mix-blend-mode: multiply; }
.spot .fit__orb::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.55), transparent 38%), radial-gradient(circle at 70% 78%, rgb(255 255 255 / 0.18), transparent 45%); mix-blend-mode: screen; }
/* as vos9x: luminous colours, no hard rim, the field showing through softly */
.spot .fit__orb { opacity: 0.78; overflow: visible; filter: blur(22px) saturate(160%); }
.spot .fit__orb i { mix-blend-mode: normal; inset: 0; border-radius: 50%; }
.spot .fit__orb i:nth-child(1) { background: radial-gradient(circle at calc(35% + var(--mx, 0) * 18%) calc(35% + var(--my, 0) * 18%), rgb(255 150 50 / 0.95) 0 26%, rgb(255 150 50 / 0) 66%); }
.spot .fit__orb i:nth-child(2) { background: radial-gradient(circle at calc(62% - var(--mx, 0) * 18%) calc(70% - var(--my, 0) * 18%), rgb(40 210 200 / 0.9) 0 24%, rgb(40 210 200 / 0) 64%); }
.spot .fit__orb i:nth-child(3) { background: radial-gradient(circle at 50% 48%, rgb(255 230 170 / 0.55) 0 16%, rgb(255 230 170 / 0) 52%); }
.spot .fit__orb::after { content: none; }
/* soft outer edge too: the pointer's hollow intersected with a centred fade (no hard rim) */
.spot .fit__orb {
    -webkit-mask: radial-gradient(circle at var(--px) var(--py), transparent 0, transparent calc(var(--dent) * 30%), #000 calc(var(--dent) * 30% + 24%)), radial-gradient(circle, #000 0 48%, transparent 71%);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle at var(--px) var(--py), transparent 0, transparent calc(var(--dent) * 30%), #000 calc(var(--dent) * 30% + 24%)), radial-gradient(circle, #000 0 48%, transparent 71%);
    mask-composite: intersect; }
/* shader canvas: soft idle look; liquid motion lives in the GL ticker */
.spot .fit__orb {
    animation: none; -webkit-mask: none; mask: none;
    --shake-x: 0px; --shake-y: 0px; --boom: 0;
    translate: calc(-50% + var(--shake-x)) calc(-50% + var(--shake-y));
    width: clamp(240px, 24vw, 360px);
    z-index: 0; opacity: 1;
    filter: saturate(160%);
    will-change: transform, translate, filter;
    overflow: visible; border-radius: 0;
    scale: calc(1 + var(--boom) * 9);
}
/* explode: fill the viewport (scale owns the motion — morph off mid-blast) */
.spot.is-booming:not(.is-orb-live) .fit__orb,
.spot.is-spent.is-booming:not(.is-orb-live) .fit__orb {
    visibility: visible !important;
    position: fixed !important;
    left: 67%; top: 60%;
    width: clamp(240px, 24vw, 360px);
    height: auto; aspect-ratio: 1;
    z-index: 12;
    filter: saturate(170%);
    animation: none;
    border-radius: 0; overflow: visible;
    scale: calc(1 + var(--boom) * 9);
    pointer-events: none;
}
/* from the first frame of the boom the blob lives on the page, fixed where it was: it grows in place
   and never travels with the section. Once settled (.is-wide) it opens into soft waves. */
.fit__orb.fit__orb--story-bg {
    visibility: visible !important;
    position: fixed !important;
    left: 67%; top: 60%; right: auto; bottom: auto;
    width: clamp(240px, 24vw, 360px);
    height: auto; aspect-ratio: 1;
    translate: calc(-50% + var(--shake-x, 0px)) calc(-50% + var(--shake-y, 0px));
    scale: calc(1 + var(--boom, 0) * 9);
    z-index: 15;
    opacity: 1 !important;
    filter: blur(0px) saturate(165%);
    transition: filter 1.2s var(--ease-out);
    border-radius: 0; overflow: visible;
    animation: none !important;
    pointer-events: none;
}
.fit__orb.fit__orb--story-bg.is-wide { left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; translate: none; scale: 1; filter: blur(0px) saturate(165%); transition: none; }
.fit__orb.fit__orb--story-bg.is-wide canvas { width: 100%; height: 100%; }
/* desktop: from the first frame of the boom the canvas covers the screen; the shader draws the swelling disc */
@media (min-width: 900px) {
    .fit__orb.fit__orb--story-bg { left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; translate: none; scale: 1; }
    .fit__orb.fit__orb--story-bg canvas { width: 100%; height: 100%; }
}
html.is-boom-lock { overflow: hidden; }
html.has-orb-story-bg body,
html.has-orb-story-bg main { background: transparent !important; }
html.has-orb-story-bg { background: var(--bg); }
.spot .fit__orb::after { content: none; }
/* soft outer edge too: the pointer's hollow intersected with a centred fade (no hard rim) */
.spot .fit__orb {
    -webkit-mask: radial-gradient(circle at var(--px) var(--py), transparent 0, transparent calc(var(--dent) * 30%), #000 calc(var(--dent) * 30% + 24%)), radial-gradient(circle, #000 0 48%, transparent 71%);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle at var(--px) var(--py), transparent 0, transparent calc(var(--dent) * 30%), #000 calc(var(--dent) * 30% + 24%)), radial-gradient(circle, #000 0 48%, transparent 71%);
    mask-composite: intersect; }
/* shader canvas: soft idle look; liquid motion lives in the GL ticker */
.spot .fit__orb {
    animation: none; -webkit-mask: none; mask: none;
    --shake-x: 0px; --shake-y: 0px; --boom: 0;
    translate: calc(-50% + var(--shake-x)) calc(-50% + var(--shake-y));
    width: clamp(240px, 24vw, 360px);
    z-index: 0; opacity: 1;
    filter: saturate(160%);
    will-change: transform, translate, filter;
    overflow: visible; border-radius: 0;
    scale: calc(1 + var(--boom) * 9);
}
/* explode: fill the viewport (scale owns the motion — morph off mid-blast) */
.spot.is-booming:not(.is-orb-live) .fit__orb,
.spot.is-spent.is-booming:not(.is-orb-live) .fit__orb {
    visibility: visible !important;
    position: fixed !important;
    left: 67%; top: 60%;
    width: clamp(240px, 24vw, 360px);
    height: auto; aspect-ratio: 1;
    z-index: 12;
    filter: saturate(170%);
    animation: none;
    border-radius: 0; overflow: visible;
    scale: calc(1 + var(--boom) * 9);
    pointer-events: none;
}
/* after boom: full-bleed fluid = Let's talk bg. Same orb-morph as Track Record — no second, faster motion */
.fit__orb--story-bg,
.spot.is-orb-live .fit__orb,
.spot.is-spent.is-orb-live .fit__orb {
    visibility: visible !important;
    position: fixed !important;
    left: 50%; top: 50%;
    width: 120vmax;
    height: 120vmax;
    max-width: none;
    aspect-ratio: 1;
    z-index: 15;
    opacity: 1 !important;
    filter: blur(22px) saturate(160%);
    border-radius: 48% 52% 55% 45% / 50% 46% 54% 50%;
    overflow: visible;
    translate: -50% -50%;
    pointer-events: none;
    /* identical to .spot .fit__orb — same keyframes, same 8s pace */
    animation: orb-morph 8s ease-in-out infinite !important;
}
.fit__orb--story-bg .fit__orbgl,
.spot.is-orb-live .fit__orb .fit__orbgl {
    width: 100%; height: 100%;
}
/* no separate moving wash under the blob — page stays still; only the orb moves */
html.has-orb-story-bg body,
html.has-orb-story-bg main {
    background: transparent !important;
}
html.has-orb-story-bg {
    background: var(--bg);
}
.spot .fit__orb::after { content: none; }
.fit__orbgl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* flat page colour behind the blob — no radial rings */
.orb-burst {
    position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
    --p: 0; --spread: 0; --ox: 67%; --oy: 60%;
    background-color: var(--bg);
    background-image: none;
    -webkit-mask-image: none;
    mask-image: none;
    filter: none;
    mix-blend-mode: normal; transition: none;
}
.orb-burst.is-on { opacity: var(--p, 0); }
.orb-burst.is-over { z-index: 18; }
.orb-burst.is-full {
    filter: blur(8px);
}
/* last story: no flat plate, no painted radial wash — only the living WebGL orb */
.outro.is-orb-bg,
.outro.is-blast,
.outro.is-wash-live,
.outro.is-face {
    min-height: 100vh; min-height: 100dvh;
    background: transparent !important;
    isolation: auto;
}
/* kill the fixed CSS wash — it read as a static bg over the fluid blob */
.outro.is-orb-bg::before,
.outro.is-wash-live::before,
.outro.is-face::before,
.outro.is-blast::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    animation: none !important;
}
.outro.is-wash-live { position: relative; z-index: 2; }
/* face: copy above the living orb (z 15) */
.outro.is-face .outro__inner,
.outro.is-blast .outro__inner { position: relative; z-index: 22; }
@keyframes orb-wash-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(2.2%, -1.6%) scale(1.05); }
    66% { transform: translate(-1.8%, 1.4%) scale(1.03); }
}
.outro.is-orb-bg .outro__inner { position: relative; z-index: 1; filter: none !important; }
.outro .outro__inner, .outro .outro__inner > * { filter: none; }
.outro .split-line { filter: none !important; opacity: 1; transform: none; }
/* while the blast scrubs: footer sits fixed over the pin (same both ways) */
.outro.is-blast {
    position: fixed !important; inset: 0; z-index: 20;
    width: 100%; max-width: none; margin: 0;
    overflow: auto; -webkit-overflow-scrolling: touch;
    background: transparent !important;
}
.outro.is-blast .outro__inner { position: relative; z-index: 22; }
/* Ask AI lives in the footer: full-width band above Let's talk */
.outro .ask-band--compact {
    width: 100%;
    margin: 0 0 clamp(28px, 4vw, 48px);
    padding: 0;
    justify-items: stretch;
    text-align: left;
}
.outro .ask-band--compact .section-title { max-width: none; }
.outro .ask-band--compact .ask-inline { margin-inline: 0; max-width: none; width: 100%; }
/* Where I fit best steps: Domains, Tools, Clients stacked in one place on the left; the orb stays right */
.fit__steps { display: grid; max-width: min(58%, 760px); }
.fit__steps > .fit__step { grid-area: 1 / 1; }
.fit__tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.fit__tools li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.fit__tools svg { width: 28px; height: 28px; flex: none; }
.fit__clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; align-items: center; }
.fit__clients img { height: 36px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.85; mix-blend-mode: multiply; }
[data-theme="dark"] .fit__clients img { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.fit__clients img[src*="vic-logo"] { height: 22px; }
@media (max-width: 899px) { .fit__steps { max-width: none; } .fit__tools, .fit__clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-theme="dark"] .fit__clients img { filter: grayscale(1) invert(1) contrast(2.2) brightness(1.1); mix-blend-mode: screen; }   /* the logos sit on plates: push them to pure black so they vanish */
.fit__clients img { filter: grayscale(1) contrast(1.6); }
/* logos: plate removed by an SVG filter (no blend modes: the fading step isolates its blending) */
.fit__clients img { filter: url(#logo-ink-light); opacity: 0.85; mix-blend-mode: normal; }
[data-theme="dark"] .fit__clients img { filter: url(#logo-ink-dark); mix-blend-mode: normal; }
/* tool icons in the text colour, readable on both themes */
.fit__tools svg, .fit__tools svg * { fill: currentColor !important; }
.fit__tools svg [fill="none"] { fill: none !important; }
.fit__tools li { color: var(--ink-2); }
/* inline logos: no plate, one ink colour */
.fit__clients li { color: var(--ink-2); }
.fit__clients svg { height: 44px; width: auto; max-width: 100%; display: block; }
.fit__clients svg[aria-label^="Victoria"] { height: 30px; }
/* steps: more room under the label; tools in 3 columns; the grids bent as on a globe, widest to the right */
.fit__step .ws-hero__wslabel { margin: 0 0 16px; }
@media (max-width: 767px) { .fit__step .ws-hero__wslabel { margin-bottom: 28px; } }   /* mobile: more air under Domains / Tools / Teams */
.fit__tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fit__steps { perspective: 900px; perspective-origin: 100% 50%; }
.fit__tools, .fit__clients, .fit__step > ul { transform-origin: 100% 50%; transform: rotateY(-16deg); transform-style: preserve-3d; }
.fit__tools li, .fit__clients li { transform: translateZ(calc(var(--gz, 0) * 1px)); }
.fit__steps { perspective: 700px; } .fit__tools, .fit__clients, .fit__step > ul { transform: rotateY(-26deg); }   /* stronger globe bend, widest on the right */
/* clients block aligned to the right of the left column, towards the orb */
.fit__steps { width: min(58%, 760px); }
.fit__step[data-fit-step="0"] { justify-self: end; text-align: right; }
.fit__step[data-fit-step="0"] .fit__clients { justify-items: end; }
.fit__clients svg[aria-label="Leica"] { height: 40px; }
.fit__clients svg[aria-label="Shimano"] { height: 22px; }
.fit__clients svg[aria-label="Leica"] { opacity: 0.8; }
.fit__clients svg[aria-label="Winchester"] { height: 48px; }
/* clients back to the left; the flat 3D tilt replaced by a spherical bulge (spotlight.js) */
.fit__step[data-fit-step="0"] { justify-self: start; text-align: left; }
.fit__step[data-fit-step="0"] .fit__clients { justify-items: start; }
.fit__tools, .fit__clients, .fit__step > ul { transform: none !important; }
.fit__steps { perspective: none; }
.fit__tools li, .fit__clients li, .fit__step > ul > li { transform-origin: 50% 50%; will-change: transform; }
.fit .fit__col ul { font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); }   /* Domains smaller */
.fit__steps { width: min(72%, 1000px); max-width: none; } .fit__tools, .fit__clients { column-gap: clamp(32px, 4vw, 72px); }   /* spread out towards the orb */
/* the grids bend like the hero button, hinged on the left: the far right side turns towards us */
.fit__tools li, .fit__clients li, .fit__step > ul > li { transform: none !important; }
.fit__tools, .fit__clients, .fit__step > ul { transform: perspective(700px) rotateX(8deg) rotateY(-18deg) !important; transform-origin: 0 50% !important; }
.fit__tools { max-width: 620px; column-gap: clamp(24px, 3vw, 48px); } .fit__tools li { font-size: 13px; }   /* tools tighter, smaller labels */
/* Track record progress: same 3D plane as the logos (perspective + yaw), not an arc */
.fit__progress {
    position: relative; height: 1px; margin-top: clamp(28px, 4vh, 44px);
    width: 100%; max-width: 620px; background: var(--line); overflow: hidden;
    transform: perspective(700px) rotateX(8deg) rotateY(-18deg) !important;
    transform-origin: 0 50% !important;
}
.fit__progress span {
    position: absolute; inset: 0; background: var(--ink);
    transform-origin: left center; transform: scaleX(0); will-change: transform;
}
@media (max-width: 899px) { .fit__progress { max-width: none; } }

/* phone: smaller case titles, a slightly taller poster, the orb a little lower, quieter track-record type */
@media (max-width: 899px) {
    .spot.is-carousel { align-content: end; padding-top: calc(var(--nav-h) + 12px); padding-bottom: 134px; height: calc(100dvh + 110px); max-height: none; overflow: visible; }
    .spot.is-carousel .spot__exit { align-content: end; }
    .spot .fit { align-content: stretch; padding: calc(var(--nav-h) + 12px) 0 88px; box-sizing: border-box; }
    .spot .fit .fit__inner { position: relative; z-index: 1; display: flex; flex-direction: column; }
    .spot .fit .fit__title { margin-top: 150px; }
    .spot .fit .fit__cols { display: flex; flex-direction: column; flex: 1 1 auto; }
    .spot .fit .fit__progress { margin-top: auto; }
    .spot.is-carousel .spot__card { width: min(58vw, 280px); }
    .spot.is-carousel .spot__card .case-card__title { font-size: 13px; line-height: 1.25; }
    .spot.is-carousel .spot__card .case-card__media { height: 276px; }
    .spot.is-carousel .spot__viewport { height: calc(276px + 128px); }
    .spot:not(.is-booming):not(.is-orb-live) .fit__orb { left: 0; top: 0; bottom: auto; translate: calc(var(--nucleus-x, 50vw) - 50% + var(--shake-x)) calc(var(--nucleus-y, 50vh) - 50% + var(--shake-y)); z-index: 0; }
    .spot.is-booming:not(.is-orb-live) .fit__orb,
    .spot.is-spent.is-booming:not(.is-orb-live) .fit__orb { left: 0; top: 0; translate: calc(var(--nucleus-x, 50vw) - 50% + var(--shake-x)) calc(var(--nucleus-y, 50vh) - 50% + var(--shake-y)); }
    .fit__steps, .fit__progress { position: relative; z-index: 1; }
    .fit .fit__lede { font-size: 15px; line-height: 1.35; }
    .fit__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 28px 24px; }
    .fit .fit__col ul { gap: 0.9em; }   /* Domains: more air between items */
    .fit__step[data-fit-step="1"] .ws-hero__wslabel { margin-bottom: 40px; }   /* Tools: more air between label and logos */
    .fit__tools li { font-size: 13px; gap: 8px; }
    .fit__tools svg { width: 20px; height: 20px; }
    .fit__orb.fit__orb--story-bg.is-wide {
        left: 0 !important; top: -48px !important; right: auto !important; bottom: auto !important;
        width: 100vw !important; height: calc(100dvh + 96px) !important; max-width: none !important;
        aspect-ratio: auto !important; translate: none !important; scale: 1 !important;
        border-radius: 0 !important;
    }
}

/* phone workspace: readable type, one column, scroll inside the story, tabs you can tap */
@media (max-width: 899px) {
    .ws-hero.is-slide .ws-hero__second { position: relative; z-index: 2; }
    .ws-hero.is-slide .ws-hero__wsslot { max-height: calc(100dvh - 470px); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .ws-hero .ws-board.is-embedded { height: auto !important; width: 100%; overflow: visible; }
    .ws-hero .ws-board.is-embedded .bn { width: 100% !important; max-width: 100%; zoom: 1; transform: none !important; }
    .ws-hero .ws-board.is-embedded .bn-nav { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 12px !important; position: sticky !important; top: 0; z-index: 4; margin: 0 0 14px !important; padding: 8px 0 !important; background: color-mix(in srgb, var(--bg) 92%, transparent); }
    .ws-hero .ws-board.is-embedded .bn-tab { font-size: 14px !important; letter-spacing: 0.01em !important; min-height: 44px; align-content: center; }
    .ws-hero .ws-board.is-embedded :is(.bn-gov, .bn-row, .bn-lower, .bn-arch, .bn-ai-layout) { display: grid !important; grid-template-columns: 1fr !important; grid-auto-flow: row !important; gap: 14px !important; }
    .ws-hero .ws-board.is-embedded .bn-gov__wires, .ws-hero .ws-board.is-embedded .bn-arch__wires, .ws-hero .ws-board.is-embedded .bn-n8n__wires { display: none !important; }
    .ws-hero .ws-board.is-embedded .bn-nn { position: relative !important; grid-column: auto !important; grid-row: auto !important; }
    .ws-hero .ws-board.is-embedded :is(.bn-step, .bn-nn, .bn-pane, .bn-gate) { font-size: 15px !important; line-height: 1.4 !important; }
    .ws-hero .ws-board.is-embedded :is(.bn-step em, .bn-nn__does, .bn-nn__tools, .bn-phase__band span) { font-size: 13px !important; }
    .ws-hero .ws-board.is-embedded :is(.bn-step b, .bn-gov .bn-phase__band b, .bn-nn__name) { font-size: 15px !important; letter-spacing: 0.01em !important; }
    .ws-hero .ws-board.is-embedded :is(.bn-phase__band, .bn-gov .bn-phase__band) { white-space: normal !important; }
    .ws-hero .ws-board.is-embedded .bn-step, .ws-hero .ws-board.is-embedded .bn-nn, .ws-hero .ws-board.is-embedded .bn-gate { min-height: 44px; }
    .ws-hero .ws-board.is-embedded :is(.bn-step, .bn-nn, .bn-pane, .bn-sticky) { background: color-mix(in srgb, var(--bg) 94%, transparent) !important; }
    .ws-hero .ws-board.is-embedded .bn-notes, .ws-hero .ws-board.is-embedded .bn-lower { display: grid !important; grid-template-columns: 1fr !important; }
    .ws-hero .ws-board.is-embedded .bn-sticky { max-width: none; transform: none !important; }
}

/* phone only: service carousel instead of the workspace charts and tabs */
.ws-svc { display: none; }
@media (max-width: 899px) {
    .ws-hero .ws-board.is-embedded .bn-nav,
    .ws-hero .ws-board.is-embedded .bn__boards { display: none !important; }
    .ws-hero.is-slide .ws-hero__wsslot { max-height: none; overflow: visible; }
    .ws-hero .ws-board.is-embedded .ws-svc { position: relative; display: block; width: 100%; padding-bottom: 52px; }
    .ws-hero .ws-board.is-embedded .ws-svc, .ws-hero .ws-board.is-embedded .ws-svc * { pointer-events: auto; }
    .ws-svc__view { width: 100%; overflow: hidden; touch-action: pan-y; cursor: grab; container-type: inline-size; padding-block: 16px; }
    .ws-svc__view:active { cursor: grabbing; }
    .ws-svc__track { display: flex; gap: 12px; width: max-content; }
    .ws-svc__slide { flex: 0 0 calc((100cqi - 12px) / 1.55); width: calc((100cqi - 12px) / 1.55); height: 350px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
    .ws-svc__box { height: 100%; padding: 18px 16px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
        border-radius: 0 !important;
        background:
            radial-gradient(90% 70% at 28% 16%, color-mix(in srgb, #fff 32%, transparent), transparent 58%),
            color-mix(in srgb, var(--bg) 80%, transparent);
        border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
        -webkit-backdrop-filter: blur(40px) saturate(1.6); backdrop-filter: blur(40px) saturate(1.6);
        box-shadow: none;
        transform-origin: 50% 42%;
        transform: perspective(620px) rotateX(8deg) rotateY(-16deg) scaleX(0.92);
        animation: none; }
    .ws-svc__slide:nth-child(2) .ws-svc__box { animation-delay: -2s; }
    .ws-svc__slide:nth-child(3) .ws-svc__box { animation-delay: -4s; }
    .ws-svc__slide:nth-child(4) .ws-svc__box { animation-delay: -1s; }
    .ws-svc__icon { height: 112px; color: var(--ink); }
    .ws-svc__icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
    .ws-svc__hot, .ws-svc__sat, .ws-svc__core, .ws-svc__cursor { fill: var(--interactive); }
    .ws-svc__node, .ws-svc__tok, .ws-svc__core, .ws-svc__click, .ws-svc__cursor { transform-box: fill-box; transform-origin: center; }
    .ws-svc__node { fill: currentColor; animation: ws-svc-node 6s ease-in-out infinite; }
    .ws-svc__node:nth-child(2) { animation-delay: -2s; }
    .ws-svc__node:nth-child(3) { animation-delay: -4s; }
    .ws-svc__hot { fill: var(--interactive); }
    .ws-svc__flow { stroke-dasharray: 64 72; animation: ws-svc-dash 14s linear infinite; }
    .ws-svc__core { animation: ws-svc-core 6s ease-in-out infinite; }
    .ws-svc__spin { transform-box: fill-box; transform-origin: center; animation: ws-svc-spin 18s linear infinite; }
    .ws-svc__spin--b { animation: none; }
    .ws-svc__tok { fill: transparent; stroke: currentColor; stroke-width: 1.25; animation: ws-svc-tok 8s ease-in-out infinite; }
    .ws-svc__tok:nth-child(2) { animation-delay: -1.6s; }
    .ws-svc__tok:nth-child(3) { animation-delay: -3.2s; }
    .ws-svc__tok:nth-child(4) { animation-delay: -4.8s; }
    .ws-svc__tok:nth-child(5) { animation-delay: -6.4s; }
    .ws-svc__frame { stroke-dasharray: 100; animation: ws-svc-draw 10s ease-in-out infinite; }
    .ws-svc__cursor { animation: ws-svc-cursor 10s ease-in-out infinite; }
    .ws-svc__click { animation: ws-svc-click 10s ease-out infinite; }
    .ws-svc__copy { display: grid; gap: 6px; align-content: end; }
    .ws-svc__n { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.16em; color: var(--interactive); }
    .ws-svc__t { margin: 0; font-size: 22px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }
    .ws-svc__d { margin: 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
    .ws-svc__arrows { position: absolute; right: 0; bottom: 0; z-index: 3; display: flex; gap: 2px; }
    .ws-svc__arrows button { width: 36px; height: 36px; display: grid; place-items: center; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ink); }
    .ws-svc__arrows svg { width: 16px; height: 16px; }
    @keyframes ws-svc-globe {
        0%, 100% { transform: perspective(620px) translateY(0) rotateX(10deg) rotateY(-22deg) scaleX(0.9); }
        50% { transform: perspective(620px) translateY(-8px) rotateX(4deg) rotateY(14deg) scaleX(0.98); }
    }
    @keyframes ws-svc-dash { to { stroke-dashoffset: -92; } }
    @keyframes ws-svc-node { 0%, 100% { transform: scale(0.92); opacity: 0.5; } 50% { transform: scale(1.08); opacity: 1; } }
    @keyframes ws-svc-spin { to { transform: rotate(360deg); } }
    @keyframes ws-svc-core { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
    @keyframes ws-svc-tok { 0%, 72%, 100% { opacity: 0.35; fill: transparent; } 18%, 42% { opacity: 1; fill: var(--interactive); } }
    @keyframes ws-svc-draw { 0% { stroke-dashoffset: 100; } 22%, 100% { stroke-dashoffset: 0; } }
    @keyframes ws-svc-cursor { 0%, 6% { transform: translate(6px, 4px); opacity: 0; } 24%, 100% { transform: translate(0, 0); opacity: 1; } }
    @keyframes ws-svc-click { 0%, 62% { transform: scale(0.7); opacity: 0; } 74% { opacity: 0.55; } 100% { transform: scale(1.35); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
    .ws-svc__box, .ws-svc__flow, .ws-svc__node, .ws-svc__spin, .ws-svc__core, .ws-svc__tok, .ws-svc__frame, .ws-svc__cursor, .ws-svc__click { animation: none; }
    .ws-svc__box { transform: perspective(620px) rotateX(8deg) rotateY(-16deg) scaleX(0.92); border-radius: 0; }
}

/* click on View selected work: the reel fills the viewport until it ends or is skipped */
.work-film { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.work-film[hidden] { display: none; }
.work-film video { width: 100%; height: auto; max-width: 100%; object-fit: contain; filter: url(#reel-noir); }
.work-film__dock { position: absolute; right: var(--gutter); bottom: 18px; z-index: 1; display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; column-gap: 14px; row-gap: 6px; max-width: calc(100% - var(--gutter) * 2); }
.work-film__note { grid-column: 1 / -1; margin: 0; justify-self: end; color: rgb(255 255 255 / 0.72); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.04em; line-height: 1.4; text-align: right; }
.work-film__bar { position: relative; width: min(42vw, 168px); height: 2px; background: rgb(255 255 255 / 0.28); }
.work-film__bar span { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
.work-film__skip { min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: #fff; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
html.is-work-film { overflow: hidden; }

/* desktop: the section is pinned 10vh above the screen, so the blocks are shifted back to the middle */
@media (min-width: 900px) {
    .spot, .spot.is-carousel .spot__exit, .spot .fit { align-content: center; }
    .spot.is-carousel .spot__exit { translate: 0 calc(10vh - (var(--nav-h) + 24px - clamp(32px, 5vh, 72px)) / 2 - 40px); }
    .spot .fit { padding-top: 20vh; box-sizing: border-box; }
    .spot .spot__bend { margin-bottom: 88px; }
    .spot .fit .fit__cols { margin-top: 96px; }
}

/* Home: the space animation melts into the page background (softer, edges feathered) */
.page-home .ws-space { opacity: .62; filter: contrast(.82) saturate(.9); }
.page-home .ws-hero.is-slide > .ws-space, .page-home .ws-space.is-held {
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 35%, transparent 100%); }

/* home: the footer does not slide in with the page; its content is held on the screen and fades in/out */
.outro.is-still { position: fixed; inset: 0; z-index: 5; margin: 0; }   /* the whole footer is the layer, as on About: its perspective and bend stay the same */

/* Track record without the blob (backup: assets/js/backup-track-record-blob); the orb still carries the boom into Let's talk */
.spot:not(.is-booming):not(.is-orb-live) .fit__orb:not(.fit__orb--story-bg) { visibility: hidden; }
/* tools and domains: four columns, more air under the label */
.fit__tools { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; }
.fit__step .ws-hero__wslabel { margin-bottom: clamp(40px, 6vh, 64px); }
/* domains as icon + text, like the tools; line icons keep their stroke */
.fit__domains svg, .fit__domains svg * { fill: none !important; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fit ul.fit__domains { font-size: 13px; }
@media (max-width: 767px) { .fit__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Domains: same grid, size and weight as the tools; line icons */
.fit ul.fit__domains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; gap: 28px clamp(24px, 3vw, 48px); font-size: 13px; justify-items: start !important; }
.fit__domains li { gap: 12px; line-height: 1.3; }
.fit__domains svg { width: 26px; height: 26px; stroke-width: 1.4; }
@media (max-width: 767px) { .fit ul.fit__domains { grid-template-columns: 1fr; gap: 20px; } .fit__domains svg { width: 22px; height: 22px; } }
/* Teams I've worked with: four columns desktop; three on phone */
.fit__clients { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 899px) {
    .fit__clients { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 28px; row-gap: 28px; }
    .fit__clients svg { height: 36px; }
    .fit__clients svg[aria-label^="Victoria"] { height: 24px; }
    .fit__clients svg[aria-label="Shimano"] { height: 18px; }
    .fit__clients svg[aria-label="Leica"] { height: 32px; }
    .fit__clients svg[aria-label="Winchester"] { height: 40px; }
}
/* Spotlight on: title and button a little higher, with air above the cards */
.spot .work__head { translate: 0 clamp(-80px, -7vh, -40px); }
@media (max-width: 767px) { .spot .work__head { translate: 0 -44px; } }
/* home Latest drops (phone): head lower, clear of the nav; cases stay put */
@media (max-width: 899px) {
    .spot.work-strip.is-carousel[data-spot] {
        align-content: end;
        padding-top: calc(var(--nav-h) + 12px);
        padding-bottom: 48px;
        height: calc(100dvh + 110px);
        max-height: none;
        overflow: visible;
    }
    .spot.is-carousel[data-spot] .work__head { translate: 0 88px; }
    .spot.is-carousel[data-spot] .work__head + .spot__viewport { margin-top: 12px; }
    .spot.is-carousel[data-spot] .spot__track {
        transform: translate(2vw, 28vh) scale(1.05) rotateX(56deg) rotateZ(-32deg) translateZ(90px) !important;
    }
    .spot.work-strip.is-carousel[data-spot] .spot__card { width: min(62vw, 320px); }
    .spot.work-strip.is-carousel[data-spot] .spot__card .case-card__media { height: 340px; }
    .spot.work-strip.is-carousel[data-spot] .spot__viewport { height: calc(340px + 180px); }
    .spot.work-strip.is-carousel[data-spot] .case-card__body { gap: 10px; padding-top: 6px; }
    .spot.work-strip.is-carousel[data-spot] .case-card__client,
    .spot.work-strip.is-carousel[data-spot] .spot__card.is-narrow .case-card__client {
        font-size: 1.05rem; line-height: 1.35; font-weight: 500; color: var(--ink-2);
    }
    .spot.work-strip.is-carousel[data-spot] .case-card__title,
    .spot.work-strip.is-carousel[data-spot] .spot__card.is-narrow .case-card__title {
        font-size: 1.2rem; line-height: 1.35; letter-spacing: -0.015em; max-width: none; font-weight: 400;
    }
    .spot.work-strip.is-carousel[data-spot] .work-card__year,
    .spot.work-strip.is-carousel[data-spot] .spot__card.is-narrow .work-card__year {
        font-size: 0.95rem; font-weight: 400; color: var(--ink-3);
    }
    .spot.work-strip.is-carousel[data-spot] .spot__card.is-tiny .case-card__body { visibility: visible; }
}
/* home hero: flat isometric floor behind the title (modules/hero-iso.js) */
.hero-iso { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.ws-hero > .ws-hero__head { position: relative; z-index: 1; }

/* home hero: the space veil in isometric blocks, behind the heading */
.ws-hero__cubes { position: absolute; inset: 0; width: 100%; height: 100svh; z-index: 0; pointer-events: none; }
.ws-hero__head { z-index: 1; }
/* Domains: app-style logos, a filled rounded tile with the Lucide (ISC) glyph cut out in the page colour */
.fit__domains svg { width: 28px; height: 28px; }
.fit__domains svg .tile { fill: currentColor !important; }
.fit__domains svg .glyph, .fit__domains svg .glyph * { fill: none !important; stroke: var(--bg); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
/* Spotlight on: the cases lie on the field like Selected work's screen (strip.js lays them flat in a row; the track tilts it onto the floor) */
.spot.is-carousel[data-spot] .spot__viewport { perspective: 4000px; }
.spot.is-carousel[data-spot] .spot__track { transform: translate(2vw, 16vh) scale(1.05) rotateX(56deg) rotateZ(-32deg) translateZ(90px) !important; transform-origin: 0 50%; }
/* risen out of the field's dip: a soft shadow on the floor below each case */
.has-spot-field .spot.is-carousel[data-spot] .spot__card > *, .has-spot-field .spot[data-spot] .spot__bar { opacity: 0; }   /* drawn on the fabric instead (space-cubes.js) */
/* Spotlight on (drawn on the fabric): larger words under the cases */
.spot.is-carousel[data-spot] .spot__card .case-card__client { font-size: 1.05rem; }
.spot.is-carousel[data-spot] .spot__card .case-card__title { font-size: 1.2rem; }
/* home Latest drops (desktop): cases longer (their place on the fabric: space-cubes.js placeSpots) */
@media (min-width: 900px) {
    .spot.work-strip.is-carousel[data-spot] .spot__card { width: min(42vw, 640px); }
}

/* ------------------------------------------------------------------
   Home, phone (from iPhone 13 mini, 375 × ~630 visible): smaller type,
   titles placed for the short viewport, buttons kept clear of the
   bottom bar (Ask AI / location). Animations untouched.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* type scale: one title size, one lede size */
    .page-home .ws-hero__titles .ws-hero__title { font-size: clamp(1.85rem, 8.2vw, 2.2rem); line-height: 1.06; }
    .page-home .ws-hero__second .ws-hero__next { font-size: clamp(1.4rem, 6.2vw, 1.6rem) !important; line-height: 1.12; }
    .page-home .ws-hero__lede,
    .page-home .spot .ws-hero__lede,
    .page-home .fit .fit__lede,
    .page-home .shots__head .ws-hero__lede { font-size: 1rem; line-height: 1.45; }
    .page-home .spot .spot__title,
    .page-home .fit .fit__title,
    .page-home .shots__head .spot__title { font-size: clamp(1.75rem, 7.4vw, 2rem); line-height: 1.08; }

    /* hero: tighter rhythm, the button lands well above the bottom bar */
    .page-home .ws-hero.is-slide .ws-hero__head { padding-top: clamp(24px, 14svh, 120px); }
    /* the first block shares its grid cell with the taller second one: without this its rows
       stretch and push the button down behind the bottom bar */
    .page-home .ws-hero__first { align-content: start; }
    /* the second screen ("Scalable…" + workspace) does not need the lowered start: back up under the nav */
    html.has-intro-slide .page-home .ws-hero__second, .page-home .ws-hero.is-slide .ws-hero__second { margin-top: calc(-1 * clamp(0px, 14svh - 24px, 96px)); }
    .page-home .ws-hero__roles { margin-bottom: 14px; }
    .page-home .ws-hero__first .ws-hero__lede { margin-top: 1.1rem; }
    .page-home .ws-hero__first .ws-hero__bend { margin-top: 1.75rem; }
    .page-home .ws-hero__work.btn--solid { padding: 14px 24px; }

    /* Shots: lede closer to the title, tabs right under it */
    .page-home .shots__head { padding-top: calc(var(--nav-h) + clamp(12px, 3svh, 32px)); }
    .page-home .shots__head .ws-hero__lede { margin-top: 0.6rem; }
}

/* short phones: the fixed px offsets tuned on taller screens push titles off-screen */
@media (max-width: 899px) and (max-height: 760px) {
    /* Latest drops: head under the nav, cases shorter so head + cases fit one screen */
    .page-home .spot.work-strip.is-carousel[data-spot] { padding-bottom: 72px; }
    .page-home .spot.is-carousel[data-spot] .work__head { translate: 0 56px; }
    .page-home .spot .spot__bend { margin-top: 16px; margin-bottom: 0; }
    .page-home .spot.work-strip.is-carousel[data-spot] .spot__card .case-card__media { height: min(340px, 38svh); }
    .page-home .spot.work-strip.is-carousel[data-spot] .spot__viewport { height: calc(min(340px, 38svh) + 150px); }

    /* Track record: title higher, lists tighter so the last row clears the bottom bar */
    .page-home .spot .fit .fit__title { margin-top: 80px; }
    .page-home .fit .fit__lede { margin-top: 0.5rem; }
    .page-home .spot .fit .fit__cols { margin-top: 20px; }
    .page-home .fit__step .ws-hero__wslabel { margin-bottom: 20px; }
    .page-home .fit__clients { row-gap: 18px; }
    .page-home .fit__clients svg { height: 30px; }
    .page-home .fit__tools { row-gap: 18px; }
    .page-home .fit ul.fit__domains { gap: 14px; }
}
/* home, short phones: the workspace cards scale with the viewport so card + arrows clear the bottom bar */
@media (max-width: 899px) and (max-height: 760px) {
    .page-home .ws-hero__second .ws-hero__wslabel { margin-top: 0; }
    .page-home .ws-hero__second .ws-hero__next + .ws-hero__bend + .ws-hero__wslabel { margin-top: 24px; }
    .page-home .ws-hero__wsslot { margin-top: 6px !important; }
    .page-home .ws-svc { padding-bottom: 44px; }
    .page-home .ws-svc__view { padding-block: 10px; }
    .page-home .ws-svc__slide { height: clamp(210px, 100svh - 410px, 350px); }
    .page-home .ws-svc__box { padding: 14px 14px 16px; gap: 8px; }
    .page-home .ws-svc__icon { height: clamp(64px, 100svh - 560px, 112px); }
    .page-home .ws-svc__t { font-size: 19px; }
    .page-home .ws-svc__d { font-size: 12.5px; }
}