.approach-layout {
  display: grid;
  gap: 48px;
  align-items: start;
}

.approach-heading-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.method-connections { max-width: 380px; width: 100%; justify-self: end; }
.method-map { position: relative; height: 154px; }
.method-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.method-map path { fill: none; stroke: #c8c8c4; stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.method-map a { position: absolute; transform: translate(-50%, -50%); padding: 8px 12px; background: var(--pale); color: var(--accent-text); font-size: 1rem; font-weight: 650; line-height: 1.4; text-decoration: none; }
.method-map a:hover { text-decoration: underline; }
.method-find { left: 20%; top: 18%; }
.method-shape { left: 80%; top: 18%; }
.method-assemble { left: 20%; top: 82%; }
.method-commit { left: 80%; top: 82%; }
.method-connections > p { font-size: .9375rem; color: var(--muted); margin-top: 12px; line-height: 1.55; }
.method-content { min-width: 0; }
.approach-signals { margin-top: 42px; padding-top: 26px; border-top: 1px solid #ccc; }
.approach-signals > .eyebrow { margin-bottom: 16px; }
.approach-signals figure { margin: 0; }
.approach-signals-visual { position: relative; background: #0b2135; overflow: hidden; }
.approach-signals-visual img { width: 100%; height: auto; aspect-ratio: 2.2 / 1; object-fit: cover; object-position: center 58%; }
.approach-signals-visual h3 { position: absolute; top: 22px; left: 24px; right: 20px; color: white; font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.05; letter-spacing: -.035em; text-shadow: 0 1px 12px #08213a55; }
.approach-signals-visual h3 span { color: #f39a56; }
.approach-signals figcaption { font-size: .8125rem; color: var(--muted); line-height: 1.5; margin-top: 8px; }
.infratech-stack { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin: 22px 0 0; }
.infratech-stack > div { position: relative; min-width: 0; }
.infratech-stack > div + div::before { content: '→'; position: absolute; left: -20px; color: var(--accent-text); }
.infratech-stack dt { font-size: .9375rem; font-weight: 650; }
.infratech-stack dd { margin: 5px 0 0; font-size: .875rem; line-height: 1.45; color: var(--muted); }
.approach-signals .text-link { margin-top: 20px; }

.opportunity-panel {
  width: 100%;
  max-width: 680px;
  padding: 26px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}

.opportunity-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 16px;
}

.opportunity-panel .eyebrow {
  font-size: .875rem;
  letter-spacing: .065em;
}

.opportunity-example {
  margin: 0;
  color: var(--muted);
  font-size: .875rem;
}

.opportunity-panel h3 {
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.opportunity-intro {
  color: var(--muted);
  margin-top: 8px;
}

.opportunity-graph {
  position: relative;
  height: 174px;
  max-width: 440px;
  margin: 16px auto 4px;
}

.opportunity-graph svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.opportunity-edge,
.opportunity-spoke {
  fill: none;
  stroke: #d5d5d2;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.opportunity-edge.is-active,
.opportunity-spoke.is-active {
  stroke: #bc7b13;
  stroke-width: 2px;
}

.opportunity-domain {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(108px, 34%, 140px);
  min-height: 48px;
  padding: 10px 6px;
  border: 1px solid #c9c9c6;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
}

.domain-technology { left: 50%; top: 15%; }
.domain-infrastructure { left: 24%; top: 83%; }
.domain-investment { left: 76%; top: 83%; }

.opportunity-domain.is-active {
  color: #332409;
  background: #ffe2a1;
  border-color: #bc7b13;
}

.opportunity-domain.is-active::after {
  position: absolute;
  content: "";
  height: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  background: #bc7b13;
}

.opportunity-domain:hover { border-color: #bc7b13; }
.opportunity-domain:focus-visible,
.opportunity-toggle:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.opportunity-domain:disabled { cursor: default; }

.opportunity-proof {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  padding: 8px 10px;
  background: #fff;
  color: var(--accent-text);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.opportunity-proof-caption {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -.025em;
}

.opportunity-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
  color: var(--muted);
  font-size: .875rem;
}

.opportunity-toggle {
  min-height: 36px;
  min-width: 64px;
  padding: 4px 8px;
  border: 1px solid #dededb;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.opportunity-toggle:hover { background: var(--pale); }
.opportunity-toggle[hidden] { display: none; }

.opportunity-pathway {
  padding: 16px 0;
  border-block: 1px solid var(--line);
}

.opportunity-caption {
  color: var(--muted);
  font-size: .875rem;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.opportunity-pathway ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.45;
}

.opportunity-pathway li { position: relative; }
.opportunity-pathway li + li::before {
  content: "→";
  color: var(--accent-text);
  position: absolute;
  left: -23px;
}

.opportunity-detail { margin-top: 18px; }
.opportunity-detail h4 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.opportunity-question { color: var(--muted); margin-top: 8px; }
.opportunity-detail h5 { margin: 18px 0 4px; }
.opportunity-evidence-list { margin: 0; }
.opportunity-evidence-list > div { padding-block: 12px; }
.opportunity-evidence-list > div + div { border-top: 1px solid #e7e7e4; }
.opportunity-evidence-list dt { font-weight: 650; }
.opportunity-evidence-list dd { margin: 4px 0 0; color: #555; }
.opportunity-evidence-list .opportunity-next {
  border-top: 0;
  border-left: 2px solid var(--accent);
  padding: 0 0 0 14px;
  margin-top: 12px;
}
.opportunity-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: .875rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 80rem) {
  .approach-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 40px;
  }
  .method-content > .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
  .approach-layout .step h3 { max-width: none; }
}

@media (max-width: 1279px) {
  .method-content { display: contents; }
  .method-content > .steps { order: 1; }
  .opportunity-panel { order: 2; }
  .approach-signals { max-width: 680px; order: 3; margin-top: 0; }
  .approach-heading-body { grid-template-columns: 1fr; gap: 24px; }
  .method-connections { justify-self: start; }
}

@media (max-width: 600px) {
  .approach-signals-visual img { aspect-ratio: 16 / 9; }
  .approach-signals-visual h3 { top: 16px; left: 16px; font-size: clamp(1.35rem, 5.8vw, 1.85rem); }
  .infratech-stack { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 28px; }
  .infratech-stack > div:nth-child(3)::before { content: none; }
  .approach-signals { margin-top: 32px; }
  .opportunity-panel { padding: 22px 20px; }
  .opportunity-pathway ol { column-gap: 22px; }
  .opportunity-pathway li + li::before { left: -19px; }
}

@media (max-width: 360px) {
  .opportunity-panel { padding-inline: 16px; }
  .opportunity-domain { width: 108px; }
  .opportunity-pathway ol { grid-template-columns: 1fr; row-gap: 25px; }
  .opportunity-pathway li + li::before { content: "↓"; left: 0; top: -25px; }
}

/* The method shares the Make Proof Travel graphic language. */
.method-connections { max-width: 560px; }
.method-map { height: clamp(230px, 22vw, 270px); }
.method-map a { min-width: 120px; text-align: center; padding: 15px 12px; background: #fff; border: 1px solid #ccc; color: #111; font-weight: 700; font-size: 1.125rem; }
.method-map a.is-active { background: #ffe2a3; border-color: #c78008; box-shadow: 0 2px 0 #c78008; color: #35260c; }
.method-map path.is-active { stroke: #c78008; stroke-width: 1.8px; }
.method-map a:focus-visible { outline: 3px solid #c78008; outline-offset: 4px; }
.method-proof { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 10px 14px; background: var(--pale); color: var(--accent-text); font-weight: 700; font-size: 1.125rem; }
.method-connections > .method-caption { color: #111; font-size: 1.375rem; font-weight: 700; text-align: center; margin-top: 8px; }
.method-connections [data-method-toggle] { display: block; margin: 12px 0 0 auto; }
.method-connections [data-method-toggle][hidden] { display: none; }
@media (max-width: 380px) { .method-map a { min-width: 88px; padding: 10px 6px; font-size: .875rem; } }

@media (min-width: 80rem) { .approach-heading-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; } }

/* Travelling proof: the same amber motion connects graph and value pathway. */
.opportunity-proof-caption { margin: 24px 0 16px; font-size: .9375rem; font-weight: 500; letter-spacing: .01em; color: var(--muted); }
.opportunity-flow { fill: none; stroke: #bc7b13; stroke-width: 3.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 9 91; stroke-dashoffset: 100; opacity: .4; animation: proof-travel 4s linear infinite; animation-play-state: paused; }
.opportunity-flow.is-active { opacity: 1; }
.opportunity-panel[data-flowing="true"] .opportunity-flow { animation-play-state: running; }
.opportunity-pathway li + li::before { color: #bc7b13; animation: pathway-travel 4s ease-in-out infinite; animation-play-state: paused; }
.opportunity-pathway li:nth-child(3)::before { animation-delay: .9s; }
.opportunity-panel[data-flowing="true"] .opportunity-pathway li + li::before { animation-play-state: running; }
@keyframes proof-travel { to { stroke-dashoffset: 0; } }
@keyframes pathway-travel { 0%,100% { transform: translateX(-3px); opacity: .45; } 65% { transform: translateX(3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .opportunity-flow { display: none; animation: none; }
  .opportunity-pathway li + li::before { animation: none; }
}

.method-map path.method-inflow { stroke: #bc7b13; stroke-width: 3.5px; stroke-linecap: round; stroke-dasharray: 9 91; stroke-dashoffset: 100; animation: proof-travel 4s linear infinite; animation-play-state: paused; }
.method-connections[data-flowing="true"] .method-inflow { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .method-map path.method-inflow { display: none; animation: none; } }

/* Keep the method and its explanations together, with a quieter rhythm. */
.approach-heading-body { display: block; }
.approach-heading-body .section-intro { max-width: 760px; }
.method-content { display: block; }
.method-content > .method-connections { margin: 0 auto 40px; }
.method-map a { transition: background-color .8s ease, border-color .8s ease, box-shadow .8s ease; }
.opportunity-domain { transition: background-color .8s ease, border-color .8s ease, box-shadow .8s ease; }
@media (prefers-reduced-motion: reduce) { .method-map a, .opportunity-domain { transition: none; } }

.opportunity-explore-hint { margin: 20px 0 12px; padding-left: 12px; border-left: 3px solid var(--accent); color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.5; }

.method-content > .method-connections { max-width: none; padding: 28px; }
.diagram-heading h3 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -.035em; }
.diagram-heading .eyebrow { font-size: .875rem; letter-spacing: .065em; }
.method-map, .opportunity-graph { height: 230px; margin: 16px auto 4px; width: 100%; }
.method-connections > .method-caption, .opportunity-proof-caption { margin: 24px 0 16px; font-size: .9375rem; font-weight: 500; letter-spacing: .01em; color: var(--muted); line-height: 1.3; text-align: center; }
.opportunity-controls { justify-content: flex-end; }
@media (max-width: 600px) { .method-content > .method-connections { padding: 16px 0; } }

/* Book-inspired whiteboard treatment: quiet ink, moving amber evidence. */
.method-map a,
.opportunity-domain {
  background: #fff;
  border: 1.5px solid #52524d;
  border-radius: 5px 3px 6px 4px;
  color: #252521;
  font-weight: 600;
  box-shadow: none;
}
.method-map a.is-active,
.opportunity-domain.is-active {
  background: #fffaf0;
  border-color: #52524d;
  color: #252521;
  box-shadow: none;
}
.opportunity-domain.is-active::after { display: none; }
.method-map path[data-method-edge],
.opportunity-edge,
.opportunity-spoke,
.method-map path[data-method-edge].is-active,
.opportunity-edge.is-active,
.opportunity-spoke.is-active {
  stroke: #74746d;
  stroke-width: 1.35px;
  stroke-linecap: round;
}
.method-proof, .opportunity-proof {
  color: #343430;
  font-weight: 600;
  letter-spacing: .025em;
}
.method-map path.method-inflow,
.opportunity-flow,
.opportunity-flow.is-active {
  stroke: #d58a19;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  opacity: 1;
}

.method-proof, .opportunity-proof { text-transform: none; }

.evidence-collected { position:absolute; left:50%; top:65%; transform:translate(-50%,-50%); display:grid; grid-template-columns:repeat(2,6px); gap:5px; padding:4px; background:white; }
.evidence-collected i { width:6px; height:6px; border-radius:50%; background:#d58a19; opacity:0; animation-duration:12s; animation-timing-function:linear; animation-iteration-count:infinite; animation-play-state:paused; }
.opportunity-flow.evidence-pulse { opacity:0; animation-duration:12s; animation-timing-function:linear; }
.opportunity-panel[data-flowing="true"] .evidence-collected i { animation-play-state:running; }

.evidence-pulse-0 { animation-name: evidence-arrival-0; }
@keyframes evidence-arrival-0 { 0%, 0% { opacity:0; stroke-dashoffset:100; } 0.1% { opacity:1; stroke-dashoffset:100; } 22% { opacity:1; stroke-dashoffset:0; } 22.1%,100% { opacity:0; stroke-dashoffset:0; } }
.evidence-collected i:nth-child(1) { animation-name: evidence-store-0; }
@keyframes evidence-store-0 { 0%,21.9% {opacity:0} 22%,94% {opacity:1} 100% {opacity:0} }

.evidence-pulse-1 { animation-name: evidence-arrival-1; }
@keyframes evidence-arrival-1 { 0%, 14.9% { opacity:0; stroke-dashoffset:100; } 15.1% { opacity:1; stroke-dashoffset:100; } 37% { opacity:1; stroke-dashoffset:0; } 37.1%,100% { opacity:0; stroke-dashoffset:0; } }
.evidence-collected i:nth-child(2) { animation-name: evidence-store-1; }
@keyframes evidence-store-1 { 0%,36.9% {opacity:0} 37%,94% {opacity:1} 100% {opacity:0} }

.evidence-pulse-2 { animation-name: evidence-arrival-2; }
@keyframes evidence-arrival-2 { 0%, 29.9% { opacity:0; stroke-dashoffset:100; } 30.1% { opacity:1; stroke-dashoffset:100; } 52% { opacity:1; stroke-dashoffset:0; } 52.1%,100% { opacity:0; stroke-dashoffset:0; } }
.evidence-collected i:nth-child(3) { animation-name: evidence-store-2; }
@keyframes evidence-store-2 { 0%,51.9% {opacity:0} 52%,94% {opacity:1} 100% {opacity:0} }

.evidence-pulse-3 { animation-name: evidence-arrival-3; }
@keyframes evidence-arrival-3 { 0%, 44.9% { opacity:0; stroke-dashoffset:100; } 45.1% { opacity:1; stroke-dashoffset:100; } 67% { opacity:1; stroke-dashoffset:0; } 67.1%,100% { opacity:0; stroke-dashoffset:0; } }
.evidence-collected i:nth-child(4) { animation-name: evidence-store-3; }
@keyframes evidence-store-3 { 0%,66.9% {opacity:0} 67%,94% {opacity:1} 100% {opacity:0} }

.evidence-pulse-4 { animation-name: evidence-arrival-4; }
@keyframes evidence-arrival-4 { 0%, 72.9% { opacity:0; stroke-dashoffset:100; } 73.1% { opacity:1; stroke-dashoffset:100; } 94% { opacity:1; stroke-dashoffset:0; } 94.1%,100% { opacity:0; stroke-dashoffset:0; } }

@media(prefers-reduced-motion:reduce) { .evidence-collected i { animation:none; opacity:1; } .opportunity-flow.evidence-pulse { animation:none; display:none; } }

/* Quiet curved guides let the evidence read as a stream. */
.opportunity-spoke, .opportunity-spoke.is-active { stroke: #c6c6bf; stroke-width: 1px; }

/* Evidence remains visible; moving dots need no drawn guide lines. */
.opportunity-spoke, .opportunity-spoke.is-active { stroke: none; }
.evidence-collected { top: 69%; z-index: 2; }
.evidence-collected i { animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes evidence-store-0 { 0%,21.9% {opacity:0} 22%,100% {opacity:1} }
@keyframes evidence-store-1 { 0%,36.9% {opacity:0} 37%,100% {opacity:1} }
@keyframes evidence-store-2 { 0%,51.9% {opacity:0} 52%,100% {opacity:1} }
@keyframes evidence-store-3 { 0%,66.9% {opacity:0} 67%,100% {opacity:1} }

/* Centre the evidence collection within the three lenses. */
.opportunity-proof { top: 43%; }
.evidence-collected { top: 60%; }

.evidence-collected { grid-template-columns: repeat(3, 6px); }
.evidence-pulse-0 { animation-name: evidence-nine-arrival-0; }
@keyframes evidence-nine-arrival-0 { 0%,0% {opacity:0;stroke-dashoffset:100} 0.1% {opacity:1;stroke-dashoffset:100} 20% {opacity:1;stroke-dashoffset:0} 20.1%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-collected i:nth-child(1) { animation-name:evidence-nine-store-0; }
@keyframes evidence-nine-store-0 { 0%,19.9% {opacity:0} 20%,100% {opacity:1} }
.evidence-pulse-1 { animation-name: evidence-nine-arrival-1; }
@keyframes evidence-nine-arrival-1 { 0%,5.9% {opacity:0;stroke-dashoffset:100} 6.1% {opacity:1;stroke-dashoffset:100} 26% {opacity:1;stroke-dashoffset:0} 26.1%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-collected i:nth-child(2) { animation-name:evidence-nine-store-1; }
@keyframes evidence-nine-store-1 { 0%,25.9% {opacity:0} 26%,100% {opacity:1} }
.evidence-pulse-2 { animation-name: evidence-nine-arrival-2; }
@keyframes evidence-nine-arrival-2 { 0%,11.9% {opacity:0;stroke-dashoffset:100} 12.1% {opacity:1;stroke-dashoffset:100} 32% {opacity:1;stroke-dashoffset:0} 32.1%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-collected i:nth-child(3) { animation-name:evidence-nine-store-2; }
@keyframes evidence-nine-store-2 { 0%,31.9% {opacity:0} 32%,100% {opacity:1} }
.evidence-pulse-3 { animation-name: evidence-nine-arrival-3; }
@keyframes evidence-nine-arrival-3 { 0%,17.9% {opacity:0;stroke-dashoffset:100} 18.1% {opacity:1;stroke-dashoffset:100} 38% {opacity:1;stroke-dashoffset:0} 38.1%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-collected i:nth-child(4) { animation-name:evidence-nine-store-3; }
@keyframes evidence-nine-store-3 { 0%,37.9% {opacity:0} 38%,100% {opacity:1} }
.evidence-pulse-4 { animation-name: evidence-nine-arrival-4; }
@keyframes evidence-nine-arrival-4 { 0%,23.9% {opacity:0;stroke-dashoffset:100} 24.1% {opacity:1;stroke-dashoffset:100} 44% {opacity:1;stroke-dashoffset:0} 44.1%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-collected i:nth-child(5) { animation-name:evidence-nine-store-4; }
@keyframes evidence-nine-store-4 { 0%,43.9% {opacity:0} 44%,100% {opacity:1} }
.evidence-pulse-5 { animation-name: evidence-nine-arrival-5; }
@keyframes evidence-nine-arrival-5 { 0%,29.9% {opacity:0;stroke-dashoffset:100} 30.1% {opacity:1;stroke-dashoffset:100} 50% {opacity:1;stroke-dashoffset:0} 50.1%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-collected i:nth-child(6) { animation-name:evidence-nine-store-5; }
@keyframes evidence-nine-store-5 { 0%,49.9% {opacity:0} 50%,100% {opacity:1} }
.evidence-pulse-6 { animation-name: evidence-nine-arrival-6; }
@keyframes evidence-nine-arrival-6 { 0%,35.9% {opacity:0;stroke-dashoffset:100} 36.1% {opacity:1;stroke-dashoffset:100} 56% {opacity:1;stroke-dashoffset:0} 56.1%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-collected i:nth-child(7) { animation-name:evidence-nine-store-6; }
@keyframes evidence-nine-store-6 { 0%,55.9% {opacity:0} 56%,100% {opacity:1} }
.evidence-pulse-7 { animation-name: evidence-nine-arrival-7; }
@keyframes evidence-nine-arrival-7 { 0%,41.9% {opacity:0;stroke-dashoffset:100} 42.1% {opacity:1;stroke-dashoffset:100} 62% {opacity:1;stroke-dashoffset:0} 62.1%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-collected i:nth-child(8) { animation-name:evidence-nine-store-7; }
@keyframes evidence-nine-store-7 { 0%,61.9% {opacity:0} 62%,100% {opacity:1} }
.evidence-pulse-8 { animation-name: evidence-nine-arrival-8; }
@keyframes evidence-nine-arrival-8 { 0%,47.9% {opacity:0;stroke-dashoffset:100} 48.1% {opacity:1;stroke-dashoffset:100} 68% {opacity:1;stroke-dashoffset:0} 68.1%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-collected i:nth-child(9) { animation-name:evidence-nine-store-8; }
@keyframes evidence-nine-store-8 { 0%,67.9% {opacity:0} 68%,100% {opacity:1} }
.evidence-pulse-9 { animation-name: evidence-nine-arrival-9; }
@keyframes evidence-nine-arrival-9 { 0%,76.9% {opacity:0;stroke-dashoffset:100} 77.1% {opacity:1;stroke-dashoffset:100} 96% {opacity:1;stroke-dashoffset:0} 96.1%,100% {opacity:0;stroke-dashoffset:0} }

/* Match each moving dot precisely to its stored position. */
.evidence-collected { background: transparent; }
.evidence-collected i:nth-child(9) { animation-iteration-count: infinite; animation-name: evidence-handover; }
@keyframes evidence-handover { 0%,67.99% { opacity:0; } 68%,77% { opacity:1; } 77.01%,100% { opacity:0; } }
.opportunity-panel[data-evidence-built="true"] .evidence-pulse-0,
.opportunity-panel[data-evidence-built="true"] .evidence-pulse-1,
.opportunity-panel[data-evidence-built="true"] .evidence-pulse-2,
.opportunity-panel[data-evidence-built="true"] .evidence-pulse-3,
.opportunity-panel[data-evidence-built="true"] .evidence-pulse-4,
.opportunity-panel[data-evidence-built="true"] .evidence-pulse-5,
.opportunity-panel[data-evidence-built="true"] .evidence-pulse-6,
.opportunity-panel[data-evidence-built="true"] .evidence-pulse-7 { display:none; }
@media(prefers-reduced-motion:reduce) { .evidence-collected i:nth-child(9) { animation:none; opacity:1; } }

/* Continuous arrivals and departures overlap: no batch gate. */
.evidence-collected i:nth-child(1) { animation: evidence-continuous-store-0 12s linear infinite; animation-play-state:paused; }
@keyframes evidence-continuous-store-0 { 0%,19.99% {opacity:0} 20%,28% {opacity:1} 28.01%,100% {opacity:0} }
.evidence-collected i:nth-child(5) { animation: evidence-continuous-store-4 12s linear infinite; animation-play-state:paused; }
@keyframes evidence-continuous-store-4 { 0%,43.99% {opacity:0} 44%,52% {opacity:1} 52.01%,100% {opacity:0} }
.evidence-collected i:nth-child(9) { animation: evidence-continuous-store-8 12s linear infinite; animation-play-state:paused; }
@keyframes evidence-continuous-store-8 { 0%,67.99% {opacity:0} 68%,76% {opacity:1} 76.01%,100% {opacity:0} }
.evidence-pulse-9 { animation-name:evidence-continuous-out-9; }
@keyframes evidence-continuous-out-9 { 0%,28% {opacity:0;stroke-dashoffset:100} 28.01% {opacity:1;stroke-dashoffset:100} 48% {opacity:1;stroke-dashoffset:0} 48.01%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-pulse-10 { animation-name:evidence-continuous-out-10; }
@keyframes evidence-continuous-out-10 { 0%,52% {opacity:0;stroke-dashoffset:100} 52.01% {opacity:1;stroke-dashoffset:100} 72% {opacity:1;stroke-dashoffset:0} 72.01%,100% {opacity:0;stroke-dashoffset:0} }
.evidence-pulse-11 { animation-name:evidence-continuous-out-11; }
@keyframes evidence-continuous-out-11 { 0%,76% {opacity:0;stroke-dashoffset:100} 76.01% {opacity:1;stroke-dashoffset:100} 96% {opacity:1;stroke-dashoffset:0} 96.01%,100% {opacity:0;stroke-dashoffset:0} }

@media(prefers-reduced-motion:reduce) { .evidence-collected i { animation:none !important; opacity:1; } }

/* Our method uses the same evidence collection and continuous handover. */
.method-proof { top:43%; }
.method-map .evidence-collected { top:60%; }
.method-map path.evidence-pulse {
  stroke:#d58a19; stroke-width:6px; stroke-linecap:round;
  stroke-dasharray:0 100; stroke-dashoffset:100; fill:none;
}
.method-connections[data-flowing="true"] .evidence-pulse,
.method-connections[data-flowing="true"] .evidence-collected i { animation-play-state:running; }
@media(prefers-reduced-motion:reduce) { .method-map path.evidence-pulse { display:none; animation:none; } }

.method-map path.method-guide { fill:none; stroke:#d7d7d1; stroke-width:1px; stroke-linecap:round; vector-effect:non-scaling-stroke; }

.proof-legend-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#d58a19; margin-right:9px; vertical-align:middle; }

/* Consistent quiet connections in both evidence diagrams. */
.opportunity-spoke, .opportunity-spoke.is-active {
  stroke: #d7d7d1;
  stroke-width: 1px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Phone layouts: keep diagrams spatial, but stack prose and value pathways. */
.opportunity-toggle{min-height:44px;min-width:72px}
@media(max-width:1279px){.method-content>.method-connections{max-width:680px;margin-inline:0}.opportunity-panel{max-width:680px}}
@media(max-width:900px){.method-content>.steps{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
  .opportunity-panel{padding:24px 16px}.opportunity-domain{font-size:1rem;width:43%;min-width:110px;min-height:48px}
  .method-map a{font-size:1rem;min-width:100px;min-height:48px;padding:12px 8px}
  .method-map,.opportunity-graph{height:248px}
  .opportunity-pathway ol{grid-template-columns:minmax(0,1fr);row-gap:28px;font-size:1rem}
  .opportunity-pathway li+li::before{content:'↓';left:0;top:-26px;animation:none}
  .opportunity-proof,.method-proof{font-size:1.0625rem}
}
@media(max-width:360px){.opportunity-domain,.method-map a{font-size:.9375rem}}

/* The method describes the work; the triangle selects its deliverable examples. */
.approach-layout.method-overview{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
.method-overview .method-content{display:block}
.method-overview .method-content>.method-connections{padding:0;margin:0;max-width:none}
.method-overview>.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.method-overview .step h3{font-size:1.5rem}
.method-overview .step p{font-size:1rem}
.method-overview .diagram-heading{margin-bottom:26px}
.case-explorer-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:36px 0;border-top:1px solid var(--line)}
.case-explorer-intro>.eyebrow{margin-bottom:18px}
.case-explorer-intro h3{font-size:clamp(1.65rem,2.5vw,2rem);line-height:1.15}
.case-explorer-intro .examples-intro{margin-bottom:20px}
.case-selection{font-size:.9375rem;font-weight:600;margin-top:22px}
.case-explorer-note{font-size:.8125rem;color:var(--muted);margin-top:18px}
.case-selector{max-width:none;padding:0;order:initial}
.case-selector .opportunity-graph{height:248px;max-width:440px;margin-block:0 12px}
.case-selector .opportunity-domain[aria-pressed="true"]{background:#fff1cd;border:2px solid #bc7b13}
.case-selector .opportunity-proof{font-size:1.0625rem;text-decoration:none}
.case-selector .opportunity-proof:hover{background:#fff1cd;color:#8f5c0e}
.case-selector .opportunity-proof:focus-visible{outline:2px solid #bc7b13;outline-offset:4px}
.case-selector .opportunity-proof-caption{margin-block:16px 12px}
.case-selector .opportunity-controls{justify-content:flex-end}
.case-selector .opportunity-toggle{font-size:.875rem;min-width:64px;padding:6px 12px}
.output-examples.is-interactive>.output-example{border:0}
.output-examples.is-interactive>.output-example[hidden]{display:none!important}
.output-examples.is-interactive .example-body{margin-bottom:0}
.example-register:target{outline:2px solid #bc7b13;outline-offset:6px;scroll-margin-top:16px}
@media(max-width:1100px){.approach-layout.method-overview{grid-template-columns:minmax(0,1fr)}.method-overview .method-content>.method-connections{max-width:600px;margin-inline:auto}.method-overview>.steps{gap:32px 40px}}
@media(max-width:900px){.case-explorer-heading{grid-template-columns:minmax(0,1fr);gap:24px}.case-selector{max-width:560px;margin-inline:auto}.case-explorer-intro .examples-intro{max-width:650px}}
@media(max-width:600px){.method-overview>.steps{grid-template-columns:minmax(0,1fr)}.case-explorer-heading{padding-block:28px;gap:28px}.case-selector .opportunity-graph{height:248px}.case-selector .opportunity-domain{width:43%;font-size:.9375rem}.method-overview .step h3{font-size:1.6rem}}

/* Explain the client decision before introducing a specific illustration. */
.case-purpose{padding:30px 0 34px;border-top:1px solid var(--line);max-width:780px}
.case-purpose>.eyebrow{margin-bottom:14px}
.case-purpose h3{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.15;margin-bottom:18px}
.case-purpose>p:last-child{color:var(--muted);font-size:1.0625rem;max-width:710px}
@media(max-width:600px){.case-purpose{padding-block:24px 28px}.case-purpose>p:last-child{font-size:1rem}}

/* A deliberate pause demonstrates the missing handover; passive pauses do not. */
.proof-controls{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:28px 0 0;min-height:66px}
.proof-controls .proof-caption{margin:0;padding-top:10px;max-width:30ch;color:var(--muted);font-size:.9375rem;line-height:1.5}
.proof-controls .opportunity-toggle{flex:0 0 auto;min-width:76px;min-height:44px;margin:0}
.proof-hold-note{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;font-size:.6875rem;line-height:1.4;font-weight:500;color:#756044;letter-spacing:0;white-space:nowrap}
.proof-hold-note[hidden]{display:none}
[data-proof-paused="true"] .method-commit,
.case-selector[data-proof-paused="true"] .domain-investment{background:#f5f4ef;border-color:#99968b;border-style:dashed;color:#66635a;box-shadow:none}
[data-proof-paused="true"] .evidence-outflow{visibility:hidden}
[data-proof-paused="true"] .proof-caption{color:var(--ink)}
[data-proof-paused="true"] .proof-legend-dot{background:transparent;border:1px solid #bc7b13}
@media(max-width:600px){.proof-controls{gap:12px}.proof-controls .proof-caption{font-size:.875rem}.proof-hold-note{font-size:.625rem}}

@media(max-width:1100px){.method-overview .method-content>.method-connections{margin-inline:0}}

.approach-layout.method-overview .method-content{margin-left:0;padding-left:0;justify-self:stretch}.approach-layout.method-overview .method-content>.method-connections{margin-left:0;margin-right:0;padding-left:0;justify-self:start}.method-overview .diagram-heading{text-align:left}