/* ── thesis view (laptop-compact) ──────────────────────────── */
.t-grid {
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:clamp(24px, 3vw, 56px);
  /* Fix 1: top-anchor — headline + pillar #1 share a baseline; no orphan floating. */
  align-items:start;
}
.t-head { padding-top: clamp(4px, .8vh, 12px); }
 html.is-mobile .t-grid { grid-template-columns:1fr; } 
.t-head .eyebrow { margin-bottom:clamp(10px, 1.4vh, 16px); }
/* editorial title: soft lead-in with an inline mint accent,
   layered above a giant two-color punchline. */
.t-title { margin:0; }
/* Minimal type system: Bricolage Grotesque everywhere. No mono caps, no bullets,
   no green rules — the only decoration is opacity, weight, and size.
   Eyebrow is a single-word lowercase mark; lead-in is a light Bricolage line. */
.t-title-pre {
  display:block;
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-variation-settings:"opsz" 18, "wdth" 100;
  font-weight:300;
  font-size:clamp(18px, 1.7vw, 24px);
  line-height:1.4; letter-spacing:-.005em;
  color:rgba(255,255,255,.5);
  margin-bottom:clamp(8px, 1.2vh, 14px);
  text-transform:none;
}
.t-title-pre em { color:rgba(255,255,255,.85); font-weight:400; font-style:normal; }
/* Override the legacy .eyebrow style (mono caps with bullet) for our t-head;
   minimal mark only — no separator, no number, lowercase. */
.t-head .eyebrow {
  font-family:'Bricolage Grotesque','Inter',sans-serif !important;
  font-variation-settings:"opsz" 12, "wdth" 100;
  font-weight:400;
  font-size:12px !important;
  letter-spacing:.04em !important;
  text-transform:lowercase !important;
  color:rgba(255,255,255,.35) !important;
  margin-bottom:clamp(20px, 3vh, 32px) !important;
}
.t-title-main {
  display:block;
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-variation-settings:"opsz" 96, "wdth" 95;
  font-weight:700;
  font-size:clamp(40px, 5.2vw, 84px);
  line-height:.92; letter-spacing:-.03em;
  color:#fff; text-transform:uppercase;
  text-wrap:balance;
}
.t-title-main .word-a { font-weight:700; color:#fff; }
.t-title-main .word-b { font-weight:700; color:var(--g); }
.t-head .lede {
  margin-top:clamp(14px, 2vh, 22px);
  font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(14px, 1.1vw, 17px);
  color:rgba(255,255,255,.5);
}
.t-pillars { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.pillar {
  display:grid;
  /* Fix 4: tighter number track + larger arrow track so the number sits ADJACENT
     to its title (was 54+16 = 70px of gap = number labelled the empty space). */
  grid-template-columns: 36px 1fr 28px;
  gap:20px; align-items:center;
  padding:clamp(16px, 2.2vh, 24px) clamp(4px, 1vw, 10px);
  border-bottom:1px solid var(--line);
  background:none; text-align:left;
  font-family:inherit; color:inherit;
  cursor:none; width:100%;
  transition:background .3s, padding-left .3s;
}
.pillar:hover { background:rgba(78,205,137,.03); padding-left:14px; }
.pillar:hover .p-num { color:var(--g); }
.pillar:hover .p-arrow { color:var(--g); transform:rotate(45deg); }
.pillar[aria-expanded="true"] .p-arrow { color:var(--g); transform:rotate(45deg); }

/* p-body is a single-row grid whose track animates 0fr → 1fr, smoothly
   revealing the wrapped <span>'s natural height. No arbitrary max-height,
   no clamp-snap at the end, GPU-friendly. */
.pillar .p-body {
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  margin-top:0;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),
             margin-top         .45s cubic-bezier(.22,1,.36,1),
             opacity            .3s  cubic-bezier(.22,1,.36,1);
}
.pillar .p-body > span {
  display:block;
  min-height:0;
  overflow:hidden;
}
.pillar[aria-expanded="true"] .p-body {
  grid-template-rows:1fr;
  opacity:1;
  margin-top:6px;
}
.p-num {
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(18px, 2.2vw, 26px);
  /* Fix 2: green was competing with 'INDUSTRIES.' headline. Default state is now
     muted white; the existing :hover + [aria-expanded] rules promote to green.
     !important required — there's a deeper cascade conflict from style.css. */
  color:rgba(255,255,255,.28) !important; line-height:1;
  transition:color .3s;
}
.pillar:hover .p-num,
.pillar[aria-expanded="true"] .p-num { color: var(--g) !important; }
.p-title {
  /* Fix 3: was Inter 200 UPPERCASE letter-spacing:-.012em — ultra-thin uppercase
     with negative tracking was the dissonant note. Bricolage Grotesque non-caps
     matches the lowercase typographic system the rest of the site uses. */
  font-family:'Bricolage Grotesque','Inter',sans-serif !important;
  font-variation-settings:"opsz" 24, "wdth" 95;
  font-weight:400;
  font-size:clamp(18px, 2.2vw, 26px);
  line-height:1.1; letter-spacing:-.01em;
  color:#fff; text-transform:none;
  margin-bottom:4px;
}
.p-body {
  font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(12px, .95vw, 14px);
  line-height:1.5; color:rgba(255,255,255,.5);
  max-width:520px;
}
.p-arrow {
  /* Fix 5: was #555 mono — read as a render artifact. Lift to .35 white for
     intentional affordance signaling matching the eyebrow opacity. */
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:18px; font-weight:300;
  color:rgba(255,255,255,.35); text-align:right;
  transition:color .3s, transform .3s;
}

/* ── portfolio view (laptop-compact) ───────────────────────── */
.p-head { margin-bottom:clamp(24px, 3.4vh, 40px); max-width:980px; }
.p-head .eyebrow { margin-bottom:clamp(12px, 1.6vh, 18px); }

/* numbered manifesto — three lines stacked with thin rules and
   dim mono indices. only the first 'Real' carries mint emphasis,
   so the eye lands once instead of three times. structure echoes
   the // POSITION_NN pattern used on the cards below. */
.p-creed {
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column;
}
.p-creed li {
  font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(20px, 2.4vw, 36px);
  line-height:1.05; letter-spacing:-.018em;
  color:#fff; text-transform:uppercase;
  padding:clamp(8px, 1.2vh, 14px) 0;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:6px;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:padding-left .35s cubic-bezier(.22,1,.36,1), background .35s;
}
.p-creed li:last-child { border-bottom:none; }
.p-creed li:hover { padding-left:10px; background:rgba(78,205,137,.025); }
.p-creed em {
  color:var(--g); font-weight:400; font-style:normal;
}
.p-creed .tag {
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(9px, .8vw, 11px);
  letter-spacing:.28em;
  color:var(--g);
  text-transform:uppercase;
  white-space:nowrap;
}
.p-creed .line { display:block; }

.p-cards {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.2vw, 18px);
}
 html.is-mobile .p-cards { grid-template-columns:1fr; } 
.pc {
  position:relative;
  background:rgba(8,10,12,.62);
 
  border:1px solid var(--line);
  padding:clamp(14px, 1.5vw, 22px);
  display:flex; flex-direction:column; min-width:0;
  transition:border-color .35s, background .35s, transform .35s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.pc::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--g); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.pc:hover { border-color:var(--g-dim); background:rgba(12,16,20,.78); transform:translateY(-3px); }
.pc:hover::before { transform:scaleX(1); }
.pc:hover .pc-arrow { color:var(--g); transform:translate(4px,-4px); }
.pc-head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:clamp(10px, 1.5vh, 16px);
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.22em; text-transform:uppercase;
}
.pc-id { color:var(--g); }
.pc-status { display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.5); }
.pc-name {
  font-family:'Inter',sans-serif; font-weight:200;
  font-size:clamp(22px, 2.4vw, 32px); line-height:.95;
  letter-spacing:-.02em; text-transform:uppercase;
  color:#fff; margin-bottom:6px;
}
.pc-tag {
  font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(12px, 1vw, 15px); line-height:1.4;
  color:rgba(255,255,255,.5); margin-bottom:clamp(10px, 1.6vh, 18px);
}
.pc-spec {
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  padding:clamp(8px, 1.2vh, 12px) 0;
  border-top:1px dashed var(--line);
  border-bottom:1px dashed var(--line);
  margin-bottom:auto;
}
.pc-spec div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pc-spec dt { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.22em; color:#666; text-transform:uppercase; }
.pc-spec dd { font-family:'Inter',sans-serif; font-weight:300; font-size:clamp(11px, .9vw, 13px); color:#fff; }
.pc-foot {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:clamp(8px, 1.2vh, 14px);
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.2em; color:rgba(255,255,255,.55);
}
.pc-arrow { font-size:14px; color:#777; transition:color .3s, transform .3s; }

/* portfolio logo — replaces the company name as the card title.
   left-aligned, no tile, fully whited-out so each mark reads as
   a flat wordmark in the same visual register as the old text. */
.pc-logo {
  height:clamp(22px, 2.4vw, 32px);
  margin-bottom:clamp(10px, 1.5vh, 16px);
  display:flex; align-items:center; justify-content:flex-start;
}
.pc-logo img {
  max-height:100%; max-width:100%;
  object-fit:contain; object-position:left center;
  filter:brightness(0) invert(1);
  opacity:.88;
  transition:opacity .3s;
}
.pc:hover .pc-logo img { opacity:1; }

/* ── team view — editorial redesign (laptop-compact) ───────── */
.view[data-view="team"] .stage-inner { max-width:1400px; }
.team-hero { max-width:1180px; margin-bottom:clamp(16px, 2.5vh, 32px); }
.team-hero .eyebrow  { margin-bottom:clamp(8px, 1vh, 14px); }
.team-hero h1        { margin-bottom:clamp(8px, 1.2vh, 14px); line-height:.92; }
.team-hero .tagline {
  font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(13px, 1.05vw, 17px);
  line-height:1.4; letter-spacing:-.005em;
  color:rgba(255,255,255,.5);
  max-width:640px;
}
.team-hero .tagline em { color:var(--g); font-style:normal; }

.team-grid {
  display:grid;
  grid-template-columns: minmax(320px, 0.85fr) 1fr;
  gap:clamp(24px, 3.5vw, 56px);
  align-items:start;
}
 html.is-mobile .team-grid { grid-template-columns:1fr; align-items:start; } 

.team-right {
  display:flex; flex-direction:column;
  gap:clamp(16px, 2.5vh, 32px);
}
.team-right .team-hero { margin-bottom:0; }

.portrait {
  position:relative;
  max-width:460px; width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  border:1px solid var(--line);
  background:#080a0b;
}
 html.is-mobile .portrait { aspect-ratio:4/5; } 
.portrait .img {
  position:absolute; inset:0;
  background-image:url('../assets/headshot.webp');
  background-size:cover;
  background-position:center 18%;
  background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.05);
}
.portrait .tint {
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 50%, transparent 100%);
}
.portrait .label-blk {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:20px 22px;
  display:flex; justify-content:flex-start; align-items:baseline; gap:10px;
  border-top:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}
.portrait .lb-role {
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--g);
}
.portrait .lb-num {
  font-family:'JetBrains Mono',monospace;
  font-size:9px; letter-spacing:.22em;
  color:rgba(255,255,255,.4); text-transform:uppercase;
}

.bio { display:flex; flex-direction:column; min-width:0; max-width:820px; height:100%; }
.bio-lead {
  font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(16px, 1.35vw, 20px); line-height:1.55;
  color:rgba(255,255,255,.95);
  margin-bottom:clamp(28px, 4vh, 40px);
  padding-bottom:clamp(28px, 4vh, 40px);
  border-bottom:1px solid var(--line);
}
.bio-data {
  display:flex; flex-direction:column;
  margin-bottom:clamp(14px, 2vh, 22px);
}
.bio-data .row {
  display:grid;
  grid-template-columns: 100px 1fr;
  gap:clamp(10px, 1.6vw, 22px);
  padding:clamp(7px, 1.1vh, 12px) 0;
  border-bottom:1px dashed var(--line);
}
.bio-data .row:last-child { border-bottom:none; }
.bio-data dt {
  font-family:'JetBrains Mono',monospace;
  font-size:9px; letter-spacing:.28em;
  color:var(--g); text-transform:uppercase;
  padding-top:2px;
}
.bio-data dd {
  font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(12px, .95vw, 14px); line-height:1.5;
  color:rgba(255,255,255,.95);
}
.bio-data dd .dim { color:rgba(255,255,255,.5); }
.bio-data dd em { font-style:normal; color:var(--g); font-family:inherit; }

/* personal note — folded out of the institutional bio rows so it
   doesn't compete with Education/Experience/Angels for visual
   weight. quiet, smaller, italic feel without the dashed grid. */
.bio-footnote {
  font-family:'Inter',sans-serif; font-weight:300; font-style:italic;
  font-size:clamp(11px, .85vw, 13px);
  line-height:1.55;
  color:rgba(255,255,255,.4);
  margin:clamp(14px, 2vh, 22px) 0 0;
  max-width:560px;
}
.bio-footnote em { font-style:italic; color:rgba(255,255,255,.6); }

/* inline link treatment inside the bio — subtle until hovered */
.bio-link {
  color:inherit;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.bio-link:hover { color:var(--g); border-color:var(--g); }
.bio-link .ext { color:var(--g); font-size:.85em; margin-left:4px; }

/* stacked experience / education links list */
.bio-list {
  list-style:none;
  display:flex; flex-direction:column;
  margin-top:2px;
}
.bio-list li { padding:3px 0; border-bottom:1px dotted rgba(255,255,255,.08); }
.bio-list li:last-child { border-bottom:none; }
.bio-list a {
  display:inline-flex; align-items:center; gap:10px;
  color:rgba(255,255,255,.95);
  transition:color .2s, padding-left .2s;
}
.bio-list a:hover { color:var(--g); padding-left:4px; }
.bio-list a .ext { color:var(--g); font-size:.85em; }

/* two-column variant for the Experience list */
.bio-list.bio-list-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0 24px;
}
.bio-list.bio-list-grid li {
  padding:3px 0;
  border-bottom:1px dotted rgba(255,255,255,.08);
}
 html.is-mobile .bio-list.bio-list-grid { grid-template-columns:1fr; } 

/* angel investments — compact grid of linked names */
.angels {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px 22px;
  margin-top:2px;
}
.angels li { min-width:0; }
.angels a, .angels .noext {
  display:inline-flex; align-items:baseline; gap:6px;
  font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(12px, .92vw, 13.5px);
  color:rgba(255,255,255,.95);
  padding:3px 0;
  transition:color .2s, padding-left .2s;
}
.angels a:hover { color:var(--g); padding-left:4px; }
.angels .ext { color:var(--g); font-size:.82em; }
.angels .noext { color:rgba(255,255,255,.45); }
 html.is-mobile .angels { grid-template-columns:repeat(3, 1fr); } 
 html.is-mobile .angels { grid-template-columns:repeat(2, 1fr); } 
.bio-actions {
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:auto;
  padding-top:clamp(10px, 1.5vh, 20px);
}

  html.is-mobile .bio-data .row { grid-template-columns:1fr; gap:6px; }


/* ── contact view (laptop-compact) ─────────────────────────── */
.c-head { margin-bottom:clamp(20px, 3vh, 36px); max-width:1100px; }
.c-head .eyebrow { margin-bottom:clamp(8px, 1.2vh, 14px); }
.c-head h1 { margin-bottom:clamp(10px, 1.6vh, 16px); }
.c-cards {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(8px, 1.1vw, 16px);
}
 html.is-mobile .c-cards { grid-template-columns:repeat(2, 1fr); } 
 html.is-mobile .c-cards { grid-template-columns:1fr; } 
.c-card {
  position:relative;
  background:rgba(8,10,12,.62);
  border:1px solid var(--line);
  padding:clamp(14px, 1.6vw, 22px);
  min-height:clamp(100px, 14vh, 150px);
  display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .3s, background .3s, transform .3s;
}
.c-card::before {
  content:''; position:absolute; left:0; top:0; height:1px; width:100%;
  background:var(--g);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.c-card:hover {
  border-color:var(--g-dim);
  background:rgba(12,16,20,.78);
  transform:translateY(-3px);
}
.c-card:hover::before { transform:scaleX(1); }
.c-card:hover .c-arrow { color:var(--g); transform:translate(4px,-4px); }
.c-card .k {
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--g);
}
.c-card .v {
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(12px, 1vw, 14px); letter-spacing:.05em;
  color:#fff; line-height:1.5;
  margin-top:clamp(8px, 1.3vh, 14px);
}
.c-arrow {
  position:absolute; top:18px; right:18px;
  font-family:'JetBrains Mono',monospace; font-size:16px;
  color:#666; transition:color .3s, transform .3s;
}
.c-card .socials {
  display:flex; flex-direction:column; gap:6px;
  margin-top:clamp(10px, 1.6vh, 14px);
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em;
}
.c-card .socials a {
  color:#fff; border-bottom:1px solid rgba(255,255,255,.15);
  padding-bottom:4px; width:fit-content;
  transition:color .2s, border-color .2s;
}
.c-card .socials a:hover { color:var(--g); border-color:var(--g); }

/* ── vault view ─────────────────────────────────────────────── */
.v-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(30px, 5vw, 80px);
  align-items:center;
}
 html.is-mobile .v-grid { grid-template-columns:1fr; } 
.v-head .eyebrow { margin-bottom:clamp(14px, 2vh, 20px); }
.v-classified {
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-top:clamp(20px, 3vh, 28px);
  padding:10px 14px;
  border:1px solid var(--line);
  display:inline-block;
}
.v-panel {
  background:rgba(8,10,12,.72);
  border:1px solid var(--line);
  padding:clamp(24px, 3vw, 36px);
}
.v-panel .v-panel-h {
  display:flex; justify-content:space-between; align-items:center;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.24em; text-transform:uppercase;
  padding-bottom:16px; margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.v-panel .v-title { display:inline-flex; align-items:center; gap:10px; color:var(--g); }
.v-panel .v-sid { color:rgba(255,255,255,.5); }
.v-panel .v-sid b { color:#fff; font-weight:400; }

.vform .field { margin-bottom:20px; position:relative; }
.vform label {
  display:block;
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--g);
  margin-bottom:8px;
}
.vform input {
  width:100%;
  font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.05em;
  color:#fff; background:transparent;
  border:none; outline:none;
  padding:6px 0;
  border-bottom:1px solid var(--line-2);
  transition:border-color .3s;
}
.vform input:focus { border-bottom-color:var(--g); }
.vform input::placeholder { color:#555; }
.v-note {
  margin-top:20px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em;
  color:rgba(255,255,255,.45); line-height:1.6; text-transform:uppercase;
}
.v-note a { color:var(--g); border-bottom:1px solid var(--g-dim); }
.v-note a:hover { border-color:var(--g); }
.v-result {
  margin-top:16px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
  color:var(--g); text-transform:uppercase;
  opacity:0; transition:opacity .5s;
}
.v-result.show { opacity:1; }