/* NLM Cognitive Solutions — "stealth" design system
   Matte black, hairlines, one warm accent (brass), and motion that reveals
   things out of the dark. Plain CSS, no build step. */

:root {
  --void: #050607;
  --carbon: #0a0c0f;
  --panel: #0d1014;
  --panel-2: #12161b;
  --line: rgba(236, 232, 223, .07);
  --line-2: rgba(236, 232, 223, .14);
  --line-3: rgba(236, 232, 223, .26);
  --bone: #ece8df;
  --text: #c9c6bf;
  --mute: #8b9099;
  --dim: #7e838c;
  --brass: #c2a46b;
  --brass-hi: #e6cd96;
  --brass-deep: #8e7440;
  --brass-a: rgba(194, 164, 107, .14);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--brass); color: var(--void); }
:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
button { font: inherit; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--brass); color: var(--void); padding: 8px 14px; }
.skip:focus { left: 8px; }

/* ---------- Type ---------- */
.display, .h2, h1, h2, h3 { color: var(--bone); font-weight: 300; margin: 0; }
.display {
  font-family: var(--serif);
  font-size: clamp(52px, 9.2vw, 148px);
  line-height: .94;
  letter-spacing: -.025em;
}
.display em, .h2 em { font-style: italic; color: var(--brass); }
.h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -.018em;
  max-width: 20ch;
}
h3, .insight-card h2 { font-family: var(--serif); font-size: 26px; line-height: 1.2; letter-spacing: -.005em; }
.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--mute); max-width: 56ch; margin: 0; }
.eyebrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font: 500 11.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); margin: 0;
}
.eyebrow i { font-style: normal; color: var(--dim); }
.eyebrow::after { content: ""; flex: 0 0 48px; height: 1px; background: linear-gradient(90deg, var(--brass), transparent); }
.eyebrow a { color: inherit; }

.link { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding-bottom: 8px; position: relative; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform-origin: left; transition: transform .5s var(--ease); }
.link:hover::after { transform: scaleX(.3); }
.link span { transition: transform .4s var(--ease); }
.link:hover span { transform: translateX(6px); }

.sample-tag {
  display: inline-block; vertical-align: middle;
  font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: #ffb4a8; border: 1px dashed rgba(255, 140, 120, .55); background: rgba(255, 110, 90, .08);
  padding: 4px 7px; margin-left: 8px;
}

/* ---------- Buttons ---------- */
.btn {
  --mx: 0px; --my: 0px;
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 26px; border: 1px solid var(--line-3); border-radius: 0;
  font: 500 12.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); background: transparent; cursor: pointer; overflow: hidden;
  transform: translate(var(--mx), var(--my));
  transition: transform .35s var(--ease), border-color .3s, color .3s, background .3s;
}
.btn > * { position: relative; z-index: 1; }
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--brass);
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--void); border-color: var(--brass); }
.btn-primary { background: var(--brass); border-color: var(--brass); color: var(--void); }
.btn-primary::before { background: var(--bone); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }

/* ---------- HUD bits ---------- */
.hud-corner { position: absolute; width: 14px; height: 14px; border-color: var(--brass); border-style: solid; border-width: 0; opacity: .8; }
.c-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.c-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.c-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.c-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Film grain over everything */
.grain {
  position: fixed; inset: -8%; z-index: 200; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* Scroll progress */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--brass-deep), var(--brass-hi)); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 10px var(--brass); }

/* Custom cursor (desktop only) */
.cursor { display: none; }
html.has-cursor .cursor { display: block; }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 250; pointer-events: none; border-radius: 50%; }
.cursor-dot { width: 14px; height: 20px; margin: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Cpath d='M1 1v15.5l4-3.6 2.7 5.6 2.3-1.1-2.6-5.5H13z' fill='%23e6cd96' stroke='%230a0c0f' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); } /* brass arrow pointer, tip at the cursor point */
.cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(194, 164, 107, .55);
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, border-color .3s;
}
.cursor.is-hover .cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(194, 164, 107, .08); border-color: var(--brass); }
/* Flashlight lens over text: a dark glass circle, lit from the centre, magnifying what is under it */
.cursor-lens { display: none; }
html.has-cursor .cursor-lens {
  display: block; position: fixed; top: 0; left: 0; z-index: 249; width: 108px; height: 108px; border-radius: 50%; overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(230, 205, 150, .07), rgba(10, 10, 12, .82) 70%);
  box-shadow: 0 0 0 .5px rgba(194, 164, 107, .32), 0 0 24px rgba(230, 205, 150, .05);
  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
  opacity: 0; scale: .85; transition: opacity .35s, scale .45s var(--ease);
}
html.has-cursor .cursor.is-lens ~ .cursor-lens, html.has-cursor body:has(.cursor.is-lens) .cursor-lens { opacity: 1; scale: 1; }
.cursor-lens-in { position: absolute; top: 0; left: 0; filter: brightness(1.18); }
.cursor.is-lens .cursor-ring { opacity: 0; }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; transition: height .4s var(--ease); }
.site-header.is-solid { background: rgba(5, 6, 7, .72); border-bottom-color: var(--line); }
.site-header.is-solid .wrap { height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--bone); }
.brand-mark { width: 70px; height: auto; }
.brand-name { font: 500 9.5px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #c9d3e6; border-left: 1px solid var(--line-2); padding-left: 14px; }
html.js .home .site-header .brand { opacity: 0; transform: translateY(-6px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js .home.ready .site-header .brand { opacity: 1; transform: none; }
.nav { display: flex; align-items: center; gap: 34px; }
.nav a:not(.btn) { position: relative; font: 400 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); transition: color .3s; padding: 6px 0; }
.nav a:not(.btn) i { font-style: normal; color: var(--brass); margin-right: 7px; font-size: 10px; opacity: .8; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav a:not(.btn):hover { color: var(--bone); }
.nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { padding: 13px 20px; font-size: 11.5px; }
.nav-toggle { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line-2); position: relative; cursor: pointer; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 1px; background: var(--bone); transition: transform .3s var(--ease); }
.nav-toggle span:first-child { top: 17px; } .nav-toggle span:last-child { top: 26px; }
.nav-open .nav-toggle span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-open .nav-toggle span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* Header mark draws itself on the home page after the intro */
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Side HUD */
.sidehud { position: fixed; right: 26px; top: 50%; z-index: 90; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; font: 500 10px/1 var(--mono); letter-spacing: .2em; color: var(--dim); text-transform: uppercase; opacity: 0; transition: opacity .6s; pointer-events: none; }
.home.ready .sidehud { opacity: 1; }
.sidehud-num { color: var(--brass); }
.sidehud-bar { width: 1px; height: 120px; background: var(--line-2); position: relative; overflow: hidden; }
.sidehud-bar i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--brass); transform-origin: top; transform: scaleY(var(--p, 0)); }
.sidehud-name { writing-mode: vertical-rl; transform: rotate(180deg); min-height: 90px; }

/* ---------- Intro ---------- */
.intro { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; pointer-events: auto; }
html:not(.js) .intro, .intro.is-gone { display: none; }
.intro-half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--void); transition: transform 1.1s var(--ease-io); }
.intro-top { top: 0; } .intro-bot { bottom: 0; }
.intro.is-done .intro-top { transform: translateY(-101%); }
.intro.is-done .intro-bot { transform: translateY(101%); }
.intro-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
  opacity: 0; animation: fadein 1.2s .1s forwards;
}
.intro-frame { position: absolute; inset: clamp(16px, 3vw, 36px); opacity: 0; animation: fadein .8s .2s forwards; }
.intro-frame .hud-corner { width: 22px; height: 22px; }
.intro-hud { position: absolute; margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .22em; color: var(--dim); }
.h-tl { top: 22px; left: 30px; } .h-tr { top: 22px; right: 30px; } .h-bl { bottom: 22px; left: 30px; }
.h-bl span { color: var(--brass); }
.intro-skip { position: absolute; bottom: 14px; right: 24px; background: none; border: 0; padding: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.intro-skip:hover { color: var(--bone); }
.intro-stage { position: relative; text-align: center; padding: 0 20px; }
.intro-logo { width: min(1000px, 100vw, 150vh); aspect-ratio: 1200 / 720; margin: 0 auto; }
.intro-logo > img, .intro-logo > svg { display: block; width: 100%; height: 100%; }
.intro-logo > img { opacity: 0; }
.intro-logo.is-static > img { animation: fadein 1s forwards; } /* only shown if the animated build can't run */
/* the scan line moves with transform, not top, so it never counts as layout shift */
.intro-scan { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; opacity: 0; animation: scan 1.1s 4.8s var(--ease-io) forwards; }
.intro-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brass-hi), transparent); box-shadow: 0 0 24px 4px rgba(194, 164, 107, .5); }
@keyframes scan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.intro.is-done .intro-grid, .intro.is-done .intro-frame, .intro.is-done .intro-stage, .intro.is-done .intro-scan { opacity: 0 !important; transition: opacity .35s; animation: none; }
.intro.is-done { pointer-events: none; }

/* ---------- Reveal ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 140px 0 40px; overflow: hidden; background: var(--void); isolation: isolate; }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-vignette { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 70% at 30% 60%, rgba(5, 6, 7, .78), transparent 70%), linear-gradient(180deg, rgba(5, 6, 7, .6) 0%, transparent 25%, transparent 70%, var(--void) 100%); pointer-events: none; }
.hero-hud { position: absolute; inset: 100px var(--gut) 24px; pointer-events: none; opacity: 0; transition: opacity 1s .4s; }
.ready .hero-hud { opacity: 1; }
.hero-hud .hud-corner { opacity: .45; }
.hud-txt { position: absolute; margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; color: var(--dim); }
.hud-txt span { color: var(--brass); }
.h1t { top: 16px; left: 22px; } .h2t { top: 16px; right: 22px; } .h3t { bottom: 16px; right: 22px; }
.hero-inner { position: relative; }
.kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 34px; font: 500 11.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.blip { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 0 rgba(194, 164, 107, .6); animation: blip 2s infinite; }
@keyframes blip { 0% { box-shadow: 0 0 0 0 rgba(194, 164, 107, .6); } 80%, 100% { box-shadow: 0 0 0 12px rgba(194, 164, 107, 0); } }
.display .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.display .line > span { display: inline-block; }
html.js .display .line > span { transform: translateY(110%); transition: transform 1.3s var(--ease); }
html.js .ready .display .line > span { transform: none; }
html.js .ready .display .line:nth-child(2) > span { transition-delay: .12s; }
.shine { background: linear-gradient(100deg, var(--brass-deep) 0%, var(--brass) 30%, #fff3d6 48%, var(--brass) 62%, var(--brass-deep) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shine 6s linear infinite; padding-right: .06em; }
@keyframes shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.hero .lede { margin-top: 34px; color: var(--text); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-strip { list-style: none; margin: 80px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.hero-strip li { padding: 22px 22px 6px 0; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
.hero-strip li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.hero-strip i { font: 500 10.5px/1.9 var(--mono); color: var(--brass); font-style: normal; grid-row: span 2; }
.hero-strip b { font: 500 14px/1.4 var(--sans); color: var(--bone); }
.hero-strip span { font-size: 13.5px; color: var(--dim); }
.scroll-cue { position: absolute; left: 50%; bottom: 0; width: 1px; height: 56px; background: var(--line-2); overflow: hidden; }
.scroll-cue span { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--brass); animation: drop 2.2s var(--ease-io) infinite; }
@keyframes drop { to { top: 100%; } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; background: var(--carbon); }
.marquee-track { display: flex; align-items: center; gap: 44px; width: max-content; animation: marquee 36s linear infinite; }
.marquee span { font: 300 clamp(34px, 4.4vw, 58px)/1 var(--serif); color: var(--bone); white-space: nowrap; letter-spacing: -.01em; }
.marquee span.o { color: transparent; -webkit-text-stroke: 1px rgba(236, 232, 223, .4); font-style: italic; }
.marquee i { font-style: normal; color: var(--brass); font-size: 12px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(96px, 13vw, 168px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.head { display: grid; gap: 26px; margin-bottom: clamp(56px, 7vw, 88px); }
.head .lede { margin-top: 4px; }
.more { margin: 56px 0 0; }

.panel { position: relative; background: linear-gradient(180deg, var(--panel), var(--carbon)); border: 1px solid var(--line); }
.spot { --mx: 50%; --my: 0%; }
.spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(194, 164, 107, .12), transparent 60%); }
.spot::after { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0; transition: opacity .5s; padding: 1px; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(230, 205, 150, .75), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* Meaning */
.meaning { background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(194, 164, 107, .05), transparent 70%); }
.acro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 56px 0 64px; }
.acro-l { position: relative; border-top: 1px solid var(--line-2); padding-top: 18px; }
.acro-l b { position: relative; display: block; font: 300 clamp(120px, 21vw, 300px)/.86 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(236, 232, 223, .28); letter-spacing: -.04em; }
.acro-l b::after { content: attr(data-l); position: absolute; inset: 0; color: var(--bone); -webkit-text-stroke: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease-io) calc(var(--d, 0s) + .5s); background: linear-gradient(180deg, var(--bone) 40%, var(--brass)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acro-l.is-in b::after { clip-path: inset(0 0 0 0); }
.acro-l b { transition: -webkit-text-stroke-color 1s calc(var(--d, 0s) + 1.6s); }
.acro-l.is-in b { -webkit-text-stroke-color: transparent; }
html:not(.js) .acro-l b::after { clip-path: none; }
.acro-l span { display: block; margin-top: 18px; font: 500 12px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.meaning-text { font: 300 clamp(20px, 2vw, 27px)/1.5 var(--serif); color: var(--text); max-width: 46ch; margin: 0; }

/* Statement */
.statement { padding: clamp(110px, 16vw, 200px) 0; background: var(--carbon); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statement-text { font: 300 clamp(32px, 4.6vw, 66px)/1.14 var(--serif); letter-spacing: -.018em; color: var(--bone); max-width: 24ch; margin: 0; }
.statement-text em { color: var(--brass); }
.statement-text .w { opacity: .14; transition: opacity .4s, color .4s; }
.statement-text .w.on { opacity: 1; }

/* Capabilities */
.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cap { padding: 40px 40px 36px; transition: transform .6s var(--ease), border-color .4s; }
.cap:hover { border-color: var(--line-2); }
.cap-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
.icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-2); color: var(--brass); }
.icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
html.js .reveal .icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-io) calc(var(--d, 0s) + .4s); }
html.js .reveal.is-in .icon svg * { stroke-dashoffset: 0; }
.num { font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--dim); }
.cap h3 { margin-bottom: 14px; }
.cap > p { color: var(--mute); margin: 0 0 28px; font-size: 16px; }
.chips { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font: 400 12px/1 var(--mono); letter-spacing: .03em; color: var(--text); border: 1px solid var(--line-2); padding: 9px 11px; transition: border-color .3s, color .3s; }
.cap:hover .chips li { border-color: rgba(194, 164, 107, .35); }

/* Approach */
.approach { background: linear-gradient(180deg, var(--void), var(--carbon)); }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; --fill: 0; }
.steps-rail { position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: var(--line-2); }
.steps-rail i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--brass-deep), var(--brass-hi)); transform-origin: left; transform: scaleX(var(--fill)); box-shadow: 0 0 12px rgba(194, 164, 107, .7); }
.step { position: relative; padding-top: 86px; }
.node { position: absolute; top: 0; left: 0; width: 55px; height: 55px; display: grid; place-items: center; background: var(--void); border: 1px solid var(--line-3); transform: rotate(45deg); transition: border-color .5s, box-shadow .5s, background .5s; }
.node b { transform: rotate(-45deg); font: 500 12px/1 var(--mono); color: var(--mute); transition: color .5s; }
.step.lit .node { border-color: var(--brass); background: #15120c; box-shadow: 0 0 0 6px rgba(194, 164, 107, .06), 0 0 30px rgba(194, 164, 107, .35); }
.step.lit .node b { color: var(--brass-hi); }
.step h3 { margin-bottom: 14px; }
.step > p { color: var(--mute); font-size: 15.5px; margin: 0; }
.deliver { margin-top: 26px !important; padding-top: 18px; border-top: 1px dashed var(--line-2); color: var(--bone) !important; font-size: 14.5px !important; }
.deliver span { display: block; font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 10px; }

/* Standards: redaction */
.dossier { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); }
.dossier li { padding: 36px 32px 40px 0; border-bottom: 1px solid var(--line); }
.dossier li:not(:nth-child(3n+1)) { padding-left: 32px; border-left: 1px solid var(--line); }
.d-n { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; color: var(--brass); margin-bottom: 26px; }
.dossier h3 { font-size: 24px; margin-bottom: 12px; }
.dossier p { margin: 0; color: var(--mute); font-size: 15.5px; }
.redact h3 > span, .redact p > span { position: relative; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html.js .redact h3 > span, html.js .redact p > span { background: linear-gradient(var(--bone), var(--bone)) no-repeat right / 100% 100%; color: transparent; transition: background-size .9s var(--ease-io), color .2s; }
html.js .redact p > span { background-image: linear-gradient(#2a2e35, #2a2e35); }
html.js .redact.is-in h3 > span { background-size: 0% 100%; color: var(--bone); transition-delay: calc(var(--d, 0s) + .35s), calc(var(--d, 0s) + .55s); }
html.js .redact.is-in p > span { background-size: 0% 100%; color: var(--mute); transition-delay: calc(var(--d, 0s) + .6s), calc(var(--d, 0s) + .85s); }

/* Who we work with */
.serves { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-2); }
.serve { position: relative; padding: 40px 40px 44px 76px; border-bottom: 1px solid var(--line); overflow: hidden; }
.serve:nth-child(even) { border-left: 1px solid var(--line); }
.serve::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(194, 164, 107, .07), transparent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.serve:hover::before { transform: scaleX(1); }
.serve-n { position: absolute; left: 0; top: 42px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); font: 500 12px/1 var(--mono); color: var(--brass); }
.serve:nth-child(even) .serve-n { left: 32px; }
.serve:nth-child(even) { padding-left: 108px; }
.serve h3 { position: relative; margin-bottom: 10px; font-size: 24px; }
.serve p { position: relative; margin: 0; color: var(--mute); font-size: 15.5px; max-width: 44ch; }

/* Ventures */
.ventures { background: var(--carbon); }
.venture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.venture { overflow: hidden; }
.vui { height: 200px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 0%, rgba(194, 164, 107, .07), transparent 70%), var(--void); padding: 34px 32px; position: relative; overflow: hidden; }
.vui::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient(180deg, transparent, rgba(194, 164, 107, .08), transparent); animation: sweepdown 4.5s linear infinite; }
@keyframes sweepdown { to { top: 100%; } }
.vui-doc i { display: block; height: 7px; margin-bottom: 14px; background: var(--line-2); width: 0; animation: type 5s var(--ease) infinite; }
.vui-doc i:nth-child(2) { animation-delay: .25s; } .vui-doc i:nth-child(3) { animation-delay: .5s; } .vui-doc i:nth-child(4) { animation-delay: .75s; } .vui-doc i:nth-child(5) { animation-delay: 1s; } .vui-doc i:nth-child(6) { animation-delay: 1.25s; }
.vui-doc i.hl { background: var(--brass); box-shadow: 0 0 10px rgba(194, 164, 107, .4); }
@keyframes type { 0% { width: 0; } 30%, 85% { width: var(--w); } 100% { width: var(--w); opacity: 0; } }
.vui-wave { display: flex; align-items: center; gap: 6px; }
.vui-wave i { flex: 1; height: 30%; background: linear-gradient(180deg, var(--brass-hi), var(--brass-deep)); animation: eq 1.4s ease-in-out infinite alternate; opacity: .85; }
.vui-wave i:nth-child(3n) { animation-duration: 1.1s; } .vui-wave i:nth-child(4n+1) { animation-duration: 1.7s; animation-delay: -.4s; } .vui-wave i:nth-child(5n+2) { animation-duration: .9s; animation-delay: -.7s; } .vui-wave i:nth-child(odd) { background: var(--line-3); }
@keyframes eq { from { height: 12%; } to { height: 90%; } }
.vui-rows p { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--line); font: 500 12px/1 var(--mono); color: var(--mute); }
.vui-rows p i { width: 46%; height: 6px; background: var(--line-2); }
.vui-rows p.flag { border-color: rgba(194, 164, 107, .6); color: var(--brass-hi); animation: flag 3s ease-in-out infinite; }
.vui-rows p.flag i { background: rgba(194, 164, 107, .5); }
@keyframes flag { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 164, 107, 0); } 50% { box-shadow: 0 0 22px 0 rgba(194, 164, 107, .25); } }
.venture-body { padding: 30px 32px 36px; }
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 18px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blip 2s infinite; }
.status.planned { color: var(--mute); }
.status.planned::before { animation: none; }
.venture h3 { margin-bottom: 10px; }
.venture p { margin: 0; color: var(--mute); font-size: 15.5px; }

/* Insights (home + insights index) */
.insight-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.insight-card { position: relative; display: flex; flex-direction: column; padding: 36px 32px 32px; min-height: 340px; border: 1px solid var(--line); background: var(--carbon); overflow: hidden; transition: border-color .4s, transform .6s var(--ease); }
.insight-card::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.insight-card::after { content: "→"; position: absolute; right: 30px; bottom: 28px; color: var(--brass); font-size: 20px; opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .5s var(--ease); }
.insight-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.insight-card:hover::before { transform: scaleX(1); }
.insight-card:hover::after { opacity: 1; transform: none; }
.insight-tag { font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 30px; }
.insight-card h3, .insight-card h2 { font-size: 27px; margin-bottom: 14px; }
.insight-card p { margin: 0 0 28px; color: var(--mute); font-size: 15.5px; }
.insight-by { margin-top: auto; font: 400 12px/1 var(--mono); color: var(--dim); letter-spacing: .04em; }
.insight-by b { color: var(--text); font-weight: 500; }

/* About */
.about { background: radial-gradient(ellipse 50% 60% at 20% 50%, rgba(194, 164, 107, .05), transparent 70%); }
.founder-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.portrait-img { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border: 1px solid var(--line); }
.portrait-img svg { width: 100%; height: 100%; }
.portrait-img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px); pointer-events: none; }
.portrait-scan { position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(180deg, transparent, rgba(194, 164, 107, .16), transparent); border-bottom: 1px solid rgba(230, 205, 150, .5); animation: sweepdown 5s var(--ease-io) infinite; }
.portrait-img .hud-corner { margin: 14px; width: 18px; height: 18px; }
.portrait-label { position: absolute; left: 18px; bottom: 18px; margin: 14px; font: 500 10px/1 var(--mono); letter-spacing: .2em; color: var(--brass); }
.portrait-img .sample-tag { position: absolute; top: 40px; right: 40px; margin: 0; }
.portrait-cap { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.portrait-cap b { font: 400 22px/1.2 var(--serif); color: var(--bone); }
.portrait-cap span { font: 400 12px/1.4 var(--mono); color: var(--dim); letter-spacing: .04em; }
.founder-copy .h2 { margin: 26px 0 36px; }
.founder-copy blockquote { margin: 0; padding-left: 28px; border-left: 1px solid var(--brass); font: italic 300 clamp(20px, 1.9vw, 25px)/1.5 var(--serif); color: var(--bone); }
.founder-copy blockquote em { font-style: normal; color: var(--brass-hi); } /* the quote is italic, so emphasis stands upright in brass */
.firm-copy { margin: 0 0 40px; }
.firm-copy p { margin: 0 0 18px; color: var(--mute); font-size: 17px; line-height: 1.7; }
.firm-copy strong { color: var(--bone); font-weight: 500; }
.firm-close { margin: 28px 0 0; color: var(--mute); font-size: 16px; line-height: 1.7; }
.sig, .founder-copy .sig { margin: 20px 0 0 28px; font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.bio { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); }
.bio > p { margin: 0 0 26px; color: var(--mute); font-size: 16px; }
.bio dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px; }
.bio dt { font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.bio dd { margin: 0; color: var(--bone); font-size: 15px; }

/* Contact */
.contact-panel { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 90px); padding: clamp(36px, 5vw, 72px); }
.contact-copy .h2 { margin: 26px 0 24px; }
.caret { display: inline-block; width: .06em; height: .8em; margin-left: .08em; vertical-align: -.04em; background: var(--brass); animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mail { display: inline-block; margin-top: 34px; font: 300 clamp(22px, 2.2vw, 30px)/1.2 var(--serif); color: var(--bone); border-bottom: 1px solid var(--brass); padding-bottom: 4px; transition: color .3s; }
.mail:hover { color: var(--brass-hi); }
.small { margin: 16px 0 0; font: 400 12px/1.5 var(--mono); color: var(--dim); }
.form { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; align-content: start; }
.field { display: grid; gap: 10px; position: relative; }
.field.full { grid-column: 1 / -1; }
.field label { font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.field input, .field select, .field textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: var(--bone); background: transparent; border: 0; border-bottom: 1px solid var(--line-3); padding: 10px 0 12px; border-radius: 0; transition: border-color .3s; -webkit-appearance: none; appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%); background-position: right 6px top 18px, right 0 top 18px; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { background: var(--panel); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--brass); }
.field::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--brass-hi); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); box-shadow: 0 0 10px var(--brass); }
.field:focus-within::after { transform: scaleX(1); }
.form .btn { justify-self: start; grid-column: 1 / -1; }
.form-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--dim); }
.form-note a { color: var(--text); border-bottom: 1px solid var(--line-3); }

/* ---------- Footer ---------- */
.site-footer { position: relative; border-top: 1px solid var(--line); background: var(--void); padding: 88px 0 32px; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; }
.footer-top p { color: var(--dim); font-size: 14.5px; max-width: 34ch; margin: 22px 0 0; }
.footer-top h2 { margin: 0 0 20px; font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.footer-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-top li { font-size: 14.5px; color: var(--mute); }
.footer-top a:hover { color: var(--bone); }
.footer-addr { line-height: 1.6; }
.footer-giant { position: relative; margin: 70px 0 10px; font: 300 clamp(120px, 29vw, 420px)/.8 var(--serif); letter-spacing: -.01em; user-select: none; }
.footer-giant span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(236, 232, 223, .1); }
.footer-giant .fg-lit { position: absolute; inset: 0; -webkit-text-stroke: 1.5px var(--brass-hi); color: rgba(194, 164, 107, .12); -webkit-mask-image: radial-gradient(260px circle at var(--fx, -999px) var(--fy, -999px), #000, transparent 70%); mask-image: radial-gradient(260px circle at var(--fx, -999px) var(--fy, -999px), #000, transparent 70%); }
.footer-giant.is-mark { line-height: 0; }
.footer-giant.is-mark svg { display: block; width: min(100%, 900px); height: auto; }
.footer-giant.is-mark .fg-lit { position: absolute; top: 0; left: 0; }
.footer-giant.is-mark .fg-base polygon { fill: none; stroke: rgba(236, 232, 223, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.footer-giant.is-mark .fg-lit { -webkit-text-stroke: 0; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); font: 400 12px/1.5 var(--mono); color: var(--dim); letter-spacing: .03em; }
.footer-bottom a:hover { color: var(--bone); }

/* ---------- Inner pages ---------- */
body:not(.home) .site-header { background: rgba(5, 6, 7, .8); border-bottom-color: var(--line); }
body:not(.home) .site-header .wrap { height: 72px; }
.page-head, .article-head { position: relative; padding: 190px 0 96px; border-bottom: 1px solid var(--line); overflow: hidden; background: radial-gradient(ellipse 60% 80% at 80% 0%, rgba(194, 164, 107, .08), transparent 60%), var(--void); }
.page-head::before, .article-head::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.head-scan { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none; animation: headscan 3.2s .3s var(--ease-io) forwards; opacity: 0; }
.head-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-hi), transparent); box-shadow: 0 0 18px 2px rgba(194, 164, 107, .5); }
@keyframes headscan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
.page-head .wrap, .article-head .wrap { position: relative; }
.page-head .h2, .article-head .h2 { margin-top: 26px; font-size: clamp(40px, 5.6vw, 76px); max-width: 18ch; }
.page-head .lede, .article-head .lede { margin-top: 26px; }
.page-head > .wrap > *, .article-head > .wrap > * { animation: rise 1s var(--ease) both; }
.page-head > .wrap > :nth-child(2), .article-head > .wrap > :nth-child(2) { animation-delay: .1s; }
.page-head > .wrap > :nth-child(3), .article-head > .wrap > :nth-child(3) { animation-delay: .2s; }
.page-head > .wrap > :nth-child(4), .article-head > .wrap > :nth-child(4) { animation-delay: .3s; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 34px 0 0; font: 400 12px/1.4 var(--mono); color: var(--dim); letter-spacing: .04em; }
.article-meta b { color: var(--bone); font-weight: 500; }
.article-meta span + span::before { content: "/"; color: var(--brass); margin-right: 28px; }
.prose { max-width: 720px; padding: 80px 0 110px; }
.prose p, .prose li { color: var(--text); font-size: 18px; line-height: 1.75; }
.prose p { margin: 0 0 24px; }
.prose h2 { font: 300 clamp(28px, 3vw, 38px)/1.15 var(--serif); color: var(--bone); margin: 64px 0 22px; letter-spacing: -.01em; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 26px; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--brass); }
.prose strong { color: var(--bone); font-weight: 500; }
.prose a { color: var(--bone); border-bottom: 1px solid var(--brass); }
.prose blockquote { margin: 44px 0; padding: 28px 0 28px 30px; border-left: 1px solid var(--brass); font: italic 300 clamp(22px, 2.2vw, 28px)/1.45 var(--serif); color: var(--bone); background: linear-gradient(90deg, var(--brass-a), transparent 70%); }
.commit-list { margin: 0 0 40px; border-top: 1px solid var(--line-2); }
.commit-list > div { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.commit-list dt { font: 400 22px/1.3 var(--serif); color: var(--bone); }
.commit-list dd { margin: 0; color: var(--mute); font-size: 16.5px; line-height: 1.7; }
.article-sign { margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--line-2); }
.article-sign .sig { margin: 0 0 12px; font: italic 300 26px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--bone); }
.article-sign p { color: var(--mute); font-size: 15.5px; }
.article-next { margin-top: 40px !important; }
.section.insights { padding-top: 72px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav { gap: 22px; }
  .nav a:not(.btn) i { display: none; }
  .caps, .venture-grid, .insight-list { grid-template-columns: 1fr 1fr; }
  .venture-grid > :last-child, .insight-list > :last-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .steps-rail { display: none; }
  .dossier { grid-template-columns: 1fr 1fr; }
  .dossier li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .dossier li:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--line); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .sidehud { display: none; }
}
@media (max-width: 860px) {
  .nav-toggle { display: block; z-index: 2; }
  .nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; padding: 0 var(--gut); background: rgba(5, 6, 7, .97); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
  .nav a:not(.btn) { font: 300 34px/1 var(--serif); letter-spacing: -.01em; text-transform: none; color: var(--bone); }
  .nav a:not(.btn) i { display: inline; font: 500 11px/1 var(--mono); vertical-align: top; }
  .nav-open .nav { opacity: 1; visibility: visible; }
  .nav-open { overflow: hidden; }
  .hero-strip { grid-template-columns: 1fr 1fr; }
  .hero-strip li:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .founder-grid, .contact-panel { grid-template-columns: 1fr; }
  .portrait { max-width: 420px; }
  .serves { grid-template-columns: 1fr; }
  .serve:nth-child(even) { border-left: 0; padding-left: 76px; }
  .serve:nth-child(even) .serve-n { left: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .brand-mark { width: 60px; }
  .hero { padding-top: 120px; }
  .hero-hud .hud-txt { display: none; }
  .hero-strip { grid-template-columns: 1fr; margin-top: 56px; }
  .hero-strip li, .hero-strip li + li { padding: 16px 0 6px; border-left: 0; }
  .hero-strip li + li { border-top: 1px solid var(--line); }
  .caps, .venture-grid, .insight-list, .steps, .dossier { grid-template-columns: 1fr; }
  .dossier li:nth-child(even) { padding-left: 0; border-left: 0; }
  .dossier li { padding-right: 0; }
  .cap { padding: 30px 24px 28px; }
  .cap-top { margin-bottom: 32px; }
  .acro { margin: 40px 0 44px; }
  .acro-l span { font-size: 10px; letter-spacing: .2em; }
  .bio dl, .form { grid-template-columns: 1fr; }
  .serve { padding: 30px 0 32px 64px !important; }
  .footer-top { grid-template-columns: 1fr; }
  .insight-card { min-height: 0; }
  .intro-hud.h-tr { display: none; }
  .scroll-cue { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; }
  .grain { display: none; }
}

/* Slightly larger reading text (2026-10-10) */
body { font-size: 18px; }
.lede { font-size: clamp(18px, 1.45vw, 21px); }
.cap > p { font-size: 17px; }
.step > p, .dossier p, .serve p, .venture p, .insight-card p { font-size: 16.5px; }
.deliver { font-size: 15.5px !important; }
.meaning-text { font-size: clamp(21px, 2.1vw, 28px); }
.firm-copy p { font-size: 18px; }
.bio > p { font-size: 17px; }
.bio dd { font-size: 16px; }
.prose p, .prose li { font-size: 19px; }
.footer-top p, .footer-top li { font-size: 15.5px; }
.hero-strip span { font-size: 14.5px; }

/* Founder bio sections (2026-10-10) */
.bio .bio-label { margin: 0 0 10px; font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.bio .bio-wide { grid-column: 1 / -1; }
.bio dd ul { margin: 0; padding: 0; list-style: none; }
.bio dd li { position: relative; padding-left: 16px; margin: 0 0 10px; }
.bio dd li:last-child { margin-bottom: 0; }
.bio dd li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: var(--brass); }
.bio dd strong { color: var(--brass-hi); font-weight: 500; }

/* Way back from Insights and articles (2026-10-10) */
.backlink, .prose p.backlink { margin: 0 0 22px; font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.backlink a, .prose .backlink a { color: var(--brass); text-decoration: none; border: 0; background: none; padding: 0; transition: color .2s; }
.backlink a:hover { color: var(--brass-hi); }
.backlink-end, .prose p.backlink-end { margin: 48px 0 18px; padding-top: 24px; border-top: 1px solid var(--line); }

/* About the firm text; bio sits under the portrait (2026-10-10) */
.founder-grid { align-items: start; }
.founder-side .bio { margin-top: 36px; }
.founder-side .bio dl { grid-template-columns: 1fr; gap: 20px; }
.firm-tagline { margin: -18px 0 36px; font: italic 300 clamp(20px, 1.8vw, 24px)/1.4 var(--serif); color: var(--brass-hi); }
.firm-label { margin: 30px 0 12px; font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.firm-copy .firm-label:first-child { margin-top: 0; }
.firm-more { margin: 44px 0 0; }
.firm-list { margin: 0; padding: 0; list-style: none; }
.firm-list li { position: relative; padding-left: 16px; margin: 0 0 14px; color: var(--mute); font-size: 17px; line-height: 1.7; }
.firm-list li::before { content: ""; position: absolute; left: 0; top: .85em; width: 6px; height: 1px; background: var(--brass); }
.firm-list strong { color: var(--bone); font-weight: 500; }
.bio > p strong { color: var(--bone); font-weight: 500; }
/* About: readable section headers and a distinct tone for the founder side (2026-10-10) */
.about .bio .bio-label, .about .bio dt, .about .firm-label { font: 500 12.5px/1.2 var(--mono); letter-spacing: .14em; color: var(--brass); margin-bottom: 12px; }
.about .firm-label { margin-top: 34px; }
.founder-side { padding: clamp(20px, 2.4vw, 32px); background: linear-gradient(180deg, #13120f, #0e0d0b); border: 1px solid rgba(194, 164, 107, .14); }
.founder-side .bio { border-top-color: rgba(194, 164, 107, .14); }
.bio dd { color: var(--mute); } /* plain grey like the summary, so only the highlights stand out (2026-10-10) */
/* Highlighted phrases are italic, not bold (2026-10-10) */
.about em.hl { font-style: italic; font-weight: 400; color: var(--bone); }
/* Header: room for the Home link between 860px and 1280px (2026-10-10) */
svg.brand-mark { display: block; height: auto; overflow: visible; }
@media (max-width: 1280px) { .nav { gap: 24px; } .nav a:not(.btn) i { display: none; } }
@media (max-width: 1080px) { .nav { gap: 18px; } .nav a:not(.btn) { letter-spacing: .08em; } }
@media (min-width: 861px) and (max-width: 1000px) { .nav { gap: 14px; } .nav a:not(.btn) { font-size: 11px; letter-spacing: .05em; } .nav .btn { padding-left: 14px; padding-right: 14px; font-size: 10.5px; } .brand { gap: 10px; } .brand-name { padding-left: 10px; letter-spacing: .22em; } }
.cursor-dot { transform: translate(-100px, -100px); } /* hidden until the mouse first moves */
.cursor-ring { transform: translate(-100px, -100px); }
/* Three capabilities after Online Presence was removed (2026-10-10) */
.caps { grid-template-columns: repeat(3, 1fr); }
.hero-strip { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .caps { grid-template-columns: 1fr 1fr; } .caps > :last-child { grid-column: 1 / -1; } }
@media (max-width: 860px) { .hero-strip { grid-template-columns: repeat(3, 1fr); } .hero-strip li:nth-child(3) { padding-left: 22px; border-left: 1px solid var(--line); } .hero-strip li:nth-child(n+3) { border-top: 0; } }
@media (max-width: 640px) { .caps { grid-template-columns: 1fr; } .hero-strip { grid-template-columns: 1fr; } .hero-strip li:nth-child(3) { padding-left: 0; border-left: 0; } .hero-strip li + li { border-top: 1px solid var(--line); } }
/* "What NLM stands for" letters in the logo's own style, like the footer (2026-10-10) */
.acro-l b.is-mark { display: block; position: relative; font-size: 0; line-height: 0; -webkit-text-stroke: 0; height: clamp(104px, 18vw, 258px); }
.acro-l b.is-mark::after { content: none; }
.acro-l b.is-mark svg { position: absolute; left: 0; top: 0; height: 100%; width: auto; overflow: visible; }
.acro-l b.is-mark .ac-base polygon { fill: none; stroke: rgba(236, 232, 223, .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.acro-l b.is-mark .ac-lit { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease-io) calc(var(--d, 0s) + .5s); }
.acro-l.is-in b.is-mark .ac-lit, html:not(.js) .acro-l b.is-mark .ac-lit { clip-path: inset(0 0 0 0); }
/* Core Experience points without the dash markers (2026-10-10) */
.bio-wide dd li { padding-left: 0; }
.bio-wide dd li::before { content: none; }
/* Point titles match the other highlights: italic, normal weight, same font and colour (2026-10-10) */
.about .bio dd strong, .about .firm-list strong { font-family: var(--sans); font-style: italic; font-weight: 400; color: var(--bone); }
/* Founder side on a light paper tone, to contrast with the dark firm side (2026-10-10) */
.founder-side { background: linear-gradient(180deg, #efebe2, #e4dfd3); border-color: rgba(142, 116, 64, .35); }
.founder-side .portrait-cap b { color: #15140f; }
.founder-side .portrait-cap span { color: #5a564c; }
.founder-side .bio { border-top-color: rgba(142, 116, 64, .3); }
.about .founder-side .bio .bio-label, .about .founder-side .bio dt { color: #7a6232; }
.founder-side .bio > p, .founder-side .bio dd { color: #4a463d; }
.about .founder-side em.hl, .about .founder-side .bio dd strong { color: #15140f; }
/* One text scale across the page (2026-10-10 "sizes are different"):
   body text 16.5px / 1.65 everywhere, both About columns included; card titles 26px */
.cap > p, .step > p, .dossier p, .serve p, .venture-body p, .insight-card p,
.firm-copy p, .firm-list li, .bio > p, .bio dd, .bio dd li { font-size: 16.5px; line-height: 1.65; }
.dossier h3, .serve h3, .insight-card h3, .insight-card h2 { font-size: 26px; }
/* Photo label: company name + italic location line (2026-10-10) */
.portrait-label { right: 18px; display: flex; flex-direction: column; gap: 6px; letter-spacing: 0; }
.portrait-label b { font: 500 11px/1.2 var(--mono); letter-spacing: .14em; color: var(--brass); }
.portrait-label em { font: italic 400 13px/1.3 var(--sans); color: var(--bone); }
/* Photo removed (2026-10-10): company line sits above the name */
.side-co { display: flex; flex-direction: column; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid rgba(142, 116, 64, .3); }
.side-co b { font: 400 26px/1.2 var(--serif); color: #15140f; }
.side-co em { font: italic 400 15px/1.4 var(--sans); color: #4a463d; }
.founder-side .portrait-cap { margin-top: 22px; }
/* Meaning letters now match the footer letters exactly (2026-10-10):
   faint outline only; the coloured letter shows just under the cursor, never fills on scroll */
.acro-l b.is-mark .ac-base polygon { stroke: rgba(236, 232, 223, .12); }
.acro-l b.is-mark .ac-lit, .acro-l.is-in b.is-mark .ac-lit, html:not(.js) .acro-l b.is-mark .ac-lit { clip-path: none; transition: none; -webkit-mask-image: radial-gradient(260px circle at var(--fx, -999px) var(--fy, -999px), #000, transparent 70%); mask-image: radial-gradient(260px circle at var(--fx, -999px) var(--fy, -999px), #000, transparent 70%); }
/* Company line moved to the bottom, under Company (2026-10-10) */
.founder-side .portrait-cap { margin-top: 0; }
.bio dd.side-co { padding-bottom: 0; border-bottom: 0; gap: 6px; }
.bio dd.side-co b { font-size: 24px; }
/* Meaning letters sit closer together, like the footer letters (2026-10-10 "too far apart") */
.acro { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(28px, 4.5vw, 72px); }
.acro-l b.is-mark { width: auto; }
/* Hero headline: the slide-up mask clipped letter tops and the italic overhang (2026-10-10) */
.display .line { padding: .16em .12em .12em; margin: -.16em -.12em -.12em; }
.cursor-ring { will-change: transform; } /* smoother follow (2026-10-10) */

/* Page transitions (2026-10-10): a dark veil with a brass hairline.
   Arriving: the veil lifts on its own (pure CSS, no JS needed). Leaving: main.js adds .is-leaving. */
.page-veil { position: fixed; inset: 0; z-index: 400; pointer-events: none; background: #08090b; animation: veil-out .45s cubic-bezier(.7, 0, .2, 1) 0s both; }
.page-veil i { position: absolute; left: 50%; top: 50%; width: min(38vw, 360px); height: 1px; margin-left: calc(min(38vw, 360px) / -2); background: linear-gradient(90deg, transparent, var(--brass-hi), transparent); transform-origin: center; animation: veil-line-out .4s var(--ease) both; }
@keyframes veil-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes veil-line-out { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(0); opacity: 0; } }
.page-veil.is-leaving { pointer-events: all; animation: veil-in .2s cubic-bezier(.7, 0, .2, 1) both; }
.page-veil.is-leaving i { animation: veil-line-in .2s var(--ease) 0s both; }
@keyframes veil-in { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } }
@keyframes veil-line-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
html:not(.js) .page-veil { display: none; }
@media (prefers-reduced-motion: reduce) { .page-veil, .page-veil i { animation-duration: .01s !important; animation-delay: 0s !important; } }
.more { margin-top: 28px; } /* links sit close to the boxes above them (2026-10-10) */

/* ===== Hidden designs in the black spaces (2026-10-10) =====
   Invisible until hovered. "all" traces itself in; "spot" lights only what is under the cursor;
   the statement band holds a canvas that takes shape as the visitor plays with it. */
.has-ghost, .statement { position: relative; }
.ghost { position: absolute; z-index: 1; top: 0; right: var(--gut); width: min(34vw, 440px); height: 340px; display: none; }
.ghost.is-ready { display: block; }
.ghost svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ghost svg * { vector-effect: none; }
.ghost path, .ghost circle, .ghost rect, .ghost ellipse { fill: none; stroke: rgba(194, 164, 107, .6); stroke-width: 1; }
.ghost .ring { stroke: rgba(194, 164, 107, .28); }
.ghost .dash { stroke: rgba(236, 232, 223, .22); stroke-dasharray: 3 6; }
.ghost .tick { stroke: rgba(194, 164, 107, .45); stroke-dasharray: 1 9; }
.ghost .d { fill: rgba(236, 232, 223, .32); stroke: none; }
.ghost .hot { fill: var(--brass-hi); stroke: none; }
.ghost .pulse { fill: var(--brass-hi); stroke: none; filter: drop-shadow(0 0 4px rgba(230, 205, 150, .9)); }
.ghost .gap { stroke: var(--brass-hi); stroke-dasharray: 2 4; }
.ghost .bars rect { fill: rgba(236, 232, 223, .16); stroke: none; }
.ghost .lead path { stroke: rgba(236, 232, 223, .14); stroke-dasharray: 1 4; }
.ghost .nodes rect { fill: #0b0c0e; stroke: var(--brass); }
.ghost .beam { fill: rgba(194, 164, 107, .12); stroke: none; }
.ghost .sweep { transform-box: view-box; transform-origin: 220px 170px; animation: g-spin 5s linear infinite; }
@keyframes g-spin { to { transform: rotate(360deg); } }
.ghost text { font: 500 9.5px/1 var(--mono); letter-spacing: .16em; fill: var(--brass-hi); stroke: none; }
.ghost .lbl text:last-child { fill: var(--brass-hi); }

/* spot: a whisper of the drawing, lit only under the cursor */
.ghost[data-reveal="spot"] .g-base { opacity: .045; transition: opacity .6s; }
.ghost[data-reveal="spot"] .g-lit { opacity: 0; transition: opacity .7s; -webkit-mask-image: radial-gradient(150px circle at var(--gx, -999px) var(--gy, -999px), #000 25%, transparent 75%); mask-image: radial-gradient(150px circle at var(--gx, -999px) var(--gy, -999px), #000 25%, transparent 75%); }
.ghost[data-reveal="spot"]:hover .g-lit { opacity: 1; transition-duration: .3s; }
.ghost[data-reveal="spot"]:hover .g-base { opacity: .08; }

/* all: nothing until hovered, then the whole piece draws itself */
.ghost[data-reveal="all"] .gd { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-io) .15s; }
.ghost[data-reveal="all"] text, .ghost[data-reveal="all"] .hot, .ghost[data-reveal="all"] .pulse, .ghost[data-reveal="all"] .dash, .ghost[data-reveal="all"] .tick, .ghost[data-reveal="all"] .d, .ghost[data-reveal="all"] .beam { opacity: 0; transition: opacity .6s; }
.ghost[data-reveal="all"].is-on .gd { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-io) calc(var(--i, 0) * 45ms); }
.ghost[data-reveal="all"].is-on text, .ghost[data-reveal="all"].is-on .hot, .ghost[data-reveal="all"].is-on .dash, .ghost[data-reveal="all"].is-on .tick, .ghost[data-reveal="all"].is-on .d, .ghost[data-reveal="all"].is-on .beam { opacity: 1; transition-delay: .55s; }
.ghost[data-reveal="all"].is-on .pulse { opacity: 1; transition-delay: 1s; }

/* placements */
.ghost.g-meaning { top: 64px; width: min(36vw, 470px); height: 400px; }
.has-ghost > .ghost[data-g="radar"] { height: 260px; top: -20px; }
.has-ghost > .ghost[data-g="tree"] { height: 290px; top: -10px; }
.g-field { top: 0; bottom: 0; right: 0; width: 28%; height: auto; }
.g-field canvas { position: absolute; inset: 0; }
.founder-col { display: block; }
.ghost.g-orbit { position: relative; right: auto; width: 100%; height: 280px; margin-top: 40px; }
.ghost.g-path { top: auto; bottom: clamp(30px, 4vw, 56px); left: 50%; right: auto; transform: translateX(-50%); width: min(var(--wrap), calc(100% - var(--gut) * 2)); height: 90px; }
.cursor.is-ghost .cursor-ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-style: dashed; border-color: rgba(194, 164, 107, .7); }
@media (max-width: 1100px), (hover: none) { .ghost, .ghost.is-ready { display: none; } }
.ghost[data-reveal="all"] .nodes rect { fill-opacity: 0; transition: fill-opacity .6s; }
.ghost[data-reveal="all"].is-on .nodes rect { fill-opacity: 1; transition-delay: .5s; }
.meaning-text { font: 400 clamp(18px, 1.45vw, 21px)/1.6 var(--sans); max-width: 56ch; } /* standard font, same as the section intros (2026-10-10) */
/* Hidden designs: readable labels, wider light, and the magnifier (2026-10-10) */
.ghost text { font-size: 11.5px; letter-spacing: .12em; fill: #f1e7cf; paint-order: stroke; stroke: #0a0b0d; stroke-width: 4px; stroke-linejoin: round; }
.ghost[data-reveal="spot"] .g-lit { -webkit-mask-image: radial-gradient(190px circle at var(--gx, -999px) var(--gy, -999px), #000 45%, transparent 85%); mask-image: radial-gradient(190px circle at var(--gx, -999px) var(--gy, -999px), #000 45%, transparent 85%); }
.cursor-lens .lens-ghost { position: relative; inset: auto; top: 0; right: auto; left: 0; bottom: auto; transform: none; margin: 0; display: block; }
.cursor-lens .lens-ghost * { transition: none !important; }
.cursor-lens .lens-ghost .g-lit { opacity: 1; -webkit-mask-image: none; mask-image: none; }

/* Section changes (2026-10-10): word loops between some sections... */
.section.pre-loop { padding-bottom: clamp(64px, 8vw, 110px); }
.marquee-sm { padding: 18px 0; background: #0c0d10; }
.marquee-sm .marquee-track { gap: 36px; animation-duration: 44s; }
.marquee-sm.is-rev .marquee-track { animation-direction: reverse; }
.marquee-sm span { font-size: clamp(24px, 2.8vw, 38px); color: rgba(236, 232, 223, .82); }
.marquee-sm span.o { -webkit-text-stroke: 1px rgba(194, 164, 107, .55); }
/* ...and soft lilac light rising from the bottom of others, like stage lights */
.uplight { isolation: isolate; }
.uplight::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(75%, 560px); z-index: -1; pointer-events: none;
  background:
    conic-gradient(from 168deg at 20% 104%, transparent 0deg, rgba(190, 165, 255, .12) 9deg, rgba(196, 172, 255, .2) 12deg, rgba(190, 165, 255, .12) 15deg, transparent 24deg),
    conic-gradient(from 184deg at 80% 104%, transparent 0deg, rgba(176, 150, 252, .1) 8deg, rgba(184, 160, 255, .17) 11deg, rgba(176, 150, 252, .1) 14deg, transparent 22deg),
    radial-gradient(34% 60% at 20% 100%, rgba(176, 146, 255, .2), transparent 70%),
    radial-gradient(30% 55% at 80% 100%, rgba(166, 140, 250, .16), transparent 70%);
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); mask-image: linear-gradient(0deg, #000 30%, transparent);
  animation: uplight 9s ease-in-out infinite alternate; }
.uplight#capabilities::after, .uplight.ventures::after, .site-footer.uplight::after { animation-delay: -4s; }
/* the same lilac light also falls from the top of these sections (2026-10-10) */
.uplight::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(60%, 460px); z-index: -1; pointer-events: none;
  background:
    conic-gradient(from -12deg at 20% -4%, transparent 0deg, rgba(190, 165, 255, .1) 9deg, rgba(196, 172, 255, .17) 12deg, rgba(190, 165, 255, .1) 15deg, transparent 24deg),
    conic-gradient(from 4deg at 80% -4%, transparent 0deg, rgba(176, 150, 252, .08) 8deg, rgba(184, 160, 255, .14) 11deg, rgba(176, 150, 252, .08) 14deg, transparent 22deg),
    radial-gradient(34% 60% at 20% 0%, rgba(176, 146, 255, .17), transparent 70%),
    radial-gradient(30% 55% at 80% 0%, rgba(166, 140, 250, .13), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent);
  animation: uplight 9s ease-in-out infinite alternate; animation-delay: -2s; }
@media (prefers-reduced-motion: reduce) { .uplight::before { animation: none; } }
/* the footer's loop sits at its top edge */
.site-footer .footer-loop { margin: -88px 0 72px; position: relative; z-index: 1; }
@keyframes uplight { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .uplight::after { animation: none; } }
/* The net now surrounds the whole statement and sits behind the text (2026-10-10) */
.g-field { inset: 0; width: auto; height: auto; right: 0; z-index: 0; pointer-events: none; }
.statement > .wrap { position: relative; z-index: 1; }
.statement.is-gap { cursor: pointer; }
/* About: world map. Ontario is marked; hover reveals countries; clicking Ontario starts the connections (2026-10-10) */
.ghost.g-orbit { height: 250px; }
.ghost[data-g="globe"] .d { fill: rgba(236, 232, 223, .55); }
.ghost[data-g="globe"] text { font-size: 10px; letter-spacing: .1em; }
.g-home { position: absolute; inset: 0; pointer-events: none; }
.g-home svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-home .home-dot { fill: var(--brass-hi); stroke: none; filter: drop-shadow(0 0 5px rgba(230, 205, 150, .9)); }
.g-home .home-ring { fill: none; stroke: rgba(230, 205, 150, .6); transform-box: fill-box; transform-origin: center; animation: g-home 2.6s ease-out infinite; }
@keyframes g-home { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.g-home .home-hit { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
.g-home text { fill: rgba(241, 231, 207, .55); }
.g-home .arc { fill: none; stroke: rgba(230, 205, 150, .75); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease-io); }
.g-home .end, .g-home .arc-pulse { opacity: 0; transition: opacity .4s; }
.g-home .end { fill: var(--brass-hi); stroke: none; }
.is-linked .g-home .arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease-io) calc(var(--i, 0) * 110ms); }
.is-linked .g-home .end { opacity: 1; transition-delay: calc(var(--i, 0) * 110ms + 1s); }
.is-linked .g-home .arc-pulse { opacity: 1; transition-delay: 1.6s; }
.is-linked .g-home text { fill: var(--brass-hi); }
.site-footer.uplight::before { top: 76px; }
.acro-l { border-top: 0; } /* divider lines removed (2026-10-11) */
.meaning-text { color: var(--mute); } /* same colour as every section intro (2026-10-11) */
.site-header.is-solid, body:not(.home) .site-header { background: rgba(7, 8, 10, .97); } /* stays dark over the light founder panel (2026-10-11) */
.site-footer.uplight { border-top: 0; } /* the footer loop carries the line itself, like every other loop */
@media (min-width: 861px) { .founder-grid { grid-template-columns: 7fr 5fr; } .founder-col { order: 2; } .founder-copy { order: 1; } } /* founder panel on the right (2026-10-11) */

/* NLM + FlintLever pairing (capabilities) */
.duo { margin-top: 56px; padding: 44px 40px 40px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(194,164,107,.05), transparent 70%), linear-gradient(180deg, var(--panel), var(--carbon)); }
.duo .eyebrow { margin-bottom: 30px; }
.duo-grid { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.duo-side { display: flex; flex-direction: column; }
.duo-side .chips { margin-top: auto; }
.duo-side .duo-tag { line-height: 28px; }
.duo-side h3 { margin: 12px 0 14px; color: var(--bone); }
.duo-side p { margin: 0 0 20px; color: var(--mute); max-width: 44ch; }
.duo-tag { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.duo-link { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.duo-link span { flex: 1; width: 1px; background: linear-gradient(180deg, transparent, var(--line-3), transparent); }
.duo-link b { font: 300 22px/1 var(--serif); color: var(--brass-hi); }
.duo-close { margin: 26px 0 0; font: 300 clamp(19px, 1.6vw, 23px)/1.5 var(--serif); color: var(--text); max-width: 62ch; }
@media (max-width: 960px) {
  .duo { padding: 32px 22px 28px; }
  .duo-grid { grid-template-columns: 1fr; }
  .duo-link { flex-direction: row; margin: 18px 0 22px; }
  .duo-link span { height: 1px; width: auto; background: linear-gradient(90deg, transparent, var(--line-3), transparent); }
}

/* All services: expandable list under Capabilities (NLM restructure) */
.all-services { margin-top: 56px; border-top: 1px solid var(--line-2); }
.all-services > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 24px; padding: 28px 0; font: 500 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.all-services > summary::-webkit-details-marker { display: none; }
.all-services > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 1px solid var(--line-2); color: var(--brass); font: 300 24px/1 var(--serif); transition: transform .5s var(--ease), border-color .4s; }
.all-services > summary:hover::after, .all-services[open] > summary::after { border-color: rgba(194, 164, 107, .45); }
.all-services[open] > summary::after { transform: rotate(45deg); }
.all-services > summary:focus-visible { outline: 1px solid var(--brass); outline-offset: 6px; }
.sum-count { color: var(--dim); letter-spacing: .08em; text-transform: none; font-size: 12px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-bottom: 8px; }
.svc { padding: 34px 36px 32px; }
.svc-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 30px; }
.svc-area { font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.svc h3 { font-size: 24px; margin-bottom: 12px; }
.svc > p { margin: 0 0 24px; color: var(--mute); font-size: 16px; line-height: 1.6; }
.svc > .svc-label { margin: 0 0 4px; font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.svc .chips { margin-top: 0; padding-top: 16px; }
@media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .svc { padding: 28px 22px 26px; } .all-services > summary { font-size: 12px; gap: 16px; } .sum-count { display: none; } }

/* Venture grid with four products (2 x 2) */
.venture-grid--four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1080px) { .venture-grid--four > :last-child { grid-column: auto; } }
@media (max-width: 640px) { .venture-grid--four { grid-template-columns: 1fr; } }

/* AI Enablement Engine card: readiness scores filling in */
.vui-score p { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 12px; margin: 0 0 16px; font: 500 11px/1 var(--mono); color: var(--mute); letter-spacing: .04em; text-transform: uppercase; }
.vui-score p i { display: block; height: 8px; width: var(--w); background: var(--line-3, #3a3a3a); transform-origin: left; animation: scorefill 6s var(--ease) infinite; }
@keyframes scorefill { 0% { transform: scaleX(0); } 35%, 100% { transform: scaleX(1); } }
.vui-score p:nth-child(2) i { animation-delay: .3s; } .vui-score p:nth-child(3) i { animation-delay: .6s; } .vui-score p:nth-child(4) i { animation-delay: .9s; }
.vui-score p.hl { color: var(--brass-hi); }
.vui-score p.hl i { background: var(--brass); box-shadow: 0 0 10px rgba(194, 164, 107, .4); }

/* About: founder panel removed (2026-10-17). The world map now stays beside the firm text while it is read */
@media (min-width: 861px) { .founder-col { position: sticky; top: 120px; align-self: start; } .founder-col .ghost.g-orbit { margin-top: 96px; } }

/* ===== Navigation pass (2026-10-17) ===== */
/* F4: the main landmark takes focus from the skip link without a ring */
main:focus { outline: none; }
section[tabindex="-1"]:focus, article[tabindex="-1"]:focus, div[tabindex="-1"]:focus { outline: none; }   /* landing blocks of in-page links */
/* F6: the phone menu scrolls on short screens, holds the page still, and uses two columns in landscape */
@media (max-width: 860px) { .nav { overflow-y: auto; overscroll-behavior: contain; } html:has(body.nav-open) { overflow: hidden; } }
@media (max-width: 860px) and (max-height: 520px) { .nav { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 12px 40px; padding-top: 72px; } .nav a:not(.btn) { font-size: 28px; justify-self: start; } .nav .btn { grid-column: 1 / -1; justify-self: start; } }
/* F8: the menu item for where you are */
.nav a[aria-current]:not(.btn) { color: var(--bone); }
.nav a[aria-current]:not(.btn)::after { transform: scaleX(1); transform-origin: left; }
/* F10: landings and focused items stay clear of the fixed header */
html { scroll-padding-top: 84px; scroll-padding-bottom: 16px; }
main > section[id] { scroll-margin-top: -84px; } /* section jumps land exactly where they did before */
.home #insights { scroll-margin-top: calc(clamp(96px, 13vw, 168px) - 156px); } /* normal section padding - 72px own padding - 84px */
/* F13: a focused block shows at once */
html.js .reveal:focus-within { opacity: 1; transform: none; transition-duration: .2s; transition-delay: 0s; }
/* F15: larger tap targets on phones */
.backlink a, .prose .backlink a { display: inline-flex; align-items: center; padding: 17px 6px; margin: -17px -6px; } /* 11px text + 34px = 45px tall */
@media (max-width: 860px) { .footer-top ul { gap: 0; } .footer-top li a { display: inline-block; padding: 10px 0; } .footer-top .brand { min-height: 44px; } .footer-bottom > span:last-child { line-height: 44px; } .footer-bottom a { display: inline-block; padding: 0; margin: 0; } } /* each wrapped line of footer-bottom links is its own 44px row, so no link covers another */
@media (hover: none) { .link { padding-top: 23px; margin-top: -23px; } }
.intro-skip { min-height: 44px; padding: 14px 16px; }
/* F16: a compact Contact button beside the menu button on phones */
.head-cta { display: none; }
@media (max-width: 860px) { .site-header .wrap { gap: 12px; } .head-cta { display: inline-flex; margin-left: auto; padding: 0 14px; height: 44px; font-size: 10.5px; letter-spacing: .14em; } }
@media (max-width: 359px) { .site-header .brand-name { display: none; } } /* below 360px the NLM mark alone is the home link, so Contact never covers the name */
/* F19: product-card loops move with transforms only (no layout every frame) */
.vui-wave i { height: 90%; transform: scaleY(.333); transform-origin: center; animation-name: eq2; }
@keyframes eq2 { from { transform: scaleY(.133); } to { transform: none; } }
.vui-doc i { width: var(--w); transform: scaleX(0); transform-origin: left; animation-name: type2; }
@keyframes type2 { 0% { transform: scaleX(0); } 30%, 85% { transform: none; } 100% { transform: none; opacity: 0; } }
.vui::after { top: 0; transform: translateY(-100%); animation-name: sweep2; }
@keyframes sweep2 { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
/* F20: decorative loops pause while off screen */
.fx-off, .fx-off *, .fx-off::before, .fx-off::after, .fx-off *::before, .fx-off *::after { animation-play-state: paused !important; }
/* F22: the side readout only where it has room */
@media (max-width: 1340px) { .sidehud { display: none; } }
/* F23: content sits above the hidden drawings, so clicks reach it */
.has-ghost > .insight-list, .has-ghost > .steps, .has-ghost > .dossier, .has-ghost > .serves, .has-ghost > .caps, .has-ghost > .venture-grid { position: relative; z-index: 2; }
/* F24: cursor polish */
.cursor.is-away .cursor-dot, .cursor.is-away .cursor-ring { opacity: 0; transition: opacity .2s; }
html.has-cursor summary, html.has-cursor label, html.has-cursor .statement.is-gap, html.has-cursor .g-home .home-hit { cursor: none; }
/* F26: the summary's plus sign is decoration; the footer link columns form a nav landmark without changing the grid */
.all-services > summary::after { content: "+" / ""; }
.footer-top > nav { display: contents; }
/* F27: close the long services list from its end */
.svc-close { background: none; border: 0; cursor: pointer; margin-top: 32px; padding: 0 0 8px; }
@media (hover: none) { .svc-close { padding-top: 23px; margin-top: 9px; } }
/* F28: the menu button reads clearly on phones */
.nav-toggle { border-color: rgba(236, 232, 223, .28); }
.nav-toggle span { height: 1.5px; }
/* Extra: the giant footer letters never cover the footer links (their text fallback overlaps them when the logo file can't load) */
.footer-giant { pointer-events: none; }

/* One structure (2026-10-17): hero strip items link to their capability card */
.hero-strip li { display: block; }
.hero-strip li > a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; color: inherit; text-decoration: none; }
.hero-strip li > a:hover b, .hero-strip li > a:focus-visible b { color: var(--brass-hi); }
.hero-strip li > a:focus-visible { outline-offset: 8px; }
/* Capability cards: the situations each line of work fits */
.cap .fits { margin: -8px 0 26px; color: var(--mute); font-size: 14.5px; line-height: 1.6; }
.cap .fits span { display: block; font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; }
/* About: the three letters sit beside the firm text (moved from the old "What NLM stands for" section) */
.founder-col .meaning-block .firm-label { margin: 0 0 22px; }
.founder-col .acro { margin: 0 0 26px; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(18px, 2.6vw, 40px); }
.founder-col .acro-l b { font-size: clamp(60px, 7.6vw, 112px); }
.founder-col .acro-l b.is-mark { height: clamp(68px, 8vw, 118px); }
.founder-col .acro-l span { margin-top: 12px; font-size: 10.5px; letter-spacing: .22em; }
.founder-col .meaning-text { max-width: 34ch; font-size: clamp(16px, 1.2vw, 18px); }
@media (max-width: 860px) { .founder-col .acro-l b.is-mark { height: clamp(60px, 13vw, 104px); } .founder-col .meaning-block { margin-bottom: 40px; } }
/* Visitors who ask the system for a larger or higher-contrast pointer keep it */
@media (prefers-contrast: more), (forced-colors: active) {
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary, html.has-cursor label, html.has-cursor .statement.is-gap, html.has-cursor .g-home .home-hit { cursor: auto; }
  html.has-cursor .cursor, html.has-cursor .cursor-lens { display: none; }
}