/* Proof: client journeys, results wall, before/after. Loaded after jdg-inner.css */

/* journey chapter nav */
.ji-jnav { position: sticky; top: 12px; z-index: 30; margin: 0 auto; width: min(760px, calc(100% - 32px)); background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--ji-line); border-radius: 100px; padding: 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; box-shadow: 0 10px 30px -18px rgba(15, 16, 17, .35); }
.ji-jnav a { text-decoration: none; color: var(--ji-muted); font: 500 13px/1 Inter, sans-serif; padding: 11px 8px; border-radius: 100px; text-align: center; white-space: nowrap; transition: color .3s, background .3s; }
.ji-jnav a b { font: 500 11px/1 Switzer, sans-serif; margin-right: 6px; color: var(--ji-accent); }
.ji-jnav a.is-on { background: var(--ji-ink); color: #fff; }

.ji-chapter-head { display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 28px); margin-bottom: clamp(28px, 4vw, 48px); }
.ji-chapter-num { font: 500 clamp(3.5rem, 8vw, 7.5rem)/.8 Switzer, sans-serif; letter-spacing: -.05em; color: var(--ji-accent); flex: none; }
.ji-chapter-head .ji-h2 { margin: 0; }

/* project phases along the engagement */
.ji-phases { margin-top: clamp(32px, 4vw, 56px); }
.ji-phase-bar { display: flex; min-height: 64px; border-radius: 16px; overflow: hidden; gap: 3px; }
.ji-phase-bar div { flex: 1; background: #e3e3e3; display: flex; align-items: center; padding: 0 16px; font: 500 14px/1.2 Switzer, sans-serif; position: relative; overflow: hidden; }
.ji-phase-bar div::before { content: ""; position: absolute; inset: 0; background: #1d1e20; transform-origin: left; transform: scaleX(var(--p, 1)); }
.ji-phase-bar div:last-child::before { background: var(--ji-accent); }
.ji-phase-bar div span { position: relative; z-index: 1; color: #fff; mix-blend-mode: difference; }
.ji-phase-scale { display: flex; justify-content: space-between; margin-top: 12px; font: 500 12px/1 Inter, sans-serif; color: var(--ji-muted); }

/* before / after */
.ji-ba { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: #ddd; user-select: none; touch-action: pan-y; cursor: ew-resize; }
.ji-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ji-ba .ji-ba-after { clip-path: inset(0 0 0 var(--x, 50%)); }
.ji-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; background: #fff; translate: -1px 0; pointer-events: none; }
.ji-ba-handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ji-ink); display: grid; place-items: center; font-size: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.ji-ba-tag { position: absolute; top: 16px; padding: 8px 12px; border-radius: 40px; background: rgba(15, 16, 17, .6); color: #fff; font: 500 12px/1 Inter, sans-serif; backdrop-filter: blur(8px); pointer-events: none; }
.ji-ba-tag.is-before { left: 16px; }
.ji-ba-tag.is-after { right: 16px; }

/* outcome cards with meters */
.ji-outcome { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ji-outcome > div { background: #fff; border-radius: var(--ji-radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 230px; }
.ji-outcome b { font: 500 clamp(3rem, 5.5vw, 5rem)/.9 Switzer, sans-serif; letter-spacing: -.045em; }
.ji-outcome b sup { font-size: .45em; vertical-align: baseline; }
.ji-outcome p { margin: 0; font: 500 15px/1.45 Inter, sans-serif; color: var(--ji-muted); }
.ji-meter { height: 8px; border-radius: 8px; background: #efefef; overflow: hidden; margin-top: auto; }
.ji-meter i { display: block; height: 100%; width: var(--w, 50%); background: linear-gradient(90deg, var(--ji-ink), var(--ji-accent)); border-radius: 8px; transform-origin: left; }
html.ji-anim .ji-meter i, html.ji-anim .ji-bar i { transform: scaleX(0); }

/* proof wall */
.ji-proof-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.ji-proof-kpis div { background: #fff; border-radius: var(--ji-radius); padding: 26px; }
.ji-proof-kpis b { display: block; font: 500 clamp(2.6rem, 5vw, 4.6rem)/.95 Switzer, sans-serif; letter-spacing: -.04em; }
.ji-proof-kpis b sup { font-size: .45em; vertical-align: baseline; }
.ji-proof-kpis div > span { display: block; margin-top: 12px; font: 500 14px/1.45 Inter, sans-serif; color: var(--ji-muted); }
.ji-cat { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 80px); padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.ji-cat:first-of-type { border-top: 0; }
.ji-cat-sum b { display: block; font: 500 clamp(3rem, 6vw, 5.5rem)/.9 Switzer, sans-serif; letter-spacing: -.045em; color: var(--ji-accent); margin-top: 18px; }
.ji-cat-sum b sup { font-size: .45em; vertical-align: baseline; }
.ji-cat-sum span { display: block; margin-top: 10px; color: #9d9d9d; font: 500 14px/1.45 Inter, sans-serif; max-width: 34ch; }
.ji-bars { display: flex; flex-direction: column; gap: 10px; }
.ji-bar { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 64px; gap: 14px; align-items: center; text-decoration: none; color: #fff; }
.ji-bar span { font: 500 13px/1.3 Inter, sans-serif; color: #bdbdbd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ji-bar em { font-style: normal; font: 500 15px/1 Switzer, sans-serif; text-align: right; }
.ji-bar i { display: block; height: 10px; border-radius: 10px; width: var(--w); background: linear-gradient(90deg, #3a3b3d, var(--ji-accent)); transform-origin: left; }
.ji-bar:hover span { color: #fff; }
.ji-bar-note { font: 500 12px/1.5 Inter, sans-serif; color: #8d8d8d; margin-top: 14px; }

/* moving results wall */
.ji-chips { overflow: hidden; mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); display: grid; gap: 10px; }
.ji-chips-track { display: flex; gap: 10px; width: max-content; animation: ji-marquee 90s linear infinite; }
.ji-chips-track.is-rev { animation-direction: reverse; animation-duration: 100s; }
.ji-chips:hover .ji-chips-track { animation-play-state: paused; }
.ji-chip { display: inline-flex; align-items: baseline; gap: 10px; background: #fff; border: 1px solid var(--ji-line); border-radius: 100px; padding: 12px 18px; text-decoration: none; color: var(--ji-ink); white-space: nowrap; }
.ji-chip b { font: 600 16px/1 Switzer, sans-serif; color: var(--ji-accent); }
.ji-chip span { font: 500 14px/1 Inter, sans-serif; }
.ji-chip small { font: 500 12px/1 Inter, sans-serif; color: var(--ji-muted); }

/* journey cards (home + results) */
.ji-journeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.ji-journey { background: #fff; border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .5s var(--ji-ease); }
.ji-journey:hover { transform: translateY(-6px); }
.ji-journey-img { aspect-ratio: 16 / 10; overflow: hidden; }
.ji-journey-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ji-ease); }
.ji-journey:hover .ji-journey-img img { transform: scale(1.06); }
.ji-journey-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ji-journey-body h3 { margin: 0 0 4px; font: 500 1.35rem/1.2 Switzer, sans-serif; letter-spacing: -.015em; }
.ji-journey-step { display: grid; grid-template-columns: 76px 1fr; gap: 10px; font: 500 14px/1.4 Inter, sans-serif; color: var(--ji-muted); padding-top: 12px; border-top: 1px solid var(--ji-line); }
.ji-journey-step small { font: 500 11px/1.4 Switzer, sans-serif; text-transform: uppercase; color: var(--ji-ink); }
.ji-journey-result { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; gap: 12px; border-top: 1px solid var(--ji-line); }
.ji-journey-result b { font: 500 2.8rem/1 Switzer, sans-serif; letter-spacing: -.04em; color: var(--ji-accent); flex: none; }
.ji-journey-result span { font: 500 14px/1.35 Inter, sans-serif; color: var(--ji-ink); }

@media (max-width: 991px) {
  .ji-proof-kpis { grid-template-columns: 1fr 1fr; }
  .ji-cat { grid-template-columns: 1fr; }
  .ji-journeys { grid-template-columns: 1fr; }
  .ji-jnav a { font-size: 12px; padding: 10px 4px; }
  .ji-jnav a b { display: none; }
}
@media (max-width: 600px) {
  .ji-bar { grid-template-columns: 104px 1fr 50px; gap: 10px; }
  .ji-phase-bar { flex-direction: column; }
  .ji-phase-bar div { padding: 16px; }
  .ji-proof-kpis div { padding: 20px; }
  .ji-chapter-head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .ji-chips-track { animation: none; } }

/* numbered lists on light sections */
.ji-sec:not(.ji-dark) .ji-challenges li { border-top-color: var(--ji-line); }

.ji-proof-kpis b span { font: inherit; letter-spacing: inherit; display: inline; margin: 0; color: inherit; }