/* PHASECRAFT — shared stylesheet for index.html and production.html.
Single source of truth: edit here, both pages follow. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg: #080B0F;
--bg2: #0C1016; /* raised surface — warmer, for organisation/company bands */
--panel: #10151C; /* card surface */
--surface:rgba(184,148,63,.04);
--border: rgba(184,148,63,.13);
--border2:rgba(237,240,244,.10);
--accent: #C9A24D; /* gold, lifted for contrast on dark */
--accent-d:#B8943F;
--a2: #6FA3C0; /* PHASEFLOW accent — lifted blue */
--text: #EDF0F4;
--muted: rgba(237,240,244,.74);
--dim: rgba(237,240,244,.46);
--mono: 'JetBrains Mono','Fira Mono','Courier New',monospace;
--sans: -apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;
--maxw: 1180px;
}
html{scroll-behavior:smooth}
body{
background:var(--bg);color:var(--text);
font-family:var(--sans);font-size:17px;line-height:1.7;
overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
/* ── Accessibility base ──────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--accent);color:#0A0D12;
padding:12px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:104px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important}
#wbg,#spotlight,#cur-ring{display:none!important}
[data-r]{opacity:1!important;transform:none!important}
}
/* ── Layout ──────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
.pad{padding:104px 0}
.band{background:var(--bg2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
.hr{height:1px;background:var(--border2)}
/* ── Type ────────────────────────────────────── */
.eye{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.eye::before{content:attr(data-n);color:var(--dim)}
.eye::after{content:'';flex:1;height:1px;background:var(--border2);max-width:80px}
.h1{font-size:clamp(38px,6.2vw,74px);font-weight:300;line-height:1.04;letter-spacing:-.028em}
.h2{font-size:clamp(28px,3.7vw,44px);font-weight:300;line-height:1.14;letter-spacing:-.022em}
.h3{font-size:21px;font-weight:400;letter-spacing:-.01em;color:var(--text)}
em{font-style:normal;color:var(--accent)}
.body-t{font-size:17px;line-height:1.78;color:var(--muted)}
.lead{font-size:19px;line-height:1.7;color:var(--muted)}
.small{font-size:15px;line-height:1.7;color:var(--muted)}
.mono-l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
/* ── Buttons — deliberately obvious ──────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.01em;
padding:14px 28px;border:1px solid var(--accent);background:var(--accent);color:#0A0D12;
text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.btn:hover{background:#DCB65E;border-color:#DCB65E}
.btn:active{transform:translateY(1px)}
.btn-2{display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--sans);font-size:15px;font-weight:500;
padding:14px 28px;border:1px solid var(--border);background:transparent;color:var(--text);
text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
.btn-2:hover{border-color:var(--accent);background:var(--surface)}
.btn-s{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--border);
color:var(--muted);text-decoration:none;background:transparent;cursor:pointer;transition:all .2s}
.btn-s:hover{border-color:var(--accent);color:var(--text)}
.btn-s[aria-disabled="true"],.btn-s.pending{color:var(--dim);cursor:default;border-style:dashed}
.btn-s[aria-disabled="true"]:hover,.btn-s.pending:hover{border-color:var(--border);color:var(--dim)}
.link-a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(201,162,77,.4);
transition:border-color .2s}
.link-a:hover{border-color:var(--accent)}
/* ── Chrome: cursor, spotlight, bg, progress ─── */
#cur-ring{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid rgba(201,162,77,.34);
border-radius:50%;pointer-events:none;z-index:9999;transition:width .2s,height .2s,border-color .2s}
#spotlight{position:fixed;pointer-events:none;z-index:1;width:620px;height:620px;border-radius:50%;
background:radial-gradient(circle,rgba(201,162,77,.045) 0%,transparent 68%);transform:translate(-50%,-50%)}
#wbg{position:fixed;inset:0;z-index:0;pointer-events:none}
#prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--border2);z-index:300}
#prog-bar{height:100%;width:0;background:var(--accent)}
@media(hover:none){#cur-ring,#spotlight{display:none}}
/* ── Announce + Nav ──────────────────────────── */
.announce{position:fixed;top:0;left:0;right:0;z-index:200;height:38px;
display:flex;align-items:center;justify-content:center;gap:10px;
background:#0A0E13;border-bottom:1px solid var(--border2);
font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);padding:0 16px}
.announce strong{color:var(--accent);font-weight:500}
.announce a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--border)}
.adot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:dp 2.6s infinite;flex-shrink:0}
@keyframes dp{0%,100%{opacity:1}50%{opacity:.28}}
nav{position:fixed;top:38px;left:0;right:0;z-index:100;display:flex;align-items:center;
justify-content:space-between;padding:0 48px;height:62px;
transition:background .35s,-webkit-backdrop-filter .35s,backdrop-filter .35s,border-color .35s;
border-bottom:1px solid transparent}
nav.stuck{background:rgba(8,11,15,.92);-webkit-backdrop-filter:blur(24px);
backdrop-filter:blur(24px);border-color:var(--border2)}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo-mark{width:21px;height:21px;color:var(--accent);flex-shrink:0}
.logo-wm{height:12px;width:auto;display:block;opacity:.95}
.nav-right{display:flex;align-items:center;gap:30px}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links a{font-size:14px;font-weight:450;color:var(--muted);text-decoration:none;
padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--text);border-color:var(--accent)}
.nav-cta{font-family:var(--sans);font-size:14px;font-weight:500;padding:10px 20px;
border:1px solid var(--accent);color:var(--accent);text-decoration:none;
transition:background .2s,color .2s;white-space:nowrap}
.nav-cta:hover{background:var(--accent);color:#0A0D12}
.nav-toggle{display:none;background:transparent;border:1px solid var(--border);
color:var(--text);padding:9px 13px;font-family:var(--mono);font-size:11px;
letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
/* Mobile drawer — explicit menu, never a horizontal scroll */
#mobile-menu{position:fixed;inset:100px 0 0;z-index:150;background:rgba(8,11,15,.985);
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
padding:26px 28px 40px;overflow-y:auto;display:none}
#mobile-menu.open{display:block}
#mobile-menu ul{list-style:none;display:flex;flex-direction:column}
#mobile-menu a{display:block;padding:17px 0;font-size:19px;color:var(--text);
text-decoration:none;border-bottom:1px solid var(--border2)}
#mobile-menu .btn{width:100%;margin-top:26px}
body.menu-open{overflow:hidden}
/* ── Hero ────────────────────────────────────── */
/* 100vh first as the fallback: browsers without svh keep a working hero
instead of collapsing to auto height. */
#hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
padding:150px 48px 90px;position:relative;overflow:hidden;max-width:var(--maxw);margin:0 auto}
#hero>*{position:relative;z-index:1}
.hero-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
color:var(--accent);margin-bottom:26px;display:flex;align-items:center;gap:12px}
.hero-eyebrow::before{content:'';display:block;width:26px;height:1px;background:var(--accent)}
.hero-sub{margin-top:26px;color:var(--muted);font-size:19px;max-width:610px;line-height:1.72}
.hero-cta{margin-top:38px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-chips{margin-top:44px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
padding:7px 14px;border:1px solid var(--border2);color:var(--muted);border-radius:2px}
.chip.gold{border-color:var(--border);color:var(--accent)}
/* ── Thesis band ─────────────────────────────── */
.thesis{padding:74px 0}
.thesis p{font-size:clamp(19px,2.3vw,26px);line-height:1.62;font-weight:300;
max-width:920px;color:var(--text)}
.thesis em{color:var(--accent)}
/* ── Products ─────────────────────────────────────────────────────
Same interaction as the Research Lab: clicking a product opens it
wide and pushes the other into a vertical sliver. The whole grid is
sized to the viewport so nothing needs scrolling to read. */
.prod-hint{margin-top:40px;color:var(--dim)}
/* ⚠️ Which track widens depends on which card was opened. A single
`has-focus{5fr 1fr}` gave the narrow column to PHASEFLOW and the wide one
to TAKEBOX's sliver. Each card keeps its own side. */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border2);
margin-top:14px;height:clamp(430px,calc(100vh - 230px),730px)}
/* ⚠️ The grid also carries data-r for the scroll reveal, and [data-r] declares
its own transition at equal specificity later in this file — which silently
replaced the column transition and made the expand snap. Both are declared
together here, at higher specificity, so neither clobbers the other. */
.prod-grid[data-r]{transition:opacity .7s cubic-bezier(.16,1,.3,1),
transform .7s cubic-bezier(.16,1,.3,1),
grid-template-columns .5s cubic-bezier(.22,1,.36,1)}
.prod-grid.focus-first {grid-template-columns:5fr 1fr}
.prod-grid.focus-second{grid-template-columns:1fr 5fr}
/* rows: the body takes the slack, the "open me" cue is pinned to the bottom
so it is never the thing that gets pushed out of a height-capped card.
cols: the detail track is 0fr when closed and animates open, which is what
makes it slide rather than snap. */
.prod-card{background:var(--panel);border-top:2px solid var(--pa,var(--accent));
padding:30px 28px;position:relative;overflow:hidden;cursor:pointer;
display:grid;grid-template-columns:1fr 0fr;grid-template-rows:1fr auto;
column-gap:0;
transition:background .25s,grid-template-columns .5s cubic-bezier(.22,1,.36,1),
column-gap .5s cubic-bezier(.22,1,.36,1)}
.prod-card:hover{background:#131922}
.prod-card:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.prod-main{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.prod-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.prod-name{font-size:23px;font-weight:500;letter-spacing:.03em;color:var(--pa,var(--accent))}
.prod-status{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
padding:6px 11px;border:1px solid var(--border2);color:var(--muted);white-space:nowrap}
.prod-status.ready{border-color:var(--pa,var(--accent));color:var(--pa,var(--accent))}
.prod-problem{font-size:16px;line-height:1.6;color:var(--text);margin-bottom:14px}
/* The screenshot takes the slack, so the card always fills its height
without the text being pushed off the bottom. */
.prod-shot{border:1px solid var(--border2);background:#0A0E13;flex:1 1 auto;min-height:0;overflow:hidden}
.prod-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.prod-body{font-size:14px;color:var(--muted);line-height:1.68;margin-top:16px;flex:0 0 auto;
display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.prod-card.is-open .prod-body{-webkit-line-clamp:unset;overflow:visible}
.prod-open-cue{margin-top:16px;padding-top:14px;border-top:1px solid var(--border2);
font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);flex:0 0 auto}
.prod-card:hover .prod-open-cue{color:var(--pa,var(--accent))}
/* ── Open state: detail arrives in a second column on the right ── */
.prod-detail-in{grid-column:2;grid-row:1/-1;min-width:0;min-height:0;
overflow:hidden;opacity:0;visibility:hidden;
transition:opacity .28s ease,visibility 0s linear .5s}
.prod-card.is-open{grid-template-columns:1fr 1fr;column-gap:30px;cursor:default}
.prod-card.is-open .prod-detail-in{opacity:1;visibility:visible;overflow-y:auto;
padding-left:30px;padding-top:44px; /* 44px clears the close button */
border-left:1px solid var(--border2);
transition:opacity .35s ease .18s,visibility 0s}
.prod-card.is-open .prod-open-cue{display:none}
/* Open: the left column scrolls rather than clipping its last paragraph, and
the screenshot stops eating the slack it needed when the card was narrow. */
.prod-card.is-open .prod-main{overflow-y:auto;padding-right:6px}
.prod-card.is-open .prod-shot{flex:0 0 auto;height:clamp(180px,26vh,290px)}
.pd-lead{font-size:17px;line-height:1.65;color:var(--text);margin-bottom:14px}
.pd-body{font-size:14px;color:var(--muted);line-height:1.72}
.pd-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:20px}
.pd-list li{font-size:14px;color:var(--muted);line-height:1.6;padding-left:18px;position:relative}
.pd-list li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--pa,var(--accent))}
.pd-list strong{color:var(--text);font-weight:500}
.prod-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin-top:22px;
padding-top:18px;border-top:1px solid var(--border2);font-size:14px}
.prod-facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.prod-facts dd{color:var(--muted)}
.prod-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.pd-note{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
color:var(--muted);line-height:1.8}
/* ── Sliver: the product that was not opened ── */
.prod-collapse-hint{display:none}
.prod-card.is-open .prod-collapse-hint{display:block;position:absolute;top:14px;right:14px;
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);z-index:12;cursor:pointer;padding:7px 11px;
border:1px solid var(--border2);background:rgba(8,11,15,.8);transition:color .2s,border-color .2s}
.prod-card.is-open .prod-collapse-hint:hover{color:var(--text);border-color:var(--accent)}
/* Fading is safe here (unlike the Lab): .prod-grid has a fixed height, so
hidden-but-laid-out content is clipped by the card and cannot inflate the row. */
.prod-card.is-sliver .prod-status,.prod-card.is-sliver .prod-problem,
.prod-card.is-sliver .prod-shot,.prod-card.is-sliver .prod-body,
.prod-card.is-sliver .prod-open-cue{opacity:0;transition:opacity .22s ease;pointer-events:none}
.prod-card.is-sliver .prod-detail-in{opacity:0;visibility:hidden}
.prod-card.is-sliver .prod-head{margin:0}
.prod-card.is-sliver .prod-name{writing-mode:vertical-rl;transform:rotate(180deg);
font-size:17px;color:var(--dim);transition:color .2s;white-space:nowrap}
.prod-card.is-sliver:hover .prod-name{color:var(--pa,var(--accent))}
/* ── Working with PHASECRAFT ─────────────────── */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.sol{background:var(--panel);border:1px solid var(--border2);padding:30px 26px;display:flex;flex-direction:column}
.sol-n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent);margin-bottom:16px}
.sol h3{font-size:19px;font-weight:450;margin-bottom:12px;color:var(--text)}
.sol p{font-size:15px;color:var(--muted);line-height:1.72;flex:1}
.sol ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.sol li{font-size:14px;color:var(--muted);padding-left:16px;position:relative}
.sol li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:1px;background:var(--accent)}
.state-key{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:26px;border-top:1px solid var(--border2)}
.state{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
padding:7px 13px;border:1px solid var(--border2);color:var(--muted)}
.state b{color:var(--accent);font-weight:500}
/* ── Experience / work ───────────────────────── */
.wfeat{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.wfc{background:var(--panel);border:1px solid var(--border2);position:relative;overflow:hidden;min-height:196px}
.wfc-inner{position:relative;z-index:2;padding:28px 26px}
.wfc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.wfc-badge{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--accent);border:1px solid var(--border);padding:4px 10px}
.wfc-type{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim)}
.wfc-title{font-size:22px;font-weight:400;margin-bottom:9px}
.wfc-role{font-size:14px;color:var(--muted);line-height:1.62}
.wfc-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--dim);margin-top:18px}
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border2);margin-top:22px}
.wcard{background:var(--bg);padding:22px 24px;display:flex;align-items:flex-start;
justify-content:space-between;gap:20px;position:relative;overflow:hidden;transition:background .25s}
.wcard:hover{background:#0E131A}
.wcard-in{position:relative;z-index:2}
.wcard-t{font-size:16px;font-weight:400;margin-bottom:5px}
.wcard-r{font-size:14px;color:var(--muted);line-height:1.6}
.wcard-type{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--dim);white-space:nowrap;position:relative;z-index:2}
/* Posters stay faintly visible by default so touch devices are not left blank. */
.wposter{position:absolute;inset:0;background-size:cover;background-position:center;
opacity:.13;z-index:1;transition:opacity .3s}
.wcard:hover .wposter,.wfc:hover .wposter{opacity:.26}
/* ── Media / listen ──────────────────────────── */
.media-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:44px}
.media-col-head{display:flex;justify-content:space-between;align-items:center;
padding-bottom:12px;border-bottom:1px solid var(--border2);margin-bottom:6px}
.media-col-type{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.media-col-src{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim)}
.trow{display:flex;align-items:center;gap:14px;width:100%;background:transparent;border:0;
border-bottom:1px solid var(--border2);padding:15px 4px;cursor:pointer;text-align:left;
font-family:var(--sans);color:var(--muted);transition:color .2s,background .2s}
.trow:hover{color:var(--text);background:var(--surface)}
.trow[aria-current="true"]{color:var(--accent)}
.trow-n{font-family:var(--mono);font-size:11px;color:var(--dim);flex-shrink:0}
.trow[aria-current="true"] .trow-n{color:var(--accent)}
.trow-t{font-size:15px;flex:1}
.trow-tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
#player-mount{margin-top:20px;min-height:60px}
#player-mount iframe{width:100%;height:120px;border:0;display:block}
.player-idle{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--dim);border:1px dashed var(--border2);padding:20px;text-align:center}
/* ── Research Lab ────────────────────────────────────────────────
Structure and class names are kept from v1 so the two working
experiments (Resonant Field, Node Synthesis Engine) run unchanged.
Text sizes are raised and the mobile layout is single-column. */
.lab-intro-note{display:flex;gap:12px;align-items:flex-start;margin-top:26px;padding:16px 18px;
border:1px solid var(--border2);background:var(--panel);max-width:640px}
.lab-intro-note .mono-l{color:var(--accent);flex-shrink:0}
.lab-intro-note p{font-size:14px;color:var(--muted);line-height:1.65}
.iproj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border2);
margin-top:44px}
/* Same trap as .prod-grid: this element carries data-r, whose transition is
declared later at equal specificity and would replace the column one. */
.iproj-grid[data-r]{transition:opacity .7s cubic-bezier(.16,1,.3,1),
transform .7s cubic-bezier(.16,1,.3,1),
grid-template-columns .45s cubic-bezier(.22,1,.36,1)}
.iproj-slot{background:var(--bg);padding:28px 26px;position:relative;min-height:250px;
display:flex;flex-direction:column;transition:background .25s}
.iproj-slot:hover{background:#0E131A}
.iproj-n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dim);margin-bottom:16px}
.iproj-tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
display:inline-block;padding:5px 10px;border:1px solid var(--border2);color:var(--muted);
margin-bottom:14px;align-self:flex-start}
.iproj-title{font-size:19px;font-weight:450;margin-bottom:10px;color:var(--text)}
.iproj-body{font-size:14px;color:var(--muted);line-height:1.72}
/* These carry full sentences, not labels: 10px + .1em tracking + --dim
measured 4.2:1, under the 4.5:1 floor. Tracking is for short caps only. */
.iproj-meta{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.iproj-meta span{font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--muted);line-height:1.7}
.iproj-meta b{color:var(--accent);font-weight:400}
.lab-try{margin-top:auto;padding-top:20px}
.iproj-corner{position:absolute;bottom:12px;right:12px;width:10px;height:10px;
border-right:1px solid var(--border);border-bottom:1px solid var(--border);opacity:.5}
/* Two experiments now. Whichever is opened takes the wide track and the other
slivers on its own side — same as the products grid, and no card jumps across. */
.iproj-grid.focus-first {grid-template-columns:5fr 1fr}
.iproj-grid.focus-second{grid-template-columns:1fr 5fr}
/* An expanded experiment sizes itself to the viewport so the whole panel is
usable without scrolling. 100vh minus the announce bar, the nav, and enough
room that the section heading above it stays on screen. */
.iproj-slot.lab-expanded{height:clamp(380px,calc(100vh - 240px),760px)}
/* Slivers follow the expanded panel's height rather than dictating it. */
.iproj-grid.focus-first .iproj-slot.lab-sliver,
.iproj-grid.focus-second .iproj-slot.lab-sliver{min-height:0;height:auto}
.iproj-collapse-hint{display:none}
.iproj-slot.lab-expanded .iproj-collapse-hint{display:block;position:absolute;top:14px;right:14px;
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);z-index:12;cursor:pointer;padding:7px 11px;
border:1px solid var(--border2);background:rgba(8,11,15,.8);transition:color .2s,border-color .2s}
.iproj-slot.lab-expanded .iproj-collapse-hint:hover{color:var(--text);border-color:var(--accent)}
/* ⚠️ display:none, NOT opacity:0. A sliver is a ~1fr column, so hidden-but-
laid-out text wraps into a ~1100px stack, sets the grid row height, and
leaves the expanded panel floating above a tall band of grid background.
That was both the "white box underneath" and the reason the panel never
fitted on screen. Taking them out of layout lets the expanded slot set
the row height. */
.iproj-slot.lab-sliver .iproj-n,.iproj-slot.lab-sliver .iproj-tag,
.iproj-slot.lab-sliver .iproj-body,.iproj-slot.lab-sliver .iproj-meta,
.iproj-slot.lab-sliver .lab-try,.iproj-slot.lab-sliver .iproj-corner,
.iproj-slot.lab-sliver .lab-desktop-only{display:none}
.iproj-slot.lab-sliver .iproj-title{writing-mode:vertical-rl;transform:rotate(180deg);
margin:0;color:var(--dim);font-size:15px;transition:color .2s}
.iproj-slot.lab-sliver:hover .iproj-title{color:var(--text)}
.iproj-slot.lab-expanded .iproj-tag,.iproj-slot.lab-expanded .lab-preview-body,
.iproj-slot.lab-expanded .iproj-meta,.iproj-slot.lab-expanded .lab-try{
opacity:0;pointer-events:none;transition:opacity .2s}
#lab01-wrap,#lab02-wrap{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;
pointer-events:none;transition:opacity .4s .15s;overflow:hidden}
.iproj-slot.lab-expanded #lab01-wrap,.iproj-slot.lab-expanded #lab02-wrap{opacity:1;pointer-events:all}
/* ⚠️ The heading sits above a full-bleed canvas. It must NOT take clicks:
they belong to the experiment underneath. Anything landing on the heading
goes to the slot instead, which collapses the panel and stops the audio.
Collapse is the top-right hint, or Escape. */
.iproj-slot.lab-expanded .iproj-n,.iproj-slot.lab-expanded .iproj-title{
position:relative;z-index:10;pointer-events:none}
#lab01-prompt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
gap:8px;border:1px solid var(--border2);font-family:var(--mono);font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:var(--muted);transition:opacity .3s;z-index:2;pointer-events:none}
.lab-prompt-slash{opacity:.4}
#lab-01.lab-active #lab01-prompt{opacity:0;pointer-events:none}
/* Full-bleed: the field is the panel, not a strip under the heading. The
title and readouts float over it with their own stacking + scrim. */
#lab01-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
opacity:0;transition:opacity .4s}
/* Scrim so the title stays readable over a busy field. */
.iproj-slot.lab-expanded#lab-01::after{content:'';position:absolute;top:0;left:0;right:0;height:96px;
background:linear-gradient(to bottom,rgba(8,11,15,.92),transparent);z-index:5;pointer-events:none}
.iproj-slot.lab-expanded#lab-01 .iproj-n,
.iproj-slot.lab-expanded#lab-01 .iproj-title{z-index:10}
#lab01-params{background:linear-gradient(to top,rgba(8,11,15,.92),transparent);
padding:14px 0 6px}
#lab-01.lab-active #lab01-canvas{opacity:1}
#lab01-params,#lab02-params{position:absolute;bottom:5px;left:16px;right:16px;display:flex;
gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .5s .2s;z-index:3}
#lab-01.lab-active #lab01-params,#lab-02.lab-active #lab02-params{opacity:1}
.lab-pl{opacity:.5;margin-right:3px}
/* ⚠️ Sits UNDER the close button, not beside it. "Click to close" is mono
uppercase with wide tracking, so its width shifts with font fallback — any
fixed `right:` offset here eventually collides with it. */
#lab01-cam-btn{position:absolute;top:56px;right:14px;z-index:11;font-family:var(--mono);font-size:10px;
letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;border:1px solid var(--border2);
color:var(--muted);background:rgba(8,11,15,.8);opacity:0;pointer-events:none;cursor:pointer;
transition:opacity .2s,color .2s,border-color .2s}
#lab-01.lab-active #lab01-cam-btn{opacity:1;pointer-events:all}
#lab-01.lab-cam-on #lab01-cam-btn{color:var(--accent);border-color:var(--accent)}
#lab02-toolbar{position:absolute;top:52px;left:0;right:0;z-index:10;display:flex;align-items:center;
gap:6px;padding:8px 14px;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);
background:var(--bg);flex-wrap:wrap}
.lab02-btn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
padding:5px 10px;border:1px solid var(--border2);color:var(--muted);background:transparent;
cursor:pointer;transition:all .18s}
.lab02-btn:hover{border-color:var(--accent);color:var(--text)}
.lab02-hint{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted);
margin-left:auto;white-space:nowrap}
#lab02-canvas{position:absolute;top:96px;left:0;right:0;bottom:86px;width:100%;display:block}
#lab02-prompt{position:absolute;inset:96px 14px 86px;display:flex;align-items:center;justify-content:center;
gap:8px;border:1px solid var(--border2);font-family:var(--mono);font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:var(--muted);transition:opacity .3s;z-index:2;pointer-events:none}
#lab-02.lab-active #lab02-prompt{opacity:0}
/* ── Team ────────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.tcard{background:var(--panel);border:1px solid var(--border2);padding:32px 30px}
.tcard-ava{width:46px;height:46px;border:1px solid var(--border);display:flex;align-items:center;
justify-content:center;font-family:var(--mono);font-size:14px;letter-spacing:.06em;
color:var(--accent);margin-bottom:22px}
.tcard-role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent);margin-bottom:9px}
.tcard-name{font-size:21px;font-weight:450;margin-bottom:16px}
.tcard-points{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:18px;
padding-bottom:18px;border-bottom:1px solid var(--border2)}
.tcard-points li{font-size:14px;color:var(--text);padding-left:16px;position:relative}
.tcard-points li::before{content:'';position:absolute;left:0;top:11px;width:7px;height:1px;background:var(--accent)}
.tcard-bio{font-size:15px;color:var(--muted);line-height:1.75}
/* ── Contact ─────────────────────────────────── */
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ct-rows{margin-top:32px;display:flex;flex-direction:column}
.crow{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--border2)}
.cl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cv{font-size:15px;color:var(--muted)}
.cv a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(201,162,77,.4)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{background:var(--panel);border:1px solid var(--border2);
color:var(--text);font-family:var(--sans);font-size:16px;padding:13px 15px;width:100%;
transition:border-color .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#form-fb{margin-top:14px;font-size:14px;min-height:20px}
.faa{margin-top:26px;display:flex;align-items:center;gap:10px;font-family:var(--mono);
font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
footer{border-top:1px solid var(--border2);padding:38px 48px;display:flex;
justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
max-width:var(--maxw);margin:0 auto}
.fl{display:flex;align-items:center;gap:11px}
.fl img{height:11px;width:auto;opacity:.8}
.fl span,.fc{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
/* ── Reveals ─────────────────────────────────── */
[data-r]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
[data-r].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.07s}[data-d="2"]{transition-delay:.14s}
[data-d="3"]{transition-delay:.21s}[data-d="4"]{transition-delay:.28s}
/* ══ RESPONSIVE ═══════════════════════════════════════════════════ */
@media(max-width:1080px){
.wrap,footer{padding-left:56px;padding-right:56px}
#hero{padding-left:56px;padding-right:56px}
nav{padding:0 56px}
.nav-links{gap:20px}
.nav-links a{font-size:13px}
.pd-cols{gap:30px}
.sol-grid{grid-template-columns:1fr;gap:18px}
}
@media(max-width:900px){
.nav-links,.nav-cta{display:none}
.nav-toggle{display:block}
/* Stacked and fully open: no expand/sliver behaviour under a finger. */
.prod-grid,.prod-grid.focus-first,.prod-grid.focus-second{
grid-template-columns:1fr!important;height:auto!important;gap:22px}
.prod-card{cursor:default;padding:26px 22px;border:1px solid var(--border2);
border-top:2px solid var(--pa,var(--accent))}
.prod-card,.prod-card.is-open{grid-template-columns:1fr!important;
grid-template-rows:auto auto!important;column-gap:0!important}
.prod-detail-in{grid-column:1!important;grid-row:auto!important;
opacity:1!important;visibility:visible!important;overflow:visible!important;
padding-left:0!important;border-left:0!important;padding-top:24px!important;
margin-top:24px;border-top:1px solid var(--border2)}
.prod-shot{flex:0 0 auto}
.prod-shot img{height:auto;object-fit:contain}
.prod-open-cue,.prod-collapse-hint,.prod-hint{display:none!important}
.team-grid,.ct-grid,.media-split,.wfeat,.wgrid{grid-template-columns:1fr}
.media-split{gap:36px}
.ct-grid{gap:44px}
.thesis p{font-size:20px}
}
@media(max-width:760px){
body{font-size:16px}
.wrap,footer{padding-left:22px;padding-right:22px}
#hero{padding:132px 22px 76px;min-height:auto}
nav{padding:0 22px;height:58px}
.pad{padding:76px 0}
.hero-sub{font-size:17px}
.hero-cta{flex-direction:column;align-items:stretch}
.hero-cta .btn,.hero-cta .btn-2{width:100%}
.prod-card{padding:26px 22px 24px}
.prod-detail{padding:28px 22px}
.pd-cols{grid-template-columns:1fr;gap:26px}
.frow{grid-template-columns:1fr;gap:0}
.thesis{padding:56px 0}
.thesis p{font-size:18px}
footer{flex-direction:column;align-items:flex-start;gap:14px}
/* ── Research Lab: one column, no expand/sliver theatre on touch ── */
.iproj-grid,.iproj-grid.focus-first,.iproj-grid.focus-second{grid-template-columns:1fr!important}
.iproj-slot{min-height:0;padding:26px 22px}
.iproj-slot.lab-expanded{min-height:0;order:0}
.iproj-slot.lab-sliver .iproj-n,.iproj-slot.lab-sliver .iproj-tag,
.iproj-slot.lab-sliver .iproj-body,.iproj-slot.lab-sliver .iproj-meta,
.iproj-slot.lab-sliver .lab-try,.iproj-slot.lab-sliver .iproj-corner{opacity:1;pointer-events:auto}
.iproj-slot.lab-sliver .iproj-title{writing-mode:horizontal-tb;transform:none;
color:var(--text);font-size:19px}
.iproj-slot.lab-expanded .iproj-tag,.iproj-slot.lab-expanded .lab-preview-body,
.iproj-slot.lab-expanded .iproj-meta,.iproj-slot.lab-expanded .lab-try{opacity:1;pointer-events:auto}
/* The canvases are pointer-and-keyboard experiments; hide rather than
present a control surface that cannot work under a finger. */
#lab01-wrap,#lab02-wrap{display:none!important}
.iproj-collapse-hint{display:none!important}
.lab-desktop-only{display:flex}
}
.lab-desktop-only{display:none;gap:10px;align-items:flex-start;margin-top:18px;
padding:13px 15px;border:1px dashed var(--border2);background:var(--surface)}
.lab-desktop-only span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
color:var(--muted);line-height:1.6}
@media(max-width:520px){
.wgrid .wcard{flex-direction:column;gap:10px}
.wcard-type{align-self:flex-start}
.lab02-hint{display:none}
.announce{font-size:10px;letter-spacing:.04em}
.announce a{display:none}
}
/* ══ Cross-arm link: Production ↔ Software ════════════════════════
The two arms are separate pages but one company. This treatment
marks a link that leaves for the other arm — visibly different
from in-page navigation, without reading as a second brand. */
.nav-alt{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav-alt:hover{color:var(--accent);border-color:var(--border)}
.nav-alt::after{content:'↗';font-size:12px;opacity:.7}
/* Cross-arm footer band — the "other half of the company" pointer */
.arm-band{border:1px solid var(--border);background:var(--panel);padding:34px 32px;
display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:64px}
.arm-band-t{font-size:21px;font-weight:400;color:var(--text);margin-bottom:7px}
.arm-band-b{font-size:15px;color:var(--muted);max-width:520px;line-height:1.7}
/* ── Stage line: what is shipped vs what is not ── */
.stage{display:flex;flex-wrap:wrap;gap:0;margin-top:34px;border:1px solid var(--border2)}
.stage div{flex:1 1 200px;padding:16px 20px;border-right:1px solid var(--border2)}
.stage div:last-child{border-right:0}
.stage b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.stage span{font-size:14px;color:var(--muted)}
/* ── Systems section ── */
.sys-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
.sys{background:var(--panel);border:1px solid var(--border2);padding:28px 26px;display:flex;flex-direction:column}
.sys-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--accent);margin-bottom:14px}
.sys h3{font-size:19px;font-weight:450;margin-bottom:10px}
.sys-p{font-size:14px;color:var(--dim);line-height:1.65;margin-bottom:12px;font-style:italic}
.sys p{font-size:15px;color:var(--muted);line-height:1.72;flex:1}
.sys .btn-s{margin-top:20px;align-self:flex-start}
/* ── Signup ── */
.signup{border:1px solid var(--border);background:var(--panel);padding:30px 32px;margin-top:56px}
.signup h3{font-size:19px;font-weight:450;margin-bottom:8px}
.signup p{font-size:15px;color:var(--muted);margin-bottom:20px;max-width:560px;line-height:1.7}
.signup form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.signup input{flex:1 1 280px;background:var(--bg);border:1px solid var(--border2);color:var(--text);
font-family:var(--sans);font-size:16px;padding:13px 15px;transition:border-color .2s}
.signup input:focus{outline:none;border-color:var(--accent)}
.signup .note{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
margin-top:14px;margin-bottom:0}
/* ── Registered-entity block ── */
.legit{display:flex;flex-wrap:wrap;gap:0;margin-top:44px;border-top:1px solid var(--border2)}
.legit div{flex:1 1 190px;padding:18px 0;padding-right:26px}
.legit b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.legit span{font-size:15px;color:var(--muted)}
@media(max-width:900px){
.sys-grid{grid-template-columns:1fr}
.arm-band{flex-direction:column;align-items:flex-start}
.stage div{border-right:0;border-bottom:1px solid var(--border2)}
.stage div:last-child{border-bottom:0}
}
@media(max-width:900px){ .nav-alt{display:none} }
/* ── Node engine keyboard ─────────────────────────────────────────
Sets the pitch of the selected OSC node. White keys are flex; black
keys are positioned over the seams, which is the standard trick. */
#lab02-keys{position:absolute;left:0;right:0;bottom:26px;height:58px;
display:flex;background:var(--bg);border-top:1px solid var(--border2);z-index:6}
#lab02-keys .k{padding:0;border:0;cursor:pointer;font:inherit;transition:background .1s}
#lab02-keys .white{flex:1;background:#E8EAEE;border-right:1px solid #B7BCC4}
#lab02-keys .white:last-of-type{border-right:0}
#lab02-keys .white:hover{background:#F6F7F9}
#lab02-keys .white[aria-pressed="true"]{background:var(--accent)}
#lab02-keys .black{position:absolute;top:0;width:14px;height:60%;background:#14181F;
border:1px solid #000;border-top:0;z-index:2}
#lab02-keys .black:hover{background:#242A34}
#lab02-keys .black[aria-pressed="true"]{background:var(--accent-d)}
#lab02-keys:not(.has-target)::after{content:'click a key — adds an oscillator';
position:absolute;top:-25px;left:12px;
font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
color:var(--accent);background:var(--bg);border:1px solid var(--border2);
padding:4px 9px;pointer-events:none;z-index:4;white-space:nowrap}
@media(max-width:760px){#lab02-keys{display:none}}
/* ── Lab: the quiet "more coming" line, in place of an empty third card ── */
.lab-more{margin-top:26px;font-size:15px;color:var(--dim);line-height:1.7;max-width:660px}