/* ═══════════════════════════════════════════════════════════
   Hat-Trick Capital — structural center-axis grid
   Every band is split into two blocks at the exact center of
   the page; the axis IS the shared border between blocks, so
   one continuous line runs from header to footer. Halves may
   be subdivided again at their own midpoints (quarter blocks).
   No content ever crosses the axis. Accent = Hat-Trick blue.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #ffffff;
  --fg: #232323;
  --line: #232323;
  --accent: #002FA7;          /* Hat-Trick blue — International Klein Blue */
  --accent-soft: #c9dcff;     /* light blue tint — hovers and soft cells   */
  --klein: rgba(0, 47, 167, .90);   /* translucent Klein for statement blocks */
  --klein-fg: #eef1ff;              /* off-white type that sits on Klein       */
  --accent-on-dark: #6f95ff;        /* accent for type on the dark sector panel */
  --gray-cell: #d9d9d9;
  --cell-dark-bg: #232323;
  --cell-dark-fg: #ffffff;
  --pad: clamp(20px, 3vw, 48px);
  --hdr-h: 58px;
  --font-sans: 'Inter', Arial, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* type scale: three text sizes, two mono sizes, one tracking rule */
  --fs-lead: clamp(18px, 1.75vw, 27px);
  --fs-body: clamp(15px, 1.3vw, 17px);
  --fs-caption: 16px;
  --fs-mono: 11px;
  --fs-mono-lg: 12px;
  --ls-text: -.011em;
  --ls-mono: .06em;
  --lh-body: 1.55;
}
html[data-theme="dark"] {
  --bg: #232323;
  --fg: #f2f2f0;
  --line: #f2f2f0;
  --accent: #4d86ff;
  --accent-soft: #142e6e;
  --klein: rgba(38, 74, 200, .92);
  --klein-fg: #eef1ff;
  --accent-on-dark: #002FA7;        /* panel is light in dark theme */
  --gray-cell: #3a3a3a;
  --cell-dark-bg: #f2f2f0;
  --cell-dark-fg: #232323;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-weight: 450;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.45;
  transition: background .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3 { font-weight: 450; line-height: 1.02; }

.arr { display: inline-block; transition: transform .25s ease; }
a:hover .arr { transform: translateX(4px); }

/* ── official logo swap: dark cells show the white version (light theme),
     the page background shows the black version; both flip in dark mode ── */
.logo-darkcell .lg-b, .logo-page .lg-w { display: none; }
html[data-theme="dark"] .logo-darkcell .lg-w { display: none; }
html[data-theme="dark"] .logo-darkcell .lg-b { display: block; }
html[data-theme="dark"] .logo-page .lg-b { display: none; }
html[data-theme="dark"] .logo-page .lg-w { display: block; }

/* ── the structural split: two blocks, the axis is their shared border.
     Nested .split subdivides a half at its own midpoint. ── */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split > .cell-l { border-right: 1px solid var(--line); min-width: 0; }
.split > .cell-r { min-width: 0; }

/* ── shared type ── */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1.6;
}
.lbl::before {
  content: "■";
  color: var(--accent);
  font-size: 7px;
  vertical-align: 2px;
  margin-right: 9px;
}
.mono-cta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 6px;
  width: fit-content;
}
.mono-cta:hover { color: var(--accent); }
.hero-cell .mono-cta { border-bottom: none; padding-bottom: 0; }
.btn-block {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: var(--cell-dark-bg);
  color: var(--cell-dark-fg);
  padding: 14px 18px;
  width: fit-content;
  min-width: 230px;
  transition: background .25s ease;
}
.btn-block:hover { background: var(--accent); color: #fff; }
.display {
  font-size: clamp(44px, 6.4vw, 104px);
  letter-spacing: -.03em;
  line-height: .95;
  text-transform: uppercase;
}
.display--sm { font-size: clamp(34px, 4.2vw, 68px); }
.display--xl { font-size: clamp(56px, 9.5vw, 168px); letter-spacing: -.04em; }

/* section bar: two label blocks */
.sec-bar { border-bottom: 1px solid var(--line); }
.sec-bar .cell-l, .sec-bar .cell-r { padding: 14px var(--pad); display: block; }

/* reveal-on-scroll */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.rv.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ═══════════ HEADER — two half-blocks ═══════════ */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--hdr-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  z-index: 100;
  transition: background .35s ease;
}
.hdr-l {
  display: flex;
  align-items: stretch;
  border-right: 1px solid var(--line);
}
.hdr-r { display: flex; align-items: stretch; }
.hdr-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(14px, 1.6vw, 24px);
  background: var(--cell-dark-bg);
  border-right: 1px solid var(--line);
}
.hdr-logo img { height: 28px; width: auto; display: block; }
.hdr-logo:hover { opacity: .85; }
.hdr-time { display: flex; align-items: center; padding: 0 clamp(14px, 2vw, 28px); }
#hdr-clock { transition: opacity .3s ease; }
#hdr-clock.roll { opacity: 0; }
.hdr-nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  padding: 0 clamp(14px, 2vw, 28px);
  min-width: 0;
  overflow-x: auto;
}
.hdr-nav a { font-size: 14px; white-space: nowrap; }
.hdr-nav a:hover { color: var(--accent); }
.hdr-theme {
  width: 64px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-left: 1px solid var(--line);
  cursor: pointer;
  color: var(--fg);
}
.tt-track {
  width: 30px; height: 16px;
  border: 1px solid currentColor;
  border-radius: 99px;
  display: flex;
  align-items: center;
  padding: 2px;
}
.tt-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  transition: transform .3s ease;
}
html[data-theme="dark"] .tt-dot { transform: translateX(13px); }
.hdr-contact {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 clamp(18px, 2.5vw, 36px);
  background: var(--cell-dark-bg);
  color: var(--cell-dark-fg);
  border-left: 1px solid var(--line);
  font-size: 14px;
}
.hdr-contact:hover { background: var(--accent); color: #fff; }

main { padding-top: var(--hdr-h); }
section, footer.contact { border-bottom: 1px solid var(--line); }

/* ═══════════ HERO — sticky wordmark block + diagonal connected artwork ═══════════ */
/* four equal structural quarters + banner strip */
:root {
  --hero-h1: clamp(300px, 46vh, 560px);
  --hero-h2: clamp(300px, 46vh, 560px);
  --art-h: clamp(280px, 46vh, 520px);
}
.hero-main { border-bottom: 1px solid var(--line); }
/* the wordmark block pins under the header while the rest of the hero scrolls */
.hero-name {
  position: sticky;
  top: var(--hdr-h);
  height: var(--hero-h1);
  background: var(--bg);
  z-index: 5;
  display: flex;
  align-items: flex-end;      /* logo sits on the bottom edge, Aspen-style */
  padding: var(--pad);
  border-bottom: 1px solid var(--line);
}
.hero-logo { width: 100%; }   /* fills the block inside its padding */
.hero-logo img {
  width: 100%;
  height: auto;
  display: block;
}
/* the two windows onto the shared artwork */
.hero-word, .hero-word-cell { display: none; }   /* phone-only: the name split across two squares */
.hero-win { overflow: hidden; position: relative; }
.hero-win--tr { height: var(--hero-h1); border-bottom: 1px solid var(--line); }
.hero-win--bl { height: var(--hero-h2); }
.hero-win canvas { display: block; image-rendering: pixelated; }
.hero-quarters { height: var(--hero-h2); border-bottom: 1px solid var(--line); }
.hero-cell {
  padding: clamp(18px, 2.2vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.hero-cell p { font-size: clamp(19px, 1.9vw, 30px); line-height: 1.3; letter-spacing: -.01em; }
.hero-cell--dark { background: var(--cell-dark-bg); color: var(--cell-dark-fg); }
.hero-cell--blue { background: var(--klein); color: var(--klein-fg); }
.recent-list { display: flex; flex-direction: column; transition: opacity .38s ease, transform .38s ease; }
.recent-list.swap { opacity: 0; transform: translateY(6px); }
.recent-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid color-mix(in srgb, var(--klein-fg) 30%, transparent);
}
.recent-list li:first-child { border-top: none; }
.recent-list li .mono-label:first-child { color: var(--klein-fg); }
.recent-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.recent-link .arr { font-size: 11px; line-height: 1; opacity: 0; transform: translate(-4px, 4px); transition: opacity .25s ease, transform .25s ease; }
.recent-link:hover .arr, .recent-link:focus-visible .arr { opacity: 1; transform: none; }
.recent-link:hover .mono-label { text-decoration: underline; text-underline-offset: 3px; }
/* ── blocks 03/04: statement and living-artwork cells in a checkerboard ── */
.art-row { min-height: var(--art-h); }
.art-cell {
  overflow: hidden;
  position: relative;
  min-height: var(--art-h);
}
.art-cell canvas { display: block; image-rendering: pixelated; }
.statement-cell {
  background: var(--cell-dark-bg);
  color: var(--cell-dark-fg);
  padding: var(--pad);
  display: flex;
  align-items: flex-end;
  min-height: var(--art-h);
}
.statement-cell--blue { background: var(--klein); color: var(--klein-fg); }
/* labels and ■ markers inside the Klein statement blocks read off-white */
.hero-cell--blue .lbl::before,
.stat--blue .lbl::before,
.ft-cta-cell .lbl::before { color: var(--klein-fg); }
.hero-cell--blue .mono-label,
.stat--blue .stat-label,
.stat--blue .mono-label { color: var(--klein-fg); }

/* ═══════════ ABOUT ═══════════ */
/* ~320px of empty space is reserved under the About copy for later use.
   No rule closes this band: the black stat cell hangs inside it. */
.about-label { padding: clamp(48px, 9vh, 120px) var(--pad); }
.about-body {
  padding: clamp(48px, 9vh, 120px) var(--pad) 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.wordreveal {
  font-size: var(--fs-lead);
  line-height: 1.62;
  letter-spacing: var(--ls-text);
  max-width: 27em;
}
.wordreveal + .wordreveal { margin-top: 1.1em; }
.wordreveal .w { opacity: .16; transition: opacity .25s linear; }
.wordreveal .w.on { opacity: 1; }

/* staggered stat mosaic — measured off the original: cell heights run 1 : 4 : 2
   (black 200 / wide 800 / gray 400 at a 1463px viewport), 20px padding,
   number at the top, caption at the bottom. */
.stats {
  --u: clamp(140px, 21vh, 205px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: var(--u) calc(var(--u) * 2) calc(var(--u) * 2);
}
.stat-fill { grid-column: 1 / 3; grid-row: 1; border-right: 1px solid var(--line); }
.stat-fill--tr { grid-column: 4; grid-row: 1; }
/* the black cell pins under the header and rides down its own column */
.stat-col3 { grid-column: 3; grid-row: 1 / 4; border-right: 1px solid var(--line); }
.stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  min-width: 0;
}
.stat--raised {
  position: sticky;
  top: var(--hdr-h);
  height: var(--u);                                          /* 1 unit tall */
}
.stat--wide   { grid-column: 1 / 3; grid-row: 2; border-right: 1px solid var(--line); }   /* 2 units */
.stat--stage  { grid-column: 1 / 3; grid-row: 3; border-right: 1px solid var(--line);
                border-top: 1px solid var(--line); }                                     /* 2 units */
.stat--last   { grid-column: 4; grid-row: 2; }              /* 2 units */
.stat--aum {
  grid-column: 4; grid-row: 3;                               /* 2 units */
  border-top: 1px solid var(--line);
  position: relative;
  isolation: isolate;
}
/* a quiet halftone, echoing the dithered artwork upstairs */
.stat--aum::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--fg) .9px, transparent 1px);
  background-size: 5px 5px;
  opacity: .16;
}
.stat--black { background: var(--cell-dark-bg); color: var(--cell-dark-fg); }
.stat--blue { background: var(--klein); color: var(--klein-fg); }
.stat--gray { background: var(--gray-cell); }
/* one scale for every figure: a shared base, stepped by role.
   Tabular lining figures stop the digits wobbling as they count up. */
.stat-num {
  --num: clamp(44px, 6.0vw, 88px);   /* quarter-width, 2u */
  font-size: var(--num);
  letter-spacing: -.04em;
  line-height: .92;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
/* Inter's hyphen carries wide sidebearings; pull it in so the compound
   reads as one word next to the spaced range dash */
.stat-num .hy { margin: 0 -.07em; }
/* size follows the cell, not the content: same-size cells share a size */
.stat--wide  .stat-num,
.stat--stage .stat-num  { --num: clamp(52px, 8.2vw, 120px); }  /* half-width, 2u */
/* Pre-seed stays one line; "to A" drops below, right-aligned. Block flow —
   NOT flex, or each inline piece would become its own column item. */
.stat-num--stage { white-space: normal; }
.stat-num--stage .stage-l1 { display: block; white-space: nowrap; }
.stat-num--stage .stage-toa { display: block; text-align: right; white-space: nowrap; }
.stat--raised .stat-num { --num: clamp(38px, 5.0vw, 72px); }   /* quarter-width, 1u */
.stat-label {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-text);
  line-height: 1.3;
  text-transform: none;
  opacity: .78;
}
.stat--black .stat-label { opacity: .72; }

/* ═══════════ SECTORS — sticky intro block | dark stack block ═══════════ */
.sectors-left { background: var(--gray-cell); }
.sectors-left .display--sm { font-size: clamp(42px, 5.6vw, 92px); }
/* staggered three-line lockup: WHERE left / WE small mid-right / INVEST indented */
.sectors-title { display: flex; flex-direction: column; }
.sectors-title span { display: block; line-height: 1; }
.sectors-title .st-2 { font-size: .42em; margin: .55em 0 .5em 52%; }
.sectors-title .st-3 { font-size: 1.28em; align-self: flex-end; }
.sectors-left-inner {
  position: sticky;
  top: var(--hdr-h);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.5vh, 40px);
  min-height: 60vh;
}
.sectors-left-inner p { max-width: 28em; font-size: var(--fs-body); letter-spacing: var(--ls-text); line-height: var(--lh-body); }
.sectors-left-inner .btn-block { margin-top: auto; }
.sectors-right {
  background: var(--cell-dark-bg);
  color: var(--cell-dark-fg);
}
.svc {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: clamp(380px, 55vh, 580px);
}
.svc + .svc { border-top: 1px solid color-mix(in srgb, var(--cell-dark-fg) 25%, transparent); }
.svc-top { display: flex; justify-content: space-between; }
.svc-num { color: var(--accent-on-dark); }
.svc-kicker { opacity: .55; }
.svc-title {
  font-size: clamp(30px, 2.8vw, 46px);
  letter-spacing: -.02em;
}
.svc-desc { font-size: var(--fs-body); letter-spacing: var(--ls-text); line-height: var(--lh-body); opacity: .92; max-width: 36em; }
.svc-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
}
.svc-art {
  width: clamp(120px, 11vw, 180px);
  height: auto;
  color: var(--cell-dark-fg);
  opacity: .9;
  flex: none;
}
/* Consumer Tech: static halftone square, drawn by aspen.js at 2px grain */
.svc-art--dither { width: clamp(180px, 17vw, 270px); aspect-ratio: 1; opacity: 1; }
.svc-art--dither canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
/* Company Building: the old site's team/market/product orbit loop. The GIF
   is an opaque near-black square with the rings in its middle third, so we
   crop to the rings and screen-blend the black away on the dark panel. */
.svc-art--orbit {
  width: clamp(260px, 26vw, 400px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  opacity: 1;
  mix-blend-mode: screen;
}
/* contrast pushes the GIF's navy ground to true black so screen removes it;
   the crop frames the rings from the "market" label to the "team" label */
.svc-art--orbit img { width: 130%; max-width: none; margin: -37% 0 0 -17.5%; filter: contrast(1.35); }
/* dark theme: the panel turns light, so flip the GIF — ground to white, rings
   to their darker counterparts (invert + hue-rotate keeps the hues) — and
   multiply it in so the white ground vanishes exactly like the black did */
html[data-theme="dark"] .svc-art--orbit { mix-blend-mode: multiply; }
html[data-theme="dark"] .svc-art--orbit img { filter: contrast(1.35) invert(1) hue-rotate(180deg); }
.svc-tags { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.svc-tags li {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
}
.svc-tags li::before {
  content: "■";
  color: var(--accent-on-dark);
  font-size: 7px;
  vertical-align: 2px;
  margin-right: 9px;
}

/* ═══════════ PORTFOLIO ═══════════ */
.pf-feature { border-bottom: 1px solid var(--line); }
.pf-rotator {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  min-height: clamp(240px, 34vh, 380px);
  overflow: hidden;
}
.pf-rot-name {
  font-size: clamp(40px, 5.6vw, 96px);
  letter-spacing: -.03em;
  line-height: 1;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-rot-name.swap { opacity: 0; transform: translateY(14px); transition: none; }
.pf-rot-meta { display: flex; justify-content: space-between; }
.pf-rot-cat { color: var(--accent); }
.pf-blurb {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}
.pf-rot-desc-wrap { display: flex; flex-direction: column; gap: 22px; }
.pf-rot-desc {
  font-size: var(--fs-body); letter-spacing: var(--ls-text); line-height: var(--lh-body);
  max-width: 30em; min-height: calc(var(--lh-body) * 3em);
  transition: opacity .2s ease, transform .2s ease;
}
.pf-rot-desc.swap { opacity: 0; transform: translateY(10px); transition: none; }
.pf-rot-link { align-self: flex-start; }
/* 4 quarter-columns: the axis falls on the middle column boundary */
.pf-list { display: grid; grid-template-columns: repeat(4, 1fr); }
.pf-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px clamp(16px, 2vw, 32px);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transition: background .2s ease;
  min-width: 0;
}
.pf-item:nth-child(4n) { border-right: none; }
.pf-item:hover { background: var(--accent-soft); }
.pf-item-idx { color: var(--accent); flex: none; }
.pf-item-name {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.pf-item-cat { opacity: .5; flex: none; font-size: 9.5px; }
.pf-item--pad { pointer-events: none; }

/* ═══════════ NEWS — three rows of tiles on a sideways track ═══════════ */
.sec-bar .news-bar-r { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.news-list {
  --th: clamp(200px, 19vw, 272px);
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, var(--th));
  grid-auto-columns: 25%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
}
.news-list::-webkit-scrollbar { display: none; }
.news-tile {
  position: relative;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.5vw, 24px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: background .25s ease;
}
.news-tile:nth-child(3n) { border-bottom: none; }
.news-tile[href]:hover { background: var(--accent-soft); }
.news-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.news-co { margin-top: auto; color: var(--accent); }
.news-tile h3 {
  margin-top: 10px;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 450;
  letter-spacing: -.015em;
  line-height: 1.25;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  padding: 4px 9px;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  flex: none;
}
.news-tag--exit { background: transparent; color: inherit; border: 1px solid var(--line); }
.news-date { opacity: .55; flex: none; }

/* ═══════════ RESEARCH — intro block | stacked paper blocks ═══════════ */
.research-intro {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.research-intro p { max-width: 26em; font-size: var(--fs-body); letter-spacing: var(--ls-text); line-height: var(--lh-body); }
.paper {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
  min-height: clamp(200px, 26vh, 280px);
  transition: background .2s ease;
}
.paper + .paper { border-top: 1px solid var(--line); }
.paper:hover { background: var(--accent-soft); }
.paper h3 {
  font-size: clamp(21px, 1.9vw, 30px);
  letter-spacing: -.015em;
  flex: 1;
  padding-top: 8px;
  max-width: 20em;
}
.paper > .mono-label:first-child { color: var(--accent); }
.paper-date { opacity: .65; }

/* ═══════════ TEAM — every row = two blocks ═══════════ */
.team { position: relative; }
/* head: the section word top-left, the tagline bottom-right, and a lot of air
   between them (the roster below is dense, so the entrance is not) */
.team-head { border-bottom: 1px solid var(--line); min-height: clamp(380px, 58vh, 680px); }
/* the word TEAM pins under the header while its column scrolls past */
.team-head-l { padding: 0; display: block; }
.team-word { position: sticky; top: var(--hdr-h); padding: var(--pad); }
.team-head-r {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.team-tag { margin: 0; }
/* intro row: label + two arrow cells on the left, copy on the right, then air
   before the portraits start */
.team-intro { border-bottom: 1px solid var(--line); min-height: clamp(280px, 34vh, 420px); }
.team-intro-l { display: grid; grid-template-columns: 1fr minmax(84px, 19%) minmax(84px, 19%); align-content: start; padding: 0; }
.team-intro-lbl { padding: var(--pad); border-bottom: 1px solid var(--line); min-height: 90px; }
.tm-arrow {
  min-height: 90px; border: none; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: none; color: var(--fg); font-family: var(--font-mono); font-size: 26px; cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.tm-arrow:hover:not(:disabled) { background: var(--accent); color: #fff; }
.tm-arrow:disabled { opacity: .3; cursor: default; }
.team-intro-r { padding: var(--pad); }
.team-intro-r p { max-width: 30em; }
/* portrait grid on the four quarter columns — the axis is the 2|3 border.
   Stripe portraits (Montana-Engels-style line screen), pre-rendered into site/team/stripes. */
/* horizontal track: exactly 4 portraits fit the width; any extra scroll in
   from the side (Core Team has 5, so Grayson lives just off the right edge). */
.tm-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tm-track::-webkit-scrollbar { display: none; }
/* an empty row between the core team and the partners; only the centre axis runs through it */
/* the empty row is a window onto the hero artwork (same viewport-fixed scene,
   same cursor gas trail); the artwork runs edge to edge, no axis line */
.tm-gap { height: 25vw; position: relative; overflow: hidden; background: var(--bg); }   /* script sets it to one portrait's height */
.tm-gap canvas, .tm-cell--art canvas { display: block; position: absolute; left: 0; top: 0; }
/* the empty slots beside the partners continue the artwork, with no lines around them */
.tm-cell--art { border: none; position: relative; overflow: hidden; background: var(--bg); align-self: stretch; }
.tm-cell {
  position: relative;
  flex: 0 0 25%;
  max-width: 25%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  border-right: 1px solid var(--line);   /* the column line only; no line under the name bar */
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tm-cell:last-child { border-right: none; }
/* the founding GP's card lives in an overlay that spans from the core-team row to the
   partners row; inside it the card is sticky under the header, so it rides down over the
   artwork row and stops level with Audrey and Keyan */
.team-roster { position: relative; }
.tm-pin { position: absolute; left: 0; width: 25%; pointer-events: none; z-index: 3; }
.tm-pin .tm-cell { position: sticky; top: var(--hdr-h); width: 100%; max-width: none; flex: none; pointer-events: auto; background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tm-cell--ghost { visibility: hidden; }
/* fellows: white block left, a grid of small square tiles right (two rows of four) */
.tm-fellows { border-bottom: 1px solid var(--line); }
.tm-fellows-l { padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.tm-fellows-h { font-size: clamp(28px, 3vw, 48px); letter-spacing: -.025em; line-height: 1.02; margin-bottom: 12px; }
.tm-fellows-l p { max-width: 26em; opacity: .75; }
/* the squares: sized to whole pixels by script, and each one bleeds 1px over its
   neighbours so no hairline of background can show between them; the one horizontal
   line is drawn by the grid itself, above the tiles */
.tm-fellows-grid { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; min-height: 50vw; }
@media (min-width: 821px) { .tm-fellows-grid { min-height: 25vw; } }   /* two rows of quarter-of-a-half squares */
.tm-fellows-grid::after { content: ''; position: absolute; left: 0; right: 0; top: var(--tile-h, 50%); height: 1px; background: var(--line); z-index: 2; }
.tm-tile {
  position: relative; z-index: 1; min-width: 0; padding: 0; margin: -1px;
  background: none; border: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden;
}
.tm-tile--empty { cursor: default; background: var(--bg); z-index: 0; }
.tm-tile--empty canvas { display: block; position: absolute; left: 0; top: 0; }
.tm-tile .tm-pic { position: absolute; inset: 0; aspect-ratio: auto; }
.tm-tile .tm-pic img { object-position: 50% 30%; }
.tm-tile-name { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 5px 8px; background: var(--bg); font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-tile.open .tm-tile-name { background: var(--accent); color: #fff; }

/* the title rides on the portrait as a boxed tag, top right */
/* the title tag floats a step in from the top-right corner; on hover a pair of stripe-drawn
   quote marks fades in, hugging the box's top-left and top-right corners */
.tm-tagwrap { position: absolute; top: clamp(24px, 3vw, 48px); right: clamp(44px, 5vw, 76px); z-index: 1; max-width: 58%; }   /* room to the right for the closing mark */
.tm-tag {
  position: relative; display: block;
  padding: 12px 16px; background: var(--bg); color: var(--fg);
  text-align: right;                     /* no outline: a plain white slip on the portrait */
}
/* a tag with a second line of text swaps to it on hover (Grayson: “Senior Investment Associate” → “AI”) */
.tm-tag-b { display: none; }
.tm-cell:hover .tm-tag-a, .tm-cell.open .tm-tag-a { display: none; }
.tm-cell:hover .tm-tag-b, .tm-cell.open .tm-tag-b { display: inline; }   /* the box shrinks to the two letters; the quotes follow */
.tm-q {
  position: absolute; z-index: 2; width: clamp(16px, 1.6vw, 24px); aspect-ratio: 90 / 170;
  background: no-repeat center / contain; pointer-events: none;
  opacity: 0; transition: opacity .45s ease, transform .45s ease;
}
/* the marks sit where quotation marks sit around a word: “ just left of the box, ” just right
   of it, both hanging from the box's top edge like quotes from the cap line; two short stripes
   with a dot at the widest point, in the Klein blue of the hover fill so they read over hair */
.tm-q--o { background-image: url(team/stripes/quote_open.png); left: 0; top: 0; transform: translate(calc(-100% - 5px), -28%) translateY(6px); }
.tm-q--c { background-image: url(team/stripes/quote_close.png); right: 0; top: 0; transform: translate(calc(100% + 5px), -28%) translateY(6px); }
.tm-cell:hover .tm-q, .tm-cell.open .tm-q { opacity: 1; }
.tm-cell:hover .tm-q--o, .tm-cell.open .tm-q--o { transform: translate(calc(-100% - 5px), -28%); }
.tm-cell:hover .tm-q--c, .tm-cell.open .tm-q--c { transform: translate(calc(100% + 5px), -28%); }
.tm-cell--pad { cursor: default; }
.tm-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tm-pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ebecee; }
.tm-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; will-change: transform; }
.tm-cell:hover .tm-pic img, .tm-cell.open .tm-pic img { transform: scale(1.03); }
/* stripe portraits: cross-fade to the deeper-blue variant on hover */
.tm-pic--stripe { background: #c1d4ea; }
.tm-pic--stripe .tm-over { opacity: 0; transition: opacity .7s ease, transform .5s ease; }
.tm-cell:hover .tm-pic--stripe .tm-over, .tm-cell.open .tm-pic--stripe .tm-over,
.tm-tile:hover .tm-pic--stripe .tm-over, .tm-tile.open .tm-pic--stripe .tm-over { opacity: 1; }
.tm-cell:hover .tm-pic--stripe img, .tm-cell.open .tm-pic--stripe img { transform: none; }
/* hero-style cursor gas trail over the portrait on hover */
.tm-fx {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity .4s ease;
  image-rendering: pixelated; mix-blend-mode: screen;
}
.tm-cell:hover .tm-fx { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tm-fx { display: none; } }
.tm-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: start;
  padding: 14px var(--pad) 16px;
}
.tm-name { grid-column: 1; font-size: clamp(16px, 1.3vw, 20px); letter-spacing: -.015em; min-width: 0; }
.tm-title { grid-column: 1; opacity: .6; }
.tm-plus { grid-column: 2; grid-row: 1 / span 2; }
.tm-plus {
  flex: none;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent);
  transition: transform .3s ease;
}
.tm-cell.open .tm-plus { transform: rotate(45deg); }
/* the bio drawer: a full-width row inserted right after the track */
.tm-drawer { border-bottom: 1px solid var(--line); }
.tm-drawer .cell-l {
  background: var(--klein);
  color: var(--klein-fg);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: clamp(220px, 30vh, 340px);
}
.tm-drawer .lbl::before { color: var(--klein-fg); }
.tm-drawer-name { font-size: clamp(28px, 3vw, 48px); letter-spacing: -.025em; line-height: 1.02; margin-top: 14px; }
.tm-drawer-title { margin-top: 8px; opacity: .8; }
.tm-drawer .mono-cta { color: var(--klein-fg); }
.tm-drawer .mono-cta:hover { color: #fff; }
.tm-drawer .cell-r { padding: var(--pad); display: flex; flex-direction: column; gap: 16px; }
.tm-drawer p { font-size: var(--fs-body); letter-spacing: var(--ls-text); line-height: var(--lh-body); max-width: 58ch; }
/* prev/next arrows shown on the group label when the track overflows */
.tm-group .cell-r { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.tm-nav { display: inline-flex; gap: 2px; }
.tm-nav button {
  width: 26px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); color: var(--fg);
  cursor: pointer; font-family: var(--font-mono); font-size: 13px; line-height: 1;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.tm-nav button:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.tm-nav button:disabled { opacity: .3; cursor: default; }

/* person side page: right half of the screen, slides in over a dimmed page */
.tm-side { position: fixed; inset: 0; z-index: 120; visibility: hidden; pointer-events: none; }   /* above the fixed header, so the × is reachable */
.tm-side.on { visibility: visible; pointer-events: auto; }
.tm-side-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .45s ease; }
.tm-side.on .tm-side-scrim { opacity: 1; }
.tm-side-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 50%;
  background: var(--bg); color: var(--fg); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .55s cubic-bezier(.2, .7, .15, 1);
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.tm-side.on .tm-side-panel { transform: none; }
.tm-side-close {
  position: absolute; top: 0; left: 0; z-index: 3; width: var(--hdr-h); height: var(--hdr-h);
  background: var(--klein); color: var(--klein-fg); border: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 28px; line-height: 1; cursor: pointer; transition: background .2s ease;
}
.tm-side-close:hover { background: var(--accent); }
.tm-side-pic { position: relative; flex: none; height: 66vh; min-height: 320px; background: #c1d4ea; overflow: hidden; }
.tm-side-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.tm-side-grid { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
.tm-side-col { display: flex; flex-direction: column; min-width: 0; }
.tm-side-col--r { margin-top: -64px; position: relative; z-index: 1; }
.tm-side-name {
  background: var(--cell-dark-bg); color: var(--cell-dark-fg); padding: var(--pad);
  font-size: clamp(26px, 2.4vw, 40px); letter-spacing: -.025em; line-height: 1.05;
  min-height: 150px; display: flex; align-items: flex-end;
}
.tm-side-link {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px var(--pad); color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  transition: background .2s ease, color .2s ease; min-width: 0;
}
.tm-side-link span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-side-link:hover { background: var(--accent); color: #fff; }
.tm-side-art { position: relative; flex: 1; min-height: 200px; overflow: hidden; border-right: 1px solid var(--line); }
.tm-side-art canvas { position: absolute; left: 0; top: 0; display: block; }
.tm-side-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  height: 64px; padding: 0 var(--pad); background: var(--klein); color: var(--klein-fg);
  text-decoration: none; font-size: 16px; transition: background .2s ease;
}
.tm-side-cta:hover { background: var(--accent); color: #fff; }
.tm-side-bio { flex: 1; background: var(--gray-cell); padding: var(--pad); display: flex; flex-direction: column; gap: 18px; }
.tm-side-bio p { font-size: var(--fs-body); letter-spacing: var(--ls-text); line-height: var(--lh-body); max-width: 34em; }
html.side-open { overflow: hidden; }
/* Calendly's overlay must sit above the side page */
.calendly-overlay { z-index: 200 !important; }
@media (max-width: 820px) {
  .tm-side-panel { width: 100%; border-left: none; }
  .tm-side-pic { height: 52vh; }
  .tm-side-grid { grid-template-columns: 1fr; }
  .tm-side-col--r { margin-top: 0; }
  .tm-side-art { min-height: 180px; border-right: none; }
}

/* hover wipe: Klein blue sweeps across the name bar (left → right) and the title tag
   (right → left); the type goes off-white. Stays on while the person's side page is open. */
.tm-meta { position: relative; }                       /* the tag and the tile name are already absolute */
.tm-meta, .tm-tag, .tm-tile-name { overflow: hidden; isolation: isolate; }
.tm-tile-name { z-index: 1; display: inline-block; }
/* the blue layer sits at z-index -1 inside each bar's own stacking context: above the
   bar's white background, below its text (the tag's text is a bare text node, so it
   cannot be lifted above the layer any other way) */
.tm-meta::before, .tm-tag::before, .tm-tile-name::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background: var(--klein);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .38s cubic-bezier(.7, 0, .2, 1);
}
.tm-meta, .tm-tag, .tm-tile-name { transition: color .18s ease .1s; }
.tm-meta .tm-name, .tm-meta .tm-plus, .tm-meta .tm-title { transition: color .18s ease .1s; }
.tm-cell:hover .tm-meta::before, .tm-cell.open .tm-meta::before,
.tm-cell:hover .tm-tag::before,  .tm-cell.open .tm-tag::before,
.tm-tile:hover .tm-tile-name::before, .tm-tile.open .tm-tile-name::before { transform: scaleX(1); transform-origin: left center; }
.tm-cell:hover .tm-meta, .tm-cell.open .tm-meta,
.tm-cell:hover .tm-tag,  .tm-cell.open .tm-tag,
.tm-cell:hover .tm-meta .tm-name, .tm-cell.open .tm-meta .tm-name,
.tm-cell:hover .tm-meta .tm-plus, .tm-cell.open .tm-meta .tm-plus,
.tm-tile:hover .tm-tile-name, .tm-tile.open .tm-tile-name { color: var(--klein-fg); }
.tm-tile.open .tm-tile-name { background: var(--bg); }

/* ── the team's hover wipe, applied to every hoverable box on the site: Klein blue sweeps in
   from the left, the type goes off-white; the old instant tints are switched off.
   On touch screens a tap is a hover, and the swept state would stick to whatever was last
   tapped, so every :hover below is disabled there (the .open state still shows). ── */
@media (hover: none) {
  .btn-block:hover::before, .hdr-contact:hover::before, .pf-item:hover::before, .news-tile[href]:hover::before,
  .paper:hover::before, .cr-btn:hover::before, .ft-cells a:hover::before, .tm-arrow:hover:not(:disabled)::before,
  .tm-side-link:hover::before, .tm-meta::before, .tm-tag::before, .tm-tile-name::before,
  .ft-cta-cell:hover .ft-cta-btn::before, .hero-cta-btn:hover::before { transform: scaleX(0) !important; }
  .btn-block:hover, .hdr-contact:hover, .pf-item:hover, .news-tile[href]:hover, .paper:hover, .cr-btn:hover,
  .ft-cells a:hover, .tm-arrow:hover:not(:disabled), .tm-side-link:hover, .ft-cta-cell:hover .ft-cta-btn, .hero-cta-btn:hover,
  .btn-block:hover *, .hdr-contact:hover *, .pf-item:hover *, .news-tile[href]:hover *, .paper:hover *, .cr-btn:hover *,
  .ft-cells a:hover *, .tm-side-link:hover * { color: inherit; }
  .btn-block:hover, .ft-cells a:hover, .pf-item:hover, .paper:hover, .cr-btn:hover, .news-tile[href]:hover { color: var(--fg); }
  .hdr-contact:hover { color: var(--cell-dark-fg); }
  .tm-side-link:hover { color: var(--fg); }
  .hero-cta-btn:hover { color: var(--fg); }
  .ft-cta-cell:hover .ft-cta-btn { color: var(--klein); }
  .tm-cell:hover .tm-meta, .tm-cell:hover .tm-tag, .tm-cell:hover .tm-meta .tm-name, .tm-cell:hover .tm-meta .tm-plus,
  .tm-tile:hover .tm-tile-name { color: var(--fg); }
  .tm-cell:hover .tm-meta::before, .tm-cell:hover .tm-tag::before, .tm-tile:hover .tm-tile-name::before { transform: scaleX(0) !important; }
  .tm-cell:hover .tm-q { opacity: 0; }
  .tm-cell:hover .tm-pic--stripe .tm-over, .tm-tile:hover .tm-pic--stripe .tm-over { opacity: 0; }
  .tm-cell:hover .tm-tag-a { display: inline; } .tm-cell:hover .tm-tag-b { display: none; }
  /* the open (tapped) card still shows its swept state */
  .tm-cell.open .tm-meta::before, .tm-cell.open .tm-tag::before, .tm-tile.open .tm-tile-name::before { transform: scaleX(1) !important; }
  .tm-cell.open .tm-meta, .tm-cell.open .tm-tag, .tm-cell.open .tm-meta .tm-name, .tm-cell.open .tm-meta .tm-plus, .tm-tile.open .tm-tile-name { color: var(--klein-fg); }
  .tm-cell.open .tm-q { opacity: 1; }
  .tm-cell.open .tm-pic--stripe .tm-over, .tm-tile.open .tm-pic--stripe .tm-over { opacity: 1; }
  .tm-cell.open .tm-tag-a { display: none; } .tm-cell.open .tm-tag-b { display: inline; }
}
.btn-block, .hdr-contact, .pf-item, .news-tile[href], .paper, .cr-btn, .ft-cells a, .tm-arrow, .tm-side-link {
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .18s ease .1s;   /* type flips a beat after the edge has passed */
}
/* the fill grows from the left on enter; on leave the origin flips to the right so it keeps
   travelling and exits stage right instead of backing out. Straight vertical edge. */
.btn-block::before, .hdr-contact::before, .pf-item::before, .news-tile[href]::before, .paper::before,
.cr-btn::before, .ft-cells a::before, .tm-arrow::before, .tm-side-link::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background: var(--klein);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .38s cubic-bezier(.7, 0, .2, 1);
}
.btn-block:hover::before, .hdr-contact:hover::before, .pf-item:hover::before, .news-tile[href]:hover::before,
.paper:hover::before, .cr-btn:hover::before, .ft-cells a:hover::before, .tm-arrow:hover:not(:disabled)::before,
.tm-side-link:hover::before { transform: scaleX(1); transform-origin: left center; }
/* the arrow glyph rides the sweep */
.btn-block .arr, .tm-side-link .arr, .paper .arr { transition: transform .3s cubic-bezier(.2, .7, .15, 1) .06s; }
.btn-block:hover .arr, .tm-side-link:hover .arr, .paper:hover .arr { transform: translateX(6px); }
.btn-block:hover, .hdr-contact:hover, .pf-item:hover, .news-tile[href]:hover, .paper:hover, .cr-btn:hover,
.ft-cells a:hover, .tm-arrow:hover:not(:disabled), .tm-side-link:hover { background: transparent; color: var(--klein-fg); }
.btn-block:hover *, .hdr-contact:hover *, .pf-item:hover *, .news-tile[href]:hover *, .paper:hover *, .cr-btn:hover *,
.ft-cells a:hover *, .tm-side-link:hover * { color: var(--klein-fg); transition: color .18s ease .1s; }
.pf-item:hover .lbl::before, .paper:hover .lbl::before, .cr-btn:hover .lbl::before, .news-tile[href]:hover .lbl::before { color: var(--klein-fg); }
.cr-btn:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .btn-block::before, .hdr-contact::before, .pf-item::before, .news-tile[href]::before, .paper::before,
  .cr-btn::before, .ft-cells a::before, .tm-arrow::before, .tm-side-link::before { transition: none; }
}

/* ── phone menu ── */
.hdr-menu {
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 18px; background: var(--klein); color: var(--klein-fg); border: none;
  font: inherit; font-size: 17px; cursor: pointer;
}
.hdr-menu-icon { position: relative; width: 22px; height: 12px; }
.hdr-menu-icon::before, .hdr-menu-icon::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform .3s ease, top .3s ease;
}
.hdr-menu-icon::before { top: 0; } .hdr-menu-icon::after { top: 10px; }
.hdr-menu.on .hdr-menu-icon::before { top: 5px; transform: rotate(45deg); }
.hdr-menu.on .hdr-menu-icon::after { top: 5px; transform: rotate(-45deg); }
.mnav {
  position: fixed; left: 0; right: 0; top: var(--hdr-h); bottom: 0; z-index: 90;
  background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s;
}
.mnav.on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s ease; }
.mnav-list { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.mnav-list a {
  flex: 1; display: flex; align-items: center; padding: 0 var(--pad);
  font-size: clamp(30px, 8.5vw, 44px); letter-spacing: -.02em; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line); min-height: 64px;
}
.mnav-bar { display: grid; grid-template-columns: 1fr 1fr 1fr auto; border-top: 1px solid var(--line); }
.mnav-clock { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-right: 1px solid var(--line); }
.mnav-clock .mono-label:last-child { opacity: .6; }
.mnav-toggle { display: flex; align-items: center; justify-content: center; padding: 0 18px; }
html.menu-open, html.side-open { overflow: hidden; }
/* iOS ignores overflow:hidden on the root; pinning the body does the job there */
html.menu-open body, html.side-open body { position: fixed; left: 0; right: 0; overflow: hidden; }
@media (min-width: 821px) { .mnav { display: none; } }

/* ═══════════ CAREERS — rows = two blocks ═══════════ */
.cr-row { border-bottom: 1px solid var(--line); }
.cr-row:last-child { border-bottom: none; }
.cr-btn {
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
  display: block;
  padding: 0;
}
.cr-btn:hover { background: var(--accent-soft); }
.cr-l {
  display: flex;
  align-items: center;
  padding: clamp(16px, 2vw, 26px) var(--pad);
}
.cr-r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 2vw, 26px) var(--pad);
  height: 100%;
}
.cr-title { font-size: clamp(20px, 2.1vw, 32px); letter-spacing: -.02em; }
.cr-meta { opacity: .55; }
.cr-body { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.cr-body-inner { align-items: stretch; }
.cr-col { padding: 0 var(--pad) clamp(20px, 2.5vw, 36px); }
.cr-body-inner h4 { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); margin-bottom: 10px; color: var(--accent); }
.cr-body-inner li { font-size: var(--fs-body); letter-spacing: var(--ls-text); line-height: var(--lh-body); padding-left: 14px; position: relative; }
.cr-body-inner li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.cr-apply { padding: 0 var(--pad) clamp(20px, 2.5vw, 36px); }

/* ═══════════ CONTACT / FOOTER ═══════════ */
.contact { border-bottom: none; }
.ft-top { border-bottom: 1px solid var(--line); }
.ft-top > .cell-r.split { height: 100%; }
.ft-tagline { padding: var(--pad); display: flex; align-items: flex-end; }
.ft-tagline h2 {
  font-size: clamp(30px, 3.2vw, 52px);
  letter-spacing: -.025em;
}
.ft-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: var(--pad);
}
.ft-nav a { font-size: 15px; }
.ft-nav a:hover { color: var(--accent); }
.ft-clocks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: var(--pad);
}
.ft-clock { display: flex; flex-direction: column; gap: 2px; }
.ft-clock-city { font-size: 15px; }
.ft-clock .mono-label { opacity: .6; }
.ft-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.ft-cells > * {
  padding: 18px var(--pad);
  font-size: 14.5px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ft-cells > *:last-child { border-right: none; }
.ft-cells a:hover { background: var(--accent-soft); }
.ft-split { border-bottom: 1px solid var(--line); }
.ft-logo-cell {
  background: var(--cell-dark-bg);
  color: var(--cell-dark-fg);
  padding: clamp(40px, 6vw, 90px) var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.ft-logo-img { width: clamp(260px, 28vw, 440px); height: auto; }
.ft-cta-cell {
  position: relative;
  background: var(--klein);
  color: var(--klein-fg);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: clamp(280px, 40vh, 440px);
  overflow: hidden;
}
.ft-cta-cell h3 {
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: -.025em;
}
.ft-diag {
  position: absolute;
  right: var(--pad);
  bottom: clamp(40px, 8vh, 80px);
  width: clamp(80px, 10vw, 160px);
  color: currentColor;
  opacity: .85;
  transition: transform .3s ease;
}
.ft-cta-cell:hover .ft-diag { transform: translate(6px, -6px); }
/* the call to action is a white box on the Klein cell; hovering the cell wipes it dark, same
   motion as every other box on the site */
/* a band across the bottom of the cell, edge to edge: it pulls out of the cell's padding with
   negative margins, the label at the left, the arrow at the right */
.ft-cta-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  align-self: stretch; width: auto;
  padding: 18px var(--pad); margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));
  background: #fff; color: var(--klein);
  transition: color .18s ease .1s;
}
.ft-cta-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: #232323;   /* fixed charcoal: the cell is Klein in both themes */
  transform: scaleX(0); transform-origin: right center;
  transition: transform .38s cubic-bezier(.7, 0, .2, 1);
}
.ft-cta-cell .ft-cta-btn { align-self: stretch; width: auto; max-width: none; }   /* beats the cell's own label rule */
.ft-cta-cell:hover .ft-cta-btn::before { transform: scaleX(1); transform-origin: left center; }
.ft-cta-cell:hover .ft-cta-btn { color: #fff; }
.ft-cta-btn .arr { transition: transform .3s cubic-bezier(.2, .7, .15, 1) .06s; }
.ft-cta-cell:hover .ft-cta-btn .arr { transform: translateX(6px); }
/* the same box in the hero's dark cell: white on charcoal, wiping Klein on hover */
/* the band takes the page's own colours, so it stays opposite to its cell in both themes:
   white on charcoal in light mode, charcoal on the (inverted) light cell in dark mode */
.hero-cta-btn { --p: clamp(18px, 2.2vw, 36px); text-decoration: none; background: var(--bg); color: var(--fg); padding: 16px var(--p); margin: 0 calc(-1 * var(--p)) calc(-1 * var(--p)); }
.hero-cta-btn::before { background: var(--klein); }
.hero-cta-btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.hero-cta-btn:hover { color: var(--klein-fg); }
.hero-cta-btn:hover .arr { transform: translateX(6px); }
.ft-cta-cell .mono-label:not(.ft-cta-btn) { border-bottom: 1px solid currentColor; width: fit-content; padding-bottom: 4px; }
.ft-bottom .cell-l, .ft-bottom .cell-r { padding: 16px var(--pad); display: block; opacity: .8; }
.ft-bottom .cell-r { text-align: right; }
.ft-bottom a:hover { color: var(--accent); }

/* ═══════════ RESPONSIVE — single column, splits stack ═══════════ */
@media (max-width: 1000px) {
  .hdr-nav a:nth-child(2), .hdr-nav a:nth-child(4) { display: none; }
  .pf-list { grid-template-columns: repeat(2, 1fr); }
  .pf-item:nth-child(4n) { border-right: 1px solid var(--line); }
  .pf-item:nth-child(2n) { border-right: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { min-height: 170px; }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split > .cell-l { border-right: none; }
  /* stack order + separation for stacked halves */
  /* phone hero: a two-by-two of squares — "Hat-Trick" / artwork / artwork / "Capital" — with the
     dark and blue cells stacked underneath. The two column wrappers dissolve so the four
     pieces can be placed on one grid. */
  /* two fixed square rows (half the viewport width each); no aspect-ratio on the cells, because
     Safari stops stretching grid items that carry one and the second row came up short */
  .hero-main { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 50vw 50vw auto; }
  .hero-main > .cell-l, .hero-main > .cell-r { display: contents; }
  .hero-name, .hero-win--tr, .hero-win--bl, .hero-word-cell { justify-self: stretch; align-self: stretch; width: auto; height: auto; min-height: 0; box-sizing: border-box; }
  .hero-name { grid-area: 1 / 1; position: static; padding: 16px; border-right: 1px solid var(--line); }
  .hero-win--tr { grid-area: 1 / 2; }
  .hero-win--bl { grid-area: 2 / 1; display: block; position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }   /* must stay positioned: the artwork canvas inside is absolute and clipped by this box */
  .hero-word-cell { grid-area: 2 / 2; display: flex; align-items: flex-end; padding: 16px; background: var(--gray-cell); border-bottom: 1px solid var(--line); }
  .hero-quarters { grid-column: 1 / -1; height: auto; }
  .hero-logo { display: none; }
  .hero-word { display: block; font-size: clamp(38px, 12vw, 56px); letter-spacing: -.03em; line-height: .95; }
  .hero-word-cell .hero-word { color: var(--fg); }
  .hero-cell--dark { border-bottom: 1px solid var(--line); }
  .hero-cell { min-height: 200px; height: auto; }
  .art-row { min-height: 0; }
  .statement-cell { min-height: 0; padding: clamp(40px, 12vw, 80px) var(--pad); border-bottom: 1px solid var(--line); }
  .art-cell { min-height: 0; height: 210px; }
  .about-label { padding: clamp(28px, 7vw, 44px) var(--pad) 0; }
  .about-body { padding: clamp(20px, 5vw, 32px) var(--pad) 130px; }
  .sec-bar .cell-r { display: none; }
  .sec-bar .cell-l { padding: 14px var(--pad); }
  .sectors-left-inner { position: static; min-height: 0; }
  .sectors-left { border-bottom: 1px solid var(--line); }
  .svc { min-height: 0; }
  .svc-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .svc-tags { align-items: flex-start; }
  .pf-rotator { border-bottom: 1px solid var(--line); min-height: 0; }
  .pf-list { grid-template-columns: 1fr; }
  .pf-item, .pf-item:nth-child(4n) { border-right: none; }
  .news-list { grid-auto-columns: 50%; --th: clamp(180px, 46vw, 240px); }
  .research-intro { border-bottom: 1px solid var(--line); }
  /* phone header: logo | clock | Menu. The desktop nav, toggle and Contact are hidden here;
     they live in the full-screen menu instead */
  .hdr { grid-template-columns: auto 1fr; }
  .hdr-l { display: grid; grid-template-columns: auto 1fr; }
  .hdr-time { display: flex; justify-content: center; white-space: nowrap; padding: 0 10px; border-right: 1px solid var(--line); }
  .hdr-r { display: none; }
  .hdr-menu { display: flex; }
  .team-head { min-height: 0; }
  .team-word { position: static; padding-bottom: 10px; }
  .team-intro { min-height: 0; }
  .team-intro-lbl { min-height: 64px; }
  .tm-tag { padding: 8px 10px; }
  .tm-tagwrap { top: 16px; right: 30px; }
  .team-intro-l { padding-bottom: 0; }
  /* phones: no sideways paging — every row wraps into pairs and shows everyone at once */
  .tm-track { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
  .tm-cell { flex: 0 0 50%; max-width: 50%; }
  .tm-cell:last-child { border-right: 1px solid var(--line); }
  .tm-cell:nth-child(2n of .tm-cell:not(.tm-cell--pad)) { border-right: none; }   /* counts only visible cells */
  .tm-cell--pad { display: none; }
  .tm-arrow { display: none; }
  .team-intro-l { grid-template-columns: 1fr; }
  .tm-drawer .cell-l { min-height: 0; }
  .cr-l { padding-bottom: 4px; }
  .cr-r { padding-top: 0; height: auto; }
  .cr-col { padding-bottom: 16px; }
  .ft-tagline { border-bottom: 1px solid var(--line); }
  .ft-nav { border-bottom: 1px solid var(--line); }
  .ft-cells { grid-template-columns: 1fr 1fr; }
  .ft-cells > * { border-bottom: 1px solid var(--line); }
  .ft-cells > *:nth-child(3), .ft-cells > *:nth-child(4) { border-bottom: none; }
  .ft-cells > *:nth-child(2n) { border-right: none; }
  .ft-logo-cell { border-bottom: 1px solid var(--line); }
  .ft-bottom .cell-r { text-align: left; padding-top: 0; }
  .stats { display: flex; flex-direction: column; }
  .stat-fill { display: none; }
  .stat-col3 { border-right: none; }
  .stat--raised { position: static; height: auto; }
  .stat { border-right: none; border-bottom: 1px solid var(--line); min-height: 170px; }
  .stat:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
  .hdr-nav a:nth-child(3), .hdr-nav a:nth-child(5) { display: none; }
}