/* Extend the existing editorial brand: a working process, not a decorative photo. */
.approach{row-gap:var(--space-2xl)}
.approach-intro{grid-column:1/-1}
.approach-label{font-family:var(--font-display);font-size:var(--text-small);font-weight:600;color:var(--color-accent);margin-bottom:var(--space-md)}
.approach-intro>p:not(.approach-label){margin-top:var(--space-lg);color:var(--color-ink-2)}
.approach .approach-steps{margin-top:0}
.framework-panel{--framework-duration:720ms;min-width:0;align-self:start;padding:var(--space-lg);background:var(--color-paper-2);border:var(--rule) solid var(--color-rule);border-radius:var(--radius-small)}
.framework-drawing{display:block;width:100%;height:auto;overflow:visible;margin:0;color:var(--color-accent)}
.flow-grid-dot{fill:var(--color-rule)}
.flow-current{stroke:var(--color-muted);stroke-width:2;stroke-dasharray:4 6;transition:opacity var(--dur-story)}
.flow-endpoints{stroke:var(--color-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:var(--color-paper-2)}
.flow-node{transition:transform var(--framework-duration) var(--ease-out)}
.flow-node-0{transform:translate(106px,122px)}
.flow-node-1{transform:translate(246px,180px)}
.flow-node-2{transform:translate(386px,98px)}
.flow-node-box{fill:var(--color-paper);stroke:var(--color-muted);stroke-width:1.5;transition:fill var(--dur-story),stroke var(--dur-story)}
.flow-work-lines{stroke:var(--color-muted);stroke-width:2;stroke-linecap:round;transition:opacity var(--dur-story)}
.flow-check{stroke:var(--color-paper);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--dur-story)}
.flow-waits{stroke:var(--color-accent);stroke-width:2;transition:opacity var(--dur-story)}
.flow-waits circle{stroke-width:1;stroke-dasharray:2 3}
.flow-improved{stroke:var(--color-accent);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--framework-duration) var(--ease-out)}
.flow-feedback{stroke:var(--color-accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--framework-duration) var(--ease-out)}
.flow-feedback-tip{stroke:var(--color-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--dur-story)}
.flow-team{stroke:var(--color-accent);stroke-width:2;fill:var(--color-paper-2);opacity:0;transform:translateY(8px);transition:opacity var(--dur-story),transform var(--framework-duration) var(--ease-out)}
.flow-team-connection{stroke:var(--color-muted);stroke-width:1.5}
.flow-review{stroke:var(--color-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--dur-story)}
.flow-review circle{fill:var(--color-paper-2)}
.framework-panel[data-phase="1"] .flow-node-0,.framework-panel[data-phase="2"] .flow-node-0{transform:translate(106px,142px)}
.framework-panel[data-phase="1"] .flow-node-1,.framework-panel[data-phase="2"] .flow-node-1{transform:translate(246px,142px)}
.framework-panel[data-phase="1"] .flow-node-2,.framework-panel[data-phase="2"] .flow-node-2{transform:translate(386px,142px)}
.framework-panel[data-phase="1"] .flow-current,.framework-panel[data-phase="2"] .flow-current,.framework-panel[data-phase="1"] .flow-waits,.framework-panel[data-phase="2"] .flow-waits{opacity:0}
.framework-panel[data-phase="1"] .flow-improved,.framework-panel[data-phase="2"] .flow-improved,.framework-panel[data-phase="2"] .flow-feedback{stroke-dashoffset:0}
.framework-panel[data-phase="1"] .flow-node-box,.framework-panel[data-phase="2"] .flow-node-box{stroke:var(--color-accent)}
.framework-panel[data-phase="1"] .flow-team,.framework-panel[data-phase="2"] .flow-team{opacity:1;transform:none}
.framework-panel[data-phase="2"] .flow-node-box{fill:var(--color-accent)}
.framework-panel[data-phase="2"] .flow-work-lines{opacity:0}
.framework-panel[data-phase="2"] .flow-check,.framework-panel[data-phase="2"] .flow-review,.framework-panel[data-phase="2"] .flow-feedback-tip{opacity:1}
@media(min-width:40rem){.framework-panel{padding:var(--space-xl)}}
@media(min-width:62rem){
  .approach{align-items:start}
  .approach-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-md) var(--space-4xl);align-items:end;margin-bottom:var(--space-lg)}
  .approach-label{grid-column:1/-1;margin:0}
  .approach-intro h2{max-width:21ch}
  .approach-intro>p:not(.approach-label){margin:0;padding-bottom:.25rem;max-width:50ch}
  .framework-panel{grid-column:2;grid-row:2}
  .approach-copy{grid-column:1;grid-row:2}
  .story-enhanced .approach-copy{padding-bottom:var(--space-3xl)}
}
@media(min-width:62rem) and (max-height:820px){
  .framework-panel{padding:var(--space-lg)}
}
@media(min-width:62rem) and (min-height:750px) and (prefers-reduced-motion:no-preference){
  .story-enhanced .framework-panel{position:sticky;top:calc(var(--header-height) + var(--space-lg))}
  .story-enhanced .approach-steps li{min-height:clamp(240px,34svh,360px)}
  .story-enhanced .approach-copy{padding-bottom:var(--space-3xl)}
}
@media(prefers-reduced-motion:reduce){.framework-panel *{transition:none!important}}
@media print{.framework-panel{position:static!important}}