/* ============================================================================
   VOIDMOTION INDUSTRIES — design system
   ----------------------------------------------------------------------------
   Self-contained. This file shares NOTHING with the Convert X Work stylesheet
   at the repo root; the two companies are deliberately distinct brands that
   happen to live in the same repo and deploy as separate Railway services.

   Conventions carried over from the root site because they earned their place:
     - hand-written CSS, no preprocessor, no framework, no build step
     - the stylesheet link is cache-busted with ?v=N — bump it when you edit
     - JS computes scalars and writes them as custom properties; CSS owns all
       visual expression. Never animate anything but transform/opacity/filter.

   The site is dark-only by design. The full palette is defined on bare :root
   and body paints an explicit background — there is no theme toggle and no
   prefers-color-scheme branch, the same single-look commitment the root site
   makes in the opposite direction.
   ========================================================================== */

:root{
  /* ground */
  --bg:#08090C;
  --panel:#0E1116;
  --panel-2:#141922;

  /* type */
  --ink:#E8EBF0;
  --ink-soft:#8B94A3;
  --ink-dim:#5C6472;

  /* structure */
  --line:rgba(232,235,240,0.10);
  --line-bright:rgba(232,235,240,0.20);

  /* accents */
  --signal:#4DF0C0;
  --signal-deep:#22C79B;
  --warn:#FFB454;

  --radius:14px;
  --radius-sm:8px;
  --wrap:1180px;

  /* One typeface for the whole site. The mono and display roles are kept as
     names so every rule that uses them still works, but they all resolve to
     Space Grotesk. */
  --sans:'Space Grotesk',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:var(--sans);
  --display:var(--sans);
}

/* ---------------------------------------------------------------- reset --- */

*,*::before,*::after{box-sizing:border-box;}

/* overflow-x lives on body, NEVER on html. Setting it on html creates a
   scroll container and silently breaks every position:sticky on the page —
   which here would kill the Method pipeline. This bit us on the root site;
   the comment travels with the pattern. */
html{scroll-behavior:smooth;}
body{
  margin:0;
  overflow-x:hidden;
  background-color:var(--bg);
  /* Hairline 64px lattice. Two gradients, so the grid reads as a workbench
     surface the content sits on. */
  background-image:
    linear-gradient(rgba(232,235,240,0.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,235,240,0.028) 1px,transparent 1px);
  background-size:64px 64px;
  background-position:center top;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;}
canvas{display:block;}
button,input,textarea,select{font-family:inherit;}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-0.02em;margin:0;}
h1{font-size:clamp(38px,5vw,66px);}
h2{font-size:clamp(28px,3.2vw,42px);}
h3{font-size:19px;letter-spacing:-0.01em;line-height:1.3;}
p{margin:0;}

a{color:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--signal);color:#06231C;}

/* ------------------------------------------------------------ primitives --- */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;font-weight:500;
  color:var(--signal);
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--signal);
  flex:none;
  opacity:0.7;
  /* Pin the rule to the first line: these labels wrap on narrow screens, and a
     vertically-centred dash next to two lines of text reads as misaligned. */
  margin-top:0.62em;
}

.lede{
  color:var(--ink-soft);
  font-size:17px;
  max-width:58ch;
}

.section{padding:110px 0;}
.section-head{max-width:660px;margin-bottom:56px;}
.section-head h2{margin-bottom:18px;}

/* Monospace key/value metadata rows — the recurring "spec sheet" motif. */
.spec{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.04em;
  color:var(--ink-dim);
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
}
.spec b{color:var(--ink-soft);font-weight:500;}

/* Status chips: ACTIVE / PROTOTYPE / ARCHIVED */
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;font-weight:500;
  padding:5px 10px;
  border-radius:100px;
  border:1px solid var(--line-bright);
  color:var(--ink-soft);
  white-space:nowrap;
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;}
.chip.active{color:var(--signal);border-color:rgba(77,240,192,0.35);background:rgba(77,240,192,0.07);}
.chip.active::before{animation:pulse 2.4s ease-in-out infinite;}
.chip.proto{color:var(--warn);border-color:rgba(255,180,84,0.32);background:rgba(255,180,84,0.06);}
.chip.archived{color:var(--ink-dim);}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.35;transform:scale(0.7);}
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;font-weight:600;
  text-decoration:none;
  padding:13px 22px;
  border-radius:100px;
  background:var(--signal);
  color:#06231C;
  border:1px solid var(--signal);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
  white-space:nowrap;
}
.btn:hover{
  transform:translateY(-2px);
  background:var(--signal-deep);
  border-color:var(--signal-deep);
  box-shadow:0 10px 30px -12px rgba(77,240,192,0.55);
}
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-bright);
  box-shadow:none;
}
.btn.ghost:hover{
  background:rgba(232,235,240,0.05);
  border-color:var(--signal);
  color:var(--signal);
  box-shadow:none;
}

/* ------------------------------------------------------- scroll progress --- */

.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;width:100%;
  background:linear-gradient(90deg,var(--signal),var(--warn));
  transform:scaleX(0);
  transform-origin:left;
  z-index:50;
  /* transform only — this never triggers layout on any frame */
}

/* ---------------------------------------------------------------- header --- */

header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:40;
  padding:12px 0;
  transition:padding .3s ease,background .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:8px 0;
  background:rgba(8,9,12,0.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
header nav{display:flex;align-items:center;justify-content:space-between;gap:24px;}

.logo{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  font-family:var(--sans);
  font-weight:500;
  font-size:16px;
  line-height:1.2;
  letter-spacing:-0.015em;
  text-transform:lowercase;
  color:var(--ink);
}
.logo .mark{height:24px;width:auto;flex:none;}
.logo small{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--ink-dim);
  display:block;
  margin-top:-2px;
  line-height:1.2;
  font-weight:400;
  text-transform:none;
}

.navlinks{display:flex;align-items:center;gap:28px;}
header .btn{padding:8px 18px;line-height:1.3;}
/* display:contents dissolves this wrapper on desktop so the links sit directly
   in the flex row; at <=920px it becomes the slide-in drawer. */
.nav-menu{display:contents;}
.nav-menu a{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;font-weight:500;
  text-decoration:none;
  color:var(--ink-soft);
  white-space:nowrap;
  transition:color .2s ease;
}
.nav-menu a:hover{color:var(--signal);}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px;height:34px;
  padding:0;
  background:transparent;
  border:1px solid var(--line-bright);
  border-radius:var(--radius-sm);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:16px;height:1.5px;
  margin:0 auto;
  background:var(--ink);
  transition:transform .3s ease,opacity .3s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ------------------------------------------------------------------ hero --- */

.hero{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:center;
  padding:170px 40px 110px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;font-weight:500;
  color:var(--ink-soft);
  padding:6px 14px 6px 11px;
  border:1px solid var(--line-bright);
  border-radius:100px;
  margin-bottom:26px;
}
.badge .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--signal);
  animation:pulse 2.4s ease-in-out infinite;
  flex:none;
}

.hero h1{margin-bottom:22px;}
.hero h1 em{font-style:normal;color:var(--signal);}
.hero .lede{font-size:18px;margin-bottom:32px;}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px;}

.hero-spec{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.hero-spec div{background:var(--bg);padding:18px 20px;}
.hero-spec b{
  display:block;
  font-family:var(--display);
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--ink);
  line-height:1.1;
  margin-bottom:4px;
}
.hero-spec span{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;font-weight:500;
  color:var(--ink-dim);
}

/* -------------------------------------------------- the framed instrument --- */
/* .frame is the recurring bordered panel with a mono caption bar, used for the
   hero lattice and anywhere else an instrument needs a housing. */

.frame{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
}
.fhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 16px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;font-weight:500;
  color:var(--ink-dim);
}
.fhead .live{display:inline-flex;align-items:center;gap:7px;color:var(--signal);}
.fhead .live::before{
  content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:pulse 2.4s ease-in-out infinite;
}

.lattice{position:relative;aspect-ratio:1/0.9;}
.lattice canvas{position:absolute;inset:0;width:100%;height:100%;}
/* Static stand-in for when the canvas never initialises (no JS). The script
   removes it on boot, so it is never drawn twice. */
.lattice-fallback{
  position:absolute;inset:0;
  display:grid;
  place-content:center;
  gap:10px;
  text-align:center;
  padding:24px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;font-weight:500;
  color:var(--ink-dim);
  background-image:
    radial-gradient(circle at 30% 35%,rgba(77,240,192,0.10),transparent 45%),
    radial-gradient(circle at 70% 65%,rgba(255,180,84,0.07),transparent 45%);
}

/* --------------------------------------------------------------- thesis --- */

.thesis{padding:40px 0 110px;}
.thesis blockquote{
  margin:0;
  padding-left:26px;
  border-left:2px solid var(--signal);
  font-family:var(--display);
  font-size:clamp(24px,3vw,36px);
  font-weight:500;
  line-height:1.32;
  letter-spacing:-0.02em;
  max-width:28ch;
  color:var(--ink);
}
.thesis blockquote span{color:var(--ink-dim);}
.thesis cite{
  display:block;
  margin-top:22px;
  padding-left:28px;
  font-style:normal;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;font-weight:500;
  color:var(--ink-dim);
}

/* --------------------------------------------------------------- cards --- */

.card-grid{
  display:grid;
  /* Fixed columns rather than auto-fit: the 1px gap shows the container's
     background, so an unfilled trailing cell would render as a lit block.
     The last card spans the remainder to close the row instead. */
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.card-grid > .card:last-child{grid-column:span 2;}
.card{
  background:var(--bg);
  padding:32px 28px 34px;
  transition:background .3s ease,opacity .7s ease,transform .7s ease;
  position:relative;
}
.card:hover{background:var(--panel);}
.card .num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  color:var(--signal);
  display:block;
  margin-bottom:18px;
}
.card h3{margin-bottom:11px;}
.card p{color:var(--ink-soft);font-size:15px;max-width:46ch;}
.card .card-tags{
  margin-top:18px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--ink-dim);
  line-height:1.9;
}


/* --------------------------------------------------------------- stance --- */
/* The "what we are / what we are not" pair. The single most load-bearing block
   on the page: without it the site reads as a very well-written agency. */

.stance{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.stance > div{background:var(--bg);padding:34px 30px;}
.stance h3{margin-bottom:6px;}
.stance .stance-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;font-weight:500;
  margin-bottom:18px;
}
.stance .do .stance-label{color:var(--signal);}
.stance .dont .stance-label{color:var(--ink-dim);}
.stance ul{margin:0;padding:0;list-style:none;}
.stance li{
  position:relative;
  padding-left:24px;
  margin-bottom:14px;
  font-size:14.5px;
  color:var(--ink-soft);
}
.stance li:last-child{margin-bottom:0;}
.stance li::before{content:"";position:absolute;left:0;}
.stance .do li::before{
  top:8px;width:6px;height:6px;
  background:var(--signal);
  transform:rotate(45deg);
}
.stance .dont li{color:var(--ink-dim);}
.stance .dont li::before{
  top:12px;width:11px;height:1px;
  background:var(--ink-dim);
  opacity:0.7;
}

/* The acceptance filter, stated plainly rather than implied. */
.gate{
  margin-top:22px;
  border:1px solid var(--line);
  border-left:2px solid var(--signal);
  border-radius:var(--radius-sm);
  background:var(--panel);
  padding:26px 28px;
}
.gate p{color:var(--ink-soft);font-size:15px;max-width:70ch;}
.gate p + p{margin-top:12px;}
.gate b{color:var(--ink);font-weight:500;}


/* How the lab is funded. Sits under the gate: the page explains what we refuse
   before it explains what we charge for, and the filter only reads as sharp
   rather than precious once the commercial logic is visible. */
.model{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:22px;
}
.model > div{background:var(--bg);padding:32px 30px;}
.model .num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  color:var(--signal);
  display:block;
  margin-bottom:16px;
}
.model h3{margin-bottom:11px;}
.model p{color:var(--ink-soft);font-size:14.5px;}
.model p + p{margin-top:12px;}
.model b{color:var(--ink);font-weight:500;}


/* ---------------------------------------------------------------- terms --- */
/* The three-part split of a funded-research deal: what we keep, what the client
   gets, what stays theirs. This exists because "we retain the IP" invites one
   obvious question, and the answer has to be on the page rather than in a
   contract nobody has seen yet. */

.terms{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:22px;
}
.terms > div{background:var(--bg);padding:30px 26px;}
.terms .terms-label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.13em;
  text-transform:uppercase;font-weight:500;
  margin-bottom:14px;
}
.terms .keep  .terms-label{color:var(--warn);}
.terms .get   .terms-label{color:var(--signal);}
.terms .yours .terms-label{color:var(--ink-soft);}
.terms h3{font-size:16px;margin-bottom:10px;}
.terms p{font-size:14px;color:var(--ink-soft);}
.terms ul{margin:12px 0 0;padding:0;list-style:none;}
.terms li{
  position:relative;
  padding-left:18px;
  margin-bottom:10px;
  font-size:14px;
  color:var(--ink-soft);
}
.terms li:last-child{margin-bottom:0;}
.terms li::before{
  content:"";position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;
  background:var(--line-bright);
}
.terms .get li::before{background:var(--signal);}

/* ------------------------------------------------------------ lab table --- */

.lab-wrap{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg);
}
.lab-table{width:100%;border-collapse:collapse;}
.lab-table th{
  text-align:left;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.13em;
  text-transform:uppercase;font-weight:500;
  color:var(--ink-dim);
  font-weight:500;
  padding:13px 20px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.lab-table td{
  padding:20px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  font-size:14.5px;
  color:var(--ink-soft);
}
.lab-table tr:last-child td{border-bottom:none;}
.lab-table tbody tr{transition:background .3s ease;}
.lab-table tbody tr:hover{background:var(--panel-2);}
.lab-table .lab-id{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--ink-dim);
  display:block;
  margin-bottom:6px;
}
.lab-table .lab-name{color:var(--ink);font-weight:500;display:block;line-height:1.35;}
.lab-table td:first-child{width:30%;}
.lab-table td:last-child{width:24%;}

/* ----------------------------------------------------------------- labs --- */
/* The anchor section. Inverted: a lighter panel on the dark ground, full-bleed
   so it reads as a different room in the same building. */

.labs{
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:110px 0;
  position:relative;
  overflow:hidden;
}
/* A denser grid inside Labs, keyed to the accent — the lab bench. */
.labs::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(77,240,192,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,240,192,0.045) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
  pointer-events:none;
}
.labs > .wrap{position:relative;}

.labs-head{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:56px;
  align-items:end;
  margin-bottom:56px;
}
.labs-note{
  border-left:1px solid var(--line-bright);
  padding-left:22px;
  font-size:14.5px;
  color:var(--ink-soft);
}

.lab-list{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg);
}
.lab{
  display:grid;
  grid-template-columns:1fr 130px;
  gap:24px;
  align-items:start;
  padding:26px 28px;
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.lab:last-child{border-bottom:none;}
.lab:hover{background:var(--panel-2);}
.lab-id{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--ink-dim);
  margin-bottom:9px;
}
.lab h3{margin-bottom:9px;}
.lab p{color:var(--ink-soft);font-size:14.5px;max-width:62ch;}
.lab-result{
  margin-top:13px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.03em;
  color:var(--signal);
}
.lab-status{display:flex;justify-content:flex-end;padding-top:2px;}

/* --------------------------------------------------------------- method --- */
/* Scroll-scrubbed sticky stage. JS writes --p (0..1) on .method-stage and adds
   .on to phases as it crosses thresholds; everything visual lives here. */

.method-stage{height:250vh;position:relative;--p:0;}
.method-panel{
  position:sticky;
  top:96px;
  padding:20px 0 60px;
}
.method-track{position:relative;margin:44px 0 0;}
.method-rail{
  position:absolute;
  top:22px;left:0;right:0;
  height:1px;
  background:var(--line-bright);
}
.method-rail::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--signal),var(--warn));
  transform:scaleX(var(--p));
  transform-origin:left;
}
.method-phases{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;
}
.phase-node{
  width:13px;height:13px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--line-bright);
  margin:16px 0 26px;
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.phase.on .phase-node{
  background:var(--signal);
  border-color:var(--signal);
  box-shadow:0 0 0 5px rgba(77,240,192,0.14);
}
.phase-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;font-weight:500;
  color:var(--ink-dim);
  transition:color .4s ease;
}
.phase.on .phase-label{color:var(--signal);}
.phase h3{
  margin:0 0 12px;
  font-size:24px;
  color:var(--ink-dim);
  transition:color .4s ease;
}
.phase.on h3{color:var(--ink);}
.phase p{
  font-size:14.5px;
  color:var(--ink-dim);
  max-width:30ch;
  transition:color .4s ease;
}
.phase.on p{color:var(--ink-soft);}
.phase ul{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.04em;
  color:var(--ink-dim);
  line-height:2;
}
.phase ul li::before{content:"— ";color:var(--line-bright);}


/* The cycle closes: a return marker under the rail, so the four phases do not
   read as a pipeline with an exit at the end. */
.loop-return{
  margin-top:38px;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;font-weight:500;
  color:var(--ink-dim);
}
.loop-return::before{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-bright));
}
.loop-return b{color:var(--signal);font-weight:500;}

/* ------------------------------------------------------ flagship product --- */

.product{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
}
.product-body{
  display:grid;
  grid-template-columns:1.12fr 0.88fr;
}
.product-main{
  padding:46px 42px;
  border-right:1px solid var(--line);
}
.product-main h2{
  font-size:clamp(32px,3.6vw,46px);
  margin-bottom:10px;
}
.product-tagline{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;font-weight:500;
  color:var(--signal);
  margin-bottom:26px;
}
.product-main p{color:var(--ink-soft);font-size:15.5px;max-width:54ch;}
.product-main p + p{margin-top:16px;}
.product-main .spec{
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.product-side{
  padding:46px 38px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.feature .feature-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;font-weight:500;
  color:var(--ink-dim);
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:9px;
}
.feature .feature-label::before{
  content:"";width:5px;height:5px;flex:none;
  background:var(--signal);
  transform:rotate(45deg);
}
.feature p{font-size:14.5px;color:var(--ink-soft);}

/* A stated absence, not an empty section: most client work cannot be shown. */
.note{
  margin-top:26px;
  border-left:2px solid var(--line-bright);
  padding:4px 0 4px 22px;
  font-size:14.5px;
  color:var(--ink-dim);
  max-width:68ch;
}
.note b{color:var(--ink-soft);font-weight:500;}

/* ------------------------------------------------------------- outcomes --- */

.outcome-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.outcome{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  padding:30px 28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color .3s ease,transform .7s ease,opacity .7s ease;
}
.outcome:hover{border-color:var(--line-bright);}
.outcome .metric{
  font-family:var(--display);
  font-size:40px;
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--signal);
}
.outcome h3{font-size:17px;}
.outcome p{font-size:14.5px;color:var(--ink-soft);}
.outcome .spec{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);flex-direction:column;gap:5px;}

/* -------------------------------------------------------------- contact --- */

.contact-panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%,rgba(77,240,192,0.09),transparent 70%),
    var(--panel);
  padding:64px 40px;
  text-align:center;
}
.contact-panel .eyebrow{justify-content:center;}
.contact-panel h2{margin-bottom:16px;}
.contact-panel .lede{margin:0 auto 30px;max-width:52ch;}
.contact-lines{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 30px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.05em;
  color:var(--ink-dim);
}
.contact-lines a{color:var(--ink-soft);text-decoration:none;transition:color .2s ease;}
.contact-lines a:hover{color:var(--signal);}

/* --------------------------------------------------------------- footer --- */

footer{
  border-top:1px solid var(--line);
  margin:110px auto 0;
  padding:34px 40px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px 24px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  color:var(--ink-dim);
  max-width:var(--wrap);
}
footer a{color:var(--ink-soft);text-decoration:none;}
footer a:hover{color:var(--signal);}

/* -------------------------------------------------------------- reveals --- */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.in{opacity:1;transform:none;}
/* stagger, scoped per group */
.reveal-group > *:nth-child(1){transition-delay:0ms;}
.reveal-group > *:nth-child(2){transition-delay:90ms;}
.reveal-group > *:nth-child(3){transition-delay:180ms;}
.reveal-group > *:nth-child(4){transition-delay:270ms;}
.reveal-group > *:nth-child(5){transition-delay:360ms;}

/* ----------------------------------------------------------- responsive --- */

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:48px;padding-top:140px;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .product-body{grid-template-columns:1fr;}
  .product-main{border-right:none;border-bottom:1px solid var(--line);}
  .labs-head{grid-template-columns:1fr;gap:28px;align-items:start;}
  .method-stage{height:auto;}
  .method-panel{position:static;padding-bottom:0;}
  .method-phases{grid-template-columns:1fr;gap:0;}
  .loop-return{margin-top:26px;}
  .method-rail{display:none;}
  .phase{
    padding:26px 0 26px 26px;
    border-left:1px solid var(--line-bright);
    position:relative;
  }
  .phase-node{position:absolute;left:-7px;top:30px;margin:0;}
  /* Without the scrub there is nothing to reveal progressively, so every phase
     is shown in its resolved state. */
  .phase h3,.phase.on h3{color:var(--ink);}
  .phase p,.phase.on p{color:var(--ink-soft);}
  .phase-label,.phase.on .phase-label{color:var(--signal);}
  .phase .phase-node,.phase.on .phase-node{background:var(--signal);border-color:var(--signal);box-shadow:none;}
}

@media (max-width:1060px){
  .nav-toggle{display:flex;}
  .navlinks{gap:14px;}
  .nav-menu{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
    position:fixed;
    top:0;right:0;
    width:min(300px,82vw);
    height:100dvh;
    padding:96px 32px 32px;
    background:var(--panel);
    border-left:1px solid var(--line);
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    z-index:45;
  }
  .nav-menu.nav-open{transform:translateX(0);}
  .nav-menu a{font-size:14px;}
  .navlinks > .btn{display:none;}
}

@media (max-width:760px){
  .section{padding:80px 0;}
  .card-grid{grid-template-columns:1fr;}
  .card-grid > .card:last-child{grid-column:auto;}
  .stance{grid-template-columns:1fr;}
  .gate{padding:24px 22px;}
  .model{grid-template-columns:1fr;}
  .terms{grid-template-columns:1fr;}
  .lab-table thead{display:none;}
  .lab-table tr{display:block;border-bottom:1px solid var(--line);padding:20px;}
  .lab-table tr:last-child{border-bottom:none;}
  .lab-table td{display:block;border:none;padding:0 0 10px;width:auto !important;}
  .lab-table td:last-child{padding-bottom:0;}
  .wrap,.hero,footer{padding-left:26px;padding-right:26px;}
  .hero-spec{grid-template-columns:1fr;}
  .lab{grid-template-columns:1fr;gap:14px;}
  .lab-status{justify-content:flex-start;}
  .contact-panel{padding:48px 26px;}
  .product-main{padding:36px 26px;}
  .product-side{padding:36px 26px;}
  .thesis blockquote{max-width:none;}
  footer{flex-direction:column;}
}

@media (max-width:480px){
  body{font-size:15.5px;}
  .ctas .btn{width:100%;justify-content:center;}
  .logo small{display:none;}
}

/* --------------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none;}
  /* Collapse the scrub stage: without motion its 250vh budget is just a long
     stretch of empty scrolling. */
  .method-stage{height:auto;}
  .method-panel{position:static;}
  .method-rail::after{transform:scaleX(1);}
  .phase h3{color:var(--ink);}
  .phase p{color:var(--ink-soft);}
  .phase .phase-node{background:var(--signal);border-color:var(--signal);}
  .phase .phase-label{color:var(--signal);}
}

/* ------------------------------------------------------- cursor light --- */

/* A soft mint glow that follows the pointer across the dark page, as if the
   mouse were a small torch. It is painted BEHIND all content (z-index -1: above
   the page background and grid, under every piece of text, card and panel), so
   it can never tint or distract from anything readable. It ignores clicks, is
   created by the script only for mouse users, and is skipped for reduced motion. */
.cursor-light{
  position:fixed;left:0;top:0;
  width:820px;height:820px;margin:-410px 0 0 -410px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  background:radial-gradient(circle at center,
    rgba(77,240,192,0.01) 0%,
    rgba(77,240,192,0.004) 32%,
    rgba(77,240,192,0) 62%);
  transition:opacity .5s ease;
  will-change:transform;
}
.cursor-light.on{opacity:1;}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
  .cursor-light{display:none;}
}

/* ----------------------------------------------------------------- dust --- */

/* Slow floating specks, drawn on a canvas that sits on the same layer as the
   cursor light: above the page background, behind every piece of content. */
.dust{
  position:fixed;left:0;top:0;width:100%;height:100%;
  z-index:-1;
  pointer-events:none;
}