:root {
  --color-navy: #2D3142;
  --color-white: #FFFFFF;
  --color-orange: #EF8354;
  --color-orange-hover: #f18c61;
  --color-orange-text: #B0431A;
  --color-slate: #4F5D75;
  --color-status-green: #3FA35C;

  --text-secondary: rgba(45,49,66,0.72);
  --text-on-dark: #FFFFFF;
  --text-on-dark-secondary: rgba(255,255,255,0.82);
  --border-light: rgba(45,49,66,0.12);
  --border-light-hover: rgba(45,49,66,0.22);
  --surface-soft: rgba(191,192,192,0.16);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --content-width: 1240px;
  --transition-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --transition-normal: 260ms cubic-bezier(.2,.8,.2,1);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-navy);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.content-width { max-width: var(--content-width); margin-inline: auto; padding-inline: 64px; }
a { color: inherit; text-decoration: none; }
section { padding-block: 110px; }

@media (max-width: 900px) {
  .content-width { padding-inline: 24px; }
  section { padding-block: 72px; }
}

:focus-visible { outline: 3px solid rgba(239,131,84,.65); outline-offset: 4px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* NAVIGATION */
#site-nav {
  position: sticky; top: 0; z-index: 100; height: 72px;
  display: flex; align-items: center;
  background: linear-gradient(to bottom, rgba(20,22,32,0.5) 0%, rgba(20,22,32,0.18) 65%, rgba(20,22,32,0) 100%);
  border-bottom: 1px solid transparent;
  --nav-fg: rgba(255,255,255,.82);
  --nav-fg-strong: #fff;
  --nav-border: rgba(255,255,255,.4);
  transition: background var(--transition-normal), border-color var(--transition-normal), backdrop-filter var(--transition-normal);
}
#site-nav.scrolled {
  background: rgba(255,255,255,0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-light);
  --nav-fg: var(--text-secondary);
  --nav-fg-strong: var(--color-navy);
  --nav-border: rgba(45,49,66,.28);
}
.nav-inner { max-width: var(--content-width); margin-inline: auto; width: 100%; padding-inline: 64px; display: flex; align-items: center; justify-content: space-between; }
.nav-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--nav-fg-strong); transition: color 200ms; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 500; }
.nav-links a { position: relative; padding-bottom: 4px; color: var(--nav-fg); transition: color 160ms; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px; background: var(--color-orange); transform: scaleX(0); transform-origin: right; transition: transform 220ms ease; }
.nav-links a:hover { color: var(--nav-fg-strong); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.active { color: var(--nav-fg-strong); font-weight: 700; }
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.nav-resume-btn {
  border: 1px solid var(--nav-border); border-radius: var(--radius-pill);
  padding: 9px 16px; color: var(--nav-fg-strong); font-weight: 600;
}
.nav-links a.nav-resume-btn::after { display: none; }
.nav-links a.nav-resume-btn:hover { border-color: var(--color-orange); color: var(--color-orange); }
#site-nav.scrolled .nav-links a.nav-resume-btn:hover { color: var(--color-orange-text); }
.nav-links a.nav-exit::after { display: none; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--nav-fg-strong); transition: var(--transition-fast); }

@media (max-width: 780px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 72px; left: 0; right: 0; background: var(--color-white);
    flex-direction: column; align-items: flex-start; gap: 0;
    border-bottom: 1px solid var(--border-light); max-height: 0; overflow: hidden;
    transition: max-height 260ms ease;
  }
  .nav-links.open { max-height: 320px; }
  /* Mobile dropdown always has a white panel background, so text stays dark
     regardless of scroll state - override the nav-fg variables locally. */
  .nav-links.open { --nav-fg: var(--text-secondary); --nav-fg-strong: var(--color-navy); --nav-border: rgba(45,49,66,.28); }
  .nav-links a { width: 100%; padding: 16px 24px; }
  .nav-links a::after { display: none; }
  .nav-links a.nav-resume-btn { border: none; padding: 16px 24px; }
}

/* BUTTONS */
.arrow { transition: transform var(--transition-fast); display: inline-block; }
.btn-primary {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 24px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-orange); background: var(--color-orange);
  color: var(--color-navy); font-weight: 600; font-size: 15px;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(45,49,66,.14); background: var(--color-orange-hover); }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: 0 24px;
  border-radius: var(--radius-pill); border: 1px solid rgba(45,49,66,.28); color: var(--color-navy);
  background: transparent; font-weight: 600; font-size: 15px; transition: all 180ms ease;
}
.btn-secondary:hover { border-color: var(--color-orange); color: var(--color-orange-text); transform: translateY(-2px); }
.btn-secondary:hover .arrow { transform: translateX(4px); }

/* EYEBROW / MARK */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 28px; }
.eyebrow.on-dark { color: var(--text-on-dark-secondary); }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-orange); flex-shrink: 0; }
.mark { border-bottom: 3px solid var(--color-orange); padding-bottom: 1px; }

/* HERO */
.hero { padding-top: 32px; padding-bottom: 48px; }
.hero-headline { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--color-navy); max-width: 640px; margin-bottom: 28px; }
.hero-sub { font-size: 18px; line-height: 1.65; color: var(--text-secondary); max-width: 620px; margin-bottom: 36px; }
.hero-ctas { display: flex; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.availability-line { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-secondary); margin-bottom: 44px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-status-green); flex-shrink: 0; }

.proof-strip { display: flex; gap: 40px; padding-top: 32px; border-top: 1px solid var(--border-light); flex-wrap: wrap; }
.proof-item { display: flex; flex-direction: column; gap: 6px; padding-right: 40px; border-right: 1px solid var(--border-light); }
.proof-item:last-child { border-right: none; padding-right: 0; }
.proof-num { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--color-navy); }
.proof-label { font-size: 12.5px; color: var(--text-secondary); }

@media (max-width: 900px) {
  .proof-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .proof-item { border-right: none; padding-right: 0; }
}

/* FEATURED CASE */
.section-work { padding-top: 30px; padding-bottom: 0; }
.featured-case {
  display: block; padding: 44px; border-radius: var(--radius-lg); background: var(--color-white);
  box-shadow: 0 4px 24px rgba(45,49,66,.07); border: 1px solid rgba(45,49,66,.06);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.featured-case:hover { box-shadow: 0 22px 50px rgba(45,49,66,.13); transform: translateY(-3px); }
.featured-case:hover .arrow { transform: translateX(5px); }
.featured-case:hover .case-cta { color: var(--color-orange-text); }
.featured-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }

.case-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--color-orange-text); margin-bottom: 16px; }
.case-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 18px; color: var(--color-navy); }
.case-body { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 22px; max-width: 540px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tag { font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--color-navy); }
.case-cta { font-size: 14px; font-weight: 600; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; transition: color 160ms; }

/* SIGNATURE DIAGRAM */
.signature-diagram { display: flex; gap: 28px; justify-content: center; }
.sig-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.sig-heading { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 18px; color: var(--text-secondary); }
.sig-heading.mod { color: var(--color-orange); }
.tangle-box {
  font-size: 11px; font-weight: 500; padding: 9px 12px; border: 1px dashed rgba(45,49,66,.32);
  border-radius: 7px; background: #F4F3F1; color: var(--text-secondary); text-align: center;
  margin-top: -3px; width: 100%; box-shadow: 0 2px 6px rgba(45,49,66,.05);
}
.clean-wrap { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; }
.clean-wrap::before { content: ""; position: absolute; top: 22px; bottom: 22px; width: 2px; background: var(--color-orange); opacity: .5; }
.clean-box {
  font-size: 13px; font-weight: 600; padding: 13px 20px; border-radius: 8px; background: var(--color-navy);
  color: var(--color-white); text-align: center; width: 100px; margin-bottom: 20px; position: relative; z-index: 1;
}
.clean-box:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .featured-grid { grid-template-columns: 1fr; }
  .featured-case { padding: 28px; }
  .signature-diagram { margin-top: 28px; }
}

/* SOFT BAND: secondary cards + more work */
.soft-band { background: #FAFAF8; border-radius: var(--radius-lg); margin: 56px 64px; padding: 64px 0; }
.secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 40px; }
.case-card {
  display: block; padding: 32px; border-radius: var(--radius-md); background: var(--color-white);
  border: 1px solid var(--border-light); transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.case-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(45,49,66,.09); }
.case-card:hover .arrow { transform: translateX(5px); }
.case-card:hover .case-cta { color: var(--color-orange-text); }
.case-card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 14px; color: var(--color-navy); }
.case-card-body { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 16px; }
.metric-value { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-orange-text); margin-bottom: 18px; }

.section-headline { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--color-navy); margin-bottom: 44px; }
.band-headline { margin: 48px 0 28px 40px; }
.view-all-link { display: block; text-align: center; margin: 40px 40px 0; padding: 20px; font-size: 15px; font-weight: 600; color: var(--text-secondary); border: 1px dashed var(--border-light-hover); border-radius: var(--radius-md); transition: all 200ms ease; }
.view-all-link:hover { color: var(--color-orange-text); border-color: var(--color-orange); border-style: solid; }
.view-all-link:hover .arrow { transform: translateX(4px); }
.work-index { padding: 0 40px; display: flex; flex-direction: column; }
.work-row { display: grid; grid-template-columns: 44px 1fr 28px; align-items: start; gap: 20px; padding: 28px 16px; border-top: 1px solid var(--border-light); border-radius: var(--radius-sm); transition: background var(--transition-normal), padding var(--transition-normal); }
.work-index a.work-row:last-child { border-bottom: 1px solid var(--border-light); }
.work-row:hover { background: rgba(79,93,117,.06); padding-inline: 20px; }
.work-row:hover .row-arrow { transform: translateX(6px); color: var(--color-orange); }
.work-row:hover .row-number { color: var(--color-orange); }
.row-number { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-secondary); transition: color 160ms; padding-top: 4px; }
.row-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--color-slate); margin-bottom: 8px; }
.row-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--color-navy); margin-bottom: 10px; letter-spacing: -0.01em; }
.row-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; max-width: 620px; }
.row-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.row-tag { font-size: 10.5px; font-weight: 500; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--color-navy); }
.row-arrow { font-size: 17px; color: var(--color-navy); transition: transform 160ms, color 160ms; padding-top: 6px; }

@media (max-width: 700px) {
  .soft-band { margin: 32px 16px; padding: 40px 0; }
  .secondary-grid { grid-template-columns: 1fr; padding: 0 20px; }
  .work-index { padding: 0 20px; }
  .work-row { grid-template-columns: 32px 1fr; }
  .row-arrow { display: none; }
  .band-headline { margin-left: 20px; }
}

/* PHILOSOPHY */
.section-philosophy-wrap { padding-block: 0; }
.section-philosophy {
  background: linear-gradient(160deg, #333852 0%, #20232F 100%);
  color: var(--text-on-dark); padding-block: 72px;
}
.philosophy-quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 820px; margin-bottom: 28px; }
.philosophy-sub { font-size: 16px; line-height: 1.7; color: var(--text-on-dark-secondary); max-width: 580px; margin-bottom: 56px; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 36px; }
.principle-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--color-orange); margin-bottom: 12px; }
.principle p { font-size: 15px; line-height: 1.6; }

@media (max-width: 800px) {
  .section-philosophy { padding: 48px 28px; }
  .principles { grid-template-columns: 1fr; gap: 26px; }
}

/* ADDITIONAL WORK */
.additional-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.additional-item { background: var(--color-white); padding: 30px; border-top: 3px solid var(--color-slate); }
.additional-item:nth-child(1) { border-top-left-radius: var(--radius-md); }
.additional-item:nth-child(2) { border-top-right-radius: var(--radius-md); }
.additional-item:nth-last-child(2):nth-child(odd) { border-bottom-left-radius: var(--radius-md); }
.additional-item:last-child { border-bottom-right-radius: var(--radius-md); }
.additional-item.accent { border-top-color: var(--color-orange); }
.additional-item h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--color-navy); margin-bottom: 10px; }
.additional-item p { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 12px; }
.additional-item .row-tag { background: rgba(79,93,117,.12); color: var(--color-slate); }
.additional-item.accent .row-tag { background: rgba(239,131,84,.14); color: #B0431A; }

.rhythm-band { background: #FAFAF8; padding: 8px 0; }
.rhythm-band .section-additional, .rhythm-band .section-about { padding-inline: 0; }

@media (max-width: 700px) { .additional-grid { grid-template-columns: 1fr; } }

/* Scoped 3-item variant (work.html, post-Direct Pay). Inert unless .cols-3 is present. */
.additional-grid.cols-3 { grid-template-columns: repeat(3, 1fr); border-radius: var(--radius-md); overflow: hidden; }
.additional-grid.cols-3 .additional-item { border-radius: 0; }
@media (max-width: 900px) { .additional-grid.cols-3 { grid-template-columns: 1fr; } }

/* ABOUT */
.about-grid { display: grid; grid-template-columns: 40% 1fr; gap: 56px; }
.about-visual-col { display: flex; flex-direction: column; }
.about-visual { width: 100%; max-width: 260px; height: auto; margin-top: 32px; }
.about-title { margin-bottom: 0; }
.about-copy p { font-size: 16px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 20px; max-width: 640px; }
.about-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-weight: 600; color: var(--text-secondary); transition: color 160ms; }
.about-link:hover { color: var(--color-orange-text); }
.about-link:hover .arrow { transform: translateX(4px); }

@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 24px; } }

/* FINAL CTA */
.section-final-cta-wrap { padding-block: 0 0; }
.section-final-cta {
  background: linear-gradient(160deg, #333852 0%, #20232F 100%);
  color: var(--text-on-dark); padding-block: 72px;
}
.section-final-cta-centered { text-align: center; }
.section-final-cta-centered .eyebrow { justify-content: center; }
.section-final-cta-centered .content-width { display: flex; flex-direction: column; align-items: center; }
.final-cta-headline { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 26px; }
.final-cta-sub { font-size: 17px; line-height: 1.6; color: var(--text-on-dark-secondary); max-width: 540px; margin-bottom: 40px; }

@media (max-width: 800px) { .section-final-cta { padding: 48px 28px; } }

/* FOOTER */
#site-footer { background: var(--color-navy); color: var(--text-on-dark); padding-top: 72px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; margin-bottom: 16px; }
.footer-col p { font-size: 14px; color: var(--text-on-dark-secondary); max-width: 320px; line-height: 1.6; }
.footer-heading { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--text-on-dark-secondary); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14.5px; color: var(--text-on-dark); margin-bottom: 12px; transition: color var(--transition-fast); }
.footer-col a:hover { color: var(--color-orange); }
.footer-col a.social-link { display: flex; align-items: center; gap: 8px; }
.footer-col a.social-link svg { flex-shrink: 0; opacity: .9; }
.footer-col a.social-link:hover svg { opacity: 1; }

.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: var(--text-on-dark-secondary); }

@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================
   CASE STUDY PAGE
============================================ */
.breadcrumb { display: flex; width: fit-content; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 40px; transition: color 160ms; }
.breadcrumb:hover { color: var(--color-orange); }
.breadcrumb .arrow-back { transition: transform 160ms; display: inline-block; }
.breadcrumb:hover .arrow-back { transform: translateX(-4px); }

.case-hero { padding-top: 32px; padding-bottom: 24px; }
.case-hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--color-navy); max-width: 900px; margin-bottom: 26px; }
.case-hero-setup { font-size: 18px; line-height: 1.7; color: var(--text-secondary); max-width: 700px; margin-bottom: 48px; }

.info-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 32px 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); margin-bottom: 64px; }
.info-item { display: flex; flex-direction: column; gap: 6px; }
.info-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.info-value { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--color-navy); }

@media (max-width: 800px) { .info-strip { grid-template-columns: 1fr 1fr; row-gap: 28px; } }

.case-section { padding-block: 0; margin-bottom: 88px; }
.case-section-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-orange-text); margin-bottom: 20px; }
.case-prose { max-width: 700px; }
.case-prose p { font-size: 17px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 20px; }
.case-prose p:last-child { margin-bottom: 0; }
.central-question { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--color-navy); max-width: 680px; margin-top: 28px; }

.evidence-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.evidence-chip { font-size: 13.5px; font-weight: 500; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--color-navy); border: 1px solid var(--border-light); }

.decision-block { background: linear-gradient(160deg, #333852 0%, #20232F 100%); border-radius: var(--radius-lg); padding: 72px 64px; color: var(--text-on-dark); text-align: left; }
.decision-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-secondary); margin-bottom: 20px; }
.decision-text { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 780px; }
@media (max-width: 800px) { .decision-block { padding: 44px 28px; } }

.sequence-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 32px 0; }
.sequence-step { font-size: 13.5px; font-weight: 600; padding: 10px 18px; border-radius: var(--radius-sm); background: var(--color-navy); color: var(--color-white); }
.sequence-arrow { color: var(--color-orange-text); font-size: 16px; }

.subsection { margin-top: 40px; }
.subsection-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-navy); margin-bottom: 12px; letter-spacing: -0.01em; }

.tradeoff-list { display: flex; flex-direction: column; gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; margin-top: 8px; }
.tradeoff-item { background: var(--color-white); padding: 28px 32px; }
.tradeoff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 14px; }
.tradeoff-col-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.tradeoff-col-value { font-size: 15px; color: var(--color-navy); font-weight: 500; line-height: 1.5; }
.tradeoff-why { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; padding-top: 14px; border-top: 1px solid var(--border-light); }
.tradeoff-why strong { color: var(--color-navy); }
@media (max-width: 700px) { .tradeoff-row { grid-template-columns: 1fr; gap: 10px; } }

.metric-hero { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.metric-hero-value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--color-orange-text); letter-spacing: -0.02em; }
.metric-hero-label { font-size: 15px; color: var(--text-secondary); }
.outcome-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.outcome-list li { font-size: 16px; line-height: 1.6; color: var(--text-secondary); padding-left: 22px; position: relative; }
.outcome-list li::before { content: "→"; position: absolute; left: 0; color: var(--color-orange-text); font-weight: 600; }

.learned-quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--color-navy); max-width: 780px; border-left: 3px solid var(--color-orange); padding-left: 28px; }

.role-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; padding-top: 40px; border-top: 1px solid var(--border-light); margin-bottom: 40px; }
.role-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--color-navy); }
.role-skills { font-size: 13.5px; color: var(--text-secondary); }

.confidentiality-note { font-size: 12.5px; color: var(--text-secondary); font-style: italic; margin-bottom: 56px; }

.next-case { display: flex; align-items: center; justify-content: space-between; padding: 36px 40px; border-radius: var(--radius-lg); background: #FAFAF8; border: 1px solid var(--border-light); transition: all 200ms ease; margin-bottom: 8px; }
.next-case:hover { border-color: var(--border-light-hover); box-shadow: 0 14px 32px rgba(45,49,66,.07); transform: translateY(-2px); }
.next-case-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-orange-text); margin-bottom: 8px; display: block; }
.next-case-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--color-navy); letter-spacing: -0.02em; }
.next-case-arrow { font-size: 22px; color: var(--color-navy); transition: transform 200ms ease; }
.next-case:hover .next-case-arrow { transform: translateX(8px); color: var(--color-orange); }
@media (max-width: 700px) { .next-case { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* ============================================
   WORK INDEX PAGE
============================================ */
.work-hero { padding-top: 32px; padding-bottom: 8px; }
.section-work-grid { padding-top: 48px; padding-bottom: 8px; }
.work-hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.06; letter-spacing: -0.035em; color: var(--color-navy); max-width: 780px; margin-bottom: 22px; }
.work-hero-sub { font-size: 17px; line-height: 1.65; color: var(--text-secondary); max-width: 560px; margin-bottom: 44px; }

.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px; }
.filter-pill {
  font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: var(--radius-pill);
  border: 1px solid rgba(45,49,66,.2); color: var(--text-secondary); background: transparent;
  cursor: pointer; transition: all 180ms ease; font-family: var(--font-body);
}
.filter-pill:hover { border-color: var(--color-orange); color: var(--color-orange); }
.filter-pill.active { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-navy); }

.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 90px; }
.work-grid .case-card { transition: transform var(--transition-normal), box-shadow var(--transition-normal), opacity 220ms ease; }
.work-grid .case-card.hidden { display: none; }

@media (max-width: 800px) { .work-grid { grid-template-columns: 1fr; } }

/* ============================================
   PIPELINE DIAGRAM (case-hero scale)
============================================ */
.mini-diagram.pipeline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--surface-soft); border-radius: var(--radius-md);
}
.pipe-step {
  font-size: 12.5px; font-weight: 500; padding: 9px 14px; border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-navy); border: 1px solid var(--border-light);
}
.pipe-step.break { border-color: var(--color-orange); color: var(--color-orange); font-weight: 700; }
.pipe-arrow { font-size: 13px; color: var(--text-secondary); }

@media (max-width: 700px) {
  .mini-diagram.pipeline { padding: 14px !important; }
  .pipe-step { font-size: 11px; padding: 7px 10px; }
}

/* ============================================
   ABOUT PAGE
============================================ */
.about-hero-page { padding-top: 32px; padding-bottom: 8px; }
.about-hero-grid { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: flex-start; }
.about-hero-title-page { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -0.035em; color: var(--color-navy); margin-bottom: 20px; }
.about-hero-sub-page { font-size: 18px; line-height: 1.65; color: var(--text-secondary); max-width: 560px; }
.about-photo-wrap { flex-shrink: 0; }
.about-photo {
  width: 300px; height: 300px; border-radius: var(--radius-lg); object-fit: cover;
  border: 1px solid var(--border-light); box-shadow: 0 12px 32px rgba(45,49,66,.1);
}
@media (max-width: 800px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-photo { width: 200px; height: 200px; }
}

.principles-light { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 12px; }
.principle-light-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-navy); margin-bottom: 10px; letter-spacing: -0.01em; }
.principle-light-body { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); }
@media (max-width: 800px) { .principles-light { grid-template-columns: 1fr; gap: 24px; } }

.range-list { display: flex; flex-direction: column; margin-top: 8px; }
.range-item { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--border-light); }
.range-list .range-item:last-child { border-bottom: 1px solid var(--border-light); }
.range-domain { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-navy); }
.range-desc { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 700px) { .range-item { grid-template-columns: 1fr; gap: 6px; } }

.looking-for-block { border-left: 3px solid var(--color-orange); padding-left: 26px; }
.looking-for-block p { font-size: 16.5px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 16px; }
.looking-for-block p:last-child { margin-bottom: 0; }

.away-block p { font-size: 15.5px; line-height: 1.75; color: var(--text-secondary); font-style: italic; }

/* ============================================
   HERO PHOTO CARD (homepage)
============================================ */
.hero-grid { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
.hero-photo-card { width: 300px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-light); box-shadow: 0 16px 36px rgba(45,49,66,.14); }
.hero-photo-card img { width: 300px; height: 300px; object-fit: cover; display: block; }
.hero-photo-tag { background: var(--color-navy); color: var(--text-on-dark); padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
.hero-photo-tag .status-dot { flex-shrink: 0; }
.hero-photo-tag-text { font-size: 12.5px; line-height: 1.35; color: var(--text-on-dark-secondary); }
.hero-photo-tag-text b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--text-on-dark); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo-card { width: 220px; }
  .hero-photo-card img { width: 220px; height: 220px; }
}

/* ============================================
   HERO BAND (dark navy, used at the top of every page)
============================================ */
.hero-band {
  background: linear-gradient(160deg, #333852 0%, #20232F 100%);
  color: var(--text-on-dark);
  margin-top: -72px;
  padding-top: 104px;
  padding-bottom: 48px;
}
.hero-band .eyebrow { color: rgba(255,255,255,.65); }
.hero-band .hero-headline,
.hero-band .case-hero-title,
.hero-band .work-hero-title,
.hero-band .about-hero-title-page { color: #fff; }
.hero-band .hero-sub,
.hero-band .case-hero-setup,
.hero-band .work-hero-sub,
.hero-band .about-hero-sub-page { color: rgba(255,255,255,.75); }
.hero-band .mark { border-bottom-color: var(--color-orange); }

.hero-band .btn-secondary { border-color: rgba(255,255,255,.35); color: #fff; }
.hero-band .btn-secondary:hover { border-color: var(--color-orange); color: var(--color-orange); background: rgba(255,255,255,.06); }

.hero-band .breadcrumb { color: rgba(255,255,255,.65); }
.hero-band .breadcrumb:hover { color: var(--color-orange); }

.hero-band .info-strip { border-color: rgba(255,255,255,.18); }
.hero-band .info-label { color: rgba(255,255,255,.55); }
.hero-band .info-value { color: #fff; }

.hero-band .filter-pill { border-color: rgba(255,255,255,.32); color: rgba(255,255,255,.82); }
.hero-band .filter-pill:hover { border-color: var(--color-orange); color: var(--color-orange); }
.hero-band .filter-pill.active { background: var(--color-orange); color: var(--color-navy); border-color: var(--color-orange); }

.hero-band .status-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.hero-band .availability-line { color: rgba(255,255,255,.75); }
.hero-band .sig-heading { color: rgba(255,255,255,.55); }
.hero-band .sequence-step { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.hero-band .sequence-arrow { color: rgba(255,255,255,.4); }

/* Compact 2x2 stat cluster, sits under the hero photo on the homepage */
.compact-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.compact-stat { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 12px; text-align: center; }
.compact-stat-num { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-orange); }
.compact-stat-label { font-size: 10px; color: rgba(255,255,255,.65); margin-top: 2px; }

@media (max-width: 900px) {
  .hero-band { margin-top: -72px; padding-top: 96px; }
}

/* ============================================================
   ABOUT PAGE V2 - scoped, safe to coexist with existing styles
============================================================ */
:root {
  --about-warm: #F6F3EE;
  --about-dark-card: rgba(255,255,255,.055);
  --about-dark-border: rgba(255,255,255,.14);
}

.about-v2-section { padding-block: 104px; }
.about-v2-section-soft { background: var(--about-warm); }
.about-v2-label { font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--color-orange-text); margin-bottom: 18px; }
.about-v2-section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 4vw, 3.65rem); line-height: 1.06; letter-spacing: -.035em; color: var(--color-navy); max-width: 760px; }
.about-v2-section-title-dark { color: #fff; }

/* HERO */
.about-v2-hero { padding-top: 128px; padding-bottom: 66px; }
.about-v2-hero-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 64px; align-items: center; }
.about-v2-photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; display: block; border-radius: 24px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 22px 54px rgba(0,0,0,.25); }
.about-v2-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.05; letter-spacing: -.04em; color: #fff; margin-bottom: 22px; }
.about-v2-lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: rgba(255,255,255,.86); max-width: 640px; margin-bottom: 26px; }
.about-v2-intro { max-width: 640px; }
.about-v2-intro p { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.72); margin-bottom: 16px; }
.about-v2-intro p:last-child { margin-bottom: 0; }

.about-v2-proof { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.17); }
.about-v2-proof-item { padding: 0 24px; border-right: 1px solid rgba(255,255,255,.14); }
.about-v2-proof-item:first-child { padding-left: 0; }
.about-v2-proof-item:last-child { border-right: 0; }
.about-v2-proof-value { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--color-orange); margin-bottom: 6px; }
.about-v2-proof-label { display: block; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.66); }

/* STORY / CAREER */
.about-v2-story-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 88px; align-items: start; position: relative; }
.about-v2-story-grid::before { content: ""; position: absolute; left: calc(300px + 44px); top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--color-orange), rgba(239,131,84,.15)); }
.about-v2-story-rail { position: sticky; top: 100px; }
.about-v2-story-heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 18px; color: var(--color-navy); }
.about-v2-story-intro { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 30px; }

.about-v2-timeline { list-style: none; border-left: 1px solid var(--border-light); padding-left: 22px; margin-bottom: 26px; }
.about-v2-timeline li { position: relative; display: flex; flex-direction: column; padding-bottom: 20px; }
.about-v2-timeline li:last-child { padding-bottom: 0; }
.about-v2-timeline li::before { content: ""; position: absolute; left: -27px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-orange); box-shadow: 0 0 0 4px #fff; }
.timeline-year { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--color-orange-text); margin-bottom: 3px; }
.timeline-role { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--color-navy); }
.timeline-company { font-size: 12px; color: var(--text-secondary); }
.about-v2-location { font-size: 12px; color: var(--text-secondary); }

.about-v2-story-content { max-width: 700px; }
.about-v2-story-chapter { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 20px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--border-light); }
.about-v2-chapter-number { grid-row: 1 / 3; font-family: var(--font-display); color: var(--color-orange-text); font-size: 12.5px; font-weight: 700; padding-top: 5px; }
.about-v2-story-chapter h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.2; letter-spacing: -.02em; color: var(--color-navy); margin-bottom: 12px; }
.about-v2-story-chapter p { font-size: 15.5px; line-height: 1.75; color: var(--text-secondary); }

.about-v2-pullquote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.05rem); line-height: 1.3; letter-spacing: -.02em; color: var(--color-navy); border-left: 4px solid var(--color-orange); padding-left: 26px; margin-top: 8px; }

/* PRINCIPLES */
.about-v2-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 48px; }
.about-v2-principle { padding: 26px 0 36px; border-top: 1px solid rgba(45,49,66,.16); }
.about-v2-principle-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--color-orange-text); margin-bottom: 26px; }
.about-v2-principle h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px; color: var(--color-navy); }
.about-v2-principle p { max-width: 480px; font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); }

/* DOMAINS */
.about-v2-domains { background: linear-gradient(160deg, #333852 0%, #20232F 100%); }
.about-v2-domains-intro { max-width: 640px; margin-top: 20px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.68); }
.about-v2-domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
.about-v2-domain-card { min-height: 160px; padding: 24px; border: 1px solid var(--about-dark-border); border-radius: 16px; background: var(--about-dark-card); }
.about-v2-domain-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; line-height: 1.2; letter-spacing: -.01em; color: #fff; margin-bottom: 14px; }
.about-v2-domain-card p { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.64); }

/* WHAT'S NEXT */
.about-v2-next-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
.about-v2-next-copy { max-width: 660px; }
.about-v2-next-copy p { font-size: 16px; line-height: 1.78; color: var(--text-secondary); margin-bottom: 18px; }
.about-v2-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.about-v2-pills span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid rgba(45,49,66,.16); background: #fff; font-size: 12px; font-weight: 600; color: var(--color-navy); }

/* PERSONAL (text-only) */
.about-v2-personal-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 3.8vw, 3.2rem); line-height: 1.08; letter-spacing: -.035em; color: var(--color-navy); max-width: 760px; margin-bottom: 32px; }
.about-v2-personal-copy-solo { max-width: 680px; }
.about-v2-personal-copy-solo p { font-size: 16px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 18px; }
.about-v2-personal-copy-solo p:last-child { margin-bottom: 0; }

/* CTA */
.about-v2-final-cta { margin-top: 0 !important; }
.about-v2-behind-build { background: #FAFAF8; border-top: 1px solid rgba(45, 49, 66, 0.08); }
.about-v2-cta-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.about-v2-text-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 600; transition: color 160ms ease; }
.about-v2-text-link:hover { color: var(--color-orange); }
.about-v2-text-link:hover .arrow { transform: translateX(4px); }

.cta-footer-buffer { background: var(--color-white); height: 56px; }

/* RESPONSIVE */
@media (max-width: 1050px) {
  .about-v2-hero-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 44px; }
  .about-v2-story-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 56px; }
  .about-v2-story-grid::before { left: calc(250px + 28px); }
  .about-v2-domain-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .about-v2-section { padding-block: 72px; }
  .about-v2-hero { padding-top: 104px; padding-bottom: 48px; }
  .about-v2-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-v2-photo-wrap { max-width: 220px; }
  .about-v2-proof { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .about-v2-proof-item { border-right: 0; padding: 0; }
  .about-v2-story-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-v2-story-grid::before { display: none; }
  .about-v2-story-rail { position: static; }
  .about-v2-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-left: 0; padding-left: 0; }
  .about-v2-timeline li { padding: 14px 0; border-top: 1px solid var(--border-light); }
  .about-v2-timeline li::before { display: none; }
  .about-v2-principles { grid-template-columns: 1fr; }
  .about-v2-domain-grid { grid-template-columns: 1fr; }
  .about-v2-next-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 520px) {
  .about-v2-section { padding-block: 56px; }
  .about-v2-proof { grid-template-columns: 1fr; }
  .about-v2-proof-item { padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .about-v2-proof-item:last-child { border-bottom: 0; }
  .about-v2-story-chapter { grid-template-columns: 1fr; }
  .about-v2-chapter-number { margin-bottom: 10px; }
  .about-v2-timeline { grid-template-columns: 1fr; }
}

/* ============================================================
   CASE STUDY REDESIGN - hero pathway/outcomes, rail, decision
   card, trade-off icons, side-notes, outcome band
============================================================ */

/* Hero: transformation pathway */
.hero-transition { padding: 40px 0 8px; background: var(--color-white); }
.hero-pathway { display: flex; align-items: center; margin-top: 0; margin-bottom: 6px; }
.hp-node { width: 9px; height: 9px; border-radius: 50%; background: var(--border-light); flex-shrink: 0; }
.hp-node.done { background: var(--color-orange); }
.hp-line { flex: 1; height: 1px; background: var(--border-light); }
.hp-line.done { background: var(--color-orange); }
.hp-labels { display: flex; justify-content: space-between; margin-bottom: 30px; }
.hp-labels span { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); }
.hp-labels span.done { color: var(--color-orange-text); font-weight: 700; }

/* Hero: outcome row */
.hero-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; }
.ho-card { background: var(--surface-soft); padding: 18px 16px; text-align: center; }
.ho-value { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--color-orange-text); line-height: 1.15; }
.ho-label { font-size: 10.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
@media (max-width: 700px) { .hero-outcomes { grid-template-columns: 1fr; } .hp-labels span { font-size: 8px; } }

/* Body: connecting rail */
.rail-wrap { position: relative; }
.rail-line-holder { position: absolute; inset: 0; pointer-events: none; max-width: var(--content-width); margin-inline: auto; }
.rail-line { position: absolute; left: 70px; top: 6px; bottom: 24px; width: 2px; background: var(--border-light); }
@media (max-width: 900px) { .rail-line { left: 30px; } }
.rail-section { position: relative; padding-left: 46px; }
.rail-dot { position: absolute; left: -9px; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--color-white); border: 2px solid var(--border-light); display: flex; align-items: center; justify-content: center; }
.rail-dot svg { width: 15px; height: 15px; stroke: var(--color-slate); }
.rail-dot.on { border-color: var(--color-orange); }
.rail-dot.on svg { stroke: var(--color-orange-text); }
@media (max-width: 700px) { .rail-line { left: -4px; } .rail-section { padding-left: 34px; } .rail-dot { width: 26px; height: 26px; left: -13px; } .rail-dot svg { width: 12px; height: 12px; } }

/* Decision card v2 */
.decision-card-v2 { border: 2px solid var(--color-navy); border-radius: var(--radius-md); padding: 28px 30px; max-width: 640px; margin-top: 8px; }
.dc-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--color-orange-text); margin-bottom: 12px; }
.dc-text { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.28; letter-spacing: -.015em; color: var(--color-navy); margin-bottom: 18px; }
.dc-table { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 13px; border-top: 1px solid var(--border-light); padding-top: 16px; }
.dc-opt { color: var(--color-navy); font-weight: 700; white-space: nowrap; }
.dc-trade { color: var(--text-secondary); }

/* Side-note callout */
.case-sidenote { float: right; width: 200px; margin: 0 0 16px 24px; background: var(--surface-soft); border-left: 3px solid var(--color-orange); padding: 14px 16px; border-radius: 0 8px 8px 0; }
.sn-label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-orange-text); margin-bottom: 6px; }
.sn-text { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 700px) { .case-sidenote { float: none; width: auto; margin: 16px 0; } }

/* Trade-off icon pairing */
.tf-icon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tf-icon-col { display: flex; gap: 12px; }
.tf-icon-badge { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.tf-icon-badge.chose { background: rgba(239,131,84,.14); }
.tf-icon-badge.gave { background: rgba(79,93,117,.14); }
.tf-icon-badge svg { width: 13px; height: 13px; }
@media (max-width: 700px) { .tf-icon-row { grid-template-columns: 1fr; } }

/* Outcome band (full-bleed dark, replaces plain "what changed") */
.outcome-band {
  background: linear-gradient(160deg, #333852 0%, #20232F 100%);
  color: var(--text-on-dark); padding-block: 64px; margin-top: 8px;
}
.ob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ob-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--color-orange); line-height: 1.2; }
.ob-label { font-size: 12px; color: rgba(255,255,255,.68); margin-top: 8px; line-height: 1.5; }
@media (max-width: 700px) { .ob-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; } }

/* ============================================================
   CASE STUDY v3 - Platform Modernization pilot only.
   New, independent classes (kd-, pp-, tc-, framing-) so the
   other five case studies (still on the rail/icon system) are
   completely unaffected.
============================================================ */

/* Shared section rhythm for the simplified editorial layout */
.case-section-v3 { padding-block: 76px; }
.case-section-v3:first-of-type { padding-top: 8px; }
.chapter-neutral { background: #FAFAF8; }

/* Framing question - larger, quieter, no card */
.framing-question { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.32; letter-spacing: -0.015em; color: var(--color-navy); max-width: 720px; margin-top: 28px; }

/* KEY DECISION - the second-strongest moment on the page */
.kd-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-orange-text); margin-bottom: 16px; }
.kd-statement { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.18; letter-spacing: -0.02em; color: var(--color-navy); max-width: 780px; margin-bottom: 36px; }
.kd-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; }
.kd-option { border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 22px 24px; }
.kd-option-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
.kd-option-text { font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; }
.kd-option.selected { border: 2px solid var(--color-navy); background: var(--surface-soft); }
.kd-option.selected .kd-option-label { color: var(--color-orange-text); display: flex; align-items: center; gap: 6px; }
.kd-option.selected .kd-option-text { color: var(--color-navy); font-weight: 500; }
.kd-check { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 700px) { .kd-compare { grid-template-columns: 1fr; } }

/* WHAT I DID - quieter numbered process path */
.pp-path { display: flex; align-items: flex-start; gap: 0; margin: 32px 0 8px; }
.pp-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; position: relative; }
.pp-num { width: 30px; height: 30px; border-radius: 50%; background: var(--color-white); border: 1.5px solid var(--color-navy); color: var(--color-navy); font-family: var(--font-display); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; z-index: 1; }
.pp-line { position: absolute; top: 15px; left: 50%; width: 100%; height: 1.5px; background: var(--border-light); z-index: 0; }
.pp-step:last-child .pp-line { display: none; }
.pp-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); max-width: 110px; line-height: 1.4; }
@media (max-width: 800px) {
  .pp-path { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pp-step { flex-direction: row; text-align: left; gap: 14px; width: 100%; }
  .pp-line { display: none; }
  .pp-label { max-width: none; }
}

/* THE TRADE-OFF - compressed, high-density, no repeated labels */
.tc-header { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 24px; padding-bottom: 10px; border-bottom: 1.5px solid var(--color-navy); margin-top: 28px; }
.tc-header span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-navy); }
.tc-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border-light); }
.tc-row span { font-size: 13.5px; line-height: 1.5; }
.tc-chose { color: var(--color-navy); font-weight: 600; }
.tc-gave { color: var(--text-secondary); }
.tc-why { color: var(--text-secondary); }
@media (max-width: 800px) {
  .tc-header { display: none; }
  .tc-row { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .tc-row span::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-orange-text); margin-bottom: 3px; }
}

/* WHAT CHANGED - reinforced as the strongest visual climax */
.outcome-band-v3 { background: linear-gradient(160deg, #333852 0%, #20232F 100%); color: var(--text-on-dark); padding-block: 88px; }
.ob3-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 24px; text-align: center; }
.ob3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ob3-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--color-orange); line-height: 1.15; text-align: center; }
.ob3-desc { font-size: 13px; color: rgba(255,255,255,.68); margin-top: 10px; line-height: 1.55; text-align: center; }
@media (max-width: 800px) { .ob3-grid { grid-template-columns: 1fr; gap: 44px; } }

/* ============================================================
   CASE STUDY v4 - Platform Modernization refinement pass.
   Orientation chapter (white), narrow reading column, compact
   snapshot/metrics rows, quiet evidence grid, restructured
   process path, and case-footer role summary.
============================================================ */

.orientation-chapter { background: #FAFAF8; padding: 44px 0 56px; }

/* Case snapshot - Role/Company/Focus/Outcome on white */
.snapshot-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--border-light); margin-bottom: 32px; }
.snap-item { }
.snap-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.snap-value { font-size: 14.5px; font-weight: 600; color: var(--color-navy); line-height: 1.4; }
@media (max-width: 700px) { .snapshot-row { grid-template-columns: 1fr 1fr; gap: 24px 20px; } }

/* Transformation diagram wrapper */
.transform-diagram-wrap { margin: 0 0 32px; }
.transform-diagram-wrap svg { width: 100%; height: auto; max-width: 780px; display: block; }
.diagram-mobile { display: none; }
@media (max-width: 700px) {
  .transform-diagram-wrap .diagram-desktop, .story-diagram-wrap .diagram-desktop { display: none; }
  .diagram-mobile { display: block; }
  .dm-heading { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-slate); margin-bottom: 14px; }
  .dm-heading.mod { color: var(--color-orange-text); margin-top: 28px; }
  .dm-item { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font-size: 13.5px; color: var(--color-navy); font-weight: 500; }
  .dm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-navy); flex-shrink: 0; }
  .dm-arrow-down { color: var(--color-orange); font-size: 20px; margin: 12px 0; }
  .dm-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .dm-node { background: var(--color-navy); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 8px; }
  .dm-node.accent { background: var(--color-orange); color: var(--color-navy); font-weight: 700; }
  .dm-flow-arrow { color: var(--text-secondary); font-size: 14px; }
}

/* Compact metric row (replaces the oversized pill) */
.metric-row-compact { display: grid; grid-template-columns: repeat(3, 1fr); }
.mrc-item { padding: 0 28px; border-right: 1px solid var(--border-light); }
.mrc-item:first-child { padding-left: 0; }
.mrc-item:last-child { border-right: none; }
.mrc-value { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--color-orange-text); line-height: 1.2; }
.mrc-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
@media (max-width: 700px) { .metric-row-compact { grid-template-columns: 1fr; } .mrc-item { padding: 16px 0; border-right: none; border-bottom: 1px solid var(--border-light); } .mrc-item:last-child { border-bottom: none; } }

/* Editorial spine - narrow content left-aligned to the SAME edge as
   full-width breakout artifacts, rather than independently centered
   at a different width (which was the actual cause of the old
   center/left/center jump). */
.editorial-spine { max-width: 780px; margin-inline: 0; }
.editorial-spine .case-prose { max-width: 100%; }
.breakout { width: 100%; }

/* Hero meta credit line - quiet, restrained, not a module */
.hero-meta-line { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; color: rgba(255,255,255,.62); letter-spacing: .01em; }
.hero-meta-line strong { color: rgba(255,255,255,.85); font-weight: 600; }
@media (max-width: 700px) { .hero-meta-line { line-height: 1.7; } }

/* Shallow impact strip bridging hero into the story */
.impact-strip { background: #FAFAF8; padding: 28px 0; }
.impact-strip .metric-row-compact { }

/* In-story transformation diagram (breakout, inside The Problem) */
.story-diagram-wrap { margin: 12px 0 8px; }
.story-diagram-wrap svg { width: 100%; height: auto; max-width: 100%; display: block; }

/* Framing question, anchored to Problem */
.question-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-orange-text); margin: 32px 0 12px; }
.framing-question-v4 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.32; letter-spacing: -0.015em; color: var(--color-navy); max-width: 720px; }

/* Evidence - quiet grid, no pills */
.evidence-grid-v4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; margin: 24px 0; }
.evidence-item-v4 { display: flex; align-items: baseline; gap: 10px; }
.evidence-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-slate); flex-shrink: 0; margin-top: 3px; }
.evidence-item-v4 span { font-size: 13.5px; color: var(--color-navy); font-weight: 500; }
@media (max-width: 700px) { .evidence-grid-v4 { grid-template-columns: 1fr 1fr; } }

/* Compact process path (4 stages, narrower, ties to copy below) */
.process-path-v4 { display: flex; align-items: flex-start; gap: 0; max-width: 640px; margin: 28px 0 8px; }
.pp4-step { display: flex; flex-direction: column; align-items: flex-start; flex: 1; position: relative; padding-right: 14px; }
.pp4-num { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--color-orange-text); margin-bottom: 6px; }
.pp4-line { position: absolute; top: 7px; left: 22px; width: calc(100% - 14px); height: 1px; background: var(--border-light); }
.pp4-step:last-child .pp4-line { display: none; }
.pp4-label { font-size: 12.5px; font-weight: 600; color: var(--color-navy); line-height: 1.4; }
@media (max-width: 700px) {
  .process-path-v4 { flex-direction: column; gap: 16px; }
  .pp4-step { flex-direction: row; align-items: baseline; gap: 10px; padding-right: 0; }
  .pp4-line { display: none; }
}

/* Research questions as 2x2 list */
.research-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 18px 0; }
.rq-item { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; padding-left: 16px; border-left: 2px solid var(--border-light); }
@media (max-width: 700px) { .research-questions { grid-template-columns: 1fr; } }

/* Case footer - My Role redesigned */
.case-footer-role { border-top: 1px solid var(--border-light); padding-top: 32px; }
.cfr-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-navy); margin-bottom: 16px; }
.cfr-row { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.6; }
.cfr-row strong { color: var(--color-navy); font-weight: 700; }

/* ============================================================
   CASE STUDY v5 - Platform Modernization "Complexity, Clarified"
   Approved art-direction handoff. Platform-only; new classes so
   other case studies remain untouched.
============================================================ */

/* Hero topology */
.hero-grid-v5 { display: grid; grid-template-columns: 0.92fr 1.32fr; gap: 36px; align-items: center; }
.hero-topology { width: 100%; height: auto; opacity: 0.92; }
@media (max-width: 900px) { .hero-grid-v5 { grid-template-columns: 1fr; } .hero-topology-col { order: 2; max-width: 420px; margin: 0 auto; } }

/* Hero metadata (labeled, integrated, not cards) */
.hero-meta-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.hm-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-orange); margin-bottom: 6px; }
.hm-value { font-size: 13.5px; color: #fff; font-weight: 500; line-height: 1.4; }
@media (max-width: 700px) { .hero-meta-row { grid-template-columns: 1fr 1fr; row-gap: 20px; } }

/* Impact strip v5 - icons + numbers, shallow */
.impact-strip-v5 { background: var(--color-white); padding: 44px 0; border-bottom: 1px solid var(--border-light); }
.impact-row-v5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.impact-cell-v5 { display: flex; align-items: center; gap: 18px; padding: 0 32px; border-right: 1px solid var(--border-light); }
.impact-cell-v5:first-child { padding-left: 0; }
.impact-cell-v5:last-child { border-right: none; padding-right: 0; }
.impact-icon { width: 48px; height: 48px; flex-shrink: 0; color: var(--color-slate); }
.impact-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }
.impact-text-v5 .iv5-value { font-family: var(--font-display); font-weight: 800; font-size: 1.85rem; color: var(--color-orange-text); line-height: 1.15; letter-spacing: -0.01em; }
.impact-text-v5 .iv5-label { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
@media (max-width: 700px) { .impact-row-v5 { grid-template-columns: 1fr; gap: 22px; } .impact-cell-v5 { border-right: none; padding: 0 0 20px; border-bottom: 1px solid var(--border-light); } .impact-cell-v5:last-child { border-bottom: none; padding-bottom: 0; } }

/* Problem: legacy list vs need/status/action */
.problem-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; margin: 32px 0 8px; }
.pc-arrow { display: flex; align-items: center; justify-content: center; color: var(--color-slate); }
.pc-arrow svg { width: 22px; height: 22px; }
.pc-card { border-radius: var(--radius-md); padding: 24px 26px; }
.pc-card.legacy { background: #FAFAF8; border: 1px solid var(--border-light); }
.pc-card.modern { background: #FFF8F4; border: 1px solid rgba(239,131,84,.28); }
.pc-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 16px; }
.pc-legacy-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--color-navy); margin-bottom: 12px; line-height: 1.4; }
.pc-legacy-item:last-child { margin-bottom: 0; }
.pc-legacy-item svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; stroke: var(--color-orange-text); fill: none; stroke-width: 1.8; }
.pc-flow { display: flex; justify-content: space-between; gap: 10px; }
.pc-flow-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.pc-flow-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-white); border: 1.5px solid var(--color-orange); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: var(--color-orange-text); }
.pc-flow-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pc-flow-title { font-size: 12.5px; font-weight: 700; color: var(--color-navy); margin-bottom: 2px; }
.pc-flow-desc { font-size: 10.5px; color: var(--text-secondary); line-height: 1.35; }
.pc-flow-arrow-inline { color: var(--border-light); display: flex; align-items: center; padding-top: 4px; }
.pc-flow-arrow-inline svg { width: 14px; height: 14px; }
@media (max-width: 800px) {
  .problem-compare { grid-template-columns: 1fr; }
  .pc-arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* Problem: rich legacy topology (replaces bullet list) */
.pc-card.legacy-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 18px 14px; }
.legacy-topology { width: 100%; max-width: 300px; height: auto; }
.legacy-caption { font-size: 11px; color: var(--text-secondary); text-align: center; margin-top: 4px; line-height: 1.5; }

/* Evidence convergence */
.evidence-convergence { display: flex; flex-direction: column; align-items: center; margin: 8px auto 20px; max-width: 640px; }
.evidence-convergence svg { width: 100%; height: auto; max-width: 560px; }
.diagnosis-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-orange-text); margin-top: 8px; }

/* Evidence - icon cells, converging to a diagnosis */
.evidence-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 28px 0; }
.evidence-cells.cols-5 { grid-template-columns: repeat(5, 1fr); }
.ec-cell { text-align: center; }
.ec-icon { width: 38px; height: 38px; margin: 0 auto 10px; color: var(--color-slate); }
.ec-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ec-title { font-size: 12px; font-weight: 700; color: var(--color-navy); margin-bottom: 3px; line-height: 1.3; }
.ec-desc { font-size: 10.5px; color: var(--text-secondary); line-height: 1.35; }
@media (max-width: 900px) { .evidence-cells { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .evidence-cells { grid-template-columns: 1fr 1fr !important; } }

/* Key Decision v5 - options with mini diagrams */
.kd-compare-v5 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; max-width: 1020px; margin-top: 8px; }
.kd-card { border-radius: var(--radius-md); padding: 22px 24px; border: 1.5px solid var(--border-light); }
.kd-card.chosen { border: 2px solid var(--color-orange); background: #FFF8F4; position: relative; }
.kd-chosen-badge { position: absolute; top: -11px; right: 18px; background: var(--color-orange); color: var(--color-navy); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.kd-card-title { font-size: 13.5px; font-weight: 700; color: var(--color-navy); margin-bottom: 12px; }
.kd-list { list-style: none; }
.kd-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 7px; line-height: 1.4; }
.kd-list li:last-child { margin-bottom: 0; }
.kd-list li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.kd-list.cons li svg { stroke: var(--color-slate); }
.kd-list.pros li svg { stroke: var(--color-orange-text); }
.kd-vs { width: 38px; height: 38px; border-radius: 50%; background: var(--color-navy); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.kd-mini-flow { display: flex; gap: 6px; margin-top: 14px; }
.kd-mini-flow .pc-flow-icon { width: 30px; height: 30px; margin-bottom: 0; }
.kd-mini-flow .pc-flow-icon svg { width: 15px; height: 15px; }
@media (max-width: 800px) {
  .kd-compare-v5 { grid-template-columns: 1fr; }
  .kd-vs { justify-self: center; }
}

/* What I Did - micro-artifacts */
.process-moves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 28px 0 8px; }
.process-moves.steps-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .process-moves.steps-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .process-moves.steps-5 { grid-template-columns: 1fr !important; } }.pm-card { text-align: left; }
.pm-num-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pm-num { width: 22px; height: 22px; border-radius: 50%; background: var(--color-navy); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pm-arrow { color: var(--border-light); }
.pm-icon { width: 56px; height: 56px; color: var(--color-slate); margin-bottom: 12px; }
.pm-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.pm-title { font-size: 13px; font-weight: 700; color: var(--color-navy); margin-bottom: 4px; line-height: 1.3; }
.pm-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }
@media (max-width: 900px) { .process-moves { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-moves { grid-template-columns: 1fr; } }

/* MVP Scope - new chapter, strengthened composition */
.mvp-tiles-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 36px; }
.mvp-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 20px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); }
.mvp-tile-icon { width: 38px; height: 38px; flex-shrink: 0; color: var(--color-orange-text); }
.mvp-tile-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.mvp-tile-title { font-size: 14.5px; font-weight: 700; color: var(--color-navy); margin-bottom: 3px; }
.mvp-tile-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.mvp-scope-map-v2 { background: #FAFAF8; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; align-items: center; }
.msm-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 7px; max-width: 460px; width: 100%; margin: 0 auto 14px; }
.msm-cell { aspect-ratio: 1; border-radius: 4px; background: var(--border-light); }
.msm-cell.on { background: var(--color-orange); }
.msm-label { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); }
@media (max-width: 800px) { .mvp-tiles-row { grid-template-columns: 1fr; gap: 14px; } .msm-grid { grid-template-columns: repeat(6, 1fr); } }

/* Outcome resolved visual inside What Changed */
.outcome-grid-v5 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.outcome-resolved-flow { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.outcome-before-topology { width: 90px; height: 90px; opacity: 0.5; flex-shrink: 0; }
.outcome-resolve-arrow { color: rgba(255,255,255,.4); flex-shrink: 0; }
.outcome-resolve-arrow svg { width: 20px; height: 20px; }
.outcome-resolved-flow .pc-flow-icon { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.06); }
.outcome-resolved-flow .pc-flow-title { color: #fff; }
.outcome-resolved-flow .pc-flow-desc { color: rgba(255,255,255,.6); }
@media (max-width: 800px) { .outcome-grid-v5 { grid-template-columns: 1fr; gap: 32px; } }

/* Role icons */
.role-cols-v5 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 20px; }
.role-col-v5 { }
.role-col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.role-col-icon { width: 24px; height: 24px; color: var(--color-orange-text); }
.role-col-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; }
.role-col-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-navy); }
.role-col-v5 p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.65; }
@media (max-width: 700px) { .role-cols-v5 { grid-template-columns: 1fr; gap: 24px; } }

/* What I Learned - extra breathing room per spec */
.learned-v5 { padding-top: 116px; padding-bottom: 100px; }
@media (max-width: 700px) { .learned-v5 { padding-top: 72px; padding-bottom: 64px; } }

/* ============================================================
   MOBILE RELIABILITY - "Symptoms → System → Trust"
   Case-specific components. Reuses Platform's shared primitives
   (hero, impact strip, editorial-spine, breakout, chapter-neutral,
   kd-compare-v5, tc-header/tc-row, outcome-band-v3, role-cols-v5,
   process-moves) - none of which are modified here.
============================================================ */

/* Trust chain - 8-node pipeline, reused broken (hero/problem) and
   resolved (outcome) */
.trust-chain { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.tc-node-wrap { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.tc-node-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--color-white); border: 1.5px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--color-slate); margin-bottom: 6px; flex-shrink: 0; }
.tc-node-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.tc-node-label { font-size: 10px; font-weight: 600; color: var(--color-navy); text-align: center; line-height: 1.25; }
.tc-node-state { margin-top: 4px; width: 14px; height: 14px; }
.tc-node-state svg { width: 100%; height: 100%; }
.tc-connector { flex: 0 0 auto; width: 14px; height: 1px; background: var(--border-light); margin-top: 17px; }
.trust-chain.on-dark .tc-node-icon { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.75); }
.trust-chain.on-dark .tc-node-label { color: rgba(255,255,255,.85); }
.trust-chain.on-dark .tc-connector { background: rgba(255,255,255,.18); }
.trust-chain.broken .tc-node-icon.fail { border-color: var(--color-orange); color: var(--color-orange-text); }
.trust-chain.resolved .tc-node-icon { border-color: var(--color-orange); }
.trust-chain.resolved.on-dark .tc-node-icon { border-color: var(--color-orange); background: rgba(239,131,84,.12); color: var(--color-orange); }
@media (max-width: 900px) {
  .trust-chain { flex-wrap: wrap; row-gap: 20px; justify-content: flex-start; }
  .tc-node-wrap { flex: 0 0 22%; }
  .tc-connector { display: none; }
}

/* Hero symptom cluster */
.symptom-cluster { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; padding: 10px 60px; }
.hero-symptom-grid { margin-top: 36px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: center; }
@media (max-width: 900px) {
  .hero-symptom-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-symptom-grid .symptom-cluster { min-height: 200px; padding: 10px 20px; }
}
.sc-center { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-md); padding: 16px 20px; max-width: 170px; text-align: center; font-size: 13px; font-weight: 600; color: #fff; z-index: 2; position: relative; }
.sc-label { position: absolute; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 6px 12px; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.8); white-space: nowrap; }
.sc-svg-connectors { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 900px) { .symptom-cluster { min-height: 260px; } }
@media (max-width: 480px) {
  .sc-label-r { left: 54% !important; }
  .sc-label { font-size: 9.5px; padding: 5px 9px; }
}

/* Problem section: symptom map (light bg version) */
.symptom-map-light { position: relative; background: #FAFAF8; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 28px 20px; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.symptom-map-light .sc-center { background: var(--color-navy); border: none; color: #fff; }
.symptom-map-light .sc-label { background: #fff; border: 1px solid var(--border-light); color: var(--color-navy); }

/* Reliability rail (iOS / Android) */
.reliability-rails { display: flex; flex-direction: column; gap: 22px; margin: 8px 0; }
.rr-row { display: flex; align-items: center; gap: 16px; }
.rr-label { width: 56px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--color-navy); }
.rr-track { flex: 1; display: flex; align-items: center; gap: 10px; }
.rr-dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid var(--border-light); }
.rr-dot.ok { border-color: var(--color-orange); }
.rr-dot.fail { border-color: var(--color-slate); background: rgba(79,93,117,.08); }
.rr-dot svg { width: 10px; height: 10px; }
.rr-line { flex: 1; height: 1px; background: var(--border-light); min-width: 8px; }
.rr-callout { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border-light); }
.rr-callout-arrow { color: var(--color-orange); flex-shrink: 0; }
.rr-callout-arrow svg { width: 20px; height: 20px; }
.rr-callout-badge { display: flex; align-items: center; gap: 10px; background: #FFF8F4; border: 1px solid rgba(239,131,84,.3); border-radius: 8px; padding: 10px 16px; }
.rr-callout-badge-icon { width: 22px; height: 22px; color: var(--color-orange-text); flex-shrink: 0; }
.rr-callout-badge-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; }
.rr-callout-badge-text { font-size: 13px; font-weight: 700; color: var(--color-navy); }
@media (max-width: 600px) { .rr-callout { flex-direction: column; align-items: flex-start; gap: 10px; } .rr-callout-arrow { transform: rotate(90deg); } }

/* Algorithm boundary (before/after vendor chain) */
.algo-boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.algo-panel { border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 22px; }
.algo-panel.after { border-color: rgba(239,131,84,.3); background: #FFF8F4; }
.algo-panel-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 16px; }
.algo-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.algo-node { background: var(--color-white); border: 1px solid var(--border-light); border-radius: 8px; padding: 8px 12px; font-size: 11.5px; font-weight: 600; color: var(--color-navy); }
.algo-panel.after .algo-node.highlight { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.algo-arrow-sm { color: var(--color-slate); flex-shrink: 0; }
.algo-arrow-sm svg { width: 13px; height: 13px; }
.algo-loop-note { margin-top: 12px; font-size: 11px; color: var(--text-secondary); font-style: italic; }
.algo-outcome-note { margin-top: 12px; font-size: 11.5px; font-weight: 600; color: var(--color-orange-text); }
@media (max-width: 800px) { .algo-boundary { grid-template-columns: 1fr; } }

/* Key Decision micro-artifacts (Mobile Reliability) */
.kd-micro { margin: 4px 0 16px; }
.kd-micro-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.kd-micro-a-row { display: flex; align-items: flex-end; gap: 10px; }
.kd-micro-a-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-light); flex-shrink: 0; position: relative; }
.kd-micro-a-dot.patched { border-color: var(--color-slate); background: rgba(79,93,117,.08); }
.kd-micro-a-dot.patched::after { content: ''; position: absolute; inset: -5px; border: 1px dashed var(--color-slate); border-radius: 50%; opacity: .4; }
.kd-micro-a-dot.new-issue { border-color: var(--color-orange); background: rgba(239,131,84,.12); margin-bottom: 6px; }
.kd-micro-a-arrow { font-size: 10.5px; color: var(--color-orange-text); font-weight: 600; margin: 0 2px 4px; white-space: nowrap; }
.kd-micro-b-chain { display: flex; align-items: center; }
.kd-micro-b-node { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-orange); background: rgba(239,131,84,.12); flex-shrink: 0; }
.kd-micro-b-line { flex: 1; height: 1.5px; background: var(--color-orange); min-width: 10px; opacity: .6; }
.fallback-flow { display: flex; flex-direction: column; gap: 18px; }
.ff-row-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.ff-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ff-node { display: flex; align-items: center; gap: 8px; background: var(--color-white); border: 1px solid var(--border-light); border-radius: 8px; padding: 9px 14px; font-size: 12px; font-weight: 600; color: var(--color-navy); }
.ff-node.accent { border-color: var(--color-orange); background: #FFF8F4; }
.ff-node svg { width: 15px; height: 15px; stroke: var(--color-slate); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.ff-node.accent svg { stroke: var(--color-orange-text); }
.ff-arrow { color: var(--color-slate); flex-shrink: 0; }
.ff-arrow svg { width: 13px; height: 13px; }
@media (max-width: 700px) { .ff-row { flex-direction: column; align-items: stretch; } .ff-arrow { transform: rotate(90deg); align-self: center; } }

/* ============================================================
   DATA + AI INTELLIGENCE - "Reports → Questions → Trusted
   Answers → Action". Case-specific components only; reuses
   Platform/Mobile shared primitives without modification.
============================================================ */

/* Hero: old model vs new model */
.data-hero-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-top: 32px; }
.dh-panel { border-radius: var(--radius-md); padding: 20px; }
.dh-panel.old { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); }
.dh-panel.new { background: rgba(239,131,84,.08); border: 1px solid rgba(239,131,84,.3); }
.dh-panel-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.dh-panel.new .dh-panel-title { color: var(--color-orange); }
.dh-reports-row { display: flex; gap: 8px; margin-bottom: 14px; }
.dh-report { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 10px 6px; text-align: center; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.85); }
.dh-arrow-down { text-align: center; color: rgba(255,255,255,.35); margin: 6px 0; }
.dh-arrow-down svg { width: 14px; height: 14px; }
.dh-old-line { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 9px 12px; font-size: 12px; color: rgba(255,255,255,.85); font-weight: 600; margin-bottom: 8px; display:flex; align-items:center; gap:8px; }
.dh-old-line svg { width: 14px; height: 14px; stroke: rgba(255,255,255,.6); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.dh-new-node { background: var(--color-white); border-radius: 6px; padding: 10px 12px; font-size: 12px; color: var(--color-navy); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.dh-new-node svg { width: 15px; height: 15px; stroke: var(--color-orange-text); fill: none; stroke-width: 1.8; flex-shrink: 0; }
.dh-new-node:last-child { margin-bottom: 0; background: var(--color-orange); color: var(--color-navy); }
.dh-new-node:last-child svg { stroke: var(--color-navy); }
.dh-center-arrow { color: var(--color-orange); flex-shrink: 0; }
.dh-center-arrow svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .data-hero-compare { grid-template-columns: 1fr; } .dh-center-arrow { transform: rotate(90deg); justify-self: center; } }

/* Problem: report-request cycle */
.report-loop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-node { background: var(--color-white); border: 1px solid var(--border-light); border-radius: 8px; padding: 12px 16px; font-size: 12.5px; font-weight: 600; color: var(--color-navy); display: flex; align-items: center; gap: 8px; }
.rl-node svg { width: 16px; height: 16px; stroke: var(--color-slate); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.rl-arrow { color: var(--color-slate); flex-shrink: 0; }
.rl-arrow svg { width: 14px; height: 14px; }
.report-loop-branch { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--border-light); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-node.question { background: #FFF8F4; border-color: rgba(239,131,84,.35); }
.rl-node.question svg { stroke: var(--color-orange-text); }
.rl-node.loop-back { background: rgba(79,93,117,.06); }
@media (max-width: 700px) { .report-loop, .report-loop-branch { flex-direction: column; align-items: stretch; } .rl-arrow { transform: rotate(90deg); align-self: center; } }

/* Trust flow: query variations -> shared meaning -> trusted answer */
.trust-flow { display: grid; grid-template-columns: auto auto 1fr; gap: 24px; align-items: center; }
.tf-queries { display: flex; flex-direction: column; gap: 8px; }
.tf-query { background: #FAFAF8; border: 1px solid var(--border-light); border-radius: 6px; padding: 8px 14px; font-size: 12px; color: var(--text-secondary); }
.tf-arrow { color: var(--color-slate); flex-shrink: 0; }
.tf-arrow svg { width: 18px; height: 18px; }
.tf-meaning { background: var(--color-navy); color: #fff; border-radius: var(--radius-md); padding: 20px; text-align: center; min-width: 150px; }
.tf-meaning-icon { width: 30px; height: 30px; margin: 0 auto 10px; color: var(--color-orange); }
.tf-meaning-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tf-meaning-title { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.tf-meaning-desc { font-size: 10.5px; color: rgba(255,255,255,.65); }
.tf-answer { background: #FFF8F4; border: 2px solid var(--color-orange); border-radius: var(--radius-md); padding: 20px; text-align: center; min-width: 140px; }
.tf-answer-icon { width: 30px; height: 30px; margin: 0 auto 10px; color: var(--color-orange-text); }
.tf-answer-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tf-answer-title { font-size: 13px; font-weight: 700; color: var(--color-navy); }
@media (max-width: 800px) {
  .trust-flow { grid-template-columns: 1fr; justify-items: center; }
  .tf-arrow { transform: rotate(90deg); }
  .tf-queries { width: 100%; max-width: 280px; }
}

/* Vendor / semantic mapping (Vendor Wasn't the Product) */
.semantic-map { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.sm-inputs { display: flex; flex-direction: column; gap: 8px; }
.sm-input { display: flex; align-items: center; gap: 10px; background: #FAFAF8; border: 1px solid var(--border-light); border-radius: 6px; padding: 9px 14px; font-size: 12px; font-weight: 600; color: var(--color-navy); }
.sm-input svg { width: 15px; height: 15px; stroke: var(--color-slate); fill: none; stroke-width: 1.7; flex-shrink: 0; }
@media (max-width: 800px) { .semantic-map { grid-template-columns: 1fr; } .semantic-map .tf-arrow { transform: rotate(90deg); justify-self: center; } }

/* QA trust loop */
.qa-loop { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.qa-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 90px; }
.qa-step-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--color-white); border: 1.5px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--color-slate); margin-bottom: 8px; }
.qa-step-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.qa-step-label { font-size: 11.5px; font-weight: 700; color: var(--color-navy); }
.qa-step.repeat .qa-step-icon { border-color: var(--color-orange); color: var(--color-orange-text); }
.qa-loop-arrow { color: var(--border-light); flex-shrink: 0; }
.qa-loop-arrow svg { width: 16px; height: 16px; }
@media (max-width: 700px) { .qa-loop { flex-direction: column; } .qa-loop-arrow { transform: rotate(90deg); } }

/* Launch plan: two-lane roadmap */
.roadmap-lanes { display: flex; flex-direction: column; gap: 22px; }
.rm-lane-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
.rm-lane { display: flex; align-items: center; gap: 0; }
.rm-seg { flex: 1; height: 1px; background: var(--border-light); }
.rm-node { background: var(--color-white); border: 1.5px solid var(--border-light); border-radius: 8px; padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--color-navy); white-space: nowrap; }
.rm-node.accent { border-color: var(--color-orange); background: #FFF8F4; color: var(--color-navy); }
@media (max-width: 700px) { .rm-node { font-size: 11px; padding: 8px 10px; white-space: normal; text-align: center; } }

/* Key Decision: sequencing time/value rail (supplementary to kd-compare-v5) */
.sequencing-rail { margin-top: 24px; }
.sr-track { position: relative; height: 2px; background: var(--border-light); margin: 20px 0 8px; }
.sr-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--color-slate); transform: translate(-50%,-50%); }
.sr-dot.chosen { background: var(--color-orange); width: 13px; height: 13px; }
.sr-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-secondary); }

/* ============================================================
   AXLE AUTOMATION - "Partner Exit → Runway → Continuity →
   Automation → Exceptions Only". Bridge first, automate second.
   Case-specific components only; reuses shared primitives from
   Platform/Mobile/Data+AI without modification. Lighter/shorter
   supporting-case density per handoff.
============================================================ */

/* Hero: 4-stage sequencing timeline */
.axle-timeline { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 32px; }
.at-stage { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; position: relative; }
.at-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); margin-bottom: 10px; z-index: 1; }
.at-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.at-icon.accent { border-color: var(--color-orange); background: rgba(239,131,84,.14); color: var(--color-orange); }
.at-label { font-size: 11.5px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.at-sub { font-size: 10px; color: rgba(255,255,255,.55); }
.at-connector { position: absolute; top: 20px; left: 50%; width: 100%; height: 1px; background: rgba(255,255,255,.2); z-index: 0; }
.at-stage:last-child .at-connector { display: none; }
@media (max-width: 800px) { .axle-timeline { flex-wrap: wrap; row-gap: 24px; } .at-stage { flex: 0 0 46%; } .at-connector { display: none; } }

/* Problem: manual workflow chain */
.manual-workflow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mw-node { background: var(--color-white); border: 1px solid var(--border-light); border-radius: 8px; padding: 11px 15px; font-size: 12px; font-weight: 600; color: var(--color-navy); display: flex; align-items: center; gap: 8px; }
.mw-node.human { border-color: rgba(239,131,84,.35); background: #FFF8F4; }
.mw-node.human svg { stroke: var(--color-orange-text); }
.mw-node svg { width: 15px; height: 15px; stroke: var(--color-slate); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.mw-arrow { color: var(--color-slate); flex-shrink: 0; }
.mw-arrow svg { width: 13px; height: 13px; }
.mw-deadline-note { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border-light); display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--color-navy); font-weight: 600; }
.mw-deadline-note svg { width: 17px; height: 17px; stroke: var(--color-orange-text); fill: none; stroke-width: 1.8; flex-shrink: 0; }
@media (max-width: 700px) { .manual-workflow { flex-direction: column; align-items: stretch; } .mw-arrow { transform: rotate(90deg); align-self: center; } }

/* Evidence: vendor evaluation matrix + selection */
.vendor-eval { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.ve-criteria-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ve-criterion { background: #FAFAF8; border: 1px solid var(--border-light); border-radius: 6px; padding: 8px 12px; font-size: 11.5px; font-weight: 600; color: var(--color-navy); }
.ve-candidates { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ve-candidate-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--border-light); }
.ve-selected { background: #FFF8F4; border: 2px solid var(--color-orange); border-radius: var(--radius-md); padding: 22px; text-align: center; }
.ve-selected-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-orange-text); margin-bottom: 8px; }
.ve-selected-name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--color-navy); }
@media (max-width: 800px) { .vendor-eval { grid-template-columns: 1fr; } .vendor-eval .tf-arrow, .vendor-eval .mw-arrow { transform: rotate(90deg); justify-self: center; } }

/* Vendor future-fit callouts (Don't Just Replace the Vendor) */
.future-fit-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ff-chip { display: flex; align-items: center; gap: 7px; background: #FAFAF8; border: 1px solid var(--border-light); border-radius: 20px; padding: 7px 14px; font-size: 12px; font-weight: 600; color: var(--color-navy); }
.ff-chip svg { width: 14px; height: 14px; stroke: var(--color-orange-text); fill: none; stroke-width: 1.8; flex-shrink: 0; }

/* Automation: before/after with exception branch (signature moment) */
.automation-flow { display: flex; flex-direction: column; gap: 22px; }
.af-row-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.af-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-node { display: flex; align-items: center; gap: 8px; background: var(--color-white); border: 1px solid var(--border-light); border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--color-navy); }
.af-node.accent { border-color: var(--color-orange); background: #FFF8F4; }
.af-node svg { width: 15px; height: 15px; stroke: var(--color-slate); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.af-node.accent svg { stroke: var(--color-orange-text); }
.af-arrow { color: var(--color-slate); flex-shrink: 0; }
.af-arrow svg { width: 13px; height: 13px; }
.af-exception-branch { margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--border-light); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .af-row, .af-exception-branch { flex-direction: column; align-items: stretch; } .af-arrow { transform: rotate(90deg); align-self: center; } }

/* Key Decision: phased rail (supplementary, matching Data+AI pattern) */
.phase-rail { margin-top: 24px; }
.pr-track { display: flex; align-items: center; }
.pr-node { background: var(--color-white); border: 1.5px solid var(--border-light); border-radius: 8px; padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--color-navy); white-space: nowrap; }
.pr-node.accent { border-color: var(--color-orange); background: #FFF8F4; }
.pr-seg { flex: 1; height: 1px; background: var(--border-light); min-width: 16px; }
@media (max-width: 700px) { .pr-track { flex-direction: column; align-items: stretch; gap: 10px; } .pr-seg { display: none; } .pr-node { text-align: center; } }

/* ============================================================
   PRODUCT INTAKE - "Noise → Context → Decision. Fix it upstream."
   Case-specific components only; reuses shared primitives from
   Platform/Mobile/Data+AI/Axle without modification. Lighter/
   shorter supporting-case density per handoff.
============================================================ */

/* Hero + Problem: five-source convergence map */
.intake-convergence { display: flex; align-items: center; gap: 20px; }
.ic-sources { display: flex; flex-direction: column; gap: 8px; }
.ic-source { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: #fff; }
.ic-source svg { width: 14px; height: 14px; stroke: rgba(255,255,255,.75); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.ic-arrow { color: rgba(255,255,255,.35); flex-shrink: 0; }
.ic-arrow svg { width: 18px; height: 18px; }
.ic-result { display: flex; flex-direction: column; gap: 8px; }
.ic-node { border-radius: 8px; padding: 12px 16px; font-size: 12.5px; font-weight: 700; }
.ic-node.door { background: rgba(239,131,84,.14); border: 1.5px solid var(--color-orange); color: #fff; }
.ic-node.door span { display:block; font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.65); margin-top: 2px; }
.ic-node.plain { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: #fff; text-align: center; }
@media (max-width: 800px) { .intake-convergence { flex-direction: column; } .ic-arrow { transform: rotate(90deg); } }

/* Problem section: light version of the convergence map */
.intake-map-light { display: flex; align-items: center; gap: 20px; }
.iml-sources { display: flex; flex-wrap: wrap; gap: 8px; max-width: 340px; }
.iml-source { background: #FAFAF8; border: 1px solid var(--border-light); border-radius: 6px; padding: 9px 13px; font-size: 12px; font-weight: 600; color: var(--color-navy); }
.iml-noise { background: #FFF8F4; border: 2px solid var(--color-orange); border-radius: var(--radius-md); padding: 18px 20px; text-align: center; }
.iml-noise-label { font-size: 12px; font-weight: 700; color: var(--color-navy); }
.iml-noise-sub { font-size: 10.5px; color: var(--text-secondary); margin-top: 2px; }
@media (max-width: 800px) { .intake-map-light { flex-direction: column; } }

/* Key Decision: Downstream / Upstream labels */
.kd-card .kd-card-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.kd-card.chosen .kd-card-eyebrow { color: var(--color-orange-text); }

/* How It Works: standalone operating-system rail */
.hiw-rail { display: flex; align-items: stretch; gap: 0; }
.hiw-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 6px; }
.hiw-node { border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 16px 12px; width: 100%; background: var(--color-white); }
.hiw-node.accent { border-color: var(--color-orange); background: #FFF8F4; }
.hiw-node-title { font-size: 12.5px; font-weight: 700; color: var(--color-navy); margin-bottom: 3px; }
.hiw-node-sub { font-size: 10.5px; color: var(--text-secondary); line-height: 1.4; }
.hiw-arrow { display: flex; align-items: center; color: var(--color-slate); flex-shrink: 0; padding: 0 2px; }
.hiw-arrow svg { width: 15px; height: 15px; }
@media (max-width: 800px) {
  .hiw-rail { flex-direction: column; }
  .hiw-arrow { transform: rotate(90deg); align-self: center; padding: 6px 0; }
  .hiw-step { padding: 0; }
}

/* Transparency flow: Submit -> Seen -> Status -> SLA */
.transparency-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-node { background: var(--color-white); border: 1px solid var(--border-light); border-radius: 8px; padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--color-navy); display: flex; align-items: center; gap: 8px; }
.tp-node.accent { border-color: var(--color-orange); background: #FFF8F4; }
.tp-node svg { width: 15px; height: 15px; stroke: var(--color-slate); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.tp-node.accent svg { stroke: var(--color-orange-text); }
.tp-arrow { color: var(--color-slate); flex-shrink: 0; }
.tp-arrow svg { width: 13px; height: 13px; }
@media (max-width: 700px) { .transparency-flow { flex-direction: column; align-items: stretch; } .tp-arrow { transform: rotate(90deg); align-self: center; } }

/* ============================================================
   PRODUCT INTAKE - "Noise → Context → Decision". Fix it
   upstream. Case-specific components only; reuses shared
   primitives from Platform/Mobile/Data+AI/Axle without
   modification. Lighter/shorter supporting-case density.
============================================================ */

/* Five-source convergence (reused in Hero -> front door, and
   Problem -> backlog noise, with different endpoints) */
.source-converge { display: flex; flex-direction: column; gap: 20px; }
.sc-sources-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-source { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 600; color: #fff; flex: 1; text-align: center; min-width: 70px; }
.sc-converge-arrow { display: flex; justify-content: center; color: rgba(255,255,255,.4); }
.sc-converge-arrow svg { width: 16px; height: 16px; transform: rotate(90deg); }
.sc-endpoint-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sc-endpoint { border: 2px solid var(--color-orange); background: rgba(239,131,84,.12); border-radius: 8px; padding: 12px 16px; text-align: center; }
.sc-endpoint-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-orange); margin-bottom: 2px; }
.sc-endpoint-sub { font-size: 11px; color: rgba(255,255,255,.7); }
.sc-chain-node { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 10px 16px; font-size: 12px; font-weight: 600; color: #fff; }
.sc-chain-arrow { color: rgba(255,255,255,.35); flex-shrink: 0; }
.sc-chain-arrow svg { width: 14px; height: 14px; }
@media (max-width: 700px) { .sc-sources-row { flex-direction: column; } .sc-endpoint-row { flex-direction: column; } .sc-chain-arrow { transform: rotate(90deg); } }

/* Light (on-white) variant for Problem section */
.source-converge.on-light .sc-source { background: var(--color-white); border: 1px solid var(--border-light); color: var(--color-navy); }
.source-converge.on-light .sc-converge-arrow { color: var(--color-slate); }
.source-converge.on-light .sc-endpoint { border-color: var(--color-orange); background: #FFF8F4; }
.source-converge.on-light .sc-endpoint-label { color: var(--color-orange-text); }
.source-converge.on-light .sc-endpoint-sub { color: var(--color-navy); font-weight: 600; }

/* Key Decision: Downstream / Upstream labels (uses kd-compare-v5 structure) */
.kd-approach-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.kd-card.chosen .kd-approach-label { color: var(--color-orange-text); }

/* How It Works - standalone operating-system rail */
.how-it-works-rail { display: flex; align-items: center; gap: 0; }
.hiw-node { flex: 1; border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 16px 14px; text-align: center; }
.hiw-node.accent { border-color: var(--color-orange); background: #FFF8F4; }
.hiw-node-title { font-size: 12.5px; font-weight: 700; color: var(--color-navy); margin-bottom: 3px; }
.hiw-node-sub { font-size: 10.5px; color: var(--text-secondary); line-height: 1.4; }
.hiw-seg { flex: 0 0 auto; width: 22px; height: 1px; background: var(--border-light); margin: 0 4px; }
@media (max-width: 800px) { .how-it-works-rail { flex-direction: column; align-items: stretch; gap: 12px; } .hiw-seg { display: none; } }

/* Transparency flow (Submit -> Seen -> Status -> SLA) */
.transparency-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trf-node { background: var(--color-white); border: 1px solid var(--border-light); border-radius: 8px; padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--color-navy); display: flex; align-items: center; gap: 8px; }
.trf-node svg { width: 15px; height: 15px; stroke: var(--color-slate); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.trf-node.accent { border-color: var(--color-orange); background: #FFF8F4; }
.trf-node.accent svg { stroke: var(--color-orange-text); }
.trf-arrow { color: var(--color-slate); flex-shrink: 0; }
.trf-arrow svg { width: 13px; height: 13px; }
@media (max-width: 700px) { .transparency-flow { flex-direction: column; align-items: stretch; } .trf-arrow { transform: rotate(90deg); align-self: center; } }

/* ============================================================
   iUGO HEALTHCARE - "Preserve the care job. Reconsider the
   implementation." Case-specific components only; reuses
   shared primitives without modification. No green, no
   illustrated people, per hard constraints.
============================================================ */

/* Hero: capability stack -> feature inventory -> P/E/N -> pilot */
.iugo-hero-flow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 18px; align-items: center; margin-top: 32px; }
.ihf-capabilities { display: flex; flex-direction: column; gap: 8px; }
.ihf-cap { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 9px 14px; font-size: 12px; font-weight: 600; color: #fff; }
.ihf-arrow { color: rgba(255,255,255,.4); flex-shrink: 0; }
.ihf-arrow svg { width: 16px; height: 16px; }
.ihf-inventory { border: 2px solid var(--color-orange); background: rgba(239,131,84,.12); border-radius: var(--radius-md); padding: 16px 18px; text-align: center; font-size: 12.5px; font-weight: 700; color: #fff; max-width: 130px; }
.ihf-pen { display: flex; flex-direction: column; gap: 8px; }
.ihf-pen-badge { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 7px 12px; }
.ihf-pen-letter { width: 20px; height: 20px; border-radius: 50%; background: var(--color-orange); color: var(--color-navy); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ihf-pen-label { font-size: 11px; color: #fff; font-weight: 600; }
.ihf-pilot { border: 1.5px solid rgba(255,255,255,.25); border-radius: 8px; padding: 12px 16px; text-align: center; font-size: 12px; font-weight: 700; color: #fff; }
@media (max-width: 900px) { .iugo-hero-flow { grid-template-columns: 1fr; justify-items: center; } .ihf-arrow { transform: rotate(90deg); } .ihf-capabilities { width: 100%; max-width: 280px; } }

/* Problem: dependency composition -> feature inventory */
.dependency-map { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.dm-deps { display: flex; flex-direction: column; gap: 8px; }
.dm-dep { display: flex; align-items: center; gap: 10px; background: var(--color-white); border: 1px solid var(--border-light); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--color-navy); }
.dm-dep svg { width: 16px; height: 16px; stroke: var(--color-slate); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.dm-inventory { border: 2px solid var(--color-orange); background: #FFF8F4; border-radius: var(--radius-md); padding: 20px; text-align: center; }
.dm-inventory-label { font-size: 13px; font-weight: 700; color: var(--color-navy); }
.dm-caption { margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--color-orange-text); text-align: center; }
@media (max-width: 800px) { .dependency-map { grid-template-columns: 1fr; } .dependency-map .mw-arrow { transform: rotate(90deg); justify-self: center; } }

/* Key Decision: Full Feature Parity vs P/E/N (uses kd-compare-v5 structure) */
.pen-mini-row { display: flex; gap: 6px; margin-top: 14px; }
.pen-mini-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--color-orange); color: var(--color-navy); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* How P/E/N Works - standalone 3-part explainer */
.pen-explainer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pen-card { border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 22px; }
.pen-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pen-card-letter { width: 32px; height: 32px; border-radius: 50%; background: var(--color-orange); color: var(--color-navy); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pen-card-title { font-size: 13.5px; font-weight: 700; color: var(--color-navy); }
.pen-card-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 800px) { .pen-explainer { grid-template-columns: 1fr; } }

/* Care path rail - conceptual, not literal clinical protocol */
.care-path-rail { display: flex; align-items: center; gap: 0; }
.cpr-node { flex: 1; border: 1.5px solid var(--border-light); border-radius: 8px; padding: 14px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--color-navy); }
.cpr-node.bound { border-color: var(--color-orange); background: #FFF8F4; }
.cpr-seg { flex: 0 0 auto; width: 20px; height: 1px; background: var(--border-light); margin: 0 4px; }
@media (max-width: 700px) { .care-path-rail { flex-direction: column; gap: 10px; } .cpr-seg { display: none; } }

/* ============================================================
   IUGO HEALTHCARE - "Preserve the care job. Reconsider the
   implementation." Case-specific components only; reuses
   shared primitives from Platform/Mobile/Data+AI/Axle/Intake
   without modification. Final case-study implementation.
============================================================ */

/* Hero / Problem: capability dependency composition */
.capability-converge { display: flex; align-items: center; gap: 20px; }
.cc-modules { display: flex; flex-direction: column; gap: 8px; }
.cc-module { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 10px 16px; font-size: 12px; font-weight: 600; color: #fff; }
.cc-converge-arrow { color: rgba(255,255,255,.4); flex-shrink: 0; }
.cc-converge-arrow svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.cc-inventory { border: 2px solid var(--color-orange); background: rgba(239,131,84,.12); border-radius: var(--radius-md); padding: 18px 22px; text-align: center; flex-shrink: 0; }
.cc-inventory-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-orange); }
.cc-pen-col { display: flex; flex-direction: column; gap: 8px; }
.cc-pen-badge { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700; color: #fff; }
.cc-pen-letter { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-orange); color: var(--color-orange); display: flex; align-items: center; justify-content: center; font-size: 10.5px; flex-shrink: 0; }
.cc-pilot { border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 10px 16px; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
@media (max-width: 900px) { .capability-converge { flex-direction: column; align-items: stretch; } .cc-converge-arrow { transform: rotate(90deg); align-self: center; } }

/* Light (on-white) variant for Problem section */
.capability-converge.on-light .cc-module { background: var(--color-white); border-color: var(--border-light); color: var(--color-navy); }
.capability-converge.on-light .cc-converge-arrow { color: var(--color-slate); }
.capability-converge.on-light .cc-inventory { background: #FFF8F4; }
.capability-converge.on-light .cc-inventory-label { color: var(--color-orange-text); }

/* P/E/N explainer - three badges */
.pen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pen-card { border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 20px; }
.pen-card.accent { border-color: var(--color-orange); background: #FFF8F4; }
.pen-badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pen-letter { width: 32px; height: 32px; border-radius: 50%; background: var(--color-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.pen-card.accent .pen-letter { background: var(--color-orange); }
.pen-name { font-size: 13.5px; font-weight: 700; color: var(--color-navy); letter-spacing: .02em; }
.pen-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 700px) { .pen-grid { grid-template-columns: 1fr; } }

/* Care path rail (conceptual, not clinical protocol) */
.care-path-rail { display: flex; align-items: center; }
.cpr-node { flex: 1; border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 14px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--color-navy); }
.cpr-seg { flex: 0 0 auto; width: 20px; height: 1px; background: var(--border-light); margin: 0 4px; }
@media (max-width: 700px) { .care-path-rail { flex-direction: column; align-items: stretch; gap: 10px; } .cpr-seg { display: none; } }