/* ============================================================
   APEX — Project page design system
   Trackmint dark theme · Outfit font · viral-grade typography
   root build — font path: fonts/
   ============================================================ */

@font-face {
  font-family: Outfit;
  src: url("fonts/outfit-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Outfit;
  src: url("fonts/outfit-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ── Design tokens ────────────────────────────────────────── */
:root {
  --navy:       #0b1220;
  --navy-soft:  #14213d;
  --navy-mid:   #1e3055;
  --ink:        #eef1f7;
  --ink-2:      #c3c9d6;
  --ink-3:      #8691a4;
  --border:     rgba(255,255,255,0.09);
  --accent:     #2a78d6;
  --accent-soft:#1a3d6b;
  --gold:       #fca311;
  --gold-soft:  #3a2800;
  --good:       #22c55e;
  --good-soft:  #0d2e1f;
  --bad:        #ef4444;
  --bad-soft:   #3a0f0d;
  --mute:       #8691a4;
  --line:       rgba(255,255,255,0.08);
  --paper:      #ffffff;

  --d: clamp(38px, 9vw, 56px);
  --b: 16px;
  --max-w: 52rem;
  --px: clamp(1.1rem, 5vw, 2.5rem);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--navy-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }

html {
  background: var(--navy);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  font-family: Outfit, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: var(--b);
  line-height: 1.55;
  font-weight: 400;
  background: var(--navy);
  max-width: var(--max-w);
  padding:
    calc(1.2rem + env(safe-area-inset-top))
    var(--px)
    calc(3rem + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

/* ── Links ────────────────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ── Typography ───────────────────────────────────────────── */
.kicker {
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  margin: 0 0 1.4rem;
}
.kicker a {
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.2);
  text-underline-offset: 0.15em;
}
.kicker a:hover { text-decoration-color: var(--accent); }

h1 {
  font-size: var(--d);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.0;
  margin: 0 0 0.8rem;
  color: var(--ink);
}

h2 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 2.5rem 0 0.7rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

h3 {
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 1rem 0 0.4rem;
  color: var(--ink);
}

p { margin: 0 0 0.8rem; color: var(--ink-2); }
p b, li b { color: var(--ink); font-weight: 500; }

.lede {
  font-size: clamp(16px, 3.5vw, 18px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 30rem;
  margin: 0 0 1.2rem;
}

.fine { font-size: 13px; color: var(--ink-3); }
.who  { font-size: 14px; color: var(--ink-3); margin: 0 0 1.2rem; }

/* ── Stamps ───────────────────────────────────────────────── */
.stamps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.6rem; }
.stamp {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 0.22em 0.6em 0.26em;
  line-height: 1.3;
  background: var(--navy-soft);
  color: var(--ink-2);
  border-radius: 3px;
}
.stamp.go   { border-color: rgba(34,197,94,0.4);  color: var(--good); background: var(--good-soft); }
.stamp.mid  { border-color: rgba(252,163,17,0.4); color: var(--gold); background: var(--gold-soft); }
.stamp.stop { border-color: rgba(239,68,68,0.35); color: var(--bad);  background: var(--bad-soft); }

/* ── Tags ─────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 0.1em 0.5em 0.15em;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 3px;
}
.tag.ok   { border-color: rgba(34,197,94,0.4);  color: var(--good); background: var(--good-soft); }
.tag.wait { border-color: rgba(255,255,255,0.15); color: var(--ink-3); }
.tag.no   { border-color: rgba(239,68,68,0.35); color: var(--bad);  background: var(--bad-soft); }

/* ── Grid + Cards ─────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.2rem 0 0.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 6.5rem;
  padding: 1rem 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  background: var(--navy-soft);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.card:hover {
  background: var(--navy-mid);
  border-color: rgba(42,120,214,0.35);
  transform: translateY(-2px);
}
.card b {
  font-weight: 500;
  font-size: clamp(16px, 4.4vw, 18px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 0.4rem;
  color: var(--ink);
  display: block;
}
.card span {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.35;
}
.card:hover b { color: var(--accent); }

/* ── Doors ────────────────────────────────────────────────── */
.doors { margin-top: 0.25rem; }
.door {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: color 0.15s ease;
}
.door:first-child { border-top: 0; }
.door b {
  font-weight: 500;
  font-size: clamp(22px, 5.5vw, 30px);
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--ink);
}
.door span { color: var(--ink-3); text-align: right; max-width: 14rem; font-size: 14px; }
.door:hover b { color: var(--accent); }

/* ── Rows ─────────────────────────────────────────────────── */
.row {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.row:first-of-type { border-top: 0; }
.row b { font-weight: 500; color: var(--ink); }
.row span { color: var(--ink-3); text-align: right; font-size: 14px; }

/* ── Shop ─────────────────────────────────────────────────── */
.shop { padding: 0.95rem 0 0.35rem; border-top: 1px solid var(--line); }
.shop:first-of-type { border-top: 0; padding-top: 0; }
.shop .meta { font-size: 13px; color: var(--ink-3); margin: 0 0 0.25rem; }

/* ── Lists ────────────────────────────────────────────────── */
ul, ol { margin: 0 0 0.8rem; padding: 0 0 0 1.2rem; }
li { margin: 0 0 0.45rem; color: var(--ink-2); }

/* ── Draft / pre ──────────────────────────────────────────── */
.draft, pre.prompt {
  margin: 0.5rem 0 1.2rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line);
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--ink-2);
}

/* ── Log ──────────────────────────────────────────────────── */
.log { padding: 0.95rem 0 0.2rem; border-top: 1px solid var(--line); }
.log:first-of-type { border-top: 0; padding-top: 0.15rem; }
.log time { display: block; font-size: 13px; color: var(--ink-3); margin: 0 0 0.25rem; }

/* ── URL ──────────────────────────────────────────────────── */
.url { display: block; margin: 0 0 0.5rem; text-underline-offset: 0.15em; color: var(--accent); text-decoration: underline; text-decoration-color: rgba(42,120,214,0.35); }
.url:hover { text-decoration-color: var(--accent); }

/* ── Phone frame ──────────────────────────────────────────── */
.phone-wrap { display: flex; flex-direction: column; align-items: center; margin: 0.6rem 0 1.4rem; }
.phone {
  width: 320px;
  max-width: 94vw;
  height: 640px;
  background: #060d1a;
  border-radius: 40px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,0.06);
}
.phone iframe { width: 100%; height: 100%; border: 0; border-radius: 30px; background: #0b1220; }

/* ── Footer ───────────────────────────────────────────────── */
.foot {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
}
.foot a { text-decoration: underline; text-underline-offset: 0.14em; text-decoration-color: rgba(255,255,255,0.2); }
.foot a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ── Hero banner ──────────────────────────────────────────── */
.hero-banner {
  position: relative;
  margin: -0.5rem calc(-1 * var(--px)) 2rem;
  overflow: hidden;
  max-height: 260px;
  background: var(--navy-soft);
  border-bottom: 1px solid var(--border);
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
  filter: brightness(0.55) saturate(0.6);
  transition: filter 0.4s ease;
}
.hero-banner:hover .hero-img { filter: brightness(0.65) saturate(0.8); }
.hero-shim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--navy) 0%, rgba(11,18,32,0.4) 55%, transparent 100%);
}

/* ── KPI row ──────────────────────────────────────────────── */
.kpi-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 1rem 0 1.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  flex: 1;
  padding: 0 0.9rem;
}
.kpi:first-child { padding-left: 0; }
.kpi:last-child  { padding-right: 0; }
.kv {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}
.kl { font-size: 11px; color: var(--ink-3); letter-spacing: 0.03em; margin-top: 0.15rem; }
.kpi-sep { width: 1px; background: var(--line); flex-shrink: 0; align-self: stretch; }

/* ── Progress chart ───────────────────────────────────────── */
.progress-chart { margin: 0.6rem 0 1.4rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pc-row { display: grid; grid-template-columns: 1fr 2fr 44px; align-items: center; gap: 0.7rem; }
.pc-label { font-size: 13px; color: var(--ink-3); }
.pc-track { height: 6px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.pc-bar { height: 100%; border-radius: 3px; }
.pc-bar--done     { background: var(--accent); }
.pc-bar--progress { background: rgba(42,120,214,0.45); }
.pc-bar--future   { background: rgba(42,120,214,0.16); }
.pc-pct { font-size: 12px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Photo grid ───────────────────────────────────────────── */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0.6rem 0 1.4rem; }
.pg-item { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 3/2; background: var(--navy-soft); border: 1px solid var(--border); }
.pg-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.75) saturate(0.7); transition: transform 0.4s ease-out, filter 0.3s ease-out; }
.pg-item:hover img { transform: scale(1.05); filter: brightness(0.9) saturate(1); }
.pg-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.7rem 0.6rem 0.4rem; background: linear-gradient(0deg, rgba(11,18,32,0.92) 55%, transparent); font-size: 11px; color: var(--ink-3); }

/* ============================================================
   COMPANY BOARD — index.html only
   Markup here has no shared ancestor with the project-hub
   template above; each block is scoped to its own class names
   so nothing above is touched.
   ============================================================ */

/* ── Board shell ──────────────────────────────────────────── */
body:has(.site-header) { max-width: 68rem; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; flex-direction: column; }
.wordmark-apex {
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.wordmark-sub { font-size: 13px; color: var(--ink-3); margin-top: 0.1rem; }
.header-meta { font-size: 13px; color: var(--ink-3); text-align: right; line-height: 1.5; }
.header-meta a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(42,120,214,0.35); }
.header-meta a:hover { text-decoration-color: var(--accent); }

.page { display: block; }

.section-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.8rem;
}

/* ── Barry needs bar ──────────────────────────────────────── */
.barry-bar {
  background: var(--gold-soft);
  border: 1px solid rgba(252,163,17,0.35);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.1rem;
  margin: 0 0 1.8rem;
}
.barry-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.barry-items { display: flex; flex-direction: column; gap: 0.65rem; }
.barry-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.barry-item a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(42,120,214,0.35); }
.barry-item a:hover { text-decoration-color: var(--accent); }
.barry-item strong { color: var(--ink); font-weight: 500; }
.barry-urgency {
  flex-shrink: 0;
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.2em 0.5em;
  border-radius: 3px;
  line-height: 1.4;
}
.barry-urgency.now  { background: #a11f1f;  color: #fff; }
.barry-urgency.soon { background: rgba(255,255,255,0.1); color: var(--ink-2); }

/* ── KPI strip ────────────────────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin: 0 0 0.5rem;
}
.kpi-tile {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--navy-soft);
  padding: 0.9rem 0.95rem 1rem;
}
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.kpi-number { font-size: clamp(22px, 6vw, 28px); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.kpi-label { font-size: 12px; color: var(--ink-3); margin-top: 0.3rem; }
.kpi-bar-track { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; margin-top: 0.75rem; }
.kpi-bar-fill { height: 100%; border-radius: 2px; background: var(--ink-3); }
.kpi-tile.tone-ok   .kpi-bar-fill { background: var(--good); }
.kpi-tile.tone-warn .kpi-bar-fill { background: var(--gold); }
.kpi-tile.tone-bad  .kpi-bar-fill { background: var(--bad); }

/* ── Solid KPI tiles (TM604 restyle) ─────────────────────── */
.kpi-strip-solid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin: 0 0 1.6rem;
}
.kpi-tile-solid {
  border-radius: 10px;
  padding: 0.9rem 0.95rem 1rem;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}
.kpi-number-solid { font-size: clamp(24px, 6vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.kpi-label-solid { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.88; margin-top: 0.4rem; }
.kpi-sub-solid { font-size: 12px; opacity: 0.75; margin-top: 0.15rem; }

/* ── Chart row: donut / gauge / legend combos ────────────── */
.chart-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
  margin: 0.8rem 0 1.8rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--navy-soft);
}
.chart-block { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.chart-block-title { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.chart-with-legend { display: flex; align-items: center; gap: 0.9rem; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; text-align: left; }
.donut-legend li { display: flex; align-items: center; gap: 0.45rem; font-size: 12px; color: var(--ink-2); margin: 0; }
.dl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dl-label { flex: 1; }
.dl-value { color: var(--ink); font-weight: 500; }

/* ── Workstream health donut (per-project status pages) ──── */
.ws-health { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; }

@media (max-width: 640px) {
  .kpi-strip-solid { grid-template-columns: repeat(2, 1fr); }
  .chart-row { grid-template-columns: 1fr; }
}

/* ── Agent fleet ──────────────────────────────────────────── */
.fleet-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.agent-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border);
  background: var(--navy-soft);
  border-radius: 999px;
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  font-size: 13px;
}
.chip-name { font-weight: 500; color: var(--ink); }
.chip-role { color: var(--ink-3); }
.chip-status { color: var(--ink-3); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.live  { background: var(--good); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.dot.quiet { background: var(--ink-3); }
.dot.stale { background: var(--bad); box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }

/* ── Pipeline bar ─────────────────────────────────────────── */
.pipeline-section { margin-top: 0.2rem; }
.pipeline-bar {
  display: flex;
  gap: 3px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.pipeline-stage {
  flex: var(--flex, 1);
  background: var(--bg, rgba(42,120,214,0.14));
  min-width: 3.2rem;
  padding: 0.65rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
}
.pipeline-stage.active { background: rgba(42,120,214,0.22); }
.pipeline-stage.busy   { background: rgba(252,163,17,0.18); }
.stage-count { font-size: 15px; font-weight: 500; color: var(--ink); }
.stage-label { font-size: 10px; color: var(--ink-3); letter-spacing: 0.02em; line-height: 1.2; }

/* ── Project cards ────────────────────────────────────────── */
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.project-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--navy-soft);
  padding: 1.05rem 1.1rem 1.1rem;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.project-card:hover {
  background: var(--navy-mid);
  border-color: rgba(42,120,214,0.35);
  transform: translateY(-2px);
}
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; }
.card-name { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.project-card:hover .card-name { color: var(--accent); }
.card-note { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.pct-ring { flex-shrink: 0; }
.card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.stage-badge {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--ink-3);
}
.stage-badge.testflight { color: #7fb4ec; border-color: rgba(42,120,214,0.4); background: var(--accent-soft); }
.stage-badge.build      { color: var(--ink-2); }
.stage-badge.research   { color: var(--ink-3); }
.stage-badge.waiting    { color: var(--gold); border-color: rgba(252,163,17,0.4); background: var(--gold-soft); }
.tf-chip { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── Company direction grid ───────────────────────────────── */
.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.cd-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-3);
  border-radius: 8px;
  background: var(--navy-soft);
  padding: 0.85rem 0.9rem 0.9rem;
}
.cd-card.tone-ok   { border-left-color: var(--good); }
.cd-card.tone-warn { border-left-color: var(--gold); }
.cd-card.tone-bad  { border-left-color: var(--bad); }
.cd-card.cd-financial {
  border-left: 3px solid var(--gold);
  background: linear-gradient(135deg, rgba(252,163,17,0.14), var(--navy-soft) 65%);
}
.cd-ico { font-size: 13px; color: var(--ink-3); margin-bottom: 0.4rem; }
.cd-v { font-size: clamp(18px, 4.5vw, 20px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.cd-sub { font-size: 11px; color: var(--ink-3); margin-top: 0.15rem; }
.cd-l { font-size: 12px; color: var(--ink-2); margin-top: 0.3rem; }
.cd-src { font-size: 10px; color: var(--ink-3); opacity: 0.7; margin-top: 0.3rem; }
.cd-note { font-size: 12px; color: var(--ink-3); }

/* ── Site footer ──────────────────────────────────────────── */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
}
.site-footer a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(42,120,214,0.35); }
.site-footer a:hover { text-decoration-color: var(--accent); }

/* ── Responsive ───────────────────────────────────────────── */
@media (min-width: 720px) {
  body { padding-top: 2.4rem; }
  .grid { gap: 0.7rem; }
  .card { min-height: 6.8rem; }
}
@media (max-width: 640px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: 1fr; }
  .cd-grid { grid-template-columns: repeat(2, 1fr); }
  .site-header { flex-direction: column; }
  .header-meta { text-align: left; }
}
@media (max-width: 500px) {
  .grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .photo-grid .pg-item:last-child { grid-column: span 2; aspect-ratio: 16/6; }
  .pc-row { grid-template-columns: 1fr 1.5fr 38px; gap: 0.5rem; }
  .pc-label { font-size: 12px; }
  .kpi { padding: 0 0.6rem; }
  .kv { font-size: 18px; }
  .pipeline-bar { flex-wrap: wrap; }
  .pipeline-stage { min-width: 30%; flex: 1 1 30%; }
  .card-top { flex-wrap: wrap; }
}
@media (max-width: 440px) {
  .phone { width: 100%; height: 72vh; min-height: 420px; border-radius: 0; padding: 0; box-shadow: none; background: transparent; }
  .phone iframe { border-radius: 0; }
}