/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --text: #111111;
  --text-muted: #888888;
  --border: #E5E5E5;
  --accent: #111111;
  --max: 1200px;
  --gap: 32px;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ===== LAYOUT ===== */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}

/* ===== NAV ===== */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--text); }

/* ===== HERO ===== */
.hero {
  padding: 96px 0 80px;
  border-bottom: 1px solid var(--border);
}

.hero-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.hero-title {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 900px;
  margin-bottom: 32px;
}

.hero-title em {
  font-style: italic;
  color: var(--text-muted);
}

.hero-intro {
  max-width: 700px;
  margin: -8px 0 28px;
  font-size: 17px;
  line-height: 1.65;
  color: #444;
}

html[data-theme="dark"] .hero-intro { color: #CFCFCD; }

.hero-meta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-meta span {
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-meta span::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}

/* ===== SECTION HEADER ===== */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 48px 0 32px;
  margin-bottom: 0;
}

.section-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-count {
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== PROJECT CARDS (big, single column) ===== */
.projects-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#work { padding-bottom: 64px; }

.pcard {
  display: flex;
  border-radius: 28px;
  overflow: hidden;
  min-height: 420px;
  color: #fff;
  position: relative;
}

.pcard-content {
  flex: 0 0 44%;
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.pcard-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}

.pcard-title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: #fff;
  margin-bottom: 28px;
  max-width: 420px;
}

.pcard-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 30px;
}

.pcard-tag {
  font-size: 12.5px;
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 20px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

.pcard-tag-sep {
  display: none;
}

.pcard-divider {
  height: 1px;
  background: rgba(255,255,255,0.14);
  margin-bottom: 28px;
}

.pcard-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.pcard-stat-num {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 6px;
}

.pcard-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
  max-width: 130px;
}

/* Tighter layout so 3 stats fit on one row */
.pcard-stats-3 {
  gap: 18px;
}

.pcard-stats-3 .pcard-stat-label {
  max-width: 104px;
}

.pcard-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: #fff;
  color: #111;
  font-size: 13.5px;
  font-weight: 500;
  padding: 13px 22px;
  border-radius: 30px;
}

.pcard-cta-arrow { transition: transform 0.2s; }
.pcard:hover .pcard-cta-arrow { transform: translate(3px, -3px); }

.pcard-visual {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcard-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Phone mockup used inside pcard-visual */
.pc-phone {
  width: 196px;
  border-radius: 30px;
  background: #111;
  box-shadow: 0 0 0 2px #2a2a2a, 0 30px 70px rgba(0,0,0,0.45);
  position: relative;
  padding: 3px 0;
  z-index: 1;
  transform: rotate(-3deg);
  transition: transform 0.4s ease;
}
.pcard:hover .pc-phone { transform: rotate(0deg); }
.pc-phone::before {
  content: '';
  display: block; width: 52px; height: 12px;
  background: #111; border-radius: 0 0 8px 8px;
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  z-index: 2;
}
.pc-phone-screen {
  border-radius: 27px;
  overflow: hidden;
  background: #fff;
}
.pc-phone-screen img { width: 100%; height: auto; display: block; }

/* Full photographed phone mockup (pre-composited PNG) */
.pc-mockup-full {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  height: 551px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  z-index: 1;
}

/* Landscape mockup (browser + phone + podium), Allyz card */
.pc-mockup-allyz {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 567px;
  height: auto;
  object-fit: contain;
  z-index: 1;
}

/* Brand backgrounds */
.pcard.pcard-ioc { background: #0A0E1A; }
.pcard.pcard-allyz { background: #003781; }
.pcard.pcard-doc { background: #1E1E1E; }

.pcard-label.label-ioc { color: #C9A227; }
.pcard-label.label-allyz { color: #8FB8FF; }
.pcard-label.label-doc { color: #C9C5BD; }

/* Company logos, top-right of each card */
.pcard-logo {
  position: absolute;
  top: 36px;
  right: 44px;
  width: auto;
  z-index: 2;
  pointer-events: none;
  opacity: 0.92;
}
.pcard-logo-ioc { height: 60px; }
.pcard-logo-allyz { height: 38px; }
.pcard-logo-doc { height: 64px; }

/* ===== STATS ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  margin-top: 0;
}

.stat {
  padding: 48px 40px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat-number {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ===== FOOTER ===== */
footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
  margin-top: 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-links a:hover { color: var(--text); }

.footer-links a::after {
  content: '↗';
  font-size: 11px;
}

/* ===== CASE STUDY PAGES ===== */
.case-hero {
  padding: 80px 0 72px;
  border-bottom: 1px solid var(--border);
}

.case-breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-breadcrumb a:hover { color: var(--text); }

.case-title {
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 800px;
  margin-bottom: 32px;
}

.case-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.tag {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.case-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.case-meta-item {
  padding: 20px 24px;
  border-right: 1px solid var(--border);
}

.case-meta-item:last-child { border-right: none; }

.case-meta-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.case-meta-value {
  font-size: 15px;
  font-weight: 400;
}

/* ===== CONTENT BLOCKS ===== */
.case-body {
  max-width: 760px;
  margin: 0 auto;
}

.case-section {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}

.case-section:last-child { border-bottom: none; }

.case-section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.case-section h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 24px;
}

.case-section p {
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  margin-bottom: 16px;
}

.case-section p:last-child { margin-bottom: 0; }

.case-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.case-section ul li {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
}

.case-section ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* Full-width image block */
.case-image-full {
  margin: 56px 0;
}

.case-image-full img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.case-image-caption {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.02em;
}

/* Two column images */
.case-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 56px 0;
}

.case-image-grid img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* Highlight quote */
.case-quote {
  border-left: 2px solid var(--text);
  padding: 8px 0 8px 28px;
  margin: 40px 0;
}

.case-quote p {
  font-size: 20px !important;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5 !important;
  color: var(--text) !important;
}

/* LinkedIn recommendation card */
.li-rec {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  max-width: 660px;
}
.li-rec-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.li-rec-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.li-rec-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.li-rec-badge { width: 14px; height: 14px; flex-shrink: 0; }
.li-rec-title {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
  max-width: 480px;
}
.li-rec-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.li-rec-text {
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
}
.li-rec-source {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Steps/numbered items */
.steps {
  display: grid;
  gap: 0;
  margin: 32px 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  border-bottom: 1px solid var(--border);
}

.step:last-child { border-bottom: none; }

.step-number {
  padding: 24px 20px;
  font-size: 13px;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  font-weight: 500;
}

.step-content {
  padding: 24px 28px;
}

.step-content h4 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.step-content p {
  font-size: 14px !important;
  margin-bottom: 0 !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
}

/* Next project */
.next-project {
  padding: 80px 0;
  text-align: center;
  border-top: 1px solid var(--border);
}

.next-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.next-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: gap 0.2s;
}

.next-title:hover { gap: 20px; }

/* ===== ABOUT PAGE ===== */
.about-hero {
  padding: 96px 0 80px;
  border-bottom: 1px solid var(--border);
}

.about-title {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 800px;
  margin-bottom: 40px;
}

.about-intro {
  font-size: 18px;
  line-height: 1.7;
  color: #444;
  max-width: 680px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.about-section {
  padding: 48px 40px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about-section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.about-section h3 {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.about-section p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* "What I bring" card grid — no outer bottom border (the parent
   .about-section already draws one; a second here doubled the divider) */
.bring-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.bring-grid > div { padding: 28px 24px; border: 1px solid var(--border); }
.bring-grid > div:nth-child(5) { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .bring-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .bring-grid { grid-template-columns: 1fr; }
}

/* Experience list */
.exp-list { list-style: none; }

.exp-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.exp-item:first-child { padding-top: 0; }
.exp-item:last-child { border-bottom: none; }

.exp-role {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.exp-company {
  font-size: 13px;
  color: var(--text-muted);
}

.exp-period {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  align-self: start;
  padding-top: 3px;
}

.exp-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 6px;
  max-width: 520px;
}

/* Skills tags */
.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.skills-list li {
  font-size: 13px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: #444;
}

/* Contact section */
.contact-section {
  padding: 96px 0;
  text-align: center;
  border-top: 1px solid var(--border);
}

.contact-title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.1;
}

.contact-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid var(--text);
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.contact-btn:hover {
  background: var(--text);
  color: var(--bg);
}

.contact-btn.primary {
  background: var(--text);
  color: var(--bg);
}

.contact-btn.primary:hover {
  background: #333;
  border-color: #333;
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  line-height: 1;
  margin-left: 8px;
}
.theme-toggle:hover { color: var(--text); }

/* ===== DARK THEME ===== */
html[data-theme="dark"] {
  --bg: #111110;
  --surface: #1A1A18;
  --text: #EFEFED;
  --text-muted: #777773;
  --border: #272725;
  --accent: #EFEFED;
}

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] nav {
  background: var(--bg);
}

/* Hardcoded text colors in inline styles */
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color: #444"] {
  color: #CFCFCD !important;
}
html[data-theme="dark"] [style*="color: #777"],
html[data-theme="dark"] [style*="color: #666"] {
  color: #888884 !important;
}

/* Hardcoded text colors in CSS rules */
html[data-theme="dark"] .about-intro { color: #CFCFCD; }
html[data-theme="dark"] .case-section p,
html[data-theme="dark"] .case-section ul li { color: #CFCFCD; }

/* Hardcoded backgrounds in inline styles */
html[data-theme="dark"] [style*="background: #FAFAF8"],
html[data-theme="dark"] [style*="background: #F7F6F3"],
html[data-theme="dark"] [style*="background: #EEECEA"] {
  background: #1C1C1A !important;
}
html[data-theme="dark"] [style*="background: #F7F6F3"] {
  background: #1C1C1A !important;
}

/* ===== DARK MODE EXTENDED FIXES ===== */

/* IOC screens section */
html[data-theme="dark"] .screens-section { background: #161614 !important; }
html[data-theme="dark"] .feed-split { background: #0A0A08 !important; }

/* Before/after grids — hardcoded light backgrounds */
html[data-theme="dark"] [style*="background:#F0F0ED"],
html[data-theme="dark"] [style*="background: #F0F0ED"] { background: #1E1E1C !important; }
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"] { background: var(--surface) !important; }
/* Re-override phone screen back to white (showing UI content) */
html[data-theme="dark"] .phone-screen { background: #fff !important; }

/* Before label pill */
html[data-theme="dark"] .lbl-before { background: #2E2E2C !important; color: #888 !important; }

/* Case study item text */
html[data-theme="dark"] .work-item p,
html[data-theme="dark"] .deliverable-item p,
html[data-theme="dark"] .pill-list li { color: #AAAAAA !important; }

/* Split points list */
html[data-theme="dark"] .split-points li { color: #AAAAAA !important; }

/* Skills tags */
html[data-theme="dark"] .skills-list li {
  color: #AAAAAA;
}

/* Contact buttons */
html[data-theme="dark"] .contact-btn.primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
html[data-theme="dark"] .contact-btn.primary:hover {
  background: #CFCFCD;
  border-color: #CFCFCD;
}

/* Borders inside inline-styled grid cells */
html[data-theme="dark"] [style*="border-right: 1px solid var(--border)"],
html[data-theme="dark"] [style*="border-left: 1px solid var(--border)"],
html[data-theme="dark"] [style*="border: 1px solid var(--border)"] {
  border-color: var(--border) !important;
}

/* Quote border */
html[data-theme="dark"] .case-quote {
  border-left-color: var(--text);
}

/* ===== RESPONSIVE GRID HELPERS (for inline-styled grids) ===== */
.resp-2 { display: grid; grid-template-columns: 1fr 1fr; }
.resp-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.about-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: start; }

@media (max-width: 900px) {
  .resp-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .resp-2, .resp-3 { grid-template-columns: 1fr; }
  .resp-2 > div[style*="border-right"],
  .resp-3 > div[style*="border-right"] { border-right: none !important; }
  .resp-2 > div:not(:last-child),
  .resp-3 > div:not(:last-child) { border-bottom: 1px solid var(--border); }
  .about-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== ROADMAP — nodes on one rail =====
   Shared component. IOC uses it for strategy steps, Documentolog for years.
   Same mechanics, different axis: the frame repeats, the content never does. */
.roadmap {
  /* how many nodes this instance has — drives both the grid and the rail insets */
  --cols: 4;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
/* the rail — runs from the first node to the last, warming toward gold */
.roadmap::before {
  content: '';
  position: absolute;
  top: 17px;
  left: calc(50% / var(--cols));
  right: calc(50% / var(--cols));
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, #C9A227 100%);
}
.rm-step { position: relative; padding: 0 12px; text-align: center; }
.rm-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* grows with its label: "01" stays a circle, "2021" becomes a pill */
  min-width: 35px;
  height: 35px;
  padding: 0 8px;
  border-radius: 999px;
  margin: 0 auto;
  width: fit-content;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rm-step:last-child .rm-node { border-color: #C9A227; color: #8a6d1a; }
html[data-theme="dark"] .rm-step:last-child .rm-node { color: #C9A227; }
.rm-title {
  display: block;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  text-wrap: balance;
}

@media (max-width: 720px) {
  /* stack into a vertical rail */
  .roadmap { grid-template-columns: 1fr; }
  .roadmap::before {
    top: 17px; bottom: 17px; left: 17px; right: auto;
    width: 1px; height: auto;
    background: linear-gradient(180deg, var(--border) 0%, #C9A227 100%);
  }
  .rm-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    padding: 0 0 26px 0;
    text-align: left;
  }
  .rm-step:last-child { padding-bottom: 0; }
  .rm-title { margin-top: 8px; }
}
.rm-desc {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.r-crosslink { margin-top: 26px; }
.r-crosslink a { border-bottom: 1px solid var(--border); }
.r-crosslink a:hover { border-bottom-color: currentColor; }

/* ===== IMPACT BAR =====
   One definition for all three case pages. Each instance declares how many
   cells it has via --cols, so the grid always matches the content and no cell
   is left orphaned on a row of its own. One type scale throughout. */
.impact-bar {
  --cols: 3;
  --impact-border: var(--border);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  border-left: 1px solid var(--impact-border);
  border-top: 1px solid var(--impact-border);
}
.impact-item {
  /* the number sizes itself off its own cell, so a denser bar scales down
     as a whole instead of needing a per-page override */
  container-type: inline-size;
  padding: 40px 36px;
  border-right: 1px solid var(--impact-border);
  border-bottom: 1px solid var(--impact-border);
}
.impact-number {
  font-size: clamp(30px, 20cqw, 56px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}
.impact-label { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* the IOC bar sits inside the dark TL;DR band — its text has to be inverted,
   otherwise the numbers inherit --text (near-black in light theme) and vanish */
.impact-bar.on-dark { --impact-border: rgba(255,255,255,0.18); margin-top: 40px; }
.impact-bar.on-dark .impact-number { color: #fff; }
.impact-bar.on-dark .impact-label { color: rgba(255,255,255,0.62); }

/* set the tracks directly, not via --cols: the per-instance count is written
   as an inline style and an inline custom property would beat these queries */
@media (max-width: 1000px) { .impact-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .impact-bar { grid-template-columns: 1fr; } .impact-item { padding: 32px 24px; } }

/* ===== SYSTEMS INDEX — one row per system, compared side by side =====
   The value of this page is the comparison, not the retelling: same four
   questions asked of every system, so the differences are what shows. */
.sys-table { border-top: 1px solid var(--border); }
.sys-head, .sys-row {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1.3fr 1.5fr;
  border-bottom: 1px solid var(--border);
}
.sys-head > div {
  padding: 13px 20px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.sys-row > div { padding: 26px 20px; }
.sys-cell { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.sys-name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; }
.sys-name em {
  display: block; font-style: normal; margin-top: 7px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
/* the durability column carries full contrast — it is the point of the page */
.sys-took { font-size: 13px; line-height: 1.6; }

@media (max-width: 900px) {
  .sys-head { display: none; }
  .sys-row { grid-template-columns: 1fr; padding: 10px 0 22px; }
  .sys-row > div { padding: 7px 20px; }
  .sys-cell::before, .sys-took::before {
    content: attr(data-label); display: block;
    font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px;
  }
}

/* ===== PRODUCT LEDE — one line answering "what is this thing?" =====
   Same slot on every case page: under the h1, above the meta row. It is the
   first thing a scanner reads, so it stays to one sentence. */
.case-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 0 28px;
}

/* ===== CLOSING CLAIM — what the system held up (shared by every case page) =====
   Same slot on each case: the last thing before the next-project CTA. The frame
   repeats; the claim inside it must say something different every time. */
.held { padding: 72px 0; border-top: 1px solid var(--border); }
.held-rule {
  width: 40px; height: 2px; margin-bottom: 30px;
  background: linear-gradient(90deg, #C9A227, #8a6d1a);
}
.held-claim {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 20px;
  text-wrap: balance;
}
.held-note {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 660px;
}

/* ===== TASTE LAYER ===== */
::selection { background: #C9A227; color: #fff; }

.hero-title em, .about-title em, .contact-title em, .next-title em {
  font-family: 'Source Serif 4', Georgia, serif;
}
.hero-title em { color: #9c7c16; }
html[data-theme="dark"] .hero-title em { color: #C9A227; }

.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.hero { position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
.hero-glow {
  position: absolute; width: 560px; height: 560px; border-radius: 50%;
  filter: blur(110px); background: #C9A227; opacity: 0.08;
  top: -220px; right: -140px; pointer-events: none;
}
html[data-theme="dark"] .hero-glow { opacity: 0.06; }

.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ===== IOC HERO COVER ===== */

/* ===== CASE SUBNAV ===== */
.case-subnav {
  position: sticky;
  top: 64px;
  z-index: 90;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.case-subnav-track {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.case-subnav-track::-webkit-scrollbar { display: none; }
.case-subnav-track a {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 13px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.case-subnav-track a:hover { color: var(--text); }
.case-subnav-track a.active { color: var(--text); border-bottom-color: var(--text); }
.case-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.case-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #C9A227, #8a6d1a); }

section[id], div[id^="s-"] { scroll-margin-top: 130px; }

/* ===== TL;DR SUMMARY — bold dark band ===== */
.tldr { padding: 56px 0 64px; background: #111; }
.tldr-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #C9A227; margin-bottom: 12px;
}
.tldr-title {
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.15; color: #fff; margin-bottom: 32px;
}
.tldr-grid { border: 1px solid rgba(255,255,255,0.18); border-radius: 2px; overflow: hidden; }
.tldr-item { padding: 28px 26px; border-right: 1px solid rgba(255,255,255,0.18); }
.tldr-item:last-child { border-right: none; }
.tldr-k {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #C9A227; margin-bottom: 12px;
}
.tldr-item p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.82); }
html[data-theme="dark"] .tldr { background: #1A1A18; }
@media (max-width: 900px) {
  .tldr-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .tldr-item:last-child { border-bottom: none; }
}

/* ===== HOME: JOURNEY ===== */
.journey { border-bottom: 1px solid var(--border); padding: 44px 0 52px; }
.journey-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px;
}
.journey-track {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.journey-track::-webkit-scrollbar { display: none; }
.journey-stop {
  flex: 1 1 0;
  min-width: 170px;
  padding: 16px 20px;
  border-right: 1px solid var(--border);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.journey-stop:last-child { border-right: none; }
.journey-stop.now { background: #111; }
.journey-stop.now .j-year, .journey-stop.now .j-what { color: rgba(255,255,255,0.55); }
.journey-stop.now .j-place { color: #fff; }
.journey-stop.now .j-year::before { background: #C9A227; }
.j-year {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--text-muted); display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
}
.j-year::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); display: block; }
.j-place { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; display: block; margin-bottom: 4px; }
.j-what { font-size: 12px; color: var(--text-muted); line-height: 1.5; display: block; }
.journey-caption { font-size: 13px; color: var(--text-muted); margin-top: 14px; }
html[data-theme="dark"] .journey-stop.now { background: #1C1C1A; }

/* ===== HOME: TWO PRACTICES ===== */
.practices { padding: 56px 0 64px; }
.practices-intro { font-size: 15px; color: #444; line-height: 1.7; max-width: 640px; margin-bottom: 28px; }
html[data-theme="dark"] .practices-intro { color: #CFCFCD; }
.practice-cards { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
.practice-card { padding: 32px 28px; display: block; transition: background 0.2s; position: relative; }
.practice-card:first-child { border-right: 1px solid var(--border); }
.practice-card:hover { background: #EFEFEC; }
html[data-theme="dark"] .practice-card:hover { background: #1C1C1A; }
.practice-kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.project-arrow { font-size: 18px; color: var(--text-muted); transition: transform 0.2s; align-self: flex-end; }
.practice-title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.practice-title .project-arrow { align-self: center; }
.practice-card:hover .project-arrow { transform: translate(3px, -3px); }
.practice-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; max-width: 420px; }
.practice-card.research { background: #111; }
.practice-card.research .practice-title { color: #fff; }
.practice-card.research .practice-kicker { color: rgba(255,255,255,0.4); }
.practice-card.research .practice-desc { color: rgba(255,255,255,0.55); }
.practice-card.research:hover { background: #181818; }

/* ===== RESEARCH PAGE ===== */
.research-page .serif, .r-serif { font-family: 'Source Serif 4', Georgia, serif; }
.r-hero { padding: 96px 0 72px; border-bottom: 1px solid var(--border); }
.r-kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 26px; }
.r-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 400; letter-spacing: -0.015em; line-height: 1.18;
  max-width: 820px; margin-bottom: 28px;
}
.r-title em { font-style: italic; }
.r-lede { font-family: 'Source Serif 4', Georgia, serif; font-size: 19px; line-height: 1.65; color: #444; max-width: 680px; }
html[data-theme="dark"] .r-lede { color: #CFCFCD; }
.r-body { max-width: 720px; margin: 0 auto; }
.r-body p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px; line-height: 1.75; color: #333; margin-bottom: 18px;
}
html[data-theme="dark"] .r-body p { color: #CFCFCD; }

/* Case-study body copy uses inline color:#444/#333 (light-mode only) in many
   places — force a legible light gray in dark mode instead of low-contrast dark gray */
html[data-theme="dark"] [style*="color:#444"],
html[data-theme="dark"] [style*="color: #444"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"] {
  color: #CFCFCD !important;
}
.r-section { padding: 64px 0; border-bottom: 1px solid var(--border); }
.r-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px;
}
.r-h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(24px, 3vw, 34px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 20px; }
.paper-card {
  border-top: 1px solid var(--border);
  padding: 40px 0 44px;
}
.paper-head {
  padding: 0 0 24px;
  background: transparent;
  border-bottom: none;
}
.paper-status {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0;
  border: none;
  margin-bottom: 18px;
}
.paper-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 780px;
}
.paper-body { padding: 24px 0 0; }
.paper-body p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15.5px;
  line-height: 1.75;
  color: #333;
  margin-bottom: 16px;
  max-width: 700px;
}
html[data-theme="dark"] .paper-body p { color: #CFCFCD; }
.paper-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  border-top: 1px solid var(--border);
  margin-top: 28px;
  padding-top: 26px;
}
.paper-stat {
  padding: 0;
  border-right: none;
  min-width: 130px;
  max-width: 220px;
}
.paper-stat b {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 4px;
}
.paper-stat span {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.r-timeline { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.r-timeline li { position: relative; padding: 0 0 28px 28px; }
.r-timeline li:last-child { padding-bottom: 0; }
.r-timeline li::before {
  content: ''; position: absolute; left: -4px; top: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--text);
}
.rt-date { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.rt-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; margin-bottom: 5px; }
.rt-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: 560px; }
.article-list { border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
.article-row { display: block; padding: 24px 26px; border-bottom: 1px solid var(--border); transition: background 0.2s; }
.article-row:last-child { border-bottom: none; }
.article-row:hover { background: #EFEFEC; }
html[data-theme="dark"] .article-row:hover { background: #1C1C1A; }
.article-meta { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; display: flex; gap: 14px; }
.article-title { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(17px, 2vw, 21px); line-height: 1.35; margin-bottom: 8px; }
.article-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: 640px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .pcard { flex-direction: column; min-height: 0; }
  .pcard-content { flex: none; padding: 36px 28px; order: 2; }
  .pcard-visual { min-height: 280px; order: 1; }
  .pcard-title { max-width: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .case-image-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .case-meta-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .tldr-grid { grid-template-columns: 1fr; }
  .tldr-item { border-right: none; border-bottom: 1px solid var(--border); }
  .tldr-item:last-child { border-bottom: none; }
  .practice-cards { grid-template-columns: 1fr; }
  .practice-card:first-child { border-right: none; border-bottom: 1px solid var(--border); }
  .paper-stats { gap: 28px 40px; }
}

@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .nav-links { gap: 16px; }
  .hero { padding: 60px 0 48px; }
  .stats { grid-template-columns: 1fr; }
  .case-meta-row { grid-template-columns: 1fr; }
  .pcard-stats { gap: 24px; }
  .hero-meta { gap: 16px; }
}

/* ===== NAV ON NARROW SCREENS =====
   Five links plus logo and two toggles do not fit on a phone. Split into two
   rows and let the links scroll sideways — the same idiom as the case subnav. */
@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; row-gap: 14px; }
  .nav-logo { order: 1; }
  .lang-toggle { order: 2; margin-left: auto; }
  .theme-toggle { order: 3; }
  .nav-links {
    order: 4;
    width: 100%;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links li { flex: 0 0 auto; }
  .nav-links a { white-space: nowrap; }
  /* the nav is two rows tall now, so the sticky case subnav sits lower */
  .case-subnav { top: 104px; }
}

/* ===== LANGUAGE TOGGLE ===== */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}
.lang-btn {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 3px;
  transition: color 0.15s;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { color: var(--text); font-weight: 600; }
.lang-sep { color: var(--border); font-size: 12px; }