@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;700&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Color — Base */
  --color-bg-primary:     #FFFFFF;
  --color-bg-secondary:   #F5F5F7;
  --color-bg-inverse:     #0F0F12;
  --color-bg-inverse-mid: #1C1C22;
  --color-text-primary:   #121212;
  --color-text-secondary: #6B7280;
  --color-text-inverse:   #F5F5F7;
  --color-text-muted:     #9CA3AF;

  /* Color — Accents */
  --color-accent-primary:         #4666FF;
  --color-accent-primary-hover:   #2E52E8;
  --color-accent-secondary:       #78367E;
  --color-emphasis-positive:      #10B981;

  /* Color — Glassmorphism (nav only) */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-border: 1px solid rgba(255, 255, 255, 0.3);
  --glass-blur:   blur(16px);

  /* Color — Surface & Border */
  --color-border:        #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-overlay:       rgba(15, 15, 18, 0.04);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:  'Instrument Serif', 'Playfair Display', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  6rem;

  /* Spacing (4px base rhythm) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* Shadow */
  --shadow-focus: 0 0 0 2px var(--color-accent-primary);
  --shadow-float: 0 8px 32px rgba(15, 15, 18, 0.12);
  --shadow-card:  0 1px 2px rgba(15, 15, 18, 0.05);

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-default:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

  /* Backward-compat aliases */
  --font-base:         var(--font-primary);
  --color-bg:          var(--color-bg-primary);
  --color-surface:     var(--color-bg-secondary);
  --color-text-body:   var(--color-text-primary);
  --color-text-meta:   var(--color-text-secondary);
  --color-border-meta: var(--color-border);
  --color-dark-card:   var(--color-bg-inverse);
  --container-max:     1068px;
  --container-pad:     40px;
  --section-gap:       96px;
  --nav-height:        auto;
  --radius-card:       var(--radius-lg);
  --radius-tag:        var(--radius-pill);
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-primary);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ─── Layout ─────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section { margin-bottom: var(--section-gap); }

/* ─── Navigation ─────────────────────────────────────────────── */
.nav {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: var(--glass-border);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

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

.nav-left { flex: 0 0 auto; }

.nav-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-center {
  flex: 1;
  text-align: center;
}

.nav-status {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.nav-plus {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.5;
  line-height: 1;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
}

.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-default);
}
.nav-link:hover { color: var(--color-text-primary); }

/* ─── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 400; line-height: 1.15; }

.text-bold { font-weight: 700; }
em.hero-em { font-style: normal; font-weight: 700; }

p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-body);
}

/* ─── Tags & Badges ──────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-tag);
  padding: 4px 12px;
  white-space: nowrap;
}

/* Tag color variants */
.tag--orange {
  background: rgba(255,147,79,0.15);
  color: #b64600;
}
.tag--dark-blue {
  background: #04314b;
  color: #f5f3f5;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 100px;
  padding: 4px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--measured {
  background: rgba(111,0,255,0.08);
  color: #6f00ff;
}
.badge--projected {
  background: rgba(255,147,79,0.15);
  color: #b64600;
}
.badge--measured-orange {
  background: rgba(255,147,79,0.15);
  color: #b64600;
}

/* ─── Buttons / Links ────────────────────────────────────────── */
.btn-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-default);
}
.btn-link:hover { color: var(--color-text-primary); }

.case-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-top: 12px;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.case-link:hover { opacity: 0.6; }

.work-card-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-top: 10px;
  transition: all var(--duration-fast) var(--ease-default);
}
.work-card-plus:hover {
  background: var(--color-text-primary);
  color: #fff;
  border-color: var(--color-text-primary);
}

/* ─── Accordion ──────────────────────────────────────────────── */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;

}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.accordion-header:hover { background: var(--color-surface); }

.accordion-arrow {
  font-size: 14px;
  color: var(--color-text-secondary);
  transition: transform var(--duration-base) var(--ease-default);
  display: inline-block;
}
.accordion-header[aria-expanded="true"] .accordion-arrow { transform: rotate(180deg); }

.accordion-body {
  padding: 0 20px 16px;
}
.accordion-body p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.65;
}
.accordion-body[hidden] { display: none; }

/* ─── Homepage: Hero ─────────────────────────────────────────── */
.hero {
  padding: 64px 0 56px;
}

.hero-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  max-width: 640px;
}

/* ─── Homepage: Value Props ──────────────────────────────────── */
.value-props {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.vp-icon {
  margin-bottom: 12px;
  color: var(--color-text-secondary);
  opacity: 0.7;
}

.vp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.vp-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ─── Homepage: Work Section ─────────────────────────────────── */
.work-section { }

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 28px;
}

/* ── Work Card Base ── */
.work-card {
  margin-bottom: 56px;
}

/* ── Split card (AI Data Review) ── */
.work-card--split .work-card-visual {
  display: flex;
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 340px;
  background: var(--color-surface);
  margin-bottom: 20px;
}

.work-card-left {
  flex: 1.1;
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-card-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.work-card-right--dark {
  flex: 0.9;
  background: var(--color-dark-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 36px;
  color: #fff;
}

.work-card-demo-label {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 12px;
  display: block;
}

.work-card-demo-cta {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  display: block;
}

/* ── Full card (Automate — pipeline) ── */
.work-card--full .work-card-visual {
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 20px;
}

/* ── Work card info ── */
.work-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.work-card-desc {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 680px;
}

/* ── 2-col grid cards ── */
.work-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.work-card-grid-item .work-card-visual {
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 280px;
  background: var(--color-surface);
  margin-bottom: 16px;
}

.work-card-grid-item .work-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card-grid-item .work-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ─── Pipeline Embed ─────────────────────────────────────────── */
.pipeline-embed-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* ─── Homepage: Timeline ─────────────────────────────────────── */
.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.timeline { }

.timeline-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
}
.timeline-row:last-child { border-bottom: 1px solid var(--color-border); }

.timeline-year {
  font-size: 13px;
  color: var(--color-text-meta);
  padding-top: 3px;
}

.timeline-role {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.timeline-company {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.timeline-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ─── Homepage: Personal ─────────────────────────────────────── */
.personal-interest {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}

.personal-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.personal-text {
  font-size: 14px;
  color: var(--color-text-body);
}

.personal-placeholder {
  width: 100%;
  height: 280px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
}

/* ─── Case Study: Shared ─────────────────────────────────────── */

/* Hero */
.cs-hero {
  margin-bottom: 48px;
  padding-top: 36px;
}

.cs-hero-inner {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-hero-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.cs-hero-placeholder {
  width: 100%;
  min-height: 380px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-hero-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.cs-hero-2col-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.cs-hero-mosaic {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.cs-hero-mosaic-img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
}

/* Metadata 2-col */
.cs-meta {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 56px;
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--color-border);
}

.cs-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  color: var(--color-text-primary);
}

.cs-desc {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Meta right: list with border-top dividers */
.cs-meta-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cs-meta-field {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.cs-meta-field:last-child {
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.cs-meta-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  min-width: 90px;
  flex-shrink: 0;
  padding-top: 1px;
}

.cs-meta-value {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* Sections */
.cs-section {
  margin-bottom: 64px;
}

.cs-section-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--color-text-primary);
}

.cs-section-body {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 20px;
}
.cs-section-body:last-of-type { margin-bottom: 32px; }

/* ─── Case Study: Grid (5-item, 2-col) ───────────────────────── */
.cs-grid {
  display: grid;
  gap: 28px 40px;
}
.cs-grid--5 { grid-template-columns: repeat(2, 1fr); }
.cs-grid--3 { grid-template-columns: repeat(2, 1fr); }

.cs-grid-item { }

.cs-grid-icon {
  margin-bottom: 8px;
  font-size: 18px;
  opacity: 0.8;
}

.cs-grid-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.cs-grid-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ─── Case Study: Problems list ──────────────────────────────── */
.cs-problems {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.cs-problem-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-problem-icon {
  font-size: 18px;
  margin-bottom: 2px;
}

.cs-problem-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.cs-problem-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 600px;
}

/* ─── Case Study: Trio (Challenge/Solution/Impact) ───────────── */
.cs-trio {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.cs-trio-item { }

.cs-trio-icon {
  font-size: 16px;
  margin-bottom: 4px;
}

.cs-trio-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.cs-trio-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 620px;
}

.cs-section-img {
  width: 100%;
  border-radius: 12px;
  margin-top: 24px;
  margin-bottom: 8px;
}

.cs-image-placeholder {
  width: 100%;
  height: 300px;
  background: var(--color-surface);
  border-radius: 12px;
  margin-top: 24px;
}

/* ─── Homepage v2: Full-width layout ────────────────────────── */

/* Header / Footer shared */
.site-header,
.site-footer {
  display: grid;
  gap: 16px;
  padding: 28px 64px;
  align-items: center;
}
.site-header {
  grid-template-columns: repeat(2, 1fr);
  /*border-bottom: 1px solid var(--color-border);*/
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}
.site-footer {
  grid-template-columns: 1fr auto;
  /*border-top: 1px solid var(--color-border);*/
}

.header-col-left {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
}
.header-col-center {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  font-size: 16px;
  color: var(--color-text-primary);
}
.header-col-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  font-size: 16px;
  color: var(--color-text-primary);
  position: relative;
}

/* Active nav link */
.header-link--active { font-weight: 700; }
.header-link img{width: 24px;}

/* Hamburger button — hidden by default, shown at ≤480px */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: #302B27;
  border-radius: 1px;
}

/* Dropdown nav */
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 8px 0;
  min-width: 160px;
  z-index: 200;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.nav-dropdown.open { display: block; }
.nav-dropdown-link {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 400;
  color: #302B27;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown-link:hover { background: var(--color-bg-secondary); }
.nav-dropdown-link.header-link--active { font-weight: 700; }
.header-name {
  font-size: 16px;
  color: var(--color-text-primary);
}
.site-footer .header-name{
  font-size:14px;
  color: var(--color-text-secondary);
}

.header-link {
  font-size: 16px;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.header-link:hover { opacity: 0.6; }
.header-link-bold { font-weight: 700; }
.header-pill {
  background: var(--color-bg-secondary);
  border-radius: 40px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  cursor: default;
  color: var(--color-text-primary);
}

/* Main content */
.home-main {
  padding: 64px;
  display: flex;
  flex-direction: column;
  gap: 240px;
  align-items: center;
}

/* Intro section */
.intro-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.home-hero-heading {
  font-size: 64px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1.28px;
  color: #302B27;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-line {
  display: block;
}
.hero-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
  margin-left: 8px;
}
.type-hero-accent {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent-primary);
}
.vp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
}
.vp-list-item {
  flex: 1;
  min-width: 280px;
  max-width: 420px;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vp-list-item .vp-icon-wrap {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.vp-list-item .vp-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.24px;
  line-height: 1;
}
.vp-list-item .vp-body {
  font-size: 18px;
  color: var(--color-text-primary);
  line-height: 1.45;
  letter-spacing: -0.09px;
}

/* Work section */
.home-work-section {
  display: flex;
  flex-direction: column;
  gap: 80px;
  max-width: 1200px;
  padding:0 64px;
}
.home-section-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.72px;
  line-height: 1.1;
}

/* Work entries list */
.work-entries {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.work-entry {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.work-entry-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.work-meta-tags {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.work-entry-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.36px;
  line-height: 1.2;
}
.work-entry-desc {
  font-size: 18px;
  color: var(--color-text-primary);
  letter-spacing: -0.36px;
  line-height: 1.6;
  font-weight: 300;
}
.work-entry-desc strong{
  font-weight: 500;
}
.view-study-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #D1D5DB;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.14px;
  white-space: nowrap;
  text-decoration: none;
  width: fit-content;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.view-study-btn:hover { border-color: var(--color-text-primary); }
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #121212;
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14px;
  text-decoration: none;
  white-space: nowrap;
  width: fit-content;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.btn-dark:hover { opacity: 0.85; }

/* Work visual: split panel (AI Data Review) */
.work-visual-split {
  display: flex;
  gap:32px;
  overflow: hidden;
  min-height: 400px;
}
.work-visual-split-left {
  flex: 1;
  background: var(--color-bg-secondary);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 16px;
}
.work-visual-split-left img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.work-visual-split-right {
  width: 300px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--color-bg-inverse);
  padding: 32px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.concept-title {
  font-size: 36px;
  font-weight: 700;
  color: #F5F5F7;
  letter-spacing: -0.72px;
  line-height: 1.1;
}
.concept-body {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: #F5F5F7;
  line-height: 1.65;
  padding: 8px 0;
}
.concept-cta {
  font-size: 14px;
  font-weight: 600;
  color: #F5F5F7;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.concept-cta-label {
  font-size: 14px;
  font-weight: 600;
  color: #F5F5F7;
}
.concept-arrow-btn {
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.concept-arrow-btn:hover { opacity: 0.85; }

/* Work visual: full-width pipeline / placeholder */
.work-visual-full {
  
  overflow: hidden;
}
.work-visual-placeholder {
  border-radius: 24px;
  background: linear-gradient(to top, #f0f0f0, #eee);
  padding: 64px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-text-primary);
  letter-spacing: -0.36px;
}

/* 2-col small work cards */
.work-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.work-card-sm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.work-card-sm-image {
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface);
  flex-shrink: 0;
}
.work-card-sm-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#rushable-case-thumb {
  object-fit: contain;
}
.work-card-sm-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.work-card-sm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.work-card-sm-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.36px;
  line-height: 1.2;
}

/* Career section */
.career-section {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.career-header-row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.career-heading {
  flex: 1;
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.72px;
  line-height: 1.1;
}
.download-resume-btn {
  border: 1.5px solid #D1D5DB;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.14px;
  white-space: nowrap;
  text-decoration: none;
  align-self: flex-start;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.download-resume-btn:hover { border-color: var(--color-text-primary); }
.career-entries-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.career-entry {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  gap: 24px;
  align-items: start;
}
.career-year {
  font-size: 18px;
  color: var(--color-text-primary);
  letter-spacing: -0.36px;
  line-height: 1.6;
}
.career-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.career-role {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.36px;
  line-height: 1.6;
}
.career-company {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.36px;
  line-height: 1.6;
}
.career-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: -0.36px;
  line-height: 1.6;
  margin-top: 8px;
}

/* Personal section */
.personal-section {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.personal-heading {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.72px;
  line-height: 1.1;
}
.personal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  gap: 24px;
  align-items: start;
}
.personal-label-col {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.36px;
  line-height: 1.6;
}
.personal-text-col p{
  font-size: 18px;
  color: var(--color-text-primary);
  letter-spacing: -0.36px;
  line-height: 1.6;
  padding: 16px 0;
}
.personal-placeholder-block {
  background: linear-gradient(to top, #f0f0f0, #eee);
  border-radius: 24px;
  padding: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  font-size: 18px;
  color: var(--color-text-primary);
  letter-spacing: -0.36px;
}

/* ─── Page wrapper ───────────────────────────────────────────── */
.page-wrap {
  min-height: 100vh;
}

.page-footer {
  border-top: 1px solid var(--color-border);
  padding: 40px 0;
  margin-top: var(--section-gap);
}

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

.footer-name {
  font-size: 13px;
  font-weight: 600;
}

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


 /* ── AI data review Case Study specific overrides ── */
 .cs-hero-widget {
  background: #f5f3f5;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px 32px;
}
.cs-widget-inner {
  width: 100%;
  max-width: 667px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Pagination / toggle bar */
.widget-bar {
  background: #fafafa;
  border-radius: 16px;
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  box-shadow: 0 4px 4px rgba(12,12,13,0.10), 0 4px 4px rgba(12,12,13,0.05);
  flex-shrink: 0;
}
.widget-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.widget-pagination-btns {
  display: flex;
  gap: 4px;
}
.widget-pagination-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: #414651;
}
.widget-pagination-label {
  font-size: 16px;
  color: #414651;
  white-space: nowrap;
}
.widget-toggle-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.widget-toggle-track {
  width: 44px;
  height: 24px;
  background: #252b37;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px;
  flex-shrink: 0;
}
.widget-toggle-thumb {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.widget-toggle-label {
  font-size: 16px;
  font-weight: 500;
  color: #252b37;
  white-space: nowrap;
}
/* Row cards in widget */
.widget-row {
  background: #fff;
  border-radius: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 32px;
  flex-shrink: 0;
  overflow: hidden;
}
.widget-row--ai {
  box-shadow: 0 16px 32px rgba(12,12,13,0.4);
}
.widget-row--manual {
  box-shadow: 0 16px 16px rgba(12,12,13,0.10), 0 4px 4px rgba(12,12,13,0.05);
}
.widget-row-icon {
  background: #fafafa;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.widget-row-content {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.widget-row-action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.widget-ai-label {
  font-size: 16px;
  font-weight: 600;
  color: #b54708;
  white-space: nowrap;
}
.widget-manual-info {
  display: flex;
  flex-direction: column;
}
.widget-manual-title {
  font-size: 16px;
  font-weight: 600;
  color: #414651;
  line-height: 1.5;
}
.widget-manual-sub {
  font-size: 14px;
  color: #535862;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.widget-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c4b5fd, #818cf8);
  flex-shrink: 0;
}
.widget-view-btn {
  font-size: 16px;
  font-weight: 600;
  color: #414651;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.widget-view-btn--disabled {
  color: #d5d7da;
}
/* Citation card */
.widget-citation {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.widget-citation-tabs {
  background: #fff;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 0;
}
.widget-citation-tab-left {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}
.widget-badge-dark {
  background: #252b37;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.widget-badge-file {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #414651;
}
.widget-badge-page {
  font-size: 14px;
  font-weight: 500;
  color: #414651;
  padding: 2px 8px;
}
.widget-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #535862;
  flex-shrink: 0;
}
.widget-citation-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 8px;
}
.widget-action-icon {
  width: 16px;
  height: 16px;
  color: #6b7280;
  opacity: 0.7;
}
.widget-citation-body {
  background: #fff;
  border-radius: 0 0 16px 16px;
  padding: 16px 24px 24px;
  box-shadow: 0 16px 16px rgba(12,12,13,0.10);
}
.widget-citation-text {
  font-size: 16px;
  color: #181d27;
  line-height: 1.8;
  text-align: justify;
}
.widget-text-highlight {
  text-decoration: underline;
  text-decoration-color: rgba(138,56,245,0.35);
  text-decoration-thickness: 3px;
  text-underline-offset: 2px;
}

/* ── Page sections ── */
.cs-sections-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.cs-content-section {
  width: 100%;
  max-width: 1068px;
  padding: 80px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cs-content-section--accordion {
  padding: 0 32px 32px;
}
.cs-content-section--title {
  flex-direction: row;
  gap: 48px;
  align-items: flex-start;
  padding: 80px 32px;
  overflow: hidden;
}
.cs-title-left {
  flex: 1;
  min-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cs-title-heading {
  font-size: 64px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1.28px;
  color: #121212;
  margin: 0;
}
.cs-title-desc {
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.4px;
  color: #121212;
  margin: 0;
}
.cs-meta-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-self: flex-start;
}
.cs-meta-list li {
  padding-top: 8px;
}
.cs-meta-list li:first-child {
  border-top: 1px solid rgba(0,0,0,0.15);
  padding-top: 24px;
}
.cs-meta-list-label {
  font-size: 16px;
  font-weight: 600;
  color: #121212;
  letter-spacing: -0.32px;
  display: block;
  margin-bottom: 6px;
  line-height: 1;
}
.cs-meta-list-value {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.65;
  margin: 0;
}
/* Section headings: mixed font style */
.cs-section-heading {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.72px;
  color: #121212;
  margin: 0;
}
.cs-section-heading .accent-italic {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
.cs-body-text {
  font-size: 18px;
  line-height: 1.6;
  color: #121212;
  max-width: 640px;
  margin: 0;
}
/* Dark KPI cards */
.kpi-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}
.kpi-card {
  flex: 1;
  background: #1c1c22;
  height: 200px;
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.kpi-number {
  font-size: 56px;
  font-weight: 700;
  color: #f5f5f7;
  letter-spacing: -1.68px;
  line-height: 1;
  white-space: nowrap;
}
.kpi-label {
  font-size: 14px;
  font-weight: 600;
  color: #f5f5f7;
  margin-bottom: 4px;
}
.kpi-sublabel {
  font-size: 12px;
  color: #9ca3af;
}
/* Feature grid */
.feature-grid-wrap {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,3fr);
  width: 100%;
}
.feature-list {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px;
}
.feature-icon {
  width: 24px;
  height: 24px;
  color: #121212;
}
.feature-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-title {
  font-size: 18px;
  font-weight: 700;
  color: #121212;
  line-height: 1.6;
  margin: 0;
}
.feature-desc {
  font-size: 18px;
  color: #121212;
  line-height: 1.45;
  letter-spacing: -0.09px;
  margin: 0;
}
/* Blue demo button */
.btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #4666ff;
  color: #fff;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14px;
  text-decoration: none;
  white-space: nowrap;
  width: fit-content;
  transition: opacity 150ms ease;
}
.btn-demo:hover { opacity: 0.88; }
/* Impact cards */
.impact-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}
.impact-card-new {
  flex: 1;
  height: 200px;
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-width: fit-content;
}


.impact-card-new--blue { background: #4666ff; color: #fff; }
.impact-card-new--green { background: #10b981; color: #121212; }
.impact-card-new--dark { background: #0f0f12; color: #fff; flex: 1; }
.impact-card-new--blue p, .impact-card-new--dark p{
  color: var(--color-bg-primary);
}
.impact-overline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 1.4;
}
.impact-number-new {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 1;
}
.impact-number-new--large {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 1;
}
.impact-label-new {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .cs-content-section--title { flex-direction: column; }
  .cs-title-left { min-width: unset; }
  .cs-title-heading { font-size: 48px; }
  .kpi-row { gap: 16px; }
  .kpi-card { padding: 24px; }
  .kpi-number { font-size: 40px; }
  .feature-grid-wrap { grid-template-columns: 1fr; }
  .feature-list { grid-column: 1; }
  .impact-row { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .cs-hero-widget { padding: 40px 24px; }
  .cs-content-section { padding: 48px 24px; gap: 24px; }
  .cs-content-section--title { padding: 48px 24px; }
  .cs-title-heading { font-size: 36px; }
  .kpi-row { flex-wrap:wrap; gap: 16px; width: 100%; }
  .kpi-card { height: auto; min-height: 160px; min-width:fit-content; }
  .feature-list { grid-template-columns: 1fr; }
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --container-pad: 32px; }
  .impact-grid--3col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .site-header, .site-footer { padding: 24px 40px; }
  .home-main { padding: 40px; gap: 180px; }
  .work-visual-split-right { width: 240px; padding: 40px; }
  .concept-title { font-size: 36px; }
  .home-work-section {padding: 0; width: 100%;}
}

@media (max-width: 768px) {
  :root {
    --container-pad: 24px;
    --section-gap: 64px;
  }

  .site-header { grid-template-columns: 1fr 1fr; padding: 20px 32px; }
  .header-title { display: none; }
  .header-col-center { display: none; }
  .site-footer { grid-template-columns: 1fr auto; padding: 20px 24px; }
  .home-main { padding: 40px; gap: 80px;}
  .home-hero-heading { font-size: 48px; letter-spacing: -0.5px; }
  .hero-icon { width: 18px; height: 18px; margin-top: 6px; }
  .vp-list { gap: 8px; }
  .vp-list-item { min-width: 100%; }
  .work-entry-row { grid-template-columns: 1fr; gap: 12px; }
  .work-visual-split { flex-direction: column; min-height: auto; }
  .work-visual-split-right { width: 100%; border-radius: 16px; padding: 32px; min-height: 200px; }
  .concept-title { font-size: 32px; }
  .work-grid-2col { grid-template-columns: 1fr; gap:80px; }
  .work-card-sm-image { height: 400px; }
  .career-entry { grid-template-columns: 1fr 2fr; }
  .career-entry > :first-child { display: none; }
  .personal-grid { grid-template-columns: 1fr 2fr; }
  .personal-grid > :first-child { display: none; }
  .home-section-title, .career-heading, .personal-heading { font-size: 28px; }
  .career-header-row { flex-direction: column; gap: 16px; }

  .nav-center { display: none; }
  .nav-right { gap: 16px; }

  .hero-heading { font-size: 36px; letter-spacing: -0.5px; }

  .value-props { grid-template-columns: 1fr; gap: 28px; }

  .work-card--split .work-card-visual {
    flex-direction: column;
    height: auto;
  }
  .work-card-left { min-height: 200px; }
  .work-card-right--dark { min-height: 160px; }

  .work-card-grid { grid-template-columns: 1fr; }

  .cs-meta { grid-template-columns: 1fr; gap: 32px; }
  .cs-hero-2col { grid-template-columns: 1fr; }

  .cs-grid--5 { grid-template-columns: 1fr; }
  .cs-grid--3 { grid-template-columns: 1fr; }

  .impact-grid--2col,
  .impact-grid--3col,
  .impact-grid--2x2 { grid-template-columns: 1fr; }
  .impact-grid--standalone { grid-template-columns: 1fr; }

  .timeline-row { grid-template-columns: 1fr; gap: 4px; }
  .timeline-year { padding-top: 0; }

  .cs-title { font-size: 32px; letter-spacing: -0.5px; }
  .cs-section-title { font-size: 24px; }
}

@media (max-width: 480px) {
  :root { --container-pad: 20px; }
  .site-header { grid-template-columns: 1fr auto; padding: 20px 24px; }
  .home-main { padding: 24px; }
  .home-hero-heading { font-size: 32px; }
  .home-section-title, .career-heading, .personal-heading{font-size: 24px;}
  .home-work-section {gap:40px;}
  .concept-title{font-size: 24px;}
  .work-entry {gap:16px;}
  .work-entry-title, .work-card-sm-title{font-size: 20px;}
  .work-entry-desc{font-size: 14px;}
  .work-card-title{font-size: 14px;}
  .work-card-desc{font-size: 12px;}
  .view-study-btn{font-size: 12px;}
  .btn-dark{font-size: 12px;}
  .work-card-grid{gap:16px;}
  .vp-list-item {padding:8px;}
  .vp-list-item .vp-name{font-size: 14px;}
  .vp-list-item .vp-body{font-size: 14px;}
  .career-role{font-size: 14px;}
  .career-year{font-size: 14px;}
  .career-company{font-size: 14px;}
  .career-desc{font-size: 14px;}
  .personal-label-col{font-size: 14px;}
  .personal-text-col{font-size: 14px;}
  .site-header .header-col-right > a.header-link { display: none; }
  .site-footer {
    grid-template-columns: 1fr;
    padding: 20px 24px;
  }
  .site-footer .header-col-left,
  .site-footer .header-col-right {
    justify-content: flex-start;
  }
  .site-footer .header-name {
    white-space: normal;
    line-height: 1.5;
  }
  .work-visual-split {gap:8px;}
  .hamburger-btn { display: flex; }

  .nav-right .nav-link:last-child { display: none; }

  .hero-heading { font-size: 28px; letter-spacing: -0.3px; }
  .cs-section-heading{font-size: 24px;}
  .cs-title { font-size: 26px; }
  .cs-title-desc, .cs-meta-list-label,.cs-meta-list-value, .cs-body-text, .feature-title, .feature-desc{font-size: 14px;}
  
  .accordion-header { padding: 14px 16px; }
  .accordion-body { padding: 0 16px 14px; }

  .impact-number-new,.kpi-number { font-size: 32px; }

  .work-card-grid-item .work-card-visual { height: 220px; }

  .impact-group-inner { padding: 24px; }
  .impact-card { padding: 20px; }
  .impact-grid--standalone .impact-card { padding: 28px 24px; }

}

/* ── Design System case study ─────────────────────────────────── */
.cs-hero-fullbleed {
  width: 100%;
  height: 600px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.cs-hero-fullbleed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.ds-image-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  width: 100%;
}
.ds-image-grid-cell {
  overflow: hidden;
}
.ds-image-grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .cs-hero-fullbleed { height: 320px; }
  .ds-image-grid { grid-template-columns: 1fr; }
}

.pipeline-root * { box-sizing: border-box; margin: 0; padding: 0; }
.pipeline-root {
  background: #0D0F1A;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 28px 20px;
  width: 100%;
  min-height: 400px;
  overflow: hidden;
  /*border-radius: 16px;*/
}
.pipeline-root .wrapper { width: 100%; max-width: 1380px; display: flex; flex-direction: column; }
.pipeline-root .stages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: relative;
  flex: 1;
}
.pipeline-root .stage-col { display: flex; flex-direction: column; gap: 10px; }
.pipeline-root .stage-col .card { flex: 1; }
.pipeline-root .team-col { display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.pipeline-root .tdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pipeline-root .tdot.p { background: #7B5CF5; box-shadow: 0 0 6px rgba(123,92,245,0.65); }
.pipeline-root .tdot.g { background: #3EFFA0; box-shadow: 0 0 6px rgba(62,255,160,0.65); }
.pipeline-root .tname { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.85); }
.pipeline-root .stage-hdr {
  background: #252836; border-radius: 6px; text-align: center;
  padding: 7px 6px; font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.82);
}
.pipeline-root .card {
  background: #1A1D2E; border-radius: 11px; padding: 10px;
  border: 1px solid rgba(255,255,255,0.065); position: relative;
}
.pipeline-root .card-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.pipeline-root .bar-icon { width: 20px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pipeline-root .bar-btn {
  background: #1A1D2E; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px; padding: 3px 9px; font-size: 8px;
  font-weight: 600; color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 4px;
}
.pipeline-root .s1-inputs { display: flex; flex-direction: column; gap: 7px; padding: 6px 2px 4px; }
.pipeline-root .input-field {
  border: 1px solid rgba(255,255,255,0.14); border-radius: 5px;
  padding: 7px 9px; font-size: 9px; color: rgba(255,255,255,0.32); background: transparent;
}
.pipeline-root .s2-body { display: flex; gap: 7px; align-items: stretch; }
.pipeline-root .doc-panel {
  flex: 1.35; background: #20233A; border-radius: 6px; padding: 7px 6px;
  display: flex; flex-direction: column; gap: 3.5px;
}
.pipeline-root .dl { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.pipeline-root .dl.f { width: 100%; }
.pipeline-root .dl.e { width: 85%; }
.pipeline-root .dl.m { width: 70%; }
.pipeline-root .dl.s { width: 55%; }
.pipeline-root .dl.hl { background: rgba(123,92,245,0.42); position: relative; overflow: hidden; }
.pipeline-root .dl.hl::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(160,120,255,0.72), transparent);
  animation: pipeline-doc-sweep 2.6s ease-in-out infinite;
}
@keyframes pipeline-doc-sweep {
  0%  { left: -80%; }
  55% { left: 130%; }
  100%{ left: 130%; }
}
.pipeline-root .pills-col { flex: 1; display: flex; flex-direction: column; gap: 5px; justify-content: space-around; }
.pipeline-root .s3-map-area { display: flex; gap: 6px; margin-bottom: 8px; align-items: flex-start; }
.pipeline-root .s3-col { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pipeline-root .s3-table-wrap { background: #20233A; border-radius: 6px; padding: 6px; }
.pipeline-root .s3-trow { display: flex; gap: 4px; margin-bottom: 3px; }
.pipeline-root .s3-trow:last-child { margin-bottom: 0; }
.pipeline-root .s3-th { flex:1; height:9px; border-radius:2px; background:rgba(62,255,160,0.22); }
.pipeline-root .s3-td { flex:1; height:7px; border-radius:2px; background:rgba(255,255,255,0.08); }
.pipeline-root .s4-body { padding-top: 2px; }
.pipeline-root .select-row { display: flex; gap: 5px; margin-bottom: 8px; }
.pipeline-root .select-pill {
  flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13);
  border-radius: 5px; padding: 5px 7px; font-size: 7px; font-weight: 500;
  color: rgba(255,255,255,0.45); letter-spacing: 0.07em;
  display: flex; justify-content: space-between; align-items: center;
}
.pipeline-root .sel-arrow { opacity: 0.5; font-size: 6px; }
.pipeline-root .s4-pills { display: flex; flex-direction: column; gap: 5px; }
.pipeline-root .s5-usd-block { background: #20233A; border-radius: 6px; padding: 7px 8px; margin-bottom: 8px; }
.pipeline-root .usd-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pipeline-root .usd-row:last-child { margin-bottom: 0; }
.pipeline-root .usd-bar {
  width: 26px; height: 10px; border-radius: 3px; background: rgba(62,255,160,0.28);
  flex-shrink: 0; position: relative; overflow: hidden;
}
.pipeline-root .usd-bar::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(62,255,160,0.55), transparent);
  animation: pipeline-usd-sweep 1.9s ease-in-out infinite;
}
@keyframes pipeline-usd-sweep {
  0%  { left: -80%; }
  65% { left: 130%; }
  100%{ left: 130%; }
}
.pipeline-root .usd-amt { font-size: 8px; font-weight: 700; font-family: 'SF Mono', 'Fira Code', monospace; white-space: nowrap; }
.pipeline-root .usd-pos { color: #3EFFA0; }
.pipeline-root .usd-neg { color: #FF6B6B; }
.pipeline-root .s5-pills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; }
.pipeline-root .s5-table-wrap { background: #20233A; border-radius: 6px; padding: 6px; }
.pipeline-root .s5-trow { display: flex; gap: 4px; margin-bottom: 3px; }
.pipeline-root .s5-trow:last-child { margin-bottom: 0; }
.pipeline-root .s5-th { flex:1; height:9px; border-radius:2px; background:rgba(62,255,160,0.22); }
.pipeline-root .s5-td { flex:1; height:7px; border-radius:2px; background:rgba(255,255,255,0.08); }
.pipeline-root .pill {
  background: #FFFFFF; border-radius: 5px; padding: 5px 6px;
  display: flex; align-items: center; gap: 5px; min-height: 20px;
}
.pipeline-root .pill.g-fill { background: rgba(62,255,160,0.13); border: 1px solid rgba(62,255,160,0.27); }
.pipeline-root .pill.g-fill .pill-line { background: rgba(62,255,160,0.38); }
.pipeline-root .pill.small { padding: 4px 5px; min-height: 17px; }
.pipeline-root .pdot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pipeline-root .pdot.p { background: #7B5CF5; box-shadow: 0 0 4px rgba(123,92,245,0.8); }
.pipeline-root .pdot.g { background: #3EFFA0; box-shadow: 0 0 4px rgba(62,255,160,0.8); }
.pipeline-root .pill-line { flex: 1; height: 3px; border-radius: 2px; background: rgba(26,29,46,0.13); }
.pipeline-root .conn-svg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 20;
}
@media (max-width: 768px) {
  .pipeline-root { min-height: unset; }
}