/* VERSEATILE Studios: the Lab system. Off-white paper, black ink, ruled grid. Black is kept for the brain panel, the contact section and the footer.
   Colour tokens live in :root and .dark only. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geistmono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --paper: #07070A; --ink: #F3F3F7; --soft: #9A9AAB; --rule: rgba(255,255,255,.14); --tint: rgba(255,255,255,.06); --c1: #C7FF97; --c2: #C7FF97; --c3: #FF2D8A; --c4: #C7FF97; --m: clamp(10px, 1.4vw, 20px); --pad: clamp(16px, 1.7vw, 26px); --hdr: 58px; --ease: cubic-bezier(.16,1,.3,1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; }
.dark { --paper: #0C0C12; --ink: #F3F3F7; --soft: #9A9AAB; --rule: rgba(255,255,255,.16); --tint: rgba(255,255,255,.07); background: var(--paper); color: var(--ink); }
.inv { --paper: #F3F3F7; --ink: #0B0B10; --soft: #5C5C6E; --rule: rgba(11,11,16,.18); --tint: rgba(11,11,16,.06); background: var(--paper); color: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.42 var(--sans); letter-spacing: -.008em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } h1, h2, h3, h4 { margin: 0; font-weight: 500; } ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; } ::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; } .skip:focus { top: 10px; }
.grain { display: none; }

/* type */
.lbl { font: 500 11px/1.35 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .lbl.dot::before { display: none; }
.muted { color: var(--soft); } .small { font-size: 14px; }
.h1 { font-size: clamp(38px, 5.6vw, 92px); line-height: .97; letter-spacing: -.045em; }
.h1.big, .big { font-size: clamp(46px, 7.6vw, 124px); line-height: .94; letter-spacing: -.05em; }
.h2 { font-size: clamp(25px, 2.7vw, 42px); line-height: 1.04; letter-spacing: -.035em; }
.h3 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.15; letter-spacing: -.022em; }
.lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.32; letter-spacing: -.015em; max-width: 48ch; }
.n { font-size: clamp(38px, 4.4vw, 70px); line-height: 1; letter-spacing: -.05em; margin: 0 0 8px; } .n b { font-weight: 500; } .n small { font-size: .45em; letter-spacing: -.02em; }
.h1 .w, .h2 .w, .hero-h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js .h1:not(.in) .w > span, .js .h2:not(.in) .w > span { transform: translateY(105%); }
.h1 .w > span, .h2 .w > span { display: inline-block; transition: transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.scr-g { opacity: .4; display: inline-block; width: .55em; text-align: center; overflow: hidden; vertical-align: top; max-height: 1.1em; } .scr-on { white-space: pre-wrap; }

/* the sheet: one ruled page */
.sheet { margin: 0 var(--m); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
main { padding-top: var(--hdr); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.c { grid-column: span 12; padding: var(--pad); min-width: 0; border-bottom: 1px solid var(--rule); position: relative; } .row > .c:last-child { border-bottom: 0; }
.tight { padding: 12px var(--pad); } .flush { padding: 0; }
@media (min-width: 900px) {
  .c { border-bottom: 0; border-right: 1px solid var(--rule); } .c:last-child, .c.end { border-right: 0; }
  .s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s9 { grid-column: span 9; }
  .r2 > .c:nth-child(2n), .r4 > .c:nth-child(4n), .r3 > .c:nth-child(3n) { border-right: 0; } .r2 > .c:nth-child(n+3), .r3 > .c:nth-child(n+4), .r4 > .c:nth-child(n+5) { border-top: 1px solid var(--rule); }
}
@media (max-width: 899px) { .m6 { grid-column: span 6; } .m6:nth-child(odd) { border-right: 1px solid var(--rule); } }
.head { display: grid; gap: 12px; padding: clamp(30px, 4vw, 64px) var(--pad) clamp(22px, 2.6vw, 36px); align-content: end; }
.stack { display: grid; gap: 14px; align-content: start; } .stack p { margin: 0; } .between { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; height: 100%; }
.dark .row, .dark .c { border-color: var(--rule); }
.acts { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }

/* buttons */
.btn { display: inline-flex; align-items: stretch; height: 46px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background .2s, color .2s; cursor: pointer; }
.btn > span { display: inline-flex; align-items: center; padding: 0 16px; font-weight: 500; font-size: 15px; }
.btn > i { display: inline-grid; place-items: center; width: 42px; border-left: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); } .btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); } .btn:hover svg { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); } .btn.ghost > i { border-left-color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.wide { width: 100%; } .btn.wide > span { flex: 1; justify-content: center; } .btn[disabled] { opacity: .5; }
.q { display: inline-block; padding: 3px 0; border-bottom: 1px solid var(--ink); font-size: 15px; } .q:hover { opacity: .6; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; } .pills li { font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border: 1px solid var(--rule); }

/* header */
.hdr { position: fixed; inset: 0 0 auto; height: var(--hdr); z-index: 50; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); padding: 0 calc(var(--m) + var(--pad)); background: var(--paper); border-bottom: 1px solid var(--rule); }
.wordmark { width: 116px; height: auto; filter: brightness(0); } .dark .wordmark { filter: none; }
.hud { margin-left: auto; white-space: nowrap; } .hud b { font-weight: 500; }
.nav { display: none; align-items: center; gap: 24px; } .nav a { font-size: 14px; white-space: nowrap; } .nav a span { display: inline-block; } .nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.nav .nav-cta { background: var(--ink); color: var(--paper); padding: 9px 13px; font-weight: 500; }
.menu-btn { min-height: 44px; } @media (min-width: 1000px) { .nav { display: flex; } .menu-btn { display: none; } }
.menu { position: fixed; inset: var(--hdr) 0 0; z-index: 49; background: var(--paper); } .menu-in { height: 100%; display: flex; flex-direction: column; gap: 24px; padding: 8px calc(var(--m) + var(--pad)) 28px; overflow-y: auto; }
.menu-links { display: grid; } .menu-links a { font-size: clamp(38px, 10vw, 76px); line-height: 1.1; letter-spacing: -.045em; border-bottom: 1px solid var(--rule); padding: 8px 0; }
.menu-foot { margin-top: auto; display: grid; gap: 14px; } .menu-contact, .menu-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; } body.menu-open { overflow: hidden; }

/* footer */
.ftr { padding: 0; } .ftr .sheet { border-color: var(--rule); } .ftr-line { font-size: clamp(26px, 3.2vw, 50px); line-height: 1.02; letter-spacing: -.04em; max-width: 16ch; margin: 0; font-weight: 500; }
.ftr-col { display: grid; gap: 8px; align-content: start; } .ftr-col a:hover { opacity: .6; } .ftr-mark { width: 100%; height: auto; } .ftr-legal { display: flex; flex-wrap: wrap; gap: 16px; } .ftr-legal a:hover, .motion-toggle:hover { text-decoration: underline; }
.ftr .ends { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* hero and brain panel */
.lx-hero { min-height: min(68vh, 680px); }
.hero-h1 { font-size: clamp(44px, 6.5vw, 108px); line-height: .95; letter-spacing: -.052em; font-weight: 500; margin: 0; }
.panel { background: #0C0D0C; color: #F5F4EF; display: flex; flex-direction: column; min-height: 420px; overflow: hidden; }
.world { position: relative; flex: 1; min-height: 340px; background: #0C0D0C; overflow: hidden; } .world canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s; } .world canvas.on { opacity: 1; }
.world-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .8; } .world-labels { position: absolute; inset: 0; pointer-events: none; }
.panel-top { display: flex; justify-content: space-between; gap: 14px; padding: 12px var(--pad); border-bottom: 1px solid #3A3B38; }
.wl { position: absolute; left: 0; top: 0; padding-left: 42px; font: 500 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 0 5px #000, 0 0 5px #000; }
.wl::before { content: ""; position: absolute; left: 0; top: 4px; width: 36px; height: 1px; background: #fff; } .wl::after { content: ""; position: absolute; left: -3px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.wl.flip { padding: 0 42px 0 0; margin-left: -100%; transform-origin: right; } .casc { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #3A3B38; } .casc li { padding: 11px var(--pad); font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #A9AAA3; border-left: 1px solid #3A3B38; transition: background .4s, color .4s; } .casc li:first-child { border-left: 0; } .casc li.is-on { background: #F5F4EF; color: #0C0D0C; }
@media (max-width: 560px) { .casc li { padding: 10px 8px; font-size: 9.5px; letter-spacing: 0; text-align: center; } }

/* work tiles */
.tile { display: flex; flex-direction: column; } .tile .case-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--tint); }
.case-media img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .tile:hover img.cover { transform: scale(1.015); }
.card-logo { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(44%, 240px); height: auto; max-height: 34%; object-fit: contain; filter: drop-shadow(0 2px 14px rgba(0,0,0,.45)); }
.type-card { position: absolute; inset: 0; display: grid; place-items: center; background: #0C0D0C; color: #F5F4EF; font-size: clamp(44px, 8vw, 110px); letter-spacing: -.05em; }
.case-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 3px 14px; padding: 12px var(--pad); border-top: 1px solid var(--rule); } .case-name { font-size: 19px; font-weight: 500; letter-spacing: -.025em; } .case-card.hide { display: none; }
.dot-state { display: inline-block; width: 7px; height: 7px; border: 1px solid var(--ink); border-radius: 50%; margin-right: 7px; } .is-explored .dot-state { background: var(--ink); }
.your-tile .case-media { background: #0C0D0C; color: #F5F4EF; } .your-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--pad); } .your-in svg { width: 14px; height: 14px; vertical-align: -2px; } .your-t { font-size: clamp(40px, 5.6vw, 92px); line-height: .95; letter-spacing: -.05em; font-weight: 500; }
.work .c.flush { padding: 0; } .filters { display: flex; flex-wrap: wrap; gap: 4px; } .filter { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border: 1px solid var(--rule); } .filter:hover { background: var(--tint); } .filter.on { background: var(--ink); color: var(--paper); }

/* indexes: services, faq, steps */
.acc { border-top: 0; } .acc > details { border-bottom: 1px solid var(--rule); } .acc > details:last-child { border-bottom: 0; }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr auto 20px; gap: 10px; align-items: center; padding: 14px var(--pad); } .acc summary::-webkit-details-marker { display: none; } .acc summary:hover { background: var(--tint); }
.acc-t { font-size: clamp(21px, 2.3vw, 36px); line-height: 1.05; letter-spacing: -.035em; font-weight: 500; }
.acc i { position: relative; width: 16px; height: 16px; } .acc i::before, .acc i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .3s var(--ease); } .acc i::after { transform: rotate(90deg); } details[open] > summary i::after { transform: none; }
.state::before { content: "Unlit"; color: var(--soft); } .is-lit .state::before { content: "● Lit"; color: var(--ink); }
.acc-b { display: grid; gap: 22px; padding: 6px var(--pad) 24px calc(var(--pad) + 44px); } .acc-b p { margin: 0; } .acc-cta { margin-top: 18px; } @media (min-width: 900px) { .acc-b { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 620px) { .acc-b { padding-left: var(--pad); } .acc summary { grid-template-columns: 24px 1fr auto 18px; } }
.thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint); } .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faq summary { grid-template-columns: 1fr 18px; padding: 16px var(--pad); font-size: 17px; font-weight: 500; letter-spacing: -.015em; } .faq p { margin: 0; padding: 0 44px 18px var(--pad); color: var(--soft); max-width: 70ch; }
.tbl > li { display: grid; gap: 4px; padding: 14px var(--pad); border-bottom: 1px solid var(--rule); } .tbl > li:last-child { border-bottom: 0; } .tbl p { margin: 0; }
.checks { display: grid; gap: 6px; font-size: 14px; } .checks li { display: flex; gap: 8px; } .checks li::before { content: "—"; }
.np { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .np-nums { font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.04em; white-space: nowrap; } .np-nums i { font-style: normal; color: var(--soft); } .np-nums b { font-weight: 500; }
.cred-logo { display: flex; width: 168px; height: 84px; padding: 14px 18px; background: #111210; border: 1px solid var(--rule); } .cred-logo img { width: 100%; height: 100%; object-fit: contain; }
.quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; } .quote blockquote { margin: 0; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.1; letter-spacing: -.033em; font-weight: 500; } .quote b { display: block; font-weight: 500; }
.door { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: clamp(240px, 26vw, 380px); padding: var(--pad); transition: background .25s, color .25s; } .door:hover { background: var(--ink); color: var(--paper); } .door-t { font-size: clamp(26px, 3vw, 48px); line-height: 1; letter-spacing: -.04em; font-weight: 500; } .door-go svg { width: 15px; height: 15px; vertical-align: -2px; } .door-go { font-weight: 500; }
.post-row { display: grid; gap: 6px; padding: 14px var(--pad); border-bottom: 1px solid var(--rule); align-items: center; } .post-row:last-child { border-bottom: 0; } .post-row:hover { background: var(--tint); } .post-t { font-size: clamp(20px, 2vw, 30px); line-height: 1.06; letter-spacing: -.03em; font-weight: 500; } @media (min-width: 900px) { .post-row { grid-template-columns: 130px 1fr 160px 120px; gap: 20px; } } .post-row .thumb { aspect-ratio: 3 / 2; } @media (max-width: 899px) { .post-row .thumb { display: none; } }

/* form */
.lead-form { display: grid; gap: 16px; } .fld { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; } .fld legend { padding: 0; margin-bottom: 6px; }
.fld input, .fld textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 9px 0; outline: none; resize: vertical; } .fld input:focus, .fld textarea:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); } .fld ::placeholder { color: var(--soft); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; } .chip { position: relative; } .chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .chip span { display: inline-block; font-size: 14px; padding: 7px 10px; border: 1px solid var(--rule); } .chip input:checked + span { background: var(--ink); color: var(--paper); } .chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: 12px; color: var(--soft); margin: 0; } .form-note a { text-decoration: underline; } .form-status { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; min-height: 1em; margin: 0; } .form-status a { text-decoration: underline; } .lead-form.sent > :not(.form-status) { opacity: .4; pointer-events: none; }
.lead-form.inline { grid-template-columns: 1fr; } @media (min-width: 700px) { .lead-form.inline { grid-template-columns: 1fr auto; align-items: end; } .lead-form.inline .form-note, .lead-form.inline .form-status { grid-column: 1 / -1; } }

/* method */
.ix-q { border: 0; margin: 0; padding: 14px var(--pad); min-width: 0; display: grid; gap: 10px; border-bottom: 1px solid var(--rule); } .ix-q legend { display: contents; } .ix-s { display: block; font-size: 17px; line-height: 1.22; letter-spacing: -.015em; font-weight: 500; } .ix { display: grid; } @media (min-width: 900px) { .ix { grid-template-columns: 1fr 1fr; } .ix-q:nth-child(odd) { border-right: 1px solid var(--rule); } }
.ix-opts { display: flex; gap: 4px; } .ix-opt { position: relative; flex: 1; max-width: 68px; } .ix-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .ix-opt span { display: grid; place-items: center; height: 42px; border: 1px solid var(--rule); font-size: 15px; } .ix-opt:hover span { background: var(--tint); } .ix-opt input:checked + span { background: var(--ink); color: var(--paper); } .ix-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ix-total { font-size: clamp(90px, 12vw, 190px); line-height: .85; letter-spacing: -.07em; margin: 10px 0; font-weight: 500; } .ix-bars { display: grid; gap: 12px; } .ix-bar { display: grid; grid-template-columns: 62px 1fr 34px; gap: 10px; align-items: center; } .ix-bar b { font-weight: 500; text-align: right; } .ix-track { height: 10px; background: var(--tint); display: block; } .ix-track i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); }

/* the game */
.rf { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--paper); overflow-y: auto; } body.rf-open { overflow: hidden; } .rf-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--hdr); padding: 0 var(--pad); flex: none; border-bottom: 1px solid var(--rule); } .rf-close { padding: 12px 0 12px 12px; } .rf-close:hover { text-decoration: underline; }
.rf-stage { flex: 1 1 280px; min-height: 240px; display: flex; background: #0C0D0C; } .rf-stage .world { flex: 1; min-height: 0; }
.rf-play, .rf-result { padding: var(--pad); display: grid; gap: 14px; flex: none; } .rf-meta { display: flex; align-items: center; gap: 14px; } .rf-bar { flex: 1; height: 2px; background: var(--tint); } .rf-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; }
.rf-q { font-size: clamp(30px, 4.4vw, 68px); line-height: 1; letter-spacing: -.045em; margin: 0; font-weight: 500; } .rf-a { display: grid; gap: 6px; } @media (min-width: 760px) { .rf-a { grid-template-columns: 1fr 1fr; } } .rf-opt { display: flex; gap: 14px; align-items: baseline; padding: 16px 18px; text-align: left; border: 1px solid var(--rule); font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -.025em; font-weight: 500; } .rf-opt:hover, .rf-opt:focus-visible { background: var(--ink); color: var(--paper); } .rf-opt[disabled] { opacity: .4; } .rf-hint { margin: 0; } @media (hover: none) { .rf-hint { display: none; } }
.rf-name { font-size: clamp(46px, 7vw, 110px); line-height: .92; letter-spacing: -.055em; margin: 0; outline: 0; font-weight: 500; } .rf-text { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -.02em; margin: 0; } .rf-risk { margin: 0; } .rf-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 34px; margin: 4px 0; } .rf-stats dd { margin: 3px 0 0; } .rf-note { margin: 0; font-size: 12px; max-width: 80ch; } html.calm .rf-bar { display: none; } @media (max-width: 620px) { .rf-stats { grid-template-columns: 1fr 1fr; } }

/* inner pages */
.gallery figure { margin: 0; } .gallery img { width: 100%; } .wide-media { position: relative; overflow: hidden; background: var(--tint); aspect-ratio: 16 / 9; } .wide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wide-media.portrait { aspect-ratio: 4 / 5; } @media (max-width: 720px) { .wide-media { aspect-ratio: 4 / 5; } }
.crumbs a:hover { text-decoration: underline; } dl { margin: 0; } dd { margin: 4px 0 0; } .kv { display: grid; gap: 4px; } .draft-flag { display: inline-block; padding: 4px 8px; border: 1px dashed var(--ink); justify-self: start; }
.post-body { font-size: 18px; line-height: 1.6; max-width: 68ch; } .post-body h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -.03em; margin: 1.8em 0 .6em; } .post-body h3 { font-size: 21px; margin: 1.4em 0 .5em; } .post-body p { margin: 0 0 1.1em; } .post-body ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1.1em; } .post-body a { text-decoration: underline; } .post-inline { margin: 2em 0; } .pull { margin: 0 0 1.6em; padding-left: 16px; border-left: 2px solid var(--ink); font-size: clamp(22px, 2vw, 28px); line-height: 1.22; letter-spacing: -.025em; font-weight: 500; }
.author { display: flex; gap: 10px; align-items: center; } .author > span { display: grid; gap: 2px; } .author-face { width: 44px; height: 44px; object-fit: cover; filter: grayscale(1); } .author-face.mark { object-fit: contain; filter: brightness(0); padding: 8px 2px; border: 1px solid var(--rule); } .author b { font-weight: 500; }
/* legal keeps its own markup */
.page-hero { padding: clamp(30px, 5vw, 70px) var(--pad); border-bottom: 1px solid var(--rule); display: block; } .page-hero .wrap { display: grid; gap: 14px; } .page-hero .lead { margin: 0; } .sec.tight { padding: 0; } .legal-grid { display: grid; } .legal-toc { padding: var(--pad); border-bottom: 1px solid var(--rule); } .legal-toc ol { display: grid; gap: 8px; } .legal-toc a:hover { text-decoration: underline; } .legal-body { padding: var(--pad); max-width: 820px; } .legal-body section { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); } .legal-body section:last-child { border-bottom: 0; } .legal-body h2 { margin-bottom: 12px; } .legal-body h3 { font-size: 17px; margin: 16px 0 6px; } .legal-body ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; } .legal-body a { text-decoration: underline; } @media (min-width: 900px) { .legal-grid { grid-template-columns: 300px 1fr; } .legal-toc { border-bottom: 0; border-right: 1px solid var(--rule); } .legal-toc ol { position: sticky; top: calc(var(--hdr) + 20px); } }

/* always-there ways to reach us */
.actionbar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 60; display: none; gap: 4px; padding: 4px; background: var(--paper); border: 1px solid var(--rule); transform: translateY(140%); transition: transform .6s var(--ease); } .actionbar.on { transform: none; } .actionbar a { min-height: 46px; display: grid; place-items: center; font-size: 15px; font-weight: 500; } .ab-main { flex: 1; background: var(--ink); color: var(--paper); } .ab-wa { padding: 0 16px; border: 1px solid var(--rule); } @media (max-width: 900px) { .actionbar { display: flex; } .ftr { padding-bottom: 72px; } }
.dock { position: fixed; right: 14px; bottom: 14px; z-index: 55; display: none; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; background: var(--ink); color: var(--paper); transform: translateY(170%); transition: transform .6s var(--ease); } .dock.on { transform: none; } .dock img { width: 44px; height: 44px; object-fit: cover; object-position: top; filter: grayscale(1); } .dock b { display: block; font-weight: 500; font-size: 15px; } .dock small { font-size: 9.5px; opacity: .7; } @media (min-width: 901px) { .dock { display: flex; } } body.rf-open .dock, body.rf-open .actionbar { visibility: hidden; }
.play-toast { position: fixed; left: 50%; top: calc(var(--hdr) + 10px); transform: translateX(-50%); z-index: 45; background: var(--ink); color: var(--paper); padding: 9px 13px; margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.motion-toggle { text-decoration: underline; text-underline-offset: 3px; }

/* readback: the page reads the visitor back */
body.has-world { --trace: 20px; scroll-padding-top: calc(var(--hdr) + 32px); } body.has-world main { padding-top: calc(var(--hdr) + var(--trace)); }
.trace { position: absolute; left: 0; right: 0; top: 100%; margin-top: 1px; height: var(--trace); background: var(--paper); border-bottom: 1px solid var(--rule); overflow: hidden; } .trace canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .trace i { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--ink); will-change: transform; } body.menu-open .trace, body.rb-off .trace { display: none; }
.heat { background-color: rgba(17,18,16,var(--h,0)); transition: background-color 1.4s linear; }
.rb-note { display: flex; justify-content: space-between; gap: 16px; align-items: center; } .rb-note a { text-decoration: underline; } .rb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-right: 8px; } .rb-stop { text-decoration: underline; text-underline-offset: 3px; flex: none; } .rb-stop:hover { opacity: .6; }
.scope { position: fixed; left: 14px; bottom: 14px; z-index: 40; width: 250px; background: #0C0D0C; color: #F5F4EF; border: 1px solid #0C0D0C; transition: transform .6s var(--ease), opacity .4s; display: none; flex-direction: column; } .scope.on { display: flex; } .scope.away { transform: translateY(120%); opacity: 0; } .scope-top, .scope-read { padding: 7px 10px; font-size: 10px; } .scope-top { border-bottom: 1px solid #3A3B38; } .scope-read { border-top: 1px solid #3A3B38; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .scope-slot { height: 150px; display: flex; } .scope-slot .world { flex: 1; min-height: 0; } @media (max-width: 1099px) { .scope { display: none !important; } }
#readback .rb-mapcell { background: #0C0D0C; position: relative; padding: 18px 0 30px; } .rb-map { display: block; width: 100%; height: clamp(150px, 19vw, 260px); } .rb-ticks { position: absolute; left: 0; right: 0; bottom: 8px; height: 14px; } .rb-ticks span { position: absolute; font: 500 9.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #A9AAA3; white-space: nowrap; padding-left: 5px; border-left: 1px solid #5a5b57; } .rb-open { max-width: 64ch; margin: 0; } button.q { background: none; border-width: 0 0 1px; cursor: pointer; } 
/* reveal */
.js .rv { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .js .rv { opacity: 1; transform: none; } .js .h1:not(.in) .w > span, .js .h2:not(.in) .w > span { transform: none; } }
html.calm .js .rv, html.calm.js .rv { transition-duration: .01ms; }
/* the Synapse showcase keeps its own block: give it the tokens it expects */
.cx { --w100: #fff; --w90: rgba(255,255,255,.9); --w70: rgba(255,255,255,.7); --w60: rgba(255,255,255,.6); --w28: rgba(255,255,255,.28); --w10: rgba(255,255,255,.14); --r: 0px; color: #fff; }
.ix-out[hidden] { display: none; }
@media (min-width: 900px) { .fives { grid-template-columns: repeat(5, 1fr); } .fives > .c { grid-column: auto !important; } .fives > .c:last-child { border-right: 0; } }
.lx-hero .between > p.lbl { margin: 0; } .lx-hero .between { min-height: 100%; }
.work > .c:nth-child(n) { border-bottom: 0; } @media (max-width: 899px) { .work > .c { border-bottom: 1px solid var(--rule); } }
.dark .btn { background: var(--ink); color: var(--paper); }
.dark .fld input, .dark .fld textarea { color: var(--ink); }
.stack > .h1, .stack > .h1.big { margin-bottom: 10px; }

/* cortex showcase (2026-11-06): self-contained under .cx. Takes no input; see assets/cortex.js */
.cx { background: #000; border: 1px solid var(--w10); border-radius: var(--r); overflow: hidden; margin-bottom: clamp(40px, 5vw, 70px); }
.cx-stage { position: relative; aspect-ratio: 16 / 8.4; overflow: hidden; contain: layout paint; pointer-events: none; user-select: none; -webkit-user-select: none; background: radial-gradient(ellipse at 50% 46%, #0d0d0d 0, #000 62%); }
.cx-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cx-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.js .cx-fallback { display: none; }
html.js .cx-failed .cx-fallback { display: block; }
.cx-ring { position: absolute; left: 50%; top: 50%; height: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.04); border-radius: 50%; }
.cx-corners i { position: absolute; width: 16px; height: 16px; border: 1px solid rgba(255,255,255,.3); }
.cx-corners i:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.cx-corners i:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.cx-corners i:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.cx-corners i:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.cx-hud { position: absolute; top: 26px; margin: 0; font: 400 10px/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--w60); }
.cx-hud b { font-weight: 500; color: var(--w100); }
.cx-tl { left: 30px; } .cx-tr { right: 30px; text-align: right; }
.cx-steps { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--w10); }
.cx-steps li { position: relative; display: grid; gap: 8px; align-content: start; padding: clamp(16px, 2vw, 24px); border-left: 1px solid var(--w10); border-top: 1px solid var(--w10); }
.cx-steps li:nth-child(odd) { border-left: 0; }
.cx-steps li:nth-child(-n+2) { border-top: 0; }
.cx-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--w100); transform: scaleX(0); transform-origin: 0 50%; }
.cx-on .cx-steps li > * { opacity: .45; transition: opacity .6s ease; }
.cx-on .cx-steps li.is-on > * { opacity: 1; }
.cx-on .cx-steps li.is-on::before { transform: scaleX(1); transition: transform 4.2s linear; }
.cx-still .cx-steps li > * { opacity: 1; transition: none; }
.cx-still .cx-steps li.is-on::before { transform: scaleX(0); transition: none; }
@media (min-width: 900px) {
  .cx-steps { grid-template-columns: repeat(4, 1fr); }
  .cx-steps li { border-top: 0; }
  .cx-steps li:nth-child(odd) { border-left: 1px solid var(--w10); }
  .cx-steps li:first-child { border-left: 0; }
}
@media (max-width: 720px) {
  .cx-stage { aspect-ratio: 1 / 1; }
  .cx-hud { top: 22px; font-size: 9px; letter-spacing: .04em; }
  .cx-tl { left: 24px; } .cx-tr { right: 24px; }
}
@media (max-width: 350px) { .cx-tr { display: none; } }
.rb-ticks, #readback .rb-mapcell { overflow: hidden; } .rb-note { flex-wrap: wrap; }

/* case study template (2026-11-07): one structure for every project */
.cs-toc { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 14px; padding-bottom: 14px; position: sticky; top: var(--hdr, 56px); z-index: 5; background: var(--paper, #F5F4EF); border-bottom: 1px solid var(--rule); }
.cs-toc a { font-size: 14px; white-space: nowrap; } .cs-toc a:hover { text-decoration: underline; }
.cs-sec { scroll-margin-top: calc(var(--hdr, 56px) + 60px); }
.cs-head { padding-bottom: 0; }
.cs-facts dd { font-size: 15px; }
.next-case .case-media { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .cs-toc { overflow-x: auto; flex-wrap: nowrap; } .next-case .case-media { aspect-ratio: 1 / 1; } }

/* video testimonial (2026-11-07): the only video on the site */
.vt-frame { position: relative; aspect-ratio: 16 / 9; background: #0b0b0a; overflow: hidden; }
.vt-frame img, .vt-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; border: 0; border-radius: 999px; background: #F5F4EF; color: #111210; cursor: pointer; box-shadow: 0 10px 40px rgba(0,0,0,.25); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.vt-play:hover { transform: translate(-50%, -50%) scale(1.04); }
.vt-play i { width: 52px; height: 52px; border-radius: 50%; background: #111210; position: relative; flex: none; }
.vt-play i::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #F5F4EF; }
.vt-tag { position: absolute; left: 16px; bottom: 14px; color: #fff; background: rgba(0,0,0,.55); padding: 6px 10px; }
.vt-frame.playing .vt-play, .vt-frame.playing .vt-tag, .vt-frame.playing .vt-poster { display: none; }
.vt-side { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.vt-quote { margin: 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.03em; }
.vt-who { margin: 0; display: grid; gap: 2px; } .vt-src { margin: 0; }
video::cue { font-family: "Geist", system-ui, sans-serif; font-size: 18px; background: rgba(0,0,0,.72); }
@media (max-width: 760px) { .vt-play { padding: 8px 16px 8px 8px; } .vt-play i { width: 42px; height: 42px; } .vt-play i::after { left: 17px; top: 12px; border-width: 9px 0 9px 14px; } }
@media (max-width: 760px) { .vt-tag { display: none; } .vt-play .lbl { white-space: nowrap; font-size: 10px; } }

/* tiles (2026-11-07): product photo, logo over it, a quiet vignette so white marks read */
.tile .case-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.08) 55%, rgba(0,0,0,.42)); pointer-events: none; transition: opacity .5s; }
.tile:hover .case-media::after { opacity: .7; }
.card-logo { width: min(46%, 230px); max-height: 30%; filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(0,0,0,.35)); }
.card-mark { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; white-space: nowrap; font: 700 clamp(30px, 4.2vw, 56px)/1 var(--sans); letter-spacing: -.04em; text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 28px rgba(0,0,0,.35); }
.card-mark.serif { font: italic 400 clamp(40px, 5.6vw, 76px)/1 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: -.02em; }
.card-mark.caps { font: 500 clamp(18px, 1.9vw, 26px)/1.15 var(--sans); letter-spacing: -.01em; text-transform: uppercase; }
.card-mark.heavy { font-weight: 800; letter-spacing: -.02em; }
.your-tile .case-media::after { display: none; }
.work.g3 > .c { border-bottom: 0; }
@media (min-width: 900px) and (max-width: 1099px) { .work.g3 > .c { grid-column: span 6; } .work.g3 > .c:nth-child(2n) { border-right: 0; } .work.g3 > .c:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (min-width: 1100px) { .work.g3 > .c { grid-column: span 4; border-right: 1px solid var(--rule); } .work.g3 > .c:nth-child(3n) { border-right: 0; } .work.g3 > .c:nth-child(n+4) { border-top: 1px solid var(--rule); } }
@media (max-width: 899px) { .work.g3 > .c { border-bottom: 1px solid var(--rule); } }

/* assets from the Framer Studio page (2026-11-07): logo wall, ecosystems, ask-Adi clip */
.logo-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; } .logo-wall li { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 18px; min-width: 0; overflow: hidden; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.logo-wall li:nth-child(2n) { border-right: 0; } .logo-wall li:nth-last-child(-n+2) { border-bottom: 0; }
.logo-wall img { width: 100%; max-width: min(150px, 100%); max-height: 70%; object-fit: contain; transition: transform .5s var(--ease); } .logo-wall li:hover img { transform: scale(1.06); }
.logo-wall .lbl { position: absolute; left: 12px; top: 10px; color: var(--soft); }
@media (min-width: 700px) { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .logo-wall li:nth-child(2n) { border-right: 1px solid var(--rule); } .logo-wall li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); } .logo-wall li:nth-child(4n) { border-right: 0; } .logo-wall li:nth-last-child(-n+2) { border-bottom: 0; } }
@media (min-width: 1100px) { .logo-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } .logo-wall li { aspect-ratio: 5 / 4; } .logo-wall li:nth-child(4n) { border-right: 1px solid var(--rule); } .logo-wall li:nth-child(6n) { border-right: 0; } .logo-wall li:nth-last-child(-n+4) { border-bottom: 0; } }
.eco-wall { display: flex; flex-wrap: wrap; gap: 14px; padding: var(--pad); align-items: center; } .eco-wall li { width: 56px; height: 56px; } .eco-wall img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.ask { position: relative; background: #0C0D0C; } .ask video { display: block; width: 100%; height: 100%; aspect-ratio: 9 / 16; max-height: 560px; object-fit: cover; }
.ask-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 14px var(--pad); background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; pointer-events: none; } .ask-cap .lbl { color: #ccc; } .ask-cap b { font-weight: 500; font-size: 20px; } .ask-cap a { pointer-events: auto; color: #fff; border-color: #fff; justify-self: start; }

/* the Brand Lab (2026-11-07): the method page as an instrument you play */
.lab { display: grid; } .lab-side { position: relative; } .lab-main { min-width: 0; }
@media (min-width: 1000px) { .lab { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .lab-side { border-left: 1px solid var(--rule); } .lab-stick { position: sticky; top: var(--hdr); } }
.inst { background: #0C0D0C; color: #F5F4EF; display: flex; flex-direction: column; } .inst .world { min-height: 280px; height: clamp(280px, 36vh, 420px); flex: none; }
.inst-top { display: flex; justify-content: space-between; gap: 12px; padding: 10px var(--pad); border-bottom: 1px solid #3A3B38; } .inst-top .lbl { color: #A9AAA3; } .inst-top b { color: #F5F4EF; font-weight: 500; }
.meters { display: grid; gap: 10px; padding: 14px var(--pad); border-top: 1px solid #3A3B38; } .meter { display: grid; grid-template-columns: 58px 1fr 34px; gap: 10px; align-items: center; font: 500 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #A9AAA3; }
.meter i { display: block; height: 8px; background: #1F201E; position: relative; overflow: hidden; } .meter i::after { content: ""; position: absolute; inset: 0; background: #F5F4EF; transform: scaleX(var(--v, 0)); transform-origin: 0 50%; transition: transform .9s var(--ease); } .meter b { color: #F5F4EF; font-weight: 500; text-align: right; }
.meter.total { grid-template-columns: 58px 1fr 54px; padding-top: 10px; border-top: 1px solid #3A3B38; } .meter.total b { font: 500 22px/1 var(--sans); letter-spacing: -.03em; }
.inst-read { padding: 10px var(--pad); border-top: 1px solid #3A3B38; font: 500 10.5px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #A9AAA3; min-height: 38px; }
.inst-read b { color: #F5F4EF; font-weight: 500; }
@media (max-width: 999px) { .inst .world { height: 220px; min-height: 0; } .meters { grid-template-columns: 1fr 1fr; } .meter.total { grid-column: 1 / -1; } }

/* factor cards: flip to discover */
.deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 700px) { .deck { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; aspect-ratio: 4 / 5; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); perspective: 900px; cursor: pointer; background: none; text-align: left; padding: 0; font: inherit; }
.card:nth-child(2n) { border-right: 0; } @media (min-width: 700px) { .card:nth-child(2n) { border-right: 1px solid var(--rule); } .card:nth-child(4n) { border-right: 0; } }
.card-in { position: absolute; inset: 0; transition: transform .7s var(--ease); transform-style: preserve-3d; } .card.on .card-in { transform: rotateY(180deg); }
.card-f, .card-b { position: absolute; inset: 0; padding: var(--pad); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.card-f { background: var(--paper); } .card-f .card-n { font-size: clamp(40px, 5vw, 72px); line-height: .9; letter-spacing: -.05em; font-weight: 500; color: var(--tint); transition: color .3s; } .card:hover .card-f .card-n { color: var(--soft); }
.card-b { background: var(--ink); color: var(--paper); transform: rotateY(180deg); } .card-b h4 { margin: 0; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.025em; font-weight: 500; } .card-b p { margin: 0; font-size: 14px; color: #CFCFC8; } .card-b .lbl { color: #A9AAA3; }
.card.on .card-f { pointer-events: none; } .deck-count b { font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .card-in { transition: none; } }

/* the self-check as a sequence */
.ix.wiz .ix-q { display: none; } .ix.wiz .ix-q.now { display: grid; padding: clamp(24px, 3vw, 44px) var(--pad); border-right: 0; min-height: 300px; align-content: center; gap: 22px; }
.ix.wiz .ix-q.now .ix-s { font-size: clamp(26px, 3vw, 44px); line-height: 1.05; letter-spacing: -.035em; } .ix.wiz .ix-opts { gap: 6px; } .ix.wiz .ix-opt { max-width: 92px; } .ix.wiz .ix-opt span { height: 56px; font-size: 18px; }
.ix-scale { display: flex; justify-content: space-between; font: 500 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--soft); max-width: 484px; }
.wiz-bar { display: flex; gap: 3px; padding: 12px var(--pad); border-bottom: 1px solid var(--rule); } .wiz-bar i { flex: 1; height: 4px; background: var(--tint); } .wiz-bar i.done { background: var(--ink); } .wiz-bar i.now { background: var(--soft); }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px var(--pad); border-top: 1px solid var(--rule); } .wiz-nav button.q { cursor: pointer; }
.ix-out.show .ix-total { animation: pop .8s var(--ease); } @keyframes pop { from { transform: translateY(12px); opacity: 0; } }
.ix-out .ix-total { font-variant-numeric: tabular-nums; }

/* build: unlocks in order */
.steps { display: grid; } .step { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; padding: 18px var(--pad); border-bottom: 1px solid var(--rule); transition: opacity .5s; } .step:last-child { border-bottom: 0; }
.step .n2 { font-size: 28px; letter-spacing: -.04em; font-weight: 500; color: var(--soft); } .step p { margin: 4px 0 0; color: var(--soft); max-width: 60ch; } .step h3 { margin: 0; }
.step.locked { opacity: .38; } .step.locked .step-go { visibility: hidden; } .step.open .n2 { color: var(--ink); } .step .step-go { white-space: nowrap; }
.step.done .n2::after { content: " ✓"; }
@media (max-width: 600px) { .step { grid-template-columns: 40px 1fr; } .step .step-go { grid-column: 2; justify-self: start; } }
.lab-unlock { padding: var(--pad); border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; } .lab-unlock.hidden { display: none; }
@media (max-width: 999px) { .lab-side { order: -1; border-bottom: 1px solid var(--rule); } }

/* hero (2026-11-07): one visual, edge to edge, the headline over it */
.hero-xl { position: relative; min-height: min(88vh, 940px); background: #0C0D0C; color: #F5F4EF; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.hero-xl .world { position: absolute; inset: 0; min-height: 0; height: auto; } .hero-xl .world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,13,12,.78) 0%, rgba(12,13,12,.25) 45%, rgba(12,13,12,0) 70%), linear-gradient(180deg, rgba(12,13,12,.35), rgba(12,13,12,0) 30%, rgba(12,13,12,.55) 100%); pointer-events: none; }
.hero-xl .world canvas, .hero-xl .world-still { z-index: 0; } .hero-xl .world::after { z-index: 1; } .hero-xl .world-labels { z-index: 2; }
.hx-top, .hx-body, .hx-casc { position: relative; z-index: 3; }
.hx-top { display: flex; justify-content: space-between; gap: 14px; padding: 12px var(--pad); border-bottom: 1px solid rgba(245,244,239,.18); } .hx-top .lbl { color: #CFCFC8; }
.hx-body { padding: clamp(40px, 7vw, 120px) var(--pad) clamp(22px, 3vw, 40px); display: grid; gap: clamp(24px, 3vw, 44px); }
.hx-h1 { font-size: clamp(52px, 8.6vw, 156px); line-height: .9; letter-spacing: -.06em; max-width: 11ch; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hx-foot { display: grid; gap: 22px; } @media (min-width: 900px) { .hx-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; } }
.hx-sub { max-width: 40ch; color: #E6E5DF; margin: 0; }
.hero-xl .btn { background: #F5F4EF; color: #0C0D0C; border-color: #F5F4EF; } .hero-xl .btn > i { border-left-color: rgba(12,13,12,.2); }
.hero-xl .btn.ghost { background: transparent; color: #F5F4EF; } .hero-xl .btn.ghost > i { border-left-color: #F5F4EF; } .hero-xl .btn.ghost:hover { background: #F5F4EF; color: #0C0D0C; }
.hero-xl .q { color: #F5F4EF; border-color: #F5F4EF; } .hero-xl .vh-shared { color: #F5F4EF; }
.hx-casc { border-top: 1px solid rgba(245,244,239,.18); background: rgba(12,13,12,.6); } .hx-casc li { border-left-color: rgba(245,244,239,.18); }
.hero-xl .wl { text-shadow: 0 0 6px #0C0D0C, 0 0 6px #0C0D0C; }
body.has-world .trace { background: var(--paper); }
@media (max-width: 899px) { .hero-xl { min-height: 0; } .hero-xl .world::after { background: linear-gradient(180deg, rgba(12,13,12,.1), rgba(12,13,12,.1) 36%, rgba(12,13,12,.92) 62%); } .hx-body { padding-top: 46vh; } .hx-h1 { font-size: clamp(44px, 12.4vw, 72px); max-width: none; } }
.hero-xl { overflow: hidden; } .hero-xl .world-labels { overflow: hidden; } .hx-top { flex-wrap: wrap; } .hx-top .lbl { min-width: 0; }
@media (max-width: 899px) { .hx-h1 { font-size: clamp(40px, 11.2vw, 72px); } }

/* gallery behaviour (2026-11-07): hover slideshow with dots, chips that glide, cards that arrive in sequence */
.case-media .slides { position: absolute; inset: 0; z-index: 1; } .case-media .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; } .case-media .slide.on { opacity: 1; }
.case-media .dots { position: absolute; left: 50%; bottom: 12px; z-index: 3; display: flex; gap: 5px; transform: translateX(-50%); opacity: 0; transition: opacity .3s; } .tile:hover .dots, .tile.playing .dots { opacity: 1; }
.case-media .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background .3s, transform .3s; } .case-media .dots i.on { background: #fff; transform: scale(1.25); }
.tile.playing .card-logo, .tile.playing .card-mark { opacity: 0; transform: translate(-50%, -50%) scale(.96); } .card-logo, .card-mark { transition: opacity .4s, transform .5s var(--ease); }
.tile .case-media::after { z-index: 2; }
.filters { position: relative; } .filter { position: relative; z-index: 1; transition: color .25s, border-color .25s; } .filter.on { background: transparent; color: var(--paper); border-color: transparent; }
.filter-glide { position: absolute; left: 0; top: 0; width: 0; height: 0; background: var(--ink); transition: transform .45s var(--ease), width .45s var(--ease), height .45s var(--ease); transform: translate(var(--x, 0), var(--y, 0)); z-index: 0; }
.js .tile.rv { transition-delay: var(--d, 0ms); } .js .tile.rv:not(.in) { transform: translateY(22px) scale(.985); }
@media (prefers-reduced-motion: reduce) { .case-media .slide, .filter-glide { transition: none; } }

/* films from the Framer site (2026-11-07): the ink loop behind the About opening, the social reel in its service */
.film-hero { position: relative; min-height: min(70vh, 720px); background: #0C0D0C; color: #F5F4EF; display: flex; align-items: flex-end; overflow: hidden; }
.film-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; filter: grayscale(1); }
.film-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,12,.15), rgba(12,13,12,.75)); }
.film-in { position: relative; z-index: 1; display: grid; gap: 14px; padding: clamp(40px, 7vw, 110px) var(--pad) clamp(28px, 4vw, 50px); max-width: 1100px; } .film-in .lead { color: #E6E5DF; max-width: 52ch; }
.thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/* ===================== Signal (2026-11-07): dark, cinematic, colour and motion ===================== */
body { background: #07070A; }
.aurora { position: fixed; inset: -20%; z-index: 0; pointer-events: none; opacity: .55; filter: saturate(1.2); }
.aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; mix-blend-mode: screen; opacity: .5; will-change: transform; }
.aurora i:nth-child(1) { left: -10%; top: -10%; background: radial-gradient(closest-side, var(--c1), transparent 70%); animation: drift1 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { right: -15%; top: 20%; background: radial-gradient(closest-side, var(--c2), transparent 70%); animation: drift2 32s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { left: 30%; bottom: -25%; background: radial-gradient(closest-side, var(--c3), transparent 70%); animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vw, 14vh) scale(1.15); } } @keyframes drift2 { to { transform: translate(-16vw, 10vh) scale(.9); } } @keyframes drift3 { to { transform: translate(-10vw, -18vh) scale(1.1); } }
main, .ftr, .hdr { position: relative; z-index: 1; }
.hdr { background: rgba(7,7,10,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--rule); }
.wordmark { filter: none; } .nav .nav-cta { background: var(--ink); color: #07070A; } .menu, .menu-in { background: #07070A; }
.sheet { border-color: var(--rule); } .row, .c { border-color: var(--rule); }
.lbl { color: var(--c2); } .lbl.muted, .muted.lbl { color: var(--soft); }
.h1 em, .hero-h1 em { font-style: normal; background: linear-gradient(90deg, var(--c2), var(--c1) 55%, var(--c3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn { background: var(--ink); color: #07070A; border-color: var(--ink); } .btn > i { border-left-color: rgba(7,7,10,.2); }
.btn.glow { box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 0 40px rgb(from var(--c1) r g b / .55), 0 0 90px rgb(from var(--c2) r g b / .25); } .btn.glow:hover { box-shadow: 0 0 0 1px #fff, 0 0 60px rgb(from var(--c1) r g b / .8), 0 0 120px rgb(from var(--c2) r g b / .4); }
.btn.ghost { background: rgba(255,255,255,.04); color: var(--ink); border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px); } .btn.ghost > i { border-left-color: rgba(255,255,255,.28); } .btn.ghost:hover { background: var(--ink); color: #07070A; }
.q { border-color: rgba(255,255,255,.4); }
.tile .case-media { background: #111118; } .tile { transition: transform .5s var(--ease); } .tile:hover { transform: translateY(-4px); } .tile:hover .case-media::after { box-shadow: inset 0 0 0 1px rgb(from var(--c1) r g b / .6), inset 0 0 120px rgb(from var(--c1) r g b / .25); }
.acc summary:hover { background: rgba(255,255,255,.05); } .state::before { color: var(--soft); } .is-lit .state::before { color: var(--c4); }
.door { background: linear-gradient(135deg, rgb(from var(--c1) r g b / .25), rgb(from var(--c2) r g b / .12)); color: var(--ink); border: 1px solid rgba(255,255,255,.12); } .door + .door { background: linear-gradient(135deg, rgb(from var(--c3) r g b / .25), rgba(255,179,71,.12)); } .door:hover { background: #fff; color: #07070A; } .door .lbl { color: inherit; }
.your-tile .case-media { background: linear-gradient(135deg, var(--c1), var(--c2) 60%, var(--c4)); color: #07070A; } .your-in .lbl { color: #07070A; }
.panel, .inst, .scope, .ask, .film-hero, .rf-stage, .hero-xl { background: #0A0A10; } .panel-top, .inst-top, .meters, .inst-read, .scope-top, .scope-read { border-color: var(--rule); }
.casc li { border-left-color: var(--rule); } .casc li.is-on { background: var(--c2); color: #07070A; }
.meter i { background: rgba(255,255,255,.1); } .meter i::after { background: linear-gradient(90deg, var(--c2), var(--c1)); } .meter.total i::after { background: linear-gradient(90deg, var(--c4), var(--c2)); }
.card-f { background: #0A0A10; } .card-b { background: linear-gradient(160deg, var(--c1), var(--c2)); color: #07070A; } .card-b p, .card-b .lbl { color: rgba(7,7,10,.75); } .card-f .card-n { color: rgba(255,255,255,.08); } .card:hover .card-f .card-n { color: rgba(255,255,255,.3); }
.ix-opt input:checked + span { background: var(--c2); border-color: var(--c2); color: #07070A; } .ix-track { background: rgba(255,255,255,.1); } .ix-track i { background: linear-gradient(90deg, var(--c2), var(--c1)); }
.step.open .n2 { color: var(--c2); } .filter.on { color: #07070A; } .filter-glide { background: var(--c2); }
.trace { background: #07070A; border-bottom-color: var(--rule); } .trace i { background: var(--c2); } .heat { background-color: rgba(124,92,255,var(--h,0)); }
.node-tip, .play-toast, .dock, .rb-note .rb-dot { background: var(--ink); color: #07070A; } .rb-note .rb-dot { background: var(--c4); }
.cred-logo { background: #fff; } .logo-wall img { filter: invert(1) hue-rotate(180deg); } .logo-wall li:hover img { filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 12px rgb(from var(--c2) r g b / .7)); }
.v-q-logo img { filter: brightness(0) invert(1); } .author-face.mark { filter: none; }
.ftr { background: #07070A; } .ftr-mark { filter: none; }
.inv .btn { background: #0B0B10; color: #F3F3F7; border-color: #0B0B10; } .inv .lbl { color: #5C5C6E; } .inv .q { border-color: rgba(11,11,16,.5); }
.actionbar { background: rgba(7,7,10,.85); backdrop-filter: blur(12px); border-color: var(--rule); } .ab-main { background: var(--ink); color: #07070A; }
.n { background: linear-gradient(180deg, #fff, rgba(255,255,255,.65)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-casc li.is-on { background: var(--c2); color: #07070A; }
.rf { background: #07070A; } .rf-opt { background: rgba(255,255,255,.04); } .rf-opt:hover { background: var(--ink); color: #07070A; } .rf-bar { background: rgba(255,255,255,.12); } .rf-bar i { background: var(--c2); }
.fld input, .fld textarea { border-bottom-color: rgba(255,255,255,.3); } .chip span { border-color: rgba(255,255,255,.3); } .chip input:checked + span { background: var(--c2); border-color: var(--c2); color: #07070A; }
.inv .fld input, .inv .fld textarea { border-bottom-color: rgba(11,11,16,.35); color: #0B0B10; } .inv .chip span { border-color: rgba(11,11,16,.35); } .inv .chip input:checked + span { background: #0B0B10; color: #F3F3F7; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c4); margin-right: 8px; box-shadow: 0 0 10px var(--c4); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(from var(--c4) r g b / .6); } 70% { box-shadow: 0 0 0 9px rgb(from var(--c4) r g b / 0); } }

/* hero: the work itself, cinematic, with the aurora behind */
.hero-nx { position: relative; min-height: min(92vh, 980px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #fff; }
.nx-montage { position: absolute; inset: 0; z-index: 0; } .nx-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 9s linear; } .nx-slide.on { opacity: 1; transform: scale(1); }
.nx-montage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,10,.86) 0%, rgba(7,7,10,.45) 50%, rgba(7,7,10,.15) 100%), linear-gradient(180deg, rgba(7,7,10,.5), rgba(7,7,10,0) 35%, rgba(7,7,10,.85) 100%); }
.nx-aurora { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .7; } .nx-aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; }
.nx-aurora i:nth-child(1) { left: -20%; bottom: -30%; background: radial-gradient(closest-side, rgb(from var(--c1) r g b / .7), transparent 70%); animation: drift1 24s ease-in-out infinite alternate; }
.nx-aurora i:nth-child(2) { right: -25%; top: -30%; background: radial-gradient(closest-side, rgb(from var(--c2) r g b / .55), transparent 70%); animation: drift2 30s ease-in-out infinite alternate; }
.nx-aurora i:nth-child(3) { left: 35%; top: 30%; width: 40vmax; height: 40vmax; background: radial-gradient(closest-side, rgb(from var(--c3) r g b / .45), transparent 70%); animation: drift3 28s ease-in-out infinite alternate; }
.nx-top, .nx-body, .ticker { position: relative; z-index: 2; }
.nx-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 14px var(--pad); border-bottom: 1px solid rgba(255,255,255,.14); } .nx-top .lbl { color: #fff; }
.nx-body { padding: clamp(40px, 8vw, 130px) var(--pad) clamp(26px, 3vw, 44px); display: grid; gap: clamp(26px, 3vw, 48px); }
.nx-h1 { font-size: clamp(54px, 9vw, 164px); line-height: .9; letter-spacing: -.06em; max-width: 11ch; margin: 0; text-shadow: 0 2px 40px rgba(0,0,0,.6); }
.nx-foot { display: grid; gap: 22px; } @media (min-width: 900px) { .nx-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; } }
.nx-sub { max-width: 40ch; color: #E8E8EF; margin: 0; } .hero-nx .q { color: #fff; border-color: rgba(255,255,255,.5); }
.ticker { border-top: 1px solid rgba(255,255,255,.14); background: rgba(7,7,10,.55); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-in { display: flex; width: max-content; animation: tick 60s linear infinite; } .ticker span { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 13px 0; white-space: nowrap; } .ticker i { font-style: normal; color: var(--c2); padding: 13px 22px; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (max-width: 899px) { .hero-nx { min-height: 0; } .nx-body { padding-top: 40vh; } .nx-h1 { font-size: clamp(42px, 12vw, 72px); max-width: none; } .nx-montage::after { background: linear-gradient(180deg, rgba(7,7,10,.2), rgba(7,7,10,.2) 30%, rgba(7,7,10,.92) 60%); } }
@media (prefers-reduced-motion: reduce) { .aurora i, .nx-aurora i, .ticker-in, .live-dot { animation: none; } .nx-slide { transition: none; } }
html.calm .aurora i, html.calm .nx-aurora i, html.calm .ticker-in { animation: none; }

/* VERSEATILE essence (2026-11-07): black, white, the lime highlighter, the iris. Colour comes from the work and the eye. */
.aurora { opacity: .28; } .aurora i:nth-child(1) { background: radial-gradient(closest-side, var(--c3), transparent 70%); } .aurora i:nth-child(2) { background: radial-gradient(closest-side, var(--c1), transparent 70%); } .aurora i:nth-child(3) { background: radial-gradient(closest-side, #FF7A18, transparent 70%); }
.nx-iris { position: absolute; inset: 0; z-index: 0; background: #000; } .nx-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.nx-iris::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.85) 0%, rgba(5,5,5,.35) 45%, rgba(5,5,5,.05) 75%), linear-gradient(180deg, rgba(5,5,5,.55), rgba(5,5,5,0) 30%, rgba(5,5,5,.9) 100%); }
.nx-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; mix-blend-mode: screen; pointer-events: none; }
.hero-nx { background: #050505; }
.hl { display: inline-block; padding: 0 .06em; margin: 0 -.02em; color: #050505; background: linear-gradient(var(--c1), var(--c1)) no-repeat 0 50% / 0% 90%; transition: background-size 1.1s var(--ease) .35s, color .3s ease .7s; color: #fff; }
.hl.in { background-size: 100% 90%; color: #050505; }
html.calm .hl, html.calm .hl.in { background-size: 100% 90%; color: #050505; transition: none; }
.h1 em, .hero-h1 em { background: none; color: var(--c1); }
.btn.glow { box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 0 36px rgb(from var(--c1) r g b / .45); } .btn.glow:hover { box-shadow: 0 0 0 1px #fff, 0 0 60px rgb(from var(--c1) r g b / .7); }
.card-b { background: var(--c1); color: #050505; } .card-b p, .card-b .lbl { color: rgba(5,5,5,.72); }
.door { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); } .door + .door { background: rgba(199,255,151,.08); } .door:hover { background: var(--c1); color: #050505; }
.your-tile .case-media { background: var(--c1); color: #050505; } .your-in .lbl { color: #050505; }
.meter i::after, .ix-track i { background: var(--c1); } .meter.total i::after { background: #fff; }
.tile:hover .case-media::after { box-shadow: inset 0 0 0 1px rgb(from var(--c1) r g b / .7), inset 0 0 100px rgb(from var(--c1) r g b / .18); }
.nav .nav-cta { background: var(--c1); color: #050505; } .btn { background: #fff; color: #050505; border-color: #fff; } .btn:hover { background: var(--c1); border-color: var(--c1); }
.filter-glide, .casc li.is-on, .hx-casc li.is-on, .ix-opt input:checked + span, .chip input:checked + span { background: var(--c1); color: #050505; }
.live-dot { background: var(--c1); box-shadow: 0 0 10px var(--c1); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(199,255,151,.6); } 70% { box-shadow: 0 0 0 9px rgba(199,255,151,0); } }
.ticker i { color: var(--c1); } .lbl { color: var(--c1); } .lbl.muted, .muted.lbl { color: var(--soft); } .step.open .n2 { color: var(--c1); } .is-lit .state::before { color: var(--c1); }
.tbl.four { display: grid; } @media (min-width: 900px) { .tbl.four { grid-template-columns: repeat(4, 1fr); } .tbl.four > li { border-bottom: 0; border-right: 1px solid var(--rule); } .tbl.four > li:last-child { border-right: 0; } }