/* Konnex Team page (TEAM-PAGE-V2-01, design handoff 17 Oct 2026, revision 1 + Matt's tweaks). Ported from the pack's
   reference.css: scoped under body.kx-team like v2/about.css. Fonts and site tokens come from v2/colors_and_type.css;
   the nav and mobile menu from v2/nav-dark-hero.css + /includes/profile.js; the footer from v2/site-footer.css. */

.kx-team {
  --kxt-nav-h: 76px;               /* fixed dark-hero nav (v2/nav-dark-hero.css): hero clearance; 60px / 56px below */
  --kxh-text-on-dark-2: #D6D3D1;   /* body copy on dark panels (~11:1 on #1F1D1B) */
  --kxh-terracotta-text: #A94418;  /* small terracotta text on white (~6:1) and linen (~5.3:1); #E8703A only on dark */
  --kxh-line-dark: #3A3633;        /* hairlines and tag borders on dark */
  --kxh-line-warm: #E2DBD2;        /* hairlines and card borders on linen */
  /* new on this page */
  --kxt-chip-line: #D6CFC6;        /* outline of the "AI agent" chip */
  --kxt-tint-1: #EDE7E0;           /* agent circles cycle 1 → 2 → 3 by grid position (linen, sand, sage) */
  --kxt-tint-2: #EAD9C8;
  --kxt-tint-3: #DAE3DF;
  margin: 0; background: var(--panel-bg); color: var(--panel-text); font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  overflow-x: hidden; -webkit-text-size-adjust: 100%;
}
.kx-team *, .kx-team *::before, .kx-team *::after { box-sizing: border-box; }
.kx-team img, .kx-team svg { max-width: 100%; }
.kx-team a { color: inherit; }
.kx-team a:focus-visible, .kx-team button:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }
.kx-team .wrap { max-width: var(--measure-grid); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* the nav's gutter, so the logo and CTA line up with the content (as on the homepage) */
.kx-team .display { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }

/* buttons: DARK text on terracotta (~5.6:1) */
.kx-team .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: 17px; text-align: center; }
.kx-team .btn svg { width: 18px; height: 18px; flex: none; }
.kx-team .btn--primary { background: var(--terracotta); color: var(--fg1); }
.kx-team .btn--primary:hover { background: #D4612E; color: var(--fg1); }
.kx-team .textlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; text-underline-offset: 5px; color: var(--panel-text); }
.kx-team .textlink:hover { color: var(--terracotta); }

/* ---------- hero (dark, dot grid, centred; copy unchanged except the lead) ---------- */
.kx-team .hero { padding-top: var(--kxt-nav-h); background-color: var(--panel-bg); background-image: radial-gradient(rgba(250,250,248,.07) 1px, transparent 1px); background-size: 22px 22px; }
.kx-team .hero__inner { max-width: 920px; margin: 0 auto; padding: 88px 40px 104px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.kx-team .eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--terracotta); }
.kx-team .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); } /* static: the pulse animation is removed */
.kx-team .hero h1 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.06; color: var(--panel-text); }
.kx-team .hero h1 em { font-style: normal; color: var(--terracotta); }
.kx-team .hero__lede { margin: 0; max-width: 700px; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; color: var(--kxh-text-on-dark-2); }
.kx-team .legend { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--panel-text-secondary); }
.kx-team .legend li { display: inline-flex; align-items: center; gap: 10px; }
.kx-team .legend__mark { flex: none; width: 14px; height: 14px; }
.kx-team .legend__mark--human { border-radius: 4px; background: var(--terracotta); }
.kx-team .legend__mark--agent { border-radius: 50%; border: 1.5px solid var(--panel-text-secondary); }

/* ---------- team section (linen) ---------- */
.kx-team .roster { background: var(--warm-bg); color: var(--fg1); }
.kx-team .roster__inner { padding-top: 96px; padding-bottom: 112px; display: flex; flex-direction: column; gap: 72px; }
.kx-team .group { display: flex; flex-direction: column; gap: 20px; }

/* group label: square = human, circle = agent (the same shape language as the marks) */
.kx-team .group__label { display: flex; align-items: center; gap: 16px; }
.kx-team .group__label::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--kxh-line-warm); }
.kx-team .group__mark { flex: none; width: 10px; height: 10px; }
.kx-team .group__mark--human { border-radius: 3px; background: var(--kxh-terracotta-text); }
.kx-team .group__mark--agent { border-radius: 50%; border: 1.5px solid var(--kxh-terracotta-text); }
.kx-team .group__label h2 { margin: 0; flex: none; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--kxh-terracotta-text); }

/* chips: icon + word, never colour alone */
.kx-team .kind { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 4px 10px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.kx-team .kind svg { width: 12px; height: 12px; flex: none; }
.kx-team .kind--human { background: var(--panel-text); color: var(--fg1); padding: 5px 12px; letter-spacing: .1em; }
.kx-team .kind--human svg { width: 13px; height: 13px; }
.kx-team .kind--agent { border: 1px solid var(--kxt-chip-line); color: var(--fg2); }

/* tags */
.kx-team .tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.kx-team .tags li { font-size: 12px; font-weight: 500; line-height: 1.4; border-radius: var(--radius-pill); padding: 4px 10px; }

/* ---------- founder card (primary: dark panel on linen) ---------- */
.kx-team .founder { background: var(--panel-bg); color: var(--panel-text); border-radius: 20px; padding: 48px 56px; display: flex; flex-wrap: wrap; gap: 40px 80px; align-items: flex-start; }
.kx-team .founder__id { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.kx-team .founder__marks { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.kx-team .founder__mark { flex: none; width: 88px; height: 88px; border-radius: 20px; background: var(--terracotta); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: 46px; line-height: 1; color: var(--fg1); }
.kx-team .founder__who { display: flex; flex-direction: column; gap: 8px; }
.kx-team .founder__name { font-size: 48px; line-height: 1.05; color: var(--panel-text); }
.kx-team .founder__role { margin: 0; font-size: 18px; font-weight: 600; color: var(--terracotta); } /* #E8703A on #1F1D1B ≈ 5.5:1 */
.kx-team .founder__loc { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--kxh-text-on-dark-2); }
.kx-team .founder__loc svg { width: 16px; height: 16px; flex: none; }
.kx-team .founder__bio { flex: 1.5 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.kx-team .founder__statement { margin: 0; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; font-size: 26px; line-height: 1.32; letter-spacing: -0.01em; color: var(--panel-text); text-wrap: pretty; }
.kx-team .founder__text { margin: 0; font-size: 17px; line-height: 1.65; color: var(--kxh-text-on-dark-2); }
.kx-team .founder .tags { gap: 8px; padding-top: 8px; }
.kx-team .founder .tags li { font-size: 13px; padding: 5px 12px; color: var(--kxh-text-on-dark-2); background: var(--panel-surface); border: 1px solid var(--kxh-line-dark); }

/* ---------- agent cards (secondary, scannable) ---------- */
.kx-team .agents { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(320px, calc((100% - 48px) / 3)), 1fr)); gap: 24px; }
/* never more than 3 columns: --measure-grid widens to 1440/1600px on large screens, where 320px tracks would fit 4 (4/4/1) */
.kx-team .agent { height: 100%; background: var(--card-bg); border: 1px solid var(--kxh-line-warm); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.kx-team .agent__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kx-team .agent__mark { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--kxt-tint-1); border: 1px solid var(--kxh-line-warm); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: 21px; color: var(--fg1); }
.kx-team .agents > li:nth-child(3n+2) .agent__mark { background: var(--kxt-tint-2); }
.kx-team .agents > li:nth-child(3n) .agent__mark { background: var(--kxt-tint-3); }
.kx-team .agent__who { display: flex; flex-direction: column; gap: 4px; }
.kx-team .agent__name { margin: 0; font-family: var(--font-body); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--fg1); }
.kx-team .agent__role { margin: 0; font-size: 14px; font-weight: 600; color: var(--kxh-terracotta-text); }
.kx-team .agent__bio { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg2); }
.kx-team .agent .tags { margin-top: auto; padding-top: 4px; }
.kx-team .agent .tags li { color: var(--fg2); background: var(--warm-bg); border: 1px solid var(--kxh-line-warm); }

/* ---------- closing band (dark) — replaces the terminal block ---------- */
.kx-team .close { background: var(--panel-bg); }
.kx-team .close__inner { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 64px; }
.kx-team .close__text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kx-team .close__eyebrow { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--terracotta); }
.kx-team .close h2 { font-size: clamp(1.875rem, 2.8vw, 2.5rem); line-height: 1.1; color: var(--panel-text); }
.kx-team .close__line { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--kxh-text-on-dark-2); }
.kx-team .close__actions { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }

/* ================= ≤ 767px — mobile ================= */
@media (max-width: 767px) {
  body.kx-team { --kxt-nav-h: 60px; }
  .kx-team .wrap { padding-left: 20px; padding-right: 20px; }

  .kx-team .hero__inner { padding: 36px 20px 48px; gap: 16px; }
  .kx-team .hero h1 { font-size: 36px; line-height: 1.08; }
  .kx-team .hero__lede { font-size: 17px; line-height: 1.55; }
  .kx-team .legend { margin-top: 6px; gap: 10px 22px; }
  .kx-team .legend li { gap: 8px; }
  .kx-team .legend__mark { width: 13px; height: 13px; }

  .kx-team .roster__inner { padding: 48px var(--gutter) 64px; gap: 48px; }
  .kx-team .group { gap: 16px; }
  .kx-team .group__label { gap: 12px; padding: 0 4px; }

  .kx-team .founder { border-radius: 18px; padding: 28px 22px; flex-direction: column; flex-wrap: nowrap; gap: 20px; align-items: stretch; }
  .kx-team .founder__id { flex: none; gap: 20px; }
  .kx-team .founder__marks { justify-content: space-between; gap: 12px; }
  .kx-team .founder__mark { width: 64px; height: 64px; border-radius: 16px; font-size: 34px; }
  .kx-team .founder__who { gap: 6px; }
  .kx-team .founder__name { font-size: 38px; }
  .kx-team .founder__role { font-size: 17px; }
  .kx-team .founder__bio { flex: none; gap: 20px; padding-top: 18px; border-top: 1px solid var(--kxh-line-dark); }
  .kx-team .founder__statement { font-size: 21px; line-height: 1.35; }
  .kx-team .founder__text { font-size: 16px; line-height: 1.6; }
  .kx-team .founder .tags { padding-top: 0; }

  .kx-team .agents { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kx-team .agent { border-radius: 14px; padding: 22px 20px; gap: 12px; }
  .kx-team .agent__mark { width: 44px; height: 44px; font-size: 19px; }
  .kx-team .agent__who { gap: 3px; }
  .kx-team .agent__name { font-size: 19px; }
  .kx-team .agent .tags { padding-top: 2px; }

  .kx-team .close__inner { padding: 52px 20px; flex-direction: column; align-items: stretch; gap: 14px; }
  .kx-team .close__text { flex: none; }
  .kx-team .close h2 { font-size: 30px; line-height: 1.12; }
  .kx-team .close__line { font-size: 16px; line-height: 1.55; }
  .kx-team .close__actions { flex-direction: column; align-items: stretch; gap: 4px; padding-top: 10px; }
  .kx-team .close__actions .btn { width: 100%; padding: 0 16px; font-size: 16px; }
  .kx-team .close__actions .textlink { align-self: center; font-size: 16px; }

}
@media (max-width: 767px) and (max-height: 700px) {
  body.kx-team { --kxt-nav-h: 56px; }
}