.approach-section { position:relative; padding:clamp(5.75rem,9vw,9rem) 0 clamp(6rem,10vw,9rem); overflow:hidden; background:var(--color-surface); scroll-margin-top:5.2rem; }.approach-section::before { content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--color-signal-rgb),.48),transparent); }.approach-section::after { content:""; position:absolute; right:-16%; top:14%; width:45%; aspect-ratio:1; opacity:.06; pointer-events:none; border:1px solid var(--color-signal); border-radius:50%; }
.approach-section .container { position:relative; z-index:1; }.approach-section__head { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(19rem,.7fr); column-gap:clamp(3rem,8vw,9rem); row-gap:1.25rem; margin-bottom:clamp(3rem,6vw,5.5rem); }.approach-section__head .micro-label { grid-column:1; }.approach-section__head h2 { grid-column:1; max-width:11ch; font-size:clamp(2.7rem,4.7vw,4.6rem); line-height:1; letter-spacing:-.055em; }.approach-section__head > p:last-child { grid-column:2; grid-row:2; align-self:end; max-width:34rem; margin:0; color:var(--color-text-muted); font-size:var(--text-body-lg); line-height:1.72; }
.decision-path { position:relative; min-height:43rem; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(3,1fr); margin:0; padding:0; list-style:none; border-top:var(--line); border-bottom:var(--line); }.decision-path__lines { position:absolute; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; }.decision-path__lines path { fill:none; stroke:rgba(var(--color-ink-rgb),.19); stroke-width:1.2; transition:stroke var(--duration-medium),stroke-width var(--duration-medium),opacity var(--duration-medium); }.decision-path__lines .decision-path__return { stroke:rgba(var(--color-signal-rgb),.34); stroke-dasharray:4 9; }.decision-path__traveller { fill:var(--color-signal); filter:drop-shadow(0 0 3px rgba(var(--color-signal-rgb),.3)); }
.decision-stage { position:relative; z-index:1; align-self:start; width:100%; max-width:13.4rem; padding:1rem .75rem .9rem; outline:none; background:rgba(247,248,245,.86); border:1px solid transparent; transition:background var(--duration-medium),border-color var(--duration-medium),transform var(--duration-fast) var(--ease-out),opacity var(--duration-medium); }.decision-stage::before { content:""; position:absolute; left:0; top:0; width:0; height:2px; background:var(--color-signal); transition:width var(--duration-medium) var(--ease-out); }.decision-stage__control { position:absolute; z-index:4; inset:0; width:100%; padding:0; cursor:pointer; background:transparent; border:0; }.decision-stage__control:focus-visible { outline:2px solid var(--color-signal); outline-offset:-3px; }.decision-stage__node { position:absolute; top:-.35rem; left:-.35rem; width:.7rem; aspect-ratio:1; background:var(--color-surface); border:1px solid var(--color-signal-strong); border-radius:50%; box-shadow:0 0 0 .18rem var(--color-surface); transition:background var(--duration-medium),box-shadow var(--duration-medium),transform var(--duration-medium) var(--ease-out); }.decision-stage__number { margin:0; color:var(--color-signal-strong); font-size:.62rem; font-weight:600; letter-spacing:.08em; }.decision-stage h3 { margin:.55rem 0 .52rem; font-size:clamp(1.08rem,1.4vw,1.35rem); line-height:1.06; letter-spacing:-.035em; }.decision-stage > p:not(.decision-stage__number):not(.decision-stage__question) { margin:0; color:var(--color-text-muted); font-size:.78rem; line-height:1.52; }.decision-stage__question { display:grid; gap:.2rem; margin:.8rem 0 0; color:var(--color-text); font:600 .73rem/1.38 var(--font-display); letter-spacing:-.01em; }.decision-stage__question span { color:var(--color-signal-strong); font:600 .53rem/1.2 var(--font-body); letter-spacing:.07em; text-transform:uppercase; }
.decision-stage--understand { grid-column:1 / span 3; grid-row:1; margin-top:1.25rem; }.decision-stage--diagnose { grid-column:3 / span 3; grid-row:2; margin-top:.45rem; }.decision-stage--prioritize { grid-column:6 / span 3; grid-row:1; margin-top:1.9rem; padding:1.2rem 1rem 1rem; background:rgba(217,238,234,.72); border-color:rgba(var(--color-signal-rgb),.34); }.decision-stage--prioritize .decision-stage__node { width:.9rem; background:var(--color-signal); box-shadow:0 0 0 .28rem rgba(var(--color-signal-rgb),.12); }.decision-stage--design { grid-column:9 / span 3; grid-row:2; margin-top:1.65rem; }.decision-stage--activate { grid-column:10 / span 3; grid-row:3; align-self:end; margin-bottom:1.05rem; }.decision-stage--refine { grid-column:5 / span 3; grid-row:3; align-self:end; margin-bottom:1.2rem; }.decision-path__legend { position:absolute; z-index:1; right:0; bottom:-2rem; max-width:34rem; color:var(--color-text-muted); font-size:.62rem; font-weight:600; letter-spacing:.055em; text-align:right; text-transform:uppercase; }
.decision-stage:hover,.decision-stage:focus-within,.decision-stage.is-active { background:#fff; border-color:rgba(var(--color-signal-rgb),.4); transform:translateY(-2px); }.decision-stage:hover::before,.decision-stage:focus-within::before,.decision-stage.is-active::before { width:56%; }.decision-stage:hover .decision-stage__node,.decision-stage:focus-within .decision-stage__node,.decision-stage.is-active .decision-stage__node { background:var(--color-signal); box-shadow:0 0 0 .25rem rgba(var(--color-signal-rgb),.1); transform:scale(1.04); }.decision-path[data-active] .decision-stage:not(.is-active) { opacity:.84; }.decision-path[data-active] .decision-path__lines path { opacity:.3; }.decision-path[data-active] .decision-path__lines path.is-active { opacity:1; stroke:var(--color-signal-strong); stroke-width:1.75; stroke-dasharray:4 8; }
.approach-section__exit { position:absolute; left:50%; bottom:0; width:min(100% - (var(--gutter) * 2),var(--container-main)); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(var(--color-ink-rgb),.12),rgba(var(--color-signal-rgb),.42),transparent); }.approach-section__exit i { position:absolute; right:34%; top:-2px; width:5px; aspect-ratio:1; background:var(--color-signal); }@keyframes decision-segment { to { stroke-dashoffset:-45; } }
@media (max-width:900px) { .approach-section__head { grid-template-columns:1fr; gap:1.25rem; }.approach-section__head .micro-label,.approach-section__head h2,.approach-section__head > p:last-child { grid-column:1; grid-row:auto; max-width:44rem; }.decision-path { min-height:39rem; }.decision-stage--understand { grid-column:1 / span 4; }.decision-stage--diagnose { grid-column:3 / span 4; }.decision-stage--prioritize { grid-column:6 / span 3; }.decision-stage--design { grid-column:9 / span 4; }.decision-stage--activate { grid-column:9 / span 4; }.decision-stage--refine { grid-column:4 / span 4; } }
@media (max-width:640px) { .approach-section { padding-block:4.8rem 5.8rem; }.approach-section__head { margin-bottom:2.8rem; }.approach-section__head h2 { font-size:clamp(2.45rem,10vw,2.9rem); }.approach-section__head > p:last-child { font-size:.97rem; line-height:1.67; }.decision-path { min-height:0; display:grid; grid-template-columns:1fr; grid-template-rows:none; gap:0; padding:0 0 0 2.2rem; border-top:var(--line); border-bottom:var(--line); }.decision-path::before { content:""; position:absolute; top:1.2rem; bottom:3.7rem; left:.78rem; width:1px; background:linear-gradient(var(--color-signal-strong),rgba(var(--color-signal-rgb),.15)); }.decision-path__lines { display:none; }.decision-stage { grid-column:1 !important; grid-row:auto !important; max-width:none; min-height:0; margin:0 !important; padding:1.15rem 0 1.2rem .8rem; background:transparent !important; border:0 !important; border-bottom:var(--line) !important; transform:none !important; }.decision-stage:last-of-type { border-bottom:0 !important; }.decision-stage::before { left:-1.4rem; top:1.55rem; width:.55rem !important; height:.55rem; border-radius:50%; opacity:.7; }.decision-stage__node { top:1.42rem; left:-1.62rem; width:.72rem; background:var(--color-surface); box-shadow:0 0 0 .18rem var(--color-surface); }.decision-stage--prioritize { margin-left:-.45rem !important; padding-left:1.25rem; background:rgba(217,238,234,.42) !important; }.decision-stage--prioritize .decision-stage__node { background:var(--color-signal); }.decision-stage h3 { margin:.42rem 0 .45rem; font-size:1.34rem; }.decision-stage > p:not(.decision-stage__number):not(.decision-stage__question) { font-size:.86rem; line-height:1.57; }.decision-stage__question { margin-top:.65rem; font-size:.78rem; }.decision-path[data-active] .decision-stage:not(.is-active) { opacity:1; }.decision-path__legend { position:static; max-width:none; margin:1rem 0 1.2rem -.9rem; color:var(--color-signal-strong); text-align:left; }.decision-path__legend::after { content:"↗ evidence improves the next decision"; display:block; margin-top:.35rem; color:var(--color-text-muted); font-size:.6rem; letter-spacing:.04em; text-transform:none; } }
@media (prefers-reduced-motion:reduce) { .decision-path__traveller { display:none; }.decision-path[data-active] .decision-path__lines path.is-active { animation:none; } }