/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bg: #0a162e;
  --surface: #12203a;
  --surface-2: #1a2a46;
  --line: #2c3f5c;
  --structural: #6E8FAE;
  --structural-dim: #4A5F73;
  --signal: #D4874E;
  --signal-dim: #9C6338;
  --text: #EDE9E2;
  --text-dim: #A39D93;
  --text-faint: #6B665F;

  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-mono: "SF Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;

  --rail-w: 56px;
  --measure: 62ch;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #EFF1F1; --surface: #FFFFFF; --surface-2: #E4E7E7; --line: #CBD0D0;
    --structural: #3D5871; --structural-dim: #6E8FAE;
    --signal: #B35F2A; --signal-dim: #D4874E;
    --text: #201F24; --text-dim: #56534C; --text-faint: #8B857C;
  }
}
:root[data-theme="dark"]{
  --bg: #0a162e; --surface: #12203a; --surface-2: #1a2a46; --line: #2c3f5c;
  --structural: #6E8FAE; --structural-dim: #4A5F73;
  --signal: #D4874E; --signal-dim: #9C6338;
  --text: #EDE9E2; --text-dim: #A39D93; --text-faint: #6B665F;
}
:root[data-theme="light"]{
  --bg: #EFF1F1; --surface: #FFFFFF; --surface-2: #E4E7E7; --line: #CBD0D0;
  --structural: #3D5871; --structural-dim: #6E8FAE;
  --signal: #B35F2A; --signal-dim: #D4874E;
  --text: #201F24; --text-dim: #56534C; --text-faint: #8B857C;
}

*{ box-sizing: border-box; }
html{ background: var(--bg); }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection{ background: var(--signal); color: var(--bg); }
a{ color: var(--structural); }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--signal); outline-offset: 3px; }
h1,h2,h3{ font-family: var(--font-display); text-wrap: balance; margin: 0; }

/* ============================================================
   COORDINATE RAIL
   ============================================================ */
.rail{
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 24px 0; z-index: 40; background: var(--bg);
}
.rail__mark{
  writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em; color: var(--text-faint); text-transform: uppercase;
}
.rail__ticks{ display: flex; flex-direction: column; gap: 6px; align-items: center; }
.rail__tick{ width: 8px; height: 1px; background: var(--line); }
.rail__tick--on{ width: 14px; background: var(--signal); }
.theme-toggle{
  writing-mode: vertical-rl; background: none; border: 1px solid var(--line); color: var(--text-dim);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; padding: 12px 6px;
  min-width: 28px; min-height: 72px; cursor: pointer; text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.theme-toggle:hover{ border-color: var(--signal); color: var(--signal); background: var(--surface); }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--signal); color: var(--bg);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; padding: 12px 18px;
}
.skip-link:focus{ left: var(--rail-w); top: 8px; outline: 2px solid var(--text); outline-offset: 2px; }
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   SHELL / TOP NAV
   ============================================================ */
.shell{ margin-left: var(--rail-w); }
.topnav{
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: 2px; overflow-x: auto;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 0 clamp(16px, 5vw, 90px);
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar{ display: none; }
.topnav a{
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; color: var(--text-dim);
  padding: 15px 13px; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.topnav a:hover{ color: var(--signal); border-color: var(--signal-dim); }
.topnav a.is-active{ color: var(--signal); border-color: var(--signal); }
@media (max-width: 700px){
  .topnav{
    flex-wrap: wrap; overflow-x: visible; row-gap: 0;
    padding: 0 clamp(10px, 3vw, 24px);
  }
  .topnav a{
    padding: 12px 10px; font-size: 10px; letter-spacing: 0.1em;
  }
}

.sheet{
  position: relative;
  padding: clamp(64px, 10vw, 128px) clamp(24px, 6vw, 96px);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 46px;
}
.sheet--tight{ padding-top: clamp(40px, 6vw, 64px); }
.sheet__label{
  position: absolute; top: clamp(24px, 4vw, 40px); left: clamp(24px, 6vw, 96px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-faint);
}
.sheet__label b{ color: var(--signal); font-weight: 600; }

/* ============================================================
   PAGE HERO (sub-pages)
   ============================================================ */
.page-hero{ padding-top: clamp(88px, 13vw, 148px); max-width: 74ch; }
.page-hero__eyebrow{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--structural); margin: 0 0 16px; display: flex; align-items: center; gap: 10px;
}
.page-hero__eyebrow::before{ content: ""; width: 22px; height: 1px; background: var(--structural); display: inline-block; flex-shrink: 0; }
.page-hero h1{
  font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.02; margin-bottom: 20px; max-width: 20ch;
}
.page-hero h1 em{ font-style: normal; color: var(--signal); }
.page-hero p.lede{
  font-family: var(--font-body); font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-dim); max-width: 58ch; margin: 0 0 8px;
}

/* ============================================================
   HOME HERO — Five P Operating Model
   ============================================================ */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hero{
  padding-top: clamp(72px, 10vw, 110px);
  padding-bottom: clamp(40px, 6vw, 64px);
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, color-mix(in srgb, var(--structural) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 12% 20%, color-mix(in srgb, var(--signal) 8%, transparent), transparent 60%),
    var(--bg);
}
.hero--om{ display: block; }
.hero__name{
  font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 0.98; margin: 0 0 6px; color: var(--text);
}
.hero__phonetic{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 22px;
}
.hero__phonetic::before{ content: "/ "; }
.hero__phonetic::after{ content: " /"; }
.hero__eyebrow{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--structural); margin: 0 0 16px; display: flex; align-items: center; gap: 10px;
}
.hero__eyebrow::before{ content: ""; width: 22px; height: 1px; background: var(--structural); display: inline-block; flex-shrink: 0; }
.hero h1{
  font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.02; margin-bottom: 18px; max-width: 14ch;
}
.hero h1 em{ font-style: normal; color: var(--signal); }
.hero p.lede{
  font-family: var(--font-body); font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--text-dim); max-width: 34ch; margin: 0 0 24px; line-height: 1.55;
}
.hero__ctas{ display: flex; gap: 14px; flex-wrap: wrap; }

.hero-om{
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(320px, 1.35fr) minmax(200px, 0.85fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.hero-om__left{ min-width: 0; }
.hero-om__right{
  min-width: 0;
  padding-left: clamp(0px, 1vw, 12px);
  border-left: 1px solid color-mix(in srgb, var(--signal) 55%, var(--line));
}
.hero-om__stance{
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--text); margin: 0 0 22px; max-width: 22ch;
}
.hero-om__domains{
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.hero-om__domains li{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text);
  transition: color .2s ease;
  cursor: default;
}
.hero-om__domains li:hover{ color: var(--signal); }
.hero-om__close{
  font-family: var(--font-body); font-size: 1rem; color: var(--text-dim); margin: 0;
}

/* Operating model diagram */
.opmodel{ width: 100%; max-width: 560px; margin: 0 auto; }
.opmodel__stage{
  position: relative; width: 100%; aspect-ratio: 1; max-width: 520px; margin: 0 auto;
}
.opmodel__geo{
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.opmodel__orbit{
  stroke: color-mix(in srgb, var(--signal) 55%, var(--line));
  stroke-width: 0.75; opacity: 0.75;
}
.opmodel__orbit--a{
  stroke: var(--signal); stroke-width: 1.05; opacity: 0.55;
}
.opmodel__orbit--b{
  stroke: color-mix(in srgb, var(--signal) 40%, var(--line));
  opacity: 0.4; stroke-width: 0.65;
}
.opmodel__orbit--dots{
  stroke: var(--signal); stroke-width: 0.7; opacity: 0.72;
  stroke-dasharray: 0.9 2.2;
}
.opmodel__orbit--ticks{
  stroke: var(--signal); stroke-width: 1.35; opacity: 0.35;
  stroke-dasharray: 0.35 3.8; stroke-linecap: butt;
}
.opmodel__cycle{
  stroke: color-mix(in srgb, var(--signal) 70%, transparent);
  stroke-width: 0.55; opacity: 0.55;
}
.opmodel__geo line{
  stroke: color-mix(in srgb, var(--signal) 35%, var(--line));
  stroke-width: 0.75; opacity: 0.55;
  transition: stroke .3s ease, stroke-width .3s ease, opacity .3s ease;
}
.opmodel.is-active .opmodel__geo line{ opacity: 0.22; }
.opmodel__geo line.is-on{
  stroke: var(--signal); stroke-width: 1.15; opacity: 1 !important;
}
.opmodel__core{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(34%, 150px); text-align: center; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.opmodel__hub{
  width: 12px; height: 12px; background: var(--signal);
  transform: rotate(45deg);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 16%, transparent),
              0 0 0 1px var(--structural);
  transition: transform .3s ease, box-shadow .3s ease;
}
.opmodel.is-active .opmodel__hub{
  transform: rotate(45deg) scale(1.12);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--signal) 22%, transparent),
              0 0 0 1px var(--signal);
}
.opmodel__label{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--signal); margin: 0; line-height: 1.35;
}
.opmodel__loop{
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); margin: 0;
}
.opmodel__node{
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  appearance: none; -webkit-appearance: none;
  width: min(148px, 34%); text-align: left;
  font: inherit; color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line); padding: 10px 12px;
  backdrop-filter: blur(6px);
  transition: border-color .25s ease, background .25s ease, opacity .25s ease,
              transform .25s ease, color .25s ease, box-shadow .25s ease;
}
.opmodel__node[data-p="people"]{ text-align: center; }
.opmodel__node[data-p="picture"],
.opmodel__node[data-p="plan"]{ text-align: right; }
.opmodel__node[data-p="perform"],
.opmodel__node[data-p="pivot"]{ text-align: left; }
.opmodel__node:hover, .opmodel__node:focus-visible, .opmodel__node.is-on{
  outline: none; border-color: var(--signal); background: var(--surface-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 35%, transparent);
  transform: translate(-50%, -50%) scale(1.03);
}
.opmodel.is-active .opmodel__node:not(.is-on){ opacity: 0.38; }
.opmodel__idx{
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--text-faint); margin-bottom: 3px;
}
.opmodel__node.is-on .opmodel__idx,
.opmodel__node:hover .opmodel__idx{ color: var(--signal); }
.opmodel__title{
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text); line-height: 1.1;
}
.opmodel__node.is-on .opmodel__title{ color: var(--signal); }
.opmodel__blurb{
  display: block; margin-top: 6px;
  font-family: var(--font-body); font-size: 0.82rem; line-height: 1.35;
  color: var(--text-dim); max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease, margin .25s ease;
}
.opmodel__node.is-on .opmodel__blurb,
.opmodel__node:hover .opmodel__blurb,
.opmodel__node:focus-visible .opmodel__blurb{
  max-height: 4em; opacity: 1; margin-top: 6px;
}
/* Regular pentagon — People centered at top */
.opmodel__node[data-p="people"]{ left: 50%; top: 8%; }
.opmodel__node[data-p="picture"]{ left: 89%; top: 37%; }
.opmodel__node[data-p="plan"]{ left: 78%; top: 84%; }
.opmodel__node[data-p="perform"]{ left: 22%; top: 84%; }
.opmodel__node[data-p="pivot"]{ left: 11%; top: 37%; }
.opmodel__hint{
  margin: 14px 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
}
.opmodel__desc{
  min-height: 2.6em; margin: 8px 0 0; text-align: center;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--text-dim);
  transition: color .25s ease;
}
.opmodel.is-active .opmodel__desc{ color: var(--text); }

/* Hero proof strip */
.hero-proof{ margin-top: clamp(36px, 5vw, 56px); }
.hero-proof__label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px;
}
.hero-proof__strip{
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.hero-proof__item{
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 16px 14px; min-width: 0;
  transition: background .2s ease;
}
.hero-proof__item:hover{ background: var(--surface-2); }
.hero-proof__v{
  font-family: var(--font-mono); font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-variant-numeric: tabular-nums; color: var(--signal); margin: 0 0 6px;
}
.hero-proof__k{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 6px; line-height: 1.35;
}
.hero-proof__org{
  font-size: 0.85rem; color: var(--text-dim); margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.org-mark{
  width: 16px; height: 16px; flex: 0 0 16px; display: inline-block;
  background-color: var(--tool-color, var(--structural));
  -webkit-mask-image: var(--tool-icon); mask-image: var(--tool-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}
a.org-link, a.brand-strip__item, a.hero-proof__org{
  text-decoration: none; color: inherit; cursor: pointer;
}
a.org-link{
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s ease;
}
a.org-link:hover, a.org-link:focus-visible{
  color: var(--signal); outline: none;
}
a.hero-proof__org:hover, a.hero-proof__org:focus-visible{
  color: var(--signal); outline: none;
}
a.org-link:hover .org-mark, a.org-link:focus-visible .org-mark,
a.brand-strip__item:hover .org-mark, a.brand-strip__item:focus-visible .org-mark,
a.hero-proof__org:hover .org-mark, a.hero-proof__org:focus-visible .org-mark{
  transform: translateY(-1px) scale(1.08);
  filter: brightness(1.15);
}
.brand-rail{ margin-top: 28px; }
.brand-rail .tool-rail__item{ flex-basis: 64px; width: 64px; min-height: 64px; }

.brand-strip{
  display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 28px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.brand-strip__item{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim);
  padding: 8px 12px; border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; transition: border-color .2s ease, color .2s ease, background .2s ease;
}
a.brand-strip__item{ cursor: pointer; }
a.brand-strip__item:hover, a.brand-strip__item:focus-visible{
  border-color: var(--signal); color: var(--signal); background: var(--surface-2); outline: none;
}
.brand-strip__item .org-mark{ width: 18px; height: 18px; flex-basis: 18px; }

.fit-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 28px;
}
.fit-card{ background: var(--surface); padding: 22px 20px; }
.fit-card h3{
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  margin: 0 0 12px; color: var(--signal);
}
.fit-card ul{ margin: 0; padding-left: 18px; color: var(--text-dim); }
.fit-card li{ margin-bottom: 8px; }
@media (max-width: 900px){
  .fit-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 1100px){
  .hero-om{
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas:
      "left center"
      "right center";
  }
  .hero-om__left{ grid-area: left; }
  .opmodel{ grid-area: center; }
  .hero-om__right{
    grid-area: right; border-left: none; padding-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--signal) 55%, var(--line));
    padding-top: 20px;
  }
  .hero-proof__strip{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px){
  .hero-om{ grid-template-columns: 1fr; grid-template-areas: none; }
  .hero-om__left, .opmodel, .hero-om__right{ grid-area: auto; }
  .hero h1{ max-width: 14ch; font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero p.lede{ max-width: 42ch; }
  .hero-om__right{
    border-top: 1px solid color-mix(in srgb, var(--signal) 55%, var(--line));
    padding-top: 22px;
  }
  .hero-om__stance{ max-width: 28ch; }
  .opmodel__node{ width: min(132px, 38%); padding: 8px 10px; }
  .opmodel__title{ font-size: 0.82rem; }
  .opmodel__blurb{ font-size: 0.75rem; }
  .hero-proof__strip{ grid-template-columns: repeat(2, 1fr); }
}
.btn{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding: 13px 22px; border: 1px solid var(--line); color: var(--text);
  display: inline-block; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.btn--solid{ background: var(--signal); border-color: var(--signal); color: var(--bg); }
.btn--solid:hover{ background: var(--signal-dim); border-color: var(--signal-dim); }
.btn--ghost:hover{ border-color: var(--signal); color: var(--signal); background: var(--surface); }

.readout{ border: 1px solid var(--line); background: var(--surface); transition: border-color .25s ease; }
.readout:hover{ border-color: var(--structural-dim); }
.readout__row{
  display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px;
  border-bottom: 1px solid var(--line); gap: 12px;
  transition: background .2s ease;
}
.readout__row:last-child{ border-bottom: none; }
.readout__row:hover{ background: var(--surface-2); }
.readout__row:hover .readout__k{ color: var(--text-dim); }
.readout__k{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); transition: color .2s ease;
}
.readout__v{ font-family: var(--font-mono); font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--signal); white-space: nowrap; }

/* ============================================================
   SHARED PROSE
   ============================================================ */
.section-kicker{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--structural); margin: 0 0 14px; }
.section-title{ font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 20px; max-width: 24ch; }
.section-lede{ color: var(--text-dim); max-width: var(--measure); margin: 0 0 32px; }
.xlink{
  font-family: var(--font-mono); font-size: 0.95em; text-decoration: none; color: var(--signal);
  border-bottom: 1px solid var(--signal-dim);
  transition: border-color .2s ease, color .2s ease, letter-spacing .2s ease;
}
.xlink:hover{ border-color: var(--signal); letter-spacing: 0.02em; }

.next-links{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.next-link{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--text-dim); border: 1px solid var(--line); padding: 10px 16px; display: inline-block;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.next-link:hover{ border-color: var(--signal); color: var(--signal); background: var(--surface); }

.teaser-row{ display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; }

/* ============================================================
   PROFILE / ABOUT
   ============================================================ */
.profile{ display: grid; grid-template-columns: 220px 1fr; gap: clamp(28px, 5vw, 64px); }
@media (max-width: 760px){ .profile{ grid-template-columns: 1fr; } }
.profile h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -0.01em; position: sticky; top: 32px; }
.profile__body p{ max-width: var(--measure); color: var(--text-dim); margin: 0 0 18px; }
.profile__body p:first-child{ color: var(--text); font-size: 1.08rem; }

.pull{
  margin: 8px 0 26px; padding: 4px 0 4px 22px; border-left: 2px solid var(--signal); max-width: var(--measure);
  font-family: var(--font-body); font-style: italic; font-size: 1.15rem; line-height: 1.55; color: var(--text);
}

.chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; padding: 6px 11px;
  border: 1px solid var(--line); color: var(--text-dim);
  text-decoration: none; display: inline-block;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
a.chip{ cursor: pointer; }
.chip:hover{ border-color: var(--signal); color: var(--signal); background: var(--surface-2); }

.oss-pm{
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--line); background: var(--line);
}
.oss-pm__item{
  background: var(--surface); padding: 16px 18px;
  transition: background .2s ease;
}
.oss-pm__item:hover{ background: var(--surface-2); }
.oss-pm__head{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  margin-bottom: 6px;
}
.oss-pm__name{
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--text); text-decoration: none;
}
.oss-pm__name:hover, .oss-pm__name:focus-visible{ color: var(--signal); outline: none; }
.oss-pm__fit{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--structural);
}
.oss-pm__blurb{
  margin: 0 0 8px; color: var(--text-dim); max-width: var(--measure);
  font-size: 0.95rem; line-height: 1.45;
}
.oss-pm__meta{
  margin: 0; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--text-dim);
}
.oss-pm__meta a{
  color: var(--text-dim); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.oss-pm__meta a:hover, .oss-pm__meta a:focus-visible{
  color: var(--signal); border-bottom-color: var(--signal); outline: none;
}

/* ============================================================
   METHOD — FIVE P LIST + CALLOUTS
   ============================================================ */
.fivep-arrows{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: 4px 0 18px; padding: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim);
}
.fivep-arrows__sep{ color: var(--signal); letter-spacing: 0; }
.fivep-list{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 8px 0 8px; }
@media (max-width: 900px){
  .fivep-list{ grid-template-columns: repeat(2, 1fr); }
  .fivep-item:last-child{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .fivep-list{ grid-template-columns: 1fr; }
  .fivep-item:last-child{ grid-column: auto; }
  .fivep-item{ padding: 18px 16px; }
}
.fivep-item{
  background: var(--surface); padding: 22px 20px;
  transition: background .25s ease, box-shadow .25s ease;
}
.fivep-item:hover{ background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--structural-dim); }
.fivep-item__n{ font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); transition: color .2s ease; }
.fivep-item:hover .fivep-item__n{ color: var(--signal); }
.fivep-item h3{ font-size: 1.08rem; font-weight: 700; color: var(--signal); margin: 6px 0 10px; }
.fivep-item p{ font-size: 0.92rem; color: var(--text-dim); margin: 0; transition: color .2s ease; }
.fivep-item:hover p{ color: var(--text); }
.fivep-close{ font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em; color: var(--text-dim); margin: 24px 0 40px; }
.fivep-close b{ color: var(--text); }

.callout{
  border-left: 2px solid var(--structural); background: var(--surface); padding: 22px 26px;
  margin: 36px 0; max-width: var(--measure);
  transition: border-color .25s ease, background .25s ease;
}
.callout:hover{ border-left-color: var(--signal); background: var(--surface-2); }
.callout p{ color: var(--text-dim); margin: 0 0 10px; }
.callout .say{ font-family: var(--font-body); font-style: italic; color: var(--text); font-size: 1.05rem; margin: 0; }

.pm-disciplines{ display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }

/* diagrams */
.diagram-frame{
  border: 1px solid var(--line); background: var(--surface); padding: clamp(18px, 4vw, 36px);
  margin: 32px 0;
  transition: border-color .25s ease, background .25s ease;
}
.diagram-frame:hover{ border-color: var(--structural-dim); background: var(--surface-2); }
.diagram-frame__cap{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 18px; transition: color .2s ease;
}
.diagram-frame:hover .diagram-frame__cap{ color: var(--text-dim); }
.diagram-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram{
  width: 100%; max-width: 100%; height: auto; display: block;
}
/* Never scale a diagram's text below its native (viewBox) resolution — an SVG's
   text shrinks along with its container, so below this floor it becomes illegible.
   Scaling UP to fill a wider frame is still fine; only downscaling is capped.
   Below the floor, the scroll container takes over instead, with a fade on the
   trailing edge (added via JS, only while actually scrollable) as the affordance. */
.diagram[data-vb="640"]{ min-width: 640px; }
.diagram[data-vb="900"]{ min-width: 900px; }
.diagram[data-vb="960"]{ min-width: 960px; }
.diagram-scroll.is-scrollable, .lab-diagram-wrap.is-scrollable{
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
}
.diagram text{ font-family: var(--font-mono); }
.diagram .n-lg{ font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; fill: var(--text); }
.diagram .n-sm{ font-size: 10px; fill: var(--text-dim); }
.diagram .n-tag{ font-size: 9px; letter-spacing: 0.1em; fill: var(--text-faint); }
.diagram .n-accent{ fill: var(--signal); }
.diagram .n-structural{ fill: var(--structural); }
.diagram .box{ fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.diagram .box-a{ fill: var(--surface); stroke: var(--structural); stroke-width: 1.25; }
.diagram .box-b{ fill: var(--surface); stroke: var(--signal); stroke-width: 1.25; }
.diagram .box-t{ fill: var(--surface-2); stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 4 3; }
.diagram .edge{ stroke: var(--text-faint); stroke-width: 1.25; fill: none; }
.diagram .edge-accent{ stroke: var(--signal); stroke-width: 1.4; fill: none; }
.diagram .edge-dash{ stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.diagram .tri{ fill: var(--text-faint); }
.diagram .tri-accent{ fill: var(--signal); }
.diagram .track{ stroke: var(--line); stroke-width: 1; }
.diagram .flag{ fill: var(--signal); }
.diagram .diamond{ fill: var(--surface); stroke: var(--structural); stroke-width: 1.25; }

/* Five P nodes: on devices with real hover, show the big label only and
   reveal the detail line on hover/focus so it stays legible at any width. */
.diagram .fivep-node{ cursor: default; }
.diagram .fivep-node:focus{ outline: none; }
@media (hover: hover) and (pointer: fine){
  .diagram .fivep-node .n-sm{ opacity: 0; transition: opacity .15s ease; }
  .diagram .fivep-node:hover .n-sm,
  .diagram .fivep-node:focus-visible .n-sm{ opacity: 1; }
  .diagram .fivep-node:hover rect,
  .diagram .fivep-node:focus-visible rect{ stroke: var(--signal); }
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline{ display: flex; flex-direction: column; }
.tl-item{
  display: grid; grid-template-columns: 64px 140px 1fr; gap: clamp(12px, 3vw, 32px);
  padding: 26px 0; border-top: 1px solid var(--line);
  transition: background .25s ease, padding-left .25s ease;
}
.tl-item:last-child{ border-bottom: 1px solid var(--line); }
.tl-item:hover{ background: var(--surface); padding-left: 10px; }
.tl-item:hover .tl-item__num{ color: var(--signal); }
.tl-item:hover h3{ color: var(--signal); }
@media (max-width: 700px){ .tl-item{ grid-template-columns: 40px 1fr; } .tl-item__date{ grid-column: 2; order: 3; } }
.tl-item__num{
  font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); padding-top: 3px;
  transition: color .2s ease;
}
.tl-item__date{ font-family: var(--font-mono); font-size: 12px; color: var(--structural); padding-top: 3px; letter-spacing: 0.02em; }
.tl-item h3{ font-size: 1.15rem; font-weight: 700; margin-bottom: 3px; transition: color .2s ease; }
.tl-item__org{ color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; margin-bottom: 10px; letter-spacing: 0.03em; }
.tl-item ul{ margin: 0; padding-left: 18px; color: var(--text-dim); }
.tl-item li{ margin-bottom: 5px; max-width: var(--measure); }
.tl-item li b{ color: var(--signal); font-variant-numeric: tabular-nums; font-weight: 600; }

.onepager{
  border: 1px solid var(--line); background: var(--surface); padding: clamp(24px, 4vw, 36px);
  margin-top: 40px; max-width: var(--measure);
  transition: border-color .25s ease, background .25s ease;
}
.onepager:hover{ border-color: var(--structural-dim); background: var(--surface-2); }
.onepager h3{ font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.onepager__meta{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.onepager ul{ margin: 0; padding-left: 18px; color: var(--text-dim); }
.onepager li{ margin-bottom: 7px; }

/* ============================================================
   VENTURES
   ============================================================ */
.ventures{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 860px){ .ventures{ grid-template-columns: 1fr; } }
.venture{
  background: var(--surface); padding: 32px 26px; display: flex; flex-direction: column;
  gap: 14px; min-height: 280px;
  transition: filter .25s ease, transform .25s ease;
}
.venture__mark{ font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.01em; }
.venture__tag{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.venture__desc{ font-size: 0.95rem; color: var(--text-dim); flex-grow: 1; }
.venture__link{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; align-self: flex-start; padding-bottom: 2px; border-bottom: 1px solid currentColor;
  transition: letter-spacing .2s ease, opacity .2s ease;
}
.venture__link:hover{ letter-spacing: 0.12em; opacity: 0.9; }
.venture--solas{ --v: #1B2B3D; --vtext: #EAF1F6; --vaccent: #4FD1C5; }
.venture--glaf{ --v: #0E1A2E; --vtext: #E7ECF3; --vaccent: #6E8FAE; }
.venture--glam{ --v: #1A1420; --vtext: #F1E9F5; --vaccent: #C77DD6; }
.venture{ background: var(--v, var(--surface)); color: var(--vtext, var(--text)); }
.venture:hover{ filter: brightness(1.08); }
.venture__mark, .venture__link{ color: var(--vaccent, var(--signal)); }
.venture__link{ border-color: var(--vaccent, var(--signal)); }

/* ============================================================
   CASE STUDIES / PROTOTYPES
   ============================================================ */
.cases{ display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.case{
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface);
  transition: background .25s ease;
}
.case:hover{ background: var(--surface-2); }
@media (max-width: 800px){ .case{ grid-template-columns: 1fr; } }
.case__media{ background: #0C0B0F; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 220px; }
.case__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.case:hover .case__media img{ transform: scale(1.03); }
.case__media--placeholder{ border: 1px dashed var(--line); color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin: 18px; }
.case__body{ padding: 30px 32px; display: flex; flex-direction: column; gap: 10px; }
.case__eyebrow{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--structural); }
.case h3{ font-size: 1.4rem; font-weight: 700; }
.case p{ color: var(--text-dim); font-size: 0.97rem; max-width: 46ch; }

.status-tag{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line); color: var(--text-faint); display: inline-block; }
.status-tag--live{ color: var(--signal); border-color: var(--signal-dim); }
.status-tag--active{ color: var(--structural); border-color: var(--structural-dim); }

/* ============================================================
   SYSTEMS LAB
   ============================================================ */
.lab-case{
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .25s ease, background .25s ease;
}
.lab-case:hover{ border-color: var(--structural-dim); background: var(--surface-2); }
.lab-case + .lab-case{ margin-top: 28px; }
.lab-case__head{ padding: 24px clamp(20px, 4vw, 32px) 0; }
.lab-case__num{ font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); transition: color .2s ease; }
.lab-case:hover .lab-case__num{ color: var(--signal); }
.lab-case__head h3{
  font-size: 1.3rem; font-weight: 700; margin: 6px 0 4px; transition: color .2s ease;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.lab-case__head h3 .org-mark{ width: 20px; height: 20px; flex-basis: 20px; }
.lab-case:hover .lab-case__head h3{ color: var(--signal); }
.lab-diagram-wrap{
  padding: 8px clamp(12px, 3vw, 28px) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lab-diagram-wrap .diagram{ max-width: 100%; }
.lab-fields{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); margin-top: 24px; }
@media (max-width: 760px){ .lab-fields{ grid-template-columns: 1fr; } }
.lab-field{
  background: var(--surface); padding: 18px 20px;
  transition: background .2s ease;
}
.lab-field:hover{ background: var(--bg); }
.lab-field .k{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--structural); margin-bottom: 6px; }
.lab-field p{ font-size: 0.9rem; color: var(--text-dim); margin: 0; }

/* ============================================================
   CARD GRIDS
   ============================================================ */
.card-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--bg); border: 1px solid var(--line); margin-top: 8px; }
.ref-card, .tool-card, .note-card{
  background: var(--surface); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px;
  transition: background .25s ease, box-shadow .25s ease;
}
.ref-card:hover, .tool-card:hover, .note-card:hover{
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--structural-dim);
}
.ref-card h3, .tool-card h3, .note-card h3{ font-size: 1.02rem; font-weight: 700; transition: color .2s ease; }
.ref-card:hover h3, .tool-card:hover h3, .note-card:hover h3{ color: var(--signal); }
.ref-card p, .tool-card p, .note-card p{ font-size: 0.9rem; color: var(--text-dim); margin: 0; flex-grow: 1; }
.card-links{ display: flex; gap: 16px; margin-top: 2px; }
.card-links a{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--signal); border-bottom: 1px solid var(--signal-dim);
  transition: border-color .2s ease, letter-spacing .2s ease;
}
.card-links a:hover{ border-color: var(--signal); letter-spacing: 0.1em; }
.note-card .tag{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

.plain-box{
  border: 1px dashed var(--line); padding: 28px; color: var(--text-faint); font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: 0.03em; max-width: var(--measure); margin-top: 8px;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.plain-box:hover{ border-color: var(--structural); color: var(--text-dim); background: var(--surface); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ text-align: left; }
.contact h1, .contact h2{ font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.02em; max-width: 16ch; margin-bottom: 24px; }
.contact p{ color: var(--text-dim); max-width: 50ch; margin-bottom: 32px; }
.contact__grid{ display: flex; gap: 40px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); }
.contact__item .k{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.contact__item .v{ font-family: var(--font-mono); font-size: 1rem; color: var(--text); }
.contact__item{ transition: transform .2s ease; }
.contact__item:hover{ transform: translateY(-1px); }
.contact__item a{
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line);
  transition: color .2s ease, border-color .2s ease;
}
.contact__item a:hover{ color: var(--signal); border-color: var(--signal); }
.contact__item .k{ transition: color .2s ease; }
.contact__item:hover .k{ color: var(--structural); }

.capture{
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
  max-width: 36rem;
}
.capture__label{
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--structural); margin: 0 0 8px;
}
.capture__hint{ color: var(--text-dim); font-size: 0.95rem; margin: 0 0 16px; max-width: 42ch; }
.capture__row{ display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.capture__input{
  flex: 1 1 220px; min-width: 0; font-family: var(--font-mono); font-size: 14px;
  color: var(--text); background: var(--bg); border: 1px solid var(--line);
  padding: 10px 12px; outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.capture__input::placeholder{ color: var(--text-faint); }
.capture__input:hover{ border-color: var(--structural-dim); }
.capture__input:focus{ border-color: var(--signal); background: var(--surface); }
.capture__honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.capture .btn{ flex: 0 0 auto; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ padding: 28px clamp(24px, 6vw, 96px) 40px; }
.footer-links{ display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 14px; }
.footer-links a{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--text-dim);
  transition: color .2s ease, letter-spacing .2s ease;
}
.footer-links a:hover{ color: var(--signal); letter-spacing: 0.1em; }
.footer-rev{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.05em; }

/* ============================================================
   MOTION + HOVER REACTIONS
   ============================================================ */
[data-reveal]{ opacity: 1; transform: none; }
.js-ready [data-reveal]:not(.is-visible){
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.js-ready [data-reveal].is-visible{ opacity: 1; transform: none; }

a{ transition: color .2s ease; }
.pull{ transition: border-color .25s ease, padding-left .25s ease; }
.pull:hover{ border-left-color: var(--structural); padding-left: 28px; }
.status-tag{ transition: border-color .2s ease, color .2s ease, background .2s ease; }
.status-tag:hover{ border-color: var(--signal); color: var(--signal); background: var(--surface); }

@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .btn:hover, .next-link:hover{ transform: translateY(-1px); }
  .venture:hover{ transform: translateY(-2px); }
  .topnav a{ transition: color .2s ease, border-color .2s ease, letter-spacing .2s ease; }
  .topnav a:hover{ letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .btn:hover, .next-link:hover, .venture:hover, .contact__item:hover{ transform: none; }
  .case:hover .case__media img{ transform: none; }
  .tl-item:hover{ padding-left: 0; }
  .tool-rail__track--a, .tool-rail__track--b{ animation: none !important; transform: none !important; }
  .voices-track{ animation: none !important; transform: none !important; }
  .opmodel__orbit--dots, .opmodel__orbit--ticks, .opmodel__orbit--a,
  .opmodel__core, .opmodel__node{ animation: none !important; }
}

@media (prefers-reduced-motion: no-preference){
  .opmodel__orbit--dots{
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: opmodel-spin 48s linear infinite;
  }
  .opmodel__orbit--ticks{
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: opmodel-spin 72s linear infinite reverse;
  }
  .opmodel__orbit--a{
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: opmodel-spin 96s linear infinite;
  }
  .opmodel__core{
    animation: opmodel-core-in .8s ease both;
  }
  .opmodel__node{
    animation: opmodel-node-in .7s ease both;
  }
  .opmodel__node[data-p="people"]{ animation-delay: .05s; }
  .opmodel__node[data-p="picture"]{ animation-delay: .12s; }
  .opmodel__node[data-p="plan"]{ animation-delay: .19s; }
  .opmodel__node[data-p="perform"]{ animation-delay: .26s; }
  .opmodel__node[data-p="pivot"]{ animation-delay: .33s; }
}
@keyframes opmodel-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes opmodel-core-in{
  from{ opacity: 0; transform: translate(-50%, -46%); }
  to{ opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes opmodel-node-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* ============================================================
   PROOF / WORKS ACROSS / CLARITY
   ============================================================ */
.proof{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 8px;
}
@media (max-width: 800px){ .proof{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .proof{ grid-template-columns: 1fr; } }
.proof__item{
  background: var(--surface); padding: 22px 20px;
  transition: background .25s ease;
}
.proof__item:hover{ background: var(--surface-2); }
.proof__v{
  font-family: var(--font-mono); font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-variant-numeric: tabular-nums; color: var(--signal); margin: 0 0 6px;
}
.proof__k{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; }
.proof__org{ font-size: 0.9rem; color: var(--text-dim); margin: 0; }

.works-across{
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.works-across span{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--line); padding: 8px 12px;
  transition: border-color .25s ease, color .25s ease, transform .35s ease;
}
.works-across span:hover{ border-color: var(--signal); color: var(--signal); }

.clarity{
  border: 1px solid var(--line); background: var(--surface); padding: clamp(20px, 3vw, 32px);
  margin: 8px 0 0; overflow: hidden;
}
.clarity__cap{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 18px;
}
.clarity__stage{ position: relative; min-height: 120px; }
.clarity__nodes{ display: flex; flex-wrap: wrap; gap: 8px; transition: opacity .4s ease; }
.clarity__node{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); border: 1px dashed var(--line); padding: 7px 10px;
  transition: transform .7s ease, opacity .7s ease, border-color .5s ease, color .5s ease, left .7s ease, top .7s ease;
}
.clarity__flow{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px;
  opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease;
}
.clarity__flow span{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--signal); border: 1px solid var(--signal-dim); padding: 8px 12px; background: var(--bg);
}
.clarity__flow i{ font-style: normal; color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; }
.clarity.is-playing .clarity__nodes{ opacity: 0.25; }
.clarity.is-playing .clarity__node{ border-style: solid; color: var(--text-dim); }
.clarity.is-playing .clarity__flow{ opacity: 1; transform: none; }

/* ============================================================
   WHAT PEOPLE SAY
   ============================================================ */
.voices{
  position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--surface);
}
.voices-track{
  display: flex; gap: 1px; width: max-content; background: var(--line);
}
@media (prefers-reduced-motion: no-preference){
  .voices-track{ animation: voices-scroll 110s linear infinite; }
  .voices:hover .voices-track,
  .voices:focus-within .voices-track,
  .voices.is-paused .voices-track{ animation-play-state: paused; }
}
@keyframes voices-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.voices-card{
  width: min(520px, 86vw); background: var(--surface); padding: 28px 26px;
  flex: 0 0 auto; box-sizing: border-box;
  transition: background .25s ease;
}
.voices-card:hover{ background: var(--surface-2); }
.voices-card blockquote{
  margin: 0 0 18px; font-family: var(--font-body); font-style: italic;
  font-size: 1.05rem; line-height: 1.55; color: var(--text);
}
.voices-card__name{ font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; margin: 0 0 4px; }
.voices-card__meta{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin: 0; }
.voices-nav{ display: flex; gap: 10px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.voices-nav button{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); background: var(--bg); border: 1px solid var(--line); padding: 8px 12px; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.voices-nav button:hover{ border-color: var(--signal); color: var(--signal); }

/* ============================================================
   TOOL RAIL (OpenClaw-inspired, site-native)
   ============================================================ */
.tool-rail{ margin-top: 8px; }
.tool-rail__board{
  border: 1px solid var(--line); background: var(--bg); overflow: hidden; position: relative;
}
.tool-rail__board::before, .tool-rail__board::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none;
}
.tool-rail__board::before{ left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.tool-rail__board::after{ right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.tool-rail__track{
  display: flex; width: max-content; border-bottom: 1px solid var(--line);
}
.tool-rail__track:last-child{ border-bottom: none; }
@media (prefers-reduced-motion: no-preference){
  .tool-rail__track--a{ animation: tool-rail-left 70s linear infinite; }
  .tool-rail__track--b{ animation: tool-rail-right 52s linear infinite; }
  .tool-rail:hover .tool-rail__track{ animation-play-state: paused; }
}
@keyframes tool-rail-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes tool-rail-right{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}
.tool-rail__item{
  appearance: none; flex: 0 0 64px; width: 64px; height: 64px; min-height: 64px;
  border: 0; border-right: 1px solid var(--line); background: var(--surface);
  color: var(--text-dim); padding: 0; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  position: relative; font: inherit;
  transition: background .25s ease, color .25s ease;
}
.tool-rail__item::after{
  content: ""; position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--tool-color, var(--signal)) 14%, transparent);
  transition: opacity .3s ease;
}
.tool-rail__item:hover, .tool-rail__item:focus-visible{
  background: var(--surface-2); color: var(--text); outline: none;
}
.tool-rail__item:hover::after, .tool-rail__item:focus-visible::after{ opacity: 1; }
.tool-rail__icon{
  width: 22px; height: 22px; display: block; position: relative; z-index: 1;
  background-color: var(--tool-color, var(--structural));
  -webkit-mask-image: var(--tool-icon);
  mask-image: var(--tool-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.tool-rail__mark{
  width: 22px; height: 22px; border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tool-color, var(--signal)); position: relative; z-index: 1;
}
@media (max-width: 700px){
  .tool-rail__item{ flex-basis: 56px; width: 56px; height: 56px; min-height: 56px; }
  .tool-rail__icon, .tool-rail__mark{ width: 20px; height: 20px; }
}

/* ============================================================
   FORM FIELDS (contact)
   ============================================================ */
.capture__stack{ display: flex; flex-direction: column; gap: 14px; }
.capture__field{ display: flex; flex-direction: column; gap: 6px; }
.capture__field--short{ flex: 0 1 220px; max-width: 240px; }
.capture__field--short .capture__input{ flex: none; width: 100%; }
.capture__field label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--structural);
}
.capture__textarea{
  min-height: 120px; resize: vertical; font-family: var(--font-body); font-size: 1rem; line-height: 1.5;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); padding: 13px 16px; outline: none;
  transition: border-color .2s ease, background .2s ease; max-width: 36rem; width: 100%;
}
.capture__textarea:focus{ border-color: var(--signal); background: var(--surface); }
.capture__actions{ margin-top: 4px; }
@media (max-width: 560px){
  .capture__field--short{ flex: 1 1 100%; max-width: none; }
}

/* Project area headings */
.area-head{ margin: 40px 0 18px; padding-top: 8px; }
.area-head:first-child{ margin-top: 0; }
.area-head h2{ font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 700; margin: 0 0 8px; }
.area-head p{ color: var(--text-dim); margin: 0; max-width: var(--measure); font-size: 0.98rem; }

.map-meta{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 10px;
}
.map-meta b{ color: var(--structural); font-weight: 600; }

.footer-brand{ margin-bottom: 16px; }
.footer-brand__name{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 4px; }
.footer-brand__role{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 10px; }
.footer-brand a{ font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); text-decoration: none; margin-right: 16px; }
.footer-brand a:hover{ color: var(--signal); }