:root {
  --ink: #102236;
  --muted: #536579;
  --paper: #f7f9fc;
  --surface: #ffffff;
  --line: #dbe4ee;
  --navy: #0b1f33;
  --teal: #007c78;
  --teal-light: #d9f3ef;
  --amber: #d97706;
  --violet: #635bdb;
  --shadow: 0 18px 55px rgba(15, 35, 55, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: fixed; left: -999px; top: 8px; z-index: 100; background: white; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { left: 8px; }

/* Navigation */
.site-nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(219,228,238,.85); background: rgba(247,249,252,.88); backdrop-filter: blur(16px); }
.nav-row { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; flex-direction: column; font-size: 1.06rem; line-height: 1.12; font-weight: 750; letter-spacing: -.03em; }
.brand small { margin-top: 4px; color: var(--teal); font-size: .64rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.nav-links { display: flex; gap: 22px; align-items: center; font-size: .83rem; font-weight: 650; color: #405267; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--teal); }
body:has(.case-hero.adoption, .case-hero.retention, .case-hero.ai, .case-hero.delivery) .nav-links a[href="index.html#work"],
body:has(.case-hero.adoption, .case-hero.retention, .case-hero.ai, .case-hero.delivery) #mobile-menu a[href="index.html#work"] { font-size: 0; }
body:has(.case-hero.adoption, .case-hero.retention, .case-hero.ai, .case-hero.delivery) .nav-links a[href="index.html#work"]::after,
body:has(.case-hero.adoption, .case-hero.retention, .case-hero.ai, .case-hero.delivery) #mobile-menu a[href="index.html#work"]::after { content: "All Case Studies"; font-size: .83rem; }
.theme-toggle, .menu-toggle { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.theme-toggle svg { width: 17px; height: 17px; }
.menu-toggle { display: none; border-radius: 9px; }
.mobile-menu { display: none; padding: 0 0 16px; }
.mobile-menu:not(.hidden) { display: block; }
.mobile-menu a { display: block; padding: 10px 0; font-size: .92rem; font-weight: 650; border-bottom: 1px solid var(--line); }
.hidden { display: none !important; }

/* Shared type and controls */
.eyebrow { margin: 0 0 14px; color: var(--teal); font-size: .71rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); max-width: 900px; margin-bottom: 22px; letter-spacing: -.07em; line-height: .98; }
.hero-title--compact { font-size: clamp(2.3rem, 4.9vw, 4.45rem); }
.hero-title--intro { margin-bottom: 30px; font-size: clamp(2.6rem, 4.35vw, 4.1rem); }
.hero-intro { max-width: 760px; margin: 0 0 21px; font-size: clamp(1.5rem, 2.8vw, 2.45rem); font-weight: 750; letter-spacing: -.055em; line-height: 1.08; background: linear-gradient(100deg, #079e99, #5264da); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: clamp(1.85rem, 3.5vw, 3.1rem); margin-bottom: 15px; letter-spacing: -.055em; line-height: 1.03; }
h3 { letter-spacing: -.025em; line-height: 1.18; }
.lede { max-width: 720px; color: var(--muted); font-size: clamp(1.04rem, 1.7vw, 1.27rem); }
.hero .lede { color: var(--ink); }
.hero .lede,
.proof-label,
.card-body p,
.experience-copy p,
.about-copy p,
.credential-list p,
.contact .lede { font-weight: 500; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 0 19px; border: 1px solid var(--ink); border-radius: 7px; font-size: .86rem; font-weight: 750; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,35,55,.15); }
.button-primary { background: var(--navy); color: white; }
.hero .button-primary { border-color: var(--teal); background: var(--teal); }
.button-quiet { border-color: var(--line); color: var(--ink); background: white; }
.section { padding: 112px 0; }
#work { padding-top: 76px; padding-bottom: 52px; }
#experience { padding-top: 52px; padding-bottom: 52px; }
#about { padding-top: 52px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 46px; }
.section-head--center { align-items: center; justify-content: center; text-align: center; }
.section-head--compact { margin-bottom: 28px; }
.section-head .lede { max-width: 520px; margin-bottom: 0; font-size: 1rem; }
.surface { background: var(--surface); }
.rule { height: 1px; background: var(--line); }

/* Home */
.hero { overflow: hidden; position: relative; padding: 106px 0 74px; background: radial-gradient(circle at 90% 10%, rgba(0,124,120,.13), transparent 22rem), radial-gradient(circle at 16% 90%, rgba(99,91,219,.10), transparent 25rem), var(--paper); }
.hero--intro { display: flex; align-items: center; min-height: calc(100svh - 70px); padding: 88px 0; }
.hero::before { position: absolute; content: ""; inset: 0; pointer-events: none; opacity: .45; background-image: linear-gradient(rgba(16,34,54,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(16,34,54,.06) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
.hero .shell { position: relative; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: 72px; align-items: end; }
.hero-evidence { padding: 78px 0 72px; }
.hero-evidence-grid { display: block; }
.hero-evidence .hero-statement { max-width: 920px; margin: 0 auto; }
.hero-evidence .lede { max-width: 820px; color: var(--ink); }
.hero-evidence .hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; }
.hero-evidence .button-primary { border-color: var(--teal); background: var(--teal); }
.hero-statement { max-width: 790px; }
.hero-proof { display: grid; gap: 12px; }
.proof-card { padding: 18px 19px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.78); box-shadow: var(--shadow); }
.proof-number { display: block; color: var(--teal); font-size: 1.65rem; font-weight: 800; letter-spacing: -.05em; }
.proof-label { color: var(--ink); font-size: .78rem; font-weight: 650; }
.decision-loop { margin-top: 82px; padding: 19px 21px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.68); }
.loop-step { min-width: 0; padding-right: 10px; border-right: 1px solid var(--line); }
.loop-step:last-child { border-right: 0; }
.loop-index { display: block; margin-bottom: 6px; color: var(--teal); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.loop-step strong { display: block; font-size: 1.02rem; }
.loop-step span:last-child { display: block; margin-top: 3px; color: var(--ink); font-size: .86rem; font-weight: 500; }

/* Work */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.work-card { display: flex; flex-direction: column; overflow: hidden; min-height: 450px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 20px rgba(15,35,55,.08); transition: transform .25s, box-shadow .25s; }
.work-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.work-art { min-height: 146px; padding: 22px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.work-art::after { display: none; }
.work-icon { width: 54px; height: 54px; color: rgba(255,255,255,.88); }
.art-retention { background: linear-gradient(140deg, #10b981, #059669); }
.art-ai { background: linear-gradient(140deg, #4c3bb7, #7c6ee6); }
.art-adoption { background: linear-gradient(140deg, #80461f, #c57a36); }
.art-delivery { background: linear-gradient(140deg, #17395c, #2d628f); }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 26px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.tag { border: 1px solid #d8e4ec; border-radius: 99px; padding: 4px 8px; background: #edf3f6; color: #466078; font-size: .67rem; font-weight: 750; letter-spacing: .02em; }
.work-card--retention .tag { border-color: #9de3bd; background: #e7f8ef; color: #057a55; }
.work-card--ai .tag { border-color: #d5c2ff; background: #f1ebff; color: #6431d8; }
.work-card--adoption .tag { border-color: #e7c5ab; background: #fbf0e8; color: #93430d; }
.work-card--delivery .tag { border-color: #b9d7ee; background: #e8f2fa; color: #1f5d8a; }
.card-body h3 { margin-bottom: 10px; font-size: 1.35rem; }
.card-body p { color: var(--ink); font-size: .91rem; }
.case-link { display: flex; align-self: stretch; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin: auto 0 0; padding: 0 18px; border-radius: 9px; color: white; text-align: center; font-size: .82rem; font-weight: 800; transition: filter .2s, transform .2s; }
.case-link--retention { background: #059669; }
.case-link--ai { background: #6938d5; }
.case-link--adoption { background: #9a4812; }
.case-link--delivery { background: #24618f; }
.case-link::after { content: "→"; transition: transform .2s; }
.work-card:hover .case-link { filter: brightness(1.07); }
.work-card:hover .case-link::after { transform: translateX(4px); }

/* Evidence / experience */
.signal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.signal { padding: 26px; border-left: 3px solid var(--teal); background: #f1f6f7; }
.signal:nth-child(2) { border-left-color: var(--violet); background: #f3f2fc; }
.signal:nth-child(3) { border-left-color: var(--amber); background: #fcf5ea; }
.signal strong { display: block; margin-bottom: 8px; font-size: 1.1rem; }
.signal p { margin: 0; color: var(--ink); font-size: .88rem; }
.experience-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.experience-row { display: grid; grid-template-columns: 140px 1fr 160px; gap: 25px; padding: 27px 0; border-bottom: 1px solid var(--line); }
.experience-row--group { grid-template-columns: 140px 1fr; }
.experience-date { color: var(--teal); font-size: .84rem; font-weight: 800; letter-spacing: .04em; }
.experience-group > h3 { margin: 0 0 10px; font-size: 1.13rem; }
.experience-project-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 25px; }
.experience-project-row + .experience-project-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.experience-copy h3 { margin-bottom: 5px; font-size: 1.13rem; }
.experience-copy p { margin: 0; color: var(--ink); font-size: .88rem; }
.experience-copy .experience-project { margin: 0 0 7px; color: var(--ink); font-size: .91rem; font-weight: 650; }
.experience-result { color: var(--ink); font-size: .8rem; font-weight: 700; text-align: right; }

/* Contact */
.about-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: start; }
.about-aside { padding: 26px; border-radius: 10px; background: var(--navy); color: white; }
.about-aside p { margin: 0; color: #c7d5e4; font-size: .89rem; }
.about-aside strong { display: block; margin-bottom: 13px; font-size: 1.28rem; line-height: 1.15; }
.about-copy p { max-width: 700px; color: var(--ink); font-size: 1rem; }
.profile-grid { display: grid; grid-template-columns: minmax(230px, .57fr) minmax(0, 1.43fr); gap: 72px; align-items: center; }
.profile-photo-wrap { width: min(100%, 310px); justify-self: center; padding: 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.profile-photo { display: block; width: 100%; max-width: 100%; aspect-ratio: 1 / 1; border-radius: 13px; object-fit: cover; object-position: center; }
.credentials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 58px; margin-top: 76px; padding-top: 50px; border-top: 1px solid var(--line); }
.credential-heading { margin: 0 0 26px; color: var(--teal); font-size: 1.14rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.credential-block h3 { margin-bottom: 21px; font-size: 1.16rem; }
.credential-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.credential-list li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.credential-date { color: var(--teal); font-size: .78rem; font-weight: 800; letter-spacing: .03em; line-height: 1.35; }
.credential-list strong { display: block; font-size: .98rem; line-height: 1.35; }
.credential-list p { margin: 3px 0 0; color: var(--ink); font-size: .88rem; line-height: 1.4; }
.credential-list--timeline { margin: 0 0 0 13px; padding-left: 24px; border-top: 0; border-left: 2px solid var(--line); }
.credential-list--timeline li { position: relative; display: block; padding: 0 0 27px; border-bottom: 0; }
.credential-list--timeline li:last-child { padding-bottom: 0; }
.credential-list--timeline li::before { content: ""; position: absolute; top: 5px; left: -30px; width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, var(--violet), var(--teal)); box-shadow: 0 0 0 3px var(--surface); }
.credential-list--timeline .credential-date { display: block; margin-bottom: 6px; font-size: .87rem; }
.credential-list--timeline li:nth-child(2) .credential-date { color: var(--teal); }
.credential-list--timeline strong { font-size: 1.05rem; }
.credential-list--timeline p { font-size: .92rem; }
.contact { text-align: center; background: var(--paper); color: var(--ink); }
.contact .eyebrow { color: var(--teal); }
.contact h2 { max-width: 640px; margin: 0 auto 16px; font-size: clamp(2rem, 3.1vw, 2.7rem); }
.contact .lede { max-width: 680px; margin: 0 auto 34px; color: var(--ink); font-size: clamp(1rem, 1.45vw, 1.12rem); }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 34px; }
.contact .button { min-height: 52px; gap: 9px; padding: 0 28px; border-radius: 999px; }
.contact .button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.contact .button-primary { border-color: transparent; background: linear-gradient(100deg, #14b8a6, #4f46e5); color: white; box-shadow: 0 10px 20px rgba(79, 70, 229, .2); }
.contact .button-quiet { border: 2px solid #2563eb; background: transparent; color: var(--ink); }
.contact-note { margin: 0; font-weight: 750; }
.footer { padding: 28px 0; background: #071727; color: #a6bdcf; font-size: .78rem; }
.footer-row { display: flex; justify-content: center; gap: 20px; text-align: center; }

/* Case-study templates */
.case-hero { padding: 86px 0 57px; color: white; background: var(--navy); }
.case-hero.retention { --retention-accent: #047857; color: white; background: linear-gradient(140deg, #10b981, #059669); }
.case-hero.retention + .case-body { --retention-accent: #047857; }
.case-hero.retention h1 { max-width: none; font-size: clamp(2.35rem, 3.8vw, 3.35rem); }
.case-hero.retention .eyebrow { display: inline-flex; margin-bottom: 16px; padding: 7px 11px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: .74rem; }
.case-hero.retention .lede { max-width: 980px; color: rgba(255,255,255,.88); font-weight: 600; }
.case-hero.ai { --ai-accent: #047857; --teal: var(--ai-accent); background: linear-gradient(140deg,#302862,#6656c9); }
.case-hero.ai + .case-body { --teal: #047857; }
.case-hero.ai h1 { max-width: none; font-size: clamp(2.35rem, 3.8vw, 3.35rem); }
.case-hero.ai .eyebrow { display: inline-flex; margin-bottom: 16px; padding: 7px 11px; border-radius: 999px; background: #eeebff; color: #302862; font-size: .74rem; }
.case-hero.adoption { background: linear-gradient(140deg,#512a19,#a46028); }
.case-hero.adoption .eyebrow { display: inline-flex; margin-bottom: 16px; padding: 7px 11px; border-radius: 999px; background: #fff2e8; color: #6b3417; font-size: .74rem; }
.case-hero.delivery { background: linear-gradient(140deg,#102b45,#28618e); }
.case-hero.delivery .eyebrow { display: inline-flex; margin-bottom: 16px; padding: 7px 11px; border-radius: 999px; background: #edf7ff; color: #123a5a; font-size: .74rem; }
.case-hero.delivery h1 { max-width: none; font-size: clamp(2.2rem, 3.55vw, 3.2rem); }
.case-hero .eyebrow { color: #a7efe5; }
.case-hero h1 { max-width: 930px; font-size: clamp(2.35rem,5.1vw,4.6rem); }
.case-hero .lede { color: rgba(255,255,255,.82); }
.case-meta { display: flex; flex-wrap: wrap; gap: 9px 24px; margin-top: 34px; color: rgba(255,255,255,.82); font-size: .8rem; font-weight: 650; }
.case-meta strong { color: white; }
.case-meta--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 920px; }
.case-meta--cards-four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
.case-meta-card { display: grid; align-content: center; min-height: 104px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.68); border-radius: 14px; background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 10px 24px rgba(54, 24, 28, .12); }
.case-meta-card span { margin-bottom: 7px; color: var(--teal); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.case-meta-card strong { color: var(--ink); font-size: 1.02rem; line-height: 1.25; }
.case-key-finding { margin: 16px 0 0; padding: 15px 20px; border: 1px solid rgba(255,255,255,.68); border-left: 4px solid #047857; border-radius: 12px; background: #f8fafc; color: #102236; font-size: .98rem; font-weight: 650; line-height: 1.55; }
.case-key-finding strong { color: #047857; }
.case-body { padding: 76px 0 110px; }
.case-layout { display: grid; grid-template-columns: 230px 1fr; gap: 70px; }
.case-toc { position: sticky; top: 100px; height: max-content; display: grid; gap: 8px; padding-left: 15px; border-left: 1px solid var(--line); }
.case-toc a { color: var(--muted); font-size: .78rem; font-weight: 700; }
.case-toc a:hover { color: var(--teal); }
.case-hero.retention + .case-body .case-toc a { color: #3d5268; font-size: .86rem; font-weight: 800; line-height: 1.35; }
.case-hero.retention + .case-body .case-toc a:hover,
.case-hero.retention + .case-body .case-toc a:focus-visible { color: var(--retention-accent); }
.case-hero.ai + .case-body .case-toc a { font-size: .86rem; font-weight: 800; line-height: 1.35; }
.case-content { max-width: 800px; }
.case-section { margin-bottom: 72px; scroll-margin-top: 100px; }
.case-section h2 { font-size: clamp(1.65rem, 3vw,2.45rem); }
.case-hero.retention + .case-body .case-section h2 { font-size: clamp(1.6rem, 2.85vw, 2.35rem); }
.case-hero.retention + .case-body #evidence h2,
.case-hero.retention + .case-body #strategy h2,
.case-hero.retention + .case-body #metrics h2 { font-size: clamp(1.5rem, 2.15vw, 1.82rem); letter-spacing: -.06em; }
.case-hero.ai + .case-body #metrics h2 { font-size: clamp(1.5rem, 2.15vw, 1.82rem); letter-spacing: -.06em; }
.case-hero.adoption + .case-body #decision h2,
.case-hero.adoption + .case-body #evidence h2,
.case-hero.adoption + .case-body #strategy h2,
.case-hero.adoption + .case-body #metrics h2,
.case-hero.adoption + .case-body #next h2 { font-size: clamp(1.59rem, 2.96vw, 2.37rem); }
.case-hero.adoption + .case-body #next h2 { font-size: clamp(1.48rem, 2vw, 1.72rem); letter-spacing: -.055em; }
.case-hero.delivery + .case-body #jumla h2 { font-size: clamp(1.45rem, 2vw, 1.72rem); letter-spacing: -.055em; }
.case-hero.delivery + .case-body #rasuwa-build h2 { font-size: clamp(1.45rem, 2vw, 1.72rem); letter-spacing: -.055em; }
.case-hero.delivery + .case-body #rasuwa-handoff h2 { font-size: clamp(1.45rem, 2vw, 1.72rem); letter-spacing: -.055em; }
.case-hero.delivery + .case-body #learning h2 { font-size: clamp(1.48rem, 2vw, 1.78rem); letter-spacing: -.06em; }
.case-hero.delivery + .case-body #context h2 { font-size: clamp(1.6rem, 2.45vw, 2rem); letter-spacing: -.06em; }
.case-hero.delivery + .case-body #context > p:not(.eyebrow) { font-size: .94rem; }
@media (min-width: 720px) {
  .case-hero.delivery + .case-body #context .step:nth-child(4) p { font-size: .88rem; letter-spacing: -.02em; white-space: nowrap; }
}
.case-hero.retention + .case-body .case-section > .eyebrow { color: var(--retention-accent); font-size: .78rem; }
.case-hero.retention + .case-body #decision > p:not(.eyebrow) { color: #071727; font-weight: 500; }
.case-hero.retention + .case-body .case-section > p:not(.eyebrow),
.case-hero.retention + .case-body .decision p:not(.decision-label),
.case-hero.retention + .case-body .step p,
.case-hero.retention + .case-body .callout p,
.case-hero.retention + .case-body .metric-table td { color: #071727; font-weight: 500; }
.case-section > p:not(.eyebrow) { color: var(--ink); font-size: 1rem; font-weight: 500; }
.callout { margin: 25px 0; padding: 23px 25px; border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; background: #eef7f6; }
.callout strong { display: block; margin-bottom: 5px; }
.callout p { margin: 0; color: var(--ink); font-size: .96rem; font-weight: 500; line-height: 1.58; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 25px 0; }
.fact { padding: 17px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.fact strong { display: block; color: var(--teal); font-size: 1.45rem; letter-spacing: -.05em; }
.fact span { display: block; color: var(--ink); font-size: .84rem; font-weight: 700; line-height: 1.45; }
.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0; }
.decision-grid--single { grid-template-columns: 1fr; }
.decision { padding: 22px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.decision-label { margin-bottom: 10px; color: var(--teal); font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.decision h3 { margin-bottom: 8px; font-size: 1.02rem; }
.decision p:not(.decision-label) { margin: 0; color: var(--ink); font-size: .94rem; font-weight: 500; line-height: 1.55; }
.steps { display: grid; gap: 0; margin: 25px 0; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.step-num { color: var(--teal); font-size: .78rem; font-weight: 800; }
.step strong { display: block; margin-bottom: 4px; }
.step p { margin: 0; color: var(--ink); font-size: .95rem; font-weight: 500; line-height: 1.58; }
.case-hero.retention + .case-body .case-section > p:not(.eyebrow),
.case-hero.retention + .case-body .decision p:not(.decision-label),
.case-hero.retention + .case-body .callout p { color: var(--ink); }
.case-hero.retention + .case-body .decision p:not(.decision-label) { font-size: .94rem; line-height: 1.55; }
.case-hero.retention + .case-body .fact span { color: var(--ink); font-size: .84rem; font-weight: 700; line-height: 1.45; }
.case-hero.retention .case-meta-card span,
.case-hero.retention + .case-body .fact strong,
.case-hero.retention + .case-body .decision-label { color: var(--retention-accent); }
.case-hero.retention + .case-body .callout { border-left-color: var(--retention-accent); }
.case-hero.retention + .case-body .metric-table th,
.case-hero.retention + .case-body .case-next a { color: var(--retention-accent); }
.case-hero.retention + .case-body .steps { gap: 13px; border-top: 0; }
.case-hero.retention + .case-body .step { grid-template-columns: 42px 1fr; align-items: start; gap: 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 7px 18px rgba(15,35,55,.06); }
.case-hero.retention + .case-body .step-num { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #8dd6bc; border-radius: 999px; background: #ecfdf5; color: var(--retention-accent); font-size: .74rem; }
.case-hero.retention + .case-body .step strong { margin-bottom: 6px; color: var(--ink); font-size: 1rem; }
.case-hero.retention + .case-body .step p { color: var(--ink); font-size: 1rem; line-height: 1.62; }
.metric-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 25px 0; }
.metric-table th, .metric-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.metric-table td { font-weight: 500; }
.metric-table th { color: var(--teal); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.case-visual { margin: 30px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 10px 28px rgba(15,35,55,.06); }
.case-visual img { display: block; width: 100%; height: auto; }
.case-visual figcaption { padding: 12px 15px; border-top: 1px solid var(--line); color: var(--ink); font-size: .76rem; font-weight: 500; line-height: 1.45; }
.placeholder-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin: 28px 0; }
.photo-placeholder { min-height: 220px; display: grid; place-items: center; padding: 25px; border: 1.5px dashed #8ca0b3; border-radius: 9px; background: repeating-linear-gradient(-45deg,#f5f8fa 0,#f5f8fa 10px,#eef3f6 10px,#eef3f6 20px); text-align: center; color: #4d6579; }
.photo-placeholder span { display: block; color: var(--teal); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.photo-placeholder strong { display: block; max-width: 220px; margin-top: 7px; font-size: .88rem; line-height: 1.28; }
.case-next { display: flex; justify-content: space-between; gap: 25px; margin-top: 70px; padding-top: 25px; border-top: 1px solid var(--line); }
.case-next a { color: var(--teal); font-size: .84rem; font-weight: 800; }

/* Community-delivery photo narrative */
.nav-actions { display: flex; gap: 9px; }
.community-story-grid { display: grid; gap: 14px; margin: 30px 0; }
.community-story-grid--three { grid-template-columns: repeat(3, 1fr); }
.community-story-grid--two { grid-template-columns: repeat(2, 1fr); }
.community-figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(15,35,55,.06); }
.community-figure img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; background: #e9eff4; }
.community-figure figcaption { min-height: 89px; padding: 13px 15px 15px; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.community-figure figcaption span { display: block; margin-bottom: 5px; color: var(--teal); font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.case-hero.delivery + .case-body #jumla .community-story-grid--three .community-figure figcaption,
.case-hero.delivery + .case-body #jumla .community-figure--outcome figcaption { color: var(--ink); font-weight: 600; }
.case-hero.delivery + .case-body #jumla .community-figure--outcome figcaption { font-size: .82rem; }
.case-hero.delivery + .case-body #jumla .community-story-grid--three .community-figure figcaption { min-height: 0; padding: 12px 15px 9px; }
.case-hero.delivery + .case-body #rasuwa-build .community-figure figcaption { color: var(--ink); font-weight: 600; }
.case-hero.delivery + .case-body #rasuwa-build .community-figure figcaption { min-height: 0; padding: 12px 15px 9px; }
.case-hero.delivery + .case-body #rasuwa-handoff .community-figure figcaption { color: var(--ink); font-weight: 600; }
.community-figure--outcome { margin: 30px 0; }
.community-figure--outcome img { max-height: 490px; aspect-ratio: 16 / 8; object-fit: contain; background: #e9eff4; }
.community-figure--outcome figcaption { min-height: 0; }
.build-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 30px 0; }
.build-stage { position: relative; }
.build-stage img { aspect-ratio: 3 / 4; }
.build-stage figcaption { min-height: 96px; }
.facts--two { grid-template-columns: repeat(2, 1fr); max-width: 530px; }

/* Evidence graphics retained from the original research portfolio. Each visual is
   placed where it supports the product decision rather than the methodology alone. */
.case-hero.retention + .case-body #strategy::before,
.case-hero.retention + .case-body #next::before,
.case-hero.ai + .case-body #evidence::after,
.case-hero.ai + .case-body #strategy::before,
.case-hero.adoption + .case-body #evidence::before,
.case-hero.adoption + .case-body #evidence::after,
.case-hero.adoption + .case-body #strategy::before {
  content: "";
  display: block;
  margin: 30px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: 0 10px 28px rgba(15,35,55,.06);
}
.case-hero.retention + .case-body #strategy::before { aspect-ratio: 3.8 / 1; background-image: url('../../images/user-retention_images/Image3.png'); background-position: top center; background-size: 100% auto; }
.case-hero.retention + .case-body #strategy::before { margin-bottom: 54px; }
.case-hero.retention + .case-body #next::before { min-height: 430px; background-image: url('../../images/user-retention_images/Image1-mobile.png'); }
.case-hero.ai + .case-body #evidence::after { aspect-ratio: 1.37 / 1; background-image: url('../../images/trust-ai-images/image1.png'); }
.case-hero.ai + .case-body #strategy::before { min-height: 350px; background-image: url('../../images/trust-ai-images/image2-human-55-updated.svg'); }
.case-hero.adoption + .case-body #evidence::before { aspect-ratio: 1.78 / 1; background-image: url('../../images/brand-nft-images/image1.png'); }
.case-hero.adoption + .case-body #evidence::after { aspect-ratio: 1.78 / 1; background-image: url('../../images/brand-nft-images/image2.png'); }
.case-hero.adoption + .case-body #strategy::before { aspect-ratio: 1.78 / 1; background-image: url('../../images/brand-nft-images/image5.png'); }

/* Motion and dark mode */
.fade-in { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.fade-in.visible { opacity: 1; transform: none; }
.dark body { color: #e6edf5; background: #0b1623; }
.dark .site-nav { background: rgba(11,22,35,.87); border-color: #233447; }
.dark .nav-links, .dark .lede, .dark .proof-label, .dark .card-body p, .dark .experience-copy p, .dark .signal p, .dark .about-copy p, .dark .case-section > p:not(.eyebrow), .dark .decision p:not(.decision-label), .dark .step p, .dark .fact span { color: #aebed0; }
.dark .theme-toggle, .dark .menu-toggle, .dark .button-quiet, .dark .work-card, .dark .fact, .dark .decision { color: #e6edf5; background: #111f2e; border-color: #294056; }
.dark .profile-photo-wrap { border-color: #294056; background: #111f2e; }
.dark .hero { background: radial-gradient(circle at 90% 10%, rgba(0,124,120,.18), transparent 22rem), radial-gradient(circle at 16% 90%, rgba(99,91,219,.16), transparent 25rem), #0b1623; }
.dark .hero::before { opacity: .25; }
.dark .proof-card, .dark .decision-loop { border-color: #294056; background: rgba(17,31,46,.8); }
.dark .loop-step { border-color: #294056; }
.dark .surface { background: #0e1b2a; }
.dark .signal { background: #102928; }
.dark .signal:nth-child(2) { background: #201d3d; }
.dark .signal:nth-child(3) { background: #332718; }
.dark .section { background-color: inherit; }
.dark .callout { background: #102b2a; }
.dark .callout p { color: #c0d7d5; }
.dark .photo-placeholder { border-color: #54718a; background: repeating-linear-gradient(-45deg,#102030 0,#102030 10px,#132737 10px,#132737 20px); color: #aebed0; }
.dark .case-visual { border-color: #294056; background: #111f2e; }
.dark .case-visual figcaption { color: #aebed0; }
.dark .community-figure { border-color: #294056; background: #111f2e; }
.dark .community-figure img { background: #152638; }
.dark .rule, .dark .experience-list, .dark .experience-row, .dark .case-toc, .dark .steps, .dark .step, .dark .metric-table th, .dark .metric-table td, .dark .case-next { border-color: #294056; }
.dark .case-body { background: #0b1623; }
.dark .case-hero.retention + .case-body .case-section > p:not(.eyebrow),
.dark .case-hero.retention + .case-body .decision p:not(.decision-label),
.dark .case-hero.retention + .case-body .callout p,
.dark .case-hero.retention + .case-body .step p,
.dark .case-hero.retention + .case-body .step strong,
.dark .case-hero.retention + .case-body .fact span,
.dark .case-hero.retention + .case-body .metric-table td { color: #e6edf5; }
.dark .case-hero.retention + .case-body .step { border-color: #294056; background: #111f2e; box-shadow: none; }
.dark .case-hero.retention + .case-body .step-num { border-color: #2c877f; background: #102928; }
.dark .case-hero.retention + .case-body #strategy::before,
.dark .case-hero.retention + .case-body #next::before,
.dark .case-hero.ai + .case-body #evidence::after,
.dark .case-hero.ai + .case-body #strategy::before,
.dark .case-hero.adoption + .case-body #evidence::before,
.dark .case-hero.adoption + .case-body #evidence::after,
.dark .case-hero.adoption + .case-body #strategy::before { border-color: #294056; background-color: #111f2e; }

@media (max-width: 820px) {
  .shell { width: min(100% - 30px, 1160px); }
  .nav-links { display: none; }
  .menu-toggle { display: inline-grid; }
  .hero { padding-top: 76px; }
  .hero-grid, .about-grid, .profile-grid, .case-layout { grid-template-columns: 1fr; gap: 35px; }
  .profile-photo-wrap { justify-self: start; }
  .credentials-grid { gap: 36px; }
  .hero-proof { grid-template-columns: repeat(3, 1fr); }
  .case-meta--cards-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-loop { margin-top: 50px; }
  .section { padding: 78px 0; }
  #work { padding-bottom: 42px; }
  #experience { padding-top: 42px; padding-bottom: 42px; }
  #about { padding-top: 42px; }
  .case-toc { display: none; }
  .case-body { padding: 55px 0 80px; }
  .experience-row { grid-template-columns: 120px 1fr; }
  .experience-result { grid-column: 2; text-align: left; }
  .build-timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 821px) {
  .mobile-menu:not(.hidden) { display: none; }
}
@media (max-width: 600px) {
  h1 { font-size: 2.7rem; }
  .hero-proof, .work-grid, .signal-grid, .facts, .decision-grid, .placeholder-grid, .community-story-grid--three, .community-story-grid--two, .credentials-grid { grid-template-columns: 1fr; }
  .hero-evidence .hero-proof { grid-template-columns: 1fr; }
  .case-meta--cards { grid-template-columns: 1fr; }
  .credentials-grid { margin-top: 52px; padding-top: 38px; }
  .build-timeline { grid-template-columns: 1fr; }
  .build-stage img { aspect-ratio: 4 / 3; }
  .decision-loop { grid-template-columns: 1fr 1fr; }
  .loop-step:nth-child(2) { border-right: 0; }
  .loop-step:nth-child(-n+2) { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .loop-step:nth-child(n+3) { padding-top: 12px; }
  .section-head { display: block; }
  .section-head .lede { margin-top: 14px; }
  .experience-row { grid-template-columns: 1fr; gap: 8px; }
  .experience-project-row { grid-template-columns: 1fr; gap: 8px; }
  .experience-result { grid-column: 1; }
  .footer-row, .case-next { flex-direction: column; }
}